/*---------------------------------------
   1. IMPORT WEB FONTS
-----------------------------------------*/
/*@font-face {
    font-family: 'EksjaExtremesRegular'; src: url(/includes/fonts/Eksja-regular.eot);
    src: local('?'), url(/includes/fonts/Eksja-regular.woff) format('woff'), url(/includes/fonts/Eksja-regular.ttf) format('truetype'), url(/includes/fonts/Eksja-regular.svg#webfont) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gudea'; src: url(/includes/fonts/Gudea-Regular.otf) format('opentype'), url(/includes/fonts/Gudea-Regular.ttf) format('truetype'); font-weight: normal; font-style: normal;
}*/

@import url('//fonts.googleapis.com/css?family=Open+Sans');

@font-face {
    font-family: 'Stratum'; src: url(/includes/fonts/Stratum2-Regular.otf) format('opentype'); font-weight: normal; font-style: normal;
}

/*---------------------------------------
   TIMLINEJS OVERRIDE
-----------------------------------------*/
.tl-slide {
    background: linear-gradient(#ffffff 56%, #b7a99a);
}

.tl-timeline p {
    font-size: 19px;
}

.tl-text .tl-headline-date, .tl-text h3.tl-headline-date {
    font-size: 26px;
    margin-bottom: 0.5em;
}

.tl-text h2.tl-headline {
    /* font-size: 26px !important; */
}

.tl-headline {
    color: #d73f09 !important;
}

.tl-timeaxis-background {

}

.tl-caption {
    font-size: 15px !important;
    line-height: 1.33em !important;
    text-align: center;
}

.tl-timemarker .tl-timemarker-content-container {
    background-color: #ffffff;
}

.tl-timenav {
    background: linear-gradient(#d73f09 33.33%, #ed5516);
}

.tl-slide-titleslide .tl-media-content-container {
    position: relative; left: 9%;
}

.tl-slidenav-title {
    line-height: 14px !important;
}

/*---------------------------------------
   STYLES
-----------------------------------------*/
html, body {
    height: 100%;
}

body {
    font: normal 16px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0; margin: 0;
}

iframe {
    width: 100%; min-height: 480px;
}

button:hover {
    cursor: pointer;
}

/*#content {
    height: 100%; width: 100%; !*margin-top: 60px;*!
    margin: 0;
    padding: 0;
}*/

.collapse {
    display: none;
}

.modal-lg {

}

#webform-frame {
    height: calc(71vh); overflow-y: auto;
}

/*---------------------------------------
  UI HEADER
-----------------------------------------*/
.ui_header {
    position: fixed; top: 0;
    width: 100%;
    height: 110px;
    background: linear-gradient(#ed5516 13%, #d73f09);
    /*background: #d73f09;*/
    z-index: 9999;
}

    .ui_header img {
        height: 44px;
        position: absolute;
        top: 50%;
        left: 3.33%;
        margin-top: -26px;
    }

    div.ui_slogan {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -206px;
        font-family: "Stratum", Sans-Serif; font-size: 22px;
        letter-spacing: 0.033em;
        text-transform: uppercase;
        color: #fdd26e;
    }

    div.ui_slogan span {
        padding-left: 11px; padding-right: 11px;
    }

    @media (max-width: 800px) {

        .ui_header img {
            left: 50%;
            margin-left: -88px;
        }

        div.ui_slogan {
            display: none;
        }

    }

/*-------------------------------------------
  TITLE SLIDE ANIMATION
 --------------------------------------------*/
.rotate-container {
    position: absolute; top: 50%; left: 50%; z-index: 3;
    width: 260px; height: 260px; margin-left: -130px; margin-top: -130px;
}

@media (min-width: 651px) {

    .rotate-container {
        width: 148px; height: 148px; margin-left: -74px; margin-top: -74px;
    }

}

@media (min-width: 701px) {

    .rotate-container {
        width: 180px; height: 180px; margin-left: -90px; margin-top: -90px;
    }

}

@media (min-width: 800px) {

    .rotate-container {
        width: 200px; height: 200px; margin-left: -100px; margin-top: -100px;
    }

}

@media (min-width: 900px) {

    .rotate-container {
        width: 300px; height: 300px; margin-left: -150px; margin-top: -150px;
    }

}

@media (min-width: 1140px) {

    .rotate-container {
        width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;
    }

}

@media (min-width: 1400px) {

    .rotate-container {
        width: 580px; height: 580px; margin-left: -280px; margin-top: -295px;
    }

}

.rotate {
    -webkit-animation: spin 150s linear 0s infinite normal;
    -moz-animation: spin 150s linear 0s infinite normal;
    -ms-animation: spin 150s linear 0s infinite normal;
    -o-animation: spin 150s linear 0s infinite normal;
    animation: spin 150s linear 0s infinite normal;
    /*-webkit-animation-fill-mode: forwards; !* Safari 4.0 - 8.0 *!
    animation-fill-mode: forwards;*/
}

@-moz-keyframes spin {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
    0%   { transform:rotate(0deg); }
    100% { transform:rotate(-360deg); }
}