@charset "utf-8";

body {
    line-height: 1
}

nav {
    background-color: #27272a
}

.sub-nav-panel {
    background-color: #fff
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: "";
    content: none
}

p {
    line-height: 20px;
    margin-bottom: 16px
}

.about-us-page-content a,a.link {
    color: red;
    text-decoration: underline
}

.underline {
    text-decoration: underline
}

a#show-filters {
    display: none
}

.filter-controls {
    display: block
}

h5.filter-header{
    display: inline-block !important;

}
button.filter-buttons {
    font-size: small;
    border: 1px solid #c2c2c2;
    padding: 10px;
    border-radius: 15px;
    margin: 10px
}

.promo_banner{
	text-align: center;
    float: left;
    clear: both;
    width: 100%;
    color: #fff;
    border-bottom: 4px solid #fff;
	border-top: 4px solid #fff;
	padding-bottom: 20px;
}
.cfa-tooltip {
    position:relative; /* making the .tooltip span a container for the tooltip text */
    cursor:help;
}
.cfa-tooltip:before {
    content: attr(data-text); /* here's the magic */
    position:absolute;

    /* vertically center */
    top:50%;
    transform:translateY(-50%);

    /* move to right */
    left:100%;
    margin-left:15px; /* and add a small left margin */

    /* basic styles */


    overflow: visible;
    display: block;
    z-index: 999;
    padding:10px;
    border-radius:10px;
    background:#000;
    color: #fff;
    text-align:center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;

    display:none; /* hide by default */
}
.cfa-tooltip:hover:before {
    display:block;
}


button.small-clear-buttons {
    font-size: small;
    border: 1px solid #c2c2c2;
    padding: 5px;
    border-radius: 15px;
    margin: 10px 10px 0 0;
    float: right
}

.filter-action-buttons {
    border-top: 1px solid #e3e3e3;
    margin-top: 40px
}

button#filter-btn:hover {
    background-color: green;
    color: #fff
}

button#clear-filter-btn:hover {
    background-color: red;
    color: #fff
}

.normal-list {
    list-style: disc
}

.normal-list {
    margin-left: 15px;
    margin-bottom: 5px
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    font-size: clamp(12px,.8rem + .25vw,20px)
}

body {
    font-family: Arial,Helvetica,sans-serif
}

#survey {
    position: fixed;
    bottom: 20px;
    right: 100px;
    width: 200px;
    border-radius: 15px;
    border-bottom: none;
    background-color: red;
    color: #fff;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)
}

#modal {
    position: fixed;
    right: 0;
    bottom: 0;
    height: 90%;
    width: 40%;
    background-color: #fff;
    display: none;
    border: 2px solid #e3e3e3;
    box-shadow: 10px 5px 5px gray
}
.glow {
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}


#frame {
    height: 100%;
    width: 100%
}

.close {
    position: absolute;
    right: 5px;
    top: 10px;
    background-color: red;
    color: #fff;
    border: 1px solid #000;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2);
    text-decoration: underline;
    cursor: pointer
}

iframe {
    width: 100%;
    height: 100%
}

#mega-menu-full ul li a,#mega-menu-full ul li button {
    color: #fff
}

mega-menu-full-dropdown2 ul li a,mega-menu-full-dropdown1 ul li a {
    color: #000
}

.choice-block {
    float: left;
    text-align: center;
    margin: 5px;
    border: 1px solid #e2e2e2
}

nav a {
    color: #fff
}

nav ul li a {
    color: #27272a
}

nav ul li a:hover {
    color: red
}

.content-wrapper {
    width: 100%;
    max-width: 1915px;
    margin: 0 auto;
    border: 1px solid #f2f2f2
}

#adv-search-link {
    margin-left: 10px;
    margin-top: 6px;
    font-weight: 400;
    text-align: center;
    color: red;
    text-decoration: underline
}

.entry-content a {
    color: red
}

.landing-page a {
    color: red;
    text-decoration: underline
}

a.compare-link {
    color: #fff
}

tel {
    color: red
}

.page-content {
    min-height: 72vh
}

.rma-page-content,.support-page-content,.custom-lcd-form-content {
    margin: 0 10%;
    min-height: 72vh
}

