@charset "utf-8";

/******************************************************************************* Begin Navigation */

#navigation-wrapper{
    background: #000000;
    z-index: 10000;
}

/* Logo */

#navigation-wrapper #logo{
    text-align: center;
}

#navigation-wrapper #logo a{
    display: block;
}

#navigation-wrapper #logo h1{
    color: #e2e2e2;
    font: normal 24px/24px 'Economica', serif;
    padding: 0 0 0px 0;
    text-align: center;
}

#navigation-wrapper #logo img{
    display: none;
    width: auto;
}

#navigation-wrapper .loader{
    background: url('../images/loader.gif') no-repeat center center;
    display: none;
    height: 8px;
    position: absolute;
}

/* Search */

#navigation-wrapper form#searchform{
    background: #212121;
    height: 48px;
    overflow: hidden;
    padding: 0;
    -webkit-transition: width 300ms linear;
    -moz-transition: width 300ms linear;
    -ms-transition: width 300ms linear;
    -o-transition: width 300ms linear;
    transition: width 300ms linear;
}

#navigation-wrapper form#searchform label{
    display: none;
}

#navigation-wrapper form#searchform input[type=text]{
    background: none;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #7f7f7f;
    float: left;
    font: italic 15px/18px 'Source Sans Pro', Helvetica, Arial, SansSerif;
    margin: 0;
    padding: 14px 15px 14px 15px;
    width: 222px;
}

#navigation-wrapper form#searchform input[type=text]:focus,
#navigation-wrapper form#searchform input[type=text]:hover{
    color: #e2e2e2;
    outline: none;
}

#navigation-wrapper form#searchform input[type=submit]{
    background-color: #1c1c1c;
    background-image: url('../images/icons/search.png');
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0;
    cursor: pointer;
    float: left;
    height: 48px;
    margin: 0;
    padding: 0;
    width: 48px;
}

#navigation-wrapper form#searchform:hover input[type=submit]{
    background-color: #af3425;
    -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

/***************************************************************** Begin Menu */

#navigation-wrapper #menu{
}

#navigation-wrapper #menu > li{
    margin: 0 0 1px 0;
    width: 301px;
}

#navigation-wrapper #menu > li > a{
    background: #1c1c1c;
    color: #e2e2e2;
    display: block;
    font: 16px/24px 'PT Sans Narrow', Helvetica, Arial, sans-serif;
    padding: 13px 15px 10px 11px;
    text-transform: uppercase;
    width: 274px;
    -webkit-transition: background 300ms ease-in;
    -moz-transition: background 300ms ease-in;
    -ms-transition: background 300ms ease-in;
    -o-transition: background 300ms ease-in;
    transition: background 300ms ease-in;
}

#navigation-wrapper #menu > li > a .icon{
    display: block;
    float: left !important;
    height: 24px;
    margin: 0 14px 0 0;
    overflow: hidden;
    width: 24px;
}

#navigation-wrapper #menu > li > a .icon .glyph,
#navigation-wrapper #menu > li > a .icon .glyph-hover{
    display: block;
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    width: 24px;
}

#navigation-wrapper #menu > li > a .icon .glyph{
    margin-top: -2px;
    -webkit-transition: margin-top 300ms ease-in;
    -moz-transition: margin-top 300ms ease-in;
    -ms-transition: margin-top 300ms ease-in;
    -o-transition: margin-top 300ms ease-in;
    transition: margin-top 300ms ease-in;
}

#navigation-wrapper #menu > li > a .icon .glyph-hover{
    color: #000000;
}

#navigation-wrapper #menu > li > a .more{
    float: right;
    height: 11px;
    margin: 6px 0 0 0;
    width: 8px;
}

