html, body {display: block; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Tahoma, Verdana; color: #000000; font-size: 14px; line-height: 1.9em; background: url(../images/bg-page.jpg) repeat scroll 0 0 #FFFFFF; height: 100%;}
html.fixed-html {overflow-y: scroll; position: fixed;width: 100%;}
IMG {border: 0px;}
A {text-decoration: none; vertical-align: baseline; color: #6e8291;}
i {border: 0 none; font: inherit; margin: 0; padding: 0; vertical-align: baseline;}
li {display: list-item; text-align: -webkit-match-parent;}

#header {position: fixed; z-index: 50; min-width: 1090px; background: #fff; width: 100%; margin: 0; left: 0; top: 0; -webkit-box-shadow: 0px 0 3px 1px #736b6b; box-shadow: 0px 0 3px 1px #736b6b; height: 50px;}
#header:after {content: ''; display: block; clear: both;}
.header-holder {width: 100%;}
.header-holder:after {content: ''; display: block; clear: both;}

#bottomdiv {background: #FFF; padding: 60px 0 50px; margin: 0px; text-align: center; font-weight: 100; display: block; height: auto !important; box-shadow: 0px 0 3px 1px #736b6b;}
#bottom-link-container {text-transform: uppercase; font-weight: bold; font-size: 16px; padding-bottom: 20px;}
#bottom-link-container a {font-size: 18px; color: #252322;}
#bottom-detail-container {font-size: 16px; color: #252322; padding-bottom: 43px;}

.nav-opener {overflow: hidden; text-indent: -9999px; width: 50px; height: 50px; vertical-align: middle; z-index: 99; position: relative; letter-spacing: 0; float: left;}
.nav-opener:before, .nav-opener:after, .nav-opener span {
    background: #4c4c4c;
    position: absolute;
    top: 45%;
    left: 26%;
    height: 4px;
    margin-top: -1px;
    -webkit-transition: -webkit-transform 200ms linear;
    transition: transform 200ms linear;
    width: 30px;
}
.nav-opener:before, .nav-opener:after {
    content: "";
    top: 27%;
}
.nav-opener:after {
    top: 64%;
}
.logo {background: url(../images/logo_appsglow.png) no-repeat 10px center; float: left; height: 25px; overflow: hidden; text-indent: -9999px; width: 129px; margin: 15px 15px 0 0; margin-left: 0px;}
.logo a {
    display: block;
    height: 100%;
}

#nav {list-style: none; float: left; margin: 0; padding: 0; text-transform: uppercase; font-weight: 700; transition: all 0.25s ease-in-out;}
#nav li {float: left; text-align: center; position: relative; min-width: 100px; padding: 0; margin: 0;}
#nav li > SPAN {position: absolute; top: 0px; left: 0px; width: 100%; height: 3px; z-index: 1; transition: all 0.25s ease-in-out;}
#nav a {text-decoration: none; padding: 13px 12px 14px; display: block; position: relative; z-index: 2; transition: all 0.25s ease-in-out;}
#nav li.selected > SPAN, #nav li:hover > SPAN {height: 50px;}
#nav li.selected a.light, #nav li:hover a.light {color: #FFFFFF;}
#nav li.selected a.dark, #nav li:hover a.dark {color: #000000;}

#main-container {padding: 63px 0 20px; min-height: calc(100% - 356px);}
.main-container {margin: 0 auto; display: none;}
.box-link {display: block; text-decoration: none;}
.img-holder {display: block; position: relative; background-color: #333;}
.item {border: 1px solid #ccc; float: left; background-color: #eee; margin-bottom: 10px; width: 240px; opacity: 0.85; transition: all 0.5s ease-in-out;}
.first {position: relative; width: 492px; background: #333; border: 1px solid #ccc; float: left; opacity: 1.0;}
.title-box {padding: 4px 5px; color: #fff; font-weight: 700; font-size: 24px; line-height: 35px; position: absolute; top: 61px; left: 8px;}
.first .top {position: absolute; top: -1px; left: 15px;}
.bg {background: #333; padding: 3px 10px 2px 0;}
.item:hover {border-color: #000; opacity: 1.0; background-color: #fff;}

.named {position: absolute; bottom: 0; left: 0;}
.title-news {font-family: Arial, Helvetica, sans-serif !important; display: block; width: 220px; margin: 0px; color: #fff; font-size: 20px; line-height: 24px; padding: 9px 5px 11px 15px; background: rgba(0, 0, 0, 0.65);}
.text {font-family: Arial, Helvetica, sans-serif !important; font-size: 13px; line-height: 18px; padding: 15px; display: block;}
.first .text {background: #FFF; color:#555; font-size: 14px;}
.post-title {font-size: 20px; line-height: 24px; font-weight: 700; color: #5b6c76; margin: 0 0 11px; display: block;}
.clear {clear: both; height: 0px;}

.item P {margin: 0;}

#aside-nav ul li {
    background: #4f5e6a;
    border: 2px solid #5b6c79;
    border-width: 0 0 1px;
}

#aside-nav ul li:last-child {
    border-width: 0 0 4px;
}


#aside-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#aside-nav ul li a {
    color: #fff;
    display: block;
    padding: 12px 22px;
    text-decoration: none;
    -webkit-transition: background 300ms linear;
    transition: background 300ms linear;
    font-size: 19px;
    text-transform: uppercase;
    background: transparent;
    border-bottom: 1px solid #5B6C7A;
	position: relative;
	z-index: 2;
	transition: all 0.5s ease-in-out;
}
#aside-nav ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #D8DEE4;
  transition: all 0.5s ease-in-out; 
  z-index: -1;
}
#aside-nav ul li.selected a, #aside-nav ul li a:hover {
	color: #343E47;
}

#aside-nav ul li.selected a::before, #aside-nav ul li a:hover::before {
  width: 100%;
}
#aside-nav ul li.info_links {
    background: transparent;
    border-color: #333e46;
}
#aside-nav .info-links a {
    color: #7B8C99;
    text-transform: uppercase;
    font-size: 18px;
    background: #333e46;
}

#aside-nav ul li.first-info-link {
    border-top: 3px solid #5B6C7A;
}

.nav-active #main-container:before {
    background: rgba(0, 0, 0, .8);
    z-index: 100;
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.nav-active #main {
    left: 327px;
}

.nav-active #header {
    left: 327px !important;
}

