/*Resetted labels*/
*, p {hyphens: none !important;}
a,
a:hover { text-decoration: none; }
a img   { border: none; outline: none; }
input   { outline: none; }
img     { max-width: 100%; }
p{hyphens: none !important;}
figure{
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p, li{
    font-family: "Montserrat", sans-serif !important;
}
/*END Resetted labels*/
body {
    font-family: "Montserrat", sans-serif;
    color: #10142c;
    font-size: 16px;
    &:after{
        width: 100%;
        height: 100vh;
        left: -100%;
        margin: 0 auto;
        top: 0;
        z-index: 8;
        content: "";
        position: fixed;
        transition: all 0.4s ease-out;
        background: rgba(250, 209, 31, 1);        
    }
    &.open-nav-xs{
        overflow: hidden;
        header{            
            border-bottom-color: transparent;
            nav{
                left: 0;
            }
        }
        &:after{
            left: 0;
        }
    }
}
#nav-toogle {
    width: 30px;
    height: 30px;
    position: absolute;    
    transform: rotate(0deg);    
    transition: 0.5s ease-in-out;
    cursor: pointer;
    z-index: 99;
    border-radius: 50%;
    border: 0 solid transparent;
    display: inline-block;
    vertical-align: top;
    right: 15px;
    top: 33px;
    display: none;
}
#nav-toogle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #15cfec;
    border-radius: 9px;
    opacity: 1;
    left: 0%;    
    transform: rotate(0deg);    
    transition: 0.25s ease-in-out;
    z-index: 99;
}
#nav-toogle span:nth-child(1) {
    top: 11px;
}
#nav-toogle span:nth-child(2),
#nav-toogle span:nth-child(3) {
    top: 30px;
}
#nav-toogle span:nth-child(4) {
    top: 21px;
}
#nav-toogle.open span:nth-child(1) {
    left: 50%;
    top: 21px;
    width: 0%;
}
#nav-toogle.open span:nth-child(2) {    
    transform: rotate(45deg);
    top: 21px;
}
#nav-toogle.open span {
    background: #fff !important;    
}
#nav-toogle.open span:nth-child(3) {    
    transform: rotate(-45deg);
    top: 21px;
}
#nav-toogle.open span:nth-child(4) {
    left: 50%;
    top: 21px;
    width: 0%;
}
header{
    background-color: #fff;
    text-align: center;
    padding: 40px 0 40px 0;
    figure{
        max-width: 250px;
        float: left; 
        margin-right: 50px;       
    }
}
.menu {           
    display: inline-block;
    vertical-align: top;
  }

  .redes{
    float: right;
    margin-top: 50px;
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
        li{
            display: inline-block;
            vertical-align: top;
            max-width: 30px;
            margin-right: 10px;
            transition: all 0.3s ease;
            &:hover{                
                transform: translateY(-5px);
            }
            a{
                display: block;

            }
            &:last-child{
                margin-right: 0;
            }
        }
    }
  }
  
  .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .menu li {
    position: relative;
    display: flex;
    align-items: center;
    font-family: 'Gotham-Black';
  }
  
  .menu li:not(:first-child)::before {
    content: "|";
    color: #00c0eb;
    font-family: arial;
    margin-right: 15px;
  }
  
.menu a {
    color: #000;    
    text-decoration: none;
    font-size: 16px;
    &:hover{
        color: #00c0eb;
    }
}

.banner-home{
    width: 100%;
    clear: both;
    img{
        width: 100%;
    }
}



