.vv-burger { position:fixed; top:5%; right:5%; width:20px; height:20px;cursor:pointer; }
.vv-close { position:absolute; top:5%; right:5%; width:20px; height:20px;cursor:pointer; }
.vv-logo { position:fixed; top:2%; left:1%; width:80px; height:80px;cursor:pointer; }
.vv-menu { position:fixed; top:0%; left:100%; width:90%; height:100%; transition:0.25s ease-out; background:white; }
.vv-menu--open { left:10%; }

.vv-mbg { 
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120px;
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 0%);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .vv-logo { width:50px; height:50px; }
    .vv-burger { top:3.5%; width:30px; height:30px; }
    .vv-close { top:2%; width:25px; height:25px; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .vv-burger { top:2%; width:50px; height:50px; }
    .vv-close { top:2%; width:50px; height:50px; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .vv-burger { top:2%; width:50px; height:50px; }
    .vv-close { top:2%; width:50px; height:50px; }
}