/* ===========================================
   СТИЛИ ДЛЯ СЛАЙДЕРА .topslider
   =========================================== */

/* Базовые стили (дублируем из custom.css) */
.topslider .title {
  padding: 30px;
  color: #fff;
  max-width: 1000px;
}

.topslider .title .h1 {
  font-size: clamp(25px, 2.5vw, 30px);
  font-weight: 400;
}

.topslider .title .h1 sup,
.topslider .title p sup {
  font-size: 70%;
}

/* Структура заголовка слайдера */
.topslider .h1 {
  position: relative;
}

.topslider .h1 strong {
  text-transform: none;
}

.topslider .title .h1 strong span {
  display: block;
}

.topslider .title .h1 strong span + span {
  margin-top: 14px;
}

/* ===========================================
   MEDIA QUERIES (max-width, от большего к меньшему)
   =========================================== */

@media (max-width: 1600px) {
  .special .title {
    left: -23vw;
  }
}

@media (max-width: 1550px) {
  .special .title {
    left: -17vw;
    top: 0%;
  }
}

@media (max-width: 1500px) {
  .topslider .title {
    top: -30px;
  }
}

@media (max-width: 1400px) {
  .special .title {
    top: -10%;
    left: -7vw;
  }
}

@media (max-width: 1250px) {
  .topslider .title {
    top: -50px;
  }
}

@media (max-width: 1200px) {
  .special .title {
    top: -14%;
    left: 0;
  }
}

@media (max-width: 1024px) {
  .special .title {
    top: -18%;
  }
}

@media (max-width: 1000px) {
  .topslider .title {
    top: -60px;
  }

  .topslider .but {
    margin: 0 !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 900px) {
  .special .title {
    top: -25%;
  }

  .special .but {
    margin-top: 0;
  }

  .topslider .title {
    min-height: 200px;
  }
}

@media (max-width: 800px) {
  .h1 {
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .special .title {
    top: -20%;
  }

  .special .title .h1 {
    font-size: 20px;
  }

  .special .but {
    margin: 10px auto;
  }
}

@media (max-width: 767px) {
  .topslider .title {
    text-align: center;
    margin-top: 30px;
    font-size: 12px;
    top: -35px;
  }
}

@media (max-width: 650px) {
  .topslider .title {
    bottom: 45px;
  }
}

@media (max-width: 600px) {
  .special .title .h1 {
    font-size: 18px;
  }

  .special .but {
    margin-top: 2px;
  }

  .topslider .title .h1 {
    padding-bottom: 8px;
  }

  .topslider .title {
    padding-bottom: 35px;
    max-height: 200px;
  }

  .topslider .title .h1 {
    font-size: 20px;
  }
}

@media (max-width: 500px) {
  .special .title {
    top: -6%;
  }

  .topslider .title {
    text-align: left;
    left: 0;
    padding: 0 15px;
  }

  .topslider .title .h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  .topslider .title .h1 strong span:last-child {
    font-size: 18px;
  }

  .topslider .but {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 450px) {
  .topslider .title .h1 {
    font-size: 28px;
  }
}

@media (max-width: 400px) {
  .topslider .title .h1 {
    font-size: 20px;
  }

  .topslider .title .h1 strong span:last-child {
    font-size: 14px;
  }
}