@font-face {
    font-family: myFont;
    src: url(fonts/VAG-HandWritten.otf);
}

body{background-color: #161515; color: #ddd; margin: 0;}

/* Menu navigation */
.logo{font-size: 20px; position: absolute; left: 20px;top:-3px; padding-left: 20px;z-index: 1;}
.logo figure{width: 340px;}
.logo figure a{display: inline;}
.logo figure img{width: 100%;}
.topnav {
   
    box-sizing: border-box; 
    background-color: #333;
    text-align: right; 
    padding-right: 100px;
    height: 54px;
     z-index: 1;
    }
  
.topnav a {color: #f2f2f2;text-align: center;padding:0px 10px 0;text-decoration: none;font-size: 17px; margin-top: 20px; border-right: 2px solid; line-height: 17px;}
.topnav a:last-child {border-right: none;}
.un {display: inline-block;}
.un:after {content: '';height: 1px;display: block;background: #f2f2f2;transition: 300ms;width: 0px;}
.un:hover:after {width: 100%;}
.active:after{content: '';height: 1px;display: block;background: #f2f2f2;width: 100%;}

.topnav .icon {display: none;}
.hidden {display: none;}

/* Responsive */
@media screen and (max-width: 1200px) {
.logo{font-size: 24px; line-height: 90px;padding-left: 0;}  
.logo figure{width: 450px;} 
.topnav{background-color: #333;  height: 110px; padding-right: 20px;}
.topnav a {display: none; border-right: none}
.topnav a.icon {float: right;display: block; margin-top: 15px;}
/* RESPONSIVE MENU */
.topnav.responsive {position: relative;height: auto;padding: 20px; border-right: none}
.topnav.responsive .icon {position: absolute;right: 0;top: 0}
.topnav.responsive a {float: none;display: block;text-align: center; font-size: 40px;}
.active:after{display: none}
.un:after {display: none}
a.un{padding-bottom: 30px; font-size: 20px;}
.fa{ font:normal normal normal 14px/2 FontAwesome; font-size: 40px;margin-right: 20px;}
}
  

@media screen and (min-width: 1200px) {
    /* .logo{display: block;} */
}