$color-primary: #67b73e;
$color-primary-dark: #55a727;

body{
  background-position:top center;
  background-repeat:no-repeat;
  font-family: 'Ubuntu', sans-serif;
  background-color: #f5f5f5;
  color: #464646;
  min-width: 320px;
}

h1, h2, h3, p, .btn{
  font-family: 'Ubuntu', sans-serif;
}

h1, h2{ text-align: center;}
.m-b-2{
  margin-bottom: 32px;
}
.text-inverse{
  color: white;
}

a, a:focus, button, button:focus {
  outline:none;
}
.modal {
  text-align: center;
  padding: 0!important;
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
  }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.modal-header{
  border-bottom: none;
}
.modal-content {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-dark{
  background-color: rgba(0,0,0,0.8);
  .modal-footer{
    text-align: center;
    border: none;
    .btn{
      margin: 0 15px;
    }
  }
}

.btn-success {
  color: #fff;
  background-color: $color-primary;
  border-color: $color-primary;
  border-radius: 0;

  .btn-success.active.focus,
  .btn-success.active:focus,
  .btn-success.active:hover,
  .btn-success:active.focus,
  .btn-success:active:focus,
  .btn-success:active:hover,
  .open>.dropdown-toggle.btn-success.focus,
  .open>.dropdown-toggle.btn-success:focus,
  .open>.dropdown-toggle.btn-success:hover{
    background-color: $color-primary-dark;
    border-color: $color-primary-dark;
  }
}
.btn-outline-success{
  color: $color-primary;
  background-color: transparent;
  border-color: $color-primary;
  border-radius: 0;
  &:hover, &:focus, &:active{
    color: $color-primary-dark;
    background-color: transparent;
    border-color: $color-primary-dark;
  }
}
section{
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  -webkit-background-size:cover;
}

$color-blue: #0084da;

.b-1{
  border: 1px solid #ababab;
}
h2{
  font-size: 28px;
  margin-bottom: 20px;

}
@media (min-width: 768px){
  h2 {
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 50px;
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    font-size: 38px;
    &>span {
      position: relative;
      display: inline-block;
      &:before, &:after{
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: #ababab;
      }
      &:before {
        right: 100%;
        margin-right: 15px;
      }
      &:after {
        left: 100%;
        margin-left: 15px;
      }
    }
  }
}

p{
  font-size: 15px;
}

.navbar {
  position: relative;
  margin-bottom: 0;
  font: normal 12px/14px Calibri, Candara, Segoe, sans-serif;

  a {
    color: #4a4a4a;
    text-decoration: underline;
    display: inline-block;
  }

  .contact_phones {
    background: url(../../images/about/tel.png) no-repeat 0 50%;
  }
  .contact_mob_phones {
    background: url(../../images/about/mob.png) no-repeat 1% 50%;
  }
  span.small_digits {
    font-size: 15px !important;
  }
  .contact_phones, .contact_mob_phones {
    font: normal 17px/20px Arial, Tahoma, sans-serif !important;
    padding: 2px 0 2px 20px !important;
  }
  .contact_phones a, .contact_mob_phones a {
    display: inline;

  }
  .callback {
    font-style: italic;
    margin: 5px 0 0 0;
  }

  .switch_lang {
    margin: 5px 0 10px 0;
    font-size: 12px;
  }
  .switch_lang li {
    color: #55a727;
    padding: 0 10px 0 20px;
  }

  #header .columns3 .menu_cabinet {
    background: url(../../images/about/cabinet.png) no-repeat 0 50%;
  }

  .basket_number a, .basket_number a:hover {
    text-decoration: none;
    color: #ffffff;
    background: #67b73e;
    padding: 2px 5px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    webkit-box-shadow: inset 2px 1px 10px 0 #417e24;
    -moz-box-shadow: inset 2px 1px 10px 0 #417e24;
    box-shadow: inset 2px 1px 10px 0 #417e24;
  }

  .logo{
    img{
      max-height: 46px;
    }
  }

   .menu_cabinet {
    background: url(../../images/about/cabinet.png) no-repeat 0 50%;
  }

  .basket {
    background: url(../../images/about/basket.png) no-repeat 0 50%;
  }
  .faq a {
    padding: 10px 10px 10px 22px;
    background: url(../../images/about/images/icon_faq_18x18_01.png) no-repeat 0 50%;
  }
  .menu_cabinet a, .basket a, .compare a, .faq a,  .file_download_link_ a {
    font-style: italic;

  }
  .file_download_link_ a {
    padding: 10px 10px 10px 22px;
    background: url(../../images/about/images/icon_catalog_18x18_01.png) no-repeat 0 50%;
  }
  .menu_cabinet {
    padding: 10px 10px 10px 20px;
  }
  .basket {
    padding: 10px 10px 10px 23px;
  }
  .basket_number {
    padding: 7px 0 10px 0;
  }

  .site_search {
    position: relative;
  }
  input {
    width: 250px;
    margin: 0;
    padding: 7px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 0;
    -moz-box-shadow: inset 1px 1px 1px 0 #d0d0d0;
    -webkit-box-shadow: inset 1px 1px 1px 0 #d0d0d0;
    box-shadow: inset 1px 1px 1px 0 #d0d0d0;
  }
  .site_search label {
    position: absolute;
    top: 7px;
    right: 7px;
  }

  .site_search.active .search_result_wrapper,  .site_search:active .search_result_wrapper, .cat_center .site_search.active .search_result_wrapper, header .site_search.nav-search .search_result_wrapper {
    position: absolute;
    z-index: 9999;
    background: #ececec;
    width: 260px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid #4fa32c;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    float: right;
  }


  .search_result_wrapper{
    float: right;
  }

  .compare_wrapper {
    min-height: 35px;
    position: relative;
  }

  .navbar-toggle {
    border-color: white;
    background-color: $color-primary;
    &:hover, &:focus {
      background-color: $color-primary-dark;
    }
    .icon-bar {
      background-color: white;
    }
  }
  .navbar-nav{
    background: $color-primary;
    border: 3px solid #ececec;
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: 0;
    li {
      border-top: 1px solid $color-primary-dark;
      a {
        text-transform: uppercase;
        text-decoration: none;
        color: #ffffff;
        font: bold 12px/15px Arial, Tahoma, sans-serif;
        text-align: center;
        padding: 10px 5px;
        white-space: nowrap;
        &:hover, &:focus, &.active {
          color: #ffffff;
          text-decoration: none;
          background: #55a727;
        }
      }
      &:first-child {
        border-radius: 5px 0px 0px 5px;
        -moz-border-radius: 5px 0px 0px 5px;
        -webkit-border-radius: 5px 0px 0px 5px;
      }
      &:last-child {
        border-radius: 0px 5px 5px 0px;
        -moz-border-radius: 0px 5px 5px 0px;
        -webkit-border-radius: 0px 5px 5px 0px;
      }
    }
  }
}
@media (min-width: 768px){
  .navbar{
    margin-bottom: -20px;
    z-index: 2;
  .navbar-header-body{
    margin: auto -15px;
  }
  .navbar-header {
    float: none;
  }
  .logo{
    padding: 10px 0;
    text-align: center;
    img{
      max-height: none;
    }
  }
  .navbar-brand{
    text-align: center;
  }
  .navbar-nav{
    float: none;
    width: 100%;
    display: table;
    li {
      border-top: none;
      border-left: 1px solid $color-primary-dark;
      display: table-cell;
      float: none;
    }
  }
}
}
@media (min-width: 992px){
  .navbar .navbar-nav li a{
    padding: 10px 20px;
  }
}
@media (min-width: 1200px){
  .navbar-nav {
    li {
      a {
        padding: 10px 30px;
      }
    }
  }
}


