section {
    display: block;
    width: 100%;
}

.header {
    width: 100%;
    padding: 8px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(41, 47, 54, 1);
    will-change: top;
    -webkit-transition: box-shadow .3s, top .3s;
    -o-transition: box-shadow .3s, top .3s;
    transition: box-shadow .3s, top .3s
}

.header__logo,
.header__nav {
    position: relative
}

.nav-wrapper {
    width: 100%;
}

.main-nav {
    float: right;
    text-align: right;
}

.main-nav li {
    display: inline-block;
}

.nav>li>a {
    display: inline-block;
    padding: 10px 15px;
    border: 0;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: rgba(78, 205, 196, 0.1);
}

.header__nav--active .main-nav {
    left: 0;
    right: 0;
    padding-right: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
    filter: alpha(opacity=100);
    background: rgba(41, 47, 54, .98);
    top: 10px;
}

@media (max-width: 767px) {
    .main-nav {
        position: fixed;
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -ms-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        -webkit-transition: transform .3s, opacity .3s;
        -o-transition: transform .3s, opacity .3s;
        transition: transform .3s, opacity .3s;
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        transform-origin: top right;
        opacity: 0;
        filter: alpha(opacity=0);
        top: 0;
        z-index: 10;
        height: 100%;
        padding: 70px 28px;
        width: 100%;
    }
}

.header__nav--active .main-nav li {
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

@media (max-width:991px) {
    .header {
        padding: 8px 10px
    }
}

.headroom--pinned {
    top: 0
}

.headroom--unpinned {
    top: -80px
}

.headroom--not-top {
    box-shadow: 0 0 15px rgba(0, 0, 0, .1)
}


.header__logo {
    line-height: 100%;
    font-family: Gotham;
    font-size: 22px;
    margin: 0;
    font-weight: 700;
    float: left;
    padding: 6px 0;
}

.header__logo,
.header__logo:focus,
.header__logo:hover {
    color: #e64a19;
}

.header__nav:after,
.header__nav:before {
    content: " ";
    display: table
}



.header__nav--active .header__nav__toggle {
    position: fixed;
    top: 8px;
    right: 25px
}

.header__nav--active .header__nav__toggle>i:first-child {
    transform: rotate(45deg);
    top: 5px
}

.header__nav--active .header__nav__toggle>i:last-child {
    transform: rotate(-45deg);
    top: -2px
}

.header__nav__toggle {
    width: 40px;
    cursor: pointer;
    padding: 12px 0 12px 12px
}

@media (max-width:991px) {
    .header__nav__toggle {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 12
    }
}

.header__nav__toggle>i {
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.header__nav__toggle>i:first-child {
    margin-bottom: 5px
}

.visible-xs {
    display: none!important
}

.invisible {
    visibility: hidden
}

@media (max-width:767px) {
    .visible-xs {
        display: block!important
    }
}

.headroom {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-4em)
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-4em)
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-4em)
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-4em)
    }

    100% {
        transform: translateY(0);
    }
}

.headroom.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-4em)
    }
}

@-moz-keyframes slideUp {
    0% {
        -moz-transform: translateY(0)
    }

    100% {
        -moz-transform: translateY(-4em)
    }
}

@-o-keyframes slideUp {
    0% {
        -o-transform: translateY(0)
    }

    100% {
        -o-transform: translateY(-4em)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-4em)
    }
}

.headroom.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
}