*{
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  text-decoration: none;
}

:root{
  --amarillo: #fff600;
  --rojo: #e7032b;
  --guindo: #26001b;
  --rosa: #810034;
  --gray: #a3a3a3;
  --dark: #343a40;
  --gray-dark: #343a40;
}
html{
  font-size: 62.5%;
}

h1{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 3.2rem;
  color: var(--dark);
}
h2{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 2.8rem;
  color: var(--dark);
}
h3{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 2.3rem;
  color: var(--dark);
}
h4{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
}
p{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem;
  color: var(--dark);
}
span{
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 2.2rem;
}

/* ec1c24 */


.portada{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
      .img__portada{
        width: 100%;
        height: 100%;
        position: absolute;
      }
            .img__portada img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
      .capa{
        width: 100%;
        height: 100%;
        background: rgba(30, 39, 46, 0.55);
        position: absolute;
      }
      .cabecera{
        width: 100%;
        height: 14vh;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
      }
            .img__cabecera{
              width: 33%;
              height: 90%;
              display: flex;
            }
                  .img__cabecera img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                  }
            .checkbtn{
              font-size: 5rem;
              position: relative;
              color: var(--rojo);
              }
              #check{
                display: none;
              }
              #check:checked ~ .menu__cabecera{
                left: 0;
                position: relative;
              }
              #check:checked ~ .media{
                left: 0;
                position: relative;
              }
              .animate__bounce{
                animation-delay: 2s;
                animation-duration: 2s;
              }
            .menu__cabecera{
              position:relative;
              width: 100%;
              height: 70vh;
              left: -100%;
              text-align: center;
              display: flex;
              justify-content: center;
              background-color: rgba(19, 19, 19, 0.91);
              transition: .5s all ease-out;
              z-index: 1200;
            }
                  .menu__cabecera ul{
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    list-style: none;
                    transition: .5s all ease-out;
                  }
                        .menu__cabecera ul li{
                          font-size: 2rem;
                          font-weight: bold;
                        }
                              .menu__cabecera ul li a{
                                font-family: 'Oswald', sans-serif;
                                font-weight: 400;
                                color: rgb(255, 255, 255);
                              }
            .media{
              position:relative;
              width: 100%;
              height: 20vh;
              left: -100%;
              display: flex;
              justify-content: center;
              background-color: rgba(19, 19, 19, 0.91);
              transition: .5s all ease-out;
              z-index: 1200;
            }
                  .media ul{
                    width: 100%;
                    height:100%;;
                    display: flex;
                    justify-content: space-around;
                    list-style: none;
                  }
                        .media ul li{
                          width: 45px;
                          height: 45px;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
                          transition: .2s all ease-out;
                        }
                              .media ul li a{
                                font-size: 30px;
                                color: #fff;
                             }
      .promo__portada{
        width:80%;
        height: auto;
        margin-top: 30vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
      }
            .promo__portada h1{
              color: rgb(255, 255, 255);
              letter-spacing: 1px;
            }
      .link__promo{
        width: 60%;
        height: 8vh;
        margin-top: 1vh;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(231, 3, 43);
        color: rgb(255, 255, 255);
        transition: .3s all ease-out;
        font-family: 'Lato', sans-serif;
        font-size: 2rem;
        font-weight: bold;
      }



/***************************** NOSOTROS ****************************/

/***************************** NOSOTROS ****************************/



