@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:700');
@import url('https://fonts.googleapis.com/css?family=Lato|Playfair+Display');

html{
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body{
	height: auto;
	width: 100vw;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	/*background-img: url('../img/corse_007.jpg');*/
}

header{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	top: 0;
}

/* --------------------- Burger ---------------------*/
/* */


nav{
	width: 550px;
	height: 100vh;
	right: -630px;
	position: absolute;
	float: right;
	background-color: #999;
	padding-left: 80px;
	padding-top: 50px;
	z-index: 810;
	transition: right 0.3s;
	top:0px !important;
	position: fixed;
	font-family: Montserrat;
}


.navi{
	
}

nav ul li{
	list-style: none;
	margin-top: 8vh;
	font-weight: 600;
	font-size: 3em;
}

nav ul li a{
	text-decoration: none;
	color: #FFF;
	font-family: Montserrat;
	transition: 0.2s;
}
	
	
#burger{
	/*visibility: hidden;*/
	display: none;
}
label{
	position: fixed;
	display: inline-block;
	float: right;
	right: 30px;
	top: 30px;
	
	transition: right 0.3s;
	z-index: 1000;
	
	color: #000;
	transition: color 0.3s;
}

nav ul li a:hover{
	margin-left: 30px;
	transition: 0.2s;
}

.burger:checked ~ nav{
   right: 0px;
   transition: right 0.3s ease-out;
}
.burger:checked + label{
   color: #fff;
   transition: color: 0.5s;
}
/*
#logo{
	position: fixed;
	margin-left: 43vw;
	margin-top: 10px;
	width: 6vw;
	height: auto;	
}
*/
/*
header{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	top: 0;

}

nav{
	position: fixed;
	width: 100vw;
	height: 80px;
	background-color: #c7bda9;
	z-index: 70;
	-webkit-box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.24);
	-moz-box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.24);
	box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.24);
	line-height: 80px;
}

nav ul{
	font-family: 'Lato';
	font-weight: 400;
	list-style-type: none;
	position: absolute;
	width: auto;
	right: 10vw;
	margin: 0;
	height: 100%;
	text-align: right;
	vertical-align: middle;
	display: table-cell;
}
nav ul li{
	position: relative;
	margin-left: 30px;
	display: inline-block;
	height: 100%;
	vertical-align: text-bottom;
}

nav ul a{
	color: white;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

nav ul a:hover{
	color: gray;
	transition: color 0.3s ease-in-out;
}*/

h1{
	font-family: 'Libre Baskerville';
	font-size: 8vw;
	position: absolute;
	bottom: 2vh;
	left: 10vw;
	color: white;
	z-index: 100;
}

h2{
	font-family: 'Libre Baskerville';
	font-size: 5vw;
	color: white;
	margin: 0;
	margin-bottom: 50px;
}

p{
	font-family: 'Lato';
	font-weight: 100;
	margin: 0;
	font-size: 50px;
	color: white;
	
}

section.color p, section.beige p{
	font-family: 'Lato';
	font-weight: 100;
	margin: 0;
	font-size: 50px;
	color: white;
	width: 80%;
}

