/* ==== START: css/reset.css (вложенный @import из 0ms_dev_1.css) ==== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	/* align-self: auto; */
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	font-size: 10px;
}	
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:focus {
	outline: 0;
}
a, :link, :visited {
	text-decoration: none;
}
a img, :link img, :visited img {
	border: none;
}
body, div, article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, ol, li, [class^='section_']:before, [class^='section_']:after, [class^='block_']:before, [class^='block_']:after, input, select {
	box-sizing: border-box;
}
/* ==== END: css/reset.css ==== */

/* ==== START: css/animate.css (вложенный @import из 0ms_dev_1.css) ==== */
@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

/* @media (print), (prefers-reduced-motion: reduce) { */
  /* .animated { */
    /* -webkit-animation-duration: 1ms !important; */
    /* animation-duration: 1ms !important; */
    /* -webkit-transition-duration: 1ms !important; */
    /* transition-duration: 1ms !important; */
    /* -webkit-animation-iteration-count: 1 !important; */
    /* animation-iteration-count: 1 !important; */
  /* } */
/* } */
/* ==== END: css/animate.css ==== */

/* ==== START: css/my_font.css (вложенный @import из 0ms_dev_1.css) ==== */
@font-face {
  font-family: 'my_font';
  src: url('../font/my_font.eot');
  src: url('../font/my_font.eot#iefix') format('embedded-opentype'),
    url('../font/my_font.woff2') format('woff2'),
    url('../font/my_font.woff') format('woff'),
    url('../font/my_font.ttf') format('truetype'),
    url('../font/my_font.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Добавь эту строку */
}


/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "my_font";
  font-style: normal;
  font-weight: normal;
  speak: never;

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

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-mail:before { content: '\e800'; } /* '' */
.icon-down-dir:before { content: '\e801'; } /* '' */
.icon-up-dir:before { content: '\e802'; } /* '' */
.icon-right-dir:before { content: '\e803'; } /* '' */
.icon-left-dir:before { content: '\e804'; } /* '' */
.icon-left-open:before { content: '\e805'; } /* '' */
.icon-down-open:before { content: '\e806'; } /* '' */
.icon-right-open:before { content: '\e807'; } /* '' */
.icon-up-open:before { content: '\e808'; } /* '' */
.icon-down-big:before { content: '\e809'; } /* '' */
.icon-left-big:before { content: '\e80a'; } /* '' */
.icon-right-big:before { content: '\e80b'; } /* '' */
.icon-up-big:before { content: '\e80c'; } /* '' */
.icon-basket:before { content: '\e80d'; } /* '' */
.icon-phone:before { content: '\e80e'; } /* '' */
.icon-lock:before { content: '\e80f'; } /* '' */
.icon-lock-open:before { content: '\e810'; } /* '' */
.icon-search:before { content: '\e811'; } /* '' */
.icon-twitter-squared:before { content: '\e812'; } /* '' */
.icon-floppy:before { content: '\e813'; } /* '' */
.icon-check:before { content: '\e814'; } /* '' */
.icon-credit-card:before { content: '\e815'; } /* '' */
.icon-key:before { content: '\e816'; } /* '' */
.icon-chart-bar:before { content: '\e817'; } /* '' */
.icon-asterisk:before { content: '\e818'; } /* '' */
.icon-star:before { content: '\e819'; } /* '' */
.icon-star-empty:before { content: '\e81a'; } /* '' */
.icon-heart-empty:before { content: '\e81b'; } /* '' */
.icon-heart:before { content: '\e81c'; } /* '' */
.icon-camera-alt:before { content: '\e81d'; } /* '' */
.icon-camera:before { content: '\e81e'; } /* '' */
.icon-ok:before { content: '\e81f'; } /* '' */
.icon-ok-circled:before { content: '\e820'; } /* '' */
.icon-ok-circled2:before { content: '\e821'; } /* '' */
.icon-cancel:before { content: '\e822'; } /* '' */
.icon-help-circled:before { content: '\e823'; } /* '' */
.icon-bell:before { content: '\e824'; } /* '' */
.icon-eye:before { content: '\e825'; } /* '' */
.icon-resize-full:before { content: '\e826'; } /* '' */
.icon-resize-small:before { content: '\e827'; } /* '' */
.icon-cog:before { content: '\e828'; } /* '' */
.icon-cog-alt:before { content: '\e829'; } /* '' */
.icon-bookmark:before { content: '\e82a'; } /* '' */
.icon-user:before { content: '\e82b'; } /* '' */
.icon-location:before { content: '\e82c'; } /* '' */
.icon-home:before { content: '\e82d'; } /* '' */
.icon-link:before { content: '\e82e'; } /* '' */
.icon-megaphone:before { content: '\e82f'; } /* '' */
.icon-attach:before { content: '\e830'; } /* '' */
.icon-pin:before { content: '\e831'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-info-circled:before { content: '\e832'; } /* '' */
.icon-trash-empty:before { content: '\e833'; } /* '' */
.icon-barcode:before { content: '\e834'; } /* '' */
.icon-clock:before { content: '\e835'; } /* '' */
.icon-logout:before { content: '\e836'; } /* '' */
.icon-login:before { content: '\e837'; } /* '' */
.icon-spin5:before { content: '\e838'; } /* '' */
.icon-tag:before { content: '\e838'; } /* '' */
.icon-qrcode:before { content: '\e839'; } /* '' */
.icon-calendar:before { content: '\e83a'; } /* '' */
.icon-login-1:before { content: '\e83b'; } /* '' */
.icon-logout-1:before { content: '\e83c'; } /* '' */
.icon-lightbulb-1:before { content: '\e83d'; } /* '' */
.icon-paper-plane:before { content: '\e83e'; } /* '' */
.icon-tags:before { content: '\e83f'; } /* '' */
.icon-flag:before { content: '\e840'; } /* '' */
.icon-plus:before { content: '\e841'; } /* '' */
.icon-minus:before { content: '\e842'; } /* '' */
.icon-chat:before { content: '\e843'; } /* '' */
.icon-comment:before { content: '\e844'; } /* '' */
.icon-search-1:before { content: '\e845'; } /* '' */
.icon-check-1:before { content: '\e846'; } /* '' */
.icon-cancel-1:before { content: '\e847'; } /* '' */
.icon-briefcase:before { content: '\e848'; } /* '' */
.icon-star-half:before { content: '\e849'; } /* '' */
.icon-forward:before { content: '\e84a'; } /* '' */
.icon-eye-off:before { content: '\e84b'; } /* '' */
.icon-right-hand:before { content: '\e84c'; } /* '' */
.icon-left-hand:before { content: '\e84d'; } /* '' */
.icon-up-hand:before { content: '\e84e'; } /* '' */
.icon-down-hand:before { content: '\e84f'; } /* '' */
.icon-truck:before { content: '\e850'; } /* '' */
.icon-sun:before { content: '\e851'; } /* '' */
.icon-sun-filled:before { content: '\e852'; } /* '' */
.icon-gift:before { content: '\e853'; } /* '' */
.icon-picture:before { content: '\e854'; } /* '' */
.icon-login-2:before { content: '\f02c'; } /* '' */
.icon-logout-2:before { content: '\f02d'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-bookmark-empty:before { content: '\f097'; } /* '' */
.icon-phone-squared:before { content: '\f098'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-certificate:before { content: '\f0a3'; } /* '' */
.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-resize-full-alt:before { content: '\f0b2'; } /* '' */
.icon-blank:before { content: '\f0c8'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-money:before { content: '\f0d6'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-comment-empty:before { content: '\f0e5'; } /* '' */
.icon-chat-empty:before { content: '\f0e6'; } /* '' */
.icon-sitemap:before { content: '\f0e8'; } /* '' */
.icon-lightbulb:before { content: '\f0eb'; } /* '' */
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-doc-text:before { content: '\f0f6'; } /* '' */
.icon-angle-double-left:before { content: '\f100'; } /* '' */
.icon-angle-double-right:before { content: '\f101'; } /* '' */
.icon-angle-double-up:before { content: '\f102'; } /* '' */
.icon-angle-double-down:before { content: '\f103'; } /* '' */
.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-circle-empty:before { content: '\f10c'; } /* '' */
.icon-quote-left:before { content: '\f10d'; } /* '' */
.icon-quote-right:before { content: '\f10e'; } /* '' */
.icon-circle:before { content: '\f111'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */
.icon-smile:before { content: '\f118'; } /* '' */
.icon-frown:before { content: '\f119'; } /* '' */
.icon-meh:before { content: '\f11a'; } /* '' */
.icon-flag-empty:before { content: '\f11d'; } /* '' */
.icon-star-half-alt:before { content: '\f123'; } /* '' */
.icon-direction:before { content: '\f124'; } /* '' */
.icon-fork:before { content: '\f126'; } /* '' */
.icon-help:before { content: '\f128'; } /* '' */
.icon-info:before { content: '\f129'; } /* '' */
.icon-attention-alt:before { content: '\f12a'; } /* '' */
.icon-calendar-empty:before { content: '\f133'; } /* '' */
.icon-rocket:before { content: '\f135'; } /* '' */
.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-lock-open-alt:before { content: '\f13e'; } /* '' */
.icon-ellipsis:before { content: '\f141'; } /* '' */
.icon-ellipsis-vert:before { content: '\f142'; } /* '' */
.icon-ok-squared:before { content: '\f14a'; } /* '' */
.icon-euro:before { content: '\f153'; } /* '' */
.icon-pound:before { content: '\f154'; } /* '' */
.icon-dollar:before { content: '\f155'; } /* '' */
.icon-yen:before { content: '\f157'; } /* '' */
.icon-rouble:before { content: '\f158'; } /* '' */
.icon-bitcoin:before { content: '\f15a'; } /* '' */
.icon-youtube:before { content: '\f167'; } /* '' */
.icon-instagram-1:before { content: '\f16d'; } /* '' */
.icon-tumblr:before { content: '\f173'; } /* '' */
.icon-tumblr-squared:before { content: '\f174'; } /* '' */
.icon-down:before { content: '\f175'; } /* '' */
.icon-up:before { content: '\f176'; } /* '' */
.icon-left:before { content: '\f177'; } /* '' */
.icon-right:before { content: '\f178'; } /* '' */
.icon-skype:before { content: '\f17e'; } /* '' */
.icon-vkontakte:before { content: '\f189'; } /* '' */
.icon-dot-circled:before { content: '\f192'; } /* '' */
.icon-try:before { content: '\f195'; } /* '' */
.icon-graduation-cap:before { content: '\f19d'; } /* '' */
.icon-paw:before { content: '\f1b0'; } /* '' */
.icon-tree:before { content: '\f1bb'; } /* '' */
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
.icon-file-word:before { content: '\f1c2'; } /* '' */
.icon-file-excel:before { content: '\f1c3'; } /* '' */
.icon-file-powerpoint:before { content: '\f1c4'; } /* '' */
.icon-file-image:before { content: '\f1c5'; } /* '' */
.icon-file-archive:before { content: '\f1c6'; } /* '' */
.icon-file-audio:before { content: '\f1c7'; } /* '' */
.icon-file-video:before { content: '\f1c8'; } /* '' */
.icon-wechat:before { content: '\f1d7'; } /* '' */
.icon-paper-plane-1:before { content: '\f1d8'; } /* '' */
.icon-paper-plane-empty:before { content: '\f1d9'; } /* '' */
.icon-circle-thin:before { content: '\f1db'; } /* '' */
.icon-cc-visa:before { content: '\f1f0'; } /* '' */
.icon-cc-mastercard:before { content: '\f1f1'; } /* '' */
.icon-cc-amex:before { content: '\f1f3'; } /* '' */
.icon-cc-paypal:before { content: '\f1f4'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */
.icon-at:before { content: '\f1fa'; } /* '' */
.icon-chart-area:before { content: '\f1fe'; } /* '' */
.icon-chart-pie:before { content: '\f200'; } /* '' */
.icon-chart-line:before { content: '\f201'; } /* '' */
.icon-toggle-off:before { content: '\f204'; } /* '' */
.icon-toggle-on:before { content: '\f205'; } /* '' */
.icon-cart-plus:before { content: '\f217'; } /* '' */
.icon-cart-arrow-down:before { content: '\f218'; } /* '' */
.icon-diamond:before { content: '\f219'; } /* '' */
.icon-street-view:before { content: '\f21d'; } /* '' */
.icon-heartbeat:before { content: '\f21e'; } /* '' */
.icon-facebook-official:before { content: '\f230'; } /* '' */
.icon-whatsapp:before { content: '\f232'; } /* '' */
.icon-balance-scale:before { content: '\f24e'; } /* '' */
.icon-trademark:before { content: '\f25c'; } /* '' */
.icon-odnoklassniki:before { content: '\f263'; } /* '' */
.icon-odnoklassniki-square:before { content: '\f264'; } /* '' */
.icon-commenting:before { content: '\f27a'; } /* '' */
.icon-commenting-o:before { content: '\f27b'; } /* '' */
.icon-credit-card-alt:before { content: '\f283'; } /* '' */
.icon-shopping-bag:before { content: '\f290'; } /* '' */
.icon-handshake-o:before { content: '\f2b5'; } /* '' */
.icon-envelope-open:before { content: '\f2b6'; } /* '' */
.icon-envelope-open-o:before { content: '\f2b7'; } /* '' */
.icon-user-o:before { content: '\f2c0'; } /* '' */
.icon-telegram:before { content: '\f2c6'; } /* '' */
.icon-window-close:before { content: '\f2d3'; } /* '' */
.icon-window-close-o:before { content: '\f2d4'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
/* ==== END: css/my_font.css ==== */

/* ==== START: css/Font_Awesome_5_Free.css ==== */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* Замени fallback на swap */
    src: url("../webfonts/fa-regular-400.eot");
    src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), 
         url("../webfonts/fa-regular-400.woff2") format("woff2"), 
         url("../webfonts/fa-regular-400.woff") format("woff"), 
         url("../webfonts/fa-regular-400.ttf") format("truetype"), 
         url("../webfonts/fa-regular-400.svg#fontawesome") format("svg");
}
  
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap; /* Замени fallback на swap */
    src: url("../webfonts/fa-solid-900.eot");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), 
         url("../webfonts/fa-solid-900.woff2") format("woff2"), 
         url("../webfonts/fa-solid-900.woff") format("woff"), 
         url("../webfonts/fa-solid-900.ttf") format("truetype"), 
         url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
/* ==== END: css/Font_Awesome_5_Free.css ==== */



:root {
  /* --bg_section_pic: #0094ff66; */
  --bg_section_pic: rgba(0, 148, 255, 0.4);
  --bg_block_gradient: linear-gradient(180deg, rgba(154, 193, 241, 0.59) 0%, rgba(255, 255, 255, 0) 100%);
  --bg_section: #2B6691;
  --font_color: #2B6691;
  --font_color_light: #fff;
  --font_color_dark: #2B6691;
  /* color: #395E95; */

  --col_gap_zero: 0px;

  --root-base-font-size: 10px;
}


body, header, footer, nav, main, section, aside, ol, li, div {
  /* border: 1px solid red !important; */
}

#ms .gap {
  padding: 0em calc(4% + (100vw - 360px) /100) 3em;
}

#ms .blog {
  padding: 2em calc(4% + (100vw - 360px) /100) 3em;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

#ms body {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  font-family: 'Cuprum', sans-serif;
  /* font-family: 'Oswald', sans-serif; */
}

#ms header.header {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 1em;
  width: 100%;
  line-height: 1.3;
  font-size: 2.5em;
  color: var(--font_color_light);
  position: fixed;
  /* position: sticky; */
  /* position: absolute; */
  z-index: 1;
  transition: all 0.5s;
  /* background-color: none; */
}
#ms header.header--bg-add, #ms header.header--bg-visibility {
/* background-color: #fff; */
/* color: var(--font_color_dark); */
/* box-shadow: 0 1px #dadada; */
background-color: #030b0e;
color: var(--font_color_light);
box-shadow: 0 1px #006292;
}
#ms header.header--hidden {
  transform: translateY(-300%);
}
#ms header.header:hover {
  /* background: #fff;
  color: var(--font_color_dark); */
  background-color: #030b0e;
  color: var(--font_color_light);
}
#ms header.header--menu-more-open {
  /* background: #fff;
  color: var(--font_color_dark); */
  background-color: #030b0e;
  color: var(--font_color_light);
}

