/*-- Menu --*/

#main_menu{
		position: fixed;
		right: 0px;
		top: 0px;
		bottom: 0px;
		background: #8a2a12;
		width: 78%;
		
		max-height: 100%;
		overflow: scroll;
	}
	
	#main_menu.visible{
		opacity: 1;
	}
	
	#main_menu img{
		height: auto;
		margin: 0 auto;
		padding: 30px 0px;
		text-align: center;
		width: 80%;
		position: relative;
		display: block;
	}
	
	#main_menu ul{
		padding: 0px;
		text-align: center;
		padding: 10%;
		list-style: none;
		
	}
	
	#main_menu ul li{
		border-bottom: 1px solid rgba(255,255,255, 0.3);
		line-height: 80px;
		padding: 0% auto;
		cursor: pointer;
	}
	
	#main_menu ul li:first-child{
		border-top: 1px solid rgba(255,255,255, 0.3);
	}
	
	#main_menu ul li a{
		width: 100%;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	
/*-- Header --*/

#header-animate{
	transition-property: transform ;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

#header-animate.open{
	transition-property: transform ;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	transform: translateX(-78%);
}

/*-- Content --*/

#main-content{
	width: 100%;
	min-height: 100vh;
	transition-property: transform ;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	box-shadow: 0px 0px 20px rgba(0,0,0, 0.4);
	overflow: hidden;
	position: relative;
	z-index: 1;
	transform: translateZ(0);
}

#main-content.open{
	transition-property: transform ;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	transform: translateX(-78%);
}
	
	#section-1{
		overflow: hidden;
		z-index: 1;
	}
	 .background-img{
		overflow: hidden;
	}
	
	/*-- Section-2 --*/
	
	#section-2{
		min-height: 100vh;
		background: radial-gradient(#272b36, #12141a);
		display: block;
	}
	
	#section-2 h2{
		color: #fff;
		width: 80%;
		margin: 0 auto;
		position: relative;
		text-align: center;
		padding-top: 130px;
	}
	
	#section-2 form{
		position: realtive;
		margin: 0 auto;
		margin-top: 50px;
		text-align: center;
		
	}
	
	form label{
		display: none;
	}
	
	#MERGE0{
		width: 206px;
		padding: 20px;
		border-radius: 2px 0 0 2px;
		border: none;
		font-size: 16px;
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
		
		/*

		border: 1px solid rgba(0,0,0, 0.3);
		border-right-width: 0px;
		box-sizing: border-box;
*/
	}
	
	input[type=submit]{
		
		height: 60px;
		line-height: 44px;
		margin: 0px;
		padding: 4px 90px;
		font-size: 16px;
/* 		font-family: rockwell; */
font-weight: bold;
		color: #fff;
		background: #ab2000;
		border: none;
		border-radius: 0px 3px 3px 0px;
		text-transform: uppercase;
		border: 1px solid rgba(0,0,0, 0.3);
		border-left-width: 0px;
		display: block;
		margin-top: 20px;
		margin: 0 auto;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	
	.mail-confirm{
		width: 80%;
		padding: 0 10%;
		display: block;
		position: relative;
		text-align: center;
		color: #fff;
	}
	
	.mail-confirm a{
		color: #fff;
	}
	
	/*-- Section-3 --*/
	
	
	#section-3{
		background: radial-gradient(#ab2000, #8a2a12);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 140px 0px 50px 0px;
	}
	
	#section-3 h2{
		color: #fff;
		width: 80%;
		margin: 0 auto;
		position: relative;
		text-align: center;
		margin-bottom: 50px;
	}

	#section-3 p{
		width: 60%;
		color: #fff;
		text-align: center;
		margin: 0 auto;
		opacity: 1;
		font-size: 16px;
	}
	
	#section-3 img{
		width: 50%;
		margin: 0 auto;
		display: block;
		padding-top: 50px;
	}


	/*-- iPhone 6/7/8 --*/
	
	
		/*-- iPhone 6/7/8 --*/
	
	@media screen and (min-width: 375px) {
		
		#section-2 h2{
			
		padding-top: 180px;
		}
		
		#section-3{
			padding: 50px 0px 50px 0px;
		}
		
		

	}

