{% load static %}
 :root {
     --track-bg-color: rgba(146,23,42,1);
     --track-line-color: rgba(255,255,255,1);
     --track-transparent: rgba(255,255,255,0);
}
 @keyframes slidein {
     0% {
         margin-left: -300%;
         width: 100%;
    }
     100% {
         margin-left: 0%;
         width: 100%;
    }
}
 @keyframes appear {
     0% {
         opacity: 30%;
    }
     100% {
         opacity: 100%;
    }
}
 @-ms-viewport {
     width: device-width;
}
 .hero {
     margin-top: 4.5rem;
     position: absolute;
     display: flex;
     top: 0px;
     left: 0px;
     min-height: 70vh;
     width: 100%;
}
 @media screen and (max-width: 736px) {
     .hero {
         margin-top: 2.75rem;
    }
     .hero-title {
         left: 0%;
    }
}
 .bottom {
     background: rgb(255,255,255);
     background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 9%, rgba(255,255,255,0) 15%, rgba(71,71,71,0) 100%);
     z-index: 30;
}
 .lane-one {
     margin-left: -300%;
     animation-fill-mode: both;
     animation-duration: 2.5s;
     animation-name: slidein;
     z-index: 10;
     background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 0%, 
    /* transparent */
     var(--track-line-color) 0%, var(--track-bg-color) 0%, 
    /* colored-grad */
     var(--track-bg-color) 0%, var(--track-bg-color) 4.5%, 
    /* track lane */
     var(--track-bg-color) 4.5%, var(--track-line-color) 4.75%, 
    /* colored-grad */
     var(--track-transparent) 4.75%, var(--track-transparent) 100% 
    /* white */
     );
}
 .lane-two {
     margin-left: -300%;
     animation-fill-mode: both;
     animation-duration: 2.3s;
     animation-name: slidein;
     z-index: 10;
     background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 4.75%, 
    /* transparent */
     var(--track-line-color) 4.75%, var(--track-bg-color) 5%, 
    /* colored-grad */
     var(--track-bg-color) 5%, var(--track-bg-color) 9.5%, 
    /* track lane */
     var(--track-bg-color) 9.5%, var(--track-line-color) 9.75%, 
    /* colored-grad */
     var(--track-transparent) 9.75%, var(--track-transparent) 100% 
    /* white */
     );
}
 .lane-three {
    background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 9.75%, 
    /* transparent */
     var(--track-line-color) 9.75%, var(--track-bg-color) 10%, 
    /* colored-grad */
     var(--track-bg-color) 10%, var(--track-bg-color) 14.5%, 
    /* track lane */
     var(--track-bg-color) 14.5%, var(--track-line-color) 14.75%, 
    /* colored-grad */
     var(--track-transparent) 14.75%, var(--track-transparent) 100% 
    /* white */
     );
     margin-left: -300%;
     animation-iteration-count: once;
     animation-fill-mode: both;
     animation-duration: 2.1s;
     animation-name: slidein;
     z-index: 10;
}
 .lane-four {
    background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 14.75%, 
    /* transparent */
     var(--track-line-color) 14.75%, var(--track-bg-color) 15%, 
    /* colored-grad */
     var(--track-bg-color) 15%, var(--track-bg-color) 19.5%, 
    /* track lane */
     var(--track-bg-color) 19.5%, var(--track-line-color) 19.75%, 
    /* colored-grad */
     var(--track-transparent) 19.75%, var(--track-transparent) 100% 
    /* white */
     );
     margin-left: -300%;
     animation-iteration-count: once;
     animation-fill-mode: both;
     animation-duration: 1.8s;
     animation-name: slidein;
     z-index: 10;
}
 .lane-five {
    background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 19.75%, 
    /* transparent */
     var(--track-line-color) 19.75%, var(--track-bg-color) 20%, 
    /* colored-grad */
     var(--track-bg-color) 20%, var(--track-bg-color) 24.5%, 
    /* track lane */
     var(--track-bg-color) 24.5%, var(--track-line-color) 24.75%, 
    /* colored-grad */
     var(--track-transparent) 24.75%, var(--track-transparent) 100% 
    /* white */
     );
     margin-left: -300%;
     animation-iteration-count: once;
     animation-fill-mode: both;
     animation-duration: 1.5s;
     animation-name: slidein;
     z-index: 10;
}
 .lane-six {
    background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 24.75%, 
    /* transparent */
     var(--track-line-color) 24.75%, var(--track-bg-color) 25%, 
    /* colored-grad */
     var(--track-bg-color) 25%, var(--track-bg-color) 29.5%, 
    /* track lane */
     var(--track-bg-color) 29.5%, var(--track-line-color) 29.75%, 
    /* colored-grad */
     var(--track-transparent) 29.75%, var(--track-transparent) 100% 
    /* white */
     );
     margin-left: -300%;
     animation-iteration-count: once;
     animation-fill-mode: both;
     animation-duration: 1.2s;
     animation-name: slidein;
     z-index: 10;
}
 .lane-seven {
    background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 29.75%, 
    /* transparent */
     var(--track-line-color) 29.75%, var(--track-bg-color) 30%, 
    /* colored-grad */
     var(--track-bg-color) 30%, var(--track-bg-color) 34.5%, 
    /* track lane */
     var(--track-bg-color) 34.5%, var(--track-line-color) 34.75%, 
    /* colored-grad */
     var(--track-transparent) 34.75%, var(--track-transparent) 100% 
    /* white */
     );
     margin-left: -300%;
     animation-iteration-count: once;
     animation-fill-mode: both;
     animation-duration: 0.8s;
     animation-name: slidein;
     z-index: 10;
}
 .lane-eight {
    background: linear-gradient( 140deg, var(--track-transparent) 0%, var(--track-transparent) 34.75%, 
    /* transparent */
     var(--track-line-color) 34.75%, var(--track-bg-color) 35%, 
    /* colored-grad */
     var(--track-bg-color) 35%, var(--track-bg-color) 39.5%, 
    /* track lane */
     var(--track-bg-color) 39.5%, var(--track-line-color) 39.75%, 
    /* colored-grad */
     var(--track-transparent) 39.75%, var(--track-transparent) 100% 
    /* white */
     );
     margin-left: -300%;
     animation-iteration-count: once;
     animation-fill-mode: both;
     animation-duration: 0.4s;
     animation-name: slidein;
     z-index: 10;
}
 .startline {
     width: 736px;
     background: linear-gradient(50deg, rgba(230,119,0,0) 0%, rgba(255,255,255,0) 35.0%, var(--track-line-color) 35.25%, var(--track-line-color) 35.5%, rgba(255,255,255,0) 35.75%, rgba(255,255,255,0) 36% );
     z-index: 11;
}
 @media screen and (max-width: 736px) {
     .startline {
         width: 100%;
         background: linear-gradient(50deg, rgba(230,119,0,0) 0%, rgba(255,255,255,0) 45.0%, var(--track-line-color) 45.25%, var(--track-line-color) 45.5%, rgba(255,255,255,0) 45.75%, rgba(255,255,255,0) 46% ) 
    }
}

 @media screen and (max-height: 640px) and (orientation: landscape) {
     .startline {
         width: 100%;
         background: linear-gradient(50deg, rgba(230,119,0,0) 0%, rgba(255,255,255,0) 25.0%, var(--track-line-color) 25.25%, var(--track-line-color) 25.5%, rgba(255,255,255,0) 25.75%, rgba(255,255,255,0) 26% ) 
    }
}

 @media screen and (max-height: 540px) and (orientation: landscape) {
     .startline {
         width: 100%;
         background: linear-gradient(50deg, rgba(230,119,0,0) 0%, rgba(255,255,255,0) 15.0%, var(--track-line-color) 15.25%, var(--track-line-color) 15.5%, rgba(255,255,255,0) 15.75%, rgba(255,255,255,0) 16% ) 
    }
}

 .hero-image {
     object-fit: cover;
     top: -25px;
     background-position: right;
     background-size: 100vh;
     background-repeat: no-repeat;
     background-color: transparent;
     background-position: 100%;
}

 .hero-image-front {
     -webkit-filter: drop-shadow(5px 0px 5px #222);
     filter: drop-shadow(5px 0px 5px #222);
     background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15.0%, 
      rgba(255,255,255,0) 15.75%, rgba(255,255,255,0) 100% ), url(/static/images/common/adam_main_nobg.png);
     z-index: 15;
     opacity: 30%;
     animation-iteration-count: 1;
     animation-fill-mode: both;
     animation-duration: 2.3s;
     animation-name: appear;
}

 .hero-image-bg {
     -webkit-mask-image: linear-gradient(140deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35.0%, rgba(0,0,0,0) 34.0%, rgba(0,0,0,1) 40%);
     mask-type: alpha;
     object-fit: cover;
     z-index: 14;
     background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35.0%,
      rgba(255,255,255,1) 35.75%, rgba(255,255,255,0) 100% ), url(/static/images/common/adam_main.jpg);
}

.hero-title {
     width: 100%;
     bottom: -10%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-shadow: 0px 0px 10px white;
     z-index: 10;
     text-align: end;
     line-height: normal;
     font-size: 5rem;
     font-weight: 400;
     color: rgb(52 52 52);
     -webkit-text-stroke: 1px #ffffff52;
     z-index: 16;
}
 @media screen and (max-width: 1024px) and (orientation: portrait){
     .hero-title {
         text-align: end;
    }
     .hero-image {
         background-position: center;
    }
}

 @media screen and (max-width: 736px) {
     .hero-title {
         text-align: end;
    }
}

@media screen and (orientation: landscape) {
     .hero-image {
         background-position: right;
         top: -10px;
    }
     .hero-title {
         font-size: 4rem;
    }    
}