#banner , #banner .item {position: relative;z-index: 2;}
#banner:before{content:'';position: absolute;width: 200px;height: 100%;background: var(--secondary);opacity: .8;right: 0;top: 0;z-index: 1;}
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(31 31 31 / .45);top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;bottom: 20vh;left: 10%;z-index: 3;}
#banner .info .h3 {display: block;line-height: 165%;font-size: 35px;font-weight: 500;color: #fff;word-spacing: 100vw;margin-top: 50px;letter-spacing: 10px;}
#banner .info p {font-weight: 400;color: #fff;font-size: 18px;letter-spacing: 2.5px;line-height: 2;}
#banner .img {position: relative;width: 100vw;height: 98vh;background: no-repeat 50% / cover;}
#banner .img img , #banner .img video , #banner .img iframe { position: absolute; width: 100vw; height: 100vh; left: 0; top: 0; }
#textdown{font-family: "Fira Sans", sans-serif;font-size: 90px;line-height: 1.1;color: white;font-weight: 300;translate: none;rotate: none;scale: none;padding: 0px;text-transform: uppercase;}
#textdown.stop-copy{position:relative; transform: translate(0px, 775px);}
#textdown.go-copy{position:fixed;}

/* scrolldown */
#scrolldown {position: absolute;font-weight: 400;font-size: 15px;color: #fff;white-space: nowrap;writing-mode: vertical-rl;bottom: 80px;right: 77px;display: flex;flex-direction: row;align-items: center;font-family: "Fira Sans", sans-serif;gap: 20px;animation: floatUpDown 2s ease-in-out infinite;letter-spacing: 1px;z-index: 3;}
#scrolldown span{width: 1px;height: 105px;background: white;position: relative;}
#scrolldown span:after{content:'';position: absolute;bottom: 0;width: 1px;height: 6px;background: white;transform: rotate(40deg);left: 2px;}
@keyframes floatUpDown{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

@media screen and (max-width: 1400px){
    #textdown{font-size: 50px;}
    #banner .info{bottom: 15vh;}
}
@media screen and (max-width: 768px){
    #banner .info .h3{font-size: 40px;}
    #banner .info p{font-size:18px;}
    #banner .info{left:8%;bottom: 10%;}
    #scrolldown, #banner:before{display:none;}
    #banner .img img, #banner .img video, #banner .img iframe{width:auto;left: -50%;}
}
@media screen and (max-width: 640px){
    #textdown{font-size: 30px;}
    #banner .info{left:8%;bottom: 10%;width: 84%;}
    #banner .info .h3{font-size: 30px;}
    #banner .info p{font-size: 15px;letter-spacing: 0;margin-top: 30px;}
    #banner .img{height: 80vh;}
}