/*--HEADER MOBILE--*/
    #headermobile{
        display: none;
        background: var(--turquesa);
        justify-content: space-around;
        align-items: center;
        min-height: 12vh;
    }
    .logo{
        width: 9rem;
    }

    .logo img{
        width: 5rem;
        position: absolute;
        top: 0.5rem;
    }

    .nav-menu{
        display: flex;
        width: 48%;
        z-index: 1;
    }

    .nav-menu div{
        color: white;
        margin: 2rem 0 0;
    }
    .reserveMenu {
        padding: 0.4rem 1rem !important;
    }

/*--BURGER--*/
    #burger{
        display: none;
        cursor: pointer;
    }

    #burger div{
        width: 25px;
        height: 3px;
        margin: 5px;
        background-color: white;
        transition: all 0.3s ease;
    }
    
@media only screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    /*--HEADER--*/
            #header{
                display: none;
                }   

    /*--HEADER MOBILE--*/
        #headermobile{
            display: flex;
            position: fixed;
            z-index: 1;
            width: 100%;
            top: 0;
        }
        .nav-menu{
            position: fixed;
            right: 0px;
            height: 92vh;
            top: 12vh;
            background-color: var(--azul);
            flex-direction: column;
            align-items: center;
            transform: translateX(100%);
            transition: transform 0.5s ease-in;
        }
        .nav-menu div{
            opacity: 0;
        }
        #burger{
            display: block;
            margin-left: 15%;
        }

        .toggle .line1{
            transform: rotate(-45deg) translate(-5px,6px);
        }

        .toggle .line2{
            opacity: 0;
        }

        .toggle .line3{
            transform: rotate(45deg) translate(-5px,-6px);
        }

        .nav-active{
            transform: translateX(0%);
        }
        .navdisabled{
            transform: translateX(100%);
            transition: tranform 0.5s ease-in;
        }

        @keyframes navMenuFade {
            from{
                opacity: 0;
                transform: translateX(50px);
            }
            to{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    
    /*--SLIDE--*/
        #banner {
            margin-top: 12vh;
        }

    /*--RESERVE--*/
        #reserve {
            z-index: 0 !important;
            width: 90%;
            padding: 1rem .6rem;
            margin-bottom: 0;
        }
        #reserve .step-title {
            font-size: 1.3rem;
            padding: 1rem;
        }
        #reserve-cantidad {
            justify-content: space-evenly;
            flex-direction: column;
        }
        .reserve-ticket {
            text-align: left;
            border-left: 5px solid var(--verde);
            padding: 0 0 0 0.5rem;
            margin: 0 0 1rem 0;
        }
        #reserve-step2 input {
            width: 100%;
        }
        #reserve-step1 #observ {
            font-size: 1rem;
        }  
        #reserve h2 {
            font-size: 1.3rem;
            line-height: 1.2;
        }
        .reserve-ticket p {
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1;
        }
        #reserve h4 {
            text-align: center;
            font-weight: 300;
            margin-bottom: 0.5rem;
        }
        #observ p {
            margin: 0.5rem 0;
            line-height: 1.1;
            font-weight: 300;
            text-align: center;
        }
        #reserve svg {
            font-size: 3rem;
        }
        .wait svg {
            margin-right: 0;
        }
        .wait p {
            line-height: 1;
        }
        #reserve-step3 input {
            width: 100%;
        }

    /*--FOOTER--*/

        .main-block-sm {
            padding: 0rem;
        }    
        
        footer h1 {
            font-size: 1.5rem !important;
            margin-top: 0.4rem;
            padding-top: 1rem;
        }

        #auspiciantes img {
            width: 65%;
            padding: 0.5rem;
        }

        #auspiciantes{
            display: grid;
            grid-template-columns: repeat(2, 1fr) !important;
            justify-items: center;
        }

    /*--CONTACT--*/
        #contact {
            flex-direction: column;
        }
        #contact-info {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
        }

        #contact-info p {
            padding: 0.5rem 1rem 0;
            font-size: 1rem;
            font-weight: 500;
            width: 100%;
        }

        #contact-info p img {
            width: 10%;
        }

        #contact-redes {
            width: 54%;
            margin-top: 1.5rem;
        }

        #contact-redes img {
            width: 75%;
            border: 1px solid #fff;
        }

    /*--MAPS--*/

        #map img {
            padding: 1rem 0 0 0;
        }

        #map iframe {
            height: 13rem !important;
        }

        #map h3 {
        text-align: center !important;
        }

        #map-text {
            padding: 2rem 1rem;
        }

        #map-text .flex{
            display: block;
        }

        #map { 
            display: block;
        }

    /*--SERVICES--*/
        #services{
            padding: 0;
        }    
        .service{
            margin: 0rem !important;
        }
        #free-services {
            margin: 1rem;
            display: block;
        }
        #free-services div {
            padding: 0.4rem 1rem;
        }
        .free-img-text {
            padding: 0 !important;
        }
        .service-img-top {
            position: relative;
        }
        #free-services-txt {
            padding-top: 0 !important;
            padding-bottom: 2rem !important;
        }
        #aditional-services{
            display: block;
            margin: 1rem;
        } 
        #aditional-services div {
            padding: 0.4rem 1rem;
        }
        #free-services img {
            width: 85% !important;
            top: 0;
            margin: 0 auto 2rem;
            display: block;
        }
        .service-img {
            padding-bottom: 0 !important;
        }
        .service-img > div {
            margin-top: 0 !important;
        }
        #free-services, #aditional-services {
            padding-top: 1rem;
        }
        .services-mascota {
            display: none !important;
        }
        #aditional-services .service-img-top {
            width: 85% !important;
            top: 0;
            margin: 0 auto;
            display: block;
        }

    /*--GALLERY-IMG--*/
        #gallery-container{
            z-index: 0;
        }

        #gallery-img {
            grid-template-columns: repeat(2, 1fr) !important;
        }

    /*--FAQS--*/
        #faqsDsk-main {
            display: none;
        }
        #faqsMobile-main {
            display: block;
        }
        #faqs-answers {
            font-size: 1.2rem;
        }
        #faqs-questions-content {
            flex-wrap: wrap;
            margin: 0rem 2rem;
        }

    /*--INFO--*/
        #boxes-contaier {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 1rem;
        }
        #boxes{
            padding: 1rem 1rem;
        }

        .md-content{
            width: 100%;
            margin: -0,6 !important;
        }

        .modal-covid {
            grid-template-columns: 30% 70% !important;
        }

        .modal-content {
            padding: 0rem 1rem;
            display: grid;
            grid-template-columns: 40% 60%;
        }
        .box-item {
            width: 75%;
            margin: 0 auto 1rem;
        }
        .box-item img {
            width: 82%;
            margin: 1rem 5% -2.5rem;
        }

        .box-item h3 {
            margin: 1.5rem 0 0;
            padding: 1.7rem 0 .5rem 0 !important;
            height: 83px;
        }

    /*--ATTRACTION--*/
        #sub-attraction {
            padding: 1rem 1rem 4rem;
        }

        #services p {
            font-size: 1rem;
            font-weight: 500;
            line-height: 1rem;
            margin: 1rem 0rem;
            color: var(--azul);
        }

        #attraction #icons {
            grid-template-columns: repeat(1, 1fr) !important;
            grid-template-rows: repeat(1, 1fr);
            padding: 0rem;
            grid-gap: 1.5rem;
        }

        .icon-item {
            padding: 0.5rem 1.5rem 2.5rem;
            grid-template-rows: repeat(1, 1fr);
        }
        .icon-item img {
            padding: 0.5rem 0.5rem;
        }
        .attraction-img{
            grid-template-columns: 70% 30%;
        }
        #attraction p{
            font-size: 1rem;
        }

        .pools{
           margin: 1rem;
        }

    /*--ABOUT--*/ 

        #about{
           padding: 1rem 1rem;
        }
        h1 {
            font-size: 1.5rem !important;
            padding: 3rem 1rem 1.5rem;
        }

        h3 {
            padding: 0rem 1rem !important;
            font-size: 1rem !important;
            font-weight: 300;

        }

        .about-box{
            padding: 1rem !important;
            margin: 2rem 1rem;
            font-size: 1.2rem !important;
            line-height: 1.3rem;
        }

        #about img{
            display: none;
        }

        .about-list h3{
            font-size: 1.3rem !important;
        }  

} /*--Cierre MediaQ--*/