#header {
     line-height: 80px;
     width: 100%;
     background: #3498db;
     top: 0;
     margin-bottom: 50px;
     color: white;
     text-align: center;
}
 .col {
     display: block;
     float: left;
     margin: 1% 0 1% 1.6%;
}
 .col:first-of-type {
     margin-left: 0;
}
 .col.four {
     width: 23%;
     margin: 0 1%;
     text-align: center;
     font-size: 20px;
}
 .col.four.big div {
     color: #3498db;
}
 .col:first-of-type {
     margin-left: 0;
}
 .row {
     padding: 50px 0;
     *zoom: 1;
}
 .row:nth-child(2n+2) {
     border-top: 1px solid #DDD;
     box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
     background: #f3f3f3;
}
 .row:before, .row:after {
     content: " ";
     display: table;
}
 .row:after {
     clear: both;
}
/* ALL LOADERS */
 .loader {
     width: 300px;
     height: 300px;
     border-radius: 100%;
     position: relative;
     margin: 0 auto;
     color: #3498db;
}
/* LOADER 1 */
 #loader-1:before, #loader-1:after {
     content: "";
     position: absolute;
     top: -10px;
     left: -10px;
     width: 100%;
     height: 100%;
     border-radius: 100%;
     border: 10px solid transparent;
     border-top-color: white;
}
 #loader-1:before {
     z-index: 100;
     -webkit-animation: spin 1s infinite;
     animation: spin 1s infinite;
}
 #loader-1:after {
     border: 10px solid white;
}
 @-webkit-keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
