@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html,
body { background:white; color:black; width:100%; height:100%; }
section, footer { width:100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:left; }

.pagehead {width:100%; text-align:center; font-weight:bolder; font-size:1.3rem; }

#wrap-landing { position:relative; width:100%; height:100vh; max-height:100vh; text-align:center; background: url(../img/bluebits2.jpg) center center no-repeat; background-size:cover; padding-top:2em;}
#wrap-landing .title-name { width:100%; position:absolute; top:10%; padding:0 2rem;  }
#wrap-landing .title-slogan { width:100%; position:absolute; top:14%; padding:0 2rem; }


@media screen and (min-width: 900px) {
   #wrap-landing { background: url(../img/bluebits2.jpg) center top no-repeat; background-size:cover; padding:2rem; }
   #wrap-landing .title-name { display:inline;  }
   #wrap-landing .title-slogan { width:100%; position:absolute; top:20%; }
}
#wrap-filemgr { width:100%; height:100%; text-align:center; background:#eeeeee; background-size:100% 100%; }

#wrap-about {background: #A3B8CC; min-height:800px; padding:2rem 0; }
#wrap-about .row { max-width:1200px; margin:0 auto; }
#wrap-about .pagehead { color:black; }
#wrap-about img { width:500px; min-width:300px; height:auto; }
#wrap-about .text1 { font-weight:bold; text-align:center; padding:0 1rem; }
#wrap-about .btn1 { background:#696969; color:white; padding:1rem 2rem; }
#wrap-about .btn1:hover { background:black; color:white; }
@media screen and (min-width: 900px) {
   #wrap-about .text1 { font-weight:bold; text-align:right; padding:0 1rem; }
}
#wrap-services {text-align:center; margin:0 auto; background:#FCFCE8; padding:2rem 0;  }
#wrap-services .text1 { color:black; padding:0 2rem; max-width:1200px; min-width:300px;}
#wrap-services .btn1 { background:white; border-radius:3px; padding:1rem 2rem;}
#wrap-services .btn1:hover { background:#A9A9A9; }

#wrap-business {background:url(../img/shutterstock_403015024.jpg); background-size:cover; padding:2rem 0;  }
#wrap-business .pagehead { color:white;  }
#wrap-business .buscards { background:#f3f3f3; }

#wrap-residential {background:url(../img/pexels2.jpg);  background-size:cover; padding:2rem 0;    }
#wrap-residential .pagehead { color:navy; }
#wrap-residential .buscards { background:#F5F5F5; }
.card-title { font-size:1.2rem; line-height:1.2; font-weight:bolder; text-align:center; color:red; padding-top:.8rem; }
.card-text { padding-top:1rem; text-align:center; }
.card-img { text-align:center; }

#wrap-contact {background: url(../img/shutterstock_559031851.jpg);  background-size:cover; padding:2rem 0;  }
#wrap-contact .column2 { text-align:center; }
#wrap-contact .intro { width:90%; margin:auto; text-align:center; padding:.3rem 0; }
#wrap-contact .pagehead { color:#000080; padding-bottom:1rem;  }
#wrap-contact .social-icons { display:flex; flex-direction:row; flex-wrap: wrap; margin:.3rem 0; }
#wrap-contact .social-icons i { margin:0 .5rem; }
#wrap-contact .icon { margin-right:1rem; }
#wrap-contact a { color:blue; }
#wrap-contact a:hover { color:black; }
#contact-form { background: #F2F3EB; border:solid 3px #474544; border-radius:20px; margin:2rem; padding:0 2rem 2rem; }
#contact-form input,
#contact-form textarea { width:100%; font-size:100%; border:2px solid gray; background:none; top:0; left:0; z-index:1000; outline:0; padding:1.5rem;   }
#contact-form > div { overflow: hidden; }
#contact-form input:focus,
#contact-form textarea:focus { border-color: #000080; }
#contact-form input:focus + label,
#contact-form textarea:focus + label { background: #000080; color: white; font-size:70%; padding:1px 6px; z-index:2; text-transform:uppercase;  }
#contact-form label { transition:background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; z-index:1000; position:absolute; color:#999; padding:7px 6px;   }
#contact-form textarea { display:block; resize:vertical;  }
#contact-form.go-bottom label { top: 0; bottom: 0; left: 0; width: 100%;   }
#contact-form.go-bottom input:focus,
#contact-form.go-bottom textarea:focus { padding:1.5rem;  }
#contact-form.go-bottom input:focus + label,
#contact-form.go-bottom textarea:focus + label {  top: 100%; margin-top: -25px;  }
@media screen and (max-width: 600px) {
   #wrap-contact {background:navy; background-size:cover;  }
   #contact-form { background: #F2F3EB; border:solid 3px #474544; border-radius:20px; margin:2rem 0; padding:0 .5rem 1rem; }
}


#wrap-footer { margin:0 auto; background:black; color:#757575; padding:2rem 0; }
.footer1 { max-width:1200px; border-bottom:1px solid #757575; margin:0 auto; }
.footer2 { max-width:900px; }
.footer3 { width:100%; font-size:.9rem; padding:1.3rem 0; background:#333333; color:#C0C0C0; display:flex; flex-direction:row; flex-direction:wrap; justify-content:space-around; }

#wrap-footer h3 { color:#fff; font-weight:600; margin-bottom:2px;}
#wrap-footer .footer2 h3 { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 30px; position: relative; }
#wrap-footer .footer2 h3 span { border-bottom:2px solid #ff5e14;}
/*footer .footer2 h3::before { content: ""; position: absolute; left: 0; bottom: -15px; height: 2px; width: 50px; background: #ff5e14; }*/
#wrap-footer .column3 { width:350px; text-align:center; }
#wrap-footer .column3 i { color:#ff5e14; font-size:2rem; margin-top:8px;  }
#wrap-footer .col3-text { padding-left:15px; display:inline-block; }

#wrap-footer .logo { width:100%; margin-bottom:20px; }
#wrap-footer .logo img { max-width:300px; }
#wrap-footer .wrap-links ul li { display:inline-block; float:left; width:50%; margin-bottom:12px; }
#wrap-footer .wrap-links ul li a:hover { color:#ff5e14; }
#wrap-footer .wrap-social a { color: white; font-size: 16px; margin-right: 15px; }
#wrap-footer .wrap-social i { color:white; margin-right:15px; height: 40px; width: 40px; text-align: center; line-height: 38px; border-radius: 50%; }
#wrap-footer .facebook-bg{ background: #3B5998; }
#wrap-footer .twitter-bg{ background: #55ACEE; }
#wrap-footer .linkedin-in-bg{ background: #4682B4; }

@media screen and (max-width: 600px) {
    .footer1 {
        width:100%;    }

}