@charset "utf-8";
/* CSS Document */

@font-face {
font-family: headings;
/* src: url(fonts/Raleway-Light.ttf); */
src: url(fonts/bahnschrift.ttf);
}

@font-face {
font-family: paragraphs;
/* src: url(fonts/Raleway-Light.ttf); */
src: url(fonts/tahoma.ttf);
}

    
HTML {
font-size: 1.0em;
min-height: 100%;
position: relative;
}

HTML, BODY, HEADER, MAIN, FOOTER, ARTICLE, H1, H2, H3, H4, H5, H6, P, UL, LI, DL, DT, DD, TABLE, TH, TR, TD, DIV, VIDEO {
color: #000;
margin: 0em;
padding: 0em;
border: 0em;
font-size: 100%;
}

BODY {
background-color: white;
font-family: "verdana", helvetica, sans-serif;
min-height: 100%;
overflow-y: scroll;
padding-top: 2.5em;
padding-top: 0em;
overflow-x: hidden;
  
}

H1, H2, H3, H4, P, SECTION.logo, DIV.sitemap LI, DIV.picture P, DIV.address {
padding-left: 4%;
padding-right: 4%;
}

H1, H2, H3, H4 {
font-family: 'headings', sans-serif;
font-weight: normal;
margin-bottom: 0.25em;
scroll-margin-top: 100px;
}

P, LI, TH, TD {
font-family: 'paragraphs', sans-serif;
font-weight: normal;
/* -webkit-text-size-adjust: none; /* preventing iPhone from scaling text automatically */
font-size: 90%;
margin-bottom: 1em;
}

H1 {
clear: both;
margin-top: 70px;
padding-top: 1em;
font-size: 200%;
}

SECTION.row {
column-count: 1;
}

DIV.picture.wide {
margin-top: 0em;
float: none;
} 

DIV.picture.padded IMG {
width: 90%;
padding-left: 5%;
padding-right: 5%;
} 

H2 {
font-size: 150%;
margin-top: 1.5em;
}

H1 + H2 {
margin-top: 0.3em;
}

H3 {
margin-top: 0.2em;
margin-bottom: 0.3em;
font-size: 130%;
}

H4 {
font-size: 120%;
}

H5	{
font-size: 110%;
}

IMG {
width: 100%; 
}

TABLE {
border-collapse: separate;
border-spacing: 0;
 --radius: 10px;
}

TR:nth-child(even) {
background-color: #83CAEB;
}

TR:nth-child(odd) {
background-color: #C1E4F5;
}

TH {
background-color: hsl(194, 100%, 25%);
color: white;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}

THEAD TR:first-child TH:first-child {
border-top-left-radius: var(--radius);
}

THEAD TR:first-child TH:last-child {
border-top-right-radius: var(--radius);
}

TBODY TR:last-child TH:first-child {
border-bottom-left-radius: var(--radius);
}

TBODY TR:last-child TD:last-child {
border-bottom-right-radius: var(--radius);
}

TD, TH {
border: 1px solid white;
padding: 1%;
vertical-align: top;
text-align: left;
}

TH A {
color: white;
text-decoration: none;
}

TH A:hover {
color: rgb(105, 215, 230);
}

.table-links a:hover {
  text-decoration: underline; /* Optional: hover effect */
}
}

DIV.picture {
position: relative;
}

DIV.picture.transparent {
padding-left: 5%;
padding-right: 5%;
}

DIV.picture IMG {
width: 100%;
margin: 0em;
padding: 0em;
}

DIV.picture P {
font-style: italic;
margin: 0em;
margin-bottom: 1em;
font-size: 90%;
}

DIV.employee {padding-left: 4%;margin-bottom: 2em;}

DIV.employee P.name {
font-family: 'headings', sans-serif;
font-weight: normal;
font-size: 150%;
}

P.debug {
font-size: 12px;
font-family: monospace;
margin: 0px;
padding: 0px;
color: magenta;
background-color: #020;
}

UL	{
margin-left: 4%;
margin-bottom: 4%;
padding-left: 1em;
}

OL {
}

LI	{
list-style-type: none;
}