.getting-started-container {
    background-color: #333;
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    text-align: center
}

.getting-started-container div label {
    padding: 5px
}

.getting-started {
    margin-left: 40px;
    margin-top: 20px;
    float: left
}

.get-started-cta {
    margin: 20px
}

.char-count-choice {
    font-size: 18px;
    margin: 5px 10px 20px 0;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 5px
}

.wh-on-bl {
    color: #fff;
    background-color: #0001f7
}

.dk-on-gy {
    color: #494a42;
    background-color: #b5b8b8
}

.dk-on-lg {
    color: #494a42;
    background-color: #81a6a9
}

.dk-on-yg {
    color: #494a42;
    background-color: #c9eb09
}

.dk-on-gr {
    color: #494a42;
    background-color: #4fb206
}

.yw-on-dk {
    color: #c9eb09;
    background-color: #494a42
}

.rd-on-dk {
    color: #7f1b29;
    background-color: #020802
}

.help-me-buttons {
    border: 1px solid #dcdcdc;
    text-align: center;
    border-radius: 7px;
    padding: 15px;
    background-color: green!important;
    color: #fff;
    font-weight: 700;
    margin: 20px auto;
    clear: both;
    display: block;
    max-width: 150px
}

.help-me-input {
    width: 55px;
    color: #000
}

option {
    color: #000
}

.clear-all {
    clear: both
}

label.help-me-txt {
    line-height: 25px
}

.browser-default {
    color: #000;
    border: 1px solid #ccc;
    padding: 3px
}

.color-type-choices {
    font-size: 18px;
    margin: 5px 10px 20px 0;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 5px
}

.bubble-links {
    font-size: 18px;
    margin: 5px 10px 20px 0;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #fff;
    padding: 5px
}

.bubble-links:hover {
    background-color: red
}

.color {
    background: linear-gradient(to right,#ef5350,#f48fb1,#7e57c2,#2196f3,#26c6da,#43a047,#eeff41,#f9a825,#ff5722)
}

.monochrome {
    background: #00f
}

.contact-form {
    width: 60%;
    margin: 10px auto
}

.not-rma-form {
    margin: 30px auto;
    background-color: red;
    color: #fff;
    width: 60%;
    border-radius: 15px;
    padding: 20px
}

.not-rma-form a.link {
    color: #fff!important;
    text-decoration: underline
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Oswald",sans-serif
}


.page-header {
    font-size: .9rem;
    font-weight: 700;
    margin: 5px 0 0 0!important;
    background: linear-gradient(180deg,#fff 67%,#f2f2f2 85%)
}

.header {
    margin-top: 5rem;
    clear: both
}

.inline-header-icon a,.inline-header-icon {
    color: gray;
    font-weight: 700;
    line-height: 18px
}

.inline-header-icon span {
    vertical-align: bottom;
    font-size: 18px!important;
    color: gray
}

.bullet-bubbles {
    background-color: #f9f9f9;
    border-radius: 15px;
    padding: 10px
}

.wrapper {
    width: 90%;
    max-width: 53rem;
    margin: 32px 0 20px 30px;
    float: left
}

.label {
    font-size: .625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    margin-bottom: 1rem
}

.searchBar {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center
}

#searchQueryInput {
    width: 100%;
    height: 3rem;
    background: #e6e6e6;
    outline: 0;
    border: 0;
    border-radius: 1.625rem;
    padding: 0 3.5rem 0 1.5rem;
    font-size: 1rem
}

#searchQuerySubmit {
    width: 3.5rem;
    height: 3rem;
    margin-left: -3.5rem;
    background: 0 0;
    border: 0;
    outline: 0
}

#searchQuerySubmit:hover {
    cursor: pointer
}

.home-accessory-blocks>img.responsive-img {
    max-width: 95%;
    height: auto;
    display: block;
    margin: 20px auto
}

.header-icons {
    text-align: center
}

.widget nav {
    background-color: #fff!important
}

.entry-title {
    font-size: clamp(1rem,10vw,2.5rem)
}

