@charset "utf-8";
/* CSS Document */


/* -------------------------------------------------------------------------------------- */
/* ---------------------------------------- INTRO --------------------------------------- */
/* -------------------------------------------------------------------------------------- */

/* ----------------------- GERAL ----------------------- */

.intro-geral {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}

.intro-newmedia-sep, .intro-action-sep  {
	position: absolute;
	top: 0px;
	width: 1px;
	height: 100%;
	background-color: #FFFFFF;
	z-index: 4;
}

.intro-logo img {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	z-index: 1002;
}

.intro-logo2 {
    position: absolute;
    width: 180px;
    height: 49px;
    left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	z-index: 999;
    background-color: #1c1c1c;
    padding: 16px 16px 15px;
}


.intro-logo-cx {
	position: absolute;
	top: 0px;
	bottom: 0px;
	vertical-align: middle;
	margin-bottom: auto !important;
	margin-top: auto !important;
	width: 110px;
	height: 80px;
	background-color: #1c1c1c;
	z-index: 9;
	
	transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
}

.intro-dots {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/dots.png);
	background-repeat: repeat;
	z-index: 1;
}

/* ----------------------- NEW MEDIA ----------------------- */

.intro-newmedia-sep {
	right: 0px;
}

.intro-newmedia-margem {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	z-index: 5;
}

.intro-newmedia {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/intro-bk-newmedia.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	background-attachment: fixed;
	z-index: 0;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";/* IE 8 */
	filter: alpha(opacity=20);/* IE 5-7 */
	-moz-opacity: 0.2;/* Netscape */
	-khtml-opacity: 0.2;/* Safari 1.x */
	opacity: 0.2;/* Good browsers */
	
	transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;

	transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
}

.intro-newmedia-margem  .intro-logo-cx {
	right: 0px;
}

.intro-newmedia-margem:hover .intro-logo-cx {
	width: 500px;
	
	transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	
/*	transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;*/
}


@-moz-document url-prefix() { /* Firefox Hack :( */
	
    .intro-newmedia-margem:hover .intro-newmedia {
		-moz-opacity: 1;/* Netscape */
		opacity: 1;/* Good browsers */

		transition: 0.4s ease-in-out;
		-moz-transition: 0.4s ease-in-out;
	}
	
}

@media screen and (-webkit-min-device-pixel-ratio:0), (-ms-high-contrast: none), (-ms-high-contrast: active) {

	.intro-newmedia-margem:hover .intro-newmedia {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* IE 8 */
	filter: alpha(opacity=100);/* IE 5-7 */
	-khtml-opacity: 1;/* Safari 1.x */
	opacity: 1;/* Good browsers */

	transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	-webkit-transition: 0.4s ease-in-out;

	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	}
	
}


.intro-newmedia-tit h1 {
	left: 80px;
	bottom: 15px;
	color: #ff2828;
	font-size: 25px;
	letter-spacing: 2px;
}

.intro-newmedia-tit h2 {
	left: 80px;
	bottom: 0;
	color: #d7d7d7;
	font-size: 16px;
	letter-spacing: 2px;
}

.intro-newmedia-tit h1, .intro-newmedia-tit h2  {
	position: absolute;
	font-family: 'belleroselight', sans-serif;
	z-index: 6;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE 8 */
	filter: alpha(opacity=0);/* IE 5-7 */
	-moz-opacity: 0;/* Netscape */
	-khtml-opacity: 0;/* Safari 1.x */
	opacity: 0;/* Good browsers */
	
	transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
}

.intro-newmedia-margem:hover h1, .intro-newmedia-margem:hover h2 {
	left: 20px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* IE 8 */
	filter: alpha(opacity=100);/* IE 5-7 */
	-moz-opacity: 1;/* Netscape */
	-khtml-opacity: 1;/* Safari 1.x */
	opacity: 1;/* Good browsers */
	
	transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
}

.intro-newmedia-margem:hover h1 {
	transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

.intro-newmedia-margem:hover h2 {
	transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
}

/* ----------------------- ACTION ----------------------- */

.intro-action-sep {
	left: 0px;
}

.intro-action-margem {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	z-index: 5;
}

.intro-action {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/intro-bk-action.jpg);
	background-repeat: no-repeat;
	background-position:right;
	background-attachment: fixed;
	z-index: 0;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";/* IE 8 */
	filter: alpha(opacity=20);/* IE 5-7 */
	-moz-opacity: 0.2;/* Netscape */
	-khtml-opacity: 0.2;/* Safari 1.x */
	opacity: 0.2;/* Good browsers */
	
	transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
    
	transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
}


.intro-action-margem  .intro-logo-cx {
	left: 0px;
}

