/*General*/
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@font-face {
    font-family: 'chulapa';
    src: url('../font/Chulapa-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

ul,
li {
    text-decoration: none !important;
    display: flex !important;
    padding: 0px !important;
    margin: auto !important;
}

a {
    text-decoration: none !important;
    color: initial !important;
    transition: 1s;
}

body {
    text-align: center !important;
    font-size: 20px;
    width: 100%;
    margin: auto !important;
    color: black !important;
    font-family: 'Noto Serif Makasar', serif !important;
    overflow-x: hidden;
}

/*Header*/
.encabezado {
    text-shadow: 0px 0px 4px rgb(20, 20, 20);
    display: flex;
    position: absolute;
    z-index: 200;
    font-size: 26px;
    font-family: 'chulapa', sans-serif;
    font-weight: bold;
    font-feature-settings: "clig", "dlig", "hlig", "liga", "rlig" !important;
}

.encabezado a:hover {
    color: #8f133a !important;
    transform: scale(160%) !important;
}

/*Logo de la Chulapa*/
.logo {
    z-index: 10 !important;
    box-shadow: 0px 0px 4px black;
    width: 20%;
    margin: 0px;
    border-radius: 0px 0px 20px 0px;
}
.logo a:hover{
    transform: none !important;
}

.logo img {
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 20px 0px;
}

/*Menú*/
#nav {
    width: 60%;
    display: flex;
    align-items: center;
    font-size: 1.4vw;
}

.menu {
    width: 100%;
    color: white !important;
}

.menu ul {
    display: flex;
    justify-content: space-evenly;
}

.menu a {
    color: white !important;
}

/*Botón de reservar*/
.reservar {
    z-index: 20 !important;
    box-shadow: 0px 0px 4px black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    background-color: #8f133a;
    border-radius: 0px 0px 0px 20px;
    text-shadow: none !important;
}

.reservar a {
    font-size: larger;
    font-weight: bold;
    color: white !important;
}

.reservar a:hover {
    color: white !important;
    transform: none !important;
}

/*Burger menú*/
.menu-bar {
    
    display: none;
}
.menu-combo{
    
    display: flex;
    width: 100%;
}
#menu-texto {
    display: block;
    font-size: 30px;
    font-family: 'chulapa', sans-serif;
    font-weight: bold;
    text-align: right;
    font-feature-settings: "clig", "dlig", "hlig", "liga", "rlig" !important;
    color: white !important;
    margin: auto;
    text-shadow: none !important;
    width: 50%;
}

.menu-bar nav{
    display: flex;
    align-items: center;
    width: 50%;
}
#menuToggle {
    margin-left: 20px;
    margin-top: 5px;
    display: block;
    position: absolute;
    z-index: 19;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 160px;
    margin-left: -110px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 20;
    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: white;
    border-radius: 3px;
    z-index: 19;
    transform-origin: 4px 0px;
    transition: transform 0.6s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.6s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.6s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: white;
    transition: 0.6s;
}

#menuToggle input:hover~span {
    transition: 0.6s;
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    visibility: hidden !important;
    border-radius: 0 0 20px 0;
    position: absolute;
    margin-left: 0px !important;
    width: 260px;
    top: 60px;
    left: -400px;
    background-color: #8f133a;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#menuToggle input:checked~#menu {
    visibility: visible !important;
    transform: translateX(230px);
}

.menu-item {
    width: 80%;
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto 16px auto;
    text-shadow: none !important;
}


#menu li {
    padding: 10px 0;
}

#menu a {
    font-size: 22px;
}

#menu a:hover{
    transform: none !important;
    color: white !important;
}
.menu-bar-btn {
    margin: 20px 0px;
}


/*Carousel*/
.carousel {
    position: absolute;
    box-shadow: 0px 0px 4px black;
    height: 70vh;
}

.carousel-inner {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/*Separador*/
.mini {
    width: 20% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*Cuerpo de la pestaña*/
.cuerpo h2, h3 {
    font-family: 'chulapa', sans-serif;
    font-feature-settings: "clig", "dlig", "hlig", "liga", "rlig" !important;
    color: #8f133a !important;
    text-shadow: 3px 3px 4px gray;
}

.cuerpo .texto {
    margin: auto;
    width: 80%;
    text-align: center;
}

.video video{
    box-shadow: 0px 0px 4px black;
    width: auto; 
    height:26vw;
}

.localizacion {
    text-align: center;
    display: flex;
    width: 80%;
    margin: auto;
}

.localizacion .texto {
    width: 50%;
    justify-content: end;
}

.localizacion h3 {
    margin: auto;
}

.localizacion .mini {
    width: 50% !important;
}

.localizacion .texto p {
    text-align: center;
    margin: auto;
    width: 80%;
}

.localizacion .map {
    width: 50%;
}

.localizacion .map iframe {
    box-shadow: 0px 0px 4px black;
}
/*Flecha abajo*/
#flecha-abajo{
    margin-bottom: 46px;
    color: white !important;
}
/*Flecha arriba*/
#flecha-arriba {
    float: right;
    margin-right: 40px;
    color: #8f133a;
}