.main-top{
    text-align: center;
    padding: 50px 0 70px 0;
    h6{
        margin: 0 0 40px 0;
        font-size: 13px;
        font-weight: bold;
    }
    h1{
        color: #537043;
        margin: 0 0 40px 0;
        font-weight: bold;
    }
    p{
        margin: 0 0 30px 0;
    }
    article{
        max-width: 780px;
        display: inline-block;
        vertical-align: top;
    }
}
.wrapper-main{
    position: relative;
    z-index: 2;
}
.cta-avotoasty{
    display: inline-block;
    vertical-align: top;
    transition: all 0.3s ease;
    border-radius: 55px;
    text-align: center;
    padding: 12px 40px;
    font-weight: bold;
    color: #fff;
    background-color: #89b543;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    &:hover{
        background-color: #537043;
    }
}
header{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 30px 0;
}
.img-fixed{
    position: absolute;
      
}
.parallax-img {
  will-change: transform;
  transition: transform 0.06s linear;
  pointer-events: none; 
}
.img-1{
    left: 0;
    
    top: 200px;
}
.img-2{
    right: 0;
    top: 0;
    
}
.main-play{
    margin: 0 0 50px 0;
    figure{
        margin-bottom: 40px;
    }
}
.grid-two-money{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #537043;
    h3{
        font-size: 38px;
        margin: 0 0 5px 0;
        font-weight: bold;
    }
    h6{
        font-weight: 600;
        font-size: 13px;
    }
}
.cards-avotoasty{
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    background-color: #edf4e3;
    gap: 0;
    margin-bottom: 50px;
    clear: both;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    figure{
        overflow: hidden; 
        img{
            width: 100%;
        }       
    }
    .info-details{
        padding: 50px 60px;
        text-align: left;
    }
    h5{
        color: #10142c;
        font-size: 13px;
        margin: 0 0 10px 0;
        text-transform: uppercase;
        font-weight: bold;
    }
    h6{
        color: #537043;
        font-size: 13px;
        margin: 0 0 15px 0;
        text-transform: uppercase;
        font-weight: bold;
    }
    h2{
        font-size: 36px;
        margin: 0 0 40px 0;
        color: #537043;
        font-weight: bold;
    }
    h4{
        margin: 0 0 5px 0;
        font-size: 14px;
        color: #537043;
        font-weight: bold;
    }
    li, p{
        span{
            color: #537043;
            font-weight: 600;
        }
    }
}
.cta{
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 8px 25px;
    display: inline-block;
    vertical-align: top;
    background-color: #89b543;
    color: #fff;
    text-transform: uppercase;
    margin-top: 50px;
    font-size: 14px;
    font-weight: bold;
    &:hover{
        background-color: #537043;
    }
}
.cards-ppal{
    .cards-avotoasty{
        &:nth-child(even){
            figure{
                order: 2;
            }
            .info-details{
                order: 1;
            }
        }
        &:nth-child(2){
            h2{
                font-size: 33px;
            }
        }
        &:nth-child(3){
            h2{
                font-size: 30px;
            }
        }
    }
}
.reverse-cards-who{
    li{
        margin-bottom: 5px;
    }
    .cards-avotoasty{
        &:nth-child(even){
            figure{
                order: 2;
            }
            .info-details{
                order: 1;
            }
        }       
    }
}
.reverse-cards-who{
    h2{
        font-size: 28px;
    }
}
.img-3{
    right: 0;
    top: 0;
}
.video-mp4{
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}
.main-real-food{
    padding: 50px 0 60px 0;
    text-align: center;
    h2{
        font-size: 40px;
        color: #537043;
        text-transform: uppercase;
        text-align: center;
        font-weight: 900;
        margin: 0 0 40px 0;
    }
}
.video-cover figure{
    border-radius: 10px;
    overflow: hidden;
    border: 5px solid #537043;
    transition: all 0.3s ease;
    &:hover{
        opacity: 0.9;
        border-color: #89b543;
    }
}
.video-wrapper {
  display: none;
  position: relative;  
}

.video-wrapper iframe {
  position: relative;
  inset: 0;
  width: 100%;
  height: 485px;
  border-radius: 10px;
}