#blog-1,#blog-2,#blog-3 {
    width: 30%;
    border: 1px solid #ccc;
    padding: 0 5px;
    margin: 20px 0;
    aspect-ratio: 1/1;
    max-height: 600px;
    overflow-x: hidden;
    border-radius: 10px;
    float: left;
    cursor: pointer;
    position: relative
}

#blog-2 {
    margin: 20px 2.2vw
}

.secondary {
    float: right;
    width: 30%
}

.primary {
    width: 60%;
    float: left;
    margin-left: 8%
}

.sidebar-main {
    margin-right: 30px;
    padding: 20px 0
}

.sidebar-main nav ul li,.textwidget {
    line-height: 1.4em
}

.sidebar-main nav ul li a,.textwidget a {
    color: red
}

.widget-title {
    margin-bottom: 2px
}

.post-content {
    padding: 5px 40px;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    margin: 30px 20px;
    width: 40%;
    height: fill-content;
    text-align: center
}

.entry-content {
    text-align: left;
    margin: 10px auto;
    width: fit-content
}

.entry-content ul {
    list-style-type: square
}

.ast-pagination,.post-navigation {
    margin: 30px auto;
    width: fit-content
}

.post-navigation,.pagination {
    background-color: transparent
}

.nav-previous {
    margin-top: 20px;
    float: left
}

.nav-next {
    margin-top: 20px;
    float: right
}

.ast-single-related-posts-container {
    clear: both;
    margin-top: 20px;
    float: left
}

.post-thumb {
    margin: 0 auto;
    text-align: center;
    width: fit-content
}

.nav-links {
    font-size: 18px
}

.nav-links a {
    padding: 5px;
    color: red;
    border: 1px solid #e2e2e2
}

.current {
    border: 1px solid #e2e2e2;
    padding: 5px
}

.entry-header {
    margin-bottom: 10px
}

.entry-meta a,.read-more a {
    color: red
}

.entry-content {
    padding: 10px 0
}

#logo-image,.header-icons,.red-checks-home,#iso-image-home {
    width: 100%;
    max-width: 100%;
    height: auto;
    width: auto\9
}

.red-checks-home {
    width: 30px;
    margin-right: 10px
}

#iso-image-home {
    width: 250px
}

.home-iso {
    width: 70%;
    margin: 0 auto
}

.home-iso div {
    min-width: 30%;
    margin: 0 auto
}

.footer-icons {
    float: left;
    margin: -5px 5px;
    color: red
}

.footer-column {
    min-width: 30%;
    margin-top: 30px;
    padding: 10px
}

#logo-image {
    margin-top: 20px
}

.homepage-callout h1 {
    padding-top: 3rem;
    font-family: "Oswald",sans-serif;
    font-size: clamp(4rem,10vw,8rem);
    line-height: 110%;
    margin: 0 0 1.68rem 0;
    font-weight: 700;
    text-shadow: 2px 2px #000
}

#hero-case-study {
    background-image: url(/layout/homepage/netflix-hero-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 40px;
    color: #fff;
    min-height: 531px
}

#hero-case-study div {
    margin-top: 40px
}

#hero-case-study img {
    margin: 5px auto
}

#google_reviews {
    background-image: url(/layout/homepage/customer-review-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 40px;
    color: #fff;
    margin-top: 65px
}

.home-accessories {
    width: clamp(150px,8vw,200px);
    margin: 10px 5px;
    text-align: center
}

p.home-center {
    font-size: 18px;
    text-align: center
}

.everything-block {
    margin-bottom: 20px
}

.home-accessory-blocks {
    border-radius: 15px;
    text-align: center;
    font-size: 1.2em;
    min-height: clamp(200px,7vw,300px);
    padding: 10px;
    margin: 20px;
    min-width: 200px
}

.case-study-left p {
    font-size: clamp(12px,1.2vw,22px);
    line-height: clamp(12px,1.2vw,22px);
    margin: 10px
}

#netflix-case-study {
    margin: 25px
}

h3 {
    font-family: "Oswald",sans-serif;
    font-size: 2.1rem !important;
}

h3.home-customizable {
    font-size: 2.5rem;
    margin: 5px
}

h5 {
    font-family: "Oswald",sans-serif;
    font-size: 3rem
}