.intro-action-margem:hover .intro-logo-cx {
	width: 500px;
	
	transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	
	transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
}


@-moz-document url-prefix() { /* Firefox Hack :( */
	
    .intro-action-margem:hover .intro-action {
		-moz-opacity: 1;/* Netscape */
		opacity: 1;/* Good browsers */

		transition: 0.4s ease-in-out;
		-moz-transition: 0.4s ease-in-out;
	}
	
}

@media screen and (-webkit-min-device-pixel-ratio:0), (-ms-high-contrast: none), (-ms-high-contrast: active) {

	.intro-action-margem:hover .intro-action {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* IE 8 */
	filter: alpha(opacity=100);/* IE 5-7 */
	-khtml-opacity: 1;/* Safari 1.x */
	opacity: 1;/* Good browsers */

	transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	-webkit-transition: 0.4s ease-in-out;

	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
    
	}
	
}


.intro-action-tit h1 {
	right: 80px;
	bottom: 15px;
	color: #1ac7e0;
	font-size: 25px;
	letter-spacing: 2px;
}

.intro-action-tit h2 {
	right: 80px;
	bottom: 0;
	color: #d7d7d7;
	font-size: 16px;
	letter-spacing: 2px;
}

.intro-action-tit h1, .intro-action-tit h2  {
	position: absolute;
	font-family: 'belleroselight', sans-serif;
	z-index: 6;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE 8 */
	filter: alpha(opacity=0);/* IE 5-7 */
	-moz-opacity: 0;/* Netscape */
	-khtml-opacity: 0;/* Safari 1.x */
	opacity: 0;/* Good browsers */
	
	transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
}

.intro-action-margem:hover h1, .intro-action-margem:hover h2 {
	right: 20px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* IE 8 */
	filter: alpha(opacity=100);/* IE 5-7 */
	-moz-opacity: 1;/* Netscape */
	-khtml-opacity: 1;/* Safari 1.x */
	opacity: 1;/* Good browsers */
	
	transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
}

.intro-action-margem:hover h1 {
	transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
}

.intro-action-margem:hover h2 {
	transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
}



/*=============== RESPONSABLE ===============*/

@media only screen and (max-width: 1084px) {
    
        
    .intro-action-margem .intro-logo-cx, .intro-action-margem:hover .intro-logo-cx, .intro-action-margem h1, .intro-action-margem h2,
     .intro-newmedia-margem .intro-logo-cx, .intro-newmedia-margem:hover .intro-logo-cx, .intro-newmedia-margem h1, .intro-newmedia-margem h2{
        transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
    }
    
    .intro-action, .intro-action-margem h1, .intro-action-margem h2,
     .intro-newmedia, .intro-newmedia-margem h1, .intro-newmedia-margem h2 {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* IE 8 */
        filter: alpha(opacity=100);/* IE 5-7 */
        -moz-opacity: 1;/* Netscape */
        -khtml-opacity: 1;/* Safari 1.x */
        opacity: 1;/* Good browsers */

    }
    
    .intro-action, .intro-newmedia {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }
    
    .intro-action-margem  .intro-logo-cx, .intro-action-margem:hover .intro-logo-cx {
        left: 0px;
        width: 450px;
    }

    .intro-action-margem h1, .intro-action-margem h2 {
        right: 20px;
    }

        
    .intro-newmedia-margem  .intro-logo-cx, .intro-newmedia-margem:hover .intro-logo-cx {
        right: 0px;
        width: 450px;
    }

    .intro-newmedia-margem h1, .intro-newmedia-margem h2 {
        left: 20px;
    }
    
}


@media only screen and  (max-width: 980px) {
    
    .intro-action-margem .intro-logo-cx, .intro-action-margem:hover .intro-logo-cx {
        top: 166px;
        left: 0px;
        width: 200px;
        border-left: #6A6A6A solid 1px;
    }
    
    .intro-action-margem h1 {
        top: -12px;
        right: 20px;
        font-size: 20px;
    }
            
    .intro-action-margem h2 {
        top: 25px;
        right: 20px;
        font-size: 12px;
        text-align: right;
    }

    
    .intro-newmedia-margem .intro-logo-cx, .intro-newmedia-margem:hover .intro-logo-cx {
        top: 166px;
        right: 0px;
        width: 200px;
        border-right: #6A6A6A solid 1px;
    }
    
    .intro-newmedia-margem h1 {
        top: -12px;
        left: 20px;
        font-size: 20px;
    }
            
    .intro-newmedia-margem h2 {
        top: 25px;
        left: 20px;
        font-size: 12px;
        text-align: left;
    }
    
}



@media only screen and  (max-width: 754px) {
    
}



@media only screen and  (max-width: 540px) {
    
}