.close {
    right: 25px;
}
/** HAMBURGER NAV **/
.nav-opener {
    overflow: hidden;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    z-index: 99;
    position: relative;
    letter-spacing: 0;
    float: left;
}

.unbranded .nav-opener {
    position: absolute;
    top: -1px;
    left: 0;
    height: 43px;
    width: 43px;
}

.nav-opener:before,
.nav-opener:after,
.nav-opener span {
    background: #4c4c4c;
    position: absolute;
    top: 45%;
    left: 26%;
    height: 4px;
    margin-top: -1px;
    -webkit-transition: -webkit-transform 200ms linear;
    transition: transform 200ms linear;
    width: 30px;
}

.nav-opener:before,
.nav-opener:after {
    content: "";
    top: 27%;
}

.nav-opener:after {
    top: 64%;
}

.nav-opener:hover {
    /*background: #4c4c4c;*/
}

.nav-opener:hover:before,
.nav-opener:hover:after,
.nav-opener:hover span {
    /*background: #fff;*/
}
.nav-drop {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    background: #000;
    right: 0;
    width: 327px;
    height: 100%;
    z-index: 101;
    letter-spacing: 0;
    -webkit-transition: left 300ms linear;
    transition: left 300ms linear;
    box-shadow: 2px 0px 20px rgba(0, 0, 0, 1.0);
    color: #7b8c98;
}

.jcf-scrollable-wrapper {
    box-sizing: content-box;
    position: relative;
}

.jcf-scrollbar-vertical {
    position: absolute;
    cursor: default;
    background: none;
    width: 8px;
    bottom: 0;
    right: 0;
    top: 0;
}

.jcf-scrollbar-vertical .jcf-scrollbar-handle {
    background: #e3e3e3;
    height: 1px;
    width: 8px;
    border-radius: 10px;
}

