/* ============================================================================ DISPLAYNET.CSS — Single consolidated stylesheet for displaynet.com ---------------------------------------------------------------------------- PURPOSE Every page loads THIS one file and nothing else (no off-site CSS). It merges what used to be three separate stylesheets, plus targeted fixes: LAYER 1 BASE was files.dvigear.com/Microsites/AUG17_DN/style.css LAYER 2 2020 was server.dvigear.com/2020_updates/2020_style.css LAYER 3 ESSENTIAL was local essential-styles.css (home-page banner, etc.) LAYER 4 ENHANCEMENTS new: bug fixes + small UX improvements (see notes) CASCADE ORDER IS INTENTIONAL. Layers 1-3 are concatenated in the same order the live site loaded them, so existing pages render identically. Layer 4 comes last so its fixes win. FIXES BAKED IN (vs. the old three-file setup): - FOOTER: removed the brittle negative-margin hack in the 2020 layer (#footer-pages margin-top:-300/-460/-600px) that pulled the Pages column up behind the About text on phones. Footer columns now stack cleanly. - SUBMENU: desktop dropdown items are left-aligned (Layer 4). - CONTROL dropdown: persistent blue highlight handled in displaynet.js + Layer 4. FUTURE (design-system redesign) tokens/components live at the very bottom under "LAYER 5: DESIGN SYSTEM". They are namespaced/additive and do not affect legacy pages until those pages adopt the new classes. MAINTENANCE: this file is the single source of truth for site styling. Edit here, not in scattered inline blocks. ============================================================================ */ /* ====================== LAYER 1: BASE (original style.css) ================== */ /* COLORS Darker Blue: #1665A1 Button Blue: #0091FF Blue Text: #1C69A3 Light Gray BG: #F2F2F2 Darker Gray BG: #2C2C2C Text Color: #888; Pink/Red Text: #C74F4E Yellow: #FFC453 /* SETUP */ * {margin:0;padding:0;box-sizing:border-box;vertical-align:top;} body {font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:16px;line-height:24px;height:100%;width:100%;margin:0 auto;padding-top:60px;color:#777777;background: #fff;-webkit-text-size-adjust: 100%;} input,textarea {font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;} h1,h2,h3,h4,h5,h6 {color:#000;} h1 {font-size:30px;line-height: 36px} h2 {font-size:48px;line-height: 60px} h3 {font-size:36px;line-height: 42px} h4 {font-size:30px;line-height: 36px} h5 {font-size:24px;line-height: 30px} h6 {font-size:20px;line-height: 28px} p {font-size:18px;font-style:normal;font-weight:400;line-height:26px;color:#555555;margin-bottom:15px;} a {color:#1665a1;} hr {background:#ccc;height:1px;border:none;margin-top:15px;margin-bottom:15px;} li {font-size:16px;line-height: 22px;margin-bottom:8px;margin-left:20px;} /* NAVIGATION */ header {display:block;position:fixed;top:0;left:0;background: #fff;width:100%;height:60px;z-index:9999;box-shadow: 0px 2px 3px rgba(0,0,0,0.15);} header .container {display:block;max-width:1200px;margin:0 auto;} header img {float:left;margin-top:9px;margin-left:10px;width:220px;} header nav {float:right;} header nav ul {height:60px;vertical-align:middle;list-style:none;float:right;} header nav ul li {display:inline-block;margin-bottom:0px;margin-left:0px;line-height:60px;vertical-align:middle;text-align:center;font-weight:600;font-size:17px;} header nav ul li a {text-decoration:none;color:#666;display:block;width:100%;height:100%;padding: 0px 20px;} header nav ul li a:hover {transition: background-color 0.2s; background:#1665a1;color:#fff;cursor: pointer;} header .icon {display: none;} .nav-hover-class {background:#1665a1;color:#fff;} .active-menu-link { background:#1665a1;color:#fff;} .submenu {position: relative;display: inline-block;} .submenu a {} .submenu-content {display:none;position:absolute;background-color:#1665a1;color:#fff;min-width:250px;box-shadow:0px 4px 8px 0px rgba(0,0,0,0.3);z-index: 1;} .submenu-content a {text-decoration:none;display:block;color:#fff;} .submenu-content a:hover {background-color: #000000;color:#fff;} .submenu:hover .submenu-content {display: block;} #responsivenav {width:100%;} #responsivenav ul {list-style:none;float:none;} #responsivenav ul li {display:block;margin-bottom:0px;margin-left:0px;line-height:30px;vertical-align:middle;text-align:center;font-weight:600;font-size:14px;background: #222;border-top:1px solid #000;} #responsivenav ul li:hover {cursor: pointer;} #responsivenav ul li a {text-decoration:none;color:#ccc;display:block;width:100%;height:100%;padding: 0px 0px;} #responsivenav ul li a:hover {transition: background-color 0.2s; background:#1665a1;color:#fff;cursor: pointer;} #responsivenav ul li a:active {background:#1665a1;color:#fff;} #sdvoe-container {position:absolute;right:0;top:15px;} #sdvoe-container span {color:#888;font-size:17px;display:block;width:210px;padding-left:64px;font-weight:bold;height:25px;line-height:25px;margin-bottom:-10px;} #sdvoe-container img {display:block;width:200px;height:83px;} /* CONTENT */ main {min-height:600px;} section {width: 100%;overflow: hidden;} #container1 { display:block; } #container2,#container3,#container4,#container5,#container6,#container7 {display:none;overflow:hidden;} .subsection {max-width: 1200px;margin: auto;} .half-subsection {max-width:599px;} /* FOOTER */ footer {width:100%;padding:70px 0px;background:#222222;color:#aaa; font-size:14px;} footer h6 {margin-bottom:30px;color:#bbb;} footer img {display:block;width:180px;margin-bottom:30px;} footer a {color:#749fbf;text-decoration:none;} footer nav ul {list-style:none;} footer nav ul li {margin-left:0px;margin-bottom: 2px;} footer nav ul li a {text-decoration:none;display:block;width:100%;} footer a:hover {text-decoration: underline;color:#0091ff;} footer .copyright {display:block;width:95%;margin:0 auto;text-align:center;font-size:11px;line-height: 14px;color: #777;padding: 20px 0px;} /* TRADEMARKS */ .footertxt {font-size: 14px; color: #aaa;} /* CLASSES */ .center-block {display:block;margin:0 auto;} .center-text {text-align:center;} .right-align {text-align: right;} .left-align {text-align: left;} .line-bottom {border-bottom:2px solid #bbb;} .line-right {border-right:1px solid #bbb;} .max-100-pct {max-width: 100%;} .max-95-pct {max-width: 95%;} .hidden-inline {display:none;} .hidden-block {display:none;} .hide {display: none;} .hide-btn {display:none;} .show-btn {display: block;} /* colors and text changes */ .bluetxt {color: #1C69A3;} .lightbluetxt {color:#0091ff;} .brightbluetxt {color:#55b6ff;} .lighttxt {color:#cccccc;} .lightgraytxt {color:#999999;} .graytxt {color:#666666;} .whitetxt {color: #ffffff;} .blacktxt {color:#000;} .redtxt {color:#fa5353;} .browntxt {color:#d4d0cd;} .boldtxt {font-weight:bold;} .italictxt {font-style: italic;} .shadowtxt {text-shadow: 0px 3px 7px rgba(0,0,0,0.5);} .bigshadowtxt {text-shadow: 0px 5px 12px rgba(0,0,0,0.3);} .darkshadowtxt {text-shadow: 0px 2px 5px rgba(0,0,0,0.8);} .bigdarkshadowtxt {text-shadow: 0px 6px 20px rgba(0,0,0,0.9);} .blueshadowtxt {text-shadow: 0px 3px 10px rgba(5,75,193,1.0);} .notetxt {margin-top:20px;font-size: 14px; line-height: 18px; font-style: italic; color:#1665a1;} .notenumbertxt {font-size: 70%; font-weight:bold; color:#1665a1;vertical-align: super;} .smalltxt {font-size:16px;line-height: 20px;} .largetxt {font-size:130%;line-height:140%;} .goright {float:right;} .goleft {float:left;} .clear {clear:both;} .block {display:block;} .iblock {display:inline-block;} .clear {clear:both;} .warning-icon {max-height: 20px;} .check-icon {max-height: 20px;} /* backgrounds */ .dark-bg {background:#222222;color:#ffffff;} .medium-bg {background:#666666;color:#ffffff!important;} .light-bg {background:#f2f2f2;color:#555555;} .white-bg {background:#fff;} .blue-bg {background:#1665A1;} .light-blue-bg {background:#D0DDE6;} /* buttons */ .button {border:none;background:#007BD9;font-size:18px;font-weight:bold;vertical-align:middle;text-align:center;border-radius:5px;transition:all .3s ease;width:200px;line-height:45px;height:45px;} .button a {display:block;width:100%;height:100%;color:#f2f2f2;text-decoration:none;} .button:hover {background:#0091FF;color:#FFFFFF!important;box-shadow:0px 3px 6px rgba(0,0,0,0.2);transition:all 0s;} .button:active {color:#F2F2F2;box-shadow:none;transition:all 0s;} /* structures */ .two-column-even {display:inline-block;max-width:600px;} .two-column-2-even {display:inline-block;width:50%;} .three-column-even {display:inline-block;margin-left:2%;width:31%;} .four-column-even {display:inline-block;margin-left:2%;padding-right:2%;width:22%;} .eight-column-even {display:inline-block;margin-left:2%;padding-right:2%;width:10%;} .two-column-2-left {display:inline-block;margin-left:2%;width:25%;} .two-column-2-right {display:inline-block;margin-left:2%;width:70%;} .two-column-3-left {display:inline-block;margin-left:2%;width:67%;} .two-column-3-left-2 {display:inline-block;margin-left:0;width:70%;} .two-column-3-right {display:inline-block;margin-left:2%;width:28%;} .two-column-3-right-2 {display:inline-block;margin-left:0;width:30%;} .three-column-left {display:inline-block;} .three-column-center {display:inline-block;} .three-column-right {display:inline-block;} .three-column-2-left {display:inline-block;width:24%;} .three-column-2-center {display:inline-block;width:50%;} .three-column-2-right {display:inline-block;width:24%;} /* widths */ .eighty {width:80%;} .fifty {width:50%;} .forty {width:40%;} /* paddings */ .pad-light {padding:1%;} .pad-medium {padding:2%;} .pad-heavy {padding:2%;} .pad-top {padding: 20px 0px 0px 0px;} .pad-bot {padding: 0px 0px 20px 0px;} .pad-top-bot {padding: 30px 0px;} .pad-left {padding: 0px 0px 0px 20px;} .pad-right {padding: 0px 20px 0px 0px;} .pad-left-right {padding: 0px 20px 0px 20px;} /* ANIMATIONS */ .animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} .animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} .animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} .animate-right{position:relative;animation:animateright 1s ease-in-out}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} .animate-bottom{position:relative;animation:animatebottom 1s ease-in-out}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} .animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} .animate-left{position:relative;animation:animateleft 1s ease-in-out}@keyframes animateleft{from{left:20px;opacity:0} to{left:0;opacity:1}} /* FORMS & BUTTONS */ input[type=text], input[type=tel], input[type=email], textarea {width:100%;margin:0px 0px;outline:none;border:2px solid #eee;background:#eee;padding:7px;border-radius:3px;font-size: 16px;transition:all 0.2s;} .input-margin-large {margin:15px 10px 10px 0px !important;} .input-margin-small {margin:15px 0px 0px 0px !important;} input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus {outline:none;background:#ffffff;border:2px solid #0091ff;box-shadow: 0px 2px 8px rgba(0,0,0,0.3);} .contact-label {position:relative;top:12px;} .required {color:#e14949;} input[type=submit], .contact-button {width:100%;max-width:288px;margin:15px auto;outline:none;border:none;background:#007BD9;color:#f2f2f2;font-size:18px;font-weight:bold;line-height:50px;height:50px;vertical-align:middle;text-align:center;border-radius:5px;transition:all .3s ease;-webkit-appearance: none;} input[type=submit]:hover, .contact-button:hover {cursor:pointer;outline:none;background:#0091FF;color:#FFFFFF;box-shadow:0px 3px 6px rgba(0,0,0,0.2);transition:all 0s;} input[type=submit]:active, .contact-button:active {outline:none;color:#F2F2F2;box-shadow:none;transition:all 0s;} input[type=checkbox] {visibility: hidden;} .checkbox-area {height:35px;line-height:35px;vertical-align:middle;margin-top:15px;} .checkbox { width:25px;float:right;position:relative;} .checkbox label {margin-top:5px;cursor:pointer;position: absolute;width:28px;height:28px;top: 0;left: 0;background: #eee;border:2px solid rgba(255,255,255,0.6);border-radius:3px;background:#1665A1;} .checkbox label:after {opacity: 0;content: '';position: absolute;width: 9px;height: 5px;background: transparent;top: 6px;left: 7px;border: 3px solid #fff;border-top: none;border-right: none;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);} .checkbox label:hover::after {opacity: 0.8;} .checkbox input[type=checkbox]:checked + label:after {opacity: 1;} .checkbox input[type=checkbox]:checked + label {background:#0091FF;border-color:#0091FF;} /* PAGE SPECIFIC STYLES */ /******************************************************************************************************************************************************************************************************************************************/ /* HOME PAGE */ #hero {background: #000 url('./images/hero.jpg') no-repeat fixed; background-position-y:50px;background-position-x: center;} #hero-logo {max-width: 100%;width:640px;display:block;margin:0 auto;position:relative;top:30px;margin-bottom: 50px; } #intro-logo {max-width: 350px;display:block;margin:0 auto; } /* awards carousel */ /* Award logo rows ("What the Industry is Saying"). Both the top row (#awards-top, logos 1-10) and the bottom row (#awards-btn-container, 11-20) are centered as a wrapped block. Flexbox centers the buttons reliably regardless of how many fit per line. Spacing comes from each image's own margin (below), so no extra flex gap here — that avoids the loose, over-wide spacing on the bottom row. */ #awards-top, #awards-btn-container {max-width:1200px;margin:0 auto;text-align:center; display:flex;flex-wrap:wrap;justify-content:center;align-items:center;} .awards-btn {outline: none;border:none;background:none;text-align: center;} .awards-btn:hover {cursor: pointer;} .awards-btn img {max-height: 65px; width:auto; height:auto; outline: none;border:none;margin: auto;filter:grayscale(100%) opacity(70%);-webkit-filter:grayscale(100%) opacity(70%);-moz-filter:grayscale(100%) opacity(70%);-ms-filter:grayscale(100%) opacity(70%);margin:10px;transition: all 0.3s;} .awards-btn img:hover {filter:grayscale(0%) opacity(100%);-webkit-filter:grayscale(0%) opacity(100%);-moz-filter:grayscale(0%) opacity(100%);-ms-filter:grayscale(0%) opacity(100%);transition: all 0.3s;} .awards-btn-active img {filter:grayscale(0%) opacity(100%);-webkit-filter:grayscale(0%) opacity(100%);-moz-filter:grayscale(0%) opacity(100%);-ms-filter:grayscale(0%) opacity(100%);transition: all 0.3s;} .awards-slide {margin:0 auto;height:180px;max-width:800px;text-align: center;} .awards-slide p {display:inline-block;max-width:500px; text-align:left; font-size:16px;line-height: 20px;padding: 0px 20px;} .award-quote-source {font-size: 90%;font-style: italic; color:#1665a1;} .awards-slide img {display:inline-block; max-width:200px;max-height: 160px;} #awards-progress {margin: auto;width:700px;position:relative;top:0px;z-index: 500;} #awards-next-btn {position:absolute;right:-80px;top:16px;width:50px;height:50px;line-height:50px;vertical-align:middle;background: rgba(128,128,128,0.5);border:none;outline:none;border-radius: 50px;transition: all 0.3s;} #awards-prev-btn {position:absolute;left:-60px;top:16px;width:50px;height:50px;line-height:50px;vertical-align:middle;background: rgba(128,128,128,0.5);border:none;outline:none;border-radius: 50px;transition: all 0.3s;} #awards-next-btn:hover, #awards-prev-btn:hover {cursor:pointer;background:rgba(0,145,255,1.0);transition: all 0s;} #awards-next-pointer {transform: rotate(45deg);-webkit-transform: rotate(45deg);border-right: 3px solid rgba(0,0,0,0.5);border-top: 3px solid rgba(0,0,0,0.5);width: 20px;height: 20px;position:relative;left:10px;} #awards-prev-pointer {transform: rotate(45deg);-webkit-transform: rotate(45deg);border-left: 3px solid rgba(0,0,0,0.5);border-bottom: 3px solid rgba(0,0,0,0.5);width: 20px;height: 20px;position:relative;left:19px;} /* timeline Carousel --------------------------------------------------------------------------- Compact layout matching the live site. Inside #timeline-progress (a fixed- height positioned box) the pieces stack tightly near the top: title top:0 "AV Evolution" (modest size, ~24px) years top:40px the 2007..2022 labels (~14px) bar+dots top:72px the track with the 5 dots The prev/next arrows are vertically centered on the bar line (same 72px center via translateY(-50%)). */ #timeline-subsection {overflow: hidden;width: 100%;max-width: 100%;} #timeline {width:100%;position:relative;height:550px;overflow: hidden;} #timeline-progress { position:relative; z-index:100; max-width:720px; margin:0 auto; top:34px; padding:0 64px; /* room for the prev/next arrows on the sides */ height:106px; /* tight box; slide content starts below it */ } /* Title: modest size (override the global h2 sizing), centered at the top. */ #timeline-title { position:absolute; top:0; left:0; right:0; margin:0; text-align:center; font-size:24px; line-height:1.1; font-weight:700; color:rgba(150,150,150,1.0); z-index:500; } /* Year labels: their own row, clearly above the track (measured from the live site: years center ~y65 vs track center ~y124 — a full row of separation). */ #timeline-btn-label-1,#timeline-btn-label-2,#timeline-btn-label-3, #timeline-btn-label-4,#timeline-btn-label-5{ position:absolute; top:24px; transform:translateX(-50%); margin:0; color:rgba(140,140,140,1.0); font-size:15px; white-space:nowrap; z-index:120; } #timeline-btn-label-1{left:12%;} #timeline-btn-label-2{left:31%;} #timeline-btn-label-3{left:50%;} #timeline-btn-label-4{left:69%;} #timeline-btn-label-5{left:88%;} /* The track: THICK 24px rounded bar (the dots embed flush inside it). Low-opacity gradient like the live site, so it reads dark on dark slides and light on light slides. Spans from the first dot (12%) to the last (88%). */ #timeline-bar { position:absolute; top:90px; left:12%; width:76%; height:24px; transform:translateY(-50%); background:linear-gradient(to right, #888888, #798995, #0091ff); opacity:0.3; z-index:1; box-shadow:inset 0px 1px 3px rgba(0,0,0,0.9); border-radius:12px; } /* The 5 dots: 24px, embedded flush in the 24px track, with the live site's progressive coloring (dark gray -> increasingly blue, left to right). */ .timeline-btn { position:absolute; top:90px; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:50%; border:none; outline:none; padding:0; cursor:pointer; z-index:110; transition:background .3s, box-shadow .3s; } .timeline-btn:hover {background:rgba(0,145,255,1.0) !important;cursor:pointer;} .timeline-btn-active {background:rgba(0,145,255,1.0)!important; box-shadow:0px 4px 6px rgba(0,0,0,0.2); z-index:130;} #timeline-1-btn{left:12%;background:#666;} #timeline-2-btn{left:31%;background:#666d75;} #timeline-3-btn{left:50%;background:#3e7096;} #timeline-4-btn{left:69%;background:#2c7bb7;} #timeline-5-btn{left:88%;background:#1c86d1;} /* Prev/next arrows: 50px circles positioned BETWEEN the year row and the track (center ~y59 in this box vs track center ~y90 — matching the live layout). */ #timeline-next-btn {position:absolute;right:0px;top:59px;width:50px;height:50px;background: rgba(128,128,128,0.5);border:none;outline:none;border-radius: 50px;transition: all 0.3s;z-index:130;transform:translateY(-50%);} #timeline-prev-btn {position:absolute;left:0px;top:59px;width:50px;height:50px;background: rgba(128,128,128,0.5);border:none;outline:none;border-radius: 50px;transition: all 0.3s;z-index:130;transform:translateY(-50%);} #timeline-next-btn:hover, #timeline-prev-btn:hover {cursor:pointer;background:rgba(0,145,255,1.0);transition: all 0s;} #timeline-next-pointer {transform: rotate(45deg);-webkit-transform: rotate(45deg);border-right: 3px solid rgba(0,0,0,0.5);border-top: 3px solid rgba(0,0,0,0.5);width: 20px;height: 20px;position:relative;left:10px;} #timeline-prev-pointer {transform: rotate(45deg);-webkit-transform: rotate(45deg);border-left: 3px solid rgba(0,0,0,0.5);border-bottom: 3px solid rgba(0,0,0,0.5);width: 20px;height: 20px;position:relative;left:19px;} #timeline ul {list-style:none;margin-right:20px;} /* Slide headings: .fixsize pins the timeline slide titles to the live size (~26px) at every breakpoint. This class is used in the markup but was missing from the merged stylesheet, so headings fell back to the 36px h3 base and overlapped the slide images. */ #timeline h3.fixsize {font-size:26px !important; line-height:32px !important;} #timeline-1-slide {background: #1e1c1b;} #timeline-2-slide {background: #363330;} #timeline-3-slide {background: #ddd;} #timeline-4-slide {background: #fff;} #timeline-1-slide-contents,#timeline-2-slide-contents,#timeline-3-slide-contents,#timeline-4-slide-contents,#timeline-5-slide-contents {position: relative; top:120px;height:calc(100% - 120px);} #timeline-1-slide-img {position: absolute;bottom:0px;right:70px;z-index: -100;} #timeline-2-slide-img {position: absolute;bottom:10px;right:0px;width:920px;z-index: -100;} #timeline-3-slide-img {position: absolute;right:-100px;top:100px;max-width: 800px;z-index: -100;} #timeline-3-slide-N-AV {position: absolute;left:50%;transform:translateX(calc(-50% - 5px));top:-104px;max-width: 500px;z-index: -200;} #timeline-4-slide-img {position: absolute;right:-100px;top:100px;max-width: 800px;z-index: -100;} #timeline-5-slide-img {position: absolute;right:0px;top:110px;max-width: 400px;z-index: -100;} #timeline-4-slide-N-AV {position: absolute;left:50%;transform:translateX(calc(-50% - 5px));top:-104px;max-width: 500px;z-index: -200;} #timeline-5-slide-N-AV {position: absolute;left:50%;transform:translateX(calc(-50% - 5px));top:-104px;max-width: 500px;z-index: -200;} .timeline-slide li {margin-bottom:8px;margin-left:0px;} .timeline-slide {position:absolute;top:0px;background: #fcc;width:100%;height:100%;z-index: 0;transition:opacity 0.5s;} .tab-nav { background: #d6d6d6;} .contacts-btn {position: relative; background: #B3B3B3;color: #ffffff; width:150px; margin: 0px 10px 0px 0px; font-size:16px; font-weight:bold;line-height: 40px; border: none; outline: none;text-align: center;} .contacts-btn:hover {cursor:pointer;background:#888;cursor: pointer;} .contacts-btn-active:hover {background: #0091FF;cursor: pointer;} .contacts-btn-active {background: #0091FF;} .contacts-btn-active:after{position: absolute;top:40px;height: 0px;width: 0px; left:calc(50% - 5px); border: 10px solid transparent; border-top-color: #0091FF; content: "";text-align: center;} /* OVERVIEW */ #overview-intro {background: #000 url("./images/overview_hero.jpg") no-repeat fixed;background-position-y:-50px;background-position-x: 80%;height:400px;vertical-align: middle;} #overview-table {display:table;width:100%;margin:0 auto;border-collapse:collapse;border:0;padding:0;} tbody {width:100%;margin:0 auto;} #overview-table tr {width:100%;margin:0;padding:0;} #overview-table td {width:50%;} #signal-range img {width:110px;} #switching-layers {height:500px;} #switching-layers-left {position: relative; top:110px;z-index: 300;} #switching-layers p {position:relative;top:60px;} #switching-layers img {position: absolute;right:20%;z-index:0;} #overview-copper {text-align: right;} /* APPLICATIONS */ #applications-btn-container {width:100%;text-align: center;} .applications-btn {position: relative; background: #B3B3B3;color: #ffffff; width:15%; min-width:150px; margin: 0% 1%; font-size:16px; font-weight:bold;line-height: 40px; border: none; outline: none;text-align: center;} .applications-btn:hover {cursor:pointer;background:#888;} .applications-btn-active:hover {background: #0091FF;} .applications-btn-active {background: #0091FF;} .applications-btn-active:after{position: absolute;top:40px;height: 0px;width: 0px; left:calc(50% - 5px); border: 10px solid transparent; border-top-color: #0091FF; content: "";text-align: center;} /* CONTROL */ #software-screenshot-container {position: relative;text-align: center;} #software-screenshot-wrapper {position: relative;height:380px;} .software-screenshot-img {position: absolute; box-shadow: 0px 10px 20px rgba(0,0,0,0.1);transition: margin-top 0.2s, box-shadow 0.2s;} .software-screenshot-img:hover {box-shadow: 0px 10px 35px rgba(0,0,0,0.4);margin-top:-3px;} #routing-tab-img {top:0px; left:50px; max-width:800px;} #device-settings-img {top:60px; right:50px; max-width:400px;} /* PRODUCTS */ #product-top {position: relative;} #product-top-details {position: relative;transform: translate(0%,20%);-webkit-transform: translate(0%,20%);} #product-name {padding-bottom:20px;} #product-model {padding-bottom:10px;} #product-divider {background:#ccc;height:0.5px;border:none;margin:0px 0px 30px 0px;} .products-btn {font-size:16px;color:#B3B3B3;width:120px;line-height:40px;margin:3px 6px 3px 0px;background:none;border: 2px solid #B3B3B3;border-radius:5px;outline:none;transition: all 0.2s;} .products-btn:hover {cursor: pointer;color:#fff;background: #b3b3b3;} .products-btn-active {color:#fff;background:#0091FF;border:2px solid #0091FF;} .products-btn-active:hover {background:#0091ff;} .products-slide {height:100px;margin: 20px 0px 0px 0px;} .products-slide ul li {margin-bottom:0px;line-height: 22px;} .image-slide {max-width: 600px; height:350px; background:#f2f2f2;align-content: middle;margin: 20px 0px;vertical-align:top;} .image-align-helper {display: inline-block;height: 100%;vertical-align: middle;} .image-slide img {vertical-align: middle;max-width: 100%;position: relative; top: calc(50% - 50px);} .image-btn {width:104px; height:70px;margin:0px 3px 40px 3px;filter:opacity(0.9);-webkit-filter:opacity(0.9);-moz-filter:opacity(0.9);-ms-filter:opacity(0.9);background:rgba(255,255,255,0.9);outline: none;border:1px solid rgba(255,255,255,0.9); transition: all 0.2s;} .image-btn img {filter:opacity(0.7);-webkit-filter:opacity(0.7);-moz-filter:opacity(0.7);-ms-filter:opacity(0.7); transition: all 0.2s;width:100%;} .image-btn:hover {cursor: pointer;filter:opacity(1.0);-webkit-filter:opacity(1.0);-moz-filter:opacity(1.0);-ms-filter:opacity(1.0);background:rgba(255,255,255,1.0); box-shadow: 0px 5px 10px rgba(0,0,0,0.15);} .image-btn:hover img {filter:opacity(1.0);-webkit-filter:opacity(1.0);-moz-filter:opacity(1.0);-ms-filter:opacity(1.0);} .image-btn-active {width:104px; height:70px;filter:opacity(1.0);background:rgba(255,255,255,1.0);outline: none;border:1px solid #0091FF; box-shadow: 0px 5px 10px rgba(0,0,0,0.15);} .image-btn-active img {filter:opacity(1.0);-webkit-filter:opacity(1.0);-moz-filter:opacity(1.0);-ms-filter:opacity(1.0);} .image-btn-active:hover {filter:opacity(1.0);-webkit-filter:opacity(1.0);-moz-filter:opacity(1.0);-ms-filter:opacity(1.0);background:rgba(255,255,255,1.0); box-shadow: 0px 5px 10px rgba(0,0,0,0.15);} #product-pagepart-nav { background: #e6e6e6;} #product-pagepart-btn-container {width:100%;text-align: center;} .product-pagepart-btn {position: relative; background: #B3B3B3;color: #ffffff; width:12%; min-width:120px; margin: 0px 4px; font-size:16px; font-weight:bold;line-height: 40px; border: none; outline: none;text-align: center;transition:all 0.2s;} .product-pagepart-btn-active {background: #0091FF;transition:all 0s;} .product-pagepart-btn:hover {cursor:pointer;background:#888;} .product-pagepart-btn-active:hover {background: #0091FF;} .product-pagepart-btn-active:after{position: absolute;top:40px;height: 0px;width: 0px; left:calc(50% - 5px); border: 10px solid transparent; border-top-color: #0091FF; content: "";text-align: center;} .product-pagepart-slide {padding-top:40px;} .hidden-product-block {display: none;} .specs-table {border: 0px;margin: 0;padding: 0;border-spacing: 0px;border-collapse: collapse;width:100%;} .specs-head-row {background: #ccc;color:#000;font-weight: bold;} .specs-left-col {width: 20%;min-width: 150px; background: #f2f2f2;color:#444;font-weight: bold;font-size: 14px;} .specs-right-col {width: 80%;font-size:14px;} .specs-table td {border: 1px solid #ccc;padding: 5px 10px;} #resources img {border: 1px solid #ddd;transition:all 0.2s;} #resources img:hover {border: 1px solid #0091FF;box-shadow: 0px 5px 10px rgba(0,0,0,0.15);} /* NEWS */ .content-sub-nav {width:400px;display:block;margin:20px auto;} .content-sub-nav ul {list-style:none;} .content-sub-nav ul li {display:inline-block;margin-right:10px;line-height:40px;width:45px;height:40px;border:2px solid #aaa;border-radius:3px;vertical-align:middle;text-align:center;} .content-sub-nav ul li a {display:block;width:100%;height:100%;text-decoration:none;color:#888;font-weight:bold;} .content-sub-nav ul li:hover {background:#007BD9;border-color:#007BD9;} .content-sub-nav ul li a:hover {color:#fff;} .news-image {max-width: 280px;} /* VIDEOS */ .video-wrapper {max-width:1200px;text-align:center;margin:0 auto;background:#fff;} .video-container { background:#fff; text-align:center; position:relative;padding-bottom:56.25%; padding-top:0px;height:0;overflow:hidden;} .video-container iframe, .video-container object, .video-container embed {position:absolute;top:0;left:0;width:100%;height:100%;} /*************************************************************************** RESPONSIVE ***************************************************************************/ @media only screen and (max-width: 1600px) { /* OVERVIEW */ #switching-layers img {position: absolute;right:20%;margin-top:50px;transform: scale(1.2);-webkit-transform: scale(1.2);} } @media only screen and (max-width: 1200px) { /* SETUP */ h1 {font-size:26px;line-height: 30px} h2 {font-size:44px;line-height: 54px} h3 {font-size:32px;line-height: 36px} h4 {font-size:26px;line-height: 30px} h5 {font-size:22px;line-height: 24px} h6 {font-size:20px;line-height: 24px} /* NAVIGATION */ header nav ul li a {padding: 0px 16px;} .submenu-content {min-width:200px;} /* STRUCTURES */ .two-column-even {display:inline-block;max-width:600px;width: 49%;} /* HOME */ #hero {background-size: 170%;background-position-y:0px;} #timeline-1-slide-img {position: absolute;bottom:0px;right:-40px;} #timeline-2-slide-img {position: absolute;bottom:6px;right:-40px;width:900px;} #timeline-3-slide-img {position: absolute;right:0px;max-width: 700px;} #timeline-4-slide-img {position: absolute;right:0px;max-width: 700px;} #timeline-5-slide-img {position: absolute;right:0px;top:120px;max-width: 420px;} #contacts-1-slide,#contacts-2-slide,#contacts-3-slide {padding-left:30px;} /* OVERVIEW */ .SDVoE {margin: 30px 0px;} #switching-layers {height:430px;} #switching-layers img {position: absolute;right:20%;margin-top:70px;} /* PRODUCTS */ .products-btn {width:100px;} .products-slide-pics {padding-left: 20px;width:50%;} .image-btn {width:80px; height:50px;margin:0px 3px 30px 3px;} /* NEWS */ .news-image {margin-left:-20px;max-width: 260px;max-height: 300px;} } @media only screen and (max-width: 1000px) { /* SETUP */ body {padding-top:50px;} h1 {font-size:24px;line-height: 28px} h2 {font-size:42px;line-height: 50px} h3 {font-size:30px;line-height: 36px} h4 {font-size:24px;line-height: 28px;} p {font-size:17px;line-height:23px;margin-bottom:14px;} li {font-size:15px;line-height: 21px;} .notetxt {font-size: 13px; line-height: 17px;} .smalltxt {font-size:15px;line-height: 19px;} .largetxt {font-size:115%;line-height:150%;} /* NAVIGATION — switch to the mobile (hamburger) menu here, before the full horizontal nav gets too wide and wraps to a second line (~900px). */ header {height:50px;} header img {margin-top:6px;width:200px;} header nav ul li a {display: none;} header .icon { display: block;padding:0px 20px;} .submenu-content {min-width:180px;} /* HOME */ #timeline-1-slide-img {position: absolute;bottom:0px;right:-120px;} #timeline-2-slide-img {position: absolute;bottom:4px;right:-100px;width:850px;} #timeline-3-slide-img {position: absolute;right:-40px;max-width: 650px;} #timeline-4-slide-img {position: absolute;right:-40px;max-width: 650px;} #timeline-5-slide-img {position: absolute;right:0px;top:130px;max-width: 380px;} #contacts-1-slide,#contacts-2-slide,#contacts-3-slide {padding-left:30px;} .two-column-3-left-2 {display:inline-block;margin-left:0;width:50%;} .two-column-3-right-2 {display:inline-block;margin-left:0;width:50%;} .contacts-btn {width:100px; margin: 0px 5px;} #contacts-btn-container {text-align: center;} /* OVERVIEW */ #overview-intro {background-position-x: 50%;} #overview-intro h4 {margin-bottom:30px;margin-top:-30px;} .SDVoE {padding: 0px 0px;} .SDVoE img {padding: 0px 30px;} /* APPLICATIONS */ .applications-slide img {max-width: 80%;} /* PRODUCTS */ #product-name {padding-bottom:10px;} #product-model {padding-bottom:8px;} #product-divider {margin:0px 0px 15px 0px;} .products-btn {width:78px;line-height:40px;margin:3px 3px 3px 0px;font-size:14px;} .products-slide-pics {padding-left: 20px;} #product-top-details {transform: translate(0%,10%);-webkit-transform: translate(0%,10%);} .image-slide {max-width: 600px; height:280px; margin: 10px 0px;} .image-btn {width:65px; height:40px;margin:0px 2px 30px 2px;} /* NEWS */ .news-image {margin-left:-40px;max-width: 240px;max-height: 240px;} } @media only screen and (max-width:900px) { #sdvoe-container {display:inline-block;margin-right:2%;} #sdvoe-container span {color:#888;font-size:15px;display:block;width:180px;padding-left:57px;font-weight:bold;height:25px;line-height:25px;margin-bottom:-10px;} #sdvoe-container img {display:block;width:180px;height:75px;} #intro-logo {display:inline-block;margin-left:2%;} /* HIDING + UNHIDING CONTENT */ .hidden-inline {display:inline;} .hidden-block {display:block;} .hide {display:none;} .hide-block {display: none;} .hide-inline {display: none;} /* HOME */ .awards-slide img {max-width: 150px;} #awards-progress {width:620px;} #timeline-2-slide-img {bottom:-50px;right:0px;width:100%;z-index: -1000;} #timeline-2-slide {background: #2d2a27;} #contacts-1-slide,#contacts-2-slide,#contacts-3-slide {padding-left:30px;} .two-column-3-left-2 {display:inline-block;margin-left:0;width:100%;} .two-column-3-right-2 {display:inline-block;margin-left:0;width:100%;} /* OVERVIEW */ .goright {float:none;} .goleft {float:none;} .half-subsection {max-width: 100%;} #overview-table td {width:100%;} #overview-copper {text-align: left;} #switching-layers {height:400px;} #switching-layers-left {position: relative; top:110px;} #switching-layers p {position:relative;top:0px;} #switching-layers img {position: absolute;right:5%;max-width:350px;} /* CONTROL */ #software-screenshot-wrapper {position: relative;height:310px;} .software-screenshot-img {position: absolute; box-shadow: 0px 10px 20px rgba(0,0,0,0.1);transition: margin-top 0.2s, box-shadow 0.2s;} .software-screenshot-img:hover {box-shadow: 0px 10px 35px rgba(0,0,0,0.4);margin-top:-3px;} #routing-tab-img {top:0px; left:50px; max-width:630px;} #device-settings-img {top:60px; right:60px; max-width:300px;} } @media only screen and (max-width: 800px) { /* HIDING + UNHIDING CONTENT */ .unhide {display: block;} /* SETUP */ h1 {font-size:22px;line-height: 26px} h2 {font-size:38px;line-height: 48px} h3 {font-size:28px;line-height: 34px} h4 {font-size:22px;line-height: 26px} p {font-size:16px;line-height:22px;margin-bottom:12px;} li {font-size:14px;line-height: 20px;} .largetxt {font-size:105%;line-height:140%;} /* NAVIGATION — (mobile menu already active from 1000px) */ /* HOME */ #hero {background-size: 1400px;} #hero-logo {max-width: 100%;width:500px;display:block;margin:0 auto;position:relative;top:30px;margin-bottom: 30px; } #timeline-1-slide-img {position: absolute;bottom:0px;right:-70px;width:750px;} #timeline-3-slide-img {position: absolute;right:-20px;margin-top:60px;max-width: 600px;} #timeline-4-slide-img {position: absolute;right:-20px;margin-top:60px;max-width: 600px;} #timeline-5-slide-img {position: absolute;right:0px;top:150px;max-width: 340px;} #contacts-1-slide,#contacts-2-slide,#contacts-3-slide {padding-left:30px;} /* OVERVIEW */ #overview-matrix, #overview-videowall, #overview-multiviewer, #overview-extender {display:inline-block;margin-left:2%;padding-right:2%;padding-bottom:30px;width:47%;border:none;} /* PRODUCTS */ #product-name {padding-bottom:6px;} #product-model {padding-bottom:4px;} #product-divider {margin:0px 0px 10px 0px;} .products-btn {width:70px;line-height:36px;margin:3px 2px 3px 0px;font-size:13px;} .products-slide-pics {padding-left: 20px;} #product-top-details {transform: translate(0%,15%);-webkit-transform: translate(0%,15%);} .specs-head-row {font-size: 14px;line-height: 20px;} .specs-left-col {font-size: 12px;line-height: 17px;} .specs-right-col {font-size:12px;line-height: 17px;} /* NEWS */ .news-image {margin-left:-40px;max-width: 200px;max-height: 200px;} /* FOOTER */ footer {padding:50px 0px;font-size:11px;} footer h6 {margin-bottom:20px;} footer img {width:120px;margin-bottom:20px;} footer nav ul li {margin-bottom: 0px;} footer .copyright {font-size:9px;} .footertxt {font-size: 11px;} } @media only screen and (max-width: 700px) { /* SETUP */ h1 {font-size:20px;line-height: 24px} h2 {font-size:32px;line-height: 38px} h3 {font-size:24px;line-height: 30px} h4 {font-size:20px;line-height: 24px} p {font-size:14px;line-height:22px;margin-bottom:12px;} li {font-size:13px;line-height: 19px;} /* HOME */ #timeline-subsection {overflow: hidden;width: 100%;max-width: 100%;} #timeline {width:100%;position:relative;height:550px;} /* Mobile: keep the same evenly-distributed percentage layout, just tighten the container padding and shrink the year labels. The percentage rules from the base block still apply; we only override widths/sizes here. */ #timeline-progress {width:auto; max-width:none; margin:0 auto; top:30px; padding:0 56px;} #timeline-btn-label-1,#timeline-btn-label-2,#timeline-btn-label-3, #timeline-btn-label-4,#timeline-btn-label-5{font-size:12px;} #timeline-next-btn {right:2px;} #timeline-prev-btn {left:2px;} #timeline-title {top:auto;} .timeline-slide li {margin-bottom:3px;} #timeline-1-slide-img {position: absolute;bottom:0px;right:-250px;width:800px;} #timeline-3-slide-img {position: absolute;right:30px;margin-top:-210px;max-width: 500px;} #timeline-4-slide-img {position: absolute;right:30px;margin-top:-210px;max-width: 500px;} #timeline-5-slide-img {display:none;} #timeline-3-slide-contents {margin-top:130px;left:50px;} #timeline-4-slide-contents {margin-top:130px;left:50px;} #timeline-3-slide-N-AV {position: absolute;left:50%;transform:translateX(-50%);top:-250px;max-width: 500px;z-index: -200;} #timeline-4-slide-N-AV {position: absolute;left:50%;transform:translateX(-50%);top:-250px;max-width: 500px;z-index: -200;} #timeline-5-slide-N-AV {position: absolute;left:50%;transform:translateX(-50%);top:-250px;max-width: 500px;z-index: -200;} .awards-slide p {width: 80%;} #awards-next-btn {position:absolute;right:5px;top:16px;} #awards-prev-btn {position:absolute;left:5px;top:16px;} #awards-progress {width:100%;} .awards-slide img {display: none;} /* APPLICATIONS */ #applications-btn-container {width:100%;text-align: center;} .applications-btn {position: relative; background: #B3B3B3;color: #ffffff; width:10%; min-width:90px; margin: 0px 0px; font-size:13px; font-weight:bold;line-height: 40px; border: none; outline: none;text-align: center;} .applications-btn:hover {cursor:pointer;background:#888;} .applications-btn-active:hover {background: #0091FF;} .applications-btn-active {background: #0091FF;} .applications-btn-active:after{position: absolute;top:40px;height: 0px;width: 0px; left:calc(50% - 5px); border: 10px solid transparent; border-top-color: #0091FF; content: "";text-align: center;} /* PRODUCTS */ .product-pagepart-btn {width:10%; min-width:90px; margin: 0px 2px; font-size:13px;} .hidden-product-block {display:block;} .hide-product-block {display: none;} #product-top {text-align: center;} #product-top ul {list-style: inside;margin-left:-30px;} #product-top-details-hidden {position: relative;padding:20px 20px 0px 20px;max-width:100%;} #product-top-details {max-width:100%;width: 100%;} .image-btn {margin-bottom:5px;} .products-slide {width:100%;margin: 0px;max-width:100%;} .products-slide-pics {padding-left: 20px;padding-right:20px;width:100%;} .image-slide {max-width: 100%; height:180px;margin: 0px 0px 20px 0px;} .image-slide img {top: calc(50% - 70px);} #product-pagepart {text-align: left;} #product-pagepart ul {list-style: outside;margin-left:0px;line-height: 29px;} } @media only screen and (max-width: 640px) { #sdvoe-container {position:relative;display:block;margin-top:15px;width:140px;margin:0 auto;} #intro-logo {display:block;margin:0 auto;margin:0 auto;} #sdvoe-container span {color:#888;font-size:14px;display:block;width:140px;padding-left:45px;font-weight:bold;height:22px;line-height:22px;margin-bottom:-10px;} #sdvoe-container img {display:block;width:140px;height:58px;} /* STRUCTURES */ .two-column-even {max-width:100%;} .two-column-2-even {width:100%;} .three-column-even {width:100%;} .four-column-even {width:100%;} .eight-column-even {width:100%;} .two-column-2-left {width:100%;} .two-column-2-right {width:100%;} .two-column-3-left {width:100%;} .two-column-3-left-2 {width:100%;} .two-column-3-right {width:100%;} .two-column-3-right-2 {width:100%;} .three-column-2-left {width:100%;} .three-column-2-center {width:100%;} .three-column-2-right {width:100%;} /* HOME */ #timeline-1-slide-img {position: absolute;bottom:30px;right:-270px;width:800px;} #timeline-2-slide-img {position: absolute;bottom:30px;right:-40px;width:700px;max-width: 800px;z-index: -1000;} #timeline-1-slide-contents {margin-top:30px;left:50px;} #timeline-2-slide-contents {margin-top:30px;left:50px;} /* OVERVIEW */ #overview-matrix, #overview-videowall, #overview-multiviewer, #overview-extender {display:inline-block;margin-left:2%;padding-right:2%;margin-bottom:30px;padding-bottom:30px;width:100%;border-bottom:1px solid #bbb;} #switching-layers {height:400px;} #switching-layers-left {position: relative; top:70px;} #switching-layers p {position:relative;top:0px;} #switching-layers img {position: absolute;right:15%;max-width:350px;} /* NEWS */ .news-image-container {text-align: center;} /* PRODUCTS */ .image-slide {max-width: 100%; height:150px;margin: 10px 0px 10px 0px;} /* FOOTER */ footer {font-size:11px;line-height: 18px;} footer h6 {margin-bottom:20px;} footer img {width:100px;margin-bottom:20px;} footer nav ul li {margin-bottom: 0px;} #footer-contact {width: 30%;} #footer-about {width: 45%;} #footer-pages {width: 20%;} .footertxt {font-size: 11px;line-height: 18px;} } @media only screen and (max-width: 500px) { /* OVERVIEW */ #switching-layers {height:300px;} #switching-layers-left {width: 100%;} #switching-layers-right {display:none;} /* PRODUCTS */ .image-slide {max-width: 100%; height:120px;margin: 20px 0px 0px 0px;} } /* ====================== LAYER 2: 2020 UPDATES (footer hack removed) ========= */ .three-block {width:31.77%;margin-left:.5%;display:inline-block;} .fixed-sup-container {display:inline-block;position:relative;margin:0;padding:0;} .fixed-sup-header {display:inline-block;margin-top:-9px;margin-left:2px;} .fixed-sup-nav {display:inline-block;margin-top:-5px;margin-left:2px;} #awards-btn-container {margin-top:-20px!important;margin-bottom:20px!important} .applications-btn { min-width:87px!important;} @media (max-width:700px) { .awards-slide {height:auto!important;} #awards-btn-container {margin-top:0!important;margin-bottom:20px!important} } @media (max-width:600px) { .three-block {width:90%;display:block;margin:0 auto;} #footer-contact {width:39%;display:inline-block;} #footer-about {width:59%;display:inline-block;} #footer-pages {width:100%;display:block;margin-top:0;} #overview-intro {height:auto;padding-bottom:50px;background-position-y: 0!important;} } @media (max-width:500px) { #footer-pages {width:100%;display:block;margin-top:0;} .awards-slide p {padding-left:30px!important;padding-right:30px!important;font-size:15px!important;} #overview-intro > div > div.two-column-2-right {font-size:15px!important;} } @media (max-width:400px) { #footer-pages {width:100%;display:block;margin-top:0;} } /* ====================== LAYER 3: ESSENTIAL (home banner + overrides) ======== */ .image-btn{overflow:hidden} .displaynet-text-fix{display:inline-block;position:relative;vertical-align:baseline} .long-style{margin-top:0!important} #animatedBanner{background:#000;width:100%;margin:0;padding:0;z-index:-2} #animatedBannerContainer{height:490px;position:relative;width:auto;overflow:hidden;margin:0 auto;position:relative;max-width:1800px} #background-video{display:block;width:100%;max-width:1800px;margin:0 auto;height:auto;position:absolute;z-index:1;animation:fadeInBasic ease 4s;animation-iteration-count:1;animation-fill-mode:forwards;margin-top:-1px;bottom:0} #animatedBanner .left-fade{position:relative;display:inline-block;float:left;width:30%;height:490px;background-image:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,.2),#000);z-index:2} #animatedBanner .right-fade{position:relative;display:inline-block;float:right;width:30%;height:490px;background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.2),#000);z-index:2} #slideOneContent{position:absolute;z-index:999;top:0;width:50%;left:25%} #slideOneContent img{display:block;margin:30px auto;margin-top:20px;animation:growInBasic .5s ease;animation-iteration-count:1;animation-fill-mode:forwards;} #slideOneContent h1{font-size:40px!important;;line-height:40px!important;color:#fff;text-shadow:0 6px 20px rgb(0 0 0 / 90%);text-align:center;animation:growInBasic 3s ease;animation-iteration-count:1;animation-fill-mode:forwards;opacity:0;animation-delay:0;font-family: 'Nunito Sans', sans-serif;} #displayNetN{position:absolute;top:-180px;left:calc(50% - 430px);height:864px;width:795px;z-index:1;opacity:0;animation:growInBasic 24s ease;animation-iteration-count:1;animation-fill-mode:forwards;animation-delay:1s;} .displaySlide {display:block;opacity:1;opacity:1!important;} .hideSlide {display:none;opacity:0;z-index:0!important;} .slidein {animation:slidein 1s ease;} .required {color:#FFD79A!important;} #slideInfo1_b {margin-top:-200px;padding-left:48%;min-width:145%!important;z-index:3;} #slideInfo2_b {margin-top:-200px;padding-left:48%;min-width:145%!important;z-index:3;} #slideInfo1_a {position:relative;z-index:4!important;} #slideInfo2_a {position:relative;z-index:4!important;} @keyframes growInBasic{ from{transform:scale(0)} to{transform:scale(1);opacity:1} } @keyframes fadeInBasic{ 0%{opacity:0} 100%{opacity:1} } @keyframes fadeOutBasic{ 0%{opacity:1} 100%{opacity:0} } @keyframes glow{ from{text-shadow:0 0 10px #369cb8} to{text-shadow:0 0 15px #4d9ee6,0 0 5px #5bb9d8;opacity:1} } @keyframes typing{ from{width:0} to{width:100%;opacity:1} } @keyframes blink-caret{ from,to{border-color:transparent} 50%{border-color:#fff} } @keyframes zoom-in-zoom-out{ 0%{transform:scale(0,0)} 50%{transform:scale(1.3,1.3)} 100%{transform:scale(1,1);opacity:1} } @keyframes zoom-in-two{ 0%{transform:scale(0,0)} 100%{transform:scale(1,1);opacity:1} } @keyframes zoom-out-zoom-in{ 0%{transform:scale(1.3,1.3)} 50%{transform:scale(.5,.5)} 100%{transform:scale(1,1);opacity:1} } @keyframes slidein{ from{margin-left:100%;width:100%} to{margin-left:0;width:100%;opacity:1} } @keyframes elevateRight { from { transform: translateY(100%) rotate(20deg); transform-origin: left; } 40% { transform: rotate(-20deg); transform-origin: left; } 65% { transform: rotate(0deg); transform-origin: left; } } .two-column-2-left {width:30%!important;} .two-column-2-left .headingtxt {line-height:45px;vertical-align:middle;font-size:27px;letter-spacing:0;font-weight:bold;} .two-column-2-right {width:65%!important;position:relative;} .two-column-2-right p {padding-top:18px;} #slideInfo2 {position:absolute;top:0;left:0;} #slideTwoContent {position:absolute;top:100px;width:100%;} #slideThreeContent {position:absolute;top:100px;opacity:0;z-index:2;} #subslidecontainer {height:300px;} @media (max-width:1230px) { #slideOneContent {width:70%;left:15%;} } @media (max-width:1110px) { #slideInfo1_a {display:block;width:100%!important;text-align:center;} #slideInfo1_b {display:block;width:70%!important;} #slideInfo1_b {margin-top:0;padding-left:0;min-width:0!important;margin-left:15%;} #slideInfo2_b {margin-top:0;padding-left:0;min-width:0!important;margin-left:15%;} #slideInfo2_a {display:block;width:100%!important;text-align:center;} #slideInfo2_b {display:block;width:70%!important;} #secondSectionContainer {height:500px;} .two-column-2-right {width:100%!important;padding-top:0!important;} #displayNetN{top:-140px;left:calc(50% - 360px);height:740px;width:725px;} .slidein {animation:zoom-in-two 1s ease;} } @media (max-width:882px) { #background-video {height:100%;width:auto;} #slideOneContent img{width:100%;height:auto;} } @media (max-width:742px) { #slideOneContent {width:90%;left:5%;} #displayNetN{top:-100px;left:calc(50% - 315px);height:673px;width:620px;} .left-fade {display:none!important;} .right-fade {display:none!important;} } @media (max-width:640px) { #slideInfo1_b {width:90%!important;margin-left:5%;} #slideInfo2_b {width:90%!important;margin-left:5%;} /*#secondSectionContainer {height:550px;}*/ #slideTwoContent {position:absolute;top:110px;} #slideThreeContent {position:absolute;top:110px;} #displayNetN{top:-10px;left:calc(50% - 240px);height:554px;width:510px;} #intro-logo {display:none!important;} #subslidecontainer > div.pad-top-bot.center-block {padding:10px 0;} #sdvoe-container > a > img {width:160px;height:auto;} } @media (max-width:540px) { #slideOneContent h1 {font-size:30px!important;line-height:30px!important;} } /* ====================== LAYER 4: ENHANCEMENTS (fixes + UX) ================== */ /* Mobile nav rows: taller tap targets (was set inline in the header before consolidation; base layer uses 30px, this restores the live 40px). */ #responsivenav ul li{line-height:40px;} /* Desktop submenu (dropdown) items left-aligned. The base layer centers nav text via "header nav ul li {text-align:center}"; this overrides it for dropdowns. */ #topnav .submenu-content{text-align:left;} #topnav .submenu-content a{text-align:left;padding-left:18px;padding-right:18px;} /* Control dropdown: keep the parent highlighted while its menu is open, matching Products/News. Works with submenuOnControl/OffControl in displaynet.js. */ #navigation li.submenu:hover > #control-title, #navigation li.submenu > #control-title.nav-hover-class{background:#1665a1;color:#fff;} /* Footer safeguard: never let a long Pages link overflow its column; clean stack on mobile regardless of stylesheet timing. (Root cause already removed in L2.) */ @media only screen and (max-width:640px){ #footer-container > #footer-contact, #footer-container > #footer-about, #footer-container > #footer-pages{ width:100% !important; display:block !important; float:none !important; margin-left:0 !important; } #footer-container > #footer-about, #footer-container > #footer-pages{margin-top:24px;} } #footer-pages nav ul li a{white-space:normal;overflow-wrap:break-word;word-wrap:break-word;} /* ====================== LAYER 5: DESIGN SYSTEM (redesign) =================== New token system + components used by redesigned pages. Additive: legacy pages are unaffected until they adopt these classes. Page redesigns build from here. ========================================================================== */ /* ============================================================================ 1. TOKENS ============================================================================ */ :root{ /* Brand palette (exact values carried over from the original site) */ --brand-blue:#1665A1; /* primary brand / nav / interactive surfaces */ --brand-blue-700:#125285; /* darker brand for hovers/depth */ --heading-blue:#1C69A3; /* section/heading accent blue (.bluetxt) */ --button-blue:#0091FF; /* bright CTA blue */ --button-blue-600:#007BD9;/* CTA resting state */ --accent-yellow:#FFC453; --accent-red:#C74F4E; /* Neutrals */ --ink:#101418; /* near-black headings/text on light */ --body:#4a5560; /* body copy (slightly cooler/darker than old #555)*/ --muted:#7a8896; /* secondary text */ --line:#e4e9ee; /* hairlines / borders */ --bg:#ffffff; /* page background */ --bg-soft:#f5f7f9; /* soft section background (replaces #f2f2f2) */ --bg-dark:#161b20; /* dark sections / footer (refined from #222) */ --bg-dark-2:#1f262d; /* dark elevated surface */ --on-dark:#c9d3dc; /* body text on dark */ --on-dark-soft:#8a97a4; /* muted text on dark */ /* Typography */ --font-display:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body:Arial, 'Helvetica Neue', Helvetica, sans-serif; --fs-1:clamp(2.2rem, 4.2vw, 3.4rem); /* hero h1 */ --fs-2:clamp(1.7rem, 3vw, 2.4rem); /* section h2 */ --fs-3:clamp(1.35rem, 2vw, 1.7rem); /* h3 */ --fs-4:1.2rem; /* h4 */ --fs-body:1.0625rem; /* 17px base body */ --fs-small:0.9375rem; /* 15px */ --lh-tight:1.15; --lh-snug:1.35; --lh-body:1.6; /* Spacing scale (consistent vertical rhythm) */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; /* Structure */ --maxw:1200px; /* content max width (matches original) */ --maxw-narrow:780px; /* readable prose width */ --radius:10px; --radius-sm:6px; --radius-lg:18px; /* Elevation */ --shadow-sm:0 1px 2px rgba(16,20,24,.06), 0 1px 3px rgba(16,20,24,.08); --shadow:0 6px 18px rgba(16,20,24,.10); --shadow-lg:0 18px 48px rgba(16,20,24,.18); /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --dur:.28s; /* Fixed header height (pages offset their top padding by this) */ --header-h:64px; } /* ============================================================================ 2. RESET / BASE (SCOPED — applies only to redesigned pages) ---------------------------------------------------------------------------- IMPORTANT: these base styles are scoped under ".dn" so they DO NOT override the legacy pages (Layers 1-3). A page opts into the new design system by adding class="dn" to its
/ wrapper. This is what keeps the rest of the site looking exactly as it does today while we migrate page by page. Global, non-breaking helpers (focus ring, .reg superscript) are left un-scoped because they don't alter legacy layout. ============================================================================ */ .dn{ color:var(--body); font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .dn h1,.dn h2,.dn h3,.dn h4,.dn h5,.dn h6{ font-family:var(--font-display); color:var(--ink); line-height:var(--lh-tight); font-weight:800; margin:0 0 var(--space-4); letter-spacing:-0.01em; } .dn h1{font-size:var(--fs-1);} .dn h2{font-size:var(--fs-2);} .dn h3{font-size:var(--fs-3);} .dn h4{font-size:var(--fs-4);} .dn h5{font-size:1.05rem;} .dn h6{font-size:.95rem;} .dn p{margin:0 0 var(--space-4); color:var(--body);} .dn a{color:var(--brand-blue); text-decoration:none; transition:color var(--dur) var(--ease);} .dn a:hover{color:var(--button-blue);} .dn img{max-width:100%; height:auto;} .dn hr{border:none; height:1px; background:var(--line); margin:var(--space-6) 0;} .dn ul,.dn ol{margin:0 0 var(--space-4); padding-left:1.2em;} .dn li{margin-bottom:var(--space-2);} .dn strong{color:var(--ink);} /* Global, non-breaking helpers (safe outside .dn) */ :focus-visible{outline:3px solid var(--button-blue); outline-offset:2px; border-radius:3px;} .reg{font-size:.55em; vertical-align:super; line-height:0; font-weight:inherit;} /* ============================================================================ 3. LAYOUT (SCOPED under .dn — see note in section 2) ============================================================================ */ .dn .container{max-width:var(--maxw); margin:0 auto; padding-left:clamp(1rem,4vw,2rem); padding-right:clamp(1rem,4vw,2rem);} .dn .section{padding-block:var(--space-9);} .dn .section--tight{padding-block:var(--space-7);} .dn .section--soft{background:var(--bg-soft);} .dn .section--dark{background:var(--bg-dark); color:var(--on-dark);} .dn .section--dark h1,.dn .section--dark h2,.dn .section--dark h3,.dn .section--dark h4{color:#fff;} .dn .prose{max-width:var(--maxw-narrow);} .dn .grid{display:grid; gap:var(--space-6);} .dn .grid-2{grid-template-columns:repeat(2,1fr);} .dn .grid-3{grid-template-columns:repeat(3,1fr);} .dn .grid-4{grid-template-columns:repeat(4,1fr);} /* Section kicker + heading pattern (eyebrow label above an h2) */ .dn .section-head{margin-bottom:var(--space-7);} .dn .section-head .kicker{ font-family:var(--font-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:var(--muted); margin:0 0 var(--space-2); } .dn .section-head h2{color:var(--heading-blue); margin:0;} .dn .section-head.center{text-align:center;} .dn .section-head.center .kicker{color:var(--brand-blue);} /* ============================================================================ 4. COMPONENTS (SCOPED under .dn) ============================================================================ */ /* ---- Buttons ---- */ .dn .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1; padding:.85em 1.5em; border-radius:var(--radius-sm); border:2px solid transparent; cursor:pointer; transition:all var(--dur) var(--ease); text-align:center; } .dn .btn--primary{background:var(--button-blue-600); color:#fff;} .dn .btn--primary:hover{background:var(--button-blue); color:#fff; box-shadow:var(--shadow); transform:translateY(-1px);} .dn .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);} .dn .btn--ghost:hover{background:#fff; color:var(--brand-blue); border-color:#fff;} .dn .btn--outline{background:transparent; color:var(--brand-blue); border-color:var(--brand-blue);} .dn .btn--outline:hover{background:var(--brand-blue); color:#fff;} /* ---- Cards ---- */ .dn .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-6); box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .dn .card:hover{transform:translateY(-3px); box-shadow:var(--shadow);} .dn .card h3,.dn .card h4{color:var(--heading-blue);} /* ---- Hero (dark gradient lead block) ---- */ .dn .hero{ background:linear-gradient(135deg,#0b2742 0%,#123e63 45%,var(--brand-blue) 100%); color:#fff; padding-block:var(--space-9); } .dn .hero h1{color:#fff; text-shadow:0 6px 20px rgba(0,0,0,.35); margin-bottom:var(--space-3);} .dn .hero .tagline{font-family:var(--font-display); font-weight:700; font-size:var(--fs-3); color:#9fd0f3; margin-bottom:var(--space-4);} .dn .hero p{color:#e8f1f8;} /* ---- Tables (spec sheets) ---- */ .dn .table{width:100%; border-collapse:collapse; font-size:var(--fs-small);} .dn .table th,.dn .table td{border:1px solid var(--line); padding:.6rem .9rem; text-align:left; vertical-align:top;} .dn .table thead th{background:var(--brand-blue); color:#fff; font-family:var(--font-display);} .dn .table tbody tr:nth-child(even){background:var(--bg-soft);} /* ---- Forms ---- */ .dn .field{margin-bottom:var(--space-4);} .dn .field label{display:block; font-weight:700; color:var(--ink); margin-bottom:var(--space-2);} .dn .input,.dn textarea.input{ width:100%; padding:.7rem .8rem; border:2px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft); font:inherit; transition:all var(--dur) var(--ease); } .dn .input:focus,.dn textarea.input:focus{outline:none; background:#fff; border-color:var(--button-blue); box-shadow:var(--shadow-sm);} /* ---- Badge ---- */ .dn .badge{display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-blue); background:rgba(22,101,161,.10); border-radius:999px; padding:.35em .8em;} /* NOTE: NAV + FOOTER redesign components, PAGE SECTIONS, and a consolidated RESPONSIVE block are added as pages migrate onto the .dn system. The tokens above (section 1) are global so any page can reference them, but all visual component rules are .dn-scoped so legacy pages are never affected. */ /* ====================== LAYER 6: PRODUCT-PAGE DEVICE FIXES ================= Folded in from the old ios-styles.css / non-ios-styles.css, which the product pages used to load at runtime via an injected . Now namespaced under body.is-ios / body.is-not-ios. displaynet.js sets the right class on based on iOS detection, so these apply exactly as before — but from the single stylesheet (the two extra CSS files are gone). These are legacy per-image margin nudges on the product pages; they will likely be retired when the product pages are redesigned. ========================================================================== */ /* --- iOS device rules (was ios-styles.css) --- */ body.is-ios #imgquickfix5 { margin-top:-40px; } body.is-ios #imgquickfix6 { margin-top:-40px; } body.is-ios #imgquickfix7 { margin-top:-40px; } body.is-ios #product-name {position:relative;z-index:9998;} body.is-ios .upsomedn200 { } @media (max-width:700px) { body.is-ios #dn200_1 {} body.is-ios #dn200_2 {} body.is-ios #dn200_3 {} body.is-ios #dn200_4 {margin-top:-80px;} body.is-ios #dn200_5 {margin-top:-80px;} body.is-ios #dn200_6 {margin-top:-80px;} body.is-ios #dn200_7 {margin-top:-80px;} body.is-ios #dn200_8 {} body.is-ios #dn200_9 {} } /* --- non-iOS device rules (was non-ios-styles.css) --- */ body.is-not-ios #imgquickfix1 { margin-top:70px; } body.is-not-ios .upsome { margin-top:-90px; } @media (min-width:700px) { body.is-not-ios .imgquickfix2 { margin-top:100px; } body.is-not-ios #imgquickfix3 { margin-top:70px; } body.is-not-ios #imgquickfix4 { margin-top:70px; } } @media (min-width:700px) { body.is-not-ios #imgquickfix5 { margin-top:70px; } body.is-not-ios #imgquickfix6 { margin-top:70px; } body.is-not-ios #imgquickfix7 { margin-top:70px; } } @media (max-width:700px) { body.is-not-ios #product-name {z-index:9998;position:relative;} body.is-not-ios #imgquickfix5 { margin-top:-30px; } body.is-not-ios #imgquickfix6 { margin-top:-30px; } body.is-not-ios #imgquickfix7 { margin-top:-30px; } body.is-not-ios #imgquickfix1 { margin-top:0; } body.is-not-ios .upsome { margin-top:-30px; } body.is-not-ios .imgquick200_1, body.is-not-ios .imgquick200_2 { margin-top:30px; } body.is-not-ios #images150qf4, body.is-not-ios #images150qf5 { margin-top:40px; } body.is-not-ios #imgquickfix300_1, body.is-not-ios #imgquickfix300_2 { margin-top:-40px; } } @media (max-width:5000px) { body.is-not-ios #dn200_1 {margin-top: 100px;} body.is-not-ios #dn200_2 {} body.is-not-ios #dn200_3 {} body.is-not-ios #dn200_4 {margin-top:-70px;} body.is-not-ios #dn200_5 {margin-top:-70px;} body.is-not-ios #dn200_6 {margin-top:-70px;} body.is-not-ios #dn200_7 {margin-top:-70px;} body.is-not-ios #dn200_8 {} body.is-not-ios #dn200_9 {} } @media (max-width:700px) { body.is-not-ios #dn200_1 {margin-top:0;} body.is-not-ios #dn200_2 {margin-top:30px;} body.is-not-ios #dn200_3 {margin-top:30px;} body.is-not-ios #dn200_4 {margin-top:-70px;} body.is-not-ios #dn200_5 {margin-top:-70px;} body.is-not-ios #dn200_6 {margin-top:-70px;} body.is-not-ios #dn200_7 {margin-top:-70px;} body.is-not-ios #dn200_8 {} body.is-not-ios #dn200_9 {} } @media (max-width:500px) { body.is-not-ios #dn200_1 {margin-top: 10px;} body.is-not-ios #dn200_2 {margin-top:30px;} body.is-not-ios #dn200_3 {margin-top:30px;} body.is-not-ios #dn200_4 {margin-top: -20px;} body.is-not-ios #dn200_5 {margin-top:-20px;} body.is-not-ios #dn200_6 {margin-top:-20px;} body.is-not-ios #dn200_7 {margin-top:-20px;} body.is-not-ios #dn200_8 {margin-top:30px;} body.is-not-ios #dn200_9 {margin-top:30px;} } /* ====================== LAYER 7: PAGE-SPECIFIC STYLES ====================== Moved here from per-page inline