body {
  background-color: #f4f4f4!important;
  box-sizing: border-box;
  color: #282828;
  font-family: Roboto Regular,sans-serif;
  font-size: 16px;
  font-weight: 400;
}
header{
 display:flex;
 flex-direction:column
}
.header--nav-open{
 background-color:#f4f4f4;
 height:100%;
 overflow-y:auto;
 position:fixed;
 width:100%;
 z-index:1000
}
.header--active,.header--active .nav__list{
 background-color:#fff
}
.nav__list{
 align-items:center;
 background:#f4f4f4;
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 list-style:none;
 margin:0;
 padding:0;
 width:100%;
 z-index:100
}
.nav__item{
 display:none;
 font-size:24px;
 letter-spacing:0;
 line-height:28px;
 order:2;
 padding-bottom:11px;
 padding-top:11px;
 text-align:center;
 width:100%
}
.nav__item--active{
 display:block
}
.nav__link{
 color:#7268d8;
 text-decoration:none
}
.logo{
 width:130px
}
.logo,.toggle{
 display:inline-block;
 order:1;
 padding:0
}
.toggle{
 font-size:20px;
 width:20px
}
.toggle--dropdown path{
 fill:#4db6ac
}
.nav__button{
 cursor:pointer;
 display:none;
 order:3
}
.nav__lang-change{
 color:#282828;
 cursor:pointer;
 margin-left:calc(50% - 43px);
 opacity:.5;
 padding-right:7px;
 width:auto
}
.nav__lang-change+.nav__lang-change{
 margin-left:0;
 margin-right:calc(50% - 43px);
 padding-left:7px;
 padding-right:0
}
.nav__lang-change--active{
 color:#7268d8;
 font-weight:600;
 opacity:1
}
.nav__link--sticker{
 position:relative
}
.sticker--new{
 background-color:#7268d8;
 border-radius:6px;
 color:#fff;
 font-size:10px;
 line-height:10px;
 padding:4px;
 position:absolute;
 top:-8px
}
@media screen and (min-width:768px){
 .nav{
   padding-left:6%;
   padding-right:6%;
   padding-top:20px
 }
}
@media screen and (min-width:1024px){
  .header--active,.header--active .nav__list{
   background-color:#f4f4f4
 }
  .nav{
   bottom:45px
 }
 .nav__list{
   flex-direction:row;
   flex-wrap:nowrap
 }
  .nav__item{
   display:inline-block;
   font-size:16px;
   padding-left:20px;
   padding-right:20px;
   width:auto
 }
  .logo{
   margin-right:auto;
   min-width:163px;
   padding:0!important;
   white-space:normal;
   width:163px
 }
  .toggle{
   display:none
 }
 .nav__button{
   border:1px solid #7268d8;
   border-radius:21px;
   box-sizing:border-box;
   color:#7268d8;
   font-size:14px;
   height:32px;
   letter-spacing:0;
   margin-left:20px;
   min-width:135px;
   order:3;
   padding:0;
   text-align:center
 }
  .nav__item.nav__lang-change,.nav__lang-change+.nav__lang-change{
   margin:0;
   padding-right:8px;
   width:auto
 }
  .nav__link--sticker{
   white-space:nowrap
 }
}
@media screen and (min-width:1280px){
  .nav__item{
   padding-left:30px;
   padding-right:30px 
 }
}
@media screen and (min-width:1920px){
  .nav{
   padding-left:13%;
   padding-right:13% 
 }
}
.section__viewport {
  min-height: 276px;
  height: calc(100% - 74px);
}
.container {
  max-width: 1170px;
  margin: auto;
  height: 1000px;
}
.container {
  padding: 0 15px;
}
@media (min-width: 575.98px){
  .container {
    max-width: 540px;
    margin: auto;
    padding: 0;
 }
}
@media (min-width: 767.98px){
  .container {
    max-width: 720px;
 }
}
@media (min-width: 991.98px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1199.98px){
  .container {
    max-width: 1140px;
 }
}
.container__speaker-list-2col {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  display: flex;
  flex: 1 1;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-right: 10%;
  max-height: 600px;
  width: 90%;
}
.container, .speakers-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .speakers-container {
    max-width: 42%;
 }
  .container, .speakers-container {
    align-items: flex-start;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
 }
  .container, .speakers-container {
    max-height: 80%;
 }
}
.section__viewport {
  margin-left: 13%;
  margin-right: 13%;
}
.section__viewport {
  display: flex;
  flex-direction: column;
  height: calc(100% - 74px);
}
@charset "UTF-8";
header{
 display:flex;
 flex-direction:column
}
.header--nav-open{
 height:100%;
 overflow-y:auto;
 position:fixed;
 width:100%;
 z-index:1000
}
.header--active,.header--active .nav__list{
 background-color:#fff
}
.nav__list{
 align-items:center;
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 list-style:none;
 margin:0;
 padding:0;
 width:100%;
 z-index:100
}
.nav__item{
 display:none;
 font-size:24px;
 letter-spacing:0;
 line-height:28px;
 order:2;
 padding-bottom:11px;
 padding-top:11px;
 text-align:center;
 width:100%
}
.nav__item--active{
 display:block
}
.nav__link{
 color:#7268d8;
 text-decoration:none
}
.logo{
 width:130px
}
.logo,.toggle{
 display:inline-block;
 order:1;
 padding:0
}
.toggle{
 font-size:20px;
 width:20px
}
.toggle--dropdown path{
 fill:#4db6ac
}
.nav__button{
 cursor:pointer;
 display:none;
 order:3
}
.nav__lang-change{
 color:#282828;
 cursor:pointer;
 margin-left:calc(50% - 43px);
 opacity:.5;
 padding-right:7px;
 width:auto
}
.nav__lang-change+.nav__lang-change{
 margin-left:0;
 margin-right:calc(50% - 43px);
 padding-left:7px;
 padding-right:0
}
.nav__lang-change--active{
 color:#7268d8;
 font-weight:600;
 opacity:1
}
.nav__link--sticker{
 position:relative
}
.sticker--new{
 background-color:#7268d8;
 border-radius:6px;
 color:#fff;
 font-size:10px;
 line-height:10px;
 padding:4px;
 position:absolute;
 top:-8px
}
@media screen and (min-width:768px){
 .nav{
   padding-left:6%;
   padding-right:6%;
   padding-top:20px
 }
}
@media screen and (min-width:1024px){
 .header--active,.header--active .nav__list{
   background-color:#f4f4f4
 }
 .nav{
   bottom:45px
 }
 .nav__list{
   flex-direction:row;
   flex-wrap:nowrap
 }
 .nav__item{
   display:inline-block;
   font-size:16px;
   padding-left:20px;
   padding-right:20px;
   width:auto
 }
 .logo{
   margin-right:auto;
   min-width:163px;
   padding:0!important;
   white-space:normal;
   width:163px
 }
 .toggle{
   display:none
 }
 .nav__button{
   border:1px solid #7268d8;
   border-radius:21px;
   box-sizing:border-box;
   color:#7268d8;
   font-size:14px;
   height:32px;
   letter-spacing:0;
   margin-left:20px;
   min-width:135px;
   order:3;
   padding:0;
   text-align:center
 }
 .nav__item.nav__lang-change,.nav__lang-change+.nav__lang-change{
   margin:0;
   padding-right:8px;
   width:auto
 }
 .nav__link--sticker{
   white-space:nowrap
 }
}
@media screen and (min-width:1280px){
 .nav__item{
   padding-left:30px;
   padding-right:30px
 }
}
@media screen and (min-width:1920px){
 .nav{
   padding-left:13%;
   padding-right:13%
 }
}
.demo-item{
 align-items:center;
 border-bottom:1px solid hsla(0,0%,100%,.2);
 display:flex;
 padding:20px 16px
}
.div__image{
 border-radius:100%;
 display:flex;
 flex-shrink:0;
 height:56px;
 margin-right:20px;
 width:56px
}
.div__image div{
 height:auto;
 padding:16px;
 width:100%
}
.div__image--red{
 background-color:#ef6650
}
.div__image--white{
 background-color:#fff
}
.div__image--yellow{
 background-color:#e0b12b
}
.div__image--purple{
 background-color:#7268d8
}
.div__image svg{
 display:block;
 height:100%;
 width:100%
}
.section__demo-item{
 display:flex;
 flex-direction:column
}
.section__title{
 color:#fff;
 font-size:20px;
 font-weight:700;
 letter-spacing:0;
 line-height:28px;
 margin-bottom:0
}
.section__subtitle--demo-item{
 font-size:16px;
 letter-spacing:.7px;
 line-height:35px;
 margin-bottom:0;
 word-break:break-word
}
.arrow--demo-item{
 display:none;
 margin-left:auto;
 width:22px
}
@media screen and (min-width:768px){
 .demo-item{
   padding-left:32px;
   padding-right:32px
 }
 .demo-item h3{
   font-size:30px;
   line-height:40px
 }
}
@media screen and (min-width:1024px){
 .section__demo-item{
   margin-right:10px
 }
 .arrow--demo-item{
   display:block;
   margin-left:auto
 }
}
.demo-overlay{
 background-color:#282828;
 display:none;
 height:100%;
 z-index:1000
}
.demo-overlay a{
 color:#fff;
 text-decoration:none
}
.demo-overlay--active{
 display:block;
 height:100%
}
.aside__subtitle,.aside__title{
 color:#fff;
 font-size:16px;
 padding-left:16px;
 padding-right:16px;
 padding-top:20px
}
.aside__subtitle a,.aside__title a{
 color:#e0b12b
}
.aside__title{
 font-weight:700;
 letter-spacing:0;
 line-height:19px;
 margin-bottom:16px
}
.aside__subtitle{
 letter-spacing:.7px;
 line-height:24px
}
.aside__divider{
 align-items:center;
 cursor:pointer;
 display:flex;
 padding:20px 32px;
 width:-webkit-fit-content;
 width:-moz-fit-content;
 width:fit-content
}
.aside__button{
 height:100%;
 margin-right:16px;
 width:13.75px
}
.aside__button path{
 fill:#fff;
 font-size:16px!important
}
@media screen and (min-width:768px){
 .aside__subtitle{
   padding-left:6%;
   padding-right:6%
 }
}
@media screen and (min-width:1024px){
 .demo-overlay{
   display:flex;
   flex-direction:column;
   height:100%;
   overflow-x:hidden;
   position:fixed;
   right:0;
   top:0;
   transition:all .3s ease-in-out;
   width:0;
   z-index:1000
 }
 .aside--active{
   min-width:350px;
   width:25%
 }
 .aside__subtitle{
   margin-top:auto
 }
 .aside__title{
   font-weight:400;
   letter-spacing:.7px;
   line-height:24px;
   margin-bottom:0;
   padding:0
 }
 .aside__button{
   font-size:20px
 }
 .aside__divider{
   padding-bottom:10px;
   padding-top:25px
 }
}
.container,.speakers-container{
 display:flex;
 flex:1 1;
 flex-direction:column;
 height:100%
}
.section__center{
 align-items:center;
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 height:100%;
 margin-bottom:20px;
 width:100%
}
.speaker-list__text{
 color:#282828;
 font-size:14px;
 font-weight:700;
 letter-spacing:0;
 line-height:16px;
 margin-bottom:11px;
 margin-top:11px;
 min-width:50px;
 padding-bottom:10px
}
.speaker-list__text a{
 color:inherit
}
.dropdown-language-and-tempo-container{
 align-items:stretch;
 display:flex;
 flex-direction:row;
 justify-content:space-between;
 margin-bottom:10px;
 width:100%
}
.section__center{
  display:flex;
  flex:1 1 90%;
  justify-content:center
}
@media screen and (min-width:768px){
 .container,.speakers-container{
   max-height:80%
 }
}
@media screen and (min-width:1024px){
 .container,.speakers-container{
   align-items:flex-start;
   flex-direction:column;
   flex-grow:1;
   justify-content:space-between
 }
 .speakers-container{
   max-width:42%
 }
 .container{
   max-width:58%
 }
}
@media screen and (min-width:1920px){
 
}
.container__speaker-list{
 grid-row-gap:16px;
 display:grid;
 margin-bottom:8px
}
.container__speaker-list-1col{
 grid-row-gap:16px;
 grid-column-gap:16px;
 display:flex;
 flex:1 1;
 flex-direction:column;
 flex-wrap:wrap;
 margin-bottom:16px;
 margin-right:5%;
 max-width:500px;
 width:40%
}
.container__speaker-list-1col .speaker{
 width:100%
}
.speaker{
 align-items:center;
 border-radius:5px;
 box-sizing:border-box;
 color:#fff;
 cursor:pointer;
 display:none;
 height:54px;
 padding-left:16px;
 padding-right:16px;
 width:100%
}
.speaker--purple{
 background-color:#7268d8
}
.speaker--purple--active{
 box-shadow:0 10px 30px 0 rgba(114,104,216,.75)
}
.speaker--yellow{
 background-color:#e0b12b
}
.speaker--yellow--active{
 box-shadow:0 10px 30px 0 rgba(224,177,43,.75)
}
.speaker--red--active{
 box-shadow:0 10px 30px 0 hsla(8,83%,63%,.75)
}
.speaker--blue{
 background-color:#4db6ac
}
.speaker--blue--active{
 box-shadow:0 10px 30px 0 rgba(77,182,172,.75)
}
.speaker--active{
 display:flex
}
.speaker--disabled{
 cursor:not-allowed
}
.speaker__name{
 font-size:20px;
 font-weight:700;
 letter-spacing:0;
 line-height:24px;
 margin:0
}
.speaker div{
 flex-basis:25%;
 height:100%;
 margin-right:16px;
 max-width:80px
}
.speaker__caret{
 margin-left:auto
}
@media screen and (min-width:1024px){
 .container__speaker-list,.speaker{
   margin-bottom:16px
 }
 .speaker{
   display:flex;
   height:88px;
   max-width:250px;
   width:50%
 }
  .speaker:last-of-type{
   margin-bottom:0;
   background-color: #ef6650;
   .container__speaker-list-2col
 }
  .speaker--blue,.speaker--purple,.speaker--red,.speaker--yellow{
   background-color:initial
 }
 .speaker--purple--active{
   background-color:#7268d8;
   box-shadow:0 10px 30px 0 rgba(114,104,216,.75)
 }
 .speaker--yellow--active{
   background-color:#e0b12b;
   box-shadow:0 10px 30px 0 rgba(224,177,43,.75)
 }
 .speaker--red--active{
   background-color:#ef6650;
   box-shadow:0 10px 30px 0 hsla(8,83%,63%,.75)
 }
 .speaker--blue--active{
   background-color:#4db6ac;
   box-shadow:0 10px 30px 0 rgba(77,182,172,.75)
 }
 .speaker__name{
   color:#000
 }
 .speaker--active .speaker__name{
   color:#fff
 }
 .speaker--blue div,.speaker--purple div,.speaker--red div,.speaker--yellow div{
   border-radius:100%;
   box-sizing:border-box;
   flex-basis:48px;
   height:48px;
   padding:4px;
   width:48px
 }
 .speaker--purple div{
   background-color:#7268d8
 }
 .speaker--yellow div{
   background-color:#e0b12b
 }
 .speaker--red div{
   background-color:#ef6650
 }
 .speaker--blue div{
   background-color:#4db6ac
 }
}
.dropdown{
 background:#fff;
 display:none;
 left:0;
 opacity:0;
 overflow:hidden;
 position:fixed;
 transition:all .5s ease-in-out;
 width:100%
}
.dropdown-container{
 align-items:center;
 border-radius:21px;
 display:flex;
 flex-basis:75%;
 font-weight:500;
 height:38px;
 justify-content:center;
 margin-right:8px;
 max-width:230px;
 width:40%
}
.dropdown-container p{
 color:#fff;
 font-size:16px;
 font-weight:inherit;
 letter-spacing:0;
 line-height:19px;
 margin:0;
 min-width:auto;
 padding-left:16px;
 padding-right:8px;
 text-align:center;
 white-space:nowrap;
 word-break:normal
}
.dropdown-container--style{
 flex:0 0 45%;
 justify-content:right;
 padding-left:10px
}
.dropdown-container--style label{
 color:#282828;
 flex-basis:20%;
 font-size:16px;
 font-weight:700;
 letter-spacing:0;
 line-height:19px;
 margin-right:11px;
 text-align:right
}
.dropdown-container--purple{
 background-color:#7268d8;
 border:1px solid #7268d8
}
.dropdown-container--purple:hover{
 background-color:#5046bd
}
.dropdown-container--red{
 background-color:#ef6650;
 border:1px solid #ef6650
}
.dropdown-container--red:hover{
 background-color:#cc4834
}
.dropdown-container--yellow{
 background-color:#e0b12b;
 border:1px solid #e0b12b
}
.dropdown-container--yellow:hover{
 background-color:#c59510
}
.dropdown-container--blue{
 background-color:#4db6ac;
 border:1px solid #4db6ac
}
.dropdown-container--blue:hover{
 background-color:#45a39a
}
.dropdown--active{
 bottom:0;
 display:block;
 opacity:1;
 overflow-y:scroll;
 top:75px;
 z-index:1000
}
.dropdown__list{
 list-style-type:none
}
.dropdown__item{
 cursor:pointer
}
.dropdown__divider,.dropdown__item{
 color:#4db6ac;
 font-size:24px;
 letter-spacing:0;
 line-height:28px;
 margin-bottom:32px;
 text-align:center
}
.dropdown p{
 color:#282828;
 font-size:16px;
 letter-spacing:0;
 line-height:19px;
 opacity:.5;
 text-align:center;
 text-transform:lowercase
}
.dropdown p:first-letter{
 text-transform:capitalize
}
.dropdown--language{
 background-color:#fff
}
.dropdown--language__control{
 align-items:center;
 background-color:inherit;
 border:0;
 border-radius:21px;
 display:flex;
 height:100%;
 padding-left:11px;
 padding-right:0
}
.dropdown--language__control:hover{
 cursor:pointer
}
.dropdown--language__menu{
 background-color:#fff;
 border-radius:15px;
 box-shadow:0 2px 4px 0 rgba(40,40,40,.26);
 margin-bottom:0;
 margin-top:0;
 max-height:265px
}
.dropdown--language__menu-list{
 border-radius:15px;
 max-height:inherit!important;
 overflow-x:hidden;
 overflow-y:auto;
 padding-bottom:0;
 padding-top:0
}
.dropdown--language__menu #dropdown-divider{
 pointer-events:none
}
.dropdown--language__option{
 padding:8px
}
.dropdown--language__option.is-selected,.dropdown--language__option:hover{
 background-color:#f4f4f4
}
.toggle--dropdown{
 cursor:pointer
}
.dropdown{
 background-color:initial;
 display:flex;
 opacity:1;
 overflow:visible;
 overflow:initial;
 position:relative
}
.dropdown:hover{
 cursor:pointer
}
.dropdown--language{
 background-color:inherit;
 border-radius:21px;
 display:block;
 height:100%;
 transition:none
}
.dropdown--language__control{
 background-color:transparent;
 cursor:inherit;
 padding-left:0;
 transition:none;
 white-space:nowrap
}
.dropdown--language__control--menu-is-open .dropdown--language__indicator{
 direction:rtl;
 -webkit-transform:rotate(180deg);
 transform:rotate(180deg)
}
.dropdown--language__value-container{
 color:#fff;
 padding-left:8px
}
.dropdown--language__indicator{
 color:#fff;
 width:32px
}
.dropdown--style{
 border-radius:21px;
 height:42px;
 transition:none;
 width:122px
}
.dropdown--auto{
 background-color:hsla(0,0%,61%,.5)
}
.dropdown--auto .toggleOption.selected svg{
 fill:#4db6ac
}
.dropdown--yellow{
 background-color:#e0b12b
}
.dropdown--yellow .toggleOption.selected svg{
 fill:#e0b12b
}
.dropdown--purple{
 background-color:#7268d8
}
.dropdown--purple .toggleOption.selected svg{
 fill:#7268d8
}
.Dropdown-placeholder{
 color:#fff;
 margin-right:10px
}
.toggleOption{
 align-items:center;
 cursor:pointer;
 display:flex;
 justify-content:center;
 margin:5px
}
.toggleOption:hover{
 background-color:hsla(0,0%,100%,.3);
 border-radius:100%
}
.toggleOption.selected{
 background-color:#fff;
 border-radius:100%
}
.toggleOption.selected svg{
 opacity:1
}
.toggleOption div{
 width:22px
}
.toggleOption svg{
 fill:#fff;
 display:block;
 margin:auto;
 opacity:.6
}
textarea{
 border:none;
 border-radius:10px;
 box-sizing:border-box;
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 line-height:24px;
 padding:14px 16px;
 resize:none
}
textarea:focus{
 box-shadow: 0 0 0 2px rgb(77 182 172 / 64%);
 outline:none
}
textarea{
 box-shadow:0 0 0 2px rgba(77,182,172,.4);
 outline:none
}
textarea::placeholder{
 color:#282828;
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 letter-spacing:0;
 line-height:24px;
 opacity:.4
}
textarea::-webkit-input-placeholder{
 color:#282828;
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 letter-spacing:0;
 line-height:24px;
 opacity:.4
}
textarea:-moz-placeholder,textarea::-moz-placeholder{
 color:#282828;
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 letter-spacing:0;
 line-height:24px;
 opacity:.4
}
textarea:-ms-input-placeholder{
 color:#282828;
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 letter-spacing:0;
 line-height:24px;
 opacity:.4
}
.container__input{
 align-items:center;
 display:flex;
 flex:1 1;
 flex-direction:column;
 margin-bottom:22px;
 max-width:1200px;
 min-height:200px
}
.container__text{
 display:flex;
 flex:1 1;
 min-height:100px;
 position:relative;
 width:100%
}
.container__textarea{
 background-color:#fff;
 border:none;
 border-radius:10px;
 flex-grow:1;
 resize:none;
 width:100%
}
.container .textarea__character-count{
 bottom:10px;
 color:#666;
 font-size:14px;
 line-height:16px;
 opacity:.5;
 position:absolute;
 right:10px
}
.container .div__textarea{
 height:100%;
 width:100%
}
.container__buttons{
 display:flex
}
.container__button{
 width:177px
}
.container__button,.container__button__download{
 border-radius:21px;
 color:#fff;
 cursor:pointer;
 font-size:14px;
 height:42px;
 letter-spacing:0;
 line-height:16px;
 margin-top:22px;
 text-align:center
}
.container__button__download{
 margin-left:8px;
 width:42px
}
.container__button__download path{
 fill:#fff
}
.container__button:disabled,.container__button__download:disabled{
 cursor:not-allowed
}
.container__button__download:disabled a{
 pointer-events:none
}
.container__button--purple,.container__button__download--purple{
 background-color:#7268d8;
 border:1px solid #7268d8
}
.container__button--purple:hover,.container__button__download--purple:hover{
 background-color:#5046bd
}
.container__button--red,.container__button__download--red{
 background-color:#ef6650;
 border:1px solid #ef6650
}
.container__button--red:hover,.container__button__download--red:hover{
 background-color:#cc4834
}
.container__button--yellow,.container__button__download--yellow{
 background-color:#e0b12b;
 border:1px solid #e0b12b
}
.container__button--yellow:hover,.container__button__download--yellow:hover{
 background-color:#c59510
}
.container__button--blue,.container__button__download--blue{
 background-color:#4db6ac;
 border:1px solid #4db6ac
}
.container__button--blue:hover,.container__button__download--blue:hover{
 background-color:#45a39a
}
.container .dot-flashing{
 margin:auto
}
.container .dot-flashing--purple,.container .dot-flashing--purple:after,.container .dot-flashing--purple:before{
 -webkit-animation-name:dotFlashingPurple;
 animation-name:dotFlashingPurple;
 background-color:#7268d8;
 color:#7268d8
}
.container .dot-flashing--red,.container .dot-flashing--red:after,.container .dot-flashing--red:before{
 -webkit-animation-name:dotFlashingRed;
 animation-name:dotFlashingRed;
 background-color:#ef6650;
 color:#ef6650
}
.container .dot-flashing--yellow,.container .dot-flashing--yellow:after,.container .dot-flashing--yellow:before{
 -webkit-animation-name:dotFlashingYellow;
 animation-name:dotFlashingYellow;
 background-color:#e0b12b;
 color:#e0b12b
}
.container .dot-flashing--blue,.container .dot-flashing--blue:after,.container .dot-flashing--blue:before{
 -webkit-animation-name:dotFlashingBlue;
 animation-name:dotFlashingBlue;
 background-color:#4db6ac;
 color:#4db6ac
}
.container__button--animation div{
 height:100%;
 width:100%
}
.span--error{
 background-color:#cc4834;
 border-radius:10px;
 margin-top:22px;
 padding:10px
}
.span--disabled{
 display:none
}
@-webkit-keyframes dotFlashingPurple{
 0%{
   background-color:#7268d8
 }
 50%,to{
   background-color:#fff
 }
}
@keyframes dotFlashingPurple{
 0%{
   background-color:#7268d8
 }
 50%,to{
   background-color:#fff
 }
}
@-webkit-keyframes dotFlashingRed{
 0%{
   background-color:#ef6650
 }
 50%,to{
   background-color:#fff
 }
}
@keyframes dotFlashingRed{
 0%{
   background-color:#ef6650
 }
 50%,to{
   background-color:#fff
 }
}
@-webkit-keyframes dotFlashingYellow{
 0%{
   background-color:#e0b12b
 }
 50%,to{
   background-color:#fff
 }
}
@keyframes dotFlashingYellow{
 0%{
   background-color:#e0b12b
 }
 50%,to{
   background-color:#fff
 }
}
@-webkit-keyframes dotFlashingBlue{
 0%{
   background-color:#4db6ac
 }
 50%,to{
   background-color:#fff
 }
}
@keyframes dotFlashingBlue{
 0%{
   background-color:#4db6ac
 }
 50%,to{
   background-color:#fff
 }
}
@media screen and (min-width:1024px){
 .container__input{
   min-height:568px;
   width:100%
 }
 textarea{
   font-size:30px;
   line-height:35px
 }
 textarea::placeholder{
   font-size:24px;
   line-height:35px
 }
 textarea::-webkit-input-placeholder{
   font-size:24px;
   line-height:35px
 }
 textarea:-moz-placeholder,textarea::-moz-placeholder{
   font-size:24px;
   line-height:35px
 }
 textarea:-ms-input-placeholder{
   font-size:24px;
   line-height:35px
 }
}
.dot-elastic{
 -webkit-animation:dot-elastic 1s linear infinite;
 animation:dot-elastic 1s linear infinite;
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 width:10px
}
.dot-elastic:after,.dot-elastic:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-elastic:before{
 -webkit-animation:dot-elastic-before 1s linear infinite;
 animation:dot-elastic-before 1s linear infinite;
 left:-15px
}
.dot-elastic:after,.dot-elastic:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-elastic:after{
 -webkit-animation:dot-elastic-after 1s linear infinite;
 animation:dot-elastic-after 1s linear infinite;
 left:15px
}
@-webkit-keyframes dot-elastic-before{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 25%{
   -webkit-transform:scaleY(1.5);
   transform:scaleY(1.5)
 }
 50%{
   -webkit-transform:scaleY(.67);
   transform:scaleY(.67)
 }
 75%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
}
@keyframes dot-elastic-before{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 25%{
   -webkit-transform:scaleY(1.5);
   transform:scaleY(1.5)
 }
 50%{
   -webkit-transform:scaleY(.67);
   transform:scaleY(.67)
 }
 75%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
}
@-webkit-keyframes dot-elastic{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 25%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 50%{
   -webkit-transform:scaleY(1.5);
   transform:scaleY(1.5)
 }
 75%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
}
@keyframes dot-elastic{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 25%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 50%{
   -webkit-transform:scaleY(1.5);
   transform:scaleY(1.5)
 }
 75%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
}
@-webkit-keyframes dot-elastic-after{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 25%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 50%{
   -webkit-transform:scaleY(.67);
   transform:scaleY(.67)
 }
 75%{
   -webkit-transform:scaleY(1.5);
   transform:scaleY(1.5)
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
}
@keyframes dot-elastic-after{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 25%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 50%{
   -webkit-transform:scaleY(.67);
   transform:scaleY(.67)
 }
 75%{
   -webkit-transform:scaleY(1.5);
   transform:scaleY(1.5)
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
}
.dot-pulse{
 -webkit-animation:dot-pulse 1.5s linear infinite;
 animation:dot-pulse 1.5s linear infinite;
 -webkit-animation-delay:.25s;
 animation-delay:.25s;
 box-shadow:9999px 0 0 -5px;
 left:-9999px;
 position:relative
}
.dot-pulse,.dot-pulse:after,.dot-pulse:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-pulse:after,.dot-pulse:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-pulse:before{
 -webkit-animation:dot-pulse-before 1.5s linear infinite;
 animation:dot-pulse-before 1.5s linear infinite;
 -webkit-animation-delay:0s;
 animation-delay:0s;
 box-shadow:9984px 0 0 -5px
}
.dot-pulse:after{
 -webkit-animation:dot-pulse-after 1.5s linear infinite;
 animation:dot-pulse-after 1.5s linear infinite;
 -webkit-animation-delay:.5s;
 animation-delay:.5s;
 box-shadow:10014px 0 0 -5px
}
@-webkit-keyframes dot-pulse-before{
 0%{
   box-shadow:9984px 0 0 -5px
 }
 30%{
   box-shadow:9984px 0 0 2px
 }
 60%,to{
   box-shadow:9984px 0 0 -5px
 }
}
@keyframes dot-pulse-before{
 0%{
   box-shadow:9984px 0 0 -5px
 }
 30%{
   box-shadow:9984px 0 0 2px
 }
 60%,to{
   box-shadow:9984px 0 0 -5px
 }
}
@-webkit-keyframes dot-pulse{
 0%{
   box-shadow:9999px 0 0 -5px
 }
 30%{
   box-shadow:9999px 0 0 2px
 }
 60%,to{
   box-shadow:9999px 0 0 -5px
 }
}
@keyframes dot-pulse{
 0%{
   box-shadow:9999px 0 0 -5px
 }
 30%{
   box-shadow:9999px 0 0 2px
 }
 60%,to{
   box-shadow:9999px 0 0 -5px
 }
}
@-webkit-keyframes dot-pulse-after{
 0%{
   box-shadow:10014px 0 0 -5px
 }
 30%{
   box-shadow:10014px 0 0 2px
 }
 60%,to{
   box-shadow:10014px 0 0 -5px
 }
}
@keyframes dot-pulse-after{
 0%{
   box-shadow:10014px 0 0 -5px
 }
 30%{
   box-shadow:10014px 0 0 2px
 }
 60%,to{
   box-shadow:10014px 0 0 -5px
 }
}
.dot-flashing{
 -webkit-animation:dot-flashing 1s linear infinite alternate;
 animation:dot-flashing 1s linear infinite alternate;
 -webkit-animation-delay:.5s;
 animation-delay:.5s;
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 width:10px
}
.dot-flashing:after,.dot-flashing:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-flashing:before{
 -webkit-animation:dot-flashing 1s infinite alternate;
 animation:dot-flashing 1s infinite alternate;
 -webkit-animation-delay:0s;
 animation-delay:0s;
 left:-15px
}
.dot-flashing:after,.dot-flashing:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-flashing:after{
 -webkit-animation:dot-flashing 1s infinite alternate;
 animation:dot-flashing 1s infinite alternate;
 -webkit-animation-delay:1s;
 animation-delay:1s;
 left:15px
}
@-webkit-keyframes dot-flashing{
 0%{
   background-color:#9880ff
 }
 50%,to{
   background-color:#ebe6ff
 }
}
@keyframes dot-flashing{
 0%{
   background-color:#9880ff
 }
 50%,to{
   background-color:#ebe6ff
 }
}
.dot-collision{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 width:10px
}
.dot-collision:after,.dot-collision:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-collision:before{
 -webkit-animation:dot-collision-before 2s ease-in infinite;
 animation:dot-collision-before 2s ease-in infinite;
 left:-10px
}
.dot-collision:after,.dot-collision:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-collision:after{
 -webkit-animation:dot-collision-after 2s ease-in infinite;
 animation:dot-collision-after 2s ease-in infinite;
 -webkit-animation-delay:1s;
 animation-delay:1s;
 left:10px
}
@-webkit-keyframes dot-collision-before{
 0%,50%,75%,to{
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 25%{
   -webkit-transform:translateX(-15px);
   transform:translateX(-15px)
 }
}
@keyframes dot-collision-before{
 0%,50%,75%,to{
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 25%{
   -webkit-transform:translateX(-15px);
   transform:translateX(-15px)
 }
}
@-webkit-keyframes dot-collision-after{
 0%,50%,75%,to{
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 25%{
   -webkit-transform:translateX(15px);
   transform:translateX(15px)
 }
}
@keyframes dot-collision-after{
 0%,50%,75%,to{
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 25%{
   -webkit-transform:translateX(15px);
   transform:translateX(15px)
 }
}
.dot-revolution{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 width:10px
}
.dot-revolution:after,.dot-revolution:before{
 content:"";
 display:inline-block;
 position:absolute
}
.dot-revolution:before{
 -webkit-animation:dot-revolution 1.4s linear infinite;
 animation:dot-revolution 1.4s linear infinite;
 top:-15px;
 -webkit-transform-origin:5px 20px;
 transform-origin:5px 20px
}
.dot-revolution:after,.dot-revolution:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 left:0;
 width:10px
}
.dot-revolution:after{
 -webkit-animation:dot-revolution 1s linear infinite;
 animation:dot-revolution 1s linear infinite;
 top:-30px;
 -webkit-transform-origin:5px 35px;
 transform-origin:5px 35px
}
@-webkit-keyframes dot-revolution{
 0%{
   -webkit-transform:rotate(0deg) translateZ(0);
   transform:rotate(0deg) translateZ(0)
 }
 to{
   -webkit-transform:rotate(1turn) translateZ(0);
   transform:rotate(1turn) translateZ(0)
 }
}
@keyframes dot-revolution{
 0%{
   -webkit-transform:rotate(0deg) translateZ(0);
   transform:rotate(0deg) translateZ(0)
 }
 to{
   -webkit-transform:rotate(1turn) translateZ(0);
   transform:rotate(1turn) translateZ(0)
 }
}
.dot-carousel{
 -webkit-animation:dot-carousel 1.5s linear infinite;
 animation:dot-carousel 1.5s linear infinite;
 background-color:#9880ff;
 border-radius:5px;
 box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;
 color:#9880ff;
 height:10px;
 left:-9999px;
 position:relative;
 width:10px
}
@-webkit-keyframes dot-carousel{
 0%{
   box-shadow:9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff
 }
 50%{
   box-shadow:10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff
 }
 to{
   box-shadow:9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff
 }
}
@keyframes dot-carousel{
 0%{
   box-shadow:9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff
 }
 50%{
   box-shadow:10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff
 }
 to{
   box-shadow:9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff
 }
}
.dot-typing{
 -webkit-animation:dot-typing 1.5s linear infinite;
 animation:dot-typing 1.5s linear infinite;
 background-color:#9880ff;
 border-radius:5px;
 box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;
 color:#9880ff;
 height:10px;
 left:-9999px;
 position:relative;
 width:10px
}
@-webkit-keyframes dot-typing{
 0%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 16.667%{
   box-shadow:9984px -10px 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 33.333%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 50%{
   box-shadow:9984px 0 0 0 #9880ff,9999px -10px 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 66.667%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 83.333%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px -10px 0 0 #9880ff
 }
 to{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
}
@keyframes dot-typing{
 0%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 16.667%{
   box-shadow:9984px -10px 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 33.333%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 50%{
   box-shadow:9984px 0 0 0 #9880ff,9999px -10px 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 66.667%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
 83.333%{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px -10px 0 0 #9880ff
 }
 to{
   box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff
 }
}
.dot-windmill{
 -webkit-animation:dot-windmill 2s linear infinite;
 animation:dot-windmill 2s linear infinite;
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 top:-10px;
 -webkit-transform-origin:5px 15px;
 transform-origin:5px 15px;
 width:10px
}
.dot-windmill:after,.dot-windmill:before{
 content:"";
 display:inline-block;
 position:absolute
}
.dot-windmill:before{
 left:-8.66254px
}
.dot-windmill:after,.dot-windmill:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 top:15px;
 width:10px
}
.dot-windmill:after{
 left:8.66254px
}
@-webkit-keyframes dot-windmill{
 0%{
   -webkit-transform:rotate(0deg) translateZ(0);
   transform:rotate(0deg) translateZ(0)
 }
 to{
   -webkit-transform:rotate(2turn) translateZ(0);
   transform:rotate(2turn) translateZ(0)
 }
}
@keyframes dot-windmill{
 0%{
   -webkit-transform:rotate(0deg) translateZ(0);
   transform:rotate(0deg) translateZ(0)
 }
 to{
   -webkit-transform:rotate(2turn) translateZ(0);
   transform:rotate(2turn) translateZ(0)
 }
}
.dot-bricks{
 -webkit-animation:dot-bricks 2s ease infinite;
 animation:dot-bricks 2s ease infinite;
 background-color:#9880ff;
 border-radius:5px;
 box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff;
 color:#9880ff;
 height:10px;
 left:-9999px;
 position:relative;
 top:8px;
 width:10px
}
@-webkit-keyframes dot-bricks{
 0%{
   box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
 8.333%{
   box-shadow:10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
 16.667%{
   box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
 25%{
   box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff
 }
 33.333%{
   box-shadow:10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff
 }
 41.667%{
   box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff
 }
 50%{
   box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff
 }
 58.333%{
   box-shadow:9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff
 }
 66.666%{
   box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff
 }
 75%{
   box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff
 }
 83.333%{
   box-shadow:9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff
 }
 91.667%{
   box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff
 }
 to{
   box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
}
@keyframes dot-bricks{
 0%{
   box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
 8.333%{
   box-shadow:10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
 16.667%{
   box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
 25%{
   box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff
 }
 33.333%{
   box-shadow:10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff
 }
 41.667%{
   box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff
 }
 50%{
   box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff
 }
 58.333%{
   box-shadow:9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff
 }
 66.666%{
   box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff
 }
 75%{
   box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff
 }
 83.333%{
   box-shadow:9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff
 }
 91.667%{
   box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff
 }
 to{
   box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff
 }
}
.dot-floating{
 -webkit-animation:dot-floating 3s cubic-bezier(.15,.6,.9,.1) infinite;
 animation:dot-floating 3s cubic-bezier(.15,.6,.9,.1) infinite;
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 width:10px
}
.dot-floating:after,.dot-floating:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-floating:before{
 -webkit-animation:dot-floating-before 3s ease-in-out infinite;
 animation:dot-floating-before 3s ease-in-out infinite;
 left:-12px
}
.dot-floating:after,.dot-floating:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-floating:after{
 -webkit-animation:dot-floating-after 3s cubic-bezier(.4,0,1,1) infinite;
 animation:dot-floating-after 3s cubic-bezier(.4,0,1,1) infinite;
 left:-24px
}
@-webkit-keyframes dot-floating{
 0%{
   left:calc(-50% - 5px)
 }
 75%{
   left:calc(50% + 105px)
 }
 to{
   left:calc(50% + 105px)
 }
}
@keyframes dot-floating{
 0%{
   left:calc(-50% - 5px)
 }
 75%{
   left:calc(50% + 105px)
 }
 to{
   left:calc(50% + 105px)
 }
}
@-webkit-keyframes dot-floating-before{
 0%{
   left:-50px
 }
 50%{
   left:-12px
 }
 75%{
   left:-50px
 }
 to{
   left:-50px
 }
}
@keyframes dot-floating-before{
 0%{
   left:-50px
 }
 50%{
   left:-12px
 }
 75%{
   left:-50px
 }
 to{
   left:-50px
 }
}
@-webkit-keyframes dot-floating-after{
 0%{
   left:-100px
 }
 50%{
   left:-24px
 }
 75%{
   left:-100px
 }
 to{
   left:-100px
 }
}
@keyframes dot-floating-after{
 0%{
   left:-100px
 }
 50%{
   left:-24px
 }
 75%{
   left:-100px
 }
 to{
   left:-100px
 }
}
.dot-fire{
 -webkit-animation:dot-fire 1.5s linear infinite;
 animation:dot-fire 1.5s linear infinite;
 -webkit-animation-delay:-.85s;
 animation-delay:-.85s;
 box-shadow:9999px 22.5px 0 -5px #9880ff;
 left:-9999px;
 position:relative
}
.dot-fire,.dot-fire:after,.dot-fire:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-fire:after,.dot-fire:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-fire:before{
 -webkit-animation:dot-fire 1.5s linear infinite;
 animation:dot-fire 1.5s linear infinite;
 -webkit-animation-delay:-1.85s;
 animation-delay:-1.85s
}
.dot-fire:after,.dot-fire:before{
 box-shadow:9999px 22.5px 0 -5px #9880ff
}
.dot-fire:after{
 -webkit-animation:dot-fire 1.5s linear infinite;
 animation:dot-fire 1.5s linear infinite;
 -webkit-animation-delay:-2.85s;
 animation-delay:-2.85s
}
@-webkit-keyframes dot-fire{
 1%{
   box-shadow:9999px 22.5px 0 -5px #9880ff
 }
 50%{
   box-shadow:9999px -5.625px 0 2px #9880ff
 }
 to{
   box-shadow:9999px -22.5px 0 -5px #9880ff
 }
}
@keyframes dot-fire{
 1%{
   box-shadow:9999px 22.5px 0 -5px #9880ff
 }
 50%{
   box-shadow:9999px -5.625px 0 2px #9880ff
 }
 to{
   box-shadow:9999px -22.5px 0 -5px #9880ff
 }
}
.dot-spin{
 -webkit-animation:dot-spin 1.5s linear infinite;
 animation:dot-spin 1.5s linear infinite;
 background-color:initial;
 border-radius:5px;
 box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72793px 12.72793px 0 0 rgba(152,128,255,0),0 18px 0 0 rgba(152,128,255,0),-12.72793px 12.72793px 0 0 rgba(152,128,255,0),-18px 0 0 0 rgba(152,128,255,0),-12.72793px -12.72793px 0 0 rgba(152,128,255,0);
 color:transparent;
 height:10px;
 position:relative;
 width:10px
}
@-webkit-keyframes dot-spin{
 0%,to{
   box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 12.5%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72793px 12.72793px 0 0 #9880ff,0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 25%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 0 #9880ff,12.72793px 12.72793px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 37.5%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72793px 12.72793px 0 0 #9880ff,-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 50%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 0 #9880ff,-12.72793px 12.72793px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 62.5%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72793px -12.72793px 0 0 #9880ff
 }
 75%{
   box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #9880ff,-12.72793px -12.72793px 0 0 #9880ff
 }
 87.5%{
   box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 0 #9880ff,18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 0 #9880ff
 }
}
@keyframes dot-spin{
 0%,to{
   box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 12.5%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72793px 12.72793px 0 0 #9880ff,0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 25%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 0 #9880ff,12.72793px 12.72793px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 37.5%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72793px 12.72793px 0 0 #9880ff,-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 50%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 0 #9880ff,-12.72793px 12.72793px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72793px -12.72793px 0 -5px rgba(152,128,255,0)
 }
 62.5%{
   box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72793px -12.72793px 0 0 #9880ff
 }
 75%{
   box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #9880ff,-12.72793px -12.72793px 0 0 #9880ff
 }
 87.5%{
   box-shadow:0 -18px 0 0 #9880ff,12.72793px -12.72793px 0 0 #9880ff,18px 0 0 -5px rgba(152,128,255,0),12.72793px 12.72793px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72793px 12.72793px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72793px -12.72793px 0 0 #9880ff
 }
}
.dot-falling{
 -webkit-animation:dot-falling 1s linear infinite;
 animation:dot-falling 1s linear infinite;
 -webkit-animation-delay:.1s;
 animation-delay:.1s;
 background-color:#9880ff;
 border-radius:5px;
 box-shadow:9999px 0 0 0 #9880ff;
 color:#9880ff;
 height:10px;
 left:-9999px;
 position:relative;
 width:10px
}
.dot-falling:after,.dot-falling:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-falling:before{
 -webkit-animation:dot-falling-before 1s linear infinite;
 animation:dot-falling-before 1s linear infinite;
 -webkit-animation-delay:0s;
 animation-delay:0s
}
.dot-falling:after,.dot-falling:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-falling:after{
 -webkit-animation:dot-falling-after 1s linear infinite;
 animation:dot-falling-after 1s linear infinite;
 -webkit-animation-delay:.2s;
 animation-delay:.2s
}
@-webkit-keyframes dot-falling{
 0%{
   box-shadow:9999px -15px 0 0 rgba(152,128,255,0)
 }
 25%,50%,75%{
   box-shadow:9999px 0 0 0 #9880ff
 }
 to{
   box-shadow:9999px 15px 0 0 rgba(152,128,255,0)
 }
}
@keyframes dot-falling{
 0%{
   box-shadow:9999px -15px 0 0 rgba(152,128,255,0)
 }
 25%,50%,75%{
   box-shadow:9999px 0 0 0 #9880ff
 }
 to{
   box-shadow:9999px 15px 0 0 rgba(152,128,255,0)
 }
}
@-webkit-keyframes dot-falling-before{
 0%{
   box-shadow:9984px -15px 0 0 rgba(152,128,255,0)
 }
 25%,50%,75%{
   box-shadow:9984px 0 0 0 #9880ff
 }
 to{
   box-shadow:9984px 15px 0 0 rgba(152,128,255,0)
 }
}
@keyframes dot-falling-before{
 0%{
   box-shadow:9984px -15px 0 0 rgba(152,128,255,0)
 }
 25%,50%,75%{
   box-shadow:9984px 0 0 0 #9880ff
 }
 to{
   box-shadow:9984px 15px 0 0 rgba(152,128,255,0)
 }
}
@-webkit-keyframes dot-falling-after{
 0%{
   box-shadow:10014px -15px 0 0 rgba(152,128,255,0)
 }
 25%,50%,75%{
   box-shadow:10014px 0 0 0 #9880ff
 }
 to{
   box-shadow:10014px 15px 0 0 rgba(152,128,255,0)
 }
}
@keyframes dot-falling-after{
 0%{
   box-shadow:10014px -15px 0 0 rgba(152,128,255,0)
 }
 25%,50%,75%{
   box-shadow:10014px 0 0 0 #9880ff
 }
 to{
   box-shadow:10014px 15px 0 0 rgba(152,128,255,0)
 }
}
.dot-stretching{
 -webkit-animation:dot-stretching 2s ease-in infinite;
 animation:dot-stretching 2s ease-in infinite;
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 position:relative;
 -webkit-transform:scale(1.25);
 transform:scale(1.25);
 width:10px
}
.dot-stretching:after,.dot-stretching:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-stretching:before{
 -webkit-animation:dot-stretching-before 2s ease-in infinite;
 animation:dot-stretching-before 2s ease-in infinite
}
.dot-stretching:after,.dot-stretching:before{
 background-color:#9880ff;
 border-radius:5px;
 color:#9880ff;
 height:10px;
 width:10px
}
.dot-stretching:after{
 -webkit-animation:dot-stretching-after 2s ease-in infinite;
 animation:dot-stretching-after 2s ease-in infinite
}
@-webkit-keyframes dot-stretching{
 0%{
   -webkit-transform:scale(1.25);
   transform:scale(1.25)
 }
 50%,60%{
   -webkit-transform:scale(.8);
   transform:scale(.8)
 }
 to{
   -webkit-transform:scale(1.25);
   transform:scale(1.25)
 }
}
@keyframes dot-stretching{
 0%{
   -webkit-transform:scale(1.25);
   transform:scale(1.25)
 }
 50%,60%{
   -webkit-transform:scale(.8);
   transform:scale(.8)
 }
 to{
   -webkit-transform:scale(1.25);
   transform:scale(1.25)
 }
}
@-webkit-keyframes dot-stretching-before{
 0%{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
 50%,60%{
   -webkit-transform:translate(-20px) scale(1);
   transform:translate(-20px) scale(1)
 }
 to{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
}
@keyframes dot-stretching-before{
 0%{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
 50%,60%{
   -webkit-transform:translate(-20px) scale(1);
   transform:translate(-20px) scale(1)
 }
 to{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
}
@-webkit-keyframes dot-stretching-after{
 0%{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
 50%,60%{
   -webkit-transform:translate(20px) scale(1);
   transform:translate(20px) scale(1)
 }
 to{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
}
@keyframes dot-stretching-after{
 0%{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
 50%,60%{
   -webkit-transform:translate(20px) scale(1);
   transform:translate(20px) scale(1)
 }
 to{
   -webkit-transform:translate(0) scale(.7);
   transform:translate(0) scale(.7)
 }
}
.dot-gathering{
 margin:-1px 0;
 position:relative
}
.dot-gathering,.dot-gathering:after,.dot-gathering:before{
 background-color:#000;
 border-radius:6px;
 color:transparent;
 -webkit-filter:blur(2px);
 filter:blur(2px);
 height:12px;
 width:12px
}
.dot-gathering:after,.dot-gathering:before{
 -webkit-animation:dot-gathering 2s ease-in infinite;
 animation:dot-gathering 2s ease-in infinite;
 content:"";
 display:inline-block;
 left:-50px;
 opacity:0;
 position:absolute;
 top:0
}
.dot-gathering:after{
 -webkit-animation-delay:.5s;
 animation-delay:.5s
}
@-webkit-keyframes dot-gathering{
 0%{
   opacity:0;
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 35%,60%{
   opacity:1;
   -webkit-transform:translateX(50px);
   transform:translateX(50px)
 }
 to{
   opacity:0;
   -webkit-transform:translateX(100px);
   transform:translateX(100px)
 }
}
@keyframes dot-gathering{
 0%{
   opacity:0;
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 35%,60%{
   opacity:1;
   -webkit-transform:translateX(50px);
   transform:translateX(50px)
 }
 to{
   opacity:0;
   -webkit-transform:translateX(100px);
   transform:translateX(100px)
 }
}
.dot-hourglass{
 -webkit-animation:dot-hourglass 2.4s ease-in-out infinite;
 animation:dot-hourglass 2.4s ease-in-out infinite;
 -webkit-animation-delay:.6s;
 animation-delay:.6s;
 margin:-1px 0;
 position:relative;
 top:-15px;
 -webkit-transform-origin:5px 20px;
 transform-origin:5px 20px
}
.dot-hourglass,.dot-hourglass:after,.dot-hourglass:before{
 background-color:#000;
 border-radius:6px;
 color:transparent;
 -webkit-filter:blur(2px);
 filter:blur(2px);
 height:12px;
 width:12px
}
.dot-hourglass:after,.dot-hourglass:before{
 content:"";
 display:inline-block;
 left:0;
 position:absolute;
 top:0
}
.dot-hourglass:before{
 top:30px
}
.dot-hourglass:after{
 -webkit-animation:dot-hourglass-after 2.4s cubic-bezier(.65,.05,.36,1) infinite;
 animation:dot-hourglass-after 2.4s cubic-bezier(.65,.05,.36,1) infinite
}
@-webkit-keyframes dot-hourglass{
 0%{
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg)
 }
 25%{
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg)
 }
 50%{
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg)
 }
 75%{
   -webkit-transform:rotate(1turn);
   transform:rotate(1turn)
 }
 to{
   -webkit-transform:rotate(1turn);
   transform:rotate(1turn)
 }
}
@keyframes dot-hourglass{
 0%{
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg)
 }
 25%{
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg)
 }
 50%{
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg)
 }
 75%{
   -webkit-transform:rotate(1turn);
   transform:rotate(1turn)
 }
 to{
   -webkit-transform:rotate(1turn);
   transform:rotate(1turn)
 }
}
@-webkit-keyframes dot-hourglass-after{
 0%{
   -webkit-transform:translateY(0);
   transform:translateY(0)
 }
 25%{
   -webkit-transform:translateY(30px);
   transform:translateY(30px)
 }
 50%{
   -webkit-transform:translateY(30px);
   transform:translateY(30px)
 }
 75%{
   -webkit-transform:translateY(0);
   transform:translateY(0)
 }
 to{
   -webkit-transform:translateY(0);
   transform:translateY(0)
 }
}
@keyframes dot-hourglass-after{
 0%{
   -webkit-transform:translateY(0);
   transform:translateY(0)
 }
 25%{
   -webkit-transform:translateY(30px);
   transform:translateY(30px)
 }
 50%{
   -webkit-transform:translateY(30px);
   transform:translateY(30px)
 }
 75%{
   -webkit-transform:translateY(0);
   transform:translateY(0)
 }
 to{
   -webkit-transform:translateY(0);
   transform:translateY(0)
 }
}
.dot-overtaking{
 -webkit-animation:dot-overtaking 2s cubic-bezier(.2,.6,.8,.2) infinite;
 animation:dot-overtaking 2s cubic-bezier(.2,.6,.8,.2) infinite;
 margin:-1px 0;
 position:relative
}
.dot-overtaking,.dot-overtaking:after,.dot-overtaking:before{
 background-color:initial;
 border-radius:6px;
 box-shadow:0 -20px 0 0;
 color:#000;
 -webkit-filter:blur(2px);
 filter:blur(2px);
 height:12px;
 width:12px
}
.dot-overtaking:after,.dot-overtaking:before{
 content:"";
 display:inline-block;
 left:0;
 position:absolute;
 top:0
}
.dot-overtaking:before{
 -webkit-animation:dot-overtaking 2s cubic-bezier(.2,.6,.8,.2) infinite;
 animation:dot-overtaking 2s cubic-bezier(.2,.6,.8,.2) infinite;
 -webkit-animation-delay:.3s;
 animation-delay:.3s
}
.dot-overtaking:after{
 -webkit-animation:dot-overtaking 1.5s cubic-bezier(.2,.6,.8,.2) infinite;
 animation:dot-overtaking 1.5s cubic-bezier(.2,.6,.8,.2) infinite;
 -webkit-animation-delay:.6s;
 animation-delay:.6s
}
@-webkit-keyframes dot-overtaking{
 0%{
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg)
 }
 to{
   -webkit-transform:rotate(1turn);
   transform:rotate(1turn)
 }
}
@keyframes dot-overtaking{
 0%{
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg)
 }
 to{
   -webkit-transform:rotate(1turn);
   transform:rotate(1turn)
 }
}
.dot-shuttle{
 left:-15px;
 margin:-1px 0;
 position:relative
}
.dot-shuttle,.dot-shuttle:after,.dot-shuttle:before{
 background-color:#000;
 border-radius:6px;
 color:transparent;
 -webkit-filter:blur(2px);
 filter:blur(2px);
 height:12px;
 width:12px
}
.dot-shuttle:after,.dot-shuttle:before{
 content:"";
 display:inline-block;
 position:absolute;
 top:0
}
.dot-shuttle:before{
 -webkit-animation:dot-shuttle 2s ease-out infinite;
 animation:dot-shuttle 2s ease-out infinite;
 left:15px
}
.dot-shuttle:after{
 left:30px
}
@-webkit-keyframes dot-shuttle{
 0%,50%,to{
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 25%{
   -webkit-transform:translateX(-45px);
   transform:translateX(-45px)
 }
 75%{
   -webkit-transform:translateX(45px);
   transform:translateX(45px)
 }
}
@keyframes dot-shuttle{
 0%,50%,to{
   -webkit-transform:translateX(0);
   transform:translateX(0)
 }
 25%{
   -webkit-transform:translateX(-45px);
   transform:translateX(-45px)
 }
 75%{
   -webkit-transform:translateX(45px);
   transform:translateX(45px)
 }
}
.dot-bouncing{
 font-size:10px;
 height:10px;
 position:relative
}
.dot-bouncing:before{
 -webkit-animation:dot-bouncing 1s infinite;
 animation:dot-bouncing 1s infinite;
 content:"⚽🏀🏐";
 display:inline-block;
 position:relative
}
@-webkit-keyframes dot-bouncing{
 0%{
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in;
   top:-20px
 }
 34%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 35%{
   -webkit-animation-timing-function:ease-out;
   animation-timing-function:ease-out;
   top:20px;
   -webkit-transform:scale(1.5,.5);
   transform:scale(1.5,.5)
 }
 45%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 90%{
   top:-20px
 }
 to{
   top:-20px
 }
}
@keyframes dot-bouncing{
 0%{
   -webkit-animation-timing-function:ease-in;
   animation-timing-function:ease-in;
   top:-20px
 }
 34%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 35%{
   -webkit-animation-timing-function:ease-out;
   animation-timing-function:ease-out;
   top:20px;
   -webkit-transform:scale(1.5,.5);
   transform:scale(1.5,.5)
 }
 45%{
   -webkit-transform:scale(1);
   transform:scale(1)
 }
 90%{
   top:-20px
 }
 to{
   top:-20px
 }
}
.dot-rolling{
 font-size:10px;
 height:10px;
 position:relative
}
.dot-rolling:before{
 -webkit-animation:dot-rolling 3s infinite;
 animation:dot-rolling 3s infinite;
 content:"⚽";
 display:inline-block;
 position:relative;
 -webkit-transform:translateX(-25px);
 transform:translateX(-25px)
}
@-webkit-keyframes dot-rolling{
 0%{
   content:"⚽";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 16.667%{
   content:"⚽";
   -webkit-transform:translateX(25px) rotate(2turn);
   transform:translateX(25px) rotate(2turn)
 }
 33.333%{
   content:"⚽";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 34.333%{
   content:"🏀";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 50%{
   content:"🏀";
   -webkit-transform:translateX(25px) rotate(2turn);
   transform:translateX(25px) rotate(2turn)
 }
 66.667%{
   content:"🏀";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 67.667%{
   content:"🏐";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 83.333%{
   content:"🏐";
   -webkit-transform:translateX(25px) rotate(2turn);
   transform:translateX(25px) rotate(2turn)
 }
 to{
   content:"🏐";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
}
@keyframes dot-rolling{
 0%{
   content:"⚽";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 16.667%{
   content:"⚽";
   -webkit-transform:translateX(25px) rotate(2turn);
   transform:translateX(25px) rotate(2turn)
 }
 33.333%{
   content:"⚽";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 34.333%{
   content:"🏀";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 50%{
   content:"🏀";
   -webkit-transform:translateX(25px) rotate(2turn);
   transform:translateX(25px) rotate(2turn)
 }
 66.667%{
   content:"🏀";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 67.667%{
   content:"🏐";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
 83.333%{
   content:"🏐";
   -webkit-transform:translateX(25px) rotate(2turn);
   transform:translateX(25px) rotate(2turn)
 }
 to{
   content:"🏐";
   -webkit-transform:translateX(-25px) rotate(0deg);
   transform:translateX(-25px) rotate(0deg)
 }
}
.tempo-container{
 align-items:center;
 display:flex;
 flex-direction:row
}
.tempo-container__text{
 color:#282828;
 font-size:14px;
 font-weight:700;
 letter-spacing:0;
 line-height:16px;
 margin-bottom:0;
 min-width:50px
}
.tempo-container__text a{
 color:inherit
}
.tempo-container__text--voice{
 display:block;
 margin-bottom:20px;
 margin-right:15%;
 max-width:420px;
 width:30%
}
.tempo-container__container{
 align-items:center;
 display:flex;
 flex-direction:row;
 max-width:350px;
 min-width:200px
}
.tempo-container__popup{
 border-radius:21px;
 margin-bottom:8px;
 margin-top:8px;
 padding-left:8px;
 padding-right:8px
}
.tempo-container__slider{
 align-items:center;
 display:flex;
 flex-grow:1
}
.tempo-container__button{
 height:24px;
 width:32px
}
.tempo-container__image{
 box-sizing:border-box;
 flex-basis:48px;
 margin-left:8px;
 margin-right:8px
}
.tempo-container__image svg{
 display:block;
 height:100%;
 width:100%
}
#tempoButton{
 background-color:transparent;
 border-radius:21px;
 box-shadow:none;
 cursor:pointer;
 width:32px
}
.simple-popover>.MuiPaper-elevation{
 border-radius:21px;
 margin-right:16px
}
div.rc-slider-handle{
 opacity:1
}
@media screen and (min-width:1024px){
 .tempo-container__container{
   width:250px
 }
}
.rc-slider{
 border-radius:6px;
 height:14px;
 padding:5px 0;
 position:relative;
 touch-action:none;
 width:100%
}
.rc-slider,.rc-slider *{
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 box-sizing:border-box
}
.rc-slider-rail{
 background-color:#e9e9e9;
 width:100%
}
.rc-slider-rail,.rc-slider-track{
 border-radius:6px;
 height:4px;
 position:absolute
}
.rc-slider-track{
 background-color:#abe2fb
}
.rc-slider-handle{
 background-color:#fff;
 border:2px solid #96dbfa;
 border-radius:50%;
 cursor:pointer;
 cursor:grab;
 height:14px;
 margin-top:-5px;
 opacity:.8;
 position:absolute;
 touch-action:pan-x;
 width:14px
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{
 border-color:#57c5f7;
 box-shadow:0 0 0 5px #96dbfa
}
.rc-slider-handle:focus{
 box-shadow:none;
 outline:none
}
.rc-slider-handle:focus-visible{
 border-color:#2db7f5;
 box-shadow:0 0 0 3px #96dbfa
}
.rc-slider-handle-click-focused:focus{
 border-color:#96dbfa;
 box-shadow:none
}
.rc-slider-handle:hover{
 border-color:#57c5f7
}
.rc-slider-handle:active{
 border-color:#57c5f7;
 box-shadow:0 0 5px #57c5f7;
 cursor:grabbing
}
.rc-slider-mark{
 font-size:12px;
 left:0;
 position:absolute;
 top:18px;
 width:100%
}
.rc-slider-mark-text{
 color:#999;
 cursor:pointer;
 display:inline-block;
 position:absolute;
 text-align:center;
 vertical-align:middle
}
.rc-slider-mark-text-active{
 color:#666
}
.rc-slider-step{
 background:transparent;
 height:4px;
 pointer-events:none;
 position:absolute;
 width:100%
}
.rc-slider-dot{
 background-color:#fff;
 border:2px solid #e9e9e9;
 border-radius:50%;
 bottom:-2px;
 cursor:pointer;
 height:8px;
 position:absolute;
 vertical-align:middle;
 width:8px
}
.rc-slider-dot-active{
 border-color:#96dbfa
}
.rc-slider-dot-reverse{
 margin-right:-4px
}
.rc-slider-disabled{
 background-color:#e9e9e9
}
.rc-slider-disabled .rc-slider-track{
 background-color:#ccc
}
.rc-slider-disabled .rc-slider-dot,.rc-slider-disabled .rc-slider-handle{
 background-color:#fff;
 border-color:#ccc;
 box-shadow:none;
 cursor:not-allowed
}
.rc-slider-disabled .rc-slider-dot,.rc-slider-disabled .rc-slider-mark-text{
 cursor:not-allowed!important
}
.rc-slider-vertical{
 height:100%;
 padding:0 5px;
 width:14px
}
.rc-slider-vertical .rc-slider-rail{
 height:100%;
 width:4px
}
.rc-slider-vertical .rc-slider-track{
 bottom:0;
 left:5px;
 width:4px
}
.rc-slider-vertical .rc-slider-handle{
 margin-left:-5px;
 margin-top:0;
 touch-action:pan-y
}
.rc-slider-vertical .rc-slider-mark{
 height:100%;
 left:18px;
 top:0
}
.rc-slider-vertical .rc-slider-step{
 height:100%;
 width:4px
}
.rc-slider-vertical .rc-slider-dot{
 margin-left:-2px
}
.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-leave{
 -webkit-animation-duration:.3s;
 animation-duration:.3s;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-play-state:paused;
 animation-play-state:paused;
 display:block!important
}
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active,.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active{
 -webkit-animation-name:rcSliderTooltipZoomDownIn;
 animation-name:rcSliderTooltipZoomDownIn;
 -webkit-animation-play-state:running;
 animation-play-state:running
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{
 -webkit-animation-name:rcSliderTooltipZoomDownOut;
 animation-name:rcSliderTooltipZoomDownOut;
 -webkit-animation-play-state:running;
 animation-play-state:running
}
.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-enter{
 -webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);
 animation-timing-function:cubic-bezier(.23,1,.32,1);
 -webkit-transform:scale(0);
 transform:scale(0)
}
.rc-slider-tooltip-zoom-down-leave{
 -webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);
 animation-timing-function:cubic-bezier(.755,.05,.855,.06)
}
@-webkit-keyframes rcSliderTooltipZoomDownIn{
 0%{
   opacity:0;
   -webkit-transform:scale(0);
   transform:scale(0);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
}
@keyframes rcSliderTooltipZoomDownIn{
 0%{
   opacity:0;
   -webkit-transform:scale(0);
   transform:scale(0);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
 to{
   -webkit-transform:scale(1);
   transform:scale(1);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
}
@-webkit-keyframes rcSliderTooltipZoomDownOut{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
 to{
   opacity:0;
   -webkit-transform:scale(0);
   transform:scale(0);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
}
@keyframes rcSliderTooltipZoomDownOut{
 0%{
   -webkit-transform:scale(1);
   transform:scale(1);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
 to{
   opacity:0;
   -webkit-transform:scale(0);
   transform:scale(0);
   -webkit-transform-origin:50% 100%;
   transform-origin:50% 100%
 }
}
.rc-slider-tooltip{
 left:-9999px;
 position:absolute;
 top:-9999px;
 visibility:visible
}
.rc-slider-tooltip,.rc-slider-tooltip *{
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 box-sizing:border-box
}
.rc-slider-tooltip-hidden{
 display:none
}
.rc-slider-tooltip-placement-top{
 padding:4px 0 8px
}
.rc-slider-tooltip-inner{
 background-color:#6c6c6c;
 border-radius:6px;
 box-shadow:0 0 4px #d9d9d9;
 color:#fff;
 font-size:12px;
 height:24px;
 line-height:1;
 min-width:24px;
 padding:6px 2px;
 text-align:center;
 text-decoration:none
}
.rc-slider-tooltip-arrow{
 border-color:transparent;
 border-style:solid;
 height:0;
 position:absolute;
 width:0
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{
 border-top-color:#6c6c6c;
 border-width:4px 4px 0;
 bottom:4px;
 left:50%;
 margin-left:-4px
}
.description-section{
 border-top:1px solid rgba(40,40,40,.1)
}
.description{
 border-bottom:1px solid rgba(40,40,40,.1);
 padding:50px 16px
}
.description__image{
 margin-bottom:32px
}
.description__text__title,.description__title{
 color:#282828;
 font-size:20px;
 font-weight:700;
 letter-spacing:0;
 line-height:24px;
 margin-bottom:22px
}
.description__text{
 color:#282828;
 font-size:20px;
 letter-spacing:0;
 line-height:24px;
 margin-bottom:0
}
.description .example-sentence__text,.description__paragraph,.description__subtitle{
 color:#282828;
 font-size:16px;
 line-height:19px;
 margin-bottom:0
}
.description__paragraph{
 margin-bottom:22px
}
.description__subtitle{
 font-weight:700;
 margin-bottom:22px
}
.example-sentence{
 display:flex;
 margin-bottom:32px
}
.example-sentence__image{
 border-radius:100%;
 cursor:pointer;
 flex:0 0 40px;
 height:40px;
 margin-right:16px;
 pointer-events:auto;
 width:40px
}
.example-sentence__image div{
 align-items:center;
 display:flex;
 height:100%;
 justify-content:center;
 width:100%
}
.example-sentence__image svg{
 display:block;
 height:12px;
 width:12px
}
.example-sentence__image--disabled{
 cursor:not-allowed
}
.example-sentence__image--span svg{
 padding:8px
}
.example-sentence+.example-sentence{
 margin-bottom:0
}
.supporter{
 align-items:center;
 display:flex
}
.supporter__logo{
 height:70px;
 margin-right:20px;
 width:70px
}
.supporter__logo div,.supporter__logo svg{
 display:block;
 height:100%;
 width:100%
}
@media screen and (min-width:768px){
 .description{
   padding-left:6%;
   padding-right:6%
 }
}
@media screen and (min-width:1024px){
 .description{
   display:flex;
   padding-left:6%;
   padding-right:6%
 }
 .description__title{
   font-size:30px;
   line-height:35px
 }
 .description__image,.description__title{
   margin-right:15%;
   max-width:420px;
   width:30%
 }
 .description__image{
   margin-bottom:0
 }
 .description__image svg{
   max-width:450px
 }
 .description__text{
   width:60%
 }
 .example-sentence{
   align-items:center
 }
}
@media screen and (min-width:1920px){
 .description{
   padding-left:13%;
   padding-right:13%
 }
}
.scroll-down{
 align-items:center;
 display:none;
 margin-bottom:38px
}
.scroll-down__image{
 margin-right:20px
}
.scroll-down__text{
 color:#282828;
 font-size:20px;
 letter-spacing:0;
 line-height:24px;
 margin:0
}
@media screen and (min-width:1024px){
 .scroll-down{
   display:flex;
   margin-top:auto
 }
}
@font-face{
 font-display:swap;
 font-family:Roboto Regular;
 src:url(/static/media/Roboto-Regular.a8d6ac03c7b96b7acb62.ttf) format("truetype")
}
@font-face{
 font-family:Roboto Mono;
 font-weight:100 700;
 src:url(/static/media/RobotoMono-VariableFont_wght.2ccde177314ac34f20b8.ttf) format("truetype")
}
:root{
 background-color:#f4f4f4;
 box-sizing:border-box;
 color:#282828;
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 font-weight:400
}
*{
 margin:0;
 padding:0
}
body{
 height:100%
}
.body--fixed{
 position:fixed
}
.fixedPositionDropdown{
 overflow:hidden
}
code{
 font-family:Roboto Mono,monospace
}
h1,h2,h3,p{
 word-break:break-word
}
h1,h2,h3{
 font-weight:700;
 letter-spacing:0;
 margin-bottom:24px
}
p{
 margin-bottom:6%
}
h1{
 font-size:40px;
 line-height:45px
}
h2,h3{
 font-size:20px;
 line-height:24px
}
a{
 color:#4db6ac;
 cursor:pointer;
 text-decoration:none
}
.arrow svg{
 display:block;
 height:100%;
 width:100%
}
.red:hover{
 background-color:#cc4834
}
.purple:hover{
 background-color:#5046bd
}
.yellow:hover{
 background-color:#c59510
}
.white:hover{
 background-color:hsla(0,0%,100%,.4)
}
.red--full{
 background-color:#ef6650
}
.purple--full{
 background-color:#7268d8
}
.yellow--full{
 background-color:#e0b12b
}
.blue--full{
 background-color:#4db6ac
}
.section__viewport{
 display:flex;
 flex-direction:column;
 height:calc(100% - 74px)
}
.notfound,.section__viewport{
 margin-left:16px;
 margin-right:16px
}
.notfound{
 margin-top:20px
}
.cookie-container{
 align-items:center!important;
 box-sizing:border-box;
 padding-left:16px;
 padding-right:16px
}
.cookie-container a{
 color:#e0b12b
}
.cookie-container a:hover{
 color:#ef6650
}
.button--cookie{
 background-color:#7268d8;
 border:3px solid #7268d8;
 border-radius:21px;
 color:hsla(0,0%,100%,.95);
 font-size:14px;
 font-weight:700;
 height:32px;
 margin-bottom:16px;
 margin-left:0;
 margin-right:0;
 padding:0;
 text-align:center;
 width:135px
}
.text--cookie{
 margin:0;
 width:100%!important
}
button{
 cursor:pointer
}
.loading{
 font-family:Roboto Regular,sans-serif;
 font-size:16px;
 letter-spacing:.7px;
 margin-bottom:20px;
 margin-top:20px
}
.loading--margin{
 margin-left:16px;
 margin-right:16px
}
@media screen and (min-width:768px){
 .section__viewport{
   margin-left:6%;
   margin-right:6%
 }
 .notfound{
   margin-left:20px;
   margin-right:20px
 }
 .cookie-container{
   padding-left:6%;
   padding-right:6%
 }
 .loading--margin{
   margin-left:6%;
   margin-right:6%
 }
}
@media screen and (min-width:1024px){
 .notfound{
   margin-left:6%;
   margin-right:6%
 }
 .notfound,h2{
   font-size:30px
 }
 h2{
   font-weight:700;
   letter-spacing:0;
   line-height:35px
 }
 p{
   margin-bottom:32px
 }
 p.big{
   font-size:20px;
   letter-spacing:0;
   line-height:28px
 }
 .text--cookie{
   width:calc(100% - 160px)!important
 }
 .button--cookie{
   margin-bottom:0
 }
}
@media screen and (min-width:1920px){
 .section__viewport{
   margin-left:13%;
   margin-right:13%
 }
 .cookie-container{
   padding-left:13%;
   padding-right:13%
 }
 .loading--margin{
   margin-left:13%;
   margin-right:13%
 }
}
.page__bigmargin{
 margin-bottom:275px
}
@media screen and (min-width:425px){
 .page__bigmargin{
   margin-bottom:225px
 }
}
@media screen and (min-width:768px){
 .page__bigmargin{
   margin-bottom:175px
 }
}
@media screen and (min-width:1024px){
 .page__bigmargin{
   margin-bottom:125px
 }
}
@media screen and (min-width:1440px){
 .page__bigmargin{
   margin-bottom:100px
 }
}
@media screen and (min-width:2056px){
 .page__bigmargin{
   margin-bottom:0
 }
}
.page{
 margin-left:16px;
 margin-right:16px
}
.section__title--page{
 color:#9b9b9b;
 font-size:40px;
 font-weight:700;
 letter-spacing:0;
 line-height:44px;
 opacity:.3
}
.section__text{
 color:#282828;
 padding-top:20px
}
.section__text p{
 color:inherit;
 font-size:16px;
 letter-spacing:0;
 line-height:24px
}
.section__text h2{
 color:inherit;
 font-size:30px;
 font-weight:700;
 letter-spacing:0;
 line-height:38px
}
.section__text ol,.section__text ul{
 line-height:24px;
 list-style-position:inside;
 margin-bottom:30px;
 word-break:break-word
}
.section__text ul{
 list-style-type:disc;
 text-align:left
}
.section__text ul ul{
 margin-left:20px
}
.section__text ol{
 text-align:justify
}
.section__text h4{
 margin-bottom:16px
}
@media screen and (min-width:768px){
 .page{
   margin-left:0;
   margin-right:0
 }
 .section__title--page{
   font-size:80px;
   line-height:70px;
   margin-bottom:35px;
   margin-left:6%;
   margin-right:6%
 }
 .section__text{
   margin-left:21%;
   margin-right:28%;
   padding-top:0
 }
}
@media screen and (min-width:1920px){
 .section__title--page{
   margin-left:13%;
   margin-right:13%
 }
}