@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Condensed:700);
/*@import url(//fonts.googleapis.com/css?family=Oswald:700|Open+Sans:400|Montserrat:700,400|Lato:700,400,400i|);*/
* {
    margin: 0px;
    padding: 0px;
}

.header {
    position: relative;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
    .header .cover {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-image: url(../images/cover.png);
        background-size: 20px 20px;
    }
.bar {
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(52, 86, 111, 0.74);
    -webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    -o-transition: background-color 300ms;
    -ms-transition: background-color 300ms;
    transition: background-color 300ms;
}
    .bar.opaque {
        background-color: #2e4c63;
        -webkit-transition: background-color 300ms;
        -moz-transition: background-color 300ms;
        -o-transition: background-color 300ms;
        -ms-transition: background-color 300ms;
        transition: background-color 300ms;
    }
    .bar::before {
        content: "";
        position: absolute;
        top: -4px;
        left: 0px;
        width: 100%;
        height: 2px;
        background-color: rgba(52, 86, 111, .4);
    }
    .bar::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0px;
        width: 100%;
        height: 2px;
        background-color: rgba(52, 86, 111, .4);
    }
.logo {
    display: block;
    margin: 5% 10%;
}
    .logo img {
        width: 100%;
    }
@media(min-width:330px) {
    .logo {
        display: block;
        width: 280px;
        margin: 24px auto;
        text-align: center;
    }
        .logo img {
            height: 50px;
            width: auto;
        }
}

.areas {
    overflow: hidden;
    background-color: #ecd065;
}
    .areas .wrap {
        padding: 80px 40px;
        box-sizing: border-box;
    }
    .areas .content {
        overflow: hidden;
    }
    .areas h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #34566f;
        text-transform: uppercase;
        text-align: center;
    }
    .areas p {
        padding-bottom: 16px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #555;
        text-shadow: 0px 0px 8px #fff;
    }
    .areas .map{

    }
    .areas .container {
        position: relative;
        width: 100%;
        padding-bottom: 59.722%;
        height: 0px;
        margin: 0px auto;
    }
        .areas .container span {
            display: block;
            position: absolute;
            transform: scale(.1);
            opacity: 0;
            transition: all .2s ease-in-out;
        }
        .areas .container.appear span {
            transform: scale(1);
            opacity: 1;
        }
    .areas .container .alabama {
        top: 30.233%;
        left: 20.83%;
        width: 23.6111%;
        height: 69.7674%;
        background-image: url(../images/map/alabama.svg);
        transition-delay: .6s;
    }
    .areas .container .mississippi {
        top: 30.233%;
        left: 0%;
        width: 24.3056%;
        height: 69.7674%;
        background-image: url(../images/map/mississippi.svg);
        transition-delay: .7s;
    }
    .areas .container .georgia {
        top: 30.233%;
        left: 38.1944%;
        width: 32.6389%;
        height: 62.7907%;
        background-image: url(../images/map/georgia.svg);
        transition-delay: .8s;
    }
    .areas .container .tennessee {
        top: 8.1395%;
        left: 7.6389%;
        width: 54.8611%;
        height: 27.907%;
        background-image: url(../images/map/tennessee.svg);
        transition-delay: .9s;
    }
    .areas .container .northcarolina {
        top: 0%;
        left: 44.4444%;
        width: 55.5556%;
        height: 43.0233%;
        background-image: url(../images/map/northcarolina.svg);
        transition-delay: 1s;
    }
    .areas .container .southcarolina {
        top: 25.5814%;
        left: 51.3889%;
        width: 31.9445%;
        height: 43.0233%;
        background-image: url(../images/map/southcarolina.svg);
        transition-delay: .5s;
    }
@media(min-width:640px) {
    .areas h2 {
        font-size: 36px;
    }
}
@media(min-width:780px) {
    .areas h2 {
        text-align: left;
    }
    .areas .wrap {
        min-height: 100vh;
        padding: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .areas .content {
        width: 50%;
    }
    .areas .map {
        width: 50%;
        max-width: 80vh;
        align-self: center;
    }
}
@media(min-width:940px) {
    /*.laundryMat .person {
        display: block;
        z-index: 1;
        position: absolute;
                
        right: 0;
        top: 0;
        bottom: 0;
        width: 40%;
        background: url(../images/carrying-laundry.png);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    .laundryMat .content {
        padding-right: 40%;
    }*/
}
@media(min-width:1240px) {
    .areas h2 {
        font-size: 46px;
    }
    .areas p {
        font-size: 22px;
        line-height: 30px;
    }
}
@media(min-width:1400px) {
    .areas h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 56px;
        font-weight: 700;
    }

    .areas p {
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 28px;
        line-height: 36px;
    }
}

