.zero-opacity
{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.oculto {display: none}
.adaptable {position: relative;}
.center {text-align: center}
.justify {text-align: justify}
.hidden {visibility: hidden}
body
{
    background-color: #f0f0f0;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
#Main-Wrapper
{
    background-color: white;
    width: 100%;
    /*max-width: 1600px;*/
    margin: 0 auto;
    overflow-x: hidden;
}

.loading-layer, .fullloading-layer
{        
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: black;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);   
    visibility: hidden;
}

#loading-init
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 243px;
    height: 120px;
    
    z-index: 500;
    margin-left: -121px;
    margin-top: -50px;    
}

#loading-init #loading-line 
{
    height: 3px;
    width: 100%;
    /*background-color: #e9e8e7;*/
    background-color: #f8f8f8;
}
#loading-init #loading-line span
{
    background-color: #7E7E7E;
    display: block;
    height: 3px;
    width: 5px;
}


#loading-init span.black { background-color: black;}
/*#loading-init span.white { background-color: #e9e8e7;}*/
#loading-init span.white { background-color: #f8f8f8;}
#loading-init span.red { background-color: #ec1a31;}
#loading-init span.yellow { background-color: #f7d847;}

.loading-layer.full-height
{
    height: 100%;
}

.loading-layer.black, .fullloading-layer.black {background-color: #000}
/*.loading-layer.white, .fullloading-layer.white {background-color: #e9e8e7}*/
.loading-layer.white, .fullloading-layer.white {background-color: #f8f8f8}
.loading-layer.red, .fullloading-layer.red {background-color: #ec1a31}
.loading-layer.yellow, .fullloading-layer.yellow {background-color: #f7d847}


#Menu.oculto
{   
    margin-top: -90px;
}

#Menu 
{
    /*background-color: white;*/
    height: 90px;
    position: fixed;
    width: 100%;
    z-index: 10;
    margin-top: -90px;
    text-align: center;
    -webkit-transition: all 800ms ease-out;
    -moz-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    -ms-transition: all 800ms ease-out;
    transition: all 800ms ease-out;

    
}
#Menu.opened {
    height: 100%;
}
.menu_logo { cursor: pointer}
.menu-icon
{
    float: left;
    height: 30px;
    width: 27px;    
    margin-top: 32px;
    margin-left: 50px;
    position: absolute;    
    z-index: 200000;
    cursor: pointer;
}
.menu-icon span {
    position: absolute;    
    height: 3px;    
    width: 100%;
    background-color: black;        
    left: 0px;
    transform: rotate(0deg);
    -webkit-transition: opacity 200ms linear, transform 200ms linear, top 400ms linear 100ms;
    -moz-transition: opacity 200ms linear,transform 200ms linear, top 400ms linear 100ms;
    -o-transition: opacity 200ms linear,transform 200ms linear, top 400ms linear 100ms;
    -ms-transition: opacity 200ms linear,transform 200ms linear, top 400ms linear 100ms;
    transition: opacity 200ms linear,transform 200ms linear, top 400ms linear 100ms;    
}
#Menu-red .menu-icon span,
.menu-icon.white span
{
    background-color: white;
}
#Menu-red .menu-icon span.text,
.menu-icon.white span.text
{
    color: white;
}
#Menu-red .menu-icon span.text,
.menu-icon span.text 
{
    background-color: transparent;    
    display: block;
    float: left;
    margin-left: 40px;
    font-family: 'Helvetica-77-bold';
    font-size: 14px;
    margin-top: 3px;
}

.menu-icon.cross span {
    
    -webkit-transition: opacity 200ms linear, top 200ms linear, transform 400ms linear 100ms;
    -moz-transition: opacity 200ms linear, top 200ms linear, transform 400ms linear 100ms;
    -o-transition: opacity 200ms linear, top 200ms linear, transform 400ms linear 100ms;
    -ms-transition: opacity 200ms linear, top 200ms linear, transform 400ms linear 100ms;
    transition: opacity 200ms linear, top 200ms linear, transform 400ms linear 100ms;
}

.menu-icon span.top {top: 0px;transform: rotate(0deg)}
.menu-icon span.center {top: 8px; opacity: 1}
.menu-icon span.bottom {top: 16px; transform: rotate(0deg)}

.menu-icon.cross span.top { top: 8px; transform: rotate(45deg)}
.menu-icon.cross span.center {opacity: 0}
.menu-icon.cross span.bottom { top: 8px; transform: rotate(-45deg)}


#Menu.visible
{
    margin-top: 0px;
}

#Menu .menu
{
    position: absolute;    
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

#Menu .menu-interior .header {height: 90px}
#Menu .menu-interior .opciones {    
         
    opacity: 0.95;
    -webkit-opacity: 0.95;
    -moz-opacity: 0.95;
    filter: alpha(opacity=95);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";    
}

#Menu-black .header { background-color: #000}
/*#Menu-black .opciones { background-color: rgba(0,0,0, 0.9) }*/
#Menu-black .opciones { background-color: #000 }
                       
/* #Menu-white .header { background-color: #e9e8e7} */
#Menu-white .header { background-color: #f8f8f8}
/*#Menu-white .opciones { background-color: rgba(233,232,231, 0.9)}*/
/* #Menu-white .opciones { background-color: #e9e8e7} */
#Menu-white .opciones { background-color: #f8f8f8}

#Menu-yellow .header { background-color: #f7d847}
/*#Menu-yellow .opciones { background-color: rgba(247, 216, 71, 0.9)}*/
#Menu-yellow .opciones { background-color: #f7d847}

#Menu-red .header { background-color: #ec1a31}
/*#Menu-red .opciones { background-color: rgba(236,26,49, 0.9)}*/
#Menu-red .opciones { background-color: #ec1a31}

#Menu .opciones
{    
    width: 100%;    
    height: 100%;
    opacity: 0.9;
}

#Menu .menu-interior 
{
    position: absolute;
    width: 100%;
    height: 100%;
}

#Menu .menu-interior .header ul
{
    height: 90px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    position: absolute;
    right: 40px;
    top: 0;
}
#Menu .menu-interior .header ul li
{
    float: left;    
    list-style: none;
    cursor: pointer;
}



#Menu .opciones ul 
{
    list-style: none;
    padding: 100px 0px 140px 0px;
    margin: 0px;
}

#Menu .opciones ul li
{
    color: white;
    font-family: 'Helvetica-65-medium';
    font-size: 14.75px;
    letter-spacing: 3px;
    word-spacing: 1px;    
    height: 40px;
}


#Menu .opciones ul li a {
    border-bottom: solid 2px white;
    padding-bottom: 7px;
    color: white;
    text-decoration: none;    
}

#Menu #Menu-white .opciones p
{
    margin-top: 40px;
}

#Menu #Menu-white .opciones ul li a,
#Menu #Menu-yellow .opciones ul li a
{
    color: black;
    border-bottom: solid 2px black;
}

#Menu .opciones ul li .selector-idioma a, 
#Menu .opciones ul li .selector-idioma a
{
    border-bottom: none !important;
}

#Menu .opciones .selector-idioma a
{
    font-family: "Helvetica-65-medium";
    font-size: 14.75px;
    color: black;
    text-decoration: none;
    border-bottom :none;
}
#Menu .opciones .selector-idioma span{
    padding-left: 20px;
    padding-right: 20px;
}

#Menu #Menu-white .opciones .selector-idioma span,
#Menu #Menu-yellow .opciones .selector-idioma span,
#Menu #Menu-white .opciones .selector-idioma a,
#Menu #Menu-yellow .opciones .selector-idioma a{
    color: black;
}

