@charset "UTF-8";

/* ==========================================================================
   0. ПЕРЕМЕННЫЕ И БАЗА
   ========================================================================== */
:root {
  --firm:        #EFAE33;   /* фирменный жёлтый */
  --firm-dark:   #8A5A00;   
  --firm-hover:  #DB8A06;   /* hover для фона */
  --firm-hover-d:#8A5A00;   /* hover для текста */
  --accent:      #000000;   /* черный акцент (контраст на белом 5.7:1) */
  --text:        #1A1A1A;
  --text-white:  #ffffff;
  --muted:       #6b6b6b;
  --bg-footer:   #b1b1b1;
  --bg-bottom:   #898989;
  --bg-customer: #ebecec;
  --bg-job:      #f5f5f5;
  --radius:      15px;
  --shadow-card: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
}

.firm-color { color: var(--firm); } 

/* ==========================================================================
   1. КНОПКИ
   ========================================================================== */
.btn-info {
  color: var(--text-white);            
  background-color: var(--firm) !important;
  border-color: var(--firm) !important;
  border-radius: var(--radius);
}
.btn-info:hover,
.btn-info:focus {
  color: var(--text-white);
  background-color: var(--firm-hover) !important;
  border-color: var(--firm-hover) !important;
}
.btn-high { padding: 15px 0; }

/* ==========================================================================
   2. НАВИГАЦИЯ
   ========================================================================== */
.navbar { width: 100%; }

.nav-link {
  padding: 5px 15px !important;
  line-height: normal;
  border-radius: 0;
  outline: none;
  color: rgba(0,0,0,.8) !important;
}
.nav-link:hover,
.nav-link:active {
  background-color: var(--firm);
  color: var(--text) !important;
}
li.nav-item.show { background-color: var(--firm); }
li.nav-item.show > .nav-link { color: var(--text) !important; }

.dropdown-item {
  white-space: normal;
  color: rgba(0,0,0,.8);
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text);
  text-decoration: none;
  background-color: #F0B74D;
}
.dropdown-menu {
  width: min(300px, 90vw);
  padding: .5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0;
  overflow: hidden;
}

/* ==========================================================================
   3. БЛОК АВТОРИЗАЦИИ
   ========================================================================== */
.auth-blk-wrp {
  margin-right: 30px;
  overflow: hidden;
}
.auth-blk {
  float: right;
  margin: -30px 32px 0 0;
  padding: 0;
  width: 100%;
  height: 30px;
  list-style: none;
}
.auth-blk > li { float: right; }
.auth-blk li > a,
.auth-blk li a.api_link {
  position: relative;
  display: block;
  margin: 0 2px;
  width: 30px;
  height: 30px;
  outline: none;
  color: rgba(0,0,0,.3);
  text-align: center;
  line-height: 30px;
}
.auth-blk li > a:hover {
  color: var(--firm-hover);
  border-bottom: 1px solid !important;
  text-decoration: none;
}
.api_button_primary { background-color: var(--firm); }
.api_button_primary:hover,
.api_button_primary:focus { background-color: var(--accent); }
.api_auth_ajax .api_link:hover {
  color: var(--accent);
  border-bottom: 1px dashed !important;
}

/* ==========================================================================
   4. СЛАЙДЕР
   ========================================================================== */
header { padding: 10px 0; }

#sl {
  height: 542px;
  overflow: hidden;
}
.slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
  color: #fff;
  max-height: 550px;
}
.fraction-slider .slide {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 900;
}
.slide .titleSlider {
  padding: 2px 15px;
  font-size: 3rem;
  text-transform: uppercase;
  font-stretch: condensed;
  font-weight: 600;
  color: #fff;
  background-color: var(--firm);
  display: block;
  width: auto !important;
  height: auto !important;
}
.slide .txtSlider {
  font-size: 1.2rem;
  display: block;
  width: 30%;
  background-color: #fff;
  padding: 20px;
}
.slide .txtSliderUP {
  padding: 2px 15px;
  font-size: 1.8rem;
  background-color: #fff;
  color: var(--text);
  display: block;
}
.slide .txtSliderUP a{
color: var(--firm);
}
.fs-pager-wrapper { left: 50%; z-index: 901; }
.fraction-slider .next { top: 45%; }

