:root{
    --color-principal: #0072AF;
    --color-secundario: #F8C446;  
    --color-terciario: #1E2647;
}
/*Menu*/
.container__menu{
    max-width: 1298px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.logo{
    height: 100%;
    display: flex;
    align-items: center;
}

.logo img{
    width: 50px;
}

.menu{
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.text-shadow, .sombra-texto{
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.menu ul{
    display: flex;
}

.menu ul li{
    list-style: none;
    margin-left: 10px;
}

.menu ul li a{
    text-decoration: none;
    font-size: 16px;
    color: var(--color-principal);
    padding: 10px;
    transition: all .3s ease;
}

.menu ul li a:hover, #activo{
    background: var(--color-secundario);
    border-radius: 50px;
}

.menu nav img{
    display: none;
}

.menu #btn_menu{
    display: none;
}

/*Menu*/

.bg-header{
    background: url('../img/bg-header.jpg') no-repeat center;
    background-size: cover;
}

.bg-gris{
    background: #F6F6F6;
}
.bg-hero{
    background-size: cover;
    background-position: center;
}
.bg-empresas{
    background-image: url('../img/bg-empresas.jpg');
}
.bg-ecommerce{
    background-image: url('../img/bg-ecommerce.png');
}
.bg-registra{
    background-image: url('../img/bg-registra-tu-comercio.png');
}
.bg-head-repartidor{
    background-image: url('../img/bg-head-repartidor.jpg');
}
.btn-b-dark {
    background-color: #1E2647;
}
.btn-b-dark:hover, .btn-b-dark:focus {
    background-color: #1e2647c0;
}
.servicios{
    z-index: 1;
}
ul.lista-check li{
    list-style: url('../img/icono-check.svg');
    line-height: 30px;
    margin-bottom: 15px;
}
.imagen{
    transition: all .5s ease;
}

.imagen:hover {
    filter: sepia(100%);
}
.text-third{
    color: var(--color-terciario)
}

/*Menu responsive*/
@media screen and (max-width: 720px){

    .menu nav{
        position: fixed;
        top: 0;
        right: -300px;
        background: white;
        width: 300px;
        height: 100vh;
        padding: 40px 15px;
        z-index: 1000;
        transition: all 300ms;
    }

    .menu ul{
        flex-direction: column;
        margin-top: 40px;
    }

    .menu ul li{
        margin-top: 30px;
        margin-left: 0;
    }

    .menu ul li a{
        color: var(--color-principal);
    }

    #activo{
        background: none;
        padding: 0px;
        border-radius: none;
        color: var(--color-principal);
    }

    .menu nav img{
        display: block;
        width: 60px;
    }

    #back_menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        display: none;
    }

    .menu #btn_menu{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.1);
        font-size: 24px;
        border-radius: 50px;
        cursor: pointer;
        transition: all 300ms;
    }

    .menu #btn_menu:hover{
        background: rgba(255, 255, 255, 0.2);
    }
}
/*Menu responsive*/