* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    font-family: 'Open Sans';
}

/*-----------Buscador-----------*/

.buscador .buscar-en{
    display: inline-block;
    margin: 0px 190px 0px 0;
    width: 454.5px;
    height: 50px;
    border: 3px solid #36ECC9;
    border-bottom: 0px solid #000;
    border-radius: 15px 0 0 0px;
}

.buscador{
    text-align: right;
    margin: 70px 50px 100px 0;
}

.buscador .ets{
    font-size: 200%;
    border: 3px solid #ff487f;
    border-right: none;
    border-radius: 15px 0 0 15px;
    margin: 0;
    width: 450px;
    padding: 5px 0 5px 2%;
}
.buscador .bcr{
    font-size: 200%;
    border-radius: 0 15px 15px 0;
    height: 63px;
    width: 190px;
    margin: 0;
    background: #3cf555;
    color: #fff;
    border: 0;
    border-left: 3px solid #ff487f;
}

/*-----------Listas-----------*/
.productos{
    text-align: center;
    margin-bottom: 0px;
    padding: 50px;
}

.productos h3{
    font-size: 250%;
    margin-bottom: 15px;
}

.productos ul{
    text-align: left;
    display: inline-block;
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0;
}

.productos ul li{
    font-size: 140%;
    margin: 0 70px 0 70px;
}

.productos ul .pt{
    font-weight: bold;
    color: #20a88d;
}

.productos ul .x{
    visibility: hidden;
}

.precurso{
    padding: 0px !important;
    width: 100%;
}

.svg3{
    margin-bottom: -50;
}

.helados{
    background: #E8F8F5  ;
}

.paletas-de-crema{
    background: #E8F8F5  ;
}

.paletas-de-agua{
    background: #E8F8F5  ;
}

.especialidades{
    background: #E8F8F5  ;
}

/*-----------Animacion de Scroll-----------*/

.animacion{
    height: 800px;
    background: #fff;/* 
    scroll-behavior: smooth 5s; */
}

.animacion .animacion-a{
    width: 60%;
    position: absolute;
        top: 2460px;
        left: 0px;
    animation: animacionA;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 1;
}

@keyframes animacionA {
    from{transform: translate(0px,0px);}
    to{transform: translate(28%,0px);}
}

.animacion .animacion-b{
    width: 60%;
    position: absolute;
        top: 2530px;
        left: 0px;
    animation: animacionA;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 7;
}

.animacion .animacion-c{
    width: 25%;
    position: absolute;
        top: 2335px;
        left: 17%;
    animation: animacionC;
    animation-duration: 9s;
    animation-fill-mode: forwards;
    z-index: 5;
}

@keyframes animacionC {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);}
}

.animacion .animacion-d{
    width: 28%;
    position: absolute;
        top: 2370px;
        left: 36%;
    animation: animacionD;
    animation-duration: 7s;
    animation-fill-mode: forwards;
    z-index: 3;
}

@keyframes animacionD {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);}
}

.animacion .animacion-e{
    width: 25%;
    position: absolute;
        top: 2350px;
        left: 50%;
    animation: animacionE;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 2;
}

@keyframes animacionE {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);}
}

.animacion .animacion-f{
    width: 55%;
    position: absolute;
        top: 2530px;
        left: 19%;
    animation: animacionF;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 6;
}

@keyframes animacionF {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);}
}

.animacion .animacion-g{
    width: 25%;
    position: absolute;
        top: 2320px;
        left: 24%;
    animation: animacionG;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 4;
}

@keyframes animacionG {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);}
}

.animacion .animacion-h{
    width: 8%;
    position: absolute;
        top: 2090px;
        left: 49.3%;
    animation: animacionH;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    z-index: 2;
}

@keyframes animacionH {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);transform: rotate(20deg);}
}

.animacion .animacion-i{
    width: 8%;
    position: absolute;
        top: 2280px;
        left: 23%;
    animation: animacionI;
    animation-duration: 8s;
    animation-fill-mode: forwards;
    z-index: 2;
}

@keyframes animacionI {
    from{transform: translate(0px,-200px);}
    to{transform: translate(0px,0px);}
}

.animacion .animacion-j{
    width: 8%;
    position: absolute;
        top: 2300px;
        left: 44%;
    animation: animacionI;
    animation-duration: 9s;
    animation-fill-mode: forwards;
    z-index: 1;
}

.animacion .animacion-k{
    width: 8%;
    position: absolute;
        top: 2270px;
        left: 60.5%;
    animation: animacionI;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    z-index: 1;
}

/*-----------Responsive Design-----------*/

/*-----------Animacion de Scroll-----------*/

@media (min-width: 1158px) and (max-width: 1354px) {
	.animacion{
        height: 800px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 2760px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 2830px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 2635px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 2670px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 2650px;
            left: 50%;
    }
    .animacion .animacion-f{
        position: absolute;
            top: 2830px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 2620px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 2390px;
            left: 49.3%;
    }

    .animacion .animacion-i{
        position: absolute;
            top: 2580px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 2600px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 2570px;
            left: 60.5%;
    }
}

@media (min-width: 980px) and (max-width: 1158px) {
	.animacion{
        height: 800px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3060px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3130px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 2980px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3000px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 2990px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3130px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 2960px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 2730px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 2930px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 2940px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 2930px;
            left: 60.5%;
    }
}