#navigation-wrapper #menu > li > a .more .square{
    background: #e2e2e2;
    display: block;
    height: 3px;
    width: 6px;
    -webkit-transition: background 300ms ease-in, margin 300ms ease-in;
    -moz-transition: background 300ms ease-in, margin 300ms ease-in;
    -ms-transition: background 300ms ease-in, margin 300ms ease-in;
    -o-transition: background 300ms ease-in, margin 300ms ease-in;
    transition: background 300ms ease-in, margin 300ms ease-in;
}

#navigation-wrapper #menu > li > a .more .square2,
#navigation-wrapper #menu > li > a .more .square3{
    margin: 1px 0 0 0;
}

#navigation-wrapper #menu > li:hover > a{
    background: #af3425;
    -webkit-transition: background 300ms ease-in;
    -moz-transition: background 300ms ease-in;
    -ms-transition: background 300ms ease-in;
    -o-transition: background 300ms ease-in;
    transition: background 300ms ease-in;
}

#navigation-wrapper #menu > li:hover > a .icon{
    background-position: 0 -48px;
    -webkit-transition: background-position 300ms ease-in;
    -moz-transition: background-position 300ms ease-in;
    -ms-transition: background-position 300ms ease-in;
    -o-transition: background-position 300ms ease-in;
    transition: background-position 300ms ease-in;
}

#navigation-wrapper #menu > li:hover > a .icon .glyph{
    margin-top: -26px;
    -webkit-transition: margin-top 300ms ease-in;
    -moz-transition: margin-top 300ms ease-in;
    -ms-transition: margin-top 300ms ease-in;
    -o-transition: margin-top 300ms ease-in;
    transition: margin-top 300ms ease-in;
}

#navigation-wrapper #menu > li:hover > a .more .square2{
    margin: 1px 0 0 2px;
}

#navigation-wrapper #menu li a{
    text-align: left;
}

#navigation-wrapper #menu > li > ul{
    background: #000000;
    margin: -47px 0 0 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    -moz-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    -ms-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    -o-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    visibility: hidden;
    width: 200px;
}

#navigation-wrapper #menu > li:hover > ul{
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    -ms-transition: opacity 300ms ease-in;
    -o-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    visibility: visible;
}

#wrapper.left #navigation-wrapper #menu > li > ul{
    left: 301px;
}

#wrapper.right #navigation-wrapper #menu > li > ul{
    right: 301px;
}

#navigation-wrapper #menu > li > ul li{
    padding: 0 0 0 0;
    width: 201px;
}

#navigation-wrapper #menu > li > ul li > a{
    background: #1c1c1c;
    color: #e2e2e2;
    display: block;
    font: 16px/24px 'PT Sans Narrow', Helvetica, Arial, sans-serif;
    margin: 0 0 1px 0;
    padding: 13px 15px 10px 15px;
    text-transform: uppercase;
    width: 170px;
    -webkit-transition: background 300ms ease-in;
    -moz-transition: background 300ms ease-in;
    -ms-transition: background 300ms ease-in;
    -o-transition: background 300ms ease-in;
    transition: background 300ms ease-in;
}

#navigation-wrapper #menu > li > ul li:hover > a{
    background: #af3425;
    -webkit-transition: background 300ms ease-in;
    -moz-transition: background 300ms ease-in;
    -ms-transition: background 300ms ease-in;
    -o-transition: background 300ms ease-in;
    transition: background 300ms ease-in;
}

#navigation-wrapper #menu > li > ul li a .more{
    float: right;
    height: 11px;
    margin: 6px 0 0 0;
    width: 8px;
}

#navigation-wrapper #menu > li > ul li a .more .square{
    background: #e2e2e2;
    display: block;
    height: 3px;
    width: 6px;
    -webkit-transition: background 300ms ease-in, margin 300ms ease-in;
    -moz-transition: background 300ms ease-in, margin 300ms ease-in;
    -ms-transition: background 300ms ease-in, margin 300ms ease-in;
    -o-transition: background 300ms ease-in, margin 300ms ease-in;
    transition: background 300ms ease-in, margin 300ms ease-in;
}

