/* ----------------------------
layout
---------------------------- */

/* row */
.row
{
    clear: both;
    overflow: hidden;
}

.row--banner
{
    background-image: url(../img/malybel-bg.jpg);
    background-position: top;
    background-size: cover;
}

.row--services_banner
{
    background-image: url(../img/services-bg.jpg);
    background-position: center;
    background-size: cover;
    border-bottom: solid 20px #4EC4C1;
}

.row--rates_banner
{
    background-image: url(../img/rates-bg.jpg);
    background-position: center;
    background-size: cover;
    border-bottom: solid 20px #ff3b3f;
}

.row--directions_banner
{
    background-image: url(../img/directions-bg.jpg);
    background-position: center;
    background-size: cover;
    border-bottom: solid 20px #4EC4C1;
}

.row--contact_banner
{
    background-image: url(../img/contact-bg.jpg);
    background-position: top;
    background-size: cover;
    border-bottom: solid 20px #4EC4C1;
}

.subpage-padding
{
    height: 300px;
}

/* row-colors */
.row--white { background: #fff; }
.row--grey { background: #f2f2f2; }

.row--teal
{
    color: #fff;
    background: #4EC4C1;
}

.row--purple
{
    color: #fff;
    background: #6e3667;
    padding-bottom: 2em;
}

.row--papaya
{
    color: #fff;
    background: #e24e42;
    padding: 2em;
}

.row--watermelon
{
    color: #fff;
    background: #ff3b3f;
    padding-bottom: 2em;
}

.bubble
{
    width: 100%;
    margin-top: -125px;   
}

.row--purple a, .row--papaya a, .row--watermelon a, .row--purple h1, .row--papaya h1, .row--watermelon h1
{
    color: #fefefe;
}

.row--dark-grey
{
    color: #fff;
    background: #a9a9a9;
}

/* row-padding */
.row--padding-medium
{
    padding-top: 2.1875em;
    padding-bottom: 2.1875em;
}

.row--padding-wide
{
    padding-top: 2.1875em;
    padding-bottom: 2.1875em;
}

/* containers */
.container-narrow,
.container-medium,
.container-wide
{
    margin: 0 auto;
    padding-left: 1em;
    padding-right: 1em;
}

.container-narrow { max-width: 34em; }

.container-medium { max-width: 45em; }

.container-wide
{
    max-width: 58em;
    padding-top: 1em;
}

.center
{
    text-align: center;
}

/* columns */
.col-5,
.col-narrow,
.col-narrow--right { margin-bottom: 1.5em; }

/* ----------------------------
wide
---------------------------- */
@media (min-width: 38em)
{
    .row--padding-medium
    {
        padding-top: 2.1875em;
        padding-bottom: 2.1875em;
    }

    .row--padding-wide
    {
        padding-top: 2.1875em;
        padding-bottom: 2.1875em;
    }
    .padding
    {
        margin: 1em;
    }
    
    .container-narrow,
    .container-medium,
    .container-wide
    {
        padding-left: 2em;
        padding-right: 2em;
    }
    
    .col-4,
    .col-5,
    .col-narrow,
    .col-medium,
    .col-wide,
    .col-bubble
    { float: left; }
    .col-narrow--right,
    .col-wide--right { float: right; }
    
    .col-wide,
    .col-wide--right { width: 61%; }
    
    .col-medium
    {
        width: 45%;
        margin-left: 1.25%;
        margin-right: 1.25%;
    }
    
    .col-narrow,
    .col-narrow--right
    {
        width: 25%;
        margin-bottom: 0;
    }
    
    .col-4
    {
        width: 24%;
        padding: .5%;
        margin: 1em 0em 1em;
    }
    
    .col-5
    {
        width: 20%;
        margin: 0em;
        padding: 0em;
    }
   
    .bubble
    {
        width: 350px;
        margin-top: -175px;   
    }
    
    .col-bubble
    {
        width: 35%;
    }
}