ARTICLE LI	{
list-style-type: disc;
}

SVG {
pointer-events: none;
}

A	{
color: hsl(194, 100%, 40%);
text-decoration: none;
}

A.maillink	{
}

A:hover	{
color: hsl(194, 100%, 30%);
}

H2 A {
color: black;
font-weight: normal;
}

EM {
font-weight: bold;
}

EM A {
color: red;
}

EM A:hover {
color: hsl(194, 100%, 30%);
}

SECTION.logo {
margin-bottom: 4em;
}

HEADER {
position: fixed;
width: 100%;
top: 0em;
height: 4em;
z-index: 20;
}

NAV {
background-color: hsl(194, 100%, 32%);
top: 0em;
left: 0em;
font-size: 1em;
text-transform: uppercase;
z-index: 20;
height: 70px;
}

HEADER NAV DIV.logo {
float: left;
width: 4em;
top: 0.4em;
padding-top: 0.6em;
padding-left: 1em;
}

HEADER NAV DIV.logo .wifi {
fill: white;
}

SECTION.logo DIV.tagline {
position: relative;
width: 100%;
}

P#corona {
background-color: red;
padding-top: 5.4em;
padding-bottom: 0.5em;
}

P#corona {
color: white;
font-size: 0.8em;
}


/* LOGO special case for the landing page */
BODY[page="home"] SECTION.logo DIV {
padding-top: 1.0em;
margin-left: auto;
margin-right: auto;
width: 40%;
}

BODY[page="home"] SECTION.logo DIV.logo {padding-top: 6em;}

BODY[page="home"] SECTION.logo DIV.logo .wifi  {
fill: hsl(194, 100%, 32%);
}

BODY[group="patents"] DIV#main, BODY[page="patents"]  DIV#main {
background-color: #c0e4f4;
background-image: url("/pages/patents/connector/watermark_connector.png");
background-repeat: repeat;
background-position: top left;
padding-bottom: 1em;
}
    
    
NAV SVG,
NAV A,
#language_selector::after {
fill: black;
color: black;
}

#language_selector A:hover {
color: white;
}




/* MENU */

.menubar {
float: right;
right: 0em;
width: 100%;
display: block;
}

#menu {
margin-right: 0em;
display: none;
float: right;
top: 0em;
right: 0em;
width: 100%;
z-index: 2000;
padding: 0em;
}

BODY.menu_is_open #menu {
display: block;
}

#menu LI {
margin: 0px;
padding-left: 0.5em;
background-color: #141414;
}

#menu>LI.menu_item {
border-top: 1px solid #555;
border-bottom: 1px solid #555;
padding-top: 0.7em;
padding-bottom: 0.7em;
color: #FFF;
}

#menu>LI.menu_item:first-of-type {
border-top-style: none;
}

#menu>LI.menu_item:last-of-type {
border-bottom-style: none;
}

#menu A {
font-size: 1.4em;
color: #AAA;
}

#menu LI.menu_group_header>A {
color: #FFF;
display: block;
padding-top: 0.3em;
padding-bottom: 0.3em;
}

#menu UL A {
color: #888;
font-size: 1.2em;
}

#menu UL A:hover {
color: #FFF;
font-size: 1.2em;
}

#menu UL {
margin: 0px;
overflow: hidden;
}

#menu LI LI {
padding-top: 0.5em;
padding-bottom: 0.5em;
}

LI.menu_group_header UL {
height: 0px;
}

LI.menu_group_header.expanded UL {
height: auto;
}

LI.menu_group_header>A::after {
content: "";
font-size: 1em;
width: 0.4em;
height: 0.4em;
display: inline-block;
position: absolute;
right: 1em;
margin-top: 0.5em;
border-right: solid #AAA 0.1em;
border-bottom: solid #AAA 0.1em;
transform: rotate(45deg);
transition: transform .25s;
}

LI.menu_group_header>A:hover::after {
border-right-color: #FFF;
border-bottom-color: #FFF;
}

BODY.menu_is_open LI.menu_group_header.expanded>A::after {
transform: rotate(225deg);
transition: transform .25s;
}




/* MENU BUTTON */