.laundryMat {
    overflow: hidden;
    background-color: #fff;
}
    .laundryMat .wrap {
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-image: url(../images/laundrymat.jpg?u=2);
        padding: 80px 40px;
        box-sizing: border-box;
    }
    .laundryMat .person {
        display: none;
    }
    .laundryMat.appear .person {

    }
    .laundryMat .content {
        z-index: 2;
        position: relative;
    }
    .laundryMat h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #34566f;
        text-transform: uppercase;
        text-align: center;
    }
    .laundryMat p {
        padding-bottom: 16px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #555;
        text-shadow: 0px 0px 8px #fff;
    }
@media(min-width:640px) {
    .laundryMat .wrap {
        min-height: 100vh;
        padding: 80px;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
    }
    .laundryMat h2 {
        font-size: 36px;
    }
}
@media(min-width:940px) {
    .laundryMat h2 {
        text-align: left;
    }
    .laundryMat .person {
        display: block;
        z-index: 1;
        position: absolute;
                
        right: 0;
        top: 0;
        bottom: 0;
        width: 40%;
        background: url(../images/carrying-laundry.png);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    .laundryMat .content {
        padding-right: 40%;
    }
}
@media(min-width:1240px) {
    .laundryMat h2 {
        font-size: 46px;
    }
    .laundryMat p {
        font-size: 22px;
        line-height: 30px;
    }
}
@media(min-width:1400px) {
    .laundryMat h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 56px;
        font-weight: 700;
    }

    .laundryMat p {
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 28px;
        line-height: 36px;
    }
}
@media (pointer: fine) and (min-width:940px) {
    .laundryMat.appear .person {
        -webkit-transform: translateX(100%);
        -webkit-animation-name: move-person;
        -webkit-animation-duration: 1.5s;
        -webkit-animation-delay: 1s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
    }
}
@-webkit-keyframes move-person {
    from {
        -webkit-transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0);
    }
}


.mosaic {
    overflow: hidden;
    background-color: #1c1c1e;
    background-color: #63899e;
}
    .mosaic .wrap {
        padding: 80px 40px;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        box-sizing: border-box;
    }
    .mosaic h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #ecd065;
        text-align: center;
        text-transform: uppercase;
    }
    .mosaic p {
        padding-bottom: 16px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #ddd;
    }
    .mosaic .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 2px;
        padding-top: 20px;
    }
    .mosaic .image {
        display: block;
        position: relative;
        width: 100%;
        height: 0px;
        padding-bottom: 40%;
        overflow: hidden;
    }
        .mosaic .image a {
            text-decoration: none;
            border: none;
        }
    .mosaic .scalar {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        -moz-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        -o-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        -ms-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
    }
    .mosaic .scalar span {
        position: relative;
        left: -10000px;
    }
@media(min-width: 540px){
    .mosaic .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 2px;
        padding-top: 20px;
    }
    .mosaic .image {
        padding-bottom: 100%;
    }
    .mosaic .item:first-child {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }
}
@media(min-width:640px) {
    .mosaic .wrap {
        min-height: 100vh;
        padding: 80px;
    }
    .mosaic h2 {
        font-size: 36px;
    }
    .mosaic .grid-center {
        width: 100%;
        max-width: 100vh;
        margin: 0px auto;
    }
}
@media(min-width:1240px) {
    .mosaic h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 46px;
        font-weight: 700;
    }
    .mosaic p {
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 22px;
        line-height: 30px;
    }
}
@media(min-width:1400px) {
    .mosaic h2 {
        font-size: 56px;
        font-weight: 700;
    }

    .mosaic p {
        font-size: 28px;
        line-height: 36px;
    }
}
@media (pointer: fine) and (min-width:540px) {
    .mosaic .image {
        -webkit-transition: 300ms;
        -moz-transition: 300ms;
        -o-transition: 300ms;
        -ms-transition: 300ms;
        transition: 300ms;
    }
    .mosaic .scalar {
        top: 40%;
        left: 40%;
        right: 40%;
        bottom: 40%;
        -webkit-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        -moz-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        -o-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        -ms-transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
        transition: top .3s ease-out, left .3s ease-out, right .3s ease-out, bottom .3s ease-out;
    }
    .mosaic .appear .scalar {
        top: 0%;
        left: 0%;
        right: 0%;
        bottom: 0%;
        -webkit-transition: 300ms;
        -moz-transition: 300ms;
        -o-transition: 300ms;
        -ms-transition: 300ms;
        transition: 300ms;
    }
    .mosaic .item:hover .scalar {
        margin: -40px;
        -webkit-transition: 300ms;
        -moz-transition: 300ms;
        -o-transition: 300ms;
        -ms-transition: 300ms;
        transition: 300ms;
    }
}


