.safari .example { background-color: black; }
.example { width: 100px; height: 100px; border: 1px solid black; }


/* ----- WORK PAGE - Casestudy wall ----- */

.safari .casestudy_row1 .casestudy_child_row_child:nth-child(1), .safari .casestudy_row1 .casestudy_child_row_child:nth-child(2),
.safari .casestudy_row1 .casestudy_child_row_child:nth-child(3), .safari .casestudy_row1 .casestudy_child_row_child:nth-child(4),
.safari .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
    -webkit-box-flex: 1 0 12em;
    min-height: 320px;
    min-width: 12em;
}

.safari .casestudy_row1 .casestudy_child_row_child:nth-child(6),
.safari .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        min-width: 22em;
    
        -webkit-flex: 1 0 22em; /* this */
}

.safari .casestudy_row1 .casestudy_child_row_child:nth-child(7),
.safari .casestudy_row1 .casestudy_child_row_child:nth-child(8) {
        -webkit-box-flex: 2;
        min-width: 22em;
    
        -webkit-flex: 2 0 22em; /* this */
}

.small-flex {
        -webkit-box-flex: 1;
        min-width: 2em;
}

.safari .casestudy_row1 .casestudy_child_row_child:nth-child(10), .safari .casestudy_row1 .casestudy_child_row_child:nth-child(11),
.safari .casestudy_row1 .casestudy_child_row_child:nth-child(12), .safari .casestudy_row1 .casestudy_child_row_child:nth-child(13) {
        -webkit-box-flex: 1;
        min-width: 19em;
    
        -webkit-flex: 1 0 19em; /* this */
}

.safari .casestudy_row1 .casestudy_child_row_child:nth-child(10) {
        -webkit-box-flex: 2;
        min-width: 19em;
    
        -webkit-flex: 2 0 19em; /* this */
}


/* -------------------- FLEX - QUOTE -------------------- */



.casestudy_child1,
.casestudy_child2 {
    min-height: 570px;
    padding: 1.2em 1em;
}

.casestudy_child1 {
    -webkit-box-flex: 3;
    -webkit-flex: 3 0 10em; /* this */
    min-width: 10em;
}

.casestudy_child2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2 0 10em; /* this */
    min-width: 10em;
}


/* -------------------- MEDIA QUERIES -------------------- */


 
/* ----------------------------------- MEDIA QUERIES ----------------------------------- */


@media only screen
and (max-width : 2200px) {

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(6), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        min-width: 18em;
    
        -webkit-flex: 1 0 18em; /* this */
    }
 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(7), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(8) {
        -webkit-box-flex: 2;
        min-width: 18em;
    
        -webkit-flex: 2 0 18em; /* this */
    }
}

/* Large screens ----------- */
@media only screen
and (max-width : 1824px) {
/* STYLES GO HERE */
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1;
        min-width: 15em;
    }

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(6), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        min-width: 16em;
    
        -webkit-flex: 1 0 16em; /* this */
    }
 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(7), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(8) {
        -webkit-box-flex: 2;
        min-width: 16em;
    
        -webkit-flex: 2 0 16em; /* this */
    }

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(10) {
        -webkit-box-flex: 1;
        min-width: 22em;
    
        -webkit-flex: 1 0 22em; /* this */
    }
 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(11), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(12), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(13) {
        -webkit-box-flex: 2;
        min-width: 22em;
    
        -webkit-flex: 2 0 22em; /* this */
    }
}

/* Large screens ----------- */
@media only screen
and (max-width : 1715px) {
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1;
        min-width: 12em;
    
        -webkit-flex: 1 1 12em; /* this */

    }
    
}


@media only screen
and (max-width : 1694px) {

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(6), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(7), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(8), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        min-width: 14em;
    
        -webkit-flex: 1 0 14em; /* this */
    }
}


@media only screen
and (max-width : 1552px) {
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1;
        min-width: 10em;
    
        -webkit-flex: 1 1 10em; /* this */

    }

    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(6), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(7), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(8), 
    .safari .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        min-width: 24em;
    
        -webkit-flex: 1 0 24em; /* this */
    }
}