/* STANDARTSTYLING */
body, html {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
}

* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

h2 {
	font-size: 24px;
	font-style: italic;
	font-weight: 300;
	text-align: center;
	position: relative;
	margin-bottom: 15px;
}

h2 .fa {
	color: lightgrey;
	font-size: 100px;
    position: absolute;
    bottom: 45px;
    left: 0px;
    right: 0px;
    display: inline-block;
    text-align: center;
}

h3 {
	font-size: 20px;
	font-style: italic;
	font-weight: 300;
	text-align: center;
	position: relative;
	margin: 20px 0px;
}

p {
	font-size: 14px;
	line-height: 24px;
	font-weight: 200;
}

img {
	max-width: 100%;
}

.line {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 15px;
}

.full {
	padding: 15px;
}

.half {
	position: relative;
	padding: 15px;
	width: 50%;
	float: left;
}

.half .fa {
	margin-right: 15px;
}

.third {
	width: 33.33%;
	padding: 15px;
	float: left;
}

.quarter {
	position: relative;
	height: 100%;
	width: 25%;
	padding: 15px;
	float: left;
}

.two_third {
	width: 66.66%;
	padding: 15px;
	float: left;
}

.half ul li {
	list-style: none;
	font-weight: 200;
	font-size: 14px;
	line-height: 24px;
}

.third ul li span {
	padding-right: 15px;
}

.icon {
	width: 120px;
	height: 120px;
	margin: 0 auto 30px auto;
	background-size: 120px 120px;
	background-repeat: no-repeat;
}

.I1 {
	background-image: url(assets/icons/i1.svg);
}

.I2 {
	background-image: url(assets/icons/i2.svg);
}

.I3 {
	background-image: url(assets/icons/i3.svg);
}

/* ABOUT */
/* FÄHIGKEITEN */
#me {
	padding: 15px 0px;
}

#skills {
	padding: 15px 0px;
}

#skills ul {
	list-style: none;
}

#skills ul li {
	color: white;
	padding: 9px;
	background-color: mediumaquamarine;
	margin: 4px 8px 4px 0px;
	font-size: 14px;
	font-weight: 200;
	letter-spacing: 1px;
	display: inline-block;
}

/* LEBENSLAUF */
.eintrag {
	padding: 15px 0px;
	position: relative;
	width: 100%;
	float: left;
}

.date {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
	width: 20%;
	margin-right: 10%;
}

.description {
	width: 70%;
	float: right;
}

.trenner {
	margin: 0 auto;
	width: 10px;
	height: 12px;
	background-image: url(assets/icons/trenner.svg);
	background-size: 10px 12px;
	background-repeat: no-repeat;
}

#cv_download {
	width: 244px;
	margin: 0 auto;
	text-decoration: none;
	background-color: rgba(37, 116, 90,0.8);
	color: white;
	padding: 10px;
}

/* FOOTER - inkl Fallbacknavigation */
#footer {
	background-color: rgba(0,0,0,.9);
}

#footer h2 {
	text-align: left;
	font-size: 18px;
	font-weight: 200;
	color: white;
	padding-top: 0px;
}

.footer_nav {
	padding-top: 37px;
}

#footer li {
	color: rgba(255,255,255,0.5);
	list-style: none;
	font-weight: 200;
	font-size: 12px;
	line-height: 24px;
}

.footer_nav ul li a {
	text-decoration: none;
	color: rgba(255,255,255,.2);
}

/* NAVIGATION - Navigation ist bei bei mehr als 700px ausgeblendet */
/* MOBILENAVIGATION */
#mobile_nav {
	position: relative;
	display: none;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: white;
	z-index: 5000;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}

#mobile_nav_btn {
	width: 80px;
	height: 80px;
	background-size: 30px 30px;
	background-image: url(assets/icons/menu.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

/* STANDARTNAVIGATION */
#navi {
	display: block;
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 4900;
	height: 82px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}

#navi ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

#navi ul li {
	float: left;
	width: auto;
}

#navi ul li a {
	display: block;
	color: #000;
    text-align: center;
    padding: 30px 30px;
    text-decoration: none;
    letter-spacing: 2px;
	font-weight: 100;
	border-bottom: 3px solid white;
}

