/* ================================
   RESET
================================ */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
min-height:100vh;
font-family:'Oswald', Arial, sans-serif;
-webkit-font-smoothing:antialiased;
}

/* ================================
   ШРИФТЫ
================================ */

/* Подключаем шрифты */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=Roboto+Mono:wght@400;500;600&display=swap');

/* Основной шрифт сайта */
body,
.t-text,
.t-title,
.t-descr,
.t-name,
.t-heading,
.t-uptitle{
font-family:'Oswald', Arial, sans-serif;
}

/* Цифры техническим шрифтом */
.number,
.price,
.date,
.counter,
.stat,
.t-amount{
font-family:'Roboto Mono', monospace;
font-feature-settings:"zero";
font-variant-numeric:slashed-zero;
}

/* ================================
   HERO БЛОКИ
================================ */

.container{
display:flex;
height:100vh;
}

.block{
flex:1;
background-size:cover;
background-position:center;
filter:grayscale(100%);
position:relative;
transition:all .5s ease;
cursor:pointer;
}

.block:hover{
filter:grayscale(0%);
}

/* Кнопка */

.start-btn{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
padding:12px 30px;
font-size:16px;
background:rgba(0,0,0,.75);
color:#fff;
border:none;
opacity:0;
transition:.4s;
font-family:'Oswald', sans-serif;
letter-spacing:2px;
}

.block:hover .start-btn{
opacity:1;
}

.start-btn:hover{
background:#000;
}

/* ================================
   КАРТОЧКИ GL27
================================ */

.gl27 .t-carousel__slide{
transition:transform .3s ease, box-shadow .3s ease, opacity 1s ease-out;
opacity:0;
background:#222;
color:#fff;
}

.gl27 .t-carousel__slide.t-active{
opacity:1;
}

.gl27 .t-carousel__slide:hover{
transform:scale(1.05);
box-shadow:0 10px 20px rgba(0,0,0,.3);
}

.gl27 .t-carousel__slide{
background-position:center;
background-attachment:fixed;
transition:background-position .5s ease;
}

.gl27 .t-carousel__slide:hover{
background-position:center bottom;
}

/* ================================
   СТРЕЛКИ
================================ */

.gl27 .t-carousel__arrow{
background:rgba(255,255,255,.7);
border-radius:50%;
padding:10px;
transition:.3s;
}

.gl27 .t-carousel__arrow:hover{
background:#fff;
box-shadow:0 0 15px rgba(0,0,0,.2);
}

/* ================================
   ПАГИНАЦИЯ
================================ */

.gl27 .t-carousel__page{
background:rgba(255,255,255,.5);
border-radius:50%;
width:12px;
height:12px;
margin:0 5px;
transition:.3s;
}

.gl27 .t-carousel__page.t-active{
background:#fff;
}

/* ================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
================================ */

@media (max-width:980px){

.container{
flex-direction:column;
height:auto;
}

.block{
height:50vh;
}

.start-btn{
font-size:14px;
padding:10px 24px;
}

}

/* маленькие телефоны */

@media (max-width:480px){

.block{
height:45vh;
}

.start-btn{
font-size:13px;
padding:8px 20px;
}

}