/* HAMBURGER NAVIGATION SAILING */

/* MENU BUTTON */
.hamburger-menu-button { position:absolute; display:block; width:60px; height:60px; padding:0px; z-index:100; background:#333; color:transparent; cursor:pointer; overflow:hidden; border:0; }
.hamburger-menu-button-open { top:50%; margin-top:-1px; left:50%; margin-left:-12px; }
.hamburger-menu-button-open, .hamburger-menu-button-open::before, .hamburger-menu-button-open::after { position:absolute; width:24px; height:2px; background:#fff; border-radius:0px; -webkit-transition:all 0.3s; transition:all 0.3s; }
.hamburger-menu-button-open::before, .hamburger-menu-button-open::after { left:0; content:""; }
.hamburger-menu-button-open::before { top:6px; }
.hamburger-menu-button-open::after { bottom:6px; }
.hamburger-menu-button-close { background:transparent; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
.hamburger-menu-button-close::before { -webkit-transform:translateY(-6px) rotate(45deg); transform:translateY(-6px) rotate(45deg); }
.hamburger-menu-button-close::after { -webkit-transform:translateY(6px) rotate(-45deg); transform:translateY(6px) rotate(-45deg); }

/* MENU DROPDOWN */
.ham-menu { left:0px; width:100%; height:auto; text-align:center; overflow:hidden; }
.ham-menu ul { max-height:0px; width:100%; background-color:#444; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; margin-top:60px; padding-top:0px; font-size:0; }
.ham-menu.on ul { max-height:550px; width:100%; padding:10px 0 10px 0; background-color:#444; }
.ham-menu ul li { display:block; padding-top:0px; }
/* .ham-menu ul li:hover { background-color:#5EA4A4; } */
.ham-menu ul li:first-child .ham-menu ul li a { padding-left:0px; }
.ham-menu ul li a { padding:8px; display:block; background-color:transparent; color:#999; text-transform:uppercase; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; font-size:18px; }
.ham-menu ul li.active a, .ham-menu ul li a:hover { background-color:transparent; color:#fff !important; } 

/* 48em = 768px */
@media (min-width:1024px) {
.hamburger-menu-button { display:none; }
.ham-menu { clear:none; width:100%; height:60px; left:0; right:0; }
.ham-menu ul { text-align:center; padding:0px; margin:0; background-color:transparent; }
.ham-menu.on ul { padding:0px; background-color:transparent; }
.ham-menu ul li { display:inline-block; list-style:none; }
.ham-menu ul li a { color:#999; padding:18px 24px 18px 24px; }
.ham-menu ul li.active a, .ham-menu ul li a:hover { background-color:transparent; color:#fff !important; }
hr.menu { display:none; }
}