@charset "utf-8";
@import url("../fontawesome-free-5.9.0-web/css/all.css");
/*@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|La+Belle+Aurore|Qwigley|Satisfy&display=swap');*/
/*@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Mrs+Saint+Delafield&display=swap');*/
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@font-face {
	font-family: myFont;
	src: url("../font/Heebo/Heebo-Light.ttf");
}

@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url('../font/kaushan-script-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/kaushan-script-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/kaushan-script-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/kaushan-script-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../font/kaushan-script-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/kaushan-script-v14-latin-regular.svg#KaushanScript') format('svg'); /* Legacy iOS */
}
html, body {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
	font-size: 16px;
	color: #202020;
}
body.ueber_mich {
	background: url("../img/bg_ueber_mich_desctop.jpg") no-repeat center top/cover;
}
body.andere, body.kontakt {
	background: url("../img/Hintergrund_Michelangelo.jpg") no-repeat center top/cover;
}
body.ie section#jquery_gallery h2 {
	background: none;
}

body.kontakt {
	height: 100vh;
}
img {
	max-width: 100%;
	height: auto;
}
.wrapped {
	max-width: 950px;
	margin: 0 auto;
}
/***-----------<<--HEADER andere-->>--------------***/
header.andere {
	background-color: #000;
	margin-bottom: 3rem;
}
.topnav_andere ul li .active {
	color: #cd06c1;
}
.topnav_andere ul li .active {
	color: #cd06c1;
}
.topnav_andere ul {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	list-style: none;
	z-index: 10;
	margin-bottom: 3rem;
}
.topnav_andere ul li {
	text-align: center;
}
.topnav_andere ul li a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 1rem 1.5rem;
	font-size: 1.1rem;
}
.topnav_andere ul li a:hover {
	color: #cd06c1;
}
/*-----------<<--MAIN-->>---------------*/
main {
	display: block;
}
article.ueber_mich {
	padding-bottom: 3rem;
	text-align: justify;
}
.zwei_column {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
#column_1 {
	margin-right: 3rem;
	flex-basis: 50%;
}
#column_2 {
	flex-basis: 50%;
}
article.ueber_mich h2 {
	padding-top: 1rem;
	font-size: 1.3rem;
}
/*-----------<<--FOOTER-->>---------------*/
footer {
	background-color: #000;
	width: 100%;
}
footer.kontakt {
	position: absolute;
	bottom: 0;
}
footer ul {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
}
footer ul li {
	flex-basis: 30%;
	text-align: center;
}
footer ul li a {
	display: block;
	text-decoration: none;
	padding: .6rem 0rem;
	color: #fff;
	font-size: 1.5rem;
	transition: 0.2s;
}
footer ul li a:hover {
	color: #cd06c1;
	font-size: 1.3rem;
}
footer ul li:last-child a {
	font-size: 1.1rem;
}
footer ul li:last-child:hover a {
	font-size: 1rem;
}
/*-------------crossed line-----------------*/
.crossed_line {
	padding: 0px;
	z-index: 1000;
}
.horizon_line_tl, .vertical_line_tl, .horizon_line_tr, .vertical_line_tr, .horizon_line_bl, .vertical_line_bl, .horizon_line_br, .vertical_line_br {
	z-index: 1;
	position: absolute;
	transition: 0.3s all ease;
}
.horizon_line_tl, .horizon_line_tr, .horizon_line_bl, .horizon_line_br {
	border-top: 2px solid #cd06c1;
}
.vertical_line_tl, .vertical_line_tr, .vertical_line_bl, .vertical_line_br {
	border-left: 2px solid #cd06c1;
}
.text_link {
	text-decoration: none;
	color: #cd06c1;
	display: inline-block;
	transition: 0.2s;
}
.text_link:hover {
	transform: scale(1.2);
}

/*###########################################	
                     Index
#############################################*/
/*-----------<<--HEADER-->>---------------*/
#bg_1 {
	height: 100vh;
	width: 100%;
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	text-align: center;
	position: relative;
	z-index: 0;
}
body.ie #bg_1{
	height: 96vh;
}
#bg_1 p {
	background: linear-gradient(90deg, #000, #000, #202020, #A8A8A8, #fff, #fff, #fff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
#kreativ{
	display: none;
}
body.ie #kreativ {
    max-width: 490px;
    position: relative;
	display: block;
  }
