@charset "UTF-8";

#logo{
	float: left; 
	padding-left: 30px; 
	padding-top: 15px;
	transition-duration: .1s;
}

#nav_bg{
	background-color: #1C2526;
	display: none;
	opacity: .9;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -10;
}

#nav_container{
	width: 100%;
	position: fixed;
	height: 90px;
	vertical-align: middle;
	line-height: 90px;
	transition-duration: .1s;
	z-index: 40;
}

#nav_contents{
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	letter-spacing: 2px;
	color: whitesmoke;
	width: 100%;
	transition-duration:.25s;
	text-align: right;
}

.nav_link:hover{
	transition-duration: .25s;
	color: #BBBBBB;
}

#front_img_bg{
	width:100%;
	transition-duration:.5s;
}

#front_text{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	letter-spacing: -1px;
	color: whitesmoke;
	transition-duration:.5s;
	position: relative;
}

#watch_video_button{
	background:url(../images/watch_video.png) no-repeat;
	background-size: 180px 60px;
	height: 60px;
	width: 180px;
	transition-duration: .5s;
}

#watch_video_button:hover{
	cursor: pointer;
	background:url(../images/watch_video_hover.png) no-repeat;
	background-size: 180px 60px;
	transition-duration: .5s;
}

#close_video_button{
	background:url(../images/close_video.png) no-repeat;
	background-size: 180px 60px;
	height: 60px;
	width: 180px;
	transition-duration: .5s;
}

#close_video_button:hover{
	cursor: pointer;
	background:url(../images/close_video_hover.png) no-repeat;
	background-size: 180px 60px;
	transition-duration: .5s;
}

#video_bg{
	height: 100%;
	width: 100%;
	z-index: 50;
	position: fixed;
	background-color: black;
	opacity: .6;
}

#video_container{
	text-align: center; 
	width: 100%; 
	height: 100%;
	z-index: 100;
	position: fixed;
	display: table;
}

@media screen and (min-width:1149px){	
	#front_img_bg{
		background:url(../images/front.jpg)no-repeat;
		height:100vh;
		min-height:652px;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		max-height: 950px;
		background-position: center;
	}
	
	#front_text{
		font-size: 70px;
		padding-left: 8%;
		top: 45%;
	}
	
	#animated_video{
		width: 800px;
		height: 450px;
		padding-bottom: 30px;
	}
}

@media screen and (max-width:1149px) and (min-width:900px){
	#front_img_bg{
		background:url(../images/front.jpg) no-repeat;
		height:100vh;
		min-height:620px;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		max-height: 850px;
		background-position: center;
	}
	
	#front_text{
		font-size: 55px;
		padding-left: 5%;
		top: 45%;
	}
	
	#animated_video{
		width: 640px;
		height: 360px;
		padding-top: 130px;
		padding-bottom: 25px;
	}
}

@media screen and (max-width:900px){
	#front_img_bg{
		background:url(../images/front.jpg) no-repeat;
		height:500px;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		max-height: 800px;
		background-position: center;
	}
	
	#front_text{
		font-size: 40px;
		padding-left: 3%;
		top: 35%;
	}
	
	#animated_video{
		width: 400px;
		height: 225px;
		padding-top: 70px;
		padding-bottom: 10px;
	}
}