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

Primary style

-------------------------------- */
html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

Main components 

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

.cd-nav {
    z-index: 1000;
}

    .cd-nav ul {
        /* mobile first */
        position: absolute;
        display: block;
        width: auto;
        max-width: none;
        bottom: auto;
        top: 36px;
        left: 0;
        padding: 1em 2em;
        border-radius: 0.5em;
        box-shadow: none;
        background: transparent;
        visibility: visible;
        overflow: visible;
        z-index: 1000;
        /* Force Hardware Acceleration in WebKit */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        transition: all 0s;
        -webkit-transform-origin: 15px 35px;
        -moz-transform-origin: 15px 35px;
        -ms-transform-origin: 15px 35px;
        -o-transform-origin: 15px 35px;
        transform-origin: 15px 35px;
    }

        .cd-nav ul:after {
            left: -10px;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            top: 20px;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-right: 15px solid white;
            -webkit-transition: -webkit-transform 0.4s, visibility 0s 0s;
            -moz-transition: -moz-transform 0.4s, visibility 0s 0s;
            transition: transform 0.4s, visibility 0s 0s;
        }

        .cd-nav ul li {
            /* Force Hardware Acceleration in WebKit */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            display: inline-block;
        }

        .cd-nav ul.is-visible {
            visibility: visible;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            -webkit-transition: -webkit-transform 0.4s, visibility 0s 0s;
            -moz-transition: -moz-transform 0.4s, visibility 0s 0s;
            transition: transform 0.4s, visibility 0s 0s;
        }

            .cd-nav ul.is-visible:after {
                left: -14px;
                -webkit-transition: all 0.4s ease-in-out;
                -moz-transition: all 0.4s ease-in-out;
                -ms-transition: all 0.4s ease-in-out;
                -o-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
            }

            .cd-nav ul.is-visible li:nth-child(1) {
                /* list items animation */
                -webkit-animation: cd-slide-in 0.3s;
                -moz-animation: cd-slide-in 0.3s;
                animation: cd-slide-in 0.3s;
            }

            .cd-nav ul.is-visible li:nth-child(2) {
                -webkit-animation: cd-slide-in 0.4s;
                -moz-animation: cd-slide-in 0.4s;
                animation: cd-slide-in 0.4s;
            }

            .cd-nav ul.is-visible li:nth-child(3) {
                -webkit-animation: cd-slide-in 0.5s;
                -moz-animation: cd-slide-in 0.5s;
                animation: cd-slide-in 0.5s;
            }

            .cd-nav ul.is-visible li:nth-child(4) {
                -webkit-animation: cd-slide-in 0.6s;
                -moz-animation: cd-slide-in 0.6s;
                animation: cd-slide-in 0.6s;
            }

            .cd-nav ul.is-visible li:nth-child(5) {
                -webkit-animation: cd-slide-in 0.7s;
                -moz-animation: cd-slide-in 0.7s;
                animation: cd-slide-in 0.7s;
            }

            .cd-nav ul.is-visible li:nth-child(6) {
                -webkit-animation: cd-slide-in 0.8s;
                -moz-animation: cd-slide-in 0.8s;
                animation: cd-slide-in 0.8s;
            }

            .cd-nav ul.is-visible li:nth-child(7) {
                -webkit-animation: cd-slide-in 0.9s;
                -moz-animation: cd-slide-in 0.9s;
                animation: cd-slide-in 0.9s;
            }

            .cd-nav ul.is-visible li:nth-child(8) {
                -webkit-animation: cd-slide-in 1s;
                -moz-animation: cd-slide-in 1s;
                animation: cd-slide-in 1s;
            }

            .cd-nav ul.is-visible li:nth-child(9) {
                -webkit-animation: cd-slide-in 1.1s;
                -moz-animation: cd-slide-in 1.1s;
                animation: cd-slide-in 1.1s;
            }

            .cd-nav ul.is-visible li:nth-child(10) {
                -webkit-animation: cd-slide-in 1.2s;
                -moz-animation: cd-slide-in 1.2s;
                animation: cd-slide-in 1.2s;
            }

            .cd-nav ul.is-visible li:nth-child(11) {
                -webkit-animation: cd-slide-in 1.3s;
                -moz-animation: cd-slide-in 1.3;
                animation: cd-slide-in 1.3s;
            }

            .cd-nav ul.is-visible li:nth-child(12) {
                -webkit-animation: cd-slide-in 1.4s;
                -moz-animation: cd-slide-in 1.4;
                animation: cd-slide-in 1.4s;
            }

    .cd-nav.is-fixed ul {
        position: absolute;
        width: 100%;
        max-width: 250px;
        top: 24em;
        left: 0;
        display: block;
        bottom: auto;
        background: white;
        visibility: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }

    .cd-nav.is-fixed.tv ul {
        top: 31.5em;
    }

    .cd-nav.is-fixed ul li {
        display: block;
        overflow: hidden;
    }

        .cd-nav.is-fixed ul li a {
            padding: 0;
            margin-left: 0;
            margin-right: 0;
        }

            .cd-nav.is-fixed ul li a.selected {
                font-weight: bold;
            }

        .cd-nav.is-fixed ul li i {
            padding-right: 16px;
            font-size: 28px;
            vertical-align: middle;
            font-weight: normal;
        }

    .cd-nav li a {
        display: block;
        color: #808080 !important;
        text-decoration: none;
        opacity: 1 !important;
        padding: 0.4em;
        margin-left: 1.6em;
        border-bottom: none;
    }

        .cd-nav li a:hover {
            color: #777;
            text-decoration: none;
        }

    .cd-nav li:last-child a {
        border-bottom: none;
    }

    .cd-nav ul.has-transitions {
        /* this class is used to bring back transitions when the navigation moves at the bottom right */
        -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
        -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
        transition: transform 0.3s, visibility 0s 0.3s;
    }

    .cd-nav ul.is-visible {
        /* this class is used to bring back the navigation animation - as on touch devices */
        visibility: visible;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform 0.5s, visibility 0s 0s;
        -moz-transition: -moz-transform 0.5s, visibility 0s 0s;
        transition: transform 0.5s, visibility 0s 0s;
    }

    .cd-nav ul.is-hidden {
        /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }

