/* 4k devices (extra large laptops and desktops, 2000px and up) */

@media all and (max-width: 5000px) {
    .sub_main {
        display:inherit;
        width: 100%;
        height: 100%;
        position: relative;
        background: url(assets/yellow_back.svg);
        background-size: cover;
    }
    
    .jewelry_main {
        background: url(assets/green_back.svg);
    }
    
    .toys_main {
        background: url(assets/blue_background.svg);
    }

    .sub_main_2 {
        display: grid;
        grid-template-areas:
            "sub_sub_title sub_sub_title ."
            "sub_sub_description sub_sub_description ."
            ". download_link .";
        grid-template-columns: 30% 30% 40%;
        grid-template-rows: auto;
        background: url(assets/beige_back.svg);
        background-size: cover;
    }

    .sub_title {
        width: 60%;
        font-size: 1.9em;
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        color: #FFF;
        margin: 40px 0px 20px 30px;
        text-transform: uppercase;
    }

    .sub_description {
        width: 60%;
        font-size: 1.2em;
        font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
        font-weight: 500;
        color: #FFF;
        margin: 20px 0px 30px 30px;
        line-height: 1.7;
        text-align: justify;
    }

    .sub_main_button {
        border-radius: 5px;
        padding: 10px 50px 10px 50px;
        background-color: #30a0ac;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1em;
        font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
        text-align: center;
        justify-self: start;
        margin-left: 30px;
        margin-bottom: 30px;
        color: #FFF;
    }
    
    .sub_main_button_jewelry {
        background-color: #E3BA3F;
    }

    .sub_sub_title {
        grid-area: sub_sub_title;
        font-size: 1.7em;
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        margin: 60px 0px 0px 30px;
        color: #363B47;
    }

    .sub_sub_description {
        grid-area: sub_sub_description;
        font-size: 1.2em;
        font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
        font-weight: 500;
        line-height: 1.7;
        text-align: justify;
        margin: 20px 0px 0px 30px;
        color: #363B47;
    }

    .download_link {
        grid-area: download_link;
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        font-size: 1.3em;
        color: #30A0AC;
        justify-self: end;
        margin: 30px 0px 30px 0px;
    }

    .sub_main_image {
        position: absolute;
        max-width: 450px;
        top: 20%;
        left: 70%; 
    }
    
    .sub_electronics_image {
        top: 40%;
        max-width: 550px !important;
        left: 65%;
    }
    
    .sub_main_icecream {
        top: 41%;
        left: 65%;
        max-width: 550px !important;
    }
    
    .sub_healthcare_image {
        top: 23%;
        max-width: 500px !important;
    }
    
    .sub_toy_image {
        top: 4%;
        left: 65%;
        max-width: 480px !important;
    }
    
    .sub_main_beauty {
        left: 68%;
        max-width: 480px !important;
    }
    
    .sub_telco_image {
        max-width: 415px !important;
    }
    
    .sub_cycling_image {
        max-width: 665px !important;
        left: 65%;
        top: 20%;
    }
    
     .sub_sport_image {
        max-width: 470px !important;
        left: 65%;
        top: 20%;
    }

    .sub_why_section {
        margin: 30px 10% 30px 10%;
        display: grid;
        grid-template-areas:
            "sub_why_title sub_why_title sub_why_title sub_why_title"
            "sub_why_subtitle sub_why_subtitle sub_why_subtitle sub_why_subtitle"
            "sub_games_img sub_bonus_img sub_quota_img sub_dashboard_img"
            "sub_games sub_bonus sub_quota sub_dashboard";
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: auto;
        justify-items: center;
        text-align: center;
    }

    .sub_why_title {
        grid-area: sub_why_title;
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        font-size: 1.7em;
        text-transform: uppercase;
        margin-top: 30px;
        color: #363B47;
    }

    .sub_why_subtitle {
        grid-area: sub_why_subtitle;
        font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
        font-size: 1.4em;
        font-weight: 400;
        color: #363B47;
        margin-top: -10px;
        margin-bottom: 5%;
    }

    .sub_why_text {
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        font-size: 1.3em;
        color: #363B47;
    }

    .sub_games_img {
        grid-area: sub_games_img;
    }

    .sub_games {
        grid-area: sub_games;
    }

    .sub_bonus_img {
        grid-area: sub_bonus_img;
    }

    .sub_bonus {
        grid-area: sub_bonus;
    }

    .sub_quota_img {
        grid-area: sub_quota_img;
    }

    .sub_quota {
        grid-area: sub_quota;
    }

    .sub_dashboard_img {
        grid-area: sub_dashboard_img;
    }

    .sub_dashboard {
        grid-area: sub_dashboard;
    }

    .sub_why_section > img {
        height: 170px;
    }

    .sub_benefits_section {
        display: grid;
        grid-template-areas:
            "sub_benefits_title sub_benefits_title sub_benefits_title"
            "sub_benefits_woman_image dot_1 sub_benefits_text_1"
            "sub_benefits_woman_image dot_2 sub_benefits_text_2"
            "sub_benefits_woman_image dot_3 sub_benefits_text_3"
            "sub_benefits_woman_image dot_4 sub_benefits_text_4"
            "sub_benefits_woman_image dot_5 sub_benefits_text_5"
            "sub_benefits_woman_image dot_6 sub_benefits_text_6";
        grid-template-columns: 40% 5% 50%;
        grid-template-rows: auto;
        background-color: #FBFAF8;
        background-size: contain;
        justify-items: center;
        
    }

    .sub_benefits_title {
        grid-area: sub_benefits_title;
        font-family: 'Dosis SemiBold', 'Dosis', 'Dosis-SemiBold', 'Roboto';
        font-size: 1.7em;
        text-transform: uppercase;
        font-weight: 400;
        color: #363B47;
        text-align: center;
        margin-top: 30px;
    }
    
    .sub_benefits_texts {
        font-family: 'Dosis','Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
        font-size: 1.2em;
        font-weight: 500;
        color: #363B47;
        align-self: center;
        text-align: justify;
        justify-self: start;
        
    }

    .sub_benefits_woman_image {
        grid-area: sub_benefits_woman_image;
        max-width: 500px;
        align-self:flex-end;
    }
    
    .sub_benefits_woman_image_2 {
        display: none;
    }

    .dot_1 {
        grid-area: dot_1;
    }

    .dot_2 {
        grid-area: dot_2;
    }

    .dot_3 {
        grid-area: dot_3;
    }

    .dot_4 {
        grid-area: dot_4;
    }

    .dot_5 {
        grid-area: dot_5;
    }

    .dot_6 {
        grid-area: dot_6;
    }

    .sub_dot {
        height: 20px;
        width: 20px;
        background-color: #E9C24B;
        border-radius: 50%;
        align-self: center;
    }

    .sub_benefits_text_1 {
        grid-area: sub_benefits_text_1;
    }

    .sub_benefits_text_2 {
        grid-area: sub_benefits_text_2;
    }

    .sub_benefits_text_3 {
        grid-area: sub_benefits_text_3;
    }

    .sub_benefits_text_4 {
        grid-area: sub_benefits_text_4;
    }

    .sub_benefits_text_5 {
        grid-area: sub_benefits_text_5;
    }

    .sub_benefits_text_6 {
        grid-area: sub_benefits_text_6;
    }

    .sub_main_text {
        color: #2D9AA7;
        font-family: 'Dosis SemiBold', 'Dosis', 'Dosis-SemiBold', 'Roboto';
    }
    
    .sub_message_section {
        padding: 3%; 
        background-color: #2D9AA7;
    }
    
    .sub_message_text {
        text-align: center;
        font-family: 'Dosis','Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
        font-size: 1.6em;
        font-weight: 500;
        color: white;
        line-height: 1.5;
    }
    
}

