@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
/* CSS Document */
/* ПЕРЕМЕННЫЕ */
@dark:rgb(33,33,33);      /* Темный */
@ddark:rgb(11,11,11);     /* Черный */
@light:rgb(250,250,250);  /* Светлый */
@llight:rgb(255,255,255); /* Яркий светлый */
@acc-1:#FF9800;   /* Первый акцент 500 */
@acc-1l:#FFB74D; /* Первый акцент 300 */
@acc-1d:#F57C00;  /* Первый акцент 700 */
@acc-2:rgb(63,81,181);    /* Второй акцент 500 */
@acc-2l:rgb(121,134,203); /* Второй акцент 300 */
@acc-2d:rgb(48,63,159);   /* Второй акцент 700 */
@font:'Roboto', sans-serif;
@font-size:20px;
@slider-h:700px;


/* ТИПОГРАФИКА */
h1, h2, h3, p{margin: 0; padding: 0; font-family: @font;}
h1{
  font-size: @font-size*3;
  margin-bottom: @font-size*2;
}
h2{
  font-size: @font-size*2.3;
  margin-bottom: @font-size*1.7;
}
h3{
  font-size: @font-size*1.7;
  margin-bottom: @font-size*1.3;
}
p{
  font-size: @font-size;
  margin-bottom: @font-size;
}

/* ОТСТУПЫ */
/* padding */
.pdd-nn{padding:0;}
.pdd-xs{padding:@font-size /2;}
.pdd-sm{padding:@font-size;}
.pdd-md{padding:@font-size*1.5;}
.pdd-lg{padding:@font-size*2;}
.pdd-top-nn{padding-top:0;}
.pdd-top-xs{padding-top:@font-size /2;}
.pdd-top-sm{padding-top:@font-size;}
.pdd-top-md{padding-top:@font-size*1.5;}
.pdd-top-lg{padding-top:@font-size*2;}
.pdd-left-nn{padding-left:0;}
.pdd-left-xs{padding-left:@font-size /2;}
.pdd-left-sm{padding-left:@font-size;}
.pdd-left-md{padding-left:@font-size*1.5;}
.pdd-left-lg{padding-left:@font-size*2;}
.pdd-right-nn{padding-right:0;}
.pdd-right-xs{padding-right:@font-size /2;}
.pdd-right-sm{padding-right:@font-size;}
.pdd-right-md{padding-right:@font-size*1.5;}
.pdd-right-lg{padding-right:@font-size*2;}
.pdd-bottom-nn{padding-bottom:0;}
.pdd-bottom-xs{padding-bottom:@font-size /2;}
.pdd-bottom-sm{padding-bottom:@font-size;}
.pdd-bottom-md{padding-bottom:@font-size*1.5;}
.pdd-bottom-lg{padding-bottom:@font-size*2;}
/* margin */
.mrg-nn{margin:0;}
.mrg-xs{margin:@font-size /2;}
.mrg-sm{margin:@font-size;}
.mrg-md{margin:@font-size*1.5;}
.mrg-lg{margin:@font-size*2;}
.mrg-top-nn{margin-top:0;}
.mrg-top-xs{margin-top:@font-size /2;}
.mrg-top-sm{margin-top:@font-size;}
.mrg-top-md{margin-top:@font-size*1.5;}
.mrg-top-lg{margin-top:@font-size*2;}
.mrg-left-nn{margin-left:0;}
.mrg-left-xs{margin-left:@font-size /2;}
.mrg-left-sm{margin-left:@font-size;}
.mrg-left-md{margin-left:@font-size*1.5;}
.mrg-left-lg{margin-left:@font-size*2;}
.mrg-right-nn{margin-right:0;}
.mrg-right-xs{margin-right:@font-size /2;}
.mrg-right-sm{margin-right:@font-size;}
.mrg-right-md{margin-right:@font-size*1.5;}
.mrg-right-lg{margin-right:@font-size*2;}
.mrg-bottom-nn{margin-bottom:0;}
.mrg-bottom-xs{margin-bottom:@font-size /2;}
.mrg-bottom-sm{margin-bottom:@font-size;}
.mrg-bottom-md{margin-bottom:@font-size*1.5;}
.mrg-bottom-lg{margin-bottom:@font-size*2;}

/* СТРУКТУРА
Базовый слайдер
*/
.slider{
  height:@slider-h;
  background-color: @acc-1;
  background-image: url(/img/bg3.png);
  background-position: center bottom;
  background-size: cover;
}
.slider-content{
  position: absolute;
  top: 0px;
  width: 100%;
  height:@slider-h;
}
.slider-title{margin-top: @slider-h / 2;}
/*
Слайдер заходит под контент
*/
.slider-1{
  height:@slider-h;
  background-color: @acc-1;
  background-image: url(/img/bg3.png);
  background-position: center bottom;
  background-size: cover;
}
.slider-1 .slider-title{margin-top: @slider-h / 3;}
.slider-1-after{margin-top:@font-size*(-8);}

/* ЗАПРОСЫ */
@media screen and (max-width: 1200px) {
  .slider, .slider-1{height:@slider-h/1.2;}
  .slider-content, .slider-1{height:@slider-h/1.2;}
  .slider-title{margin-top: (@slider-h/1.2) / 2.5;}
  .slider-1 .slider-title{margin-top: @slider-h / 4;}
  .slider-1-after{margin-top:@font-size*(-6);}
}
@media screen and (max-width: 991px) {
  .slider{height:@slider-h/1.5;}
  .slider-content{height:@slider-h/1.5;}
  .slider-title{margin-top: (@slider-h/1.5) / 3;}
  .slider-1-after{margin-top:@font-size*(-5);}
}
@media screen and (max-width: 767px) {
  .slider, .slider-1{height:@slider-h/3;}
  .slider-content, .slider-1{height:@slider-h/3;}
  .slider-title, .slider-1 .slider-title{margin-top: (@slider-h/3) / 3;}
  .slider-1-after{margin-top:@font-size*(1);}
  h1{font-size: @font-size*2;}
  }
  img{width: 100%; height: auto;}