@media (max-width: 768px) {

.nav .logo svg {
    /* height: 50px; */
    width: 100px;
    fill: var(--text);
}

.nav {
    padding: 5%;
    padding-inline: 5%;
}

.nav .nav-elements {
    display: flex;

    width: 25%;

    justify-content: right;
    align-content: center
}

.nav .nav-elements button{
    display: none;
}

.nav .nav-elements .menu {
    display: block;
}

.nav .nav-elements button:hover{    
    background-color: var(--butt-h);
    border-bottom: 5px solid var(--text);
}

.nav .nav-elements button svg{
    font-size: 32px;
    font-size: 32px;
    fill: var(--text);
}





.hero-images .control {
    display: none;
}

.content {
    width: 80vw;
    height: 200vh;

    padding-top: 10vh;
    margin-inline: auto;
}








}