@import "https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700";

body {
   margin: 0;
   font-family: roboto, sans-serif;
}

* {
   box-sizing: border-box;
}

main {
   position: relative;
   overflow: hidden;
}

/* header */

.main-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;

   min-height: 7rem;
   padding: 2rem 1.5rem;
}

.main-header__brand {
   max-width: 7.5rem;

   color: #5c5c5c;
   text-decoration: none;
   font-size: 1.25rem;
   font-weight: 300;
}

@media (min-width: 20rem) {
   .main-header__brand {
      max-width: none;
   }
}

@media (min-width: 30rem) {
   .main-header__brand {
      font-size: 1.75rem;
   }
}

.main-header__brand img {
   display: none;

   max-height: 1.8rem;
}

@media (min-width: 20rem) {
   .main-header__brand img {
      display: inline-block;
   }
}

@media (min-width: 30rem) {
   .main-header__brand img {
      max-height: 3rem;
   }
}

.main-header__brand img,
.main-header__brand span {
   vertical-align: middle;
}

.main-header__nav-toggler {
   display: inline-block;

   background-color: unset;
   padding: 1.125rem;
   border: none;
   outline: none;

   cursor: pointer;
}

@media (min-width: 50rem) {
   .main-header__nav-toggler {
      display: none;
   }
}

.main-header__nav-toggler div {
   height: 0.125rem;
   width: 1.375rem;
   background-color: #655e7a;
   margin-bottom: 0.25rem;
}

.main-header__nav-toggler div:last-child {
   margin-bottom: 0;
}

.hide {
   display: none;
}

@media (min-width: 50rem) {
   .hide {
      display: initial;
   }
}

.main-header__nav {
   width: 100%;
   padding-top: 1.25rem;
}

@media (min-width: 50rem) {
   .main-header__nav {
      width: auto;
      padding-top: 0;
   }
}

.main-header__nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.main-header__nav ul li {
   float: none;
}

@media (min-width: 50rem) {
   .main-header__nav ul li {
      float: left;
   }
}

.main-header__nav a {
   display: inline-block;

   padding: 0.75rem;

   color: #5c5c5c;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 0.9rem;
   font-weight: 500;
}

@media (min-width: 50rem) {
   .main-header__nav a {
      padding: 1rem;
   }
}

.main-header__nav a.active,
.main-header__nav a:hover {
   color: #000;
}

.main-header__nav a.active {
   cursor: default;
   pointer-events: none;
}

/* title */
#title {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
   height: 18rem;
   padding: 0 0.5rem;
   text-align: center;
}

.title-img {
   position: fixed;
   z-index: -1;
   height: 18rem;
   width: 100%;
   background-image: url('/images/plumber-wrench.jpg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.title-img-hide {
   position: absolute;
   top: 18rem;
   z-index: -1;
   height: 100%;
   width: 100%;
   background-color: white;
}

#title .cover {
   position: absolute;

   height: 100%;
   width: 100%;
   left: 0;
   top: 0;

   background-color: rgba(29, 25, 44, 0.8);
}

#title h1,
#title p {
   z-index: 1;
   color: white;
}

#title h1 {
   margin: 0;

   font-size: 25px;
   font-weight: 200;
   letter-spacing: 0.05em;
}

@media (min-width: 280px) {
   #title h1 {
      font-size: 35px;
      letter-spacing: 0.15em;
   }
}

#title p {
   font-size: 1rem;
   letter-spacing: 0.5px;
   line-height: 1.6;
}

#title.item-title h1 {
   font-size: 25px;
}

#title.item-title p {
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap-reverse;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
}

#title .arrow {
   width: 1rem;
   height: 1rem;
   margin: 0 0.5rem;
   background-image: url("/images/arrow.svg");
   background-position: center;
}

#title a {
   color: #ffffff8c;
   text-decoration: none;
   text-transform: capitalize;
}

#title a:hover {
   color: white;
}

#title a:first-child {
   color: white;
   cursor: default;
   pointer-events: none;
}

@media (min-width: 800px) {
   #title.item-title h1 {
      font-size: 35px;
   }

   #title.item-title p {
      font-size: 1rem;
   }
}

/* contact */
#contact {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   position: relative;

   min-height: 25rem;
   padding: 1.5rem 0.5rem;

   background-image: url("/images/contact.jpg");
   background-size: cover;
   background-attachment: fixed;
   background-position: 50%;

   text-align: center;
}

.contact__color-layer {
   position: absolute;
   top: 0;
   left: 0;

   height: 100%;
   width: 100%;

   background-color: rgba(29, 25, 44, 0.8);
}

#contact h2,
#contact p,
#contact a {
   z-index: 1;
}

#contact h2 {
   color: white;
   font-size: 1.75rem;
   font-weight: 400;
}

#contact p {
   max-width: 45rem;
   padding: 0 0.5rem;
   margin-bottom: 2.5rem;

   color: white;
   font-size: 0.95rem;
   line-height: 1.5;
}

#contact a {
   padding: 0.9rem 2.2rem;
   border: 1px solid white;

   color: white;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 0.75rem;
   line-height: 1.5;
   letter-spacing: 0.1rem;

   z-index: 10;
}

#contact a:hover {
   background-color: #655e7a;
   border-color: #655e7a;
}

/* footer */

.main-footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   height: 12rem;
   background-color: #f5f5f5;

   text-align: center;
}

.main-footer__nav,
.main-footer__copyright {
   margin: 0.5rem 0;
}

.main-footer__nav ul {
   padding: 0;
   margin: 0;

   list-style: none;
}

.main-footer__nav ul li {
   padding: 0.5rem 1rem;

   float: left;
}

.main-footer__nav a {
   color: #494949;
   text-decoration: none;
   font-size: 0.9rem;
}

.main-footer__nav a:hover {
   color: #000;
}

.main-footer__copyright {
   color: #919191;
   font-size: 0.8rem;
}