/*Pie de página*/
footer {
    box-shadow: 0px 0px 4px black;
    margin-top: 20px;
    background-color: #8f133a;
    color: white;
    padding-bottom: 10px;
}

footer img {
    width: 20%;
    min-width: 300PX;
}

.redes{
    margin-top: -20px;
}
.redes i {
    color: white;
    font-size: 30px;
    margin: 0px 10px;
}
.datos a{
    color: white !important;
    text-decoration: underline !important;
}
/*Imagen de las portadas de las demás pestañas*/
.imagen_portada {
    display: flex;
    align-items: end;
    justify-content: center;
    height: 70vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 0px 4px black;
}

/*MQ*/
@media screen and (max-width:1400px){
    .logo{
        width: 25%;
    }
    #nav{
        width: 50%;
    }
    .reservar{
        width: 25%;
        font-size: 2vw;
    }
    .encabezado a:hover {
        transform: scale(140%) !important;
    }
    .reservar a:hover{
        transform: none !important;
    }
    .video video{
        height:30vw !important;
    }
    .localizacion .map iframe{
        width: 500px !important;
    }
}
@media screen and (max-width:1200px) {
    .logo {
        width: 30%;
    }
    nav {
        width: auto;
    }
    .menu {
        font-size: 1.4vw;
    }
    .reservar {
        font-size: 2.2vw;
        width: 30%;
    }
    .encabezado a:hover {
        transform: scale(126%) !important;
    }
    .reservar a:hover{
        transform: none !important;
    }
    .video video{
        height:34vw !important;
    }
    .localizacion .map iframe{
        width: 400px !important;
        height: 400px !important;
    }
}

@media screen and (max-width:992px) {
    .encabezado{
        position: relative;
        width: 100%;
    }
    .logo{
        min-height: 100px;
        width: 40%;
        box-shadow: none;
        background-color: #8f133a;
        border-radius: 0px !important;
    }
    #nav{ 
        display: none !important;
    }
    .menu-bar {
        display: flex;
        justify-items: center;
        align-items: center;
        background-color: #8f133a;
        width: 30%;
    }
    .reservar {
        width: 30%;
        border-radius: 0px !important;
        box-shadow:  none;
    }
    .reservar a{
        font-size: 30px;
    }
    .carousel{
        height: fit-content;
    }
    .carousel-item img{
        height: 70vh;
    }
    .video video{
        height:38vw !important;
    }
    .mini {
        width: 40% !important;
    }
    .localizacion{
        flex-wrap: wrap;
    }
    .localizacion .texto {
        width: 100%;
    }
    .localizacion .texto p {
        width: 100%;
        text-align: center;
    }
    .localizacion .map{
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .localizacion .map iframe{
        width: 600px !important;
        height: 400px !important;
    }
}
@media screen and (max-width:768px) {
    .logo{
        width: 60%;
    }
    .logo img{
        border-radius: 0px !important;
    }
    .reservar {
        width: 20%;
    }
    .reservar a{
        margin-right: 20px;
        font-size: 3.2vw;
    }
    .reservar i{
        font-size: larger;
        width: 100%;
    }
    .menu-bar{
        width: 20%;
    }
    #menu-texto{
        display: none;
    }
    .menu-bar nav{
        margin-left: 20px;
        width: 100%;
        justify-content: center;
    }
    #menuToggle {
        margin-left: 0px;
    }
    #menuToggle input {
        width: 50px;
        margin-left: -2px;
    }
    #menuToggle input:checked~#menu {
        transform: translateX(330px);
    }
    .carousel-item img{
        height: 60vh;
    }
    .carousel-indicators{
        margin-bottom: 1% !important;
    }
    .video video{
        height:42vw !important;
    }
    #flecha-arriba{
        float: none;
        margin: auto;
    }
    .localizacion .map iframe{
        width: 400px !important;
        height: 300px !important;
    }
    
}
@media screen and (max-width:576px) {
    .logo{
        width: 70%;
    }
    .reservar {
        width: 15%;
    }
    .reservar a{
        margin-right: 30px;
        font-size: 3.4vw;
    }
    .menu-bar{
        width: 15%;
    }
    .menu-bar nav{
        margin-left: 30px;
    }
    #menuToggle input:checked~#menu {
        transform: translateX(350px);
    }
    .carousel-item img{
        height: 50vh;
        width: 132% !important;
        margin: auto;
    }
    #foto3{
        width: 100% !important;
    }
    .video video{
        height:48vw !important;
    }
    .localizacion .map iframe{
        width: 100% !important;
    }
    .imagen_portada {
        height: 50vh;
    }
}