#ms header div.header__logo {
  position: relative;
  display: flex;
  align-items: center;
}
#ms header div.header__logo--icon::before {
  display: flex;
  align-self: center;
  font-family: 'Font Awesome 5 Free';
  content: '\f568';
  font-weight: 900;
  font-size: 90%;
  padding: 0 0.5em 0 0;
}
#ms header div.header__logo--img::before {
content: '';
/* background-image: url(); */
background-image: var(--img-url);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 100%;
width: 100%;
min-height: 2em;
min-width: 6.5em
}


#ms address.header__address {
  display: flex;
  flex-direction: row;
  align-self: center;
}
#ms address.header__address > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 0;
  white-space: nowrap;
  padding: 0 0 0 0.5em;
}
#ms address.header__address > a.icon-phone-squared::before {
  font-size: 150%;
}  
#ms address.header__address > a.icon-phone-squared:hover::before {
  animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation;
}
@keyframes trambling-animation {
  0%, 50%, 100% {
      transform: rotate(0deg);
  }
  10%, 30% {
      transform: rotate(-10deg);
  }
  20%, 40% {
      transform: rotate(10deg);
  }
} 

#ms footer {
  background: black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c8c8c8;
  padding: 1em;
  line-height: 1.3;
  font-size: 2.5em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

#ms footer.footer p, #ms footer.footer a {
  /* padding: 0; */
  /* font-size: 60%; */
}
#ms footer.footer a:hover {
  color: #00ff7b;
}
#ms p.footer__copyright::before {
  content: "©";
  padding: 0 0.25em 0 0;
}



#ms section {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: 2.5em;
  margin: 0;

  --col_gap: var(--col_gap_zero);
}


#ms .column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: auto;
  
  align-self: center;
  gap: var(--col_gap);
}
#ms .columns-1 {
  column-count: 1;
  column-gap: 0;
}
#ms .columns-2 {
  column-count: 2;
  column-gap: 0;
}
#ms .columns-3 {
  column-count: 3;
  column-gap: 0;
}
#ms .columns-4 {
  column-count: 4;
  column-gap: 0;
}


