@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-Black.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-ExtraBold.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-Thin.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-ExtraLight.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-Light.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-SemiBold.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Akrobat';
	src: url('../fonts/Akrobat/Akrobat-Bold.woff2') format('woff2'),
		 url('../fonts/Akrobat/Akrobat-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}



/*---------------- Animation ----------------*/
	
	/* Float 1 */
	@keyframes floating{0%,100%{transform:translate(0, 0)} 50% {transform:translate(-5px, 10px)}}
	/* Float 2 */
	@keyframes floating2{0%,100%{transform:translate(0, 0px);} 50% {transform:translate(5px, 10px)}}
	/* Float 3 */
	@keyframes floating3{0%,100%{transform:translate(0, 0px);} 50% {transform:translate(0px, 10px)}}
	/* Float 4 */
	@keyframes floating4{0%,100%{transform:translate(0, 0px);} 50% {transform:translate(-10px, -10px)}}

		.si-floating{animation:floating infinite ease-in-out 5s;}
		.si-floating2{animation:floating2 infinite ease-in-out 5s;}
		.si-floating3{animation:floating3 infinite ease-in-out 5s;}
		.si-floating4{animation:floating4 infinite ease-in-out 5s;}

	/* Button shadow */
	@keyframes si-button-pulse {from {box-shadow: 0 0 8px 6px #f8c700, 0 0 12px 14px #f8c700;} to{box-shadow: 0 0 18px 6px rgba(248, 199, 0, 0), 0 0 40px 40px rgba(248, 199, 0, 0);}}
	
		.pulse-button:hover{box-shadow:none;animation:si-button-pulse 1s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;}
		
	/* Shake */
	@keyframes shake {0%, 100% {transform:translate3d(0, 0, 0);} 10%, 30%, 50%, 70%, 90% {transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {transform: translate3d(10px, 0, 0);}}
		
		.si-error{animation:shake 1 linear 0.8s;}
		
	/* Buzz out */
	@keyframes buzz-out{10%{transform:translateX(3px) rotate(2deg)}20%{transform:translateX(-3px) rotate(-2deg)}30%{transform:translateX(3px) rotate(2deg)}40%{transform:translateX(-3px) rotate(-2deg)}50%{transform:translateX(2px) rotate(1deg)}60%{transform:translateX(-2px) rotate(-1deg)}70%{transform:translateX(2px) rotate(1deg)}80%{transform:translateX(-2px) rotate(-1deg)}90%{transform:translateX(1px) rotate(0)}100%{transform:translateX(-1px) rotate(0)}}
		
		.buzz-out{animation:buzz-out 1 linear 1.0s;}
	
	/* Button shadow */
	@keyframes si-waves-pulse{0%{transform:scale(1);opacity:1;} 90%{transform:scale(2);opacity:0} 99%{transform:scale(1);opacity:0}}


/*---------------- Reset ----------------*/

html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
button,img{border:0;vertical-align:middle}
ul,li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%;}
input,textarea,select {font-style:normal;font-weight:normal;}
*:focus{outline:none}
header,footer,nav,section,article,aside{display:block}
iframe{border:0}
sup,sub{vertical-align:baseline;position:relative;top:-0.4em;}
sub{top:0.4em;}
.svg-icon{display:inline-block;vertical-align:top;position:relative;transition:all 0.2s ease-out 0s;}
	.zoom-icon{position:absolute;top:40%;left:40%;width:20%;height:20%;fill:#ffcc00;opacity:0;transform:scale(5);transition:all 0.3s ease-out 0s;}
		.show-zoom:hover .zoom-icon, .show-zoom:active .zoom-icon, .show-zoom.active .zoom-icon{transform:scale(1);opacity:1;}
	.play-icon-wrapper{position:absolute;top:42%;left:42%;width:16%;background:#ffcc00;border-radius:50%;transition:all 0.3s ease-out 0s;}
		.show-zoom:hover .play-icon-wrapper{background:#ffd631;}
		.show-zoom:active .play-icon-wrapper{background:#e6b800;}
	.play-icon-wrapper:before{display:block;content:'';padding:100% 0 0;}
	.play-icon-wrapper:after{display:block;content:'';position:absolute;top:-10px;left:-10px;bottom:-10px;right:-10px;border:10px solid #ffcc00;border-radius:50%;opacity:.5;transition:all 0.3s ease-out 0s;}
		.show-zoom:hover .play-icon-wrapper:after{top:-30px;left:-30px;bottom:-30px;right:-30px;opacity:.4;}
		.show-zoom:active .play-icon-wrapper:after{top:0px;left:0px;bottom:0px;right:0px;opacity:0;}
			.play-icon{position:absolute;top:40%;left:42%;width:20%;height:20%;fill:#272727}

		
.input::-webkit-input-placeholder{color:#353741;}
.input::placeholder{color:#353741;}

	.si-error .input::-webkit-input-placeholder, .input.si-error::-webkit-input-placeholder{color:#cb0707;}
	.si-error .input::placeholder, .input.si-error::placeholder{color:#cb0707;}
	// Цвета

$color-blue-general: #2579bf;
$color-blue-light: #2e93e6;
$color-blue-dark: #1769ad;
$color-blue-txt: #178AEB;

$color-black-general: #333;
$color-black-dark: #000;
$color-black-light: #e6e6e6;
$color-black-input: #cccccc;
$color-black-overlay: rgba(0, 0, 0, .3);
$color-black-20: #333;
$color-black-30: #4d4d4d;
$color-black-60: #999;
$color-black-70: #b3b3b3;
$color-black-90: #e5e5e5;
$color-black-97: #f7f7f7;

$color-placeholder-light: #ccc;

$color-border-light: #ddd;

// Цены

$color-price-lead: $color-black-60;

// Размеры экрана

$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1366px;

// Соотношение в изображдениях и видео
$default-ratio: 56.5%;

// Настройки шрифтов

$font-family-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-size-base: 14px;
$font-line-height: 24px;
$font-size-base-sm: 14px;
$font-size-base-md: 14px;
$font-size-base-lg: 14px;

$h1-font-size: 24px;
$h1-font-line-height: 32px;
$h1-font-size-sm: 36px;
$h1-font-line-height-sm: 40px;
$h1-font-size-md: 48px;
$h1-font-line-height-md: 48px;
$h1-font-size-lg: 52px;
$h1-font-line-height-lg: $h1-font-line-height-md;

$h2-font-size: 26px;
$h2-font-line-height: 28px;
$h2-font-size-sm: 30px;
$h2-font-line-height-sm: 32px;
$h2-font-size-md: 32px;
$h2-font-line-height-md: 34px;
$h2-font-size-lg: 38px;
$h2-font-line-height-lg: 40px;

$h3-font-size: 18px;
$h3-font-line-height: 24px;
$h3-font-size-sm: 20px;
$h3-font-line-height-sm: 24px;
$h3-font-size-md: 20px;
$h3-font-line-height-md: 24px;
$h3-font-size-lg: 20px;
$h3-font-line-height-lg: 24px;

$h4-font-size: 14px;
$h4-font-size-sm: 14px;
$h4-font-size-md: 14px;
$h4-font-size-lg: 14px;

// Параметры формы

$control-input-font-size: 16px;
$control-input-font-size-sm: 16px;
$control-input-font-size-md: 16px;
$control-input-font-size-lg: 16px;

$control-icon-font-size: 16px;

$border-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);

// Размеры различных стандартных элементов

$input-size-height: 56px;
$input-size-height-md: 48px;

// Подключение шрифтов

/* @font-face {
  font-family: 'Avenir Next Cyr';
  font-style: normal;
  font-weight: 600;
  src: local('Avenir Next Cyr SemiBold'),
  local('AvenirNextCyr-SemiBold'),
  url('/fonts/AvenirNextCyr-SemiBold.woff2') format('woff2'),
  url('/fonts/AvenirNextCyr-SemiBold.woff') format('woff'),
  url('/fonts/AvenirNextCyr-SemiBold.ttf') format('ttf');
}

@font-face {
  font-family: 'Avenir Next Cyr';
  font-style: normal;
  font-weight: 700;
  src: local('Avenir Next Cyr Bold'),
  local('AvenirNextCyr-Bold'),
  url('/fonts/AvenirNextCyr-Bold.woff2') format('woff2'),
  url('/fonts/AvenirNextCyr-Bold.woff') format('woff'),
  url('/fonts/AvenirNextCyr-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'),
  local('OpenSans-Light'),
  url('/fonts/OpenSans-Light.woff2') format('woff2'),
  url('/fonts/OpenSans-Light.woff') format('woff'),
  url('/fonts/OpenSans-Light.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'),
  local('OpenSans-Regular'),
  url('/fonts/OpenSans-Regular.woff2') format('woff2'),
  url('/fonts/OpenSans-Regular.woff') format('woff'),
  url('/fonts/OpenSans-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'),
  local('OpenSans-SemiBold'),
  url('/fonts/OpenSans-SemiBold.woff2') format('woff2'),
  url('/fonts/OpenSans-SemiBold.woff') format('woff'),
  url('/fonts/OpenSans-SemiBold.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'),
  local('OpenSans-Bold'),
  url('/fonts/OpenSans-Bold.woff2') format('woff2'),
  url('/fonts/OpenSans-Bold.woff') format('woff'),
  url('/fonts/OpenSans-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'),
  local('OpenSans-Bold'),
  url('/fonts/OpenSans-Bold.woff2') format('woff2'),
  url('/fonts/OpenSans-Bold.woff') format('woff'),
  url('/fonts/OpenSans-Bold.ttf') format('ttf');
} */

@font-face {
  font-family: 'fontello';
  font-style: normal;
  font-weight: 400;
  src: local('fontello'),
  url('/fonts/fontello.woff2') format('woff2'),
  url('/fonts/fontello.woff') format('woff'),
  url('/fonts/fontello.ttf') format('truetype');
}

/* @font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 300;
  src: local('TT Norms Light'),
  local('TTNorms-Light'),
  url('/fonts/TTNorms-Light.woff2') format('woff2'),
  url('/fonts/TTNorms-Light.woff') format('woff'),
  url('/fonts/TTNorms-Light.ttf') format('ttf');
}

@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  src: local('TT Norms Regular'),
  local('TTNorms-Regular'),
  url('/fonts/TTNorms-Regular.woff2') format('woff2'),
  url('/fonts/TTNorms-Regular.woff') format('woff'),
  url('/fonts/TTNorms-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  src: local('TT Norms SemiBold'),
  local('TTNorms-Bold'),
  url('/fonts/TTNorms-SemiBold.woff2') format('woff2'),
  url('/fonts/TTNorms-SemiBold.woff') format('woff'),
  url('/fonts/TTNorms-SemiBold.ttf') format('ttf');
}


@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 600;
  src: local('TT Norms Bold'),
  local('TTNorms-Bold'),
  url('/fonts/TTNorms-Bold.woff2') format('woff2'),
  url('/fonts/TTNorms-Bold.woff') format('woff'),
  url('/fonts/TTNorms-Bold.ttf') format('ttf');
} */


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

// Документ

html {
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body {
  background-color: #fff;
  color: $color-black-general;
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: 400;
  line-height: $font-line-height;
  min-width: 320px;

  @media (min-width: $screen-sm) {
    font-size: $font-size-base-sm;
    line-height: 1.72;
  }
  @media (min-width: $screen-md) {
    padding-top: 145px;
    font-size: $font-size-base-md;
  }

  &.first-page {
    padding-top: 0;
  }
}

// Заголовки

h1 {
  font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  font-size: $h1-font-size;
  font-weight: 400;
  line-height: $h1-font-line-height;
  margin: 0;
  padding: 0;

  @media (min-width: $screen-sm) {
    font-size: $h1-font-size-sm;
    line-height: $h1-font-line-height-sm;

  }
  @media (min-width: $screen-md) {
    font-size: $h1-font-size-md;
    line-height: $h1-font-line-height-md;
  }
  @media (min-width: $screen-lg) {
    font-size: $h1-font-size-lg;
    line-height: $h1-font-line-height-lg;
  }
}

h2 {
  font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  font-size: $h2-font-size;
  font-weight: 700;
  line-height: $h2-font-line-height;
  margin: 0;
  padding: 0;

  @media (min-width: $screen-sm) {
    font-size: $h2-font-size-sm;
    line-height: $h2-font-line-height-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $h2-font-size-md;
    width: 66%;
  }
  @media (min-width: $screen-lg) {
    font-size: $h2-font-size-lg;
    line-height: $h2-font-line-height-lg;
  }
}

h3 {
  font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  color: $color-black-dark;
  font-size: $h3-font-size;
  font-weight: 600;
  line-height: $h3-font-line-height;
  margin: 0;
  padding: 0;
  @media (min-width: $screen-sm) {
    font-size: $h3-font-size-sm;
    line-height: $h3-font-line-height-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $h3-font-size-md;
    line-height: $h3-font-line-height-md;
  }
  
  @media (min-width: $screen-lg) {
    left: 336px;
  }
}

h4 {
  color: $color-black-dark;
  font-size: $h4-font-size;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0;

  @media (min-width: $screen-sm) {
    font-size: $h4-font-size-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $h4-font-size-md;
  }
}

figure {
  margin: 0;
}

p {
  margin: 0;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  font-variant: normal;
  text-transform: none;

  line-height: 1em;

  margin-left: .2em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon {
  &.icon-menu:before {
    content: '\f0c9';
  }

  &.icon-mail:before {
    content: '\e800';
  }

  &.icon-star:before {
    content: '\e801';
  }

  &.icon-star-empty:before {
    content: '\e802';
  }

  &.icon-star-half:before {
    content: '\e803';
  }

  &.icon-camera:before {
    content: '\e804';
  }

  &.icon-thumbs-up:before {
    content: '\e805';
  }

  &.icon-videocam:before {
    content: '\e806';
  }

  &.icon-ok:before {
    content: '\e807';
  }

  &.icon-thumbs-down:before {
    content: '\e808';
  }

  &.icon-pencil:before {
    content: '\e809';
  }

  &.icon-cancel:before {
    content: '\e80a';
  }

  &.icon-plus:before {
    content: '\e80b';
  }

  &.icon-location:before {
    content: '\e80c';
  }

  &.icon-phone:before {
    content: '\e80d';
  }

  &.icon-cog:before {
    content: '\e80e';
  }

  &.icon-wrench:before {
    content: '\e80f';
  }

  &.icon-cog-alt:before {
    content: '\e810';
  }

  &.icon-clock:before {
    content: '\e811';
  }

  &.icon-down-open:before {
    content: '\e812';
  }

  &.icon-left-open:before {
    content: '\e813';
  }

  &.icon-right-open:before {
    content: '\e814';
  }

  &.icon-up-open:before {
    content: '\e815';
  }

  &.icon-down-big:before {
    content: '\e816';
  }

  &.icon-left-big:before {
    content: '\e817';
  }

  &.icon-right-big:before {
    content: '\e818';
  }

  &.icon-up-big:before {
    content: '\e819';
  }

  &.icon-play:before {
    content: '\e81a';
  }

  &.icon-leaf:before {
    content: '\e81b';
  }

  &.icon-tint:before {
    content: '\e81c';
  }

  &.icon-credit-card:before {
    content: '\e81d';
  }

  &.icon-truck:before {
    content: '\e81e';
  }

  &.icon-gift:before {
    content: '\e81f';
  }

  &.icon-zoom-in:before {
    content: '\e820';
  }

  &.icon-zoom-out:before {
    content: '\e821';
  }

  &.icon-attention-circled:before {
    content: '\e822';
  }

  &.icon-ok-circled:before {
    content: '\e823';
  }

  &.icon-cancel-circled:before {
    content: '\e824';
  }

  &.icon-plus-circled:before {
    content: '\e825';
  }

  &.icon-help-circled:before {
    content: '\e826';
  }

  &.icon-info-circled:before {
    content: '\e827';
  }

  &.icon-phone-1:before {
    content: '\e828';
  }

  &.icon-clock-1:before {
    content: '\e829';
  }

  &.icon-light-up:before {
    content: '\e82a';
  }

  &.icon-cancel-1:before {
    content: '\e82b';
  }

  &.icon-pencil-1:before {
    content: '\e82c';
  }

  &.icon-cancel-2:before {
    content: '\e82d';
  }

  &.icon-left-1:before {
    content: '\e82e';
  }

  &.icon-right-1:before {
    content: '\e82f';
  }

  &.icon-spin1:before {
    content: '\e830';
  }

  &.icon-spin2:before {
    content: '\e831';
  }

  &.icon-spin3:before {
    content: '\e832';
  }

  &.icon-down-1:before {
    content: '\e833';
  }

  &.icon-spin4:before {
    content: '\e834';
  }

  &.icon-up-1:before {
    content: '\e835';
  }

  &.icon-cancel-3:before {
    content: '\e836';
  }

  &.icon-spin5:before {
    content: '\e838';
  }

  &.icon-spin6:before {
    content: '\e839';
  }

  &.icon-twitter:before {
    content: '\f099';
  }

  &.icon-facebook:before {
    content: '\f09a';
  }

  &.icon-left-circled:before {
    content: '\f0a8';
  }

  &.icon-right-circled:before {
    content: '\f0a9';
  }

  &.icon-up-circled:before {
    content: '\f0aa';
  }

  &.icon-down-circled:before {
    content: '\f0ab';
  }

  &.icon-gplus-squared:before {
    content: '\f0d4';
  }

  &.icon-gplus:before {
    content: '\f0d5';
  }

  &.icon-mail-alt:before {
    content: '\f0e0';
  }

  &.icon-lightbulb:before {
    content: '\f0eb';
  }

  &.icon-doc-text:before {
    content: '\f0f6';
  }

  &.icon-angle-left:before {
    content: '\f104';
  }

  &.icon-angle-right:before {
    content: '\f105';
  }

  &.icon-angle-up:before {
    content: '\f106';
  }

  &.icon-angle-down:before {
    content: '\f107';
  }

  &.icon-desktop:before {
    content: '\f108';
  }

  &.icon-laptop:before {
    content: '\f109';
  }

  &.icon-tablet:before {
    content: '\f10a';
  }

  &.icon-mobile:before {
    content: '\f10b';
  }

  &.icon-circle-empty:before {
    content: '\f10c';
  }

  &.icon-spinner:before {
    content: '\f110';
  }

  &.icon-circle:before {
    content: '\f111';
  }

  &.icon-star-half-alt:before {
    content: '\f123';
  }

  &.icon-direction:before {
    content: '\f124';
  }

  &.icon-info:before {
    content: '\f129';
  }

  &.icon-shield:before {
    content: '\f132';
  }

  &.icon-extinguisher:before {
    content: '\f134';
  }

  &.icon-angle-circled-left:before {
    content: '\f137';
  }

  &.icon-angle-circled-right:before {
    content: '\f138';
  }

  &.icon-angle-circled-up:before {
    content: '\f139';
  }

  &.icon-angle-circled-down:before {
    content: '\f13a';
  }

  &.icon-play-circled:before {
    content: '\f144';
  }

  &.icon-rouble:before {
    content: '\f158';
  }

  &.icon-thumbs-up-alt:before {
    content: '\f164';
  }

  &.icon-thumbs-down-alt:before {
    content: '\f165';
  }

  &.icon-youtube-squared:before {
    content: '\f166';
  }

  &.icon-youtube:before {
    content: '\f167';
  }

  &.icon-youtube-play:before {
    content: '\f16a';
  }

  &.icon-instagram:before {
    content: '\f16d';
  }

  &.icon-down:before {
    content: '\f175';
  }

  &.icon-up:before {
    content: '\f176';
  }

  &.icon-left:before {
    content: '\f177';
  }

  &.icon-right:before {
    content: '\f178';
  }

  &.icon-apple:before {
    content: '\f179';
  }

  &.icon-skype:before {
    content: '\f17e';
  }

  &.icon-vkontakte:before {
    content: '\f189';
  }

  &.icon-google:before {
    content: '\f1a0';
  }

  &.icon-cab:before {
    content: '\f1b9';
  }

  &.icon-paper-plane:before {
    content: '\f1d8';
  }

  &.icon-history:before {
    content: '\f1da';
  }

  &.icon-circle-thin:before {
    content: '\f1db';
  }

  &.icon-cc-visa:before {
    content: '\f1f0';
  }

  &.icon-cc-mastercard:before {
    content: '\f1f1';
  }

  &.icon-cc-paypal:before {
    content: '\f1f4';
  }

  &.icon-bus:before {
    content: '\f207';
  }

  &.icon-diamond:before {
    content: '\f219';
  }

  &.icon-facebook-official:before {
    content: '\f230';
  }

  &.icon-whatsapp:before {
    content: '\f232';
  }

  &.icon-train:before {
    content: '\f238';
  }

  &.icon-subway:before {
    content: '\f239';
  }

  &.icon-mouse-pointer:before {
    content: '\f245';
  }

  &.icon-odnoklassniki:before {
    content: '\f263';
  }

  &.icon-odnoklassniki-square:before {
    content: '\f264';
  }

  &.icon-credit-card-alt:before {
    content: '\f283';
  }

  &.icon-percent:before {
    content: '\f295';
  }

  &.icon-envira:before {
    content: '\f299';
  }

  &.icon-envelope-open:before {
    content: '\f2b6';
  }

  &.icon-envelope-open-o:before {
    content: '\f2b7';
  }

  &.icon-telegram:before {
    content: '\f2c6';
  }

  &.icon-twitter-squared:before {
    content: '\f304';
  }

  &.icon-facebook-squared:before {
    content: '\f308';
  }

  &.animate-spin {
    animation: spin 2s infinite linear;
    display: inline-block;
  }
}

// Шапка

.navigation-bar {
  background-color: #fff;
  border-bottom: 1px solid $color-black-light;

  @media (min-width: $screen-sm) {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 600;
  }
  @media (min-width: $screen-md) {
    position: fixed;
  }

  .block {
    margin-left: -8px;
    margin-right: -8px;
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }
}

.header-geo {
  background: $color-blue-general;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  height: 24px;
  line-height: 24px;
  width: 100%;

  @media (min-width: $screen-sm) {
    padding: 0 24px;
  }

  @media (min-width: $screen-md) {
    padding: 0 32px;
  }

  .container {
    width: 100%;

    @media (min-width: $screen-lg) {
      max-width: 1920px;
    }
  }

  .city {
    float: left;

    .title {
      cursor: pointer;
      display: inline-block;
      position: relative;
      padding-right: 13px;

      &:after {
        content: "\e812";
        display: block;
        font-family: "fontello";
        font-size: 10px;
        height: 10px;
        right: 0;
        position: absolute;
        top: 1px;
        width: 10px;
      }
    }

    &.active {
      .title:after {
        content: "\e815";
      }

      .city-list-block {
        display: block;
      }

      .modal-overlay {
        display: block;
      }
    }
  }

  .modal-overlay {
    background-color: $color-black-overlay;
    display: none;
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    z-index: 300;
  }

  .city-list-block {
    background-color: #fff;
    display: none;
    height: 90vh;
    height: calc(100vh - 32px);
    width: 300px;
    padding: 16px;
    z-index: 500;
    position: absolute;
  }

  .search-block {
    position: relative;

    .search {
      width: 100%;
    }

    .icon {
      color: $color-placeholder-light;
      font-size: 14px;
      line-height: 40px;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: 40px;
    }
  }

  .city-list {
    height: 90%;
    overflow-y: auto;
    padding: 0;

    li {
      font-size: $h3-font-size;
      line-height: 32px;
      padding-left: 8px;

      font-weight: 400;

      a {
        color: $color-black-general;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .mail, .work-time, .payment {
    color: #fff;
    display: none;
    text-decoration: none;

    @media (min-width: $screen-sm) {
      display: block;
      float: right;
      position: relative;
      padding-left: 32px;
    }

    .icon {
      margin-right: 6px;
    }

  }

  .icon {
    font-size: 13px;
    margin-left: -3px;
  }
}

.header-navigation {
  padding: 16px 0;

  @media (min-width: $screen-sm) {
    padding: 24px;
  }
  @media (min-width: $screen-md) {
    padding: 32px;
  }

  .container {
    width: 100%;

    @media (min-width: $screen-lg) {
      max-width: 1920px;
    }
  }

  .logo-link {
    float: left;
    font-size: 0;
    line-height: 0;

    .logo {
      height: 32px;

      @media (min-width: $screen-sm) {
        height: 48px;
      }
      @media (min-width: $screen-md) {
        height: 56px;
      }

    }
  }
}

.header-navigation-block {
  display: none;
  position: relative;

  @media (min-width: $screen-sm) {
    display: block;
    height: 48px;
    margin-right: 60px;
    margin-left: 200px;
  }
  @media (min-width: $screen-md) {
    display: block;
    height: 56px;
    margin-right: 0;
    margin-left: 245px;
  }

  .address-list {
    display: none;
    float: right;
    padding-right: 40px;
    position: relative;

    @media (min-width: $screen-md) {
      top: -1px;
      display: block;
      left: 0;
      position: absolute;
    }

    .list {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .item {
      float: left;
      margin-right: 24px;
      position: relative;

      @media (min-width: $screen-md) {
        &:nth-child(n+4) {
          display: none;
        }
      }
      @media (min-width: $screen-lg) {
        display: block;
        margin-right: 32px;
        // Нам нужно вывести только 4 элемента, остальные скрываем
        &:nth-child(n) {
          display: block;
        }
        &:nth-child(n+6) {
          display: none;
        }
      }
    }

    .item-title {
      color: $color-black-general;
      display: block;
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      text-decoration: none;

      &:before {
        content: "";
        height: 100%;
        position: absolute;
        width: 100%;
      }

      &:hover {
        text-decoration: underline;
      }
    }

    .item-description {
      color: $color-black-70;
      display: block;
      font-size: 10px;
      font-weight: 300;
      line-height: 1;
      margin-top: 5px;
      max-width: 100px;
    }

    .counter {
      display: block;
      float: left;

      .item-title {
        color: $color-blue-general;
      }

      .item-description {
        color: $color-blue-general;
      }
    }

  }

  .general-menu {
    display: none;

    @media (min-width: $screen-md) {
      bottom: -2px;
      display: block;
      position: absolute;
      left: 0;
      line-height: 1;
    }

    .item {
      color: $color-blue-general;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      display: block;
      float: left;
      margin-right: 24px;
      cursor: pointer;
      position: relative;

      &.sub {
        padding-right: 16px;
      }

      &.sub:after {
        color: $color-blue-general;
        font-family: fontello;
        content: "\f107";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 1px;
        right: 0;
      }

      &.active:after {
        content: "\f106";
      }
    }
  }

  .phones-block {
    display: flex;
    flex-direction: column;
    float: right;
    height: 100%;
    justify-content: center;
  }

  .phone-number {
    color: $color-black-general;
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    text-decoration: none;

    @media (min-width: $screen-sm) {
      margin-bottom: 10px;
    }
    @media (min-width: $screen-md) {
      margin-bottom: 18px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .whatsapp-number {
    color: $color-black-general;
    display: block;
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
  }

  .contact-list {
    bottom: 5px;
    display: none;
    position: absolute;
    right: 0;

    @media (min-width: $screen-sm) {
      display: block;
    }

    .item {
      color: $color-blue-general;
      display: block;
      float: right;
      font-family: "Font Awesome 5 Free";
      height: 20px;
      margin-left: 16px;
      position: relative;
      text-decoration: none;
      width: 18px;

      &:before {
        font-size: 17px;
        right: 0;
        position: absolute;
        top: 0;
      }
    }

    .payment:before {
      content: "\f09d";
    }

    .mail:before {
      content: "\f0e0";
    }
  }
}

.mobile-navigation-block {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  float: right;
  height: 100%;
  justify-content: center;

  @media (min-width: $screen-sm) {
    height: 48px;
  }
  @media (min-width: $screen-md) {
    display: none;
  }

  .item {
    cursor: pointer;
    display: block;
    float: right;
    font-size: 9px;
    line-height: 1;
    margin-left: 8px;
    min-width: 32px;
    text-align: center;
    text-decoration: none;

    &:before {
      color: $color-blue-general;
      display: block;
      font-family: "fontello";
      font-size: 24px;
      line-height: 1.2;
      text-align: center;

      @media (min-width: $screen-sm) {
        font-size: 31px;
      }
    }
  }

  .map-link {
    margin-left: 0;

    @media (min-width: $screen-sm) {
      display: none;
    }

    &:before {
      content: "\e80c";
    }
  }

  .whatsapp-link {

    @media (min-width: $screen-sm) {
      display: none;
    }

    &:before {
      content: "\f232";
    }
  }

  .phone-link {
    margin-top: 1px;

    @media (min-width: $screen-sm) {
      display: none;
    }

    &:before {
      content: "\e80d";
    }
  }

  .menu-button {

    &:before {
      content: "\f0c9";
    }
  }
}

.header-navigation-list {

  a {
    color: $color-black-general;
    display: block;
    text-decoration: none;

    @media (min-width: $screen-md) {
      display: inline-block;
    }

    &:hover {
      text-decoration: none;

      @media (min-width: $screen-md) {
        text-decoration: underline;
      }

    }
  }

  p {
    margin-top: 0;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    position: relative;
    line-height: 38px;
    border-top: 1px solid transparent;

    @media (min-width: $screen-md) {
      border-top: 0;
    }
  }

  .block {
    padding: 0 8px;

    @media (min-width: $screen-md) {
      margin-left: -8px;
      margin-right: -8px;
      padding: 0 32px;
    }
  }

  .nav-section {
    display: none;

    @media (min-width: $screen-md) {
      border-top: 1px solid $color-black-light;
      border-bottom: 1px solid $color-black-light;
      display: none;
      padding: 20px;
      margin-bottom: 0;
    }

    &.active {
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }

  .nav-main {
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }
    }

    li {
      @media (min-width: $screen-md) {
        border-bottom: 0;
      }
    }
  }

  .nav-second {
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }
    }
  }

  .nav-block {
    border-top: 1px solid transparent;
    margin: 0 8px;

    @media (min-width: $screen-sm) {
      margin: 0 24px;
    }
    @media (min-width: $screen-md) {
      border-top: 0;
      margin: 0;
    }

    .nav-title {
      cursor: pointer;
      display: block;
      font-weight: 600;
      line-height: 38px;
      margin-bottom: 0;
      padding: 0 0 1px;
      position: relative;

      @media (min-width: $screen-md) {
        cursor: default;
        padding: 0;
      }

      &:after {
        content: "\e812";
        display: block;
        font-family: "fontello";
        font-size: 10px;
        height: 10px;
        position: absolute;
        right: 15px;
        top: 0;
        width: 10px;

        @media (min-width: $screen-md) {
          display: none;
        }
      }
    }

    .nav-list {
      display: none;

      @media (min-width: $screen-md) {
        margin-bottom: 0;
        margin-top: 9px;
        display: block;
      }

      a {
        display: block;
        font-size: 14px;
        font-weight: 400;
        line-height: 39px;
        padding: 0 0 1px;
        white-space: nowrap;

        @media (min-width: $screen-md) {
          display: inline-block;
          line-height: 24px;
          padding: 0;
        }
      }

      li {
        line-height: 1;
        border: 0;
      }
    }

    &.active {
      .nav-title:after {
        content: "\e815";
      }

      .nav-list {
        display: block;
      }
    }
  }

  .nav-section-company {
    .social {
      text-align: center;

      a {
        border: 1px solid $color-blue-light;
        border-radius: 16px;
        color: $color-blue-light;
        font-size: 16px;
        line-height: 30px;
        width: 32px;
      }

      .item {
        display: inline-block;
        margin-right: 5px;
        border: 0;

        @media (min-width: $screen-md) {
          display: block;
          float: left;
        }
      }
    }
  }

  .nav-section-general {
    padding-bottom: 20px;
  }

  .solutions {
    .nav-block {
      @media (min-width: $screen-md) {
        padding: 0 16px;
      }
    }
  }

  .phones {
    .nav-title {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }

  .phone-block {
    @media (min-width: $screen-md) {
      margin-top: 9px;
    }
  }

  .phone-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;

    @media (min-width: $screen-md) {
      text-align: initial;
    }
  }

  &.active {
    .nav-section {
      display: block;
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }
}

.header-page-title {
  background-color: #fff;
  color: $color-black-general;

  //background-color: $color-blue-general;
  //color: #fff;

  //@media (min-width: $screen-sm) {
  //  border-bottom: 1px solid $color-black-light;
  //}

  @media (min-width: $screen-md) {
    margin-bottom: 68px;
  }

  .block {
    padding: 26px 16px 29px;
    margin-left: -8px;
    margin-right: -8px;

    @media (min-width: $screen-sm) {
      padding: 16px 32px 56px;
    }
    @media (min-width: $screen-md) {
      padding: 24px 32px 0;
    }
  }

  .breadcrumbs {
    display: none;
    font-size: 15px;
    font-weight: 400;
    margin: 8px 0;
    padding: 0;

    @media (min-width: $screen-sm) {
      display: block;
      margin: 11px 0 11px 3px;
    }

    a, a:visited {
      color: $color-black-general;
      //color: #fff;
      text-decoration: none;
    }

    li {
      display: inline-block;
      margin-right: 4px;

      &:after {
        content: "/";
      }
    }
  }
}

// Модальное окно
.swal-overlay {
  .swal-modal {
    animation: none;
    border-radius: 0;
    width: 624px;

    .swal-title {
      font-size: 20px;
      line-height: 24px;
      margin: 0;
      padding: 28px 32px 27px;
      text-align: left;
    }

    .swal-content {
      color: $color-black-general;
      display: block;
      font-size: 16px;
      max-width: none;
      margin: 0;
      padding: 0 32px;
      text-align: left;
      width: 100%;

      h4 {
        margin-top: 16px;
        padding-top: 1px;
      }

      ul {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: none;
        margin-top: 16px;
        padding: 0;

        @media (min-width: $screen-sm) {
          font-size: 14px;
          line-height: 1.72;
        }

        li {
          padding-left: 24px;
          position: relative;

          &:before {
            content: "—";
            left: 0;
            position: absolute;
          }
        }
      }

      ol {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: decimal;
        margin-top: 16px;
        padding-left: 20px;

        li {
          padding-left: 4px;
        }
      }

      p {
        margin-top: 16px;
      }

      .plan {
        text-align: center;
      }

      .specifications {
        border-spacing: 0;
        border-collapse: collapse;
        font-size: 14px;
        margin-top: 32px;
        width: 100%;

        thead {
          td {
            border-top: 0;
            font-weight: 600;
            text-align: left;
          }
        }

        tfoot {
          td {
            font-weight: 600;
            text-align: right;
          }

          .measure {
            margin-left: 4px;
          }
        }

        td {
          border-top: 1px solid $color-black-light;
          line-height: 24px;
          padding: 6px 0 7px;
          text-align: left;
          vertical-align: top;
        }

        tr td:nth-child(2) {
          text-align: right;
        }

        .action {
          display: none;
        }
      }


    }

    .swal-text {
      color: $color-black-general;
      display: block;
      font-size: 16px;
      max-width: none;
      margin: 0;
      padding: 0 32px;
      width: 100%;
    }

    .swal-footer {
      margin: 0;
      padding: 32px;
    }

    .swal-button-container {
      margin: 0;
    }

    .swal-button {
      border-radius: 28px;
      font-weight: 400;
      font-size: $font-size-base;
      height: $input-size-height-md;
      padding: 0 24px;

      &:focus {
        box-shadow: none;
      }
    }
  }
}

// Свайпбокс
#swipebox-overlay {
  #swipebox-top-bar {
    bottom: 0;
    opacity: 0.75;
    top: auto;

    &.visible-bars {
      -webkit-transform: none;
      transform: none;
    }
  }

  #swipebox-bottom-bar {
    background: none;
    top: 50%;

    &.visible-bars {
      -webkit-transform: none;
      transform: none;
    }
  }

  #swipebox-arrows {
    max-width: none;
  }
}


// Основной контейнер содержимого

main {
  position: relative;
}

// Базовое оформление модуля

$margin-action-top-md: 56px;

section {
  border-top: 8px solid $color-black-light;
  background-clip: border-box;

  @media (min-width: $screen-md) {
    border-top: 0;
    margin: 68px 0;
  }

  h3 {
    margin-bottom: 18px;
  }

  h4 {
    margin-bottom: 2px;
  }

  .topic {
    margin: 0 -16px;
    padding: 27px 16px;

    @media (min-width: $screen-sm) {
      padding-top: 0;
      padding-bottom: 51px;
    }
  }

  .block {
    margin-left: -8px;
    margin-right: -8px;
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      padding: 56px 32px;
    }
    @media (min-width: $screen-md) {
      padding-bottom: 0;
      padding-top: 0;
    }
  }

  .content {
    border-left-width: 0;
    border-right-width: 0;
    margin-left: -16px;
    margin-right: -16px;

    @media (min-width: $screen-sm) {
      border: 0;
      margin-left: -32px;
      margin-right: -32px;
    }

    &.content-item {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;

      @media (min-width: $screen-sm) {
        border: 0;
        padding-bottom: 0;
      }
    }
  }

  .content-item {
    border-top: 1px solid $color-black-light;
    // @todo перенести в модули
    padding: 32px 16px;

    @media (min-width: $screen-sm) {
      border: 1px solid $color-black-light;
      margin-top: 32px;
      padding: 29px 32px 32px;
    }
  }

  .action {
    border-top: 1px solid $color-black-light;

    @media (min-width: $screen-sm) {
      border-top: 0;
    }

    @media (min-width: $screen-md) {
      margin-top: $margin-action-top-md;
    }

    .button {
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
      color: $color-blue-general;
      display: block;
      font-weight: 400;
      padding: 16px 24px;
      text-decoration: none;

      @media (min-width: $screen-sm) {
        padding: 24px;
      }
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
        border: 1px solid $color-black-light;
        border-radius: 38px;
        display: inline-block;
        padding: 9px 24px;

        &:hover {
          border-color: $color-blue-general;
        }

      }
    }

    .buttons {
      text-align: center;
    }

    &.action-general {
      border-top: 0;
    }
  }

  .action-general {
    .button {
	
      background: #2579bf;
    border: 0;
    border-radius: 38px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding: 16px 0;
    text-align: center;
    text-decoration: none;
    width: 100%;
    text-transform: uppercase;
    line-height: 28px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

      @media (min-width: $screen-md) {
       display: block;
    height: 48px;
    padding: 9px 9px;
    width: auto;
	margin-left: 24px;
    
      }

      &:hover {
        background: #33a8f7;
		transition: 0.2s;
      }
    }
    .buttons {
      margin: 32px 0;
      @media (min-width: $screen-sm) {
        margin-bottom: 0;
      }
      @media (min-width: $screen-md) {
        margin-top: 0;
      }
    }
  }

  .action-extended {
    background-color: transparent;
    margin: 0 -16px -32px;

    @media (min-width: $screen-sm) {
      margin: 0 -32px;
      margin-bottom: -56px;
    }
    @media (min-width: $screen-md) {
      margin-bottom: 0;
      margin-top: $margin-action-top-md;
    }

    .button {
      background: transparent;
      border: 0;
      color: $color-blue-light;
      cursor: pointer;
      font-weight: 600;
      height: 56px;
      margin-top: 0;
      width: 100%;
	  text-transform: uppercase;

      @media (min-width: $screen-sm) {
        height: 72px;
      }

      @media (min-width: $screen-md) {
        //background: $color-black-97;
        //border: 1px solid $color-black-light;
		border: 1px solid $color-blue-general;
        color: $color-blue-general;
        height: auto;
        text-align: center;
        padding: 7px 24px;
        width: auto;
      }

      &:hover {
        @media (min-width: $screen-md) {
          //background: $color-black-97;
          border: 1px solid $color-blue-general;
		  color: #FFFFFF;
		  background: $color-blue-general;
		  transition: 0.2s;
        }
      }
    }

    .buttons {
      margin-top: 0;
    }
  }

  .price-block {
    position: relative;
    margin-top: 24px;
	  

    .measure {
      font-size: 50%;
      line-height: 50%;
      padding-left: 4px;

      .icon {
        margin: 0 -3px;
        font-size: 104%;
      }
    }

    .old {
      display: none;
    }

    &.sale {
      .price {
        color: #33bdff;
      }

      .old {
        display: inline;
      }
    }
  }

  .price {
    font-size: 28px;
    font-weight: 700;
    line-height: 24px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

    .old {
      color: $color-black-70;
      font-weight: 300;
      text-decoration: line-through;
    }
  }

  .annotation {
    font-size: 11px;
    font-weight: 300;
    line-height: 24px;
    margin-top: 3px;
  }

  p.lead {
    color: $color-black-30;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
    margin-top: 19px;

    @media (min-width: $screen-sm) {
      font-size: 18px;
      line-height: 24px;
      margin-top: 25px;
    }
    @media (min-width: $screen-md) {
      margin-top: 24px;
      width: 66%;
    }
  }

  .specifications {
   // border: 1px solid $color-black-light;
   // background-color: $color-black-97;
    border-collapse: collapse;
    font-weight: 300;
    margin-top: 24px;
    width: 100%;

    @media (min-width: $screen-md) {
      margin-top: 24px;
    }

    thead {
      display: none;
    }

    tfoot {
      display: none;
    }

    tr {
      &:nth-child(1) {
        td {
          padding-top: 13px;
        }
      }

      &.action {
        cursor: pointer;

        td {
          font-weight: 600;
          padding-top: 14px;
          padding-bottom: 14px;
        }
      }
    }

    td {
      font-size: 11px;
	   @media (min-width: $screen-sm) {
        border-bottom: 0;
		font-size: 14px;
      }
      line-height: 1;
      padding: 0 0 13px;

      @media (min-width: $screen-md) {
        border-bottom: 0;

      }

      &:nth-child(2) {
        text-align: right;
        white-space: nowrap;
        vertical-align: top;
      }
    }

    .action {
      border-top: 0;
    }
  }

  .footnote {
    @media (min-width: $screen-sm) {
      margin-top: 51px;
    }

    .text-body {
      padding-bottom: 32px;

      @media (min-width: $screen-md) {
        padding-bottom: 0;
      }

      h3 {
        margin-top: 25px;

        @media (min-width: $screen-md) {
          margin-top: 49px;
        }
      }

      h4 {
        margin-top: 16px;
        padding-top: 1px;
      }

      ul {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: none;
        margin-top: 16px;
        padding: 0;

        @media (min-width: $screen-sm) {
          font-size: 14px;
          line-height: 1.72;
        }

        & > li {
          padding-left: 24px;
          position: relative;

          &:before {
            content: "—";
            left: 0;
            position: absolute;
          }
        }

        ol, ul {
          margin-top: 0;
        }
      }

      ol {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: decimal;
        margin-top: 16px;
        padding-left: 20px;

        & > li {
          padding-left: 4px;
        }

        ol, ul {
          margin-top: 0;
        }
      }

      p {
        margin-top: 16px;
      }

      & > *:first-child {
        margin-top: 0;
      }
    }
  }

  &.expanded {
    @media (min-width: $screen-md) {
      margin: 0;
      padding-bottom: 68px;
      padding-top: 68px;
    }
  }

  &.filled {
    @media (min-width: $screen-md) {
      margin: 0;
    }
  }
}

// Формы

input {
  border: 1px solid $color-black-input;
  border-radius: 0;
  color: $color-black-general;
  font-size: $control-input-font-size;
  height: $input-size-height;
  outline: none;
  padding: 8px 16px;

  @media (min-width: $screen-sm) {
    font-size: $control-input-font-size-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $control-input-font-size-md;
    height: $input-size-height-md;
  }
  @media (min-width: $screen-lg) {
    font-size: $control-input-font-size-lg;
  }

  &:focus {
    outline: 0;
  }

  &::placeholder {
    color: $color-placeholder-light;
    font-weight: 300;
  }

  &[type=checkbox] {
    height: 13px;
  }
}

textarea {
  appearance: none;
  border: 1px solid $color-black-light;
  border-radius: 0;
  font-size: $control-input-font-size;
  height: $input-size-height * 3;
  outline: none;
  padding: 8px 16px;
  padding-right: $input-size-height;

  @media (min-width: $screen-sm) {
    font-size: $control-input-font-size-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $control-input-font-size-md;
    height: $input-size-height-md * 3;
  }
  @media (min-width: $screen-lg) {
    font-size: $control-input-font-size-lg;
  }

  &:focus {
    outline: 0;
  }

  &::placeholder {
    color: $color-placeholder-light;
    font-weight: 300;
  }
}

.form-group {
  position: relative;

  .form-control {
    width: 100%;
  }

  .form-control-custom {
    background-color: #fff;
    border: 1px solid $color-black-input;
    color: $color-placeholder-light;
    font-size: $control-input-font-size;
    font-weight: 400;
    height: $input-size-height;
    line-height: $input-size-height - 2;
    padding: 0 16px;
    width: 100%;

    @media (min-width: $screen-sm) {
      font-size: $control-input-font-size-sm;
    }
    @media (min-width: $screen-md) {
      font-size: $control-input-font-size-md;
      height: $input-size-height-md;
      line-height: $input-size-height-md - 2;
    }
  }

  .icon {
    color: $color-black-light;
    font-size: $control-icon-font-size;
    line-height: $input-size-height;
    position: absolute;
    left: 0;
    text-align: center;
    width: $input-size-height;
    top: 0;

    @media (min-width: $screen-md) {
      height: $input-size-height-md;
      line-height: $input-size-height-md;
      width: $input-size-height-md;
    }
  }

  .icon-action {
    color: $color-black-70;
    cursor: pointer;
    font-size: $control-icon-font-size;
    left: auto;
    line-height: $input-size-height;
    position: absolute;
    right: 0;
    text-align: center;
    width: $input-size-height;
    top: 0;

    @media (min-width: $screen-md) {
      height: $input-size-height-md;
      line-height: $input-size-height-md;
      width: $input-size-height-md;
    }
  }

}

// Подвал

footer {
  padding-bottom: 45px;
  background: linear-gradient(to bottom, $color-blue-general, #33a8f7);
}

.magick-trap {
  display: none;
  height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100px;

  &.active {
    display: block;
  }
}

.footer-navigation-block {
  margin-bottom: 16px;
  color: #fff;

  @media (min-width: $screen-md) {
    padding: 20px;
  }

  a {
    color: #fff;
    display: block;
    text-decoration: none;

    @media (min-width: $screen-md) {
      display: inline-block;
    }
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    position: relative;
    line-height: 38px;
    border-top: 1px solid transparent;

    @media (min-width: $screen-md) {
      border-top: 0;
    }
  }

  p {
    margin-top: 0;
  }

  .block {

    @media (min-width: $screen-md) {
      margin-left: -8px;
      margin-right: -8px;
      padding: 0 32px;
    }
  }

  .nav-main {
    margin-top: 36px;
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 44px;
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }

      &:hover {
        text-decoration: underline;
      }
    }

    li {
      @media (min-width: $screen-md) {
        border-bottom: 0;
      }
    }
  }

  .nav-second {
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 24px;
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .nav-block {
    border-top: 1px solid transparent;
    margin: 0 8px;

    @media (min-width: $screen-sm) {
      margin: 0 24px;
    }
    @media (min-width: $screen-md) {
      border-top: 0;
      margin: 24px 0 0;
    }

    .nav-title {
      cursor: pointer;
      display: block;
      font-weight: 600;
      line-height: 38px;
      margin-bottom: 0;
      padding: 0 0 1px;
      position: relative;

      @media (min-width: $screen-md) {
        cursor: default;
        padding: 0;
      }

      &:after {
        content: "\e812";
        display: block;
        font-family: "fontello";
        font-size: 10px;
        height: 10px;
        position: absolute;
        right: 15px;
        top: 0;
        width: 10px;

        @media (min-width: $screen-md) {
          display: none;
        }
      }
    }

    .nav-list {
      display: none;

      @media (min-width: $screen-md) {
        margin-bottom: 0;
        margin-top: 9px;
        display: block;
      }

      a {
        display: block;
        font-size: 14px;
        line-height: 39px;
        padding: 0 0 1px;
        font-weight: 400;
        white-space: nowrap;

        @media (min-width: $screen-md) {
          line-height: 24px;
          padding: 0;
        }

        &:hover {
          text-decoration: underline;
        }
      }

      li {
        line-height: 38px;
        border: 0;
      }
    }

    &.active {
      .nav-title:after {
        content: "\e815";
      }

      .nav-list {
        display: block;
      }
    }
  }

  .social {
    margin-top: 24px;
    overflow: hidden;
    padding-left: 8px;

    @media (min-width: $screen-sm) {
      padding-left: 24px;
    }
    @media (min-width: $screen-md) {
      padding-left: 0;
    }

    a {
      border: 1px solid #fff;
      border-radius: 16px;
      color: #fff;
      font-size: 16px;
      line-height: 30px;
      width: 32px;
    }

    .item {
      border: 0;
      display: inline-block;
      margin-right: 5px;
      text-align: center;

      @media (min-width: $screen-md) {
        display: block;
        float: left;
      }
    }
  }

  .solutions {
    .nav-block {
      @media (min-width: $screen-md) {
        padding: 0 16px;
      }
    }
  }

  .phones {
    .nav-block {
      border-bottom: 0;
      @media (min-width: $screen-md) {
        padding-left: 24px;
      }
    }

    .nav-title {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }

  .phone-block {
    margin-top: 23px;

    @media (min-width: $screen-md) {
      margin-top: 9px;
    }
  }

  .phone-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;

    @media (min-width: $screen-md) {
      text-align: initial;
    }
  }

  .footer-logo {
    margin-top: 35px;
    padding-left: 8px;

    @media (min-width: $screen-sm) {
      padding-left: 24px;
    }
    @media (min-width: $screen-md) {
      padding-left: 0;
    }
  }

  .logo {
    height: 48px;
  }

  .copyright {
    color: #fff;
    font-size: 14px;
    margin-top: 16px;
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
      text-align: left;
    }
  }

  .footer-promo {
    font-size: 14px;
    margin-top: 25px;
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
    }

    p {
      border: 1px solid #fff;
      display: inline-block;
      margin-top: 0;
      padding: 8px 16px;

      @media (min-width: $screen-md) {
        text-align: left;
      }
    }
  }

  &.active {
    .nav-section {
      display: block;
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }
}

// Модули - индивидуальные стили

// Список преимуществ
.advantage-list-module {

  .content-list {
    display: flex;
    flex-flow: row wrap;
  }

  .content-item {
    //padding: 30px 16px;

    @media (min-width: $screen-sm) {
      border: 0;
      padding: 8px 32px 24px;
      margin-top: 0;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .image-ratio {
      padding-top: 56px;
    }

    .image {
      height: 56px;
      left: 0;
      position: absolute;
      top: 0;
    }
  }

  .content-description {
    margin-top: 29px;

    @media (min-width: $screen-sm) {
      margin-top: 28px;
    }
  }
}

// Промо-модуль для стартовой
.cover-start-page {
  border-top: 0;

  .content {
    overflow: hidden;
    position: relative;
    margin: 0;

    @media (min-width: $screen-sm) {
      padding-bottom: 0;
    }
  }

  .content-video {
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .image {
    position: absolute;
    height: 100%;

    @media (min-width: $screen-sm) {
      left: 50%;
      margin-left: -496px;
    }
    @media (min-width: $screen-md) {
      margin-left: -696px;
    }
    @media (min-width: $screen-lg) {
      margin-left: -960px;
    }
  }

  .video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;

    @media (min-width: $screen-sm) {
      height: auto;
      width: $screen-md;
    }
    @media (min-width: $screen-md) {
      width: $screen-lg;
    }
    @media (min-width: $screen-lg) {
      width: 100%;
    }
  }

  .color-overlay {
    background-color: rgba(37, 121, 191, 0.2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .text {
    color: #fff;
    font-size: 3vw;
    font-weight: 600;
    height: 100%;
    line-height: 4vw;
    padding-top: 6vw;
    position: absolute;
    user-select: none;
    width: 100%;

    @media (min-width: $screen-sm) {
      font-size: 18.8px;
      line-height: 24px;
      padding-bottom: 56px;
      padding-top: 51px;
    }
    @media (min-width: $screen-md) {
      padding-top: 152px
    }

    .container {
      height: 100%;
      position: relative;
    }

    .logo {
      width: 50vw;

      @media (min-width: $screen-sm) {
        width: 305px;
      }
      @media (min-width: $screen-md) {
        width: 440px;
      }
    }

    .intro {
      margin-top: 3vw;

      @media (min-width: $screen-sm) {
        margin-top: 32px;
      }
      @media (min-width: $screen-md) {
        margin-top: 46px;
      }
    }

    .buttons {
      font-size: 3.9vw;
      line-height: 3;
      overflow: hidden;
      position: absolute;
      bottom: 24px;

      @media (min-width: $screen-sm) {
        bottom: 16px;
        font-size: 14px;
        line-height: 40px;
      }
      @media (min-width: $screen-md) {
        margin-top: 67px;
        position: static;
      }

      a {
        display: block;
        border-radius: 32px;
        color: #fff;
        padding: 0 16px;
        text-decoration: none;
      }

      .yourCity {
        background-color: $color-blue-general;
        float: left;
        white-space: nowrap;

        &:hover {
          background-color: $color-blue-dark;
          transition: background-color .2s ease;
        }
      }

      .selectCity {
        float: left;
        position: relative;

        .icon {
          font-size: 80%;
          margin-left: 3px;
        }
      }
    }
  }

  .image-ratio {
    padding-top: 63%;

    @media (min-width: $screen-sm) {
      padding-top: 416px;
    }
    @media (min-width: $screen-md) {
      padding-top: 744px;
    }
  }

  .city-map {
    background-color: #fff;
    height: 300px;

    @media (min-width: $screen-sm) {
      height: 500px;
    }
  }

}

.citylist-start-page {

  .cities {
    color: $color-blue-general;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    padding: 0;
    margin: 0;

    @media (min-width: $screen-sm) {
      column-count: 2;
    }
    @media (min-width: $screen-md) {
      font-size: 18px;
      column-count: 4;
    }

    li {
      padding: 0;
      line-height: 40px;

      @media (min-width: $screen-md) {
        line-height: 32px;
      }

    }

    a {
      display: block;
      font-weight: 400;
      color: $color-black-general;
      line-height: 40px;
      text-decoration: none;

      @media (min-width: $screen-md) {
        line-height: 32px;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// Промо-модуль на главной города
.cover-page-module {
  border-top: 0;
  position: relative;
  overflow: hidden;
  @media (min-width: $screen-sm) {
    height: 350px;
  }
  @media (min-width: $screen-md) {
    height: 428px;
  }

  .banner-list {
    height: 52.08vw;
    overflow: hidden;
    position: relative;

    @media (min-width: $screen-sm) {
      height: 100%;
    }
  }

  .buttons {
    bottom: 0;
    position: absolute;
    width: 100%;

    .container {
      position: relative;

      @media (min-width: $screen-sm) {
        width: 100%;
      }
      @media (min-width: $screen-md) {
        width: $screen-md;
      }
      @media (min-width: $screen-lg) {
        width: $screen-lg;
      }
    }
  }

  .banner {
    cursor: pointer;
    display: none;
    margin: 0;
    font-size: 0;
    user-select: none;

    @media (min-width: $screen-sm) {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    &.active {
      display: block;
    }

    &:hover {
      .text {
        .button {
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  .content-image {
    margin: 0;
    padding: 0;
    width: 100%;

    .image-position {
      overflow: hidden;
      position: relative;
    }

    .image {
      opacity: 0;

      &.lazyloaded {
        opacity: 1;
      }
    }
  }

  .text {
    color: #fff;
    font-family: "Avenir Next Cyr";
    font-size: 1vw;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    user-select: none;

    .container {
      height: 100%;
      padding: 5vw 16px;

      @media (min-width: $screen-sm) {
        padding: 44px 32px 56px;
      }
      @media (min-width: $screen-md) {
        height: 408px;
        padding: 48px 32px 68px;
      }
    }

    br {
      display: none;
    }

    p {
      display: none;

      &:first-child {
        margin-top: 0;
      }

      &.title {
        font-size: 6em;
        font-weight: 700;
        line-height: 1;
        margin-left: -2px;
        text-transform: uppercase;

        @media (min-width: $screen-sm) {
          font-size: 26px;
          line-height: 32px;
        }
        @media (min-width: $screen-md) {
          font-size: 40px;
          line-height: 48px;
        }
        @media (min-width: $screen-lg) {
          font-size: 44px;
          line-height: 48px;
        }
      }

      &.sub {
        font-size: 3.4em;
        font-weight: 600;
        line-height: 1.3;
        margin-top: .7em;

        @media (min-width: $screen-sm) {
          font-size: 16px;
          line-height: 24px;
        }
        @media (min-width: $screen-md) {
          font-size: 20px;
          line-height: 24px;
          margin-top: 32px;
        }
      }

      &.price {
        display: block;
        font-size: 10em;
        font-weight: 700;
        line-height: 0.91;
        margin-left: -2px;

        @media (min-width: $screen-sm) {
          font-size: 46px;
          line-height: 32px;
          margin-top: 8px;
        }
        @media (min-width: $screen-md) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 18px;
        }
        @media (min-width: $screen-lg) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 24px;
        }

        .measure {
          font-size: 50%;
          margin-left: 8px;

          .icon {
            font-size: 107%;
            margin: 0 -10px;
          }
        }
      }

      &.button {
        border-radius: 28px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #fff;
        padding: 8px 16px;
        position: absolute;
        bottom: 64px;
        width: auto;
      }
    }

    .action {
      border-radius: 4px;
      font-family: "Open Sans";
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #fff;
      padding: 8px 16px;
      position: absolute;
      bottom: 64px;
      width: auto;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);

      }
    }

    .xs {
      @media (max-width: $screen-sm - 1) {
        display: block;
      }
    }

    .sm {
      @media (min-width: $screen-sm) and (max-width: $screen-md - 1) {
        display: block;
      }
    }

    .md {
      @media (min-width: $screen-md) and (max-width: $screen-lg - 1) {
        display: block;
      }
    }

    .lg {
      @media (min-width: $screen-lg) {
        display: block;
      }
    }
  }

  .previous-arrow {
    display: none;
    background: url(/img/arrows.png);
    background-size: cover;
    bottom: 16px;
    cursor: pointer;
    height: 30px;
    opacity: .5;
    position: absolute;
    right: 64px;
    width: 30px;

    @media (min-width: $screen-md) {
      //bottom: 208px;
      right: 98px;
    }
    @media (min-width: $screen-lg) {
      right: 139px;
    }
  }

  .next-arrow {
    display: none;
    background: url(/img/arrows.png) -31px no-repeat;
    background-size: cover;
    bottom: 16px;
    cursor: pointer;
    height: 30px;
    opacity: .5;
    position: absolute;
    right: 20px;
    width: 30px;
    @media (min-width: $screen-md) {
      //bottom: 208px;
      right: 52px;
    }
    @media (min-width: $screen-lg) {
      right: 93px;
    }
  }

  .image {
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;

    @media (min-width: $screen-sm) {
      left: 50%;
      line-height: 0;
      margin-left: -495.5px;
      position: absolute;
      right: auto;
      top: 0;
      width: auto;
    }
    @media (min-width: $screen-md) {
      margin-left: -682.5px;
    }
    @media (min-width: $screen-lg) {
      margin-left: -960px;
    }

    &.lazyloaded {
      opacity: 1;
    }

  }

  .image-ratio {
    padding-top: 52.08%;

    @media (min-width: $screen-sm) {
      padding-top: 350px;
    }
    @media (min-width: $screen-md) {
      padding-top: 600px;
    }
  }

  .link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

// Модуль с ошибкой 404
.error404-module {
  .block {
    padding: 96px;
  }

  .content {
    text-align: center;

    h3 {
      color: $color-blue-general;
      font-size: 96px;
      line-height: 1;
      margin: 0;
    }

    p {
      font-size: 15px;
    }
  }

}

// Вызов замерщика
.measure-specialist-module {
  background-color: $color-black-97;
  border-top: 0;

  h2 {
  @media (min-width: $screen-md) {
    width: 66%;
	}
  }

  .message-time {
    font-weight: 600;

    @media (min-width: $screen-md) {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }
  }

  .nearest-time {
  @media (min-width: $screen-md) {
      position: absolute;
      top: -50%;
      right: 2%;
      min-width: 13em;
    }
  @media (min-width: $screen-lg) {	
	right: 7%;
  } 
  }
  .message, .message-time {
  @media (min-width: $screen-md) {
  float: left;
    clear: both;
	}
  }
  .message-time {
  @media (min-width: $screen-md) {
  margin-left: 6%;
  }
  }
  p.lead {
  @media (min-width: $screen-md) {
     position: absolute;
    top: -70%;
    right: 0.5%;
    width: 10em;
	}
	@media (min-width: $screen-lg) {	
	right: 3%;
  }
  }

  .under-address {
    position: relative;

    @media (min-width: $screen-md) {
      padding-right: 16px;
    }

    .active-suggest {
      background-color: $color-blue-light;
      cursor: pointer;
    }

    .address {
      border-bottom-width: 0;

      @media (min-width: $screen-sm) {
        border-bottom-width: 1px;
        border-right-width: 0;
      }
      @media (min-width: $screen-md) {
        border-right-width: 1px;
      }
    }

    .icon {
      display: none;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-date {
    float: left;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-date {
      display: none;
      color: $color-black-general;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-time {
    float: right;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-time {
      border-left: 0;
      color: $color-black-general;
      display: none;
    }

    .title-disabled {
      border-left: 0;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under {
    background-color: #fff;
    border: 1px solid $color-black-90;
    display: none;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 55px;
    width: 100%;
    z-index: 500;

    @media (min-width: $screen-md) {
      top: 47px;
    }

    li {
      line-height: 24px;
      list-style: none;
      padding: 8px 16px;
      cursor: pointer;
    }

    .reserved {
      color: $color-black-70;
    }
  }

  .buttons {
    margin-top: 32px;

    @media (min-width: $screen-md) {
      margin-bottom: 0;
      margin-top: 0;
    /*  padding-left: 32px; */
    }

    button {
      width: 100%;
    }

    .extended {
      @media (min-width: $screen-sm) {
        display: none;
      }
      @media (min-width: $screen-lg) {
        display: inline;
      }
    }
  }

  .submit {
    .extended {
      @media (min-width: $screen-sm) {
        display: none;
      }
      @media (min-width: $screen-md) {
        display: inline;
      }
    }
  }

  &.active {
    .under-date {
      .title-disabled {
        display: none;
      }

      .title-date {
        display: block;
      }
    }

    .under-time {
      .title-disabled {
        display: none;
      }

      .title-time {
        display: block;
      }
    }
  }

  &:hover {
    opacity: 1;
  }

}

// Виджет Калькулятор
.calculator-widget-module {

  #calculator {
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .content {
    display: block;

    &.content-item {
      @media (min-width: $screen-md) {
        padding-bottom: 32px;
      }
    }
  }

  // Слайдер
  .scrolling {
    padding: 8px 23px 8px 15px;

    @media (min-width: $screen-sm) {
      padding: 0 23px 0 15px;
    }

    .irs {
      height: 30px;
      display: block;
      position: relative;
      user-select: none;

      @media (min-width: $screen-sm) {
        height: 40px;
      }
    }

    .irs-with-grid {
      height: 75px;

      .irs-grid {
        display: block;
      }
    }

    .irs-line {
      background: $color-black-light;
      display: block;
      height: 4px;
      outline: none !important;
      overflow: hidden;
      position: relative;
      top: 13px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-line-left, .irs-line-mid, .irs-line-right {
      position: absolute;
      display: block;
      top: 0;
    }

    .irs-line-left {
      height: 4px;
      left: 0;
      width: 11%;
    }

    .irs-line-mid {
      height: 4px;
      left: 9%;
      width: 82%;
    }

    .irs-line-right {
      height: 4px;
      right: 0;
      width: 11%;
    }

    .irs-bar {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      position: absolute;
      top: 13px;
      width: 0;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-bar-edge {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      top: 13px;
      position: absolute;
      width: 30px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-slider {
      background: #fff;
      border: 4px solid $color-blue-general;
      border-radius: 27px;
      cursor: pointer;
      display: block;
      height: 30px;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 30px;

      @media (min-width: $screen-sm) {
        height: 40px;
        width: 40px;
      }
    }

    .irs-slider.state_hover, .irs-slider:hover {
      background: #fff;
    }

    .irs-min, .irs-max {
      color: $color-black-60;
      font-size: 11px;
      line-height: 1.333;
      text-shadow: none;
      padding: 1px 5px;
      border-radius: 3px;
    }

    .irs-min {
      cursor: default;
      display: block;
      left: -20px;
      position: absolute;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .irs-max {
      cursor: default;
      display: block;
      position: absolute;
      right: -28px;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .lt-ie9 .irs-min, .lt-ie9 .irs-max {
      background: #ccc;
    }

    .irs-from, .irs-to, .irs-single {
      background: $color-blue-general;
      border-radius: 3px;
      color: #fff;
      cursor: default;
      display: block;
      font-size: 14px;
      left: 0;
      line-height: 1.333;
      padding: 1px 5px;
      position: absolute;
      text-shadow: none;
      top: 0;
      white-space: nowrap;
    }

    .irs-single {
      display: none;
    }

    .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
      background: #999;
    }

    .irs-grid {
      position: absolute;
      display: none;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 27px;
    }

    .irs-grid-pol {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 8px;
      background: $color-blue-general;
      opacity: 0.5;
    }

    .irs-grid-pol.small {
      height: 4px;
      background: #999;
    }

    .irs-grid-text {
      color: #99a4ac;
      position: absolute;
      bottom: 5px;
      left: 0;
      white-space: nowrap;
      text-align: center;
      font-size: 9px;
      line-height: 9px;
      padding: 0 3px;
    }

    .lt-ie9 .irs-disable-mask {
      background: #000;
      filter: alpha(opacity=0);
      cursor: not-allowed;
    }

    .irs-disable-mask {
      position: absolute;
      display: block;
      top: 0;
      left: -1%;
      width: 102%;
      height: 100%;
      cursor: default;
      background: rgba(0, 0, 0, 0.0);
      z-index: 2;
    }

    .irs-disabled {
      opacity: 0.4;
    }

    .irs-hidden-input {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      outline: none;
      z-index: -9999;
      background: transparent;
      border: 0;
      border-style: solid;
      border-color: transparent;
    }
  }

  .calculator-area {
    color: $color-blue-general;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 14px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

    @media (min-width: $screen-md) {
      margin-bottom: 0;
      text-align: right;
    }

    .measure {
      font-size: 50%;
      line-height: 1;
      margin-left: 4px;
    }

  }

  .calculator-range {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 14px;
    text-align: right;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

    @media (min-width: $screen-lg) {
      margin-bottom: 0;
      text-align: center;
    }

    .measure {
      font-size: 50%;
      line-height: 50%;
      padding-left: 4px;
    }
  }

  .buttons {
    margin-top: 23px;

    @media (min-width: $screen-sm) {
      margin-top: 56px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
      padding-left: 2px;
    }

    .button {
      width: 100%;
    }
  }
}

// Калькулятор
.calculator-module {

  #calculator {
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .content-list {
    @media (min-width: $screen-md) {
      margin-top: -32px;
    }

    .active:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
      }
    }
  }

  .content-item {
    //padding: 29px 16px;
    display: none;

    @media (min-width: $screen-sm) {
      border: 1px solid $color-black-light;
      margin-top: 32px;
      padding: 29px 32px 32px;
    }
    @media (min-width: $screen-md) {
      padding: 28px 32px 32px;
    }

    &:first-child {
      margin-top: 32px;
    }

    &.active {
      display: block;
    }
  }

  .calculator-block {
    @media (min-width: $screen-md) {
      padding-right: 32px;
    }
  }

  .calculator-content {
    background-color: $color-black-97;
    padding: 24px 16px 32px;

    @media (min-width: $screen-sm) {
      padding: 29px 32px 32px;
    }
  }

  .slider-block {
    margin-top: 16px;
  }

  .area-block, .range-block {
    @media (min-width: $screen-md) {
      padding-top: 24px;
    }
  }

  // Слайдер
  .scrolling {
    padding: 8px 23px 8px 15px;

    @media (min-width: $screen-sm) {
      padding: 0 23px 0 15px;
    }

    .irs {
      height: 30px;
      display: block;
      position: relative;
      user-select: none;

      @media (min-width: $screen-sm) {
        height: 40px;
      }
    }

    .irs-with-grid {
      height: 75px;

      .irs-grid {
        display: block;
      }
    }

    .irs-line {
      background: $color-black-light;
      display: block;
      height: 4px;
      outline: none !important;
      overflow: hidden;
      position: relative;
      top: 13px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-line-left, .irs-line-mid, .irs-line-right {
      position: absolute;
      display: block;
      top: 0;
    }

    .irs-line-left {
      height: 4px;
      left: 0;
      width: 11%;
    }

    .irs-line-mid {
      height: 4px;
      left: 9%;
      width: 82%;
    }

    .irs-line-right {
      height: 4px;
      right: 0;
      width: 11%;
    }

    .irs-bar {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      position: absolute;
      top: 13px;
      width: 0;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-bar-edge {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      top: 13px;
      position: absolute;
      width: 30px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-slider {
      background: #fff;
      border: 4px solid $color-blue-general;
      border-radius: 27px;
      cursor: pointer;
      display: block;
      height: 30px;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 30px;

      @media (min-width: $screen-sm) {
        height: 40px;
        width: 40px;
      }
    }

    .irs-slider.state_hover, .irs-slider:hover {
      background: #fff;
    }

    .irs-min, .irs-max {
      color: $color-black-60;
      font-size: 11px;
      line-height: 1.333;
      text-shadow: none;
      padding: 1px 5px;
      border-radius: 3px;
    }

    .irs-min {
      cursor: default;
      display: block;
      left: -20px;
      position: absolute;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .irs-max {
      cursor: default;
      display: block;
      position: absolute;
      right: -28px;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .lt-ie9 .irs-min, .lt-ie9 .irs-max {
      background: #ccc;
    }

    .irs-from, .irs-to, .irs-single {
      background: $color-blue-general;
      border-radius: 3px;
      color: #fff;
      cursor: default;
      display: block;
      font-size: 14px;
      left: 0;
      line-height: 1.333;
      padding: 1px 5px;
      position: absolute;
      text-shadow: none;
      top: 0;
      white-space: nowrap;
    }

    .irs-single {
      display: none;
    }

    .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
      background: #999;
    }

    .irs-grid {
      position: absolute;
      display: none;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 27px;
    }

    .irs-grid-pol {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 8px;
      background: $color-blue-general;
      opacity: 0.5;
    }

    .irs-grid-pol.small {
      height: 4px;
      background: #999;
    }

    .irs-grid-text {
      color: #99a4ac;
      position: absolute;
      bottom: 5px;
      left: 0;
      white-space: nowrap;
      text-align: center;
      font-size: 9px;
      line-height: 9px;
      padding: 0 3px;
    }

    .lt-ie9 .irs-disable-mask {
      background: #000;
      filter: alpha(opacity=0);
      cursor: not-allowed;
    }

    .irs-disable-mask {
      position: absolute;
      display: block;
      top: 0;
      left: -1%;
      width: 102%;
      height: 100%;
      cursor: default;
      background: rgba(0, 0, 0, 0.0);
      z-index: 2;
    }

    .irs-disabled {
      opacity: 0.4;
    }

    .irs-hidden-input {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      outline: none;
      z-index: -9999;
      background: none;
      border: 0;
      border-style: solid;
      border-color: transparent;
    }
  }

  .calculator-area {
    color: $color-blue-general;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;

    .measure {
      font-size: 50%;
      line-height: 1;
      margin-left: 4px;
    }

  }

  .calculator-range {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    text-align: right;

    .measure {
      font-size: 50%;
      line-height: 50%;
      padding-left: 4px;
    }
  }

  .calculator-options {
    display: flex;
    flex-direction: row;
    margin-top: 25px;

    .radio {
      border: 1px solid $color-black-light;
      border-right-width: 0;
      line-height: 38px;
      user-select: none;

      input {
        position: absolute;
        z-index: -1;
        opacity: 0;

        &:checked + .radio_text {
          margin: -1px 0;
          background-color: $color-blue-general;
          border-top: 1px solid $color-blue-general;
          border-bottom: 1px solid $color-blue-general;
          color: #fff;
        }
      }

      .radio_text {
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        text-align: center;
        width: 100%;
      }

      &:last-child {
        border-right-width: 1px;
      }
    }
  }

  .title-block {
    overflow: hidden;
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .specifications {
    tr {
      &:nth-child(n+4) {
        display: none;
      }

      &.action {
        display: table-row;
      }
    }

    &.active {
      tr {
        display: table-row;

        &.action {
          display: none;
        }
      }
    }
  }

}

// Цены
.prices-module {

  .content {
    @media (min-width: $screen-sm) {
      border: 1px solid $color-black-light;
    }
  }

  .content-item {
    @media (min-width: $screen-sm) {
      border-top-width: 0;
      margin-top: 0;
    }
  }

  .content-item {
    @media (min-width: $screen-md) {
      border-left: 1px solid $color-black-light;
      border-bottom-width: 0;
      border-right-width: 0;
      border-top-width: 0;
      flex: 3 3;
      padding: 33px 32px 24px;
    }

    &:first-child {
      @media (min-width: $screen-md) {
        border-left-width: 0;
      }
    }

    .lead {
      color: $color-black-30;
      display: block;
      font-weight: 400;
      margin-top: 17px;
      width: 100%;

      @media (min-width: $screen-sm) {
        font-size: 18px;
        line-height: 24px;
        margin-top: 24px;
      }
      @media (min-width: $screen-md) {
        margin-top: 28px;
      }
    }
  }

  .promotions {
    bottom: 1px;
    font-size: 0;
    list-style: none;
    //margin: 16px 0 0;
    padding: 0;
    position: absolute;
    right: 0;

    //@media (min-width: $screen-sm) {
      //margin: 0;
    //}

    @media (min-width: $screen-md) {
      margin-top: 24px;
      overflow: hidden;
      position: static;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }

    &:nth-child(n+2) {
      display: none;
      @media (min-width: $screen-sm) {
        display: block;
      }
    }
  }

  .features {
    display: none;

    @media (min-width: $screen-sm) {
      margin-top: 16px;
    }
    @media (min-width: $screen-md) {
      display: block;
      margin-top: 24px;
    }

    ul {
      color: inherit;
      list-style: none;
      margin: 3px 0 0;
      padding: 0;

      @media (min-width: $screen-md) {
        margin-top: 3px;
      }

      li {
        font-size: 11px;
        line-height: 24px;
      }
    }
  }
}

// Раскрытый отзыв
.review-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      height: 544px;
      display: block;
      overflow: hidden;
      padding: 0;
    }
    @media (min-width: $screen-lg) {
      height: 589px;
    }

    &:first-child {
      border-top-width: 1px;
      margin-top: 0;
	//  background-color: $color-black-97;
    }
  }

  .rate {
    float: right;
  }

  .stars {
    color: $color-blue-general;
    font-family: fontello;
    font-size: 14px;
    line-height: 26px;
    overflow: hidden;
	display: none;
    .item {
      float: left;
      width: 16px;
    }
  }

  .date {
    font-size: 20px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
	margin-top: 12px;
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 3px;
  }

  .review-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .review-media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .media-item {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    float: left;
    overflow: hidden;
    position: relative;
    width: 50%;
    @media (min-width: $screen-lg) {
      width: 33.33%;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 57.2%;
      //}
    }

    .player {
      background: url(/img/player-small.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    img {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
    }

    video {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        width: auto;
        height: 100%;
      }
    }

    &:first-child {
      border-top-width: 0;
      width: 100%;
    }

    &:nth-child(n+3) {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    &:nth-child(n+5) {
      @media (min-width: $screen-md) {
        display: none;
      }
      @media (min-width: $screen-lg) {
        display: block;
      }
    }

    &:nth-child(n+7) {
      @media (min-width: $screen-lg) {
        display: none;
      }
    }

    &:last-child {
      display: block;
    }

    &:hover {
      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }
  }

  .review-description {
    order: 3;

    @media (min-width: $screen-md) {
      margin-top: 23px;
      padding: 0 32px;
    }

    .specifications {
      margin-top: 0;

      @media (min-width: $screen-md) {
        margin-top: 9px;
      }

      tr {
        &:nth-child(n+8) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+10) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &.action {
          display: table-row;
		   color: $color-blue-general;
        }
      }

      &.active {
        tr {
          display: table-row;
		 
        }
      }
    }

    .address {
      //display: none;
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
	  margin-top: 20px;

      @media (min-width: $screen-md) {
      //  display: none;
      }
    }

    .client {
      margin-top: 23px;
	  display: none;

      &.active {
        .clip {
          height: auto;
        }

        .comment-title, .pros, .answer {
          display: block;
        }
      }
    }

    .name {
      font-weight: 700;
    }

    .comment {
      cursor: pointer;
    }

    .clip {
      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }

    .comment-title, .pros, .answer {
      display: none;
    }

    .show-more {
      color: #b3b3b3;
      cursor: pointer;

      &:hover {
        color: $color-black-general;
        text-decoration: underline;
      }
    }

  }
}

// Виджет отзывов
.reviews-widget-module {

 .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      height: 544px;
      display: block;
      overflow: hidden;
      padding: 0;
    }
    @media (min-width: $screen-lg) {
      height: 589px;
    }

    &:first-child {
      border-top-width: 1px;
      margin-top: 0;
	//  background-color: $color-black-97;
    }
  }

  .rate {
    float: right;
  }

  .stars {
    color: $color-blue-general;
    font-family: fontello;
    font-size: 14px;
    line-height: 26px;
    overflow: hidden;
	display: none;
    .item {
      float: left;
      width: 16px;
    }
  }

  .date {
    font-size: 20px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
	margin-top: 12px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
	
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 3px;
  }

  .review-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .review-media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .media-item {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    float: left;
    overflow: hidden;
    position: relative;
    width: 50%;
    @media (min-width: $screen-lg) {
      width: 33.33%;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 57.2%;
      //}
    }

    .player {
      background: url(/img/player-small.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    img {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
    }

    video {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        width: auto;
        height: 100%;
      }
    }

    &:first-child {
      border-top-width: 0;
      width: 100%;
    }

    &:nth-child(n+3) {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    &:nth-child(n+5) {
      @media (min-width: $screen-md) {
        display: none;
      }
      @media (min-width: $screen-lg) {
        display: block;
      }
    }

    &:nth-child(n+7) {
      @media (min-width: $screen-lg) {
        display: none;
      }
    }

    &:last-child {
      display: block;
    }

    &:hover {
      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }
  }

  .review-description {
    order: 3;

    @media (min-width: $screen-md) {
      margin-top: 23px;
      padding: 0 32px;
    }

    .specifications {
      margin-top: 0;

      @media (min-width: $screen-md) {
        margin-top: 9px;
      }

      tr {
        &:nth-child(n+8) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+10) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &.action {
          display: table-row;
		   color: $color-blue-general;
        }
      }

      &.active {
        tr {
          display: table-row;
		 
        }
      }
    }

    .address {
      //display: none;
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
	  margin-top: 20px;

      @media (min-width: $screen-md) {
      //  display: none;
      }
    }

    .client {
      margin-top: 23px;
	  display: none;

      &.active {
        .clip {
          height: auto;
        }

        .comment-title, .pros, .answer {
          display: block;
        }
      }
    }

    .name {
      font-weight: 700;
    }

    .comment {
      cursor: pointer;
    }

    .clip {
      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }

    .comment-title, .pros, .answer {
      display: none;
    }

    .show-more {
      color: #b3b3b3;
      cursor: pointer;

      &:hover {
        color: $color-black-general;
        text-decoration: underline;
      }
    }

  }
}

// Виджет списка отзывов
.reviews-list-module {

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {
    @media (min-width: $screen-sm) {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: 0;
      padding: 0;
    }

  }

  .media-item {
    cursor: pointer;
    float: left;
    margin-top: 16px;
    overflow: hidden;
    //padding: 0 16px;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      border-right: 2px solid #fff;
      margin-top: 0;
      padding: 0;
      width: 50%;
    }

    @media (min-width: $screen-md) {
      width: 25%;
    }

    .content-image {
      margin: 0;
      padding: 0;
      position: relative;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        width: 100%;

        @media (min-width: $screen-sm) {
          height: 100%;
          width: auto;
        }

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 192px;
      }
      @media (min-width: $screen-md) {
        padding-top: 139px;
      }
      @media (min-width: $screen-lg) {
        padding-top: 184px;
      }
    }

    .player {
      background: url(/img/player-small.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .caption {
      padding-top: 8px;
      @media (min-width: $screen-sm) {
        padding: 8px 32px 24px;
      }

      .date {
        display: block;
        font-size: 11px;
        line-height: 24px;
        font-weight: 300;

        @media (min-width: $screen-sm) {
          padding: 0;
          text-shadow: none;
        }
      }

      .title {
        font-size: 14px;
        line-height: 24px;

        @media (min-width: $screen-sm) {
          font-weight: 600;
          display: block;
        }
      }

      .price {
        float: right;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;

        @media (min-width: $screen-sm) {
          float: none;
          display: block;
        }
      }

      .measure {
        .icon {
          font-size: 12px;
        }
      }

    }

    &:hover {
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
      }

      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }

    &:first-child {
      border-top-width: 0;
      margin-top: 0;

      @media (min-width: $screen-sm) {
        border-top-width: 2px;
      }
    }
  }
}

// Примеры расчетов
.solution-list-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      display: block;
      overflow: hidden;
      padding: 0;
    }

    &:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
        margin-top: 0;
      }
    }
  }

  .solution-media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .title-block {
    overflow: hidden;

    @media (min-width: $screen-sm) {
      margin-top: 21px;
    }
    @media (min-width: $screen-md) {
      margin-top: 29px;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 63%;
      }
      @media (min-width: $screen-lg) {
        padding-top: $default-ratio;
      }
    }

    img {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
    }
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .solution-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .solution-description {
    order: 3;

    @media (min-width: $screen-md) {
      padding: 0 32px;
    }

    .plan {
      display: none;
    }

    .specifications {
      margin-top: 0;

      @media (min-width: $screen-md) {
        margin-top: 24px;
      }

      tr {
        &:nth-child(n+3) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+5) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &.action {
          display: table-row;
        }
      }

      &.active {
        tr {
          display: table-row;
        }
      }
    }

    .address {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .client {
      font-size: 14px;
      line-height: 1.72;
    }

    .name {
      font-weight: 600;
    }

    .comment {
      font-weight: 300;

      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }
  }
}

// Виджет светильников
.lamp-widget-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      display: block;
      overflow: hidden;
      padding: 0;
    }

    &:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
        margin-top: 0;
      }
    }
  }

  .media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .title-block {
    overflow: hidden;

    @media (min-width: $screen-sm) {
      margin-top: 21px;
    }
    @media (min-width: $screen-md) {
      margin-top: 29px;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 63%;
      }
      @media (min-width: $screen-lg) {
        padding-top: $default-ratio;
      }
    }

    img {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
      @media (min-width: $screen-lg) {
        height: 100%;
        width: auto;
      }

      &:hover {
        transition: all .2s ease;
        filter: brightness(105%);
      }
    }
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .content-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .content-description {
    order: 3;

    @media (min-width: $screen-md) {
      padding: 24px 32px 0;
    }

    .specifications {
      border: 1px solid $color-black-light;
      background-color: $color-black-97;
      border-collapse: collapse;
      margin-top: 24px;
      width: 100%;

      @media (min-width: $screen-md) {
        margin-top: 0;
      }

      tr {

        &:nth-child(n+3) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+5) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &:nth-child(1) {
          td {
            padding-top: 12px;
          }
        }

        &.action {
          cursor: pointer;
          display: table-row;

          td {
            font-weight: 400;
            padding-top: 0;
          }
        }
      }

      td {
        font-size: 11px;
        line-height: 1;
        padding: 0 16px 12px;

        @media (min-width: $screen-md) {
          border-bottom: 0;

        }

        &:nth-child(2) {
          text-align: right;
          white-space: nowrap;
          vertical-align: top;
        }
      }
    }

    .address {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .client {
      font-size: 14px;
      line-height: 1.72;
    }

    .name {
      font-weight: 600;
    }

    .comment {
      font-weight: 300;

      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }
  }
}

// Полный список светильников
.lamp-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      display: block;
      overflow: hidden;
      padding: 0;
    }

    &:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
        margin-top: 0;
      }
    }
  }

  .media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .title-block {
    overflow: hidden;

    @media (min-width: $screen-sm) {
      margin-top: 21px;
    }
    @media (min-width: $screen-md) {
      margin-top: 29px;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 63%;
      }
      @media (min-width: $screen-lg) {
        padding-top: $default-ratio;
      }
    }

    img {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
      @media (min-width: $screen-lg) {
        height: auto;
        width: 100%;
      }
    }
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 8px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
      margin-left: 0;
    }
    @media (min-width: $screen-md) {
      line-height: 40px;
      margin-left: 16px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .content-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .content-description {
    order: 3;

    @media (min-width: $screen-md) {
      padding: 24px 32px 0;
    }

    .specifications {
      border: 1px solid $color-black-light;
      background-color: $color-black-97;
      border-collapse: collapse;
      margin-top: 24px;
      width: 100%;

      @media (min-width: $screen-md) {
        margin-top: 0;
      }

      tr {

        &:nth-child(n+3) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+5) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &:nth-child(1) {
          td {
            padding-top: 12px;
          }
        }

        &.action {
          cursor: pointer;
          display: table-row;

          td {
            font-weight: 400;
            padding-top: 0;
          }
        }
      }

      td {
        font-size: 11px;
        line-height: 1;
        padding: 0 16px 12px;

        @media (min-width: $screen-md) {
          border-bottom: 0;
        }

        &:nth-child(2) {
          text-align: right;
          white-space: nowrap;
          vertical-align: top;
        }
      }
    }

    .address {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .client {
      font-size: 14px;
      line-height: 1.72;
    }

    .name {
      font-weight: 600;
    }

    .comment {
      font-weight: 300;

      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }
  }
}

// Виджет Изображение
.image-module {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-item {
    margin: 0;
  }

  .placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }

  .image {
    filter: blur(50px);
    transform: scale(1);
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;

    &.lazyloaded {
      opacity: 1;
      filter: inherit;
      transform: inherit;
    }
  }

  .video {
    filter: blur(0.5px);
    transform: scale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    &:hover {
      filter: inherit;
      transform: inherit;
    }
  }

  .color-overlay {
    background: rgba(37, 121, 191, .2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .player {
    background: url(/img/player.png) 50% 50% no-repeat;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .ratio {
    padding-top: $default-ratio;
  }
}

// Виджет фотографий
.photo-widget-module {

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
      padding: 0;
    }

    &.once {
      .media-item {
        width: 100%;
      }
    }

    &.twin {
      .media-item {
        width: 100%;

        @media (min-width: $screen-md) {
          width: 50%;
        }
      }
    }
  }

  .media-item {
    border-top: 2px solid #fff;
    float: left;
    margin-top: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      border-right: 2px solid #fff;
      margin-top: 0;
      padding: 0;
      width: 50%;
    }

    @media (min-width: $screen-md) {
      width: 25%;
    }

    .content-image {
      margin: 0;
      padding: 0;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        left: 50%;
        opacity: 0;
        position: absolute;
        top: 0;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        width: 100%;

        @media (min-width: $screen-sm) {
          height: 100%;
          width: auto;
        }

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;
    }

    &:hover {
      .image {
        transition: all .2s ease;
        filter: brightness(105%);
      }
    }

    &:first-child {
      border-top-width: 0;
      margin-top: 0;

      @media (min-width: $screen-sm) {
        border-top-width: 2px;
      }
    }
  }
}

// Фотографии
.photo-module {

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
      padding: 0;
    }
  }

  .media-item {
    border-top: 2px solid #fff;
    float: left;
    margin-top: 16px;
    overflow: hidden;
    //padding: 0 16px;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      border-right: 2px solid #fff;
      margin-top: 0;
      padding: 0;
      width: 50%;
    }

    @media (min-width: $screen-md) {
      width: 25%;
    }

    .content-image {
      margin: 0;
      padding: 0;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;

        @media (min-width: $screen-sm) {
          width: auto;
          height: 100%;
        }

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 192px;
      }
      @media (min-width: $screen-md) {
        padding-top: 139px;
      }
      @media (min-width: $screen-lg) {
        padding-top: 184px;
      }
    }

    &:hover {
      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }

    &:first-child {
      margin-top: 0;
    }
  }
}

// Виджет Видео
.video-widget-module {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-item {
    margin: 0;

    @media (min-width: $screen-sm) {
      padding: 0;
    }

    &:hover {
      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }

      .video {
        filter: brightness(105%);
        transition: all .2s ease;
      }
    }
  }

  .placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }

  .image {
    filter: blur(50px);
    transform: scale(1);
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;

    &.lazyloaded {
      opacity: 1;
      filter: inherit;
      transform: inherit;
    }
  }

  .video {
    filter: blur(0.5px);
    transform: scale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    &:hover {
      filter: inherit;
      transform: inherit;
    }
  }

  iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .color-overlay {
    background: rgba(37, 121, 191, .2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .player {
    background: url(/img/player.png) 50% 50% no-repeat;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .ratio {
    padding-top: $default-ratio;
  }
}

// Список видео
.video-list-module {

  .content-item {
    @media (min-width: $screen-sm) {
      border: 0;
      padding: 0;
    }

    &:hover {
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
      }
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .player {
      background: url(/img/player.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 56.3%;
      //}
      //@media (min-width: $screen-lg) {
      //  padding-top: 57%;
      //}
    }

    .image {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;

      &.lazyloaded {
        opacity: 1;
      }
    }
  }

  .content-description {
    padding-top: 28px;

    @media (min-width: $screen-sm) {
      padding: 28px 32px;
    }
  }
}

// Список ссылок
.link-list-module {

  .content-item {
    position: relative;
    @media (min-width: $screen-sm) {
      border: 0;
      padding: 0;
    }

    .next-link {
      color: $color-blue-general;
      margin-top: 16px;
      text-align: center;
      margin-top: 16px;
      margin-bottom: -16px;

      @media (min-width: $screen-md) {
        margin-bottom: 0;
        text-align: left;
      }

      &:before {
        content: "Подробнее";
      }
    }

    &:hover {
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
      }
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .player {
      background: url(/img/player.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 56.3%;
      //}
      //@media (min-width: $screen-lg) {
      //  padding-top: 57%;
      //}
    }

    .image {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;

      &.lazyloaded {
        opacity: 1;
      }
    }
  }

  .content-description {
    padding-top: 28px;
    position: static;

    @media (min-width: $screen-sm) {
      padding: 28px 32px;
    }
  }

  .content-link {
    color: $color-black-general;
    display: block;
    text-decoration: none;

    &:before {
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}

// Список акций
.announcement-list-module {

  .content-item {
    padding-left: 0;
    padding-right: 0;
  }

  .media-list {
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
      padding: 0;
    }
  }

  .media-item {
    margin-top: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      margin-top: 32px;
      padding: 0;
    }

    .content-image {
      margin: 0;
      padding: 0;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        height: 100%;

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .image-ratio {
      padding-top: 50%;

      @media (min-width: $screen-sm) {
        padding-top: 296px;
      }
      @media (min-width: $screen-md) {
        padding-top: 408px;
      }
    }

    &:first-child {
      margin-top: 0;
    }

    &:hover {
      .image {
        transition: all .2s ease;
        filter: brightness(105%);
      }
    }
  }

  .text {
    color: #fff;
    font-family: "Avenir Next Cyr";
    font-size: 0.9vw;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    user-select: none;

    .container {
      height: 100%;
      padding: 5vw 16px;

      @media (min-width: $screen-sm) {
        padding: 44px 32px 56px;
      }
      @media (min-width: $screen-md) {
        height: 408px;
        padding: 48px 32px 68px;
      }
    }

    br {
      display: none;
    }

    p {
      display: none;

      &:first-child {
        margin-top: 0;
      }

      &.title {
        font-size: 6em;
        font-weight: 700;
        line-height: 1;
        margin-left: -2px;
        text-transform: uppercase;

        @media (min-width: $screen-sm) {
          font-size: 26px;
          line-height: 32px;
        }
        @media (min-width: $screen-md) {
          font-size: 40px;
          line-height: 48px;
        }
        @media (min-width: $screen-lg) {
          font-size: 44px;
          line-height: 48px;
        }
      }

      &.sub {
        font-size: 3.4em;
        font-weight: 600;
        line-height: 1.3;
        margin-top: .7em;

        @media (min-width: $screen-sm) {
          font-size: 16px;
          line-height: 24px;
        }
        @media (min-width: $screen-md) {
          font-size: 20px;
          line-height: 24px;
          margin-top: 32px;
        }
      }

      &.price {
        display: block;
        font-size: 10em;
        font-weight: 700;
        line-height: 0.91;
        margin-left: -2px;

        @media (min-width: $screen-sm) {
          font-size: 46px;
          line-height: 32px;
          margin-top: 8px;
        }
        @media (min-width: $screen-md) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 18px;
        }
        @media (min-width: $screen-lg) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 24px;
        }

        .measure {
          font-size: 50%;
        }
      }

      &.action {
        border-radius: 4px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #fff;
        padding: 8px 16px;
        position: absolute;
        bottom: 64px;
        width: auto;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);

        }
      }
    }

    .action {
      border-radius: 4px;
      font-family: "Open Sans";
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #fff;
      padding: 8px 16px;
      position: absolute;
      bottom: 64px;
      width: auto;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);

      }
    }

    .xs {
      @media (max-width: $screen-sm - 1) {
        display: block;
      }
    }

    .sm {
      @media (min-width: $screen-sm) and (max-width: $screen-md - 1) {
        display: block;
      }
    }

    .md {
      @media (min-width: $screen-md) and (max-width: $screen-lg - 1) {
        display: block;
      }
    }

    .lg {
      @media (min-width: $screen-lg) {
        display: block;
      }
    }
  }

  .link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

}

.announcement-module {

  @media (min-width: $screen-sm) {
    margin-top: 0;
  }

  .content-item {
    @media (min-width: $screen-sm) {
      border: 0;
      padding: 0;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
      padding: 0;
    }

    .image-position {
      position: relative;
      overflow: hidden;
    }

    .image {
      right: 0;
      top: 0;
      position: absolute;
      height: 100%;
    }

    .image-ratio {
      padding-top: 50%;

      @media (min-width: $screen-sm) {
        padding-top: 296px;
      }
      @media (min-width: $screen-md) {
        padding-top: 408px;
      }
    }

    .text {
      color: #fff;
      font-family: "Avenir Next Cyr";
      font-size: 1vw;
      font-weight: 700;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      user-select: none;

      .container {
        height: 100%;
        padding: 5vw 16px;

        @media (min-width: $screen-sm) {
          padding: 44px 32px 56px;
        }
        @media (min-width: $screen-md) {
          height: 408px;
          padding: 48px 32px 68px;
        }
      }

      br {
        display: none;
      }

      p {
        display: none;

        &:first-child {
          margin-top: 0;
        }

        &.title {
          font-size: 6em;
          font-weight: 700;
          line-height: 1;
          margin-left: -2px;
          text-transform: uppercase;

          @media (min-width: $screen-sm) {
            font-size: 26px;
            line-height: 32px;
          }
          @media (min-width: $screen-md) {
            font-size: 40px;
            line-height: 48px;
          }
          @media (min-width: $screen-lg) {
            font-size: 44px;
            line-height: 48px;
          }
        }

        &.sub {
          font-size: 3.4em;
          font-weight: 600;
          line-height: 1.3;
          margin-top: .7em;

          @media (min-width: $screen-sm) {
            font-size: 16px;
            line-height: 24px;
          }
          @media (min-width: $screen-md) {
            font-size: 20px;
            line-height: 24px;
            margin-top: 32px;
          }
        }

        &.price {
          display: block;
          font-size: 10em;
          font-weight: 700;
          line-height: 0.91;
          margin-left: -2px;

          @media (min-width: $screen-sm) {
            font-size: 46px;
            line-height: 32px;
            margin-top: 8px;
          }
          @media (min-width: $screen-md) {
            font-size: 72px;
            line-height: 48px;
            margin-top: 18px;
          }
          @media (min-width: $screen-lg) {
            font-size: 72px;
            line-height: 48px;
            margin-top: 24px;
          }

          .measure {
            font-size: 50%;
          }
        }

        &.action {
          border-radius: 4px;
          font-family: "Open Sans";
          font-size: 14px;
          font-weight: 400;
          border: 1px solid #fff;
          padding: 8px 16px;
          position: absolute;
          bottom: 64px;
          width: auto;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1);

          }
        }
      }

      .action {
        border-radius: 4px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #fff;
        padding: 8px 16px;
        position: absolute;
        bottom: 64px;
        width: auto;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);

        }
      }

      .xs {
        @media (max-width: $screen-sm - 1) {
          display: block;
        }
      }

      .sm {
        @media (min-width: $screen-sm) and (max-width: $screen-md - 1) {
          display: block;
        }
      }

      .md {
        @media (min-width: $screen-md) and (max-width: $screen-lg - 1) {
          display: block;
        }
      }

      .lg {
        @media (min-width: $screen-lg) {
          display: block;
        }
      }
    }
  }

  .content-description {
    @media (min-width: $screen-sm) {
      padding: 0 32px;
    }

    h3 {
      margin-top: 25px;

      @media (min-width: $screen-md) {
        margin-top: 49px;
      }
    }

    h4 {
      margin-top: 16px;
      padding-top: 1px;
    }

    ul {
      font-size: 14px;
      line-height: 1.72;
      list-style-type: none;
      margin-top: 16px;
      padding: 0;

      @media (min-width: $screen-sm) {
        font-size: 14px;
        line-height: 1.72;
      }

      & > li {
        padding-left: 24px;
        position: relative;

        &:before {
          content: "—";
          left: 0;
          position: absolute;
        }
      }

      ol, ul {
        margin-top: 0;
      }
    }

    ol {
      font-size: 14px;
      line-height: 1.72;
      list-style-type: decimal;
      margin-top: 16px;
      padding-left: 20px;

      & > li {
        padding-left: 4px;
      }

      ol, ul {
        margin-top: 0;
      }
    }

    p {
      margin-top: 16px;
    }
  }

  .content-aside {
    margin-top: 23px;

    @media (min-width: $screen-sm) {
      padding: 0 32px;
    }
  }

}

// Текстовое содержимое
.text-module {

  a, a:visited {
    color: $color-blue-general;
    text-decoration: none;
    border-bottom: 1px solid $color-black-90;

    &:hover {
      text-decoration: none;
    }
  }

  h3 {
    margin-top: 25px;

    @media (min-width: $screen-md) {
      margin-top: 49px;
    }
  }

  h4 {
    margin-top: 16px;
    padding-top: 1px;
  }

  ul {
    font-size: 14px;
    line-height: 1.72;
    list-style-type: none;
    margin-top: 16px;
    padding: 0;

    @media (min-width: $screen-sm) {
      font-size: 14px;
      line-height: 1.72;
    }

    & > li {
      padding-left: 24px;
      position: relative;

      &:before {
        content: "—";
        left: 0;
        position: absolute;
      }
    }

    ol, ul {
      margin-top: 0;
    }
  }

  ol {
    font-size: 14px;
    line-height: 1.72;
    list-style-type: decimal;
    margin-top: 16px;
    padding-left: 20px;

    & > li {
      padding-left: 4px;
    }

    ol, ul {
      margin-top: 0;
    }
  }

  p {
    margin-top: 16px;
  }

  .text-body {
    margin-top: -3px;

    @media (min-width: $screen-sm) {
      padding-right: 16px;
    }
    @media (min-width: $screen-md) {
      padding-right: 32px;
    }
    @media (min-width: $screen-lg) {
      padding-right: 64px;
    }

    & > *:first-child {
      margin-top: 0;
    }
  }

  .text-aside {
    padding-top: 8px;

    @media (min-width: $screen-sm) {
      padding-left: 0;
      padding-top: 0;
    }
  }

  .cite {
    font-size: 11px;
    line-height: 1.5;
    margin: 21px 0;
  }
}

// Обратный звонок
.callback-module {
  background-color: $color-black-97;

  .lead {
    display: block;
  }

  .row-controls {
    margin-top: -3px;

    @media (min-width: $screen-sm) {
      margin-top: 0;
    }
  }

  .buttons {
    margin-top: 32px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding-left: 32px;
    }

    button {
      width: 100%;
    }
  }

}

// Обратный звонок
.service-module {
  background-color: $color-black-97;
  border-bottom: 1px solid $color-black-light;
  border-top: 1px solid $color-black-light;

  @media (min-width: $screen-md) {
    margin-bottom: 56px;
  }

  .block {
    padding-bottom: 32px;

    @media (min-width: $screen-sm) {
      padding-bottom: 56px;
    }
    @media (min-width: $screen-md) {
      padding-bottom: 68px;
    }
  }

  .lead {
    display: block;
  }

  .row-controls {
    margin-top: -3px;

    @media (min-width: $screen-sm) {
      margin-top: 0;
    }
  }

  .buttons {
    margin-top: 32px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding-left: 32px;
    }

    button {
      width: 100%;
    }
  }

}

// Карта ссылок
.sitemap-module {

  a {
    color: $color-black-general;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  li {
    font-size: 20px;
    letter-spacing: -.2px;
    line-height: 1.4;
    list-style: none;
    margin-bottom: 10px;

    ul {
      margin-top: 10px;
      margin-bottom: 10px;

      li {
        margin-left: 19px;
        font-size: 16px;
      }

      a {
        color: $color-blue-general;
        margin-bottom: 0;
      }
    }
  }

  ul {
    padding: 0;
    margin: 0;
  }

  .block {
    padding-bottom: 32px;

    @media (min-width: $screen-sm) {
      padding-bottom: 56px;
    }
    @media (min-width: $screen-md) {
      padding-bottom: 68px;
    }
  }
}

// Форма обратной связи
.form-feedback-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    margin-top: 8px;

    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    text-align: center;
  }

}