body.ie #bg_1 p {
	color: #fff;
	background: none;
}
body.ie #bg_1 h1 {
	font-size: 5.5rem;
  color: #cd06c1;
  font-family: 'Qwigley', cursive;
  font-weight: 300;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  animation: type 4s steps(40, end) forwards;
  animation-delay: 0s;
  z-index: 100;
	
}
@-webkit-keyframes type {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes type {
  from {
    width: 0;
  }
  to {
    width: 100%
  }
}
/*-------------handwritten effect-----------------*/
#handwr_effect {
	margin: auto;
	position: relative;
}
.cls-3, .cls-5, .cls-21 {
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	stroke-width: 6px;
	-webkit-animation: write 1s linear forwards;
	animation: write 1s linear forwards;
	stroke: #cd06c1;
}
#r_stroke {
	animation-delay: 0.4s;
}
#e_stroke_1_kreativ {
	animation-delay: 0.6s;
}
#a_stroke_kreativ {
	animation-delay: 0.8s;
}
#t_stroke_basic {
	animation-delay: 1.1s;
}
#t_stroke_strich {
	animation-delay: 1.3s;
}
#i_stroke_basic {
	animation-delay: 1.5s;
}
#i_punkt_stroke_kreativ {
	animation-delay: 1.7s;
}
#v_stroke {
	animation-delay: 1.8s;
}
#e_stroke_kreativ_2 {
	animation-delay: 2.1s;
}
#s_stroke_kreativ {
	animation-delay: 2.3s;
}
#w_stroke {
	animation-delay: 3s;
}
#e_stroke_web {
	animation-delay: 3.6s;
}
#b_stroke {
	animation-delay: 3.8s;
}
#web_strich_stroke {
	animation-delay: 4.2s;
}
#d_stroke_straight {
	animation-delay: 4.4s;
}
#d_stroke_rund {
	animation-delay: 4.7s;
}
#e_stroke_design {
	animation-delay: 5s;
}
#s_stroke_design {
	animation-delay: 5.2s;
}
#i_stroke_design {
	animation-delay: 5.4s;
}
#i_punkt_stroke_design {
	animation-delay: 5.6s;
}
#g_stroke {
	animation-delay: 5.7s;
}
#n_stroke {
	animation-delay: 6.3s;
}
@-webkit-keyframes write {
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes write {
	100% {
		stroke-dashoffset: 0;
	}
}
/*-------------handwritten effect END-----------------*/

#topnav_index ul {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	list-style: none;
	z-index: 1000;
}
#topnav_index ul li {
	text-align: center;
}
body.ie #topnav_index ul li a {
		color: #fff;
		background: none;		
	}
body.ie #topnav_index ul li a:hover {
		color: #cd06c1;
				
	}
body.ie #arrow_down {
	display: none;
}
/*-----------<<--MAIN INDEX-->>---------------*/
main.index {
	text-align: center;
}
main.index ul li {
	list-style: none;
}
/*.zwei_column {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}*/
.element_dsgn {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: center;
}
.element_dsgn li {
		border: 2px solid #202020;
		margin: 2rem 0;	
	}
.li_2 li{
	border-color: rgba(0, 0, 0, 0);
	margin-left: 5px;
}
.li_1 li:hover {
		color: #cd06c1;
		cursor: default;
	border: 2px solid #D544D2;
		text-shadow: 0 0 15px #D544D2 ,
		             0 0 30px #D544D2;		
		box-shadow: 0 0 15px #D544D2,
		             0 0 30px #D544D2;
	}
.li_2 li:hover {
		color: #0A8072;
		cursor: default;
	border: 2px solid #1BCCB8;
		text-shadow: 0 0 15px #1BCCB8,
		             0 0 30px #1BCCB8;		
		box-shadow: 0 0 15px #1BCCB8,
		             0 0 30px #1BCCB8;
	}

