/***************************************************************
*
########  ######## ##     ## #### ######## ##      ##  ######  
##     ## ##       ##     ##  ##  ##       ##  ##  ## ##    ## 
##     ## ##       ##     ##  ##  ##       ##  ##  ## ##       
########  ######   ##     ##  ##  ######   ##  ##  ##  ######  
##   ##   ##        ##   ##   ##  ##       ##  ##  ##       ## 
##    ##  ##         ## ##    ##  ##       ##  ##  ## ##    ## 
##     ## ########    ###    #### ########  ###  ###   ######
*
***************************************************************/
#reviews{
    padding: 0 30px;
    display: grid;
}

#reviews_title{
    grid-area: reviews_title;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#reviews_subtitle{
    grid-area: reviews_subtitle;
}

#reviews_icon{
    grid-area: reviews_icon;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#reviews_rate{
    grid-area: reviews_rate;
    color: var(--color_orange);
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#reviews_call{
    grid-area: reviews_call;
}

#reviews_box{
    grid-area: reviews_box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 955px;
    overflow: auto;
}

#review_buttons{
    grid-area: review_buttons;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
}

.review_card{
    background-color: white;
    border-radius: 15px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    display: grid;
    flex-shrink: 0;
    padding: 10px;
}

.review_face img{
    width: 64px;
    height: 64px;
    grid-area: review_face;
    object-fit: cover;
    border-radius: 50%;
}

.review_author{
    grid-area: review_author;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
}

.review_stars{
    grid-area: review_stars;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px;
}

.review_stars img{
    height: 29px;
}

.review_text{
    grid-area: review_text;
}

.review_comment{
    grid-area: review_comment;
    padding-top: 10px;
}

.review_comment_title{
    font-weight: bold;
}

@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #reviews{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto min-content;
        grid-template-areas: "reviews_title"
                             "reviews_icon"
                             "reviews_subtitle"
                             "reviews_rate"
                             "reviews_call"
                             "reviews_box"
                             "review_buttons";
    }

    #reviews_subtitle{
        padding: 10px 0;
    }

    #reviews_call{
        padding: 10px 0;
    }
     
    #reviews_box{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
        padding: 10px;
        height: 850px;
        overflow: auto;
    }

    .review_card{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "review_face review_author"
                            "review_stars review_stars"
                            "review_text review_text"
                            "review_comment review_comment";
        width: 250px;
        min-height: 300px;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #reviews{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto min-content;
        grid-template-areas: "reviews_title"
                             "reviews_icon"
                             "reviews_subtitle"
                             "reviews_rate"
                             "reviews_call"
                             "reviews_box"
                             "review_buttons";
    }

    #reviews_subtitle{
        padding: 10px 0;
    }

    #reviews_call{
        padding: 10px 0;
    }
     
    #reviews_box{
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        padding: 10px;
        
        
    }

    .review_card{
        grid-template-columns: min-content auto;
        grid-template-rows: min-content min-content auto auto;
        grid-template-areas: "review_face review_author"
                            "review_stars review_stars"
                            "review_text review_text"
                            "review_comment review_comment";
        width: 220px;
        min-height: 300px;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #reviews{
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto auto auto auto min-content;
        grid-template-areas: "reviews_title reviews_title"
                             "reviews_subtitle reviews_icon"
                             "reviews_rate reviews_rate"
                             "reviews_call reviews_call"
                             "reviews_box reviews_box"
                             "review_buttons review_buttons";
    }

    #reviews_box{
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
        padding: 10px;
        width: 842px;
    }

    .review_card{
        grid-template-columns: min-content auto;
        grid-template-rows: min-content min-content auto auto;
        grid-template-areas: "review_face review_author"
                            "review_stars review_stars"
                            "review_text review_text"
                            "review_comment review_comment";
        width: 240px;
        min-height: 350px;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #reviews{
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto auto auto auto min-content;
        grid-template-areas: "reviews_title reviews_title"
                             "reviews_subtitle reviews_icon"
                             "reviews_rate reviews_rate"
                             "reviews_call reviews_call"
                             "reviews_box reviews_box"
                             "review_buttons review_buttons";
    }

    #reviews_box{
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
        width: 1144px;
    }

    .review_card{
        grid-template-columns: min-content auto;
        grid-template-rows: min-content min-content auto auto;
        grid-template-areas: "review_face review_author"
                            "review_stars review_stars"
                            "review_text review_text"
                            "review_comment review_comment";
        width: 300px;
        min-height: 350px;
    }
}

