//************************************************************COMMONS************************************************************/

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Ultralight.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Ultralight.woff') format('woff'),
        url('../fonts/SFProDisplay-Ultralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Thin.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Thin.woff') format('woff'),
        url('../fonts/SFProDisplay-Thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Light.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Light.woff') format('woff'),
        url('../fonts/SFProDisplay-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Medium.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Medium.woff') format('woff'),
        url('../fonts/SFProDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Bold.woff') format('woff'),
        url('../fonts/SFProDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body{font-family:'SF Pro Display',Verdana,Geneva,sans-serif;font-size:14px;color:#000}
h1,h2,h3,h4,h5,h6{font-family:'SF Pro Display',Verdana,Geneva,sans-serif;font-weight:400;letter-spacing:2px!important}


/************************************************************ENCUENTRA TO TONO IDEAL************************************************************/
#container-encuentraint{background-image:url(../imgs/);background-repeat:no-repeat;background-size:100% 100%}
#container-encuentra-frame{ min-height:775px;background-image:url(../imgs/bg-tu-tono-ideal.jpg);background-repeat:no-repeat;background-position:100% 100%;background-size: cover;text-align:center;color:#000}
#container-feedback-1-frame{ height:98px;background-image:url(../imgs/bg-tu-tono-ideal.jpg);background-repeat:no-repeat;background-size:100% auto;text-align:center;color:#000}
#container-feedback-2-frame{ min-height:775px;text-align:center;color:#fff}
/**/
.col-tenido{width:60%;margin:0 auto 40px;overflow:hidden}
.col-tenido-posi{
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin: 0 6rem;
}
.col-tenido input {
    box-sizing: border-box;
    padding: 0;
    position: static;
    margin-top: 0;
    margin-right: 1rem;
    margin-left: 0;
}
.col-tenido span{
    font-size:35px;
    display: inline-block;
    margin-bottom: 0;
}
/**/
.col-md-encuentra{width:100%;max-width:920px;min-height:1px;margin:0 auto}
.col-md-encuentra .col-md-12{clear:both}
.col-md-encuentra h1 {
    margin-bottom: 4rem;
    margin-top: 4rem;
    font-size: 55px;
}
#container-feedback-1-frame .col-md-encuentra h1{margin-bottom:20px;margin-top:0}
.col-md-encuentra h4 {
	color: #aaaaaa;
	font-size: 35px;
    margin: 0;
    font-weight: 300;
}
.col-md-encuentra h3 {
    margin-bottom: 0px;
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
}
.col-color{float:left;min-height:1px}
.col-color-one{width:23%}
.col-color-two{width:27%}
.col-color-three{width:25%}
.col-color-select{width:100%;padding-top:35px}
.col-color-one img,.col-color-two img,.col-color-three img{width:100%;max-width:60px;height:auto;float:left}
.col-color-select img{width:100%;max-width:210px;height:auto}
.col-color a{display:inline-block;width:100%;margin-bottom:20px }
.col-color a span{ float:left;margin-top:10%;margin-left:12px;color:#fff}
.col-color-select span{padding-top:20px;display:inline-block;width:100%}
/**/
.col-canas{float:left;min-height:1px;margin-bottom:40px}
.col-canas img{margin-bottom:25px}
.col-canas span{margin-left:5%}
.col-canas-one{width:31%;margin-left:19%}
.col-canas-two{width:31%;margin-right:19%}
.col-canas-three{width:31%;margin-left:19%}
.col-canas-four{width:31%;margin-right:19%}
/**/
.col-prefieres{width:60%;margin:0 auto 50px;text-align:left;overflow:hidden}
.col-prefieres input{float:left}
.col-prefieres span{width:90%;font-size:20px;float:left;margin-left:5%}
/**/
.col-buscas{margin:0 auto 40px;text-align:left;}
.col-buscas input{float:left}
.col-buscas span{width:90%;font-size:20px;float:left;margin-left:5%}
/**/
#container-feedback-2-frame {
    color: #a64d00;
    padding-top: 55px;
    min-height: 677px;
    background-image: url(../imgs/bg-tu-tono-ideal.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#container-feedback-2-frame h2{font-size:36px; font-weight: 600;}
#container-feedback-2-frame h3{font-size:16px; font-weight: 300; text-transform: uppercase;}
#container-feedback-2-frame p{color:#666;margin-bottom:0px;max-width:95%;margin-left:auto;margin-right:auto}
#container-feedback-2-frame img{ }
#container-feedback-2-frame .col-md-encuentra h3{margin-top:0px}
#container-feedback-2-frame .col-md-4{margin-bottom:55px}
#container-feedback-2-frame a {
    color: #3d3d3d;
}
#container-feedback-2-frame a:hover, #container-feedback-2-frame a:focus {
    color: #aaaaaa;
    text-decoration: none;
}
/**/
.bt-nav-color {
    display: inline-block;
    width: 165px;
    margin-bottom: 20px;
    margin: 0 auto;
    background-repeat: no-repeat;
    margin-top: 75px;
    text-align: left;
    color: #aaaaaa;
    font-weight: 600;
    font-size: 20px;
}
a.bt-nav-color:hover,a.bt-nav-color:focus{color:#000!important; text-decoration: none;}
.bt-anterior {
    background-image: url(../imgs/flecha-ant.png);
    background-position: 0 center;
    width: 145px;
    margin-right: 40px;
    text-align: right;
}
.bt-siguiente {
    background-image: url(../imgs/flecha.png);
    background-position: 100% center;
    margin-left: 40px;
}
.bt-tono {
    background-image: url(../imgs/flecha.png);
    background-position: 100% center;
    margin-left: 40px;
    width: 210px;
}

#tu-tono .slick-list  {
    margin: 0px 40px !important;
}
#tu-tono.slick-slider a {
    color: #000;
}
#tu-tono .tu-tono-item.slick-slide img {
    display: block;
    margin: 0 auto;
}