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

/* CSS Reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* End Of Reset */

body {
   font-family: Lato, sans-serif;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   cursor: default;
   padding-top: 90px;
}

a, form {
   text-decoration: none;
}

a, #header, #top-bar {
   color: #FFFFFF;
}

#footer-container a {
   color: #000000;
   text-decoration: underline;
}

#fake-header, .hide, #menu, #filler {
   display: none;
}

#main, #footer, #filler {
   background: url(../images/concrete.jpg);
}

#header, #top-bar {
   background: url(../images/asphalt.jpg);
}

#quote-button a {
   /* darker green */
   color: #5bB835;
   height: 100%;
}

#quote-button a, #logo, .menu-item,
.service-item, #patch-work, #services,
input, textarea {
   display: block;
}

#quote-button a, #image-crossfade img, .section-img,
#logo, #top-bar, #menu-toggle {
   width: 100%;
}

#footer {
   line-height: 1.5;
}

#image-crossfade img {
   max-width: 400px;
}

#image-crossfade img, .section-img {
   max-height: 100%;
   box-shadow: 3px 3px 6px 0px #000000;
   border: 1px solid #FFFFFF;
}

#image-crossfade {
  overflow: visible;
}

.image-container {
   max-width: 1000px;
   margin: 0 auto;
   margin-top: 40px;
}

.section-img {
   max-width: 200px;
   float: right;
   margin: 15px 10px 15px 10px;
}

h2, #quote-button > div {
   font-weight: 700;
}

#call, #facebook {
   padding-right: 15px;
}

#services, #quote-button, #hide-menu, form,
input[type="submit"] {
   /* light green */
   color: #6CB846;
}

#quote-button > div {
   width: 140px;
   border-radius: 10px;
   text-shadow: 1px 1px #DDDDDD;
   background-image: -webkit-linear-gradient(top, #F6F6F6, #8D8D8D);
   background-image: linear-gradient(to bottom, #F6F6F6, #8D8D8D);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F6F6F6, endColorstr=#8D8D8D);
   border: 1px solid #6CB846;
}

#quote-button > div, #call, p, #guarantee {
   font-size: 20px;
}

#main, #footer {
   padding: 10px 20px 0 30px;
}

#quote-button, form {
   padding: 10px;
}

#call, #quote-button, #menu-toggle {
   height: 70px;
}

#top-bar {
   position: fixed;
   top: 0;
   box-shadow: 0px 4px 4px 0px #000;
}

#top-bar, section {
   overflow: hidden;
}

#call, #facebook, #quote-button, #menu-toggle, h2, #footer, #image-crossfade, #guarantee {
   text-align: center;
}

#call div, #show-menu, #hide-menu, #quote-button div {
   line-height: 70px;
}

#logo {
   clear: both;
}

.menu-item, .service-item, #patch-work, #services {
                            /* light green */
   border-bottom: 2px solid #6CB846;
}

.menu-item, .service-item, #patch-work, #services,
input[type="submit"] {
   height: 50px;
   line-height: 50px;
}

.menu-item, #services {
   padding-left: 20px;
}

.service-item, #patch-work {
   padding-left: 40px;
}

#call img, #facebook img {
   height: 40px;
   width: 40px;
}

#call img, #facebook img, #menu-toggle img {
   vertical-align: middle;
}

#top-bar {
   text-align: right;
}

#call img, #call div, #facebook, #call,
#menu-button, #quote-button > div,
#quote-button, .show {
   display: inline-block;
}

#quote-button {
   float: left;
}

#menu-toggle img {
   width: 30px;
   height: 30px;
}

.separator {
   height: 2px;
   /* light green */
   background: #6CB846;
   margin: 40px auto 35px auto;
}

.separator, #footer-container, form {
   width: 80%;
}

#footer-container {
   border-top: 1px solid #000000;
   padding: 10px 0;
   margin: 0 auto;
}

h2 {
   font-size: 25px;
   line-height: 50px;
}

h2, p {
   text-shadow: 1px 1px 0px #FFFFFF;
}

h2, #guarantee {
   padding: 20px 0;
}

#image-crossfade img {
   margin: 20px 0;
}

p {
   line-height: 25px;
   padding: 15px 0 20px 0;
}