#ms .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: var(--col_gap);
}
#ms .row-nowrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  gap: var(--col_gap);
}

#ms .item-1 {
  width: 100%;
  /* height: auto; */
}
#ms .item-2 {
  width: calc((100% - var(--col_gap))/2 - 0.1px);
  /* height: auto; */
}
#ms .item-3 {
  width: calc((100% - var(--col_gap)*2)/3 - 0.1px);
  /* height: auto; */
}
#ms .item-4 {
  width: calc((100% - var(--col_gap)*3)/4 - 0.1px);
  /* height: auto; */
}





#ms h1, #ms h2, #ms h3, #ms h4, #ms h5, #ms h6 {
  padding: 0.25em 0;
  font-family: 'Oswald', sans-serif;
}


#ms p {
  font-size: 100%;
  padding: 0.75em 0;
}

#ms a {
  font-size: 100%;
  color: inherit;
  text-decoration: none;
}

#ms a:visited {
  color: inherit;
}

#ms ol {
  padding: 0;
  /* padding: 0 0.75em; */
}
#ms ol > li {
  display: list-item;
  list-style: disc;
  list-style-position: inside;
}


/* Для секции */
#ms .s-center { align-items: center; }
#ms .s-left { align-items: start; }
#ms .s-right { align-items: end; }
#ms .s-auto { align-self:auto; }

/* Для блока */
/* #ms .b-center { align-self: center; } */
#ms .b-center { align-self: center; justify-content: center;}
#ms .b-left { align-self: start; }
#ms .b-right { align-self: end; }
#ms .b-auto { align-self: auto; }
/* #ms .b-auto { align-self:auto; flex-grow: 1;} */

/* Для текста */
#ms .t-center { text-align: center; }
#ms .t-left { text-align: left; }
#ms .t-right { text-align: right; }
#ms .t-justify { text-align: justify; }






#ms .fw-100 { font-weight: 100; }
#ms .fw-200 { font-weight: 200; }
#ms .fw-300 { font-weight: 300; }
#ms .fw-400 { font-weight: 400; }
#ms .fw-500 { font-weight: 500; }
#ms .fw-600 { font-weight: 600; }
#ms .fw-700 { font-weight: 700; }
#ms .fw-800 { font-weight: 800; }
#ms .fw-900 { font-weight: 900; }




#ms .font-size-50 { font-size: calc(50% + ((100vw - 360px) / 240)); }
#ms .font-size-60 { font-size: calc(60% + ((100vw - 360px) / 240)); }
#ms .font-size-70 { font-size: calc(70% + ((100vw - 360px) / 240)); }
#ms .font-size-80 { font-size: calc(80% + ((100vw - 360px) / 240)); }
#ms .font-size-90 { font-size: calc(90% + ((100vw - 360px) / 240)); }
#ms .font-size-100 { font-size: calc(100% + ((100vw - 360px) / 240)); }
#ms .font-size-105 { font-size: calc(105% + ((100vw - 360px) / 240)); }
#ms .font-size-110 { font-size: calc(110% + ((100vw - 360px) / 240)); }
#ms .font-size-115 { font-size: calc(115% + ((100vw - 360px) / 240)); }
#ms .font-size-120 { font-size: calc(120% + ((100vw - 360px) / 240)); }
#ms .font-size-125 { font-size: calc(125% + ((100vw - 360px) / 240)); }
#ms .font-size-130 { font-size: calc(130% + ((100vw - 360px) / 240)); }
#ms .font-size-140 { font-size: calc(140% + ((100vw - 360px) / 240)); }
#ms .font-size-145 { font-size: calc(145% + ((100vw - 360px) / 240)); }
#ms .font-size-150 { font-size: calc(150% + ((100vw - 360px) / 240)); }
#ms .font-size-160 { font-size: calc(160% + ((100vw - 360px) / 240)); }
#ms .font-size-180 { font-size: calc(180% + ((100vw - 360px) / 240)); }
#ms .font-size-200 { font-size: calc(200% + ((100vw - 360px) / 240)); }
#ms .font-size-210 { font-size: calc(210% + ((100vw - 360px) / 240)); }
#ms .font-size-220 { font-size: calc(220% + ((100vw - 360px) / 240)); }
#ms .font-size-230 { font-size: calc(230% + ((100vw - 360px) / 240)); }
#ms .font-size-240 { font-size: calc(240% + ((100vw - 360px) / 240)); }
#ms .font-size-250 { font-size: calc(250% + ((100vw - 360px) / 240)); }
#ms .font-size-260 { font-size: calc(260% + ((100vw - 360px) / 240)); }
#ms .font-size-270 { font-size: calc(270% + ((100vw - 360px) / 240)); }
#ms .font-size-280 { font-size: calc(280% + ((100vw - 360px) / 240)); }
#ms .font-size-290 { font-size: calc(290% + ((100vw - 360px) / 240)); }
#ms .font-size-300 { font-size: calc(300% + ((100vw - 360px) / 240)); }


#ms .p-0 { padding: 0; }
#ms .p-010 { padding: 0.1em; }
#ms .p-015 { padding: 0.15em; }
#ms .p-020 { padding: 0.2em; }
#ms .p-025 { padding: 0.25em; }
#ms .p-030 { padding: 0.3em; }
#ms .p-035 { padding: 0.35em; }
#ms .p-040 { padding: 0.4em; }
#ms .p-045 { padding: 0.45em; }
#ms .p-050 { padding: 0.5em; }
#ms .p-055 { padding: 0.55em; }
#ms .p-060 { padding: 0.6em; }
#ms .p-065 { padding: 0.65em; }
#ms .p-070 { padding: 0.7em; }
#ms .p-075 { padding: 0.75em; }
#ms .p-080 { padding: 0.8em; }
#ms .p-085 { padding: 0.85em; }
#ms .p-090 { padding: 0.9em; }
#ms .p-095 { padding: 0.95em; }
#ms .p-100 { padding: 1em; }
#ms .p-125 { padding: 1.25em; }
#ms .p-150 { padding: 1.5em; }
#ms .p-175 { padding: 1.75em; }
#ms .p-200 { padding: 2em; }
#ms .p-225 { padding: 2.25em; }
#ms .p-250 { padding: 2.5em; }
#ms .p-275 { padding: 2.75em; }
#ms .p-300 { padding: 3em; }
#ms .p-400 { padding: 4em; }
#ms .p-500 { padding: 5em; }
#ms .p-600 { padding: 6em; }
#ms .p-700 { padding: 7em; }
#ms .p-800 { padding: 8em; }
#ms .p-900 { padding: 9em; }
#ms .p-1000 { padding: 10em; }


#ms .px-0 { padding-left: 0; padding-right: 0; }
#ms .px-010 { padding-left: 0.1em; padding-right: 0.1em; }
#ms .px-015 { padding-left: 0.15em; padding-right: 0.15em; }
#ms .px-020 { padding-left: 0.2em; padding-right: 0.2em; }
#ms .px-025 { padding-left: 0.25em; padding-right: 0.25em; }
#ms .px-030 { padding-left: 0.3em; padding-right: 0.3em; }
#ms .px-035 { padding-left: 0.35em; padding-right: 0.35em; }
#ms .px-040 { padding-left: 0.4em; padding-right: 0.4em; }
#ms .px-045 { padding-left: 0.45em; padding-right: 0.45em; }
#ms .px-050 { padding-left: 0.5em; padding-right: 0.5em; }
#ms .px-055 { padding-left: 0.55em; padding-right: 0.55em; }
#ms .px-060 { padding-left: 0.6em; padding-right: 0.6em; }
#ms .px-065 { padding-left: 0.65em; padding-right: 0.65em; }
#ms .px-070 { padding-left: 0.7em; padding-right: 0.7em; }
#ms .px-075 { padding-left: 0.75em; padding-right: 0.75em; }
#ms .px-080 { padding-left: 0.8em; padding-right: 0.8em; }
#ms .px-085 { padding-left: 0.85em; padding-right: 0.85em; }
#ms .px-090 { padding-left: 0.9em; padding-right: 0.9em; }
#ms .px-095 { padding-left: 0.95em; padding-right: 0.95em; }
#ms .px-100 { padding-left: 1em; padding-right: 1em; }
#ms .px-125 { padding-left: 1.25em; padding-right: 1.25em; }
#ms .px-150 { padding-left: 1.5em; padding-right: 1.5em; }
#ms .px-175 { padding-left: 1.75em; padding-right: 1.75em; }
#ms .px-200 { padding-left: 2em; padding-right: 2em; }
#ms .px-225 { padding-left: 2.25em; padding-right: 2.25em; }
#ms .px-250 { padding-left: 2.5em; padding-right: 2.5em; }
#ms .px-275 { padding-left: 2.75em; padding-right: 2.75em; }
#ms .px-300 { padding-left: 3em; padding-right: 3em; }
#ms .px-400 { padding-left: 4em; padding-right: 4em; }
#ms .px-500 { padding-left: 5em; padding-right: 5em; }
#ms .px-600 { padding-left: 6em; padding-right: 6em; }
#ms .px-700 { padding-left: 7em; padding-right: 7em; }
#ms .px-800 { padding-left: 8em; padding-right: 8em; }
#ms .px-900 { padding-left: 9em; padding-right: 9em; }
#ms .px-1000 { padding-left: 10em; padding-right: 10em; }


