.shower {
  --slide-ratio: calc(16 / 9);
  --color-darkgrey: #3F4850;
  --color-lightgrey: #A6A7AB;
  --color-blue: #0296bb;
  --color-conf: #FFD000;
  --color-red: /*#C72722;*/#DA3D1E; /*conf red*/
  /* --color-green: #4BC287; */
  --color-green: /*#3BAB73;*/#17AB79; /*conf red complementary*/
  /* --color-purple: #694BC2; */
  /* tomato, darkorange, gold, yellowgreen, lightseagreen, teal,blueviolet; */
  --color-darkblue: #016d88;
  --color-lightblue: #03beed;
}

.slide::after {
  background: none;
  color: var(--color-lightgrey);
}

.progress::before {
  background-color: var(--color-grey);
}

.shower.list .slide.active {
  box-shadow: 0 0 0 20px var(--color-blue), 0 20px 50px rgba(0, 0, 0, 0.3);
}

#cover h2 {
  margin: 0;
  color: #000;
  font-size: 70px;
}
#cover p {
  margin: 0 0 15px 0;
}
#cover .subtitle {
  font-weight: 700;
  font-size: 35px;
  color: #fff;
}

.slide .sticker {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 546px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 100px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 350 293' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffd000' d='M175 0l174 292H1z'/%3E%3C/svg%3E");
  background-size: cover;
  transform: scale(0.75);
}
.slide .sticker::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 10px;
  left: 0;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-10 -10 370 313' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='10' stroke-linecap='round' fill='none' d='M175 0l174 292H1z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.slide .sticker > span {
  position: relative;
  margin-top: 30px;
}
.slide .sticker > span:first-of-type {
  margin-top: 120px;
  font-size: 120px;
}

.slide .with-bg>span,
.slide .with-bg>a {
  display: inline-flex;
  padding: 4px 8px;
  margin: -4px -8px;
  /* color: #fff;
  background: var(--color-blue);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
  color: #000;
  background: var(--color-conf);
}

.slide .with-subtitle {
  position: relative;
}
.slide .with-subtitle>span {
  position: absolute;
  left: 2px;
  bottom: 100%;
  color: var(--color-darkgrey);
  opacity: .75;
  font-size: .375em;
  font-family: 'PT Sans', sans-serif;
  text-transform: uppercase;
}

.slide_darkcover {
  background-color: #000;
}
.slide_darkcover .cover {
  opacity: .7;
}

.slide .shout {
  font-size: 100px;
}

.slide .no-bullets li::before {
  display: none;
}

.li-emoji {
  display: inline-block;
  vertical-align: top;
  margin: -.5em .5em -.5em 0;
  font-size: 2em;
}

.accent {
  padding: 4px 8px;
  margin: -4px 0;
  background-color: var(--color-conf);
  color: #000;
  border-radius: 4px;
  font-weight: 700;
}

.rating {
  display: flex;
  align-items: center;
  width: 6.25em;
  margin-left: -.25em;
}
.rating:after, .rating:before {
  content: '';
  height: 1em;
  background-repeat: repeat-x;
  background-size: 1.25em 1em;
}
.rating::before {
  width: 20%;
  background-position: .25em 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M7.1.51c.32-.64 1.34-.68 1.73-.1l.07.1 1.93 3.91 4.31.63a1 1 0 01.64 1.62l-.08.09-3.12 3.04.73 4.3a1 1 0 01-1.35 1.1l-.1-.04L8 13.13l-3.86 2.02a1 1 0 01-1.46-.94l.01-.11.74-4.3L.3 6.76a1 1 0 01.44-1.69l.12-.02 4.31-.63L7.1.52z' fill='%23E6A329'/%3E%3C/svg%3E");
}
.rating::after {
  flex: 1;
  background-position: calc(100% + .25em) 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M7.1.51c.32-.64 1.34-.68 1.73-.1l.07.1 1.93 3.91 4.31.63a1 1 0 01.64 1.62l-.08.09-3.12 3.04.73 4.3a1 1 0 01-1.35 1.1l-.1-.04L8 13.13l-3.86 2.02a1 1 0 01-1.46-.94l.01-.11.74-4.3L.3 6.76a1 1 0 01.44-1.69l.12-.02 4.31-.63L7.1.52z' fill='%23A6A7AB' fill-opacity='0.5' /%3E%3C/svg%3E");
}

.ol-accent li::before {
  color: var(--color-red);
  font-weight: 600;
}

.slide blockquote + figcaption {
  margin-top: 0;
}

.slide .quote_big {
  margin-left: 1.2em;
  font-size: 1.2em;
}
.slide .quote strong {
  padding: 4px 8px;
  margin: -4px 0 0 -8px;
  /*color: #fff;
  background: var(--color-blue);*/
  background-color: var(--color-conf);
  border-radius: 4px;
}
.slide .quote-accent.next {
  visibility: visible;
}
.slide .next > .quote-accent.next {
  visibility: hidden;
}
.slide .next.active > .quote-accent.next {
  visibility: visible;
}
.slide .quote-accent.active {
  padding: 4px 8px;
  margin: -4px 0 0 -8px;
  /*color: #fff;
  background: var(--color-blue);*/
  background-color: var(--color-conf);
  border-radius: 4px;
  font-weight: 700;
}

