@white: #edecee;
@black: #1d1f1f;
@grey:#676a6a;
@blue: #2e68b2;

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@400;700&display=swap');



.loading {
  background: #edecee url(/files/img/loading.gif) no-repeat center center;
  background-size: contain;
  width: 200px;
  height: 200px;
  margin: auto auto;
  display: block;
}


html, body {
  //font-family: roboto, sans-serif;
  font-family: 'Commissioner', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px; //24px;
  line-height: 130% !important;
  background-color: @white;
  color:@black;
/*
  font-family: roboto, sans-serif;
  font-weight: 700;
  font-style: normal;
  */
}



.color-black{color:@black;}
.color-blue{color:@blue;}
h2 {
  font-size: 35px; //60px;
  text-align: center;
  color: @grey;
}
.button {
  display: inline-block;
  background-color: @blue;
  color: @white;
  padding: 12px 20px;
  text-transform: uppercase;

  &:hover {
    text-decoration: none;
    color: @white;
  }
}
.button_2 {
  display: inline-block;
  color: @blue;
  border: 1px solid @blue;
  padding: 12px 20px;
  text-transform: uppercase;

  &:hover {
    text-decoration: none;
    background-color: @blue;
    color: @white;
  }
}


header {
  //background-color: @white;
  border: none;
  height: 65px;
  padding-top: 20px;
  img.logo {
    height: 30px;
  }
}

#l1 {
  position: relative;
  //background-size: cover;
  background-position: center 0; //190px 0;
  background-repeat: no-repeat;
  background-color: transparent; //#FFFFFF;
  background-image: url("/img/img_07.jpg");
  background-size: cover;

  height: 652px; //550px; // 515px; // 570px; // 480px;

  h1{
    font-size: 45px; //70px;
    font-weight: 700;
    line-height: 1.5;
    font-family: 'Oswald', sans-serif;

    span {
      display: block;
    }
  }
  .text {
    font-size: 30px;
    height: 60px;
  }
  .bottom {
    position: absolute;
    bottom: 0;

  }
  .image {
    width: 100%; height: 250px;
    background-size: contain;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("/img/img_04.png");
  }
}
#l2 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/img/img_02.jpg");
  height: 180px; // 300px;
  color: @white;

  & > .container {
    padding-top: 25px;
  }
  h2 {
    //margin: 100px 0 130px 0;
    margin: 35px 0 45px 0;
    display: none;
  }
  .icon {
    display: inline-block;
    //width: 100px; height: 55px;
    width: 60px; height: 40px;
    margin-top: 3px; //7px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    &.icon1 {
      background-image: url("/img/icons.png");
      background-position: 0 0;
    }
    &.icon2 {
      background-image: url("/img/icons.png");
      background-position: -90px 0;
    }
    &.icon3 {
      background-image: url("/img/icons.png");
      background-position: -180px 0;
    }
  }
}

#l3 {
  min-height: 630px;
  margin-top: 60px;

  .img_03 {
    background-size: contain;
    background-position: center 0;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url("/img/img_03.png");
    height: 400px; width: 100%;
    margin-top: 50px; margin-bottom: 0;
  }

  form {
    input {
      border: none;
      border-bottom: 1px solid #FFFFFF;
      background-color: transparent;
      font-size: 16px;
      width: 100%;

      &[type="submit"]{
        margin-top: 20px;
        margin-bottom: 25px;
        background-color: @blue;
        padding: 20px;
      }
    }
  }
  label {
    background-color: @white;
    padding: 15px;
    position: relative;
    z-index: 99;
    font-size: 60px;
  }
  label + .row {
    position: relative;
    z-index: 0;
    margin-top: -26px;
    border:3px solid @blue;
    border-radius: 150px;
    padding: 25px 25px 25px 25px;
  }
}

#l4 {
  .icon {
    display: inline-block;
    width: 85px; height: 85px;
    margin-top: 3px;
    margin-bottom: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    &.icon1 {
      background-image: url("/img/icons_2.png");
      background-position: 0 0;
    }
    &.icon2 {
      background-image: url("/img/icons_2.png");
      background-position: -226px 0;
    }
    &.icon3 {
      background-image: url("/img/icons_2.png");
      background-position: -466px 0;
    }
  }
}
#l5 {
  height: 500px; max-height: 500px;

  .container {
    position: relative;
    height: 100%;
    background-size: contain;
    background-position: center 100%;
    background-repeat: no-repeat;
    background-image: url("/img/maps.png");

    h3 {
      font-size: 45px;
      margin-top: 200px;
      margin-left: 120px;

      span {
        display: block;
      }
    }
    .text {
      position: relative;
      margin-top: 65px;
      margin-left: 120px;
    }
    .button {
    }
  }


}

footer {
  background-color: #5b5b5b;
  height: 65px;
  font-size: 14px;
  color: #bdbdbd!important;
  padding-top: 20px;
  p {
    margin-bottom: 0;
    line-height: 180%;
  }
  a {
    color: #bdbdbd!important;
  }
}


@media screen and (max-width: 990px) {
  @import "adaptiv/Tablet";
}
/*.Tablet {@import "adaptiv/Tablet";}*/
@media screen and (max-width: 765px) {
  @import "adaptiv/Mobile";
}