/* ------------------------------------------------ */
/* GLOBALS */
/* ------------------------------------------------ */
*, html, body{
    font-family: 'Karla', sans-serif;
    /*outline: 1px solid orange;*/
}

header > div{
    margin-bottom:8px;
}

header > div > nav {
    color: red;
    padding: 10px;
    background-color: #efefef;
    min-width: 435px;

    /*example prefixes*/
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -moz-box;
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

header > div > nav > ul {
    display: flex;
    padding: 0;
    margin: 0;
}

header > div > nav > ul > li {
    list-style: none;
    font-size: 0.5em;
    padding: 10px;
    /*margin: 5px;*/
    white-space: nowrap;
}

header > div > nav > ul > li:hover {
    color: blue;
    outline: 1px solid blue;
}

header > div > nav > select {
    display: block;
}

header > div > nav > .logo {
    padding: 20px;
    font-size: 1.5em;
    font-weight: bold;
    flex-grow: 1;
}

header > div > nav > .search{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-grow: 1;
}











/* ------------------------------------------------ */
/* SPECIFIC CLASSES */
/* ------------------------------------------------ */
/*SAMPLEMASTER*/
.sample-master{

}

.sample-master > nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    height: auto;
}

.sample-master > nav > ul {
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    flex-grow: 3;

    overflow: auto;
    padding: 0;
}

.sample-master > nav > ul > li {
    margin: 1px;
}

.sample-master > nav > select {
    display: none;
}


/*SAMPLE1*/
.sample1{

}

.sample1 > nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    height: auto;
}

.sample1 > nav > ul {
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 3;
}

.sample1 > nav > ul > li {

}

/*SAMPLE2*/
.sample2{

}

.sample2 > nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    flex-basis: 100px;
    /*flex-shrink: 1;*/

    height: 50px;
}

.sample2 > nav > ul {
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    flex-grow: 3;
    /*flex-shrink: 1;*/

    overflow: auto;
    padding: 0;
}

.sample2 > nav > ul > li {
    margin: 1px;
}


/*SAMPLE3*/
.sample3{

}

.sample3 > nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;

    height: 96px;
}

.sample3 > nav > ul {
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-grow: 3;

    height: inherit;
    padding: 0;
}

.sample3 > nav > ul li {
    padding: 3px;
}




/*SAMPLE4*/
.sample4{

}

.sample4 > nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    flex-basis: 100px;

    height: 50px;
}

.sample4 > nav > ul {
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    flex-grow: 3;

    padding: 0;
    overflow: auto;
}

.sample4 > nav > ul > li {
    margin: 1px;
}

.sample4 > nav > select {
    flex-grow: 3;
}






/* ------------------------------------------------ */
/* VIEWPORTS */
/* ------------------------------------------------ */
/*Breakpoints Guide https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862*/


/*phone*/
@media only screen and (max-width: 600px) {
    body {
        background-color: lightsteelblue;
    }
    .sample-master > nav > select {
        display: block;
    }
    .sample-master > nav > ul {
        display: none;
    }
}

/*tablet + tablet landscape*/
@media only screen and (min-width: 601px) {
    body {
        background-color: lightblue;
    }
    .sample-master > nav {
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;

        height: auto;
    }
    .sample-master > nav > ul {
        flex-direction: row;
        flex-wrap: wrap;
        flex-grow: 3;
        justify-content: left;

        margin-left: 10px;
    }
    .sample-master > nav > .search {
        margin: 20px;
    }
}

@media only screen and (min-width: 800px) {
    body {
        background-color: lightsteelblue;
    }
    .sample-master > nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        height: auto;
    }

    .sample-master > nav > ul {
        justify-content: left;
        flex-direction: row;
        flex-wrap: wrap;
        flex-grow: 3;
    }
}


/*laptop*/
@media only screen and (min-width: 900px) {
    body {
        background-color: #add8e670;
    }
    .sample-master > nav > select {
        /*display: block;*/
    }
    .sample-master > nav > ul {
        /*display: none;*/
    }
}


/*desktop + large desktop up*/
@media only screen and (min-width: 1000px) {
    /*if 1000px + 20+ items*/
    body {
        background-color: #b0c4de8a;
    }
}

@media only screen and (min-width: 1200px) {
    body {
        background-color: lightblue;
    }
    .sample-master > nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;

        height: 96px;
    }

    .sample-master > nav > ul {
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-grow: 3;

        padding: 0;
        height: inherit;
    }

    .sample-master > nav > ul li {
        padding: 3px;
    }
}

@media only screen and (min-width: 1400px) {
    .sample-master > nav {
        font-size: 1.7em;
    }
    .sample-master > nav > ul {
        flex-grow: 10;
    }

}










/* ------------------------------------------------ */
/*ignore below*/
/* ------------------------------------------------ */
main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

main div{
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 20px;
    margin: 17px;
    flex-basis: 18%;
    background-color: #efefef47;
}

ol {
    padding-left: 20px;
}

/*!* Variables *!*/
/*@body-bg-color: #83b692; // green*/
/*@text-color: #fff; // white*/
/*@button-bg-color: #f9627d; // pink*/

/*!* LESS CSS *!*/
/*body {*/
/*background: @body-bg-color;*/
/*color: @text-color;*/
/*}*/