/***************************************
*
########  ##    ##  ######   ######  
##     ## ###   ## ##    ## ##    ## 
##     ## ####  ## ##       ##       
########  ## ## ##  ######   ######  
##   ##   ##  ####       ##       ## 
##    ##  ##   ### ##    ## ##    ## 
##     ## ##    ##  ######   ######
*
**************************************/

#rnss{
    display: grid;

}

#rnssTitle{
    grid-area: rnssTitle;
    text-align: center;
}

#rnssSubtitle{
    grid-area: rnssSubtitle;
    display: flex;
    flex-direction: row;
}

#rnssLogo{
    grid-area: rnssLogo;
    display: flex;
    flex-direction: row;
}

#rnssDecor{
    grid-area: rnssDecor;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#rnssContent{
    grid-area: rnssContent;
    padding: 15px;
}

#rnssText{
    border-radius: 20px;
    background-color: white;
    color: black;
    padding: 20px ;
    box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.2),   
    inset -6px -6px 10px rgba(255, 255, 255, 0.7);
    overflow-y: auto;
    
}

@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #rnss{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "rnssTitle"
                             "rnssLogo"
                             "rnssSubtitle"
                             "rnssContent"
                             "rnssDecor";
    }

    #rnssSubtitle{
        padding-left: 30px;
        text-align: center;
    }

    #rnssLogo{
        justify-content: center;
    }

    #rnssDecor img{
        width: 200px;
        padding: 10px;
    }

    #rnssText{
        height: 400px;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #rnss{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "rnssTitle"
                             "rnssLogo"
                             "rnssSubtitle"
                             "rnssContent"
                             "rnssDecor";
    }

    #rnssSubtitle{
        padding-left: 30px;
        text-align: center;
    }

    #rnssLogo{
        justify-content: center;
    }

    #rnssDecor img{
        width: 306px;
        padding: 10px;
    }

    #rnssText{
        height: 500px;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #rnss{
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "rnssTitle rnssTitle"
                             "rnssSubtitle rnssLogo"
                             "rnssContent rnssContent"
                             "rnssDecor rnssDecor";
    }

    #rnssSubtitle{
        padding-left: 30px;
    }

    #rnssDecor img{
        width: 306px;
        padding: 10px;
    }

    #rnssText{
        height: 500px;
        width: 800px;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #rnss{
        grid-template-columns: min-content auto min-content;
        grid-template-rows: auto auto auto;
        grid-template-areas: "rnssTitle rnssTitle rnssTitle"
                             "rnssSubtitle rnssSubtitle rnssLogo"
                             "rnssDecor rnssContent rnssContent";
    }

    #rnssSubtitle{
        padding-left: 30px;
    }

    #rnssDecor img{
        width: 306px;
        padding: 10px;
    }

    #rnssText{
        height: 500px;
        width: 800px;
    }
    
}

/*******************************************************
*
########  #### ########  ######   #######  #### ##    ##
##     ##  ##     ##    ##    ## ##     ##  ##  ###   ##
##     ##  ##     ##    ##       ##     ##  ##  ####  ##
########   ##     ##    ##       ##     ##  ##  ## ## ##
##     ##  ##     ##    ##       ##     ##  ##  ##  ####
##     ##  ##     ##    ##    ## ##     ##  ##  ##   ###
########  ####    ##     ######   #######  #### ##    ##
*
********************************************************/

#bitcoin{
    display: grid;
}

#bitcoinTitle{
    grid-area: bitcoinTitle;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

#bitcoinSubtitle{
    grid-area: bitcoinSubtitle
}

