/* Реализайция 5-ой колонки */
.col-xs-five,
.col-sm-five,
.col-md-five,
.col-lg-five {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-five {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-five {
        width: 20%;
        float: left;
    }
}
.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 75px;
    margin: 0 auto;
    padding: 4px 15px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
    height: 0;
    position: absolute;
    top: 45%;
    right: 15px;
    font-size: 12px;
    margin-top: -10px;
}

.wrapper-dropdown-bef:after {
	font-family: "Font Awesome 5 Pro"; 
    content: "\f077";
}

.wrapper-dropdown-aft:after {
    font-family: "Font Awesome 5 Pro"; 
    content: "\f078";
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
	z-index: 999;
    left: 0;
    right: 0;
    
    margin:0px;
    padding:0px;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(155, 155, 155, 0.70);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 13px;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 5px 0;
    transition: all 0.3s ease-out;
    
    border-bottom: 1px solid rgba(155, 155, 155, 0.70);
    text-align: center;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}


/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
    color: #716355;
}

/* Active state */

.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #9b9b9b;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}
@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-LightItalic.eot');
    src: local('TT Drugs Light Italic'), local('TTDrugs-LightItalic'),
        url('/assets/template/fonts/drugs/TTDrugs-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-LightItalic.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-LightItalic.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-Regular.eot');
    src: local('TT Drugs Regular'), local('TTDrugs-Regular'),
        url('/assets/template/fonts/drugs/TTDrugs-Regular.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-Regular.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-Regular.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-Thin.eot');
    src: local('TT Drugs Thin'), local('TTDrugs-Thin'),
        url('/assets/template/fonts/drugs/TTDrugs-Thin.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-Thin.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-Thin.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-ThinItalic.eot');
    src: local('TT Drugs Thin Italic'), local('TTDrugs-ThinItalic'),
        url('/assets/template/fonts/drugs/TTDrugs-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-ThinItalic.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-ThinItalic.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-BlackItalic.eot');
    src: local('TT Drugs Black Italic'), local('TTDrugs-BlackItalic'),
        url('/assets/template/fonts/drugs/TTDrugs-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-BlackItalic.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-BlackItalic.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-Bold.eot');
    src: local('TT Drugs Bold'), local('TTDrugs-Bold'),
        url('/assets/template/fonts/drugs/TTDrugs-Bold.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-Bold.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-Bold.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-Italic.eot');
    src: local('TT Drugs Italic'), local('TTDrugs-Italic'),
        url('/assets/template/fonts/drugs/TTDrugs-Italic.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-Italic.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-Italic.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs/TTDrugs-Black.eot');
    src: local('TT Drugs Black'), local('TTDrugs-Black'),
        url('/assets/template/fonts/drugs/TTDrugs-Black.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-Black.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-Black.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs//assets/template/fonts/drugs/TTDrugs-BoldItalic.eot');
    src: local('TT Drugs Bold Italic'), local('TTDrugs-BoldItalic'),
        url('/assets/template/fonts/drugs/TTDrugs-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-BoldItalic.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-BoldItalic.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'TT Drugs';
    src: url('/assets/template/fonts/drugs//assets/template/fonts/drugs/TTDrugs-Light.eot');
    src: local('TT Drugs Light'), local('TTDrugs-Light'),
        url('/assets/template/fonts/drugs/TTDrugs-Light.eot?#iefix') format('embedded-opentype'),
        url('/assets/template/fonts/drugs/TTDrugs-Light.woff2') format('woff2'),
        url('/assets/template/fonts/drugs/TTDrugs-Light.woff') format('woff'),
        url('/assets/template/fonts/drugs/TTDrugs-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@media screen and (max-width: 480px){
	.grid-item {
        width:50%;
        padding: 5px;
    }
    .oia-menu li {
        text-align: center;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.grid-item {
        width:33%;
        padding: 5px;
    }
    .oia-menu li {
        text-align: center;
    }    
}
@media screen and (min-width: 769px) {
	.grid-item {
        width:20%;
        padding: 5px;
    }
    .grid-item--width2 {
        width:40%;
    }
}




a, a > span {
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 24px;
}
a:before, a:after, a > span:before, a > span:after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.effect-1 {
  padding-top: 10px;
}
.effect-1:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #0883a4;
  transform: scaleX(0);
}
.effect-1:hover:before {
  transform: scaleX(1);
}

.effect-2 {
  padding: 10px;
}
.effect-2:before, .effect-2:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #0883a4;
}
.effect-2:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
.effect-2:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
.effect-2:hover:before, .effect-2:hover:after {
  transform: scale(1, 1);
}

.effect-3 {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 5px;
  overflow: hidden;
}
.effect-3:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #8a8a8a;
  transform: translateX(-100%);
}
.effect-3:hover:before {
  transform: translateX(0);
}

.effect-4 {
  
  display: inline-block;
  overflow: hidden;
}
.effect-4:before, .effect-4:after {
  left: 0;
  width: 100%;
  height: 1px;
  background: #8a8a8a;
}
.effect-4:before {
  bottom: 0;
  transform: translateX(-100%);
}
.effect-4:after {
  top: 0;
  transform: translateX(100%);
}
.effect-4:hover:before, .effect-4:hover:after {
  transform: translateX(0);
}

