body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/*menu*/
.menu{
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5rem;
    box-sizing: border-box;
    position: sticky;
    top: 0;
}

.opcm{
    height: 40px;
    width: 80%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
        
}
.item-options{
    color: black;
    margin: 0.5rem;
    text-decoration: none;
    font-size: 0.7rem;
}

.item-options:hover{
    color: #72CCD2;
}

.opcm2{
    height: 40px;
    width: 15%;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
        
}
.item-options2{
    color: black;
    margin: 1px;
    
    text-decoration: none;
    font-size: 1rem;
    color: #72CCD2;
    display: flex;
    font-weight: bold;

}
.item-options2:hover{
        color: #bcecef;
}




.main-menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
/*logos*/

.logo1{
    width: 120px;
    margin: 0;
    padding: 0;
}

.logo1 img{
    width: 100%;
}

.user{
    width: 40px;
    margin: 6px;
}

.user img{
    width: 100%;
}

.logo1 img{
    width: 100%;
}

.bolsa{
    width: 40px;
    margin: 6px;
    padding: 0;
}

.bolsa img{
    width: 100%;
}


/*banner*/
.banner{
    width: 100%;
    padding: 9rem 3rem;
    text-align: left;
    background: url(../images/1f.png);
    background-color: white;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
  
}

.banner h1{
    color: rgb(0, 0, 0);
    width: 10rem;
    font-size: 3rem;
    padding-left: 21rem;
    margin: 0;
}

.banner p{
    color: rgb(0, 0, 0);
    width: 18rem;
    padding-top: 0;
    padding-left: 21rem;
}

.banner button{
    background-color: white;
    
    width: 8rem;
    height: 3rem;
    font-size: 1.5rem;
    color: #72CCD2;
    border:2px solid #72CCD2;
    margin-left: 21rem;
    margin-top: 3rem;
}

button:hover{
    background-color: #72CCD2;
    border: 3px solid #72CCD2 ;
    color: white;
}

/*historia*/
.c1{
    width: 100%;
    height: 45rem;
    padding: 7rem 1rem;
    text-align: left;
    background: url(../images/mujeres.png);
    background-color: white;
    background-size: 100rem 45rem;
    background-position: center;
    box-sizing: border-box;
}

.c11{
    background-color: #72CCD2;
    width: 50%;
    height: 38rem;
}

.c11 h1{
    color: white;
    width: 15rem;
    font-size: 3rem;
    padding-left: 21rem;
    padding-top: 7rem;
    margin: 0;
}

.c11 p{
    color: white;
    width: 21rem;
    font-size: 1rem;
    padding-left: 21rem;
    padding-top: 2rem;
    margin: 0;
}

.c11 button{
    background-color: #72CCD2;
    
    width: 7rem;
    height: 2rem;
    font-size: 1rem;
    color: #ffffff;
    border:2px solid #ffffff;
    margin-left: 21rem;
    margin-top: 3rem;
}

button:hover{
    background-color: #ffffff;
    border: 3px solid #fefefe ;
    color: #72CCD2 ;
}

/*recetas*/
.c2{
    background: rgb(194, 23, 23);
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 26rem;
    background: url(../images/jugos2.jpg);
    background-size: 1566px 420px;
    background-position: center;
    
}

.c22{
    background: #FACC75;
    height: 26rem;
    margin-left: 50%;
    
    
}
.c22 h1{
    color: rgb(255, 255, 255);
    font-size:3rem;
    padding-top: 10rem;
    padding-left: 8rem;
}
.c2 button{
    background-color: #FACC75;
    
    width: 7rem;
    height: 2rem;
    font-size: 1rem;
    color: #ffffff;
    border:2px solid #ffffff;
    margin-left: 8rem;
    margin-top: 0.1rem;
}

button:hover{
    background-color: #ffffff;
    border: 3px solid #FACC75;
    color: #FACC75;
}

/*grilla*/

.insta h1{
    color: #72CCD2;
    font-size: 2rem;
    justify-content: center;
    display: flex;
 }

.grilla{
    width: 756px;
    margin-left: 25rem;
    margin-top: 1rem;
    padding: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px;
   
    
}

.caja{
    color: black;
    width: 250px;
    height:250px;
    text-align: center;  
    flex-direction: row;

}

.caja1 video {
    
    width: 250px;
    height: 250px;
    position: relative;
    border: 2px solid #000000;
    
    
}

.caja2 {
    background-image: url(../images/2a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja3 {
    background-image: url(../images/3a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja4 {
    background-image: url(../images/4a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja5 {
    background-image: url(../images/5a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja6 video {
    width: 250px;
    height: 250px;
    position: relative;
    border: 2px solid #000000;
}

.caja7 {
    background-image: url(../images/6a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja8 video {
    width: 250px;
    height: 250px;
    position: relative;
    border: 2px solid #000000;
}

.caja9 {
    background-image: url(../images/7a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja10 {
    background-image: url(../images/8a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja11 {
    background-image: url(../images/9a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.caja12 {
    background-image: url(../images/10a.jpg);
    width: 250px;
    height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}

.but1 button{
    background-color: #ffffff;
    
    width: 8rem;
    height: 2.5rem;
    font-size: 1.2rem;
    color: #e14343;
    font-weight: bold;
    border:2px solid #e14343;
    margin-left: 45rem;
    margin-top: 2rem;
}

button:hover{
    background-color: #ffffff;
    border: 3px solid #e14343 ;
    color: #000000 ;
}

/*footer*/

.foter{
    background: #72CCD2;
    width: 100%;
    height: 30rem;
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

}

.foter h1{
    color: white;
    padding-bottom: 3rem;
}
.foter input{
            
            background: #72CCD2;
            border: 0;
            width: 8rem;
            height: 2.5rem;
            font-size: 0.8rem;
            margin-top: 5rem;
            border-bottom: 3px solid #ffffff;
            color: white;
            margin: 3px;
        }
.foter button {
    width: 8rem;
    height: 2.5rem;
    background: white;
    color: #000000 ;
    border: 1px solid white ;
}

button:hover{
    border: 2px solid rgb(191, 187, 187);
}
.foter p {
    padding-top: 1rem;
    margin-bottom: 0.1rem;
    font-size: 1rem;
    color: white;
}

.pie{
    display: flex;
    flex-direction: row;
    width: 70px;
    height: 70px;
    margin-top: 0.5rem;
    align-items: start;
    justify-content: space-between;
}
.face {
    background-image: url(../images/facebok.png);
   width: 30px;
   height: 30px;
    background-position: 50% 50%;
    background-size: cover;
    
}
.inst {
    background-image: url(../images/instagram.png);
   width: 30px;
   height: 30px;

    background-position: 50% 50%;
    background-size: cover;
    
}