/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,600,400,400italic,600italic);*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body { background: #000; font-family: 'Montserrat', sans-serif; /*font-family: 'Open Sans', sans-serif;*/ font-size: 16px; font-weight: 300; margin: 0;}

/* Page Wrap */
#page { width: 100%; }
content img { float: left; width: 30%; }
content h3 { float: left; width: 30%; }
/* Top Bar */
.mobilemenu { display: none; }
.mobilemenu .mobilelogo { width: 65px; float: left; display: none; }
.mobilebutton { width: 70; float: right; }
.mobilebutton2 { height: 50; float: right; }
#menubar {
           background: #000000; height: 75px; padding: 24 0 0 10; margin: 0 auto; 
           background: -webkit-linear-gradient(#000000, #444444); /* For Safari 5.1 to 6.0 */
           background: -o-linear-gradient(#000000, #444444); /* For Opera 11.1 to 12.0 */
           background: -moz-linear-gradient(#000000, #444444); /* For Firefox 3.6 to 15 */
           background: linear-gradient(#000000, #444444); /* Standard syntax (must be last) */}
    #menu { max-width: 1000px; margin: 0 auto; }
    a.logo { float:left; font-weight: 800;  font-size: 1.5em; padding: 0 0 0 10; color: white; }
    .menu1 p { padding: 10 0 0 0;}
    .menu2 { display: none; text-align: center; }
    .menu2 p { padding: 10 0 0 0;}
    p.nav { font-size: 1.5em; padding: 10 0 0 0; }
    nav ul { list-style: none; margin: 0; padding: 0 10 0 0; }
    nav ul li { display: inline-block; margin-top: 3;}

    .form-group { color: white; }
    label { float: left;}
/* Main Section */
.overlaycontent { max-width: 500px; max-height: 245px; margin: 0 auto; text-align: center; padding-top: 50px;}
.overlaycontent img { max-width: 90%; max-height: 245px; }
.overlay h1.overlaybig { max-width: 1000px; margin: 0 auto; padding-top: 16; text-align: center;}
.overlay h1.overlaysmall { max-width: 1000px; margin: 0 auto; padding-top: 16; display: none; text-align: center;}
.picture { height: 300px; margin: 0 auto;  background: url("../images/backgroundcrop.jpg"); background-size: cover; background-repeat: no-repeat; }
.picture2 { height: 200px; margin: 0 auto;  background: url("../images/backgroundcrop.jpg"); background-size: cover; background-repeat: no-repeat; }
@media screen and (max-width: 400px) {
    .overlaycontent { padding-top: 25px; }
}
.overlay h1.overlaymobile { display: none; max-width: 1000px; margin: 0 auto; padding-top: 16; text-align: center; }
.overlay h1.overlaymobilebottom { display: none; max-width: 1000px; margin: 0 auto; padding-top: 16; text-align: center; }
.overlay {
    height: 60px;
    background: rgb(245, 231, 0);
    background: rgba(245, 231, 0, 0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.overlay.b{
    display: none;
    position: relative;
    bottom: -80;
    height: 60px;
    background: rgb(245, 231, 0);
    background: rgba(245, 231, 0, 0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

/*Gallery*/
.gallery img { display: inline-block; margin: 0 20 20 0; border: 1px solid white; }
.gallery { text-align: center; }

@media screen and (max-width: 1100px) {
.gallery img { width: 45%; }
}

@media screen and (max-width: 800px) {
.gallery img { width: 95%; }
}

/* Second Section */
section.features { margin: 0 auto; max-width: 1050px; padding: 20 0 0 20; color:white; }
section.features a {color:rgb(244,237,95);}
section.features aside { width: 30%; text-align: center; display: inline-block; vertical-align:top; margin: 10; }
section.features aside a { color: white; }
section.features aside a:hover { text-decoration: underline;}
section.features aside p { color: white; font-size: 0.88em; }

/* Footer */
footer { max-width: 1000; background: #000; color: #FFF; margin: 0 auto; padding: 30 0 0 0; font-size: 0.7em; }

/* Text */
h1 { margin: 0; font-size: 1.3em; font-weight: 800; }
h2 { margin: 0; font-size: 1.6em; font-weight: 800; }
h3 { margin: 0; font-size; 1.3em; font-weight: 800; }
li { float: right;}
li a { color: white; }
ul li { margin-left: 30px; }
ul li p { margin: 0; font-size; 1em; font-weight: 800; }
p { margin: 0; }
a:visited { text-decoration: none; }
a { text-decoration: none; }
a:hover { color: rgb(244, 237, 95); text-decoration: underline; }
bar { position: absolute; top: 30px; height 30px; background: yellow; }
hr { margin: 0; background-color: black; }

section.features aside p a { text-decoration: underline; color: rgb(244, 237, 95); }
section.features aside p a:hover { text-decoration: none; }
/* Screen Sizes */
@media screen and (max-width: 1075px) {
section.features img.quote { float: left; width:150px; }
section.features aside { width: 90%; float: none; text-align: left;
        margin: 8 20;
        padding: 0 0 20 0;
        background-size: 50px 50px;
        background-position: 20px 5px; }
}
@media screen and (max-width: 850px) {
.mobilebutton { padding: 0 25 0 0; }
.mobilebutton2 {  padding: 0 25 0 0; }
    ul li { font-size: .86em; padding-top: 3; }
}
@media screen and (max-width: 800px) {
	section.features img.quote { width: 100px; }
    nav { display: none; }
    .mobilemenu {display: block;}
    .overlay h1.overlaybig { display: none; }
    .overlay h1.overlaysmall { display: block; }
}

@media screen and (max-width: 695px) {
    .overlay.b { display: block; }
    .overlay h1.overlaysmall { display: none; }
    .overlay h1.overlaymobile { display: block; }
    .overlay h1.overlaymobilebottom { display: block; }
    .mobilebutton { padding: 10 25 0 0; }
    .mobilebutton2 {  padding: 10 25 0 0; }
    #menubar { padding: 14 0 10 20; height: 66px; }
    .menu1 { display: none; }
    .mobilemenu .mobilelogo { display: block; }
    .picture { background-position: center; }
}

@media screen and (max-width: 400px) {
    .mobilebutton { width: 50; padding-top: 20 }
    .mobilebutton2 { width: 40; padding-top: 12 }
    #menubar { height: 70px; }
}

.menu1 img, .menu2 img { width: 50px; float: left; }

.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 90%;
  padding: 15px;
  overflow: hidden;
  border: none;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 20px/1 Montserrat, sans-serif;
  color: rgba(0,0,0,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #f5e700;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.2) ;
  background-size: 55px;
  background-repeat: no-repeat;
  background-position: left;
} 
.svcplumbing {
  background-image: url(../images/vectors/plumbing.svg);
}
.svcelectrical {
  background-image: url(../images/vectors/electrical.svg);
}
.svcgeneral {
  background-image: url(../images/vectors/general.svg);
}
.svccarpentry {
  background-image: url(../images/vectors/carpentry.svg);
}
.svcinstall {
  background-image: url(../images/vectors/installation.svg);
}
.svcpainting {
  background-image: url(../images/vectors/painting.svg);
}
.svcflooring {
  background-image: url(../images/vectors/flooring.svg);
}


/* SERVICES PAGE -------------------------------------*/

/* Second Section */
section.services { margin: 0 auto; max-width: 1000px; padding: 20; }
section.services aside { vertical-align: top; width: 30%; display: inline-block; margin: 10; }
section.services aside a { color: white; text-decoration: underline;}
section.services aside a:hover { text-decoration: none;}
section.services aside p { color: white; font-size: 0.88em; }
section.services aside ul li { color: white; text-align: left; width: 100%; }

/* Screen Sizes */
@media screen and (max-width: 850px) {
    .enjoy-css {  background-size: 45px; font-size: 1em; }
}
@media screen and (max-width: 750px) {
section.services aside { width: 46%;}
}

@media screen and (max-width: 625px) {
section.services aside { width: 41%;}
.enjoy-css { padding: 5px; background-size: 25px; font-size: 1em; width: 100%;}
}

@media screen and (max-width: 400px) {
section.services { padding: 5; }
section.services aside { width: 40%; font-size: .8em; }
.enjoy-css { padding: 5px; background-size: 20px; font-size: 1em; width: 100%;}
}