#menu_button {
float: right;
width: 3em;
height: 100%;
opacity: 0.5;
padding-right: 0.0em;
position: relative;
top: 0.45em;
left: 0.75em;
}

#menu_button:hover {
cursor: pointer;
opacity: 1.0;
}

#menu_button:hover LI {
background-color: white;
}

#menu_button UL {
margin: 0em;
padding: 0em;
height: 100%;
}

#menu_button LI {
background-color: black;
content: "";
font-size: 0.8em;
width: 2.5em;
height: 2px;
position: absolute;
transition: 0.5s;
}

#menu_button LI:first-of-type {
top: 0em;
}

#menu_button LI:nth-of-type(2) {
top: 1em;
}

#menu_button LI:last-of-type {
top: 2em;
}

BODY.menu_is_open #menu_button {
opacity: 1.0;
}

BODY.menu_is_open #menu_button LI {
background-color: white;
}

BODY.menu_is_open #menu_button LI:first-of-type {
top: 1em;
transform: rotate(45deg);
}

BODY.menu_is_open #menu_button LI:nth-of-type(2) {
width: 0em;
opacity: 0;
}

BODY.menu_is_open #menu_button LI:last-of-type {
top: 1em;
transform: rotate(-45deg);
}

DIV.menuicon {
width: 3em;
height: 3em;
float: right;
z-index: 10;
opacity: 0.75;
position: relative;
margin: 0.5em;
}

DIV.menuicon:hover {
cursor: pointer;
opacity: 1.0;
}

DIV.menuicon DIV.bg {
background-color: white;
opacity: 0.5;
width: 3em;
height: 3em;
border-radius: 0.5em;
position: absolute;
top: 0em;
left: 0em;
z-index: 10;
}

DIV.menuicon DIV.content {
position: absolute;
z-index: 20;
text-align: center;
width: 2.5em;
margin: 0.25em;
}

#phone_icon {
/* animation-name: ringing; */
animation-name: unset;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 5s;
}

BODY.call_flyout_is_open #phone_icon {
animation-name: unset;
opacity: 1.0;
}

BODY.call_flyout_is_open #phone_icon SVG {
fill: white;
}

BODY.call_flyout_is_open DIV#call_now {
display: block;
}

#phone_icon A {
display: inline-block;
text-transform: none;
border: 2px solid white;
margin: 0em;
}

#phone_icon P.phone SPAN.close {
display: block;
position: absolute;
font-size: 2em;
color: white;
background-color: hsl(194, 100%, 30%);
margin-right: 0.2em;
top: 0em;
right: 0em;
z-index: 500;
}

#estimatorOpenButton {
animation-name: unset;
}


#estimatorOpenButton[drawattention=yes] {
animation-name: ringing;
animation-duration: 5s;
animation-iteration-count: 2;
animation-delay: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes ringing {
      0% {transform: rotate(   0deg) scale(1.0, 1.0);}
      1% {transform: rotate(  40deg) scale(1.8, 1.8);}
      3% {transform: rotate( -10deg) scale(1.4, 1.4);}
      5% {transform: rotate(  40deg) scale(1.8, 1.8);}
      7% {transform: rotate( -10deg) scale(1.4, 1.4);}
      9% {transform: rotate(  40deg) scale(1.8, 1.8);}
     11% {transform: rotate( -10deg) scale(1.4, 1.4);}
     13% {transform: rotate(  40deg) scale(1.8, 1.8);}
     15% {transform: rotate( -10deg) scale(1.4, 1.4);}
     16% {transform: rotate(   0deg) scale(1.0, 1.0);}
    100% {transform: rotate(   0deg) scale(1.0, 1.0);}
}