.carousel-caption {
  position: absolute;
  top: 25%;
  left: 15%;
  width: 34%;
  max-width: 560px;
  z-index: 10;
  padding: 20px 0;
  color: #fff;
  text-align: left;
}
.carousel-caption > p {
  width: 80%;
  margin: 30px 0;
}

.txtShadowSliderFirm {
  text-shadow:
     -3px -3px 0 var(--firm),  3px -3px 0 var(--firm),
     -3px  3px 0 var(--firm),  3px  3px 0 var(--firm),
      0   -3px 0 var(--firm),  0    3px 0 var(--firm),
     -3px  0   0 var(--firm),  3px  0   0 var(--firm);
}
.topSliderTxt {
  font-size: 1.2rem;
  color: #fff !important;
  font-weight: 600;
}

/* ==========================================================================
   5. WARNING-БЛОК
   ========================================================================== */
#warning-content {
  background-color: red;
  color: #fff;
}
#warning-content a { color: #fff; text-decoration: underline; }
#warning-content a[href^="tel:"]::before {
  content: "\260e";
  margin-right: .5em;
  text-decoration: none;
  color: #fff;
}

/* ==========================================================================
   6. ИНФОРМАЦИОННЫЙ БЛОК (#num-content)
   ========================================================================== */
#num-content {
  position: relative;
  box-shadow: 0 .5px 5px rgba(0,0,0,.3);
  background-color: #fff;
}
#num-content .infoBlock {
  background-color: #fff;
  overflow: hidden;
  position: relative;
  padding: 35px 0;
}
#num-content .infoBlock .infoNumBlk .infoNum {
  font-size: 2rem;
  color: var(--text);
  margin: 0;
}
#num-content .infoBlock .infoNumBlk hr {
  width: 30%;
  background-color: var(--firm);
  border: 0;
  height: 2px;
  margin: 0 auto;
}
#num-content .infoBlock .infoNumBlk .infoNumTxt { color: var(--firm); }
#num-content .infoBlock .infoVertLine { display: none; }
#num-content .infoBlock .infoTxt { line-height: 1.5; }

/* ==========================================================================
   7. БЛОК НОВОСТЕЙ (#newsBlock)
   ========================================================================== */
#newsBlock {
  background-color: #fff;
  padding: 40px 0 80px;
}
#newsBlock h3 {
  color: var(--firm);
  text-transform: uppercase;
  margin: 20px 0 40px;
}
#newsBlock h3 a { color: var(--firm); }
#newsBlock h3 a i.fa-rss-square { color: var(--firm); }
#newsBlock h3 a i.fa-rss-square:hover { color: var(--firm-hover-d); }

#newsBlock .card {
  margin-right: 0;
  margin-left: 0;
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
}
#newsBlock .card .news-img-wrp {
  position: relative;
  max-height: 200px;
  min-height: 200px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
#newsBlock .card .newsData {
  background-color: var(--firm);
  color: var(--text-white);
  position: absolute;
  top: 80%;
  width: 200px;
  padding: 5px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
#newsBlock .card .card-title {
  color: var(--firm-dark);
  min-height: 70px;
}
#newsBlock .card div.card-text {
  height: 130px;
  overflow: hidden;
  position: relative;
}
#newsBlock .card .trim-text-img {
  width: 100%;
  position: absolute;
  bottom: 0;
}
#newsBlock .newsAllBtnBlk { margin: 40px 0; }
#newsBlock .newsAllBtnBlk div { margin: 5px 0; }
#newsBlock .newsAllBtnBlk a.news_line { color: var(--text); }
#newsBlock .card-body p { text-align: justify; }
#newsBlock .card-body .card-title {
  min-height: 70px;
}
#newsBlock .card-body .card-title a {
  color: var(--accent);
  text-decoration: none;
}
#newsBlock .card-body .card-title a:hover {
  color: var(--firm);
  text-decoration: underline;
}
#newsBlock .card-body .text-more {
  color: var(--firm);
  text-decoration: underline;
}
#newsBlock .card-body .text-more:hover {
  color: var(--firm-hover-d);
  text-decoration: none;
}