/* LOADER 2 */
 #loader-2 span {
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 100%;
     background-color: #3498db;
     margin: 35px 5px;
}
 #loader-2 span:nth-child(1) {
     -webkit-animation: bounce 1s ease-in-out infinite;
     animation: bounce 1s ease-in-out infinite;
}
 #loader-2 span:nth-child(2) {
     -webkit-animation: bounce 1s ease-in-out 0.33s infinite;
     animation: bounce 1s ease-in-out 0.33s infinite;
}
 #loader-2 span:nth-child(3) {
     -webkit-animation: bounce 1s ease-in-out 0.66s infinite;
     animation: bounce 1s ease-in-out 0.66s infinite;
}
 @-webkit-keyframes bounce {
     0%, 75%, 100% {
         transform: translateY(0);
    }
     25% {
         transform: translateY(-20px);
    }
}
 @keyframes bounce {
     0%, 75%, 100% {
         transform: translateY(0);
    }
     25% {
         transform: translateY(-20px);
    }
}
/* LOADER 3 */
 #loader-3:before, #loader-3:after {
     content: "";
     width: 20px;
     height: 20px;
     position: absolute;
     top: 0;
     left: calc(50% - 10px);
     background-color: #3498db;
     -webkit-animation: squaremove 1s ease-in-out infinite;
     animation: squaremove 1s ease-in-out infinite;
}
 #loader-3:after {
     bottom: 0;
     -webkit-animation-delay: 0.5s;
     animation-delay: 0.5s;
}
 @-webkit-keyframes squaremove {
     0%, 100% {
         transform: translate(0, 0) rotate(0);
    }
     25% {
         transform: translate(40px, 40px) rotate(45deg);
    }
     50% {
         transform: translate(0px, 80px) rotate(0deg);
    }
     75% {
         transform: translate(-40px, 40px) rotate(45deg);
    }
}
 @keyframes squaremove {
     0%, 100% {
         transform: translate(0, 0) rotate(0);
    }
     25% {
         transform: translate(40px, 40px) rotate(45deg);
    }
     50% {
         transform: translate(0px, 80px) rotate(0deg);
    }
     75% {
         transform: translate(-40px, 40px) rotate(45deg);
    }
}
/* LOADER 4 */
 #loader-4 span {
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 100%;
     background-color: #3498db;
     margin: 35px 5px;
     opacity: 0;
}
 #loader-4 span:nth-child(1) {
     -webkit-animation: opacitychange 1s ease-in-out infinite;
     animation: opacitychange 1s ease-in-out infinite;
}
 #loader-4 span:nth-child(2) {
     -webkit-animation: opacitychange 1s ease-in-out 0.33s infinite;
     animation: opacitychange 1s ease-in-out 0.33s infinite;
}
 #loader-4 span:nth-child(3) {
     -webkit-animation: opacitychange 1s ease-in-out 0.66s infinite;
     animation: opacitychange 1s ease-in-out 0.66s infinite;
}
 @-webkit-keyframes opacitychange {
     0%, 100% {
         opacity: 0;
    }
     60% {
         opacity: 1;
    }
}
 @keyframes opacitychange {
     0%, 100% {
         opacity: 0;
    }
     60% {
         opacity: 1;
    }
}
/* LOADER 5 */
 #loader-5 span {
     display: block;
     position: absolute;
     left: calc(50% - 20px);
     top: calc(50% - 20px);
     width: 20px;
     height: 20px;
     background-color: #3498db;
}
 #loader-5 span:nth-child(2) {
     -webkit-animation: moveanimation1 1s ease-in-out infinite;
     animation: moveanimation1 1s ease-in-out infinite;
}
 #loader-5 span:nth-child(3) {
     -webkit-animation: moveanimation2 1s ease-in-out infinite;
     animation: moveanimation2 1s ease-in-out infinite;
}
 #loader-5 span:nth-child(4) {
     -webkit-animation: moveanimation3 1s ease-in-out infinite;
     animation: moveanimation3 1s ease-in-out infinite;
}
 @-webkit-keyframes moveanimation1 {
     0%, 100% {
         transform: translateX(0px);
    }
     75% {
         transform: translateX(30px);
    }
}
 @keyframes moveanimation1 {
     0%, 100% {
         transform: translateX(0px);
    }
     75% {
         transform: translateX(30px);
    }
}
 @-webkit-keyframes moveanimation2 {
     0%, 100% {
         transform: translateY(0px);
    }
     75% {
         transform: translateY(30px);
    }
}
 @keyframes moveanimation2 {
     0%, 100% {
         transform: translateY(0px);
    }
     75% {
         transform: translateY(30px);
    }
}
 @-webkit-keyframes moveanimation3 {
     0%, 100% {
         transform: translate(0px, 0px);
    }
     75% {
         transform: translate(30px, 30px);
    }
}
 @keyframes moveanimation3 {
     0%, 100% {
         transform: translate(0px, 0px);
    }
     75% {
         transform: translate(30px, 30px);
    }
}
/* LOADER 6 */
 #loader-6 {
     top: 40px;
     left: -2.5px;
}
 #loader-6 span {
     display: inline-block;
     width: 5px;
     height: 20px;
     background-color: #3498db;
}
 #loader-6 span:nth-child(1) {
     -webkit-animation: grow 1s ease-in-out infinite;
     animation: grow 1s ease-in-out infinite;
}
 #loader-6 span:nth-child(2) {
     -webkit-animation: grow 1s ease-in-out 0.15s infinite;
     animation: grow 1s ease-in-out 0.15s infinite;
}
 #loader-6 span:nth-child(3) {
     -webkit-animation: grow 1s ease-in-out 0.3s infinite;
     animation: grow 1s ease-in-out 0.3s infinite;
}
 #loader-6 span:nth-child(4) {
     -webkit-animation: grow 1s ease-in-out 0.45s infinite;
     animation: grow 1s ease-in-out 0.45s infinite;
}
 @-webkit-keyframes grow {
     0%, 100% {
         transform: scaleY(1);
    }
     50% {
         transform: scaleY(1.8);
    }
}
 @keyframes grow {
     0%, 100% {
         transform: scaleY(1);
    }
     50% {
         transform: scaleY(1.8);
    }
}
/* LOADER 7 */
 #loader-7 {
     perspective: 120px;
}
 #loader-7:before {
     content: "";
     position: absolute;
     left: 25px;
     top: 25px;
     width: 50px;
     height: 50px;
     background-color: #3498db;
     -webkit-animation: flip 1s infinite;
     animation: flip 1s infinite;
}
 @-webkit-keyframes flip {
     0% {
         transform: rotate(0);
    }
     50% {
         transform: rotateY(180deg);
    }
     100% {
         transform: rotateY(180deg) rotateX(180deg);
    }
}
 @keyframes flip {
     0% {
         transform: rotate(0);
    }
     50% {
         transform: rotateY(180deg);
    }
     100% {
         transform: rotateY(180deg) rotateX(180deg);
    }
}
/* LOADER 8 */
 #loader-8:before {
     content: "";
     position: absolute;
     width: 10px;
     height: 10px;
     top: calc(50% - 10px);
     left: 0px;
     background-color: #3498db;
     -webkit-animation: rotatemove 1s infinite;
     animation: rotatemove 1s infinite;
}
 @-webkit-keyframes rotatemove {
     0% {
         transform: scale(1) translateX(0px);
    }
     100% {
         transform: scale(2) translateX(45px);
    }
}
 @keyframes rotatemove {
     0% {
         transform: scale(1) translateX(0px);
    }
     100% {
         transform: scale(2) translateX(45px);
    }
}
/*==================== ====================== SECOND LOADER LIBRARY ====================== ====================*/
 .ouro {
     position: relative;
     display: inline-block;
     height: 46px;
     width: 46px;
     margin: 1em;
     border-radius: 50%;
     background: none repeat scroll 0 0 white;
     overflow: hidden;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 0 25px rgba(0, 0, 255, 0.075);
}
 .ouro:after {
     content: "";
     position: absolute;
     top: 9px;
     left: 9px;
     display: block;
     height: 28px;
     width: 28px;
     background: none repeat scroll 0 0 white;
     border-radius: 50%;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 .ouro > span {
     position: absolute;
     height: 100%;
     width: 50%;
     overflow: hidden;
}
 .left {
     left: 0;
}
 .right {
     left: 50%;
}
 .anim {
     position: absolute;
     left: 100%;
     top: 0;
     height: 100%;
     width: 100%;
     border-radius: 999px;
     background: none repeat scroll 0 0 #3498db;
     opacity: 0.8;
     -webkit-animation: ui-spinner-rotate-left 3s infinite;
     animation: ui-spinner-rotate-left 3s infinite;
     transform-origin: 0 50% 0;
}
 .left .anim {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
}
 .right .anim {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     left: -100%;
     transform-origin: 100% 50% 0;
}
/* v2 */
 .ouro2 .anim {
     -webkit-animation-delay: 0;
     animation-delay: 0;
}
 .ouro2 .right .anim {
     -webkit-animation-delay: 1.5s;
     animation-delay: 1.5s;
}
/* v3 */
 .ouro3 .anim {
     -webkit-animation-delay: 0s;
     animation-delay: 0s;
     -webkit-animation-duration: 3s;
     animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
}
 .ouro3 .right .anim {
     -webkit-animation-name: ui-spinner-rotate-right;
     animation-name: ui-spinner-rotate-right;
     -webkit-animation-delay: 0;
     animation-delay: 0;
     -webkit-animation-delay: 1.5s;
     animation-delay: 1.5s;
}
/* round variation */
 .round .ouro:after {
     display: none;
}
/* double variation */
 .double .ouro:after {
     height: 13px;
     width: 13px;
     left: 7px;
     top: 7px;
     border: 10px solid #ddd;
     background: transparent;
     box-shadow: none;
}
 @-webkit-keyframes ui-spinner-rotate-right {
     0% {
         transform: rotate(0deg);
    }
     25% {
         transform: rotate(180deg);
    }
     50% {
         transform: rotate(180deg);
    }
     75% {
         transform: rotate(360deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes ui-spinner-rotate-right {
     0% {
         transform: rotate(0deg);
    }
     25% {
         transform: rotate(180deg);
    }
     50% {
         transform: rotate(180deg);
    }
     75% {
         transform: rotate(360deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes ui-spinner-rotate-left {
     0% {
         transform: rotate(0deg);
    }
     25% {
         transform: rotate(0deg);
    }
     50% {
         transform: rotate(-180deg);
    }
     75% {
         transform: rotate(-180deg);
    }
     100% {
         transform: rotate(-360deg);
    }
}
 @keyframes ui-spinner-rotate-left {
     0% {
         transform: rotate(0deg);
    }
     25% {
         transform: rotate(0deg);
    }
     50% {
         transform: rotate(-180deg);
    }
     75% {
         transform: rotate(-180deg);
    }
     100% {
         transform: rotate(-360deg);
    }
}
/*==================== ====================== THIRD LOADER LIBRARY ====================== ====================*/
/* Timer*/
 .timer {
     width: 24px;
     height: 24px;
     background-color: transparent;
     box-shadow: inset 0px 0px 0px 2px #3498db;
     border-radius: 50%;
     position: relative;
     margin: 38px auto;
    /* Not necessary- its only for layouting*/
}
 .timer:after, .timer:before {
     position: absolute;
     content: "";
     background-color: #3498db;
}
 .timer:after {
     width: 10px;
     height: 2px;
     top: 11px;
     left: 11px;
     transform-origin: 1px 1px;
     -webkit-animation: minhand 2s linear infinite;
     animation: minhand 2s linear infinite;
}
 .timer:before {
     width: 8px;
     height: 2px;
     top: 11px;
     left: 11px;
     transform-origin: 1px 1px;
     -webkit-animation: hrhand 8s linear infinite;
     animation: hrhand 8s linear infinite;
}
 @-webkit-keyframes minhand {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes minhand {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes hrhand {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes hrhand {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
/*Typing Loader*/
 .typing_loader {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     -webkit-animation: typing 1s linear infinite alternate;
     animation: typing 1s linear infinite alternate;
     margin: 46px auto;
    /* Not necessary- its only for layouting*/
     position: relative;
     left: -12px;
}
 @-webkit-keyframes typing {
     0% {
         background-color: white;
         box-shadow: 12px 0px 0px 0px 1/opacity(0.2), 24px 0px 0px 0px 1/opacity(0.2);
    }
     25% {
         background-color: rgba(255, 255, 255, 0.4);
         box-shadow: 12px 0px 0px 0px 1/opacity(0.2), 24px 0px 0px 0px 1/opacity(0.2);
    }
     75% {
         background-color: rgba(255, 255, 255, 0.4);
         box-shadow: 12px 0px 0px 0px 1/opacity(0.2), 24px 0px 0px 0px #3498db;
    }
}
 @keyframes typing {
     0% {
         background-color: white;
         box-shadow: 12px 0px 0px 0px 1/opacity(0.2), 24px 0px 0px 0px 1/opacity(0.2);
    }
     25% {
         background-color: rgba(255, 255, 255, 0.4);
         box-shadow: 12px 0px 0px 0px 1/opacity(0.2), 24px 0px 0px 0px 1/opacity(0.2);
    }
     75% {
         background-color: rgba(255, 255, 255, 0.4);
         box-shadow: 12px 0px 0px 0px 1/opacity(0.2), 24px 0px 0px 0px #3498db;
    }
}
/*Location indicator */
 .location_indicator {
     margin: 30px auto;
     position: relative;
     left: -9px;
}
 .location_indicator:before, .location_indicator:after {
     position: absolute;
     content: "";
}
 .location_indicator:before {
     width: 20px;
     height: 20px;
     border-radius: 100% 100% 100% 0;
     box-shadow: 0px 0px 0px 2px #3498db;
     -webkit-animation: mapping 1s linear infinite;
     animation: mapping 1s linear infinite;
     transform: rotate(-46deg);
}
 .location_indicator:after {
     width: 30px;
     height: 10px;
     border-radius: 100%;
     left: 44px;
     background-color: 1/opacity(0.2);
     top: 24px;
     z-index: -1;
}
 @-webkit-keyframes mapping {
     0% {
         top: 0;
    }
     50% {
         top: -5px;
    }
     100% {
         top: 0;
    }
}
 @keyframes mapping {
     0% {
         top: 0;
    }
     50% {
         top: -5px;
    }
     100% {
         top: 0;
    }
}
/* go in*/
 .dashboard {
     width: 32px;
     height: 32px;
     margin: 30px auto;
     border: 2px solid #3498db;
     border-radius: 100%;
     position: relative;
     overflow: hidden;
     z-index: 1;
}
 .dashboard:after, .dashboard:before {
     position: absolute;
     content: "";
}
 .dashboard:after {
     width: 14px;
     height: 2px;
     top: 20px;
     transform-origin: 1px 1px;
     background-color: #3498db;
     -webkit-animation: dashboard_hand 2s linear infinite alternate;
     animation: dashboard_hand 2s linear infinite alternate;
}
 .dashboard:before {
     width: 50px;
     height: 30px;
     background-color: #3498db;
     top: 20px;
     left: -2px;
}
 @-webkit-keyframes dashboard_hand {
     0% {
         transform: rotate(-160deg);
    }
     100% {
         transform: rotate(-20deg);
    }
}
 @keyframes dashboard_hand {
     0% {
         transform: rotate(-160deg);
    }
     100% {
         transform: rotate(-20deg);
    }
}
/*Battery*/
 .battery {
     width: 28px;
     height: 14px;
     border: 1px #3498db solid;
     border-radius: 2px;
     position: relative;
     -webkit-animation: charge 5s linear infinite;
     animation: charge 5s linear infinite;
     top: 40px;
     margin: 0 auto;
}
 .battery:after {
     width: 2px;
     height: 7px;
     background-color: #3498db;
     border-radius: 0px 1px 1px 0px;
     position: absolute;
     content: "";
     top: 2px;
     right: -4px;
}
 @-webkit-keyframes charge {
     0% {
         box-shadow: inset 0px 0px 0px #3498db;
    }
     100% {
         box-shadow: inset 30px 0px 0px #3498db;
    }
}
 @keyframes charge {
     0% {
         box-shadow: inset 0px 0px 0px #3498db;
    }
     100% {
         box-shadow: inset 30px 0px 0px #3498db;
    }
}
 .magnifier {
     color: #3498db;
     width: 20px;
     height: 20px;
     box-shadow: 0px 0px 0px 1px #3498db;
     border-radius: 50%;
     position: relative;
     margin: 34px auto;
     -webkit-animation: magnify 1s linear infinite alternate;
     animation: magnify 1s linear infinite alternate;
}
 .magnifier:after, .magnifier:before {
     position: absolute;
     content: "";
}
 .magnifier:before {
     content: "me";
     font-size: 12px;
     left: 2px;
     text-align: center;
     top: 2px;
}
 .magnifier:after {
     width: 2px;
     height: 8px;
     background-color: #3498db;
     bottom: -6px;
     left: 20px;
     border-radius: 2px;
     transform: rotate(-45deg);
}
 @-webkit-keyframes magnify {
     0% {
         transform: scale(1);
    }
     100% {
         transform: scale(1.5);
    }
}
 @keyframes magnify {
     0% {
         transform: scale(1);
    }
     100% {
         transform: scale(1.5);
    }
}
/*help*/
 .help {
     width: 30px;
     height: 30px;
     border: 1px solid #3498db;
     border-radius: 50%;
     -webkit-animation: rotation 1s ease-in-out infinite;
     animation: rotation 1s ease-in-out infinite;
     margin: 30px auto;
}
 .help:after {
     width: 5px;
     height: 5px;
     background-color: #3498db;
     border-radius: 100%;
     position: absolute;
     content: "";
}
 @-webkit-keyframes rotation {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes rotation {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
/*eye ball*/
 .eye {
     width: 20px;
     height: 20px;
     background-color: 1/opacity(0.8);
     border-radius: 50%;
     box-shadow: 30px 0px 0px 0px 1/opacity(0.8);
     position: relative;
     margin: 36px 26px;
}
 .eye:after {
     background-color: #3498db;
     width: 10px;
     height: 10px;
     box-shadow: 30px 0px 0px 0px #3498db;
     border-radius: 50%;
     left: 9px;
     top: 8px;
     position: absolute;
     content: "";
     -webkit-animation: eyeball 2s linear infinite alternate;
     animation: eyeball 2s linear infinite alternate;
}
 @-webkit-keyframes eyeball {
     0% {
         left: 9px;
    }
     100% {
         left: 1px;
    }
}
 @keyframes eyeball {
     0% {
         left: 9px;
    }
     100% {
         left: 1px;
    }
}
/*coffee cup*/
 .coffee_cup {
     width: 20px;
     height: 24px;
     border: 1px solid #3498db;
     border-radius: 0px 0px 5px 5px;
     position: relative;
     margin: 36px auto;
}
 .coffee_cup:after, .coffee_cup:before {
     position: absolute;
     content: "";
}
 .coffee_cup:after {
     width: 5px;
     height: 12px;
     border: 1px solid #3498db;
     border-left: none;
     border-radius: 0px 20px 20px 0px;
     left: 20px;
}
 .coffee_cup:before {
     width: 1px;
     height: 6px;
     background-color: #3498db;
     top: -10px;
     left: 4px;
     box-shadow: 5px 0px 0px 0px #3498db, 5px -5px 0px 0px #3498db, 10px 0px 0px 0px #3498db;
     -webkit-animation: steam 1s linear infinite alternate;
     animation: steam 1s linear infinite alternate;
}
 @-webkit-keyframes steam {
     0% {
         height: 0px;
    }
     100% {
         height: 6px;
    }
}
 @keyframes steam {
     0% {
         height: 0px;
    }
     100% {
         height: 6px;
    }
}
/*square*/
 .square {
     width: 20px;
     height: 20px;
     border: 1px #3498db solid;
     margin: 36px auto;
     position: relative;
     -webkit-animation: fill_color 5s linear infinite;
     animation: fill_color 5s linear infinite;
}
 .square:after {
     width: 4px;
     height: 4px;
     position: absolute;
     content: "";
     background-color: #3498db;
     top: -8px;
     left: 0px;
     -webkit-animation: square_check 1s ease-in-out infinite;
     animation: square_check 1s ease-in-out infinite;
}
 @-webkit-keyframes square_check {
     25% {
         left: 22px;
         top: -8px;
    }
     50% {
         left: 22px;
         top: 22px;
    }
     75% {
         left: -9px;
         top: 22px;
    }
     100% {
         left: -9px;
         top: -7px;
    }
}
 @keyframes square_check {
     25% {
         left: 22px;
         top: -8px;
    }
     50% {
         left: 22px;
         top: 22px;
    }
     75% {
         left: -9px;
         top: 22px;
    }
     100% {
         left: -9px;
         top: -7px;
    }
}
 @-webkit-keyframes fill_color {
     0% {
         box-shadow: inset 0px 0px 0px 0px 1/opacity(0.1);
    }
     100% {
         box-shadow: inset 0px -20px 0px 0px #3498db;
    }
}
 @keyframes fill_color {
     0% {
         box-shadow: inset 0px 0px 0px 0px 1/opacity(0.1);
    }
     100% {
         box-shadow: inset 0px -20px 0px 0px #3498db;
    }
}
/*circle classick*/
 .circle {
     margin: 40px auto;
     position: relative;
     width: 8px;
     height: 8px;
     background-color: rgba(255, 255, 255, 0.5);
     box-shadow: -14px 0px 0px #3498db;
     border-radius: 50%;
     -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
     animation: circle_classic 1s ease-in-out infinite alternate;
}
 @-webkit-keyframes circle_classic {
     0% {
         opacity: 0.1;
         transform: rotate(0deg) scale(0.5);
    }
     100% {
         opacity: 1;
         transform: rotate(360deg) scale(1.2);
    }
}
 @keyframes circle_classic {
     0% {
         opacity: 0.1;
         transform: rotate(0deg) scale(0.5);
    }
     100% {
         opacity: 1;
         transform: rotate(360deg) scale(1.2);
    }
}
/*cloud*/
 .cloud {
     margin: 42px 30px;
     width: 4px;
     height: 10px;
     opacity: 0.5;
     position: relative;
     box-shadow: 6px 0px 0px 0px #3498db, 12px 0px 0px 0px #3498db, 18px 0px 0px 0px #3498db, 24px 0px 0px 0px #3498db, 30px 0px 0px 0px #3498db, 36px 0px 0px 0px #3498db;
     -webkit-animation: rain 1s linear infinite alternate;
     animation: rain 1s linear infinite alternate;
}
 .cloud:after {
     width: 40px;
     height: 10px;
     position: absolute;
     content: "";
     background-color: #3498db;
     top: 0px;
     opacity: 1;
     animation: line_flow 2s linear infinite reverse;
}
 @-webkit-keyframes rain {
     0% {
         box-shadow: 6px 0px 0px 0px #3498db, 12px 0px 0px 0px 1/opacity(0.9), 18px 0px 0px 0px 1/opacity(0.7), 24px 0px 0px 0px 1/opacity(0.6), 30px 0px 0px 0px 1/opacity(0.3), 36px 0px 0px 0px 1/opacity(0.2);
    }
     100% {
         box-shadow: 6px 0px 0px 0px 1/opacity(0.2), 12px 0px 0px 0px 1/opacity(0.3), 18px 0px 0px 0px 1/opacity(0.6), 24px 0px 0px 0px 1/opacity(0.7), 30px 0px 0px 0px 1/opacity(0.9), 36px 0px 0px 0px #3498db;
         opacity: 1;
    }
}
 @keyframes rain {
     0% {
         box-shadow: 6px 0px 0px 0px #3498db, 12px 0px 0px 0px 1/opacity(0.9), 18px 0px 0px 0px 1/opacity(0.7), 24px 0px 0px 0px 1/opacity(0.6), 30px 0px 0px 0px 1/opacity(0.3), 36px 0px 0px 0px 1/opacity(0.2);
    }
     100% {
         box-shadow: 6px 0px 0px 0px 1/opacity(0.2), 12px 0px 0px 0px 1/opacity(0.3), 18px 0px 0px 0px 1/opacity(0.6), 24px 0px 0px 0px 1/opacity(0.7), 30px 0px 0px 0px 1/opacity(0.9), 36px 0px 0px 0px #3498db;
         opacity: 1;
    }
}
 @-webkit-keyframes line_flow {
     0% {
         width: 0px;
    }
     100% {
         width: 40px;
    }
}
 @keyframes line_flow {
     0% {
         width: 0px;
    }
     100% {
         width: 40px;
    }
}
/* Me */
 .aboutme {
     width: 700px;
     padding: 50px 0;
     border-top: 2px 1/opacity(0.3) solid;
}
 .viduthalai {
     background: url(../img/viduthalai.png) no-repeat;
     width: 100px;
     height: 100px;
     border-radius: 0 2px 2px 0;
     float: left;
     opacity: 0.5;
}
 .viduthalai:hover {
     opacity: 1;
}
 .intro {
     float: left;
     width: 400px;
     padding-left: 20px;
     color: 1/opacity(0.5);
}
 .intro a {
     color: 1/opacity(0.5);
}
 .intro a:hover {
     color: #3498db;
}

 .git {
     color: 1/opacity(0.5);
     float: right;
     text-align: right;
     padding: 10px 20px;
     border-radius: 2px;
     background-color: rgba(0, 0, 0, 0.3);
     font-weight: 200;
}
 .git:hover {
     background-color: rgba(0, 0, 0, 0.2);
}
/*================ ================== LOADERS 4 ================== ================*/
 [class*=loaderClass-] {
     display: inline-block;
     width: 1em;
     height: 1em;
     color: inherit;
     vertical-align: middle;
     pointer-events: none;
}
 .loaderClass-1 {
     border: 0.2em dotted currentcolor;
     border-radius: 50%;
     -webkit-animation: 1s loaderClass-1 linear infinite;
     animation: 1s loaderClass-1 linear infinite;
}
 @-webkit-keyframes loaderClass-1 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-1 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-2 {
     border: 0.2em solid transparent;
     border-left-color: currentcolor;
     border-right-color: currentcolor;
     border-radius: 50%;
     -webkit-animation: 1s loaderClass-2 linear infinite;
     animation: 1s loaderClass-2 linear infinite;
}
 @-webkit-keyframes loaderClass-2 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-2 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-3 {
     border: 0.2em solid currentcolor;
     border-bottom-color: transparent;
     border-radius: 50%;
     -webkit-animation: 1s loaderClass-3 linear infinite;
     animation: 1s loaderClass-3 linear infinite;
     position: relative;
}
 @-webkit-keyframes loaderClass-3 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-3 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-4 {
     border: 1px solid currentcolor;
     border-radius: 50%;
     -webkit-animation: 1s loaderClass-4 linear infinite;
     animation: 1s loaderClass-4 linear infinite;
     position: relative;
}
 .loaderClass-4:before {
     content: "";
     display: block;
     width: 0;
     height: 0;
     position: absolute;
     top: -0.2em;
     left: 50%;
     border: 0.2em solid currentcolor;
     border-radius: 50%;
}
 @-webkit-keyframes loaderClass-4 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-4 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-5 {
     border: 0.2em solid transparent;
     border-top-color: currentcolor;
     border-radius: 50%;
     -webkit-animation: 1s loaderClass-5 linear infinite;
     animation: 1s loaderClass-5 linear infinite;
     position: relative;
}
 .loaderClass-5:before {
     content: "";
     display: block;
     width: inherit;
     height: inherit;
     position: absolute;
     top: -0.2em;
     left: -0.2em;
     border: 0.2em solid currentcolor;
     border-radius: 50%;
     opacity: 0.5;
}
 @-webkit-keyframes loaderClass-5 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-5 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-6 {
     border: 0.2em solid currentcolor;
     border-radius: 50%;
     -webkit-animation: loaderClass-6 1s ease-out infinite;
     animation: loaderClass-6 1s ease-out infinite;
}
 @-webkit-keyframes loaderClass-6 {
     0% {
         transform: scale(0);
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
     100% {
         transform: scale(1);
         opacity: 0;
    }
}
 @keyframes loaderClass-6 {
     0% {
         transform: scale(0);
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
     100% {
         transform: scale(1);
         opacity: 0;
    }
}
 .loaderClass-7 {
     border: 0 solid transparent;
     border-radius: 50%;
     position: relative;
}
 .loaderClass-7:before, .loaderClass-7:after {
     content: "";
     border: 0.2em solid currentcolor;
     border-radius: 50%;
     width: inherit;
     height: inherit;
     position: absolute;
     top: 0;
     left: 0;
     -webkit-animation: loaderClass-7 1s linear infinite;
     animation: loaderClass-7 1s linear infinite;
     opacity: 0;
}
 .loaderClass-7:before {
     -webkit-animation-delay: 1s;
     animation-delay: 1s;
}
 .loaderClass-7:after {
     -webkit-animation-delay: 0.5s;
     animation-delay: 0.5s;
}
 @-webkit-keyframes loaderClass-7 {
     0% {
         transform: scale(0);
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
     100% {
         transform: scale(1);
         opacity: 0;
    }
}
 @keyframes loaderClass-7 {
     0% {
         transform: scale(0);
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
     100% {
         transform: scale(1);
         opacity: 0;
    }
}
 .loaderClass-8 {
     position: relative;
}
 .loaderClass-8:before, .loaderClass-8:after {
     content: "";
     width: inherit;
     height: inherit;
     border-radius: 50%;
     background-color: currentcolor;
     opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
     -webkit-animation: loaderClass-8 2s infinite ease-in-out;
     animation: loaderClass-8 2s infinite ease-in-out;
}
 .loaderClass-8:after {
     -webkit-animation-delay: -1s;
     animation-delay: -1s;
}
 @-webkit-keyframes loaderClass-8 {
     0%, 100% {
         transform: scale(0);
    }
     50% {
         transform: scale(1);
    }
}
 @keyframes loaderClass-8 {
     0%, 100% {
         transform: scale(0);
    }
     50% {
         transform: scale(1);
    }
}
 .loaderClass-9 {
     background-color: currentcolor;
     border-radius: 50%;
     -webkit-animation: loaderClass-9 1s infinite ease-in-out;
     animation: loaderClass-9 1s infinite ease-in-out;
}
 @-webkit-keyframes loaderClass-9 {
     0% {
         transform: scale(0);
    }
     100% {
         transform: scale(1);
         opacity: 0;
    }
}
 @keyframes loaderClass-9 {
     0% {
         transform: scale(0);
    }
     100% {
         transform: scale(1);
         opacity: 0;
    }
}
 .loaderClass-10 {
     position: relative;
     -webkit-animation: loaderClass-10-1 2s infinite linear;
     animation: loaderClass-10-1 2s infinite linear;
}
 .loaderClass-10:before, .loaderClass-10:after {
     content: "";
     width: 0;
     height: 0;
     border: 0.5em solid currentcolor;
     display: block;
     position: absolute;
     border-radius: 100%;
     -webkit-animation: loaderClass-10-2 2s infinite ease-in-out;
     animation: loaderClass-10-2 2s infinite ease-in-out;
}
 .loaderClass-10:before {
     top: 0;
     left: 50%;
}
 .loaderClass-10:after {
     bottom: 0;
     right: 50%;
     -webkit-animation-delay: -1s;
     animation-delay: -1s;
}
 @-webkit-keyframes loaderClass-10-1 {
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-10-1 {
     100% {
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes loaderClass-10-2 {
     0%, 100% {
         transform: scale(0);
    }
     50% {
         transform: scale(1);
    }
}
 @keyframes loaderClass-10-2 {
     0%, 100% {
         transform: scale(0);
    }
     50% {
         transform: scale(1);
    }
}
 .loaderClass-11 {
     background-color: currentcolor;
     -webkit-animation: loaderClass-11 1.2s infinite ease-in-out;
     animation: loaderClass-11 1.2s infinite ease-in-out;
}
 @-webkit-keyframes loaderClass-11 {
     0% {
         transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
     50% {
         transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
     100% {
         transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
 @keyframes loaderClass-11 {
     0% {
         transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
     50% {
         transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
     100% {
         transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
 .loaderClass-12 {
     position: relative;
}
 .loaderClass-12:before, .loaderClass-12:after {
     content: "";
     display: block;
     position: absolute;
     background-color: currentcolor;
     left: 50%;
     right: 0;
     top: 0;
     bottom: 50%;
     box-shadow: -0.5em 0 0 currentcolor;
     -webkit-animation: loaderClass-12 1s linear infinite;
     animation: loaderClass-12 1s linear infinite;
}
 .loaderClass-12:after {
     top: 50%;
     bottom: 0;
     -webkit-animation-delay: 0.25s;
     animation-delay: 0.25s;
}
 @-webkit-keyframes loaderClass-12 {
     0%, 100% {
         box-shadow: -0.5em 0 0 transparent;
         background-color: currentcolor;
    }
     50% {
         box-shadow: -0.5em 0 0 currentcolor;
         background-color: transparent;
    }
}
 @keyframes loaderClass-12 {
     0%, 100% {
         box-shadow: -0.5em 0 0 transparent;
         background-color: currentcolor;
    }
     50% {
         box-shadow: -0.5em 0 0 currentcolor;
         background-color: transparent;
    }
}
 .loaderClass-13:before, .loaderClass-13:after, .loaderClass-13 {
     border-radius: 50%;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation: loaderClass-13 1.8s infinite ease-in-out;
     animation: loaderClass-13 1.8s infinite ease-in-out;
}
 .loaderClass-13 {
     color: currentcolor;
     position: relative;
     transform: translateZ(0);
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
     top: -1em;
}
 .loaderClass-13:before {
     right: 100%;
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
}
 .loaderClass-13:after {
     left: 100%;
}
 .loaderClass-13:before, .loaderClass-13:after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     width: inherit;
     height: inherit;
}
 @-webkit-keyframes loaderClass-13 {
     0%, 80%, 100% {
         box-shadow: 0 1em 0 -1em;
    }
     40% {
         box-shadow: 0 1em 0 -0.2em;
    }
}
 @keyframes loaderClass-13 {
     0%, 80%, 100% {
         box-shadow: 0 1em 0 -1em;
    }
     40% {
         box-shadow: 0 1em 0 -0.2em;
    }
}
 .loaderClass-14 {
     border-radius: 50%;
     box-shadow: 0 1em 0 -0.2em currentcolor;
     position: relative;
     -webkit-animation: loaderClass-14 0.8s ease-in-out alternate infinite;
     animation: loaderClass-14 0.8s ease-in-out alternate infinite;
     -webkit-animation-delay: 0.32s;
     animation-delay: 0.32s;
     top: -1em;
}
 .loaderClass-14:after, .loaderClass-14:before {
     content: "";
     position: absolute;
     width: inherit;
     height: inherit;
     border-radius: inherit;
     box-shadow: inherit;
     -webkit-animation: inherit;
     animation: inherit;
}
 .loaderClass-14:before {
     left: -1em;
     -webkit-animation-delay: 0.48s;
     animation-delay: 0.48s;
}
 .loaderClass-14:after {
     right: -1em;
     -webkit-animation-delay: 0.16s;
     animation-delay: 0.16s;
}
 @-webkit-keyframes loaderClass-14 {
     0% {
         box-shadow: 0 2em 0 -0.2em currentcolor;
    }
     100% {
         box-shadow: 0 1em 0 -0.2em currentcolor;
    }
}
 @keyframes loaderClass-14 {
     0% {
         box-shadow: 0 2em 0 -0.2em currentcolor;
    }
     100% {
         box-shadow: 0 1em 0 -0.2em currentcolor;
    }
}
 .loaderClass-15 {
     background: currentcolor;
     position: relative;
     -webkit-animation: loaderClass-15 1s ease-in-out infinite;
     animation: loaderClass-15 1s ease-in-out infinite;
     -webkit-animation-delay: 0.4s;
     animation-delay: 0.4s;
     width: 0.25em;
     height: 0.5em;
     margin: 0 0.5em;
}
 .loaderClass-15:after, .loaderClass-15:before {
     content: "";
     position: absolute;
     width: inherit;
     height: inherit;
     background: inherit;
     -webkit-animation: inherit;
     animation: inherit;
}
 .loaderClass-15:before {
     right: 0.5em;
     -webkit-animation-delay: 0.2s;
     animation-delay: 0.2s;
}
 .loaderClass-15:after {
     left: 0.5em;
     -webkit-animation-delay: 0.6s;
     animation-delay: 0.6s;
}
 @-webkit-keyframes loaderClass-15 {
     0%, 100% {
         box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
    }
     50% {
         box-shadow: 0 -0.25em 0 currentcolor, 0 0.25em 0 currentcolor;
    }
}
 @keyframes loaderClass-15 {
     0%, 100% {
         box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
    }
     50% {
         box-shadow: 0 -0.25em 0 currentcolor, 0 0.25em 0 currentcolor;
    }
}
 .loaderClass-16 {
     transform: rotateZ(45deg);
     perspective: 1000px;
     border-radius: 50%;
}
 .loaderClass-16:before, .loaderClass-16:after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: inherit;
     height: inherit;
     border-radius: 50%;
     -webkit-animation: 1s spin linear infinite;
     animation: 1s spin linear infinite;
}
 .loaderClass-16:before {
     transform: rotateX(70deg);
}
 .loaderClass-16:after {
     transform: rotateY(70deg);
     -webkit-animation-delay: 0.4s;
     animation-delay: 0.4s;
}
 @-webkit-keyframes rotate {
     0% {
         transform: translate(-50%, -50%) rotateZ(0deg);
    }
     100% {
         transform: translate(-50%, -50%) rotateZ(360deg);
    }
}
 @keyframes rotate {
     0% {
         transform: translate(-50%, -50%) rotateZ(0deg);
    }
     100% {
         transform: translate(-50%, -50%) rotateZ(360deg);
    }
}
 @-webkit-keyframes rotateccw {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
    }
     100% {
         transform: translate(-50%, -50%) rotate(-360deg);
    }
}
 @keyframes rotateccw {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
    }
     100% {
         transform: translate(-50%, -50%) rotate(-360deg);
    }
}
 @keyframes spin {
     0%, 100% {
         box-shadow: 0.2em 0px 0 0px currentcolor;
    }
     12% {
         box-shadow: 0.2em 0.2em 0 0 currentcolor;
    }
     25% {
         box-shadow: 0 0.2em 0 0px currentcolor;
    }
     37% {
         box-shadow: -0.2em 0.2em 0 0 currentcolor;
    }
     50% {
         box-shadow: -0.2em 0 0 0 currentcolor;
    }
     62% {
         box-shadow: -0.2em -0.2em 0 0 currentcolor;
    }
     75% {
         box-shadow: 0px -0.2em 0 0 currentcolor;
    }
     87% {
         box-shadow: 0.2em -0.2em 0 0 currentcolor;
    }
}
 .loaderClass-17 {
     position: relative;
     background-color: currentcolor;
     border-radius: 50%;
}
 .loaderClass-17:after, .loaderClass-17:before {
     content: "";
     position: absolute;
     width: 0.25em;
     height: 0.25em;
     border-radius: 50%;
     opacity: 0.8;
}
 .loaderClass-17:after {
     left: -0.5em;
     top: -0.25em;
     background-color: currentcolor;
     transform-origin: 0.75em 1em;
     -webkit-animation: loaderClass-17 1s linear infinite;
     animation: loaderClass-17 1s linear infinite;
     opacity: 0.6;
}
 .loaderClass-17:before {
     left: -1.25em;
     top: -0.75em;
     background-color: currentcolor;
     transform-origin: 1.5em 1em;
     -webkit-animation: loaderClass-17 2s linear infinite;
     animation: loaderClass-17 2s linear infinite;
}
 @-webkit-keyframes loaderClass-17 {
     0% {
         transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
     100% {
         transform: rotateZ(360deg) translate3d(0, 0, 0);
    }
}
 @keyframes loaderClass-17 {
     0% {
         transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
     100% {
         transform: rotateZ(360deg) translate3d(0, 0, 0);
    }
}
 .loaderClass-18 {
     position: relative;
}
 .loaderClass-18:before, .loaderClass-18:after {
     content: "";
     display: block;
     position: absolute;
     border-radius: 50%;
     border: 0.1em solid transparent;
     border-bottom-color: currentcolor;
     top: 0;
     left: 0;
     -webkit-animation: 1s loaderClass-18 linear infinite;
     animation: 1s loaderClass-18 linear infinite;
}
 .loaderClass-18:before {
     width: 1em;
     height: 1em;
}
 .loaderClass-18:after {
     width: 0.8em;
     height: 0.8em;
     top: 0.1em;
     left: 0.1em;
     animation-direction: reverse;
}
 @-webkit-keyframes loaderClass-18 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-18 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-19 {
     border-top: 0.2em solid currentcolor;
     border-right: 0.2em solid transparent;
     -webkit-animation: loaderClass-19 1s linear infinite;
     animation: loaderClass-19 1s linear infinite;
     border-radius: 100%;
     position: relative;
}
 @-webkit-keyframes loaderClass-19 {
     to {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-19 {
     to {
         transform: rotate(360deg);
    }
}
 .loaderClass-20 {
     background-color: transparent;
     box-shadow: inset 0px 0px 0px 0.1em currentcolor;
     border-radius: 50%;
     position: relative;
}
 .loaderClass-20:after, .loaderClass-20:before {
     position: absolute;
     content: "";
     background-color: currentcolor;
     top: 0.5em;
     left: 0.5em;
     height: 0.1em;
     transform-origin: left center;
}
 .loaderClass-20:after {
     width: 0.4em;
     -webkit-animation: loaderClass-20 2s linear infinite;
     animation: loaderClass-20 2s linear infinite;
}
 .loaderClass-20:before {
     width: 0.3em;
     -webkit-animation: loaderClass-20 8s linear infinite;
     animation: loaderClass-20 8s linear infinite;
}
 @-webkit-keyframes loaderClass-20 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-20 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-21 {
     position: relative;
}
 .loaderClass-21:before, .loaderClass-21:after {
     position: absolute;
     content: "";
}
 .loaderClass-21:before {
     width: 80%;
     height: 80%;
     left: 10%;
     bottom: 10%;
     border-radius: 100% 100% 100% 0;
     box-shadow: 0px 0px 0px 0.1em currentcolor;
     -webkit-animation: loaderClass-21 1s linear infinite;
     animation: loaderClass-21 1s linear infinite;
     transform: rotate(-46deg);
}
 .loaderClass-21:after {
     width: 1em;
     height: 0.3em;
     border-radius: 100%;
     left: 0;
     background-color: rgba(255, 255, 255, 0.2);
     bottom: -0.2em;
     z-index: -1;
}
 @-webkit-keyframes loaderClass-21 {
     0% {
         top: 0;
    }
     50% {
         top: -5px;
    }
     100% {
         top: 0;
    }
}
 @keyframes loaderClass-21 {
     0% {
         top: 0;
    }
     50% {
         top: -5px;
    }
     100% {
         top: 0;
    }
}
 .loaderClass-22 {
     border: 0.1em currentcolor solid;
     border-radius: 100%;
     position: relative;
     overflow: hidden;
     z-index: 1;
}
 .loaderClass-22:after, .loaderClass-22:before {
     position: absolute;
     content: "";
     background-color: currentcolor;
}
 .loaderClass-22:after {
     width: 50%;
     height: 0.1em;
     left: 50%;
     top: 50%;
     transform-origin: left center;
     -webkit-animation: loaderClass-22 2s linear infinite alternate;
     animation: loaderClass-22 2s linear infinite alternate;
}
 .loaderClass-22:before {
     width: 100%;
     height: 40%;
     left: 0;
     bottom: 0;
}
 @-webkit-keyframes loaderClass-22 {
     0% {
         transform: rotate(-160deg);
    }
     100% {
         transform: rotate(-20deg);
    }
}
 @keyframes loaderClass-22 {
     0% {
         transform: rotate(-160deg);
    }
     100% {
         transform: rotate(-20deg);
    }
}
 .loaderClass-23 {
     height: 0.5em;
     border: 0.1em currentcolor solid;
     border-radius: 0.1em;
     position: relative;
     -webkit-animation: loaderClass-23 5s linear infinite;
     animation: loaderClass-23 5s linear infinite;
}
 .loaderClass-23:after {
     width: 0.07em;
     height: 100%;
     background-color: currentcolor;
     border-radius: 0px 0.5em 0.5em 0px;
     position: absolute;
     content: "";
     top: 0;
     left: calc(100% + .1em);
}
 @-webkit-keyframes loaderClass-23 {
     0% {
         box-shadow: inset 0px 0px 0px currentcolor;
    }
     100% {
         box-shadow: inset 1em 0px 0px currentcolor;
    }
}
 @keyframes loaderClass-23 {
     0% {
         box-shadow: inset 0px 0px 0px currentcolor;
    }
     100% {
         box-shadow: inset 1em 0px 0px currentcolor;
    }
}
 .loaderClass-24 {
     width: 0.8em;
     height: 1em;
     border: 0.1em currentcolor solid;
     border-radius: 0px 0px 0.2em 0.2em;
     position: relative;
}
 .loaderClass-24:after, .loaderClass-24:before {
     position: absolute;
     content: "";
}
 .loaderClass-24:after {
     width: 0.2em;
     height: 50%;
     border: 0.1em currentcolor solid;
     border-left: none;
     border-radius: 0px 0.5em 0.5em 0px;
     left: calc(100% + .1em);
     top: 0.1em;
}
 .loaderClass-24:before {
     width: 0.1em;
     height: 0.3em;
     background-color: currentcolor;
     top: -0.3em;
     left: 0.05em;
     box-shadow: 0.2em 0px 0px 0px currentcolor, 0.2em -0.2em 0px 0px currentcolor, 0.4em 0px 0px 0px currentcolor;
     -webkit-animation: loaderClass-24 1s linear infinite alternate;
     animation: loaderClass-24 1s linear infinite alternate;
}
 @-webkit-keyframes loaderClass-24 {
     0% {
         height: 0px;
    }
     100% {
         height: 6px;
    }
}
 @keyframes loaderClass-24 {
     0% {
         height: 0px;
    }
     100% {
         height: 6px;
    }
}
 .loaderClass-25 {
     border: 0.1em currentcolor solid;
     position: relative;
     -webkit-animation: loaderClass-25-1 5s linear infinite;
     animation: loaderClass-25-1 5s linear infinite;
}
 .loaderClass-25:after {
     width: 0.2em;
     height: 0.2em;
     position: absolute;
     content: "";
     background-color: currentcolor;
     bottom: calc(100% + .2em);
     left: -0.4em;
     -webkit-animation: loaderClass-25-2 1s ease-in-out infinite;
     animation: loaderClass-25-2 1s ease-in-out infinite;
}
 @-webkit-keyframes loaderClass-25-1 {
     0% {
         box-shadow: inset 0 0 0 0 currentcolor;
    }
     100% {
         box-shadow: inset 0 -1em 0 0 currentcolor;
    }
}
 @keyframes loaderClass-25-1 {
     0% {
         box-shadow: inset 0 0 0 0 currentcolor;
    }
     100% {
         box-shadow: inset 0 -1em 0 0 currentcolor;
    }
}
 @-webkit-keyframes loaderClass-25-2 {
     25% {
         left: calc(100% + .2em);
         bottom: calc(100% + .2em);
    }
     50% {
         left: calc(100% + .2em);
         bottom: -0.4em;
    }
     75% {
         left: -0.4em;
         bottom: -0.4em;
    }
     100% {
         left: -0.4em;
         bottom: calc(100% + .2em);
    }
}
 @keyframes loaderClass-25-2 {
     25% {
         left: calc(100% + .2em);
         bottom: calc(100% + .2em);
    }
     50% {
         left: calc(100% + .2em);
         bottom: -0.4em;
    }
     75% {
         left: -0.4em;
         bottom: -0.4em;
    }
     100% {
         left: -0.4em;
         bottom: calc(100% + .2em);
    }
}
 .loaderClass-26 {
     width: 0.5em;
     height: 0.5em;
     background-color: currentcolor;
     box-shadow: 1em 0px 0px currentcolor;
     border-radius: 50%;
     -webkit-animation: loaderClass-26 1s ease-in-out infinite alternate;
     animation: loaderClass-26 1s ease-in-out infinite alternate;
}
 @-webkit-keyframes loaderClass-26 {
     0% {
         opacity: 0.1;
         transform: rotate(0deg) scale(0.5);
    }
     100% {
         opacity: 1;
         transform: rotate(360deg) scale(1.2);
    }
}
 @keyframes loaderClass-26 {
     0% {
         opacity: 0.1;
         transform: rotate(0deg) scale(0.5);
    }
     100% {
         opacity: 1;
         transform: rotate(360deg) scale(1.2);
    }
}
 .loaderClass-27 {
     box-shadow: inset 0 0 0 0.1em currentcolor;
     border-radius: 50%;
     position: relative;
     margin-left: 1.2em;
}
 .loaderClass-27:before {
     content: "";
     display: block;
     width: inherit;
     height: inherit;
     border-radius: 50%;
     position: absolute;
     right: 1.2em;
     top: 0;
     box-shadow: inset 0 0 0 0.1em currentcolor;
}
 .loaderClass-27:after {
     border: 0.2em solid currentcolor;
     box-shadow: -1.2em 0 0 0 currentcolor;
     width: 0;
     height: 0;
     border-radius: 50%;
     left: 50%;
     top: 25%;
     position: absolute;
     content: "";
     -webkit-animation: loaderClass-27 2s linear infinite alternate;
     animation: loaderClass-27 2s linear infinite alternate;
}
 @-webkit-keyframes loaderClass-27 {
     0% {
         left: 0;
    }
     100% {
         left: 0.5em;
    }
}
 @keyframes loaderClass-27 {
     0% {
         left: 0;
    }
     100% {
         left: 0.5em;
    }
}
 .loaderClass-28 {
     position: relative;
     -webkit-animation: 2s loaderClass-28-1 infinite;
     animation: 2s loaderClass-28-1 infinite;
}
 .loaderClass-28:before {
     content: "";
     display: block;
     width: inherit;
     height: inherit;
     border-radius: 80% 20%;
     border: 0.1em solid currentcolor;
     transform: rotate(45deg);
     border-width: 0.1em 0.05em 0.05em 0.1em;
}
 .loaderClass-28:after {
     content: "";
     display: block;
     width: 0.2em;
     height: 0.2em;
     position: absolute;
     top: 0.4em;
     left: 50%;
     border-radius: 50%;
     box-shadow: -0.07em 0.07em 0 0.1em currentcolor;
     -webkit-animation: 2s loaderClass-28-2 linear infinite;
     animation: 2s loaderClass-28-2 linear infinite;
}
 @-webkit-keyframes loaderClass-28-1 {
     0%, 100% {
         transform: scaleY(1);
    }
     10% {
         transform: scaleY(0);
    }
     20% {
         transform: scaleY(1);
    }
}
 @keyframes loaderClass-28-1 {
     0%, 100% {
         transform: scaleY(1);
    }
     10% {
         transform: scaleY(0);
    }
     20% {
         transform: scaleY(1);
    }
}
 @-webkit-keyframes loaderClass-28-2 {
     0%, 100% {
         transform: translateX(0);
    }
     30% {
         transform: translateX(-100%);
    }
     50% {
         transform: transalteX(200%);
    }
}
 @keyframes loaderClass-28-2 {
     0%, 100% {
         transform: translateX(0);
    }
     30% {
         transform: translateX(-100%);
    }
     50% {
         transform: transalteX(200%);
    }
}
 .loaderClass-29 {
     border-radius: 50%;
     box-shadow: inset 0 0 0 0.1em currentcolor, -0.5em -0.5em 0 -0.4em currentcolor, 0 -0.7em 0 -0.4em currentcolor, 0.5em -0.5em 0 -0.4em currentcolor, -0.5em 0.5em 0 -0.4em currentcolor, 0 0.7em 0 -0.4em currentcolor, 0.5em 0.5em 0 -0.4em currentcolor, -0.7em 0 0 -0.4em currentcolor, 0.7em 0 0 -0.4em currentcolor;
     -webkit-animation: 5s loaderClass-29 linear infinite;
     animation: 5s loaderClass-29 linear infinite;
}
 @-webkit-keyframes loaderClass-29 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-29 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-30 {
     border: 0.2em solid transparent;
     border-top-color: currentcolor;
     border-bottom-color: currentcolor;
     border-radius: 50%;
     position: relative;
     -webkit-animation: 1s loaderClass-30 linear infinite;
     animation: 1s loaderClass-30 linear infinite;
}
 .loaderClass-30:before, .loaderClass-30:after {
     content: "";
     display: block;
     width: 0;
     height: 0;
     position: absolute;
     border: 0.2em solid transparent;
     border-bottom-color: currentcolor;
}
 .loaderClass-30:before {
     transform: rotate(135deg);
     right: -0.3em;
     top: -0.05em;
}
 .loaderClass-30:after {
     transform: rotate(-45deg);
     left: -0.3em;
     bottom: -0.05em;
}
 @-webkit-keyframes loaderClass-30 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-30 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .loaderClass-31 {
     box-shadow: 0 0 2em currentcolor;
     background-color: currentcolor;
     position: relative;
     border-radius: 50%;
     transform: rotateX(-60deg) perspective(1000px);
}
 .loaderClass-31:before, .loaderClass-31:after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: inherit;
     height: inherit;
     border-radius: inherit;
     -webkit-animation: 1s loaderClass-31 ease-out infinite;
     animation: 1s loaderClass-31 ease-out infinite;
}
 .loaderClass-31:after {
     -webkit-animation-delay: 0.4s;
     animation-delay: 0.4s;
}
 @-webkit-keyframes loaderClass-31 {
     0% {
         opacity: 1;
         transform: rotate(0deg);
         box-shadow: 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor;
    }
     100% {
         opacity: 0;
         transform: rotate(180deg);
         box-shadow: -1em -1em 0 -0.35em currentcolor, 0 -1.5em 0 -0.35em currentcolor, 1em -1em 0 -0.35em currentcolor, -1.5em 0 0 -0.35em currentcolor, 1.5em 0 0 -0.35em currentcolor, -1em 1em 0 -0.35em currentcolor, 0 1.5em 0 -0.35em currentcolor, 1em 1em 0 -0.35em currentcolor;
    }
}
 @keyframes loaderClass-31 {
     0% {
         opacity: 1;
         transform: rotate(0deg);
         box-shadow: 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor;
    }
     100% {
         opacity: 0;
         transform: rotate(180deg);
         box-shadow: -1em -1em 0 -0.35em currentcolor, 0 -1.5em 0 -0.35em currentcolor, 1em -1em 0 -0.35em currentcolor, -1.5em 0 0 -0.35em currentcolor, 1.5em 0 0 -0.35em currentcolor, -1em 1em 0 -0.35em currentcolor, 0 1.5em 0 -0.35em currentcolor, 1em 1em 0 -0.35em currentcolor;
    }
}
 .loaderClass-32 {
     position: relative;
     border-radius: 50%;
     box-shadow: 0 0 1em 0 currentcolor, inset 0 0 1em 0 currentcolor;
     -webkit-animation: 1s loaderClass-32 linear infinite;
     animation: 1s loaderClass-32 linear infinite;
}
 .loaderClass-32:before, .loaderClass-32:after {
     content: "";
     display: block;
     width: inherit;
     height: inherit;
     position: absolute;
     border-radius: 50%;
}
 .loaderClass-32:before {
     border-top: 0.2em solid currentcolor;
     border-right: 0.2em solid transparent;
     top: 0.28em;
     right: calc(50% - .22em);
}
 .loaderClass-32:after {
     border-bottom: 0.2em solid currentcolor;
     border-left: 0.2em solid transparent;
     bottom: 0.28em;
     left: calc(50% - .22em);
}
 @-webkit-keyframes loaderClass-32 {
     0% {
         transform: rotateX(-60deg) rotateZ(0deg);
    }
     100% {
         transform: rotateX(-60deg) rotateZ(360deg);
    }
}
 @keyframes loaderClass-32 {
     0% {
         transform: rotateX(-60deg) rotateZ(0deg);
    }
     100% {
         transform: rotateX(-60deg) rotateZ(360deg);
    }
}
 .loaderClass-33 {
     border-radius: 50%;
     position: relative;
}
 .loaderClass-33:after, .loaderClass-33:before {
     position: absolute;
     content: "";
}
 .loaderClass-33:after {
     height: 0.1em;
     width: 1em;
     background-color: currentcolor;
     border-radius: 0.1em;
     bottom: 0;
     left: 0;
     transform-origin: bottom center;
     -webkit-animation: loaderClass-33-1 0.8s ease-in-out infinite alternate;
     animation: loaderClass-33-1 0.8s ease-in-out infinite alternate;
}
 .loaderClass-33:before {
     height: 0.2em;
     width: 0.2em;
     background-color: currentcolor;
     border-radius: 50%;
     top: 0;
     left: calc(50% - .1em);
     -webkit-animation: loaderClass-33-2 0.4s ease-in-out infinite alternate;
     animation: loaderClass-33-2 0.4s ease-in-out infinite alternate;
}
 @-webkit-keyframes loaderClass-33-2 {
     0% {
         height: 0.24em;
         transform: translateY(0px);
    }
     75% {
         height: 0.2em;
         width: 0.2em;
    }
     100% {
         height: 0.1em;
         width: 0.24em;
         transform: translateY(0.8em);
    }
}
 @keyframes loaderClass-33-2 {
     0% {
         height: 0.24em;
         transform: translateY(0px);
    }
     75% {
         height: 0.2em;
         width: 0.2em;
    }
     100% {
         height: 0.1em;
         width: 0.24em;
         transform: translateY(0.8em);
    }
}
 @-webkit-keyframes loaderClass-33-1 {
     0% {
         transform: rotate(-45deg);
    }
     100% {
         transform: rotate(45deg);
    }
}
 @keyframes loaderClass-33-1 {
     0% {
         transform: rotate(-45deg);
    }
     100% {
         transform: rotate(45deg);
    }
}
 .loaderClass-34 {
     position: relative;
     width: 1em;
     height: 0.5em;
}
 .loaderClass-34:after, .loaderClass-34:before {
     position: absolute;
     content: "";
     height: 0.4em;
     width: 0.4em;
     top: 0;
     background-color: currentcolor;
     border-radius: 50%;
}
 .loaderClass-34:after {
     right: 0;
     -webkit-animation: loaderClass-34-2 0.5s ease-in-out infinite;
     animation: loaderClass-34-2 0.5s ease-in-out infinite;
     -webkit-animation-direction: alternate;
     animation-direction: alternate;
}
 .loaderClass-34:before {
     left: 0;
     -webkit-animation: loaderClass-34-1 0.5s ease-in-out infinite;
     animation: loaderClass-34-1 0.5s ease-in-out infinite;
     -webkit-animation-direction: alternate;
     animation-direction: alternate;
}
 @-webkit-keyframes loaderClass-34-1 {
     0% {
         transform: translatex(0px);
    }
     65% {
         height: 0.4em;
         width: 0.4em;
    }
     100% {
         height: 0.5em;
         width: 0.3em;
         transform: translatex(0.2em);
    }
}
 @keyframes loaderClass-34-1 {
     0% {
         transform: translatex(0px);
    }
     65% {
         height: 0.4em;
         width: 0.4em;
    }
     100% {
         height: 0.5em;
         width: 0.3em;
         transform: translatex(0.2em);
    }
}
 @-webkit-keyframes loaderClass-34-2 {
     0% {
         transform: translatex(0px);
    }
     65% {
         height: 0.4em;
         width: 0.4em;
    }
     100% {
         height: 0.5em;
         width: 0.3em;
         transform: translatex(-0.2em);
    }
}
 @keyframes loaderClass-34-2 {
     0% {
         transform: translatex(0px);
    }
     65% {
         height: 0.4em;
         width: 0.4em;
    }
     100% {
         height: 0.5em;
         width: 0.3em;
         transform: translatex(-0.2em);
    }
}
 .loaderClass-35 {
     margin: 0 0.5em;
     position: relative;
}
 .loaderClass-35:before {
     border-radius: 50%;
     background-color: currentcolor;
     -webkit-animation: loaderClass-35 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     animation: loaderClass-35 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
     content: "";
     width: inherit;
     height: inherit;
     top: 0;
     left: 0;
     position: absolute;
}
 @-webkit-keyframes loaderClass-35 {
     0% {
         transform: translateX(0) scale(1);
    }
     25% {
         transform: translateX(-100%) scale(0.3);
    }
     50% {
         transform: translateX(0) scale(1);
    }
     75% {
         transform: translateX(100%) scale(0.3);
    }
     100% {
         transform: translateX(0) scale(1);
    }
}
 @keyframes loaderClass-35 {
     0% {
         transform: translateX(0) scale(1);
    }
     25% {
         transform: translateX(-100%) scale(0.3);
    }
     50% {
         transform: translateX(0) scale(1);
    }
     75% {
         transform: translateX(100%) scale(0.3);
    }
     100% {
         transform: translateX(0) scale(1);
    }
}
 .loaderClass-36 {
     position: relative;
}
 .loaderClass-36:before, .loaderClass-36:after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
}
 .loaderClass-36:before {
     width: 1em;
     height: 1em;
     border: 0.1em solid currentcolor;
     border-radius: 50%;
     -webkit-animation: loaderClass-36-1 1.15s infinite -0.3s;
     animation: loaderClass-36-1 1.15s infinite -0.3s;
}
 .loaderClass-36:after {
     right: 0;
     bottom: 0;
     margin: auto;
     width: 0;
     height: 0;
     border: 0.1em solid currentcolor;
     border-radius: 50%;
     transform: translate(-0.2em);
     -webkit-animation: loaderClass-36-2 4.6s infinite steps(1);
     animation: loaderClass-36-2 4.6s infinite steps(1);
}
 @-webkit-keyframes loaderClass-36-1 {
     to {
         transform: rotateX(180deg);
    }
}
 @keyframes loaderClass-36-1 {
     to {
         transform: rotateX(180deg);
    }
}
 @-webkit-keyframes loaderClass-36-2 {
     0% {
         opacity: 0;
    }
     25% {
         opacity: 1;
    }
     50% {
         box-shadow: 0.2em 0 0 currentcolor;
    }
     75% {
         box-shadow: 0.2em 0 0 currentcolor, 0.4em 0 0 currentcolor;
    }
}
 @keyframes loaderClass-36-2 {
     0% {
         opacity: 0;
    }
     25% {
         opacity: 1;
    }
     50% {
         box-shadow: 0.2em 0 0 currentcolor;
    }
     75% {
         box-shadow: 0.2em 0 0 currentcolor, 0.4em 0 0 currentcolor;
    }
}
 .loaderClass-37 {
     border-right: 0.1em solid currentcolor;
     border-radius: 100%;
     -webkit-animation: loaderClass-37 800ms linear infinite;
     animation: loaderClass-37 800ms linear infinite;
}
 .loaderClass-37:before, .loaderClass-37:after {
     content: "";
     width: 0.8em;
     height: 0.8em;
     display: block;
     position: absolute;
     top: calc(50% - .4em);
     left: calc(50% - .4em);
     border-left: 0.08em solid currentcolor;
     border-radius: 100%;
     animation: loaderClass-37 400ms linear infinite reverse;
}
 .loaderClass-37:after {
     width: 0.6em;
     height: 0.6em;
     top: calc(50% - .3em);
     left: calc(50% - .3em);
     border: 0;
     border-right: 0.05em solid currentcolor;
     -webkit-animation: none;
     animation: none;
}
 @-webkit-keyframes loaderClass-37 {
     from {
         transform: rotate(360deg);
    }
     to {
         transform: rotate(0deg);
    }
}
 @keyframes loaderClass-37 {
     from {
         transform: rotate(360deg);
    }
     to {
         transform: rotate(0deg);
    }
}
 .loaderClass-38 {
     height: 0.1em;
     width: 0.1em;
     box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
     -webkit-animation: loaderClass-38 6s infinite;
     animation: loaderClass-38 6s infinite;
}
 @-webkit-keyframes loaderClass-38 {
     0% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
    }
     8.33% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor;
    }
     16.66% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor;
    }
     24.99% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     33.32% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
    }
     41.65% {
         box-shadow: 0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor;
    }
     49.98% {
         box-shadow: 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor;
    }
     58.31% {
         box-shadow: -0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     66.64% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     74.97% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     83.3% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     91.63% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     100% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
    }
}
 @keyframes loaderClass-38 {
     0% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
    }
     8.33% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor;
    }
     16.66% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor;
    }
     24.99% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     33.32% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
    }
     41.65% {
         box-shadow: 0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor;
    }
     49.98% {
         box-shadow: 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor;
    }
     58.31% {
         box-shadow: -0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     66.64% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     74.97% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     83.3% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, 0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     91.63% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor, -0.2em 0.2em 0 0.1em currentcolor;
    }
     100% {
         box-shadow: -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor, -0.2em -0.2em 0 0.1em currentcolor;
    }
}
 .loaderClass-39 {
     width: 0.15em;
     height: 0.15em;
     background-color: currentcolor;
     border-radius: 100%;
     -webkit-animation: loaderClass-39-1 30s infinite linear;
     animation: loaderClass-39-1 30s infinite linear;
     margin-left: 5%;
     margin-top: 1%;
     display: none;
}
 .loaderClass-39:before, .loaderClass-39:after {
     content: "";
     border-radius: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .loaderClass-39:before {
     width: 0.3em;
     height: 1em;
     -webkit-animation: loaderClass-39-2 0.8s linear infinite;
     animation: loaderClass-39-2 0.8s linear infinite;
}
 .loaderClass-39:after {
     width: 1em;
     height: 0.3em;
     -webkit-animation: loaderClass-39-2 1.2s linear infinite;
     animation: loaderClass-39-2 1.2s linear infinite;
}
 @-webkit-keyframes loaderClass-39-1 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes loaderClass-39-1 {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @-webkit-keyframes loaderClass-39-2 {
     0% {
         box-shadow: 0.04em -0.04em 0 0.02em currentcolor;
    }
     25% {
         box-shadow: 0.04em 0.04em 0 0.02em currentcolor;
    }
     50% {
         box-shadow: -0.04em 0.04em 0 0.02em currentcolor;
    }
     75% {
         box-shadow: -0.04em -0.04em 0 0.02em currentcolor;
    }
     100% {
         box-shadow: 0.04em -0.04em 0 0.02em currentcolor;
    }
}
 @keyframes loaderClass-39-2 {
     0% {
         box-shadow: 0.04em -0.04em 0 0.02em currentcolor;
    }
     25% {
         box-shadow: 0.04em 0.04em 0 0.02em currentcolor;
    }
     50% {
         box-shadow: -0.04em 0.04em 0 0.02em currentcolor;
    }
     75% {
         box-shadow: -0.04em -0.04em 0 0.02em currentcolor;
    }
     100% {
         box-shadow: 0.04em -0.04em 0 0.02em currentcolor;
    }
}
 .loaderClass-40 {
     border: 0.05em currentcolor solid;
     border-radius: 0.2em;
     overflow: hidden;
     position: relative;
}
 .loaderClass-40:after, .loaderClass-40:before {
     content: "";
     border-radius: 50%;
     position: absolute;
     width: inherit;
     height: inherit;
     -webkit-animation: loaderClass-40 2s infinite linear;
     animation: loaderClass-40 2s infinite linear;
}
 .loaderClass-40:before {
     border-top: 0.2em currentcolor solid;
     top: -0.15em;
     left: calc( -50% - .15em );
     transform-origin: right center;
}
 .loaderClass-40:after {
     border-bottom: 0.2em currentcolor solid;
     top: 0.15em;
     right: calc( -50% - .15em );
     transform-origin: left center;
}
 @-webkit-keyframes loaderClass-40 {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(359deg);
    }
}
 @keyframes loaderClass-40 {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(359deg);
    }
}
 .loaderClass-41 {
     border: 0.05em currentcolor solid;
     border-radius: 0.2em;
     position: relative;
     background: linear-gradient(45deg, transparent 48%, currentcolor 50%, currentcolor 50%, transparent 52%, transparent), linear-gradient(-45deg, transparent 48%, currentcolor 50%, currentcolor 50%, transparent 52%, transparent);
     background-size: 0.5em 0.5em;
     background-position: 0% 0%;
     -webkit-animation: loaderClass-41 1s infinite linear;
     animation: loaderClass-41 1s infinite linear;
}
 @-webkit-keyframes loaderClass-41 {
     from {
         background-position: 0 0;
    }
     to {
         background-position: -1em 0;
    }
}
 @keyframes loaderClass-41 {
     from {
         background-position: 0 0;
    }
     to {
         background-position: -1em 0;
    }
}
 .loaderClass-42 {
     width: 2em;
     height: 0.66em;
     border: 0.05em currentcolor solid;
     border-radius: 0.1em;
     background: linear-gradient(-60deg, transparent 0%, transparent 50%, currentcolor 50%, currentcolor 75%, transparent 75%, transparent);
     background-size: 1em 2em;
     background-position: 0 0;
     -webkit-animation: loaderClass-42 0.8s infinite linear;
     animation: loaderClass-42 0.8s infinite linear;
}
 @-webkit-keyframes loaderClass-42 {
     from {
         background-position: 0 0;
    }
     to {
         background-position: -2em 0;
    }
}
 @keyframes loaderClass-42 {
     from {
         background-position: 0 0;
    }
     to {
         background-position: -2em 0;
    }
}
 .box:nth-of-type(n + 43) {
     display: none;
}