#ms .py-0 { padding-top: 0; padding-bottom: 0; }
#ms .py-010 { padding-top: 0.1em; padding-bottom: 0.1em; }
#ms .py-015 { padding-top: 0.15em; padding-bottom: 0.15em; }
#ms .py-020 { padding-top: 0.2em; padding-bottom: 0.2em; }
#ms .py-025 { padding-top: 0.25em; padding-bottom: 0.25em; }
#ms .py-030 { padding-top: 0.3em; padding-bottom: 0.3em; }
#ms .py-035 { padding-top: 0.35em; padding-bottom: 0.35em; }
#ms .py-040 { padding-top: 0.4em; padding-bottom: 0.4em; }
#ms .py-045 { padding-top: 0.45em; padding-bottom: 0.45em; }
#ms .py-050 { padding-top: 0.5em; padding-bottom: 0.5em; }
#ms .py-055 { padding-top: 0.55em; padding-bottom: 0.55em; }
#ms .py-060 { padding-top: 0.6em; padding-bottom: 0.6em; }
#ms .py-065 { padding-top: 0.65em; padding-bottom: 0.65em; }
#ms .py-070 { padding-top: 0.7em; padding-bottom: 0.7em; }
#ms .py-075 { padding-top: 0.75em; padding-bottom: 0.75em; }
#ms .py-080 { padding-top: 0.8em; padding-bottom: 0.8em; }
#ms .py-085 { padding-top: 0.85em; padding-bottom: 0.85em; }
#ms .py-090 { padding-top: 0.9em; padding-bottom: 0.9em; }
#ms .py-095 { padding-top: 0.95em; padding-bottom: 0.95em; }
#ms .py-100 { padding-top: 1em; padding-bottom: 1em; }
#ms .py-125 { padding-top: 1.25em; padding-bottom: 1.25em; }
#ms .py-150 { padding-top: 1.5em; padding-bottom: 1.5em; }
#ms .py-175 { padding-top: 1.75em; padding-bottom: 1.75em; }
#ms .py-200 { padding-top: 2em; padding-bottom: 2em; }
#ms .py-225 { padding-top: 2.25em; padding-bottom: 2.25em; }
#ms .py-250 { padding-top: 2.5em; padding-bottom: 2.5em; }
#ms .py-275 { padding-top: 2.75em; padding-bottom: 2.75em; }
#ms .py-300 { padding-top: 3em; padding-bottom: 3em; }
#ms .py-400 { padding-top: 4em; padding-bottom: 4em; }
#ms .py-500 { padding-top: 5em; padding-bottom: 5em; }
#ms .py-600 { padding-top: 6em; padding-bottom: 6em; }
#ms .py-700 { padding-top: 7em; padding-bottom: 7em; }
#ms .py-800 { padding-top: 8em; padding-bottom: 8em; }
#ms .py-900 { padding-top: 9em; padding-bottom: 9em; }
#ms .py-1000 { padding-top: 10em; padding-bottom: 10em; }


#ms .pt-0 { padding-top: 0; }
#ms .pt-010 { padding-top: 0.1em; }
#ms .pt-015 { padding-top: 0.15em; }
#ms .pt-020 { padding-top: 0.2em; }
#ms .pt-025 { padding-top: 0.25em; }
#ms .pt-030 { padding-top: 0.3em; }
#ms .pt-035 { padding-top: 0.35em; }
#ms .pt-040 { padding-top: 0.4em; }
#ms .pt-045 { padding-top: 0.45em; }
#ms .pt-050 { padding-top: 0.5em; }
#ms .pt-055 { padding-top: 0.55em; }
#ms .pt-060 { padding-top: 0.6em; }
#ms .pt-065 { padding-top: 0.65em; }
#ms .pt-070 { padding-top: 0.7em; }
#ms .pt-075 { padding-top: 0.75em; }
#ms .pt-080 { padding-top: 0.8em; }
#ms .pt-085 { padding-top: 0.85em; }
#ms .pt-090 { padding-top: 0.9em; }
#ms .pt-095 { padding-top: 0.95em; }
#ms .pt-100 { padding-top: 1em; }
#ms .pt-125 { padding-top: 1.25em; }
#ms .pt-150 { padding-top: 1.5em; }
#ms .pt-175 { padding-top: 1.75em; }
#ms .pt-200 { padding-top: 2em; }
#ms .pt-225 { padding-top: 2.25em; }
#ms .pt-250 { padding-top: 2.5em; }
#ms .pt-275 { padding-top: 2.75em; }
#ms .pt-300 { padding-top: 3em; }
#ms .pt-350 { padding-top: 3.5em; }
#ms .pt-400 { padding-top: 4em; }
#ms .pt-450 { padding-top: 4.5em; }
#ms .pt-500 { padding-top: 5em; }
#ms .pt-600 { padding-top: 6em; }
#ms .pt-700 { padding-top: 7em; }
#ms .pt-800 { padding-top: 8em; }
#ms .pt-900 { padding-top: 9em; }
#ms .pt-1000 { padding-top: 10em; }


#ms .pb-0 { padding-bottom: 0; }
#ms .pb-010 { padding-bottom: 0.1em; }
#ms .pb-015 { padding-bottom: 0.15em; }
#ms .pb-020 { padding-bottom: 0.2em; }
#ms .pb-025 { padding-bottom: 0.25em; }
#ms .pb-030 { padding-bottom: 0.3em; }
#ms .pb-035 { padding-bottom: 0.35em; }
#ms .pb-040 { padding-bottom: 0.4em; }
#ms .pb-045 { padding-bottom: 0.45em; }
#ms .pb-050 { padding-bottom: 0.5em; }
#ms .pb-055 { padding-bottom: 0.55em; }
#ms .pb-060 { padding-bottom: 0.6em; }
#ms .pb-065 { padding-bottom: 0.65em; }
#ms .pb-070 { padding-bottom: 0.7em; }
#ms .pb-075 { padding-bottom: 0.75em; }
#ms .pb-080 { padding-bottom: 0.8em; }
#ms .pb-085 { padding-bottom: 0.85em; }
#ms .pb-090 { padding-bottom: 0.9em; }
#ms .pb-095 { padding-bottom: 0.95em; }
#ms .pb-100 { padding-bottom: 1em; }
#ms .pb-125 { padding-bottom: 1.25em; }
#ms .pb-150 { padding-bottom: 1.5em; }
#ms .pb-175 { padding-bottom: 1.75em; }
#ms .pb-200 { padding-bottom: 2em; }
#ms .pb-225 { padding-bottom: 2.25em; }
#ms .pb-250 { padding-bottom: 2.5em; }
#ms .pb-275 { padding-bottom: 2.75em; }
#ms .pb-300 { padding-bottom: 3em; }
#ms .pb-400 { padding-bottom: 4em; }
#ms .pb-500 { padding-bottom: 5em; }
#ms .pb-600 { padding-bottom: 6em; }
#ms .pb-700 { padding-bottom: 7em; }
#ms .pb-800 { padding-bottom: 8em; }
#ms .pb-900 { padding-bottom: 9em; }
#ms .pb-1000 { padding-bottom: 10em; }


#ms .pl-0 { padding-left: 0; }
#ms .pl-010 { padding-left: 0.1em; }
#ms .pl-015 { padding-left: 0.15em; }
#ms .pl-020 { padding-left: 0.2em; }
#ms .pl-025 { padding-left: 0.25em; }
#ms .pl-030 { padding-left: 0.3em; }
#ms .pl-035 { padding-left: 0.35em; }
#ms .pl-040 { padding-left: 0.4em; }
#ms .pl-045 { padding-left: 0.45em; }
#ms .pl-050 { padding-left: 0.5em; }
#ms .pl-055 { padding-left: 0.55em; }
#ms .pl-060 { padding-left: 0.6em; }
#ms .pl-065 { padding-left: 0.65em; }
#ms .pl-070 { padding-left: 0.7em; }
#ms .pl-075 { padding-left: 0.75em; }
#ms .pl-080 { padding-left: 0.8em; }
#ms .pl-085 { padding-left: 0.85em; }
#ms .pl-090 { padding-left: 0.9em; }
#ms .pl-095 { padding-left: 0.95em; }
#ms .pl-100 { padding-left: 1em; }
#ms .pl-125 { padding-left: 1.25em; }
#ms .pl-150 { padding-left: 1.5em; }
#ms .pl-175 { padding-left: 1.75em; }
#ms .pl-200 { padding-left: 2em; }
#ms .pl-225 { padding-left: 2.25em; }
#ms .pl-250 { padding-left: 2.5em; }
#ms .pl-275 { padding-left: 2.75em; }
#ms .pl-300 { padding-left: 3em; }
#ms .pl-400 { padding-left: 4em; }
#ms .pl-500 { padding-left: 5em; }
#ms .pl-600 { padding-left: 6em; }
#ms .pl-700 { padding-left: 7em; }
#ms .pl-800 { padding-left: 8em; }
#ms .pl-900 { padding-left: 9em; }
#ms .pl-1000 { padding-left: 10em; }


