@import url('https://fonts.googleapis.com/css?family=Nunito:400,600');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');



*{
	padding: 0;
	margin:0;
	border:0;

}

/*.NavBar{
	float:left;
	height: 100%;
	width: 80px;
	font-family: 'Nunito', sans-serif;
	color: red;
	font-size: 30%;
}


.NavBar h4{
	padding: 20px;


}*/

.footer{
	font font-family: 'Mplus', sans-serif;
	font-size: 40%;
	color:#f5f5f5;
	float: right;
	margin: auto;
	width: 100px;
	position: absolute;
	
	


}

footer{
	width: 20%;
	height: 10%;



}

footer p{
	font font-family: 'Mplus', sans-serif;
	font-size: 40%;
	color:#f5f5f5;
	

}


#showcase{
	position: fixed;
	width:100vw;
	height:100vh;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 500%;
	background-size: cover;
	max-width: 100%;
}

#Myshowcase{
	width:100vw;
	height:100vh;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.Mycontent{
	position: absolute;
	margin:100px 530px;
	text-align: center;

}


.landing{
	display:table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: 100%;


}

.content{
	position: absolute;
	/*margin:100px 530px;*/
	margin:auto;
	text-align: center;
	width:100%;

}

.content h1{
	font-family: 'Nunito', sans-serif;
	color: #f5f5f5;
	font-size: 260%;
	max-width: 100%;
 }


 #jptext h1{
	font-family: 'Mplus',  sans-serif;
 	color: #f5f5f5;
	font-size: 260%;
	max-width: 100%;
	display: none;
	

 }




/*.content h1:hover{
	display: none;
	


}*/


 .logo img{
 	margin:-150px;
 	width:700px;
 	height: 440px;
 	margin-top:-15px;*/
 	max-width: 100%;

 	-webkit-animation-duration:2s;
 	-webkit-animation-delay:1s;
 }

.content ul li{
	display: inline-block;
	text-decoration: none;
	padding:10px;
}


.content ul li a{
	opacity: .3;
	font-size: 220%;
	color: #f5f5f5;
}

.content a:hover{
	opacity: 1;

}



video{
	width:100vw;
	height: 100%;
	object-fit: cover;
	margin: auto;


}

.container{
	font-family:'Nunito', sans-serif;


}




// Media Queries //



// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 

	#showcase{
	width:100%;
	height:100%;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 50%;*/
	background-size: cover;}

	video {
	width:100%;
	height: auto;
	object-fit: cover;
	}





	 }

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 


	#showcase{
	width:100%;
	height:100%;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 50%;*/
	background-size: cover;}


	video{
	max-width:100%;
	height: auto;
	object-fit: cover;
	}


 }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { 

#showcase{
	width:100%;
	height:100vh;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 50%;*/
	background-size: cover;}


	#Myshowcase{
	width:100%;
	height:100vh;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 50%;*/
	background-size: cover;


}

	.Mycontent{
	position: absolute;
	margin:100px 530px;
	text-align: center;
}

	 .logo img{
 	margin:-150px;
 	width:700px;
 	height: 440px;
 	/*margin-top:-15px;*/
 	margin:-15px auto;
 	max-width: 100%;
 
 	-webkit-animation-duration:8s;
 	-webkit-animation-delay:3s;
 }


 }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {

	#showcase{
	width:100%;
	height:100vh;
	display:table;
	background:url(images/_MG_5494.jpg) no-repeat 50% 50%;*/
	background-size: cover;}




}








// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width