.slide code .var {
  color: var(--color-green);
  font-weight: 700;
}

.place-author {
  margin: -60px 60px 0 0;
}

.author {
  width: 240px;
  height: 240px;
  border: 8px solid var(--color-red);
  border-radius: 22px;
  transform: scale(.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
  transform-origin: 0 100%;
  overflow: hidden;
}
.author--me {
  width: 320px;
  height: 320px;
}
.author--sm {
  width: 180px;
  height: 180px;
}
.author>img {
  display: block;
  width: 100%;
  object-fit: cover;
  transform: scale(1.2) rotateZ(calc(11 * 1deg));
}


.solution {
  display: flex;
  align-items: flex-start;
}
.solution > div {
  width: 50%;
}
.solution code {
  color: var(--color-darkgrey);
}
.solution .note {
  opacity: .75;
}
.solution .note:not(:first-child) {
  margin-top: 1em;
}

.slide mark {
  background-color: var(--color-green);
  color: #fff;
}
.shower.full .slide mark.next {
  visibility: visible;
  background-color: transparent;
  color: inherit;
}
.shower.full .slide .next mark.next {
  visibility: hidden;
}
.shower.full .slide .next.active mark.next {
  visibility: visible;
}
.shower.full .slide mark.next.active {
  background-color: var(--color-green);
  color: #fff;
}

.tag {
  position: absolute;
  white-space: nowrap;
  margin: 0;
  color: var(--color-grey);
  font: bold 50px/1 'PT Sans Narrow', sans-serif;
}
.tag-2 {
  font-size: 45px;
}
.tag-3 {
  font-size: 38px;
}
.tag-4 {
  font-size: 29px;
}

.a11y-icon {
  position: absolute;
  z-index: 8;
  top: 75px;
  display: flex;
  align-items: center;
  justify-self: center;
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: 50%;
  background-color: #000;
  box-shadow: 0 0 0 4px #fff/*, 0 0 0 5px rgba(0,0,0,.5)*/;
}
.a11y-icon > img {
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  width: 1050px;
  height: 600px;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  /*box-shadow: inset 0 0 0 1px var(--color-lightgrey);*/
}
.tile > img {
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
}
.tile-sm > img {
  max-width: 60px;
  max-height: 60px;
}

.shower.full .tiles .order {
  visibility: hidden;
}
.shower.full .next1.active ~ .tiles .order1 {
  visibility: visible;
}
.shower.full .next2.active ~ .tiles .order2 {
  visibility: visible;
}
.shower.full .next3.active ~ .tiles .order3 {
  visibility: visible;
}
.shower.full .next4.active ~ .tiles .order4 {
  visibility: visible;
}
.shower.full .next5.active ~ .tiles .order5 {
  visibility: visible;
}
.shower.full .next6.active ~ .tiles .order6 {
  visibility: visible;
}
.shower.full .next7.active ~ .tiles .order7 {
  visibility: visible;
}
.shower.full .next8.active ~ .tiles .order8 {
  visibility: visible;
}

.slide .equals {
  position: relative;
  display: inline-flex;
  width: 1em;
  height: .0625em;
  margin: .25em 0;
  background-color: currentColor;
}
.slide .equals::before,
.slide .equals::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  margin: .0625em 0;
}
.slide .equals::before {
  bottom: 100%;
}
.slide .equals::after {
  top: 100%;
}

.slide .line-through {
  position: relative;
}
.slide .line-through::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: 0.075em;
  left: -0.32em;
  right: -0.32em;
  height: 0.1em;
  background-color: var(--color-red);
}
.slide .shout .line-through::after {
  height: 0.05em;
}