#bitcoinLogo{
    grid-area: bitcoinLogo;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-right: 20px;
}

#bitcoinLogo > p {
    white-space: nowrap;

  }

#bitcoinOption{
    grid-area: bitcoinOption;
    padding: 20px;
    display: flex;
}

#bitcoinContent{
    grid-area: bitcoinContent;
    padding: 20px;
}

#bitcoinText{
    border-radius: 20px;
    background-color: white;
    color: black;
    padding: 20px ;
    box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.2),   
    inset -6px -6px 10px rgba(255, 255, 255, 0.7);
    overflow-y: auto;
    
}

@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #bitcoin{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "bitcoinTitle"
                             "bitcoinLogo"
                             "bitcoinSubtitle"
                             "bitcoinContent"
                             "bitcoinOption";
    }

    #bitcoinSubtitle{
        padding-left: 30px;
    }

    #bitcoinLogo{
        justify-content: center;
        padding: 15px;
    }

    #bitcoinLogo img{
        width: 80px;
    }

    #bitcoinOption{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: start;
        gap: 15px;
    }

    #bitcoinOption img{
        width: 200px;
        padding: 10px;
    }

    #bitcoinText{
        height: 500px;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #bitcoin{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "bitcoinTitle"
                             "bitcoinLogo"
                             "bitcoinSubtitle"
                             "bitcoinContent"
                             "bitcoinOption";
    }

    #bitcoinSubtitle{
        padding-left: 30px;
    }

    #bitcoinLogo{
        justify-content: center;
        padding: 15px;
    }

    #bitcoinLogo img{
        width: 100px;
    }

    #bitcoinOption{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: start;
        gap: 15px;
    }

    #bitcoinOption img{
        width: 306px;
        padding: 10px;
    }

    #bitcoinText{
        height: 500px;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #bitcoin{
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "bitcoinTitle bitcoinTitle"
                             "bitcoinSubtitle bitcoinLogo"
                             "bitcoinContent bitcoinContent"
                             "bitcoinOption bitcoinOption";
    }

    #bitcoinSubtitle{
        padding-left: 30px;
    }

    #bitcoinLogo{
        justify-content: flex-end;
    }

    #bitcoinLogo img{
        width: 100px;
    }

    #bitcoinOption{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: start;
        gap: 15px;
    }

    #bitcoinOption img{
        width: 306px;
        padding: 10px;
    }

    #bitcoinText{
        height: 500px;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #bitcoin{
        grid-template-columns: min-content auto min-content;
        grid-template-rows: auto auto auto;
        grid-template-areas: "bitcoinTitle bitcoinTitle bitcoinTitle"
                             "bitcoinSubtitle bitcoinSubtitle bitcoinLogo"
                             "bitcoinOption bitcoinContent bitcoinContent";
    }

    #bitcoinSubtitle{
        padding-left: 30px;
    }

    #bitcoinLogo{
        justify-content: flex-end;
    }

    #bitcoinLogo img{
        width: 100px;
    }

    #bitcoinOption{
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        text-align: start;
    }

    #bitcoinOption img{
        width: 306px;
        padding: 10px;
    }

    #bitcoinText{
        height: 500px;
    }
    
}


