/* BASICS */

/* montserrat-100 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: url('/webfonts/montserrat-v25-latin-100.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-100.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-200 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('/webfonts/montserrat-v25-latin-200.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-200.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-300 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('/webfonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-regular - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/webfonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-500 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('/webfonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-500.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('/webfonts/montserrat-v25-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-600.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('/webfonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-900 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('/webfonts/montserrat-v25-latin-900.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/webfonts/montserrat-v25-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/webfonts/montserrat-v25-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('/webfonts/montserrat-v25-latin-900.woff') format('woff'), /* Modern Browsers */
         url('/webfonts/montserrat-v25-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/webfonts/montserrat-v25-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
  }

html,
body {
    font-family: 'Montserrat', medium;
    margin-top: 15px;
    font-weight: 300;
}

.h1,
.h2, 
.h3,
h1,
h2,
h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Montserrat', bold;
    text-transform: uppercase; 
}

a {
    color: #c9c9c9;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #e8e8e8;
    text-decoration: none;
    outline: none;
}

input:focus {
    outline: none;
}

button {
    outline: none;
}

.fill {
    height: calc(100vh - 115px);
}

.box-title {
    font-size: 34px;
    text-transform: uppercase;
}

.box-description {
    font-size: 30px;
    font-weight: 300;
      color: #737373 !important;
}

.box-description2 {
  margin-top: 15px;
    font-size: 18px;
    font-weight: 300;
          color: #737373 !important
}


.box-description-strassenbau {
    font-size: 17px;
    font-weight: 300;
    margin: 0 0 20px;
}


.fa-space {
    margin-left: 10px;
}


/* grafschafter */

.container-grafschafter {
    background-image: url("/img/galabau.jpg");
    position: relative;
    z-index: 1;
    background-position: 50% 60%;
    background-size: cover;
}

.grafschafter-logo {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 140px;
    height: 160px;
    padding: 10px 0px 10px 0px;
    background-color: #fff;
    z-index: 9;
}

.grafschafter-logo-main {
    width: 120px;
}

.box-grafschafter {
    padding: 30px;
    background-color: rgba(101, 179, 46, 0.8);
    color: #FFF;
    margin-right: 25%;
    margin-top: calc(100vh - 440px);
    position: absolute;
    bottom: 35px;
    left: 45px;
    z-index: 68;
}

.grafschafter-button {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.container-grafschafter-button {
    background-color: #FFF;
    color: #64b32e;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    padding: 15px;
    margin-top: 20px;
    text-transform: uppercase;
    font-weight: 500;
    outline: none;
}

.grafschafter-button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #64b32e;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.grafschafter-button:active,
.grafschafter-button:focus,
.grafschafter-button:hover {
    color: #fff;
}

.grafschafter-button:active:before,
.grafschafter-button:focus:before,
.grafschafter-button:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}


/* strassenbau */

.container-strassenbau {
    background-image: url('/img/grafschafter_strassenbau-3.jpg');
    background-position: center;
    background-size: cover;
    padding: 30px;
    background-position: 0% 50%;
    text-align: right;
    position: relative;
}

.strassenbau-logo {
  position: absolute;
  top: 50px;
  right: 0px;
  width: 140px;
  height: 160px;
  padding: 15px 0 20px 20px;
  background-color: #fff;
  z-index: 9;
}

.box-strassenbau {
    padding: 30px;
    background-color: rgba(230, 152, 2, 0.8);
    color: #FFF;
    margin-top: calc(100vh - 440px);
    margin-left: 25%;
    position: absolute;
    bottom: 35px;
    right: 45px;
    text-align: left;
}

.strassenbau-button {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.container-strassenbau-button {
    background-color: #FFFFFF;
    color: rgba(230, 152, 2, 0.8);
    border: 0;
    border-radius: 0;
    font-size: 16px;
    padding: 15px;
    margin-top: 20px;
    text-transform: uppercase;
    font-weight: 500;
    outline: none;
}

.strassenbau-button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(230, 152, 2, 0.9);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.strassenbau-button:active,
.strassenbau-button:focus,
.strassenbau-button:hover {
    color: #fff
}

.strassenbau-button:active:before,
.strassenbau-button:focus:before,
.strassenbau-button:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}


/* MODAL */

.modal-content {
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0px 0px 138px -24px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 0px 138px -24px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 0px 138px -24px rgba(0, 0, 0, 0.45);
    font-size: 16px;
    padding: 30px;
    max-width: 100%;
}

.modal-body {
    padding-top: 30px;
    font-weight: 300 !important;
    color: #333;
}

.modal-title {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 500;
    padding-bottom: 10px;
    color: #333;
}

.fade-scale {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}

.fade-scale.in {
    opacity: 1;
    transform: scale(1);
}