.effect-5 {
  display: inline-block;
  overflow: hidden;
}
.effect-5:before, .effect-5:after {
  right: 0;
  bottom: 0;
  background: #0883a4;
}
.effect-5:before {
  width: 100%;
  height: 2px;
  transform: translateX(-100%);
}
.effect-5:after {
  width: 2px;
  height: 100%;
  transform: translateY(100%);
}
.effect-5 > span {
  display: block;
  padding: 10px;
}
.effect-5 > span:before, .effect-5 > span:after {
  left: 0;
  top: 0;
  background: #0883a4;
}
.effect-5 > span:before {
  width: 100%;
  height: 2px;
  transform: translateX(100%);
}
.effect-5 > span:after {
  width: 2px;
  height: 100%;
  transform: translateY(-100%);
}
.effect-5:hover:before, .effect-5:hover:after, .effect-5:hover > span:before, .effect-5:hover > span:after {
  transform: translate(0, 0);
}

.effect-6 {
  display: inline-block;
  overflow: hidden;
}
.effect-6:before, .effect-6:after {
  right: 0;
  bottom: 0;
  background: #0883a4;
  transition: transform .3s ease;
}
.effect-6:before {
  width: 100%;
  height: 2px;
  transform: translateX(-100%);
  transition-delay: .9s;
}
.effect-6:after {
  width: 2px;
  height: 100%;
  transform: translateY(100%);
  transition-delay: .6s;
}
.effect-6 > span {
  display: block;
  padding: 10px;
}
.effect-6 > span:before, .effect-6 > span:after {
  left: 0;
  top: 0;
  background: #0883a4;
  transition: transform .3s ease;
}
.effect-6 > span:before {
  width: 100%;
  height: 2px;
  transform: translateX(100%);
  transition-delay: .3s;
}
.effect-6 > span:after {
  width: 2px;
  height: 100%;
  transform: translateY(-100%);
  transition-delay: 0s;
}
.effect-6:hover:before, .effect-6:hover:after, .effect-6:hover > span:before, .effect-6:hover > span:after {
  transform: translate(0, 0);
}
.effect-6:hover:before {
  transition-delay: 0s;
}
.effect-6:hover:after {
  transition-delay: .3s;
}
.effect-6:hover > span:before {
  transition-delay: .6s;
}
.effect-6:hover > span:after {
  transition-delay: .9s;
}

.effect-7 {
  display: inline-block;
  overflow: hidden;
}
.effect-7:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0883a4;
  transform: translateX(-100%);
}
.effect-7:after {
  content: attr(data-content);
  left: 0;
  top: 0;
  width: 0;
  margin: 12px;
  color: #0883a4;
  white-space: nowrap;
  overflow: hidden;
  transition: width .5s ease;
}
.effect-7 > span {
  display: block;
  margin: 2px;
  padding: 10px;
  background: #0BAAD4;
}
.effect-7:hover:before {
  transform: translateX(0);
}
.effect-7:hover:after {
  width: calc(100% - 24px);
}

.effect-8 {
  display: inline-block;
  overflow: hidden;
}
.effect-8:before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0883a4;
  transform: translateY(-100%);
}
.effect-8:after {
  content: attr(data-content);
  top: 0;
  left: 0;
  height: 0;
  margin: 12px;
  color: #0883a4;
  white-space: nowrap;
  overflow: hidden;
  transition: height .5s ease;
}
.effect-8 > span {
  display: block;
  margin: 2px;
  padding: 10px;
  background: #0BAAD4;
}
.effect-8:hover:before {
  transform: translateY(0);
}
.effect-8:hover:after {
  height: calc(100% - 24px);
}


.tiles .tile {
  border-radius: 10px;
  display: inline-block;
  text-align: left;
  opacity: 0.99;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
}
.tiles .tile:before {
  content: "";
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.tiles .tile img {
  display: block;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tiles .tile .details {
  font-size: 16px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.tiles .tile .details .title {
  line-height: 1;
  font-weight: 600;
  font-size: 18px;
}
.tiles .tile .details .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.tiles .tile:focus:before,
.tiles .tile:focus span, .tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:focus:before, .tiles .tile:hover:before {
  top: 50%;
}
.tiles .tile:focus span, .tiles .tile:hover span {
  top: 0;
}
.tiles .tile:focus .title, .tiles .tile:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.tiles .tile:focus .info, .tiles .tile:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.title-port {
    color: #fff;
    font-size: 16px;
    font-weight: 400;    
}
.title-port:hover {
    color:#fff;
}

.variable-width .slide_item img {
    height:100%;
}

@media (max-width: 575.98px) { 
    .variable-width .slide_item img {
        max-height: 200px;
    }
}


@media (min-width: 576px) and (max-width: 767.98px) { 
    
    .variable-width .slide_item img {
        max-height: 250px;
    }
    
}

@media (min-width: 768px) and (max-width: 991.98px) { 
    
        .variable-width .slide_item img {
        max-height: 300px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) { 
        .variable-width .slide_item img {
        max-height: 400px;
    }
    
}

@media (min-width: 1200px) { 
    
    .variable-width .slide_item img {
        max-height: 450px;
    }
}
.image-item-block img {
    width: 100%;    
}