/*------------------------------------*\
    		$features CSS 
\*------------------------------------*/
/*
	* General
		* cover common padding setting
		* New Add
	* scrollspy
	* tooltip
	* Animation
	* Media query
*/





/*------------------------------------
    		$General
------------------------------------*/
body { position: relative; }
	
	/*------------------------------------
    	$cover common padding setting
	------------------------------------*/
	.z-index{ z-index: 10; }

	@media screen and (min-width: 991px){
		.rl-wrapper-topbottom{
			padding-top: 60px;
			padding-bottom: 70px
		}
		.rl-declareBoard div.rl-wrapper-topbottom:nth-child(1){
			padding-top: 60px;
			padding-bottom: 60px;
		}

		.section3 .rl-margin-top-s,
		.section4 .rl-margin-top-s{ margin-top: 0; }
		
		.no-padding-bottom{ padding-bottom: 0; }
		.rl-margin-top{ margin-top: 0; }
	}
	@media screen and (min-width: 1600px){
		.no-padding-top{ padding-top: 0; }
	}

	@media screen and (max-width: 991px){
    	.rl-margin-top{margin-top: 60px; margin-bottom: 0;}
		/*.section2 .rl-margin-bottom{ margin-bottom: 0; }*/
	}
	@media screen and (max-width: 500px){
		.rl-margin-top{ margin-top: 0; }
		.rl-margin-bottom{ margin-bottom: 0; }
	}
	




