/*-- LAYOUT AND ANIMATAION --*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    font-size: 13px;
    line-height: 18px;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 300;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

h2, h5 {
    font-weight: bold;
    color: #00AEEF;
    margin-bottom: 10px;
}
h4 {
    font-size: 1.1em;
    color: #666666;
    margin-bottom: 10px;
}
.container p, .content p  {
    font-size: 1.1em;
    color: #666666;
    line-height: 1.7em;
    margin-bottom: 10px;
}
.colour_swatch p {
    margin: 0;
}
.colour_swatch h4 {
    font-size: 1.3em;
    margin-top: 20px;
    margin-bottom: 5px;
}

.bottom {
    width: 300px;
    max-width: 50%;
    float: right;
    height: auto;
}
.banner {
    margin: 20px auto 0 auto;
    display: block;
    max-width: 100%;
}

.important {
    font-size: .8em;
    width: 48%;
    float: left;
}
.important h5 {
    background-color: #666666;
    padding: 5px 12px;
    display: inline-block;
    color: white;
    font-size: .8rem;
    font-weight: 200;
    margin-bottom: 5px;
}
.important p {
    line-height: 1.5em;
}

.clearfix {
    overflow: auto;
    clear: both;
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: auto;
    overflow: visible;
}

.colour_swatch {
    margin: 1%;
    float: left;
    width: 98%;
    /* watch for terra cotta fold */
    min-height: 260px;
    text-align: center;
}

.colour_swatch div {
    height: 155px;
    width: 100%;
}

@media (min-width: 520px) {
    .colour_swatch:hover {
        transition: all 0.3s ease;
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        background-color: #ffffff;
        border: 5px solid #ffffff;
        outline: 2px solid #aaaaaa;
        box-shadow: 0 0 20px #666666;
    }
}

@media (min-width: 520px) {
    .colour_swatch {
        width: 48%;
    }
}

@media (min-width: 740px) {
    .colour_swatch {
        width: 31%;
    }
}

@media (min-width: 960px) {
    .colour_swatch {
        width: 23%;
    }
}

/*-- STANDARD COLOURS --*/
.surfmist {
    background-color: #dddbc5;
}
.paperbark {
    background-color: #cdc0a8;
}
.wheat {
    background-color: #cdaf85;
}
.sandstone {
    background-color: #b18c5f;
}
.coral {
    background-color: #cd895a;
}
.beige {
    background-color: #928677;
}
.dune {
    background-color: #aaa59c;
}
.sahara {
    background-color: #877461;
}
.jasper {
    background-color: #685c4c;
}
.pale_eucalypt {
    background-color: #728568;
}
.wilderness {
    background-color: #556859;
}
.mid_brunswick_green {
    background-color: #0c3f35;
}
.shale_grey {
    background-color: #b5b4af;
}
.bushland {
    background-color: #77786d;
}
.woodland_grey {
    background-color: #484f44;
}
.deep_ocean {
    background-color: #233b4c;
}
.ironstone {
    background-color: #3b4144;
}
.gunmetal {
    background-color: #3f3c39;
}
.grecian_terra_cotta {
    background-color: #a04f24;
}
.terra_cotta {
    background-color: #7e441d;
}
.sienna {
    background-color: #9d562b;
}
.headland {
    background-color: #8a422d;
}
.sunset {
    background-color: #90382a;
}
.manor_red {
    background-color: #6b2b21;
}
.indian_red {
    background-color: #320307;
}
.burgundy {
    background-color: #4f1109;
}
.oxide_red {
    background-color: #5c2617;
}
.saddle_brown {
    background-color: #513221;
}
.chocolate {
    background-color: #2a1e1d;
}
.mission_brown {
    background-color: #1a110a;
}
.light_grey {
    background-color: #98a5a9;
}
.earl_grey {
    background-color: #777d7e;
}
.bluestone {
    background-color: #314148;
}
.charcoal {
    background-color: #142128;
}
.midnight {
    background-color: #00000d;
}
.black_swatch {
    background-color: #030000;
}
.monument {
    background-color: #2d2e32;
}