@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";


body {
  padding: 0;
  background: $gray-100;
}

.sigle-banner {
  img {
    display: none;
  }
}

.bnr-cnt{
  min-height: 36px;
  @include media-breakpoint-down(sm) { background-position: right !important; }
  @include media-breakpoint-down(xs) { background-position: 60% !important;  }
}

.location-header{
  padding: 125px 0 75px 0;
  @include media-breakpoint-down(sm) { padding: 210px 0 30px 0; }
  @include media-breakpoint-down(xs) { padding: 180px 0 20px 0; }
  h1 {
    font-size: rem(40);
    @include media-breakpoint-down(sm) { color: $white; }
  }
  p {
    color: #495a54;
    @include media-breakpoint-down(sm) { color: $white; }
  }
}

.lochead{
  position: relative;
  .logodiv {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
    @include media-breakpoint-down(xs) { top: 20px; }
  }
}

.content-area{
  padding: 35px 0 95px 0;
  @include media-breakpoint-down(sm) { padding: 30px 0 20px 0; }
}

.location-nav {
  p {
    font-size: 13px;
    margin-bottom: 2px;
    color: #9c9999;
  }
  ul {
    margin: 0;
    padding: 0;
    @include media-breakpoint-down(sm) { @include clearfix; margin-left: -2%; }
    li {
      display: inline-block;
      margin-right: 20px;
      @include media-breakpoint-down(sm) { 
        display:  block; 
        float: left; 
        width: 48%; 
        margin-left: 2%; 
        margin-right: 0;
        margin-bottom: 2%;
      }
      @media screen and (max-width: 360px) {
        width: 98%;
      }
      &:first-child a{
        @include media-breakpoint-up(md) { border-color: $green; }
      }
      a{
        display: block;
        padding: 0 6px 3px 0;
        border-bottom: 2px solid $gray-100;
        color: $body-color;
        font-size: 15px;
        @include media-breakpoint-down(sm) { 
          border: 1px solid $gray-500;  
          background: $white;
          text-align: center;
          padding: 7px;
        }
        @include media-breakpoint-down(xs) { font-size: 14px;}
        &:hover {
          color: $green;
          border-color: $green;
        }
      }
    }
  }
}

.box-list{
  margin: 0 auto;
  @include media-breakpoint-up(lg) { width: 810px; }
}

.single-box {
  background: $white;
  padding: 20px 50px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
  border-radius: 3px;
  position: relative;
  @include media-breakpoint-down(sm) { padding: 20px 30px; }
  .title{
    h2 {
      border-bottom: 1px solid $gray-400;
      padding-bottom: 12px;
      color: #353b39;
      font-weight: $font-weight-normal;
      position: relative;
      font-size: rem(24);
      max-width: 220px;
      img {
        display: inline-block;
        margin-right: 18px;
      }
      span {
        display: inline-block;
        max-width: 150px;
        vertical-align: middle;
      }
    }
  }

    .arrows{
      position: absolute;
      right: 30px;
      top: 40px;
      width: 20px;
      height: 20px;
      &:after {
        content: "\e958";
        font-family: 'icomoon';
        font-size: 20px;
        color: $gray-500;
        @include media-breakpoint-down(xs) { font-size: 16px; }
      }
      &.active::after {
         content: "\e95e";
      }
    }

  ul.country-list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: -10%;
    padding-top: 25px;
    @include clearfix;
    @include media-breakpoint-down(sm) { margin-left: 0; }
    li {
      width: 40%;
      margin-left: 10%;
      display: block;
      float: left;
      margin-bottom: 18px;
      font-size: 14px;
      @include media-breakpoint-down(sm) { width: 100%; margin-left: 0; }
      a{
        color: $body-color;
        font-size: 13px;
        &:hover {
          color: $green;
        }
      }
      .lang {
        float: right;
        a {
        padding: 2px 12px;
        border: 1px solid #c8c8c8;
        font-size: 14px;
        display: inline-block;
        }
      }
      .label {
        max-width: 185px;
        display: inline-block;
        @include media-breakpoint-down(md) { max-width: 140px; }
        @include media-breakpoint-down(sm) { max-width: 270px; }
        @include media-breakpoint-down(xs) { max-width: calc(100% - 115px); }
      }
    }
  }
}


.location-footer {
  .copy-right{
       background: $green;
       color: #d6e0dc;
       border-top: none;
       padding: 20px 0 20px 0 !important;
       font-weight: $font-weight-light;
  }
}