@import url(//fonts.googleapis.com/earlyaccess/nats.css);

body{
	height: 100%;

}
.dropdown {
	position: relative;
	display: block;
	
    height:auto;
	 width: 100%;
	
	top:0;
	left:0;
	
  }

  .menu_btn{
	border: 0px;
	
  }
  .menu_btn:hover{
	border: 0px 0px 3px 0px #222222; 
	letter-spacing:4px;
	color:#222222;
	-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
  }


  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	width: 0%;
	height:100vh;
	-webkit-box-shadow: -50px 26px 300px 74px rgba(71, 71, 71, 0.765);
-moz-box-shadow: -50px 26px 300px 74px rgba(71,71,71, 0.765);
box-shadow: -50px 26px 300px 74px rgba(71,71,71,0.765);
	z-index: 100;
	border-radius: 20px 0px 0px 20px;
	top:0;
	right:0;
	animation: SlideIn 0.2s ease-in forwards;
	color:#222222;
	
}
@keyframes SlideIn {
	to{
		width: 75%;
	}
}

  
  .dropdown-content a {
	color:#222222;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	letter-spacing: 4px;
	
  }
  
  .dropdown-content a:hover {background-color: white;}
  
  .dropdown:hover .dropdown-content {display: block;}
  
  .dropdown:hover .dropbtn {background-color: grey;}

.logo{
    
	float:left;
	text-align: left;
	font-family: 'NATS', sans-serif;
	font-style: normal;
    font-weight:bold;
	letter-spacing: 2px;
	color: #222222;
	padding:8px;
	margin-left:4px;
    font-size:1.2vw;

 vertical-align: baseline;
}
.menu{
	float:right;
	text-align: right;
	font-family: 'NATS', sans-serif;
	letter-spacing: 2px;
	color:#222222;
	padding:8px;
	margin-left:4px;
    font-size:1.2vw;
	font-weight: 300;
}


/*flipbook*/



.book{
	display: flex;
	padding:0;
	margin:0;
	width: 100%;
height:90vh;
display: flex;
	align-items: center;
	justify-content: center;
	
	
}
.book input{
	display:none;
}
.book img {
	width:300px;
	height:420px;
	margin-left: 22%;
	margin-top:-3%;
	align-items: center;
	justify-content: center;
	transition: 3s;
}

#cover{
	width:600px;
	height:450px;
	align-items: center;
	padding: 28px;
	border-radius: 20px 0px 0px 20px;
	background:radial-gradient(66.86% 77.15% at 48.32% 56.46%, #FFFFFF 0%, #aea554 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}

.flip-book{
	width:600px;
	height:450px;
	position:relative;
	perspective: 1500px;
	align-items: center;
	display: flex;
}

.flip{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	transform-origin: left;
	transform-style:preserve-3d;
	transform:rotateY(0 deg);
	transition: 1.5s;
	color:#853c01;

}
.text{
	padding: 16px;
	text-decoration: none;
	font-family: Italiana;
	font-size: 6vw;
	color:#853c01;
	display: block;
	transition: 2s;
	text-align: center;
}

.subtext{
	padding: 4px;
	text-decoration: none;
	font-family: roboto;
	font-size: 1.4vw;
	color:#602c01;
	display: block;
	line-height: 32px;
	transition: 2s;
	text-align: center;
}
.front{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background:radial-gradient(66.86% 77.15% at 48.32% 56.46%, #FFFFFF 0%, #bbb15a 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
	border-radius: 0px 20px 20px 0px;
	box-sizing: border-box;
	padding: 28px;
	box-shadow: inset 20px 0 50px rgba(0,0,0,0.5) 0 2px 5px rgba(0,0,0,0.5);
}

.back{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: 99;
	padding: 28px;
	border-radius: 20px 0px 0px 20px;
	transform:rotateY(180deg);
	backface-visibility: hidden;
	background:radial-gradient(66.86% 77.15% at 48.32% 56.46%, #FFFFFF 0%, #aea554 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;


}

.next-btn{
	position: absolute; 
	cursor:pointer;
	color:#853c01; 
	bottom: 0;  
	right:0;
	padding:4px;
	font-family: Italiana;
	letter-spacing: 3px;
}

.back-btn{
	position: absolute; 
	cursor:pointer;
	color:#853c01; 
	bottom: 0;  
	right:0;
	padding:4px;
	font-family: Italiana;
	letter-spacing: 3px;
}
#p1{
	z-index: 9;
}
#p2{
	z-index: 8;
}
#p3{
	z-index: 7;
}
#p4{
	z-index: 6;
}
#p5{
	z-index: 5;
}
#p6{
	z-index: 4;
}
#p7{
	z-index: 3;
}
#p8{
	z-index: 2;
}
#p9{
	z-index: 1;
}

