/* devanagari */
@font-face {
    font-family  : "KeepCalmMedium";
    font-style   : normal;
    font-weight  : 500;
    font-display : swap;
    src          : url(../fonts/KeepCalmMedium/font.woff) format("woff"); url(../fonts/KeepCalmMedium/font.woff2) format("woff2");
}

@font-face {
    font-family  : "KeepCalmMediumItalic";
    font-style   : italic;
    font-weight  : 500;
    font-display : swap;
    src          : url(../fonts/KeepCalmMediumItalic/font.woff) format("woff"); url(../fonts/KeepCalmMediumItalic/font.woff2) format("woff2");
}

body {
    display         : flex;
    align-items     : stretch;
    min-height      : 100vh;
    font-family     : "KeepCalmMedium", sans-serif;
    line-height     : 1.5;
    color           : #fff;
    height          : 100%;
    background      : #141414 url("../images/AJ_Web_Memos_Startseite-ohne-schrift-verlauf.jpg") no-repeat right center;
    background-size : cover;
    overflow        : hidden;
}

.container-fluid {
    animation         : fadein 2.5s;
    -moz-animation    : fadein 2.5s; /* Firefox */
    -webkit-animation : fadein 2.5s; /* Safari and Chrome */
    -o-animation      : fadein 2.5s; /* Opera */
}

@keyframes fadein {
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}

.left-side {
    display         : flex;
    justify-content : center;
    padding-bottom  : 75px;
}

.right-side img {
    display : none;
}

.btn-order {
	background : #e14167;
	padding: 5px 9px;
}

@media screen and (max-width : 1199px) {
    body {
        height          : auto;
        min-height      : 2500px;
        overflow        : unset;
        background      : #8d8d8c url("../images/AJ_Web_Memos_Startseite-1200px-verlauf.jpg") no-repeat bottom center;
        background-size : 100%;
    }

    .right-side img {
        display : none;
    }
}

.text-medium {
    color       : #fff;
    font-size   : 18px;
    line-height : 1.5;
    font-weight : 400;
    max-width   : 400px;
}

.text-small {
    color       : #fff;
    font-size   : 14px;
    line-height : 1.4;
    font-weight : 400;
    max-width   : 290px;
    font-family : "KeepCalmMediumItalic", sans-serif;
}

.text-xs {
    color       : #fff;
    font-size   : 14px;
    line-height : 1.4;
    font-weight : 400;
    max-width   : 390px;
    position    : relative;
}

.text-xs::before {
    content    : "";
    position   : absolute;
    top        : -9px;
    left       : calc(-100vw + 140px);
    right      : 100%;
    bottom     : 0;
    background : #e14167;
    width      : 100vw;
    z-index    : -1;
    height     : 36px;
}

.logo {
    max-width     : 100%;
    width         : 150px;
    margin-bottom : 25px;
}

a {
    color : #fff;
}

a:hover {
    color : #fff;
}

@media screen and (max-width : 991.98px) {
    body {
        min-height : 2100px;
    }
}

@media (max-width : 767.98px) {
    body {
        min-height : 1900px;
    }

    .right-side {
        background-size : 100%;
    }
}

@media (max-width : 575.98px) {
    body {
        min-height      : 1600px;
        background-size : cover;
    }


    .logo {
        width         : 100px;
    }
}

@media (max-width : 425px) {
    body {
        min-height : 1400px;
    }
}