@import "./helpers/reset-defaults";
@import "./helpers/variable-mixin";
// Navigation
@import "./helpers/navigation";

.b-lazy {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  max-width: 100%;
  opacity: 0;
  &.b-loaded {
    opacity: 1;
  }
}



.btn {
  background: #30343d;
  color: #ffffff;
  font-size: 18px;
  padding: 0 20px;
  text-decoration: none;
  outline: none;
  float: 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: background-color;
  transition-property: background-color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  line-height: 40px;
  text-transform: uppercase;
  &:hover {
    background: #505257;
    text-decoration: none;
    outline: none;
    cursor: pointer;
  }
}


////
// Main Content Overview Page
////

.front-overview {
  .main-content {
    background: #ffffff;
    .blog-featured {
      padding: 40px 0;
      display: flex;
      justify-content: space-around;
      width: 100%;
      text-align: justify;
      .image-cont {
        > div {
          position: relative;
        }
        &:hover {
          .overlay {
            opacity: 1;
            top: 0;
          }
        }
      }
      .overlay {
        position: absolute;
        opacity: 0;
        top: 0px;
        //top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        transition: all 0.5s ease;
      }

      h2 {
        margin: 10px 0;
      }
      img {
        overflow: hidden;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
      }
    }
    .contacts {
      width: 40%;
      background: #2E759C;
      float: left;
      display: flex;
      height: 380px;
      flex-direction: column;
      justify-content: center;
      .custom-info {
        color: $white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        a {
          position: relative;
          p {
            padding-bottom: 0;
            &:before {
              content: "";
              position: absolute;
              z-index: 1;
              left: 0;
              right: 100%;
              bottom: 0;
              background: $white;
              height: 2px;
              margin-bottom: 4px;
              @include transition(right, 0.5s, ease-out);
            }

            &:hover:before {
              right: 0;
            }
          }

        }
        h2 {
          margin-bottom: 20px;
        }
      }
    }
    ////
    //Google Map
    ////
    #map {
      width: 60%;
      float: left;
      display: flex;
      height: 380px;
    }
  }
}


////
// Main Content Residential Page
////

//.residential {
  .col-6-lg {
    padding: 20px;
    cursor: initial;
  }
  .main-content {
    background: $dark-blue-bg;
    .content {
      color: $white;
      padding-bottom: 100px;
    }
    .row {
      background: #2F343B;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 5px;
      padding-bottom: 5px;
      cursor: pointer;
    
      &:nth-child(odd) {
        background: $blue-bg;
      }
      &.titles {
        margin-bottom: 20px;
        text-transform: uppercase;
        background: $blue-bg;
        cursor: initial;
      }
      &.title {
        background: none;
        cursor: initial;
        h2 {
          padding-left: 9%;
          line-height: 100px;
        }
      }
    }

    .item-details.row {
      background: $white;
      .technical-drawing {
        //height: 60vh;
        //height: 600px;
        //min-height: 600px;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        @include box-shadow();
        text-align: center;
        cursor: initial;
      }
    }
    .details {
      //overflow: hidden;
      //min-height: 600px;
      //max-height: 600px;
      //height: 600px;
      //min-height: 600px;
      p {
        margin: 0;
      }

      cursor: initial;
      header {
        background: $dark-blue-bg;
        margin-bottom: 10px;
        img.back {
          margin-left: 20px;
          display: none;
          cursor: pointer;
        }
        span {
          //display: inline-block;
          color: $white;
          vertical-align: super;
          margin-left: 20px;
          display: none;
        }
        h2 {
          color: $white;
          font-size: 2.2em;
          padding: 20px;
          display: inline-block;
          font-weight: normal;
        }
      }

      .exposure {
        float: left;
        color: $white;
        background: $dark-blue-bg;
        width: 30%;
        height: 64px;
        line-height: 64px;
        padding-left: 20px;
        margin-bottom: 10px;
        &.office {
          display: none;
          height: 0;
        }
      }


      .quadrature {
        float: right;
        color: $white;
        font-size: 2.2em;
        line-height: 63.8px;
        //padding: 5px 0;
        p {
          margin: 0;
          margin-right: 20px;
        }
      }
      .floors {
        background: $dark-blue-bg;
        //width: 70%;
        width: 100%;
        float: left;
        margin-bottom: 10px;
        //margin-top: 10px;
        height: 64px;
        display: table;
      }
      .floors-details {
        text-align: center;
        color: $white;
        display: table-cell;
        vertical-align: middle;
        li {
          display: inline-block;
          background: $blue-bg;
          width: 40px;
          text-align: center;
          margin: 0.6%;
          border: 2px solid #3d414a;
          a {
            color: $white;
          }

          &.active {
            border: 2px solid #96960a!important;
          }
          &:hover {
            cursor: pointer;
          }
          &.unavailable {
            opacity: 0.3;
            cursor: not-allowed;
          }
        }
      }

      .send-request {
        //width: 100%;
        width: 70%;
        background: $dark-blue-bg;
        float: left;
        font-size: 1.3em;
        //margin-bottom: 10px;
        color: $white;
        height: 80px;
        display: table;
        text-align: right;
        padding-right: 35px;
        margin-bottom: 10px;
        p {
          display: table-cell;
          vertical-align: middle;
        }
        span {
          text-decoration: underline;
          cursor: pointer;
          font-size: 0.9em;
        }

        &.office {
          width: 100%;
          margin-bottom: 10px;
        }
      }
      .form-container.cf {
        //padding-top: 30px;
        form {
          .lastName,.email,.name {
            //width: 30.3%;
            //width: 30.9%;
            //margin: 0 1.8%;
            width: 32.6%;
            margin: 0 0.5%;

          }
          .name {
            margin-left: 0;
          }
          .email {
            margin-right: 0;
            //padding: 0;
          }

          textarea {
            resize: none;
            width: 100%;
            margin: 20px 0;
            margin-top: 10px;
            background: #ededed;
            border: 1px solid;
            padding: 20px;
            height: 230px;


            //resize: none;
            //width: 100%;
            //margin: 20px 0;
            //margin-top: 30px;
            //background: #ededed;
            //border: none;
            //padding: 20px;
            //height: 200px;
            //margin-bottom: 30px;
          }
        }
      }
    }
    //.small-slider {
    //  @include box-shadow();
    //}
    .small-slider, .slider-nav {
      margin: 0 auto;
      overflow: hidden;
    }
    //Slider Section
    .slick-prev {
      left: 25px;
      z-index: 1;
    }
    .slick-next {
      right: 25px;
    }

    /* the slides */
    .slick-slide {
      padding: 10px 5px;
    }
    /* the parent */
    .slick-list {
      padding: -10px -10px;
      overflow: unset;
    }

  }
//}

.row.item-details {
  opacity: 0;
}

////
// Footer
////

@import "helpers/footer";
@import "helpers/media_queries";

////////////////////////////
//Когато са 6 колоните
//.col-5-lg {
//  width: 16.66%;
//  padding-left: 10%;
//  text-align: left;
//}

//.residential .main-content .row {
//  background: #2F343B;
//  display: flex;
//  justify-content: space-around;
//  align-items: center;
//  flex-wrap: wrap;
//  padding-top: 5px;
//  padding-bottom: 5px;
//}