/*Big desktop port*/
/*1800px*/
@media only screen and (min-width: 112.5em) {
    .header {
        height: 65vh;
        background-image:
            url(../img/hero.jpg);
        margin-top: 6rem;
    }

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

}


/* NORMAL STYLES */

.dtop {
    display: inline-block;
}

.mob {
    display: none;
}

.header {
    width: auto;
    height: 60rem;
    background-image:
        /*linear-gradient(
        to right bottom, 
        rgba(204, 204, 204, 0.8),
        rgba(77, 85, 91, 0.80)), */
        url(../img/hero.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    margin-top: 6rem;

    /* clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%) */
}


.text-box {
    position: absolute;
    top: 55%;
    left: 20%;
}


.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;
}




.tile-image1 {
    background-image: url(../img/tile1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tile-image1:hover {
    opacity: 0.5;
}

.tile-image2 {
    background-image: url(../img/tile2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tile-image2:hover {
    opacity: 0.5;
}


.tile-image3 {
    background-image: url(../img/tile3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tile-image3:hover {
    opacity: 0.5;
}



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



    .header {
        width: auto;
        height: 40rem;
        background-image:
            url(../img/hero.jpg);
        margin-top: 6rem;
        background-size: contain;
    }

    .text-box {
        position: absolute;
        top: 55%;
        left: 10%;
    }

    .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) {

    .dtop {
        display: none;
    }

    .mob {
        display: inline-block;
    }

    .header {
        height: 40rem;
        background-image:
            url(../img/hero.jpg);
        margin-top: 6rem;

    }

    .text-box {
        position: absolute;
        top: 47%;
        left: 5%;
    }

    .flip-card-front img {
        width: 80%;
        height: auto;
        margin-top: 6rem;
    }


    .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;
    }

    /* TILE SECTION */

    .tile-image1 {
        background-image: url(../img/tile1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 120px;
    }

    .tile-image2 {
        background-image: url(../img/tile2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 120px;
    }

    .tile-image3 {
        background-image: url(../img/tile3.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 120px;
    }

}


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

    .header {
        height: 30rem;
        background-image:
            url(../img/mob-hero.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 6rem;

    }

    .text-box {
        position: absolute;
        top: 5%;
        left: 50%;
    }



    .flip-card-front img {
        width: 90%;
        height: auto;
        margin-top: 6rem;

    }

    .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;
    }

    /* TILE SECTION */


    .tile-image1 {
        background-image: url(../img/tile1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 200px;
    }

    .tile-image2 {
        background-image: url(../img/tile2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 200px;
    }

    .tile-image3 {
        background-image: url(../img/tile3.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 200px;
    }



}