*{ margin: 0;}


body{ background:#111111; color:#333434;}
.header{ background:#000; padding:20px 0; }

.browse-catgry .btn-default{ font-size:18px; color:#fff;}
.browse-catgry .dropdown-toggle::after { font-size:30px;vertical-align:inherit;}


.banner{ position: relative;}
.banner-content-wrap{ position: absolute; z-index: 1; width: 100%; top:0; left: 0; height:100%;}

.categry-tag span{ display: inline-block; margin-top:50px; background:rgba(246,152,38,0.7); padding:5px 10px; border-radius:4px; color:#fff;}
h1{ font-size:62px;  color:#FFF;}
.banner-content-wrap .banner-time p{ display: inline-block; padding:10px; border:1px solid #ffffff; margin-top:10px; border-radius:4px;}
.banner-desc{ margin-bottom: 50px; color:#fff; }
.banner-desc span{ display: inline-block;  background:rgb(93 92 91 / 70%); padding:5px 10px; border-radius:4px; color:#fff;}
h1{ font-size:62px;  color:#FFF;}

.banner-play-btn a{ background:#FF0000; padding:5px 35px; margin-top:320px;}
.banner-play-btn a img{ height:40px; }
.banner-time{color:#ffffff;}
#video{
	width: 262px;
	height: 156px;
}



h2{ font-size:24px; color:#fff; border-bottom: 1px solid #707070; padding: 10px 0; margin-bottom: 25px;}
h2 a{ font-size:18px; color:#fff; float: right;}


.vdo-thumb-layer{ position: relative; cursor: pointer;}
.vdo-thumb-layer p{position: absolute; left: 0; bottom:0px; width:100%; margin-bottom: 0; padding:10px 6px; font-size:12px;}

.vdo-thumb-layer p span:first-child{ display: inline-block; background:rgba(246,152,38,0.7); padding:3px 6px; border-radius:4px; color:#fff;}
.vdo-thumb-layer p span:last-child{ display: none; background:rgba(0,0,0,0.6); padding:3px 6px; border-radius:4px; color:#fff; float:right;}

.vdo-thumb-title{ font-size:20px; color:#fff; padding:5px; margin-bottom:0px; margin-top: 10px; padding-bottom: 0px;}
.vdo-thumb-title a { color:#fff; }
.vdo-thumb-post-time{ color:#fff; font-size:16px; padding-left: 5px;}

.vdo-thumb-layer-hover{ position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); opacity: 0; transition: all 0.4s}
.vdo-thumb-layer-hover div{ display: flex; width: 100%; height:100%; justify-content: center; align-items: center; }
.vdo-thumb-layer-hover div img{ height:30px; }

.vdo-thumb-layer:hover .vdo-thumb-layer-hover{opacity: 1;}

.outer-video-player{ width: 100%; height:560px;}

.play-vdo-content-wraper{ background: #fff; padding:15px; margin-top: 65px;}
.play-vdo-title{ font-size:26px; color:#333434;}
.play-vdo-title span{ font-size:14px; color:#005E8F;}
.play-vdo-details{ font-size:16px; color:#666767; }
.play-vdo-details span{ margin-right:20px; }
.play-vdo-details span:last-child{ position: relative; padding-left: 10px;}
.play-vdo-details span:last-child::before{position:absolute; content: ''; width:8px; height:8px; background: #666767; top:7px; left:-5px; border-radius: 50px; }

.play-vdo-desc-title{ font-size:22px; color:#333434; margin-top:15px; margin-bottom: 15px;}
.play-vdo-content-wraper ul li img{ height:60px; border-radius: 100px;}




footer{ padding-top:40px; margin-top:70px; background: #000;}

footer .display-5{ color:#fff;}
footer a { display:block; color:#ccc; line-height:26px;}
footer a:hover { color:#008e41; text-decoration:underline;} 
.bottom-line{ text-align:center; background:#666767; color:#fff; line-height: 40px;}
footer .display-5{ font-size:20px;} 
.enquery { height:30px; width: 120px; position: fixed; text-align: center; color:#fff; top:320px; right:-46px; background:green; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); z-index: 99999; border-top-left-radius: 6px; border-top-right-radius: 6px;}
.join-btn{ background:#509da5; padding:10px 40px; margin-top:15px; font-size:18px; color:#fff; }
.btn{ -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.btn:hover{ -webkit-opacity: 0.7; -moz-opacity: 0.7; -ms-opacity: 0.7; -o-opacity: 0.7; opacity: 0.7;} 
.community-btn a{ display: block; text-align: center; background:#509da5; color:#fff; font-size:20px; padding:20px; margin-top:40px; }
 
.play-mobile-round-btn{ display: none; }

@media only screen and (min-width: 1500px){.categry-tag span{ margin-top:150px;}}
	
@media only screen and (max-width: 1250px){ h1{ font-size:42px; } .banner-desc{margin-bottom: 20px;}.banner-play-btn a img{ height:25px;} .outer-video-player{height:500px;}}	
@media only screen and (max-width: 1110px){ h1{ font-size:36px; } .banner-content-wrap .banner-time p{ font-size:12px;}.banner-desc{ font-size:14px;} .outer-video-player{height:460px;}}	
@media only screen and (max-width: 991px){ .banner-desc{ display: none;} .outer-video-player{height:360px;}}	
@media only screen and (max-width: 768px){ #video{
	width: 100%;
	height: 100%;
} .categry-tag span{ margin-top:20px; font-size:12px; padding:3px 5px;} h1{ font-size:24px;} .banner-content-wrap .banner-time p{ padding:2px 5px;} .outer-video-player{height:300px;} }	



@media only screen and (max-width: 576px) { footer .display-5 { text-align:center;} footer p{ text-align: center;} 
	.banner-play-btn{display: none;}
	.play-mobile-round-btn{ display: inline-block; float: right; margin-right: 40px;}
	.banner-content-wrap .col-8{ bottom:-30px;}
	h1{ margin-bottom: 0;} h2{ font-size:18px;} h2 a{ font-size:14px;} .outer-video-player{height:200px;}
}   

@media only screen and (max-width: 450px) { h1{ font-size: 18px;} .banner-content-wrap .col-8{ bottom:6px;} .join-btn{ font-size:16px; padding:8px 12px;}}