@import url(/css/menu.css);
@import url(/css/banner.css);
@import url(/css/gallery.css);
@import url(/css/services.css);
@import url(/css/cards.css);
/*@import url(/css/slide.css);*/
@import url(/css/footer.css);
@import url(/css/popup.css);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    --change: 500px;
    --change2: 500px;
    --color-bg: #0c84c5a3;
    --color-bg-peter: #F8F9F9;
    --hover-bg: rgba(15, 41, 245, .7);
    --hover-bg2: rgb(15, 41, 245);
    --color-text-primary: #031252;
    --color-text-secundary: #3a3535;
}

body{
    background: var(--color-bg-peter);
    width: 100%; height: 100vh;
    overflow-x: hidden;
}

.container{
    width: 100%;
    display: flex;
    transition: left .5s ease;
}


.margin{
    width: 15rem;
    transition: all .5s ease;
}

.activo.margin{
    width: 4.94rem;
}

.main{
    width: calc(-15rem + 100%);
    transition: all .5s ease;
}

.activo.main{
    width: calc(-4.94rem + 100%);
}

header{
    display: none;
}

@media (max-width: 412px){
    .margin{
        width: 0;
    }
    .main{
        width: 100%;
    }

    header{
        display: flex;
        background: var(--color-bg-peter);
        transition: all 1s ease-in-out;
    }

    .h .h-logo{
        padding: 10px;
        width: 80px; height: 50px;
        opacity: 1;
        transform: scale(1);
    }

    .activo.h .h-logo{
        opacity: 0;
        transform: scale(0);
    }
}

@media screen and (max-width:768px) and (min-width:413px) {
    .margin{
        width: 0;
    }
    .main{
        width: 100vw;
    }

    header{
        display: flex;
        width: 100%;
        background: var(--color-bg-peter);
        transition: all 1s ease-in-out;
    }

    header .h-logo{
        padding: 10px;
        width: 80px; height: 50px;
        opacity: 1;
        transform: scale(1);
        display: none;
    }

    .activo.h .h-logo{
        opacity: 0;
        transform: scale(0);
    }
}

/*@media screen and (max-width:1024px) and (min-width:7689px) {
    .margin{
        width: 0;
    }
    .main{
        width: 100vw;
    }

    header{
        display: flex;
        width: 100%;
        background: var(--color-bg-peter);
        transition: all 1s ease-in-out;
    }

    header .h-logo{
        padding: 10px;
        width: 80px; height: 50px;
        opacity: 1;
        transform: scale(1);
        display: none;
    }

    .activo.h .h-logo{
        opacity: 0;
        transform: scale(0);
    }
}*/