#navigation-wrapper #menu > li > ul li a .more .square2,
#navigation-wrapper #menu > li > ul li a .more .square3{
    margin: 1px 0 0 0;
}

#navigation-wrapper #menu > li > ul li:hover > a .more .square2{
    margin: 1px 0 0 2px;
}

#navigation-wrapper #menu > li > ul li > ul{
    background: #000000;
    margin: -48px 0 0 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    -moz-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    -ms-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    -o-transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    transition: opacity 300ms ease-in, visibility 50ms linear 300ms;
    visibility: hidden;
    width: 200px;
}

#navigation-wrapper #menu > li > ul li:hover > ul{
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    -ms-transition: opacity 300ms ease-in;
    -o-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    visibility: visible;
}

#wrapper.left #navigation-wrapper #menu > li > ul li > ul{
    left: 201px;
}

#wrapper.right #navigation-wrapper #menu > li > ul li > ul{
    right: 201px;
}

/******************************************************************* End Menu */

/********************************************************** Begin Mobile Menu */

#navigation-wrapper #mobile-menu{
    display: none;
}

#navigation-wrapper #mobile-menu > li > a{
    background: #1c1c1c;
    display: block;
    padding: 13px 15px 14px 15px;
    width: 18px;
    -webkit-transition: width 300ms ease-in;
    -moz-transition: width 300ms ease-in;
    -ms-transition: width 300ms ease-in;
    -o-transition: width 300ms ease-in;
    transition: width 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > a .icon .row{
    background-color: #e2e2e2;
    display: block;
    height: 3px;
    line-height: 3px;
    margin: 0 auto 3px auto;
    width: 18px;
    -webkit-transition: width 300ms ease-in;
    -moz-transition: width 300ms ease-in;
    -ms-transition: width 300ms ease-in;
    -o-transition: width 300ms ease-in;
    transition: width 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > a .icon .row:last-child{
    margin: 0 auto;
}

#navigation-wrapper #mobile-menu > li > ul{
    background: #000000;
    display: none;
    margin-top: 1px;
    position: absolute;
    -webkit-transition: width 300ms ease-in;
    -moz-transition: width 300ms ease-in;
    -ms-transition: width 300ms ease-in;
    -o-transition: width 300ms ease-in;
    transition: width 300ms ease-in;
    width: 0px;
}