@import "owl.carousel";

.owl-theme .owl-controls .owl-page{
  span{
    background: transparent;
    opacity: 1;
    border-radius: 50%;
    border: 2px solid white;
    margin: 5px;
  }
  &.active{
    span{
      background: white;
    }
  }
}
h1{
font-size: 27px;
}
@media (min-width: 768px) {
  h1{
    font-size: 48px;
  }
}
.for_section1{
  background: rgba(0,0,0,0.2);

}
.section1{
  color: white;
  position: relative;
  overflow: hidden;
  background-image: url("../../images/about/1/bg.jpg");

  .for_section1{
      background: rgba(0,0,0,0.3);
      padding-bottom: 50px;
  }
  video#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../../images/about/1/bg.jpg) no-repeat;
    background-size: cover;
  }
  h1{
    font-size: 27px;
    text-transform: uppercase;
    font-weight: bold;
  }
  .outer:before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
   }
  .inner {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 30px);
    padding: 10px;
  }
  .outer {
    text-align: center;
    height: calc(100vh - 50px);
    min-height: 400px;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .section1 {
    h1 {
      margin-bottom: 50px;
    }
    p {
      font-size: 22px;
      line-height: 28px;
    }
    .outer {
      height: calc(100vh - 124px);
    }
  }
}

.logo-card{
  display: inline-block;
  height: 90px;
  width: 100%;
  max-width: 280px;
  background: white;
  margin-bottom: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 88px;
  img{
    max-width: 100%;
    max-height: 100%;
  }
}

