/*------------------------------------*\
        3d-video-compositing.css
\*------------------------------------*/
/*
    * General.....................General use
    * Banner Video................
    * Youtube Video...............

*/





/*------------------------------------
    		$General
------------------------------------*/
.main-video{ 
	display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
}
.popup-youtube{ display: inline-block; }
.banner-btn-play{ display: block; padding: 0 40%; }
.banner-btn-play img{ width: 70% }
map area{ outline: none; }

.productinfo{ color: #515151; text-align: center;}
.productinfo,.productinfo a { font-size: 1.5rem; font-weight: 500; }
.productinfo a { text-decoration: underline; }

.video-wrapper{ text-align: center; }
.preload{ background: url(../../images/preloader.gif) no-repeat center center; }
.divider{ border-top: 1px solid #c2c2c2; }
.icon-title{ margin-right: 20px; }
.icon-title img{ width: 66px; height: 66px; }

#user-showcase img{ width: 100%; }
#user-showcase div:nth-of-type(3) div{ text-align: center; }
#user-showcase div:nth-of-type(3) .img-wrapper{ display: inline-block; margin-bottom: 20px; }

#experience-the-tools .img-wrapper,
#experience-the-tools .btn-wrapper{ margin-top: 30px; width: 100%; }
#experience-the-tools .btn-wrapper{ text-align: center; }
#experience-the-tools .btn-wrapper button{
	margin-bottom: 20px;
	margin-right: 15px;
	margin-left: 15px;
	width: 40%;
	height: 100%;
	white-space: pre;
}

	/*----- button style-iClone -----*/
	.btn-iclone .rl-btn-fill{
		background-color: #3f3f3f;
        border: 2px solid #3f3f3f;
        color: #76be3d;
        line-height: normal;
        font-size: 1.25rem;
        border-radius: 0;  
	}
	.btn-iclone .rl-btn-fill:hover, 
    .btn-iclone .rl-btn-fill:active, .btn-iclone .rl-btn-fill:active:focus{
        background-color: #76be3d !important;
        border: 2px solid #76be3d;
        color: #fff !important;
        outline:none;
    }
    .btn-iclone .rl-btn-fill:focus{
        background-color: #76be3d;
        border: 2px solid #76be3d;
        color: #fff;
        outline:none;
    }

	/*----- button style-popVideo -----*/
	.btn-popvideo .rl-btn-fill{
		background-color: #3f3f3f;
        border: 2px solid #3f3f3f;
        color: #42d365;
        line-height: normal;
        font-size: 1.25rem;
        border-radius: 0;  
	}
	.btn-popvideo .rl-btn-fill:hover, 
    .btn-popvideo .rl-btn-fill:active, .btn-popvideo .rl-btn-fill:active:focus{
        background-color: #42d365 !important;
        border: 2px solid #42d365;
        color: #fff !important;
        outline:none;
    }
    .btn-popvideo .rl-btn-fill:focus{
        background-color: #42d365;
        border: 2px solid #42d365;
        color: #fff;
        outline:none;
    }

.tutorial-list li a{ color: #515151; text-decoration: underline; }


#idea-solution-packages .text-md{ color: #76be3d; }
#idea-solution-packages .btn-getIt{ 
	background-color: #242424;
	border-color: #242424; 
	border-radius: 5px;  
	text-align: center;
	width: 100%;
}

#idea-solution-packages .package-pro{ position: relative; }
#idea-solution-packages .package-pro .img-wrapper{ width: 100%; }
#idea-solution-packages .package-pro p{ 
	text-align: center; 
	padding-right: 40px;
	padding-left: 40px; 
}
#idea-solution-packages .package-pro a{ display: inline-block; }
#idea-solution-packages .package-pro .package-label{
	position: absolute;
	top: 0;
	right: 0;
	margin-left: 380px; 
}

#idea-solution-packages .btn-getIt a div{ 
	background-color: #76be3d; 
	border-color: #76be3d; 
	border-bottom-right-radius: 5px;
  	border-bottom-left-radius: 5px;
	color: #3f3f3f;
	width: 100%; 
	height: 72px;
}
.btn-getIt > p{ 
	color: #76be3d;
	font-size: 2.75rem; 
	font-weight: bold;
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	padding-top: 40px;
	padding-bottom: 20px; 
}
.btn-getIt > p,.btn-getIt > a{ width: 100%; }
.btn-getIt span,
.btn-getIt i.fa{ font-size: 2.25rem; font-weight: 500; }
.package-title{ 
	color: #fff;
	display: inline-block;
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 40px;
}




/*------------------------------------
    		$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/Landing_banner.jpg);
		background-color: #000;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 30% 50%;
	}
	.video-bgi > iframe{ display: none; }
	.banner-mask-bright{ background-color: transparent; }





/*------------------------------------
    		$Youtube Video
------------------------------------*/
	.video {
		position: relative;
		padding-top: 13.5px;
		overflow: hidden;
		text-align: center;	
		max-width: 100%;
	}
	.video > img{ cursor: pointer; }
	
	#video-player {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		display: block;
	}





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and ( max-width: 1440px ){
	/*------------------------------------
    		$General
	------------------------------------*/
	.btn-getIt > p{ font-size: 3vw; }
}

@media screen and ( min-width: 769px ) and ( max-width: 1300px ){
	.popvideo-logo img{ width: 90%; }
}

@media screen and ( max-width: 991px ){
	/*------------------------------------
    			$General
	------------------------------------*/
	.video-wrapper{ padding-top: 40px; }
	.video{ padding-top: 1.5%; }
	#user-showcase .video-wrapper{ padding-top: 0; }
	#user-showcase div:nth-of-type(2) > .video-wrapper{ margin-bottom: 20px; }
	#user-showcase div:nth-of-type(3) > div{ margin-bottom: 60px; }
	#idea-solution-packages .package-pro .package-label{ margin-left: 140px; width: 35%; }

	.btn-getIt > p{ font-size: 4vw; }
}

@media screen and ( max-width: 767px ){
	/*------------------------------------
    			$General
	------------------------------------*/
	.text-lg{ font-size: 10vw; }
	#idea-solution-packages .btn-getIt{ margin-bottom: 40px; }
	.tutorial-list{ width: 100%; }
	.btn-getIt > p{ font-size: 6vw; }
	#idea-solution-packages .package-pro p{ padding-right: 20px; padding-left: 20px; }
	#idea-solution-packages .package-pro .package-label img{ width: 100%; }
	.package-title{ font-size: 2.25rem; }
	#experience-the-tools > div:nth-of-type(2) >div:first-of-type{ margin-bottom: 60px; }
	.btn-wrapper{ margin-top: 20px; }
}
@media screen and ( max-width: 500px ){
	.btn-getIt > p{ font-size: 1.75rem; }
	.package-title{ font-size: 2rem; margin-bottom: 20px; }
	#experience-the-tools .btn-wrapper button{ width: 80%; height: 60px; }
}