@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&display=swap"); *, :after, :before { box-sizing: border-box; border: 0 solid #e5e7eb; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: "Montserrat", sans-serif  !important; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: initial; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: "Montserrat", sans-serif  !important; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; border-radius: .3em; } button, select { text-transform: none; } [type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; background-color: initial; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: initial; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } fieldset { margin: 0; } fieldset, legend { padding: 0; } menu, ol, ul { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; color: #9ca3af; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } [role="button"], button { cursor: pointer; } :disabled { cursor: default; } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } * { font-family: "Montserrat", sans-serif  !important; } main { display: flex; flex-direction: column; flex: 1 1 0%; max-width: 1720px; margin-left: auto; margin-right: auto; } .flex-center { display: flex; justify-content: center; } .hero-item { height: 90vh; } .slider-copy-container { position: absolute; z-index: 9999; backface-visibility: hidden; background: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; padding: 15px; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .slide-copy-text { width: 100%; } h1.slider-copy { font-size: 28px; font-weight: bold; line-height: 32px; text-align: left; color: #fff; margin-top: 0; } p.slider-copy { max-width: 250px; font-size: 14px; line-height: 26px; text-align: left; color: #fff; margin-top: 1rem; margin-bottom: 1rem; } .experienceFont { font-size: 14px; } @keyframes top-bottom { 0% { transform: translateY(-110vh); } 100% { transform: translateY(0); } } @keyframes bottom-top { 0% { transform: translateY(110vh); } 100% { transform: translateY(0); } } @keyframes left-right { 0% { transform: translateX(-110vh); } 100% { transform: translateY(0); } } @keyframes right-left { 0% { transform: translateX(110vh); } 100% { transform: translateY(0); } } .translate-top-bottom { display: block; animation: top-bottom 1.5s linear; } .translate-bottom-top { display: block; animation: bottom-top 1.5s linear; } .translate-left-right { display: block; animation: left-right 1.5s linear; } .translate-right-left { display: block; animation: right-left 1.5s linear; } .bg-gradient { position: absolute; background-size: cover; height: 90vh; width: 100%; } .slider-dtu { width: 79vw; height: auto; margin: 0 auto; position: relative; overflow: hidden; } .slide-dtu { height: 100%; } .slide-dtu section { width: 90%; height: 100%; left: 5%; position: absolute; transition: all 1s; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 4px; } .slider-dtu #prev, .slider-dtu #next { height: 50px; width: 50px; position: absolute; top: 50%; margin: -25px 0 0 0; color: #fff; line-height: 50px; text-align: center; cursor: pointer; } .title { top: 80%  !important; font-size: 30px; font-weight: 800; text-align: center; cursor: auto  !important; padding: 0 20px; } .hide-btn { display: none; } #prev { left: 7%; } #next { right: 7%; } #prev svg, #next svg { width: 100%; fill: #fff; } .active-key-text { color: #707372  !important; } .slide-container { height: 100%; display: flex; justify-content: center; align-items: flex-end; border-radius: 4px; } button.hero-btn { color: #fff; font-size: 14px; font-weight: bold; border: 1px solid #fff; border-radius: 0; width: 250px; height: 40px; text-transform: uppercase; font-weight: bold; text-align: center; position: relative; overflow: hidden; z-index: 1; transition: .5s; border-radius: 4px; } button.animated-btn { color: #fff; font-size: 14px; font-weight: bold; border: 1px solid #fff; border-radius: 0; width: 250px; height: 40px; text-transform: uppercase; font-weight: bold; text-align: center; position: relative; overflow: hidden; z-index: 1; transition: .5s; } button.animated-btn span { padding: 0; position: absolute; width: 100%; height: 100%; background-color: #fff; transform: translateY(150%); border-radius: 80%; left: 0; transition: .5s; transition-delay: 0; z-index: -1; } button.animated-btn:hover { color: black; } button.animated-btn:hover span { transform: translateY(0) scale(2); } .slider-key-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; margin-top: 1rem; margin-bottom: 2rem; } .slider-key-text { font-size: 14px; font-weight: bold; } .text-img-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; margin-top: 0rem; margin-bottom: 2rem; text-align: left; } .side-img-container { width: 100%; margin-right: 2rem; } .side-text-container { display: flex; flex-direction: column; width: 100%; } h1.side-text { text-align: left; margin-bottom: 2rem; } p.side-text { text-align: left; max-width: 536px; } button.side-text { margin-top: 1.5rem; } .gradient-btn { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 14px; height: 45px; } .trans-btn { background-color: transparent; color: #fff; width: 100%; font-weight: bold; font-size: 14px; height: 45px; border: 1px solid #fff; } .trans-btn:hover, .gradient-btn:hover { background: transparent; background-color: #fff; color: #000; } .trans-btn:active { background: transparent; background-color: #fff; color: #000; } .trans-btn-bottom { margin-top: 1rem; } .white-btn { background-color: #fff; color: #000; width: 100%; font-weight: bold; font-size: 14px; height: 45px; border: solid 1px black; } .white-btn-2 { max-width: 155px; } .white-btn-3 { max-width: 190px; } .dual-blocks { max-width: 1720px; display: flex; flex-direction: column; width: 100%; } .banner-btn-wrapper { margin-bottom: 2rem; } .banner-btn { background-color: #fff; width: 100%; font-weight: bold; font-size: 14px; height: auto; border: solid 1px#0d5c91; color: #0d5c91; font-size: 16px; background-color: #e6f4fa; padding: .5%; } .banner-btn:hover { background-color: #fff; } .div-block-159 { border-radius: 4px; height: 400px; min-height: 280px; background-image: url("https://uploads-ssl.webflow.com/620bc03b21a61c3c237226d5/628d322b099dc58820d5d91a_left-content.jpg"); background-position: 50% 50%; background-size: cover; background-attachment: scroll; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 75%; margin: 1rem auto; max-width: 844px; } p.banner-text { font-size: 20px; font-weight: semibold; } .div-block-163 { border-radius: 4px; max-width: 844px; height: 400px; min-height: 280px; background-image: url("https://uploads-ssl.webflow.com/620bc03b21a61c3c237226d5/628d322b295477ac1feeb8f1_right-content.jpg"); background-position: 50% 50%; background-size: cover; background-attachment: scroll; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 75%; margin: 1rem auto; } .bottom-banner-container { background-color: #f7f7f7; width: 75%; max-width: 1720px; margin-left: auto; margin-right: auto; border-radius: 4px; margin-top: 2rem; display: flex; justify-content: center; } .bottom-banner { background-color: #f7f7f7; width: 100%; display: flex; margin-left: auto; margin-right: auto; align-items: center; justify-content: center; flex-direction: column; } .bottom-banner-img { margin-top: 2rem; } .shopping-head { font-size: 32px; font-weight: bold; color: #fff; margin: 1rem; } .w-full { width: 100%; } .video-container { width: 100vw; height: 90vh; } h1.side-copy { font-size: 36px; font-weight: bold; color: #000; } p.side-copy { font-size: 16px; color: #000; } .popup iframe { width: 80vw; height: 80vh; margin-left: 10%; margin-top: 5%; } #text { position: absolute; color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); } .section-21 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 136px; margin-top: 10px; margin-bottom: 220px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border: 1px solid #bcbcbc; background-color: #f8f8f8; } .section-21 { margin-bottom: 40px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .section-21 { position: relative; height: 100%; margin-bottom: 20px; } .div-block-223 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 80%; max-width: 900px; margin-right: auto; margin-left: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .mx-auto { margin-left: auto; margin-right: auto; } .lnv-pro-wrapper { margin-top: 1.5rem; margin-bottom: 1.5rem; width: 100%; } .div-block-223 { margin-bottom: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .icon-arrow_back:hover g { opacity: 1; } .icon-arrow_forward:hover g { opacity: 1; } video { border-radius: .4em; } .div-block-224 { width: 29%; } .div-block-224 { width: 100%; margin-top: 30px; margin-right: auto; margin-left: auto; } .image-68 { width: 100%; max-width: 250px; } .div-block-225 { width: 55%; } .div-block-225 { width: 100%; margin-top: 5px; margin-bottom: 5px; } .text-block-54 { margin-right: 30px; margin-left: 30px; color: #000; font-size: 24px; font-weight: 700; } .text-block-54 { max-width: 400px; margin-right: auto; margin-left: auto; padding-top: 12px; padding-bottom: 12px; text-align: center; } .text-center { text-align: center; } .div-block-226 { width: 29%; } .div-block-226 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin-right: auto; margin-bottom: 30px; margin-left: auto; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .button-18 { border: 1px solid #0d5c91; border-radius: .4em; background-color: #e6f4fa; color: #0d5c91; } .button-18:hover { background-color: #fff; } .button-18 { margin-right: auto; margin-left: auto; } .banner-wrapper { display: flex; margin-left: auto; margin-right: auto; align-items: center; justify-content: center; flex-direction: column; } .standard-button { padding: 9px 15px; background-color: #3898ec; color: white; border: 0; line-height: inherit; text-decoration: none; cursor: pointer; } .disabled { pointer-events: none; } .enabled { pointer-events: all; } @media screen and (min-width: 375px) { h1.slider-copy { font-size: 24px; line-height: 26px; margin-bottom: 5%; } p.slider-copy { margin: 0px; font-size: 16px; max-width: 300px; margin-bottom: 16%; } .experienceFont { font-size: 12px; } } @media screen and (min-width: 400px) { .text-img-container { width: 75%; } } @media screen and (min-width: 400px) { h1.slider-copy { font-size: 32px; font-weight: bold; line-height: 32px; text-align: left; color: #fff; margin-top: 0; margin-bottom: 12%; } p.slider-copy { max-width: 250px; font-size: 16px; line-height: 26px; text-align: left; color: #fff; margin-top: 1rem; margin-bottom: 1rem; } .experienceFont { font-size: 14px; } } @media screen and (min-width: 495px) { .slider-copy-container { padding: 15px 65px; } p.slider-copy { max-width: 100%; } } @media screen and (min-width: 640px) { .slide-copy-text { max-width: 300px; } p.slider-copy { max-width: 100%; } .gradient-btn { max-width: 300px; } .trans-btn-bottom { margin-top: 1rem; max-width: 300px; margin-left: 0px; } } @media screen and (min-width: 728px) { .slider-copy-container { padding: 30px; padding-right: 100px; align-items: flex-end; background: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; } .text-img-container { flex-direction: row; flex-wrap: nowrap; } } @media screen and (min-width: 1024px) { .slide-copy-text { max-width: 400px; } .slide-container { align-items: flex-start; } .bottom-banner-container { width: 100%; } .slider-dtu { height: 571px; } .white-btn-1 { max-width: 205px; } .bottom-banner-container { height: 136px; } .bottom-banner { height: 136px; } h1.slider-copy { font-size: 48px; line-height: 48px; margin-top: 3rem; } .dual-blocks { flex-direction: row; flex-wrap: nowrap; } .div-block-159 { width: 50%; margin: 0 1rem; } .div-block-163 { width: 50%; margin: 0 1rem; } .banner-wrapper { flex-direction: row; flex-wrap: nowrap; } .bottom-banner-img { margin-top: 0; width: 25%; } .lnv-pro-wrapper { width: 50%; } .banner-btn-wrapper { margin-bottom: 0; width: 25%; height: auto; } .bottom-banner { flex-direction: row; flex-wrap: nowrap; } } @media screen and (min-width: 1280px) { h1.slider-copy { font-size: 64px; line-height: 64px; margin-top: 0; } p.slider-copy { font-size: 18px; max-width: 552px; } .experienceFont { font-size: 18px; } .slide-container { align-items: center; } } .box { width: 100%; margin: 0 auto; background: rgba(255, 255, 255, .2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center; z-index: 10; } @media screen and (min-width: 1441px) { .hero { width: 70vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .experienceFont { font-family: "Montserrat", sans-serif  !important; font-size: 18px; } .slide-copy-text { max-width: 500px; margin-bottom: 10%; } .play-button { display: inline-block; margin-right: 8px; margin-bottom: 1px; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 15px; height: 45px; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 19%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 40%; text-align: center; margin-bottom: 9%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 16px; margin-bottom: 15%; } .complainceBrand { max-width: 1620px; height: auto; display: flex; } .compliance-windows { position: absolute; display: inline-block; width: 10vw; bottom: 0%; right: 0%; margin-bottom: 2%; margin-left: 0%; margin-right: 15%; } .compliance-amd { position: absolute; display: inline-block; width: 6vw; bottom: 0%; right: 0%; margin-bottom: 2.2%; margin-left: 0%; margin-right: 3%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 19%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 40%; text-align: center; margin-bottom: 2%; } } @media screen and (max-width: 1440px) { .hero { width: 69vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .experienceFont { font-family: "Montserrat", sans-serif  !important; font-size: 18px; } .slide-copy-text { max-width: 500px; margin-bottom: 2%; } .play-button { display: inline-block; margin-right: 8px; margin-bottom: 1px; } .scroller { position: absolute; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 12px; height: 45px; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 24%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 37%; text-align: center; margin-bottom: 5%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 16px; margin-bottom: 13%; } .complainceBrand { max-width: 1620px; height: auto; display: flex; } .compliance-windows { position: absolute; display: inline-block; width: 10vw; bottom: 0%; right: 0%; margin-bottom: 2%; margin-left: 0%; margin-right: 15%; } .compliance-amd { position: absolute; display: inline-block; width: 6vw; bottom: 0%; right: 0%; margin-bottom: 2.2%; margin-left: 0%; margin-right: 3%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 19%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 40%; text-align: center; margin-bottom: 2%; } } @media screen and (max-width: 1000px) and (min-width: 800px) { .hero { width: 69vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .experienceFont { font-family: "Montserrat", sans-serif  !important; font-size: 16px; } .slide-copy-text { max-width: 500px; margin: auto; } .slider-copy-container { position: absolute; z-index: 9999; backface-visibility: hidden; background: linear-gradient( 180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; padding: 15px; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .play-button { display: inline-block; margin-right: 8px; margin-bottom: 1px; } .scroller { position: absolute; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 12px; height: 45px; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 26%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 37%; text-align: center; margin-bottom: 4%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 14px; margin-bottom: 14%; } .complainceBrand { max-width: 1620px; height: auto; display: flex; } .compliance-windows { position: absolute; display: inline-block; width: 10vw; bottom: 0%; right: 0%; margin-bottom: 2%; margin-left: 0%; margin-right: 15%; } .compliance-amd { position: absolute; display: inline-block; width: 6vw; bottom: 0%; right: 0%; margin-bottom: 2.2%; margin-left: 0%; margin-right: 3%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 19%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 40%; text-align: center; margin-bottom: 2%; } } @media screen and (max-width: 799px) { .hero { width: 69vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .slider-copy-container { position: absolute; z-index: 9999; backface-visibility: hidden; background: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; padding: 15px; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .slide-copy-text { max-width: 500px; margin-bottom: 0%; } .play-button { display: inline-block; margin-right: 9px; } .scroller { position: absolute; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 14px; height: 40px; margin-top: 7%; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 41%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 29%; text-align: center; margin-bottom: 4%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 14px; padding-left: 10%; margin-bottom: 13%; padding-right: 10%; } .complainceBrand { width: 86%; max-width: 600px; height: auto; display: flex; bottom: 30%; left: 14%; margin-bottom: 4%; } .compliance-windows { position: absolute; display: inline-block; width: 12vw; bottom: 0%; right: 0%; margin-bottom: 49%; margin-left: 0%; margin-right: 21%; } .compliance-amd { position: absolute; display: inline-block; width: 8vw; bottom: 0%; right: 0%; margin-bottom: 49.2%; margin-left: 0%; margin-right: 5%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 19%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 40%; text-align: center; margin-bottom: 6%; } } @media screen and (max-width: 700px) and (min-width: 600px) { .hero { width: 90vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .experienceFont { font-family: "Montserrat", sans-serif  !important; font-size: 14px; } .slider-copy-container { position: absolute; z-index: 9999; backface-visibility: hidden; background: linear-gradient( 180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; padding: 15px; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .slide-copy-text { max-width: 500px; margin-bottom: 40%; } .popup .close { position: absolute; top: 3%; right: 22%; transition: all 200ms; font-size: 50px; font-weight: bold; text-decoration: none; color: #fff; z-index: 10; } .play-button { display: inline-block; margin-right: 8px; margin-bottom: 1px; } .scroller { position: absolute; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 12px; height: 40px; margin-top: 7%; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 80%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 11%; text-align: center; margin-bottom: 41%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 14px; padding-left: 2%; margin-bottom: 60%; padding-right: 2%; } .complainceBrand { width: 86%; max-width: 600px; height: auto; display: flex; bottom: 30%; left: 14%; margin-bottom: 3%; } .compliance-windows { position: absolute; display: inline-block; width: 27vw; bottom: 0%; right: 0%; margin-bottom: 9%; margin-left: 0%; margin-right: 58%; } .compliance-amd { position: absolute; display: inline-block; width: 15vw; bottom: 0%; right: 0%; margin-bottom: 9.6%; margin-left: 0%; margin-right: 13%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 25%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 36%; text-align: center; margin-bottom: 6%; } } @media screen and (max-width: 599px) { .hero { width: 90vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .experienceFont { font-family: "Montserrat", sans-serif  !important; font-size: 18px; } .slider-copy-container { position: absolute; z-index: 9999; backface-visibility: hidden; background: linear-gradient( 180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; padding: 15px; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .slide-copy-text { max-width: 500px; margin-bottom: 0%; } .popup .close { position: absolute; top: 3%; right: 22%; transition: all 200ms; font-size: 50px; font-weight: bold; text-decoration: none; color: #fff; z-index: 10; } .play-button { display: inline-block; margin-right: 8px; margin-bottom: 1px; } .scroller { position: absolute; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 12px; height: 50px; margin-top: 4%; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 80%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 11%; text-align: center; margin-bottom: 30%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 14px; padding-left: 14%; margin-bottom: 52%; padding-right: 14%; } .complainceBrand { width: 86%; max-width: 600px; height: auto; display: flex; bottom: 30%; left: 14%; margin-bottom: 3%; } .compliance-windows { position: absolute; display: inline-block; width: 27vw; bottom: 0%; right: 0%; margin-bottom: 9%; margin-left: 0%; margin-right: 52%; } .compliance-amd { position: absolute; display: inline-block; width: 15vw; bottom: 0%; right: 0%; margin-bottom: 9.6%; margin-left: 0%; margin-right: 13%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 25%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 36%; text-align: center; margin-bottom: 6%; } } @media screen and (max-width: 375px) { .hero { width: 90vw; height: auto; max-width: 1720px; margin: 3rem auto; margin-top: 1%; } .experienceFont { font-family: "Montserrat", sans-serif  !important; font-size: 18px; } .slider-copy-container { position: absolute; z-index: 9999; backface-visibility: hidden; background: linear-gradient( 180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6), rgba(0, 0, 0, .8) ); opacity: .9; padding: 15px; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .slide-copy-text { max-width: 500px; margin-bottom: 0%; } .popup .close { position: absolute; top: 3%; right: 22%; transition: all 200ms; font-size: 50px; font-weight: bold; text-decoration: none; color: #fff; z-index: 10; } .play-button { display: inline-block; margin-right: 8px; margin-bottom: 1px; } .scroller { position: absolute; } .gradient-btn-brand { background: linear-gradient( to bottom right, rgba(100, 19, 30, 1) 0%, rgba(77, 20, 74, 1) 100% ); color: #fff; width: 100%; font-weight: bold; font-size: 14px; height: 50px; margin-top: 7%; } .brandConent { position: relative; width: auto; height: auto; opacity: 0; } .brandFilm { position: absolute; width: 80%; height: auto; border: none; outline: none; color: #fff; z-index: 0; border-radius: .3em; bottom: 0%; right: 10%; text-align: center; margin-bottom: 24%; } .brandFilmDesc { position: absolute; width: 100%; bottom: 0%; right: 0%; text-align: center; color: white; font-size: 14px; padding-left: 5%; margin-bottom: 46%; padding-right: 5%; } .complainceBrand { width: 86%; max-width: 600px; height: auto; display: flex; bottom: 30%; left: 14%; margin-bottom: 4%; } .compliance-windows { position: absolute; display: inline-block; width: 26vw; bottom: 0%; right: 0%; margin-bottom: 7%; margin-left: 0%; margin-right: 58%; } .compliance-amd { position: absolute; display: inline-block; width: 15vw; bottom: 0%; right: 0%; margin-bottom: 7.2%; margin-left: 0%; margin-right: 10%; } .skipVideo { position: relative; width: auto; height: auto; } .skipButton { position: absolute; width: 25%; height: auto; border: none; outline: none; z-index: 0; border-radius: .3em; bottom: 0%; right: 38%; text-align: center; margin-bottom: 6%; } } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: .9; } } .videoframe { margin: auto; width: 1344px; max-width: 90%; height: 756px; max-height: calc(50vw); } .element_show { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; transition: all .3s; -ms-transition: all .3s; transition-timing-function: cubic-bezier(0, .5, .5, 1); -ms-transform: scale(1, 1) translate(0%, 0%) rotate(0deg); -webkit-transform: scale(1, 1) translate(0%, 0%) rotate(0deg); transform: scale(1, 1) translate(0%, 0%) rotate(0deg); } .element_hide { opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; transition: all .3s; -ms-transition: all .3s; transition-timing-function: cubic-bezier(0.5, 0, .5, .5); -ms-transform: scale(0.92, .92) translate(0%, 0%) rotate(0.01deg); -webkit-transform: scale(0.92, .92) translate(0%, 0%) rotate(0.01deg); transform: scale(0.92, .92) translate(0%, 0%) rotate(0.01deg); }