#navigation-wrapper #mobile-menu > li.visible > a{
    width: 270px;
    -webkit-transition: width 300ms ease-in;
    -moz-transition: width 300ms ease-in;
    -ms-transition: width 300ms ease-in;
    -o-transition: width 300ms ease-in;
    transition: width 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li.visible > a .icon .row{
    width: 270px;
    -webkit-transition: width 300ms ease-in;
    -moz-transition: width 300ms ease-in;
    -ms-transition: width 300ms ease-in;
    -o-transition: width 300ms ease-in;
    transition: width 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li.visible > ul{
    display: block;
    width: 300px;
    -webkit-transition: width 600ms ease-in;
    -moz-transition: width 600ms ease-in;
    -ms-transition: width 600ms ease-in;
    -o-transition: width 600ms ease-in;
    transition: width 600ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul > li{
    margin: 0 0 1px 0;
}

#navigation-wrapper #mobile-menu > li > ul > li > a{
    background: #1c1c1c;
    color: #e2e2e2;
    display: block;
    font: 16px/24px 'PT Sans Narrow', Helvetica, Arial, sans-serif;
    padding: 13px 15px 10px 11px;
    text-transform: uppercase;
    width: 274px;
    -webkit-transition: background 300ms ease-in;
    -moz-transition: background 300ms ease-in;
    -ms-transition: background 300ms ease-in;
    -o-transition: background 300ms ease-in;
    transition: background 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul > li > a .icon{
    display: block;
    float: left !important;
    height: 24px;
    margin: 0 14px 0 0;
    overflow: hidden;
    width: 24px;
}

#navigation-wrapper #mobile-menu > li > ul > li > a .icon .glyph,
#navigation-wrapper #mobile-menu > li > ul > li > a .icon .glyph-hover{
    display: block;
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    width: 24px;
}

#navigation-wrapper #mobile-menu > li > ul > li > a .icon .glyph{
    margin-top: -2px;
    -webkit-transition: margin-top 300ms ease-in;
    -moz-transition: margin-top 300ms ease-in;
    -ms-transition: margin-top 300ms ease-in;
    -o-transition: margin-top 300ms ease-in;
    transition: margin-top 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul > li > a .icon .glyph-hover{
    color: #000000;
}


#navigation-wrapper #mobile-menu > li > ul > li:hover > a{
    background: #af3425;
    -webkit-transition: background 300ms ease-in;
    -moz-transition: background 300ms ease-in;
    -ms-transition: background 300ms ease-in;
    -o-transition: background 300ms ease-in;
    transition: background 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul > li:hover > a .icon{
    background-position: 0 -48px;
    -webkit-transition: background-position 300ms ease-in;
    -moz-transition: background-position 300ms ease-in;
    -ms-transition: background-position 300ms ease-in;
    -o-transition: background-position 300ms ease-in;
    transition: background-position 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul > li:hover > a .icon .glyph{
    margin-top: -26px;
    -webkit-transition: margin-top 300ms ease-in;
    -moz-transition: margin-top 300ms ease-in;
    -ms-transition: margin-top 300ms ease-in;
    -o-transition: margin-top 300ms ease-in;
    transition: margin-top 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul > li li > a{
    color: #e2e2e2;
    display: block;
    font: 16px/24px 'PT Sans Narrow', Helvetica, Arial, sans-serif;
    padding: 0 0 0 34px;
    text-transform: uppercase;
}

#navigation-wrapper #mobile-menu > li > ul li > a .more{
    float: right;
    height: 7px;
    margin: 10px 0 0 0;
    width: 11px;
}

#navigation-wrapper #mobile-menu > li > ul > li li > a .more{
    margin: 12px 0 0 0;
}

#navigation-wrapper #mobile-menu > li > ul li > a .more .square{
    background: #e2e2e2;
    float: left;
    display: block;
    height: 3px;
    width: 3px;
    -webkit-transition: background 300ms ease-in, margin 300ms ease-in;
    -moz-transition: background 300ms ease-in, margin 300ms ease-in;
    -ms-transition: background 300ms ease-in, margin 300ms ease-in;
    -o-transition: background 300ms ease-in, margin 300ms ease-in;
    transition: background 300ms ease-in, margin 300ms ease-in;
}

#navigation-wrapper #mobile-menu > li > ul li > a .more .square2,
#navigation-wrapper #mobile-menu > li > ul li > a .more .square3{
    margin: 0 0 0 1px;
}

#navigation-wrapper #mobile-menu > li > ul > li li > a:hover{
    color: #af3425;
}

#navigation-wrapper #mobile-menu > li > ul li.visible > a .more .square2,
#navigation-wrapper #mobile-menu > li > ul li:hover > a .more .square2{
    margin-top: 4px;
}

#navigation-wrapper #mobile-menu > li > ul > li li > a:hover .more .square{
    background: #af3425;
}

#navigation-wrapper #mobile-menu > li > ul li > ul{
    display: none;
    opacity: 0;
    margin: 0;
    padding: 0 0 0 15px;
    right: 35px;
    -webkit-transition: opacity 300ms ease-in, display 50ms linear;
    -moz-transition: opacity 300ms ease-in, display 50ms linear;
    -ms-transition: opacity 300ms ease-in, display 50ms linear;
    -o-transition: opacity 300ms ease-in, display 50ms linear;
    transition: opacity 300ms ease-in, display 50ms linear;
}

#navigation-wrapper #mobile-menu > li > ul > li > ul{
    padding: 12px 15px;
}

