:root {
    --hight-navbar: 15vh;   
}

.bg-arena {
    background-color: #e1c7ae;
}

.img-logo{
    height: calc(var(--hight-navbar, 10vh)*0.75);
}   

#nav_primary {
    height: var(--hight-navbar);
}

.snap-container {
    height: 100vh;
    overflow: auto;  
    scroll-snap-type: y mandatory;  
}

.snap-section {
    scroll-snap-align: start;
    scroll-margin: var(--hight-navbar, 10vh);
    height: calc((100vh - var(--hight-navbar, 100vh))/2);
    width: 100vw;
}

.snap-section .col {
    height: 100%;
    width: 100%;
}

@media (min-width: 768px) { 
    :root {
        --hight-navbar: 15vh;
    }
    #nav_primary{
        opacity: 0;
        transform: translate(0, -5vh);
        transition: all 0.5s;
        height: var(--hight-navbar, 10vh);
    }
    #nav_primary.visible{
        opacity: 1;
        transform: translate(0, 0);
    }
    .img-logo {
        height: var(--hight-navbar, 10vh);
    }
    .snap-section{
        height: calc(100vh - var(--hight-navbar, 100vh));
    }
    .snap-section#header{
        height: 100vh;
    }
}

@media (max-width: 767px){
    .snap-container:nth-child(2){
        margin-top: var(--hight-navbar);
    }
}