/* Standard syntax */
@keyframes ringing {
      0% {transform: rotate(   0deg) scale(1.0, 1.0);}
      1% {transform: rotate(  40deg) scale(1.8, 1.8);}
      3% {transform: rotate( -10deg) scale(1.4, 1.4);}
      5% {transform: rotate(  40deg) scale(1.8, 1.8);}
      7% {transform: rotate( -10deg) scale(1.4, 1.4);}
      9% {transform: rotate(  40deg) scale(1.8, 1.8);}
     11% {transform: rotate( -10deg) scale(1.4, 1.4);}
     13% {transform: rotate(  40deg) scale(1.8, 1.8);}
     15% {transform: rotate( -10deg) scale(1.4, 1.4);}
     16% {transform: rotate(   0deg) scale(1.0, 1.0);}
    100% {transform: rotate(   0deg) scale(1.0, 1.0);}
}

#language_selector .menuicon {
display: none;
}

#language_selector.expanded .menuicon {
display: block;
}

#language_selector .menuicon:first-of-type {
display: block;
}

#language_selector .menuicon:first-of-type .bg {
background-color: white;
}

#language_selector .menuicon:first-of-type .content A {
color: black;
}

#language_selector .menuicon .bg {
background-color: black;
}

#language_selector .menuicon .content A {
color: white;
position: relative;
top: 0.3em;
font-size: 135%;
}

#language_selector {
float: right;
position: relative;
width: 3em;
}

#language_selector:hover::after {
border-right-color: #FFF;
border-bottom-color: #FFF;
}

#language_selector.expanded::after {
top: 1.3em;
transform: rotate(225deg);
transition: transform .25s;
}

.previousNext {
font-size: 300%;
position: fixed;
top: 50%;
color: white;
opacity: 0.25;
background-color: #888;
border-radius: 0.3em;
padding: 0.1em 0.3em 0.2em;
z-index: 10;
}

.previousNext:hover {
color: white;
opacity: 0.75;
}

.previousNext.previous {
left: 0.5em;
}

.previousNext.next {
right: 0.5em;
text-align: right;
}

.previousNext DIV {
position: absolute;
font-size: 30%;
font-family: 'headings', sans-serif;
font-weight: normal;
width: 11em;
top: -3em;
color: black;
padding: 0.3em 0.5em;
border-radius: 0.3em;
margin: 1em;
background-color: #EEE;
opacity: 0;
transition: 0.75s;

}

.previousNext:hover DIV {
opacity: 1;
top: -2em;
}


.previousNext.next DIV {
right: 0em;
}

FOOTER {
clear: both;
position: static;
width: 100%;
}

.maxwidth {
max-width: 1000px;
margin: auto;
}

DIV.sitemap {
position: relative;
background-color: black;
width: 100%;
padding-bottom: 0.5em;
font-size: 110%;
}

DIV.sitemap DIV {
display: inline-block;
width: 44%;
vertical-align: top;
margin-top: 1em;
padding-left: 4%;
}

DIV.sitemap UL {
margin-left: 0em;
}

DIV.sitemap LI {
padding-left: 0em;
margin-top: 0.1em;
margin-bottom: 0.3em;
}

DIV.sitemap H3 {
padding-left: 0em;
color: #FFF;
}

DIV.sitemap A {
color: #888;
font-size: 80%;
}

DIV.sitemap A:hover {
color: #FFF;
}

DIV.copyright {
padding-top: 1.5em;
padding-bottom: 1.5em;
text-align: center;
color: #888;
font-size: 70%;
vertical-align: top;
background-color: black;
}

DIV.copyright A {
color: #966503;
}

DIV.copyright A:hover {
color: #EEAB42;
}

DIV.copyright SPAN {
white-space: nowrap;
}

#call_now H2 {
text-align: center;
}

DIV.call_us {
max-width: 830px;
background-color: hsl(194, 100%, 32%);
}

DIV.call_us P {
text-align: center;
margin: 0em;
width: 97%;
clear: both;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
padding-left: 0.5em;
}

P.phone {
width: 104%;
margin: 0em;
padding: 0.5em 0em;
clear: both;
}

P.phone A {
width: 50%;
text-align: center;
padding: 0.5em 2em;
color: black;
background-color: hsl(194, 100%, 40%);
border-radius: 8px;
margin: 0.5em auto;
display: block;}

P.phone A:hover {
background-color: hsl(194, 100%, 27%);
color: white;
cursor: pointer;
}

P.address {
margin-bottom: 0em;
}

