#phone-duel { height: auto; max-height: 368px; overflow: hidden; position: relative; } #phone-duel:after, #next-gen:after { display: block; clear: both; } #next-gen { height: auto; max-height: 900px; overflow: hidden; position: relative; } #phone-duel p, #next-gen p { color: #fff; } #phone-duel p.title, #next-gen p.title { color: #3e8ddd; margin-bottom: 16px; } #phone-duel .featured__text-box { width: 37%; text-align: left; position: absolute; top: 10%; left: 8%; } #next-gen .featured__text-box { width: 37%; text-align: left; position: absolute; top: 35%; right: 5%; } .featured__text-box .featured-product-logo { height: 50px; width: auto; margin-bottom: 16px; } .featured__text-box .featured__btn.btn { border: 1px solid #fff; background: none; margin-top: 20px; } .featured__text-box .featured__btn.btn:hover { border: 1px solid #3e8ddd; background: #3e8ddd; } @media (min-width: 1600px) { #phone-duel .featured__text-box { top: 10%; } } @media (min-width: 1920px) { #phone-duel .featured__text-box { top: 15%; } #phone-duel, #next-gen { max-height: unset; } } @media (max-width: 1400px) { #phone-duel { max-height: unset; min-height: 255px; } #phone-duel .featured__text-box { top: 0; } } @media (max-width: 1280px) { #phone-duel .featured__text-box { width: calc(50% - 1em); position: absolute; left: 1em; } #next-gen .featured__text-box { width: calc(43% - 1em); position: absolute; top: 25%; right: 1em; } #phone-duel .featured__btn.btn, #next-gen .featured__btn.btn { float: unset; margin-right: 0; margin-bottom: 0; } } .featured__image-wrapper { width: 100%; position: relative; float: left; } .featured__image { min-width: 100%; width: auto; height: auto; min-height: 400px; } .featured__image.mobile { display: none; } @media (max-width: 1279px) { #phone-duel, #next-gen { max-height: unset; } .featured__image { min-height: unset; } .featured__image.non-mobile { display: none; } .featured__image.mobile { display: unset; margin-bottom: 20px; width: 100%; height: auto; } #phone-duel .featured__text-box, #next-gen .featured__text-box { position: relative; top: unset; margin-top: 60vw; margin-bottom: 60px; width: calc(100% - 2em); text-align: center; right: -1em; } #phone-duel .featured__text-box .featured-product-logo { height: 38px; } #phone-duel .featured__btn.btn, #next-gen .featured__btn.btn { font-size: 1em; padding: 1em; height: 2em; } } #video-modal-2 { top: 10% } @media only screen and (max-width:1279px) { #video-modal-2 { top: 26% } } @media only screen and (max-width:1279px) and (orientation:landscape) { #video-modal-2 { top: 5% } } #video-modal-2 .modal-dialog { max-width: 70% } @media only screen and (max-width:1279px) { #video-modal-2 .modal-dialog { max-width: 85%; margin: 0 auto } } @media only screen and (max-width:749px) { #video-modal-2 .modal-dialog { max-width: none; width: 100%; margin: 0 } } #video-modal-2 .modal-dialog .modal-content { background-color: transparent; box-shadow: none } #video-modal-2 .modal-dialog .modal-body { padding: 0 } @media only screen and (max-width:749px) { #video-modal-2 .modal-dialog .modal-body iframe#video-modal-iframe-2 { margin-top: 1em } } #video-modal-2 .modal-dialog .modal-body .close { font-size: 3.5rem; color: #fff; font-weight: 400; margin-bottom: .25em; opacity: 1; position: relative } #video-modal-2 .modal-dialog .modal-body .close:hover { opacity: .75 } @media only screen and (max-width:749px) { #video-modal-2 .modal-dialog .modal-body .close { padding-bottom: 1em; margin-bottom: 0 } } .frame-head { background-color: #fff; border-top-left-radius: 6px; padding: 35px 5px 15px; border-top-right-radius: 6px; } .head-image { margin: 0 50%; transform: translateX(-50%); width: 50%; } .iframe-container { width: 40%; position: relative; background-color: #fff; margin: auto; top: 50%; border: none; padding: 0px 25px 25px; transform: translateY(-50%); border-radius: 6px; } @media only screen and (min-width: 2500px) { .iframe-container { width: 25%  !important; } } @media only screen and (max-width:1350px) and (min-width: 901px) { .iframe-container { width: 60%  !important; } .featured__text-box .featured__btn.btn { margin-top: 0; } } @media only screen and (max-width:900px) and (min-width: 650px) { .iframe-container { width: 75%  !important; padding: 0 10px 10px  !important; } } @media only screen and (max-width: 649px) { .iframe-container { width: 100%  !important; padding: 0 10px  !important; } } .notifyMeForm { position: fixed; height: 100%; width: 100%; left: 0px; top: 0px; z-index: 99999999; } .red-head-banner { width: fit-content; background-color: red; text-align: center; margin: auto; padding: 0px 15px; color: white; margin-top: 15px; } #iFrame_responsive::-webkit-scrollbar { width: 0  !important; }