#navi ul li a:hover, #navi ul li.active a {
	border-bottom: 3px solid mediumaquamarine;
}

#logo {
	position: absolute;
	right: 30px;
	top: 20px;
	height: 40px;
	width: 37px;
	background-repeat: no-repeat;
	background-image: url(assets/icons/logo.svg);
}

/* BUTTONS - Button unter Teaserblöcken im Startbereich */
.btn_more {
	letter-spacing: 1px;
	text-decoration: none;
	color: white;
	display: inline-block;
	padding: 10px;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 200;
	background-color: rgba(37, 116, 90,0.8);
}

/* TOP-BUTTON - Scrollt zurück zum Beginn der Seite */
#back_to_top {
	display: none;
}

#back_to_top a{
	position: fixed;
	width: 80px;
	height: 80px;
	top: 80px;
	left: 0px;
	z-index: 4800;
	display: inline-block;
	background-image: url(assets/icons/back_to_top.svg);
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center center;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
	background-color: rgba(37, 116, 90,0.8);
}

#start {
	padding-top: 81px;
}

/* HEADER - Moodbild inkl. Logo */
#logo_header {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 50%;
	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0 auto;
	width: 90px;
	height: 108px;
	background-image: url(assets/icons/logo_w.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.header {
	margin-bottom: 30px;
	text-align: center;
	position: relative;
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 300px;
}

/* HEADERBILDER */
.kontakt {	
	background-image: url(assets/img/header_2.jpg);
}

.start {
	background-image: url(assets/img/header.jpg);
}

.about {
	background-image: url(assets/img/profil.jpg);
}

/* SLIDER - einzelne Slides liegen nebeneinander in einem Container */
#slider {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.slider {
	position:relative;
	display: block;
	width: 300%;
	height: 300px;
}

/* SLIDE */
.slide {
	width: 33.33%;
	float: left;
}

.slide h2 {
	padding-top: 0px;
}

/* TEASERBILDER */
.accordeon h2 {
	position: absolute;
	top: 50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
 	-ms-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
	letter-spacing: 4px;
	margin: 0 auto;
	color: #fff;
	font-size: 40px;
	text-shadow: 0px 0px 5px rgba(12,24,34, 0.5)
}

.accordeon{
	position: relative;
	height: 300px;
	width: 100%;
	background-size: cover;
	background-position: 50% 50%;
	border-bottom: 3px solid mediumaquamarine;
}

.yvr {
	background-image: url(assets/img/YVR.jpg);
}

.jfk {
	background-image: url(assets/img/JFK.jpg);
}

.pvg {
	background-image: url(assets/img/PVG.jpg);
}

/* SLIDERBUTTONS - näcshter, vorheriger Slide + Gallerie ausklappen */
.prev_slide {
	cursor: pointer;
	position: absolute;
	z-index: 1001;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-image: url(assets/icons/prev_btn.svg);
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
}

.next_slide {
	cursor: pointer;
	position: absolute;
	z-index: 1001;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-image: url(assets/icons/next_btn.svg);
	top: 50%;
	right: 5px;
	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
}

.more_pics {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 25px;
	text-align: center;
}

.more_pics a {
	letter-spacing: 1px;
	text-decoration: none;
	color: white;
	display: inline-block;
	padding: 10px;
	font-size: 14px;
	font-weight: 200;
	background-color: rgba(102,205,170,0.9);
}

#gallery {
	display: none;
	width: 100%;
	margin-top: 3px;
}

.row li {
	position: relative;
	list-style: none;
	float: left;
	padding: 0px;
	margin: 0px;
	display: block;
	height: 250px;
	width: 33.33%;
}

.row li a {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
}

