:root {

    --color-white: #FFFFFF;

    --color-yellow: #F0EA56;

    --color-lightgreen: #8CF4C4;

    --color-ibb: #02DD77;

    --color-obb: #F09DC4;

    --color-blue: #22DDF9;

    --color-darkblue: #003553;

}



@font-face {

    font-family: National;

    src: url('fonts/NationalWeb-Book.woff'), url('fonts/NationalWeb-Book.eot'); /* IE */

    font-weight: normal;

}



@font-face {

    font-family: National;

    src: url('fonts/NationalWeb-Semibold.woff'), url('fonts/NationalWeb-Semibold.eot'); /* IE */

    font-weight: bold;

}



@font-face {

    font-family: National-ExtraBold;

    src: url('fonts/NationalWeb-Extrabold.woff'), url('fonts/NationalWeb-Extrabold.eot'); /* IE */

}



body {

    font-family: National,Arial, Helvetica, sans-serif;

    font-size: 120%;

    color: var(--color-darkblue);

    background-color: var(--color-darkblue);

    margin: 0px 0px 0px 0px;



}



div {

	

	}

    

div.main{

    margin: 0px auto 0px auto;



}





div.chunk {

    

}







div.chunkcontent {

    margin: 0px auto 0px auto;

    max-width: 170mm;

    padding: 24px 20px 40px 20px;

    overflow: auto;

    background-color:inherit

}









#header {

    background-color: var(--color-white);

    background-image: url("backgrounds/background-header-3000.jpg");

    background-position: center bottom;

    background-repeat: no-repeat;

}



#headercontent {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0px auto 0px auto;

    height: 120mm;

    max-width: 170mm;

    position: relative;

}



#logo {

    display: inline-block;

    padding: 0px 0px 120px 0px;

    width: 60%;

}



#ibb {

    position: absolute;

    width: 20%;

    left: calc(100px - 15%);

    bottom: 0px;

    padding: 0px;

}



#obb {

    position: absolute;

    width: 20%;

    right: calc(100px - 15%);

    bottom: 0px;

    padding: 0px;

}



#intro {

    background-color: var(--color-obb);

    

}

#news {

    background-color: var(--color-yellow);

    background-image: url("backgrounds/background-intro-3000.jpg");

    background-position: center top;

    background-repeat: no-repeat;

}

#platforms {

    background-color: var(--color-blue);

}

#details {

    background-color: var(--color-lightgreen);

}

#contact {

    background-color: var(--color-white);

    background-image: url("backgrounds/background-contact-3000.jpg");

    background-position: center bottom;

    background-repeat: no-repeat;

}



.video-container {

    position: relative;

    margin: 30px 0px 30px 0px;

    padding-bottom: 56.30%;

    padding-top: 0px;

    height: 0;

    overflow: hidden;

}



.video-container iframe, .video-container object, .video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



h1 {

    font-family: National-ExtraBold;

    font-size: 200%;

    margin-block-start: 0px;

    margin-block-end: 30px;

    line-height: 100%;

}



p {

    margin: 10px 0px 4px 0px;

    line-height: 145%;

    clear: both;

}



a {

    color:var(--color-darkblue);

    text-decoration: underline;

    font-weight: bold;

    /*border-style: solid;

	border-width: 0px 0px 1px 0px;*/

}



a:link, a:visited {

    

}

a:hover {

    color: var(--color-darkblue);

}



a:active {

    

}



.buttonholder {

    margin: 12px 0px 0px 0px;

}



.button {

    color: var(--color-white);

    background-color: var(--color-darkblue);

    border: none;

    border-radius: 25px;

    width: 80mm;

    height: 50px;

    text-decoration: none;

    font-family: National-ExtraBold;

    font-size: 100%;

    text-align: left;

    margin: 0px 0px 12px 0px;

    padding: 0px 0px 4px 24px;

    cursor: pointer;

    float:left;

    clear:both;

    

}



@media only screen and (max-width: 150mm) {

    /* For mobile phones: */

    #header {

        background-image: none;

    }

    

    #intro {

        background-image: none;

    }



	#news {

        background-image: none;

    }



    #contact {

        background-image: none;

    }



    #headercontent {

        max-height: 80vw;

    }



    .button {

        width: 100%;

        max-width:65mm;

        height: 40px;

        text-decoration: none;

        font-family: National-ExtraBold;

        font-size: 80%;

        text-align: left;

        margin: 0px 0px 12px 0px;

        padding: 0px 0px 2px 20px;

        cursor: pointer;

    }

}



@media only screen and (max-width: 1400px) {

    #header {

        background-image: url("backgrounds/background-header-1400.jpg");

    }

    #news {

        background-image: url("backgrounds/background-intro-1400.jpg");

    }

    #contact {

        background-image: none;

    }

}