html * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
}

html {
   overflow-y: scroll;
}

body {
   width: 100%;
   height: 100%;
   background-color: #cccccc;
   font: 1rem/1rem 'Open Sans', sans-serif;
   font-weight: 400;
   color: #333333;
}

img {
   max-width: 100%;
   height: auto;
   border: none; /* ie fix */
}

a, a:hover, a:visited, a:active {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0;
   padding: 0;
   font-weight: 400;
}

textarea, input {
   display: block;
   border: 1px solid #666666;
   padding: 0 2px;
   background-color: #ffffff;
}

button {
   display: block;
   border: 1px solid #666666;
   background-color: #eeeeee;
}

label, button {
   cursor: pointer;
}

.none {
   display: none;
}

.shell {
   display: block;
   width: 100%;
}
.ghost {
   display: block;
   margin: 0 auto;
   width: 80%;
   max-width: 1000px;
}

@media only screen and (min-width : 20px) and (max-width : 800px) {

   .ghost {
      width: 90%;
   }
}

.clearfix:before, .clearfix:after {
   content: "";
   display: table;
}

.clearfix:after {
   clear: both;
}

header {
   display: block;
   width: 100%;
}

#head {
   height: 32px;
   background-color: #6db844;
}

#head > div > p,
#head > div > a {
   display: block;
   float: left;
   margin: 0 12px 0 0;
   padding: 0 0 0 14px;
   width: auto;
   height: 30px;
   line-height: 30px;
   font-size: 0.875rem;
   color: #ffffff;
}
#head > div > p {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='white' d='M16.552 22.133c-1.44-.053-5.521-.617-9.795-4.89c-4.273-4.274-4.836-8.354-4.89-9.795c-.08-2.196 1.602-4.329 3.545-5.162a1.47 1.47 0 0 1 1.445.159c1.6 1.166 2.704 2.93 3.652 4.317a1.504 1.504 0 0 1-.256 1.986l-1.951 1.449a.48.48 0 0 0-.142.616c.442.803 1.228 1.999 2.128 2.899s2.153 1.738 3.012 2.23a.483.483 0 0 0 .644-.162l1.27-1.933a1.503 1.503 0 0 1 2.056-.332c1.407.974 3.049 2.059 4.251 3.598a1.47 1.47 0 0 1 .189 1.485c-.837 1.953-2.955 3.616-5.158 3.535'/%3E%3C/g%3E%3C/svg%3E");
   background-size: 14px;
   background-position: 0 center;
   background-repeat: no-repeat;
}
#head > div > a {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='white' d='M20 4a2 2 0 0 1 1.995 1.85L22 6v12a2 2 0 0 1-1.85 1.995L20 20H4a2 2 0 0 1-1.995-1.85L2 18V6a2 2 0 0 1 1.85-1.995L4 4zm0 3.414l-6.94 6.94a1.5 1.5 0 0 1-2.12 0L4 7.414V18h16zM18.586 6H5.414L12 12.586z'/%3E%3C/g%3E%3C/svg%3E");
   background-size: 14px;
   background-position: 0 center;
   background-repeat: no-repeat;
}
#head > div > a:hover {
   color: #ffffff;
   text-decoration: underline;
}

#navi {
   height: 80px;
   background-color: #ffffff;
}

#navi nav {
   display: block;
   padding: 32px 0;
   height: 16px;
}

#navi nav > a {
   display: block;
   float: right;
   margin: 0 12px 0 0;
   height: 16px;
   line-height: 1rem;
   color: #666666;
}
#navi nav > a:hover {
   color: #999999;
}
#navi nav > a:first-of-type {
   margin: 0;
}

@media only screen and (min-width : 20px) and (max-width : 420px) {

   #navi {
      height: 56px;
   }

   #navi nav {
      padding: 20px 0;
      width: 100%;
      height: auto;
   }

   /*
   #navi nav {
      padding: 20px 0;
      width: 100%;
      height: auto;
   }

   #navi nav > a {
      float: none;
      margin: 0 auto 12px;
      text-align: center;
   }
   #navi nav > a:first-of-type {
      margin: 0 auto 12px;
   }
   #navi nav > a:last-of-type {
      margin: 0 auto;
   }
   */
}