#c1:checked ~ .flip-book #p1{
	transform: rotateY(-180deg);
	z-index: 1;
}
#c2:checked ~ .flip-book #p2{
	transform: rotateY(-180deg);
	z-index: 2;
}
#c3:checked ~ .flip-book #p3{
	transform: rotateY(-180deg);
	z-index: 3;
}
#c4:checked ~ .flip-book #p4{
	transform: rotateY(-180deg);
	z-index: 4;
}#c5:checked ~ .flip-book #p5{
	transform: rotateY(-180deg);
	z-index: 5;
}
#c6:checked ~ .flip-book #p6{
	transform: rotateY(-180deg);
	z-index: 6;
}
#c7:checked ~ .flip-book #p7{
	transform: rotateY(-180deg);
	z-index: 7;
}
#c8:checked ~ .flip-book #p8{
	transform: rotateY(-180deg);
	z-index: 8;
}#c9:checked ~ .flip-book #p9{
	transform: rotateY(-180deg);
	z-index: 9;
}


.splash{
	position:fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: radial-gradient(66.86% 77.15% at 48.32% 56.46%, #FFFFFF 0%, #D9D296 100%);
	color: #853c01;
	text-align: center;
	font-family:Italiana;
	z-index: 200;
	padding-top: 40vh;
}

.splash.display-none{
	position:fixed;
	opacity: 0;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: radial-gradient(66.86% 77.15% at 48.32% 56.46%, #FFFFFF 0%, #D9D296 100%);
	color: #853c01;
	text-align: center;
	font-family:  Italiana;
	letter-spacing: 3px;
	z-index: -10;
	padding-top: 40vh;
	transition: all 1.5s;
}

@keyframes fadeIn {
	to{
		opacity: 1;
	}
}

.fade-In{
font-family:Italiana;
font-size:4vw;
font-weight: 500;
letter-spacing: 3px;
 opacity: 0;
 animation: fadeIn 1.5s ease-in forwards;
 
}
@media only screen and (max-width: 620px) {
	/* For mobile phones: */
	.fade-In {
		font-size:12vw;
		animation: fadeIn 3s ease-in forwards;
	}
  }
  @keyframes intr1 {
	to{
		padding-left:10%;
	}
}



  .intro{
	color:#853c01;
	font-family:  Italiana;
	padding-top:8px;
	padding-left:8px;
	font-weight:light;
	letter-spacing: 2px; 
	font-size:6vw;
	
	
  }
  .intro1{
	color:#853c01;
	font-family:  Italiana;
	padding-left:0%;
	padding-top:13%; 
	font-weight:light;
	letter-spacing: 4px; 
	font-size:10vw;
	animation: intr1 4.2s ease-in forwards;
  }
  .intro2{
	color:#853c01;
	 font-family:  Italiana;
	padding-left:0%; 
	margin-top: -6%;
	font-weight:light;
	letter-spacing: 2px;
	font-size:7vw; 
	animation: intr1 4.2s ease-in forwards;
  }