#Menu #Menu-red .opciones .selector-idioma span,
#Menu #Menu-black .opciones .selector-idioma span,
#Menu #Menu-red .opciones .selector-idioma a,
#Menu #Menu-black .opciones .selector-idioma a{
    color: white;
}


#downloads-list
{
    float: left;
    margin-left: 190px;
    position: absolute;
    padding-top: 24px;
}

#downloads-list p
{
    margin: 0px;
    text-align: left;    
}

#downloads-list p a
{
    font-family: 'Helvetica-77-bold';
    font-size: 14px;
    color: white;
    text-decoration: none;
    background-image: url("../img/ico_download.png");
    padding-left: 19px;
    background-repeat: no-repeat;
    padding-top: 1px;    
}

#Menu-white #downloads-list p a,
#Menu-yellow #downloads-list p a
{
    color: black;
    background-image: url("../img/ico_download_black.png");
}
/* FIN MENU */




#Color-black .ico_button { background-color: #000 }
/*#Color-white .ico_button { background-color: #e9e8e7 }*/
#Color-white .ico_button { background-color: #f8f8f8 }
#Color-yellow .ico_button { background-color: #f7d847 }
#Color-red .ico_button { background-color: #ec1a31 }

span.separator {
    display: block;
    height: 3px;
    background-color: white;
    width: 162px;
    margin: 0 auto;
}