#hero {
   display: block;
   background-color: #666666;
   background-image: url('/img/mockhome.jpg');
   background-blend-mode: multiply;
   background-size: cover;
}

#hero > div {
   padding: 20px 0 32px;
}

#hero > div > h1 {
   display: block;
   padding: 0 0 24px;
   height: auto;
   font-family: 'rubik';
   font-size: 4rem;
   line-height: 4.375rem;
   font-weight: 700;
   font-style: italic;
   text-align: center;
   color: #ffffff;
}

#hero > div > h2 {
   display: block;
   padding: 0 0 24px;
   height: auto;
   font-family: 'open sans';
   font-size: 1.375rem;
   line-height: 1.6rem;
   font-weight: 700;
   font-style: italic;
   text-align: center;
   color: #ffffff;
}

#hero > div > h3 {
   display: block;
   padding: 0 0 24px;
   height: auto;
   font-family: 'open sans';
   font-size: 4.5rem;
   line-height: 5rem;
   font-weight: 500;
   font-style: italic;
   text-align: center;
   color: #ffffff;
}

#hero > div > a {
   display: block;
   margin: 0 auto;
   border: none;
   padding: 20px;
   width: 200px;
   height: 64px;
   background-color: #6db844;
   font-family: 'roboto';
   font-size: 1.5rem;
   line-height: 1.5rem;
   font-weight: 500;
   color: #ffffff;
   text-align: center;
}
#hero > div > a:hover {
   background-color: #1f7bbf;
}

@media only screen and (min-width : 20px) and (max-width : 800px) {

   #hero > div > h1 {
      font-size: 2rem;
      line-height: 2.375rem;
   }

   #hero > div > h2 {
      font-size: 1rem;
      line-height: 1.25rem;
   }

   #hero > div > h3 {
      font-size: 2.5rem;
      line-height: 3rem;
   }

   #hero > div > a {
      padding: 0;
      width: 140px;
      height: 40px;
      font-size: 1rem;
      line-height: 40px;
   }
   
}






#services {
   display: block;
   background-color: #ffffff;
}

#services > div {
   padding: 40px 0;
}

#services .service {
   display: block;
   float: left;
   margin: 0 20px 0 0;
   width: calc((100% - 40px) / 3);
}
#services .service:last-of-type {
   margin: 0;
}

#services .service > img {
   display: block;
   margin: 0 auto;
   width: 64px;
   height: 64px;
}

#services .service > h2 {
   display: block;
   padding: 0 0 8px;
   font-family: 'rubik';
   font-size: 1.125rem;
   line-height: 1.25rem;
   font-weight: 700;
   color: #333333;
   text-align: center;
}

#services .service > p {
   display: block;
   padding: 0 0 8px;
   font-family: 'open sans';
   font-size: 0.875rem;
   line-height: 1.5rem;
   font-weight: 400;
   color: #666666;
   text-align: center;
}
#services .service > p > span {
   font-weight: 700;
}


@media only screen and (min-width : 20px) and (max-width : 800px) {

   #services .service {
      float: none;
      margin: 0 0 20px;
      width: auto;
   }
   #services .service:last-of-type {
      margin: 0;
   }

}



#about {
   display: block;
   width: 100%;
   max-width: 100%;
   background-color: #6db844;
}

#about > div:first-of-type {
   display: block;
   float: left;
   padding: 48px 32px 0 32px;
   width: 30%;
   max-width: 30%;
   background-color: #6db844;
}

#about > div:last-of-type {
   display: block;
   float: left;
   padding: 48px 24px 24px 48px;
   width: 70%;
   max-width: 70%;
   background-color: #eeeeee;
}

#about .about {
   display: block;
   padding: 0 0 24px 48px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zm6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12z'/%3E%3C/svg%3E");
   background-size: 40px;
   background-position: 0 0;
   background-repeat: no-repeat;
}

#about .about > h2 {
   display: block;
   padding: 0 0 8px;
   font-family: 'rubik';
   font-size: 1.125rem;
   line-height: 1.25rem;
   font-weight: 700;
   color: #ffffff;
}