@media only screen and (min-width: 991px) {
    .cd-nav.is-fixed ul {
        width: 90%;
        max-width: 250px;
        top: 15.7em;
        left: 250px;
        display: block;
    }

    .cd-nav.is-fixed.reports ul {
        top: 20.1em;
    }

    .cd-nav.is-fixed.tv ul {
        top: 24.4em;
    }

    .cd-nav.is-fixed.local-radio ul {
        top: 28.6em;
    }

    .cd-nav.is-fixed.admin ul {
        top: 54.2em;
    }
}

@media (max-height: 820px) {
    .cd-nav.is-fixed ul {
        top: 13.9em;
    }

    .cd-nav.is-fixed.reports ul {
        top: 17.6em;
    }

    .cd-nav.is-fixed.tv ul {
        top: 21.2em;
    }

    .cd-nav.is-fixed.local-radio ul {
        top: 24.7em;
    }

    .cd-nav.is-fixed.admin ul {
        top: 28.7em;
    }
}

@media (max-height: 620px) {
    .cd-nav.is-fixed ul {
        top: 12.3em;
    }

    .cd-nav.is-fixed.reports ul {
        top: 15.1em;
    }

    .cd-nav.is-fixed.tv ul {
        top: 17.8em;
    }

    .cd-nav.is-fixed.local-radio ul {
        top: 20.8em;
    }

    .cd-nav.is-fixed.admin ul {
        top: 32.7em;
    }
}

@-webkit-keyframes cd-slide-in {
    0% {
        -webkit-transform: translateX(-60px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes cd-slide-in {
    0% {
        -moz-transform: translateX(-60px);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@keyframes cd-slide-in {
    0% {
        -webkit-transform: translateX(-60px);
        -moz-transform: translateX(-60px);
        -ms-transform: translateX-(60px);
        -o-transform: translateX(-60px);
        transform: translateX(-60px);
    }

    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes cd-bounce-in {
    0% {
        -webkit-transform: scale(0);
    }

    60% {
        -webkit-transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes cd-bounce-in {
    0% {
        -moz-transform: scale(0);
    }

    60% {
        -moz-transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@keyframes cd-bounce-in {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }

    60% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}