@font-face {
    font-family: 'Montserrat';
    src: url('/templates/oil/lib/fonts/Montserrat-Regular.ttf');
    /* font-weight: 400; */
    font-style: normal;
    font-display: swap;
}
* {
  padding: 0;
  margin: 0;
  border: 0; }

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

:focus, :active {
  outline: none; }
a {
  color: #424242;
}
a:hover {
  color: #424242;
}
a:focus, a:active {
  outline: none; }
  li {
     list-style-type: none;
  }

nav, footer, header, aside {
  display: block; }
  html {
    height: 100%;
  }
html, body {
    /* min-height: 100%; */
    position: relative;
    font-family: 'Montserrat', sans-serif;
    color: #202020;
    /* height: 100%; */
    width: 100%;
    line-height: 1.4;
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background-color: rgba(177, 177, 177, 0.1);
}
.wrapper {
  min-height: calc(100vh - 70px);
}
.btn-oil {
    background-color: rgb(229, 79, 42);
    color: #fff;
    padding: 10px 15px;
    border-radius: 0px;
    box-shadow: rgb(199, 49, 12) 0px 0.25em 0px 0.01em;
    font-size: 18px;
    border-color: transparent;
}
.color-red {
  color: #ff0000;
}
a.btn-oil {
  color: #f0f0f0;;
  text-decoration: none;
}
a.btn-oil:hover {
  color: #fff;
  text-decoration: none;
}
/* Кнопка */
/* Основные стили */
.wave-btn {
	width: 280px;
	height: 60px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	overflow: hidden;

	position: relative;

	transition: all 0.8s ease 0s;
	-webkit-transition: all 0.8s ease 0s;
	-moz-transition: all 0.8s ease 0s;
	-ms-transition: all 0.8s ease 0s;
	-o-transition: all 0.8s ease 0s;

	justify-content:center;
	align-items: center;

	border-radius: 0 0 10px 10px;
	text-decoration: none;
}

.wave-btn:hover {
	border-radius: 10px;

	transition: all 0.8s ease 0.2s;
	-webkit-transition: all 0.8s ease 0.2s;
	-moz-transition: all 0.8s ease 0.2s;
	-ms-transition: all 0.8s ease 0.2s;
	-o-transition: all 0.8s ease 0.2s;

	-webkit-box-shadow: 0 0 40px rgba(198, 48, 11,0.6);;
	box-shadow: 0 0 40px rgba(198, 48, 11,0.6);

}
.wave-btn:hover .wave-btn__waves{
	top: -50px;
}

.wave-btn__text {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 8px;
	position: relative;
	z-index: 1;
}
.wave-btn__waves {
	position: absolute;
	width: 280px;
	height: 280px;
	background-color: rgb(199, 49, 12);
	top: 0;
	left: 0;
	-webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);

	transition: all 0.8s ease 0s;
	-webkit-transition: all 0.8s ease 0s;
	-moz-transition: all 0.8s ease 0s;
	-ms-transition: all 0.8s ease 0s;
	-o-transition: all 0.8s ease 0s;
}
.wave-btn__waves:after,
.wave-btn__waves:before{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 250%;
	height: 250%;

	transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	-moz-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	-ms-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	-webkit-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	-o-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
}

.wave-btn__waves:before{
	background-color: #424242;
	border-radius: 48%;

	animation: waves 5s infinite linear;
	-webkit-animation: waves 5s infinite linear;
	-moz-animation: waves 5s infinite linear;
	-o-animation: waves 5s infinite linear;
}
.wave-btn__waves:after{
	background-color: rgba(0,0,0,0.5);
	border-radius: 44%;

	animation: waves 10s infinite linear;
	-webkit-animation: waves 10s infinite linear;
	-moz-animation: waves 10s infinite linear;
	-o-animation: waves 10s infinite linear;
}