.nosotros{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
      .container__nosotros{
        width: 85%;
        height: auto;
        margin-top: 20vh;
        display: flex;
        flex-direction: column;
      }
            .img__nosotros{
              width: 100%;
              height: auto;
              border-radius: 8px;
            }
                  .img__nosotros img{
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                    object-fit: cover;
                  }
            .texto__nosotros{
              width: 100%;
              height: auto;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
                  .texto__nosotros h1{
                    margin: 3vh 0 2vh 0;
                  }

@media screen and (max-width: 736px) and (orientation: landscape) {
  .img__nosotros{
    height: 50vh;
  }
}


/*********************************** MENU *********************************/

/*********************************** MENU *********************************/



.menu{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
      .container__menu{
        width: 85%;
        height: auto;
        margin-top: 15vh;
        display: flex;
        flex-direction: column;
        position: relative;
      }
            .container__menu h1{
              text-align: center;
            }
            .label__menu{
              width: 100%;
              height: 10vh;
              margin-top: 5vh;
              display: flex;
              justify-content: space-evenly;
            }
                  .label__menu label{
                    width: 31%;
                    height: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 2px;
                    border-color:rgb(90, 84, 212);
                    background: rgb(255, 138, 107);
                    /*background-color: rgb(36, 193, 84);*/
                    transition: .500s all ease-out;
                    font-size: 1.1rem;
                    cursor: pointer;
                  }

            .container__menu hr{
              width: 100%;
              height: 2px;
              margin-top: 2vh;
              border: none;
              background-color: rgb(94, 184, 75);
            }
            .contenido__menu{
              width: 100%;
              height: auto;
              display: flex;
              flex-direction: column;
              position: relative;
            }
                  #radio1,#radio2,#radio3{
                    display: none;
                  }
                  .div__box{
                    width: 100%;
                    height: auto;
                    margin-top: 3vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    opacity: 0;
                    visibility: hidden;
                    transition: .500s all ease-out;
                    position: absolute;
                  }
                        #radio1:checked ~ .box__menu1,
                        #radio2:checked ~ .box__menu2,
                        #radio3:checked ~ .box__menu3{
                          opacity: 1;
                          visibility: visible;
                          transition: .500s all ease-out;
                        }
                        .cols__box{
                          width: 100%;
                          height: 35vh;
                          margin-bottom: 4vh;
                          display: flex;
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                          box-shadow: 1px 5px 5px 1px rgba(0, 0, 0, 0.2);
                        }
                              .cols__box img{
                                width: 95%;
                                height: 50%;
                                border-radius: 50%;
                                box-shadow: 1px 5px 5px 1px rgba(0, 0, 0, 0.2);
                                object-fit: cover;
                                transition: .500s all ease-out;
                              }
                              .cols__box h3{
                                width: 100%;
                                height: auto;
                                text-align: center;
                              }
                        .div__box a i{
                          display: flex;
                          font-size: 3rem;
                          align-self: flex-end;
                          color: var(--rojo);
                        }

@media screen and (max-width: 736px) and (orientation: landscape) {
  .cols__box{
    height: 50vh;
  }
        .cols__box img{
          height: 60%;
          border-radius: 10px;
        }
}


/****************************** PROMOCIONES ******************************/

/****************************** PROMOCIONES ******************************/



.promo{
  width: 100%;
  height: auto;
  margin-top:170vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e7032b;
}
      .container__promo{
        width: 85%;
        height: auto;
        margin: 10vh 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
            .container__promo h1{
              width: 100%;
              height: auto;
              text-align: center;
              color: var(--amarillo);
            }
            .box__container{
              width: 100%;
              height: auto;
              margin-top: 5vh;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
                  .box__container img{
                    width: 100%;
                    height: 28vh;
                    border-radius: 10px;
                    object-fit: cover;
                  }
                  .box__container h3{
                    margin: 3vh 0 2vh 0;
                    color: var(--amarillo);
                  }
                  .box__container ul{
                    list-style: none;
                  }
                        .box__container ul li{
                          font-size: 2rem;
                          margin-top: 1vh;
                          color: rgb(255, 255, 255);
                        }
                        .icon__promo{
                          margin-right:1vh;
                          color: var(--amarillo);
                        }
                  .box__container span{
                    margin-top: 3vh;
                    font-size: 2.3rem;
                    color: var(--amarillo);
                  }


@media screen and (max-width: 736px) and (orientation: landscape) {
  .promo{
    margin-top:240vh;
  }
        .container__promo{
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
        }
              .container__promo h1{
                margin-bottom: 2vh;
              }
              .box__container{
                width: 48%;
                margin-top: 7vh;
              }
                    .box__container img{
                      height: 40vh;
                    }
}

/****************************** GALERIA ******************************/

/****************************** GALERIA ******************************/



.galeria{
  width: 100%;
  height: auto;
  margin-top: 15vh;
  display: flex;
  justify-content: center;
}
      .container__galeria{
        width: 85%;
        height: auto;
        display: flex;
        flex-direction: column;
      }
            .container__galeria h1{
              width: 100%;
              height: auto;
              text-align: center;
            }
            .img__galeria{
              width: 100%;
              height: 26vh;
              margin-top: 5vh;
            }
                  .img__galeria img{
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    object-fit: cover;
                  }

@media screen and (max-width: 736px) and (orientation: landscape){
  .container__galeria{;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
        .container__galeria h1{
          margin-bottom: 2vh;
        }
        .img__galeria{
          width: 48%;
          height: 40vh;
        }
}


/**************************** COMENTARIOS *****************************/

/**************************** COMENTARIOS *****************************/



.coments{
  width: 100%;
  height:145vh;
  margin-top: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
            .img__coments{
              width: 100%;
              height: 100%;
              position: absolute;
            }
                  .img__coments img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
            .capa__coments{
              width: 100%;
              height: 100%;
              background: rgba(17, 15, 15, 0.7);
              position: absolute;
            }
            .texto__coments{
              width: 85%;
              height: auto;
              margin-top: 3vh;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
            }
                  .texto__coments h3{
                    color: rgb(255, 255, 255);
                  }
                  .texto__coments p{
                    margin-top: 3vh;
                    color: rgb(255, 255, 255);
                  }
                        .signo__coments{
                          margin-right:1vh;
                        }
                        .signo__coments2{
                          margin-left: 1vh;
                        }
                  .stars{
                    width: 100%;
                    height: auto;
                    margin-top: 2vh;
                    display: flex;
                    justify-content: center;
                    list-style: none;
                  }
                        .stars li{
                          width: 1.5em;
                          height: 1.5em;
                          margin-left: 2vh;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
                        }
                              .stars li i{
                                font-size: 1.5em;
                                color: var(--amarillo);
                             }


@media screen and (width:320px) and (max-height:600px){
 .coments{
   height: 165vh;
 }
}
@media screen and (width:320px) and (max-height:665px){
 .coments{
   height: 175vh;
 }
}
@media screen and (min-width:375px){
  .coments{
    height: 125vh;
  }
}
@media screen and (max-width:330px) and (max-height:580px){
  .coments{
    height: 180vh;
  }
}

@media screen and (max-height: 570px) and (orientation: landscape){
  .coments{
    height: 200vh;
  }
}


/************************************ CONTACT **********************************/

/************************************ CONTACT **********************************/



.contact{
  width: 100%;
  height: auto;
  margin: 18vh 0 10vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
      .contact h1{
        margin-bottom: 8vh;
      }
      .form__contact{
        width: 85%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
            .form__contact p{
              width: 100%;
              height: 10vh;
              margin-bottom: 4vh;
              text-align: center;
            }
                  .form__contact input{
                    width: 100%;
                    height: 100%;
                    padding-left: 2vh;
                    font-family: 'Oswald', sans-serif;
                    letter-spacing: 1px;
                    border-radius: 2px;
                    border: 2px solid var(--gray);
                  }
                  .form__contact textarea{
                    width: 100%;
                    height: 100%;
                    padding: 1vh 0 0vh 2vh;
                    resize: none;
                    font-family: 'Oswald', sans-serif;
                    letter-spacing: 1px;
                    border-radius: 2px;
                    border: 2px solid var(--gray);
                  }
                  .form__contact button{
                    width: 100%;
                    height: 80%;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 2.5rem;
                    color: var(--guindo);
                    border: none;
                    border-radius: 0px;
                    background-color: var(--rojo);
                    transition: .4s all ease-out;
                    cursor: pointer;
                  }
                        .form__contact button:hover{
                          background-color: rgba(231, 3, 43, 0.77);
                        }

@media screen and (max-width: 736px) and (orientation: landscape){
  .form__contact p{
    height: 14vh;
  }
}
/************************************ FOOTER ***********************************/

/************************************ FOOTER ***********************************/



.footer{
  width: 100%;
  height: auto;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--rojo);
}
      .box__footer{
        width: 85%;
        height: auto;
        display: flex;
        flex-direction: column;
      }
            .cont__footer{
              width: 100%;
              height: auto;
              margin-top: 3vh;
              display: flex;
              flex-direction: column;
            }
                  .cont__footer h3{
                    color: #fff;
                  }
                  .cont__footer p{
                    margin-top: 2vh;
                    color: #fff;
                  }
      .footer hr{
        width: 90%;
        height: 2px;
        margin: 3vh 0;
        background-color: var(--guindo);
        border: none;
      }
      .marca{
        width: 85%;
        height: auto;
        margin-bottom: 4vh;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
      }
            .marca h4{
              margin-top: 2vh;
              color: var(--guindo);
              }
       .media__footer ul{
         width: 100%;
         height: auto;
         display: flex;
         justify-content: center;
         list-style: none;
       }
             .media__footer ul li{
               width: 45px;
               height: 45px;
               margin-left: 2vh;
               display: flex;
               justify-content: center;
               align-items: center;
               box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
             }
                   .media__footer ul li a{
                     font-size: 30px;
                     color: #fff;
                  }