/* -- -- */
@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width: 992px) {}
/* -- --*/
#header {
        width: 100%;
        top: 0;
    }
    @media only screen and (min-width: 768px) {
        #header {
        }
    }
    @media only screen and (min-width: 992px) {
    #header {
        display: block;
        position: fixed;
        left: 0;
        bottom: auto;
        z-index: 10000;
        width: 100%;
        height: 60px;
    }
}

#header,
#header * {
    -webkit-transform: none;
    transform: none;
}

#header {
    overflow: hidden;
}

#header.pinIn.disable {
        height: 100%;
    }
    @media only screen and (min-width: 992px) {
    #header.pinIn.disable {
        height: 60px;
    }
}

#header > .wrapper{
    overflow: hidden;
    height: 100%;
    position: relative;
    }
    @media only screen and (min-width: 992px) {
    #header > .wrapper{
        width: 992px;
        margin: 0 auto;
    }
}

#header .logo {
        text-align: center;
        margin: 0 auto;
        height: 60px;
    }
    @media only screen and ( min-width: 992px) {
    #header .logo {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
        height: 60px;
        margin: 0;
    }
}

#header .logo a {
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-family: monospace;
    line-height: 60px;
}

#mobileGroup {
    display: none;
    }
    @media only screen and ( min-width: 992px) {
    #mobileGroup {
        display: block;
        position: absolute;
        top: 0;
        left: 30%;
        width: 70%;
        height: 60px;
        z-index: 100;
    }
}

#mobileGroup.active {
        display: block;
        overflow-x: hidden;
        width: calc(100% * 10/12);
        position: absolute;
        top: 60px;
        bottom: 0px;
        z-index: 100;
        background: #333333;
    }
    @media only screen and ( min-width: 480px) {
        #mobileGroup.active {
            width: calc(100% * 10/12);
            left: 0;
        }
    }
    @media only screen and ( min-width: 768px) {
        #mobileGroup.active {
            width: calc(100% * 8/12);
            left: 0;
        }
    }
    @media only screen and ( min-width: 992px) {
        #mobileGroup.active {
            background: orange;
            top: 0;
            left: 30%;
            width: 70%;
            height: 60px;
            bottom: auto;
        }
    }
}

#mobileGroup.active > .wrapper {
        overflow-x: hidden;
        height: 100%;
        bottom: 0px;
        border: 10px solid #eee;
        background-color: #eee;
    }
    @media only screen and ( min-width: 480px) {
        #mobileGroup.active > .wrapper {
            border-radius: 10px;
        }
    }
    @media only screen and ( min-width: 992px) {
        #mobileGroup.active > .wrapper {
            height: 60px;
            border-radius: 0px;
            border: 0;
            background-color: transparent;
        }
    }

/* -- -- */
#navigation {
        overflow-y: auto;
    }
    @media only screen and ( min-width: 992px) {
    #navigation {
        width: 100%;
        height: 60px;
    }
}

#navigation li {
        height: 60px;
        text-align: center;
        line-height: 60px;
    }
    @media only screen and ( min-width: 992px) {
    #navigation li {
        display: block;
        width: 25%;
        height: 60px;
        float: left;
    }
}

#navigation li a {
        display: block;
        line-height: 60px;
        margin: auto;
        height: 60px;
        background: #ccc;
        color: #666;
        font-weight: bold;
        font-family: arial;
        font-size: 14px;
        text-transform: uppercase;
    }
    @media only screen and ( min-width: 992px) {
    #navigation li a {
        line-height: 60px;
    }
}

/* -- -- */
#header .mobileGroupTrigger {
        display: block;
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        color: #ccc;
        text-align: center;
        line-height: 60px;
    }
    @media only screen and ( min-width: 992px) {
    #header .mobileGroupTrigger {
        display: none;
    }
}

#header .mobileGroupTrigger:hover {
    cursor: pointer;
}

#header .mobileGroupTrigger .fa {
    margin-top: 8px;
    background-color: #666;
    padding: 5px;
    border-radius: 2px;
}

/* - - sticky-header js - -*/
.pinIn {
    position: fixed;
    z-index: 10000;
    -webkit-transform: translate3d(0,0,0) !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transition: top 0.2s linear, left 0.2s linear !important;
    -moz-transition: top 0.2s linear, left 0.2s linear !important;
    transition: top 0.2s linear, left 0.2s linear !important;
}

.pinIn-off-canvas {
    top: -60px !important;
}

.pinIn-off-canvas.disable {
        top: 0 !important;
    }
    @media only screen and ( min-width: 992px) {
    .pinIn-off-canvas.disable {
        top: -60px !important;
    }
}

div#header.pinIn-fixed {
    top: 0 !important;
}

/* -- -- */
#overlay.active {
        background-color: #000;
        opacity: 0.6;
        position: absolute;
        top: 60px;
        left: 0px;
        height: calc(100% - 60px);
        width:100%;
        z-index: 50;
    }
    @media only screen and ( min-width: 992px) {
    #overlay.active {
        height: 0;
        width: 0;
        display: none;
    }
}