#ms .pr-0 { padding-right: 0; }
#ms .pr-010 { padding-right: 0.1em; }
#ms .pr-015 { padding-right: 0.15em; }
#ms .pr-020 { padding-right: 0.2em; }
#ms .pr-025 { padding-right: 0.25em; }
#ms .pr-030 { padding-right: 0.3em; }
#ms .pr-035 { padding-right: 0.35em; }
#ms .pr-040 { padding-right: 0.4em; }
#ms .pr-045 { padding-right: 0.45em; }
#ms .pr-050 { padding-right: 0.5em; }
#ms .pr-055 { padding-right: 0.55em; }
#ms .pr-060 { padding-right: 0.6em; }
#ms .pr-065 { padding-right: 0.65em; }
#ms .pr-070 { padding-right: 0.7em; }
#ms .pr-075 { padding-right: 0.75em; }
#ms .pr-080 { padding-right: 0.8em; }
#ms .pr-085 { padding-right: 0.85em; }
#ms .pr-090 { padding-right: 0.9em; }
#ms .pr-095 { padding-right: 0.95em; }
#ms .pr-100 { padding-right: 1em; }
#ms .pr-125 { padding-right: 1.25em; }
#ms .pr-150 { padding-right: 1.5em; }
#ms .pr-175 { padding-right: 1.75em; }
#ms .pr-200 { padding-right: 2em; }
#ms .pr-225 { padding-right: 2.25em; }
#ms .pr-250 { padding-right: 2.5em; }
#ms .pr-275 { padding-right: 2.75em; }
#ms .pr-300 { padding-right: 3em; }
#ms .pr-400 { padding-right: 4em; }
#ms .pr-500 { padding-right: 5em; }
#ms .pr-600 { padding-right: 6em; }
#ms .pr-700 { padding-right: 7em; }
#ms .pr-800 { padding-right: 8em; }
#ms .pr-900 { padding-right: 9em; }
#ms .pr-1000 { padding-right: 10em; }

#ms .max-width-320 { max-width: 320px; width: 100%; }
#ms .max-width-375 { max-width: 375px; width: 100%; }
#ms .max-width-425 { max-width: 425px; width: 100%; }
#ms .max-width-480 { max-width: 480px; width: 100%; }
#ms .max-width-670 { max-width: 670px; width: 100%; }
#ms .max-width-768 { max-width: 768px; width: 100%; }
#ms .max-width-1024 { max-width: 1024px; width: 100%; }
#ms .max-width-1200 { max-width: 1200px; width: 100%; }
#ms .max-width-1440 { max-width: 1440px; width: 100%; }
#ms .max-width-1920 { max-width: 1920px; width: 100%; }

#ms .kvd        { aspect-ratio: 1 / 1; }   /* Квадрат */
#ms .alb        { aspect-ratio: 16 / 9; }  /* Альбом - Современное видео, презентации, YouTube*/
#ms .alb-2      { aspect-ratio: 3 / 2; }   /* Альбом - Фотоаппараты, горизонтальные обложки */
#ms .alb-old    { aspect-ratio: 4 / 3; }   /* Альбом - Старые экраны, ретро */
#ms .prt        { aspect-ratio: 2 / 3; }   /* Портрет - Современные вертикальные фото */
#ms .prt-shorts { aspect-ratio: 9 / 16; }  /* Портрет - Вертикальные видео, Reels, TikTok, YouTube */
#ms .prt-old    { aspect-ratio: 3 / 4; }   /* Портрет - Старые ID-фото, бумажные форматы */

/* Вставка image в html без обертки */
#ms img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* Соотношение сторон 1:1, измените по необходимости */
  object-fit: cover;
  object-position: center;
  background-color: grey;
}
/* Вставка картинки в html с оберткой */
#ms .wrap-img {
  position: relative;
  overflow: hidden;
  padding: 0 0 100% 0;
flex-grow: 1;
}
#ms .wrap-img > img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
  /* top: 0; */
  left: 50%;
  transform: translateX(-50%);
}
/* Вставка картинки внутри абзацев */
#ms p > img.img-left {
  float: left;
  border: 1px solid #c8c8c8;
  margin: 0.3em 0.5em 0 0;
}
#ms p > img.img-right {
  float: right;
  border: 1px solid #c8c8c8;
  margin: 0.3em 0 0 0.5em;
}


/* Вставка background-image JPG-PNG в html */
#ms .bg-img {
  position: relative;
  border-radius: 4px;
}
#ms .bg-img::before {
  background-image: var(--img-url);  /* переменная img-url в html */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(0.1rem);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  height: 100%;
  border: 1px solid #a7a7a7;
}
#ms .bg-img::after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.75) 100%);
  background-position: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(0.1rem);
  height: 100%;
  border: 1px solid #fff;
}



/* Вставка иконки через иконочный шрифт в псевдоэлементе CSS */
#ms .icon-font {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#ms .icon-font::before {
  content: "\f111"; /* обводка - круг */
  font-family: my_font;
  font-size: 4em;
  line-height: 0.87;
  color: #308bf3;
}
#ms .icon-font::after {
  /* font-family: my_font;
  content: "\f219"; */
  content: attr(data-content); /* атрибут data-content в html */
  font-size: 2em;
  position: absolute;
  color: #fff;
}


/* Вставка иконки JPG-PNG через псевдоэлемент в CSS */
#ms .icon-img-url {
  display: flex;
  position: relative;
  min-height: 3.5em;
  min-width: 3.5em;
}
#ms .icon-img-url::before {
  content: '';
  position: absolute;
  background-image: var(--img-url); /* переменная img-url в html */
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  width: 100%;
}

/* Вставка иконки SVG через псевдоэлемент в CSS */
#ms .icon-svg-url {
  display: flex;
  min-height: 3.5em;
  min-width: 3.5em;
  justify-content: center;
  align-items: center;
  /* 
  обводка - круг
  border: 3px solid red;
  border-radius: 64px; 
  */
}
#ms .icon-svg-url::before {
  content: '';
  display: flex;
  position: relative;
  -webkit-mask-image: var(--img-url); /* переменная img-url в html */
  mask-image: var(--img-url); /* переменная img-url в html */
  mask-image: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: #03ab6c;
  min-height: 3.5em;
  min-width: 3.5em;
}

/* Вставка иконки SVG в html */
#ms svg.icon-svg {
  width: 3.5em;
  fill: #03ab6c;
}

/* Вставка иконки JPG-PNG в html */
#ms img.icon-img {
  width: 3.5em;
}




#ms .spoiler {
  cursor: pointer;
}
#ms .is-hidden {
  /* display: none !important; */
  transition: all 1s ease-out;
  max-height: 0;
  overflow: hidden;
  /* transition: max-height 0.5s ease-out; */
  opacity: 0;
}
#ms .is-hidden-hard {
  display: none !important;
}
#ms .hyphens {
  hyphens: auto;
}
#ms .crop {
  text-overflow: ellipsis; /* Добавляем многоточие в конце */
}
#ms .uppercase {
  text-transform: uppercase;
}
#ms .italic {
  font-style: italic;
}

#ms .underline {
  text-decoration: underline;
}

#ms .link-visibly {
text-decoration: underline;
color: deepskyblue;
cursor: pointer;
}






























/* @MEDIA #################### */

@media only screen and (max-width : 670px) {
  #ms header {
    justify-content: space-between;
    padding: 0.5em calc(4% + (100vw - 360px) /100);
  }
  #ms header.header {
    min-height: 4em;
  }

  #ms ol.row li {
    flex-direction: column;
  }



}

















/* @MEDIA #################### */

@media only screen and (min-width:320px) and (max-width:375px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2, #ms .item-1 {
    width: 100%;
  }
  #ms .columns-4, #ms .columns-3, #ms .columns-2 {
    column-count: 1;
  }
  #ms address.header__address {
    display: none;
  }

}

@media only screen and (min-width:376px) and (max-width:480px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2, #ms .item-1 {
    width: 100%;
  }
  #ms .columns-4, #ms .columns-3, #ms .columns-2 {
    column-count: 1;
  }
  #ms address.header__address {
    display: none;
  }
}

@media only screen and (min-width:481px) and (max-width:670px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2 {
    /* width: calc(100%/2); */
    width: calc((100% - var(--col_gap))/2 - 0.1px);
  }
  #ms .columns-4, #ms .columns-3 {
    column-count: 2;
  }

}

@media only screen and (min-width:671px) and (max-width:768px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2 {
    /* width: calc(100%/2); */
    width: calc((100% - var(--col_gap))/2 - 0.1px);
  }
  #ms .columns-4, #ms .columns-3 {
    column-count: 2;
  }
}

@media only screen and (min-width: 769px) and (max-width: 980px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3 {
    /* width: calc(100%/3); */
    width: calc((100% - var(--col_gap)*2)/3 - 0.1px);
  }
  #ms .columns-4 {
    column-count: 3;
  }
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3 {
    /* width: calc(100%/3); */
    width: calc((100% - var(--col_gap)*2)/3 - 0.1px);
  }
  #ms .columns-4 {
    column-count: 3;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --root-base-font-size: 9px;
  }
  html {
    font-size: 9px;
  }
}

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
  :root {
    --root-base-font-size: 9px;
  }
  html {
    font-size: 9px;
  }
}

@media only screen and (min-width: 1367px) and (max-width: 1600px) {
  :root {
    --root-base-font-size: 10px;
  }
  html {
    font-size: 10px;
  }
}