.d-flex {
  display: flex;
}
.d-flex-col {
  width: 50%;
}
.d-flex-column {
  display: flex;
  flex-direction: column;
}
.d-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-avatar {
  position: relative;
  width: 320px;
  height: 320px;
  box-shadow: inset 0 0 0 4px var(--color-lightgrey);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-darkgrey);
  font-size: 5em;
}

.pic-mockup  {
  position: relative;
  width: 320px;
  height: 320px;
  border: 4px solid var(--color-lightgrey);
}
.pic-mockup::before,
.pic-mockup::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 454px;
  height: 4px;
  background-color: var(--color-lightgrey);
  margin-top: -2px;
  margin-left: -227px;
}
.pic-mockup::before {
  transform: rotate(-45deg);
}
.pic-mockup::after {
  transform: rotate(45deg);
}

.rem-block {
  margin: auto;
  width: 16.875em;
  height: 15em;
  background-color: var(--color-green);
  color: #fff;
}

.breakpoints {
  display: flex;
  text-align: center;
  border-right: 1px solid var(--color-lightgrey);
}
.breakpoints > div {
  width: 20%;
  border-left: 1px solid var(--color-lightgrey);
}

.rem-col {
  margin: .5em;
  width: 4em;
  height: 6em;
  background-color: var(--color-green);
}


.slide .i18n {
  margin: 0;
  font-size: 120px;
}
.shower.full .slide .i18n {
  font-size: 150px;
  transform: translate(255px, 65px);
  transition: transform .5s ease-out, font-size .5s linear;
}
.shower.full .grow-i18n.active ~ .i18n {
  font-size: 120px;
  transform: translate(0, 0);
}


.field {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 2em;
}
.field_h {
  flex-direction: row;
  align-items: center;
}
.field_float {
  padding-top: 2em;
}
.field-label {
  margin-right: 2em;
  color: var(--color-darkgrey);
}
.field-label_float {
  position: absolute;
  top: 0;
  line-height: 2;
  margin: 0;
  opacity: 1;
}
.field-input {
  width: 12em;
  height: 2em;
  appearance: none;
  margin: 0;
  padding: 0 .375em;
  font-size: 25px;
  border: 3px solid var(--color-lightgrey);
  border-radius: .25em;
}
.field-input_textarea {
  height: 6rem;
  resize: none;
}
.field-input:placeholder-shown ~ .field-label_float {
  opacity: 0;
}
.field-input_focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 6px rgb(2 150 187 / 12.5%);
}
.field_error .field-input {
  color: var(--color-red);
  border-color: var(--color-red);
}
.field-error {
  color: var(--color-red);
}
.field-input:disabled {
  background-color: rgba(0, 0, 0, 0.2);
}


.button {
  max-width: 100%;
  min-height: 3em;
  display: flex;
  justify-content: center;
  background-color: var(--color-blue);
  border: none;
  box-shadow: none;
  border-radius: .5em;
  padding: 1em;
  color: #fff;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.button_error {
  background-color: var(--color-red);
}
.button_success {
  background-color: var(--color-green);
}
.button_round {
  border-radius: 2em;
}

.buttons-list {
  width: 100%;
}
.buttons-list > li {
  display: flex;
  justify-content: space-between;
  width: 600px;
  margin-bottom: 1.5em;
}
.buttons-list .button {
  width: 240px;
  margin: -.5em 0;
}

.field ~ .button {
  min-height: 2em;
  padding: .625em 1em;
  margin-left: 1em;
  border-radius: .25em;
}

.icon {
  width: 1em;
  height: 1em;
  margin-right: .25em;
  fill: currentColor;
}

.spinner {
  position: relative;
  width: 1em;
  height: 1em;
}
.spinner::before,
.spinner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -.75em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: .25em solid transparent;
}
.spinner::before {
  border-color: currentColor;
  opacity: .2;
}
.spinner::after {
  border-left-color:currentColor;
}
.shower.full .slide.active .spinner::after {
  animation: loading 1s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}
.bubble_big {
  width: 400px;
  height: 400px;
}
.bubble_m {
  width: 300px;
  height: 300px;
}
.bubble_flip > img {
  transform: rotateY(180deg) rotate(20deg);
}
.bubble img {
  position: absolute;
  opacity: .5;
}
.bubble_big img {
  opacity: .85;
}
.bubble p {
  position: absolute;
  top: 50%;
  margin: -30px 0 0;
}
.bubble h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  width: 300px;
  font-size: 45px;
  color: #000;
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
}

