@font-face {
        font-family: basefont;
        src: url(fonts/Cabin-Regular.ttf);
    }
    @font-face {
        font-family: header_font;
        src: url(fonts/HWYGEXPD.ttf);
    }
    @font-face {
        font-family: basefont_bold;
        src: url(fonts/Cabin-Bold.ttf);
    }
    @font-face {
        font-family: title_font;
        src: url(fonts/Cabin-Bold.ttf);
    }
    @font-face {
        font-family: italic_font;
        src: url(fonts/MKBritishWriting.ttf);
    }

    

    * {
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    list-style: none;
    text-decoration-color: none;
    }
   b {
    font-family:  Arial, Helvetica, sans-serif;
   }
    br {
        display: block;
    }
    
    h1 {
        font-family:  Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 3vw;
        text-transform: uppercase;
        margin-bottom: 1vw;
    }
    h2 {
        font-family:  Arial, Helvetica, sans-serif;
        font-size: 1.8vw;
    }

    p, li {
        font-size: 1.1vw;
        
    }
    .orange {
        color: #d15c2c;
    }
    .gray {
        color: #7a7a7a;
    }
    .white {
        color: white;
    }
    img {
        display: block;
        filter: none; 
        -webkit-filter: blur(0px); 
        -moz-filter: blur(0px); 
        -ms-filter: blur(0px);
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    
    .jump {
        width: 0;
        height: 0;
        position: relative;
        top: -6vw;
    }

    .hide {
        display: none !important;
    }


    /*  Buttons you can press  */ 
    .can_be_pressed {
        filter: gray; 
        -webkit-filter: grayscale(100%) brightness(140%);
        -moz-filter:    grayscale(100%) brightness(140%);
        -ms-filter:     grayscale(100%) brightness(140%);
        -o-filter:      grayscale(100%) brightness(140%);
        transition: scale 1s;
        -webkit-transition: 0.25s -webkit-filter linear;
        -moz-transition: 0.25s -moz-filter linear;
        -moz-transition: 0.25s filter linear;
        -ms-transition: 0.25s -ms-filter linear;
        -o-transition: 0.25s -o-filter linear;
        transition: 0.25s filter linear, 0.25s -webkit-filter linear;
    }
    .can_be_pressed:hover {
        filter: gray; 
        -webkit-filter: grayscale(100%) brightness(60%);
        -moz-filter:    grayscale(100%) brightness(60%);
        -ms-filter:     grayscale(100%) brightness(60%);
        -o-filter:      grayscale(100%) brightness(60%);
        cursor: pointer;
    }
    .can_be_pressed.pressed.right  {   
        filter: none;
        -webkit-filter: grayscale(100%) brightness(30%);
        -moz-filter:    grayscale(100%) brightness(30%);
        -ms-filter:     grayscale(100%) brightness(30%);
        -o-filter:      grayscale(100%) brightness(30%);
        cursor: pointer;
        transform: scale(0.6)!important;
    }
    .can_be_pressed.pressed  {   
        filter: none;
        -webkit-filter: grayscale(100%) brightness(30%);
        -moz-filter:    grayscale(100%) brightness(30%);
        -ms-filter:     grayscale(100%) brightness(30%);
        -o-filter:      grayscale(100%) brightness(30%);
        cursor: pointer;
        transform: scale(-0.6) !important;
    }
    /* loading screen */
    body.is_loading {
        overflow: hidden;
    }
    #loading_wrapper {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #d15c2c;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
    #image_container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    #loading_logo {
        position: absolute;
        width: auto;
        height: 35vh;
        top: 17vh;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    #image_container  #loading_circle{
        position: absolute;
        top: 57vh;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: auto;
        height: 12vh;
        animation: spin 1s infinite linear;
    }
    @keyframes spin {
        from {transform: rotate(0deg);
        } to {
            transform: rotate(360deg)
        }
    }


    /* Popup for text */
    #site.no_scroll {
        overflow: hidden;
    }
    #text_popup_wrapper {
        position: fixed;
        z-index: 10;
        bottom: 3vw;
        left: 0;
        width: 100%;
        height: 0%;
        background-color: #3c3c3c;
        transition: height 1s;
        overflow: auto;
    }
    #text_popup_close_area {
        position: absolute;
        z-index: 5;
        top: 8vw;
        width: 100%;
        height: 100vh;
    }
    #text_popup_wrapper.expandet {  
        height: 100%;
    }
    
    #text_popup_wrapper a img {
        position: fixed;
        z-index: 100;
        left: 96vw;
        top: 100vh;
        width: 2vw;
        height: auto;
        transition: top 1s;
    }
    #text_popup_wrapper a img.expandet {
        top: 6vw;  
    }
    #Impressum_text {
        position: relative;
        z-index: 10;
        width: 60%;
        margin-left: 20%;
        margin-bottom: 5vw;
        margin-top: 10vw;
    }
    #Impressum_text a{
        color: white;
    }
    #Impressum_text a:hover{
        color: #d15c2c;
    }
    #Impressum_text h2{
        color: #d15c2c;
    }
    #Impressum_text h3{
        color: #d15c2c;
        margin: 0;
        margin-top: 20px;
        margin-bottom: 5px;
    }
    #Impressum_text p {
        width: 100%;
    }
    #Impressum_text li::before {
        display: inline-block;
        background: url("../images/jobs/bullet.png") no-repeat 0 0;
        background-size: 100%;
        margin-right: 5px;
            content: "";
        width: 10px;
        height: 10px;
        color: #d15c2c;
    }
    /* Key art */
    #key_art_wrapper img {
        position: fixed;
        width:100%;
        left: 0;
        top: 5vw;
        z-index: -1;
    }
    /* Main page */
    #main_page {
        z-index: 5;
        margin-top: 47vw;
    } 
    .splitter {
        width: 6vw;
    }
    #top_off_page{
        position: relative;
        top: -48vw;
    }
    /* about page */
    #about_splitter {
        height: 0px;
    }
    #about_hill {
        position:relative;
        top:  calc(-5.2vw);
        width: 100%;
        height: auto;
    }
    #about_icon {
        position:relative;
        top:  -13.35vw ;
        left: 47vw ;
        
    }
    #about_main {
        padding-top: 2vw;
        margin-top: -0.5vw;
        background-color: white;
    }
    .section_header {
        position: relative;
        top: -6px;
        padding-left: 20vw;
    }

    #about_left {
        position: relative;
        float: left;
        margin-right: 20px;
        padding-bottom: 1vw;
        width: calc(20vw - 20px);
        z-index: 5;
    }
    #about_right {
        position: relative;
        float: right;
        margin-left: 20px;
        padding-bottom: 1vw;
        width: calc(43.5vw - 43.5px);
        background-color: white;
        z-index: 5;
    }
    #about_left img, #about_right img {
        
        width: 100%
    }
    #about_text {
        height: 21.1vw;
        width: 40vw;
    }
    #about_text p {
        height: 100%;
        text-align: justify;
        text-justify: newspaper;
    }
    #about_text br {
        margin: 2px 0;
    }
    #about_info {
        position: relative;
        clear: both;
        width: calc(100% - 20vw);
        margin-left: 20vw;
    }
    #nomination_wrapper{
        position: relative;
        top: 0.4vw;
        width: 100%;
        padding-bottom: 2.2vw;
        z-index: 1;
    }

    #award_wrapper {
        position: absolute;
        width: 100%;
        height: 8vw;
        display: inline-block;
        text-align: center;
        overflow: hidden;
    }
    .award {
        position: absolute;
        text-align: center;
        height: 100%;
        width: 22vw;
        left: 0;
        top:0;
        float: left;
        transition: 2s;
        vertical-align: middle;
    }
    .class_award_0 {
        left: -6vw;
        display: block;
        filter: opacity(1%);
        -webkit-filter: opacity(1%);
        -moz-filter:    opacity(1%);
        -ms-filter:     opacity(1%);
        -o-filter:      opacity(1%);
    }
    .class_award_1 {
        left: 12vw;
        display: block;
        filter: opacity(100%);
        -webkit-filter: opacity(100%);
        -moz-filter:    opacity(100%);
        -ms-filter:     opacity(100%);
        -o-filter:      opacity(100%);
    }
    .class_award_2 {
        left: 30vw;
        display: block;
        filter: opacity(100%);
        -webkit-filter: opacity(100%);
        -moz-filter:    opacity(100%);
        -ms-filter:     opacity(100%);
        -o-filter:      opacity(100%);
    }
    .class_award_3 {
        left: 48vw;
        display: block;
        filter: opacity(100%);
        -webkit-filter: opacity(100%);
        -moz-filter:    opacity(100%);
        -ms-filter:     opacity(100%);
        -o-filter:      opacity(100%);
    }
    .class_award_4 {
        left: 66vw;
        display: block;
        filter: opacity(100%);
        -webkit-filter: opacity(100%);
        -moz-filter:    opacity(100%);
        -ms-filter:     opacity(100%);
        -o-filter:      opacity(100%);
    }
    .class_award_5 {
        left: 84vw;
        display: block;
        filter: opacity(1%);
        -webkit-filter: opacity(1%);
        -moz-filter:    opacity(1%);
        -ms-filter:     opacity(1%);
        -o-filter:      opacity(1%);
    }
    
    .award img {
        max-height: 10vw;
        height: auto;
        width: auto;
        max-width: 17vw;
        display: block;
        margin: 0 auto;

    }
    #award_wrapper .award_text:hover p,#award_wrapper .award_text:hover h2 {
        color: #2c2c2c;
        cursor: pointer;
    }
    #award_wrapper p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1vw;
        float: none;
        color: white;
    }
    #award_wrapper h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5vw;
        float: none;
        color: white;
    }
    .award_text {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        width: 17vw; 
    }
    #award_wrapper a {
        display: block;
    }
    #nomination_left {
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 33vw;
    }
    #nomination_right {
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 66vw;
    }
    #about_staff { 
        height: auto;
        display: inline-block;
        margin-left: 10vw;
        width: 80vw;
        clear: both;
    }
    .about_staff_image img {
        width: 9vw;
        margin: 1vw;
        max-width: 224px;
    }
    #about_staff ul {
        float: left;
        padding-right: 3.1vw;
    }
    #about_staff ul li {
        display:table;
        margin:0px auto;
    }
    /* Project sections */
    #project_icon {
        position:relative;
        top:   3.2vw;
        left: 47vw;
    }
    #project_section .section_header {
        margin: 30px 0;

    }
    #project_section{
        background-color: #d15c2c;
        padding-top: 40px;
    }

    #eksra_site {
        height: 1000px;
        background-color: #d15c2c;
    }
    /* Jobs section */

    #job_icon { 
        position:relative;
        top:   4.05vw;
        left: 47vw;
        padding-bottom: 1vw;
    }
    #job_section {
        background-color: white;
        padding-top: 10vw;
        padding-left: 20vw;
        padding-right: calc(100% - 80vw);
        padding-bottom: 10vw;
        width: 60vw;

    
    }

    #job_intro {
        margin-top: 0.5vw;
    }
    #job_positions{
        width: 100%;
        height: auto;
    }
    .job_name {
    margin-left: -2.3vw;
    position: relative;
    text-transform: uppercase;
    color: #2c2c2c;
    display: inline-block;
    padding: 0.5vw 0;
    width: 100%;
    }
    .job_plus_img{
        width: 1.8vw;
    }
    #job_section a {
        color: #2c2c2c;
    }
    #job_section h2 {
        font-size: 1.4vw;
        margin-top: 0.2vw;
    }
    #job_section h3 {
        margin-top: 1.5vw;
        font-size: 1.2vw;
    }
    #job_section a:hover {
        color: #d15c2c;
    }
    a:visited {
        color: #2c2c2c;
    }
    .job_name:hover {
        color: #d15c2c;
    }
    .job_name img {
        float: left;
        
        padding-right: 0.5vw;
    }
   
    /* contact section */
    .contact_in {
        width: 1vw;
        float: right;
        margin-left: 0.2vw;
        margin-top: 0.1vw;
    }
    .contact_person:hover .contact_in {
        filter:darken;
        -webkit-filter: brightness(20%); 
        -moz-filter: brightness(20%); 
        -ms-filter: brightness(20%); 
    }
    #contact_section{
        background-color: #d15c2c;
        
    }
    #contact_icon { 
        position:relative;
        top:   -3vw;
        left: 47vw;
    }

    #contact_info {
        margin-left: 20vw;
        color: white;
        display: inline-block;
        height: auto;
    }
    #contact_intro {
        width: 60vw;
        margin-left: 20vw;
        padding-bottom: 2.5vw;
    }
    #contact_info ul {
        float: left;
        margin-right: 15vw;
    }
    #contact_info ul li{
        margin-bottom: 0.4vw;
    }
    #contact_section a:hover {
        color: #2c2c2c;
    }
    #contact_section a {
        color: white;
    }
    #google_map {
        width: 100%;
        height: 25vw;
        margin-top: 2vw;
        margin-bottom: 3vw;
    }