@media only screen and (min-width: 1601px) and (max-width: 1920px) {
  :root {
    --root-base-font-size: 10px;
  }
  html {
    /* font-size: 11px; */
    font-size: 10px;
  }
}

@media only screen and (min-width: 1921px) and (max-width: 2048px) {
  :root {
    --root-base-font-size: 9px;
  }
  html {
    /* font-size: 12px; */
    font-size: 9px;
  }
}

@media only screen and (min-width: 2049px) and (max-width: 2560px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    /* font-size: 16px; */
    /* font-size: 12px; */
    font-size: 8px;
  }
}

@media only screen and (min-width: 2561px) {
  :root {
    --root-base-font-size: 7px;
  }
  html {
    /* font-size: 20px; */
    /* font-size: 12px; */
    font-size: 7px;
  }
}





/* 3440px x 1440px (UltraWide мониторы)
3840px x 2160px (4K, Ultra HD, стандартное разрешение для многих современных мониторов)
5120px x 2880px (5K, некоторые мониторы)
7680px x 4320px (8K, некоторые мониторы) */

/* ==== START: css/menu.css ==== */
nav.header__menu {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  overflow-x: hidden;
  padding: 0 1em;
  white-space: nowrap;
}
nav.header__menu > a {
font-size: 100%;
color: inherit;
text-decoration: none;
padding: 0 1em;
line-height: normal;
}

nav.header__menu--show {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: fixed;
  /* background: #761717; */
  background: #3e0000;
  align-items: center;
  color: #fff;
  z-index: 1;
  /* top: 0; */
  left: 0;
  justify-content: space-between;
  overflow-y: auto;
  padding: 1em 0.75em 0;
}
nav.header__menu--show a {
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid brown;
  width: 100%;
  font-size: 125%;
  box-sizing: border-box;
  padding: 0.75em;
  /* justify-content: center; */
}
nav.header__menu--show a:hover {
  background: #fffc;
  color: #fd0808;
}



button.header__menu-button-hamburger {
  background: #ffffff00;
  border: none;
  color: inherit;
  font-size: 0.5em;
  padding: 0;
  width: 3em;
  height: 4em;
  cursor: pointer;
  display: none;
}
button.header__menu-button-hamburger::before {
  content: "\f0c9";
  font-family: my_font;
  font-size: 2.5em;
  display: block;
}
button.header__menu-button-hamburger--cancel {
  color: red;
  /* position: fixed; */
  z-index: 2;
}
button.header__menu-button-hamburger--cancel::before {
  content: "\e822";
  font-family: my_font;
  font-size: 2.5em;
  display: block;
}




button.header__menu-button-more {
  display: none;
  align-items: center;
  font-family: inherit;
  font-size: 100%;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1em;
}
button.header__menu-button-more::before {
  content: "\e841";
  font-family: my_font;
  font-size: 70%;
  padding: 0 0.25em 0 0;
}
button.header__menu-button-more--cancel::before {
  content: "\e822";
  font-family: my_font;
  font-size: 75%;
  padding: 0 0.25em 0 0;
}





div.header__menu-more {
  display: none;
}
div.header__menu-more--show::before {
  filter: blur(0.1rem);
  position: absolute;
  content: '';
  display: block;
}
div.header__menu-more--show {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
position: absolute;
align-items: center;
/* background:#007cff69; */
/* background: #fff; */
/* color: var(--font_color_dark); */
/* box-shadow: 0 1px #dadada; */
background-color: #030b0e;
color: var(--font_color_light);
box-shadow: 0 1px #006292;
z-index: 1;
left: 0;
justify-content: space-around;
padding: 0 1em;
}
div.header__menu-more--show a {
  padding: 0 1em 1em;
}



  
  
  /* header > nav > a[data-subMenu] {
    font-size: 100%;
    color: inherit;
    text-decoration: none;
  } */
  /* header > nav > a[data-subMenuId]::after {
    content: "\e806";
    font-family: my_font;
    font-size: 70%;
    padding: 0 0.5em;
  } */
  /* header nav a[data-subMenuId]::after {
    content: "\e806";
    font-family: my_font;
    font-size: 70%;
    padding: 0 0.5em;
  } */  
  /* header > nav > nav[data-subMenu] {
  display: none;
  } */
  /* header nav[data-subMenu] {
    display: none;
  } */
  /* header > nav > nav[data-subMenu].show {
    display: flex;
    position: absolute;
    background: #d080e0;
    flex-direction: row;
    width: 100%;
    top: 0;
    left: 0;
    padding: 1em;
    } */
    /* header nav[data-subMenu].show {
      display: flex;
      position: absolute;
      background: #d080e0;
      flex-direction: row;
      width: 100%;
      top: 60px;
      left: 0;
      padding: 1em;
    } */
    /* header > nav > nav[data-subMenu].show > a {
      height: 100%;
      display: flex;
      align-items: center;
      border-bottom: none;
      width: 100%;
      box-sizing: border-box;
      padding: 0 0.75em;
    }   */
  
  /* header > nav.show > nav[data-subMenu] {
    flex-direction: column;
    width: 100%;
    height: 100%;
    display: flex;
    border-bottom: 1px solid brown;
    width: 100%;
    font-size: 1.5em;
    box-sizing: border-box;
    padding: 0.75em;
    justify-content: center;
  } */
  /* header > nav.show > nav.submenu > a {
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: none;
    width: 100%;
    font-size: 26px;
    box-sizing: border-box;
    padding: 0.75em 0.75em 0.75em 1.75em;
  } */
  /* header > nav.show > nav.submenu > a::before {
    content: "\f112";
    font-family: my_font;
    font-size: 80%;
    transform: rotate(180deg);
    padding: 0.5em;
  } */






@media only screen and (max-width : 670px) {

  button.header__menu-button-hamburger {
    display: block;
  }

  nav.header__menu {
    display: none;
  }

  nav.header__menu--show {
    display: flex;
  }
}
/* ==== END: css/menu.css ==== */

/* ==== START: css/modal.css ==== */
:root {
--modal_font_size: 10px;	
}	

body.scroll-delete {
    overflow: hidden;
}

#ms #overlay {
display: none;
position: fixed;
flex-direction: column;
align-items: center;
box-sizing: border-box;
z-index: 200;
background: rgba(0, 0, 0, 0.7) none repeat scroll 0% 0%;
cursor: pointer;
overflow-y: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

/* bottom: -1.5em; */
/* height: calc(var(--vh, 1vh) * 100); */
/* padding: 12.5em 0 0; */
/* margin: 0; */
/* top: 0; */
/* height: 560px; */
/* height: 100vh; */
/* height: 100%; */
/* height: 100%; 
min-height: calc(100% - 0); */
/* height: 100vh;
min-height: 100vh;
transition-property: height, min-height;
transition-duration: .6s;
transition-delay: .1s;
transition-timing-function: ease-in; */
/* min-height: -webkit-fill-available; */
}



#ms #overlay__modal {
display: flex;
padding: 2.5em;
box-sizing: border-box;
font-size: var(--modal_font_size);

text-align: center;
z-index: 300;
pointer-events: auto;
margin: auto;
/* height: calc(var(--vh, 1vh) * 100); */
}
#ms #modal__output {
padding: 4.5em 3.5em 2.5em 3.5em;
display: flex;
flex-direction: column;
background: #fff;
position: relative;
cursor: default;
will-change: transform;
min-width: 0;
min-height: 0;
/* height: calc(var(--vh, 1vh) * 100); */
}


#ms #modal__output.output-ok {
/* box-shadow: 0 0 7em #b3f7b7; */
box-shadow: 0 0 7em #b3f7b700;
}
#ms #modal__output.output-error {
box-shadow: 0 0 7em #ff1010;
}


#ms #buttonCloseModal {
position: absolute;
top: 0;
right: 0;
padding: 0;
box-sizing: border-box;
width: 1.75em;
height: 1.67em;
margin: 0;
font-size: 2em;
display: flex;
z-index: 500;
align-items: center;
align-self: center;
justify-content: center;

background:red;
border: solid 1px #999;
color: #ffffff;
cursor: pointer;
}	

#ms #block_info {
font-size: calc(var(--modal_font_size) * 2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #FFF;
padding: 0.5em 1.5em 0.5em;
}
#ms #block_info > p {
/* margin: 0 0 0.5em; */
padding: 0 0 0.5em;
}

@media only screen and (min-width:320px) and (max-width:480px) {
:root {
--modal_font_size: 9px;
}
/* body.scroll-delete {
    overflow: auto;
}		 */
#ms #overlay__modal {
padding: 0;
/* height: 100%; */
height: auto;
}
#ms #modal__output {
padding: 2.5em 0.5em 2.5em 0.5em;



min-height: 100dvh;
justify-content: center;
}
#ms #buttonCloseModal {
top: 1em;
/* right: 1em; */
width: 1.75em;
height: 1.7em;
font-size: 1.7em;
}
#ms #block_info { 
flex-direction: column;
width: 100vw;
min-height: 100vh;
/* padding: 0 1.5em 1.5em 1.5em; */
/* margin: -2em -1em -2em -1em; */
margin: -2.5em -2em -2.5em -2em;
padding: 0 2em 0 2em;
font-size: calc(var(--modal_font_size) * 1);
}
#ms #block_info p { 
font-size: calc(var(--modal_font_size) * 2);
}
}

