@font-face {
  font-family: 'bebas_neuebold';
  src: url("../fonts/bebasneue_bold-webfont.woff2") format("woff2"), url("/fonts/bebasneue_bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'bebas_neuebook';
  src: url("../fonts/bebasneue_book-webfont.woff2") format("woff2"), url("/fonts/bebasneue_book-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'bebas_neuebold';
}

.navbar {
  background: #2D2D2D;
  padding: 20px 0;
}

.navbar .logo {
  width: 384px;
  height: 52px;
  margin: 20px 0 20px 30px;
  background: url("../images/logo.svg") no-repeat;
}

.contacts h5 {
  color: white;
  text-align: left;
  font-size: 32px;
}

.contacts div {
  position: relative;
}

.contacts div img {
  position: absolute;
  left: -40px;
  top: 8px;
}

.contacts .phone img {
  top: 4px;
}

.contacts a {
  color: white;
}

.services {
  background: #F5B523;
}

.services .service {
  height: 580px;
  -webkit-transform: skewX(-7deg);
  transform: skewX(-7deg);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.services .service img,
.services .service h3 {
  -webkit-transform: skewX(7deg);
          transform: skewX(7deg);
}

.services .service .adjust {
  padding-top: 42px;
}

.services .service h3 {
  font-size: 55px;
  color: #454545;
  padding-top: 30px;
}

.services .service .wrapper {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.services .service:nth-child(1) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(245, 166, 35, 0.85)), to(rgba(255, 168, 35, 0.85))), url(/images/schlitzen.jpg);
  background: linear-gradient(rgba(245, 166, 35, 0.85), rgba(255, 168, 35, 0.85)), url(../images/schlitzen.jpg);
}

.services .service:nth-child(2) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(229, 154, 31, 0.85)), to(rgba(255, 154, 31, 0.85))), url(/images/stemmen.jpg);
  background: linear-gradient(rgba(229, 154, 31, 0.85), rgba(255, 154, 31, 0.85)), url(../images/stemmen.jpg);
}

.services .service:nth-child(3) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(212, 142, 28, 0.85)), to(rgba(212, 142, 28, 0.85))), url(/images/dosensenken.jpg);
  background: linear-gradient(rgba(212, 142, 28, 0.85), rgba(212, 142, 28, 0.85)), url(../images/dosensenken.jpg);
}

.content {
  background: #e0e0e0;
}

.content .wrapper {
  padding: 50px 0;
}

.footer {
  background: #2D2D2D;
  padding: 20px 0;
  color: white;
}

.footer h4 {
  font-size: 42px;
  color: white;
  padding-top: 11px;
  padding-bottom: 30px;
}

.footer .contacts h5 {
  font-size: 26px;
}

.footer .contacts div {
  left: 40px;
}

.footer .contacts div img {
  width: 20px;
  height: 20px;
  top: 4px;
}

.footer .logo {
  width: 260px;
  height: 30px;
  margin: 20px 0 20px 30px;
  background: url("../images/logo.svg") no-repeat;
}

.footer p {
  line-height: 32px;
}

.footer a {
  color: white;
  text-decoration: underline;
}

.footer a:hover {
  text-decoration: none;
}

.footer .copy {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  padding: 20px 0;
  border-top: 1px solid #3e3e3e;
  margin-top: 30px;
}

.footer .tags {
  padding-top: 20px;
  font-size: 12px;
  color: #898989;
  text-align: center;
}

/* @media only screen and (max-width : 667px) {

  .navbar {

    .logo {
      margin-left: 60px;
    }

    .contacts {
      margin-left: 130px;
    }

  }

  .footer {

    .logo {
      margin-left: 140px;
    }
  }

} */

@media only screen and (max-width: 480px) {
  .navbar .contacts {
    width: 100%;
  }

  .navbar .contacts .phone h5,
  .navbar .contacts .email h5 {
    text-align: center;
  }

  .navbar .contacts .phone img,
  .navbar .contacts .email img {
    display: none;
  }

  .services .service {
    -webkit-transform: skewX(0deg);
            transform: skewX(0deg);
    height: 300px;
  }

  .services .service img,
  .services .service h3 {
    -webkit-transform: skewX(0deg);
            transform: skewX(0deg);
  }

  .footer {
    text-align: center;
  }

  .footer .logo {
    margin-left: 70px;
  }

  .footer .contacts {
    width: 100%;
  }

  .footer .contacts div {
    left: 0;
  }

  .footer .contacts .phone h5,
  .footer .contacts .email h5 {
    text-align: center;
  }

  .footer .contacts .phone img,
  .footer .contacts .email img {
    display: none;
  }
}