#about .about > p {
   display: block;
   padding: 0 0 8px;
   font-family: 'open sans';
   font-size: 1rem;
   line-height: 1.25rem;
   font-weight: 400;
   color: #ffffff;
}

#about > div > h2 {
   display: block;
   padding: 0 0 20px;
   font-family: 'rubik';
   font-size: 2.75rem;
   line-height: 3rem;
   font-weight: 700;
   color: #333333;
}

#about > div > p {
   display: block;
   padding: 0 0 8px;
   font-family: 'open sans';
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 300;
   color: #666666;
}
#about > div > p > span {
   font-weight: 700;
}


@media only screen and (min-width : 20px) and (max-width : 800px) {

   #about > div:first-of-type {
      float: none;
      padding: 32px 24px 0 32px;
      width: auto;
   }

   #about > div:last-of-type {
      display: block;
      float: none;
      padding: 40px 24px 24px 48px;
      width: auto;
   }

   #about > div > h2 {
      font-size: 1.75rem;
      line-height: 2rem;
   }
}



#committed {
   display: block;
   background-color: #666666;
   background-image: url('/img/construction-34.jpg');
   background-blend-mode: multiply;
   background-size: cover;
}

#committed > div {
   padding: 40px 0 32px;
}

#committed > div > h2 {
   display: block;
   padding: 0 0 24px;
   height: auto;
   font-family: 'rubik';
   font-size: 3.75rem;
   line-height: 4.25rem;
   font-weight: 700;
   text-align: center;
   color: #ffffff;
}

#committed > div > p {
   display: block;
   padding: 0 0 24px;
   height: auto;
   font-family: 'open sans';
   font-size: 1.375rem;
   line-height: 2rem;
   font-weight: 400;
   text-align: center;
   color: #ffffff;
}


@media only screen and (min-width : 20px) and (max-width : 800px) {

   #committed > div > h2 {
      padding: 0 0 20px;
      font-size: 1.75rem;
      line-height: 2.25rem;
   }

   #committed > div > p {
      padding: 0;
      font-size: 1.125rem;
      line-height: 2rem;
   }
}


#testimonials {
   display: block;
   background-color: #eeeeee;
}

#testimonials > div {
   padding: 40px 0 32px;
}

#testimonials > div > h2 {
   display: block;
   padding: 0;
   height: auto;
   font-family: 'rubik';
   font-size: 2.5rem;
   line-height: 3rem;
   font-weight: 700;
   text-align: center;
   color: #333333;
}

#testimonials > div > hr {
   margin: 40px auto 48px;
   border-color: #ffb400;
   border-width: 4px;
   border-style: solid;
   width: 64px;
}

#testimonials .testimonial {
   display: block;
   margin: 0 0 20px;
   padding: 20px;
   background-color: #ffffff;
}

#testimonials .testimonial > p {
   padding: 0 0 8px;
   height: auto;
   font-family: 'open sans';
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
   color: #666666;
}

#testimonials .testimonial > p:last-of-type {
   padding: 0;
   font-weight: 700;
}


#contact {
   display: block;
   background-color: #ffffff;
}

#contact > div {
   padding: 40px 0 32px;
}

#contact > div > h2 {
   display: block;
   padding: 0 0 20px;
   height: auto;
   font-family: 'rubik';
   font-size: 3rem;
   line-height: 3.5rem;
   font-weight: 500;
   text-align: center;
   color: #6db844;
}

#contact > div > p {
   display: block;
   padding: 0;
   height: auto;
   font-family: 'open sans';
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: 400;
   text-align: center;
   color: #333333;
}
#contact > div > p > span {
   font-weight: 700;
}
#contact > div > p > a {
   color: #1f7bbf;
   font-weight: 700;
}
#contact > div > p > a:hover {
   text-decoration: underline;
}

@media only screen and (min-width : 20px) and (max-width : 800px) {

   #contact > div > h2 {
      padding: 0 0 20px;
      font-size: 1.5rem;
      line-height: 2rem;
   }

   #contact > div > p {
      font-size: 1.125rem;
      line-height: 1.5rem;
   }

}


footer {
   display: block;
   padding: 12px;
   background-color: #1f1f1f;
}

footer > p {
   font-family: 'open sans';
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 300;
   text-align: center;
   color: #dddddd;
}