DIV.quote, DIV.quotecard {
background-color: hsl(194, 60%, 80%);
position: relative;
padding: 2em 2em 0.5em;
border-radius: 1em;
margin-top: 2em;
margin-bottom: 2em;
margin-left: 6%;
margin-right: 6%;
color: white;
font-style: italic;
clear: both;
}

DIV.card {
margin-bottom: 2em;
}

DIV.card > DIV {
border-radius: 1em;
}

DIV.aboutcard {
background-color: hsl(194, 600%, 90%);
border: 1px solid hsl(194, 600%, 70%);
}

DIV.estimatorcard {
background-color: hsl(94, 60%, 90%);
border: 1px solid hsl(94, 60%, 70%);
}

DIV.estimatorcard A {
color: hsl(94, 60%, 30%);;
}

DIV.card::after {
content: "";
display: table;
clear: both;
}

DIV.card DIV.quote, DIV.card DIV.quotecard {
margin-left: 0%;
margin-right: 0%;
}

DIV.card DIV.picture IMG {
width: 100%;
padding: 0em;
}

.cardcalculator {
width: 50%;
height: auto;
float: right;
}

DIV.quote:before, DIV.quotecard:before {
content: "‘‘";
position: absolute;
top: -0.30em;
left: 0em;
font-family: "Georgia", "Roboto", sans-serif;
font-size: 1000%;
margin: 0em;
padding-top: 0em;
padding-bottom: 0em;
padding-left: 0em;
padding-right: 1em;
height: 10%;
color: #666;
}

DIV.quote P, DIV.quotecard P {
padding-left: 0em;
}

DIV.quote P.quote_source, DIV.quotecard P.quote_source {
font-style: normal;
font-family: monospace;
text-align: right;
color: black;
}

DIV.address {
padding-right: 2em;
overflow: hidden;
}

DIV.address IMG {
width: 100%;
max-width: 500px;
float: left;
padding-right: 2em;
margin: 0em;
padding: 0em;
padding-right: 1em;
border-style: none;
}

DIV.address DIV {
overflow: hidden;
min-width: 33%;
}

DIV.address P {
display: block;
font-style: normal;
color: black;
margin: 0em;
padding: 0em;
}

DIV.centerflow {
margin: 2em;
}

DIV.centerflow IMG {
width: 100%;
}

DIV.main {
background: white;
position: relative;
padding-top: 1em;
}
    
UL.long_text_list {
}

UL.long_text_list LI {
margin-left: 2em;
list-style-type: decimal;
padding: 0.5em;
}

/* FLYOUTS */

DIV#cover {
display: none;
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.70;
z-index: 50;
top: 0em;
}

DIV.flyout {
display: none;
position: relative;
width: 25em;
max-width: 90%;
margin: 0 auto;
top: 3em;
z-index: 100;
border-radius: 0.4em;
overflow: hidden;
}

DIV.flyout HEADER {
position: relative;
}

DIV.flyout H3 {
padding-top: 1.3em;
padding-left: 5.5em;
margin: 0;
color: white;
font-size: 110%;
}

DIV.flyout BUTTON.submit {
display: block;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
border: none;
height: 3em;
border-radius: 0.4em;
color: white;
background: #0085BF;
font-size: 1em;
padding-left: 2em;
padding-right: 2em;
}

DIV.flyout BUTTON.submit:disabled {
background: #DDD;
color: #AAA;
}

DIV.flyout BUTTON:not(:disabled):hover {
color: white;
cursor: pointer;
}

DIV#feedback {
right: 0em;
top: 4em;
position: fixed;
z-index: 25;
width: 12em;
}

DIV#feedback #feedbackOutput {
background-color: black;
color: white;
text-align: center;
opacity: 0.75;
padding: 0.3em;
position: relative;
animation-name: feedbackOutput;
animation-duration: 8s;
font-size: 70%;
}

DIV#feedback #feedbackOutput:last-of-type {
border-bottom-left-radius: 0.7em;
}

@keyframes feedbackOutput {
0% {
    top: 1em;
    background-color: white;
    color: black;
    opacity: 0;
}
5% {
    top: 0em;
    background-color: black;
    color: white;
    opacity: 0.75;
}
95% {
    top: 0em;
    opacity: 0.75;
}
100% {
    opacity: 0;
}




}

