/*.preloader { display: flex; justify-content: center !important; align-items: center !important; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-color: rgb(0, 0, 0); opacity: .9; }*/

/*#region Preloader 1 */
.preloader1, .preloader1 .loader {
    display: flex;
    align-content: center
}
.preloader1 {
    height: 100%;
    width: 100%;
    padding: 20px 0;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    perspective: 700px;
}
.preloader1 .loader {
    text-align: center;
    margin: 5px;
    border-radius: 50%;
    border: 4px solid #fff;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    position: relative
}
.preloader1 .preloader1 .loader-inner-1 {
    animation: change_first_circle 2s ease-in-out infinite
}
.preloader1 .loader-inner-2 {
    animation: change_second_circle 2s ease-in-out infinite
}
.preloader1 .loader-inner-3 {
    width: 100px;
    height: 100px;
    animation: change_last_circle 3s linear infinite
}
@keyframes change_first_circle {
    50% {
        transform: rotateX(360deg) scale(.8)
    }
}
@keyframes change_second_circle {
    50% {
        transform: rotateY(360deg) scale(.8)
    }
}
@keyframes change_last_circle {
    50% {
        transform: rotateX(360deg) scale(.8)
    }
}
/*#endregion */
/*#region Preloader 2 */
.preloader2 { height: 105px; width: 105px; margin: 0 auto; animation: loader-container 10s linear infinite }
.preloader2 > div { width: 44px; height: 44px; box-shadow: 0 0 8px -2px rgba(0,0,0,.3); position: absolute; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite }
.preloader2 .box1 { background: linear-gradient(-45deg,red,#d60c0c); transform-origin: bottom center; top: 4px; left: 4px; animation-name: box1 }
.preloader2 .box2 { background: linear-gradient(-45deg,#15c109,#29870d); transform-origin: center left; top: 4px; right: 4px; animation-name: box2 }
.preloader2 .box3 { background: linear-gradient(-45deg,#c300ff,#a808a8); transform-origin: top center; bottom: 4px; right: 4px; animation-name: box3 }
.preloader2 .box4 { background: linear-gradient(-45deg,#fc8e28,#ea7e0b); transform-origin: center right; bottom: 4px; left: 4px; animation-name: box4 }

@keyframes loader-container {
    0%,23% { transform: rotate(0) }

    25%,48% { transform: rotate(90deg) }

    50%,73% { transform: rotate(180deg) }

    75%,98% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}

@keyframes box1 {
    0%,100%,99% { transform: perspective(200px) rotateX(90deg) }

    11%,88% { transform: perspective(200px) rotateX(0) }
}

@keyframes box2 {
    0%,100%,11%,88% { transform: perspective(200px) rotateY(90deg) }

    22%,77% { transform: perspective(200px) rotateY(0) }
}

@keyframes box3 {
    0%,100%,22%,77% { transform: perspective(200px) rotateX(-90deg) }

    33%,66% { transform: perspective(200px) rotateX(0) }
}

@keyframes box4 {
    0%,100%,33%,66% { transform: perspective(200px) rotateY(-90deg) }

    44%,55% { transform: perspective(200px) rotateY(0) }
}
/*#endregion */
/*#region Preloader 3 */
.preloader3 { height: 80px; width: 80px; margin: 20px auto 0; position: relative }

.preloader3:after, .preloader3:before { content: ''; height: 100%; width: 100%; border: 9px solid #fff; border-color: transparent #fff; position: absolute; left: 0; top: 0; animation: spin 2.2s linear 0s infinite normal }

.preloader3:after { width: 50%; height: 50%; margin: auto; border-style: dotted; border-radius: 50px; left: 0; top: 0; bottom: 0; right: 0; animation: spinback 1.5s linear 0s infinite normal }

@keyframes spin {
    from { transform: rotate(0) }

    to { transform: rotate(360deg) }
}

@keyframes spinback {
    from { transform: rotate(0) }

    to { transform: rotate(-360deg) }
}
/*#endregion */
/*#region Preloader 4 */
#loader4 { height: 100px; width: 260px; margin: 70px auto 0; position: relative }

#loader4 .loader { background: #ccc; width: 40px; height: 40px; border-radius: 24px; display: inline-block; position: absolute }

#loader4 .loader-1 { animation: animateDot1 1.5s linear infinite; left: 130px; background: #f73138 }

#loader4 .loader-2 { background: #00b733; left: 60px; animation: animateDot2 1.5s linear infinite; animation-delay: .5s }

#loader4 .loader-3 { background: #448afc; left: 130px; animation: animateDot3 1.5s linear infinite }

#loader4 .loader-4 { background: #950faf; left: 60px; animation: animateDot4 1.5s linear infinite; animation-delay: .5s }

@keyframes animateDot1 {
    0% { transform: rotate(0) translateX(-60px) }

    25%,75% { transform: rotate(180deg) translateX(-60px) }

    100% { transform: rotate(360deg) translateX(-60px) }
}

@keyframes animateDot2 {
    0% { transform: rotate(0) translateX(-70px) }

    25%,75% { transform: rotate(-180deg) translateX(-70px) }

    100% { transform: rotate(-360deg) translateX(-70px) }
}

@keyframes animateDot3 {
    0% { transform: rotate(0) translateX(60px) }

    25%,75% { transform: rotate(180deg) translateX(60px) }

    100% { transform: rotate(360deg) translateX(60px) }
}

@keyframes animateDot4 {
    0% { transform: rotate(0) translateX(60px) }

    25%,75% { transform: rotate(-180deg) translateX(60px) }

    100% { transform: rotate(-360deg) translateX(60px) }
}
/*#endregion */
/*#region Preloader 5 */
.loader5 { width: 300px; height: 300px; margin: 20px auto; position: relative }

.loader5 .loader-inner { width: 50px; height: 50px; border-radius: 25px; position: absolute; transition: all .8s ease-in-out }

.loader5 .box-1 { background: #89fc00; top: 125px; right: 0; -webkit-animation: loading-1 2.2s infinite; animation: loading-1 2.2s infinite }

.loader5 .box-2 { background: #dc0073; top: 125px; -webkit-animation: loading-2 2.2s infinite; animation: loading-2 2.2s infinite }

.loader5 .box-3 { background: #1be7ff; top: 0; left: 125px; -webkit-animation: loading-3 2.2s infinite; animation: loading-3 2.2s infinite }

.loader5 .box-4 { background: #ffb800; bottom: 0; left: 125px; -webkit-animation: loading-4 2.2s infinite; animation: loading-4 2.2s infinite }

@keyframes loading-1 {
    0%,100% { transform: translateX(0) }

    50% { transform: translateX(-250px) }
}

@keyframes loading-2 {
    0%,100% { transform: translateX(0) }

    50% { transform: translateX(250px) }
}

@keyframes loading-3 {
    0%,100% { transform: translateY(0) }

    50% { transform: translateY(250px) }
}

@keyframes loading-4 {
    0%,100% { transform: translateY(0) }

    50% { transform: translateY(-250px) }
}
/*#endregion */
/*#region Preloader 6 */
.loader6, .loader6:after, .loader6:before { width: 150px; height: 150px; border-radius: 50% }
.loader6 .loader-inner, .loader6:after, .loader6:before { top: 50%; transform: translate(-50%,-50%); position: absolute }
.loader6 { margin: 0 auto; position: relative; animation: loading-6 .8s infinite }
.loader6:after, .loader6:before { content: ""; margin-left: 50%; border: 10px solid transparent; border-left: 10px solid #e3b505 }
.loader6:after { border: 10px solid transparent; border-right: 10px solid #e3b505; position: absolute }
.loader6 .loader-inner { display: block; width: 120px; height: 120px; border-radius: 50%; border: 6px solid #f42b25; margin: 0 auto 0 50% }
.loader6 .loader-inner:after, .loader6 .loader-inner:before { content: ""; width: 80px; height: 80px; border-radius: 50%; border: 10px solid transparent; border-left: 10px solid #0cb3ea; margin-left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%) }
.loader6 .loader-inner:after { border: 10px solid transparent; border-right: 10px solid #0cb3ea }
@-webkit-keyframes loading-6 {
    0% { transform: rotate(180deg) }

    100% { transform: rotate(360deg) }
}
@keyframes loading-6 {
    0% { transform: rotate(180deg) }

    100% { transform: rotate(360deg) }
}
/*#endregion */
/*#region Preloader 7 */
.loader7 { width: 100px; height: 100px; margin: 50px auto; position: relative }

.loader7 .loader-inner-1, .loader7 .loader-inner-2, .loader7 .loader-inner-3, .loader7 .loader-inner-4 { display: block; width: 20px; height: 20px; border-radius: 20px; position: absolute }

.loader7 .loader-inner-1:before, .loader7 .loader-inner-2:before, .loader7 .loader-inner-3:before, .loader7 .loader-inner-4:before { content: ""; display: block; width: 20px; height: 20px; border-radius: 20px; position: absolute; right: 0; animation-name: loading-7; animation-iteration-count: infinite; animation-direction: normal; animation-duration: 2s }

.loader7 .loader-inner-1 { top: 0; left: 0; transform: rotate(70deg) }

.loader7 .loader-inner-1:before { background: #06aed5 }

.loader7 .loader-inner-2 { top: 0; right: 0; transform: rotate(160deg) }

.loader7 .loader-inner-2:before { background: #ec008c }

.loader7 .loader-inner-3 { bottom: 0; right: 0; transform: rotate(-110deg) }

.loader7 .loader-inner-3:before { background: #ffbf00 }

.loader7 .loader-inner-4 { bottom: 0; left: 0; transform: rotate(-20deg) }

.loader7 .loader-inner-4:before { background: #079c00 }

@keyframes loading-7 {
    0% { width: 20px; right: 0 }

    30% { width: 120px; right: -100px }

    60% { width: 20px; right: -100px }
}
/*#endregion */
/*#region Preloader 8 */
.loader8 .loader-inner, .loader8 .loader-inner:before { border-radius: 50%; width: 50px; height: 50px; position: absolute }
.loader8 { width: 200px; height: 90px; margin: 60px auto; position: relative }
.loader8 .loader-inner { margin-top: 22%; margin-left: 50%; transform: translate(-50%,-50%) }
.loader8 .loader-inner:before { content: ""; background: 0 0; box-shadow: 0 0 0 3px #1c5770,0 0 0 17px #03b5aa,-3px -3px 0 #1c5770 inset; left: 0; z-index: 1 }
.loader8 .loader-inner:after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: #ffb03b; box-shadow: -7px -7px 0 #cc8c2c inset; position: absolute; top: 10px; left: 80px; z-index: -1; -webkit-animation: loading-8 3s linear infinite; animation: loading-8 3s linear infinite }
@-webkit-keyframes loading-8 {
    0%,100% { width: 30px; height: 30px; left: 15px; z-index: 10 }

    13%,64% { width: 40px; height: 40px }

    22%,28% { left: -56px }

    23%,27% { left: -57px }

    24% { width: 30px; height: 30px; z-index: 10 }

    25% { left: -60px; z-index: -10 }

    38%,89% { width: 20px; height: 20px }

    49% { width: 30px; height: 30px; z-index: -10 }

    50% { left: 15px; z-index: 10 }

    72%,78% { left: 86px }

    73%,77% { left: 87px }

    74% { z-index: 10 }

    75% { width: 30px; height: 30px; left: 90px; z-index: -10 }

    99% { z-index: -10 }
}
@keyframes loading-8 {
    0%,100% { width: 30px; height: 30px; left: 15px; z-index: 10 }

    13%,64% { width: 40px; height: 40px }

    22%,28% { left: -56px }

    23%,27% { left: -57px }

    24% { width: 30px; height: 30px; z-index: 10 }

    25% { left: -60px; z-index: -10 }

    38%,89% { width: 20px; height: 20px }

    49% { width: 30px; height: 30px; z-index: -10 }

    50% { left: 15px; z-index: 10 }

    72%,78% { left: 86px }

    73%,77% { left: 87px }

    74% { z-index: 10 }

    75% { width: 30px; height: 30px; left: 90px; z-index: -10 }

    99% { z-index: -10 }
}
/*#endregion */
/*#region Preloader 9 */
.loader9 { width: 256px; height: 256px; margin: 100px auto 0; position: relative }
.loader9:after { content: ""; width: 64px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.05); position: absolute; top: 205px; left: 96px; animation: loading-93 1.25s linear infinite }
.loader9 .box-1, .loader9 .box-2 { border-radius: 2px; position: absolute }
.loader9 .box-1 { width: 64px; height: 64px; background: #72e82b; top: 146px; left: 96px; z-index: 1; animation: loading-9 1.25s linear infinite }
.loader9 .box-2 { width: 32px; height: 32px; background: #ff1160; top: 114px; left: 112px; animation: loading-92 1.25s linear infinite }
@-webkit-keyframes loading-9 {
    0%,5% { width: 128px; height: 32px; transform: translateX(-32px) translateY(35px) rotate(0) }

    22% { transform: translateX(0) translateY(0) rotate(0) }

    25% { width: 64px; height: 64px; transform: translateX(0) translateY(-10px) rotate(0) }

    35% { transform: translateX(0) translateY(-90px) rotate(30deg) }

    45% { transform: translateX(0) translateY(-130px) rotate(60deg) }

    50% { transform: translateX(0) translateY(-145px) rotate(75deg) }

    55% { transform: translateX(0) translateY(-150px) rotate(90deg) }

    60% { transform: translateX(0) translateY(-140px) rotate(105deg) }

    65% { transform: translateX(0) translateY(-130px) rotate(120deg) }

    75% { transform: translateX(0) translateY(-90px) rotate(150deg) }

    85% { width: 64px; height: 64px; transform: translateX(0) translateY(0) rotate(180deg) }

    100% { width: 128px; height: 32px; transform: translateX(-32px) translateY(35px) rotate(180deg) }
}
@keyframes loading-9 {
    0%,5% { width: 128px; height: 32px; transform: translateX(-32px) translateY(35px) rotate(0) }

    22% { transform: translateX(0) translateY(0) rotate(0) }

    25% { width: 64px; height: 64px; transform: translateX(0) translateY(-10px) rotate(0) }

    35% { transform: translateX(0) translateY(-90px) rotate(30deg) }

    45% { transform: translateX(0) translateY(-130px) rotate(60deg) }

    50% { transform: translateX(0) translateY(-145px) rotate(75deg) }

    55% { transform: translateX(0) translateY(-150px) rotate(90deg) }

    60% { transform: translateX(0) translateY(-140px) rotate(105deg) }

    65% { transform: translateX(0) translateY(-130px) rotate(120deg) }

    75% { transform: translateX(0) translateY(-90px) rotate(150deg) }

    85% { width: 64px; height: 64px; transform: translateX(0) translateY(0) rotate(180deg) }

    100% { width: 128px; height: 32px; transform: translateX(-32px) translateY(35px) rotate(180deg) }
}
@-webkit-keyframes loading-92 {
    0%,5% { width: 64px; height: 16px; transform: translateX(-16px) translateY(51px) rotate(0) }

    22% { transform: translateX(0) translateY(3px) rotate(0) }

    25% { width: 32px; height: 32px; transform: translateX(0) translateY(-15px) rotate(0) }

    35% { transform: translateX(0) translateY(-135px) rotate(-60deg) }

    45% { transform: translateX(0) translateY(-195px) rotate(-120deg) }

    50% { transform: translateX(0) translateY(-215px) rotate(-150deg) }

    55% { transform: translateX(0) translateY(-225px) rotate(-180deg) }

    60% { transform: translateX(0) translateY(-215px) rotate(-210deg) }

    65% { transform: translateX(0) translateY(-195px) rotate(-240deg) }

    75% { transform: translateX(0) translateY(-135px) rotate(-300deg) }

    85% { width: 32px; height: 32px; transform: translateX(0) translateY(0) rotate(-360deg) }
    100% { width: 64px; height: 16px; transform: translateX(-16px) translateY(51px) rotate(-360deg) }
}
@keyframes loading-92 {
    0%,5% { width: 64px; height: 16px; transform: translateX(-16px) translateY(51px) rotate(0) }

    22% { transform: translateX(0) translateY(3px) rotate(0) }

    25% { width: 32px; height: 32px; transform: translateX(0) translateY(-15px) rotate(0) }

    35% { transform: translateX(0) translateY(-135px) rotate(-60deg) }

    45% { transform: translateX(0) translateY(-195px) rotate(-120deg) }

    50% { transform: translateX(0) translateY(-215px) rotate(-150deg) }

    55% { transform: translateX(0) translateY(-225px) rotate(-180deg) }

    60% { transform: translateX(0) translateY(-215px) rotate(-210deg) }

    65% { transform: translateX(0) translateY(-195px) rotate(-240deg) }

    75% { transform: translateX(0) translateY(-135px) rotate(-300deg) }

    85% { width: 32px; height: 32px; transform: translateX(0) translateY(0) rotate(-360deg) }

    100% { width: 64px; height: 16px; transform: translateX(-16px) translateY(51px) rotate(-360deg) }
}
@-webkit-keyframes loading-93 {
    0%,100% { transform: scale(2.5,1) }

    30%,85% { transform: scale(1.5,1) }

    55% { transform: scale(.8,.8) }
}
@keyframes loading-93 {
    0%,100% { transform: scale(2.5,1) }

    30%,85% { transform: scale(1.5,1) }

    55% { transform: scale(.8,.8) }
}
/*#endregion */
/*#region Preloader 10 */
.loader10 { width: 100px; height: 100px; margin: 50px auto; overflow: hidden; position: relative }
.loader10 span { display: inline-block; position: absolute; animation: loading-10 9s cubic-bezier(.45,.05,.55,.95) infinite }
.loader10 span:nth-child(1) { background: #ff4b7d; animation-name: loading-10 }
.loader10 span:nth-child(2) { background: #3485ef; animation-name: loading-102 }
.loader10 span:nth-child(3) { background: #5fad56; animation-name: loading-103 }
.loader10 span:nth-child(4) { background: #e9573d; animation-name: loading-104 }
@keyframes loading-10 {
    0%,5% { width: 25%; height: 25%; border-radius: 100% 0 0; background: #ff4b7d; bottom: 50%; left: 25% }

    10% { width: 25%; height: 25%; border-radius: 100% 100% 0 0; background: #ff4b7d; bottom: 50%; left: 25% }

    13%,18% { width: 25%; height: 25%; border-radius: 100% 100% 0 0; background: #5fad56; bottom: 50%; left: 12.5% }

    20% { width: 32.5%; height: 32.5%; border-radius: 50%; background: #5fad56; bottom: 50%; left: 6.25% }

    25%,30% { width: 25%; height: 25%; border-radius: 50%; background: #3485ef; bottom: 62.5%; left: 12.5% }

    35% { width: 14%; height: 10%; border-radius: 999px; background: #ff4b7d; left: 0; bottom: 0 }

    40%,60% { height: 100% }

    55% { height: 10% }

    70% { width: 14%; height: 25%; border-radius: 999px; background: #ff4b7d; bottom: 0; left: 0 }

    75%,97% { width: 25%; height: 25%; border-radius: 100%; bottom: 57.5%; left: 17.5% }

    100% { width: 50%; height: 50%; border-radius: 100%; bottom: 25%; left: 25% }
}
@keyframes loading-102 {
    0%,5% { width: 25%; height: 25%; background: #ff4b7d; border-radius: 0 0 0 100%; bottom: 25%; left: 25% }

    10% { width: 25%; height: 25%; background: #ff4b7d; border-radius: 0 0 100% 100%; bottom: 25%; left: 25% }

    13%,18% { width: 25%; height: 25%; background: #5fad56; border-radius: 0 0 100% 100%; bottom: 25%; left: 12.5% }

    20% { width: 32.5%; height: 32.5%; background: #5fad56; border-radius: 50%; bottom: 25%; left: 6.25% }

    25% { width: 25%; height: 25%; background: #3485ef; border-radius: 50%; bottom: 12.5%; left: 12.5% }

    30% { left: 12.5%; bottom: 12.5%; border-radius: 50%; height: 25%; width: 25%; background: #3485EF }

    35% { left: 28%; bottom: 0; border-radius: 999px; height: 10%; width: 14%; background: #3485EF }

    40%,60% { height: 10% }

    45%,65% { height: 100% }

    75% { left: 28%; bottom: 0; border-radius: 999px; height: 25%; width: 14%; background: #3485EF }

    80% { left: 17.5%; bottom: 17.5%; border-radius: 100%; height: 25%; width: 25% }

    97% { left: 17.5%; bottom: 17.5%; border-radius: 100%; height: 25%; width: 25%; box-shadow: none }

    100% { box-shadow: -3px -3px 5px -5px #3485EF; border-radius: 100%; left: 25%; bottom: -50%; height: 50%; width: 50% }
}
@keyframes loading-103 {
    0%,5% { left: 50%; bottom: 50%; border-radius: 0 100% 0 0; height: 25%; width: 25%; background: #FF4B7D }

    10% { left: 50%; bottom: 50%; border-radius: 100% 100% 0 0; height: 25%; width: 25%; background: #FF4B7D }

    13%,18% { left: 62.5%; bottom: 50%; border-radius: 100% 100% 0 0; height: 25%; width: 25%; background: #5FAD56 }

    20% { left: 66.25%; bottom: 50%; border-radius: 50%; height: 32.5%; width: 32.5%; background: #5FAD56 }

    25%,30% { left: 62.5%; bottom: 62.5%; border-radius: 50%; height: 25%; width: 25%; background: #3485EF }

    35% { left: 56%; bottom: 0; border-radius: 999px; height: 10%; width: 14%; background: #5FAD56 }

    45%,65% { height: 10% }

    50%,70% { height: 100% }

    80% { left: 56%; bottom: 0; border-radius: 999px; height: 25%; width: 14%; background: #5FAD56 }

    85% { left: 57.5%; bottom: 57.5%; border-radius: 100%; height: 25%; width: 25% }

    97% { left: 57.5%; bottom: 57.5%; border-radius: 100%; height: 25%; width: 25%; box-shadow: none }

    100% { box-shadow: -3px -3px 5px -5px #5FAD56; border-radius: 100%; left: 100%; bottom: 25%; height: 50%; width: 50% }
}
@keyframes loading-104 {
    0%,5% { left: 50%; bottom: 25%; border-radius: 0 0 100%; height: 25%; width: 25%; background: #FF4B7D }

    10% { left: 50%; bottom: 25%; border-radius: 0 0 100% 100%; height: 25%; width: 25%; background: #FF4B7D }

    13%,18% { left: 62.5%; bottom: 25%; border-radius: 0 0 100% 100%; height: 25%; width: 25%; background: #5FAD56 }

    20% { left: 66.25%; bottom: 25%; border-radius: 50%; height: 32.5%; width: 32.5%; background: #5FAD56 }

    25%,30% { left: 62.5%; bottom: 12.5%; border-radius: 50%; height: 25%; width: 25%; background: #3485EF }

    35% { left: 84%; bottom: 0; border-radius: 999px; height: 10%; width: 14%; background: #e9573d }

    50%,70% { height: 10% }

    55%,75% { height: 100% }

    85% { left: 84%; bottom: 0; border-radius: 999px; height: 25%; width: 14%; background: #E9573D }

    90% { left: 57.5%; bottom: 17.5%; border-radius: 100%; height: 25%; width: 25% }

    97% { left: 57.5%; bottom: 17.5%; border-radius: 100%; height: 25%; width: 25%; box-shadow: none }

    100% { box-shadow: -3px -3px 5px -5px #e9573d; border-radius: 100%; left: 100%; bottom: -50%; height: 50%; width: 50% }
}
/*#endregion */
/*#region Preloader 11 */
.loader11 { width: 100px; height: 70px; margin: 50px auto; position: relative }
.loader11 span { display: block; width: 5px; height: 10px; background: #e43632; position: absolute; bottom: 0; animation: loading-11 2.25s infinite ease-in-out }
.loader11 span:nth-child(2) { left: 11px; animation-delay: .2s }
.loader11 span:nth-child(3) { left: 22px; animation-delay: .4s }
.loader11 span:nth-child(4) { left: 33px; animation-delay: .6s }
.loader11 span:nth-child(5) { left: 44px; animation-delay: .8s }
.loader11 span:nth-child(6) { left: 55px; animation-delay: 1s }
.loader11 span:nth-child(7) { left: 66px; animation-delay: 1.2s }
.loader11 span:nth-child(8) { left: 77px; animation-delay: 1.4s }
.loader11 span:nth-child(9) { left: 88px; animation-delay: 1.6s }
@-webkit-keyframes loading-11 {
    0% { height: 10px; transform: translateY(0); background: #ff4d80 }

    25% { height: 60px; transform: translateY(15px); background: #3423a6 }

    50% { height: 10px; transform: translateY(-10px); background: #e29013 }

    100% { height: 10px; transform: translateY(0); background: #e50926 }
}
@keyframes loading-11 {
    0% { height: 10px; transform: translateY(0); background: #ff4d80 }

    25% { height: 60px; transform: translateY(15px); background: #3423a6 }

    50% { height: 10px; transform: translateY(-10px); background: #e29013 }

    100% { height: 10px; transform: translateY(0); background: #e50926 }
}
/*#endregion */
/*#region Preloader 12 */
.loader12 { width: 100px; height: 100px; margin: 60px auto; position: relative; -webkit-transform: rotate(45deg); transform: rotate(45deg) }

.loader12 .loader-inner-1 { width: 33.333%; height: 33.333%; position: absolute }

.loader12 .loader-inner-2 { position: absolute; width: 16.6665%; height: 16.6665% }

.loader12 .box-1 { top: 0; left: 50%; margin-left: -16.6665%; -webkit-animation: loading-12 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-12 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-2 { top: 0; left: 0; -webkit-animation: loading-126 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-126 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-3 { top: 50%; right: 0; margin-top: -16.6665%; -webkit-animation: loading-122 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-122 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-4 { top: 0; right: 0; -webkit-animation: loading-125 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-125 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-5 { top: 50%; left: 0; margin-top: -16.6665%; -webkit-animation: loading-124 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-124 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-6 { bottom: 0; right: 0; -webkit-animation: loading-127 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-127 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-7 { bottom: 0; left: 50%; margin-left: -16.6665%; -webkit-animation: loading-123 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-123 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-8 { bottom: 0; left: 0; -webkit-animation: loading-128 2s cubic-bezier(.585,-.225,.43,1.31) infinite; animation: loading-128 2s cubic-bezier(.585,-.225,.43,1.31) infinite }

.loader12 .box-red { background: #f52220 }

.loader12 .box-blue { background: #02c1c1 }

.loader12 .box-green { background: #009a3c }

.loader12 .box-peach { background: #db5b53 }

.loader12 .box-pink { background: #e40066 }

.loader12 .box-yellow { background: #f59c00 }

.loader12 .box-purple { background: #5c0475 }

@-webkit-keyframes loading-12 {
    0%,100% { top: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { top: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-12 {
    0%,100% { top: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { top: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-122 {
    0%,100% { right: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { right: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-122 {
    0%,100% { right: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { right: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-123 {
    0%,100% { bottom: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { bottom: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-123 {
    0%,100% { bottom: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { bottom: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-124 {
    0%,100% { left: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { left: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-124 {
    0%,100% { left: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(100px); transform: translateZ(100px) }

    50% { left: 66.666%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-125 {
    0%,100% { top: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { top: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-125 {
    0%,100% { top: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { top: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-126 {
    0%,100% { left: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { left: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-126 {
    0%,100% { left: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { left: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-127 {
    0%,100% { right: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { right: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-127 {
    0%,100% { right: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { right: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@-webkit-keyframes loading-128 {
    0%,100% { bottom: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { bottom: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}

@keyframes loading-128 {
    0%,100% { bottom: 0; -webkit-transform: translateZ(0); transform: translateZ(0) }

    25%,75% { -webkit-transform: translateZ(300px); transform: translateZ(300px) }

    50% { bottom: 83.3335%; -webkit-transform: translateZ(0); transform: translateZ(0) }
}
/*#endregion */
/*#region Preloader 13 */
.loader13 { width: 20px; height: 20px; margin: 100px auto; transform-origin: center; animation: loading-13 1s ease-in-out infinite }
.loader13 span, .loader13 span:after, .loader13 span:before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 50%; position: absolute }
.loader13 span:before { transform: translate(0,-20px) scale(.75) }
.loader13 span:after { transform: translate(0,-35px) scale(.5) }
.loader13 span:nth-child(1) { transform: translate(0,50px) }
.loader13 span:nth-child(1), .loader13 span:nth-child(1):after, .loader13 span:nth-child(1):before { background: #dc005a }
.loader13 span:nth-child(2), .loader13 span:nth-child(2):after, .loader13 span:nth-child(2):before { background: #7a4b94 }
.loader13 span:nth-child(2) { transform: rotate(90deg) translate(0,50px) }
.loader13 span:nth-child(3), .loader13 span:nth-child(3):after, .loader13 span:nth-child(3):before { background: #26a4d9 }
.loader13 span:nth-child(3) { transform: rotate(180deg) translate(0,50px) }
.loader13 span:nth-child(4), .loader13 span:nth-child(4):after, .loader13 span:nth-child(4):before { background: #8ca865 }
.loader13 span:nth-child(4) { transform: rotate(270deg) translate(0,50px) }
@-webkit-keyframes loading-13 {
    100%,80% { transform: rotate(360deg) }
}
@keyframes loading-13 {
    100%,80% { transform: rotate(360deg) }
}
/*#endregion */
/*#region Preloader 14 */
.loader14 { width: 90px; height: 90px; margin: 40px auto }
.loader14 .loader-inner { width: 60px; height: 60px; position: relative; margin: 0 auto }
.loader14 .loader-inner div { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #00bee0; position: absolute; top: 10px; left: 10px; transform-origin: 20px 20px; -webkit-animation: loading-14 2s infinite cubic-bezier(.5,0,.5,1); animation: loading-14 2s infinite cubic-bezier(.5,0,.5,1) }
.loader14 .loader-inner .box-2 { top: 10px; left: auto; right: 10px; transform-origin: -4px 20px; -webkit-animation: loading-142 2s infinite cubic-bezier(.5,0,.5,1); animation: loading-142 2s infinite cubic-bezier(.5,0,.5,1) }
.loader14 .loader-inner .box-3 { top: auto; left: auto; right: 10px; bottom: 10px; transform-origin: -4px -4px; -webkit-animation: loading-143 2s infinite cubic-bezier(.5,0,.5,1); animation: loading-143 2s infinite cubic-bezier(.5,0,.5,1) }
.loader14 .loader-inner .box-4 { top: auto; bottom: 10px; transform-origin: 20px -4px; -webkit-animation: loading-144 2s infinite cubic-bezier(.5,0,.5,1); animation: loading-144 2s infinite cubic-bezier(.5,0,.5,1) }
.loader14 .text { display: block; font-size: 12px; color: #00bee0; text-align: center }
@-webkit-keyframes loading-14 {
    0% { transform: rotate(90deg) }

    50% { transform: rotate(180deg) }

    75% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}
@keyframes loading-14 {
    0% { transform: rotate(90deg) }

    50% { transform: rotate(180deg) }

    75% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}
@-webkit-keyframes loading-142 {
    0%,25% { transform: rotate(90deg) }

    25% { transform: rotate(180deg) }

    75% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}
@keyframes loading-142 {
    0%,25% { transform: rotate(90deg) }

    25% { transform: rotate(180deg) }

    75% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}
@-webkit-keyframes loading-143 {
    0%,25% { transform: rotate(90deg) }

    50% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}
@keyframes loading-143 {
    0%,25% { transform: rotate(90deg) }

    50% { transform: rotate(270deg) }

    100% { transform: rotate(360deg) }
}
@-webkit-keyframes loading-144 {
    0%,25% { transform: rotate(90deg) }

    50% { transform: rotate(180deg) }

    100%,75% { transform: rotate(360deg) }
}
@keyframes loading-144 {
    0%,25% { transform: rotate(90deg) }

    50% { transform: rotate(180deg) }

    100%,75% { transform: rotate(360deg) }
}
/*#endregion */
/*#region Preloader 15 */
.loader15 { text-align: center; margin: 40px 0 }
.loader15 span { width: 20px; height: 20px; border-radius: 50%; background: #f7bd3a; display: inline-block }
.loader15 span:first-child { animation: loading-152 .5s linear infinite; opacity: 0; transform: translate(-20px) }
.loader15 span:nth-child(2), .loader15 span:nth-child(3) { animation: loading-153 .5s linear infinite }
.loader15 span:last-child { animation: loading-15 .5s linear infinite }
@-webkit-keyframes loading-15 {
    100% { transform: translate(40px); opacity: 0 }
}
@keyframes loading-15 {
    100% { transform: translate(40px); opacity: 0 }
}
@-webkit-keyframes loading-152 {
    100% { transform: translate(20px); opacity: 1 }
}
@keyframes loading-152 {
    100% { transform: translate(20px); opacity: 1 }
}
@-webkit-keyframes loading-153 {
    100% { transform: translate(20px) }
}
@keyframes loading-153 {
    100% { transform: translate(20px) }
}
/*#endregion */
/*#region Preloader 16 */
.loader16 { width: 50px; height: 50px; margin: 30px auto 40px; position: relative }
.loader16:after, .loader16:before { content: ""; width: 50px; position: absolute; left: 0 }
.loader16:before { height: 5px; border-radius: 50%; background: #000; opacity: .1; top: 59px; animation: shadow .5s linear infinite }
.loader16:after { height: 50px; border-radius: 3px; background: #008bba; top: 0; animation: loading .5s linear infinite }
@-webkit-keyframes loading {
    17% { border-bottom-right-radius: 3px }
    25% { transform: translateY(9px) rotate(22.5deg) }
    50% { transform: translateY(18px) scale(1,.9) rotate(45deg); border-bottom-right-radius: 40px }
    75% { transform: translateY(9px) rotate(67.5deg) }
    100% { transform: translateY(0) rotate(90deg) }
}
@keyframes loading {
    17% { border-bottom-right-radius: 3px }
    25% { transform: translateY(9px) rotate(22.5deg) }
    50% { transform: translateY(18px) scale(1,.9) rotate(45deg); border-bottom-right-radius: 40px }
    75% { transform: translateY(9px) rotate(67.5deg) }
    100% { transform: translateY(0) rotate(90deg) }
}
@-webkit-keyframes shadow {
    0%,100% { transform: scale(1,1) }
    50% { transform: scale(1.2,1) }
}
@keyframes shadow {
    0%,100% { transform: scale(1,1) }
    50% { transform: scale(1.2,1) }
}
/*#endregion */
/*#region Preloader 17 */
.loader17 { position: relative; width: 65px; border: 1px solid transparent; margin: 40px auto }
.loader17 span { position: absolute; bottom: 0; display: block; width: 9px; height: 5px; border-radius: 5px; background: rgba(0,0,0,.1); -webkit-animation: preloader 2s infinite ease-in-out; animation: preloader 2s infinite ease-in-out }
.loader17 span:nth-child(2) { left: 11px; -webkit-animation-delay: .2s; animation-delay: .2s }
.loader17 span:nth-child(3) { left: 22px; -webkit-animation-delay: .4s; animation-delay: .4s }
.loader17 span:nth-child(4) { left: 33px; -webkit-animation-delay: .6s; animation-delay: .6s }
.loader17 span:nth-child(5) { left: 44px; -webkit-animation-delay: .8s; animation-delay: .8s }
.loader17 span:nth-child(6) { left: 55px; -webkit-animation-delay: 1s; animation-delay: 1s }
@-webkit-keyframes preloader {
    0%,100%,50% { height: 5px; -webkit-transform: translateY(0); transform: translateY(0); background: rgba(0,0,0,.1) }
    25% { height: 30px; -webkit-transform: translateY(15px); transform: translateY(15px); background: #f8990c }
}
@keyframes preloader {
    0%,100%,50% { height: 5px; -webkit-transform: translateY(0); transform: translateY(0); background: rgba(0,0,0,.1) }
    25% { height: 30px; -webkit-transform: translateY(15px); transform: translateY(15px); background: #f8990c }
}
/*#endregion */
/*#region Preloader 18 */
.loader18 { font-size: 90px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius: 50%; margin: 72px auto; position: relative; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load18 1.7s infinite ease; animation: load18 1.7s infinite ease }
@-webkit-keyframes load18 {
    0% { -webkit-transform: rotate(0); transform: rotate(0); box-shadow: 0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff }
    5%,95% { box-shadow: 0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff }
    10%,59% { box-shadow: 0 -.83em 0 -.4em #fff,-.087em -.825em 0 -.42em #fff,-.173em -.812em 0 -.44em #fff,-.256em -.789em 0 -.46em #fff,-.297em -.775em 0 -.477em #fff }
    20% { box-shadow: 0 -.83em 0 -.4em #fff,-.338em -.758em 0 -.42em #fff,-.555em -.617em 0 -.44em #fff,-.671em -.488em 0 -.46em #fff,-.749em -.34em 0 -.477em #fff }
    38% { box-shadow: 0 -.83em 0 -.4em #fff,-.377em -.74em 0 -.42em #fff,-.645em -.522em 0 -.44em #fff,-.775em -.297em 0 -.46em #fff,-.82em -.09em 0 -.477em #fff }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff }
}
@keyframes load18 {
    0% { -webkit-transform: rotate(0); transform: rotate(0); box-shadow: 0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff }
    5%,95% { box-shadow: 0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff }
    10%,59% { box-shadow: 0 -.83em 0 -.4em #fff,-.087em -.825em 0 -.42em #fff,-.173em -.812em 0 -.44em #fff,-.256em -.789em 0 -.46em #fff,-.297em -.775em 0 -.477em #fff }
    20% { box-shadow: 0 -.83em 0 -.4em #fff,-.338em -.758em 0 -.42em #fff,-.555em -.617em 0 -.44em #fff,-.671em -.488em 0 -.46em #fff,-.749em -.34em 0 -.477em #fff }
    38% { box-shadow: 0 -.83em 0 -.4em #fff,-.377em -.74em 0 -.42em #fff,-.645em -.522em 0 -.44em #fff,-.775em -.297em 0 -.46em #fff,-.82em -.09em 0 -.477em #fff }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 -.83em 0 -.4em #fff,0 -.83em 0 -.42em #fff,0 -.83em 0 -.44em #fff,0 -.83em 0 -.46em #fff,0 -.83em 0 -.477em #fff }
}
/*#endregion */
/*#region Preloader 19 */
.loader19 { width: 160px; height: 160px; margin: 20px auto; position: relative }
.loader19 .loader-inner { position: absolute; top: 50%; left: 50% }
.loader19 .box-2 { left: 2px; top: 2px; -webkit-animation-name: loading-19; animation-name: loading-19 }
.loader19 .box-1 { width: 74px; height: 74px; border-radius: 4px; -webkit-animation-name: loading-192; animation-name: loading-192; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: steps(4); animation-timing-function: steps(4) }
.loader19 .box-2 { -webkit-animation-duration: .5s; animation-duration: .5s }
.box-1 { position: absolute; color: #006aa4; border: 2px solid; -webkit-transform: translate(-50%,-50%) rotate(-45deg); transform: translate(-50%,-50%) rotate(-45deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }
.box-2, .loader19 .box-1:after, .loader19 .box-1:before { position: absolute; width: 32px; height: 32px; border-radius: 4px; background: #e3b23c }
.loader19 .box-1:after, .loader19 .box-1:before { bottom: 2px; content: "" }
.loader19 .box-1:before { left: 2px }
.loader19 .box-1:after { right: 2px }
.box-2 { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }
@-webkit-keyframes loading-19 {
    33% { left: 2px }
    100%,67% { left: 36px }
}
@keyframes loading-19 {
    33% { left: 2px }
    100%,67% { left: 36px }
}
@-webkit-keyframes loading-192 {
    to { -webkit-transform: translate(-50%,-50%) rotate(-405deg); transform: translate(-50%,-50%) rotate(-405deg) }
}
@keyframes loading-192 {
    to { -webkit-transform: translate(-50%,-50%) rotate(-405deg); transform: translate(-50%,-50%) rotate(-405deg) }
}
/*#endregion */
/*#region Preloader 20 */
.loader20, .loader20:after, .loader20:before { border-radius: 50% }
.loader20:after, .loader20:before { position: absolute; content: '' }
.loader20:before { width: 5.2em; height: 10.2em; background: #1abc9c; border-radius: 10.2em 0 0 10.2em; top: -.1em; left: -.1em; -webkit-transform-origin: 5.2em 5.1em; transform-origin: 5.2em 5.1em; -webkit-animation: load20 2s infinite ease 1.5s; animation: load20 2s infinite ease 1.5s }
.loader20 { font-size: 11px; text-indent: -99999em; margin: 55px auto; position: relative; width: 10em; height: 10em; box-shadow: inset 0 0 0 1em #fff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0) }
.loader20:after { width: 5.2em; height: 10.2em; background: #1abc9c; border-radius: 0 10.2em 10.2em 0; top: -.1em; left: 5.1em; -webkit-transform-origin: 0 5.1em; transform-origin: 0 5.1em; -webkit-animation: load20 2s infinite ease; animation: load20 2s infinite ease }
@-webkit-keyframes load20 {
    0% { -webkit-transform: rotate(0); transform: rotate(0) }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes load20 {
    0% { -webkit-transform: rotate(0); transform: rotate(0) }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
/*#endregion */