/*-- iPad --*/
	@media screen and (min-width: 768px) {
		
		#main_menu{
		width: 0px;
		display: none;
		}
		
		
		/*-- Header --*/



		#header-animate.open{
			transform: translateX(-350px);
		}
		
		header img{
			display: block;
		}
		
		/*-- Content --*/
		
		
		#main-content.open{
			transform: translateX(-350px);
		}
		
		.main-section{
			width: 100%;
			min-width: 100%;
			height: 100vh;
			position: relative;
			
		}
		
		#section-1 h1{
			top: 0px;
			}
		/*-- Section-2 --*/
		
		#section-2{
			display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 0px;
		
		}
	
		#section-2 h2{
			width: 600px;
			font-size: 46px;
			margin-bottom: 100px;
			padding-top: 0px;
		}
		
		#section-2 form{
			display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
			flex-direction: row;
		}
		
		#MERGE0{
			width: 400px;
			padding: 20px;
			border-radius: 2px 0 0 2px;
			margin-bottom: 0px;
			
		}
		
		input[type=submit]{
			padding: 4px 26px;
			margin-top: 0px;
		}
		
		.mail-confirm{
			width: 800px;
			margin-top: 250px;
			margin-left: -400px;
			text-align: center;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			display: inline;
			padding: 0px;
		}
		
		
		/*-- Section-3 --*/
		
		#section-3{
			display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		
		#section-3 h2{
			width: 600px;
			top: 0px;
			margin-bottom: 70px;
			font-size: 35px;
		}
	
		#section-3 p{
			width: 600px;
			font-size: 25px;
			
		}
		
		#section-3 img{
			width: 350px;
			margin: 0 auto;
			display: block;
			margin-top: 0px;
		}
		
	}
	
	
	@media screen and (min-width: 1024px) {
		
		#section-2 h2{
			width: 800px;
			font-size: 46px;
			margin-bottom: 100px;
		}
		
		#section-3 h2{
			width: 800px;
			margin-bottom: 100px;
			font-size: 50px;
		}
		
		#section-3 p{
			width: 800px;
			font-size: 35px;
			
		}
		
		#section-3 img{
			
			margin-top: 100px;
		}
		
	}
	
	@media screen and (min-width: 1025px) {
		
		#section-2 h2{
			width: 800px;
			font-size: 30px;
			margin-bottom: 20px;
		}
		
		.mail-confirm{
			margin-top: 150px;
		}
		
		#section-3{
			display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
			padding-top: 0px;
			padding-bottom: 0px;
		}
		
		#section-3 h2{
			width: 800px;
			margin-bottom: 60px;
			font-size: 25px;
		}
		
		#section-3 p{
			width: 800px;
			font-size: 18px;
			
		}
		
		#section-3 img{
			margin-top: 0px;
			width: 300px;
		}
		
	}
	
	




	@media screen and (min-width: 768px) {


		/*---FullPage Scroll CSS---*/
		
		body{
		  width: 100%;
		  height: 100%;
		  margin: 0px;
		  padding: 0px;
		  overflow: hidden;
		}
		
		#fullpage-scroll-navigation{
		  list-style: none;
		  position: absolute;
		  top: 0px;
		  right: 3%;
		  z-index: 0;
		  background: green;
		  padding: 0px;
		  margin: 0;
		  width: 0px;
		  height: 100vh;
		  display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		  opacity: 0;
		  animation: navFadeIn 1s  ease-in-out;
			animation-fill-mode: forwards;
			z-index: 1000;
		}
		
		@keyframes navFadeIn {
		  0%{
		    opacity: 0;
		  }
		  100%{
		    opacity: 1;
		  }
		}
		
		#fullpage-scroll-navigation li{
		  margin: 0px 0;
		  cursor: pointer;
		  padding: 8px;
		}
		
		#fullpage-scroll-navigation li a{
		  width: 4px;
		  height: 4px;
		  outline: 8px solid rgba(255,255,255,0);
		  border-radius: 10px;
		  background: #fff;
		  display: inline-block;
		  z-index: 100;transition-property: transform ;
			transition-duration: 0.2s;
			transition-timing-function: ease-in-out;
		  cursor: pointer;
		}
		
		#fullpage-scroll-navigation li a.active-nav,
		#fullpage-scroll-navigation li:hover a{
		  transition-property: transform ;
			transition-duration: 0.2s;
			transition-timing-function: ease-in-out;
		  transform: scale(2.6);
		}
		
		#main-content{
		  width: 100%;
		  min-height: 100vh;
		  max-height: 100vh;
		  position: fixed;
		  overflow: hidden;
/* 		  background: radial-gradient(#333, #111); */
		}
		
		.section{
		  width: 100%;
		  min-height: 100vh;
		  max-height: 100vh;
		  overflow: hidden;
		  display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		  position: absolute;
		  top: 0px;
		  left: 0px;
		  z-index: 1;
		  opacity: 0;
		}
		
		.active-page,
		.move-in-direction-0,
		move-in-direction-1{
		  z-index: 100;
		  opacity: 1;
		  box-shadow: 0px 0px 10px rgba(0,0,0, 0.5);
		}
		
		.move-out-direction-0,
		.move-out-direction-1{
		  z-index: 0;
		  opacity: 1;
		  box-shadow: 0px 0px 10px rgba(0,0,0, 0.5);
		}
		
		/*Add your custom animation effects here*/
		
		.move-out-direction-1{
		  animation: outUp 0.4s  ease-in-out;
			animation-fill-mode: forwards;
		  transform: translateY(0%);
		}
		
		@keyframes outUp{
				0%{
					transform: translateY(0%);
				}
				100%{
					transform: translateY(-50%);
				}
			}
		
		.move-in-direction-1{
		  animation: inUp 0.4s  ease-in-out;
			animation-fill-mode: forwards;
			transform: translateY(100%);
		}
		
		@keyframes inUp{
				0%{
					transform: translateY(100%);
				}
				100%{
					transform: translateY(0%);
				}
			}
		
		.move-out-direction-0{
		  animation: outDown 0.4s  ease-in-out;
			animation-fill-mode: forwards;
		  transform: translateY(0%);
		  z-index: 1;
		}
		
		@keyframes outDown{
				0%{
					transform: translateY(0%);
				}
				100%{
					transform: translateY(100%);
				}
			}
		
		.move-in-direction-0{
		  animation: inDown 0.4s  ease-in-out;
			animation-fill-mode: forwards;
		  z-index: 1;
		  transform: translateY(-50%);
		}
		
		@keyframes inDown{
				0%{
					transform: translateY(-50%);
				}
				100%{
					transform: translateY(0%);
				}
			}


	}