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

Primary style

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

@media only screen and (max-width: 767px) {
    .closebtn {
        color: #ffffff;
        position: relative;
        right: 0;
        top: 0;
        z-index: 2;
        padding:8px;
        font-size:30px;
    }
    *, *::after, *::before {
        box-sizing: border-box;
    }
    body.nav-on-left.overflow-hidden {
        overflow: hidden;
    }
    /* -------------------------------- 

    Main components 

    -------------------------------- */
    .cd-main-content, .cd-main-header {
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    .cd-main-content, .cd-main-header {
        position: relative;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }
    .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible {
        -webkit-transform: translateX(90%);
        -moz-transform: translateX(90%);
        -ms-transform: translateX(90%);
        -o-transform: translateX(90%);
        transform: translateX(90%);
    }
    .cd-main-content {
        /*min-height: 100vh;*/
    }
    .cd-search-trigger, .cd-nav-trigger {
        position: relative;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        /* hide text */
        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: #2e3233;
    }
    .cd-nav-trigger span {
        /* line in the center */
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -2px;
        -webkit-transition: background 0.3s 0.3s;
        -moz-transition: background 0.3s 0.3s;
        transition: background 0.3s 0.3s;
    }
    .cd-nav-trigger span::before, .cd-nav-trigger span::after {
        /* other 2 lines */
        content: '';
        /* 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;
        right: 0;
        -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.3s 0.3s;
        -moz-transition: -moz-transform 0.3s 0.3s;
        transition: transform 0.3s 0.3s;
    }
    .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(46, 50, 51, 0);
    }
    .cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
        /* keep visible other 2 lines */
        background: #2e3233;
    }
    .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-primary-nav, .cd-primary-nav ul {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 90%;
        background: #212f78;
        /*#2e3233;*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1;
        /* 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-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }
    .cd-primary-nav a, .cd-primary-nav ul a {
        display: block;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        color: #ffffff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid #1b2864;
        /*#3a3f40;*/
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform, opacity;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }
    .cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden {
        /* secondary navigations hidden by default */
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    .cd-primary-nav.moves-out>li>a, .cd-primary-nav ul.moves-out>li>a {
        /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul {
        right: auto;
        left: 0;
    }
    .cd-primary-nav .see-all a {
        /* different style for the See all button on mobile and tablet */
        color: #69aa6f;
        font-weight: bold;
    }
    .cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item {
        /* items with picture (or icon) and title */
        height: 80px;
        line-height: 80px;
    }
    .cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cd-primary-nav .cd-nav-gallery .cd-nav-item {
        padding-left: 90px;
    }
    .cd-primary-nav .cd-nav-gallery .cd-nav-item img {
        position: absolute;
        display: block;
        height: 40px;
        width: auto;
        left: 20px;
        top: 50%;
        margin-top: -20px;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item {
        padding-left: 75px;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item p {
        color: #2e3233;
        font-size: 1.3rem;
        /* hide description on small devices */
        display: none;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item::before {
        /* item icon */
        content: '';
        display: block;
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -20px;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 40px 40px;
    }
    .cd-primary-nav {
        /* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */
        visibility: hidden;
        -webkit-transition: visibility 0s 0.3s;
        -moz-transition: visibility 0s 0.3s;
        transition: visibility 0s 0.3s;
    }
    .cd-primary-nav.nav-is-visible {
        visibility: visible;
        -webkit-transition: visibility 0s 0s;
        -moz-transition: visibility 0s 0s;
        transition: visibility 0s 0s;
    }
    .has-children>a, .go-back a {
        position: relative;
    }
    .has-children>a::before, .has-children>a::after, .go-back a::before, .go-back a::after {
        /* arrow icon in CSS - for element with nested unordered lists */
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -1px;
        display: inline-block;
        height: 2px;
        width: 10px;
        background: #ffffff;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .has-children>a::before, .go-back a::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .has-children>a::after, .go-back a::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .has-children>a {
        padding-right: 40px;
    }
    .has-children>a::before, .has-children>a::after {
        /* arrow goes on the right side - children navigation */
        right: 20px;
        -webkit-transform-origin: 9px 50%;
        -moz-transform-origin: 9px 50%;
        -ms-transform-origin: 9px 50%;
        -o-transform-origin: 9px 50%;
        transform-origin: 9px 50%;
    }
    .cd-primary-nav .go-back a {
        padding-left: 40px;
        text-align: center;
    }
    .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after {
        /* arrow goes on the left side - go back button */
        left: 20px;
        -webkit-transform-origin: 1px 50%;
        -moz-transform-origin: 1px 50%;
        -ms-transform-origin: 1px 50%;
        -o-transform-origin: 1px 50%;
        transform-origin: 1px 50%;
    }
    .cd-overlay {
        /* shadow layer visible when navigation is active */
        position: fixed;
        z-index: 2;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        cursor: pointer;
        background-color: rgba(33, 47, 120, 0.8);
        visibility: hidden;
        opacity: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
        -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
        transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
    }
    .cd-overlay.is-visible {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
        -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
        transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
    }
    .cd-overlay.is-visible {
        -webkit-transform: translateX(90%);
        -moz-transform: translateX(90%);
        -ms-transform: translateX(90%);
        -o-transform: translateX(90%);
        transform: translateX(90%);
    }
    .nav-on-left .cd-overlay.is-visible {
        -webkit-transform: translateX(90%);
        -moz-transform: translateX(90%);
        -ms-transform: translateX(90%);
        -o-transform: translateX(90%);
        transform: translateX(90%);
    }
    /* -------------------------------- 

    support for no js 

    -------------------------------- */
    .no-js .cd-primary-nav {
        position: relative;
        height: auto;
        width: 100%;
        overflow: visible;
        visibility: visible;
        z-index: 2;
    }
}