/* ------------------------------------------------- Body ------------------------------------------------- */ body { font-family: "ff-good-headline-web-pro", Arial, sans-serif } /* ------------------------------------------------- Text ------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: "ff-good-headline-web-pro", Arial, sans-serif; font-style: normal; font-weight: normal; color: inherit;} h4, h5, h6 { text-transform: uppercase; font-weight: 600; text-decoration: underline; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 2.75rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; } .black { color: #000; } .slate { color: #36424a; } .charcoal { color: #262d31; } .dark-grey { color: #37424A; } .grey { color: #5E6A71; } .light-grey { color: #C3C7CA; } .ash { color: #E1E3E4; } .red { color: #D71928; } .orange { color: #F04C24; } .green { color: #56AA1C; } .light-blue { color: #00a8e1; } .blue { color: #036; } .purple { color: #1e0576; } .white { color: #FFF; } /* ------------------------------------------- background and border colors ------------------------------------------- */ .bg-pearl { background-color: #ebe8e5; } .bg-black { background-color: #000; } .bg-slate { background-color: #36424a; } .bg-charcoal { background-color: #262d31; } .bg-dark-grey { background-color: #37424A; } .bg-grey { background-color: #5E6A71; } .bg-light-grey { background-color: #C3C7CA; } .bg-ash { background-color: #E1E3E4; } .bg-red { background-color: #D71928; } .bg-orange { background-color: #F04C24; } .bg-green { background-color: #56AA1C; } .bg-light-blue { background-color: #00a8e1; } .bg-blue { background-color: #036; } .bg-purple { background-color: #1e0576; } .bg-white { background-color: #FFF; } .bg-white.transparent { background-color: rgba(255,255,255,0.5); } .bg-topdown { background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 64%, rgba(239,239,239,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(64%, rgba(255,255,255,1)), color-stop(100%, rgba(239,239,239,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 64%, rgba(239,239,239,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 64%, rgba(239,239,239,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 64%, rgba(239,239,239,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 64%, rgba(239,239,239,1) 100%); } .border-black { border-color: #000; } .border-slate { border-color: #36424a; } .border-charcoal { border-color: #262d31; } .border-dark-grey { border-color: #37424A; } .border-grey { border-color: #5E6A71; } .border-light-grey { border-color: #C3C7CA; } .border-ash { border-color: #E1E3E4; } .border-red { border-color: #D71928; } .border-orange { border-color: #F04C24; } .border-green { border-color: #56AA1C; } .border-light-blue { border-color: #00a8e1; } .border-blue { border-color: #036; } .border-purple { border-color: #1e0576; } /* ------------------------------------------------- Hairline for columns ------------------------------------------------- */ .row.hairline > .columns { border-width: 0 0 0 1px; border-color: #ddd; border-style: solid; } .row.hairline > .columns { padding-bottom: 15px; } .row.hairline > .columns:first-child { border-left: 0 none; -webkit-border-image: none; -o-border-image: none; -moz-border-image: none; } /* ------------------------------------------------- Reset ------------------------------------------------- */ :focus { outline: 0; } /* ------------------------------------------------- Global ------------------------------------------------- */ .padded { padding: 30px 0; } .padded-top { padding-top: 30px; } .padded-btm { padding-bottom: 30px; } /* ------------------------------------------------- TRUSTe ------------------------------------------------- */ .teconsent { background: #000;} #consent-track { padding-top: 0.5rem;} /* ------------------------------------------------- Header ------------------------------------------------- */ #header { border-bottom: 1px solid #d9d2cd; } #header .menu {} #header .header-items { display: flex; justify-content: space-between; align-items: center; height: 80px; } #header .menu li {} #header .menu li.menu-logo {padding:0;} #header .menu li.menu-logo a {padding:0; display:block;} #header .menu li.menu-logo a img { height:45px; margin:0 0.9375rem;} #header .button, #header .menu > li > a, #header .menu > li.menu-text { color:#000; text-transform:uppercase;font-size: .9rem; padding-top:0; padding-bottom:0;line-height:80px; } #header .menu > li > a img, #header .menu > li > a i, #header .menu > li > a svg { margin: 0; padding: 0; display: block; } #header .menu > li > a { font-size: 1.15rem; } @media screen and (max-width: 39.9375em) { #header .header-items { height: 60px; } #header .menu li.menu-logo a img { } #header .button, #header .menu > li > a { } #header .menu > li > a { font-size: 0.9rem; } #header .menu li.menu-logo a img { height:30px; } #header .button, #header .menu > li > a, #header .menu > li.menu-text { line-height:60px; } #header .menu > li.menu-text {padding-right:0; padding-left:0;} } #header .menu li { text-transform:uppercase;} .dropdown-pane { visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; padding:0; border:0 none; } .dropdown-pane.is-open { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 600ms; } .dropdown-pane.full { display:block; margin: 0 auto; background-color:transparent; border-top: 1px solid #d9d2cd; } .dropdown-pane .callout { border:0 none;} @media screen and (max-width: 39.9375em) { .dropdown-pane.full { width:100%; } } /* ------------------------------------------------- Buttons ------------------------------------------------- */ .btn-primary { text-transform: uppercase; font-weight: 600; background-color: #ff3b00; } .btn-primary:hover { background-color: #d93200; } .button.btn-secondary { text-transform: uppercase; font-weight: 600; background-color: #ebe8e5; color: #000; } .button.btn-secondary:hover { background-color: #dad5cf; color: #000; } /* ------------------------------------------------- Breadcrumbs ------------------------------------------------- */ .bread {background-color:#ebe8e5; padding:5px 0;} .bread ul.breadcrumbs { background: transparent; border: 0 none; margin: 0; padding-left: 0; } .bread ul.breadcrumbs li:not(:last-child)::after { content: "\203A"; color: #000; } .bread ul.breadcrumbs li a { color: #000;} /* ------------------------------------------- Page title ------------------------------------------- */ .page-title { padding:2rem 0;background-color:#ebe8e5; } .page-title h1 { margin: 0; text-transform: uppercase; font-weight: 500; text-decoration: underline; } /* ------------------------------------------------- Miscellaneous ------------------------------------------------- */ .cta:after { content: "\203A"; margin-left: 5px;} .fine-print { font-style: italic; font-size: 0.8125rem; } p.quote { float: none; display: block; position: relative; text-transform: uppercase; } /* US only for fancy quotes*/ .us p.quote:before, .us p.quote:after { font-size: 4em; line-height: 0.1em; vertical-align: -0.4em; } .us p.quote:before { content: open-quote; margin-right: 0.05em; } .us p.quote:after { content: close-quote; margin-left: 0.05em; } p.quote + cite { display: block; padding-bottom: 20px; } p.quote + cite:before { content: "\2014 \2009"; } /* ------------------------------------------------- Images ------------------------------------------------- */ .drop-shadow { position: static; -moz-box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5); -webkit-box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5); box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5); } .drop-shadow:after { position: absolute; content: ''; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.7) 0 0 0; clip: rect(50px, auto, 100px, 0); top: 100%; height: 50px; margin-top: -50px; } .drop-shadow > img { display: block; } /* ------------------------------------------------- Links ------------------------------------------------- */ .cta:after { content: "\203A"; margin-left: 5px; } /* ------------------------------------------------- Hairline between columns ------------------------------------------------- */ .row.hairline > .columns { border-width: 0 0 0 1px; border-color: #ddd; border-style: solid; padding-bottom: 15px; } .row.hairline > .columns:first-child { border-left: 0 none; -webkit-border-image: none; -o-border-image: none; -moz-border-image: none; } /* ------------------------------------------------- Accordion ------------------------------------------------- */ .accordion { margin: 0 0 1rem 0; } .accordion .accordion-item { } .accordion .accordion-item > a { background: #f7f7f7; color:#000; font-size:1rem; } .accordion .accordion-item.is-active { border-top: 3px solid #F04C24 } .accordion .accordion-item.is-active > a { background: #fff; } .accordion > li.is-active > .content { -moz-box-shadow: inset 0 7px 7px -7px #333; -webkit-box-shadow: inset 0 7px 7px -7px #333; box-shadow: inset 0 7px 7px -7px #333; } /* ------------------------------------------------- Magellan Nav ------------------------------------------------- */ .magellan-bar {background-color:#5f6a72;} nav[data-magellan] .menu .menu-text {font-weight:normal;} nav[data-magellan] .menu > li { font-size:0.8125rem;color:#fff; text-transform:uppercase;} nav[data-magellan] .menu > li > a { color:#fff; font-weight:bold; padding: 01rem 1rem;} nav[data-magellan] .menu > li > a.active { /*background-image: url(/etc/designs/plantronics/clientlib-all/img/bg-orange-pixel.gif);*/ background-position: bottom; background-size: 1px 4px; background-repeat: repeat-x; color: #fff; } /* ------------------------------------------------- Footer ------------------------------------------------- */ footer {background-color: #00213c; } footer .copyright, .corporate-nav {font-size:0.8125rem; color:#fff;} footer .menu-header {text-transform:uppercase; color:#5f6a71; font-size:0.8125rem; font-weight:800;} footer .menu:not(.simple) {margin-bottom:0;} footer .menu.vertical a { color:#fff;} footer .menu a:hover, footer .menu a:focus {color:#F04C24;} footer .corporate-nav a {color:#fff;} footer .footer-icons { height: 30px; width: 30px; } footer .corporate-nav, footer .social-list.menu { margin-bottom:15px;} /* Medium and up */ @media screen and (min-width: 40em) { ul.social-list.menu { justify-content: left; float: right; margin:0; } ul.corporate-nav.menu { justify-content: left; float: left; margin:0; } footer .copyright.text-center { text-align:left; } } /* ------------------------------------------- Hairline list ------------------------------------------- */ ul.hairline.menu { margin-left: 0; } ul.hairline.menu > li { border-right: 1px solid #ccc; padding-right: 11px; margin-right: 11px; margin-left: 0; } ul.hairline.menu > li:last-child { border-right: 0 none; } /* ------------------------------------------------- TTACs ------------------------------------------------- */ .card.tta { border:0 none; background-color: transparent; } .card.stack { border-top: 14px solid #5f6a72; background-color:#E1E3E4; } .card.product-detail .features { font-size: 0.8125rem; color: #666;} .card.product-detail .price { padding:1rem 0; } .card.product-detail .display-name { padding-top:1rem; } .card a p {color:inherit;} a .card h1, a .card h2, a .card h3, a .card h4, a .card h5, a .card h6 {color:#F04C24} /* ------------------------------------------------- Drop shadow ------------------------------------------------- */ .drop-shadow { position: static; -moz-box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5); -webkit-box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5); box-shadow: 0 20px 20px -20px rgba(0,0,0,0.5); } .drop-shadow:after { position: absolute; content: ''; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.7) 0 0 0; clip: rect(50px, auto, 100px, 0); top: 100%; height: 50px; margin-top: -50px; } .drop-shadow > img { display: block; } /* ------------------------------------------- tabs ------------------------------------------- */ .tabs-bar { background: #5f6a72; } .tabs-bar .tabs { background: transparent; border:0 none; } .tabs-bar .tabs-title > a { color: #fff; display: block; font-size: 0.8125rem; height: 2.8125rem; line-height: 2.8125rem; padding: 0px 16px; background-color: transparent; font-family: "ff-good-headline-web-pro", Arial, sans-serif; } .tabs-bar .tabs-title > a:hover { background-color: #36424a; } .tabs-bar .tabs-title > a:focus { font-weight: bold; color: #eee; } .tabs-bar .tabs-title > a:focus, .tabs-bar .tabs-title > a[aria-selected='true'] { cursor: default; color: #fff; background: #36424a; border-left: 0 solid #e6e6e6; border-right: 0 solid #e6e6e6; font-weight: bold; box-shadow: inset 0px 0px 0px #eee; -webkit-box-shadow: inset 0px 0px 0px #eee; -moz-box-shadow: inset 0px 0px 0px #eee; -o-box-shadow: inset 0px 0px 0px #eee; } .tabs-content {border:0 none;} .tabs.traditional { border:0 none; border-bottom: 1px solid #e6e6e6;} .tabs-content.traditional { border:0 none;} .tabs.traditional li.is-active { border-top: 1px solid #e6e6e6; } .tabs.traditional li.is-active > a { border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; margin-bottom:-1px; } .tabs.traditional .tabs-title > a:focus, .tabs.traditional .tabs-title > a[aria-selected='true'] { background: #fff; color: #111; } .pill.tabs { background: transparent; border:0 none; } .pill.tabs .tabs-title { margin-right:10px; } .pill.tabs .tabs-title > a { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; background: #E1E3E4; color: #666; } .pill.tabs .tabs-title > a:hover { background-color: #C3C7CA; color:#fff; } .pill.tabs .tabs-title > a:focus { font-weight: bold; color: #eee; } .pill.tabs .tabs-title > a:focus, .pill.tabs .tabs-title > a[aria-selected='true'] { cursor: default; color: #fff; background-color: #F04C24; } /* FORMS */ .single-checkbox {} .single-checkbox input { display:inline-block;} .single-checkbox label {} .required {color:red; font-size:.5rem;}