/*------------------------------------*\
    	$ct8-fb-campaign.css
\*------------------------------------*/
/*
	* Navbar....................
	* Space.....................
	* General...................
	* Media Query...............RWD
*/



.border{ border: 1px solid #fff; }

/*------------------------------------
    		$Navbar
------------------------------------*/
.bg-color-topbar{background-color: #fff;} /*topbar background color*/
.navbar-container{
	border-radius: 0; 
	border-bottom: 1px solid #e1e1e1;
	margin: 0;
	width: 100%;
	/*box-shadow: 0 2px 7px 0px #888;*/
}
.paddingNavbar{ max-width: 1600px; margin: 0 auto; }
	.navbar-row{
		margin: 0 auto;
		padding-right: 100px;
	    padding-left: 30px;
	    width: 100%;
	}	
	.navbar-header{	height: 60px;  margin-right: 30px; }
		.navbar-brand{ padding: 0; }
		.product-logo{ display: inline-block; }




/*------------------------------------
    		$Space
------------------------------------*/
.rl-wrapper-topbottom-l{ padding-top: 95px; padding-bottom: 95px }
.rl-wrapper-top-l{ padding-top: 95px; }
.rl-wrapper-bottom-l{ padding-bottom: 95px }



/*------------------------------------
    		$General
------------------------------------*/
.flex-container{ 
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    		flex-wrap: wrap;
}
.direction-column{
	-webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.direction-row{
	-webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
	/*-----flex: 垂直置中-----*/
    .align-center{     
        display: flex;
        display: -ms-flexbox;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    
	/*----- flex: 水平置中 -----*/
	.justify-center{
		-webkit-justify-content: center;
      			-ms-flex-pack: center;
          		justify-content: center;
	}
	.justify-space-between{
		-webkit-justify-content: space-between;
      			-ms-flex-pack: justify;
          		justify-content: space-between;
	}

	/*-----smooth transition-----*/
    .transition{
        -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;
    }

.border{ border: 1px solid #000; }
body{ padding-top: 60px; }
	.container-fluid{ padding-right: 0; padding-left: 0; }
	.img-wrapper img{ margin: 0; width: 100%; }
	.footer{ 
		border-top: 1px solid #7b7b7b; 
		background-color: #505050; 
		color: #fff !important;
		font-size: 1.125rem;
		font-weight: 300;
	}
	.divider{ border-bottom: 1px solid #a3a3a3; }
	.popup-youtube{ display: inline-block; }
	.popup-youtube img{ width: 100%; }


	/*-----Prizes-----*/
	.prizes{ border-bottom: 1px solid #a3a3a3; }
	.prizes .column p{ text-align: left; max-width: 414px; /*width: 94.32%;*/ margin: 0 auto; }
	.prizes .column:nth-child(2) p{ margin-left: 0; }
	.prizes .column:nth-child(4) p{ margin-right: 0; }

	.prizes .column:nth-child(2){ text-align: left; }
	.prizes .column:nth-child(3){ text-align: center; }
	.prizes .column:nth-child(4){ text-align: right; }
	.prizes .img-wrapper{ display: inline-block; margin-bottom: 40px; }


	/*-----Rule-----*/
	.rule{ border-bottom: 1px solid #a3a3a3; }
	.rule .column ul{ padding-left: 20px;}

	/*-----Guest Judge-----*/
	.sign{ margin-top: 20px; }

	/*-----Tool-----*/
	.tool{ background-color: #505050; }
	.tool .free-download .column:nth-child(2){ margin-bottom: 75px; }
	.tool .free-download .column:nth-child(3),
	.tool .free-download .column:nth-child(4){ text-align: center; }
	.tool .free-download .column:nth-child(4){ margin-bottom: 28px; }

	.tool .free-download .img-wrapper{ display: inline-block; margin-bottom: 50px; }
	.tool .free-download .column:nth-child(3) .img-wrapper{ margin-bottom: 17px; }
	.tool .free-download .column:last-of-type p{ margin: 0 auto; max-width: 70%; }

	.tutorial-video .column .img-wrapper{ margin-bottom: 0; }
	.tutorial-video .column:nth-child(2),
	.tutorial-video .column:nth-child(3),
	.tutorial-video .column:nth-child(4){ margin-bottom: 75px; }
	
	.tutorial-video .column{ text-align: center; }
	.tutorial-video .column .text-wrapper{ text-align: left; max-width: 420px; /*width: 95.45%;*/ }

	.tutorial-video .column .text-wrapper{ margin: 0 auto; }
	.tutorial-video .column:nth-child(2) .text-wrapper,
	.tutorial-video .column:nth-child(5) .text-wrapper{ margin-left: 0; }
	.tutorial-video .column:nth-child(4) .text-wrapper{ margin-right: 0; }

	.tutorial-video .column:nth-child(2),
	.tutorial-video .column:nth-child(5){ text-align: left; }
	.tutorial-video .column:nth-child(4){ text-align: right; }
	
	.content .btn-wrapper{ text-align: left; }
	.tool .content .img-wrapper{ display: inline-block; margin-bottom: 40px; }

	.content div:last-of-type > div{ text-align: center; }
	.content div:last-of-type > div img{ width: 100%; }
	.content div p{ text-align: left; }
	.content div:nth-of-type(2) > div{ text-align: center; margin-bottom: 120px; }
	.content div:first-of-type,
	.content div:last-of-type,
	.content div:last-of-type > div:last-of-type{ margin-bottom: 0; }


	/*-----font setting-----*/
	.rl-style .text-md,.rl-style .text-sm,.rl-style .text-xs{ font-weight: lighter; }
	.rl-style .text-md{ font-size: 3rem; margin-bottom: 75px; }
	.rl-style .text-sm{ margin-bottom: 30px; }
	.rl-style .text-xs{ margin-top: 40px; }
	.rl-style ul, .rl-style p{ margin: 0; }
	.rl-style p, .rl-style li{ color: #4e4e4e; }
	.prizes .text-md, .rule .text-md{ color: #4e4e4e; }
	.tool p{ color: #fff; }
	.tool .text-md{ color: #fff; }
	.tool .text-sm{ color: #ff421e; }
	.tool .text-xs{ color: #fff; font-size: 1.5rem; }
	.highlight{ color: #ff421e; font-weight: bold; }

	/*-----link-----*/
	.rl-style a{ color: #ff421e; font-weight: bold; }
	.rl-style a:hover{ color: #ff421e; }
	.rl-style a:focus,.rl-style a:active,.rl-style a:active:focus{ color: #ff421e; outline: none; }
	

	/*-----button style-----*/
	.rl-btn-fill{
		background-color: #ff421e !important;
        border: 2px solid #ff421e;
        color: white !important;
        line-height: normal;
        font-size: 1.125rem;
        border-radius: 0;  
	}
	.rl-btn-fill:hover{ background-color: transparent !important; color: #ff421e !important; }
	.rl-btn-fill:focus, .rl-btn-fill:active, .rl-btn-fill:active:focus{
        background-color: transparent;
        color: #ff421e;
        outline:none;
    }
	.btn, i.fa{ font-size: 1.875rem; font-weight: bold; }
	.rule button, .Guest button{ 
		margin-top: 60px;
		width: 482px; 
		height: 60px; 
	}
	.tool button{ width: 320px; height: 60px; }
	.tool .content button{ margin-top: 20px; width: 248px;}
	.tool .btn-ct8-download{ 
		width: 330px; 
		height: 60px; 
		margin-top: 0;
		margin-bottom: 15px; 
	}
	.tool .btn-free-bg-download{ 
		width: 377px; 
		height: 60px; 
		margin-top: 0;
		margin-bottom: 15px; 
	}
	.tool .btn-ct8-download{
		width: 255px; 
		height: 60px; 
		margin-top: 0;
		margin-bottom: 15px; 
	}
	.download-wrapper{ text-align: center; }
	.download-wrapper a > button:first-of-type{ margin-right: 11px; }
	.download-wrapper a > button:last-of-type{ margin-left: 11px; }
	.tool .btn-ct8-download .fa-windows,
	.tool .btn-ct8-download .fa-apple{ 
		font-size: 2.25rem; 
		font-weight: normal;
		margin-right: 20px; 
	}
	.btn-watch-more{ margin-top: 60px; }
	.tool .btn-ct8-download:hover,
	.tool .btn-free-bg-download:hover{ 
		background-color: #ff421e !important; 
		color: #fff !important; 
	}





/*------------------------------------
    		$Media Query
------------------------------------*/
@media screen and (max-width: 1100px) {
	/*------------------------------------
    			$Navbar
	------------------------------------*/
	.product-logo{ margin: 0 auto; }
	.navbar-row{ padding-right: 30px; }	





}
@media screen and (max-width: 991px) {
	/*------------------------------------
	    		$General
	------------------------------------*/

	/*-----Prizes-----*/
	.prizes .column:nth-child(2),
	.prizes .column:nth-child(3),
	.prizes .column:nth-child(4){ text-align: center; }
	.prizes .column:nth-child(2),
	.prizes .column:nth-child(3){ margin-bottom: 75px; }

	.prizes .column p{ max-width: 100%; }
	/*-----Guest-----*/
	.Guest > div .column:nth-of-type(2){ text-align: center; }
	.Guest > div .column:nth-of-type(2) div{ display: inline-block; margin-bottom: 40px; }
	

	/*-----Tool-----*/
	.tool .free-download .column:nth-child(3){ margin-bottom: 75px; }

	.tool .tutorial-video .column:nth-child(odd){ text-align: center; }
	.tool .tutorial-video .column:nth-child(even){ text-align: center; }

	.tutorial-video .column:nth-child(odd) .text-wrapper{ margin: 0 auto; }
	.tutorial-video .column:nth-child(even) .text-wrapper{ margin: 0 auto; }

	/*.tutorial-video > div{	margin-bottom: 60px; }
	.tutorial-video > div:nth-child(1){	margin-bottom: 60px; }*/
	.tutorial-video > div:last-child{ margin-bottom: 0; }
	
	.content div:nth-child(2) .img-wrapper{ position: relative; left: auto; }
	/*.content .btn-wrapper,
	.content div:nth-child(2),
	.content div:nth-child(3),
	.content div:nth-child(5){ text-align: center; }*/

	/*.content div:nth-child(2) button{ margin-bottom: 75px; }*/


}
@media screen and (max-width: 767px) {
	/*------------------------------------
	    		$General
	------------------------------------*/
	/*-----button style-----*/
	.rule button{ width: 100%; }

	/*-----Tool-----*/
	.tutorial-video .column .text-wrapper{ max-width: 100%; }
	.tutorial-video .column:nth-child(5) { margin-bottom: 75px; }
	.tool .free-download .column:last-of-type p{ max-width: 100%; }

	/*.content div:nth-child(3) button{ margin-bottom: 75px; }*/
	.content div:nth-child(5) button{ margin-bottom: 0; }
	.content > div:last-of-type > div:nth-of-type(1){ margin-bottom: 120px; }
	

}
@media screen and (max-width: 500px) {
	/*------------------------------------
    			$Navbar
	------------------------------------*/
	.navbar-row{ padding-right: 15px; padding-left: 15px; }
	




	/*------------------------------------
	    		$General
	------------------------------------*/
	.rl-row-1440{ padding-right: 0; padding-left: 0; }

	/*-----font setting-----*/
	.rl-style .text-md { font-size: 2.25rem; }
	
	/*-----button style-----*/
	.btn, i.fa{ font-size: 1.5rem; }
	.rl-style button,
	.tool .btn-ct8-download,
	.tool .btn-free-bg-download{ width: 100%; }
	.download-wrapper a > button:first-of-type{ margin-right: 0; }
	.download-wrapper a > button:last-of-type{ margin-left: 0; }

	/*------------------------------------
    		$Space
	------------------------------------*/
	.rl-wrapper-topbottom-l{ padding-top: 45px; padding-bottom: 45px }
	.rl-wrapper-top-l{ padding-top: 45px; }
	.rl-wrapper-bottom-l{ padding-bottom: 45px }

}