/*
    video.css
    asialeader.cn | 06/06/2021
    (c) Copyright 2021 web-communication.eu
*/

#video-box {
	position:relative;
	margin:0 auto;
	width:100%;
	/*max-width: 1920px;*/
	max-height:85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow:hidden;

	background-color: #000;


}

#video-logo	{
	position: absolute;
	z-index: 9100;
	right:20px;
	bottom:20px;
	color: #fff;
	text-align: left;
	padding: 30px;
	background: rgba(0, 0, 0, 0.30);
	font-family: 				'Michroma', sans-serif;
	}

#video-logo h1{font-size: 50px; font-weight: 300;margin: 0px;padding:0}

#video-logo h2{font-size: 30px; font-weight: 300; margin: 0px;padding:0}

#video-logo h3{font-size: 45px; font-weight: 300;margin:0 0 20px 0;padding:0}

#video-logo p{margin-bottom:30px;font-weight: 300; }




#video-play	{
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	min-height: 100%;
	display: block;


	background-image: url('../images/play.png');
  background-repeat: no-repeat;
  background-position: center;
	opacity: .3;
	}






#video-box .button {
	position: 					relative;
	margin-top: 				20px;
}

#video-button {
	border: 					1px solid #FFFFFF;
	font-family:      			Arial, sans-serif;
	color:						#FFFFFF;
	font-size: 		       		14px;
	padding: 					10px 25px;
	text-transform: 			uppercase;
	text-decoration: 			none;
	-moz-border-radius: 		20px;
	-webkit-border-radius:		20px;
	border-radius: 				20px;
 }

 #video-button:hover{
	background-color: 			#FFFFFF;
	color:            			#000000;
 }















#link-scroll {
	border: 1px solid #fff;
	color:#fff;
	text-transform: uppercase;
	padding: 10px 15px;
	text-decoration: none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
 }

 #link-scroll:hover{

	background-color: #2181FF;
	border: 1px solid #2181FF;
 }

#fold{position: relative; height:100%;}

#panel{background: #fff; z-index: 100; position:relative; height:300px;opacity:0.9;padding:20px;}


video#bgvid {
/*
	position: absolute; top: 0;left:0;


	min-width: 100%; min-height: 100%;

    width: auto; height: auto;
		*/
		/*z-index: 1;*/

  /*  background: url(../images/video_preview.jpg) no-repeat;

    background-size: cover;

    z-index: 0;*/

}

video {
	display: block;
}





/* responsive */

@media only screen and (max-width: 768px) and (orientation:portrait) {

	#video-box {
		height:60vh;
	}

	video {height:60vh;}

}


@media only screen and (max-width: 768px) and (orientation:landscape) {

	#video-box {
		height:80vh;
	}

	video {height:80vh;}

}



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

	video { display: block; width:100%;}

}