img.background{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

section{
	padding: 200px 10vw;
	z-index: 50;
}

.siebzig{
	width: 70vw;
	margin: 5vw;
	-webkit-box-shadow: 0px 0px 53px 9px rgba(0,0,0,0.31);
	-moz-box-shadow: 0px 0px 53px 9px rgba(0,0,0,0.31);
	box-shadow: 0px 0px 53px 9px rgba(0,0,0,0.31);
}

.beige{
	background-color: #c7bda9;
}


.color{
	animation: colorchange 100s infinite; 
    -webkit-animation: colorchange 100s infinite;	
}


::-moz-selection {
  color: white;
  background: black;
}

a.linkweiss{
	color: white;
	text-decoration: none;
}

a.linkgross{
	font-family: 'Libre Baskerville';
	font-size: 5vw;
	margin: 0;
	margin-bottom: 50px;
	text-decoration: none;

}

a.pfeilnachunten{
	font-family: 'Libre Baskerville';
	font-size: 10vw;
	position: absolute;
	bottom: 2vh;
	right: 5vw;
	float: right;
	color: white;
	z-index: 100;
}

a.pfeilnachoben{
	font-family: 'Libre Baskerville';
	font-size: 100px;
	position: fixed;
	bottom: 2vh;
	right: 5vw;
	float: right;
	color: white;
	z-index: 100;
}

.portrait{
	height: 35vh;
	width: auto;
	z-index: 69;
	position: absolute;
	right: 12vw;
	
	-webkit-box-shadow: 0px 0px 53px 9px rgba(0,0,0,0.31);
	-moz-box-shadow: 0px 0px 53px 9px rgba(0,0,0,0.31);
	box-shadow: 0px 0px 53px 9px rgba(0,0,0,0.31);
}

.galeriebild{
	height: 30vh;
	width: auto;
	z-index: 69;
	margin: 20px;
	transition:flex 0.3s ease-out;
}

.flexbox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	transition: flex 0.3s ease-out;
}

a.linkweiss:hover{
	color: #333e0a;
}

/* ------------------------------------ PARALLAX ------------------------------*/

#keyart{
	background-image: url('../img/corse_007.jpg');
	background-position: bottom center;
	background-size: cover;
	background-repeat: no;
	width: 100%;
	position: absolute;
	width: 100vw;
	height: 120vh;
	object-fit: cover;
	
}

#keyart2{
	margin-top: -15vh;
	/*min-height: 93vh;*/
	
}

#keyart3{
	
}

/* ------------------------------------ keyframes ------------------------------*/

@keyframes colorchange
    {
      0%   {background: #c0ae83;}
      10%  {background: #baac8a;}
      50%  {background: #a6a67f;}
      90%  {background: #c7bda9;}
	  100% {background: #c0ae83;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #c0ae83;}
      10%  {background: #baac8a;}
      50%  {background: #a6a67f;}
      90%  {background: #c7bda9;}
	  100% {background: #c0ae83;}
    }


/* ---------------------------------- RESPONSIVE -------------------------------*/

@media screen and (max-width: 1200px) {
	h1{
		/*font-size: 70px;*/
		left: 15%;
	}
	
	p{
	 font-family: 'Lato';
	 font-weight: 100;
	 margin-left: 0;
	}
	
	.portrait{
		display: none;
	}
	
	section.beige p{
		width: 100%;
	}
	
	a.linkweiss h2{
		text-decoration: none;
		color: black;
	}
	
	h2.linkweiss:hover ~ h2{
			color: red;
	}
}

@media screen and (max-width: 650px) {
	h1{
		/*font-size: 60px;*/
		left: 10%;
	}
	
	p{
	  font-family: 'Lato';
	 font-weight: 100;
	 margin-left: 10%;
}
		nav{
	width: 100vw;
	height: 100vh;
	right: -100vw;
	position: absolute;
	float: right;
	background-color: #999;
	padding-top: 0px;
	padding-left: 0px;
	z-index: 810;
	transition: right 0.3s;
	top:0px !important;
	position: fixed;
	font-family: Montserrat;
}
}

@media screen and (max-width: 500px) and (orientation: portrait) {
	html{
		overflow-x: hidden;
	}
	
	h1{
	font-size: 70px;
	/*margin-left: 30%;
	transform: rotate(-90deg);*/
	top: 0px;
	position: absolute;
	/*text-align: right;
	left: 70px;*/
	
	}
	
	section.color p, section.siebzig p{
	font-family: 'Lato';
	font-size: 1em;
	font-weight: 100;
	/*position: absolute;*/
	text-align: right;
}
	
	img.background{
	width: 100vw;
	height: 10vh;
	object-fit: cover;
}
	a.pfeilnachoben{
	font-family: 'Libre Baskerville';
	font-size: 40px;
	position: fixed;
	bottom: 2vh;
	right: 5vw;
	float: right;
	color: white;
	z-index: 100;
}
	/* BURGER. */
	

	
}