@import "mixins.less";
@import "variables.less";
@import "animate.css";

/*========================================================
                      Main Styles
=========================================================*/

.badge {
  background: none;
  .transition(.5s);
}

.clearboth {
  @media (max-width: 991px) {
    clear: both;
  }
}

.ff__mod {
  font-family: @font-family-sec;
}

a.text-primary:hover {
  color: @secondary-clr;
}

// Main Layout
// -----------------------

* + .row {
  margin-top: 40px;
}

.row + * {
  margin-top: 62px;
}

.row + .row {
  margin-top: 50px;
}

* + p {
  margin-top: 16px;
}

h3 + img,
h3 + .thumbnail,
h3 + .index-list {
  margin-top: 41px;
}

img + * {
  margin-top: 20px;
}

.thumbnail + h4 {
  margin-top: 60px;
}

* + h4 {
  margin-top: 20px;
}

h3 + h4 {
  margin-top: 40px;
}

* + .btn {
  margin-top: 30px;
}

* + .btn-link {
  margin-top: 20px;
}


* + .offs{
  margin-top: 85px;
}

* + .offs0{
  margin-top: 0;
}
/*=======================================================
                        Components
=========================================================*/

/*==================     Icons     ======================*/
.material-icons-location_on,
.material-icons-local_phone,
.material-icons-access_time {
  font-size: 34px;
  line-height: 26px;
  display: inline-block;
  position: relative;
  top: 5px;
}

/*==================      Box      ======================*/
.box {
  .clearfix();
  max-width: 1170px;

  &_aside {
    .border-radius(50%);
    float: left;
    img {
      .border-radius(50%);
      margin-right: 46px;
    }
  }

  &_cnt__no-flow {
    overflow: hidden;
  }

  @media (max-width: 479px) {
    &_aside {
      float: none;
      text-align: center;
    }
  }
}

/*==================  Inline List  ======================*/
.inline-list {
  li {
    display: inline-block;
    font-size: 22px;
    color: @default-lighter;
  }

  li + li {
    margin-left: 15px;
  }

  a:hover {
    color: @brand-primary;
  }
}

/*==================   Block-icon     ===================*/

.block-icon {
  * + & {
    margin-top: 33px;
  }
  position: relative;
  padding-left: 85px;
  .icon {
    position: absolute;
    font: 400 60px/60px @fa;
    color: @brand-primary;
    display: inline-block;
    left: 0px;
    top: 0px;
  }
  @media (max-width: 767px) {
    margin-top: 30px;
  }
  & + .block-icon {
    margin-top: 43px;
  }
}

/*==================   Index List  ======================*/
.index-list {
  counter-reset: li;

  li {
    padding-left: 100px;
    position: relative;
    &:before {
      content: counter(li, decimal-leading-zero);
      counter-increment: li;
      font-size: 40px;
      font-weight: 400;
      width: 70px;
      height: 70px;
      line-height: 70px;
      color: @white-clr;
      background: @brand-primary;
      position: absolute;
      left: 0;
      top: 0;
      font-family: @font-family-sec;
      display: inline-block;
      text-align: center;
      .transition(.4s);
    }
    & + li {
      margin-top: 43px;
    }
    a:hover {
      color: @secondary-clr;
    }
    &:hover:before {
      .transform(rotate(5deg));
    }
  }
  @media (max-width: 1199px) {
    padding-left: 10px;
    padding-right: 10px;
  }
  &__mod {
    li + li {
      margin-top: 0;
    }
    @media (min-width: 768px) and (max-width: 991px) {
      li {
        padding-left: 0;
        padding-top: 100px;
        &:before {
          top: 0;
        }
      }
    }

  }
}

/*==================  Marked List  ======================*/
.simple-list {
  * + & {
    margin-top: 30px;
  }
  li {
    position: relative;
    text-align: left;
    border-bottom: 1px solid #e5e5e6;
    padding: 6px 0px 5px;
    a {
      font-size: 16px;
      &:hover {
        color: @brand-primary;
      }
    }
    &:last-child {
      border: none;
    }
  }
  @media (max-width: 991px) {
    display: block;
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
  }
}


/*==================   Contact-info   ====================*/
.contact-info {
  * + & {
    margin-top: 35px;
  }
  dl {
    margin-top: 15px;
    display: inline-block;
    dt {
      float: left;
    }
    dd {
      float: right;
      margin-left:45px;
    }
  }
  address {
    line-height: 31px;
  }

  dd + dt {
    clear: both;
  }

  @media (max-width: 991px) {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
  }
}

//*================    Term list     =================*/

.term-list {
  dd{
    margin-left: 0;
    color: @default-base;
  }
  * + dt {
    margin-top: 40px;
  }

  dt + * {
    margin-top: 14px;
  }

  a[href^="mailto:"] {
    display: inline-block;
    margin-top: 35px;
  }

  * + &{
    margin-top:45px;
  }
}


/*========================================================
                     HEADER  Section
=========================================================*/

header {
  background: @header-bg;
  .clearfix();
  text-align: center;
  .inline-list {
    float: right;
    margin-top: 16px;
  }
  .navbar-brand {
    margin-left: 90px;
    line-height: 30px;
  }
  @media (max-width: 1199px) {
    .navbar-brand {
      margin-left: 0;
    }
  }
  @media (max-width: 767px) {
    .inline-list {
      float: none;
    }
  }
}


/*========================================================
                     CONTENT  Section
=========================================================*/
main {
  background: @content-bg;
}

/*==================    404    =========================*/

.page404 {
  text-align: center;
   .fa-hand-o-right{
      font-size: 400px;
      color: @brand-primary;
    }
    
    p.h2{
      font-size: 200px;
      margin-top: -50px;
    }
    p.h2 + p{
      margin-top: -14px;
    }
}

/*========================================================
                     FOOTER  Styles
=========================================================*/
footer {
  background: @footer-bg;
  font-weight: 300;
  div.h4 + * {
    margin-top: 18px;
  }
  .copyright {
    margin-top: 18px;
    margin-bottom: 25px;
    font-size: 16px;
  }
}