.app-header {
    display: block;
    width: 100%;
    position: fixed;
    background: #3E89DC;
    z-index: 2;
}
.cd-main-header {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 45px;
    width: 100%;
    /*  background:#223D5E;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cd-main-header::after {
    clear: both;
    content: "";
    display: table;
}

.cd-logo {
    float: left;
    display: block;
    margin: 11px 0 0 5%;
}

.cd-logo img {
    display: block;
}

.cd-nav-trigger {
    /* navigation trigger - visible on mobile devices only */
    float: right;
    position: relative;
    display: block;
    width: 34px;
    height: 44px;
    margin-right: 10px;
    /* hide text */
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
}

.cd-nav-trigger span,
.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
    /* hamburger icon in CSS */
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 24px;
    background: #ffffff;
}

.cd-nav-trigger span {
    /* line in the center */
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -2px;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    transition: background 0.2s;
}

.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
    /* other 2 lines */
    content: '';
    right: 0;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    transition: transform 0.2s;
}

.cd-nav-trigger span::before {
    /* menu icon top line */
    top: -6px;
}

.cd-nav-trigger span::after {
    /* menu icon bottom line */
    top: 6px;
}

.cd-nav-trigger.nav-is-visible span {
    /* hide line in the center */
    background: rgba(255, 255, 255, 0);
}

.cd-nav-trigger.nav-is-visible span::before,
.cd-nav-trigger.nav-is-visible span::after {
    /* keep visible other 2 lines */
    background: white;
}

.cd-nav-trigger.nav-is-visible span::before {
    -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
    -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
    -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
    -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
    transform: translateX(4px) translateY(-3px) rotate(45deg);
}

.cd-nav-trigger.nav-is-visible span::after {
    -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
    -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
    -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
    -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
    transform: translateX(4px) translateY(2px) rotate(-45deg);
}

.cd-search {
    position: relative;
    margin: 1.2em 5% 0.6em;
}

.cd-search2 {
    position: relative;
    margin: 1.2em 5% 0.6em;
}

.cd-search.is-hidden {
    opacity: 0;
}

.cd-search::before {
    /* lens icon */
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    background: url(../images/cd-search.svg) no-repeat 0 0;
}

