@font-face {
    font-family: 'idmbold';
    src: url('/media/Font/idm-bold-webfont.woff2') format('woff2'),
         url('/media/Font/idm-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'idmregular';
    src: url('/media/Font/idm-regular-webfont.woff2') format('woff2'),
         url('/media/Font/idm-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'idmlight';
    src: url('/media/Font/idm-light-webfont.woff2') format('woff2'),
         url('/media/Font/idm-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width: 2140px){
    body{
        width: max-content;
    }
}

@media screen and (min-resolution: 120dpi) { 
    /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
    body {
        --fontsize-h1:0.8em;
        --fontsize-normal: 1.2em;
        --fontsize-firstletter:1em;
    }
}

:root{
    --margin-content: 7vw;
    --margin-reduce-content: 12vw;
    --color-green : #7ed957;
    --fontsize-h1:1em;
    --fontsize-normal: 1.5em;
    --fontsize-firstletter:1.2em;
}

html{
    height: 100%;
    width: 100vw;
}

h1, h2{
    font-size: var(--fontsize-h1);
    text-transform: uppercase;
}

h1::first-letter, h2::first-letter, .font-larger{
    font-size: var(--fontsize-firstletter);
}

.sticky{
    position: sticky;
    top: 0;
    z-index: 1100;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
}

body{
    font-family: 'sans-serif','idmregular', 'idmbold', 'idmlight';
    margin: 0px;
    width:100%;
    color: rgb(49, 48, 48);
    min-height: 100%;
}

.main-layout{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.main-image {
    min-height: 220px;
    max-width: 100%;
    max-height: 33vh;
    width: 100%;
    filter: blur(3px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}   

.main-image-wrapper{
    position: relative;
    margin-bottom: 50px;
}

.main-image-text {
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    margin: 0 10%;
    transform: translate(0%, -50%);
    color: aliceblue;
    text-align: center;
    width: 80%;
}

.idmbold, strong{
    font-family: 'idmbold';
}

.content  {
    margin-right: var(--margin-reduce-content);
    margin-left: var(--margin-reduce-content);
    font-size: var(--fontsize-normal);
    font-weight: 500;
    text-align: justify;
}

.reduce-content {
    margin-right: var(--margin-reduce-content);
    margin-left: var(--margin-reduce-content);
}

.content-h2-wrapper{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
.content-h2-title {
    border-bottom: 5px solid var(--color-green);
    text-align: center;
    padding-bottom: 10px;
}

.content-section{
    margin-bottom: 8vh;
}

li.checkicon::marker{
    content: url(/media/icons/iconmonstr-check-mark-12.svg);
}
li.checkicon{
    fill: var(--color-green);
}

.spaced-ul > li{
    margin-bottom: 20px;
}

.empty-div{
    height: 1px;
}

.arrow{
    margin-right: 20px;
    fill: var(--color-green);
}

.flex{
    display: flex;
    align-items: center;
}

.green-bullet > li::marker{
    color: var(--color-green);
}