.jcf-scrollbar-horizontal {
    position: absolute;
    background: none;
    right: auto;
    top: auto;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 8px;
}

.jcf-scrollbar-horizontal .jcf-scrollbar-slider {
    display: inline-block;
    position: relative;
    height: 8px;
}

.jcf-scrollbar-horizontal .jcf-scrollbar-handle {
    position: absolute;
    background: #e3e3e3;
    height: 8px;
    border-radius: 10px;
}

.jcf-scrollbar.jcf-inactive .jcf-scrollbar-handle {
    visibility: hidden;
}

/* common custom form elements styles */

.jcf-disabled {
    background: #ddd !important;
}

.jcf-focus,
.jcf-focus * {
    border-color: #f00 !important;
}

.nav-drop .jcf-scrollable {
    height: 100%;
    background: #333e46;
}

.nav-drop .nav-top {
    background: #fff;
    padding: 17px 40px 35px 20px;
    position: relative;
}

.nav-drop .nav-bottom {
    margin: 0 22px;
    font-family: Arial, Helvetica, sans-serif;
}

.nav-drop .social-networks {
    margin: 0;
}

.nav-drop .social-networks a:before {
    margin: 0;
}

.nav-drop .social-networks li {
    margin: 0 18px 5px 0;
}

.nav-drop .social-networks li:first-child {
    margin: 0 18px 5px 0;
}

.nav-drop .copyright-info {
    padding: 20px 0;
}

.nav-drop .nav-opener.close {
    background: url(../images/sprite.png) no-repeat -140px 0;
    width: 20px;
    height: 20px;
    border-style: none;
}

.nav-drop .nav-opener.close:hover {
    opacity: .5;
}

.nav-drop .nav-opener:before,
.nav-drop .nav-opener:after,
.nav-drop .nav-opener span {
    background: none;
}

.nav-drop .aside-holder {
    /*border: 2px solid #333;*/
    border-width: 0 0 2px;
    margin: 0 0 5px;
}

.nav-drop .logo {
    width: 130px;
    margin: 0;
    background-position: 0% center;
    position: static;
}

.nav-active {
    /*overflow: hidden;*/
}

.nav-active #footer {
    display: block;
}

.nav-active .nav-drop {
    left: 0;
}

.resize-active .nav-drop {
    -webkit-transition: none !important;
    transition: none !important;
}

.close {
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: url(../images/sprite.png) no-repeat -26px 0;
    width: 21px;
    height: 21px;
    position: absolute;
    right: 16px;
}

.close:hover {
    opacity: .5;
}

@media screen and (max-device-width: 1024px) {
    .header-bar { position: fixed; top: 0; left: 0; z-index: 2; margin-top: -1px }
    .logo-container { margin-left: -43px }

    .nav-opener:before,.nav-opener:after,.nav-opener span {
        left: 25%;
        right: 35%;
        top: 46%;
    }

    .nav-opener:before,.nav-opener:after {
        top: 28%
    }

    .nav-opener:after {
        top: 65%
    }

    .nav-opener.close {
        left: inherit;
        top: 28px;
    }

    .nav-drop {
        left: -327px;
        width: 327px;
        right: auto
    }

    .nav-drop .nav-top {
        padding: 20px 50px 35px 12px
    }
}
@media screen and (max-device-width: 1023px) {
    #main-container { margin-top: 53px }
}
@media screen and (max-device-width: 500px) {
    .nav-opener { height: 43px; width: 43px }
    .logo-container { margin-left: -33px }
    #aside-nav ul li a { padding: 10px 22px }
    #aside-nav .info-links a { font-size: 13px }
}
@media screen and (max-device-width: 400px) {
    .nav-opener { height: 43px; width: 43px }
    #aside-nav ul li a { padding: 6px 22px; font-size: 15px }
    #aside-nav .info-links a { font-size: 13px }
}
@media screen and (max-device-height: 568px ) {
    #aside-nav ul { height: 483px; overflow: scroll }
}
@media screen and (max-device-height: 480px ) {
    #aside-nav ul { height: 394px; overflow: scroll }
}