@media only screen and (min-width:481px) and (max-width:670px) {
:root {
--modal_font_size: 9px;
}
#ms #modal__output {
padding: 2.5em 2.5em 2.5em 2.5em;



/* min-height: 100dvh;
justify-content: center; */
}
#ms #buttonCloseModal {
width: 1.75em;
height: 1.7em;
font-size: 2em;
}
}

@media only screen and (min-width:671px) and (max-width:768px) {
:root {
--modal_font_size: 9px;
}	
#ms #modal__output {
padding: 2.5em 2.5em 2.5em 2.5em;
}
}

@media only screen and (min-width: 769px) and (max-width: 980px) {
:root {
--modal_font_size: 9px;
}	
#ms #modal__output {
padding: 2.5em 2.5em 2.5em 2.5em;
}
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
:root {
--modal_font_size: 9px;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
:root {
--modal_font_size: 9px;
}
}
@media only screen and (min-width: 1281px) and (max-width: 1366px) {
:root {
--modal_font_size: 9px;
}
}	
@media only screen and (min-width: 1367px) and (max-width: 1600px) {
:root {
--modal_font_size: 10px;
}
}
@media only screen and (min-width: 1601px) and (max-width: 1920px) {
:root {
--modal_font_size: 11px;	
}
}	
@media only screen and (min-width: 1921px) and (max-width: 2561px) {
:root {
--modal_font_size: 12px;
}
}	
/* ==== END: css/modal.css ==== */

/* ==== START: css/forms.css ==== */

/* Базовый враппер для всех форм */
#ms div.form-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-size: calc(2.5 * var(--root-base-font-size));
    line-height: 1.3;
}

#ms div.form-wrapper.shadow {
    box-shadow: 0 0 0.15em rgba(0, 0, 0, 0.25);
    margin: 0.5em 0 0;
    padding: 1.5em;
}
#ms #modal__output div.form-wrapper.shadow {
    box-shadow: none;
    padding: 0;
}


#ms div.form-wrapper form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    color: inherit;
    width: 100%;
    min-width: 278px;
    box-sizing: border-box;
    padding: 0.8em 0 0;
}


#ms div.form-wrapper div.field-wrapper,
#ms div.form-wrapper fieldset.field-wrapper {
    position: relative;
    margin: 0 0 1.75em;
    --col_gap: 1.5em;
    /* .col-2, .col-3 */
}

#ms div.form-wrapper fieldset.field-wrapper {
    margin: -0.25em 0 1.75em;
}

#ms div.form-wrapper fieldset.field-wrapper>div.field-wrapper {
    margin: 0;
    min-width: fit-content;
}




#ms div.form-wrapper input:not([type="file"]),
#ms div.form-wrapper textarea {
    background: #FFF0;
}

#ms div.form-wrapper input[type="file"] {
    background: #FFF;
}

#ms div.form-wrapper input::placeholder,
#ms div.form-wrapper textarea::placeholder {
    color: #aaa;
    opacity: 1;
    /* по умолчанию в некоторых браузерах 0.5 */
}


#ms div.form-wrapper input:focus,
#ms div.form-wrapper div.field-wrapper select:focus,
#ms div.form-wrapper div.field-wrapper textarea:focus,
#ms div.form-wrapper fieldset:focus-within {
    border: 1px solid #03b8ff;
}

#ms div.form-wrapper input:focus::placeholder,
#ms div.form-wrapper textarea:focus::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}







#ms div.form-wrapper input,
#ms div.form-wrapper select,
#ms div.form-wrapper textarea,
#ms div.form-wrapper fieldset {
    border: 1px solid #999;
    outline: none;
    padding: 0.6em;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Cuprum', sans-serif;
    color: #555;
}

#ms div.form-wrapper input,
#ms div.form-wrapper select,
#ms div.form-wrapper textarea {

    font-size: calc(90% + ((100vw - 360px) / 240));
}

#ms div.form-wrapper label>input {
    accent-color: #0093FF;
    width: 1.5em !important;
    height: 1.5em;
    margin: 0 0.5em 0 0 !important;
    flex-shrink: 0;

    font-size: initial;
}









#ms div.form-wrapper select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-repeat: no-repeat, repeat;
    background-position: right 1em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

#ms div.form-wrapper select::-ms-expand {
    display: none;
}

#ms div.form-wrapper select:required:invalid {
    color: #aaa;
}

#ms div.form-wrapper option {
    color: #555;
}
















#ms div.form-wrapper fieldset {
    display: flex;
    top: -0.25em;
    flex-direction: row;
    padding: 1em 1em 0;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
}

#ms div.form-wrapper fieldset>legend {
    margin: 0 0 0 -0.25em;
    padding: 0 0.25em 0;
    font-size: calc(70% + ((100vw - 360px) / 240));
    color: #aaa;
}





#ms div.form-wrapper label {
    position: relative;
    display: inline-flex;
    margin: 0 0 1em;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    align-items: center;
    font-size: calc(90% + ((100vw - 360px) / 240));
    color: #aaa;
    z-index: auto;
}



#ms div.form-wrapper label.label-static,
#ms div.form-wrapper label.label-top {
    position: absolute;
    margin: -0.65em 0 0 0.6em;
    padding: 0 0.25em 0;
    background: #fff;
    font-size: calc(70% + ((100vw - 360px) / 240));
}


@supports selector(:has(*)) {

    #ms div.form-wrapper label.label-top {
        position: absolute;
        margin: 0.65em 0 0 0.65em;
        transition: all 0.2s ease;
        font-size: calc(90% + ((100vw - 360px) / 240));
        z-index: -1;
    }

    #ms div.form-wrapper div.field-wrapper:has(select:focus) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(select:valid) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(input:not([type="file"]):focus) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(input:not([type="file"]):not(:placeholder-shown)) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(textarea:focus) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(textarea:not(:placeholder-shown)) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(input[type="file"]:focus) label.label-top,
    #ms div.form-wrapper div.field-wrapper:has(input[type="file"]:valid) label.label-top {
        margin: -0.65em 0 0 0.6em;
        font-size: calc(70% + ((100vw - 360px) / 240));
        z-index: auto;
    }
}

#ms div.form-wrapper div.field-wrapper:has(input:focus) label.label-static,
#ms div.form-wrapper div.field-wrapper:has(select:focus) label.label-static,
#ms div.form-wrapper div.field-wrapper:has(textarea:focus) label.label-static,
#ms div.form-wrapper div.field-wrapper:has(input:focus) label.label-top,
#ms div.form-wrapper div.field-wrapper:has(select:focus) label.label-top,
#ms div.form-wrapper div.field-wrapper:has(textarea:focus) label.label-top,
#ms div.form-wrapper fieldset:focus-within>legend {
    color: #03b8ff;
}







/* Стили для кнопки */
/* #ms div.form-wrapper form > button {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    align-self: center;
    justify-content: center;

    color: #FFFFFF;
    border-radius: 0.2em;
    font-family: inherit;
    text-align: center;
    border: 0 none;
    padding: 0.6em 0.5em;
    font-weight: 700;
    cursor: pointer;
    margin: 0 auto;
    outline: none;
    width: 100%;
    width: auto;
    background: linear-gradient(0deg, rgb(33, 113, 26) 0%, rgb(32, 255, 0) 100%);
    box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.25);
} */

#ms div.form-wrapper form button {
/* #ms button:not(.header__menu-button-more, .header__menu-button-hamburger) { */
  color: #FFFFFF;
  background-color: green;
  border-radius: 5px;
  font-family: inherit;
  text-align: center;
  border: 0 none;
  padding: 0.6em 0.5em;
  font-weight: 700;
  cursor: pointer;
  margin: 0 auto 0.25em;
  outline: none;
  /* width: 100%; */
  flex-grow: 1;
  background: linear-gradient(0deg, rgb(33, 113, 26) 0%, rgb(32, 255, 0) 100%);
  box-shadow: 0 0.15em 0.15em rgba(0, 0, 0, 0.25);
}


#ms div.form-wrapper form > button:hover {
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.48) 0%, rgba(255, 0, 0, 0.98) 100%);
    box-shadow: 0 0.07em 0.07em rgba(0, 0, 0, 0.25);
}





#ms div.error-valid {
    display: none;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
    margin: 1.5em 0 0;
    font-size: calc(var(--popup_form_font_size) * 2);
    width: 0;
    min-width: 100%;
    text-align: initial;
    border: 1px dashed #fff;
    background: red;
    color: #fff;
    border-radius: 5px;
    padding: 1em 3em 1em 1em;
    box-sizing: border-box;
    position: relative;
    /* max-height: 0;
overflow: hidden;
transition: max-height 0.9s; */
}

#ms fieldset+div.error-valid {
    margin: -0.25em 0 1.5em;
}



#ms div.error-valid>p {
    margin: 0;
    padding: 0;
}

#ms div.error-valid-hidden {
    animation: center-animate 2s ease alternate;
    /* transform: scaleY(0.01);    */
}

@keyframes center-animate {

    /* 0% { transform: scaleY(120) } */
    100% {
        transform: scaleY(0)
    }
}

#ms div.error-valid:before {
    content: "";
    border: 15px solid transparent;
    position: absolute;
    border-left-color: #f00;
    /* margin: -3.5em 0 0 0; */
    left: 1em;
    top: -0.5em;
}