@media (min-width: 808px) and (max-width: 980px) {
	.animacion{
        height: 600px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 2860px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 2930px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 2830px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 2830px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 2830px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 2930px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 2810px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 2620px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 2790px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 2790px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 2790px;
            left: 60.5%;
    }
}

@media (min-width: 691px) and (max-width: 808px) {
	.animacion{
        height: 500px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3710px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3780px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3680px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3680px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3680px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3780px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3660px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3470px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3640px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3640px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3640px;
            left: 60.5%;
    }
}

@media (min-width: 555px) and (max-width: 691px) {
	.animacion{
        height: 500px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3690px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3730px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3660px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3660px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3660px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3730px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3640px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3540px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3630px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3630px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3630px;
            left: 60.5%;
    }
}

@media (min-width: 400px) and (max-width: 555px) {
	.animacion{
        height: 350px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3500px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3530px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3470px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3470px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3470px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3530px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3460px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3370px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3450px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3450px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3450px;
            left: 60.5%;
    }
}

@media (min-width: 377px) and (max-width: 400px) {
	.animacion{
        height: 300px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3560px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3580px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3530px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3530px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3530px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3580px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3520px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3440px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3510px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3510px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3510px;
            left: 60.5%;
    }
}

@media (min-width: 375px) and (max-width: 377px) {
	.animacion{
        height: 250px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3970px;
    }

    .animacion .animacion-b{
        position: absolute;
            top: 4000px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3960px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3960px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3960px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3995px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3955px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3840px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3945px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3945px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3945px;
            left: 60.5%;
    }
}

@media (min-width: 331px) and (max-width: 375px) {
	.animacion{
        height: 210px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 4000px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 4020px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3990px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3990px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3990px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 4015px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3985px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3910px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3970px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3970px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3970px;
            left: 60.5%;
    }
}

@media (min-width: 301px) and (max-width: 331px) {
	.animacion{
        height: 210px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3750px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3770px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3740px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3740px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3740px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3765px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3735px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3660px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3725px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3725px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3725px;
            left: 60.5%;
    }
}

@media (min-width: 200px) and (max-width: 300px) {
	.animacion{
        height: 170px;
    }
    
    .animacion .animacion-a{
        position: absolute;
            top: 3830px;
    }
    
    .animacion .animacion-b{
        position: absolute;
            top: 3850px;
    }
    
    .animacion .animacion-c{
        position: absolute;
            top: 3820px;
            left: 17%;
    }
    
    .animacion .animacion-d{
        position: absolute;
            top: 3820px;
            left: 36%;
    }
    
    .animacion .animacion-e{
        position: absolute;
            top: 3820px;
            left: 50%;
    }
    
    .animacion .animacion-f{
        position: absolute;
            top: 3845px;
            left: 19%;
    }
    
    .animacion .animacion-g{
        position: absolute;
            top: 3815px;
            left: 24%;
    }
    
    .animacion .animacion-h{
        position: absolute;
            top: 3740px;
            left: 49.3%;
    }
    
    .animacion .animacion-i{
        position: absolute;
            top: 3805px;
            left: 23%;
    }
    
    .animacion .animacion-j{
        position: absolute;
            top: 3805px;
            left: 44%;
    }
    
    .animacion .animacion-k{
        position: absolute;
            top: 3805px;
            left: 60.5%;
    }
}

/* --------------------------------------*/

@media (min-width: 570px) and (max-width: 1000px) {
	.buscador .ets{
        font-size: 200%;
        width: 330px;
        padding: 5px 0 5px 2%;
    }
    .buscador .bcr{
        width: 150px;
    }

    .buscador .buscar-en{
        margin: 0px 150px 0px 0;
        width: 335px;
    }
    
}

@media (min-width: 320px) and (max-width: 570px) {

    .buscador{
        margin: 70px 0px 100px 0;
        text-align: center;
    }

	.buscador .ets{
        font-size: 120%;
        width: 200px;
    }
    .buscador .bcr{
        width: 75px;
        height: 45px;
        font-size: 120%;
    }

    .buscador .buscar-en{
        margin: 0px 76px 0px 0;
        width: 203px;
        height: 35px;
    }
    
}

@media screen and (max-width: 370px) {

    .buscador{
        margin: 70px 0px 100px 0px;
        text-align: center;
    }

	.buscador .ets{
        font-size: 100%;
        width: 170px;
    }
    .buscador .bcr{
        width: 60px;
        height: 40px;
        font-size: 100%;
    }

    .buscador .buscar-en{
        margin: 0px 61px 0px 0;
        width: 173px;
        height: 35px;
    }
    
}

@media (min-width: 400px) and (max-width: 1354px) {

    .productos .hs, .productos .ns, .productos .pc, .productos .pa, .productos .es{
        width: 350px;
    }
    
}

@media (min-width: 376px) and (max-width: 400px) {

    .productos .hs, .productos .ns, .productos .pc, .productos .pa, .productos .es{
        width: 325px;
    }
    
}

@media (min-width: 500px) and (max-width: 850px) {
    .productos .as, .productos .ast{
        width: 450px;
    }
    
}

@media (min-width: 422px) and (max-width: 500px) {
    .productos .as, .productos .ast{
        width: 350px;
    }
    
}

@media (min-width: 307px) and (max-width: 331px) {
    .productos{
        padding: 25px;
    }
    
}

@media (min-width: 0px) and (max-width: 307px) {
    .productos{
        padding: 15px;
    }
    
}

@media (min-width: 307px) and (max-width: 298px) {
    .productos{
        padding: 0px;
    }
    
}