@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
/* CSS Document */
/* ПЕРЕМЕННЫЕ */
@dark:rgb(33,33,33);      /* Темный */
@ddark:rgb(11,11,11);     /* Черный */
@dlight:rgb(220,220,220);  /* Темно-светлый */
@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;

/*Форма кнопок */
.btn-1, .btn-2{
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: @font-size;
  font-family:@font;
  font-weight: 400;
  text-decoration: none;
  border: none;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
  /*   margin: 20px;   */
}
.btn-1{
  padding:0px 16px;
  border-radius: 2px;
}
.btn-2{
  padding:0px 50px;
  border-radius: 20px;
}
/*центрирование */
.block-center{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* цвет фона */
.dark-bg{background-color:@dark;}
.dlight-bg{background-color:@dlight;}
.light-bg{background-color:@light;}
.acc-1-bg{background-color:@acc-1;}
.acc-1l-bg{background-color:@acc-1l;}
.acc-1d-bg{background-color:@acc-1d;}
.acc-2-bg{background-color:@acc-2;}
.acc-2l-bg{background-color:@acc-2l;}
.acc-2d-bg{background-color:@acc-2d;}
.opacity{background-color: transparent;}
.dark-bg.opacity, .light-bg.opacity, .acc-1-bg.opacity, .acc-2-bg.opacity{background-color: transparent;}
/* цвет текста */
.dark{color:@dark;}
.light{color:@light;}
.acc-1{color:@acc-1;}
.acc-1l{color:@acc-1l;}
.acc-1d{color:@acc-1d;}
.acc-2{color:@acc-2;}
/* тени */ 
.shadow-1, .shadow-1n, .shadow-1n:hover {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.shadow-2, .shadow-2n, .shadow-2n:hover {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.shadow-3, .shadow-3n, .shadow-3n:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.shadow-4, .shadow-4n, .shadow-4n:hover {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.shadow-5, .shadow-5n, .shadow-5n:hover {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
/* границы */
.dark-bg.opacity.border{border: 1px solid @dark;}
.light-bg.opacity.border{border: 1px solid @light;}
.acc-1-bg.opacity.border{border: 1px solid @acc-1;}
.acc-2-bg.opacity.border{border: 1px solid @acc-2;}
/* HOVER ЭФФЕКТЫ */
/* complect
.btn-1.acc-1-bg:hover, .btn-2.acc-1-bg:hover{background-color:@acc-1l; color: @acc-2d;}
.btn-1.acc-2-bg:hover, .btn-2.acc-2-bg:hover{background-color:@acc-2d; color: @acc-1d;}
.btn-1.light-bg:hover, .btn-2.light-bg:hover{background-color:@llight; color: @acc-2d;}
.btn-1.dark-bg:hover, .btn-2.dark-bg:hover{background-color:@ddark; color: @acc-1 ;}
*/
.btn-1:hover, .btn-2:hover{text-decoration: none;}
/* фон */
.btn-1.acc-1-bg:hover, .btn-2.acc-1-bg:hover{background-color:@acc-1l;}
.btn-1.acc-2-bg:hover, .btn-2.acc-2-bg:hover{background-color:@acc-2l;}
.btn-1.light-bg:hover, .btn-2.light-bg:hover{background-color:@llight;}
.btn-1.dark-bg:hover, .btn-2.dark-bg:hover{background-color:@ddark;}
.dark-bg.opacity:hover, .light-bg.opacity:hover, .acc-1-bg.opacity:hover, .acc-2-bg.opacity:hover{background-color:@llight;}
/* текст */
.btn-1.acc-1:hover, .btn-2.acc-1:hover{color: @acc-2d;}
.btn-1.acc-2:hover, .btn-2.acc-2:hover{color: @acc-1d;}
.btn-1.light:hover, .btn-2.light:hover{color: @llight;}
.btn-1.dark:hover, .btn-2.dark:hover{color:@acc-2;}
.dark-bg.opacity:hover{color:@dark;}
.light-bg.opacity:hover{color:@light;}
.acc-1-bg.opacity:hover{color:@acc-1;}
.acc-2-bg.opacity:hover{color:@acc-2;}
/* тени */
.shadow-1:hover {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.shadow-2:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.shadow-3:hover {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.shadow-4:hover {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}

/* ACTIVE ЭФФЕКТЫ */
/* complect
.btn-1.acc-1-bg:hover, .btn-2.acc-1-bg:hover{background-color:@acc-1l; color: @acc-2d;}
.btn-1.acc-2-bg:hover, .btn-2.acc-2-bg:hover{background-color:@acc-2d; color: @acc-1d;}
.btn-1.light-bg:hover, .btn-2.light-bg:hover{background-color:@llight; color: @acc-2d;}
.btn-1.dark-bg:hover, .btn-2.dark-bg:hover{background-color:@ddark; color: @acc-1 ;}
*/
.btn-1:active, .btn-2:active, .btn-1:focus, .btn-2:focus,{text-decoration: none;}
/* фон */
.btn-1.acc-1-bg:active, .btn-2.acc-1-bg:active, .btn-1.acc-1-bg:focus, .btn-2.acc-1-bg:focus {background-color:@acc-1d;}
.btn-1.acc-2-bg:active, .btn-2.acc-2-bg:active, .btn-1.acc-2-bg:focus, .btn-2.acc-2-bg:focus {background-color:@acc-2d;}
.btn-1.light-bg:active, .btn-2.light-bg:active, .btn-1.light-bg:focus, .btn-2.light-bg:focus {background-color:@light;}
.btn-1.dark-bg:active, .btn-2.dark-bg:active, .btn-1.dark-bg:focus, .btn-2.dark-bg:focus {background-color:@dark;}
.dark-bg.opacity:active, .light-bg.opacity:active, .acc-1-bg.opacity:active, .acc-2-bg.opacity:active{background-color:@light;}
/* текст */
.btn-1.acc-1:active, .btn-2.acc-1:active, .btn-1.acc-1:focus, .btn-2.acc-1:focus {color: @acc-2d;}
.btn-1.acc-2:active, .btn-2.acc-2:active, .btn-1.acc-2:focus, .btn-2.acc-2:focus {color: @acc-1d;}
.btn-1.light:active, .btn-2.light:active, .btn-1.light:focus, .btn-2.light:focus {color: @llight;}
.btn-1.dark:active, .btn-2.dark:active, {color:@acc-2;}
.dark-bg.opacity:active{color:@ddark;}
.light-bg.opacity:active{color:@llight;}
.acc-1-bg.opacity:active{color:@acc-1d;}
.acc-2-bg.opacity:active{color:@acc-2d;}
/* тени */
.shadow-1:active, .shadow-2:active, .shadow-3:active, .shadow-4:active, .shadow-5:active {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
/* конец ACTIVE ЭФФЕКТЫ */