.upline {
    background-color: rgba(0, 0, 15, 0);
    position: absolute;
    left: 0;
    right: 0;
    top: 5%;
    bottom: 90.8%;
}

.head_logo {
    height: 100%;
    text-align: left;
}

.head_logo .upline_text {
    width: auto;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.head_logo .upline_logo {
    width: auto;
    height: 154.3%;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.logo_lines {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    display: inline-block;
    overflow: hidden;
}

.logo_lines .line {
    position: absolute;
    height: 100%;
    width: auto;
    left: -60%;
    top: 0;
    opacity: 0;
}

.logo_lines .line.bg {
    position: relative;
    margin: 0;
}

.upline_results_text__wrapper,
.upline_ride_time_text__wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}
.upline_results_text__wrapper,
.upline_ride_time_text__wrapper {
    overflow: hidden;
}

.upline_future_text__wrapper {
    position: absolute;
    height: 189.54%;
    left: 22.6%;
    right: 0;
    bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    /*opacity: 0;*/
}

.upline_results_text__wrapper .upline_results_text {
    position: absolute;
    height: 100%;
    width: auto;
    transform: translateX(9%);
    top: 0;
    max-width: none;
}

.upline_future_text__wrapper img {
    height: 100%;
    width: auto;
    max-width: none;
    display: inline-block;
    opacity: 0;
}

.upline_future_text__wrapper .upline_future_name1 {
    transform: translateX(-7%);
}

.upline_future_text__wrapper .upline_future_name2 {
    transform: translateX(7%);
}

.upline_future_text__wrapper .upline_future_pic1,
.upline_future_text__wrapper .upline_future_pic2,
.upline_future_text__wrapper .upline_future_vs {
    transform: translateY(100%);
}

.upline_ride_time_text__wrapper .upline_ride_time_text {
    position: absolute;
    height: 100%;
    width: auto;
    transform: translateX(18.7%);
    top: 0;
    max-width: none;
}

.switcher.animate .animated .upline {
    animation-name: showBackground;
    animation-duration: .9s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.switcher.animate .animated .upline_results .line {
    animation-name: slideLines;
    animation-fill-mode: forwards;
    animation-duration: .5s;
    animation-delay: 1.3s;
}

.switcher.animate .animated .upline_future .line {
    animation-name: slideLines2;
    animation-fill-mode: forwards;
    animation-duration: .7s;
    animation-delay: 1.4s;
}

.switcher.animate .animated .upline_ride_time .line {
    animation-name: slideLines3;
    animation-fill-mode: forwards;
    animation-duration: .7s;
    animation-delay: 1.4s;
}

.switcher.animate .animated .upline .l2 { animation-delay: 1.5s;}
.switcher.animate .animated .upline .l3 { animation-delay: 1.6s; }
.switcher.animate .animated .upline .l4 { animation-delay: 1.7s; }
.switcher.animate .animated .upline .l5 { animation-delay: 1.8s; }
.switcher.animate .animated .upline .l6 { animation-delay: 1.9s; }

.switcher.animate .animated .upline .upline_text {
    animation-name: slideBlock;
    animation-fill-mode: forwards;
    animation-duration: .7s;
    animation-delay: 1.6s;
}

.switcher.animate .animated .upline .upline_logo {
    animation-name: slideLogo;
    animation-fill-mode: forwards;
    animation-duration: .7s;
    animation-delay: 1.8s;
}

.switcher.animate .animated .upline_results  .upline_results_text__wrapper,
.switcher.animate .animated  .upline_ride_time .upline_ride_time_text__wrapper {
    animation-name: showBlock;
    animation-fill-mode: forwards;
    animation-duration: .5s;
    animation-delay: 2s;
}

.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_name1,
.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_name2,
.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_pic1,
.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_pic2,
.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_vs {
    animation-fill-mode: forwards;
    animation-duration: 7s;
    animation-delay: 2.3s;
    animation-iteration-count: infinite;
}

.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_name1 {
    animation-name: showFutureName1;
}

.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_name2 {
    animation-name: showFutureName2;
}

.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_pic1,
.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_pic2 {
    animation-name: showFuturePics;
}

.switcher.animate .animated .upline_future .upline_future_text__wrapper .upline_future_vs {
    animation-name: showFutureVs;
}

.switcher.animate .animated .upline_results .upline_results_text {
    animation-name: moveTextLine;
    animation-fill-mode: forwards;
    animation-duration: 29s;
    animation-delay: 4.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.switcher.animate .animated .upline_ride_time .upline_ride_time_text {
    animation-name: moveTextLine2;
    animation-fill-mode: forwards;
    animation-duration: 17s;
    animation-delay: 4.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes showBackground {
    from {background-color: rgba(0, 0, 15, 0);}
    to {background-color: rgba(0, 0, 15, .85);}
}

@keyframes slideLines {
    0% {left: -68%; opacity: 0;}
    70% {opacity: 0;}
    100% {left: -18%; opacity: 1;}
}

@keyframes slideLines2 {
    0% {left: -21%; opacity: 0;}
    50% {opacity: 0;}
    100% {left: -8%; opacity: 1;}
}

@keyframes slideLines3 {
    0% {left: -13%; opacity: 0;}
    50% { opacity: 0;}
    100% {left: 0; opacity: 1;}
}

@keyframes slideBlock {
    0% {left: -13%; opacity: 0;}
    50% {opacity: 0;}
    100% {left: 0; opacity: 1;}
}

@keyframes slideLogo {
    0% {left: -13%; opacity: 0;}
    50% {opacity: 0;}
    100% {left: 0; opacity: 1;}
}

@keyframes showBlock {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes moveTextLine {
    0% { transform: translateX(9%); }
    70% { transform: translateX(-58.35%); }
    90% { transform: translateX(-58.35%); opacity: 1; }
    92% { transform: translateX(-58.35%); opacity: 0; }
    94.1% { transform: translateX(9%); opacity: 0; }
    96% { transform: translateX(9%);  opacity: 1; }
    100% { transform: translateX(9%);  opacity: 1; }
}

@keyframes moveTextLine2 {
    0% { transform: translateX(18.7%); }
    70% { transform: translateX(-30.7%); }
    90% { transform: translateX(-30.7%); opacity: 1; }
    92% { transform: translateX(-30.7%); opacity: 0; }
    94.1% { transform: translateX(17%); opacity: 0; }
    96% { transform: translateX(17%);  opacity: 1; }
    100% { transform: translateX(17%);  opacity: 1; }
}

@keyframes showFutureName1 {
    0% { transform: translateX(-7%); opacity: 0; }
    10% { transform: translateX(0%);  opacity: 1; }

    90% { transform: translateX(0%);  opacity: 1; }
    100% { transform: translateX(-7%);  opacity: 0; }
}

@keyframes showFutureName2 {
    0% { transform: translateX(7%); opacity: 0; }
    10% { transform: translateX(0%);  opacity: 1; }

    90% { transform: translateX(0%);  opacity: 1; }
    100% { transform: translateX(7%); opacity: 0; }
}

@keyframes showFuturePics {
    0% { transform: translateY(100%); opacity: 0; }
    5% { transform: translateY(50%);  opacity: 0; }
    10% { transform: translateY(50%);  opacity: 0; }
    15% { transform: translateY(0%);  opacity: 1; }

    85% { transform: translateY(0%);  opacity: 1; }
    90% { transform: translateY(50%);  opacity: 0; }
    95% { transform: translateY(50%);  opacity: 0; }
    100% { transform: translateY(50%);  opacity: 0; }
}

@keyframes showFutureVs {
    0% { transform: translateY(100%); opacity: 0; }
    13% { transform: translateY(100%);  opacity: 0; }
    18% { transform: translateY(0%);  opacity: 1; }

    82% { transform: translateY(0%);  opacity: 1; }
    87% { transform: translateY(100%);  opacity: 0; }
    100% { transform: translateY(100%);  opacity: 0; }
}