.video-cover {
  cursor: pointer;
}
.main-signature{
    padding: 20px 0 70px 0;
    text-align: center;    
    h6{
        color: #10142c;
        font-weight: 400;
        font-size: 16px;
        margin: 0 0 30px 0;
    }
    h5{
        font-weight: bold;
        font-size: 20px;
        color: #537043;
        margin: 0 0 50px 0;
    }
}
.grid-signature{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 750px;
    margin: 0 auto;
}
.card-signature{
    background-color: #f3f7ec;
    border-radius: 10px;
    padding: 35px 50px;
    text-align: left;
    border: 1px solid #5d784e;
    h2{
        font-weight: bold;
        font-size: 23px;
        color: #537043;
        margin: 0 0 25px 0;
    }
    p{
        font-size: 16px;
        color: #10142c;
        margin: 0;
    }
}
.video-cover img {
  width: 100%;
  display: block;
}
.main-start{
    text-align: center;
    padding: 30px 0 60px 0;
    color: #537043;
    h3, h2{
        font-weight: 900;
        text-transform: uppercase;
    }
    h3{        
        font-size: 25px;
        margin: 0;
    }
    h2{        
        font-size: 33px;
        margin: 0 0 50px 0;
    }
}
.btn-start{
    display: inline-block;
    vertical-align: top;
    transition: all 0.3s ease;
    border-radius: 55px;
    text-align: center;
    padding: 12px 40px;
    font-weight: bold;
    color: #fff;
    background-color: #89b543;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    min-width: 210px;
    margin: 0 25px 30px 25px;
    &.small-btn{
        font-size: 14px;
        padding: 3px 40px;
    }
    &:hover{
        background-color: #537043;
    }
}
.main-form{    
    background: url('../images/background-avotoasty.webp') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    padding: 60px 0;
    color: #fff;
    min-height: 480px;
    h2{
        font-size: 38px;
        margin: 0 0 50px 0;
        font-weight: 700;
    }
    p{
        font-size: 18px;
    }
}
.grid-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px 0;
}
.img-4{
    left: 0;
    top: -100px;
}

.img-5{
    right: 0;
    top: 300px;
}

.img-6{
    left: 0;
    top: 0px;
}
.img-7{
    right: 0;
    top: 0px;
}
.main-carrousel{
    padding: 0 0 60px 0;
}
footer{
    background-color: #5c6e47;
    padding: 30px 0;
    color: #fff;
}
footer figure {
    display: inline-block;
    vertical-align: top;
    max-width: 70px;
}
footer .wrapper-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
footer h4 {
    display: inline-block;
    vertical-align: top;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
    strong{
        font-weight: 600;
    }
}
.fractta{
    max-width: 500px;
    p{
        font-size: 14px;
        margin: 0;
        strong{
            font-weight: 600;
        }
        a{
            color: #fff;
            text-decoration: underline;
        }
    }
}
.card-productos{
    border-radius: 15px;
    overflow: hidden;    
    cursor: default;
    background-color: #f7e7ee;
    max-width: 300px;
    margin: 0 auto;
    h4{
        margin: 0;
        padding: 15px 15px;
        text-align: left;
        color: #c83478;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
    }
    figure{
        overflow: hidden;
        img{
            transition: all 0.3s ease;
        }
        &:hover{
            img{
                transform: scale(1.1) rotate(5deg);
            }
        }
    }
}
.swiper-pagination-bullet{
    background-color: #f7d5e4 !important;   
    opacity: 1 !important;
}
.swiper-pagination-bullet-active{
    background-color: #c83478 !important;
    opacity: 1 !important;
}
.swiper-pagination {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 30px;
}
.form-monday iframe {
    width: 100%;
    border-radius: 10px;
    height: 1020px;
}

.clear-fix {
    &::after {
        content: "";
        clear: both;
        width: 100%;
        display: block;
    }
}














/* ------------------------------Ipad Horizontal---------------------------- */
@media handheld, only screen and (min-width: 768px) and (max-width: 1024px){
	
}

/* ------------------------------Ipad Vertical---------------------------- */
@media handheld, only screen and (min-width: 768px) and (max-width: 1023px) {
	#nav-toogle{display: block !important;}
	 
}