.modal {
    text-align: center;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal-url {
    color: #333;
}

.modal-url:active,
.modal-url:hover {
    color: #585858;
}

.modal-title-style {
    text-transform: uppercase;
}
.modal a {
  color: #333;
  text-decoration: underline;
}

/* Formular */
form .grafschafter-button {
  border: 1px solid #007e3b;
}
form .strassenbau-button {
  border: 1px solid rgba(31, 42, 68, 1);
}
.checkbox label, .radio label {
  font-weight: 300;
  padding-left: 0;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label span{
  display:inline-block;
  width:19px;
  height:19px;
  margin:-2px 10px 0 0;
  vertical-align:middle;
  border: 1px solid #007e3b;
  cursor:pointer;
  transition: 0.3s all ease;
}
input[type="checkbox"]#datenschutzCheckboxstrassenbau + label span{
  display:inline-block;
  width:19px;
  height:19px;
  margin:-2px 10px 0 0;
  vertical-align:middle;
  border: 1px solid rgba(31, 42, 68, 1);
  cursor:pointer;
  transition: 0.3s all ease;
}
input[type="checkbox"]:checked + label span{
  background-color: #007e3b;
}
input[type="checkbox"]#datenschutzCheckboxstrassenbau:checked + label span{
  background-color: rgba(31, 42, 68, 1);
}
.ajaxMessage {
  clear: both;
  padding-top: 15px;
}
.grecaptcha-badge{
        display:none;
    }

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Firefox */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Safari and Chrome */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Internet Explorer */

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Opera */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* FOOTER */

html {
    position: relative;
    min-height: calc(100vh - 15px);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    background-color: #333;
}