.home-intro {
    background-image: url(/layout/homepage/intro-bg.webp);
    background-repeat: no-repeat;
    width: 100%;
    min-height: 895px
}

.home-page-bottom {
    background: linear-gradient(180deg,#fff 67%,#f2f2f2 85%)
}

.home-page-bottom div {
    min-width: 20%;
    padding: 15px;
    margin-top: 25px
}

.home-page-bottom div ul li a {
    color: #f20000;
    margin: 3px
}

.home-page-bottom div ul li {
    margin: 10px 0
}

.homepage-callout {
    text-align: center;
    margin: 0 auto;
    width: 65%
}

.homepage-callout,.homepage-callout a {
    color: #fff
}

.homepage-callout p {
    font-size: clamp(16px,2vw,20px);
    line-height: 20pt;
    width: 80%;
    margin: 0 auto
}

#flip {
    display: inline-block;
    text-align: center;
    width: 290px
}

#home-product-cat-blocks {
    width: 85%;
    margin: 40px auto;
    min-height: 200px;
    clear: both;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));

}
.homepage-product-links{
    font-weight: bold;
}
.margin-container{
    max-width: 90%;
}
.rating-stars {
    margin: 0 auto
}

.btn-ggl{
    color: #fff !important;
    text-decoration: none !important;
}
.customers-say{
    font-size: 3.56rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
}
.home_product {
    max-width: 220px;
    max-height: 220px;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #e00;
    padding: 1rem;
    margin: 10px;
    aspect-ratio: 1
}

.home_product a {
    color: #333;
    font-size: 18pt
}

.home_product a img {
    margin: 0 auto
}

h5.we-can-help {
    padding: 5px;
    display: block;
    color: #fff;
    margin-top: 5px
}

#we-can-help-search {
    font-size: 1.6rem;
    color: #fff;
    width: 80%
}

.about-us-page-content {
    margin: 0 10%
}

.shop-accessory-button {
    margin-top: 30px
}

.home-customizable-screens {
    border: 1px solid #e2e2e2;
    border-radius: 10px
}

.homepage-features div,.homepage-features div img {
    float: left
}

.homepage-features div {
    clear: left;
    width: 100%;
    margin-bottom: 20px
}

.homepage-iso {
    min-width: 200px;
    margin-bottom: 30px
}

.homepage-features div h5 {
    margin-top: 0;
    margin-left: 5px
}

.homepage-features {
    min-width: 200px;
    margin: 0 auto
}

.homepage-about p {
    font-size: 15pt;
    margin: 10px;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 20px
}

.who-we-are {
    font-size: 15pt;
    font-family: Arial,Helvetica,sans-serif;
    margin-bottom: 50px;
    text-align: left;
}

.homepage-why-builders img,.homepage-why-engineers img {
    max-width: 100%
}

.homepage-why-builders,.homepage-why-engineers {
    background-color: #f9f9f9;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0;
    max-width: clamp(400px,40vw,100%);
    margin-bottom: 30px
}
.check-lists-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 650px;
}

.check-list {
    flex: 1 1 45%;  /* grow, shrink, base width */
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left
}

.check-list img,.check-list h5 {
    float: left;
    clear: left;
    line-height: 30px;
    margin-left: 0px;
}

.footer {
    background-color: #27272a;
    color: #d4d4d8
}

.footer a {
    color: #d4d4d8;
    text-decoration: none
}

.red-band-footer {
    background-color: red;
    color: #fff
}

.red-band-footer div {
    min-width: 30%
}

.margin-container>h4,.margin-container>h4 {
    font-size: 1.7em;
    text-align: center;
    color: red;
    margin: 5px
}

.margin-container {
    margin: 0 30px
}

.check-list h5 {
    margin-top: 0;
    clear: right;
    margin-left: 10px;
    font-size: 1.2em
}

.clear {
    clear: both
}

.learn-more-cta {
    margin: 15px 30px;
    float: left
}

.breadcrumbs_dark {
    color: #000;
    margin: 20px auto;
    width: 80%
}

.content-page-breadcrumbs {
    margin-left: 10%
}

.breadcrumbs {
    color: #fff
}