/* ---------------------------- 320px-640px -------------------------- */
@media handheld, only screen and (max-width: 667px) {
	#nav-toogle{display: block !important;}
    header{	
		padding: 30px 15px;	
        figure{
            max-width: 50px;
			margin-top: -10px;
        }
		nav{
			position: absolute;
			left: -100%;
			top: 80px;
			width: 100%;
			transition: all 0.4s ease-out;
			padding: 0 15px;
			ul{
				li{
					width: 100%;
					margin: 0 0;
					text-align: left;
					border-bottom: 1px solid #fff;
					a{
						color: #fff;
						padding: 12px 0;
						border: 0;
						&:hover, &:focus{
							color: #fff;
						}
					}
				}
			}
		}
	}
    
    .redes ul li{
        max-width: 30px;
        margin-right: 5px;
    }
    .redes{
        margin-top: 20px;
        margin-right: 45px;
    }
    .menu ul{
        display: block;
    }
    .menu{
        display: inline-block;
        z-index: 9;
    }
    .menu a{
        color: #fff;
    }
    .menu li:not(:first-child)::before{display: none;}

	.cards-avotoasty{
		display: block;

	}
	.cards-avotoasty .info-details{
		padding: 30px 15px;
	}
	.grid-signature{
		display: block;
	}
	.card-signature{
		padding: 30px 15px;
		margin-bottom: 30px;
		br{display: none;}

	}
	.main-signature{
		padding: 20px 15px 30px 15px;
	}
	.main-cards{
		padding: 0 15px 10px 15px;
	}
	.main-real-food{
		padding: 0 15px 30px 15px;
	}
	.main-real-food h2{
		font-size: 27px;
	}
	.video-wrapper iframe{
		height: 165px;
	}
	.img-3 {
		max-width: 145px;
		top: 70px;
	}
	.img-4 {		
		top: -130px;
		max-width: 90px;
	}
	.grid-two-money{
		display: block;
		article{
			margin-bottom: 30px;
		}
	}
	.main-play{
		padding: 0 15px 0 15px;
	}
	.main-top{
		padding: 40px 15px 45px 15px;
	}
	.img-1{display: none;}
	.img-2{
		max-width: 55px;
	}
	.main-top h1{
		font-size: 20px;
		margin-bottom: 30px;
		br{
			display: none;
		}
	}
	.main-top h6{
		font-size: 12px;    
    	max-width: 200px;
    	margin: 0 auto 40px;
	}
	.cards-avotoasty h2,
	.cards-ppal .cards-avotoasty:nth-child(2) h2,
	.cards-ppal .cards-avotoasty:nth-child(3) h2{
		font-size: 22px;
		margin: 0 0 25px 0;
	}
	.cta {
		margin-top: 20px;
	}
	.main-signature h5 br{display: none;}
	.img-5 {		
		top: 235px;
		max-width: 120px;
	}
	.grid-form{
		display: block;
	}
	.main-form{
		padding: 40px 15px;
		br{display: none;}
		h2{
			font-size: 28px;
			margin-bottom: 30px;
		}
		p{
			margin-bottom: 30px;
		}
	}
	.main-start h3{
		font-size: 18px;
	}
	.main-start h2{
		font-size: 20px;
	}
	.main-start{
		padding: 0px 0 30px 0;
	}
	.img-6{
		max-width: 100px;
		top: 50px;
	}
	.img-7 {		
		top: 160px;
		max-width: 100px;
	}
	footer{
		text-align: center;
	}
	footer .wrapper-main{
		display: block;
	}
	footer figure{
		margin-bottom: 20px;
	}
	footer p{
		margin-bottom: 15px !important;
	}
	.main-top p br{
		display: none;
	}
	
}

/* ---------------------------- < 320px- -------------------------- */
@media handheld, only screen and (min-width: 300px) and (max-width: 321px) {

}