/* ==========================================================================
   8. БЛОК ПРОДУКТОВ (#productBlock)
   ========================================================================== */
#productBlock { padding: 50px 0; }

#productBlock .productListBlk {
  background-color: rgba(255,255,255,.8);
  padding: 10px 20px;
  margin: 20px 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
}
#productBlock .productListBlk h3 {
  color: var(--firm);
  text-transform: uppercase;
  margin: 20px 0;
}
#productBlock .productListBlk h3 a { color: var(--firm); }
#productBlock .productListBlk li a {
  color: var(--text);
  text-decoration: underline;
  padding-left: 0;
}
#productBlock .productListBlk li a:hover {
  color: var(--firm-hover);
  text-decoration: none;
  padding-left: 0;
}
#productBlock .text-info {
  color: var(--firm)!important;
}
#productBlock .productTxtBlk {
  padding: 10px 0;
  margin: 20px 0;
}
#productBlock .productTxtBlk h3 {
  color: var(--text);
  text-transform: uppercase;
  margin: 20px 0;
}
#productBlock .card-group .col-lg-4 {
  padding-left: 8px;
  padding-right: 8px;
}
#productBlock .card {
  border: 0;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
}
#productBlock .card .card-header {
  background-color: #e7e7e7;
  color: var(--text);
  font-weight: 600;
}
#productBlock .card .card-img-top {
  border-radius: var(--radius) var(--radius) 0 0;
}
#productBlock .card .card-header a { color: var(--text); }
#productBlock .card .card-header a:hover { color: var(--accent); }
#productBlock .card .card-footer a { color: var(--firm); }
#productBlock .card .card-footer a:hover { color: var(--firm-dark); }
#productBlock .card-footer { text-align: right; }
#productBlock .ProductPdfBlk { position: relative; }

.row-link a { color: var(--firm); }
.row-link a:hover { color: var(--text); }

/* ==========================================================================
   9. PARALLAX
   ========================================================================== */
.parallax {
  min-height: 580px;
  background: transparent;
}

/* ==========================================================================
   10. HR-БЛОК (#jobBlock)
   ========================================================================== */
#jobBlock {
  background-color: var(--bg-job);
  padding: 40px 0 80px;
}
#jobBlock h3 {
  color: var(--firm);
  text-transform: uppercase;
  margin: 20px 0 40px;
}
#jobBlock .trend {
  position: absolute;
  z-index: 800;
}
#jobBlock .lead,
#jobBlock p { text-align: justify; }
#jobBlock .job_line {
  margin: 30px 0 0;
  padding: 20px 0;
}
#jobBlock .job_line a {
  color: var(--text);
  text-decoration: none;
}
#jobBlock .job_line a:hover {
  color: var(--accent);
  text-decoration: underline;
}
#jobBlock .text-info {color: var(--firm)!important;}

/* ==========================================================================
   11. БЛОК КЛИЕНТОВ (#customer)
   ========================================================================== */
#customer {
  background: var(--bg-customer);
  padding: 40px 0;
  width: 100%;
}
#customer .adv_wrap_blk { padding: 5px; }
#customer .adv_wrap_blk h3 {
  font-size: 1.4rem;
  color: var(--firm);
}
#customer .adv_wrap_blk p { color: var(--text); }
#customer a { color: var(--firm) }
#customer a:hover p {
  color: var(--firm-hover-d);
  text-decoration: underline;
}

/* ==========================================================================
   12. ФУТЕР
   ========================================================================== */