/*-------------crossed line-----------------*/
#meine_prj .horizon_line_tl {
	height: 0;
	width: 15vw;
	left: 0;
}
#meine_prj:hover .horizon_line_tl {
	width: 0;
}
#meine_prj .vertical_line_tl {
	height: 15vh;
	width: 0;
	top: -12px;
	left: 12px;
}
#meine_prj:hover .vertical_line_tl {
	height: 0;
}
#meine_prj .horizon_line_tr {
	height: 0;
	width: 0vw;
	right: 0;
}
#meine_prj:hover .horizon_line_tr {
	width: 15vw;
}
#meine_prj .vertical_line_tr {
	height: 0vh;
	width: 0;
	top: -12px;
	right: 12px;
}
#meine_prj:hover .vertical_line_tr {
	height: 15vh;
}
#meine_prj .horizon_line_bl {
	height: 0;
	width: 0vw;
	bottom: 48px;
	left: 0px;
}
#meine_prj:hover .horizon_line_bl {
	width: 15vw;
}
#meine_prj .vertical_line_bl {
	height: 0vh;
	width: 0;
	bottom: 36px;
	left: 12px;
}
#meine_prj:hover .vertical_line_bl {
	height: 15vh;
}
#meine_prj .horizon_line_br {
	height: 0;
	width: 15vw;
	bottom: 48px;
	right: 0px;
}
#meine_prj:hover .horizon_line_br {
	width: 0;
}
#meine_prj .vertical_line_br {
	height: 15vh;
	width: 0;
	bottom: 36px;
	right: 12px;
}
#meine_prj:hover .vertical_line_br {
	height: 0;
}
/*-------------crossed line end-----------------*/
/*-----------Jquery Galerry---------------*/
#jquery_gallery {
	padding-top: 0;
	position: relative;
}
#jquery_gallery h2 {
	padding-bottom: 1.5rem;
	padding-top: 0rem;
	animation: flow 7s ease-in-out infinite;
	background: linear-gradient(-60deg, #cd06c1, #4DC5D6, #cd06c1, #ff6bdb, #cd06c1);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@-webkit-keyframes flow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes flow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/*###########################################	
                    ueber_mich
#############################################*/
/*--Personliche Daten------*/
#person_dat img {
	display: block;
}
#person_dat {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
#person_dat h2 {
	padding: 1rem 0rem 0rem 1rem;
}
main table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 1rem;
}
main td {
	padding-left: 1rem;
	padding-top: 0.6rem;
}
#person_dat_t {
	position: relative;
}
#person_dat .horizon_line_tl {
	height: 0;
	width: 7vw;
	left: -12px;
}
#person_dat:hover .horizon_line_tl {
	width: 0;
}
#person_dat .vertical_line_tl {
	height: 7vh;
	width: 0;
	top: -12px;
	left: 0px;
}
#person_dat:hover .vertical_line_tl {
	height: 0;
}
#person_dat .horizon_line_tr {
	height: 0;
	width: 0vw;
	right: 0;
}
#person_dat:hover .horizon_line_tr {
	width: 7vw;
}
#person_dat .vertical_line_tr {
	height: 0vh;
	width: 0;
	top: -12px;
	right: 12px;
}
#person_dat:hover .vertical_line_tr {
	height: 7vh;
}
#person_dat .horizon_line_bl {
	height: 0;
	width: 0vw;
	bottom: 0px;
	left: -12px;
}
#person_dat:hover .horizon_line_bl {
	width: 7vw;
}
#person_dat .vertical_line_bl {
	height: 0vh;
	width: 0;
	bottom: -12px;
	left: 0px;
}
#person_dat:hover .vertical_line_bl {
	height: 7vh;
}
#person_dat .horizon_line_br {
	height: 0;
	width: 7vw;
	bottom: 0px;
	right: 0px;
}
#person_dat:hover .horizon_line_br {
	width: 0;
}
#person_dat .vertical_line_br {
	height: 7vh;
	width: 0;
	bottom: -12px;
	right: 12px;
}
#person_dat:hover .vertical_line_br {
	height: 0;
}
/*--Ausbildung + Kenntnisse------*/
#ausbilld h2 {
	margin: 1.5rem 0 1rem 0;
}
ul.marker_square {
	list-style: none;
	list-style-position: inside;
}
ul.marker_square li {
	padding-left: 2.2rem;
	padding-bottom: 1rem;
}
.marker_square li::before {
	content: "\25A0";
	color: #cd06c1;
	font-weight: bold;
	display: inline-block;
	width: 2.2rem;
	margin-left: -2.2rem;
}
/*--Berufliche Stationen------*/
#beruf_st h3 {
	color: #cd06c1;
	padding: 0.5rem 0;
	font-size: 1rem;
}
#beruf_st p {
	padding-bottom: 0.5rem;
}
#checker1 {
	display: none;
}
#inhalt1 {
	max-height: 0;
	transition: max-height 0.75s ease-out;
	overflow: hidden;
}
#checker1:checked ~ #inhalt1 {
	max-height: 1500px;
	transition: max-height 1s ease-in;
}
#inhalt1 ul li {
	opacity: 0;
	transition: opacity 0.75s ease-out;
}
#checker1:checked ~ #inhalt1 ul li {
	opacity: 1;
	transition: opacity 1s ease-in;
}
#checker2 {
	display: none
}
#inhalt2 {
	max-height: 0;
	transition: max-height 0.75s ease-out;
	overflow: hidden;
}
#checker2:checked ~ #inhalt2 {
	max-height: 1500px;
	transition: max-height 1s ease-in;
}
#inhalt2 ul li {
	opacity: 0;
	transition: opacity 0.75s ease-out;
}
#checker2:checked ~ #inhalt2 ul li {
	opacity: 1;
	transition: opacity 1s ease-in;
}
#checker3 {
	display: none
}
#inhalt3 {
	max-height: 0;
	transition: max-height 0.75s ease-out;
	overflow: hidden;
}
#checker3:checked ~ #inhalt3 {
	max-height: 1500px;
	transition: max-height 1s ease-in;
}
#inhalt3 ul li {
	opacity: 0;
	transition: opacity 0.75s ease-out;
}
#checker3:checked ~ #inhalt3 ul li {
	opacity: 1;
	transition: opacity 1s ease-in;
}
ul.marker_circle {
	list-style: none;
	list-style-position: inside;
}
ul.marker_circle li {
	padding-left: 2.2rem;
	/*padding-bottom: 1rem;*/
	font-size: 1rem;
}
.marker_circle li::before {
	content: "\25CF";
	color: #cd06c1;
	font-weight: bold;
	display: inline-block;
	width: 2.2rem;
	margin-left: -2.2rem;
}
/*-----------<<--HOBBYS-->>---------------*/
#hobby {
	position: relative;
	margin-top: 3rem;
}
#hobby h2 {
	padding: 1.1rem;
}
#hobby .horizon_line_tl {
	height: 0;
	width: 7vw;
	left: 0px;
	top: 12px;
}
#hobby:hover .horizon_line_tl {
	width: 0;
}
#hobby .vertical_line_tl {
	height: 7vh;
	width: 0;
	top: 0px;
	left: 12px;
}
#hobby:hover .vertical_line_tl {
	height: 0;
}
#hobby .horizon_line_tr {
	height: 0;
	width: 0vw;
	right: 0;
	top: 12px;
}
#hobby:hover .horizon_line_tr {
	width: 7vw;
}
#hobby .vertical_line_tr {
	height: 0vh;
	width: 0;
	top: 0px;
	right: 12px;
}
#hobby:hover .vertical_line_tr {
	height: 7vh;
}
#hobby .horizon_line_bl {
	height: 0;
	width: 0vw;
	bottom: 0px;
	left: 0px;
}
#hobby:hover .horizon_line_bl {
	width: 7vw;
}
#hobby .vertical_line_bl {
	height: 0vh;
	width: 0;
	bottom: -12px;
	left: 12px;
}
#hobby:hover .vertical_line_bl {
	height: 7vh;
}
#hobby .horizon_line_br {
	height: 0;
	width: 7vw;
	bottom: 0px;
	right: 0px;
}
#hobby:hover .horizon_line_br {
	width: 0;
}
#hobby .vertical_line_br {
	height: 7vh;
	width: 0;
	bottom: -12px;
	right: 12px;
}
#hobby:hover .vertical_line_br {
	height: 0;
}
#hobby_galerie {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	text-align: center;
	margin: 1rem 1rem;
	padding: 0 0.2rem 2rem 0.2rem;
}
#hobby_galerie div {
	width: 25%;
	position: relative;
	margin: auto;
	filter: grayscale(1);
	transition: 1s ease all;
}
#hobby_galerie div img {
	display: block;
}
#hobby_galerie h4 {
	position: absolute;
	bottom: 0;
	right: 5px;
	margin-bottom: 5px;
	transition: all 0.5s ease;
	text-shadow: 1px 1px 2px #fff;
}
#hobby_galerie div:hover {
	filter: grayscale(0);
	transform: scale(2);
	z-index: 1000;
}
#hobby_galerie div p {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 5%;
	position: absolute;
	bottom: 70px;
	opacity: 0;
	transition: all 0.5s ease 0.5s;
	font-size: .5rem;
	width: 100%;
}
#hobby_galerie div:hover p {
	bottom: 0px;
	opacity: 1;
}
/*-----------<<--Speichern-->>---------------*/
#downloads {
	margin-top: 5rem;
}
#downloads_btn {
	text-decoration: none;
	display: block;
	background-color: #443E4C;
	border-radius: 0.3rem;
	color: #fff;
	margin-top: 3rem;
	text-align: center;
	padding: .5rem;
	letter-spacing: 5px;
	transition: 0.2s;
}
#downloads_btn:hover {
	background-color: #cd06c1;
	letter-spacing: 3px;
}
/*###########################################	
                     Kontakt
#############################################*/
#formular {
	background: #eee;
	padding: 15px 10px;
	margin: 3rem auto 3rem auto;
}
form p {
	padding: 0.2rem;
}
input, textarea {
	width: 100%;
	padding: 5px;
	margin-bottom: 5px;
	box-sizing: border-box;
	font: 0.9rem arial, sanf-serif;
}
input[type=submit] {
	background-color: #D0D0D0;
	border: 1px solid #C0C0C0;
	border-radius: 0.3rem;
	letter-spacing: 10px;
	cursor: pointer;
	color: #fff;
	transition: 0.2s;
}
input[type=submit]:hover {
	background-color: #cd06c1;
	letter-spacing: 3px;
}
/*###########################################	
                     impressum
#############################################*/
h1.impressum {
	text-align: center;
	margin-bottom: 2rem;
}
h2.impressum {
	font-size: 1.2rem;
}
p.impressum {
	margin-bottom: 2rem;
	text-align: justify;
}
ul.impressum li {
	list-style-position: inside;
	list-style-type: square;
	padding-bottom: 0.5rem;
}
h1.impressum {
	text-align: center;
	margin: 2rem 0;
}
h2.impressum {
	font-size: 1.2rem;
}
p.impressum {
	margin-bottom: 2rem;
	text-align: justify;
}
/*-----------mobil-------------------*/
/*-----------mobil------------------*/
/*-----------mobil------------------*/
/*-----------mobil------------------*/
/*-----------mobil------------------*/
@media (max-width:600px) {
	html, body {
		font-size: 12px;
		position: relative;
	}
	.wrapped {
		max-width: 580px;
		margin: 0 auto;
	}
	.topnav_andere {
		width: 100%;
		bottom: 0;
		z-index: 1000;
	}
	.topnav_andere ul {
		webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.topnav_andere ul li {
		text-align: center;
	}
	.topnav_andere ul li a {
		color: #fff;
		text-decoration: none;
		display: block;
		width: 100%;
		padding: 1rem 0.7rem;
		font-size: 1.5rem;
		background-color: rgba(255, 255, 255, 0);
	}
	.topnav_andere ul li a:hover {
		color: #cd06c1;
		background: linear-gradient(90deg, #fff, #000, #202020, #A8A8A8, #fff);
		background-size: 500%;
		-webkit-animation: shine_mobil 25s linear infinite;
		animation: shine_mobil 25s linear infinite;
		/*		z-index: -1;
*/
	}
	/*----------Footer---------------*/
	footer {
		position: absolute;
		bottom: 0;
	}
	footer ul li a {
		padding: 1rem 0.5rem;
		font-size: 1.8rem;
		transition: 0.2s;
	}
	footer ul li a:hover {
		font-size: 1.6rem;
	}
	footer ul li:last-child a {
		font-size: 1.3rem;
	}
	footer ul li:last-child:hover a {
		font-size: 1.1rem;
	}
	/*###########################################	
                     index
	#############################################*/
	/*-----------<<--HEADER-->>---------------*/
	#bg_1 {
		background-image: url("../img/bg_seit_KMaier_mobil.svg");
		
	}
	#bg_1 p {
		background: linear-gradient(90deg, #000, #fff);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 200;
		font-size: 3rem;
		padding-top: 43.5vh;
		z-index: 100;
		left: 0;
	}
	#handwr_effect {
		width: 252px;
		position: relative;
	}
	#nav_index {
		width: 100%;
		position: absolute;
		bottom: 0;
		z-index: 1000;
	}
	#topnav_index ul {
		webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column;
		padding-bottom: 2rem;
	}
	#topnav_index ul li {
		text-align: center;
	}
	#topnav_index ul li a {
		color: #E8E8E8;
		text-decoration: none;
		display: block;
		width: 100%;
		padding: 1rem 0.7rem;
		font-size: 1.5rem;
		background-color: rgba(255, 255, 255, 0);
	}
	#topnav_index ul li a:hover {
		color: #cd06c1;
		background: linear-gradient(90deg, #fff, #000, #202020, #A8A8A8, #fff);
		background-size: 500%;
		-webkit-animation: shine_mobil 25s linear infinite;
		animation: shine_mobil 25s linear infinite;
		z-index: -1;
	}
	@keyframes shine_mobil {
		0% {
			background-position: -400%;
		}
		100% {
			background-position: 400%;
		}
	}
	#arrow_down, #arrow{
		display: none;
	}
	
	main.index {
		background: url("../img/Hintergrund_Michelangelo_mobil.jpg") no-repeat center center/cover;
		padding: 0 1rem;
	}
	main.index h2 {
		padding: 2rem 0 0.5rem 0;
		font-size: 2rem;
	}
	main.index h2 + p {
		padding-bottom: 1rem;
		font-size: 1.5rem;
		text-align: justify;
	}
	main.index ul li {
		list-style: none;
	}
	.zwei_column {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: center;
		webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.zwei_column.index div h3 {
		font-size: 1.5rem;
		color: #cd06c1;
	}
	.element_dsgn {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: center;
	}
	.element_dsgn li {
		font-size: 2rem;
		padding: 1rem 1.6rem;
		
	}
	.element_dsgn.li_1 li {
		margin: 2rem 2rem 3rem 2rem;
	}
	.li_2 li {
		margin-top: 1rem;
		
	}
	#meine_prj {
		position: relative;
		margin-top: 5vh;
	}
	#meine_prj h2 {
		padding: 1.5rem 0 0 0;
	}
	#meine_prj p {
		font-size: 1.5rem;
		padding: 1rem 3rem;
	}
	/*-----------Jquery Galerry---------------*/
	#jquery_gallery {
		padding-bottom: 6rem;
	}
	/*###########################################	
                     ueber_mich
	#############################################*/
	body.ueber_mich {
		font-size: 14px;
		background: url("../img/bg_ueber_mich_mobil.jpg") no-repeat center top/cover;
	}
	#person_dat {
		flex-direction: column;
	}
	#person_dat div img {
		margin: auto;
	}
	#column_1 {
		margin: auto;
	}
	#tablewrap {
		padding: 1.2rem;
	}
	main.ueber_mich {
		padding: 0 1.5rem;
	}
	#beruf_st h3 {
		font-size: 14px;
	}
	#beruf_st p {
		font-size: 14px;
	}
	ul.marker_circle li {
		font-size: 14px;
	}
	#hobby {
		margin-top: 2rem;
	}
	#hobby h2 {
		padding: 1.5rem;
	}
	#hobby_galerie {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		text-align: center;
		margin: 1rem 1rem;
		padding: 0 0.2rem 2rem 0.2rem;
	}
	#hobby_galerie h4 {
		font-size: 1rem;
	}
	#hobby_galerie div p {
		bottom: 70px;
		font-size: 0.6rem;
	}
	#hobby_galerie div:hover h4 {
		bottom: 60px;
	}
	#hobby_galerie div:hover {
		filter: grayscale(0);
		transform: scale(1.5);
		z-index: 1000;
	}
	/*-----------<<--Speichern-->>---------------*/
	#downloads {
		margin: 3rem 1.3rem;
	}
	#downloads_btn {
		text-decoration: none;
		display: block;
		background-color: #443E4C;
		border-radius: 0.3rem;
		color: #fff;
		margin-top: 3rem;
		text-align: center;
		padding: .5rem;
		letter-spacing: 5px;
		transition: 0.2s;
	}
	#downloads_btn:hover {
		background-color: #cd06c1;
		letter-spacing: 3px;
	}
	main.impressum {
		padding: 0 1rem;
	}
}
/*--------------Tablet----------------*/
/*--------------Tablet----------------*/
/*--------------Tablet----------------*/
/*--------------Tablet----------------*/
/*--------------Tablet----------------*/
@media (min-width:601px) {
	html, body {
		font-size: 14px;
	}
	.wrapped {
		max-width: 800px;
		margin: 0 auto;
	}
	/*###########################################	
                     index
	#############################################*/
	/*-----------<<--HEADER-->>---------------*/
	#bg_1 {
		background-image: url("../img/bg_seit_KMaier_tablet.svg");
	}
	#bg_1 p {
		background: linear-gradient(90deg, #000, #000, #202020, #A8A8A8, #fff, #fff, #fff);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 200;
		font-size: 4rem;
		padding-top: 34vh;
		z-index: 100;
		left: 0;
	}
	#handwr_effect {
		width: 333px;
		margin-top: -20px;
	}
	#horiz_line_hdr {
		color: #fff;
		height: 10vh;
		width: 0px;
		margin: 5vh auto 0 auto;
		border-right: 2px solid #fff;
		z-index: 100;
	}
	#nav_index {
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18px;
		z-index: 1000;
	}
	#topnav_index ul {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		list-style: none;
		z-index: 1000;
	}
	#topnav_index ul li {
		text-align: center;
	}
	#topnav_index ul li a {
		width: 119px;
		height: 50px;
		padding-bottom: 30px;
		font-size: 1.3rem;
		background-color: rgba(255, 255, 255, 0);
		background: linear-gradient(90deg, #000, #202020, #A8A8A8, #fff, #fff, #fff);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-decoration: none;
		display: inline-block;
		transition: 0.3s;
	}
	#topnav_index ul li a:hover {
		background: linear-gradient(90deg, #000, #fff, #000);
		background-repeat: no-repeat;
		background-size: 80%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: rgba(255, 255, 255, 0);
		z-index: -1;
		-webkit-animation: shine 1.3s linear infinite;
		animation: shine 1.3s linear infinite;
	}
	@-webkit-keyframes shine {
		0% {
			background-position: -400%;
		}
		100% {
			background-position: 400%;
		}
	}
	@keyframes shine {
		0% {
			background-position: -400%;
		}
		100% {
			background-position: 400%;
		}
	}
	/*-----------<<--arrow down tablet-->>---------------*/
	#arrow_down {
		width: 100%;
		margin: auto;
		bottom: 5px;
		cursor: pointer;
		position: absolute;		
		opacity: 0;
		transition: 0.3s;
		-webkit-animation: arrow_move 0.7s linear 6s infinite alternate;
		animation: arrow_move 0.7s linear 6s infinite alternate;
	}
	#arrow {
		stroke: #E8E8E8;
		stroke-width: 10px;
		width: 25px;
	}
	@-webkit-keyframes arrow_move {
		0% {
			opacity: 1;
			bottom: 5px
		}
		100% {
			opacity: 1;
			bottom: 9px
		}
	}
	@keyframes arrow_move {
		0% {
			opacity: 1;
			bottom: 5px
		}
		100% {
			opacity: 1;
			bottom: 9px
		}
	}
	/*-----------<<--MAIN-->>---------------*/
	main.index {
		background: url("../img/Hintergrund_Michelangelo_tablet.jpg") no-repeat center center/cover;
		padding: 0 1.5rem;
	}
	main.index h2 {
		padding: 3rem 0 0.5rem 0;
		font-size: 2.51rem;
	}
	main.index h2 + p {
		padding: 0 0 2rem 0;
		font-size: 1.5rem;
		text-align: justify;
	}
	.zwei_column {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: space-between;
	}
	.element_dsgn {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: space-around;
	}
	.zwei_column.index div h3 {
		font-size: 1.5rem;
		color: #cd06c1;
	}
	.zwei_column.index div:last-of-type {
		margin-left: 1rem;
	}
	.element_dsgn li {
		font-size: 2.5rem;
		padding: 1rem 1.6rem;
		

	}
	.li_2 li {
		
		margin-top: 2rem;
	}
	#meine_prj {
		position: relative;
		margin-top: 5vh;
	}
	#meine_prj h2 {
		padding: 2rem 0 0 0;
	}
	#meine_prj p {
		font-size: 1.5rem;
		padding: 1rem 3rem;
	}
	/*-----------Jquery Galerry---------------*/
	#jquery_gallery {
		padding-bottom: 2rem;
	}
	/*###########################################	
                     Über mich
	#############################################*/
	main.ueber_mich {
		padding: 0 1.5rem;
	}
	#hobby_galerie h4 {
		font-size: 0.9rem;
	}
	#hobby_galerie div p {
		font-size: 0.6rem;
	}
	#hobby_galerie div:hover h4 {
		bottom: 60px;
	}
	#hobby_galerie div:hover {
		transform: scale(1.8);
	}
}
/*-------------------Display----------------*/
/*-------------------Display----------------*/
/*-------------------Display----------------*/
/*-------------------Display----------------*/
/*-------------------Display----------------*/
@media screen and (min-width:901px) {
	html, body {
		font-size: 16px;
	}
	.wrapped {
		max-width: 900px;
		margin: 0 auto;
	}
	/*###########################################	
                     Index
#############################################*/
	/*-----------<<--HEADER-->>---------------*/
	#bg_1 {
		background-image: url("../img/bg_seit_KMaier_display.svg");
	}
	#bg_1 p {
		background: linear-gradient(90deg, #000, #000, #202020, #A8A8A8, #fff, #fff, #fff);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 5rem;
		padding-top: 34vh;
	}
	
	#handwr_effect {
		width: 525px;
		margin-top: -15px;
	}
	#horiz_line_hdr {
		color: #fff;
		height: 15vh;
		width: 0px;
		margin: 5vh auto 0 auto;
		border-right: 2px solid #fff;
		z-index: 100;
	}
	#nav_index {
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18px;
		z-index: 1000;
	}
	#topnav_index ul {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		list-style: none;
		z-index: 1000;
	}
	#topnav_index ul li {
		text-align: center;
	}
	#topnav_index ul li a {
		width: 155px;
		height: 20px;
		margin-bottom: 60px;
		font-size: 1.3rem;
		background-color: rgba(255, 255, 255, 0);
		background: linear-gradient(90deg, #000, #202020, #A8A8A8, #fff, #fff, #fff);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-decoration: none;
		display: inline-block;
		transition: 0.3s;
	}
	#topnav_index ul li a:hover {
		background: linear-gradient(90deg, #000, #fff, #000);
		background-repeat: no-repeat;
		background-size: 80%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: rgba(255, 255, 255, 0);
		z-index: -1;
		-webkit-animation: shine 1.3s linear infinite;
		animation: shine 1.3s linear infinite;
	}
	@-webkit-keyframes shine {
		0% {
			background-position: -400%;
		}
		100% {
			background-position: 400%;
		}
	}
	@keyframes shine {
		0% {
			background-position: -400%;
		}
		100% {
			background-position: 400%;
		}
	}
	/*-----------<<--arrow down display-->>---------------*/
	#arrow_down {
		width: 100%;
		padding: 5px;
		margin: auto;
		bottom: 0px;
		cursor: pointer;
		position: absolute;
		opacity: 0;
		transition: 0.3s;
		-webkit-animation: arrow_move 0.7s linear 6s infinite alternate;
		animation: arrow_move 0.7s linear 6s infinite alternate;
		z-index: 10000;
	}
	#arrow {
		stroke: #E8E8E8;
		stroke-width: 10px;
		width: 25px;
	}
	@-webkit-keyframes arrow_move {
		0% {
			opacity: 1;
			bottom: 0px;
		}
		100% {
			opacity: 1;
			bottom: 9px;
		}
	}
	@keyframes arrow_move {
		0% {
			opacity: 1;
			bottom: 5px
		}
		100% {
			opacity: 1;
			bottom: 9px
		}
	}
	/*-----------<<--arrow down end-->>---------------*/
	/*-----------<<--MAIN-->>---------------*/
	main.index {
		background: url("../img/Hintergrund_Michelangelo.jpg") no-repeat center center/cover;
	}
	main.index h2 {
		padding: 3rem 0 0.5rem 0;
		font-size: 2.51rem;
	}
	main.index h2 + p {
		padding: 0 0 2rem 0;
		font-size: 1.5rem;
		text-align: justify;
	}
	.zwei_column {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: space-between;
	}
	.element_dsgn {
		-ms-flex-pack: distribute;
		justify-content: space-around;
	}
	.zwei_column.index div h3 {
		font-size: 1.5rem;
	}
	.element_dsgn li {
		font-size: 3rem;
		padding: 1rem 1.6rem;
				
	}
	#meine_prj {
		position: relative;
		margin-top: 5vh;
	}
	#meine_prj h2 {
		padding: 2rem 0 0 0;
	}
	#meine_prj p {
		font-size: 1.5rem;
		padding: 1rem 3rem;
	}
	/*-----------Jquery Galerry---------------*/
	#jquery_gallery {
		padding-bottom: 2.5rem;
	}
	/*###########################################	
                     Über mich
	#############################################*/
	#hobby_galerie h4 {
		font-size: 0.9rem;
	}
	#hobby_galerie div p {
		font-size: 0.6rem;
	}
	#hobby_galerie div:hover h4 {
		bottom: 70px;
	}
	#hobby_galerie div:hover {
		transform: scale(1.8);
	}
}