.cd-search input {
    padding-left: 32px;
    width: 90%;
    height: 36px;
    border: none;
    border-radius: .25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

.cd-search input:focus {
    outline: none;
}


/* --------------------------------

Top Navigation

-------------------------------- */

.cd-nav {
    /* top nav - not visible on mobile devices */
    display: none;
}

.cd-top-nav>li>a::before {
    /* reset style */
    display: none;
}

.cd-top-nav>li a {
    padding: 0.4em 5% !important;
}

.cd-top-nav img {
    /* avatar image */
    position: absolute;
    left: 1.8em;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: none;
}


/* --------------------------------

Sidebar

-------------------------------- */

.cd-side-nav {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    padding: 45px 0 0;
    background-color: #223D5E;
    visibility: hidden;
    opacity: 0;
    max-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
}

.cd-side-nav.nav-is-visible {
    opacity: 1;
    visibility: visible;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.2s 0s, visibility 0s 0s;
    transition: opacity 0.2s 0s, visibility 0s 0s;
    max-height: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cd-side-nav>ul {
    padding: 10px 0;
}

.cd-side-nav>ul:last-of-type {
    padding-bottom: 0;
}

.cd-side-nav .cd-label,
.cd-side-nav a {
    display: block;
    padding: 10px 5%;
}

.cd-side-nav .cd-label {
    text-transform: uppercase;
    font-weight: bold;
    color: #65788F;
    font-size: 1rem;
    letter-spacing: .1em;
}

.cd-side-nav a {
    position: relative;
    color: #ffffff;
    font-size: 1.4rem;
}

.cd-side-nav ul.cd-top-nav>li:last-of-type>a {
    border-bottom: none;
}

.cd-side-nav>ul>li>a {
    padding-left: calc(5% + 24px);
    border-bottom: 1px solid #1B314B;
}

/*.cd-side-nav>ul>li>a::before {*/
/*    !* icon before item name *!*/
/*    position: absolute;*/
/*    content: '';*/
/*    left: 5%;*/
/*    top: 50%;*/
/*    bottom: auto;*/
/*    -webkit-transform: translateY(-50%);*/
/*    -moz-transform: translateY(-50%);*/
/*    -ms-transform: translateY(-50%);*/
/*    -o-transform: translateY(-50%);*/
/*    transform: translateY(-50%);*/
/*    height: 16px;*/
/*    width: 16px;*/
/*    background: url(../images/cd-nav-icons.png) no-repeat 0 0;*/
/*}*/

.cd-side-nav>ul>li.overview>a::before {
    background-position: -64px 0;
}

.cd-side-nav>ul>li.notifications>a::before {
    background-position: -80px 0;
}

.cd-side-nav>ul>li.comments>a::before {
    background-position: -48px 0;
}

.cd-side-nav>ul>li.bookmarks>a::before {
    background-position: -32px 0;
}

.cd-side-nav>ul>li.images>a::before {
    background-position: 0 0;
}

.cd-side-nav>ul>li.users>a::before {
    background-position: -16px 0;
}

.cd-side-nav>ul>li.users2>a::before {
    background-position: right 0;
}

/*.cd-side-nav .count {*/
/*    !* notification badge *!*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    bottom: auto;*/
/*    -webkit-transform: translateY(-50%);*/
/*    -moz-transform: translateY(-50%);*/
/*    -ms-transform: translateY(-50%);*/
/*    -o-transform: translateY(-50%);*/
/*    transform: translateY(-50%);*/
/*    right: calc(5% + 16px + 0.4em);*/
/*    padding: 0.1em 0.2em;*/
/*    background-color: #fff;*/
/*    border-radius: .25em;*/
/*    color: #06c;*/
/*    font-weight: lighter;*/
/*    font-size: 1.2rem;*/
/*    text-align: center;*/
/*    display: none;*/
/*}*/

.cd-side-nav .action-btn {
    padding: 0;
    background: none;
    width: 100%;
    height: 30px;
    background-color: #1784c7;
    border-radius: .25em;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

.cd-side-nav .action-btn a::before {
    display: none;
}

/*.has-children ul {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    display: none;*/
/*    background-color: #1B314B;*/
/*}*/

/*.has-children>a::after {*/
/*    !* arrow icon *!*/
/*    position: absolute;*/
/*    content: '';*/
/*    height: 6px;*/
/*    width: 10px;*/
/*    right: 5%;*/
/*    top: 50%;*/
/*    bottom: auto;*/

/*    -webkit-transform: translateY(-50%);*/
/*    -moz-transform: translateY(-50%);*/
/*    -ms-transform: translateY(-50%);*/
/*    -o-transform: translateY(-50%);*/
/*    transform: translateY(-50%);*/
/*    background: url(../images/arrow.png) no-repeat;*/
/*    background-size:100% 100% ;*/
/*}*/

/*.has-children.selected>ul {*/
/*    display: block;*/
/*}*/

.has-children.selected>a::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.cd-side-nav ul>li {
    height: auto;
}

.cd-side-nav ul>li>ul {
    height: auto;
}

.cd-side-nav ul>li>ul>li {
    width: 30%;
    float: left;
    padding: 0px 0;
    padding-left: 3%;
    text-align: center;
}

.cd-side-nav ul>li>ul>li a {
    color: #ccc;
}
.cd-side-nav ul>li.comments>ul>li:first-child{
    width:100%;
    margin-top: 12px;
}
.cd-side-nav ul>li.comments>ul>li:first-child a{
    display: block;
    width:60%;
    margin: 0 auto;
    background: #366194;
    color: #BBD0E4;
}


/*.cd-side-nav>ul>li.overview>a::before{*/
/*    background: url(../images/cd_nav_img1.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*}*/
/*.cd-side-nav>ul>li.notifications>a::before{*/
/*    background: url(../images/cd_nav_img2.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*}*/
/*.cd-side-nav>ul>li.comments>a::before{*/
/*    background: url(../images/cd_nav_img3.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*}*/
/*.cd-side-nav>ul>li.bookmarks>a::before{*/
/*    background: url(../images/cd_nav_img4.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*}*/
/*.cd-side-nav>ul>li.images>a::before{*/
/*    background: url(../images/cd_nav_img5.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*}*/
/*.cd-side-nav>ul>li.users>a::before{*/
/*    background: url(../images/cd_nav_img6.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*}*/
/*.cd-side-nav>ul>li.users2>a::before{*/
/*    background: url(../images/cd_nav_img7.png) no-repeat;*/
/*    background-position: 0 0;*/
/*    background-size:100% 100% ;*/
/*    width: 20px;*/
/*}*/
.headBox {
    clear: both;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-bottom: 1px solid #6591c2;
    position: relative;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#1971db', EndColorStr='#2367b7');
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1971db), to(#2367b7));
    background: -moz-linear-gradient(#1971db, #2367b7);
    background: -o-linear-gradient(#1971db, #2367b7);
    background: linear-gradient(#1971db, #2367b7)
}

.logo {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    background-position: 0 0;
    margin-top: 4px;
    margin-left: 23px;
}
.logo img{width: 140px;}
a.navico {
    width: 52px;
    height: 44px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    background-position: 15px -30px;
    outline: 0;
    text-indent: 999em
}

a.subscribe {
    position: absolute;
    top: 8px;
    left: 10px;
    padding: 0 7px;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    font-size: 13px;

    color: #fff;

    z-index: 600;

}

a.subscribe img {
    width: 17px;
}

/**footer*!*/
.footer {
    width: 100%;
    height: auto;
    background: #377dd5;
    font-size: 14px;
}

.footer .in {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer a {
    color: #fff;
}
.footer p {
    line-height: 32px;
}