.section2{
  padding-top: 70px;
  padding-bottom: 70px;
  p{
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    color: #444444;
  }
  .logo-card {
    margin-bottom: 14px;
  }
  a:hover{
    cursor: pointer;
    .logo-card{
      -webkit-box-shadow: 0px 2px 5px 0px rgba(161,161,161,0.75);
      -moz-box-shadow: 0px 2px 5px 0px rgba(161,161,161,0.75);
      box-shadow: 0px 2px 5px 0px rgba(161,161,161,0.75);
    }
    p{
      color: $color-primary;
    }
  }
}
.modal-content-company{
  background: transparent;
  border-radius: 0;
  .modal-header{
    .close{
      color: #ffc73b;
      font-size: 44px;
      font-weight: 400;
      text-shadow: none;
      opacity: 1;
    }
  }
  .modal-body{
    background-color: white;
  }
}

.foto{
width: 140px;
height: 140px;
display: inline-block;
}

.section3{
background-image: url("../../images/about/3/bg.jpg");
  color: white;
  padding-top: 50px;
  padding-bottom: 50px;
  h2{
    &>span {
      &:before, &:after {
        background: white;
      }
    }
  }
  blockquote{
    border-left: 0;
    padding: 0 0 40px;
    margin: 0;
    position: relative;
    &:before {
      content: "\201D";
      font-family: Georgia, serif;
      font-size: 60px;
      font-weight: bold;
      color: #f6c342;
      position: absolute;
      bottom: -40px;
      left: calc( 50% - 15px);
    }
  }
}

.section4{
 background-image: url("../../images/about/4/bg.jpg");
  color: white;
  padding-top: 50px;
  padding-bottom: 70px;
  h2{
    &>span {
      &:before, &:after {
        background: white;
      }
    }
  }
  p{
    font-size: 13px;
  }
  .timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
    &:before {
      top: 0;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 3px;
      background-color: rgba(0,0,0,0.2);
      left: 50%;
      margin-left: -1.5px;
    }
  }


  .timeline > li {
    margin-bottom: 30px;
    position: relative;
    & > .timeline-panel {
      width: 46%;
      float: left;
      border-top: 2px solid $color-primary;
      padding: 0 20px;
      height: 1px;
    }
    & > .timeline-badge {
      width: 14px;
      height: 14px;
      border: 3px solid $color-primary;
      position: absolute;
      top: -6px;
      left: 50%;
      margin-left: -7px;
      background-color: transparent;
      z-index: 100;
      border-radius: 50%;
      box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.2);
      &.sm {
        height: 10px;
        width: 10px;
        margin: 2px -5px;
      }
    }
    &.timeline-inverted > .timeline-panel {
      float: right;
      &:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
      }
      &:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
      }
    }
  }
  .timeline-title {
    margin-top: 0;
    color: inherit;
  }
  .timeline-body > p,
  .timeline-body > ul {
    margin-bottom: 0;
  }
  .timeline-body > p {
    margin-top: 5px;
  }
}
@media (max-width: 1199px){
  .section4 {
    .timeline > li:before,
    .timeline > li:after {
      content: " ";
      display: table;
    }

    .timeline > li:after {
      clear: both;
    }

    .timeline > li:before,
    .timeline > li:after {
      content: " ";
      display: table;
    }

    .timeline > li:after {
      clear: both;
    }
  }
}

