@font-face {
    font-family: 'DINProRegular';
    src: url('../fonts/DINPro.eot');
    src: url('../fonts/DINPro.eot?#iefix') format('embedded-opentype'), url('../fonts/DINPro.woff2') format('woff2'), url('../fonts/DINPro.woff') format('woff'), url('../fonts/DINPro.ttf') format('truetype'), url('../fonts/DINPro.svg#DINPro') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINProMedium';
    src: url('../fonts/DINPro-Medium.eot');
    src: url('../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/DINPro-Medium.woff2') format('woff2'), url('../fonts/DINPro-Medium.woff') format('woff'), url('../fonts/DINPro-Medium.ttf') format('truetype'), url('../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'DINProLight';
    src: url('../fonts/DINPro-Light.eot');
    src: url('../fonts/DINPro-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/DINPro-Light.woff2') format('woff2'), url('../fonts/DINPro-Light.woff') format('woff'), url('../fonts/DINPro-Light.ttf') format('truetype'), url('../fonts/DINPro-Light.svg#DINPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'DINProBold';
    src: url('../fonts/DINPro-Bold.eot');
    src: url('../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/DINPro-Bold.woff2') format('woff2'), url('../fonts/DINPro-Bold.woff') format('woff'), url('../fonts/DINPro-Bold.ttf') format('truetype'), url('../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

a[href^="mailto:"] {
    color: #5cb334;
}

    a[href^="mailto:"]:hover {
        text-decoration: none;
    }

div[data-href*="/"] {
    cursor: pointer;
}

.linkedin-icon {
    font-size: 25px;
    color: #0084bf;
    cursor: pointer;
}
/* Text Style */
.small-headline {
    font-size: 20px;
    font-family: "DINProRegular";
}

.main-headline {
    font-size: 41px;
    font-family: "DINProMedium";
    margin-top: 10px;
}

.main-text {
    font-size: 20px;
    font-family: "DINProLight";
}

    .main-text p {
        margin-bottom: 0;
    }

.center-text-block .small-headline {
    font-size: 20px;
    font-family: "DINProRegular";
}

.center-text-block .main-headline {
    font-size: 41px;
    font-family: "DINProMedium";
    margin-top: 10px;
    width: 55%;
    margin: 20px auto;
}

.center-text-block .main-text {
    font-size: 20px;
    font-family: "DINProLight";
    width: 75%;
    margin: 20px auto;
}

.main-text-shadow {
    text-shadow: black 4px 4px 2px;
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
    .small-headline {
        font-size: 20px;
        font-family: "DINProRegular";
    }

    .main-headline {
        font-size: 31px;
        font-family: "DINProMedium";
    }

    .main-text {
        font-size: 20px;
        font-family: "DINProLight";
    }

    .center-text-block .small-headline {
        font-size: 20px;
        font-family: "DINProRegular";
    }

    .center-text-block .main-headline {
        font-size: 31px;
        font-family: "DINProMedium";
    }

    .center-text-block .main-text {
        font-size: 20px;
        font-family: "DINProLight";
    }
}

@media only screen and (min-width : 320px) and (max-width : 568px) {
    .small-headline {
        font-size: 16px;
        font-family: "DINProRegular";
    }

    .main-headline {
        font-size: 21px;
        font-family: "DINProMedium";
    }

    .main-text {
        font-size: 16px;
        font-family: "DINProLight";
    }

    .center-text-block .small-headline {
        font-size: 16px;
        font-family: "DINProRegular";
        width: 100%;
    }

    .center-text-block .main-headline {
        font-size: 24px;
        font-family: "DINProMedium";
        width: 100%;
    }

    .center-text-block .main-text {
        font-size: 16px;
        font-family: "DINProLight";
        width: 100%;
    }
}

.left-text-block {
    width: 38%;
}

.center-text-block {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.right-text-block {
    width: 38%;
    float: right;
    text-align: right;
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
    .left-text-block {
        width: 50%;
    }

    .center-text-block {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .right-text-block {
        width: 50%;
        float: right;
        text-align: right;
    }
}

@media only screen and (min-width : 320px) and (max-width : 767px) {
    .left-text-block {
        width: 100%;
    }

    .center-text-block {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .right-text-block {
        width: 100%;
        float: none;
        text-align: right;
    }
}