@media screen and (min-width: 1200px) {
    .right-padding {
        padding-right: 22%;
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    #firstPageBack {
        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        /*background-image: url(../img/Triangle_cropped.svg), radial-gradient(55% 60%, rgba(255, 255, 255, 0.1) 0%, rgba(60, 20, 168, 1) 99%);*/
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 115%, 100% 74%, auto;
    }

    #logo {
        width: 80%;
        padding-top: 8%;
    }

}

@media screen and (max-width: 1100px ) {
    html, body {
        font-size: 14px;
    }

    #companyName {
        padding-top: 5%;
        font-family: 'Nexa Bold', Helvetica, sans-serif;
        /*font-size: 4.6em;*/
        color: #14093B;
    }

    #logo {
        margin-top: 20%;
    }

    .header-icon {
        width: 40%;
        height: auto;
    }
}

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

    .main-button {
        height: auto;
        margin: 0 auto;
        width: 90%;
    }

    .contact-us-icon {
        width: 22%;
    }
}

* * header

@media screen and (max-width: 768px) {
    html, body {
        font-size: 12px;
    }

    .header-icon > img {
        width: 45%;
        height: auto;
    }

    #slogan {
        padding-left: 2%;
        padding-right: 2%;

    }

    #idontknowwhy {
        margin-top: 70%;
    }

    .img-for-case {
        border: 10px solid black;
        max-width: none;
        width: 100px;
        height: auto;
    }

}

@media screen and (max-width: 600px) {
    html, body {
        font-size: 12px;
    }


}

@media screen and (max-width: 514px) {
    html, body {
        font-size: 10px;
        overflow-x: hidden;
        width: 100vw;
    }

    .grid-text {
        text-align: center;
    }

    #firstPageBack {

    }
}

@media screen and (max-width: 640px) and (min-width: 601px) {
    #firstPageBack {

        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 115%, 100% 69%, 100%;
    }
}

@media screen and (max-width: 555px) and (min-width: 500px) {
    #firstPageBack {

        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 115%, 100% 62%, 100%;
    }
    .sticky-case {
        position: inherit;
        top:0;
    }
}

@media screen and (max-width: 468px) and (min-width: 400px) {
    #firstPageBack {

        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 115%, 100% 66%, 100%;
    }
}

@media screen and (max-width: 396px) and (min-width: 304px) {
    #firstPageBack {

        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: center, top, bottom;
        background-repeat: no-repeat;
        background-size: 125%, 100% 48%, 100%;
    }

    #slogan {
        background: #f7f7f7;
    }
}

@media screen and (max-width: 303px) and (min-width: 250px) {
    #firstPageBack {

        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: center, top, bottom;
        background-repeat: no-repeat;
        background-size: 125%, 100% 35%, 100%;
    }
}

@media screen and (max-width: 406px) {
    #firstPageBack {

        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 115%, 100% 52%, 100%;
    }

    html, body {
        /*font-size:6px;*/
    }

    #logo {
        margin-top: 65%;
        width: 100%;
        height: auto;

    }

    #companyName {
        margin-top: 5%;
    }

    #slogan {
        margin-top: 1%;
        font-size: 2.2em;
        text-align: center;

    }

    #firstPageBack {

    }

}

@media screen and (max-width: 335px) {
    #firstPageBack {
        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 110%, 100% 45%, 100%;
    }

    #slogan {
        font-size: 1.8em;
    }

    #logo {
        margin-top: 70%;
    }

    .grid-item {
        max-width: 100%;
    }
}

@media screen and (max-width: 303px) {
    #firstPageBack {
        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 110%, 100% 35%, 100%;
    }

    .grid-text {
        text-align: center;
    }

    #logo {
        margin-top: 90%;
    }
}

@media screen and (max-width: 270px) {
    #firstPageBack {
        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 110%, 100% 36%, 100%;
    }

    #slogan {
        text-align: center;
    }

}

@media screen and (max-width: 244px) {
    #firstPageBack {
        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 110%, 100% 32%, 100%;
    }

    #companyName {
        font-size: 4.5em;
    }

    #logo {
        margin-top: 120%;
    }

}

@media screen and (max-width: 210px) {
    #firstPageBack {
        background: url(../img/Triangle_cropped.svg), radial-gradient(45% 60%, rgba(255, 255, 255, 1) 0%, rgba(60, 20, 168, 0.9) 99%), #f7f7f7;
        background-position: top, top, bottom;
        background-repeat: no-repeat;
        background-size: 110%, 100% 28%, 100%;
    }
}