// Форма вызова замерщика
.form-gager-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    margin-top: 8px;

    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    text-align: center;
  }

  .message-time {
    font-weight: 600;

    @media (min-width: $screen-md) {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }
  }

  .two-fields {
    .under {
      margin-top: 8px;

      @media (min-width: $screen-md) {
        margin-top: 16px;
      }
    }

    &:after {
      content: '';
      clear: both;
      display: block;
    }
  }

  .under-address {
    position: relative;

    .active-suggest {
      background-color: $color-blue-light;
      cursor: pointer;
    }

    .address {
      border-bottom-width: 0;

      @media (min-width: $screen-sm) {
        border-bottom-width: 1px;
        border-right-width: 0;
      }
      @media (min-width: $screen-md) {
        border-right-width: 1px;
      }
    }

    .icon {
      display: none;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-date {
    float: left;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-date {
      display: none;
      color: $color-black-general;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-time {
    float: right;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-time {
      border-left: 0;
      color: $color-black-general;
      display: none;
    }

    .title-disabled {
      border-left: 0;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under {
    background-color: #fff;
    border: 1px solid $color-black-90;
    display: none;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 55px;
    width: 100%;
    z-index: 500;

    @media (min-width: $screen-md) {
      top: 39px;
    }

    li {
      line-height: 24px;
      list-style: none;
      padding: 8px 16px;
      cursor: pointer;
    }

    .reserved {
      color: $color-black-70;
    }
  }

  &.active {
    .under-date {
      .title-disabled {
        display: none;
      }

      .title-date {
        display: block;
      }
    }

    .under-time {
      .title-disabled {
        display: none;
      }

      .title-time {
        display: block;
      }
    }
  }

}

// Форма добавления отзыва
.form-review-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    text-align: center;
  }

}

// Форма доплаты
.form-pay-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    margin-top: 8px;

    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    margin-bottom: 32px;
  }

  .link-item {
    a {
      color: $color-blue-general;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .description {
      display: none;
      margin-bottom: 16px;
    }

    &.active {
      .description {
        display: block;
        @media (min-width: $screen-md) {
          display: none;
        }
      }
    }
  }
}

// Карта с адресами
.map-widget-module {

  .block {
    padding-bottom: 0;
    padding-top: 0;
  }

  .city-map {
    background-color: #fff;
    height: 300px;

    @media (min-width: $screen-sm) {
      height: 590px;
    }
  }

  .map-content {
    position: relative;

    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .map-container {
    position: relative;
  }

  .how-link {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;

      @media (min-width: $screen-md) {
        display: none;
      }

    }
  }

  .address-block {
    display: none;

    @media (min-width: $screen-md) {
      background-color: #fff;
      left: 0;
      max-height: 500px;
      overflow-y: auto;
      padding: 30px 32px;
      position: absolute;
      top: -436px;
      width: 416px;
    }
  }

  .address-list {
    @media (min-width: $screen-md) {
      display: none;
    }

    .address {
      border-bottom: 1px solid $color-black-light;
      padding: 22px 16px;
      position: relative;

      @media (min-width: $screen-sm) {
        padding: 22px 32px;
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }

  .icon {
    margin-left: -3px;
  }

  .metro {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .visit {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    .icon {
      font-size: 13px;
    }

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .phone-link {
    display: inline-block;
    margin: 16px 32px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      margin-right: 0;
      padding: 0 16px;
      position: absolute;
      right: 0;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      margin-right: 32px;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .map-link {
    display: inline-block;
    margin: 16px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      padding: 0 16px;
      position: absolute;
      right: 191px;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .photos {
    overflow: hidden;
    margin-right: -1px;
    margin-top: 16px;

    .image-position {
      font-size: 0;
      line-height: 0;
      position: relative;
    }

    .media-item {
      border-right: 2px solid #fff;
      float: left;
      width: 50%;
      overflow: hidden;

      .image {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
      }

      &:nth-child(n+3) {
        display: none;
      }
    }

    .image-ratio {
      padding-top: $default-ratio;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .plan {
    color: $color-black-general;
    display: block;
    margin-top: 16px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.view {
    .address-block {
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }
}

.map-module {

  .block {
    padding-bottom: 0;
    padding-top: 0;
  }

  .city-map {
    background-color: #fff;
    height: 300px;

    @media (min-width: $screen-sm) {
      height: 500px;
    }
    @media (min-width: $screen-md) {
      height: 670px;
    }
  }

  .map-content {
    position: relative;

    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .address-block {
    display: none;

    @media (min-width: $screen-md) {
      left: 0;
      max-height: 500px;
      overflow-y: auto;
      margin-top: 32px;
      position: absolute;
      top: -600px;
      width: 416px;
    }

    .address {
      background-color: #fff;
    }
  }

  .address-list-link {
    background-color: #fff;
    border-bottom: 1px solid $color-black-light;
    cursor: pointer;
    display: none;
    line-height: 38px;
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      padding: 0 32px;
    }

    .icon {
      font-size: 12px;
      margin-right: 8px;
    }
  }

  .address-list {

    @media (min-width: $screen-md) {
      background-color: #fff;
      display: block;
      max-height: 500px;
      overflow-y: auto;
      position: absolute;
      top: -600px;
      width: 416px;
    }
  }

  .address {
    border-bottom: 1px solid $color-black-light;
    cursor: pointer;
    padding: 22px 16px;
    position: relative;

    @media (min-width: $screen-sm) {
      padding: 22px 32px;
    }

    &:last-child {
      border-bottom: 0;
    }

    &:hover {
      background-color: $color-black-97;
    }
  }

  .icon {
    width: 17px;
    margin-left: -3px;
  }

  .metro {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .visit {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .phone-link {
    display: inline-block;
    margin: 16px 32px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      margin-right: 0;
      padding: 0 16px;
      position: absolute;
      right: 0;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      margin-right: 32px;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .map-link {
    display: inline-block;
    margin: 16px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      padding: 0 16px;
      position: absolute;
      right: 191px;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .photos {
    overflow: hidden;
    margin-right: -1px;
    margin-top: 16px;

    .image-position {
      font-size: 0;
      line-height: 0;
      position: relative;
    }

    .media-item {
      border-right: 2px solid #fff;
      float: left;
      width: 50%;
      overflow: hidden;

      .image {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
      }

      &:nth-child(n+3) {
        display: none;
      }
    }

    .image-ratio {
      padding-top: $default-ratio;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .plan {
    color: $color-black-general;
    display: block;
    margin-top: 16px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.view {

    .address-list-link {
      display: block;
    }

    .address-block {
      display: block;

      &.single {
        .address-list-link {
          display: none;
        }
      }

    }

    .address-list {
      display: none;
    }
  }

}


label{cursor:pointer}

/* === Inputs === */
.input-wrapper{position:relative;display:inline-block;vertical-align:top;}
.input{position:relative;border:2px solid #f2f2f2;background:#f2f2f2;padding:20px 20px 20px 60px;color:#111;font:16px/24px 'Open Sans';width:100%;border-radius:40px;box-sizing:border-box;transition:all 0.2s ease-out 0s;-webkit-appearance:none;}
	.input:hover{background:#fff;box-shadow:inset 0 0 0 2px #f5c401, 0 0 10px rgba(255,255,255,0);}
	.input:focus{background:#fff;box-shadow:inset 0 0 0 2px #f5c401, 0 0 10px #f5c401;}
	.input.si-error, .si-error .input{color:#cb0707 !important;border-color:#cb0707 !important;}
	textarea{resize:none;overflow:hidden;}
	
	.form-icon{position:absolute !important;left:24px;top:24px;width:18px;height:18px;fill:#c3c3c3;pointer-events:none;}
	input:focus + .form-icon{fill:#f5c401;}
		.si-error .form-icon{fill:#cb0707 !important;}
	
	/* Spam check field */
	input[name="name"] {display:none !important;}
	
.submit-wrapper{position:relative;display:inline-block;vertical-align:top;}
.submit{-webkit-appearance:none;cursor:pointer;border:0;position:relative;transition:all 0.2s ease-out 0s;}
.submit:hover{}
.submit:active{}
.submit.disabled{cursor:default;filter:url("data:image/svg+xml;utf8,<svg xmlns=\'../../../../../external.html?link=http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%);}


/*---------------- Styles ----------------*/

*{box-sizing:border-box;}
html,body{overflow-x:hidden}
html{background:#fff;color:#272727;font:14px/24px 'Open Sans', sans-serif;}
body{-webkit-text-size-adjust:100%;}
#global-wrapper{overflow:hidden;position:relative;width:100%;width:100vw !important;}

h1{font:900 90px/100px Akrobat;}
	h1 em{display:block;padding:15px 0;font:36px/42px Akrobat;}
h2{font:900 48px/60px Akrobat;padding:0 0 25px;}
	.after-h2{padding:5px 0;font:20px/30px 'Open Sans'}
h3{font:900 24px/36px Akrobat;padding:0 0 5px;}
h4{}
h5{}
h6{}

p{padding:5px 0}



a{position:relative;color:inherit;text-decoration:none;transition:all 0.2s ease-out 0s;}
a:hover{}
a:active{top:1px;}
	
	.big-button-wrapper{display:inline-block;font:14px/20px 'Open Sans'}
	.button-wrapper{display:inline-block;position:relative;vertical-align:middle;border-radius:100px;margin:15px 0;transform:translateZ(0)}
	.button-wrapper:active{top:2px;}
		.button-wrapper.no-margin{margin:0;}
		.button-wrapper.block{display:block;width:100%;}
	.button{position:relative;display:inline-block;font:900 20px/30px Akrobat;color:#272727;letter-spacing:1px;padding:23px 50px;background:#f8c700;border-radius:100px;box-shadow:inset 0 50px 60px #ffcc00, 0 5px 0 #e1b815;transform:translateZ(0)}
	.button:hover{background:#f9d235;box-shadow:inset 0 50px 60px #ffe065, 0 5px 0 #e1b815}
	.button:active{top:0;background:#e7b901;box-shadow:inset 0 50px 60px #e7b901, 0 3px 0 #d0ab15}
	
	.button-description{text-align:center;padding:10px 0;}
	
		.button.wide{padding-left:70px;padding-right:70px;letter-spacing:2px;}
		
		.button.block{display:block;width:100%;padding-left:20px;padding-right:20px;}
		
		.button.small{padding:17px 40px;font:900 18px/24px Akrobat;}
		
		.button.border{border:2px solid #ffcc00;background:transparent;box-shadow:none;}
		.button.border:hover{background:#ffcc00}
		.button.border:active{background:#e4b600;border-color:#e4b600;}
		
.clear{clear:both;display:block;}
.centered{max-width:1210px;margin:0 auto;position:relative;padding-left:20px !important;padding-right:20px !important;box-sizing:border-box;}

.si-clear{}
	.si-clear:after{display:block;content:'';clear:both;}

.si-justify{display:flex;flex-flow:row wrap;justify-content:space-between;}
	
.buzz-inside:hover .buzz-icon{animation:buzz-out 1 ease-out 1.0s;}
	
.text-align-center{text-align:center;}


#top{position:fixed;top:0;left:0;width:100%;width:100vw;z-index:99;transition:all 0.3s ease-out 0s;}
#top .centered{padding:35px 0;transition:all 0.3s ease-out 0s;}
#top.fixed{background:#fff;box-shadow:0 5px 10px rgba(0,0,0,.2)}
#top.fixed .centered{padding:15px 0;}

	.logo{display:block;font:18px/24px Akrobat;}
	.logo:hover{color:#f5ce34;}
	.logo:active{color:#dcb313;}
		.logo strong{display:block;font:900 24px/24px Akrobat;}
	.si-phone{}
		.si-phone .phone-link{display:inline-block;padding:7px 35px;letter-spacing:1px;font:900 20px/30px Akrobat;}
		.si-phone .phone-link:hover{color:#f5ce34;}
		.si-phone .phone-link:active{color:#dcb313;}
			.si-phone .phone-link:after{display:block;content:'';width:1px;position:absolute;top:0;bottom:0;right:0;background:#e5e4e4;transform:rotate(15deg);pointer-events:none;}
		.si-phone .modal-link{display:inline-block;margin:0 0 0 10px;padding:7px 0;font:900 14px/20px Akrobat;letter-spacing:1px;}
		.si-phone .modal-link:hover{color:#f5ce34;}
		.si-phone .modal-link:active{color:#dcb313;}
			.si-phone .modal-link span.text{border-bottom:1px solid;}
			.phone-icon-wrapper{display:inline-block;vertical-align:middle;position:relative;width:27px;height:27px;border-radius:50%;background:#f5ce2f;margin:-1px 10px 0 0;transition:all 0.2s ease-out 0s;}
			a:hover .phone-icon-wrapper{animation:si-button-pulse 1s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;}
			a:active .phone-icon-wrapper{background:#dcb313;}
				.phone-icon-wrapper:before,.phone-icon-wrapper:after{display:block;content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #f5cd2d;border-radius:50%;}
				.phone-icon-wrapper:before,.phone-icon-wrapper:after{animation:si-waves-pulse 1s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;}
					a:hover .phone-icon-wrapper:before, a:hover .phone-icon-wrapper:after, #top.fixed .phone-icon-wrapper:before, #top.fixed .phone-icon-wrapper:after{animation:none;}
				.phone-icon-wrapper:after{animation-delay:0.3s}
					.phone-icon{position:absolute;top:30%;left:30%;width:40%;height:40%;fill:#272727;}

header{background:#f7f7f7 url(../images/header-bg.jpg) center top no-repeat;}
header .centered{padding:50px 0 40px;}
	.header-content{position:relative;z-index:3;padding:200px 0;}
		.header-button-wrapper{padding:40px 0 0;font:34px/42px Akrobat;}
	.header-image{position:absolute;left:24%;top:0;}
	
#usp{background:#f7f7f7;}
#usp .centered{padding:1px 0;}
	.usp-wrapper{position:relative;margin-bottom:-130px;}
		.usp-col{width:48%;float:left;}
		.usp-col.text-col{float:right;position:relative;z-index:3;font:16px/30px 'Open Sans'}
			.usp-image{float:right;margin:-5% -18% -23% 0;}
			.usp{padding:30px 0 0;}
				.usp-item{position:relative;padding:0 0 0 40px;margin:0 0 20px;font:14px/20px 'Open Sans'}
					.usp-check-wrapper{left:0;top:5px;}
					.check-wrapper{width:27px;height:27px;background:#ffcc00;border-radius:50%;position:absolute;}
					.check-inside:hover .check-wrapper{transition:all 0.5s ease-out 0s;transform:rotateY(360deg);}
						.check-wrapper:before{display:block;content:'';position:absolute;top:33%;left:33%;width:32%;height:20%;border:2px solid #272727;border-width:0 0 2px 2px;transform:rotate(-45deg)}
			
#works{}
#works .centered{padding:15px 0;}
	.tabs-wrapper{padding:0;text-align:center;font-size:0;}
	.tabs{display:inline-block;border-bottom:2px solid #ebebeb;}
		.tab-item{cursor:pointer;display:inline-block;position:relative;margin:0 40px;font:20px/30px Akrobat;padding:10px 0;transition:all 0.2s ease-out 0s;}
			.tab-item:after{display:block;content:'';position:absolute;bottom:-2px;right:0;width:0;height:2px;background:#ffcc00;transition:all 0.3s ease-out 0s;pointer-events:none;}
			.tab-item.active:after{left:0;right:auto;width:100%;}
		.tab-item:first-child{margin-left:0;}
		.tab-item:last-child{margin-right:0;}
			.tab-item:hover{text-shadow:0 0 .1px #000}
			.tab-item:active{color:#000;top:1px;text-shadow:0 0 .1px #fff}
			.tab-item.active{color:#000;top:0;text-shadow:0 0 .1px #000}
	
	.tabs-content{overflow:hidden;transition:all 0.2s ease-out 0s;}
		.tab-content{display:none;}
	
	.single-slider-wrapper{padding:40px 100px;}
	.single-slider{}
		.single-slider-item{border:5px solid #f7f7f7;padding:15px;}
		.single-slider-media-wrapper{flex:0 0 60%;margin:0 40px 0 0;}
		.single-slider-media{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-bottom:-2%;}
			.single-slider-media-item{flex:0 0 32%;margin:0 2% 2% 0;display:block;/* height: 120px; */overflow:hidden;}
			.single-slider-media-item:nth-child(3n+4){margin-right:0;}

a.single-slider-media-item.show-zoom:not(:nth-child(1)) {
    height: 120px;
}
			.single-slider-media-item:first-child{flex:0 0 100%;margin-right:0;}
				.single-slider-media-item-image{width:100%;}
				.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);}
				.photo-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);opacity:0;transition:all 0.3s ease-out 0s;}
					.show-zoom:hover .photo-overlay,.show-zoom.active .photo-overlay{opacity:.8;}
					.show-zoom:active  .photo-overlay{opacity:1;}
			.single-slider-content{padding:0 25px 0 0;flex:1;}
				.single-slider-content-top{padding:30px 0;border-bottom:1px solid #e1e1e1}
					.single-slider-content-top-title{font:24px/36px Akrobat;}
						.single-slider-content-top-title strong{display:block;font:900 30px/42px Akrobat;}
				.single-slider-content-stats{padding:30px 0 10px;border-bottom:1px solid #e1e1e1}
					.single-slider-content-stat{flex:0 0 48%;margin:0 0 20px;color:#ffcc00;font:900 30px/36px Akrobat;}
						.single-slider-content-stat strong{display:block;color:#272727;font:24px/36px Akrobat;padding:0 0 5px;}
				.single-slider-content-text{padding:30px 0 15px;}
			
		.owl-controls{}
			.owl-nav{position:absolute;top:50%;margin-top:-35px;left:0;width:100%;}
				.owl-prev, .owl-next{display:block;background:#f9f7ed;width:70px;height:70px;border-radius:50%;position:absolute;top:0;font-size:0;color:transparent;transition:all 0.2s ease-out 0s;}
				.owl-prev:hover, .owl-next:hover{background:#f8efcd;}
				.owl-prev:active, .owl-next:active{background:#f4e9c1;box-shadow:inset 0 5px 10px rgba(0,0,0,.03)}
					.owl-prev:before, .owl-prev:after, .owl-next:before, .owl-next:after{display:block;content:'';width:25%;height:5px;background:#ffcc00;position:absolute;top:52%;margin-top:-3px;border-radius:10px;transition:all 0.2s ease-out 0s;}
					.owl-prev:hover:before, .owl-prev:hover:after, .owl-next:hover:before, .owl-next:hover:after{background:#ffcc00}
					.owl-prev:before, .owl-prev:after{left:40%;transform-origin:0 50%;}
					.owl-next:before, .owl-next:after{right:38%;transform-origin:100% 50%;}
				.owl-prev{left:-100px;}
					.owl-prev:hover:before, .owl-prev:hover:after{left:37%;}
					.owl-prev:before{transform:rotate(-40deg);}
					.owl-prev:after{margin-top:-5px;transform:rotate(40deg);}
					.owl-prev:hover:before{transform:rotate(-45deg);}
					.owl-prev:hover:after{transform:rotate(45deg);}
					.owl-prev:active:before{transform:rotate(-35deg);}
					.owl-prev:active:after{transform:rotate(35deg);}
				.owl-next{right:-100px;}
					.owl-next:hover:before, .owl-next:hover:after{right:36%;}
					.owl-next:before{margin-top:-5px;transform: rotate(-40deg);}
					.owl-next:after{transform:rotate(40deg);}
					.owl-next:hover:before{transform: rotate(-45deg);}
					.owl-next:hover:after{transform:rotate(45deg);}
					.owl-next:active:before{transform: rotate(-35deg);}
					.owl-next:active:after{transform:rotate(35deg);}
			.owl-dots{text-align:center;margin:15px 0}
				.owl-dot{display:inline-block;margin:0 4px;width:18px;height:18px;padding:4px;background:transparent;border:2px solid #ffcc00;border-radius:50%;transition:all 0.2s ease-out 0s;}
				.owl-dot span{display:block;width:6px;height:6px;border-radius:50%;}
				.owl-dot:hover{}
					.owl-dot:hover span{background:#ffcc00;}
				.owl-dot.active{background:#ffcc00}
					.owl-dot.active span{background:#ffcc00}	
			
			.on-dark-bg .owl-prev, .on-dark-bg .owl-next{background:#efefef;}
			.on-dark-bg .owl-prev:hover, .on-dark-bg .owl-next:hover{background:#f8efcd;}
			.on-dark-bg .owl-prev:active, .on-dark-bg .owl-next:active{background:#f4e9c1;}
			
#types{}
#types .centered{padding:65px 0 100px;}
	.types{padding:30px 0 0;display:flex;flex-flow:row wrap;justify-content:flex-start;}
		.type-item{flex:0 0 23%;margin:0 2.66% 2.66% 0;position:relative;}
		.type-item:nth-child(4n){margin-right:0;}
			.type-image{width:100%;}
			.type-title{position:absolute;bottom:0;left:0;right:0;padding:80px 15px 30px;font:900 24px/36px Akrobat;box-shadow:inset 0 -120px 80px -50px #f7f7f7;text-align:center;}
			
.page-form-block{background:#f8f8f8;background-size:cover;overflow:hidden;}
	#page-form-2{background-image:url(../images/page-form-bg.jpg)}
	#page-form-3{background-image:url(../images/page-form-bg.jpg)}
	#page-form-4{background-image:url(../images/page-form-bg.jpg)}
.page-form-block .centered{padding:170px 0 130px;}
	.page-form-content{position:relative;z-index:3;align-items:flex-start;}
		.page-form-block-left{flex:0 0 48%;position:relative;}
			.question-icon{width:320px;height:490px;fill:#282828;opacity:.1;position:absolute;top:50%;margin-top:-245px;left:40px;fill:url(#opacity-gradient)}
			.page-form-block-title{font:900 48px/60px Akrobat;position:relative;z-index:3;}
			.page-form-block-title.big{font:900 60px/72px Akrobat;}
				.page-form-block-title em{display:block;font:24px/36px 'Open Sans';padding:10px 0 0;}
			.page-usp-wrapper{padding:30px 0 0;}
				.page-usp-title{font:900 24px/36px Akrobat;padding:10px 0 20px;}
				.page-usp{}
					.page-usp-item{position:relative;padding:0 0 0 40px;margin:0 0 20px;font:16px/24px 'Open Sans'}
						.page-usp-check-wrapper{width:18px;height:18px;left:0;top:3px;}
						.page-usp-check-wrapper:before{width:30%;height:14%;}
		.page-form{flex:0 0 40%;}
			.page-form:after{display:block;content:'';position:absolute;top:20px;left:20px;bottom:-20px;right:-20px;background:url(../images/page-form-overlay.jpg);}
		.page-form-inner{position:relative;z-index:2;text-align:center;background:#fff;padding:45px 20px;box-shadow:0 30px 100px rgba(0,0,0,.3)}
		.page-form-inner:before{display:block;content:'';width:94px;height:78px;background:url(../images/page-form-clip.png) no-repeat;position:absolute;left:50%;margin-left:-45px;top:-67px;}
			.page-form-title{font:900 40px/52px Akrobat;padding:0 0 30px;}
				.page-form-title em{display:block;font:30px/42px Akrobat;}
					.page-form-title em.small{font:24px/36px Akrobat;}
			.page-inputs-wrapper{width:80%;margin:0 auto;}
				.page-input-wrapper{margin:0 0 30px;display:block;}
	.page-form-image{position:absolute;left:50%;transform:translateX(-50%)}
		.page-form-image.i-1{top:50%;transform:translate(-48%, -48%);max-width:44%;}
		.page-form-image.i-2{top:50%;transform:translate(-39%, -48%);max-width:54%;}
		.page-form-image.i-3{bottom:0;transform:translateX(-43%);}
	
	.questions-page-form-content{align-items:center;}
	
#reviews{}
#reviews .centered{padding:90px 0;}
	.single-slider-content-social{padding:10px 0 0;}
		.social-link{font:16px/24px 'Open Sans';color:#4d76a1;}
		.social-link:hover{color:#f6c601;}
		.social-link:active{color:#e5b800;}
			.social-link span{border-bottom:1px solid;}
			.social-icon{width:18px;height:18px;fill:#4d76a1;margin:4px 10px 0 0;}
	
#projects{background:#f7f7f7;}
#projects .centered{padding:120px 0 80px;}
	.single-slider-project{align-items:flex-start;}
		.single-slider-project-media{display:block;flex:0 0 48%;box-shadow:0 20px 30px -15px rgba(0,0,0,.3);/* height: 315px; */margin:0 0 30px;}

a.single-slider-project-media.show-zoom {
    /* height: 315px; */
}
	#projects .owl-nav{margin-top:-50px;}
		
#design .owl-carousel .owl-item img{
    height: 480px;
}
#design .centered{padding:0;}
	.design-slider{margin:0;}
	.single-slider-design-media{display:block;}
	
#about{background:#f7f7f7;margin:0 0 125px;}
#about .centered{padding:20px 0 1px;}
	.about{padding:10px 0 0;display:flex;flex-flow:row wrap;justify-content:center;}
		.about-item{font:900 24px/36px Akrobat;margin:0 15px 15px;flex:0 0 370px;}
			.about-image{margin:-5px 15px 0 0;}
	.workers{padding:30px 0 0;margin:0 0 -126px;display:flex;flex-flow:row wrap;justify-content:center;}
		.worker-item{flex:0 0 370px;margin:0 15px 15px;}
			.worker-image{width:100%;}
			.worker-text{background:#fff;border:5px solid #e7e7e7;border-width:0 5px 5px;text-align:center;padding:20px;font:18px/30px 'Open Sans'}
				.worker-text strong{display:block;font:900 24px/36px Akrobat;}
			
#also{}
#also .centered{padding:105px 0 120px;}
	.also{padding:40px 0 0;display:flex;flex-flow:row wrap;justify-content:flex-start;counter-reset:also_counter;}
		.also-item{position:relative;flex:0 0 33.33%;background:#4d4d4d;color:#fff;background:radial-gradient(ellipse at center, #4d4d4d 0%,#1b1b1b 70%);counter-increment:also_counter;}
			.also-item:nth-child(even){color:#272727;background:radial-gradient(ellipse at center, #fae593 0%,#f8df78 70%);}
		.also-item:before{display:block;content:'';padding:77% 0 0;}
		.also-item:after{display:block;content:counter(also_counter, decimal-leading-zero);font:900 100px/100px Akrobat;position:absolute;left:45px;bottom:25px;opacity:.1;}
			.also-image{position:absolute;bottom:0;right:0;z-index:3;}
				.also-image.i-1{width:64%;}
				.also-image.i-2{width:54%;}
				.also-image.i-3{width:57%;}
				.also-image.i-4{width:52%;}
				.also-image.i-5{width:51%;right:2%;}
				.also-image.i-6{width:60%;}
			.also-title{position:absolute;top:45px;left:50px;font:20px/24px Akrobat;z-index:4;}
			
#new{background:url(../images/new-bg.jpg) center top no-repeat;background-size:cover;}
#new .centered{padding:130px 0}
	.new-holder{width:75%;position:relative;z-index:3;}
		.fear-wrapper{padding:30px 0 0;}
		.fear{}
			.fear-item{padding:0 0 0 55px;margin:0 0 20px;flex:0 0 48%;position:relative;font:16px/24px 'Open Sans'}
				.fear-cross-icon{width:40px;height:40px;border:2px solid #ffcc00;border-radius:50%;position:absolute;left:0;top:3px;}
					.fear-cross-icon:before,.fear-cross-icon:after{display:block;content:'';width:40%;height:2px;background:#272727;border-radius:2px;position:absolute;left:30%;top:50%;margin-top:-1px;transition:all 0.2s ease-out 0s;}
					.fear-cross-icon:before{transform:rotate(45deg);} .fear-cross-icon:after{transform:rotate(-45deg);}
	.new-image{position:absolute;bottom:0;left:50%;transform:translateX(-10%)}
					
#faq{}
#faq .centered{padding:100px 0;}
	.faq{padding:50px 0 0;counter-reset:faq_counter;}
		.faq-item{margin:0 0 20px;counter-increment:faq_counter;}
			.faq-title{cursor:pointer;font:700 20px/30px 'Open Sans';padding:20px 0;padding-left:10px; color:#000;transition:all 0.2s ease-out 0s;background: #f8f8f8; border:1px solid #f1f1f1;}
				.faq-title span{display:inline-block;position:relative;}
					.faq-title span:after{display:block;content:'';position:absolute;bottom:-3px;right:0;width:0;height:1px;background:#ffcc00;transition:all 0.3s ease-out 0s;pointer-events:none;}
					.faq-title:hover span:after{left:0;right:auto;width:100%;}
					.faq-title:active span:after{background:#cca300;}
					.faq-title.active span:after{left:0;right:auto;width:100%;background:#272727;}
				.faq-title:before{content:counter(faq_counter, decimal-leading-zero) '. ';}
			.faq-title:hover{color:#000;}
			.faq-title:active{color:#000;}
			.faq-title.active{cursor:default;color:#000;}
			.faq-text{display:none;margin:10px 0 0;padding:30px;background:#f7f7f7;font:16px/24px 'Open Sans'}
	.faq-question{position:absolute;fill:#ececec;}
		.faq-question.q-1{width:90px;height:135px;left:-170px;top:100px;}
		.faq-question.q-2{width:130px;height:235px;left:-270px;top:500px;filter:url(#blur-filter)}
		.faq-question.q-3{width:50px;height:100px;left:-140px;top:1100px;filter:url(#blur-filter-strong)}
		.faq-question.q-4{width:60px;height:130px;left:1140px;top:10px;filter:url(#blur-filter)}
		.faq-question.q-5{width:130px;height:245px;left:1270px;top:400px;filter:url(#blur-filter-strong)}
		.faq-question.q-6{width:90px;height:135px;left:1370px;top:800px;}
	
footer{position:relative;z-index:3;background:#fff;}
footer .centered{padding:40px 0;}
	.footer-creator{flex:0 0 100%;padding:20px 0 0;text-align:center;font:14px/20px 'Open Sans';color:#b1b1b1;}
		.creator-logo{width:130px;height:40px;fill:#fecc00;margin:-4px 0 0;}
		.creator-logo:hover{fill:#222;filter:url(#blur-filter-weak)}
		.creator-logo:active{fill:#000;filter:url(#blur-filter)}




/*---------------- Modals ----------------*/

html.si-lock, html.si-lock2{overflow:hidden !important;}
.fancybox-margin{margin-right:0 !important}

.si-overlay{display:block;background:rgba(0,0,0,.8);position:absolute;top:0;left:0;right:0;bottom:0;z-index:201;opacity:0;visibility:hidden;transition:all 0.4s ease-out 0s;}
	.si-overlay.active{opacity:1;visibility:visible;}
.si-modals-wrapper{display:flex;flex-flow:row wrap;align-items:flex-start;position:fixed;top:0;left:0;right:0;bottom:0;z-index:202;overflow:auto;-webkit-overflow-scrolling:touch;padding:20px;opacity:0;visibility:hidden;transition:all 0.4s ease-out 0s;}
	.si-modals-wrapper.active{opacity:1;visibility:visible;}

.si-modal{display:none;position:relative;background:#fff;padding:50px 20px;flex:0 1 480px;text-align:center;margin:30px auto;transform:scale(0.7);box-shadow:0 25px 30px -15px rgba(0,0,0,.3);box-sizing:border-box;transition:transform 0.5s ease-out 0s;}		
.si-modal.active{transform:scale(1);}
	.modal-form-title{padding:0 0 20px;}		
		.modal-line{}
		.modal-form-title em{display:block;}
	
	.si-modal.left{text-align:left;}
	
	.si-close{display:block;width:30px;height:30px;position:absolute;right:15px;top:15px;z-index:5;}		
	.si-close:active{top:16px;}
		.si-close:before,.si-close:after{display:block;content:'';width:120%;height:4px;background:#fff;border-radius:4px;position:absolute;left:0%;top:50%;margin-top:-2px;transition:all 0.2s ease-out 0s;}
		.si-close:before{transform:rotate(45deg);} .si-close:after{transform:rotate(-45deg);}
			.si-close:hover:before{transform:rotate(135deg);} .si-close:hover:after{transform:rotate(45deg);}
			.si-close:active:before{transform:rotate(135deg);} .si-close:active:after{transform:rotate(45deg);}
		
		.si-close:before,.si-close:after{background:#dddddd;}
		.si-close:hover:before,.si-close:hover:after{background:#ffcc00}
		.si-close:active:before,.si-close:active:after{background:#c9a100}
	
	.si-modal.big{flex:0 1 1170px;padding:0;}
	.big-form-steps{padding:50px 60px;}
		
		.big-steps-final{overflow:hidden;position:relative;background:url(../images/page-form-bg.jpg) no-repeat;background-size:cover;}
			.big-steps-final-title{position:absolute;top:50px;left:50px;font:900 40px/48px Akrobat;text-align:left;z-index:2;}
			.big-steps-final .real-form{position:relative;z-index:3;float:right;width:450px;background:#fff;padding:70px 20px;}
			.big-steps-final-image{position:absolute;left:50%;top:50%;transform:translate(-60%, -28%)}
		
		.big-modal-title{text-align:center;font:900 36px/42px Akrobat;padding:0 0 30px;}
		
		.big-modal-progress{background:#f2f2f2;padding:4px;border-radius:20px;}
			.big-modal-progress-bar{position:relative;background:#fff;height:24px;width:10%;border-radius:20px;font:700 10px/24px 'Open Sans';transition:all 0.3s ease-out 0s;}
				.big-modal-progress-bar .value{position:absolute;position:absolute;left:50%;transform:translateX(-50%)}
		
		.big-modal-steps{padding:30px 0 0;counter-reset:steps_counter;}
			
			.big-modal-step{counter-increment:steps_counter;margin:0 0 40px}
				
				.big-modal-step-title{font:900 24px/36px Akrobat;}
				
				.big-modal-step-variants{padding:30px 0 0;display:flex;flex-flow:row wrap;justify-content:space-between;}
				.big-modal-step-variants.center{justify-content:center;}
				.big-modal-step-variants.inside-6{margin:0 -10px;}
				.big-modal-step-variants.inside-5{margin:0 -10px;}
					.big-modal-step-variant{margin:0 15px 15px;cursor:pointer;position:relative;}
					.big-modal-step-variant:active{top:1px;}
					.big-modal-step-variant.active{top:0px;cursor:pointer;pointer-events:none;}
					.big-modal-step-variant:before{display:block;content:'';position:absolute;top:0;left:0;bottom:0;right:0;border:3px solid #f5c401;opacity:0;transition:all 0.2s ease-out 0s;}
					.big-modal-step-variant:hover:before{opacity:1;}
					.big-modal-step-variant.active:before{opacity:1;border-width:3px !important;}
					.big-modal-step-variant:active:before{opacity:1;border-width:6px}
					.big-modal-step-variant:after{display:block;content:'';position:absolute;top:10px;right:10px;width:20px;height:10px;border:4px solid #f5c401;border-width:0 0 4px 4px;transform:rotate(-45deg);opacity:0;transition:all 0.2s ease-out 0s;}
					.big-modal-step-variant.active:after{opacity:1;}
						.big-modal-step-variant{margin:0 15px 15px;}
						.big-modal-step-variant.width-1-6{margin:0 10px 15px;flex:0 0 14%;}
						.big-modal-step-variant.width-1-5{margin:0 10px 15px;flex:0 0 18%;}
							.big-modal-step-variant-text{text-align:center;font:900 16px/24px Akrobat;padding:10px 10px 15px;border:1px solid #e0e0e0;border-width:0 1px 1px;}
							.big-modal-step-variant-image{width:100%;}
							
						.big-modal-step-variant.dont-know{border:1px solid #e0e0e0;font:900 18px/30px Akrobat;flex-grow:1 !important;}
							.big-modal-step-variant-inner{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:30px 20px;}
								.question-in-circle{width:80px;height:80px;fill:#f5c60b;display:block;margin:0 auto 15px;}
							
				.big-modal-step-labels{padding:30px 0 0;display:flex;flex-flow:row wrap;justify-content:space-between;}
				.big-modal-step-labels.center{justify-content:center;}
				.big-modal-step-labels.inside-6{}
					.big-modal-step-label{display:block;margin:0 15px;min-width:110px;padding:10px 20px;font:900 20px/30px Akrobat}
						.big-modal-step-label.width-1-3{}
					.input.in-modal{padding:20px 30px;text-align:center;margin:0 10px;display:inline-block;width:auto;}
		
		.big-steps-final{display:none;}
		.big-modal-step{display:none;}
			.big-modal-step.active{display:block;}
			
			.big-modal-nav{margin:30px 0;position:relative;align-items:center;}
			.big-modal-nav:before{display:block;content:'';position:absolute;top:50%;margin-top:-1px;left:0;right:0;height:2px;background:#ebebeb}
				.big-modal-button{position:relative;z-index:2;display:inline-block;font:900 18px/24px Akrobat;padding:10px 25px;border-radius:50px;}
				.big-modal-button.disabled{opacity:0;visibility:hidden;}
					.big-modal-button.next{background:#f6c501;color:#272727;box-shadow:inset 0 20px 20px #ffcc00, 0 3px 0 #e1b815;padding-right:35px;}
						.big-modal-button.next:after{display:block;content:'';width:20px;height:20px;position:absolute;top:50%;margin-top:-10px;right:100%;background:#fff;}
					.big-modal-button.next:hover{background:#f9d235;box-shadow:inset 0 20px 20px #ffe065, 0 3px 0 #e1b815}
					.big-modal-button.next:active{background:#e7b901;box-shadow:inset 0 50px 60px #e7b901, 0 2px 0 #d0ab15}
					.big-modal-button.prev{background:#fff;color:#272727;box-shadow:inset 0 0 0 1px #ebebeb;padding-left:35px;}
						.big-modal-button.prev:after{display:block;content:'';width:20px;height:20px;position:absolute;top:50%;margin-top:-10px;left:100%;background:#fff;}
					.big-modal-button.prev:hover{background:#ebebeb;}
					.big-modal-button.prev:active{background:#dbdbdb;}
						.big-modal-button-arrow{width:6px;height:10px;position:absolute;top:50%;margin-top:-5px;fill:#272727;}
							.big-modal-button-arrow.prev{left:20px;}
								a:hover .big-modal-button-arrow.prev{left:13px;}
								a:active .big-modal-button-arrow.prev{left:0;opacity:0;}
							.big-modal-button-arrow.next{right:20px;}
								a:hover .big-modal-button-arrow.next{right:13px;}
								a:active .big-modal-button-arrow.next{right:0;opacity:0;}
						
.si-success-modal{display:none;position:relative;background:#fff;padding:60px 20px;flex:0 1 480px;text-align:center;margin:30px auto;transform:scale(0.7);box-shadow:0 25px 30px -15px rgba(0,0,0,.3);box-sizing:border-box;transition:transform 0.5s ease-out 0s;}		
.si-success-modal.active{transform:scale(1);}
	.si-success-modal-title{}
	.success-time{padding:0 0 20px;}
	
	
	
/*---------------- SI Page Messages ----------------*/

.si-page-message-wrapper{display:flex;align-items:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);opacity:0;visibility:hidden;z-index:-1;transition:all 0.4s ease-out 0s;}
.si-page-message-wrapper.active{opacity:1;visibility:visible;z-index:1000;}
	.si-page-message{display:none;flex:1;background:#f5ce2f;color:#000;box-shadow:0 5px 10px rgba(0,0,0,.2);text-align:center;font-size:24px;line-height:36px;padding:60px 0;overflow:hidden;box-sizing:border-box;}
	.si-page-message-text{opacity:0;transition:all 0.2s ease-out 0s;}
	.si-page-message.active .si-page-message-text{opacity:1;transition:all 0.5s ease-out 0.5s;}


		
/*---------------- SI Forms ----------------*/
.send-form{position:relative;}
.send-form:before{display:block;content:'';position:absolute;top:0;left:0;bottom:0;right:0;z-index:1000;background:transparent;display:none;}
	.send-form.disabled:before{display:block;}
	.send-form.disabled > *{opacity:.3;transition:all 0.2s ease-out 0s;}
		
	.cssload-box-loading{opacity:0;visibility:hidden;z-index:-1;width:49px;height:49px;margin:auto;position:absolute;left:0;right:0;top:0;bottom:0;transition:all 0.3s ease-out 0s;}
		.cssload-box-loading:after,.cssload-box-loading:before{content:'';width:49px;position:absolute;left:0}
		.cssload-box-loading:before{height:5px;background:#000;opacity:.1;top:58px;border-radius:50%;animation:shadow .58s linear infinite;}
		.cssload-box-loading:after{height:49px;background:#f5ce2f;top:0;border-radius:3px;animation:cssload-animate .58s linear infinite;}
			@keyframes cssload-animate{17%{border-bottom-right-radius:3px}25%{transform:translateY(9px) rotate(22.5deg)}50%{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:39px}75%{transform:translateY(9px) rotate(67.5deg)}100%{transform:translateY(0) rotate(90deg)}}
			@keyframes shadow{0%,100%{transform:scale(1,1)}50%{transform:scale(1.2,1)}}

	.send-form.disabled .cssload-box-loading{opacity:1 !important;visibility:visible !important;z-index:20 !important;}
		
/*---------------- NProgress ----------------*/

#nprogress{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;top:0;left:0;right:0;z-index:1031;}
	#nprogress .bar {background:#f5ce2f;position:absolute;top:0;left:0;width:100%;height:3px;z-index:1031;}
		#nprogress .bar:after{display:block;content:'';position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #f5ce2f, 0 0 5px #f5ce2f;opacity:1;transform: rotate(3deg) translate(0px, -4px);}
	#nprogress .spinner{display:block;position:absolute;top:15px;right:35px;z-index:1031;}
		#nprogress .spinner:before {display:block;content:'';width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#f5ce2f;border-left-color:#f5ce2f;border-radius:50%;animation:nprogress-spinner 400ms linear infinite;}
.nprogress-custom-parent{overflow:hidden;position:relative;}

	@keyframes nprogress-spinner{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
	// Цвета

$color-blue-general: #2579bf;
$color-blue-light: #2e93e6;
$color-blue-dark: #1769ad;
$color-blue-txt: #178AEB;

$color-black-general: #333;
$color-black-dark: #000;
$color-black-light: #e6e6e6;
$color-black-input: #cccccc;
$color-black-overlay: rgba(0, 0, 0, .3);
$color-black-20: #333;
$color-black-30: #4d4d4d;
$color-black-60: #999;
$color-black-70: #b3b3b3;
$color-black-90: #e5e5e5;
$color-black-97: #f7f7f7;

$color-placeholder-light: #ccc;

$color-border-light: #ddd;

// Цены

$color-price-lead: $color-black-60;

// Размеры экрана

$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1366px;

// Соотношение в изображдениях и видео
$default-ratio: 56.5%;

// Настройки шрифтов

$font-family-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-size-base: 14px;
$font-line-height: 24px;
$font-size-base-sm: 14px;
$font-size-base-md: 14px;
$font-size-base-lg: 14px;

$h1-font-size: 24px;
$h1-font-line-height: 32px;
$h1-font-size-sm: 36px;
$h1-font-line-height-sm: 40px;
$h1-font-size-md: 48px;
$h1-font-line-height-md: 48px;
$h1-font-size-lg: 52px;
$h1-font-line-height-lg: $h1-font-line-height-md;

$h2-font-size: 26px;
$h2-font-line-height: 28px;
$h2-font-size-sm: 30px;
$h2-font-line-height-sm: 32px;
$h2-font-size-md: 32px;
$h2-font-line-height-md: 34px;
$h2-font-size-lg: 38px;
$h2-font-line-height-lg: 40px;

$h3-font-size: 18px;
$h3-font-line-height: 24px;
$h3-font-size-sm: 20px;
$h3-font-line-height-sm: 24px;
$h3-font-size-md: 20px;
$h3-font-line-height-md: 24px;
$h3-font-size-lg: 20px;
$h3-font-line-height-lg: 24px;

$h4-font-size: 14px;
$h4-font-size-sm: 14px;
$h4-font-size-md: 14px;
$h4-font-size-lg: 14px;

// Параметры формы

$control-input-font-size: 16px;
$control-input-font-size-sm: 16px;
$control-input-font-size-md: 16px;
$control-input-font-size-lg: 16px;

$control-icon-font-size: 16px;

$border-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);

// Размеры различных стандартных элементов

$input-size-height: 56px;
$input-size-height-md: 48px;

// Подключение шрифтов

@font-face {
  font-family: 'Avenir Next Cyr';
  font-style: normal;
  font-weight: 600;
  src: local('Avenir Next Cyr SemiBold'),
  local('AvenirNextCyr-SemiBold'),
  url('/fonts/AvenirNextCyr-SemiBold.woff2') format('woff2'),
  url('/fonts/AvenirNextCyr-SemiBold.woff') format('woff'),
  url('/fonts/AvenirNextCyr-SemiBold.ttf') format('ttf');
}

@font-face {
  font-family: 'Avenir Next Cyr';
  font-style: normal;
  font-weight: 700;
  src: local('Avenir Next Cyr Bold'),
  local('AvenirNextCyr-Bold'),
  url('/fonts/AvenirNextCyr-Bold.woff2') format('woff2'),
  url('/fonts/AvenirNextCyr-Bold.woff') format('woff'),
  url('/fonts/AvenirNextCyr-Bold.ttf') format('ttf');
}

/* @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'),
  local('OpenSans-Light'),
  url('/fonts/OpenSans-Light.woff2') format('woff2'),
  url('/fonts/OpenSans-Light.woff') format('woff'),
  url('/fonts/OpenSans-Light.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'),
  local('OpenSans-Regular'),
  url('/fonts/OpenSans-Regular.woff2') format('woff2'),
  url('/fonts/OpenSans-Regular.woff') format('woff'),
  url('/fonts/OpenSans-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'),
  local('OpenSans-SemiBold'),
  url('/fonts/OpenSans-SemiBold.woff2') format('woff2'),
  url('/fonts/OpenSans-SemiBold.woff') format('woff'),
  url('/fonts/OpenSans-SemiBold.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'),
  local('OpenSans-Bold'),
  url('/fonts/OpenSans-Bold.woff2') format('woff2'),
  url('/fonts/OpenSans-Bold.woff') format('woff'),
  url('/fonts/OpenSans-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'),
  local('OpenSans-Bold'),
  url('/fonts/OpenSans-Bold.woff2') format('woff2'),
  url('/fonts/OpenSans-Bold.woff') format('woff'),
  url('/fonts/OpenSans-Bold.ttf') format('ttf');
} */

@font-face {
  font-family: 'fontello';
  font-style: normal;
  font-weight: 400;
  src: local('fontello'),
  url('/fonts/fontello.woff2') format('woff2'),
  url('/fonts/fontello.woff') format('woff'),
  url('/fonts/fontello.ttf') format('truetype');
}

/* @font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 300;
  src: local('TT Norms Light'),
  local('TTNorms-Light'),
  url('/fonts/TTNorms-Light.woff2') format('woff2'),
  url('/fonts/TTNorms-Light.woff') format('woff'),
  url('/fonts/TTNorms-Light.ttf') format('ttf');
}

@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 400;
  src: local('TT Norms Regular'),
  local('TTNorms-Regular'),
  url('/fonts/TTNorms-Regular.woff2') format('woff2'),
  url('/fonts/TTNorms-Regular.woff') format('woff'),
  url('/fonts/TTNorms-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 500;
  src: local('TT Norms SemiBold'),
  local('TTNorms-Bold'),
  url('/fonts/TTNorms-SemiBold.woff2') format('woff2'),
  url('/fonts/TTNorms-SemiBold.woff') format('woff'),
  url('/fonts/TTNorms-SemiBold.ttf') format('ttf');
}


@font-face {
  font-family: 'TT Norms';
  font-style: normal;
  font-weight: 600;
  src: local('TT Norms Bold'),
  local('TTNorms-Bold'),
  url('/fonts/TTNorms-Bold.woff2') format('woff2'),
  url('/fonts/TTNorms-Bold.woff') format('woff'),
  url('/fonts/TTNorms-Bold.ttf') format('ttf');
} */


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

// Документ

html {
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body {
  background-color: #fff;
  color: $color-black-general;
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: 400;
  line-height: $font-line-height;
  min-width: 320px;

  @media (min-width: $screen-sm) {
    font-size: $font-size-base-sm;
    line-height: 1.72;
  }
  @media (min-width: $screen-md) {
    padding-top: 145px;
    font-size: $font-size-base-md;
  }

  &.first-page {
    padding-top: 0;
  }
}

// Заголовки

h1 {
  font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  font-size: $h1-font-size;
  font-weight: 400;
  line-height: $h1-font-line-height;
  margin: 0;
  padding: 0;

  @media (min-width: $screen-sm) {
    font-size: $h1-font-size-sm;
    line-height: $h1-font-line-height-sm;

  }
  @media (min-width: $screen-md) {
    font-size: $h1-font-size-md;
    line-height: $h1-font-line-height-md;
  }
  @media (min-width: $screen-lg) {
    font-size: $h1-font-size-lg;
    line-height: $h1-font-line-height-lg;
  }
}

h2 {
  font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  font-size: $h2-font-size;
  font-weight: 700;
  line-height: $h2-font-line-height;
  margin: 0;
  padding: 0;

  @media (min-width: $screen-sm) {
    font-size: $h2-font-size-sm;
    line-height: $h2-font-line-height-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $h2-font-size-md;
    width: 66%;
  }
  @media (min-width: $screen-lg) {
    font-size: $h2-font-size-lg;
    line-height: $h2-font-line-height-lg;
  }
}

h3 {
  font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  color: $color-black-dark;
  font-size: $h3-font-size;
  font-weight: 600;
  line-height: $h3-font-line-height;
  margin: 0;
  padding: 0;
  @media (min-width: $screen-sm) {
    font-size: $h3-font-size-sm;
    line-height: $h3-font-line-height-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $h3-font-size-md;
    line-height: $h3-font-line-height-md;
  }
  
  @media (min-width: $screen-lg) {
    left: 336px;
  }
}

h4 {
  color: $color-black-dark;
  font-size: $h4-font-size;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0;

  @media (min-width: $screen-sm) {
    font-size: $h4-font-size-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $h4-font-size-md;
  }
}

figure {
  margin: 0;
}

p {
  margin: 0;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  font-variant: normal;
  text-transform: none;

  line-height: 1em;

  margin-left: .2em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon {
  &.icon-menu:before {
    content: '\f0c9';
  }

  &.icon-mail:before {
    content: '\e800';
  }

  &.icon-star:before {
    content: '\e801';
  }

  &.icon-star-empty:before {
    content: '\e802';
  }

  &.icon-star-half:before {
    content: '\e803';
  }

  &.icon-camera:before {
    content: '\e804';
  }

  &.icon-thumbs-up:before {
    content: '\e805';
  }

  &.icon-videocam:before {
    content: '\e806';
  }

  &.icon-ok:before {
    content: '\e807';
  }

  &.icon-thumbs-down:before {
    content: '\e808';
  }

  &.icon-pencil:before {
    content: '\e809';
  }

  &.icon-cancel:before {
    content: '\e80a';
  }

  &.icon-plus:before {
    content: '\e80b';
  }

  &.icon-location:before {
    content: '\e80c';
  }

  &.icon-phone:before {
    content: '\e80d';
  }

  &.icon-cog:before {
    content: '\e80e';
  }

  &.icon-wrench:before {
    content: '\e80f';
  }

  &.icon-cog-alt:before {
    content: '\e810';
  }

  &.icon-clock:before {
    content: '\e811';
  }

  &.icon-down-open:before {
    content: '\e812';
  }

  &.icon-left-open:before {
    content: '\e813';
  }

  &.icon-right-open:before {
    content: '\e814';
  }

  &.icon-up-open:before {
    content: '\e815';
  }

  &.icon-down-big:before {
    content: '\e816';
  }

  &.icon-left-big:before {
    content: '\e817';
  }

  &.icon-right-big:before {
    content: '\e818';
  }

  &.icon-up-big:before {
    content: '\e819';
  }

  &.icon-play:before {
    content: '\e81a';
  }

  &.icon-leaf:before {
    content: '\e81b';
  }

  &.icon-tint:before {
    content: '\e81c';
  }

  &.icon-credit-card:before {
    content: '\e81d';
  }

  &.icon-truck:before {
    content: '\e81e';
  }

  &.icon-gift:before {
    content: '\e81f';
  }

  &.icon-zoom-in:before {
    content: '\e820';
  }

  &.icon-zoom-out:before {
    content: '\e821';
  }

  &.icon-attention-circled:before {
    content: '\e822';
  }

  &.icon-ok-circled:before {
    content: '\e823';
  }

  &.icon-cancel-circled:before {
    content: '\e824';
  }

  &.icon-plus-circled:before {
    content: '\e825';
  }

  &.icon-help-circled:before {
    content: '\e826';
  }

  &.icon-info-circled:before {
    content: '\e827';
  }

  &.icon-phone-1:before {
    content: '\e828';
  }

  &.icon-clock-1:before {
    content: '\e829';
  }

  &.icon-light-up:before {
    content: '\e82a';
  }

  &.icon-cancel-1:before {
    content: '\e82b';
  }

  &.icon-pencil-1:before {
    content: '\e82c';
  }

  &.icon-cancel-2:before {
    content: '\e82d';
  }

  &.icon-left-1:before {
    content: '\e82e';
  }

  &.icon-right-1:before {
    content: '\e82f';
  }

  &.icon-spin1:before {
    content: '\e830';
  }

  &.icon-spin2:before {
    content: '\e831';
  }

  &.icon-spin3:before {
    content: '\e832';
  }

  &.icon-down-1:before {
    content: '\e833';
  }

  &.icon-spin4:before {
    content: '\e834';
  }

  &.icon-up-1:before {
    content: '\e835';
  }

  &.icon-cancel-3:before {
    content: '\e836';
  }

  &.icon-spin5:before {
    content: '\e838';
  }

  &.icon-spin6:before {
    content: '\e839';
  }

  &.icon-twitter:before {
    content: '\f099';
  }

  &.icon-facebook:before {
    content: '\f09a';
  }

  &.icon-left-circled:before {
    content: '\f0a8';
  }

  &.icon-right-circled:before {
    content: '\f0a9';
  }

  &.icon-up-circled:before {
    content: '\f0aa';
  }

  &.icon-down-circled:before {
    content: '\f0ab';
  }

  &.icon-gplus-squared:before {
    content: '\f0d4';
  }

  &.icon-gplus:before {
    content: '\f0d5';
  }

  &.icon-mail-alt:before {
    content: '\f0e0';
  }

  &.icon-lightbulb:before {
    content: '\f0eb';
  }

  &.icon-doc-text:before {
    content: '\f0f6';
  }

  &.icon-angle-left:before {
    content: '\f104';
  }

  &.icon-angle-right:before {
    content: '\f105';
  }

  &.icon-angle-up:before {
    content: '\f106';
  }

  &.icon-angle-down:before {
    content: '\f107';
  }

  &.icon-desktop:before {
    content: '\f108';
  }

  &.icon-laptop:before {
    content: '\f109';
  }

  &.icon-tablet:before {
    content: '\f10a';
  }

  &.icon-mobile:before {
    content: '\f10b';
  }

  &.icon-circle-empty:before {
    content: '\f10c';
  }

  &.icon-spinner:before {
    content: '\f110';
  }

  &.icon-circle:before {
    content: '\f111';
  }

  &.icon-star-half-alt:before {
    content: '\f123';
  }

  &.icon-direction:before {
    content: '\f124';
  }

  &.icon-info:before {
    content: '\f129';
  }

  &.icon-shield:before {
    content: '\f132';
  }

  &.icon-extinguisher:before {
    content: '\f134';
  }

  &.icon-angle-circled-left:before {
    content: '\f137';
  }

  &.icon-angle-circled-right:before {
    content: '\f138';
  }

  &.icon-angle-circled-up:before {
    content: '\f139';
  }

  &.icon-angle-circled-down:before {
    content: '\f13a';
  }

  &.icon-play-circled:before {
    content: '\f144';
  }

  &.icon-rouble:before {
    content: '\f158';
  }

  &.icon-thumbs-up-alt:before {
    content: '\f164';
  }

  &.icon-thumbs-down-alt:before {
    content: '\f165';
  }

  &.icon-youtube-squared:before {
    content: '\f166';
  }

  &.icon-youtube:before {
    content: '\f167';
  }

  &.icon-youtube-play:before {
    content: '\f16a';
  }

  &.icon-instagram:before {
    content: '\f16d';
  }

  &.icon-down:before {
    content: '\f175';
  }

  &.icon-up:before {
    content: '\f176';
  }

  &.icon-left:before {
    content: '\f177';
  }

  &.icon-right:before {
    content: '\f178';
  }

  &.icon-apple:before {
    content: '\f179';
  }

  &.icon-skype:before {
    content: '\f17e';
  }

  &.icon-vkontakte:before {
    content: '\f189';
  }

  &.icon-google:before {
    content: '\f1a0';
  }

  &.icon-cab:before {
    content: '\f1b9';
  }

  &.icon-paper-plane:before {
    content: '\f1d8';
  }

  &.icon-history:before {
    content: '\f1da';
  }

  &.icon-circle-thin:before {
    content: '\f1db';
  }

  &.icon-cc-visa:before {
    content: '\f1f0';
  }

  &.icon-cc-mastercard:before {
    content: '\f1f1';
  }

  &.icon-cc-paypal:before {
    content: '\f1f4';
  }

  &.icon-bus:before {
    content: '\f207';
  }

  &.icon-diamond:before {
    content: '\f219';
  }

  &.icon-facebook-official:before {
    content: '\f230';
  }

  &.icon-whatsapp:before {
    content: '\f232';
  }

  &.icon-train:before {
    content: '\f238';
  }

  &.icon-subway:before {
    content: '\f239';
  }

  &.icon-mouse-pointer:before {
    content: '\f245';
  }

  &.icon-odnoklassniki:before {
    content: '\f263';
  }

  &.icon-odnoklassniki-square:before {
    content: '\f264';
  }

  &.icon-credit-card-alt:before {
    content: '\f283';
  }

  &.icon-percent:before {
    content: '\f295';
  }

  &.icon-envira:before {
    content: '\f299';
  }

  &.icon-envelope-open:before {
    content: '\f2b6';
  }

  &.icon-envelope-open-o:before {
    content: '\f2b7';
  }

  &.icon-telegram:before {
    content: '\f2c6';
  }

  &.icon-twitter-squared:before {
    content: '\f304';
  }

  &.icon-facebook-squared:before {
    content: '\f308';
  }

  &.animate-spin {
    animation: spin 2s infinite linear;
    display: inline-block;
  }
}

// Шапка

.navigation-bar {
  background-color: #fff;
  border-bottom: 1px solid $color-black-light;

  @media (min-width: $screen-sm) {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 600;
  }
  @media (min-width: $screen-md) {
    position: fixed;
  }

  .block {
    margin-left: -8px;
    margin-right: -8px;
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }
}

.header-geo {
  background: $color-blue-general;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  height: 24px;
  line-height: 24px;
  width: 100%;

  @media (min-width: $screen-sm) {
    padding: 0 24px;
  }

  @media (min-width: $screen-md) {
    padding: 0 32px;
  }

  .container {
    width: 100%;

    @media (min-width: $screen-lg) {
      max-width: 1920px;
    }
  }

  .city {
    float: left;

    .title {
      cursor: pointer;
      display: inline-block;
      position: relative;
      padding-right: 13px;

      &:after {
        content: "\e812";
        display: block;
        font-family: "fontello";
        font-size: 10px;
        height: 10px;
        right: 0;
        position: absolute;
        top: 1px;
        width: 10px;
      }
    }

    &.active {
      .title:after {
        content: "\e815";
      }

      .city-list-block {
        display: block;
      }

      .modal-overlay {
        display: block;
      }
    }
  }

  .modal-overlay {
    background-color: $color-black-overlay;
    display: none;
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    z-index: 300;
  }

  .city-list-block {
    background-color: #fff;
    display: none;
    height: 90vh;
    height: calc(100vh - 32px);
    width: 300px;
    padding: 16px;
    z-index: 500;
    position: absolute;
  }

  .search-block {
    position: relative;

    .search {
      width: 100%;
    }

    .icon {
      color: $color-placeholder-light;
      font-size: 14px;
      line-height: 40px;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: 40px;
    }
  }

  .city-list {
    height: 90%;
    overflow-y: auto;
    padding: 0;

    li {
      font-size: $h3-font-size;
      line-height: 32px;
      padding-left: 8px;

      font-weight: 400;

      a {
        color: $color-black-general;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .mail, .work-time, .payment {
    color: #fff;
    display: none;
    text-decoration: none;

    @media (min-width: $screen-sm) {
      display: block;
      float: right;
      position: relative;
      padding-left: 32px;
    }

    .icon {
      margin-right: 6px;
    }

  }

  .icon {
    font-size: 13px;
    margin-left: -3px;
  }
}

.header-navigation {
  padding: 16px 0;

  @media (min-width: $screen-sm) {
    padding: 24px;
  }
  @media (min-width: $screen-md) {
    padding: 32px;
  }

  .container {
    width: 100%;

    @media (min-width: $screen-lg) {
      max-width: 1920px;
    }
  }

  .logo-link {
    float: left;
    font-size: 0;
    line-height: 0;

    .logo {
      height: 32px;

      @media (min-width: $screen-sm) {
        height: 48px;
      }
      @media (min-width: $screen-md) {
        height: 56px;
      }

    }
  }
}

.header-navigation-block {
  display: none;
  position: relative;

  @media (min-width: $screen-sm) {
    display: block;
    height: 48px;
    margin-right: 60px;
    margin-left: 200px;
  }
  @media (min-width: $screen-md) {
    display: block;
    height: 56px;
    margin-right: 0;
    margin-left: 245px;
  }

  .address-list {
    display: none;
    float: right;
    padding-right: 40px;
    position: relative;

    @media (min-width: $screen-md) {
      top: -1px;
      display: block;
      left: 0;
      position: absolute;
    }

    .list {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .item {
      float: left;
      margin-right: 24px;
      position: relative;

      @media (min-width: $screen-md) {
        &:nth-child(n+4) {
          display: none;
        }
      }
      @media (min-width: $screen-lg) {
        display: block;
        margin-right: 32px;
        // Нам нужно вывести только 4 элемента, остальные скрываем
        &:nth-child(n) {
          display: block;
        }
        &:nth-child(n+6) {
          display: none;
        }
      }
    }

    .item-title {
      color: $color-black-general;
      display: block;
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      text-decoration: none;

      &:before {
        content: "";
        height: 100%;
        position: absolute;
        width: 100%;
      }

      &:hover {
        text-decoration: underline;
      }
    }

    .item-description {
      color: $color-black-70;
      display: block;
      font-size: 10px;
      font-weight: 300;
      line-height: 1;
      margin-top: 5px;
      max-width: 100px;
    }

    .counter {
      display: block;
      float: left;

      .item-title {
        color: $color-blue-general;
      }

      .item-description {
        color: $color-blue-general;
      }
    }

  }

  .general-menu {
    display: none;

    @media (min-width: $screen-md) {
      bottom: -2px;
      display: block;
      position: absolute;
      left: 0;
      line-height: 1;
    }

    .item {
      color: $color-blue-general;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      display: block;
      float: left;
      margin-right: 24px;
      cursor: pointer;
      position: relative;

      &.sub {
        padding-right: 16px;
      }

      &.sub:after {
        color: $color-blue-general;
        font-family: fontello;
        content: "\f107";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 1px;
        right: 0;
      }

      &.active:after {
        content: "\f106";
      }
    }
  }

  .phones-block {
    display: flex;
    flex-direction: column;
    float: right;
    height: 100%;
    justify-content: center;
  }

  .phone-number {
    color: $color-black-general;
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    text-decoration: none;

    @media (min-width: $screen-sm) {
      margin-bottom: 10px;
    }
    @media (min-width: $screen-md) {
      margin-bottom: 18px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .whatsapp-number {
    color: $color-black-general;
    display: block;
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
  }

  .contact-list {
    bottom: 5px;
    display: none;
    position: absolute;
    right: 0;

    @media (min-width: $screen-sm) {
      display: block;
    }

    .item {
      color: $color-blue-general;
      display: block;
      float: right;
      font-family: "Font Awesome 5 Free";
      height: 20px;
      margin-left: 16px;
      position: relative;
      text-decoration: none;
      width: 18px;

      &:before {
        font-size: 17px;
        right: 0;
        position: absolute;
        top: 0;
      }
    }

    .payment:before {
      content: "\f09d";
    }

    .mail:before {
      content: "\f0e0";
    }
  }
}

.mobile-navigation-block {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  float: right;
  height: 100%;
  justify-content: center;

  @media (min-width: $screen-sm) {
    height: 48px;
  }
  @media (min-width: $screen-md) {
    display: none;
  }

  .item {
    cursor: pointer;
    display: block;
    float: right;
    font-size: 9px;
    line-height: 1;
    margin-left: 8px;
    min-width: 32px;
    text-align: center;
    text-decoration: none;

    &:before {
      color: $color-blue-general;
      display: block;
      font-family: "fontello";
      font-size: 24px;
      line-height: 1.2;
      text-align: center;

      @media (min-width: $screen-sm) {
        font-size: 31px;
      }
    }
  }

  .map-link {
    margin-left: 0;

    @media (min-width: $screen-sm) {
      display: none;
    }

    &:before {
      content: "\e80c";
    }
  }

  .whatsapp-link {

    @media (min-width: $screen-sm) {
      display: none;
    }

    &:before {
      content: "\f232";
    }
  }

  .phone-link {
    margin-top: 1px;

    @media (min-width: $screen-sm) {
      display: none;
    }

    &:before {
      content: "\e80d";
    }
  }

  .menu-button {

    &:before {
      content: "\f0c9";
    }
  }
}

.header-navigation-list {

  a {
    color: $color-black-general;
    display: block;
    text-decoration: none;

    @media (min-width: $screen-md) {
      display: inline-block;
    }

    &:hover {
      text-decoration: none;

      @media (min-width: $screen-md) {
        text-decoration: underline;
      }

    }
  }

  p {
    margin-top: 0;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    position: relative;
    line-height: 38px;
    border-top: 1px solid transparent;

    @media (min-width: $screen-md) {
      border-top: 0;
    }
  }

  .block {
    padding: 0 8px;

    @media (min-width: $screen-md) {
      margin-left: -8px;
      margin-right: -8px;
      padding: 0 32px;
    }
  }

  .nav-section {
    display: none;

    @media (min-width: $screen-md) {
      border-top: 1px solid $color-black-light;
      border-bottom: 1px solid $color-black-light;
      display: none;
      padding: 20px;
      margin-bottom: 0;
    }

    &.active {
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }

  .nav-main {
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }
    }

    li {
      @media (min-width: $screen-md) {
        border-bottom: 0;
      }
    }
  }

  .nav-second {
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }
    }
  }

  .nav-block {
    border-top: 1px solid transparent;
    margin: 0 8px;

    @media (min-width: $screen-sm) {
      margin: 0 24px;
    }
    @media (min-width: $screen-md) {
      border-top: 0;
      margin: 0;
    }

    .nav-title {
      cursor: pointer;
      display: block;
      font-weight: 600;
      line-height: 38px;
      margin-bottom: 0;
      padding: 0 0 1px;
      position: relative;

      @media (min-width: $screen-md) {
        cursor: default;
        padding: 0;
      }

      &:after {
        content: "\e812";
        display: block;
        font-family: "fontello";
        font-size: 10px;
        height: 10px;
        position: absolute;
        right: 15px;
        top: 0;
        width: 10px;

        @media (min-width: $screen-md) {
          display: none;
        }
      }
    }

    .nav-list {
      display: none;

      @media (min-width: $screen-md) {
        margin-bottom: 0;
        margin-top: 9px;
        display: block;
      }

      a {
        display: block;
        font-size: 14px;
        font-weight: 400;
        line-height: 39px;
        padding: 0 0 1px;
        white-space: nowrap;

        @media (min-width: $screen-md) {
          display: inline-block;
          line-height: 24px;
          padding: 0;
        }
      }

      li {
        line-height: 1;
        border: 0;
      }
    }

    &.active {
      .nav-title:after {
        content: "\e815";
      }

      .nav-list {
        display: block;
      }
    }
  }

  .nav-section-company {
    .social {
      text-align: center;

      a {
        border: 1px solid $color-blue-light;
        border-radius: 16px;
        color: $color-blue-light;
        font-size: 16px;
        line-height: 30px;
        width: 32px;
      }

      .item {
        display: inline-block;
        margin-right: 5px;
        border: 0;

        @media (min-width: $screen-md) {
          display: block;
          float: left;
        }
      }
    }
  }

  .nav-section-general {
    padding-bottom: 20px;
  }

  .solutions {
    .nav-block {
      @media (min-width: $screen-md) {
        padding: 0 16px;
      }
    }
  }

  .phones {
    .nav-title {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }

  .phone-block {
    @media (min-width: $screen-md) {
      margin-top: 9px;
    }
  }

  .phone-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;

    @media (min-width: $screen-md) {
      text-align: initial;
    }
  }

  &.active {
    .nav-section {
      display: block;
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }
}

.header-page-title {
  background-color: #fff;
  color: $color-black-general;

  //background-color: $color-blue-general;
  //color: #fff;

  //@media (min-width: $screen-sm) {
  //  border-bottom: 1px solid $color-black-light;
  //}

  @media (min-width: $screen-md) {
    margin-bottom: 68px;
  }

  .block {
    padding: 26px 16px 29px;
    margin-left: -8px;
    margin-right: -8px;

    @media (min-width: $screen-sm) {
      padding: 16px 32px 56px;
    }
    @media (min-width: $screen-md) {
      padding: 24px 32px 0;
    }
  }

  .breadcrumbs {
    display: none;
    font-size: 15px;
    font-weight: 400;
    margin: 8px 0;
    padding: 0;

    @media (min-width: $screen-sm) {
      display: block;
      margin: 11px 0 11px 3px;
    }

    a, a:visited {
      color: $color-black-general;
      //color: #fff;
      text-decoration: none;
    }

    li {
      display: inline-block;
      margin-right: 4px;

      &:after {
        content: "/";
      }
    }
  }
}

// Модальное окно
.swal-overlay {
  .swal-modal {
    animation: none;
    border-radius: 0;
    width: 624px;

    .swal-title {
      font-size: 20px;
      line-height: 24px;
      margin: 0;
      padding: 28px 32px 27px;
      text-align: left;
    }

    .swal-content {
      color: $color-black-general;
      display: block;
      font-size: 16px;
      max-width: none;
      margin: 0;
      padding: 0 32px;
      text-align: left;
      width: 100%;

      h4 {
        margin-top: 16px;
        padding-top: 1px;
      }

      ul {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: none;
        margin-top: 16px;
        padding: 0;

        @media (min-width: $screen-sm) {
          font-size: 14px;
          line-height: 1.72;
        }

        li {
          padding-left: 24px;
          position: relative;

          &:before {
            content: "—";
            left: 0;
            position: absolute;
          }
        }
      }

      ol {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: decimal;
        margin-top: 16px;
        padding-left: 20px;

        li {
          padding-left: 4px;
        }
      }

      p {
        margin-top: 16px;
      }

      .plan {
        text-align: center;
      }

      .specifications {
        border-spacing: 0;
        border-collapse: collapse;
        font-size: 14px;
        margin-top: 32px;
        width: 100%;

        thead {
          td {
            border-top: 0;
            font-weight: 600;
            text-align: left;
          }
        }

        tfoot {
          td {
            font-weight: 600;
            text-align: right;
          }

          .measure {
            margin-left: 4px;
          }
        }

        td {
          border-top: 1px solid $color-black-light;
          line-height: 24px;
          padding: 6px 0 7px;
          text-align: left;
          vertical-align: top;
        }

        tr td:nth-child(2) {
          text-align: right;
        }

        .action {
          display: none;
        }
      }


    }

    .swal-text {
      color: $color-black-general;
      display: block;
      font-size: 16px;
      max-width: none;
      margin: 0;
      padding: 0 32px;
      width: 100%;
    }

    .swal-footer {
      margin: 0;
      padding: 32px;
    }

    .swal-button-container {
      margin: 0;
    }

    .swal-button {
      border-radius: 28px;
      font-weight: 400;
      font-size: $font-size-base;
      height: $input-size-height-md;
      padding: 0 24px;

      &:focus {
        box-shadow: none;
      }
    }
  }
}

// Свайпбокс
#swipebox-overlay {
  #swipebox-top-bar {
    bottom: 0;
    opacity: 0.75;
    top: auto;

    &.visible-bars {
      -webkit-transform: none;
      transform: none;
    }
  }

  #swipebox-bottom-bar {
    background: none;
    top: 50%;

    &.visible-bars {
      -webkit-transform: none;
      transform: none;
    }
  }

  #swipebox-arrows {
    max-width: none;
  }
}


// Основной контейнер содержимого

main {
  position: relative;
}

// Базовое оформление модуля

$margin-action-top-md: 56px;

section {
  border-top: 8px solid $color-black-light;
  background-clip: border-box;

  @media (min-width: $screen-md) {
    border-top: 0;
    margin: 68px 0;
  }

  h3 {
    margin-bottom: 18px;
  }

  h4 {
    margin-bottom: 2px;
  }

  .topic {
    margin: 0 -16px;
    padding: 27px 16px;

    @media (min-width: $screen-sm) {
      padding-top: 0;
      padding-bottom: 51px;
    }
  }

  .block {
    margin-left: -8px;
    margin-right: -8px;
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      padding: 56px 32px;
    }
    @media (min-width: $screen-md) {
      padding-bottom: 0;
      padding-top: 0;
    }
  }

  .content {
    border-left-width: 0;
    border-right-width: 0;
    margin-left: -16px;
    margin-right: -16px;

    @media (min-width: $screen-sm) {
      border: 0;
      margin-left: -32px;
      margin-right: -32px;
    }

    &.content-item {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;

      @media (min-width: $screen-sm) {
        border: 0;
        padding-bottom: 0;
      }
    }
  }

  .content-item {
    border-top: 1px solid $color-black-light;
    // @todo перенести в модули
    padding: 32px 16px;

    @media (min-width: $screen-sm) {
      border: 1px solid $color-black-light;
      margin-top: 32px;
      padding: 29px 32px 32px;
    }
  }

  .action {
    border-top: 1px solid $color-black-light;

    @media (min-width: $screen-sm) {
      border-top: 0;
    }

    @media (min-width: $screen-md) {
      margin-top: $margin-action-top-md;
    }

    .button {
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
      color: $color-blue-general;
      display: block;
      font-weight: 400;
      padding: 16px 24px;
      text-decoration: none;

      @media (min-width: $screen-sm) {
        padding: 24px;
      }
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
        border: 1px solid $color-black-light;
        border-radius: 38px;
        display: inline-block;
        padding: 9px 24px;

        &:hover {
          border-color: $color-blue-general;
        }

      }
    }

    .buttons {
      text-align: center;
    }

    &.action-general {
      border-top: 0;
    }
  }

  .action-general {
    .button {
	
      background: #2579bf;
    border: 0;
    border-radius: 38px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding: 16px 0;
    text-align: center;
    text-decoration: none;
    width: 100%;
    text-transform: uppercase;
    line-height: 28px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

      @media (min-width: $screen-md) {
       display: block;
    height: 48px;
    padding: 9px 9px;
    width: auto;
	margin-left: 24px;
    
      }

      &:hover {
        background: #33a8f7;
		transition: 0.2s;
      }
    }
    .buttons {
      margin: 32px 0;
      @media (min-width: $screen-sm) {
        margin-bottom: 0;
      }
      @media (min-width: $screen-md) {
        margin-top: 0;
      }
    }
  }

  .action-extended {
    background-color: transparent;
    margin: 0 -16px -32px;

    @media (min-width: $screen-sm) {
      margin: 0 -32px;
      margin-bottom: -56px;
    }
    @media (min-width: $screen-md) {
      margin-bottom: 0;
      margin-top: $margin-action-top-md;
    }

    .button {
      background: transparent;
      border: 0;
      color: $color-blue-light;
      cursor: pointer;
      font-weight: 600;
      height: 56px;
      margin-top: 0;
      width: 100%;
	  text-transform: uppercase;

      @media (min-width: $screen-sm) {
        height: 72px;
      }

      @media (min-width: $screen-md) {
        //background: $color-black-97;
        //border: 1px solid $color-black-light;
		border: 1px solid $color-blue-general;
        color: $color-blue-general;
        height: auto;
        text-align: center;
        padding: 7px 24px;
        width: auto;
      }

      &:hover {
        @media (min-width: $screen-md) {
          //background: $color-black-97;
          border: 1px solid $color-blue-general;
		  color: #FFFFFF;
		  background: $color-blue-general;
		  transition: 0.2s;
        }
      }
    }

    .buttons {
      margin-top: 0;
    }
  }

  .price-block {
    position: relative;
    margin-top: 24px;
	  

    .measure {
      font-size: 50%;
      line-height: 50%;
      padding-left: 4px;

      .icon {
        margin: 0 -3px;
        font-size: 104%;
      }
    }

    .old {
      display: none;
    }

    &.sale {
      .price {
        color: #33bdff;
      }

      .old {
        display: inline;
      }
    }
  }

  .price {
    font-size: 28px;
    font-weight: 700;
    line-height: 24px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

    .old {
      color: $color-black-70;
      font-weight: 300;
      text-decoration: line-through;
    }
  }

  .annotation {
    font-size: 11px;
    font-weight: 300;
    line-height: 24px;
    margin-top: 3px;
  }

  p.lead {
    color: $color-black-30;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
    margin-top: 19px;

    @media (min-width: $screen-sm) {
      font-size: 18px;
      line-height: 24px;
      margin-top: 25px;
    }
    @media (min-width: $screen-md) {
      margin-top: 24px;
      width: 66%;
    }
  }

  .specifications {
   // border: 1px solid $color-black-light;
   // background-color: $color-black-97;
    border-collapse: collapse;
    font-weight: 300;
    margin-top: 24px;
    width: 100%;

    @media (min-width: $screen-md) {
      margin-top: 24px;
    }

    thead {
      display: none;
    }

    tfoot {
      display: none;
    }

    tr {
      &:nth-child(1) {
        td {
          padding-top: 13px;
        }
      }

      &.action {
        cursor: pointer;

        td {
          font-weight: 600;
          padding-top: 14px;
          padding-bottom: 14px;
        }
      }
    }

    td {
      font-size: 11px;
	   @media (min-width: $screen-sm) {
        border-bottom: 0;
		font-size: 14px;
      }
      line-height: 1;
      padding: 0 0 13px;

      @media (min-width: $screen-md) {
        border-bottom: 0;

      }

      &:nth-child(2) {
        text-align: right;
        white-space: nowrap;
        vertical-align: top;
      }
    }

    .action {
      border-top: 0;
    }
  }

  .footnote {
    @media (min-width: $screen-sm) {
      margin-top: 51px;
    }

    .text-body {
      padding-bottom: 32px;

      @media (min-width: $screen-md) {
        padding-bottom: 0;
      }

      h3 {
        margin-top: 25px;

        @media (min-width: $screen-md) {
          margin-top: 49px;
        }
      }

      h4 {
        margin-top: 16px;
        padding-top: 1px;
      }

      ul {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: none;
        margin-top: 16px;
        padding: 0;

        @media (min-width: $screen-sm) {
          font-size: 14px;
          line-height: 1.72;
        }

        & > li {
          padding-left: 24px;
          position: relative;

          &:before {
            content: "—";
            left: 0;
            position: absolute;
          }
        }

        ol, ul {
          margin-top: 0;
        }
      }

      ol {
        font-size: 14px;
        line-height: 1.72;
        list-style-type: decimal;
        margin-top: 16px;
        padding-left: 20px;

        & > li {
          padding-left: 4px;
        }

        ol, ul {
          margin-top: 0;
        }
      }

      p {
        margin-top: 16px;
      }

      & > *:first-child {
        margin-top: 0;
      }
    }
  }

  &.expanded {
    @media (min-width: $screen-md) {
      margin: 0;
      padding-bottom: 68px;
      padding-top: 68px;
    }
  }

  &.filled {
    @media (min-width: $screen-md) {
      margin: 0;
    }
  }
}

// Формы

input {
  border: 1px solid $color-black-input;
  border-radius: 0;
  color: $color-black-general;
  font-size: $control-input-font-size;
  height: $input-size-height;
  outline: none;
  padding: 8px 16px;

  @media (min-width: $screen-sm) {
    font-size: $control-input-font-size-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $control-input-font-size-md;
    height: $input-size-height-md;
  }
  @media (min-width: $screen-lg) {
    font-size: $control-input-font-size-lg;
  }

  &:focus {
    outline: 0;
  }

  &::placeholder {
    color: $color-placeholder-light;
    font-weight: 300;
  }

  &[type=checkbox] {
    height: 13px;
  }
}

textarea {
  appearance: none;
  border: 1px solid $color-black-light;
  border-radius: 0;
  font-size: $control-input-font-size;
  height: $input-size-height * 3;
  outline: none;
  padding: 8px 16px;
  padding-right: $input-size-height;

  @media (min-width: $screen-sm) {
    font-size: $control-input-font-size-sm;
  }
  @media (min-width: $screen-md) {
    font-size: $control-input-font-size-md;
    height: $input-size-height-md * 3;
  }
  @media (min-width: $screen-lg) {
    font-size: $control-input-font-size-lg;
  }

  &:focus {
    outline: 0;
  }

  &::placeholder {
    color: $color-placeholder-light;
    font-weight: 300;
  }
}

.form-group {
  position: relative;

  .form-control {
    width: 100%;
  }

  .form-control-custom {
    background-color: #fff;
    border: 1px solid $color-black-input;
    color: $color-placeholder-light;
    font-size: $control-input-font-size;
    font-weight: 400;
    height: $input-size-height;
    line-height: $input-size-height - 2;
    padding: 0 16px;
    width: 100%;

    @media (min-width: $screen-sm) {
      font-size: $control-input-font-size-sm;
    }
    @media (min-width: $screen-md) {
      font-size: $control-input-font-size-md;
      height: $input-size-height-md;
      line-height: $input-size-height-md - 2;
    }
  }

  .icon {
    color: $color-black-light;
    font-size: $control-icon-font-size;
    line-height: $input-size-height;
    position: absolute;
    left: 0;
    text-align: center;
    width: $input-size-height;
    top: 0;

    @media (min-width: $screen-md) {
      height: $input-size-height-md;
      line-height: $input-size-height-md;
      width: $input-size-height-md;
    }
  }

  .icon-action {
    color: $color-black-70;
    cursor: pointer;
    font-size: $control-icon-font-size;
    left: auto;
    line-height: $input-size-height;
    position: absolute;
    right: 0;
    text-align: center;
    width: $input-size-height;
    top: 0;

    @media (min-width: $screen-md) {
      height: $input-size-height-md;
      line-height: $input-size-height-md;
      width: $input-size-height-md;
    }
  }

}

// Подвал

footer {
  padding-bottom: 45px;
  background: linear-gradient(to bottom, $color-blue-general, #33a8f7);
}

.magick-trap {
  display: none;
  height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100px;

  &.active {
    display: block;
  }
}

.footer-navigation-block {
  margin-bottom: 16px;
  color: #fff;

  @media (min-width: $screen-md) {
    padding: 20px;
  }

  a {
    color: #fff;
    display: block;
    text-decoration: none;

    @media (min-width: $screen-md) {
      display: inline-block;
    }
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    position: relative;
    line-height: 38px;
    border-top: 1px solid transparent;

    @media (min-width: $screen-md) {
      border-top: 0;
    }
  }

  p {
    margin-top: 0;
  }

  .block {

    @media (min-width: $screen-md) {
      margin-left: -8px;
      margin-right: -8px;
      padding: 0 32px;
    }
  }

  .nav-main {
    margin-top: 36px;
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 44px;
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }

      &:hover {
        text-decoration: underline;
      }
    }

    li {
      @media (min-width: $screen-md) {
        border-bottom: 0;
      }
    }
  }

  .nav-second {
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 24px;
      padding: 0;
    }

    a {
      font-weight: 600;
      padding: 0 0 1px;

      @media (min-width: $screen-md) {
        padding: 0 0 2px;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .nav-block {
    border-top: 1px solid transparent;
    margin: 0 8px;

    @media (min-width: $screen-sm) {
      margin: 0 24px;
    }
    @media (min-width: $screen-md) {
      border-top: 0;
      margin: 24px 0 0;
    }

    .nav-title {
      cursor: pointer;
      display: block;
      font-weight: 600;
      line-height: 38px;
      margin-bottom: 0;
      padding: 0 0 1px;
      position: relative;

      @media (min-width: $screen-md) {
        cursor: default;
        padding: 0;
      }

      &:after {
        content: "\e812";
        display: block;
        font-family: "fontello";
        font-size: 10px;
        height: 10px;
        position: absolute;
        right: 15px;
        top: 0;
        width: 10px;

        @media (min-width: $screen-md) {
          display: none;
        }
      }
    }

    .nav-list {
      display: none;

      @media (min-width: $screen-md) {
        margin-bottom: 0;
        margin-top: 9px;
        display: block;
      }

      a {
        display: block;
        font-size: 14px;
        line-height: 39px;
        padding: 0 0 1px;
        font-weight: 400;
        white-space: nowrap;

        @media (min-width: $screen-md) {
          line-height: 24px;
          padding: 0;
        }

        &:hover {
          text-decoration: underline;
        }
      }

      li {
        line-height: 38px;
        border: 0;
      }
    }

    &.active {
      .nav-title:after {
        content: "\e815";
      }

      .nav-list {
        display: block;
      }
    }
  }

  .social {
    margin-top: 24px;
    overflow: hidden;
    padding-left: 8px;

    @media (min-width: $screen-sm) {
      padding-left: 24px;
    }
    @media (min-width: $screen-md) {
      padding-left: 0;
    }

    a {
      border: 1px solid #fff;
      border-radius: 16px;
      color: #fff;
      font-size: 16px;
      line-height: 30px;
      width: 32px;
    }

    .item {
      border: 0;
      display: inline-block;
      margin-right: 5px;
      text-align: center;

      @media (min-width: $screen-md) {
        display: block;
        float: left;
      }
    }
  }

  .solutions {
    .nav-block {
      @media (min-width: $screen-md) {
        padding: 0 16px;
      }
    }
  }

  .phones {
    .nav-block {
      border-bottom: 0;
      @media (min-width: $screen-md) {
        padding-left: 24px;
      }
    }

    .nav-title {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }

  .phone-block {
    margin-top: 23px;

    @media (min-width: $screen-md) {
      margin-top: 9px;
    }
  }

  .phone-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;

    @media (min-width: $screen-md) {
      text-align: initial;
    }
  }

  .footer-logo {
    margin-top: 35px;
    padding-left: 8px;

    @media (min-width: $screen-sm) {
      padding-left: 24px;
    }
    @media (min-width: $screen-md) {
      padding-left: 0;
    }
  }

  .logo {
    height: 48px;
  }

  .copyright {
    color: #fff;
    font-size: 14px;
    margin-top: 16px;
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
      text-align: left;
    }
  }

  .footer-promo {
    font-size: 14px;
    margin-top: 25px;
    padding: 0 8px;

    @media (min-width: $screen-sm) {
      padding: 0 24px;
    }
    @media (min-width: $screen-md) {
      padding: 0;
    }

    p {
      border: 1px solid #fff;
      display: inline-block;
      margin-top: 0;
      padding: 8px 16px;

      @media (min-width: $screen-md) {
        text-align: left;
      }
    }
  }

  &.active {
    .nav-section {
      display: block;
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }
}

// Модули - индивидуальные стили

// Список преимуществ
.advantage-list-module {

  .content-list {
    display: flex;
    flex-flow: row wrap;
  }

  .content-item {
    //padding: 30px 16px;

    @media (min-width: $screen-sm) {
      border: 0;
      padding: 8px 32px 24px;
      margin-top: 0;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .image-ratio {
      padding-top: 56px;
    }

    .image {
      height: 56px;
      left: 0;
      position: absolute;
      top: 0;
    }
  }

  .content-description {
    margin-top: 29px;

    @media (min-width: $screen-sm) {
      margin-top: 28px;
    }
  }
}

// Промо-модуль для стартовой
.cover-start-page {
  border-top: 0;

  .content {
    overflow: hidden;
    position: relative;
    margin: 0;

    @media (min-width: $screen-sm) {
      padding-bottom: 0;
    }
  }

  .content-video {
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .image {
    position: absolute;
    height: 100%;

    @media (min-width: $screen-sm) {
      left: 50%;
      margin-left: -496px;
    }
    @media (min-width: $screen-md) {
      margin-left: -696px;
    }
    @media (min-width: $screen-lg) {
      margin-left: -960px;
    }
  }

  .video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;

    @media (min-width: $screen-sm) {
      height: auto;
      width: $screen-md;
    }
    @media (min-width: $screen-md) {
      width: $screen-lg;
    }
    @media (min-width: $screen-lg) {
      width: 100%;
    }
  }

  .color-overlay {
    background-color: rgba(37, 121, 191, 0.2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .text {
    color: #fff;
    font-size: 3vw;
    font-weight: 600;
    height: 100%;
    line-height: 4vw;
    padding-top: 6vw;
    position: absolute;
    user-select: none;
    width: 100%;

    @media (min-width: $screen-sm) {
      font-size: 18.8px;
      line-height: 24px;
      padding-bottom: 56px;
      padding-top: 51px;
    }
    @media (min-width: $screen-md) {
      padding-top: 152px
    }

    .container {
      height: 100%;
      position: relative;
    }

    .logo {
      width: 50vw;

      @media (min-width: $screen-sm) {
        width: 305px;
      }
      @media (min-width: $screen-md) {
        width: 440px;
      }
    }

    .intro {
      margin-top: 3vw;

      @media (min-width: $screen-sm) {
        margin-top: 32px;
      }
      @media (min-width: $screen-md) {
        margin-top: 46px;
      }
    }

    .buttons {
      font-size: 3.9vw;
      line-height: 3;
      overflow: hidden;
      position: absolute;
      bottom: 24px;

      @media (min-width: $screen-sm) {
        bottom: 16px;
        font-size: 14px;
        line-height: 40px;
      }
      @media (min-width: $screen-md) {
        margin-top: 67px;
        position: static;
      }

      a {
        display: block;
        border-radius: 32px;
        color: #fff;
        padding: 0 16px;
        text-decoration: none;
      }

      .yourCity {
        background-color: $color-blue-general;
        float: left;
        white-space: nowrap;

        &:hover {
          background-color: $color-blue-dark;
          transition: background-color .2s ease;
        }
      }

      .selectCity {
        float: left;
        position: relative;

        .icon {
          font-size: 80%;
          margin-left: 3px;
        }
      }
    }
  }

  .image-ratio {
    padding-top: 63%;

    @media (min-width: $screen-sm) {
      padding-top: 416px;
    }
    @media (min-width: $screen-md) {
      padding-top: 744px;
    }
  }

  .city-map {
    background-color: #fff;
    height: 300px;

    @media (min-width: $screen-sm) {
      height: 500px;
    }
  }

}

.citylist-start-page {

  .cities {
    color: $color-blue-general;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    padding: 0;
    margin: 0;

    @media (min-width: $screen-sm) {
      column-count: 2;
    }
    @media (min-width: $screen-md) {
      font-size: 18px;
      column-count: 4;
    }

    li {
      padding: 0;
      line-height: 40px;

      @media (min-width: $screen-md) {
        line-height: 32px;
      }

    }

    a {
      display: block;
      font-weight: 400;
      color: $color-black-general;
      line-height: 40px;
      text-decoration: none;

      @media (min-width: $screen-md) {
        line-height: 32px;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// Промо-модуль на главной города
.cover-page-module {
  border-top: 0;
  position: relative;
  overflow: hidden;
  @media (min-width: $screen-sm) {
    height: 350px;
  }
  @media (min-width: $screen-md) {
    height: 428px;
  }

  .banner-list {
    height: 52.08vw;
    overflow: hidden;
    position: relative;

    @media (min-width: $screen-sm) {
      height: 100%;
    }
  }

  .buttons {
    bottom: 0;
    position: absolute;
    width: 100%;

    .container {
      position: relative;

      @media (min-width: $screen-sm) {
        width: 100%;
      }
      @media (min-width: $screen-md) {
        width: $screen-md;
      }
      @media (min-width: $screen-lg) {
        width: $screen-lg;
      }
    }
  }

  .banner {
    cursor: pointer;
    display: none;
    margin: 0;
    font-size: 0;
    user-select: none;

    @media (min-width: $screen-sm) {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    &.active {
      display: block;
    }

    &:hover {
      .text {
        .button {
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  .content-image {
    margin: 0;
    padding: 0;
    width: 100%;

    .image-position {
      overflow: hidden;
      position: relative;
    }

    .image {
      opacity: 0;

      &.lazyloaded {
        opacity: 1;
      }
    }
  }

  .text {
    color: #fff;
    font-family: "Avenir Next Cyr";
    font-size: 1vw;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    user-select: none;

    .container {
      height: 100%;
      padding: 5vw 16px;

      @media (min-width: $screen-sm) {
        padding: 44px 32px 56px;
      }
      @media (min-width: $screen-md) {
        height: 408px;
        padding: 48px 32px 68px;
      }
    }

    br {
      display: none;
    }

    p {
      display: none;

      &:first-child {
        margin-top: 0;
      }

      &.title {
        font-size: 6em;
        font-weight: 700;
        line-height: 1;
        margin-left: -2px;
        text-transform: uppercase;

        @media (min-width: $screen-sm) {
          font-size: 26px;
          line-height: 32px;
        }
        @media (min-width: $screen-md) {
          font-size: 40px;
          line-height: 48px;
        }
        @media (min-width: $screen-lg) {
          font-size: 44px;
          line-height: 48px;
        }
      }

      &.sub {
        font-size: 3.4em;
        font-weight: 600;
        line-height: 1.3;
        margin-top: .7em;

        @media (min-width: $screen-sm) {
          font-size: 16px;
          line-height: 24px;
        }
        @media (min-width: $screen-md) {
          font-size: 20px;
          line-height: 24px;
          margin-top: 32px;
        }
      }

      &.price {
        display: block;
        font-size: 10em;
        font-weight: 700;
        line-height: 0.91;
        margin-left: -2px;

        @media (min-width: $screen-sm) {
          font-size: 46px;
          line-height: 32px;
          margin-top: 8px;
        }
        @media (min-width: $screen-md) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 18px;
        }
        @media (min-width: $screen-lg) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 24px;
        }

        .measure {
          font-size: 50%;
          margin-left: 8px;

          .icon {
            font-size: 107%;
            margin: 0 -10px;
          }
        }
      }

      &.button {
        border-radius: 28px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #fff;
        padding: 8px 16px;
        position: absolute;
        bottom: 64px;
        width: auto;
      }
    }

    .action {
      border-radius: 4px;
      font-family: "Open Sans";
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #fff;
      padding: 8px 16px;
      position: absolute;
      bottom: 64px;
      width: auto;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);

      }
    }

    .xs {
      @media (max-width: $screen-sm - 1) {
        display: block;
      }
    }

    .sm {
      @media (min-width: $screen-sm) and (max-width: $screen-md - 1) {
        display: block;
      }
    }

    .md {
      @media (min-width: $screen-md) and (max-width: $screen-lg - 1) {
        display: block;
      }
    }

    .lg {
      @media (min-width: $screen-lg) {
        display: block;
      }
    }
  }

  .previous-arrow {
    display: none;
    background: url(/img/arrows.png);
    background-size: cover;
    bottom: 16px;
    cursor: pointer;
    height: 30px;
    opacity: .5;
    position: absolute;
    right: 64px;
    width: 30px;

    @media (min-width: $screen-md) {
      //bottom: 208px;
      right: 98px;
    }
    @media (min-width: $screen-lg) {
      right: 139px;
    }
  }

  .next-arrow {
    display: none;
    background: url(/img/arrows.png) -31px no-repeat;
    background-size: cover;
    bottom: 16px;
    cursor: pointer;
    height: 30px;
    opacity: .5;
    position: absolute;
    right: 20px;
    width: 30px;
    @media (min-width: $screen-md) {
      //bottom: 208px;
      right: 52px;
    }
    @media (min-width: $screen-lg) {
      right: 93px;
    }
  }

  .image {
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;

    @media (min-width: $screen-sm) {
      left: 50%;
      line-height: 0;
      margin-left: -495.5px;
      position: absolute;
      right: auto;
      top: 0;
      width: auto;
    }
    @media (min-width: $screen-md) {
      margin-left: -682.5px;
    }
    @media (min-width: $screen-lg) {
      margin-left: -960px;
    }

    &.lazyloaded {
      opacity: 1;
    }

  }

  .image-ratio {
    padding-top: 52.08%;

    @media (min-width: $screen-sm) {
      padding-top: 350px;
    }
    @media (min-width: $screen-md) {
      padding-top: 600px;
    }
  }

  .link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

// Модуль с ошибкой 404
.error404-module {
  .block {
    padding: 96px;
  }

  .content {
    text-align: center;

    h3 {
      color: $color-blue-general;
      font-size: 96px;
      line-height: 1;
      margin: 0;
    }

    p {
      font-size: 15px;
    }
  }

}

// Вызов замерщика
.measure-specialist-module {
  background-color: $color-black-97;
  border-top: 0;

  h2 {
  @media (min-width: $screen-md) {
    width: 66%;
	}
  }

  .message-time {
    font-weight: 600;

    @media (min-width: $screen-md) {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }
  }

  .nearest-time {
  @media (min-width: $screen-md) {
      position: absolute;
      top: -50%;
      right: 2%;
      min-width: 13em;
    }
  @media (min-width: $screen-lg) {	
	right: 7%;
  } 
  }
  .message, .message-time {
  @media (min-width: $screen-md) {
  float: left;
    clear: both;
	}
  }
  .message-time {
  @media (min-width: $screen-md) {
  margin-left: 6%;
  }
  }
  p.lead {
  @media (min-width: $screen-md) {
     position: absolute;
    top: -70%;
    right: 0.5%;
    width: 10em;
	}
	@media (min-width: $screen-lg) {	
	right: 3%;
  }
  }

  .under-address {
    position: relative;

    @media (min-width: $screen-md) {
      padding-right: 16px;
    }

    .active-suggest {
      background-color: $color-blue-light;
      cursor: pointer;
    }

    .address {
      border-bottom-width: 0;

      @media (min-width: $screen-sm) {
        border-bottom-width: 1px;
        border-right-width: 0;
      }
      @media (min-width: $screen-md) {
        border-right-width: 1px;
      }
    }

    .icon {
      display: none;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-date {
    float: left;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-date {
      display: none;
      color: $color-black-general;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-time {
    float: right;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-time {
      border-left: 0;
      color: $color-black-general;
      display: none;
    }

    .title-disabled {
      border-left: 0;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under {
    background-color: #fff;
    border: 1px solid $color-black-90;
    display: none;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 55px;
    width: 100%;
    z-index: 500;

    @media (min-width: $screen-md) {
      top: 47px;
    }

    li {
      line-height: 24px;
      list-style: none;
      padding: 8px 16px;
      cursor: pointer;
    }

    .reserved {
      color: $color-black-70;
    }
  }

  .buttons {
    margin-top: 32px;

    @media (min-width: $screen-md) {
      margin-bottom: 0;
      margin-top: 0;
    /*  padding-left: 32px; */
    }

    button {
      width: 100%;
    }

    .extended {
      @media (min-width: $screen-sm) {
        display: none;
      }
      @media (min-width: $screen-lg) {
        display: inline;
      }
    }
  }

  .submit {
    .extended {
      @media (min-width: $screen-sm) {
        display: none;
      }
      @media (min-width: $screen-md) {
        display: inline;
      }
    }
  }

  &.active {
    .under-date {
      .title-disabled {
        display: none;
      }

      .title-date {
        display: block;
      }
    }

    .under-time {
      .title-disabled {
        display: none;
      }

      .title-time {
        display: block;
      }
    }
  }

  &:hover {
    opacity: 1;
  }

}

// Виджет Калькулятор
.calculator-widget-module {

  #calculator {
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .content {
    display: block;

    &.content-item {
      @media (min-width: $screen-md) {
        padding-bottom: 32px;
      }
    }
  }

  // Слайдер
  .scrolling {
    padding: 8px 23px 8px 15px;

    @media (min-width: $screen-sm) {
      padding: 0 23px 0 15px;
    }

    .irs {
      height: 30px;
      display: block;
      position: relative;
      user-select: none;

      @media (min-width: $screen-sm) {
        height: 40px;
      }
    }

    .irs-with-grid {
      height: 75px;

      .irs-grid {
        display: block;
      }
    }

    .irs-line {
      background: $color-black-light;
      display: block;
      height: 4px;
      outline: none !important;
      overflow: hidden;
      position: relative;
      top: 13px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-line-left, .irs-line-mid, .irs-line-right {
      position: absolute;
      display: block;
      top: 0;
    }

    .irs-line-left {
      height: 4px;
      left: 0;
      width: 11%;
    }

    .irs-line-mid {
      height: 4px;
      left: 9%;
      width: 82%;
    }

    .irs-line-right {
      height: 4px;
      right: 0;
      width: 11%;
    }

    .irs-bar {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      position: absolute;
      top: 13px;
      width: 0;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-bar-edge {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      top: 13px;
      position: absolute;
      width: 30px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-slider {
      background: #fff;
      border: 4px solid $color-blue-general;
      border-radius: 27px;
      cursor: pointer;
      display: block;
      height: 30px;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 30px;

      @media (min-width: $screen-sm) {
        height: 40px;
        width: 40px;
      }
    }

    .irs-slider.state_hover, .irs-slider:hover {
      background: #fff;
    }

    .irs-min, .irs-max {
      color: $color-black-60;
      font-size: 11px;
      line-height: 1.333;
      text-shadow: none;
      padding: 1px 5px;
      border-radius: 3px;
    }

    .irs-min {
      cursor: default;
      display: block;
      left: -20px;
      position: absolute;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .irs-max {
      cursor: default;
      display: block;
      position: absolute;
      right: -28px;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .lt-ie9 .irs-min, .lt-ie9 .irs-max {
      background: #ccc;
    }

    .irs-from, .irs-to, .irs-single {
      background: $color-blue-general;
      border-radius: 3px;
      color: #fff;
      cursor: default;
      display: block;
      font-size: 14px;
      left: 0;
      line-height: 1.333;
      padding: 1px 5px;
      position: absolute;
      text-shadow: none;
      top: 0;
      white-space: nowrap;
    }

    .irs-single {
      display: none;
    }

    .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
      background: #999;
    }

    .irs-grid {
      position: absolute;
      display: none;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 27px;
    }

    .irs-grid-pol {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 8px;
      background: $color-blue-general;
      opacity: 0.5;
    }

    .irs-grid-pol.small {
      height: 4px;
      background: #999;
    }

    .irs-grid-text {
      color: #99a4ac;
      position: absolute;
      bottom: 5px;
      left: 0;
      white-space: nowrap;
      text-align: center;
      font-size: 9px;
      line-height: 9px;
      padding: 0 3px;
    }

    .lt-ie9 .irs-disable-mask {
      background: #000;
      filter: alpha(opacity=0);
      cursor: not-allowed;
    }

    .irs-disable-mask {
      position: absolute;
      display: block;
      top: 0;
      left: -1%;
      width: 102%;
      height: 100%;
      cursor: default;
      background: rgba(0, 0, 0, 0.0);
      z-index: 2;
    }

    .irs-disabled {
      opacity: 0.4;
    }

    .irs-hidden-input {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      outline: none;
      z-index: -9999;
      background: transparent;
      border: 0;
      border-style: solid;
      border-color: transparent;
    }
  }

  .calculator-area {
    color: $color-blue-general;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 14px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

    @media (min-width: $screen-md) {
      margin-bottom: 0;
      text-align: right;
    }

    .measure {
      font-size: 50%;
      line-height: 1;
      margin-left: 4px;
    }

  }

  .calculator-range {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 14px;
    text-align: right;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

    @media (min-width: $screen-lg) {
      margin-bottom: 0;
      text-align: center;
    }

    .measure {
      font-size: 50%;
      line-height: 50%;
      padding-left: 4px;
    }
  }

  .buttons {
    margin-top: 23px;

    @media (min-width: $screen-sm) {
      margin-top: 56px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
      padding-left: 2px;
    }

    .button {
      width: 100%;
    }
  }
}

// Калькулятор
.calculator-module {

  #calculator {
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .content-list {
    @media (min-width: $screen-md) {
      margin-top: -32px;
    }

    .active:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
      }
    }
  }

  .content-item {
    //padding: 29px 16px;
    display: none;

    @media (min-width: $screen-sm) {
      border: 1px solid $color-black-light;
      margin-top: 32px;
      padding: 29px 32px 32px;
    }
    @media (min-width: $screen-md) {
      padding: 28px 32px 32px;
    }

    &:first-child {
      margin-top: 32px;
    }

    &.active {
      display: block;
    }
  }

  .calculator-block {
    @media (min-width: $screen-md) {
      padding-right: 32px;
    }
  }

  .calculator-content {
    background-color: $color-black-97;
    padding: 24px 16px 32px;

    @media (min-width: $screen-sm) {
      padding: 29px 32px 32px;
    }
  }

  .slider-block {
    margin-top: 16px;
  }

  .area-block, .range-block {
    @media (min-width: $screen-md) {
      padding-top: 24px;
    }
  }

  // Слайдер
  .scrolling {
    padding: 8px 23px 8px 15px;

    @media (min-width: $screen-sm) {
      padding: 0 23px 0 15px;
    }

    .irs {
      height: 30px;
      display: block;
      position: relative;
      user-select: none;

      @media (min-width: $screen-sm) {
        height: 40px;
      }
    }

    .irs-with-grid {
      height: 75px;

      .irs-grid {
        display: block;
      }
    }

    .irs-line {
      background: $color-black-light;
      display: block;
      height: 4px;
      outline: none !important;
      overflow: hidden;
      position: relative;
      top: 13px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-line-left, .irs-line-mid, .irs-line-right {
      position: absolute;
      display: block;
      top: 0;
    }

    .irs-line-left {
      height: 4px;
      left: 0;
      width: 11%;
    }

    .irs-line-mid {
      height: 4px;
      left: 9%;
      width: 82%;
    }

    .irs-line-right {
      height: 4px;
      right: 0;
      width: 11%;
    }

    .irs-bar {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      position: absolute;
      top: 13px;
      width: 0;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-bar-edge {
      background: $color-blue-general;
      display: block;
      height: 4px;
      left: 0;
      top: 13px;
      position: absolute;
      width: 30px;

      @media (min-width: $screen-sm) {
        top: 18px;
      }
    }

    .irs-slider {
      background: #fff;
      border: 4px solid $color-blue-general;
      border-radius: 27px;
      cursor: pointer;
      display: block;
      height: 30px;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 30px;

      @media (min-width: $screen-sm) {
        height: 40px;
        width: 40px;
      }
    }

    .irs-slider.state_hover, .irs-slider:hover {
      background: #fff;
    }

    .irs-min, .irs-max {
      color: $color-black-60;
      font-size: 11px;
      line-height: 1.333;
      text-shadow: none;
      padding: 1px 5px;
      border-radius: 3px;
    }

    .irs-min {
      cursor: default;
      display: block;
      left: -20px;
      position: absolute;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .irs-max {
      cursor: default;
      display: block;
      position: absolute;
      right: -28px;
      top: 6px;

      @media (min-width: $screen-sm) {
        top: 11px;
      }
    }

    .lt-ie9 .irs-min, .lt-ie9 .irs-max {
      background: #ccc;
    }

    .irs-from, .irs-to, .irs-single {
      background: $color-blue-general;
      border-radius: 3px;
      color: #fff;
      cursor: default;
      display: block;
      font-size: 14px;
      left: 0;
      line-height: 1.333;
      padding: 1px 5px;
      position: absolute;
      text-shadow: none;
      top: 0;
      white-space: nowrap;
    }

    .irs-single {
      display: none;
    }

    .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
      background: #999;
    }

    .irs-grid {
      position: absolute;
      display: none;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 27px;
    }

    .irs-grid-pol {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 8px;
      background: $color-blue-general;
      opacity: 0.5;
    }

    .irs-grid-pol.small {
      height: 4px;
      background: #999;
    }

    .irs-grid-text {
      color: #99a4ac;
      position: absolute;
      bottom: 5px;
      left: 0;
      white-space: nowrap;
      text-align: center;
      font-size: 9px;
      line-height: 9px;
      padding: 0 3px;
    }

    .lt-ie9 .irs-disable-mask {
      background: #000;
      filter: alpha(opacity=0);
      cursor: not-allowed;
    }

    .irs-disable-mask {
      position: absolute;
      display: block;
      top: 0;
      left: -1%;
      width: 102%;
      height: 100%;
      cursor: default;
      background: rgba(0, 0, 0, 0.0);
      z-index: 2;
    }

    .irs-disabled {
      opacity: 0.4;
    }

    .irs-hidden-input {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      outline: none;
      z-index: -9999;
      background: none;
      border: 0;
      border-style: solid;
      border-color: transparent;
    }
  }

  .calculator-area {
    color: $color-blue-general;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;

    .measure {
      font-size: 50%;
      line-height: 1;
      margin-left: 4px;
    }

  }

  .calculator-range {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    text-align: right;

    .measure {
      font-size: 50%;
      line-height: 50%;
      padding-left: 4px;
    }
  }

  .calculator-options {
    display: flex;
    flex-direction: row;
    margin-top: 25px;

    .radio {
      border: 1px solid $color-black-light;
      border-right-width: 0;
      line-height: 38px;
      user-select: none;

      input {
        position: absolute;
        z-index: -1;
        opacity: 0;

        &:checked + .radio_text {
          margin: -1px 0;
          background-color: $color-blue-general;
          border-top: 1px solid $color-blue-general;
          border-bottom: 1px solid $color-blue-general;
          color: #fff;
        }
      }

      .radio_text {
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        text-align: center;
        width: 100%;
      }

      &:last-child {
        border-right-width: 1px;
      }
    }
  }

  .title-block {
    overflow: hidden;
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .specifications {
    tr {
      &:nth-child(n+4) {
        display: none;
      }

      &.action {
        display: table-row;
      }
    }

    &.active {
      tr {
        display: table-row;

        &.action {
          display: none;
        }
      }
    }
  }

}

// Цены
.prices-module {

  .content {
    @media (min-width: $screen-sm) {
      border: 1px solid $color-black-light;
    }
  }

  .content-item {
    @media (min-width: $screen-sm) {
      border-top-width: 0;
      margin-top: 0;
    }
  }

  .content-item {
    @media (min-width: $screen-md) {
      border-left: 1px solid $color-black-light;
      border-bottom-width: 0;
      border-right-width: 0;
      border-top-width: 0;
      flex: 3 3;
      padding: 33px 32px 24px;
    }

    &:first-child {
      @media (min-width: $screen-md) {
        border-left-width: 0;
      }
    }

    .lead {
      color: $color-black-30;
      display: block;
      font-weight: 400;
      margin-top: 17px;
      width: 100%;

      @media (min-width: $screen-sm) {
        font-size: 18px;
        line-height: 24px;
        margin-top: 24px;
      }
      @media (min-width: $screen-md) {
        margin-top: 28px;
      }
    }
  }

  .promotions {
    bottom: 1px;
    font-size: 0;
    list-style: none;
    //margin: 16px 0 0;
    padding: 0;
    position: absolute;
    right: 0;

    //@media (min-width: $screen-sm) {
      //margin: 0;
    //}

    @media (min-width: $screen-md) {
      margin-top: 24px;
      overflow: hidden;
      position: static;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }

    &:nth-child(n+2) {
      display: none;
      @media (min-width: $screen-sm) {
        display: block;
      }
    }
  }

  .features {
    display: none;

    @media (min-width: $screen-sm) {
      margin-top: 16px;
    }
    @media (min-width: $screen-md) {
      display: block;
      margin-top: 24px;
    }

    ul {
      color: inherit;
      list-style: none;
      margin: 3px 0 0;
      padding: 0;

      @media (min-width: $screen-md) {
        margin-top: 3px;
      }

      li {
        font-size: 11px;
        line-height: 24px;
      }
    }
  }
}

// Раскрытый отзыв
.review-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      height: 544px;
      display: block;
      overflow: hidden;
      padding: 0;
    }
    @media (min-width: $screen-lg) {
      height: 589px;
    }

    &:first-child {
      border-top-width: 1px;
      margin-top: 0;
	//  background-color: $color-black-97;
    }
  }

  .rate {
    float: right;
  }

  .stars {
    color: $color-blue-general;
    font-family: fontello;
    font-size: 14px;
    line-height: 26px;
    overflow: hidden;
	display: none;
    .item {
      float: left;
      width: 16px;
    }
  }

  .date {
    font-size: 20px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
	margin-top: 12px;
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 3px;
  }

  .review-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .review-media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .media-item {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    float: left;
    overflow: hidden;
    position: relative;
    width: 50%;
    @media (min-width: $screen-lg) {
      width: 33.33%;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 57.2%;
      //}
    }

    .player {
      background: url(/img/player-small.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    img {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
    }

    video {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        width: auto;
        height: 100%;
      }
    }

    &:first-child {
      border-top-width: 0;
      width: 100%;
    }

    &:nth-child(n+3) {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    &:nth-child(n+5) {
      @media (min-width: $screen-md) {
        display: none;
      }
      @media (min-width: $screen-lg) {
        display: block;
      }
    }

    &:nth-child(n+7) {
      @media (min-width: $screen-lg) {
        display: none;
      }
    }

    &:last-child {
      display: block;
    }

    &:hover {
      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }
  }

  .review-description {
    order: 3;

    @media (min-width: $screen-md) {
      margin-top: 23px;
      padding: 0 32px;
    }

    .specifications {
      margin-top: 0;

      @media (min-width: $screen-md) {
        margin-top: 9px;
      }

      tr {
        &:nth-child(n+8) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+10) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &.action {
          display: table-row;
		   color: $color-blue-general;
        }
      }

      &.active {
        tr {
          display: table-row;
		 
        }
      }
    }

    .address {
      //display: none;
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
	  margin-top: 20px;

      @media (min-width: $screen-md) {
      //  display: none;
      }
    }

    .client {
      margin-top: 23px;
	  display: none;

      &.active {
        .clip {
          height: auto;
        }

        .comment-title, .pros, .answer {
          display: block;
        }
      }
    }

    .name {
      font-weight: 700;
    }

    .comment {
      cursor: pointer;
    }

    .clip {
      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }

    .comment-title, .pros, .answer {
      display: none;
    }

    .show-more {
      color: #b3b3b3;
      cursor: pointer;

      &:hover {
        color: $color-black-general;
        text-decoration: underline;
      }
    }

  }
}

// Виджет отзывов
.reviews-widget-module {

 .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      height: 544px;
      display: block;
      overflow: hidden;
      padding: 0;
    }
    @media (min-width: $screen-lg) {
      height: 589px;
    }

    &:first-child {
      border-top-width: 1px;
      margin-top: 0;
	//  background-color: $color-black-97;
    }
  }

  .rate {
    float: right;
  }

  .stars {
    color: $color-blue-general;
    font-family: fontello;
    font-size: 14px;
    line-height: 26px;
    overflow: hidden;
	display: none;
    .item {
      float: left;
      width: 16px;
    }
  }

  .date {
    font-size: 20px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
	margin-top: 12px;
	font-family: TT Norms,Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
	
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 3px;
  }

  .review-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .review-media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .media-item {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    float: left;
    overflow: hidden;
    position: relative;
    width: 50%;
    @media (min-width: $screen-lg) {
      width: 33.33%;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 57.2%;
      //}
    }

    .player {
      background: url(/img/player-small.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    img {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
    }

    video {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        width: auto;
        height: 100%;
      }
    }

    &:first-child {
      border-top-width: 0;
      width: 100%;
    }

    &:nth-child(n+3) {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    &:nth-child(n+5) {
      @media (min-width: $screen-md) {
        display: none;
      }
      @media (min-width: $screen-lg) {
        display: block;
      }
    }

    &:nth-child(n+7) {
      @media (min-width: $screen-lg) {
        display: none;
      }
    }

    &:last-child {
      display: block;
    }

    &:hover {
      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }
  }

  .review-description {
    order: 3;

    @media (min-width: $screen-md) {
      margin-top: 23px;
      padding: 0 32px;
    }

    .specifications {
      margin-top: 0;

      @media (min-width: $screen-md) {
        margin-top: 9px;
      }

      tr {
        &:nth-child(n+8) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+10) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &.action {
          display: table-row;
		   color: $color-blue-general;
        }
      }

      &.active {
        tr {
          display: table-row;
		 
        }
      }
    }

    .address {
      //display: none;
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
	  margin-top: 20px;

      @media (min-width: $screen-md) {
      //  display: none;
      }
    }

    .client {
      margin-top: 23px;
	  display: none;

      &.active {
        .clip {
          height: auto;
        }

        .comment-title, .pros, .answer {
          display: block;
        }
      }
    }

    .name {
      font-weight: 700;
    }

    .comment {
      cursor: pointer;
    }

    .clip {
      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }

    .comment-title, .pros, .answer {
      display: none;
    }

    .show-more {
      color: #b3b3b3;
      cursor: pointer;

      &:hover {
        color: $color-black-general;
        text-decoration: underline;
      }
    }

  }
}

// Виджет списка отзывов
.reviews-list-module {

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {
    @media (min-width: $screen-sm) {
      display: flex;
      flex-flow: row wrap;
      margin-bottom: 0;
      padding: 0;
    }

  }

  .media-item {
    cursor: pointer;
    float: left;
    margin-top: 16px;
    overflow: hidden;
    //padding: 0 16px;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      border-right: 2px solid #fff;
      margin-top: 0;
      padding: 0;
      width: 50%;
    }

    @media (min-width: $screen-md) {
      width: 25%;
    }

    .content-image {
      margin: 0;
      padding: 0;
      position: relative;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        width: 100%;

        @media (min-width: $screen-sm) {
          height: 100%;
          width: auto;
        }

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 192px;
      }
      @media (min-width: $screen-md) {
        padding-top: 139px;
      }
      @media (min-width: $screen-lg) {
        padding-top: 184px;
      }
    }

    .player {
      background: url(/img/player-small.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .caption {
      padding-top: 8px;
      @media (min-width: $screen-sm) {
        padding: 8px 32px 24px;
      }

      .date {
        display: block;
        font-size: 11px;
        line-height: 24px;
        font-weight: 300;

        @media (min-width: $screen-sm) {
          padding: 0;
          text-shadow: none;
        }
      }

      .title {
        font-size: 14px;
        line-height: 24px;

        @media (min-width: $screen-sm) {
          font-weight: 600;
          display: block;
        }
      }

      .price {
        float: right;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;

        @media (min-width: $screen-sm) {
          float: none;
          display: block;
        }
      }

      .measure {
        .icon {
          font-size: 12px;
        }
      }

    }

    &:hover {
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
      }

      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }

    &:first-child {
      border-top-width: 0;
      margin-top: 0;

      @media (min-width: $screen-sm) {
        border-top-width: 2px;
      }
    }
  }
}

// Примеры расчетов
.solution-list-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      display: block;
      overflow: hidden;
      padding: 0;
    }

    &:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
        margin-top: 0;
      }
    }
  }

  .solution-media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .title-block {
    overflow: hidden;

    @media (min-width: $screen-sm) {
      margin-top: 21px;
    }
    @media (min-width: $screen-md) {
      margin-top: 29px;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 63%;
      }
      @media (min-width: $screen-lg) {
        padding-top: $default-ratio;
      }
    }

    img {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
    }
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .solution-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .solution-description {
    order: 3;

    @media (min-width: $screen-md) {
      padding: 0 32px;
    }

    .plan {
      display: none;
    }

    .specifications {
      margin-top: 0;

      @media (min-width: $screen-md) {
        margin-top: 24px;
      }

      tr {
        &:nth-child(n+3) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+5) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &.action {
          display: table-row;
        }
      }

      &.active {
        tr {
          display: table-row;
        }
      }
    }

    .address {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .client {
      font-size: 14px;
      line-height: 1.72;
    }

    .name {
      font-weight: 600;
    }

    .comment {
      font-weight: 300;

      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }
  }
}

// Виджет светильников
.lamp-widget-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      display: block;
      overflow: hidden;
      padding: 0;
    }

    &:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
        margin-top: 0;
      }
    }
  }

  .media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .title-block {
    overflow: hidden;

    @media (min-width: $screen-sm) {
      margin-top: 21px;
    }
    @media (min-width: $screen-md) {
      margin-top: 29px;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 63%;
      }
      @media (min-width: $screen-lg) {
        padding-top: $default-ratio;
      }
    }

    img {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
      @media (min-width: $screen-lg) {
        height: 100%;
        width: auto;
      }

      &:hover {
        transition: all .2s ease;
        filter: brightness(105%);
      }
    }
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 16px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .content-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .content-description {
    order: 3;

    @media (min-width: $screen-md) {
      padding: 24px 32px 0;
    }

    .specifications {
      border: 1px solid $color-black-light;
      background-color: $color-black-97;
      border-collapse: collapse;
      margin-top: 24px;
      width: 100%;

      @media (min-width: $screen-md) {
        margin-top: 0;
      }

      tr {

        &:nth-child(n+3) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+5) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &:nth-child(1) {
          td {
            padding-top: 12px;
          }
        }

        &.action {
          cursor: pointer;
          display: table-row;

          td {
            font-weight: 400;
            padding-top: 0;
          }
        }
      }

      td {
        font-size: 11px;
        line-height: 1;
        padding: 0 16px 12px;

        @media (min-width: $screen-md) {
          border-bottom: 0;

        }

        &:nth-child(2) {
          text-align: right;
          white-space: nowrap;
          vertical-align: top;
        }
      }
    }

    .address {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .client {
      font-size: 14px;
      line-height: 1.72;
    }

    .name {
      font-weight: 600;
    }

    .comment {
      font-weight: 300;

      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }
  }
}

// Полный список светильников
.lamp-module {

  .content-item {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      display: block;
      overflow: hidden;
      padding: 0;
    }

    &:first-child {
      @media (min-width: $screen-sm) {
        border-top-width: 1px;
        margin-top: 0;
      }
    }
  }

  .media-list {
    margin-top: 19px;
    order: 2;

    @media (min-width: $screen-sm) {
      margin-top: 24px;
    }
    @media (min-width: $screen-md) {
      margin-top: 0;
    }
  }

  .title-block {
    overflow: hidden;

    @media (min-width: $screen-sm) {
      margin-top: 21px;
    }
    @media (min-width: $screen-md) {
      margin-top: 29px;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 63%;
      }
      @media (min-width: $screen-lg) {
        padding-top: $default-ratio;
      }
    }

    img {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;

      @media (min-width: $screen-sm) {
        height: 100%;
        width: auto;
      }
      @media (min-width: $screen-lg) {
        height: auto;
        width: 100%;
      }
    }
  }

  .promotions {
    list-style: none;
    font-size: 0;
    margin: 16px 0 0;
    overflow: hidden;
    padding: 0;
    bottom: 1px;

    @media (min-width: $screen-sm) {
      margin: 0;
      position: absolute;
      right: 0;
    }
  }

  .promo {
    float: left;
    margin-left: 8px;
    font-size: 0;

    @media (min-width: $screen-sm) {
      line-height: 40px;
      margin-left: 0;
    }
    @media (min-width: $screen-md) {
      line-height: 40px;
      margin-left: 16px;
    }

    .image {
      height: 56px;
      vertical-align: middle;
    }

    .title {
      display: none;

      @media (min-width: $screen-sm) {
        display: inline-block;
        font-size: 11px;
        font-weight: 300;
        line-height: 1.33;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    &:first-child {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .content-title {
    order: 1;

    @media (min-width: $screen-md) {
      margin-top: 28px;
      padding: 0 32px;
    }
  }

  .content-description {
    order: 3;

    @media (min-width: $screen-md) {
      padding: 24px 32px 0;
    }

    .specifications {
      border: 1px solid $color-black-light;
      background-color: $color-black-97;
      border-collapse: collapse;
      margin-top: 24px;
      width: 100%;

      @media (min-width: $screen-md) {
        margin-top: 0;
      }

      tr {

        &:nth-child(n+3) {
          display: none;
          @media (min-width: $screen-lg) {
            display: table-row;
          }
        }

        &:nth-child(n+5) {
          @media (min-width: $screen-lg) {
            display: none;
          }
        }

        &:nth-child(1) {
          td {
            padding-top: 12px;
          }
        }

        &.action {
          cursor: pointer;
          display: table-row;

          td {
            font-weight: 400;
            padding-top: 0;
          }
        }
      }

      td {
        font-size: 11px;
        line-height: 1;
        padding: 0 16px 12px;

        @media (min-width: $screen-md) {
          border-bottom: 0;
        }

        &:nth-child(2) {
          text-align: right;
          white-space: nowrap;
          vertical-align: top;
        }
      }
    }

    .address {
      display: none;

      @media (min-width: $screen-md) {
        display: block;
      }
    }

    .client {
      font-size: 14px;
      line-height: 1.72;
    }

    .name {
      font-weight: 600;
    }

    .comment {
      font-weight: 300;

      @media (min-width: $screen-sm) {
        height: 48px;
        overflow: hidden;
      }
      @media (min-width: $screen-md) {
        height: 72px;
      }
    }
  }
}

// Виджет Изображение
.image-module {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-item {
    margin: 0;
  }

  .placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }

  .image {
    filter: blur(50px);
    transform: scale(1);
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;

    &.lazyloaded {
      opacity: 1;
      filter: inherit;
      transform: inherit;
    }
  }

  .video {
    filter: blur(0.5px);
    transform: scale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    &:hover {
      filter: inherit;
      transform: inherit;
    }
  }

  .color-overlay {
    background: rgba(37, 121, 191, .2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .player {
    background: url(/img/player.png) 50% 50% no-repeat;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .ratio {
    padding-top: $default-ratio;
  }
}

// Виджет фотографий
.photo-widget-module {

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
      padding: 0;
    }

    &.once {
      .media-item {
        width: 100%;
      }
    }

    &.twin {
      .media-item {
        width: 100%;

        @media (min-width: $screen-md) {
          width: 50%;
        }
      }
    }
  }

  .media-item {
    border-top: 2px solid #fff;
    float: left;
    margin-top: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      border-right: 2px solid #fff;
      margin-top: 0;
      padding: 0;
      width: 50%;
    }

    @media (min-width: $screen-md) {
      width: 25%;
    }

    .content-image {
      margin: 0;
      padding: 0;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        left: 50%;
        opacity: 0;
        position: absolute;
        top: 0;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        width: 100%;

        @media (min-width: $screen-sm) {
          height: 100%;
          width: auto;
        }

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;
    }

    &:hover {
      .image {
        transition: all .2s ease;
        filter: brightness(105%);
      }
    }

    &:first-child {
      border-top-width: 0;
      margin-top: 0;

      @media (min-width: $screen-sm) {
        border-top-width: 2px;
      }
    }
  }
}

// Фотографии
.photo-module {

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
      padding: 0;
    }
  }

  .media-item {
    border-top: 2px solid #fff;
    float: left;
    margin-top: 16px;
    overflow: hidden;
    //padding: 0 16px;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      border-right: 2px solid #fff;
      margin-top: 0;
      padding: 0;
      width: 50%;
    }

    @media (min-width: $screen-md) {
      width: 25%;
    }

    .content-image {
      margin: 0;
      padding: 0;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;

        @media (min-width: $screen-sm) {
          width: auto;
          height: 100%;
        }

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      @media (min-width: $screen-sm) {
        padding-top: 192px;
      }
      @media (min-width: $screen-md) {
        padding-top: 139px;
      }
      @media (min-width: $screen-lg) {
        padding-top: 184px;
      }
    }

    &:hover {
      img, video {
        filter: brightness(105%);
      }

      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }
    }

    &:first-child {
      margin-top: 0;
    }
  }
}

// Виджет Видео
.video-widget-module {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  .content-item {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-list {
    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .media-item {
    margin: 0;

    @media (min-width: $screen-sm) {
      padding: 0;
    }

    &:hover {
      .player {
        opacity: 0.8;
        transition: all .2s ease;
      }

      .video {
        filter: brightness(105%);
        transition: all .2s ease;
      }
    }
  }

  .placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }

  .image {
    filter: blur(50px);
    transform: scale(1);
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;

    &.lazyloaded {
      opacity: 1;
      filter: inherit;
      transform: inherit;
    }
  }

  .video {
    filter: blur(0.5px);
    transform: scale(1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    &:hover {
      filter: inherit;
      transform: inherit;
    }
  }

  iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .color-overlay {
    background: rgba(37, 121, 191, .2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .player {
    background: url(/img/player.png) 50% 50% no-repeat;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .ratio {
    padding-top: $default-ratio;
  }
}

// Список видео
.video-list-module {

  .content-item {
    @media (min-width: $screen-sm) {
      border: 0;
      padding: 0;
    }

    &:hover {
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
      }
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .player {
      background: url(/img/player.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 56.3%;
      //}
      //@media (min-width: $screen-lg) {
      //  padding-top: 57%;
      //}
    }

    .image {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;

      &.lazyloaded {
        opacity: 1;
      }
    }
  }

  .content-description {
    padding-top: 28px;

    @media (min-width: $screen-sm) {
      padding: 28px 32px;
    }
  }
}

// Список ссылок
.link-list-module {

  .content-item {
    position: relative;
    @media (min-width: $screen-sm) {
      border: 0;
      padding: 0;
    }

    .next-link {
      color: $color-blue-general;
      margin-top: 16px;
      text-align: center;
      margin-top: 16px;
      margin-bottom: -16px;

      @media (min-width: $screen-md) {
        margin-bottom: 0;
        text-align: left;
      }

      &:before {
        content: "Подробнее";
      }
    }

    &:hover {
      @media (min-width: $screen-md) {
        background-color: $color-black-97;
      }
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
    }

    .player {
      background: url(/img/player.png) 50% 50% no-repeat;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .image-ratio {
      padding-top: $default-ratio;

      //@media (min-width: $screen-sm) {
      //  padding-top: 56.3%;
      //}
      //@media (min-width: $screen-lg) {
      //  padding-top: 57%;
      //}
    }

    .image {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;

      &.lazyloaded {
        opacity: 1;
      }
    }
  }

  .content-description {
    padding-top: 28px;
    position: static;

    @media (min-width: $screen-sm) {
      padding: 28px 32px;
    }
  }

  .content-link {
    color: $color-black-general;
    display: block;
    text-decoration: none;

    &:before {
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}

// Список акций
.announcement-list-module {

  .content-item {
    padding-left: 0;
    padding-right: 0;
  }

  .media-list {
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
      padding: 0;
    }
  }

  .media-item {
    margin-top: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;

    @media (min-width: $screen-sm) {
      margin-top: 32px;
      padding: 0;
    }

    .content-image {
      margin: 0;
      padding: 0;
      width: 100%;

      .image-position {
        overflow: hidden;
        position: relative;
      }

      .image {
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        height: 100%;

        &.lazyloaded {
          opacity: 1;
        }
      }
    }

    .image-ratio {
      padding-top: 50%;

      @media (min-width: $screen-sm) {
        padding-top: 296px;
      }
      @media (min-width: $screen-md) {
        padding-top: 408px;
      }
    }

    &:first-child {
      margin-top: 0;
    }

    &:hover {
      .image {
        transition: all .2s ease;
        filter: brightness(105%);
      }
    }
  }

  .text {
    color: #fff;
    font-family: "Avenir Next Cyr";
    font-size: 0.9vw;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    user-select: none;

    .container {
      height: 100%;
      padding: 5vw 16px;

      @media (min-width: $screen-sm) {
        padding: 44px 32px 56px;
      }
      @media (min-width: $screen-md) {
        height: 408px;
        padding: 48px 32px 68px;
      }
    }

    br {
      display: none;
    }

    p {
      display: none;

      &:first-child {
        margin-top: 0;
      }

      &.title {
        font-size: 6em;
        font-weight: 700;
        line-height: 1;
        margin-left: -2px;
        text-transform: uppercase;

        @media (min-width: $screen-sm) {
          font-size: 26px;
          line-height: 32px;
        }
        @media (min-width: $screen-md) {
          font-size: 40px;
          line-height: 48px;
        }
        @media (min-width: $screen-lg) {
          font-size: 44px;
          line-height: 48px;
        }
      }

      &.sub {
        font-size: 3.4em;
        font-weight: 600;
        line-height: 1.3;
        margin-top: .7em;

        @media (min-width: $screen-sm) {
          font-size: 16px;
          line-height: 24px;
        }
        @media (min-width: $screen-md) {
          font-size: 20px;
          line-height: 24px;
          margin-top: 32px;
        }
      }

      &.price {
        display: block;
        font-size: 10em;
        font-weight: 700;
        line-height: 0.91;
        margin-left: -2px;

        @media (min-width: $screen-sm) {
          font-size: 46px;
          line-height: 32px;
          margin-top: 8px;
        }
        @media (min-width: $screen-md) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 18px;
        }
        @media (min-width: $screen-lg) {
          font-size: 72px;
          line-height: 48px;
          margin-top: 24px;
        }

        .measure {
          font-size: 50%;
        }
      }

      &.action {
        border-radius: 4px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #fff;
        padding: 8px 16px;
        position: absolute;
        bottom: 64px;
        width: auto;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);

        }
      }
    }

    .action {
      border-radius: 4px;
      font-family: "Open Sans";
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #fff;
      padding: 8px 16px;
      position: absolute;
      bottom: 64px;
      width: auto;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);

      }
    }

    .xs {
      @media (max-width: $screen-sm - 1) {
        display: block;
      }
    }

    .sm {
      @media (min-width: $screen-sm) and (max-width: $screen-md - 1) {
        display: block;
      }
    }

    .md {
      @media (min-width: $screen-md) and (max-width: $screen-lg - 1) {
        display: block;
      }
    }

    .lg {
      @media (min-width: $screen-lg) {
        display: block;
      }
    }
  }

  .link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

}

.announcement-module {

  @media (min-width: $screen-sm) {
    margin-top: 0;
  }

  .content-item {
    @media (min-width: $screen-sm) {
      border: 0;
      padding: 0;
    }
  }

  .media-item {
    overflow: hidden;
    position: relative;

    .content-image {
      margin: 0;
      padding: 0;
    }

    .image-position {
      position: relative;
      overflow: hidden;
    }

    .image {
      right: 0;
      top: 0;
      position: absolute;
      height: 100%;
    }

    .image-ratio {
      padding-top: 50%;

      @media (min-width: $screen-sm) {
        padding-top: 296px;
      }
      @media (min-width: $screen-md) {
        padding-top: 408px;
      }
    }

    .text {
      color: #fff;
      font-family: "Avenir Next Cyr";
      font-size: 1vw;
      font-weight: 700;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      user-select: none;

      .container {
        height: 100%;
        padding: 5vw 16px;

        @media (min-width: $screen-sm) {
          padding: 44px 32px 56px;
        }
        @media (min-width: $screen-md) {
          height: 408px;
          padding: 48px 32px 68px;
        }
      }

      br {
        display: none;
      }

      p {
        display: none;

        &:first-child {
          margin-top: 0;
        }

        &.title {
          font-size: 6em;
          font-weight: 700;
          line-height: 1;
          margin-left: -2px;
          text-transform: uppercase;

          @media (min-width: $screen-sm) {
            font-size: 26px;
            line-height: 32px;
          }
          @media (min-width: $screen-md) {
            font-size: 40px;
            line-height: 48px;
          }
          @media (min-width: $screen-lg) {
            font-size: 44px;
            line-height: 48px;
          }
        }

        &.sub {
          font-size: 3.4em;
          font-weight: 600;
          line-height: 1.3;
          margin-top: .7em;

          @media (min-width: $screen-sm) {
            font-size: 16px;
            line-height: 24px;
          }
          @media (min-width: $screen-md) {
            font-size: 20px;
            line-height: 24px;
            margin-top: 32px;
          }
        }

        &.price {
          display: block;
          font-size: 10em;
          font-weight: 700;
          line-height: 0.91;
          margin-left: -2px;

          @media (min-width: $screen-sm) {
            font-size: 46px;
            line-height: 32px;
            margin-top: 8px;
          }
          @media (min-width: $screen-md) {
            font-size: 72px;
            line-height: 48px;
            margin-top: 18px;
          }
          @media (min-width: $screen-lg) {
            font-size: 72px;
            line-height: 48px;
            margin-top: 24px;
          }

          .measure {
            font-size: 50%;
          }
        }

        &.action {
          border-radius: 4px;
          font-family: "Open Sans";
          font-size: 14px;
          font-weight: 400;
          border: 1px solid #fff;
          padding: 8px 16px;
          position: absolute;
          bottom: 64px;
          width: auto;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1);

          }
        }
      }

      .action {
        border-radius: 4px;
        font-family: "Open Sans";
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #fff;
        padding: 8px 16px;
        position: absolute;
        bottom: 64px;
        width: auto;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);

        }
      }

      .xs {
        @media (max-width: $screen-sm - 1) {
          display: block;
        }
      }

      .sm {
        @media (min-width: $screen-sm) and (max-width: $screen-md - 1) {
          display: block;
        }
      }

      .md {
        @media (min-width: $screen-md) and (max-width: $screen-lg - 1) {
          display: block;
        }
      }

      .lg {
        @media (min-width: $screen-lg) {
          display: block;
        }
      }
    }
  }

  .content-description {
    @media (min-width: $screen-sm) {
      padding: 0 32px;
    }

    h3 {
      margin-top: 25px;

      @media (min-width: $screen-md) {
        margin-top: 49px;
      }
    }

    h4 {
      margin-top: 16px;
      padding-top: 1px;
    }

    ul {
      font-size: 14px;
      line-height: 1.72;
      list-style-type: none;
      margin-top: 16px;
      padding: 0;

      @media (min-width: $screen-sm) {
        font-size: 14px;
        line-height: 1.72;
      }

      & > li {
        padding-left: 24px;
        position: relative;

        &:before {
          content: "—";
          left: 0;
          position: absolute;
        }
      }

      ol, ul {
        margin-top: 0;
      }
    }

    ol {
      font-size: 14px;
      line-height: 1.72;
      list-style-type: decimal;
      margin-top: 16px;
      padding-left: 20px;

      & > li {
        padding-left: 4px;
      }

      ol, ul {
        margin-top: 0;
      }
    }

    p {
      margin-top: 16px;
    }
  }

  .content-aside {
    margin-top: 23px;

    @media (min-width: $screen-sm) {
      padding: 0 32px;
    }
  }

}

// Текстовое содержимое
.text-module {

  a, a:visited {
    color: $color-blue-general;
    text-decoration: none;
    border-bottom: 1px solid $color-black-90;

    &:hover {
      text-decoration: none;
    }
  }

  h3 {
    margin-top: 25px;

    @media (min-width: $screen-md) {
      margin-top: 49px;
    }
  }

  h4 {
    margin-top: 16px;
    padding-top: 1px;
  }

  ul {
    font-size: 14px;
    line-height: 1.72;
    list-style-type: none;
    margin-top: 16px;
    padding: 0;

    @media (min-width: $screen-sm) {
      font-size: 14px;
      line-height: 1.72;
    }

    & > li {
      padding-left: 24px;
      position: relative;

      &:before {
        content: "—";
        left: 0;
        position: absolute;
      }
    }

    ol, ul {
      margin-top: 0;
    }
  }

  ol {
    font-size: 14px;
    line-height: 1.72;
    list-style-type: decimal;
    margin-top: 16px;
    padding-left: 20px;

    & > li {
      padding-left: 4px;
    }

    ol, ul {
      margin-top: 0;
    }
  }

  p {
    margin-top: 16px;
  }

  .text-body {
    margin-top: -3px;

    @media (min-width: $screen-sm) {
      padding-right: 16px;
    }
    @media (min-width: $screen-md) {
      padding-right: 32px;
    }
    @media (min-width: $screen-lg) {
      padding-right: 64px;
    }

    & > *:first-child {
      margin-top: 0;
    }
  }

  .text-aside {
    padding-top: 8px;

    @media (min-width: $screen-sm) {
      padding-left: 0;
      padding-top: 0;
    }
  }

  .cite {
    font-size: 11px;
    line-height: 1.5;
    margin: 21px 0;
  }
}

// Обратный звонок
.callback-module {
  background-color: $color-black-97;

  .lead {
    display: block;
  }

  .row-controls {
    margin-top: -3px;

    @media (min-width: $screen-sm) {
      margin-top: 0;
    }
  }

  .buttons {
    margin-top: 32px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding-left: 32px;
    }

    button {
      width: 100%;
    }
  }

}

// Обратный звонок
.service-module {
  background-color: $color-black-97;
  border-bottom: 1px solid $color-black-light;
  border-top: 1px solid $color-black-light;

  @media (min-width: $screen-md) {
    margin-bottom: 56px;
  }

  .block {
    padding-bottom: 32px;

    @media (min-width: $screen-sm) {
      padding-bottom: 56px;
    }
    @media (min-width: $screen-md) {
      padding-bottom: 68px;
    }
  }

  .lead {
    display: block;
  }

  .row-controls {
    margin-top: -3px;

    @media (min-width: $screen-sm) {
      margin-top: 0;
    }
  }

  .buttons {
    margin-top: 32px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding-left: 32px;
    }

    button {
      width: 100%;
    }
  }

}

// Карта ссылок
.sitemap-module {

  a {
    color: $color-black-general;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  li {
    font-size: 20px;
    letter-spacing: -.2px;
    line-height: 1.4;
    list-style: none;
    margin-bottom: 10px;

    ul {
      margin-top: 10px;
      margin-bottom: 10px;

      li {
        margin-left: 19px;
        font-size: 16px;
      }

      a {
        color: $color-blue-general;
        margin-bottom: 0;
      }
    }
  }

  ul {
    padding: 0;
    margin: 0;
  }

  .block {
    padding-bottom: 32px;

    @media (min-width: $screen-sm) {
      padding-bottom: 56px;
    }
    @media (min-width: $screen-md) {
      padding-bottom: 68px;
    }
  }
}

// Форма обратной связи
.form-feedback-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    margin-top: 8px;

    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    text-align: center;
  }

}

// Форма вызова замерщика
.form-gager-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    margin-top: 8px;

    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    text-align: center;
  }

  .message-time {
    font-weight: 600;

    @media (min-width: $screen-md) {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }
  }

  .two-fields {
    .under {
      margin-top: 8px;

      @media (min-width: $screen-md) {
        margin-top: 16px;
      }
    }

    &:after {
      content: '';
      clear: both;
      display: block;
    }
  }

  .under-address {
    position: relative;

    .active-suggest {
      background-color: $color-blue-light;
      cursor: pointer;
    }

    .address {
      border-bottom-width: 0;

      @media (min-width: $screen-sm) {
        border-bottom-width: 1px;
        border-right-width: 0;
      }
      @media (min-width: $screen-md) {
        border-right-width: 1px;
      }
    }

    .icon {
      display: none;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-date {
    float: left;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-date {
      display: none;
      color: $color-black-general;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under-time {
    float: right;
    font-size: 16px;
    position: relative;
    width: 50%;
    user-select: none;

    .title-time {
      border-left: 0;
      color: $color-black-general;
      display: none;
    }

    .title-disabled {
      border-left: 0;
    }

    &.active {
      .under {
        display: block;
      }
    }
  }

  .under {
    background-color: #fff;
    border: 1px solid $color-black-90;
    display: none;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 55px;
    width: 100%;
    z-index: 500;

    @media (min-width: $screen-md) {
      top: 39px;
    }

    li {
      line-height: 24px;
      list-style: none;
      padding: 8px 16px;
      cursor: pointer;
    }

    .reserved {
      color: $color-black-70;
    }
  }

  &.active {
    .under-date {
      .title-disabled {
        display: none;
      }

      .title-date {
        display: block;
      }
    }

    .under-time {
      .title-disabled {
        display: none;
      }

      .title-time {
        display: block;
      }
    }
  }

}

// Форма добавления отзыва
.form-review-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    text-align: center;
  }

}

// Форма доплаты
.form-pay-module {

  .form-description {
    margin-top: 28px;

    @media (min-width: $screen-md) {
      margin-top: 0;
      padding: 0 32px;
    }
  }

  .form-fields {
    margin-top: -8px;

    @media (min-width: $screen-md) {
      margin-top: -16px;
    }
  }

  .form-group {
    margin-top: 8px;

    @media (min-width: $screen-md) {
      margin-top: 16px;
    }

    &.has-error {
      .help-block-error {
        display: block;
      }
    }
  }

  .help-block-error {
    color: #ff5a47;
    display: none;

    &:before {
      content: "\e822";
      display: inline-block;
      font-family: fontello;
      font-style: normal;
      font-variant: normal;
      font-weight: 400;
      line-height: 1em;
      margin-right: .2em;
      speak: none;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
      width: 1em;
    }
  }

  .logos {
    margin-top: 16px;
    margin-bottom: 32px;
  }

  .link-item {
    a {
      color: $color-blue-general;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .description {
      display: none;
      margin-bottom: 16px;
    }

    &.active {
      .description {
        display: block;
        @media (min-width: $screen-md) {
          display: none;
        }
      }
    }
  }
}

// Карта с адресами
.map-widget-module {

  .block {
    padding-bottom: 0;
    padding-top: 0;
  }

  .city-map {
    background-color: #fff;
    height: 300px;

    @media (min-width: $screen-sm) {
      height: 590px;
    }
  }

  .map-content {
    position: relative;

    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .map-container {
    position: relative;
  }

  .how-link {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;

      @media (min-width: $screen-md) {
        display: none;
      }

    }
  }

  .address-block {
    display: none;

    @media (min-width: $screen-md) {
      background-color: #fff;
      left: 0;
      max-height: 500px;
      overflow-y: auto;
      padding: 30px 32px;
      position: absolute;
      top: -436px;
      width: 416px;
    }
  }

  .address-list {
    @media (min-width: $screen-md) {
      display: none;
    }

    .address {
      border-bottom: 1px solid $color-black-light;
      padding: 22px 16px;
      position: relative;

      @media (min-width: $screen-sm) {
        padding: 22px 32px;
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }

  .icon {
    margin-left: -3px;
  }

  .metro {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .visit {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    .icon {
      font-size: 13px;
    }

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .phone-link {
    display: inline-block;
    margin: 16px 32px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      margin-right: 0;
      padding: 0 16px;
      position: absolute;
      right: 0;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      margin-right: 32px;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .map-link {
    display: inline-block;
    margin: 16px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      padding: 0 16px;
      position: absolute;
      right: 191px;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .photos {
    overflow: hidden;
    margin-right: -1px;
    margin-top: 16px;

    .image-position {
      font-size: 0;
      line-height: 0;
      position: relative;
    }

    .media-item {
      border-right: 2px solid #fff;
      float: left;
      width: 50%;
      overflow: hidden;

      .image {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
      }

      &:nth-child(n+3) {
        display: none;
      }
    }

    .image-ratio {
      padding-top: $default-ratio;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .plan {
    color: $color-black-general;
    display: block;
    margin-top: 16px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.view {
    .address-block {
      @media (min-width: $screen-md) {
        display: block;
      }
    }
  }
}

.map-module {

  .block {
    padding-bottom: 0;
    padding-top: 0;
  }

  .city-map {
    background-color: #fff;
    height: 300px;

    @media (min-width: $screen-sm) {
      height: 500px;
    }
    @media (min-width: $screen-md) {
      height: 670px;
    }
  }

  .map-content {
    position: relative;

    @media (min-width: $screen-sm) {
      padding: 0;
    }
  }

  .address-block {
    display: none;

    @media (min-width: $screen-md) {
      left: 0;
      max-height: 500px;
      overflow-y: auto;
      margin-top: 32px;
      position: absolute;
      top: -600px;
      width: 416px;
    }

    .address {
      background-color: #fff;
    }
  }

  .address-list-link {
    background-color: #fff;
    border-bottom: 1px solid $color-black-light;
    cursor: pointer;
    display: none;
    line-height: 38px;
    padding: 0 16px;

    @media (min-width: $screen-sm) {
      padding: 0 32px;
    }

    .icon {
      font-size: 12px;
      margin-right: 8px;
    }
  }

  .address-list {

    @media (min-width: $screen-md) {
      background-color: #fff;
      display: block;
      max-height: 500px;
      overflow-y: auto;
      position: absolute;
      top: -600px;
      width: 416px;
    }
  }

  .address {
    border-bottom: 1px solid $color-black-light;
    cursor: pointer;
    padding: 22px 16px;
    position: relative;

    @media (min-width: $screen-sm) {
      padding: 22px 32px;
    }

    &:last-child {
      border-bottom: 0;
    }

    &:hover {
      background-color: $color-black-97;
    }
  }

  .icon {
    width: 17px;
    margin-left: -3px;
  }

  .metro {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .visit {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    line-height: 1.72;

    @media (min-width: $screen-sm) {
      width: 250px;
    }
    @media (min-width: $screen-md) {
      width: auto;
    }
  }

  .phone-link {
    display: inline-block;
    margin: 16px 32px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      margin-right: 0;
      padding: 0 16px;
      position: absolute;
      right: 0;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      margin-right: 32px;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .map-link {
    display: inline-block;
    margin: 16px 0 0;
    white-space: nowrap;

    @media (min-width: $screen-sm) {
      bottom: 22px;
      border: 1px solid $color-black-light;
      border-radius: 5px;
      line-height: 40px;
      padding: 0 16px;
      position: absolute;
      right: 191px;
    }
    @media (min-width: $screen-md) {
      border: 0;
      line-height: inherit;
      padding: 0;
      position: static;
    }

    a {
      color: $color-black-general;
      text-decoration: none;

      &:hover, &:active {
        color: $color-black-general;
      }
    }
  }

  .photos {
    overflow: hidden;
    margin-right: -1px;
    margin-top: 16px;

    .image-position {
      font-size: 0;
      line-height: 0;
      position: relative;
    }

    .media-item {
      border-right: 2px solid #fff;
      float: left;
      width: 50%;
      overflow: hidden;

      .image {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
      }

      &:nth-child(n+3) {
        display: none;
      }
    }

    .image-ratio {
      padding-top: $default-ratio;
    }

    .swipebox {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .plan {
    color: $color-black-general;
    display: block;
    margin-top: 16px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.view {

    .address-list-link {
      display: block;
    }

    .address-block {
      display: block;

      &.single {
        .address-list-link {
          display: none;
        }
      }

    }

    .address-list {
      display: none;
    }
  }

}

 .button-description {
	font-size: 14px;
    font-weight: bold;
	text-transform: uppercase;
    }
	
	
	 .action-1 {
	padding-top:10px; 
	font-family:Akrobat;
	font-style: normal;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    text-transform: uppercase;
    }
		 .action-2 {
	padding-top:10px; 
	font-family:Akrobat;
	font-style: normal;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    text-transform: uppercase;
}
  		 .action-3 {
	padding-top:10px; 
	font-family:Akrobat;
	font-style: normal;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
	text-align:center;
}
  		 .action-4 {
	padding-top:10px; 
	font-style: normal;
    text-align: center;
    font-size: 18px;
    font-family: 'Akrobat';
}
  		 .action-5 {
    padding-top: 10px;
    font-style: normal;
    text-align: center;
    font-size: 18px;
    font-family: 'Akrobat';
    font-weight: bold;
    color: #f60303;
}
  		 .action-6 {
    padding-top: 10px;
    font-style: normal;
    text-align: center;
    font-size: 18px;
    font-family: 'Akrobat';
    font-weight: bold;
}

	.action-7 {
	padding-top:10px; 
	font-family:Akrobat;
	font-style: normal;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
}
  		 .action-8 {
	padding-top:10px; 
	font-style: normal;
    font-size: 18px;
    font-family: 'Akrobat';
}
  		 .action-9 {
	font-style: normal;
    font-size: 18px;
    font-family: 'Akrobat';
	    padding-top: 0;
		font-weight:bold;
}
  		 .action-10 {
	padding-top:10px; 
	font-family:Akrobat;
	font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.2;
	text-align:center;
	    text-transform: uppercase;
}
  		 .action-11 {
	padding-top:10px; 
	padding-bottom:10px; 
	font-family:Akrobat;
	font-style: normal;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
	text-align:center;
	
}
  		 .action-12 {
	padding-top:10px; 
	font-style: normal;
    font-size: 18px;
    font-family: 'Akrobat';
	
}

  		 .action-13 {
	font-style: normal;
    color: #9a9a9a;
    font-family: 'Akrobat';
	
}



  /* Three columns side by side */
.column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
    .column {
        width: 100%;
        display: block;
    }
}

/* Add some shadows to create a card effect */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
    padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.title {
    color: grey;
}

.table_blur {
    background: #ffffff;
    border-collapse: collapse;
    text-align: left;
	font-style: normal;
    font-size: 18px;
    font-family: 'Akrobat';
	font-weight:600;
}
.table_blur {
    background: #ffffff;
    border-collapse: collapse;
    text-align: left;
}
.table_blur td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    position: relative;
    transition: all 0.5s ease;
}