/*Big desktop port*/ /*1800px*/
@media only screen and (min-width: 112.5em){

    .header {
        height: 400px;
        width: 90%;
        margin: 6rem auto 0 auto;
        text-align: center;
        background-size: cover;
    }

    img {
        width: 100%; /* or any custom size */
        height: 100%; 
        object-fit: contain;
    }
   

    .row {
        max-width: 114rem;
        margin: 0 auto;
        margin-bottom: 6rem;
    }
    
}


/* NORMAL STYLES */

.header {
    height: 400px;
    width: 90%;
    margin: 6rem auto 0 auto;
    text-align: center;
    background-size: cover;
    position: relative;
}

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

.dtop {
    display: inline-block;
}



.mob {
    display: none;
}

.flip-card-front img {
    width: 80%;
    height: auto;
}

.row {
    max-width: 94rem;
    margin: 0 auto;
    margin-bottom: 6rem;

}

.col-1-of-2 {
    width: calc((100% - 8rem) / 2);
    margin-right: 8rem;
    float: left;
}

    .col-1-of-2:last-child {
        margin-right: 0;
    }


 .col-1-of-3 {
        width: calc((100% - 8rem) / 3);
        margin-right: 4rem;
        float: left;
    }
    
        .col-1-of-3:last-child {
            margin-right: 0;
        }


.col-2-of-3 {
        width: calc((100% - 8rem) / 3 * 2);
        margin-right: 4rem;
        float: left;
        }
        
        .col-2-of-3:last-child {
            margin-right: 0;
        }
      


.col-1-of-4 {
        width: calc((100% - 12rem) / 4);
        margin-right: 4rem;
        float: left;
    }
        
    .col-1-of-4:last-child {
             margin-right: 0;
    }  

/* TILE SECTION */
    .info-tiles {
        height: auto;
    }
    
    

    


/*Tab landscape port*/ /*1200px*/
@media only screen and (max-width: 75em){

    .header {
        height: 400px;
        width: 90%;
        margin: 6rem auto 0 auto;
        text-align: center;
        background-size: cover;
    }

    img {
        width: 100%; /* or any custom size */
        height: 100%; 
        object-fit: contain;
    }

   

    .row {
        max-width: 80rem;
        margin: 0 auto;
        margin-bottom: 6rem;
    
    }

    .col-1-of-2 {
        width: calc((100% - 4rem) / 2);
        margin-right: 4rem;
        float: left;
    }
    
        .col-1-of-2:last-child {
            margin-right: 0;
        }

    .col-1-of-3 {
        width: calc((100% - 8rem) / 3);
        margin-right: 4rem;
        float: left;
    }
    
        .col-1-of-3:last-child {
            margin-right: 0;
        }



    .col-1-of-4 {
        width: calc((100% - 4rem) / 2);
        margin-right: 4rem;
        float: left;
    }

    .col-1-of-4:last-child{
        margin-right: 0;
        margin-bottom: 4rem;
    }

    .col-1-of-4:nth-child(2){
        margin-right: 0;
        margin-bottom: 4rem;
    }
    

}


/*Tab port*/ /*900px*/
@media only screen and (max-width: 56.25em){

    .header {
        height: 400px;
        width: 90%;
        margin: 6rem auto 0 auto;
        text-align: center;
        background-size: cover;
    }

    img {
        width: 100%; /* or any custom size */
        height: 100%; 
        object-fit: contain;
    }

    .dtop {
        display: none;
    }
    
    .mob {
        display: inline-block;
    }

    

    .row {
        max-width: 70rem;
        margin: 0 auto;
        margin-bottom: 6rem;
    
    }

     .col-1-of-2 {
        width: calc((100% - 4rem) / 2);
        margin-right: 4rem;
        float: left;
    }
    
        .col-1-of-2:last-child {
            margin-right: 0;
        }

    .col-1-of-3 {
        width: calc((100% - 8rem) / 3);
        margin-right: 4rem;
        float: left;
    }
    
        .col-1-of-3:last-child {
            margin-right: 0;
        }


    .col-2-of-3 {
            width: calc((100% - 4rem) / 3 * 2);
            margin-right: 4rem;
            float: left;
        }
        
        .col-2-of-3:last-child {
                margin-right: 0;
            }

    .col-1-of-4 {
        width: calc((100% - 4rem) / 2);
        margin-right: 4rem;
        float: left;
    }
        
    .col-1-of-4:last-child .col-1-0f-4:nth-child(2){
        margin-right: 0;
    }

    

}


/*Phone port*/ /*600px*/
@media only screen and (max-width: 37.5em){

    .header {
        height: 400px;
        width: 90%;
        margin: 6rem auto 0 auto;
        text-align: center;
        background-size: cover;
    }

    img {
        width: 100%; /* or any custom size */
        height: 100%; 
        object-fit: contain;
    }


    .row {
        max-width: 80%;
        margin: 0 auto;
        margin-bottom: 6rem;
    
    }

    .col-1-of-2 {
        width: 90%;
        margin: 0 5%;
        float: left;
        margin-bottom: 4rem;
    }

    .col-1-of-3 {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 6rem;
    }

    .col-2-of-3 {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 6rem;
    }
    
    

    .col-1-of-4 {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 6rem;
    }

    
        
}