BUTTON.close_button {
position: absolute;
background: none;
font-weight: 100;
top: -0.4em;
right: -0.15em;
height: 2em;
border: none;
margin: 0em;
padding: 0em 0.3em;
font-size: 2em;
color: black;
}

BUTTON.close_button:after {
  content: "\2573";
}

BODY.call_flyout_is_open DIV#cover,
BODY.calculating DIV#cover {
display: block;
}

BODY.calculating DIV#priceCalculator {
display: block;
padding-bottom: 1em;
background-color: white;
}

#priceCalculator H3 {
display: inline-block;
padding-left: 1em;
}

#priceCalculator MAIN>P:first-of-type {
margin-top: 1em;
}

FORM {
padding: 1em;
}

FIELDSET {
background: #EEE;
margin-left: 0.2em;
margin-right: 0.2em;
margin-top: 1em;
border-radius: 0.4em;
overflow: hidden;
border: none;
padding: 0.75em;
padding-top: 0em;
}

FIELDSET.mandatory_fields {
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
}

FIELDSET.optional_fields {
margin-top: 0em;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
transition: 0.25s;
max-height: 28em;
}

FIELDSET.optional_fields.collapsed {
transition: 0.25s;
max-height: 1.3em;
}

FIELDSET.optional_fields P.less {
display: block;
}

FIELDSET.optional_fields.collapsed P.less {
display: none;
}

FIELDSET.optional_fields.collapsed P.more {
display: block;
}

FIELDSET.optional_fields P.more {
display: none;
}

LABEL[for="estimatorOpenedBy"],
INPUT#estimatorOpenedBy {
display: none;
}

DIV.moreless {
text-align: center;
position: relative;
font-size: 0.85em;
height: 1.5em;
}

DIV.moreless P {
margin-bottom: 0em;
}

DIV.collapse_arrow {
    width: 1em;
        transform: rotate(0deg);
   -moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: 0.25s;
}

FIELDSET.optional_fields DIV.moreless_arrow {
border-top: 0em solid #888;
border-bottom: 0.8em solid #888;
}

FIELDSET.optional_fields.collapsed DIV.moreless_arrow {
border-top: 0.8em solid #888;
border-bottom: 0em solid #888;
}

DIV.moreless_arrow {
border-left: 2.0em solid transparent;
border-right: 2.0em solid transparent;
width: 0em;
height: 0em;
margin: auto;
}

DIV.moreless:hover {
cursor: pointer;
}

DIV.moreless:hover DIV.moreless_arrow {
border-top-color: #444;
border-bottom-color: #444;
}

FIELDSET.optional_fields.collapsed DIV.collapse_arrow {
        transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transition: 0.25s;
}

FIELDSET.optional_fields.collapsed DIV.less {
top: -1.5em;
}

FIELDSET.optional_fields.collapsed DIV.more {
top: 0em;
}


LABEL {
display: block;
width: 55%;
margin-top: 1.5em;
margin-right: 0em;
margin-bottom: 0em;
font-size: 70%;
padding-left: em;
opacity: 0.75;
text-align: left;
}

INPUT, SELECT {
box-sizing: border-box;
width: 100%;
padding: 0.5em;
display: inline-block;
border: none;
border-radius: 0px;
font-size: 0.75em;
-moz-appearance: none; 
-webkit-appearance: none; 
appearance: none;
background-color: white;
outline: solid red 1px;
}

INPUT:valid, SELECT:valid {
outline: none;
}

SELECT {
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjsgZmlsbC1vcGFjaXR5PSIwLjAifS5jbHMtMntmaWxsOiM0NDQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5hcnJvd3M8L3RpdGxlPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjQuOTUiIGhlaWdodD0iMTAiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMS40MSA0LjY3IDIuNDggMy4xOCAzLjU0IDQuNjcgMS40MSA0LjY3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjMuNTQgNS4zMyAyLjQ4IDYuODIgMS40MSA1LjMzIDMuNTQgNS4zMyIvPjwvc3ZnPg==) no-repeat 95% 50%;
background-position: right;
text-align: left;
-moz-appearance: none; 
-webkit-appearance: none; 
appearance: none;
background-color: white;
}