/****************************************************************************
*
######   #######  ##     ## ######## ########     ###     ######   ######## 
##    ## ##     ## ##     ## ##       ##     ##   ## ##   ##    ##  ##       
##       ##     ## ##     ## ##       ##     ##  ##   ##  ##        ##       
##       ##     ## ##     ## ######   ########  ##     ## ##   #### ######   
##       ##     ##  ##   ##  ##       ##   ##   ######### ##    ##  ##       
##    ## ##     ##   ## ##   ##       ##    ##  ##     ## ##    ##  ##       
 ######   #######     ###    ######## ##     ## ##     ##  ######   ########
 *
 ***************************************************************************/

 #coverage{
    display: grid;
 }

 #coverageTitle{
    grid-area: coverageTitle;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 10px;
 }

 #coverageText{
    grid-area: coverageText;
    padding-bottom: 10px;
 }

 #coverageIconsContainer{
    grid-area: coverageIconsContainer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }

 #coverageIcons{
    display: grid;
    grid-template-columns: min-content min-content min-content;
    grid-template-rows: min-content min-content min-content;
    grid-template-areas: "img_climb img_dental img_heli"
                         "img_lab img_med img_pet"
                         "img_house img_car img_delay";
    gap: 10px;
 }

 #img_climb{
    grid-area: img_climb;
 }

 #img_dental{
    grid-area: img_dental;
 }

 #img_heli{
    grid-area: img_heli;
 }

 #img_lab{
    grid-area: img_lab;
 }

 #img_med{
    grid-area: img_med;
 }

 #img_pet{
    grid-area: img_pet;
 }

 #img_house{
    grid-area: img_house;
 }

 #img_car{
    grid-area: img_car;
 }

 #img_delay{
    grid-area: img_delay;
 }

 #coverageNav{
    grid-area: coverageNav;
    padding: 10px;
    display: flex;
    flex-direction: row;
 }

@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #coverage{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "coverageTitle"
                             "coverageIconsContainer"
                             "coverageText"
                             "coverageNav";
    }

    #coverageIcons img{
        width: 40px;
    }

    #coverageNav{
       justify-content: center;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #coverage{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "coverageTitle"
                             "coverageIconsContainer"
                             "coverageText"
                             "coverageNav";
    }

    #coverageIcons img{
        width: 53px;
    }

    #coverageNav{
       justify-content: center;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #coverage{
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto auto;
        grid-template-areas: "coverageTitle coverageTitle"
                             "coverageText coverageIconsContainer"
                             "coverageNav coverageIconsContainer";
    }

    #coverageIcons img{
        width: 53px;
    }

    #coverageNav{
       justify-content: flex-end;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #coverage{
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto auto;
        grid-template-areas: "coverageTitle coverageTitle"
                             "coverageText coverageIconsContainer"
                             "coverageNav coverageIconsContainer";
    }

    #coverageIcons img{
        width: 53px;
    }

    #coverageNav{
       justify-content: flex-end;
    }
}


/********************************************************************
*
######## ##       ######## ##     ## #### ########  ##       ######## 
##       ##       ##        ##   ##   ##  ##     ## ##       ##       
##       ##       ##         ## ##    ##  ##     ## ##       ##       
######   ##       ######      ###     ##  ########  ##       ######   
##       ##       ##         ## ##    ##  ##     ## ##       ##       
##       ##       ##        ##   ##   ##  ##     ## ##       ##       
##       ######## ######## ##     ## #### ########  ######## ########
*
********************************************************************/

#flexible{
    display: grid;
}

#flexibleTitle{
    grid-area: flexibleTitle;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#flexibleText{
    grid-area: flexibleText;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: start;
    padding: 20px;
}

#flexiblePhotos{
    grid-area: flexiblePhotos;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#flexiblePhotos img{
    border-radius: 20px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5)
}



@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #flexible{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "flexibleTitle"
                             "flexiblePhotos"
                             "flexibleText";
    }

    #flexibleText{
        gap: 15px;
    }

    #flexiblePhotos{
        flex-direction: column;
        gap: 20px;
    }

    #flexiblePhotos img{
        width: 237px;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #flexible{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "flexibleTitle"
                             "flexiblePhotos"
                             "flexibleText";
    }

    #flexibleText{
        gap: 15px;
    }

    #flexiblePhotos{
        flex-direction: row;
        gap: 20px;
    }

    #flexiblePhotos img{
        width: 237px;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #flexible{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "flexibleTitle flexibleTitle"
                             "flexiblePhotos flexibleText"
                             "flexiblePhotos flexibleText";
    }

    #flexibleText{
        gap: 20px;
    }

    #flexiblePhotos{
        flex-direction: column;
        gap: 25px;
    }

    #flexiblePhotos img{
        width: 237px;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #flexible{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "flexibleTitle flexibleTitle"
                             "flexiblePhotos flexibleText"
                             "flexiblePhotos flexibleText";
    }

    #flexibleText{
        gap: 20px;
    }

    #flexiblePhotos{
        flex-direction: column;
        gap: 25px;
    }

    #flexiblePhotos img{
        width: 353px;
    }
}

