/* Universal header/footer/nav chrome styles. Extracted from style1.css — this file should be the single source of truth for header/nav/footer/dark-mode-toggle appearance across every page. Link this LAST in , after the page's own stylesheet, so it wins the cascade. */ .skip{ position:absolute; z-index:-1000; top:0; left:0; opacity:0 } .mobile-wrapper{ background:0 0; height:100px; position:absolute; left:0; width:100% } #brand,.call-strip-button,.top-nav-strip,.topper-flex{ display:none } .hamburger{ padding:0; display:inline-block; cursor:pointer; -webkit-transition-property:opacity,-webkit-filter; transition-property:opacity,-webkit-filter; -o-transition-property:opacity,filter; transition-property:opacity,filter; transition-property:opacity,filter,-webkit-filter; -webkit-transition-duration:.15s; -o-transition-duration:.15s; transition-duration:.15s; -webkit-transition-timing-function:linear; -o-transition-timing-function:linear; transition-timing-function:linear; font:inherit; color:inherit; text-transform:none; background-color:transparent; border:0; margin:0; overflow:visible; position:relative; z-index:2000 } .hamburger:hover{ opacity:.7; cursor:pointer } .hamburger.is-active:hover{ opacity:.7; cursor:pointer } .hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::after,.hamburger.is-active .hamburger-inner::before{ background-color:#000 } .hamburger-box{ width:30px; height:24px; display:inline-block; position:relative; z-index:2000 } .hamburger-inner{ display:block; top:50%; margin-top:-2px } .hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{ width:30px; height:3px; background-color:#fff; border-radius:4px; position:absolute; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; -o-transition-property:transform; transition-property:transform; transition-property:transform,-webkit-transform; -webkit-transition-duration:.15s; -o-transition-duration:.15s; transition-duration:.15s; -webkit-transition-timing-function:ease; -o-transition-timing-function:ease; transition-timing-function:ease } .hamburger-inner::after,.hamburger-inner::before{ content:""; display:block } .hamburger-inner::before{ top:-10px } .hamburger-inner::after{ bottom:-10px } .hamburger--spring .hamburger-inner{ top:2px; -webkit-transition:background-color 0s .13s linear; -o-transition:background-color 0s .13s linear; transition:background-color 0s .13s linear; -webkit-transition-delay:.22s; -o-transition-delay:.22s; transition-delay:.22s } .hamburger--spring .hamburger-inner::before{ top:10px; -webkit-transition:top .1s .2s cubic-bezier(.33333,.66667,.66667,1),-webkit-transform .13s cubic-bezier(.55,.055,.675,.19); transition:top .1s .2s cubic-bezier(.33333,.66667,.66667,1),-webkit-transform .13s cubic-bezier(.55,.055,.675,.19); -o-transition:top .1s .2s cubic-bezier(.33333,.66667,.66667,1),transform .13s cubic-bezier(.55,.055,.675,.19); transition:top .1s .2s cubic-bezier(.33333,.66667,.66667,1),transform .13s cubic-bezier(.55,.055,.675,.19); transition:top .1s .2s cubic-bezier(.33333,.66667,.66667,1),transform .13s cubic-bezier(.55,.055,.675,.19),-webkit-transform .13s cubic-bezier(.55,.055,.675,.19); -webkit-transition-delay:.22s; -o-transition-delay:.22s; transition-delay:.22s } .hamburger--spring .hamburger-inner::after{ top:20px; -webkit-transition:top .2s .2s cubic-bezier(.33333,.66667,.66667,1),-webkit-transform .13s cubic-bezier(.55,.055,.675,.19); transition:top .2s .2s cubic-bezier(.33333,.66667,.66667,1),-webkit-transform .13s cubic-bezier(.55,.055,.675,.19); -o-transition:top .2s .2s cubic-bezier(.33333,.66667,.66667,1),transform .13s cubic-bezier(.55,.055,.675,.19); transition:top .2s .2s cubic-bezier(.33333,.66667,.66667,1),transform .13s cubic-bezier(.55,.055,.675,.19); transition:top .2s .2s cubic-bezier(.33333,.66667,.66667,1),transform .13s cubic-bezier(.55,.055,.675,.19),-webkit-transform .13s cubic-bezier(.55,.055,.675,.19); -webkit-transition-delay:.22s; -o-transition-delay:.22s; transition-delay:.22s } .hamburger--spring.is-active .hamburger-inner{ -webkit-transition-delay:.22s; -o-transition-delay:.22s; transition-delay:.22s; background-color:transparent!important } .hamburger--spring.is-active .hamburger-inner::before{ top:0; -webkit-transition:top .1s .15s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1); transition:top .1s .15s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1); -o-transition:top .1s .15s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1); transition:top .1s .15s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1); transition:top .1s .15s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1); -webkit-transform:translate3d(0,10px,0) rotate(45deg); transform:translate3d(0,10px,0) rotate(45deg) } .hamburger--spring.is-active .hamburger-inner::after{ top:0; -webkit-transition:top .2s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1); transition:top .2s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1); -o-transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1); transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1); transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1); -webkit-transform:translate3d(0,10px,0) rotate(-45deg); transform:translate3d(0,10px,0) rotate(-45deg) } .call-us,.navbar-menu img,.quote-nav-button{ display:none } .mobile-wrapper{ height:70px } .mobile-nav{ position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:space-between; -ms-flex-pack:space-between; justify-content:space-between; height:100%; max-width:100% } .hamburger{ position:absolute; right:15px } #desktop-neon{ display:none!important } .mobile-wrapper img{ height:50px; position:relative; z-index:1000; top:10px } .neon{ visibility:hidden; opacity:0; -webkit-transition:.1s ease-in; -o-transition:.1s ease-in; transition:.1s ease-in; font-family:Yellowtail; color:#fff; display:-webkit-box; display:-ms-flexbox; display:flex; position:absolute; top:54px; left:100px; z-index:1000 } .neon span{ font-family:Yellowtail; display:table-cell; margin:0; font-size:1.5em; padding:0; -webkit-animation:neonGlow 3s linear infinite; animation:neonGlow 3s linear infinite } .neon span:nth-child(1){ -webkit-animation-delay:1s; animation-delay:1s } .neon span:nth-child(2){ -webkit-animation-delay:1s; animation-delay:1s } .neon span:nth-child(3){ -webkit-animation-delay:1.2s; animation-delay:1.2s } .neon span:nth-child(4){ -webkit-animation-delay:1s; animation-delay:1s } .neon span:nth-child(5){ -webkit-animation-delay:2s; animation-delay:2s; margin-right:3px!important } .neon span:nth-child(6){ -webkit-animation-delay:2.45s; animation-delay:2.45s } .neon span:nth-child(7){ -webkit-animation-delay:2.75s; animation-delay:2.75s } .neon span:nth-child(8){ -webkit-animation-delay:2.75s; animation-delay:2.75s } .neon span:nth-child(9){ -webkit-animation-delay:2.75s; animation-delay:2.75s } .navbar-menu{ overflow:hidden; background:#f5f5f5; width:0; top:0; position:absolute; right:0; height:100vh!important; -webkit-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; z-index:1000; max-width:1600px } .side-nav{ overflow:hidden; padding:40px 0; position:absolute; right:2em; -webkit-transition:.3s ease; -o-transition:.3s ease; transition:.3s ease; -webkit-transition-delay:.2s; -o-transition-delay:.2s; transition-delay:.2s } .side-nav ul{ margin:0; text-align:right; list-style:none; margin-top:50px } .side-nav ul li{ margin-bottom:20px; opacity:0; -webkit-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px) } .side-nav ul li.open{ -webkit-animation-name:fadeIn; animation-name:fadeIn; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:.5s; animation-duration:.5s; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-in-out } .side-nav ul li.open:nth-child(2){ -webkit-animation-delay:.1s; animation-delay:.1s } .side-nav ul li.open:nth-child(3){ -webkit-animation-delay:.2s; animation-delay:.2s } .side-nav ul li.open:nth-child(4){ -webkit-animation-delay:.3s; animation-delay:.3s } .side-nav ul li.open:nth-child(5){ -webkit-animation-delay:.4s; animation-delay:.4s } .side-nav ul li.open:nth-child(6){ -webkit-animation-delay:.5s; animation-delay:.5s } .side-nav a{ text-decoration:none; padding:5px 10px 5px 10px; -webkit-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; -webkit-transition-delay:.2s; -o-transition-delay:.2s; transition-delay:.2s; opacity:0; visibility:hidden; -webkit-transform:translateY(75px); -ms-transform:translateY(75px); transform:translateY(75px) } .active-menu{ border-right:4px solid var(--primary); color:var(--primary) } @media screen and (min-width:500px) and (max-width:1025px){ .mobile-nav{ max-width:100% } .mobile-wrapper{ padding-left:36px; padding-right:36px } .mobile-wrapper img{ left:-33px } } @media screen and (min-width:1025px){ .mobile-wrapper{ display:none } .side-nav a{ opacity:1; visibility:visible } .quote-nav-button{ display:block; color:#fff; background:var(--primary); margin-left:100px } .quote-nav-button:hover{ opacity:.7 } .navbar-menu img{ display:block; margin:0!important; position:absolute; left:2em; height:auto; width:290px } nav{ width:100%; position:absolute; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:124px; background:0 0; z-index:100 } #desktop-neon{ display:block!important } .neon{ top:80px; left:200px; width:150px } .neon span{ font-size:2em } .neon span:nth-child(5){ -webkit-animation-delay:1s; animation-delay:1s; padding-right:4px!important } .navbar-menu{ width:1100px!important; min-height:100px; height:124px!important; margin:auto; position:absolute; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; z-index:100; left:0; background:0 0 } .side-nav{ padding:0; width:1100px; height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; right:0; overflow:visible } .side-nav ul li{ margin:0 50px 0 0; text-align:right } .call-us{ font-size:.875em; line-height:24px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-weight:400; margin-left:40px!important; color:#212121 } .call-us svg{ width:20px; margin-right:10px; height:auto } .side-nav a{ padding:20px 0 10px 0; color:#fff; font-weight:400; -webkit-transition:.2s ease; -o-transition:.2s ease; transition:.2s ease; font-size:14px; font-weight:700 } .side-nav ul li{ opacity:1; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0) } .side-nav ul li a:hover{ cursor:pointer; opacity:1; -webkit-transition:.2s ease; -o-transition:.2s ease; transition:.2s ease; color:var(--primary) } .side-nav li{ color:#212121 } .active-menu{ border-right:none; color:#fff; opacity:1!important; border-bottom:3px solid var(--primary); color:#fff!important } } footer{ position:relative; height:auto; padding-top:250px; background:#001099; background:-o-linear-gradient(305deg,#001099 0,#3ad9ff 96%); background:linear-gradient(145deg,#001099 0,#3ad9ff 96%) } .footer-img{ position:absolute; width:100%; top:-2px } .light{ height:auto; width:auto; position:relative; top:0; z-index:10 } .wire{ height:330px; width:5px; -webkit-transform:translateY(50x); -ms-transform:translateY(50x); transform:translateY(50x); background:#fff; margin:auto; z-index:0 } .triangle{ border-left:26px solid transparent; border-right:26px solid transparent; border-bottom:26px solid #fff; -webkit-transform:translateY(-15px); -ms-transform:translateY(-15px); transform:translateY(-15px) } .bulb{ background:#fff; height:20px; width:20px; position:relative; z-index:-1; border-radius:50%; margin:auto; position:absolute; bottom:6px; right:16px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center } .bulb:before{ display:none; position:absolute; border-radius:50%; content:""; height:79px; width:79px; opacity:.7; -webkit-animation-name:bulbFlicker; animation-name:bulbFlicker; -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-timing-function:step-start; animation-timing-function:step-start; -webkit-transform:translateY(-22px); -ms-transform:translateY(-22px); transform:translateY(-22px); background:#43b7ff; background:-o-radial-gradient(circle,#43b7ff 0,rgba(0,0,0,0) 45%); background:radial-gradient(circle,#43b7ff 0,rgba(0,0,0,0) 45%) } footer img{ margin-bottom:30px; margin-top:0 } .footer-logo{ height:60px; margin-bottom:100px } #footer-neon{ left:120px; top:40px } #footer-neon span{ font-size:1.7em } .footer-line{ height:1px; width:200px; background:var(--primary); opacity:.9; margin-top:20px; margin-bottom:30px } .footer-item{ margin-bottom:50px } .footer-item p{ width:230px; margin-bottom:10px; color:#fff; font-size:1em!important } .footer-item h2{ margin-bottom:0; color:#fff } .footer-item a{ display:block; text-decoration:none; margin-bottom:10px; position:relative; color:#fff } .footer-item a:hover{ cursor:pointer } .branding{ background:rgba(0,0,0,.15); display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center } .branding p{ -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; text-align:center; font-size:.7em; margin-bottom:30px; margin-top:30px; color:#fff } @media screen and (min-width:500px) and (max-width:1025px){ footer{ padding-top:337px } .wire{ height:300px } .footer-logo{ height:100px } #footer-neon{ top:70px; left:210px } #footer-neon span{ font-size:2.6em } } @media screen and (min-width:1026px){ footer .desktop-display{ display:block!important } footer{ padding-top:620px!important } .footer-img{ top:-2px; width:110% } footer img{ margin-top:0; margin-bottom:56px } .footer-logo{ margin-bottom:45px } .footer-item{ margin-top:100px } .footer-item:last-child p{ width:180px } .footer-item h2{ margin-bottom:0 } } @media screen and (min-width:2500px){ footer{ padding-top:350px!important } .footer-img{ top:-500px; left:-100px; width:150% } } @media screen and (min-width:2310px){ footer{ padding-top:250px!important } .footer-img{ top:-500px; left:-100px; width:150% } } @media screen and (min-width:2201px){ footer{ padding-top:350px!important } .footer-img{ top:-500px; left:-100px; width:150% } } @media screen and (min-width:2000px) and (max-width:2200px){ footer{ padding-top:580px!important } .footer-img{ top:-190px; width:120% } } @media screen and (min-width:1560px) and (max-width:1790px){ footer{ padding-top:550px!important } } @media screen and (min-width:1400px) and (max-width:1559px){ footer{ padding-top:450px!important } } @media screen and (min-width:1200px) and (max-width:1399px){ footer{ padding-top:350px!important } } @media screen and (min-width:1026px) and (max-width:1199px){ footer{ padding-top:0!important } } @media screen and (min-width:2500px){ footer{ padding-top:350px!important } .footer-img{ top:-500px; left:-100px; width:150% } } @media screen and (min-width:2530px){ footer{ padding-top:200px!important } .footer-img{ top:-700px; left:-100px; width:150% } } .navbar-menu{ height:100vh!important } @media screen and (min-width:500px) and (max-width:1025px){ .mobile-nav{ max-width:100%; width:100% } } @media screen and (min-width:1026px){ .navbar-menu{ height:124px!important } } .top-dark-mode-button{ position:absolute; top:60px; right:15px; -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); z-index:1000; -webkit-transition:.3s ease-in; -o-transition:.3s ease-in; transition:.3s ease-in } .top-dark-mode-button:after{ content:"DARK"; position:absolute; color:#fff; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:22px; top:10px; -webkit-transition:.1s ease-in; -o-transition:.1s ease-in; transition:.1s ease-in } .dark-mode-group{ position:absolute; top:-340px; right:15px; width:80px; height:470px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center } .dark-mode-group p{ font-size:.7em!important; text-align:center; color:#fff; opacity:.8 } .dark-toggle{ margin:0; width:30px; height:16px; z-index:20; border-radius:10px; background:0 0; border:3px solid #fff; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-transition:.3s ease; -o-transition:.3s ease; transition:.3s ease; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; z-index:1000; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; align-items:center; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg) } .dark-toggle span{ height:20px; width:20px; left:-8px; border-radius:50%; background:#fff; position:absolute; -webkit-transition:.3s ease; -o-transition:.3s ease; transition:.3s ease; -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.75); box-shadow:0 0 5px 0 rgba(0,0,0,.75) } body.dark-mode .top-dark-mode-button:after{ content:"LIGHT"; color:var(--primary); top:12px } .top-dark-mode-button .dark-toggle{ background:#e6e6e6; border-color:#e6e6e6; -webkit-box-shadow:0 15px 5px -8px rgba(67,183,255,.5); box-shadow:0 15px 5px -8px rgba(67,183,255,.5); width:35px } .dark-mode-button{ background:0 0; border:none; height:40px; width:30px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center } body.dark-mode .triangle{ border-bottom:26px solid var(--dark); -webkit-box-shadow:0 15px 5px -8px rgba(67,183,255,.5); box-shadow:0 15px 5px -8px rgba(67,183,255,.5); -webkit-animation-name:flicker; animation-name:flicker; -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-timing-function:step-start; animation-timing-function:step-start; -webkit-transition:0s; -o-transition:0s; transition:0s } body.dark-mode .wire{ background:var(--dark) } body.dark-mode .dark-toggle{ background:#43b7ff; background:-o-linear-gradient(left,#43b7ff 0,#00ddf6 100%); background:-webkit-gradient(linear,left top,right top,from(#43b7ff),to(#00ddf6)); background:linear-gradient(90deg,#43b7ff 0,#00ddf6 100%); border:none } body.dark-mode .dark-toggle span{ left:15px; -webkit-transition:.3s ease; -o-transition:.3s ease; transition:.3s ease } body.dark-mode .navbar-menu{ background:#222; background:-o-linear-gradient(#222,#000); background:-webkit-gradient(linear,left top,left bottom,from(#222),to(#000)); background:linear-gradient(#222,#000); height:120% } body.dark-mode .neon{ visibility:visible; opacity:1 } body.dark-mode .side-nav a{ color:#fff } body.dark-mode .hamburger-inner,body.dark-mode .hamburger-inner::after,body.dark-mode .hamburger-inner::before{ background:#fff; -webkit-transition:.3s ease; -o-transition:.3s ease; transition:.3s ease } body.dark-mode .hamburger.is-active .hamburger-inner::after,body.dark-mode .hamburger.is-active .hamburger-inner::before{ background:#fff } body.dark-mode footer{ background:#000; background:-o-linear-gradient(#222,#000); background:-webkit-gradient(linear,left top,left bottom,from(#222),to(#000)); background:linear-gradient(#222,#000) } body.dark-mode .bulb:before{ display:block } @media screen and (min-width:500px) and (max-width:1025px){ .dark-mode-group{ height:430px; top:-310px } .top-dark-mode-button{ right:50px } } @media screen and (min-width:1026px){ header{ max-width:1100px; position:relative; margin:auto } .dark-mode-group{ position:relative; right:-32px; top:-270px } body.dark-mode .navbar-menu{ height:124px } body.dark-mode .navbar-menu{ overflow:visible } .top-dark-mode-button{ position:absolute!important; top:44px!important; right:0!important; -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); z-index:5000 } body.dark-mode .navbar-menu{ background:unset } body.dark-mode .navbar-menu{ -webkit-box-shadow:none; box-shadow:none } }