:root{

    /*COLORES*/
    
        --color0: #F3F3F3;
        --color1: #00BAD8;
        --color2: #006F9B;
        --color3: #003A5A;
        --color4: #F5B57C;
        --color5: #EEA468;
        --color6: #E39558;
        --color7: #C2C3C9;
        --color8: #7C7C80;
        --color9: #5B5B5F;
        --color10: #E653DE;
        --color11: #A056F0;
        --color12: #5961D9;
        --color13: #1c8878;
}
/*TAMAÑP CELULAR*/
@media (min-width:360px) and (max-width:767px){
    /*Boton*/

    html{
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
        font-size: var(--fsize);

    }
    
    *,
    *:before,
    *:after{
        box-sizing: inherit;
    }

    
    body{
        display: flex;
        flex-direction: column;
        background-color: var(--color0);
        
    }

    /*MENU HAMBURGUESA*/
    .panel{
        position: fixed;
        z-index: 998;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--modal-color);
        color: var(--color10);
        transition: transform 0.3s ease;
        transform: translate(0, -100%);
    }
    .panel ul{
        list-style: none;
        padding-top: 15%;
        
    }
    .panel ul li{
        margin-bottom: 7vh;
        text-align: center;
    }
    .panel ul li a{
        margin-right: 20%;
        color: var(--color1);
        text-decoration: none;
        font-size: 30px;
    }
    .panel.is-active{
        transform: translate(0,0) ;
    }
    
    .panel-btn {
        position: sticky;
        z-index: 997;        
        left: 100vh;
        top: 0vh;
        width: 70px;
        height: 20px;
        height: 3rem;      
        justify-content: center;
        align-items: center;
        background-color:  var(--color0);        
    }
    
    
    .hamburger-box .hamburger-inner:after{
        background-color: var(--color12)
    }

    .hamburger-box .hamburger-inner{
        background-color: var(--color12)
    }

    .hamburger-box .hamburger-inner:before{
        background-color: var(--color12)
    }
    
    .container-wsp{
        position: sticky; 
        top: 80vh;           
        left: 100vw;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        padding: 0;
        margin-bottom: 1rem;
        display:flex;
        justify-content: center;
        align-items: center;
        box-shadow: 10px 10px 25px 1px #45C355;
    }
    /*CABECERA*/
    header{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .mainMenu ul{
        display: none;
    }
    /*SLIDER*/

    .slider {
        margin-top:0%;
        margin-bottom: 5%;
    }
    
    #description{
        font-size: 55px;
        background-color:  var(--color0);
        margin-bottom: 0%;
        height: 50%;
    }
    #description h2{
        color: var(--color13);        
        margin-top: auto;
        font-family: 'Poppins', sans-serif;
        font-size: 30px;
    }
    body #description p{
        color: var(--color12);
        font-family: 'Poppins', sans-serif;
        font-size: 19px;
        text-align: justify;        
    }
    /*UBICATION*/

    #ubication{
        background-color: var(--color12);
        height: auto;
        margin-bottom: 0px;
    }

    #ubication h2{
        color: var(--color0);
    }

    #ubication iframe{
        border-radius:  10px;
        box-shadow: 10px 10px 25px 1px var(--color3);
    }
    #ubication #mapa{
        width: 130%;
        margin-left: -15%;
    }

    /*Servicios*/
    .prevServices{
        background-color: var(--color1);
        height: 150vh;
    }

    .prevServices .prevTratamientos img{
        height: 50vh;
        width: 50vh;
    }
    .prevServices h2{
        color: var(--color0)
    }

    .prevServices h3{
        color: var(--color0);
        margin-left: 2vw;
        text-align: center;
    }
    /*FOOTER*/

    footer{
        height: 50vh;
    }
    footer ul{
        margin-right: 15%;
        justify-content:space-between;
    }

    /********ABOUT***********/
    .mision{
        width: 90vw;
        height: auto;
        margin-right: auto;
    }

    .vision{
        width: 90vw;
        height: auto;
        margin-right: auto;
    }

    /********CONTACT*********/
    #socialCards{
        height: 150vh;
        background-color: var(--color0);
    }

    .cards{
        width: 40vw;
        height: 50vh;
        margin-right: auto;
    }

    #socialCards h2{
        font-size: 35px;
        color: var(--color13);
    }
}