@media (max-width: 767px) {
  .section4{

    ul.timeline:before {
      left: 40px;
    }
    ul.timeline > li{
      margin-bottom: 40px;
      &:nth-child(1), &:nth-child(2){
        margin-bottom: 40px;
      }
      &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9), &:nth-child(10), &:nth-child(11) {
        margin-bottom: 18px;
      }
      &:nth-child(14),&:nth-child(15), &:nth-child(16){
        margin-bottom: 28px;
      }
      &:nth-child(17){
        margin-bottom: 100px;
      }
      &:nth-child(18), &:nth-child(19){
        margin-bottom: 40px;
      }
      &:nth-child(20){
        margin-bottom: 80px;
      }
      &:nth-child(21){
        margin-bottom: 80px;
      }
    }
    ul.timeline > li > .timeline-panel {
      width: calc(100% - 60px);
    }

    ul.timeline > li > .timeline-badge {
      left: 33px;
      margin-left: 0;
      top: -5px;
      &.sm {
        margin: 2px;
      }
    }

    ul.timeline > li > .timeline-panel {
      float: right;
    }
  }
}
@media (min-width: 1200px){
  .section4 {
    .timeline{
      position: relative;
      height: 400px;

      &:before {
        bottom: auto;
        position: absolute;
        content: " ";
        width: 100%;
        height: 3px;
        background-color: rgba(0,0,0,0.2);
        left: 0;
        top: 50%;
        margin-left: -1.5px;
      }

      & > li{
        position: absolute;
        left: 0;
        top: 50%;
        width: 190px;
        // background: rgba(256, 256, 256, 0.3);

        .timeline-panel{
          border-top: none;
          border-left: 2px solid $color-primary;
          width: 100%;
          margin-top: 20px;
          padding: 5px 20px;
          height: auto;
        }
        &.timeline-inverted{
          bottom: 50%;
          top: auto;
          margin-bottom: -7px;
          padding-bottom: 20px;
          & .timeline-badge{
            bottom: 0;
            top: auto;
          }
          & .timeline-panel{
            float: none;
            padding-top: 0;
          }
        }

        .timeline-badge{
          left: 0;
          &.sm{
            margin-left: -4px;
          }
        }

        &:nth-child(1){
          left: 30px;
        }
        &:nth-child(2){
          left: 72px;
        }
        &:nth-child(3){
          left: 114px;
        }
        &:nth-child(4){
        left: 156px;
        }
        &:nth-child(5){
          left: 198px;
        }
        &:nth-child(6){
          left: 240px;
        }
        &:nth-child(7){
          left: 282px;
        }
        &:nth-child(8){
          left: 324px;
        }
        &:nth-child(9){
          left: 366px;
        }
        &:nth-child(10){
          left: 408px;
        }
        &:nth-child(11){
          left: 450px;
        }
        &:nth-child(12){
          left: 492px;
        }
        &:nth-child(13){
          left: 534px;
        }
        &:nth-child(14){
          left: 576px;
        }
        &:nth-child(15){
          left: 618px;
        }
        &:nth-child(16){
          left: 660px;
        }
        &:nth-child(17){
          left: 702px;
          width: 300px;
          .timeline-panel{
            padding-top: 164px;
          }
        }
        &:nth-child(18){
          left: 744px;
          width: 300px;
          .timeline-panel{
            padding-bottom: 100px;
          }
        }
        &:nth-child(19){
          left: 786px;
        }
        &:nth-child(20){
          left: 828px;
          width: 300px;
          .timeline-panel{
            padding-top: 100px;
          }
        }
        &:nth-child(21){
          left: 870px;
        }
        &:nth-child(22){
          left: 912px;
        }
        &:nth-child(23){
          left: 954px;
        }
      }
    }
  }
}

.section5{
  padding-top: 50px;
  padding-bottom: 40px;
  h2{
    margin-bottom: 42px;
  }
  img {
    border: 5px solid transparent;
    transition: 1s linear;
    &:hover {
      border-radius: 50%;
      -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
      box-shadow: 0 10px 6px -6px #777;
    }
  }
  h6{
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 40px;
    font-weight: normal;
  }
}
.section6{
  background-image:url("../../images/about/6/bg.jpg");
  color: white;
  padding-top: 50px;
  padding-bottom: 60px;
  h2{
    &>span {
      &:before, &:after {
        background: white;
      }
    }
  }
  .img-responsive{
    display: inline-block;
  }
}
.section7{
  padding-top: 50px;
  padding-bottom: 60px;
}
.section8{
  background-image:url("../../images/about/8/map.png");
  .theme-eng &{
    background-image:url("../../images/about/8/map_eng.png");
  }
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  -webkit-background-size:cover;
  height: 540px;
}

footer{
  padding-bottom: 20px;
  border-top: 1px solid #ababab;
  a{
    color: #4a4a4a;
  }
  a:hover{
    color: #4a4a4a;
  }
  label{
    font-weight: 400;
  }
  .footer-top{
    padding-top: 50px;
    font-size: 16px;
  }
  .phone{
    padding-left: 30px;
    background: url("../../images/about/9/phone.png");
    background-repeat: no-repeat;
    background-position: top left;
  }
  .mail{
    padding-left: 30px;
    background: url("../../images/about/9/mail.png");
    background-repeat: no-repeat;
    background-position: top left;
  }
  address{
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 0;
  }
  address a{
    display: block;
  }
  address span{
    font-size: 22px;
  }
  .w_youtube, .w_facebook, .w_vk{
    background-color: #dadada;
    border-radius: 5px;
    width: 97px;
    height: 43px;
    margin-right: 4px;
    background-image: url("../../images/about/9/f.png");
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
  }
  .w_youtube{
    background-image: url("../../images/about/9/y.png");
  }
  .w_vk{
    background-image: url("../../images/about/9/vk.png");
  }
  .w_facebook:hover, .w_youtube:hover, .w_vk:hover{
    background-color: grey;
  }
  .a_footer-bottom{
    color: white;
    font-size: 12px;
  }
}