.contact {
    overflow: hidden;
    background-color: #151515;
    background-color: #34566f;
}
    .contact .wrap {
        padding: 80px 40px;
        box-sizing: border-box;
    }
    .contact .form {
        padding-bottom: 48px;
    }
    .contact h2 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
    }
    .contact h3 {
        padding-bottom: 16px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        text-align: left;
    }
    .contact p {
        padding-bottom: 16px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #ccc;
               
    }
    .contact a {
        font-weight: 700;
        color: #ccc;
    }
    .contact .row{
        padding-bottom: 28px;
        overflow: hidden;
    }
        .contact .subbed {
            padding-bottom: 28px;
            overflow: hidden;
        }
        .contact .subbed:last-child {
            padding-bottom: 0px;
            overflow: hidden;
        }
    .contact .error {
        padding: 20px;
        margin-bottom: 28px;
        background-color: #f84040;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
    }
    .contact label {
        display: block;
        padding-bottom: 6px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 18px;
        color: #d7d7d7;
        text-transform: uppercase;
    }
        .contact label.full {
            display: none;
        }
    .contact .alert label {
        font-weight: 700;
    }
    .contact input[type=text] {
        width: 100%;
        padding: 0px 8px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 40px;
        color: #222;
        border: 0px;
        box-sizing: border-box;
        border: 2px solid #fff;
        border-radius: 0px;
    }
    .contact textarea {
        width: 100%;
        height: 170px;
        padding: 8px;
        font-family: Oswald,Arial,Verdana,sans-serif;
        font-size: 16px;
        line-height: 22px;
        color: #222;
        border: 2px solid #fff;
        box-sizing: border-box;
        border-radius: 0px;
    }
    .contact .alert input[type=text],
    .contact .alert textarea {
        border: 2px solid #f84040;
        background-color: #f7a9a9;
    }
    .contact .required label::before{
        content: "* ";
    }
    .contact button {
        height: 60px;
        line-height: 60px;
        padding: 0px 20px;
        border: 0px;
        font-family: 'Roboto Condensed',Arial,Verdana,sans-serif;
        font-size: 28px;
        font-weight: 700;
        background-color: #ecd065;
        color: #2e4c63;
        -webkit-appearance: none; /* Hides the drop down arrow and the number selector */
    }
@media(min-width: 640px){
    .contact .wrap {
        padding: 80px;
    }
    .contact .form {
        float: left;
        width: 50%;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .contact .info {
        float: left;
        width: 50%;
        padding-left: 24px;
        box-sizing: border-box;
    }
    .contact h2 {
        font-size: 36px;
    }
}
@media(min-width:1020px) {
    .contact .form {
        padding-right: 40px;
    }
    .contact .info {
        padding-left: 40px;
    }
    .contact .row {
        padding-bottom: 48px;
    }
    .contact label.full {
        display: block;
    }
    .contact label.sub {
        padding-bottom: 0px;
        font-size: 12px;
        line-height: 14px;
        color: #d7d7d7;
    }
    .contact .subbed{
        position: relative;
        padding-bottom: 20px !important;
        float: left;
        box-sizing: border-box;
    }
        .contact .subbed.right {
            padding-right: 12px;
        }
        .contact .subbed.left {
            padding-left: 12px;
        }
    .contact .sub{
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
    .contact .left .sub {
        position: absolute;
        left: 12px;
        bottom: 0px;
    }
    .contact .first {
        width: 50%;
    }
    .contact .last {
        width: 50%;
    }
    .contact .email {
        width: 70%;
    }
    .contact .phone {
        width: 30%;
    }
    .contact .city {
        width: 50%;
    }
    .contact .state {
        width: 20%;
    }
    .contact .zip {
        width: 30%;
    }
}
@media(min-width:1240px) {
    .contact h2 {
        font-size: 46px;
    }
    .contact h3 {
        font-size: 36px;
    }
    .contact p {
        font-size: 22px;
        line-height: 30px;
    }
    .contact .error {
        font-size: 22px;
        line-height: 30px;
    }
    .contact label {
        font-size: 22px;
        line-height: 24px;
    }
}
@media(min-width:1400px) {
    .contact h2 {
        font-size: 56px;
        font-weight: 700;
    }
    .contact p {
        font-size: 28px;
        line-height: 36px;
    }
    .contact .error {
        font-size: 28px;
        line-height: 36px;
    }
}


.footer {
    background-color: #2e4c63; 
}
    .footer .wrap {
        padding: 80px 40px;
        box-sizing: border-box;
    }