.top-menu {
    position: fixed;
    top: -65px;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: #00bcf1;
    box-shadow: 0 2px 5px 1px rgba(51, 51, 51, 0.5);
    transition: all .5s cubic-bezier(0.250, 0.250, 0.750, 0.750);
}
 
.top-menu.active {
    top: 0;
}
 
.top-menu .components {
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
}
 
.top-menu .logo {
    float: left;
    width: 20%;
    text-align: left;
}
 
.top-menu .logo a {
    display: inline-block;
    width: 123px;
    height: 40px;
    background: url(../img/logo-1.png) left center no-repeat;
    border: 0;
    text-indent: -999999px;
}
 
.top-menu .navigation {
    float: left;
    width: 70%;
    text-align: right;
}
 
.top-menu .navigation li {
    display: inline-block;
}
 
.top-menu .navigation li a {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    border: 0;
}
 
.top-menu .navigation li a:hover,
.top-menu .navigation li a:focus {
    color: #ccc;
    border: 0;
    outline: 0;
}

/* Hamburger button code */
 
.hamburger-button {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
}
 
.hamburger-button button {
    position: ;
    top: 10px;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    vertical-align: middle;
    z-index: 999;
}
 
.hamburger-button button:focus {
    outline: 0;
}
 
.hamburger-button button span {
    display: block;
    width: 80%;
    height: 2px;
    margin: 5px auto;
    background: #001f60;
    transition: all .8s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
 
.hamburger-button button:hover span,
.hamburger-button button:focus span {
    background: #001f60;
}
 
/* rotate first span */
.hamburger-button button span:first-of-type {
    transform: rotate(45deg) translate(5px, 5px);
}
 
/* hide second span */
.hamburger-button button span:nth-of-type(2) {
    opacity: 0;
}
 
/* rotate third span */
.hamburger-button button span:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px);
}
 
.hamburger-button button.menu-closed span {
    transform: none;
    opacity: 1;
}

@media (min-width: 992px) and (max-width: 1199px) {
 
    .top-menu .components {
        max-width: 992px; padding-left: 15px; padding-right: 15px;
    }
 
    .hamburger-button { max-width: 992px; }
    .hamburger-button button { right: 15px; }
     
}
 
@media (min-width: 768px) and (max-width: 991px) {
 
    .top-menu .components {
        max-width: 768px; padding-left: 15px; padding-right: 15px;
    }
 
    .hamburger-button { max-width: 768px; }
    .hamburger-button button { right: 15px; }
 
}
 
@media (max-width: 767px) {
     
    .top-menu { top: 0; }
 
    .top-menu.active {
        top: -300px;
        transition: all 1.2s cubic-bezier(0.250, 0.250, 0.750, 0.750);
    }
 
    .top-menu .components { max-width: 100%; padding-top: 0px; }
    .top-menu .logo { float: none; width: 100%; text-align: center; }
    .top-menu .navigation { float: none; width: 100%; text-align: center; }
 
    .hamburger-button { width: 40px; }
 
    .hamburger-button button span:first-of-type { transform: none; opacity: 1; }
    .hamburger-button button span:nth-of-type(2) { transform: none; opacity: 1; }
    .hamburger-button button span:last-of-type { transform: none; opacity: 1; }
 
    .hamburger-button button.menu-closed span:first-of-type {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-button button.menu-closed span:nth-of-type(2) {
        opacity: 0;
    }
    .hamburger-button button.menu-closed span:last-of-type {
        transform: rotate(-45deg) translate(5px, -5px);
    }
 
    .page-content { padding-top: 80px; padding-bottom: 60px; }
 
}