.img {
	z-index: 998;
	display: block;
	height: 100%;
	width: 100%;
	float: left;
	background-color: #000000;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
}
.P1 {background-image: url(assets/small/1.jpg);} .P2 {background-image: url(assets/small/2.jpg);} .P3 {background-image: url(assets/small/3.jpg);} .P4 {background-image: url(assets/small/4.jpg);} .P5 {background-image: url(assets/small/5.jpg);} .P6 {background-image: url(assets/small/6.jpg);}
.P7 {background-image: url(assets/small/7.jpg);} .P8 {background-image: url(assets/small/8.jpg);} .P9 {background-image: url(assets/small/9.jpg);} .P10 {background-image: url(assets/small/10.jpg);} .P11 {background-image: url(assets/small/11.jpg);} .P12 {background-image: url(assets/small/12.jpg);}
.P13 {background-image: url(assets/small/13.jpg);} .P14 {background-image: url(assets/small/14.jpg);} .P15 {background-image: url(assets/small/15.jpg);} .P16 {background-image: url(assets/small/16.jpg);} .P17 {background-image: url(assets/small/17.jpg);} .P18 {background-image: url(assets/small/18.jpg);}

/* BILDER IN GROß - overlay wird mit JavaScript erstellt */
.overlay {
	display: none;
	z-index: 6000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.9);
}

.wrapper {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
 	-webkit-transform: translate(-50%, -50%);
 	-ms-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
	z-index: 1000;
	width: 80%;
	height: 80%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* OVERLAYBUTTONS - nächstes, vorheriges Bild + Overlay schliessen */
.close_btn {
	cursor: pointer;	
	position: fixed;
	z-index: 2001;
	width: 30px;
	height: 30px;
	background-image: url(assets/icons/close_w.svg);
	right: 20px;
	top: 20px;
}

.prev_btn {
	cursor: pointer;	
	position: fixed;
	z-index: 1001;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-image: url(assets/icons/prev_btn.svg);
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
}

.next_btn {
	cursor: pointer;
	position: fixed;
	z-index: 1001;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-image: url(assets/icons/next_btn.svg);
	top: 50%;
	right: 5px;
	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
}

/* Formular */
input{
	width: 100%;
	height: 30px;
	margin-top: 5px;
	padding: 5px 10px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 200;
	border: 1px solid lightgrey;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

/* ALERT - falls das entsprechende Feld nicht korrekt ausgefüllt wurde */
.alert{
	padding: 3px;
	font-size: 8px;
	letter-spacing: 1px;
	color: white;
	text-align: center;
	font-weight: 300;
	opacity: 0;
	background-color: mediumaquamarine;
	transition: 0.2s;
}

#formular{
	height: 100%;
	width: 500px;
	position: fixed;
	left: 50%;
	padding: 0px 35px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: rgba(1, 14, 33, 0.5);
}

#form h2 {
	padding-top: 0px;
}

#nachricht {
	font-size: 14px;
	line-height: 24px;
	font-weight: 200;
	resize: none;
	padding: 5px 10px;
	width: 100%;
	height: 130px;
	border: 1px solid lightgrey;
}

#button{
	background-color: #1f604b;
	color: white;
	width: 50%;
	padding: 0px;
}

#map {
	height: 409px;
}
	
	/* Im ersten Schritt wird nur die Mobile Navigation eingeblendet */
	@media only screen and (min-width:551px) and (max-width:700px) {
		img {
			max-width: 100%;
		}

		#navi
		{
			height: auto;
			margin-top: 80px;
			border-bottom: 3px solid mediumaquamarine;
			box-shadow: 0px 15px 35px rgba(0,0,0,0.3);
			display: none;
		}

		#mobile_nav
		{
			display: block;
		}

		#navi ul li {
			float: left;
			width: 100%;
		}
	}

	/* Im zweiten Schritt elemente neu angeordnet */
	@media only screen and (min-width:0px) and (max-width:550px) {
		img {
			max-width: 100%;
		}

		#navi
		{
			height: auto;
			margin-top: 80px;
			border-bottom: 3px solid mediumaquamarine;
			box-shadow: 0px 15px 35px rgba(0,0,0,0.3);
			display: none;
		}

		#mobile_nav
		{
			display: block;
		}

		#navi ul li {
			float: left;
			width: 100%;
		}

		.row {
			height: 120px;
		}

		.row li {
			height: 100%;
			width: 50%;
		}

		#navi #logo {
			display: none;
		}

		.third, .two_third, .half
		{
			width: 100%;
			padding: 20px;
		}

		.quarter {
			width: 50%;
			padding: 20px;
		}

		.footer_nav {
			padding-top: 0px;
		}

		.wrapper {
			width: 65%;
		}

		.description {
			width: 70%;
		}
	}