#navigation-wrapper #mobile-menu > li > ul li.visible > ul{
    display: block;
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    -ms-transition: opacity 300ms ease-in;
    -o-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
}

/************************************************************ End Mobile Menu */

/* ----- Begin Navigation Responsive ----- */

@media screen and (min-width: 1340px){
    #navigation-wrapper{
        height: 100%;
        position: fixed;
        width: 300px;
    }

    #wrapper.left #navigation-wrapper{
        left: 0px;
    }

    #wrapper.right #navigation-wrapper{
        right: 0px;
    }
    
    #navigation-wrapper #logo a{
        height: 168px;
        padding: 24px 0 48px 0;
    }

    #navigation-wrapper #logo img{
        height: 120px;
    }
    
    #navigation-wrapper form#searchform{
        bottom: 0;
        position: fixed;
        width: 300px;
    }
    
    #navigation-wrapper .loader{
        top: 212px;
        width: 300px;
    }
    
    #navigation-wrapper #menu{
        display: block;
    }
    
    #navigation-wrapper #mobile-menu{
        display: none;
    }
}

@media screen and (min-width: 1001px) and (max-width: 1339px){
    #navigation-wrapper{
        height: 100px;
        position: relative;        
        width: 1000px;
    }
    
    #navigation-wrapper #logo{
        width: 300px;
    }
    
    #navigation-wrapper #logo a{
        /* height: 168px; */
        padding: 24px 0;
    }

    #navigation-wrapper #logo img{
        /* height: 120px; */
        height: 0px;
    }
    
    #navigation-wrapper form#searchform{
        bottom: 50px;
        position: absolute;
        right: 0px;
        width: 48px;
    }
    
    #navigation-wrapper form#searchform:hover{
        width: 300px;
    }
    
    #navigation-wrapper .loader{
        top: 200px;
        width: 300px;
    }
    
    #navigation-wrapper #menu{
        display: none;
    }
    
    #navigation-wrapper #mobile-menu{
        bottom: 1px;
        display: block;
        position: absolute;
        right: 0px;
    }
}

@media screen and (min-width: 764px) and (max-width: 1000px){
    #navigation-wrapper{
        height: 100px;
        position: relative;
        width: 100%;
    }
    
    #navigation-wrapper #logo{
        width: 300px;
    }
    
    #navigation-wrapper #logo a{
        /* height: 168px; */
        padding: 24px 0;
    }

    #navigation-wrapper #logo img{
        /* height: 120px; */
        height: 0px;
    }
    
    #navigation-wrapper form#searchform{
        bottom: 50px;
        position: absolute;
        right: 0px;
        width: 48px;
    }
    
    #navigation-wrapper form#searchform:hover{
        width: 300px;
    }
    
    #navigation-wrapper .loader{
        top: 200px;
        width: 300px;
    }
    
    #navigation-wrapper #menu{
        display: none;
    }
    
    #navigation-wrapper #mobile-menu{
        bottom: 1px;
        display: block;
        position: absolute;
        right: 0px;
    }
}

@media screen and (max-width: 763px){
    #navigation-wrapper{
        height: 75px;
        position: relative;
        width: 100%;
    }
    
    #navigation-wrapper #logo{
        width: 100%;
    }
    
    #navigation-wrapper #logo a{
        /* height: 120px; */
        padding: 24px 0;
    }

    #navigation-wrapper #logo img{
        /* height: 72px; */
        height: 0px;
    }
    
    #navigation-wrapper form#searchform{
        margin: 0 auto 1px auto;
        width: 300px;
    }
    
    #navigation-wrapper .loader{
        top: 152px;
        width: 100%;
    }
    
    #navigation-wrapper #menu{
        display: none;
    }
    
    #navigation-wrapper #mobile-menu{
        display: block;
        margin: auto;
        width: 300px;
    }
    
    #navigation-wrapper #mobile-menu > li > a{
        width: 270px;
    }
}

/* ----- End Navigation Responsive ----- */

/******************************************************************************* End Navigation */