@keyframes waves{
	0%{
		transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	}
	100%{
		transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
	}
}
@-webkit-keyframes waves{
	0%{
		transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	}
	100%{
		transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
	}
}
@-moz-keyframes waves{
	0%{
		transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	}
	100%{
		transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
	}
}
@-o-keyframes waves{
	0%{
		transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(0deg) scale(1);
	}
	100%{
		transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-moz-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-ms-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-webkit-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
		-o-transform: translate3d(-50%,-96%,0) rotate(360deg) scale(1);
	}
}
/* <- Кнопка */
.btn-oil:hover {
  transition: all 0.3s;
  background-color: rgb(199, 49, 12);
  border-radius: 0px;
  box-shadow: none;
  font-size: 18px;
  border-color: transparent;
}
.txt-gray {
  color: #A9A9A9;
}
/*-----------#header---------------  */
#header {
  padding-top: 10px;
  background-color: #424242;
  color: #d5d5d5;
  z-index: 1000;
  scroll-margin-top: 1em;
  box-shadow: 0 10px 10px -5px rgba(0,0,0,0.5);
}
#header a {

}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
#header .navbar .nav-link {
  color: #d5d5d5;
}
#header .navbar  .nav-item {
  position: relative;
}
/* #header .navbar .nav-item::before {
  position: absolute;
  bottom: 1px;
  content: '';
  height: 1px;
  width: 100%;
  border-bottom: 1px solid #d5d5d5;
} */
 #header .navbar .nav-item:after {
	content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 0;
    height: 1px; /* Высота линии */
    /* background-color: #d5d5d5; /* Цвет подчеркивания при исчезании линии*/ */
    transition: width 0.5s; /* Время эффекта */
}

#header .navbar .nav-item1:hover:after {
	content: "";
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 8px;
    height: 1px; /* Высота линии */
    background-color: #fff; /* Цвет подчеркивания при появлении линии*/
    transition: width 0.5s;  /* Время эффекта */
}
#header .navbar .nav-item.active:after {
	content: "";
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 8px;
    height: 1px; /* Высота линии */
    background-color: #fff; /* Цвет подчеркивания при появлении линии*/
    transition: width 0.5s;  /* Время эффекта */
}

#header .navbar .nav-link:hover {
  color: #fff;
}
#header .navbar-toggler {
  color: #fff;
}
#header  .navbar-toggler-icon {
  color: #fff;
}
#header  .btn-oil:hover {
  box-shadow: 0px;
}
#header  .img-logo img {
  width: 70px;
  height: auto;
}
#header  a.nav-link {
  font-size: 1.2em
}
#header a {
  color: #fff;
}
#header a:hover {
  color: #fff;
}
#header .dropdown-item.active, #header .dropdown-item:active {
  background-color: rgba(255, 255, 255, 0.25);
}
/*-----------/#header---------------  */

/* ----------.slider ----------------*/
.slide-image {
  max-height: 480px;
  overflow: hidden;
}
.slick-track {
  margin-left: 0;
  margin-right: 0;
}
.slick-prev {
  left: 10px;
  z-index: 1;
}
.slick-next {
  right: 10px;
}
.slide-desc {
  position: absolute;
  z-index: 999;
  top: 25%;
  left: 20%;
  color: #fff;
}
.slide-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.img-product {
cursor: pointer;
}
.img-product-big img {
width: 100%;}

@media (min-width: 576px) {
  #slider-product .modal-dialog
{
    max-width: 50%;
}
}
/* ----------/.slider ----------------*/
/*-----------.content--------------- */
.content {
  /* height: 100%; */

}
/*-----------/.content--------------- */
/* -----------magaxin---------------- */
.artikl-product {
  color: #A9A9A9;
  font-size: 0.8em;
  }
  .eyes-info {
    color: #A9A9A9;
    font-size: 1.2em;
    }
  .desc-product-card {
    position: relative;
    max-height: 88px;
    overflow: hidden;
  }
  .desc-product-card:after {
    content: '';
    position: absolute;
    height: 36px;
    bottom: 0px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255,0.9), rgba(255, 255, 255,1));
    z-index: 9999;
    display: block;
    width: 100%;
  }

  .img-product-card {
    position: relative;
  height: 350px;
  overflow: hidden;
}

.img-product-card img {
  transition: transform 0.5s;
}

.img-product-card.active-img img {
  transform: scale(1.1);
}
.teh-img-product {
  height: 35px;
  padding-top: 7px;
  width: 100%;
  display: block;
  background: rgba(0,0,0, 0.6);
  top:-35px;
  transition: top 0.5s;
  color: #fff;
}
.teh-img-product.active-panel {
  top:0px;
}
.teh-img-product li {
  list-style-type: none;
}
.teh-img-product li{

padding: 0px 5px;
flex: 0 1 25%;
}
/* -----------/magaxin---------------- */