.left-footer {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

.right-footer {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    text-align: right;
}

.footer-contact {
    margin-right: 30px;
}

.footer-imprint {
    margin-left: 30px;
}

.footer-contact-space {
    margin-left: 15px;
}

.footer-contact-space3 {
    margin-right: 15px;
}

.footer-contact-space2 {
    margin-left: 15px;
    margin-right: 15px;
}

.footer-contact-space4 {
    margin-right: 15px;
}

.footer-space-5 {
    margin-left: 15px;
}

.footer-container {
    padding-left: 0;
    padding-right: 0;
}

.footer-space {
    padding-right: 30px;
}
a.icon {
  display: inline-block;
  transition: 0.3s all ease;
}
a.icon:hover {
  opacity: 0.8;
}
span.fb-icon {
  background-image: url("../img/facebook.svg");
  background-size: contain;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  top: 5px;
  padding-right: 5px;
}

/* Cookie Notification */
.cookieNotificationWrapper a{
  color: #333;
  text-decoration: underline;
}

/* RESPONSIVE */

@media screen and (max-width: 1400px) {
    .box-grafschafter {
        padding: 30px;
        background-color: rgba(0, 100, 49, 0.8);
        color: #FFF;
        /* margin-right: 0; */
        margin-top: calc(100vh - 440px);
        position: relative;
        bottom: 0;
        left: 0;
        margin-right: 0;
        width: 100%;
        margin-top: -228px;
    }
    .box-strassenbau {
        padding: 30px;
        background-color: rgba(31, 42, 68, 0.9);
        color: #FFF;
        margin-top: calc(100vh - 440px);
        position: relative;
        bottom: 0;
        left: 0;
        margin-right: 0;
        width: 100%;
        margin-top: -278px;
        margin-left: 0;
    }
    .box-title {
        font-size: 30px;
    }
    .box-description {
        font-size: 18px;
      
    }
    .container-grafschafter-button {
        padding: 10px;
        font-size: 14px;
    }
    .container-strassenbau-button {
        padding: 10px;
        font-size: 14px;
    }
    .fa {
        font-size: 12px !important;
    }
    .container-grafschafter {
        background-image: url("/img/galabau.jpg");
        background-size: cover;
        background-position: center;
    }
    .container-strassenbau {
        background-image: url("/img/grafschafter_strassenbau.jpg");
        background-size: cover;
    }
    .left-footer {
        font-size: 12px;
    }
    .right-footer {
        font-size: 12px;
    }
    .fill {
        height: calc(100vh - 110px);
    }
}

@media screen and (max-width: 1165px) {
    .left-footer {
        font-size: 10px;
    }
    .right-footer {
        font-size: 10px;
    }
}

@media screen and (max-width: 994px) {
    .box-grafschafter {
        padding: 30px;
        background-color: rgba(0, 100, 49, 0.8);
        color: #FFF;
        /* margin-right: 0; */
        margin-top: calc(100vh - 440px);
        position: relative;
        bottom: 0;
        left: 0;
        margin-right: 0;
        width: 100%;
        margin-top: -228px;
    }
    .box-strassenbau {
        padding: 30px;
        background-color: rgba(31, 42, 68, 0.9);
        color: #FFF;
        margin-top: calc(100vh - 440px);
        position: relative;
        bottom: 0;
        left: 0;
        margin-right: 0;
        width: 100%;
        margin-top: -228px;
        margin-left: 0;
    }
    .box-title {
        font-size: 30px;
    }
    .box-description {
        font-size: 20px;
    }
    .container-grafschafter-button {
        padding: 10px;
        font-size: 14px;
    }
    .container-strassenbau-button {
        padding: 10px;
        font-size: 14px;
    }
    .fa {
        font-size: 12px !important;
    }
    .footer-imprint {
        margin-right: 15px;
        margin-left: 15px;
    }
    .footer-contact {
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media screen and (max-width: 991px) {
    .fill {
        height: calc(50vh - 95px)
    }
    .left-footer {
        font-size: 10px;
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .right-footer {
        font-size: 10px;
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .container-grafschafter {
        margin-bottom: 30px;
    }
    .container-grafschafter {
        margin-bottom: 0px;
        min-height: 500px;
    }
    .box-grafschafter {
        padding: 30px;
        background-color: rgba(101, 179, 46, 0.8);
        color: #ffffff;
        margin-right: 0;
        margin-top: 0px;
        position: relative;
        bottom: inherit;
        left: inherit;
        width: 100%;
        margin-bottom: 30px;
    }
    .container-strassenbau {
        margin-bottom: 0px;
        min-height: 500px;
    }
    .box-strassenbau {
        padding: 30px;
        background-color: rgba(230, 152, 2, 0.8);
        color: #ffffff;
        margin-top: calc(100vh - 440px);
        position: relative;
        bottom: 0;
        left: 0;
        margin-right: 0;
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 130px;
    }
    .container-grafschafter {
        background-image: url("/img/grafschafter.jpg");
        background-size: cover;
        background-position: 20%;
    }
    .container-strassenbau {
        background-image: url("/img/grafschafter_strassenbau.jpg");
        background-size: cover;
        background-position: 70% 50%;
    }
    .grafschafter-logo {
        top: 30px;
    }
    .strassenbau-logo {
      position: absolute;
      top: 50px;
      right: 0;
      height: 146px;
      padding: 15px 0px 20px 20px;
      background-color: #fff;
      z-index: 9;
      width: 184px;
    }
  
}

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

@media screen and (max-width: 676px) {
    .left-footer {
        line-height: 28px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .right-footer {
        font-size: 12px;
        text-align: center;
    }
    .box-strassenbau {
        margin-bottom: 190px;
    }
}

@media screen and (max-width: 600px) {
    .box-title {
        font-size: 20px
    } 
    .box-description {
        font-size: 20px;
    }
    .box-description-strassenbau {
    font-size: 14px; 
    margin: 0 0 20px;
    }
    .grafschafter-logo-main {
        width: 75px;
    }
    .grafschafter-logo {
        top: 30px;
        width: 85px;
        height: 95px;
        padding: 10px 0px 10px 0px;
    }
    .strassenbau-asdf {
        width: 75px; 
    }
    @media only screen and (min-width: 768px) {
        .strassenbau-asdf {
            width: 120px;
           }
    }
    .strassenbau-logo {
      top: 30px;
      width: 92px;
      height: 95px;
      padding: 5px 0px 10px 10px;
    }
    .strassenbau-logo:before {
        height: 65px;
        right: 85px !important;
        z-index: -1;
    }
    .container-grafschafter-button {
        padding: 7px;
        font-size: 12px;
    }
    .container-grafschafter-button {
        padding: 7px;
        font-size: 12px;
    }
    .fa {
        font-size: 10px !important;
    }
    .container-grafschafter {
        min-height: 300px;
    }
    .container-strassenbau {
        min-height: 300px;
    }
    .box-strassenbau {
        margin-bottom: 185px;
    }
}

@media screen and (max-width: 520px) {
    .container-grafschafter {
        background-image: url("/img/galabau.jpg");
        background-size: cover;
        background-position: center;
    }
    .container-strassenbau {
        background-image: url("/img/strassenbau.jpg");
        background-size: cover;
    }
    .box-strassenbau {
        margin-bottom: 185px
    }
    .left-footer {
        line-height: 28px;
        font-size: 12px;
        text-align: center;
        font-weight: 300px;
    }

    .modal-content {
      padding: 5px;
    }
}

@media screen and (max-width: 420px) {
    .box-strassenbau {
        margin-bottom: 210px;
    }
    .modal-dialog {
      margin: 10px;
      max-width: 90%;
    }
}

/* Fonts */