/* Extra large devices (large laptops and desktops, 1500px and up) */

@media all and (max-width: 2000px) {

    .sub_main_image {
        max-width: 450px;
    }

}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media all and (max-width: 1500px) {

    .sub_main_image {
        max-width: 300px;
    }
    
     .sub_electronics_image {
        top: 20%;
        max-width: 430px !important;
        left: 65%;
    }
    
    
    .sub_main_icecream {
        top: 18%;
        left: 67%;
        max-width: 430px !important;
    }
    
      .sub_healthcare_image {
        max-width: 400px !important;
        top: 10%;
        left: 67%;
    }
    
    .sub_toy_image {
        top: 4%;
        left: 65%;
        max-width: 316px !important;
    }
    
    .sub_main_beauty {
        top: 5%;
        left: 68%;
        max-width: 360px !important;
    }
    
    .sub_telco_image {
        top: 9%;
        max-width: 310px !important;
    }
    
    .sub_cycling_image {
        max-width: 450px !important;
        left: 67%;
        top: 11%;
    }
    
     .sub_sport_image {
        max-width: 330px !important;
        left: 70%;
        top: 10%;
    }

    .sub_main_2 {
        grid-template-areas:
            "sub_sub_title"
            "sub_sub_description"
            "download_link ";
        grid-template-columns: 100%;
        background: url(assets/beige_back.svg);
        background-size: cover;
        padding-right: 30px;
    }


}

/* Large devices (laptops/desktops, 992px and up) */