/* -----------magazin-form------------ */
.form-control.quantity {
  width: 100px;
}
/* -----------/magazin-form------------ */
/* ------------.block------------------ */
.block .before-title-block {
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #A9A9A9;
}
.h1-block {
  color: #444;
}
.title-block {
  margin-left: 87px;
  margin-bottom: 50px;
  margin-top: 75px;
}
/* ------------/.block------------------ */
/* -------------.contacts--------------- */
.contacts i {
  font-size: 30px;
  color: rgb(229, 79, 42);
}
.contacts .card {
  padding: 20px 15px;
  margin: 30px 50px;

}
.contacts  .text-block span{
  font-size: 18px;
  font-weight: 600;
}
/* -------------/.contacts--------------- */
/* ------------.preim-------------------- */
.preim .card {
  padding: 45px 40px;
  margin: 10px 50px;
  min-height: 389px;
}
.img-preim i{
  color: rgb(229, 79, 42);
  font-size: 5em;
}
.img-preim {
  margin-bottom: 20px;
}
.title-preim {
  margin-bottom: 20px;
  min-height: 63px;
}
.desc-preim {
  margin-bottom: 20px;
}

/* ------------/.preim-------------------- */
/* ------------NEWS------------------------ */
.title-item-news{
  height: 70px;
  overflow: hidden;
}
.anons-item-news::after {
  content: '';
  position: absolute;
  height: 36px;
  bottom: 0px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255,0.9), rgba(255, 255, 255,1));
  z-index: 1;
  display: block;
  width: 100%;
}
.title-item-news h2 {
  font-size: 1.8em;
}
.anons-item-news {
  position: relative;
  max-height: 200px;
  overflow: hidden;
}
.news a {
  color: #424242;;
  text-decoration: none;
}
 a.link {
  color: #737373;;
  text-decoration: none;
}
 a.link:hover {
  color: #424242;;
  text-decoration: none;
  transition: color 0.5s;
}
.news a:hover {
  color: #000;
  text-decoration: none;
}

/* ------------/NEWS------------------------ */
/* ------------Карта-------------------- */
.ymaps-layers-pane {
	filter: grayscale(1);
	-ms-filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
}
#yandex-map {
  position: relative;

}
.callme-map {
  position: absolute;
  top:20%;
  left:11%;
  z-index: 999;
  max-width: 80%;
}

#police.error {
	border: 1px solid #ff0000;
}
input.error{
  border: 1px solid #ff0000;
}
input.valid {
  border: 1px solid #05a40f;
}
label.error {
	color: #ff0000;
	font-weight: normal;
}
/* ------------Карта-------------------- */
/*------------- footer-------------- */
footer {
  background-color: #424242;
  color: #fff;

}
footer .img-logo img {
  width: 70px;
  height: auto;
}
footer a{
  color: #d5d5d5;
  text-decoration: none;
}
footer ul{
  padding-left: 0;
}
footer a:hover{
  color: #fff;
}
/* bg-light position-absolute */
.bg-light {
  height: 100px;
  width: 100%;
  bottom: 0px;
  background-color: rgba(255,255,255, 0.5);
}
/*------------- footer-------------- */
/* -------------cookie------------- */
.p-relative {
  position: relative !important ;
}
.p-absolute {
  position: absolute !important;
}
.p-fixed {
  position: fixed !important;
}

.d-flex {
  display: flex !important;
}
.blk-cookie {
  position: fixed !important;
  bottom: -1000px;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 5px 20px;
  box-sizing: border-box;
  background-color: #fff;
  transition: all .5s;
  color: #7b7b7b;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  border: 1px solid #d7d7d8;
  display: flex;
  justify-content: center;
}
.blk-cookie_active {
bottom: 0;
transition-duration: 1s;
}
.blk-cookie_closed {
  bottom: -1000px;
  transition-duration: 1s;
}
.blk-cookie__close {
  background: #424242;
  border: 1px solid #424242;
  border-radius: 4px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  align-items: center;
  color: #fff;
  padding: 6px 15px;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
}
a.blk-cookie__close:hover {
  color: #fff;
  text-decoration:none;
}
.blk-cookie a.police_link {
  color: #424242;
}
.blk-cookie a.police_link:hover {
  color: #424242;
}


/* -------------/cookie------------- */
@media (max-width: 500px){
#header .img-logo img {
  width: 45px;
}
  .cena-product .table {
  font-size: 12px;
  }

.slide-desc {
  top: 10%;
}
.slide-desc h2 {
  font-size: 18px;
}
.slide-text p {
  font-size: 12px;
}
.wave-btn {
  height: 47px;
}
.title-block {
  margin-left: 59px;
  margin-bottom: 40px;
  margin-top: 55px;
}
.title-logo {
  font-size: 14px;
  margin-right: 20px;
}
.slide-desc {
  left: 12%;
}
.slick-slide img {
  max-width: 500px;
  height: auto;
}
  }