.content-page-breadcrumbs {
    margin-left: 10%
}

.content-page-breadcrumbs a {
    color: red
}

.numberCircle {
    border-radius: 30px;
    padding: 1px;
    border: 1px solid red;
    background-color: red;
    color: #fff!important
}

.customize a {
    color: red;
    text-decoration: underline
}

.category-description a {
    color: red
}

.toggleable>label:after {
    content: "▼";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px
}

.toggle-input {
    display: none
}

.toggle-input:not(checked)~.mega-menu {
    display: none
}

.toggle-input:checked~.mega-menu {
    display: block
}

.toggle-input:checked+label {
    color: #fff;
    background: #2c5282
}

.toggle-input:checked~label:after {
    content: "▲";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px
}

.cart-next {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(.05,#fe1a00),color-stop(1,#ce0100))!important;
    background: -moz-linear-gradient(center top,#fe1a00 5%,#ce0100 100%)!important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color: #fe1a00;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-left-radius: 6px;
    text-indent: 0;
    border: 1px solid #d83526;
    display: inline-block;
    color: #fff;
    font-family: Arial;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    height: 35px;
    line-height: 35px;
    width: 150px;
    text-decoration: none;
    text-align: center
}

.cart-next:hover {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(.05,#ce0100),color-stop(1,#fe1a00));
    background: -moz-linear-gradient(center top,#ce0100 5%,#fe1a00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color: #ce0100
}

.cart-next:active {
    position: relative;
    top: 1px
}

.cart-back {
    border: 1px solid #dcdcdc;
    text-align: center;
    border-radius: 7px;
    padding: 15px;
    background-color: #333!important;
    color: #fff;
    font-weight: 700
}

.cart-back:hover {
    background-color: red!important;
    color: #fff;
    font-weight: 700;
    border: 1px solid #dcdcdc
}

.cart-back:active {
    background-color: #333!important;
    font-weight: 700;
    border: 1px solid #dcdcdc
}

.remove-from-compare {
    clear: both;
    margin: 10px 30px;
    float: left
}

#adobe-dc-view-container {
    width: 80%;
    margin: 20px auto;
    border: 1px solid #d2d2d2
}

h5.help-me-choose {
    min-width: 150px;
    margin: 20px 20px 10px 20px
}

#command-set,#text-only,#char-by-rows,#full-color,#diagonal-size,#resolution,#touchscreen,#text-colors,#sunlight-readable,#interfaces,#size {
    width: fit-content;
    margin: 0 auto
}

.help-me-tooltip {
    margin: 0;
    float: right;
    border-radius: 15px;
    background-color: #fff;
    padding: 3px;
    font-size: small;
    font-weight: 700;
    border: 1px dotted;
    color: red;
    position: relative;
    cursor: help
}

.help-me-tooltip:before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    margin-left: 15px;
    width: 200px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-align: center;
    display: none
}

.help-me-tooltip:hover:before {
    display: block
}

@media only screen and (min-width:0px) {
    #home-product-cat-blocks {
        grid-template-columns: auto
    }

    .homepage-iso {
        min-width: 200px
    }

    .homepage-about {
        min-width: 350px
    }

    .homepage-features {
        min-width: 85%;
        margin-left: 40px
    }@    media only screen and (min-width:601px) {
        #home-product-cat-blocks{grid-template-columns: auto auto
    }

    .homepage-iso {
        min-width: 200px
    }

    .homepage-about {
        min-width: 350px
    }

    .homepage-features {
        min-width: 85%;
        margin-left: 40px
    }
}

@media only screen and (min-width:1000px) {
    #home-product-cat-blocks {
        grid-template-columns: auto auto auto
    }

    .homepage-iso {
        min-width: inherit
    }

    .homepage-about {
        min-width: inherit
    }

    .homepage-features {
        min-width: inherit;
        margin-left: none
    }
}

@media only screen and (min-width:1800px) {
    #home-product-cat-blocks {
        grid-template-columns: auto auto auto
    }
}

@media only screen and (min-width:1920px) {
    #home-product-cat-blocks {
        grid-template-columns: auto auto auto auto auto auto
    }

    .home_product {
        width: 18rem
    }
}}