@media screen and (max-width: 576px) {
    /*hamburger menu*/
    .hamburger-menu { z-index:2; position: relative; top: 0px; right: 20px; width: 60px; height: 60px; cursor: pointer; }
    .bar, .bar:after, .bar:before { width: 40px; height: 4px; }
    .bar { position: relative; transform: translateY(25px); background: rgba(65, 181, 163, 1); transition: all 0ms 300ms; }
    .bar.animate { background: rgba(255, 255, 255, 0); }
    .bar:before { content: ""; position: absolute; left: 0; bottom: 15px; background: rgba(65, 181, 163, 1); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
    .bar:after { content: ""; position: absolute; left: 0; top: 15px; background: rgba(65, 181, 163, 1); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
    .bar.animate:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);; }
    .bar.animate:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);; }
    
    /*nav menu*/
    .show { left:0%; opacity:1; }
    .hide { opacity:0; left:100%; display: none; }
    .mobile-nav { background:rgba(52,73,94,0.9); position:absolute; top:0; width:100vw; height:100vh; text-align:center; transition: .2s ease; }
    .mobile-nav ul{ position:relative; top:50%; transform: translateY(-50%); list-style:none; padding-left: 0; }
    .mobile-nav a { text-align:center; font-size:4vw; color:#ffffff; opacity:0; transition:opacity .9s ease-in-out; }
    .mobile-nav.show a { text-align:center; font-size:17pt; color:#ffffff; opacity:1; text-decoration: none; font-weight: 700; }
    .mobile-nav a:hover { color:#2980b9; }
}