@import"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap";:root{--black: #07090c;--lighter-grey: #272727;--brown: #433332;--dark-grey: #575f63;--bluish-grey: #677788;--light-grey: #bbbebf;--red: #e50914;--orange: #c24143;--white: #fff;--darker-grey: #343434}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:var(--black)}header{position:fixed;top:0;right:0;width:100%;z-index:10;background-color:var(--black);padding:20px 50px;display:flex;justify-content:space-between;align-items:center}header .logoBox{border-radius:5px;padding:3px 3px 0;box-shadow:0 0 10px #ffffff80}header .logoBox img{max-width:150px;animation:logoBoxShadow 1s repeat}header nav{justify-self:left}header nav ul li{display:inline;padding:10px 0;cursor:pointer}header nav ul li .active{font-weight:500;transition:.1s linear;border-bottom:5px solid transparent;color:var(--white);background-color:var(--lighter-grey);border-bottom-color:var(--red)}header nav ul li:hover>a{border-bottom-color:var(--red);color:var(--white);font-weight:500;background-color:var(--lighter-grey)}header nav ul li a{font-size:18px;display:inline-block;padding:10px 17px;margin:0 3px;transition:.1s linear;border-radius:5px;border-bottom:5px solid transparent;color:var(--light-grey);text-decoration:none}header .inputs{display:flex;justify-content:center;align-items:center;padding-right:20px}header .inputs .searchBarContainer{position:relative}header .inputs .searchBarContainer i{position:absolute;left:0}header .inputs .searchBarContainer .searchBox{margin-right:50px}.group{display:flex;line-height:28px;align-items:center;position:relative;max-width:300px}.input{font-size:18px;font-weight:600;width:50%;height:40px;line-height:28px;padding:0 1rem 0 3rem;border:transparent;border-bottom:2px solid var(--red);color:var(--white);transition:.3s ease;background-color:var(--black);letter-spacing:.7px}.input::placeholder{color:var(--white);opacity:.5}.input:hover::placeholder{opacity:1;transition:.3s ease}.group:hover svg,.group>.input:hover,.group>.input:focus{stroke:var(--red);stroke-width:1px}.group:hover svg+.input,.input:focus,input:hover{outline:none;border-bottom-color:var(--red);background-color:var(--black);width:100%}.icon{position:absolute;left:.5rem;fill:var(--red);width:1.7rem;height:1.7rem}header .inputs .buttons #subscribeBtn{font-size:17px;color:var(--white);padding:10px 20px;background-color:var(--red);border:none;border-radius:5px;margin-right:20px;cursor:pointer}header .inputs .buttons #loginBtn{font-size:17px;color:var(--white);padding:8px 20px;background-color:var(--black);border:2px solid var(--red);border-radius:5px;cursor:pointer}header .inputs .buttons #loginBtn:hover{color:var(--white);background-color:var(--red);border:2px solid transparent}#sideNavBar{position:fixed;top:81px;z-index:5;background-color:var(--black);min-width:115px;width:203px;height:100vh}#sideNavBar nav{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:30px 0}#sideNavBar nav h1{font-size:19px;color:var(--white);margin:10px 20px 20px}#sideNavBar nav ul li{list-style-type:none;margin:5px 0;transition:.3s ease}#sideNavBar nav ul li .active{color:var(--white);font-weight:500;transition:.3s ease;background-color:var(--lighter-grey);border-right-color:var(--red)}#sideNavBar nav ul li a{border-right:7px solid transparent;border-radius:0 5px 5px 0;color:var(--light-grey);text-decoration:none;font-size:18px;display:inline-block;width:100%;height:100%;padding:20px 0 20px 20px;transition:.3s ease}#sideNavBar nav ul li:hover>a{color:var(--white);font-weight:500;transition:.3s ease;background-color:var(--lighter-grey);border-right-color:var(--red)}#sideNavBar nav ul li a i{margin-right:10px;transition:.3s ease}#sideNavBar nav ul li:hover a i{color:var(--red);transition:.3s ease}#sideNavBar nav ul li .active i{color:var(--red);transition:.3s ease}#ottContentsContainer{position:absolute;top:81px;right:0;background-color:var(--black);min-height:100vh;height:min-content;width:calc(100vw - 220px);padding-bottom:300px}.sectionCard{margin-top:30px;max-width:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.sectionCard .sectionTitleBox{width:inherit;padding:0 0 15px 15px;display:flex;flex-direction:column;align-items:flex-start}.sectionCard .sectionTitleBox h1{display:inline-block;color:var(--white);margin-bottom:5px;font-size:30px}.sectionCard .sectionTitleBox .underline{height:4px;width:300px;border-radius:5px;background-color:var(--red)}.sectionCard .cardsBox{position:relative;width:inherit;display:flex;align-items:center}.sectionCard .cardsBox ::-webkit-scrollbar-thumb{background:#000}.sectionCard .cardsBox ::-webkit-scrollbar{display:none}.sectionCard .cardsBox .cards{margin:0 0 0 10px;width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.contentCard{position:relative;border:1px solid black;width:250px;height:155px;display:inline;margin:0 10px 10px 0}.contentCard .card{position:inherit;background-color:var(--black);width:250px;border-radius:10px;transition:.2s ease}.contentCard .card:hover{position:absolute;z-index:5;transform:scale(1.2);transition:.2s ease;transition-delay:.2s;box-shadow:0 0 20px var(--black)}.contentCard:nth-child(5n) .card:hover{transform:scale(1.2) translate(-20px)}.contentCard .card .thumbnailBox{width:100%;overflow:hidden}.contentCard .card .thumbnailBox img{width:100%;height:150px;border-radius:10px}.contentCard .card .contentBox{display:none;flex-direction:column;justify-content:center;color:var(--white);padding:5px 10px 15px}.contentCard .card:hover .contentBox{display:flex;transition:.2s ease;transition-delay:.3s}.contentCard .card .contentBox .controlBox,.contentCard .card .contentBox .controlBox .play{display:flex;justify-content:space-between;align-items:center}.contentCard .card .contentBox .controlBox .play .btn{font-size:20px;color:var(--black);background:var(--white);padding:11px 13px;border-radius:50px;display:flex;justify-content:center;align-items:center;transition:.2s ease;cursor:pointer}.contentCard .card .contentBox .controlBox .play .btn:hover{transform:scale(1.1);transition:.2s ease}.contentCard .card .contentBox .controlBox .play .label{margin-left:10px;font-size:17px;font-weight:700}.contentCard .card .contentBox .controlBox .extraBtn{width:33%;display:flex;justify-content:space-between;align-items:center}.contentCard .card .contentBox .controlBox .extraBtn .wishlistBtn,.contentCard .card .contentBox .controlBox .extraBtn .optionsBtn{color:var(--white);background:var(--darker-grey);padding:7px 10px;border-radius:50px;display:flex;justify-content:center;align-items:center;transition:.2s ease;cursor:pointer}.contentCard .card .contentBox .controlBox .extraBtn .optionsBtn{padding:7px 15px}.contentCard .card .contentBox .controlBox .extraBtn .wishlistBtn:hover,.contentCard .card .contentBox .controlBox .extraBtn .optionsBtn:hover{color:var(--black);background:var(--white)}.contentCard .card .contentBox .titleBox{margin-top:20px;font-size:17px;font-weight:700;display:flex;align-items:center;width:100%;height:auto;letter-spacing:.5px}.contentCard .card .contentBox .infoBox{margin:10px 0;display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--light-grey)}.contentCard .card .contentBox .infoBox .durationBox{margin:0 15px}.contentCard .card .contentBox .infoBox .rating{color:var(--white);background-color:var(--darker-grey);padding:2px 3px;border-radius:3px}.contentCard .card .contentBox .descBox{color:var(--light-grey);font-size:12px;font-weight:700;letter-spacing:.5px;width:100%;height:auto}.sliderContent{position:relative;height:500px;padding:0 2px;object-fit:contain;cursor:default}.sliderImg{height:100%;width:100%}.sliderContent .sliderContentCards{position:absolute;bottom:20px;left:5%;display:flex;justify-content:space-evenly;align-items:center;width:90%;height:auto;padding:10px 0;background-color:#000;box-shadow:0 0 10px var(--black);visibility:hidden;transition:.2s ease;backdrop-filter:blur(0px) saturate(180%);-webkit-backdrop-filter:blur(0px) saturate(180%);background-color:#111928bf;border-radius:12px;border:1px solid rgba(255,255,255,.125)}.sliderContent .sliderContentCards .sliderContentCard{display:flex;flex-direction:column}.sliderContent .sliderContentCards .sliderContentCard img{width:250px;height:150px;border-radius:10px;cursor:pointer}.sliderContent .sliderContentCards .sliderContentCard:hover img{transform:scale(1.1);transition:.3s ease}.sliderContent .sliderContentCards .sliderContentCard span{font-size:20px;margin-top:10px;color:var(--white)}.sliderContent:hover .sliderContentCards{visibility:visible;transition:.3s ease;transition-delay:.3s}.prevBtn,.nextBtn{padding:0 20px;height:100%;background-color:var(--black);cursor:pointer;border:none}.prevBtn i,.nextBtn i{font-size:30px;color:var(--white)}.prevBtn:hover i,.nextBtn:hover i{color:var(--light-grey)}#popUp{position:absolute;top:0;left:0;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}#popUp .popUpBg{position:absolute;top:0;left:0;height:100%;width:100%;background-color:var(--black);opacity:.7}#popUp .popUpCard{position:relative;z-index:1;height:350px;width:350px;background-color:var(--black);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;box-shadow:0 0 10px var(--red);transition:.3s ease}.inputBox{position:relative;width:196px}.inputBox input{position:relative;width:100%;padding:20px 10px 10px;background:transparent;outline:none;box-shadow:none;border:none;color:var(--white);font-size:1em;letter-spacing:.05em;transition:.5s;z-index:10}.inputBox span{position:absolute;left:0;padding:20px 10px 10px;font-size:1em;color:var(--white);letter-spacing:00.05em;transition:.5s;pointer-events:none}.inputBox input:valid~span,.inputBox input:focus~span{color:var(--red);transform:translate(-10px) translateY(-34px);font-size:0,75em}.inputBox i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);border-radius:4px;transition:.5s;pointer-events:none;z-index:9}.inputBox input:valid~i,.inputBox input:focus~i{height:44px}footer{margin-top:243px;padding:10px 20px;background-color:var(--black);color:var(--white);font-size:19px;width:100%;align-self:flex-end;display:flex;flex-direction:column;justify-content:center;align-items:center}footer .socials{margin-top:10px;width:100%;display:flex;justify-content:space-evenly;align-items:center}footer .socials a i{color:var(--white)}footer .socials a:hover i{color:var(--red)}