.rl-declareBoard-header1 {
    background-image: url(../../images/features/title-1.jpg);
}
	.new-label{
        position: absolute;
        top: -65px;
        right: -10px; 
        width: 168px;
        height: 84px;
    }
    .section1 .new-label{ 
    	top: -85px; 
    	width: 168px;
        height: 84px; 
    }
    .new-label-left{
    	display: inline-block;
    	position: absolute;
    	top: -80px; 
    	left: 15px;
    	width: 168px;
    	height: 84px;
    }
	.section2 .new-label,
	.section4 .new-label{ top: -20px;; right: 0; }

	.section2 h2, .section4 h2{ color: #c8c8c8; }
	.section2 h3, .section4 h3{ color: #42D365; }
	.section2 h4{ color: #fff; }
	.section2 p, .section4 p{ color: #c8c8c8; }
	.section2 .underline, .section4 .underline{ border-bottom: 2px solid #626262; }





	/*------------------------------------
	    		$New Add
	------------------------------------*/
	.section1 p.title{ font-weight: 500; }
	.section1 p{ margin-bottom: 10px; }

	.backgroundOptions > div{display: inline-block;}
	span.bold{ font-weight: 500; }

	.flex-container{
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.backgroundOptions-declare-label{ display: inline-block; }
		.section1 .backgroundOptions-label{
			top: -50px;
			right: -50px;
		}





.section2 .bg-img{
	background-image: url(../../images/features/features-Wide-Range-of-Chroma-Key-Color-Support.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    float: left;
    position: relative;
    width: 100%;
    height: 540px;
}
.section2 .demo-video{
	position: absolute;
	right: 0;
	bottom: 0;
	height: 150px;
}

.section3 .bg-img{
	background-image: url(../../images/features/features-Transparent-Video-Library.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    float: left;
    width: 100%;
    height: 465px;
}

.section2 .bg-img .description{ padding-right: 0; padding-left: 30px; }
.section2 .arrow{ margin-left: 30px; }
.section3 .bg-img div:first-child{ height: 60%; }

.section2 .demo-video-anyDevice{
	position: absolute;
	right: 15px;
	bottom: -80px;
	z-index: 0;
}
.popup-youtube{display: inline-block;}
.popup-youtube img{ width: 100%; }

/*.align-img{display: inline-block;}
.align-img img{width: 100%;}*/





/*------------------------------------
            $SEO Adjust
------------------------------------*/
	.section2 .text-md, .section4 .text-md{ color: #c8c8c8; }
	.section2 .text-sm, .section4 .text-sm{ color: #42D365; }
	.section2 .text-xs{ color: #fff; }

	/*----- 在 $Media query 還有 $SEO -----*/




/*------------------------------------
    		$scrollspy
------------------------------------*/
section[id]:before {
   content:"";
   display:block;
   margin-top: -59px;
   height: 59px;
   visibility: hidden; 
}
	#dot-nav{ 
		top: 40%; 
		left: 0.5%;
		z-index: 99;
	}
	#dot-nav ul {
		list-style: none;
		margin:0;
		padding: 0;
	}

	#dot-nav > li > a{ text-align: center; }
	#dot-nav > li > a:focus, 
	#dot-nav > li > a:hover,
	#dot-nav > li > a:active:focus{ background-color: transparent; }
	
	#dot-nav .fa{ 
		color: #191919; text-align: center;
		font-size: 12px;
		-webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
	}
	#dot-nav .active .fa{ color: #42D365; font-size: 18px;}
	




/*------------------------------------
    		$tooltip
------------------------------------*/
	.tip{ 
		font-size: 16px;
		font-weight: 300;
		position: relative; 
		display: inline-block;
		width: 35px;
		white-space: pre;
	}
  	.tip:hover{	
  		cursor: pointer; 
  		opacity: 1; 
  	}

  	#dot-nav .active .tip:before{ 
  		color: #191919; 
  		background-color: #42D365;
  		font-weight: 500; 
  	}
	.tip:before{
		content: attr(data-tooltip);
		color: #fff;
		background-color: #191919;
		padding: 10px;
		position: absolute;
    	left: 100%;
    	bottom: -10px;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
	}
	.tip:after{	
	}

	.tip:hover::before, 
	.tip:hover::after {	
		left: 140%;
		opacity: 1;
		visibility: visible;
	}





/*------------------------------------
    		$Animation
------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
	@-webkit-keyframes slideInDown {
	  from {
	    -webkit-transform: translate3d(0, -50%, 0);
	    transform: translate3d(0, -50%, 0);
	    visibility: visible;
	  }

	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	}

	@keyframes slideInDown {
	  from {
	    -webkit-transform: translate3d(0, -50%, 0);
	    transform: translate3d(0, -50%, 0);
	    visibility: visible;
	  }

	  to {
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}





/*------------------------------------
    		$Media query
------------------------------------*/
@media screen and (max-width: 1300px){
	.new-label-left{ top: 0; }
}

@media screen and (max-width: 1200px){
	#dot-nav{ left: 0; }	
	.new-label{ top: -60px; }
	.section2 .new-label{ top: -80px; }
	.section2 .bg-img .description{ padding-left: 15px; }
	.section3 .bg-img div:first-child{ height: 45%; }
	.section2 .bg-img{ height: 620px; }
	.section2 .rl-declare-label{ padding-right: 0; } 
}

@media screen and (min-width: 991px) {
	.section2 h3.title{ margin-bottom: 15px; }
	/*----- $SEO -----*/
	.section2 .text-sm.title{ margin-bottom: 15px; }
}

@media screen and (max-width: 991px){
	.scrollspy{ display: none !important; }
	.section2 .bg-img{ background-image: none; height: auto;}
	.section2 .bg-img .description{ padding: 0; }
	.section2 .demo-video-anyDevice{ position: static; }

	.new-label-left{ 
		text-align: right;
		position: absolute;
		top: -80px;
		left: auto;
		right: 0;
	}
	.img-wrapper{ margin-bottom: 40px; }
}

@media screen and (max-width: 768px){
	.new-label{ top: -50px; right: -20px; text-align: right;}
		.section1 .new-label{ top: -50px; }
		.new-label img,
		.section2 .new-label-left img{display: inline-block; max-width: 80%; }
		.backgroundOptions-declare-label{ display: block; padding-right: 0; }
			.section1 .backgroundOptions-label{ right: 0; }
}

@media screen and (max-width: 500px){
	.rl-declare-label{ padding-right: 80px; }
	.backgroundOptions-declare-label{ padding-right: 0; }

	.section2 .rl-declare-label{ padding-right: 0; } 
		.new-label{ text-align: right; right: -5px; }
		.section2 .new-label,
		.section2 .new-label-left{ top: -50px; right: 0; }
		.section4 .new-label{ top: -30px;; right: 0; }
			.new-label img, 
			.section2 .new-label-left img{ max-width: 60%; }

}