#ms span.error-valid-close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#ms span.error-valid-close:after {
    content: "\2716";
    right: 1em;
    color: #fff;
    position: absolute;
    font-size: calc(var(--popup_form_font_size) * 2);
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}



#ms div.form-wrapper div.formblock {
    overflow: hidden;
}




/* Styles for step by step forms --------------------------------------------------- */


#ms div.form-wrapper div.step-wrapper {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    width: 100%;
}

#ms div.form-wrapper div.step {
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    will-change: transform;
    transition: all 1s ease-out;
    padding: 0 0.1px;
}

#ms div.form-wrapper .step-hidden {
    margin: 0 0 0 -100%;
    transform: scaleX(1);
    transition: all 1s ease-out;

    /* opacity: 0; */
    padding: 0 30px;
    display: none;
}
 #ms div.form-wrapper .step_title {
    width: 100%;
 }

#ms div.form-wrapper div.buttons-wrapper {
    display: flex;
    gap: 1.75em;
    flex-grow: 1;
}
#ms div.buttons-wrapper button.back_step[disabled] {
    box-shadow: none;
    background: linear-gradient(0deg, rgb(104, 104, 104) 0%, rgba(198, 198, 198, 0.71) 100%);
    cursor: default;
}
#ms div.buttons-wrapper button.back_step {
    background: linear-gradient(0deg, rgb(151, 0, 21) 0%, rgb(255, 38, 38) 100%);
    /* color: #fff; */
    flex-grow: 1;
}


#ms div.buttons-wrapper button.next_step {
    flex-grow: 10;
    background: linear-gradient(0deg, rgb(0, 116, 151) 0%, rgb(38, 194, 255) 100%);
}

#ms div.buttons-wrapper button[type="submit"] {
    /* width: auto; */
    flex-grow: 10 !important;
}

#ms div.buttons-wrapper button[type="submit"]:hover {
    background: linear-gradient(180deg, rgba(71, 232, 25, 0.8) 0%, rgba(9, 146, 9, 0.9) 100%);
    box-shadow: 0 0.07em 0.07em rgba(0, 0, 0, 0.25);
}





@media only screen and (min-width:320px) and (max-width:375px) {

#ms div.form-wrapper.shadow {
box-shadow: none;   
padding: 1.5em 0;
}

}

@media only screen and (min-width:375px) and (max-width:480px) {

#ms div.form-wrapper.shadow {
/* box-shadow: none;    */
padding: 1.5em 1em;
}

}


@media only screen and (min-width:320px) and (max-width:480px) {

#ms #modal__output div.form-wrapper {
padding: 0 1em 0 1em;
}

}
/* ==== END: css/forms.css ==== */

/* ==== START: css/project.css ==== */
#ms .is-mobile {
  display: none;
}

/* PRIMARY STYLES #################### */
#ms section.primary {
  color: #FFF;
}
#ms section.primary::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/primary-bg.jpg');
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
#ms section.primary h1 {
text-transform: uppercase;
}
#ms section.primary b {
  color: #fde45d;
}
#ms section.primary h2 {
text-transform: uppercase;
text-align: center;
}
#ms section.primary h3::before {
  content: "\e81a";
  font-family: my_font;
  padding: 0 0.5em 0 0;
}
#ms section.primary button {
  padding: 0.5em 0.25em;
  background: #fde45d;
  border-radius: 10px;
  max-width: 600px;
}
#ms section.primary div.right {
  position: relative;
  padding: 0 0.5em;
}
#ms section.primary div.wrap-img {
  padding: 0;
}
#ms section.primary div.right img {
  background: none;
  object-position: top;
  height: 95%;
  width: 85%;
  bottom: 0;
}
#ms section.primary div.right div.description {
  padding: 0.75em;
  border: 2px solid #FFF !important;
  background: #00000085;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
}


/* @MEDIA #################### */
@media only screen and (max-width : 768px) {

  #ms .is-mobile {
    display: block;
  }
  #ms section.primary .is-desktop {
    display: none;
  }
  #ms section.primary h1 {
    font-size: 75% !important;
    padding-top: 8em !important;
  }
  #ms section.primary .item-2 {
    width: 100% !important;
  }
  #ms section.primary div.wrap-img {
    padding: 0 0 100% 0;
  }
  #ms section.primary button {
    align-self: center;
    width: 100%;
  }
}

/* STAGES-1 STYLES #################### */
#ms section.stages-1 {
  color: var(--font_color_light);
  --col_gap: 20px;
  background: #030b0ef2; 
}
#ms section.stages-1::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/bg-3.jpg');
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
#ms .stages-1 h3::before {
  content: attr(data-content);
  padding: 0 0.5em 0 0;
  font-size: 150%;
  color: #2ecbff;
}
#ms section.stages-1 b {
  color: #fde45d;
}


/* PROGRAM STYLES #################### */
#ms section.program {
  color: var(--font_color_light);
  --col_gap: 20px;
  background: #030b0ef2; 
}
#ms section.program::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/bg-3.jpg'); 
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
#ms section.program b {
  color: #fde45d;
}
#ms section.program div.lessons {
  align-items: center;
}
#ms section.program div.lesson {
  gap: 0;
}
#ms section.program div.lesson > div.left {
  display: flex;
  padding: 1em;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  background: #2ecbff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#ms section.program div.lesson > div.right {
  display: flex;
  flex-grow: 1;
  padding: 1em;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 1;
  background: #FFF;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #000
}
#ms section.program button {
  padding: 0.5em 0.25em;
  background: #fde45d;
  border-radius: 10px;
  max-width: 600px;
  width: 100%;
}


/* SPIKER STYLES #################### */
#ms section.spiker {
  color: var(--font_color_light);
  --col_gap: 20px;
  background: #030b0ef2;
}
#ms section.spiker::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/bg-3.jpg'); 
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
#ms section.spiker b {
  color: #fde45d;
}
#ms section.spiker div.lessons {
  align-items: center;
}
#ms section.spiker div.lesson {
  gap: 0;
}
#ms section.spiker div.lesson > div.left {
  display: flex;
  padding: 1em;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif;
  color: #2ecbff;
}
#ms section.spiker div.lesson > div.right {
  display: flex;
  flex-grow: 1;
  padding: 1em;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 1;
}
#ms section.spiker div.wrap-img {
  padding: 0;
  border-radius: 10px;
}
#ms section.spiker div.right img {
  background: none;
  object-position: top;
  height: 95%;
  width: 85%;
  bottom: 0;
}
#ms section.spiker .wrap-img {
  position: relative;
  overflow: hidden;
  padding: 0 0 100% 0;
  flex-grow: 1;
}
#ms section.spiker .wrap-img > img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
#ms section.spiker [data-slider] .buttons button svg path {
  stroke: white;
  fill: none;
}
#ms section.spiker [data-slider] .buttons button:hover svg path {
  stroke: black;
}
#ms section.spiker [data-slider] .buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}
#ms section.spiker [data-slider] .buttons button {
  width: 45px;
  height: 45px;
  border: 2px solid white;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}
#ms section.spiker [data-slider] .buttons button:hover {
  background: #fde45d;
  border-color: #fde45d;
}
#ms section.spiker [data-slider] .buttons button svg {
  display: block;
  width: 40px;
  height: 40px;
}
#ms section.spiker [data-action="prev"] svg {
  padding-left: 5px;
}
#ms section.spiker [data-action="next"] svg {
  padding-right: 5px;
}
/* @MEDIA #################### */
@media only screen and (max-width : 768px) {
  #ms section.spiker .item-2 {
    width: 100% !important;
  }
  #ms section.spiker div.wrap-img {
    padding: 0 0 100% 0;
  }
}

/* REVIEWS STYLES #################### */
#ms section.reviews {
  color: var(--font_color_light);
  --col_gap: 20px;
  background: #030b0ef2; 
  overflow: hidden;
}
#ms section.reviews::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/bg-3.jpg'); 
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
.reviews-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  padding: 30px 0;
}
.nav-btn {
  background: #FFD700;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  margin: 0 8px;
}
.nav-btn:hover {
    background: #ffc400;
}
.reviews-track {
  display: flex;
  gap: 40px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
  width: 100%;
}
.review-img {
  width: 100% !important;
  max-width: 500px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  filter: brightness(0.6);
  transition: all 0.3s ease;
  flex-shrink: 0;
  height: auto;
  aspect-ratio: auto !important; 
}
.review-img.active {
  filter: brightness(1);
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 5;
}


/* GUESTIONS STYLES #################### */
#ms section.questions {
  color: var(--font_color_light);
  --col_gap: 0;
  background: #030b0ef2;
}
#ms section.questions::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/bg-3.jpg');
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
#ms div.questions__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
#ms p.questions__item__question {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #2ecbff;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}
#ms p.questions__item__answer {
  padding: 0 0.75em;
}
#ms ol.questions__item__list {
  padding: 0 0.75em;
}
#ms ol.questions__item__list > li {
  display: list-item;
  list-style: disc;
  list-style-position: inside;
}


/* DETAILS STYLES #################### */
#ms section.details {
  color: var(--font_color_light);
  --col_gap: 0;
  background: #030b0ef2;
}
#ms section.details::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/img/bg-3.jpg');
  transform: scaleY(-1);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100%;
}
#ms section.details > div {
  justify-content: space-between;
}

/* ==== END: css/project.css ==== */