@font-face {
    font-family: 'NT Marley';
    src: url('font/NTMarley-Thin.eot');
    src: url('NTMarley-Thin.eot#iefix') format('embedded-opentype'),
        url('font/NTMarley-Thin.woff2') format('woff2'),
        url('font/NTMarley-Thin.woff') format('woff'),
        url('font/NTMarley-Thin.ttf') format('truetype'),
        url('NTMarley-Thin.svg#NTMarley-Thin') format('svg');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
  
}

@font-face {
    font-family: 'NT Marley';
    src: url('font/bold/NTMarley-Bold.eot');
    src: url('NTMarley-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/bold/NTMarley-Bold.woff2') format('woff2'),
        url('font/NTMarley-Thin.woff') format('woff'),
        url('font/NTMarley-Thin.ttf') format('truetype'),
        url('NTMarley-Bold.svg#NTMarley-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NT Marley';
    src: url('font/regular/NTMarleyRegular.eot');
    src: url('NTMarleyRegular.eot?#iefix') format('embedded-opentype'),
        url('font/regular/NTMarleyRegular.woff2') format('woff2'),
        url('font/regular/NTMarleyRegular.woff') format('woff'),
        url('font/regular/NTMarleyRegular.ttf') format('truetype'),
        url('NTMarleyRegular.svg#NTMarleyRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body,
html {
    font-family: 'NT Marley';
    font-size: 1vw;
    line-height: 1.16;
    font-weight: 100;
    max-width: 100vw;
    overflow-x: hidden;
    color: #111111;
}

.pageWrap {
    background-color: #00B6A6;
    background-image: linear-gradient( 45deg, #E2DF80, #00B6A6 );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pageWrap_inner { 
    background-color: transparent;
    background-image: url(images/GENET_background_pattern.svg );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    padding: 2rem 9.375rem;
}

.content_box {
    background-color: #ffffff;
    border: 2px solid #111111;
    width: 24rem;
    padding: 3rem 3rem 4rem;
    max-width: 100%;
}

.content_box h1 {
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.content_box h2 {
    font-size: 1.6rem;
    font-weight: 100;
    margin-bottom: 1.98rem;
}


.content_box img {
    width: 14.58rem;
}

.content_box h4 {
    width: 14.58rem;
    font-weight: regular;
    font-size: .8rem;
    margin-block: 1rem 2.34rem;
}

.content_box h4 a {
    text-decoration: none;
    color: #00B6A6;
}

.content_box .btn {
    font-size: 0.9375rem;
    line-height: 1;
    border: 2px solid #111111;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 5px;
    background-color: #ffffff;
    color: #111111;
    border-radius: 0;
    padding: 0.65em 2em;
    font-weight: normal;
    transition: all 0.3s ease-in-out;
}

.content_box .btn:hover,
.content_box .btn:active,
.content_box .btn:focus {
    outline: none;
    background-color: #111111;
    color: #ffffff;
}

@media( min-width: 1921px ) {
    body,
    html {
        font-size: 19.2px;
    }
}

@media( max-width: 1024px ) {
    .content_box,
    .content_box .btn {
        border-width: 1px;
    }
}

@media( max-width: 575px ) {
    body,
    html {
        font-size: 2.75vw;
    }
    .pageWrap {
        background-image: linear-gradient( 180deg, #00B6A6 15%, #E2DF80 );
    }
    .pageWrap_inner { 
        background-image: url(images/GENET_background_pattern_mobile.svg );
        padding: 6rem 0rem;
    }
    .content_box {
        width: 30.21rem;
        padding: 3rem;
    }
    .content_box img {
        width: 20rem;
    }
    .content_box h4 {
        width: 20rem;
        font-size: 1.34rem;
    }
    .content_box .btn {
        font-size: 1.1rem;
    }
}