﻿#content{
    max-width:850px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    
}

#content:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: -15px;
    width: 100%;
    height: 300px;
    z-index: 1;
    opacity: 0.2;
    background-image: url('../../images/desk_cleaning.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
}
#headerImage{
    margin:15px 0;
    overflow:hidden;
}
#headerImage img{
    margin:10px auto; 
    display:block;
    box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
    width:100%;
    max-width:960px;
    min-width:740px;
}
.infoContent .intro{
    margin:0 0 30px 0;
    text-align: center;
}
.intro ul{
    margin-bottom:0;
    list-style:none;
    padding-left: 0;
}
.intro span{
    font-weight:bold;
}

#introduction{
    margin-top:30px
}
#introduction div{
    opacity: 1;
}
#cleaningSystem{
    display:block;
    font-size: 28px;
    text-align:center;
    color:rgb(0,112,192);
    margin-top: 65px;
}
.carousel{
    margin:30px 0;
}
.slick-prev:before {
  color: #343434 !important;
}
.slick-next:before {
  color: #343434 !important;
}
/*.infoPoint{
    display: flex;
    width:600px;
    margin: 10px auto;
}*/
.infoPoint .left{
    display: block;
    height: 72px;
    text-align:center;
}
.infoPoint .left b{
    display:block;
}
.infoPoint .infoPointImg{
    margin:0 auto;
}
.infoContent .outro{
    margin:70px 0 50px 0;
    text-align:center;
}
.infoContent .outro ul{
    text-align:center;
    list-style:none;
    padding-left: 0;
}
#specialServices{
    font-weight:bold;
}
.hours{
    text-align:center;
    margin-bottom:50px;
    margin-top: 130px;
}
#outro:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 700px;
    width: 100%;
    height: 340px;
    z-index: 1;
    opacity: 0.2;
    background-image: url('../../images/floorbuffingmyrtlebeach.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
}
#outro .title{
    font-weight:bold;
    font-size:35px;
    text-align:center;
    margin-bottom:5px;
}

#contactForm{
    display: flex;
}

#contactForm .left{
    width:50%;
}
#contactForm .left label{
    font-weight:bold;
    font-size:13px;
    display: block;
}
#contactForm .left input{
    margin-bottom:5px;
}
#contactForm .right{
    width:50%;
}
#contactForm .right label{
    font-weight:bold;
    font-size:13px;
    display: inline-block;
}
#contactForm .right .controls{
    display: block;
    text-align: right;
}
#contactForm textarea{
    margin-bottom:10px;
    width: 100%;
}
#contactForm select{
}
#btnSubmitContact{
    margin-left:20px;
}
.footer{
    margin-top:50px;
    text-align:center;
}
.footer .field{
    display:block;
}

.map{
    margin:20px 0;
}
.map iframe{
    width:100%;
    max-width:960px;
}
#companyPhone a{
    color:black;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 850px) {
    #outro:before {
        top: 715px;
    }

    #content {
        margin: 0 5px;
    }
}

@media only screen and (max-width: 740px) {
    #outro:before {
        top: 790px;
    }

    .infoPoint .left{
        height: 110px;
    }
}

@media only screen and (max-width: 630px) {
    #outro:before {
        top: 770px;
    }
    .infoPoint .left{
        height: 72px;
    }
}

@media only screen and (max-width: 520px) {
    #outro:before {
        top: 790px;
    }

    #contactForm{
        display: block;
    }

    #contactForm .left input, #contactForm .left label, #contactForm .left select{
        margin:0 10px 5px 10px !important;
    }

    #contactForm .right textarea, #contactForm .right label{
        margin:0 10px 5px 10px !important;
        width:95% !important;
    }
    #contactForm .right .controls{
        text-align:center;
    }
    #lblEmail{
        display:inline !important;
    }
    #chkEmail{
        margin-top:10px;
        display:inline-block;
        width: 25px;
        height: 25px;
        vertical-align: text-bottom;
    }
    #btnSubmitContact{
        margin-left: 0;
        margin-top:10px;
        width: 95%;
    }
}

@media only screen and (max-width: 445px) {
    #outro:before {
        top: 810px;
    }
}

@media only screen and (max-width: 400px) {
    #outro:before {
        top: 850px;
    }
    .infoPoint .left{
        height: 100px;
    }
}


@media only screen and (max-width: 370px) {
    #outro:before {
        top: 890px;
    }
}