form {
  background: -webkit-linear-gradient(to top, #CCCCCC, #EEEEEE 175px);
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(to top, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  height: 580px;
  font-family: Tahoma, Geneva, sans-serif;
  font-style: italic;
  line-height: 24px;
  font-weight: bold;
  border: inset 1px solid #333333;
}

form, input {
   border: 1px solid #999999;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input, textarea {
   width: 99%;
   margin-bottom: 30px;
}

input {
  height: 25px;
}

textarea {
   /* disable resize table on text area
   to preserve layout */
   resize: none;
}

#quote {
   padding-bottom: 40px;
}

input[type="submit"], form {
   border-radius: 10px;
}

input[type="submit"] {
   width: 120px;
   font-size: 16px;
   padding: 0;
   margin: 20px auto;
   text-shadow: 1px 1px #DDDDDD;
   background-image: -webkit-linear-gradient(top, #F6F6F6, #AFAFAF);
   background-image: linear-gradient(to bottom, #F6F6F6, #AFAFAF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F6F6F6, endColorstr=#AFAFAF);
                     /* light green */
   border: 1px solid #6CB846;
}

.error {
   color: red;
   display: inline;
   text-shadow: none;
   margin-left: 5px;
}

.error, form {
   font-size: 14px;
}

.triangle {
   float: left;
   padding: 5px;
   vertical-align: middle;
   margin-right: 5px;
}

.point {
   padding: 12px 0;
    overflow: hidden;
}

.tri-points {
   padding-bottom: 30px;
}

/**
 * Media Query < 340px
 */
@media screen and (max-width: 340px) {
   /* reduce font-size and padding */
   #menu a, #services {
      font-size: 14px;
   }

   #services, .menu-item {
      padding-left: 10px;
   }

   .service-item, #patch-work {
      padding-left: 20px;
   }

   #call img {
      width: 30px;
      height: 30px;
   }

   #call div {
      font-size: 16px;
   }
}

/**
 * Media Query < 420px
 */
@media screen and (max-width: 420px) {
   body {
      padding-top: 70px
   }

   #quote-button > div, #quote-button {
      height: 50px;
   }

   #quote-button > div {
      width: 120px;
      font-size: 16px;
      line-height: 50px;
      padding: 0;
   }

   #quote-button {
      padding: 10px;
   }

   #top-bar, section p {
      text-align: center;
   }

   #call {
      height: 40px;
      padding-top: 15px;
      padding-right: 0;
   }

   #facebook {
      /* hide facebook icon */
      display: none;
   }

   #call div {
      line-height: 40px;
   }

   section p {
     clear: both;
   }

   .section-img {
     float: none;
     margin: 15px auto;
     display: block;
   }
}

/**
 * Media Query < 640px
 */
@media screen and (max-width: 640px) {
   #top-bar {
      z-index: 9999 !important;
   }

   .flexslider {
      z-index: 1 !important;
   }
}

/**
 * Media Query > 640px
 */
@media screen and (min-width: 640px) {
   body {
      padding-top: 0;
      height: 100%;
   }

   #header {
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      box-shadow: 2px 0px 2px #000000;
      overflow-y: auto;
   }

   /* make menu and fake header element same width
   to stop content from spanning the entire viewport */
   #header, #fake-header {
      width: 220px;
   }

   #filler, #fake-header {
      display: block;
   }

   form {
      width: 60%;
   }

   #fake-header {
      height: 100px;
      float: left;
   }

   .menu-item, .service-item, #services {
      height: 40px;
      line-height: 40px;
   }

   #patch-work {
     /* the text in this list item wraps so it
     needs to be double the height of the other
     ones */
     height: 70px;
     line-height: 35px;
   }

   #menu {
      padding-top: 10px;
   }

   .menu-item, #services {
      padding-left: 5px;
   }

   .service-item, #patch-work {
      padding: 0 10px;
   }

   .menu-item {
      border-bottom: none !important;
   }

   #top-bar {
      position: static;
      box-shadow: none;
   }

   #menu-toggle {
      display: none;
   }

   #top-bar {
      text-align: center;
   }

   #quote-button {
      float: none;
      padding-bottom: 0;
      padding-top: 15px;
   }

   #call, #facebook {
      padding-right: 0 15px;
   }

   #main, #footer {
      overflow: hidden;
   }

   #menu {
      /* override jquery toggle method */
      display: block !important;
   }
}

/**
 * Media Query > 1024px
 */
@media screen and (min-width: 1024px) {
   .container {
      max-width: 1280px;
      margin: 0 auto;
   }

   #header, #fake-header {
      width: 315px;
   }

   #call, p {
      font-size: 25px;
   }

   #menu {
      font-size: 20px;
   }

   .menu-item, .service-item, #patch-work, #services {
     height: 50px;
     line-height: 50px;
   }

   #image-crossfade img {
      max-width: 600px;
   }

   h2 {
      font-size: 35px;
   }

   .section-img {
      max-width: 250px;
      display: block;
   }

   .separator {
      clear: both;
   }

   #main, #footer {
      padding: 10px 60px 0 70px;
   }
}