.message {
  display: flex;
  align-items: center;
  padding: .25em 2em .25em .75em;
  border-radius: .25em;
  border: 1px solid;
  font-weight: 700;
}
.slide .message {
  margin: 0;
}
.message .icon {
  margin: -.125em .25em 0 0;
}
.message_success {
  color: var(--color-green);
  background-color: rgb(23 171 121 / 12.5%);
  border-color: rgb(23 171 121 / 25%);
}
.message_error {
  color: var(--color-red);
  background-color: rgb(218 61 30 / 12.5%);
  border-color: rgb(218 61 30 / 25%);
}
.message_info {
  color: var(--color-blue);
  background-color: rgb(2 150 187 / 12.5%);
  border-color: rgb(2 150 187 / 25%);
}
.message_conf {
  color: #000;
  background-color: rgb(255 208 0 / 50%);
  border-color: rgb(255 208 0 / 100%);
}

.message_anim {
  display: none;
  animation: toast .5s 1 forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transform: translateX(400px);
  opacity: 0;
}

.shower.full .slide.active .message-list > li.active .message_anim {
  display: block;
}

@keyframes toast {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-25px);
  }
  75% {
    opacity: 1;
    transform: translateX(10px);
  }
  90% {
    opacity: 1;
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.message-list {
  width: 100%;
}
.message-list > li {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
.message-list > li > span {
  width: 180px;
}

.dots-nav {
  display: flex;
  margin: 0;
  padding: 0;
  width: 18em;
}
.slide .dots-nav > li::before {
  content: '';
}
.dots-nav > li {
  margin: 0;
  padding: 2em;
  color: var(--color-lightgrey);
}
.dots-nav > li:first-of-type {
  color: #000;
}
.dots-nav > li::after {
  content: '';
  display: block;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: currentColor;
}

.lang-col {
  box-sizing: border-box;
  padding: 0;
  border-right: 1px solid var(--color-lightgrey);
  border-left: 1px solid var(--color-lightgrey);
}
.lang-col_title {
  padding-left: 0;
}
.lang-col p {
  position: relative;
  line-height: 1.5;
}
.lang-col p:not(:last-child) {
  margin-bottom: 2.5em;
}


.easing-graph {
  position: relative;
  width: 375px;
  height: 255px;
  padding: 4px;
  border: 0 solid var(--color-lightgrey);
  border-left-width: 2px;
  border-bottom-width: 2px;
}
.easing-graph::before, .easing-graph::after {
  position: absolute;
  width: 1.5em;
  color: var(--color-lightgrey);
  line-height: 1.5;
  text-align: center;
}
.easing-graph::before {
  content: 'x';
  top: 0;
  left: 0;
}
.easing-graph::after {
  content: 't';
  right: 0;
  bottom: 0;
}
.easing-graph > svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
}
.easing-graph-path {
  stroke: var(--color-red);
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.shower.list .easing-graph-path {
  stroke-dashoffset: 0;
}

.easing-car {
  width: 128px;
  height: 102.4px;
  margin-bottom: 50px;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  transform: translateX(512px);
}
.easing-car > svg {
  width: 100%;
  height: 100%;
  fill: #000;
  color: var(--color-grey);
}

.easing-car1 {
  animation-timing-function: linear;
}
.easing-car2 {
  animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
}
.easing-car2 > svg {
  fill: var(--color-red);
}

.shower.full .slide.active .easing-draw.active ~ .easing-graph .easing-graph-path {
  animation-name: easing-graph;
}
.shower.full .slide.active .easing-start.active ~ .easing-car {
  animation-name: easing-car;
}

@keyframes easing-graph {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes easing-car {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(512px);
  }
  99.9% {
    transform: translateX(512px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes easing-car {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(512px);
  }
  99.9% {
    transform: translateX(512px);
  }
  100% {
    transform: translateX(0);
  }
}


.slider {
  display: flex;
}

.slider-item {
  position: relative;
  width: 280px;
  height: 240px;
  background-color: var(--color-lightgrey);
  color: transparent;
  font-size: 50px;
}
.slider-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slider-arrow {
  width: 40px;
  height: 64px;
  margin: auto 0;
  color: var(--color-lightgrey);
}
.slider-arrow:first-child {
  margin-right: 20px;
}
.slider-arrow:last-child {
  margin-left: 20px;
}

.slider-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.slider_anim {
  opacity: 0;
}
.slider-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 40px;
  height: 64px;
  margin: auto 0;
  color: var(--color-grey);
}

.shower.full .slide.active .slider_problem .slider-spinner {
  color: #fff;
  animation: slider-problem-spinner 4s infinite forwards linear;
}
.shower.full .slide.active .slider_problem .slider-image {
  animation: slider-problem-image 4s infinite forwards linear;
}

.slide.active .slider-problem-view.active ~ .solution  .slider-arrow {
  opacity: 0;
}
.slide.active .slider-problem-view.active ~ .solution  .slider-plus {
  opacity: 1;
}
.shower.full .slide.active .slider-problem-view.active ~ .solution .slider_anim {
  animation: slider-move 4s infinite forwards linear;
  animation-delay: 1s;
}

.shower.full .slide.active .slider_solution .slider-item {
  animation: slider-move 4s infinite forwards linear;
}
.shower.full .slide.active .slider_solution .slider-image {
  animation: slider-show-image 4s infinite forwards linear;
}

@keyframes slider-problem-spinner {
  0% {
    opacity: 0;
  }
  24.5% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slider-problem-image {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  67.5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slider-move {
  0% {
    transform: translateX(0);
    opacity: 1;
    color: #fff;
  }
  11.5% {
    transform: translateX(-4rem);
    opacity: 0;
    color: #fff;
  }
  13.5% {
    transform: translateX(4rem);
    opacity: 0;
    color: #fff;
  }
  25% {
    transform: translateX(0);
    opacity: 1;
    color: #fff;
  }
  25.5% {
    transform: translateX(0);
    opacity: 1;
    color: transparent;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    color: transparent;
  }
}

@keyframes slider-show-image {
  0% {
    opacity: 0;
  }
  25.5% {
    opacity: 0;
  }
  26.5% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.shower.full .slide.active .modal_incorrect {
  animation-name: shake;
}
.shower.full .slide.active .modal_correct {
  animation-name: agree;
}

@keyframes shake {
  0%,
  25%,
  37.5% {
    transform: translateX(0);
  }
  27.5%,
  32.5% {
    transform: translateX(-1rem);
  }
  30%,
  35% {
    transform: translateX(1rem);
  }
}
@keyframes agree {
  0%, 50%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  55%, 95% {
    transform: translateY(2rem);
    opacity: 0;
  }
}


.emoji {
  display: flex;
  justify-content: space-between;
  width: 200px;
}
.emoji > span {
  margin: -25px 0;
  font-size: 50px;
}


.load-col {
  width: 340px;
}

.load-spinner {
  margin: 72px 36px;
  font-size: 72px;
  color: var(--color-grey);
}

.load-solution {
  position: relative;
  margin-bottom: 36px;
}
.load-solution p {
  margin: 0;
}
.load-solution .note {
  position: absolute;
  top: 0;
  left: 340px;
  margin-left: 144px;
  width: 340px;
}

.thanks {
  display: flex;
  flex-wrap: wrap;
}
.slide .thanks {
  margin-top: -20px;
}
.thanks > li {
  margin: 0 0 40px 0;
  width: 50%;
  text-align: center;
}
.thanks > li::before {
  display: none;
}
.thanks-photo {
  margin: 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}
.thanks-photo > img {
  display: block;
  width: 100%;
  object-fit: cover;
  opacity: .75;
}

.sumup li {
  line-height: 1.5;
  margin-bottom: 1.5em;
}

.social {
  position: relative;
  margin-right: 360px;
  padding-left: 72px;
}
.social:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M31.993%206.077c-1.177.523-2.441.876-3.77%201.033%201.355-.812%202.396-2.098%202.887-3.63-1.269.751-2.673%201.299-4.168%201.592-1.198-1.275-2.904-2.072-4.793-2.072-3.625%200-6.562%202.938-6.562%206.563%200%20.514.057%201.016.169%201.496-5.455-.274-10.291-2.887-13.529-6.858-.564.97-.888%202.097-.888%203.3%200%202.278%201.159%204.286%202.919%205.464-1.075-.035-2.087-.329-2.972-.821l-.001.082c0%203.181%202.262%205.834%205.265%206.437-.55.149-1.13.23-1.729.23-.424%200-.834-.041-1.234-.117.834%202.606%203.259%204.504%206.13%204.558-2.245%201.76-5.075%202.811-8.15%202.811-.53%200-1.053-.031-1.566-.092%202.904%201.86%206.354%202.947%2010.061%202.947%2012.072%200%2018.675-10.001%2018.675-18.675%200-.284-.008-.568-.02-.85%201.283-.925%202.395-2.08%203.276-3.398z%22%20fill%3D%22%2355ACEE%22/%3E%3C/svg%3E');
}