/*********************************************
*
########  ##          ###    ##    ##  ######  
##     ## ##         ## ##   ###   ## ##    ## 
##     ## ##        ##   ##  ####  ## ##       
########  ##       ##     ## ## ## ##  ######  
##        ##       ######### ##  ####       ## 
##        ##       ##     ## ##   ### ##    ## 
##        ######## ##     ## ##    ##  ######
*
*********************************************/

#plans{
    display: grid;
}

#plansTitle{
    grid-area: plansTitle;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#plansSubtitle{
    grid-area: plansSubtitle;
    padding: 10px 20px;
}

#plansText{
    grid-area: plansText;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
    gap: 20px;
    padding: 20px;
}

#plansPers{
    grid-area: plansPers;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#plansContainer{
    grid-area: plansContainer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
}



#plansObs{
    grid-area: plansObs;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #plans{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: "plansTitle"
                             "plansPers"
                             "plansSubtitle"
                             "plansText"
                             "plansContainer"
                             "plansObs";
    }

    #plansSubtitle{
        text-align: center;
    }

    #plansPers img{
        width: 200px;
    }

    #plansContainer{
        flex-direction: column;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #plans{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: "plansTitle"
                             "plansPers"
                             "plansSubtitle"
                             "plansText"
                             "plansContainer"
                             "plansObs";
    }

    #plansSubtitle{
        text-align: center;
    }

    #plansContainer{
        flex-direction: column;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #plans{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "plansTitle plansTitle"
                             "plansSubtitle plansSubtitle"
                             "plansPers plansText"
                             "plansContainer plansContainer"
                             "plansObs plansObs";
    }

    #plansSubtitle{
        text-align: start;
    }

    #plansContainer{
        flex-direction: row;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #plans{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "plansTitle plansTitle"
                             "plansSubtitle plansSubtitle"
                             "plansPers plansText"
                             "plansContainer plansContainer"
                             "plansObs plansObs";
    }

    #plansSubtitle{
        text-align: start;
    }

    #plansContainer{
        flex-direction: row;
    }
}


/****************************
*
########  ##     ## ##    ## 
##     ## ##     ## ###   ## 
##     ## ##     ## ####  ## 
########  ##     ## ## ## ## 
##   ##   ##     ## ##  #### 
##    ##  ##     ## ##   ### 
##     ##  #######  ##    ##
*
****************************/

#run{
    display: grid;
    margin-bottom: 50px;
}

#runTitle{
    grid-area: runTitle;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#runSubtitle{
    grid-area: runSubtitle;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#runSimulation{
    grid-area: runSimulation;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#runText{
    grid-area: runText;
    padding: 10px 25px;
}

@media (max-width: 611px) { /*MOB LOW RESOLUTION */
    #run{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "runTitle"
                             "runSubtitle"
                             "runText"
                             "runSimulation";
    }

    #runSubtitle{
        justify-content: center;
        text-align: center;
    }
}

@media (min-width: 612px) and (max-width: 923px){ /*MOB HI RESOLUTION */
    #run{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "runTitle"
                             "runSubtitle"
                             "runText"
                             "runSimulation";
    }

    #runSubtitle{
        justify-content: center;
        text-align: center;
    }
}

@media (min-width: 924px) and (max-width:1235px){ /* TABLET */
    #run{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "runTitle runTitle"
                             "runSubtitle runSubtitle"
                             "runSimulation runText";
    }

    #runSubtitle{
        justify-content: flex-start;
        text-align: start;
    }
}

@media (min-width: 1236px){ /* DESKTOP */
    #run{
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "runTitle runTitle"
                             "runSubtitle runSubtitle"
                             "runSimulation runText";
    }

    #runSubtitle{
        justify-content: flex-start;
        text-align: start;
    }
}