#Color-yellow span.separator,
#Color-white span.separator{
    background-color: black;
}

#green_label {    
    position: absolute;
    bottom: 20%;    
    z-index: 2;
    right: 0px;
}

#Colors-selector
{
    height: 100%;    
    background-color: #ec1a31;        
    position: relative;
    z-index: 1;
}
#Colors-selector .color-col img.iam
{
    height: 135px;
    width: 597px;
    left: 50%;
    margin-left: -299px;
    position: absolute;
    top: 50%;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;    
}

#Colors-selector .color-col img.iam.visible
{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#Colors-selector .color-col img.btn-scroll
{
    width: 100px;
    height: 100px;
    left: 50%;
    margin-left: -50px;
    position: absolute;
    bottom: 100px;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;    
}

#Colors-selector .color-col img.btn-scroll.visible
{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  
}




.color-col 
{
    background-position: top center;
    background-size: cover;    
}

#Colors-selector .cortinilla
{
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    z-index: 1;
    top:0px;
    left: 0px;
}

#Colors-Content
{
    height: 300px;
    display: none;
    position: relative;
    
}

#Colors-selector .color-col
{
    width: 25%;        
    height: 100%;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
        
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear; 
}


.transitions-on #Colors-selector .color-col.minimized
{
    width: 16%;
}
.transitions-on #Colors-selector .color-col.maximized
{
    width: 52%;
}


.color-black {background-image: url("../img/intro/black_girl.jpg"); }
.color-red {background-image: url("../img/intro/red_girl.jpg"); }
.color-white {background-image: url("../img/intro/white_girl.jpg"); }
.color-yellow {background-image: url("../img/intro/yellow_girl.jpg"); }

#Colors-selector .color-col img { width: 100%; height: 100%; }

.color-black {background-color: black}
/*.color-white {background-color: #e9e8e7}*/
.color-white {background-color: #f8f8f8}
.color-red {background-color: #ec1a31}
.color-yellow {background-color: #f7d847}



/* ************************************* */
/* CONTENIDOS
/* ************************************* */

.olfactory { width: 100%; position: relative; z-index: 1; margin-top: -50px;}
.color-box { width: 457px; padding: 60px 70px; margin: 0 auto; text-align: justify; }

.color-box.we-are-colors {position: absolute; left: 50%; margin-left: -300px; z-index: 2}

.olfactory .color-box {padding-bottom: 45px}

.olfactory .color-box h3 { margin-top: 0px}
.olfactory .color-box h2 { margin-top: 120px}
#Color-black .color-box {background-color: #000; color: white;}
/*#Color-white .color-box {background-color: #e9e8e7; color: black;}*/
#Color-white .color-box {background-color: #f8f8f8; color: black;}
#Color-yellow .color-box {background-color: #f7d847; color: black;}
#Color-red .color-box {background-color: #ec1a31; color: white;}

.color-box h2 {font-family: 'Helvetica-77-bold'; font-size: 51px; margin-bottom: 20px;}
.color-box h3 {font-family: 'Helvetica-77-bold'; font-size: 22px; margin-top: 37px; font-weight: normal}
.color-box p {font-family: 'Helvetica-45-light'; font-size: 13.4px;}

.frasco-rosa {position: absolute; left: -100px; top: 100px; z-index: 1}
.frasco-azul {position: absolute; right: -100px; top: 150px; z-index: 1}

.portraits { text-align: center; position: relative; z-index: 2; top: 800px }
.portraits img { margin-right: 10px; position: relative}
.portraits img.last { margin-right: 0px; }

.waves {height: 1200px; position: relative; overflow: hidden; background-color: white;}

.pink-wave {
    position: absolute;
    z-index: 1; 
    top: 500px; 
    opacity: 0.88;
     -webkit-opacity: 0.88;
    -moz-opacity: 0.88;
    filter: alpha(opacity=88);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=88)";
        
}
.blue-wave {
    position: absolute; left: 0px; bottom: 0px; width: 100%; overflow: hidden; z-index: 0;
    background-image: url("../img/we_are_colors/bg_wave.jpg");
    background-repeat: repeat-x;
    background-position: left bottom;
}
.packaging { text-align: center; background-color: white;}

/* ************************************* */
/* OFACTORY PYRAMID
/* ************************************* */

.olfactory-pyramid {padding-top: 120px; width: 100%; background-image: url("../img/pyramid/bg.jpg"); background-repeat: repeat-x; background-color: white; padding-bottom: 160px; margin-top: -80px}
.olfactory-pyramid .wrapper {width: 982px; margin: 0 auto; margin-top: -78px }
.olfactory-pyramid .ingrediente { width: 100%; float: left;}

.olfactory-pyramid .citric { height: 328px; position: relative; z-index: 1;}
.olfactory-pyramid .floral { height: 265px; margin-top: -70px; position: relative; z-index: 2}
.olfactory-pyramid .madera { height: 240px; margin-top: -45px; position: relative; z-index: 1;}

.olfactory-pyramid .ingrediente * { font-weight: normal}

.olfactory-pyramid .ingrediente h3 {margin-top: 120px; font-family: 'Helvetica-85-heavy'; font-size: 23px; line-height: 20px; margin-bottom: 40px}
.olfactory-pyramid .ingrediente strong { display: block; font-family: 'Helvetica-75-bold'; font-size: 15px;}
.olfactory-pyramid .ingrediente em { font-family: 'Helvetica-46-italic'; font-size: 15px; font-style: normal}
.olfactory-pyramid .ingrediente li {color: black; font-family: 'Helvetica-45-light'; font-size: 15px; line-height: 21px}

.olfactory-pyramid .ingrediente .col {width: 490px; float: left; overflow: hidden;}

.olfactory-pyramid .ingrediente .text {width: 200px}
.olfactory-pyramid .floral .text {width: 200px; margin-top: 100px}
.olfactory-pyramid .madera .text {width: 200px; margin-top: 40px}

.olfactory-pyramid .ingrediente .col-left .text { color: #e0007a;}
.olfactory-pyramid .ingrediente .col-right .text { color: #20c1d2;}


.olfactory-pyramid .ingrediente .col-left img { float: right}
.olfactory-pyramid .ingrediente .text ul { padding: 0px; list-style: none; margin-top: 10px;}


.olfactory-pyramid .ingrediente .col-left .text { float: left; text-align: right}
.olfactory-pyramid .ingrediente .col-right img { float: left}
.olfactory-pyramid .ingrediente .col-right .text { float: right; text-align: left;}

.olfactory-pyramid .wrapper {
    width: 455px;
    -webkit-transition: all 800ms ease-out;
    -moz-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    -ms-transition: all 800ms ease-out;
    transition: all 800ms ease-out; 
}
.olfactory-pyramid .ingrediente .col {
    width: 227px;
    -webkit-transition: all 800ms ease-out;
    -moz-transition: all 800ms ease-out;
    -o-transition: all 800ms ease-out;
    -ms-transition: all 800ms ease-out;
    transition: all 800ms ease-out; 
}
.ingredient {
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
    -ms-transition: all 1000ms ease-out;
    transition: all 1000ms ease-out; 
}
.ingredient.left { margin-right: -150px; opacity: 0; width: 0}
.ingredient.right { margin-left: -150px; opacity: 0; width: 0}

.olfactory-pyramid .wrapper.abierto {width: 982px;}
.olfactory-pyramid .ingrediente .col.abierto {  width: 490px;}

.olfactory-pyramid .wrapper .ingredient.abierto.left {margin-right: 0px; opacity: 1; width: 257px}
.olfactory-pyramid .wrapper .ingredient.abierto.right {margin-left: 0px; opacity: 1; width: 257px}

/* ************************************* */
/* CAMPAIGN
/* ************************************* */

.campaign  { 
    padding-bottom: 138px;    
    background-size: cover;  
    background-attachment: fixed;
    background-repeat: no-repeat;  
    color: white;  
    text-align: center;  
    padding-top:77px; 
    overflow: hidden;
    /*background-image: url("../img/campaign/bg_campaign.jpg")*/
}

#Color-yellow .campaign { background-image: url("../img/campaign/bg_yellow.jpg"); }
#Color-black .campaign { background-image: url("../img/campaign/bg_black.jpg"); }
#Color-white .campaign { background-image: url("../img/campaign/bg_white.jpg"); }
#Color-red .campaign { background-image: url("../img/campaign/bg_red.jpg"); }

.campaign .layer 
{    
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
}

/*#Color-yellow .campaign .layer 
{
    background-color: #f7d847;
    opacity: 0.9;
    -webkit-opacity: 0.9;
    -moz-opacity: 9;
    filter: alpha(opacity=9);
}
#Color-black .campaign .layer 
{    
    background-color: black;
    opacity: 0.9;
    -webkit-opacity: 0.9;
    -moz-opacity: 9;
    filter: alpha(opacity=9);
}    
#Color-white .campaign .layer 
{
    background-color: #e9e8e7;
    opacity: 0.86;
    -webkit-opacity: 0.86;
    -moz-opacity: 8.6;
    filter: alpha(opacity=8.6);
}
#Color-red .campaign .layer 
{
    background-color: #ec1a31;  
    opacity: 0.88;
    -webkit-opacity: 0.88;
    -moz-opacity: 8.8;
    filter: alpha(opacity=8.8);
}*/


.campaign .separator
{
    width: 224px
}

#Color-white .campaign, #Color-yellow .campaign { color: black}


.campaign h2 { font-family: 'Helvetica-77-bold'; font-size: 52px; margin-top: 0px; margin-bottom: 10px}
.campaign h3 { font-family: 'Helvetica-55-roman'; font-weight: normal; font-size: 18px; margin-bottom: 103px; margin-top: 30px }
.campaign h3 span {cursor: pointer;}

.campaign h3 span.tv-spot 
{
    margin-right: 20px;
}

.campaign h3 span.print-campaign
{
    margin-right: 20px;
}

.campaign h3 span.selected 
{
    border-bottom: solid 2px black;
    cursor: default;
}

#Color-red .campaign h3 span.selected,
#Color-black .campaign h3 span.selected 
{
    border-bottom: solid 2px white;
}

.campaign .wrapper { margin: 0 auto; width: 1000px; height: 388px;}
.campaign .grafica { border: 3px solid white; position: relative}
.campaign .grafica img {display: block;}
.campaign .grafica.left { margin-left: -295px; width: 591px; left: 50%;}
.campaign .grafica.right { margin-left: -500px; left: 50%; width: 1000px;}

.campaign .grafica .ico_button 
{
    display: block;
    height: 32px;
    margin-top: -32px;
    position: relative;
    width: 34px;
}

/* ************************************* */
/* MAKING OF
/* ************************************* */

.making-of 
{
    position: relative;
    z-index: 1;    
    background-size: cover;
    color: white;
    text-align: center;
    padding-top: 70px;
}

#Color-red .making-of { background-image: url('../img/makingof/bg_red.jpg');}
#Color-white .making-of { background-image: url('../img/makingof/bg_white.jpg');}
#Color-black .making-of { background-image: url('../img/makingof/bg_black.jpg');}
#Color-yellow .making-of { background-image: url('../img/makingof/bg_yellow.jpg');}

.making-of .separator { width: 240px}

.making-of a { color: white; text-decoration: none; }
#Color-yellow .making-of a, #Color-white .making-of a {color: black}

#Color-white .making-of, #Color-yellow .making-of { color: black}
.making-of h2 { margin-top: 66px; font-family: 'Helvetica-77-bold'; font-size: 52px; margin-top: 0px; margin-bottom: 10px }
.making-of .download-links { 
    height: 40px;
    margin-bottom: 25px;
    margin-top: 40px;
}

.making-of .download-all { font-family: "Helvetica-55-roman"; font-size: 18px; margin-bottom: 50px; margin-top: 35px; }
.making-of .download-all sup {font-size: 12px; vertical-align: text-top}
.making-of .download-all.download-hr { margin-right: 10px;}
.making-of .download-all.download-lr { margin-left: 10px;}

.mosaic { padding: 0px; list-style: none; width: 1084px; height: 760px; margin: 0 auto}
.mosaic li { float: left; width: 271px; height: 190px;}
.mosaic img
{
    display: block;
}
.mosaic .ico_button 
{
    display: block;
    height: 32px;
    margin-top: -32px;
    position: relative;
    width: 34px;
}

.mosaic .ico_button.download.download-hr
{
    width: 50px;
    margin-left: 38px;
}

.mosaic .ico_button.download.download-lr
{
    width: 50px;
    margin-left: 85px;
}
.download-image-wrapper
{
    background-color: white;
    font-family: "Helvetica-55-roman";
    font-size: 14px;
    height: 32px;
    margin-left: 37px;
    margin-top: -32px;
    opacity: 0.8;
    position: relative;
    overflow: hidden;
    width: 33px;
    -webkit-transition: width 300ms linear;
    -moz-transition: width 300ms linear;
    -o-transition: width 300ms linear;
    -ms-transition: width 300ms linear;
    transition: width 300ms linear;    
}

.download-image-wrapper.opened 
{
    
    width: 90px;
}
.download-image-wrapper img
{
    width: 75% !important;
    margin-left: 4px;
    margin-top: 4px;
    cursor: pointer;
}

.download-image-wrapper a
{
    display: block;
    float: left;
    margin-right: 9px;
    padding-top: 9px;
    color: black;
}


.popup
{
    height: 529px;    
    position: fixed;
    top: 240px;
    z-index: 15;
    top: 50%;
    margin-top: -340px;
    left: 50%;
    padding-bottom: 40px;
    width: 1020px;
    margin-left: -510px;
    padding-left: 43px;
    padding-right: 43px;
}

.popup.video-preview
{    
    padding-top: 40px;
    width: 850px;
    margin-left: -425px;    
}


.image-preview img.slide
{
    border: 2px solid white;
    opacity: 0;
    position: absolute; 
    left: 50%;
    top: 0px;
    height: 529px;
    width: auto;
    -webkit-transition: opacity 400ms ease-out;
    -moz-transition: opacity 400ms ease-out;
    -o-transition: opacity 400ms ease-out;
    -ms-transition: opacity 400ms ease-out;
    transition: opacity 400ms ease-out; 
}
.image-preview img.slide.active
{
    opacity: 1;
    
}


.image-preview .paginador 
{    
    bottom: 40px;
    left: 50%;
    margin-left: -34px;
    position: absolute;
    text-align: center;
    width: 68px;
}
.popup span
{
    cursor: pointer;
    display: block;
    width: 34px;
    height: 32px;
    float: left;
    background-position: center center;
}

.popup.red span { background-color: #ec1a31; }
/*.popup.white span{ background-color: #e9e8e7; }*/
.popup.white span{ background-color: #f8f8f8; }
.popup.black span{ background-color: #000; }
.popup.yellow span{ background-color: #f7d847; }

.popup.red span.close,
.popup.black span.close
{    
    background-image: url('../img/icons/close_white.png');
}

.popup.white span.close,
.popup.yellow span.close
{    
    background-image: url('../img/icons/close_black.png');
}

.popup span.close
{
    float: right;    
    margin-right: -40px;
}
.popup.video-preview span.close
{
    margin-right: 0px;
}




.image-preview.red .paginador span.next,
.image-preview.black .paginador span.next
{    
    background-image: url('../img/icons/next_white.png');
}
.image-preview.yellow .paginador span.next,
.image-preview.white .paginador span.next
{    
    background-image: url('../img/icons/next_black.png');
}

.image-preview.red .paginador span.prev,
.image-preview.black .paginador span.prev
{    
    background-image: url('../img/icons/prev_white.png');
}

.image-preview.white .paginador span.prev,
.image-preview.yellow .paginador span.prev
{    
    background-image: url('../img/icons/prev_black.png');
}




.image-preview img.foto
{
    height: 100%;
    width: auto;      
}

/* ************************************* */
/* I'AM
/* ************************************* */

.i-am { background-color: white; position: relative; overflow: hidden}
.iam-text-wrapper { text-align: center; width: 100%; height: 650px; overflow: hidden}
.i-am-text { margin: 0 auto;
background-attachment: fixed;    
    background-repeat: no-repeat;
    background-size: cover;}

.video-wrapper { 
    position: relative; 
    width: 100%; 
    text-align: center; 
    margin-top: -83px
}

#Color-yellow .i-am-text { background-image: url("../img/campaign/bg_red.jpg"); }
#Color-black .i-am-text { background-image: url("../img/campaign/bg_white.jpg"); }
#Color-white .i-am-text { background-image: url("../img/campaign/bg_black.jpg"); }
#Color-red .i-am-text { background-image: url("../img/campaign/bg_yellow.jpg"); }


.i-am .logo-color { 
    position: absolute; 
    right: 0px; 
    /*top: 659px;*/ 
    top: 1169px;
    width: 36%; 
    z-index: 9; 
}
.i-am .chica-portrait { left: 0; margin-top: 230px; width: 73%; position: relative;}
.i-am .chica-portrait img { width: 100%; display: block; }

.i-am .wrapper-first {float: left; width: 73%; text-align: right; position: relative;}
.i-am .wrapper-first img { clear: both; float: right}
.i-am .wrapper-second {width: 27%; float: left; position: relative}
.i-am .wrapper-second img { width: 100%;}

.i-am .download-icon {
    background-color: #ec1a31;    
    bottom: 0;
    display: block;
    position: absolute;
    right: 0;    
}
.i-am .download-icon img,
.i-am .download-icon
{
    width: 34px !important;
    height: 32px !important;
}



.i-am .wrapper-second .download-icon
{
    bottom: 6px;    
}


#Color-red .i-am .download-icon { background-color: #ec1a31; }
/*#Color-white .i-am .download-icon { background-color: #e9e8e7; }*/
#Color-white .i-am .download-icon { background-color: #f8f8f8; }
#Color-black .i-am .download-icon { background-color: #000; }
#Color-yellow .i-am .download-icon { background-color: #f7d847; }

/* ************************************* */
/* UCB
/* *************************************  */

.ucb {
    background-color: white;
    padding-top: 80px;
    text-align: center;
}
.ucb h3 {
    font-family: 'Helvetica-77-bold';
    font-size: 22.88px;
    text-align: center;
    font-weight: normal;
}

.ucb .parrafos 
{
    margin: 0 auto;
/*    width: 935px;*/
    width: 600px;
    margin-bottom: 70px;
    margin-top: 35px;
}
.ucb .parrafos .left,
.ucb .parrafos .right
{
    /*width: 450px;*/
    width: 100%;
    float: left;
    text-align: justify;
}
.ucb .parrafos .left
{
    margin-right: 30px
}


.ucb p
{
    font-family: 'Helvetica-45-light';
    font-size: 13.46px;
}

.grafica-footer
{
    left: 50%;
    margin: 40px auto 40px -469px;
    position: relative;
    text-align: center;
}


.footer {
    height: 55px;
    padding-top: 11px;
    text-align: center;
    font-size: 12px;
    font-family: 'Helvetica-45-light';
}

#social {    
    /*float: left;*/
    height: 48px;
    left: 50%;
    margin-left: -96px;
    overflow: hidden;
    padding-left: 0;
    position: relative;
    width: 190px;
}

#social li {list-style: none; float :left; margin-left: 12px; margin-right: 12px}
#Color-black #social li { background-color: #000}
#Color-white #social li { background-color: #000}
#Color-yellow #social li { background-color: #f7d847}
#Color-red #social li { background-color: #ec1a31}


#Color-black .footer { background-color: #000; color: white }
/*#Color-white .footer { background-color: #e9e8e7; color: black }*/
#Color-white .footer { background-color: #f8f8f8; color: black }
#Color-yellow .footer { background-color: #f7d847; color: black }
#Color-red .footer { background-color: #ec1a31; color: white }





@media (max-width: 1242px)
{
    #Colors-selector .color-col img.iam 
    {
        width: 400px;
        height: 90px;     
        margin-left: -200px;        
    } 
}


@media (max-width: 1150px)
{
    .frasco-rosa, .frasco-azul { width: 350px;}
    .pink-wave { width: 600px;}
/*    .campaign .wrapper {width: 950px}
    .campaign .grafica img.interior { width: 450px;}*/
    .mosaic {width: 1000px;}
    .mosaic li { height: 173px; width: 250px; overflow: hidden}
    .mosaic li img { width: 250px;}
    .mosaic li a img {width: 34px; height: 32px}    
    .i-am-text {  width: 1000px; }    
    .video-wrapper {margin-top: -130px}    
    #Colors-selector .color-col img.btn-scroll { bottom: 30px; }
    .color-col { background-repeat: no-repeat;  background-position: center 30px;
}
    
}

@media (max-width: 791px)
{
    #Colors-selector .color-col img.iam 
    {
        width: 300px;
        height: 68px;     
        margin-left: -150px;
        
    }
}