@font-face {
    font-family: 'single_sleeveregular';
    src: url('font/sing-webfont.eot');
    src: url('font/sing-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/sing-webfont.woff') format('woff'),
         url('font/sing-webfont.ttf') format('truetype'),
         url('font/sing-webfont.svg#single_sleeveregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'myriadpro-regular';
    src: url('font/myriadpro-regular.eot');
    src: local('☺'), url('font/myriadpro-regular.woff') format('woff'),
    url('font/myriadpro-regular.ttf') format('truetype'), 
    url('font/myriadpro-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'myriadpro-semibold';
    src: url('font/myriadpro-semibold.eot');
    src: local('☺'), url('font/myriadpro-semibold.woff') format('woff'),
        url('font/myriadpro-semibold.ttf') format('truetype'),
        url('font/myriadpro-semibold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mathlete-skinny-webfont';
    src: url('font/mathlete-skinny-webfont.eot');
    src: local('☺'), url('font/mathlete-skinny-webfont.woff') format('woff'),
        url('font/mathlete-skinny-webfont.ttf') format('truetype'),
        url('font/mathlete-skinny-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
html{
    height: 100%;
}
body{
    background: url(../img/logo-loncoleche.png) no-repeat;
    background-position: 50% 210px !important;
}
h1,h2,h3,h4{
    font-family: 'single_sleeveregular', Calibri, Arial, sans-serif;
    margin: 0;
    font-weight: normal;
}
p{
    font-family: 'myriadpro-regular', Calibri, Arial, sans-serif;
}
a{
    text-decoration: none;
    font-weight: normal;
}
.clearfix{
    clear: both;
}
.pull-right{
    float: right;
}
.pull-left{
    float: left;
}
.container{
    width: 990px;
    margin: 0 auto;
}
.loadie {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #e7850b;
    width: 0;
    height: 3px;
    -webkit-transition: width 0.5s ease-out;
    z-index: 999999;
}
#spinner{
    width: 32px;
    height: 32px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 400px auto 0 auto;
}

/*----------------------
---------HEADER---------
----------------------*/

header{
    background: url(../img/top.png) repeat-x center;
    width: 100%;
    height: 95px;
    overflow: hidden;
    position: fixed;
    z-index: 999;
}
.logo-container{
    width: 118px;
    float: left;
}
.logo-loncoleche{
    float: left;
    margin: 6px 10px 0 0;
}
.logo-loncoleche img{
    width: 72px;
}
.logo-soya{
    margin-top: 16px;
    visibility: hidden;
}
.logo-soya img{
    width: 134px;
}
nav.menu-top{
    width: 530px;
    float: left;
}
nav.menu-top ul{
    list-style-type: none;
    padding: 0;
    width: auto;
    display: inline-block;
    float: right;
}
nav.menu-top ul li{
    display: inline;
    text-align: center;
}
nav.menu-top ul li a{
    font: normal small-caps normal 1.5em/1.5em 'single_sleeveregular', Calibri, Arial, sans-serif;
    text-transform: uppercase;
    color: #534131;
    text-align: center;
    padding: 0 16px;
}
.current, a.nav-button:hover {
    color: #e7850b !important;
    text-decoration: underline;
}

/*----------------------
--------Section---------
----------------------*/
.compartir-site{
    width: 253px;
    height: 81px;
    background: url(../img/wood-share.png) no-repeat;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9
}
.compartir-site p{
    text-align: center;
    color: #fff;
    font-family: 'single_sleeveregular';
    font-size: 30px;
    margin: .4em 0;
    font-weight: normal;
}
.compartir-site p a:hover{
    opacity: .8;
}
.compartir-site p a img{
    vertical-align: middle;
}
#wrapper{
    overflow: hidden;
}
.section-title > h2{
    color: #fa8719;
    text-transform: uppercase;
    font-size: 2.625em;
    text-align: center;
}
.section-title > p{
    text-align: center;
    font-size: 1.125em;
    color: #231f20;
    margin: .5em
}
section{
    width: 100%;
    background: transparent;
}

/*Section 0 Home*/
section#home{
    background: url(../img/bg-soya.jpg) no-repeat center center;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
    height: 800px;
}
.home-container{
    padding-top: 500px;
    text-align: center;
}
.home-container h1{
    text-align: center;
    color: #fff;
    text-shadow: .02em .02em .05em #000;
    font: normal normal 3.438em 'single_sleeveregular', Calibri, Arial, sans-serif;
    text-transform: uppercase;
    margin-bottom: 20px
}
a.start{
    display: inline-block;
    margin: 0 auto;
    background: #fa8719;
    padding: 8px 54px 8px 20px;
    color: #fff;
    text-transform: uppercase;
    font: normal normal 2.438em 'single_sleeveregular', Calibri, Arial, sans-serif;
    text-shadow: .03em .03em .02em #bd620c;
    outline:rgba(0,0,0, .2) solid 6px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
a.start em{
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    background: #d96c04;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 22px;
    padding: 0 11px 4px 12px;
    margin-top: -36px;
    position: absolute;
    margin-left: 122px;
    font-style: normal;
}
a.start:hover{
    background: #d96c04;
}
.section-top{
    width: 100%;
    height: 52px;
    margin-top: -30px;
}
.section-content{
    width: 100%;
    height:748px;
    padding-top: 100px;
}
.animated{
    margin-top: -40px;
    position: relative;
}
.base-lax{
    position: relative;
    height: 100%;
    width: 1024px;
    margin: 0 auto;
}
.base-lax > div{
    position: absolute;

}
.campo-home{
    background: url(../img/bg-soya.jpg) no-repeat center center;
    height: 100%;
    left: 0;
    right: 0;
}
.texto-centro{
    height: 640px;
    width: 980px;
    top: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: url(../img/texto-centro.png) no-repeat top center;
    z-index: 0;
}
.pasos-home{
    height: 580px;
    width: 990px;
    left: 0;
    top: 10%;
    right: 0;
    margin: 0 auto;
    /*background: url(../img/tips_.png) no-repeat top center;*/
    position: relative;
    z-index: 1;
}
.pasos-home p{
    font-family: 'mathlete-skinny-webfont';
    color: #fff;
    font-size: 30px;
    text-shadow:2px 2px 2px #000;
    padding-top: 64px;
}
.pasos-home .homec1{
    width: 344px;
    min-height: 140px;
}
.pasos-home .homec1 .ldotted{
    width: 344px;
    min-height: 140px;
    background: url(../img/ldotted1.png) no-repeat right center;
}
.pasos-home .homec1 .ldotted a{
    display: block;
    width: 153px;
    height: 135px;
    float: left;
}
.pasos-home div .ldotted a{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.pasos-home div .ldotted a:hover{
    transform:scale(1.05,1.05);
    -webkit-transform:scale(1.05,1.05);
}
.pasos-home .homec1 .ldotted span{
    padding-top: 40px;
}
.pasos-home .homec1 .ldotted span p img{
    vertical-align: middle;
    margin: 0 8px;
    display: block;
    float: left;
}
.pasos-home .homec1 .ldotted span p strong{
    font-weight: normal;
    width: 90px;
    display: block;
    float: left;
}
.pasos-home .homec2{
    width: 414px;
    min-height: 190px;
}
.pasos-home .homec2 .ldotted{
    width: 414px;
    min-height: 190px;
    background: url(../img/ldotted2.png) no-repeat 64% center;
}
.pasos-home .homec2 .ldotted a{
    display: block;
    width: 144px;
    height: 135px;
    float: left;
    margin-top: 50px;
}
.pasos-home .homec2 .ldotted span{
    padding-top: 4px;
    display: block;
}
.pasos-home .homec2 .ldotted span p img{
    vertical-align: middle;
    margin: 0 8px;
    display: block;
    float: left;
}
.pasos-home .homec2 .ldotted span p strong{
    font-weight: normal;
    width: 90px;
    display: block;
    float: left;
}
.pasos-home .homec3{
    width: 286px;
    min-height: 174px;
    position: absolute;
    right: 0;
    top: 40px;
}
.pasos-home .homec3 .ldotted{
    width: 286px;
    min-height: 174px;
    background: url(../img/ldotted3.png) no-repeat 10% center;
}
.pasos-home .homec3 .ldotted a{
    display: block;
    width: 162px;
    height: 146px;
    float: right;
    margin-top: 24px;
}
.pasos-home .homec3 .ldotted span{
    position: absolute;
    top: -110px;
    right: 0;
}
.pasos-home .homec3 .ldotted span img{
    vertical-align: middle;
    margin: 0 8px;
}
/*
.pasos-home .homec2 .ldotted span p img{
    vertical-align: middle;
    margin: 0 8px;
    display: block;
    float: left;
}
.pasos-home .homec2 .ldotted span p strong{
    font-weight: normal;
    width: 90px;
    display: block;
    float: left;
}*/
.pasos-home .homec4{
    width: 350px;
    min-height: 170px;
    position: absolute;
    right: 0;
    bottom: 80px;
}
.pasos-home .homec4 .ldotted{
    width: 350px;
    min-height: 170px;
    background: url(../img/ldotted4.png) no-repeat 10% center;
}
.pasos-home .homec4 .ldotted a{
    display: block;
    width: 169px;
    height: 135px;
    float: right;
    margin-top: 24px;
}
.pasos-home .homec4 .ldotted span{
    position: absolute;
    top: -100px;
    right: 0;
}
.pasos-home .homec4 .ldotted span img{
    vertical-align: middle;
    margin: 0 8px;
}
/*Section 1*/
section#como{
    position: relative;
}
.sec1-acuarela{
    width: 796px;
    height: 699px;
    margin: 0 auto;
    position: relative;
    left: 0;
    right: 0;
    background:url(../img/1sec-acuarela.png);
}
.sec1-semillas{
    width: 900px;
    height: 520px;
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background:url(../img/1sec-semillas.png) no-repeat;
}
.box-text{
    width: 360px;
    position: absolute;
    z-index: 99;
}
.box-text img{

}
.box-text h3{
    color: #e8860c;
    font-size: 1.500em;
    width: 202px;
}
.box-text h3 span{
    margin-right: 8px;
}
.box-text p{
    width: 202px;
    font-size: 1em;
    font-family: 'myriadpro-regular', Calibri, Arial, sans-serif;
    color: #231f20;
}
.op1{
    margin:60px 0 0 0;
}
.op2{
    margin:350px 0 0 40px;
}
.op3{
    margin:150px 0 0 680px;
}
.op4{
    margin:350px 0 0 700px;
}

/*Section 2*/
.sec2-acuarela{
    width: 776px;
    height: 738px;
    margin-top: -120px;
    position: relative;
    background:url(../img/2sec-acuarela.png);
}
.sec2-pote{
    width: 523px;
    height: 430px;
    position: absolute;
    bottom: 140px;
    left: 0;
    right: 0;
    margin-left:40px;
    background:url(../img/2sec-pote.png);
}
.sec2-hoja{
    width: 216px;
    height: auto;
    position: absolute;
    bottom: 0px;
    margin-left: -30px;
}
.sec2-hoja img{
    width: 100%;
}
.op5 h3, .op5 p, .op6 h3, .op6 p{
    width: 100% !important;
}
.op5{
    margin:280px 0 0 600px;
}
.op6{
    margin:400px 0 0 600px;
}

/*Section 3*/
#sabor{
    height: auto !important;
}
#sabor .section-content{
    height: auto;
}
.sec3-acuarela{
    width: 980px;
    height: 563px;
    position: relative;
    margin: 180px auto 0 auto;
    left: 0;
    right: 0;
    /*background:url(../img/3sec-acuarela.png);*/
}
.variety{
    width: 220px;
    float: left;
    margin: 80px 12px 0 12px;
    text-align: center;
}
.variety .cont-yogu{
    width: 215px;
    margin: 0 auto;
}
.variety .fruta{
    width: 192px;
    margin: -30px auto 0 auto;
}
.variety .fruta img{
    width: 100%;
}
.variety h3{
    color: #fff;
    text-transform: uppercase;
    font-size: 1.500em;
    text-align: center;
    display: inline-block;
    padding: 4px 20px;
    font-weight: normal;
    border-radius: 6px; 
    letter-spacing: 1px;      
}
.y1 h3{
    background:#e8860c;
}

.y2 h3{
    background:#74a161;
}

.y3 h3{
    background:#79b2d7;
}

.y4 h3{
    background:#e75239;
}

/*Section 4*/
.sec4-acuarela{
    width: 980px;
    height: 563px;
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
    background:url(../img/3sec-acuarela.png);
}

.sec4-acuarela .box-text h3, .sec4-acuarela .box-text p{
    width: 100% !important;
}
.op7{
    margin: 90px 0 0 0;
}
.op8{
    margin: 300px 0 0 0;
}
.sec4-cont{
    width: 490px;
    margin-left: 600px;
}
.sec4-hoja{
    position: absolute;
    margin: 240px 0 0 0;
}
.sec4-yog{
    position: absolute;
    margin: 90px 0 0 80px;
}
.sec4-semilla{
    position: absolute;
    margin: 480px 0 0 0;
}

a.comm{
    background: #3b5998 url(../img/arrow-right.png) no-repeat 94% 50%;
    padding: 10px 36px 10px 16px;
    border: 1px solid #243f76;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    color: #fff;
    text-transform: uppercase;
    font: normal normal 1.600em 'single_sleeveregular', Calibri, Arial, sans-serif;
    text-shadow:.05em .05em .05em #000;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
a.comm:hover{
    background:#243f76 url(../img/arrow-right.png) no-repeat 94% 50%;
    padding: 10px 46px 10px 16px;
}

/*BACKGROUNDS FOR SECTIONS*/
.top-light{
    background: url(../img/cut1.png) repeat-x transparent;
}
.pattern-light{
    background: url(../img/patt-light.jpg) repeat;
}
.top-dark{
    background: url(../img/cut2.png) repeat-x transparent;
}
.pattern-dark{
    background: url(../img/patt-dark.jpg) repeat;
}

.bg-wood{
    background: url(../img/envases-frutas.png) no-repeat center 100%;
    min-height: 870px;
}


/*----------------------
---------FOOTER---------
----------------------*/
footer{
    width: 100%;
    overflow: hidden;
    margin-top: -160px;

}
.section-footer{
    width: 100%;
    height: 52px;
    background: url(../img/cut1.png) repeat-x transparent;
}
.wrapper-footer{
    overflow: hidden;
    padding-bottom: 30px;
}
/*HACKS*/
.slide {
    margin: 0 auto\9;
    width: 99%\9;
    padding: 0px 0\9;
    padding: 12rem 0\9;
    height: 40rem\9;
}


/*----------------------
---------HACKS---------
----------------------*/
section#home{
    background: url(../img/l1-bghome-ie7.jpg) no-repeat top center fixed\9;
    height: 800px\9;
}
.slide {
    margin: 0 auto;
    width: 100%;
    padding: 0px 0;
}
.sec1-semillas{
    background:url(../img/1sec-semillas-ie7.png) no-repeat transparent\9;
}
*:first-child+html nav.menu-top{
    padding-top: 18px;
}
*:first-child+html .op1{
    margin:60px 0 0 -80px;
}
*:first-child+html .op2{
    margin:350px 0 0 -50px;
}
*:first-child+html .op3{
    margin:150px 0 0 550px;
}
*:first-child+html .op4{
    margin:350px 0 0 560px;
}
*:first-child+html .op7{
    margin: 90px 0 0 -560px;
}

*:first-child+html .op8{
    margin: 300px 0 0 -560px;
}
*:first-child+html .sec1-semillas{
    background:url(../img/1sec-semillas-ie7.png) no-repeat transparent;
}
*:first-child+html nav.menu-top ul li a{
    padding: 0 8px;
}
*:first-child+html .comm{
    line-height: 50px;
}
.op5{
    margin-top: 180px\9;
}
.op6{
    margin-top: 420px\9;
}
.home-container h1{
    line-height: 800px\9;
    width: 603px\9;
    height: 114px\9;
    background:url(../img/title2-ie.png)\9;
    display: block\9;
    margin: 0 auto 14px auto;
}

/*----------------------
------MEDIA QUERY-------
----------------------*/
/* Landscape phones and down */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .container{
        width: 100% !important;
        margin: 0 auto;
    }
    .sec3-acuarela{
        width: 100%;
        height: 563px;
        position: relative;
        margin: 0 auto;
        left: 0;
        right: 0;
        background:url(../img/3sec-acuarela.png);
    }
    .sec4-acuarela{
        width: 100%;
        height: 563px;
        position: relative;
        margin: 0 auto;
        left: 0;
        right: 0;
        background:url(../img/3sec-acuarela.png);
    }
    .sec2-acuarela{
        width: 100%;
        height: 738px;
        margin-top: -120px;
        position: relative;
        background:url(../img/2sec-acuarela.png);
    }
    .sec4-cont {
        width: 490px;
        margin-left: 500px;
    }
    section#home{
        background: url(../img/l1-bghome.jpg) no-repeat top center fixed;
    }
    .op5{
        margin:280px 0 0 580px;
    }
    .op6{
        margin:400px 0 0 580px;
    }
    .op3{
        margin:150px 0 0 600px;
    }
    .op4{
        margin:350px 0 0 610px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
   .container{
        width: 100% !important;
        margin: 0 auto;
    }
    .sec3-acuarela{
        width: 100%;
        height: 563px;
        position: relative;
        margin: 0 auto;
        left: 0;
        right: 0;
        background:url(../img/3sec-acuarela.png);
    }
    .variety{
        width: 220px;
        float: left;
        margin: 80px 0px 0 0px;
    }
    .sec4-acuarela{
        width: 100%;
        height: 563px;
        position: relative;
        margin: 0 auto;
        left: 0;
        right: 0;
        background:url(../img/3sec-acuarela.png);
    }
    .sec2-acuarela{
        width: 100%;
        height: 738px;
        margin-top: -120px;
        position: relative;
        background:url(../img/2sec-acuarela.png);
    }
    .sec4-cont {
        width: 490px;
        margin-left: 500px;
    }
    section#home{
        background: url(../img/l1-bghome.jpg) no-repeat top center fixed;
    background-size: auto;
    }
    .op5{
        margin:280px 0 0 580px;
    }
    .op6{
        margin:400px 0 0 580px;
    }
    .op3{
        margin:150px 0 0 600px;
    }
    .op4{
        margin:350px 0 0 610px;
    }
 }