INPUT[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: auto;
border: none;
border-radius: 4px;
cursor: pointer;
}

INPUT[type=submit]:hover {
    background-color: #45a049;
}

OPTION {
/* right align options in the dropdown but not in the box itself */
/* direction: rtl; */
}

BODY.construction  .check {
color: red;
}

.check SPAN {
display: none;
}

BODY.construction .check SPAN {
color: black;
border: 1px solid black;
border-radius: 1.4em;
height: 1.3em;
width: 1em;
position: relative;
top: -1em;
left: -1em;
margin: 0em;
display: inline-block;
text-align: center;
font-size: 0.6em;
font-weight: bold;
padding: 0.2em 0.4em 0.3em 0.4em;
}

UL.mediatest {
display: block;
/* REMARK / UNREMARK display none TO TURN RESOLUTION GIZMO ON OR OFF */
display: none;
font-size: 11px;
position: fixed;
width: 12em;
margin-left: 0em;
top: 17em;
left: 0em;
z-index: 100;
}

UL.mediatest LI {
margin: 0px;
color: green;
background-color: black;
opacity: 0.6;
}

UL.mediatest LI#deviceWidth { color: yellow; opacity: 1.0; }
UL.mediatest LI#deviceHeight { color: yellow; opacity: 1.0; }

DIV.seeEstimateButton {
position: absolute;
width: 80%;
max-width: 20em;
height: 4em;
top: 40%;
left: 2em;
}

DIV.seeEstimateButton:hover {
cursor: pointer;
}

DIV.seeEstimateButton DIV.bg {
background-color: black;
width: 100%;
height: 100%;
opacity: 0.4;
position: absolute;
border-radius: 0.4em;
}

DIV.seeEstimateButton:hover DIV.bg {
opacity: 0.75;
}

DIV.seeEstimateButton DIV.content {
margin-top: -0.6em;
top: 50%;
width: 100%;
height: 100%;
position: absolute;
color: white;
font-size: 0.9em;
text-align: center;
}

COL.leftheader {
    width: 90px;
}

COL.auto {
    width: auto;
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    UL.mediatest LI#landscape { color: orange; opacity: 1.0; }
}

@media screen and (min-width: 751px) and (min-device-width: 1000px) {
    UL.mediatest LI#videoready { color: orange; opacity: 1.0; }
    IMG#background_image { display: none; }
    VIDEO#background_video { display: block; }
    TABLE {margin: 1em; }
    COL.leftheader { width: 130px; }
}

    }

@media {
    UL.mediatest LI#box0 { color: lime;  opacity: 1.0; }
}

@media screen and (min-width: 320px) {
    UL.mediatest LI#box320 { color: lime; opacity: 1.0; }
    SECTION.logo { margin-bottom:3em; }
}

@media screen and (min-width: 400px) {
    H1 {font-size: 300%; }
    H2 {font-size: 180%; }
    UL.mediatest LI#box400 { color: lime; opacity: 1.0; }
    SECTION.logo { margin-bottom: 4em; }
    DIV.flyout H3 {font-size: 130%; padding-top: 1em;}
    HEADER NAV DIV.logo {width: 5em; padding-top: 0.4em;}
}

@media screen and (min-width: 500px) {
    UL.mediatest LI#box500 { color: lime; opacity: 1.0; }
}

@media screen and (min-width: 599px) {
    UL.mediatest LI#box599 { color: lime; opacity: 1.0; }
    HTML {font-size: 1.0em;}
/*    #menu LI {font-size: 130%;} */
    DIV.sitemap { font-size: 100%; }
    DIV.sitemap DIV { width: 20%;}
    P.phone A { font-size: 150%; margin-left: 15%; margin-right: 15%;}
    DIV.employee {max-width: 16em;
}
}