footer {
  position: relative;
  color: #fff;
  background-color: var(--bg-footer);
  padding: 10px 0;
  font-size: .9em;
}
footer a { color: #fff; }
footer a:hover {
  text-decoration: underline;
  color: var(--firm) !important;
}
footer a:visited { color: #fff !important; }
footer .fab { margin-right: 10px; }
footer .social-ico { color: #fff; margin: 5px; }
footer .nav-link {
  padding: 4px 10px !important;
  line-height: normal;
  border-radius: 0;
  outline: none;
  color: #fff !important;
  text-transform: none !important;
}
footer .nav-link:hover {
  color: var(--firm);
  text-decoration: underline !important;
}
footer .nav > li > a:focus,
footer .nav > li > a:hover {
  background-color: transparent !important;
}

.bottomFooter {
  padding: 20px 0;
  position: relative;
  bottom: 0;
  background-color: var(--bg-bottom);
  color: #fff;
  font-size: .9em;
  text-align: center;
}
.bottomFooter a {
  color: #fff;
  text-decoration: underline !important;
}
.bottomFooter a:hover {
  color: #fffff6;
  text-decoration: none !important;
}
.bottomFooter p { text-align: center; }
.bottomFooter .iso-icon { margin: 5px; }
.bottomFooter i { float: left; margin: 5px; }

.bottomFooter .sprite {
  background-image: url(/images/elements/iso.png);
  background-repeat: no-repeat;
  display: block;
}
.bottomFooter .sprite-14001,
.bottomFooter .sprite-9001,
.bottomFooter .sprite-smq {
  width: 47px;
  height: 47px;
  color: #fff;
}
.bottomFooter .sprite-14001 { background-position: -5px  -5px; }
.bottomFooter .sprite-9001  { background-position: -62px -5px; }
.bottomFooter .sprite-smq   { background-position: -119px -5px; }

/* ==========================================================================
   13. МОДАЛЬНОЕ ОКНО
   ========================================================================== */
.modal-header h3 { color: var(--firm); }
.modal-body .inputtext,
.modal-body .inputtextarea,
.modal-body #tel { width: 100%; }

/* ==========================================================================
   14. АДАПТИВНОСТЬ
   ========================================================================== */

/* ≥ 576px */
@media (min-width: 576px) {
  #num-content {
    position: relative;
    box-shadow: 0 .5px 5px rgba(0,0,0,.3);
  }
  .infoBlock {
    background-color: #fff;
    overflow: hidden;
    position: relative;
    padding: 35px 0;
  }
  .infoNumBlk {
    width: 30%;
    float: left;
  }
  .infoNumBlk > hr {
    width: 30%;
    background-color: var(--firm);
    border: 0;
    height: 2px;
    margin: 0 !important;
  }
  .infoNumBlk > p {
    margin: 10px 0 auto;
    text-align: left;
  }
  .infoNum {
    font-size: 2rem;
    color: var(--text);
  }
  .infoNumTxt {
    line-height: 1.3;
    color: var(--firm);
    font-weight: bold;
    font-size: .8rem;
  }
  .infoVertLine {
    float: left;
    width: 2px;
    left: 0;
    height: 80px;
    border-left: 2px solid #ADB2B5;
    margin-top: 25px;
  }
  .infoTxt {
    width: 65%;
    text-align: left;
    float: left;
    padding: 20px;
  }
}

/* ≥ 768px */
@media (min-width: 768px) {
	/* после указанного разрешения */
}

/* ≥ 992px */
@media (min-width: 992px) {
	header {
		padding: 30px 0;
		position: relative;
	}
	.container { max-width: 990px; }
	.nav-link { font-size: .7rem; }
	.infoTxt  { font-size: .8rem; line-height: 1.2; }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
  .nav-link  { font-size: .8rem; }
  .infoTxt   { font-size: .8rem; line-height: 1.2; }
}

/* ≥ 1200px */
@media (min-width: 1200px) {
  .container { max-width: 1200px; }
  .nav-link  { font-size: 1rem; }
  .infoTxt   { font-size: 1rem; line-height: 1.5; }
}

/* ≥ 1400px */
@media (min-width: 1400px) {
  .container { max-width: 1400px; }
  .nav-link {
    font-size: 1rem;
    text-transform: uppercase;
  }
  .infoTxt { font-size: 1rem; line-height: 1.5; }
}

/* ≥ 1600px */
@media (min-width: 1600px) {
  .container { max-width: 1500px; }
  .topSlider { font-size: 2.9rem; font-weight: 600; }
  .nav-link  { font-size: 1rem; }
  .infoTxt   { font-size: 1rem; line-height: 1.5; }
}

/* ==========================================================================
   15. ДОСТУПНОСТЬ: отключение анимаций для пользователей с prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .parallax,
  .fraction-slider,
  .fraction-slider * {
    animation: none !important;
    transition: none !important;
  }
}