section#head .flexslider .background-media { height: 500px; }
@media screen and (max-height: 773px) { section#head .flexslider .background-media { height: 545px !important; } }
@media screen and (max-height: 736px) { section#head .flexslider .background-media { height: 505px !important; } }
@media screen and (max-height: 667px) { section#head .flexslider .background-media { height: 435px !important; } }
@media screen and (max-height: 640px) { section#head .flexslider .background-media { height: 350px !important; } }
section#head .flexslider .hero .title { margin-top: 30px; }
section#head .flexslider .hero .buttons { margin-top: 54px; }
section#head .flexslider li.video .jumbotron { background-color: transparent; padding-bottom: 0; }
@media screen and (max-width: 437px) { section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order { position: absolute; bottom: .5em; } }
@media screen and (max-width: 437px) and (max-height: 773px) { section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order { bottom: 12em; } }
@media screen and (max-width: 437px) and (max-height: 736px) { section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order { bottom: 9em; } }
@media screen and (max-width: 437px) and (max-height: 667px) { section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order { bottom: 5em; } }
@media screen and (max-width: 437px) and (max-height: 640px) { section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order { bottom: 1em; } }
@media screen and (max-width: 437px) { section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order .btn { margin-bottom: .2em; }
  section#head .flexslider li.video .jumbotron .container .pre-order-container .pre-order .price { padding-bottom: 4em; } }
@media screen and (max-width: 437px) { section#head .flexslider li.video .mejs-mediaelement > video { left: -300px; } }
section#head .flexslider .hero { background-size: cover; background-position: center; height: 500px; color: white; text-align: left; }
section#head .flexslider .hero .title > h1 > img { margin-top: 8px; height: 55px; width: auto; margin-left: 0; }
section#head .flexslider .hero div.full-height { height: 100%; }
section#head .flexslider .hero .or-hero-sub-title, section#head .flexslider .hero .modal-dialog.uc .modal-body .head h1, .modal-dialog.uc .modal-body .head section#head .flexslider .hero h1 { padding-top: 25px; margin-left: 5px; line-height: 1.3; }
section#head .flexslider .hero .or-hero-micro-title { padding-top: 10px; }
section#head .flexslider .hero .v-box { margin-top: -20px; }
@media screen and (max-height: 773px) { section#head .flexslider .hero { height: 545px !important; } }
@media screen and (max-height: 736px) { section#head .flexslider .hero { height: 505px !important; } }
@media screen and (max-height: 667px) { section#head .flexslider .hero { height: 435px !important; } }
@media screen and (max-height: 640px) { section#head .flexslider .hero { height: 350px !important; } }
section#head .media-links { position: absolute; bottom: 0; left: 0; right: 0; }
section#head .media-links .logos { display: flex; justify-content: center; align-items: stretch; }
section#head .media-links .logos .featured-on { display: inline-block; color: white; padding-right: 8px; padding-top: 2px; object-fit: contain; font-family: Lato; font-size: 12px; line-height: 20px; font-weight: bold; font-style: normal; font-stretch: normal; text-align: center; }
section#head .media-links .logos a img { display: inline-block; max-height: 20px; opacity: .9; -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%); padding-left: 8px; padding-right: 8px; }

section#openexplorer .oe-content { height: 809px; padding-top: 6em; }
section#openexplorer .background-media { background-image: url("../images/hero/b-g-explore.jpg"); background-repeat: no-repeat; background-size: contain; }
section#openexplorer h1 { color: #1c4472; font-weight: 400 !important; }
section#openexplorer h2 { font-size: 45px; line-height: 1.13; text-align: center; color: #4a4a4a; font-weight: 300; }
section#openexplorer .btn-learn-more { font-size: 30px; }
section#openexplorer .btn-learn-more.blue { color: white !important; background-color: #1c4472 !important; }
section#openexplorer .btn-learn-more.blue:hover { color: #1c4472 !important; border-color: #1c4472; background: transparent !important; }

section#product { width: 100%; }

section#tridentFeatures div.easyPieChart canvas { height: 100% !important; width: 100% !important; }
section#tridentFeatures .feature-shadow { -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.75); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75); }
section#tridentFeatures .pre-order-content-container { height: 500px; background-image: url("../images/cards/trident/trident-diving-front-low.jpg"); background-size: cover; }
section#tridentFeatures .pre-order-content-container .hero { background-size: cover; background-position: center; height: 500px; color: white; text-align: left; }
section#tridentFeatures .pre-order-content-container .hero .title > h1 > img { margin-top: 8px; height: 55px; width: auto; margin-left: 0; }
section#tridentFeatures .pre-order-content-container .hero div.full-height { height: 100%; }
section#tridentFeatures .pre-order-content-container .hero .or-hero-sub-title, section#tridentFeatures .pre-order-content-container .hero .modal-dialog.uc .modal-body .head h1, .modal-dialog.uc .modal-body .head section#tridentFeatures .pre-order-content-container .hero h1 { padding-top: 25px; margin-left: 5px; line-height: 1.3; }
section#tridentFeatures .pre-order-content-container .hero .or-hero-micro-title { padding-top: 10px; }
section#tridentFeatures .pre-order-content-container .hero .v-box { margin-top: -20px; }
@media screen and (max-height: 773px) { section#tridentFeatures .pre-order-content-container .hero { height: 545px !important; } }
@media screen and (max-height: 736px) { section#tridentFeatures .pre-order-content-container .hero { height: 505px !important; } }
@media screen and (max-height: 667px) { section#tridentFeatures .pre-order-content-container .hero { height: 435px !important; } }
@media screen and (max-height: 640px) { section#tridentFeatures .pre-order-content-container .hero { height: 350px !important; } }
section#tridentFeatures .pre-order-content-container .price h1 { color: black !important; text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.8); }

section#tridentSpecs .icon { background-color: transparent; }
section#tridentSpecs .background-media { background-image: url(../images/hero/trident-in-kelp.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50%; opacity: .8; }
section#tridentSpecs h1, section#tridentSpecs h3, section#tridentSpecs div, section#tridentSpecs p { color: white; }

/* Color palette */
.Hero-Title-Left-LIT-Bold { font-family: 'Lato', sans-serif; font-size: 80px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.01; color: #ffffff; }

.Hero-Title-Dark-Left { font-family: 'Lato', sans-serif; font-size: 70px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: 1.17; color: #3381ab; }

.Section-Title-LIT { font-family: 'Lato', sans-serif; font-size: 40px; font-weight: normal; font-style: normal; font-stretch: normal; text-align: center; color: #ffffff; }

.Content-Title-LIT { font-family: 'Lato', sans-serif; font-size: 40px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.3; text-align: center; color: #ffffff; }

.Section-Title-Left-DRK { font-family: 'Lato', sans-serif; font-size: 40px; font-weight: normal; font-style: normal; font-stretch: normal; color: #1c4472; }

.Section-Title-DRK, .or-section-title-dark { font-family: 'Lato', sans-serif; font-size: 40px; font-weight: normal; font-style: normal; font-stretch: normal; text-align: center; color: #1c4472; }

.Content-Title-LIT-Left, .or-content-title-light-left { font-family: 'Lato', sans-serif; font-size: 35px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.2; color: #ffffff; }

.BTN-Pre-Order-CTA { font-family: 'Lato', sans-serif; font-size: 23px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 0.87; text-align: center; color: #11244f; }

.Content-Sub-title-LIT-Left, .or-hero-sub-title, .modal-dialog.uc .modal-body .head h1 { font-family: 'Lato', sans-serif; font-size: 22px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.09; color: #ffffff; }

.Content-Sub-title-LIT { font-family: 'Lato', sans-serif; font-size: 22px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.55; text-align: center; color: #ffffff; }

.Content-Sub-Title-DRK, .or-content-sub-title-dark { font-family: 'Lato', sans-serif; font-size: 22px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.55; text-align: center; color: #1c4472; }

.Content-Body-Dark, .or-content-body-dark { font-family: 'Lato', sans-serif; font-size: 18px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.56; text-align: center; color: #4a4a4a; }

.Content-Body-LIT { font-family: 'Lato', sans-serif; font-size: 18px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.56; text-align: center; color: #ffffff; }

.Content-Body-LIT-Left { font-family: 'Lato', sans-serif; font-size: 18px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.56; color: #e5e5e5; }

.Content-Body-Dark-Left { font-family: 'Lato', sans-serif; font-size: 18px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.56; color: #4a4a4a; }

.Nav-Link-LIT { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 0.94; text-align: center; color: #ffffff; }

.Nav-Link-Default, .or-nav-link a { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 0.94; color: #1c4472; }

.Micro-Sub-Title-LIT, .or-hero-micro-title, .or-footer-micro-title { font-family: 'Lato', sans-serif; font-size: 15px; font-weight: bold; font-style: normal; font-stretch: normal; color: #ffffff; }

.Micro-Body-LIT, .or-footer-micro-body { font-family: 'Lato', sans-serif; font-size: 15px; font-weight: normal; font-style: normal; font-stretch: normal; color: #ffffff; }

.or-hero-title { color: #ffffff !important; text-align: left; font-size: 80px !important; }

.or-hero-sub-title, .modal-dialog.uc .modal-body .head h1 { text-align: left; color: white !important; }

.or-footer-micro-body > a:hover { text-decoration: underline; }

.or-hero-gradient, .or-hero-blue-tint { background-image: radial-gradient(circle at 47% 42%, rgba(0, 0, 0, 0.26), rgba(78, 173, 215, 0.67)); width: 100%; }

.or-nav-link a { color: #1c4472 !important; }
.or-nav-link a:before { left: 15px !important; right: 15px !important; background-color: #55b2e4 !important; }
.or-nav-link a:hover { color: #55b2e4 !important; }
.or-nav-link a:active { color: #306582; }
.or-nav-link a:active:before { background-color: #306582; }

.or-nav-highlight a:after { transition: all 0.4s; background-color: #4e92df !important; background: radial-gradient(circle at 54% 55%, #55b2e4, #4e92df) !important; }

.or-nav-highlight a:hover:after { background: #55b2e4 !important; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.26); }

.or-section-title-dark { color: #1c4472 !important; line-height: 40px; }
.or-section-title-dark.left { text-align: left; }

.or-content-sub-title-dark { color: #1c4472 !important; }
.or-content-sub-title-dark.left { text-align: left; }
.or-content-sub-title-dark small { font-size: smaller; font: "Lato", sans-serif !important; }

.or-content-title-light-left { color: #ffffff !important; text-align: left; }

.or-content-sub-title-light-left { color: #ffffff !important; text-align: left; }

.or-content-body-dark.left { text-align: left; }

.or-btn-shadow:hover, .or-hero-btn-pre-order:hover, .or-button-blue:hover, .modal-dialog.uc .modal-body .explore-trident:hover { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.26); }

.or-hero-btn-pre-order { border-radius: 6px; background-color: #ffb538; background-image: linear-gradient(259deg, #ffb538, #ffb900 58%, #ffb638); border: solid 1px #ffb33b; padding: 20px 25px; line-height: 1em; }
.or-hero-btn-pre-order:hover { text-decoration: none; background-image: none; background-color: #E8AC04; border-color: #E8AC04; }
.or-hero-btn-pre-order:active { background-color: #E8AC04; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; border-color: #E8AC04; }

.or-button-blue, .modal-dialog.uc .modal-body .explore-trident { border-radius: 4px; background-color: #3381ab; background-image: radial-gradient(circle at 54% 55%, #55b2e4, #4e92df); font-family: Lato; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 2.13; text-align: center; color: #ffffff !important; padding: 3px 16px; }
.or-button-blue:hover, .modal-dialog.uc .modal-body .explore-trident:hover { background-image: none; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.26); }

.or-hero-btn-white-lg { border-radius: 6px; background-image: radial-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #FFFFFF 50%, #B7B7B7 200%); border: solid 1px #fff; padding: 20px 25px; line-height: 1em; background-color: #ebebeb !important; border-color: #ebebeb !important; }
.or-hero-btn-white-lg:hover { background-image: none; text-decoration: none; background-color: #ebebeb !important; border-color: #ebebeb !important; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.26); }
.or-hero-btn-white-lg:active { background-image: none; background-color: #B7B7B7; text-decoration: none; -webkit-box-shadow: none; box-shadow: none; border-color: #B7B7B7; }

.or-botton-line { position: absolute; height: 4px !important; bottom: 0; }

.or-darken-34 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.34; background-color: #000000; z-index: 10; }

.or-hero-blue-tint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.34; background-color: #000000; z-index: 10; }

.Hero-Title-Left-LIT, .or-hero-title { object-fit: contain; font-family: "Lato", sans-serif !important; font-size: 80px; font-weight: 300; font-style: normal; font-stretch: normal; line-height: 1.01; color: #ffffff; }

.BTN-Pre-Order-CTA__, .or-hero-btn-pre-order, .or-hero-btn-white-lg { object-fit: contain; font-family: "Lato", sans-serif !important; font-size: 23px; font-weight: normal; font-style: normal; font-stretch: normal; text-align: center; color: #1c4472 !important; }

.Content-Sub-Title-LIT-Left, .or-content-sub-title-light-left { font-family: Lato; font-size: 20px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.7; text-align: left; color: #ffffff; }

.Yellow-Border, .or-botton-line { background-image: linear-gradient(261deg, #ffb538, #ffb900 58%, #ffb638); border: solid 1px #ffb33b; height: 6px; width: 100%; opacity: .98; z-index: 1001; transition: all 0.4s; }

.usecase-arrow-base, section#usecases .usecase .background .usecase-arrow, .modal-dialog.uc .usecase-arrow { position: absolute; cursor: pointer; right: 0; top: 0; bottom: 0; width: 40px; transition: all 0.4s; }
.usecase-arrow-base.right, section#usecases .usecase .background .right.usecase-arrow, .modal-dialog.uc .right.usecase-arrow { right: 10px; }
.usecase-arrow-base.left, section#usecases .usecase .background .left.usecase-arrow, .modal-dialog.uc .left.usecase-arrow { left: 30px; }

section#usecases .figure-image .figure-caption .figure-icon { position: relative; top: 1.8em; }
section#usecases .usecase .background { height: 215px; background-repeat: no-repeat; background-size: cover; color: white; transition: all 0.4s; }
section#usecases .usecase .background:hover { transform: scale(1.05); }
section#usecases .usecase .background .description { padding-top: 5px; text-align: left; }
section#usecases .usecase .background .usecase-container { position: relative; height: 100%; background-color: rgba(51, 129, 171, 0.2); transition: background-color 0.4s; }
section#usecases .usecase .background .usecase-container:hover { background-color: transparent; }
section#usecases .usecase .background .usecase-container:hover .usecase-arrow { display: inline-block; }
section#usecases .usecase .background .usecase-content { position: absolute; bottom: 0; height: 105px; width: 100%; padding-left: 25px; padding-right: 55px; }
section#usecases .usecase .background .svg-container { height: 100%; }
section#usecases .usecase .background .svg { bottom: 33px; }
section#usecases .usecase .background .usecase-arrow { display: none; }

.modal { text-align: center; z-index: 1110; opacity: 0; transition: opacity 0.3s; }
.modal.in { opacity: 1; }

.modal-open { overflow-y: scroll; }

body { padding-right: 0 !important; }

.modal-backdrop { z-index: 1100; }

.modal-dialog.uc { display: inline-block; text-align: left; vertical-align: middle; width: 800px; height: 608px; }
.modal-dialog.uc .modal-content { border: none; -webkit-box-shadow: none; box-shadow: none; background: none; }
.modal-dialog.uc .modal-body { background-repeat: no-repeat; background-size: cover; width: 800px; height: 608px; text-align: left; }
.modal-dialog.uc .modal-body .v-container { text-align: left; }
.modal-dialog.uc .modal-body .head .icon { width: 70px; height: 70px; font-size: 70px; padding: 0; float: left; margin-right: 30px; }
.modal-dialog.uc .modal-body .head h1 { font-size: 35px !important; line-height: 1.2 !important; font-weight: normal; }
.modal-dialog.uc .usecase-arrow { top: 300px; height: 32px; }
.modal-dialog.uc .usecase-arrow:hover { opacity: 0.8; }
.modal-dialog.uc .usecase-arrow:hover.right { right: 14px; }
.modal-dialog.uc .usecase-arrow:hover.left { left: 34px; }
.modal-dialog.uc .close { color: white !important; padding: 5px 10px; background-color: transparent !important; opacity: 1; font-size: 1.5em; z-index: 1120; position: relative; }
.modal-dialog.uc .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 70px  120px; }
.modal-dialog.uc .content .v-box { margin-left: 20px; color: white; z-index: 1115; }