@media screen and (min-width: 751px) {
    UL.mediatest LI#box751 { color: lime; opacity: 1.0; }
    HTML { font-size: 1.1em;}
    #menu LI {font-size: 70%;}
    #menu LI LI {font-size: 100%;}
    #menu {
        min-width: unset;
        width: 15em;
    }
    DIV.sitemap { font-size: 80%;}
    DIV.employee {max-width: 29%;}
    DIV.call_us {max-width: 1000px;}
    .previousNext { opacity: 0.5; }
}

@media screen and (min-width: 1000px) {
    SECTION.row {
        column-count: 2;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 1em;
        padding-bottom: 2em;
        background-color: hsla(200deg 75% 32% / 20%);
        margin-bottom: 3em;
        margin-left: 1em;
        margin-right: 1em;
        border-radius: 2em;
    }
    SECTION.row.spanned {
        column-count: 1;
    }
    SECTION.row P, SECTION.row H3 {
        padding: 0%;
    }
    UL.mediatest LI#box1000 { color: lime; opacity: 1.0; }
    DIV.picture {
        margin-right: 0%;
        float: left;
    }
    #main > ARTICLE > DIV.picture.padded {
        border: solid 1px green;
        padding-left: 0px;
        padding-right: 0px;
    }
    DIV.picture.right {
        float: right;
    }
    DIV.picture.noflow {
        float: none;
    }
    DIV.picture.transparent {
        padding-left: 0%;
        padding-right: 0%;
    }
    DIV.picture.wide {
        width: 92%;
    }
    DIV.picture.wide IMG {
        width: 100%;
    }
    DIV.quote.narrow, DIV.quotecard.narrow {
        clear: none;
        width: 40%;
        float: right;
        margin-left: 0em;
        margin-right: 2.5em;
    }

    DIV.picture P {
        padding-right: 0%;
        margin-bottom: 1em;
    }
    NAV DIV.logo, NAV DIV.menu_button {
        padding-left: 4%;
        padding-right: 4%;
    }
    
    .maxwidth DIV.address IMG {
        margin-left: 0em;
    }

    #menu {
        position: relative;
    }

    DIV.card {
        float: left;
        width: 31%;
        margin-right: 3.5%;
        box-sizing: border-box;
    }
    DIV.card:last-child {
        margin-right: 0%;
    }
    DIV.card DIV.quote.narrow, DIV.card DIV.quotecard.narrow {
        float: none;
        width: auto;
    }
    DIV.card DIV.employee {
        float: none;
        width: auto;
        max-width: none;
        padding-left: 0%;
    }
}

@media screen and (min-width: 1500px) {
    UL.mediatest LI#box1500 { color: lime; opacity: 1.0; }
}

















/* ############################################################################ */

SECTION.video {
position: relative;
display: block;
overflow: hidden;
top: 0px;
left: 0px;
}

IMG#background_image {
display: block;
width: 100%;
position: static;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border-style: none;
z-index: -10;
}

VIDEO#background_video {
display: none;
width: 100%;
position: static;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border-style: none;
z-index: -10;
}

DIV.title {
position: absolute;
top: 30%;    
width: 100%;
text-align: center;
}

DIV.title H1 {
color: white;
margin-bottom: 0em;
}

DIV.title H2 {
color: white;
margin-top: 0em;
}

.logo_rings {
display: block;
position: absolute;
}

DIV.logo_rings DIV {
position: absolute;
display: block;
border: .05em solid #FFF;
transition: 1.0s;
}

DIV#bg_logo_1 DIV {
border: .05em solid #000;
}

DIV#bg_logo_1 {
left: 10%;
top: 10%;
}

DIV#bg_logo_2 DIV {
border: .05em solid #000;
}

DIV#bg_logo_2 {
right:5%;
top: 50%;
}

DIV#menu_logo_1 {
left: 10%;
top: 10%;
}

DIV#menu_logo_2 {
left: 25%;
top: 60%;
}

DIV#menu_logo_3 {
left: 40%;
top: 40%;
}

DIV#menu_logo_4 {
left: 55%;
top: 75%;
}

DIV#menu_logo_5 {
left: 70%;
top: 30%;
}

DIV#menu_logo_6 {
left: 90%;
top: 90%;
}