@media all and (max-width: 1200px) {

    .sub_main_image {
        left: 66%;
    }
    
     .sub_electronics_image {
        top: 30%;
        max-width: 330px !important;
    }
    
    .sub_main_icecream {
        top: 37%;
        left: 65%;
        max-width: 350px !important;
    }
    
     .sub_healthcare_image {
        top: 30%;
          left: 65%;
        max-width: 330px !important;
    }
    
      .sub_toy_image {
          top: 16%;
          left: 63%;
    }
    
     .sub_main_beauty {
        top: 29%;
        left: 65%;
        max-width: 320px !important;
    }
    
     .sub_telco_image {
        top: 14%;
    }
    
    .sub_cycling_image {
        max-width: 390px !important;
        left: 62%;
        top: 33%;
    }
    
     .sub_sport_image {
        max-width: 330px !important;
        left: 65%;
        top: 15%;
    }

    .sub_why_section > img {
        height: 160px;
    }

}

/* Medium devices (landscape tablets, 768px and up) */

@media all and (max-width: 992px) {

    .sub_title {
        width: auto;
        text-align: center;
        margin: 30px;
    }

    .sub_description {
        width: 50%;
    }

    .sub_main_image {
        max-width: 400px;
        overflow: hidden;
        left: 57%;
        top: 25%;
    }
    
    .sub_main_icecream {
        top: 30%;
        left: 55%;
    }

    .sub_main {
        overflow-x: hidden;
    }
    
      .sub_benefits_section {
        grid-template-areas:
            "sub_benefits_title sub_benefits_title"
            "dot_1 sub_benefits_text_1"
            "dot_2 sub_benefits_text_2"
            "dot_3 sub_benefits_text_3"
            "dot_4 sub_benefits_text_4"
            "dot_5 sub_benefits_text_5"
            "dot_6 sub_benefits_text_6"
            "sub_benefits_woman_image_2 sub_benefits_woman_image_2";
        grid-template-columns: 10% 90%;
    }
    
    .sub_benefits_woman_image {
        display: none;
    }
    
    .sub_benefits_woman_image_2 {
        display: grid;
        grid-area: sub_benefits_woman_image_2;
        max-height: 400px;
        justify-self: center;
    }
    
    .sub_benefits_texts {
        padding: 0px 12% 0px 5%;
    }
    
    .sub_dot {
        margin-left: 60%;
    }
}

/* Small devices (portrait tablets and large phones, 475px and up) */

@media all and (max-width: 768px) {
    .sub_main {
        display: grid !important;
        grid-template-areas:
            "sub_title"
            "sub_description"
            "sub_main_button"
            "sub_main_image";
        grid-template-columns: 100%;
        grid-template-rows: auto;
        justify-items: center;
    }

    .sub_title {
        grid-area: sub_title;
    }

    .sub_description {
        grid-area: sub_description;
        width: auto;
        margin: 0px 30px 0px 30px;
    }

    .sub_main_button {
        grid-area: sub_main_button;
        justify-self: center;
        margin-top: 20px;
        margin-left: 0px;
        margin-bottom: 20px;
        align-self: center;
    }

    .sub_main_image {
        position:static !important;
        grid-area: sub_main_image;
        max-width: 600px;
    }

    .sub_main_2 {
        justify-items: center;
        padding: 0px;
    }

    .sub_sub_title {
        padding-top: 20px;
        justify-self: center;
        margin: 0px;
        text-align: center;
    }

    .sub_sub_description {
        margin-right: 30px;
    }

    .download_link {
        justify-self: center;
    }

    .sub_why_section {
        grid-template-areas:
            ". sub_why_title sub_why_title ."
            ". sub_why_subtitle sub_why_subtitle ."
            ". sub_games_img sub_bonus_img ."
            ". sub_games sub_bonus ."
            ". sub_quota_img sub_dashboard_img ."
            ". sub_quota sub_dashboard .";
        grid-template-columns: 5% repeat(2, 45%) 5%;
        justify-items: center;
        justify-content: center;
        margin: 30px 20px 30px 20px;
    }

    .sub_why_section > img {
        height: 140px;
    }
    
     .sub_message_text {
        font-size: 1.4em;
    }

}

/* Extra small devices (phones, 475px and down) */

@media all and (max-width: 475px) {

    .sub_description {
        margin-bottom: 20px;
    }

    .sub_sub_title {
        padding: 20px 20px 0px 20px;
    }

    .sub_why_section {
        margin: 0px 0px 20px 0px;
    }

    .sub_why_title {
        font-size: 1.5em;
    }

    .sub_why_subtitle {
        font-size: 1.2em;
    }

    .sub_why_section > img {
        height: 120px;
    }

}