/*------------------------------------*\
    		$default CSS 
\*------------------------------------*/
/*
	* General
	* SEO Adjust
	* Grid System
	* Banner Video
	* Others
	* Media query
*/


/*------------------------------------
    		$General
------------------------------------*/
	h1.title{
		color: #fff;
		font-size: 3.75vw;
		line-height: 1.2;
	}
	h2.title{ color: #42D365; }
	
	.announce p{ color: #c8c8c8; font-size: 1.75rem; }
	.announce .mac{ font-size: 1.75rem; }

	.whypopvideo ul{ 
		list-style-image: url("../../images/default/V.png"); 
		padding-left: 0;
		margin-left: 3.125vw;
	}
		.whypopvideo ul li{ color: #c8c8c8; line-height: 2; padding-left: 10px;}
		.whypopvideo p{ color: #c8c8c8; }

	.application{ border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;}
		.application-items a{color: #2F9246;}
		.application-items a:hover,
		.application-items a:active:focus,
		.application-items a:focus{color: #3aba58;}

	.resources h4{ font-weight: 500; }

	.rl-btn-feature{
		width: 58.33333333%;
    	font-size: 1.85vw;
    	line-height: 1.7;
    	white-space: normal;
	}





/*------------------------------------
            $SEO Adjust
------------------------------------*/
	.text-lg.title{
		color: #fff;
		font-size: 3.75vw;
		line-height: 1.2;
	}
	.text-md.title{ color: #42D365; }
	.resources .text-xs{ font-weight: 500; }





/*------------------------------------
    		$Grid System
------------------------------------*/
	/*---5 columns layout---*/
	.col-xs-5ths,
	.col-sm-5ths,
	.col-md-5ths,
	.col-lg-5ths {
	    position: relative;
	    min-height: 1px;
	    padding-right: 15px;
	    padding-left: 15px;
	}
	.col-xs-5ths {
	    width: 20%;
	    float: left;
	}

	@media (min-width: 768px) {
		.col-sm-5ths { width: 20%; float: left; }
	}
	@media (min-width: 992px) {
	    .col-md-5ths { width: 20%; float: left; }
	}
	@media (min-width: 1200px) {
	    .col-lg-5ths { width: 20%; float: left; }
	}





/*------------------------------------
    		$Banner Video
------------------------------------*/
.banner-video-wrapper{
	position: relative;
    max-height: 760px;
    /*max-height: 700px;*/
    overflow: hidden;
    background-size: contain;
    
}
	.banner{
		/*background-color: #191919;
		background-image: url(../../images/default/popVideo-home-banner.jpg);
		background-size: cover;
		background-repeat: no-repeat;
    	background-position: center center;	
		padding-bottom: 36.4%;
		/*padding-bottom: 36.4%;*/
	}
	.banner-video{
    	/*padding-bottom: 36.7845%;*/
		position: relative;
	    height: 0;
	    overflow: hidden;
	    padding-bottom: 56.25%;
	    z-index: 10;
	}

		.banner-video iframe{
			position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}
	.banner-video-mask{
		background-color: rgba(0,0,0,0.55);
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
		z-index: 20;
	}	
	.banner-video-heading{
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		z-index: 30;
		-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
				-o-transform: translateY(-50%);
					transform: translateY(-50%);
	}

	/*when video cant play on the mobile device*/
	.video-bgi{
		background-image: url(../../images/default/popVideo-home-banner.jpg);
		background-color: #000;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
	}
	.video-bgi > iframe{ display: none; }
	.banner-mask-bright{ background-color: transparent; }



/*------------------------------------
    		$Others
------------------------------------*/
.banner-logo{margin-bottom: 6vh;}
.whypopvideo img{ margin-bottom: 40px; }
.application-items img{margin-bottom: 40px;}

.rl-position-rel a:nth-child(3){
	position: absolute;
	left: 15px;
	bottom: -20px;
}
.rl-position-rel a:nth-child(4){
	position: absolute;
	left: 140px;
	bottom: -20px;
}
.resource-items{width: 80%; margin: 0 auto;}





/*------------------------------------
    		$Media query
------------------------------------*/
@media screen and (max-width: 1100px){
	h1.title{ font-size: 5.6vw; }
	.banner-logo  img{ max-width: 70%; }
	.banner-btn-play img{ width: 15%; }
	.rl-btn-feature{ font-size: 3vw; }
	
	.banner{
		/*padding-bottom: 50.7845%;*/
	}

}

@media screen and (min-width: 991px) and (max-width: 1100px){
	.rl-position-rel  a:nth-child(3),
	.rl-position-rel a:nth-child(4){position: static; display: block;}
}

@media screen and (max-width: 991px){
	.banner-logo{margin-bottom: 40px;}
	.whypopvideo img{ margin-bottom: 20px; }
	.whypopvideo p{ margin-bottom: 40px; }
	.rl-position-rel a:nth-child(3){ bottom: -30px;	}
	.rl-position-rel a:nth-child(4){ bottom: -30px; }
	.application-items{margin-bottom: 60px;}
}

@media screen and (max-width: 768px){
	.banner-logo{margin-bottom: 20px;}
	.rl-btn-feature{ width: 83.33333%; font-size: 4vw; }
	.application-items img{ margin: 20px auto; }	
	.resource-items p{margin-bottom: 40px;}
}

@media screen and (max-width: 500px){
	.rl-btn-feature{ width: 83.33333%; font-size: 4.5vw; }
	.whypopvideo ul{ 
		padding-left: 40px;
		margin-left: 0;
	}	
}