@font-face {
    font-family: 'geinspirasansbold';
    src: url("../../common/gefonts/styles/lib/GEInspiraSans-Bold-v01.ttf") format("truetype")
}

@font-face {
    font-family: 'geinspirasans';
    src: url("../../common/gefonts/styles/lib/GEInspiraSans-Regular-v01.ttf") format("truetype")
}

body {
    clear: both;
    background: var(--white);
}

#s-shop-main {
    max-width: 1045px;
    margin: auto;
    font-size: 1.3em;
    font-family: var(--ge_font_family_base);

}

.bg-header {
    background: url('../images/header-bg.jpg');
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-white {
    background: var(--white);
}

.bg-grey {
    background: var(--white);
}

.bg-blue {
    background: var(--greyesh_background_white);
}

.bg-blue-gradient {
    background: var(--greyesh_background_white);
    /* background: linear-gradient(180deg, rgba(33,55,88,1) 0%, rgba(1,94,183,1) 100%); */
}

h1 {
    font-size: 2.6em;
    margin: 0;
    font-weight: 400;
    text-align: center;
}

h2 {
    font-size: 2em;
    margin: 0;
    font-weight: 400;
}

h3 {
    font-family: var(--ge_font_family_base);
    font-size: 1.8em;
    margin: 0;
    font-weight: 400;
}

h4 {
    font-family: var(--ge_font_family_base);
    margin: 0;
}

p,
ul {
    margin: 0;
}

.body-text {
    font-size: 1.1em;
    line-height: 1.5em;
}

.small-text {
    font-size: 0.9em;
    line-height: 1.2em;
}

.text-xtra-small {
    font-size: 0.8em;
    line-height: 1.5em;
    color: var(--secondary_medium_grey);
}

.text-white {
    color: var(--white);
}

.text-grey {
    color: var(--secondary_medium_grey);
}

.text-light-blue {
    color: var(--lead_black);
}

.text-blue {
    color: var(--lead_black);
}

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

.s-shop-btn {
    font-family: var(--ge_font_family_base);
    letter-spacing: 2px;
    text-decoration: none;
    padding: 12px 60px;
    display: inline-block;
    border-radius: 8px;
    font-size: 1.2em;
}

.s-shop-btn:after{
    border-color: transparent transparent transparent var(--white);
    border-style: solid;
    border-width: 6.5px 0 6.5px 7px;
    content: "";
    display: inline-block;
    height: 0;
    margin-left: 1em;
    width: 0;
}

.btn-blue {
    background: var(--basic_purple);
    color: var(--white);
}

.btn-blue:hover {
    background: var(--basic_hover);
    color: var(--white);
}

.btn-blue:active {
    background: var(--lead_black);
    color: var(--white);
}

.btn-white {
    background: var(--basic_purple);
    color: var(--white);
}

.btn-white:hover {
    background: var(--basic_hover);
    color: var(--white);
}

.btn-white:active {
    background: var(--lead_black);
    color: var(--white);
}

.s-shop-header {
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -24px 0.25em;
}

.text-grey h1 {
    color: var(--white);
}

.s-shop-intro {
    padding: 25px 0 60px 0;
}

.s-shop-intro .inner {
    width: 90%;
    max-width: 700px;
    margin: auto;
}

.s-shop-intro-text p {
    margin: 0 0 30px 0;
}

.s-shop-icon-row {
    display: flex;
    margin-top: 4em;
    padding: 0 7.5%;
}

.s-shop-icon-col {
    width: 25%;
    padding: 0 10px;
}

.s-shop-value {
    padding: 50px 0;
    margin: 0 0px -10px;
}

.s-shop-value .inner {
    width: 90%;
    max-width: 85%;
    margin: auto;
}

.s-shop-value-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.s-shop-value-icon {
    width: 29%;
    margin: 30px 0;
    padding: 0 10px;
}

.s-shop-value-icon img {
    margin: 0 0 20px 0;
}

.s-shop-value-icon h4 {
    margin: 0 0 10px 0;
    color: var(--lead_black);
}

.s-shop-download {
    padding: 4em 100px;
    margin-top: 10px;
    background-color:var(--lightest_grey);
}

.s-shop-download .inner h3 {
    margin: 0 0 20px 0;
}

.s-shop-download .inner {
    width: 90%;
    max-width: 70%;
    margin: auto;
}

.s-shop-integration {
    padding: 50px 0;
}

.s-shop-integration-text h2 {
    margin: 0 0 30px 0;
    color: var(--lead_black);
}

.s-shop-integration .inner {
    width: 90%;
    max-width: 800px;
    margin: auto;
}

.s-shop-process-step {
    margin: 0 0 20px 0;
}

.s-shop-process-icon {
    float: left;
    margin: 25px 0 0 0;
}

.s-shop-process-text {
    margin: 0 0 0 110px;
}

.s-shop-process-text h3 {
    margin: 0 0 10px 0;
}

.s-shop-divider {
    background: var(--white);
}

.s-shop-divider .inner {
    content: '';
    width: 80%;
    height: 1px;
    background: var(--divider_bg_grey);
    display: block;
    margin: auto;
}

.s-shop-platforms .inner {
    width: 90%;
    max-width: 450px;
    margin: auto;
}

.platform-logos ul {
    list-style: none;
}

.s-shop-platforms {
    padding: 50px 0;
}

.platform-logos ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0;
    width: 450px;
    margin: 30px auto 0 auto;
}

.platform-logos ul li {
    margin: 0 10px 20px 10px;
    padding: 0px !important;
    list-style-type: none !important;
}

.s-shop-cta {
    padding: 50px 0;
    margin: 0 -24px 10px;
}

.comp2 .content h1 {
    text-align: center;
    color: var(--lead_black);
}

.comp2 .content .GEshop-HeaderTitle {
    text-align: center;
    color: var(--lead_black);
    font-size: 2.6em;
    margin: 0;
    font-weight: 400;
}

.content {
    margin: 0px;
}

.s-shop-value-text {
    margin-bottom: 40px;
}

.s-shop-value-text h2 {
    color: var(--lead_black);
}

@media(max-width: 850px) {
    body {
        background: red;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.2em;
    }

    .text-xtra-small {
        font-size: 1em;
    }

    .s-shop-icon-row {
        flex-wrap: wrap;
    }

    .s-shop-icon-col {
        width: 50%;
        padding: 0;
        margin: 0 0 20px 0;
    }

    .s-shop-value-icon {
        width: 100%;
    }
}