/* fonts */

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-Light.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-ExtraLight.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-Black.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-Medium.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-SemiBold.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed SemiCond';
    src: url('fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-Thin.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/SairaSemiCondensed-ExtraBold.woff2') format('woff2'),
        url('fonts/SairaSemiCondensed-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-BlackItalic.woff2') format('woff2'),
        url('fonts/Saira-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Bold.woff2') format('woff2'),
        url('fonts/Saira-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Black.woff2') format('woff2'),
        url('fonts/Saira-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-BoldItalic.woff2') format('woff2'),
        url('fonts/Saira-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Italic.woff2') format('woff2'),
        url('fonts/Saira-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Light.woff2') format('woff2'),
        url('fonts/Saira-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-MediumItalic.woff2') format('woff2'),
        url('fonts/Saira-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Medium.woff2') format('woff2'),
        url('fonts/Saira-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-ExtraLight.woff2') format('woff2'),
        url('fonts/Saira-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-ExtraLightItalic.woff2') format('woff2'),
        url('fonts/Saira-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-ExtraBold.woff2') format('woff2'),
        url('fonts/Saira-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-LightItalic.woff2') format('woff2'),
        url('fonts/Saira-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-ExtraBoldItalic.woff2') format('woff2'),
        url('fonts/Saira-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Thin.woff2') format('woff2'),
        url('fonts/Saira-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Regular.woff2') format('woff2'),
        url('fonts/Saira-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-ThinItalic.woff2') format('woff2'),
        url('fonts/Saira-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-SemiBold.woff2') format('woff2'),
        url('fonts/Saira-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/Saira-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}










/* basics */

body {margin:0; padding:0;}
#content {width:100%; padding:30px; max-width:1600px; margin-left:auto; margin-right:auto;}
p, li, .links, #faq p {font-size:20px;}
p,li,.links {font-family: 'Saira'; line-height:1.6em;} 
#header {background-color:#222; width:100%; padding:30px; margin:0; position:relative;}
div,* {box-sizing:border-box;}
a, a:link, a:visited {color:#fa4616; font-weight:600; text-decoration:none;}
.linklike {cursor:pointer;}
.linkverylike {cursor:pointer; color:#222; font-weight:600;}
.nomarginbottom {margin-bottom:0;}
.nomargintop {margin-top:0;}

.links a {color:inherit; font-weight:400;}
.links a:hover {color:#fa4616;}

a:hover {color:#ff967a;}
.linkverylike:hover {color:#fa4616;}
.center {text-align:center;}
.hidden {display:none;}

hr {  border-color: #222;  border-style: dashed;  border-width: 1px 0 0; }

h1, h2, h3, h4, h5, h6 {font-family: 'Saira'; font-weight: bold;}
h1 {font-size:80px; margin:0; line-height:1.2em; text-align:center;}
h2 {font-size:45px; line-height:1.3em;}
h3 {font-size:35px; line-height:1.3em;}
h4 {font-size:28px; line-height:1.3em;}
#resultssummary, #resultssummary2 {text-align:center;}
#resultssummary2 {margin-bottom:0;}

@media only screen and (min-width:1201px) and (max-width:1600px) {
p, li, .links, #faq p {font-size:18px;}
h1 {font-size:80px;}
h2 {font-size:40px;}
h3 {font-size:30px;}
h4 {font-size:26px;}
#content {padding:20px;}
}
@media only screen and (min-width:1001px) and (max-width:1200px) {
p, li, .links, #faq p {font-size:18px;}
h1 {font-size:72px;}
h2 {font-size:32px;}
h3 {font-size:28px;}
h4 {font-size:24px;}
#content {padding:15px;}
}
@media only screen and (min-width:801px) and (max-width:1000px) {
p, li, .links, #faq p {font-size:17px;}
h1 {font-size:60px;}
h2 {font-size:26px;}
h3 {font-size:26px;}
h4 {font-size:22px;}
.desktoponly {display:none;}
#content {padding:15px;}
}
@media only screen and (min-width:601px) and (max-width:800px) {
p, li, .links, #faq p {font-size:14px;}
h1 {font-size:48px;}
h2 {font-size:20px;}
h3 {font-size:22px;}
h4 {font-size:20px;}
.desktoponly {display:none;}
#content {padding:10px;}
}
@media only screen and (max-width:600px) {
p, li, .links, #faq p {font-size:16px;}
h1 {font-size:40px;}
h2 {font-size:20px;}
h3 {font-size:20px;}
h4 {font-size:18px;}
.desktoponly {display:none;}
#content {padding:10px;}
}



/* header */

.brechner-header-logo {width:50%; max-width:600px;}

.st-title {font-family: 'Saira SemiCondensed SemiCond'; font-weight: bold; font-style: normal; font-size:160px; text-align:center; margin-top:0; margin-bottom:0; line-height:1em; color:#ffeb6b; text-transform:uppercase; margin-bottom:.125em;}

.st-description {font-family: 'Saira SemiCondensed SemiCond'; font-weight: bold; font-style: normal; font-size:60px; text-align:center; margin-top:0; margin-bottom:0; line-height:1.2em; color:#fff; text-transform:uppercase;}

.marker-highlight{
  position:relative;
  background-color:#ffeb6b;
  padding:0 15px 0 15px;
}


.yellowtopmenu {color:#f19b80 !important;}
.yellowtopmenu:hover {color:#fa572d !important;}

@media only screen and (min-width:1201px) and (max-width:1600px) {
#header {padding:30px;}
.st-title {font-size:130px;}
.st-description {font-size:50px;}
}
@media only screen and (min-width:1001px) and (max-width:1200px) {
#header {padding:20px;}
.st-title {font-size:120px;}
.st-description {font-size:44px;}
}
@media only screen and (min-width:801px) and (max-width:1000px) {
#header {padding:20px;}
.st-title {font-size:90px;}
.st-description {font-size:40px;}
}
@media only screen and (min-width:701px) and (max-width:800px) {
#header {padding:15px;}
.st-title {font-size:80px;}
.st-description {font-size:36px;}
}

@media only screen and (min-width:601px) and (max-width:700px) {
#header {padding:10px;}
.st-title {font-size:45px;  margin-bottom:.25em;}
.st-description {font-size:28px;}
}

@media only screen and (max-width:600px) {
#header {padding:10px; text-align:center;}
.st-title {font-size:43px; margin-bottom:.25em;}
.st-description {font-size:28px;}
}


@media only screen and (max-width:500px) {
#header {padding:10px; text-align:center;}
.st-title {font-size:35px; margin-bottom:.25em;}
.st-description {font-size:20px; margin-bottom:.25em}
}




@media only screen and (max-width:600px) {
.st-title {width: auto; display:inline-block;}
.st-description {font-size:24px; clear:both;}
.marker-highlight{padding:0 10px 0 10px; line-height:1 !important;}
}


/* front page: intro */

#intro {width:100%; background:#555; margin:0; color:#fff;}
#introinner {max-width:1200px; margin-left:auto; margin-right:auto; padding-top:30px;}

#introinner h4 {text-transform:uppercase; font-weight:700; font-size:42px; margin:0; text-align:left; color:#fff;}

#intro::after { content: '';  display: block;  clear: both;}
.introbox {float:left; width: 33.33%; padding:10px; margin-bottom:30px;}

#intro-what {border-right:1px dashed #222;}
#intro-how {border-left:1px dashed #222; }
#intro-why, #intro-how {padding-left:20px;}

@media only screen and (min-width:1201px) and (max-width:1600px) {
#introinner h4 {font-size:36px; text-align:left;}
}
@media only screen and (min-width:1001px) and (max-width:1200px) {
#introinner h4 {font-size:30px; text-align:left;}
}
@media only screen and (min-width:801px) and (max-width:1000px) {
#introinner {padding:10px;}
#introinner h4 {font-size:24px; text-align:left;}
#intro-why, #intro-how {padding-left:0;}

}
@media only screen and (min-width:601px) and (max-width:800px) {
.introbox {width:50%; float:left; margin-bottom:0; padding:0;}
#introinner {padding:10px;}
#intro-what {border-right:0px;}
#intro-how {border-left:0px; clear:left;}
#introinner h4 {font-size:32px; text-align:left;}
#intro-why, #intro-how {padding-left:0;}

}
@media only screen and (max-width:600px) {
.introbox {width:100%; float:none; margin-bottom:0; padding:0;}
#introinner {padding:10px;}
#intro-what {border-right:0px;}
#intro-how {border-left:0px;}
#introinner h4 {font-size:32px; text-align:center;}
#intro-why, #intro-how {padding-left:0px;}

}

/* front page: explore */

.explore {width:100%; background:#333; margin:0; padding:20px;}
.exploreinner {max-width:1200px; margin-left:auto; margin-right:auto;}
.exploreinner h2 {text-align:center; color:#fff; font-size:60px; line-height:1.2em; margin:0;}

.exploreboxst {float:left; width: 31%; margin:1%; padding:10px; text-align:center;  margin-bottom:.5em; margin-top:.5em; position:relative; height:300px; border-radius:8px;}


.explorebotst-caption {display:block; background-color:#fcec7f; padding:5px; padding-right:15px; margin-top:0; font-size:1.2em; position:absolute; bottom:0; left:0}

.explorebotst-caption a {color:#333;}

.explore::after { content: '';  display: block;  clear: both;}

.explorebox {float:left; width: 48%; margin-right:1%; margin-left:1%; padding:10px; margin-bottom:30px; border:1px solid #fff; color:#fff; padding:30px; text-align:center;}

.explorebox h2 {font-size:60px; line-height:1.2em; margin:0;}




@media only screen and (min-width:1201px) and (max-width:1600px) {
.exploreinner h2 {font-size:52px;}
.exploreboxst {height:250px;}

}
@media only screen and (min-width:1001px) and (max-width:1200px) {
.exploreinner h2 {font-size:44px;}
.exploreboxst {height:225px;}

}
@media only screen and (min-width:801px) and (max-width:1000px) {
.exploreinner h2 {font-size:40px;}
.exploreboxst {height:200px;}
}
@media only screen and (min-width:601px) and (max-width:800px) {
.exploreboxst {width:100%; float:none; margin-bottom:15px;}
.exploreinner h2 {font-size:36px;}
.exploreboxst {height:300px; background-size:100% auto !important;}
}
@media only screen and (max-width:600px) {
.exploreboxst {width:100%; float:none; margin:0; padding:0; margin-bottom:15px;}
.exploreinner h2 {font-size:38px;margin-bottom:.25em;}
.exploreboxst {height:250px;}
}





/* front page: news + FAQ */


#faq h2, #posts h2 {display:inline-block;}
#faq h2 {margin:0;}

.newsfaqwrapper {width:100%; background:#fff; margin:0;}
.newsfaqinner {max-width:1200px; margin-left:auto; margin-right:auto; padding-top:30px;}
.newsfaqwrapper::after, .newsfaqinner::after { content: '';  display: block;  clear: both;}

#posts {float:right; width:40%; padding:0px 10px 10px 20px;}

#faq {float:left; width:60%; padding:0px 20px 10px 10px; border-right:1px dashed #222;}

#faq h2, #posts h2 {text-transform:uppercase; margin-top:0;}


@media only screen and (max-width:1000px) {
#faq {width:50%;}
#posts {width:50%;}

}




/* map */


.map-wrapper {
  width: 100%;
  height: 800px;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
  position: relative;
}








@media only screen and (min-width:1201px) and (max-width:1600px) {
.map-wrapper {height:600px;}
}
@media only screen and (min-width:1001px) and (max-width:1200px) {
.map-wrapper {height:500px;}
}
@media only screen and (min-width:801px) and (max-width:1000px) {
.map-wrapper {height:400px;}
}
@media only screen and (min-width:601px) and (max-width:800px) {
.map-wrapper {height:300px;}
}
@media only screen and (max-width:600px) {
.map-wrapper {max-height:300px !important;}
}


.grid-page {font-family: 'Saira'; font-size:16px;} 
.tablesorter-header-inner {font-size:14px;}
.grid-page td {font-size:14px;}


#statedetail {font-family: 'Saira'; font-size:18px; position:absolute; top:0; right:0; z-index:999; border-radius:0; background:rgb(255,255,255,.8); opacity:.9; padding:5px;}

#alaskahawaii {font-family: 'Saira'; cursor:pointer; font-size:18px; position:absolute; left:0; bottom:0; z-index:999; border-radius:0; background:rgb(255,255,255,.8); opacity:.9; padding:5px 10px 5px 10px;}

@media only screen and (min-width:801px) and (max-width:1200px) {
#alaskahawaii, #statedetail {font-size:17px;}
}

@media only screen and (min-width:601px) and (max-width:800px) {
#alaskahawaii, #statedetail {font-size:14px;}
}

@media only screen and (max-width:600px) {
#alaskahawaii, #statedetail {font-size:13px;}
}




/* bill box */

.billbox {padding:0 20px 0 20px;  border:1px dashed #222; border-radius:7px; box-shadow:0px 3px 0px #222; margin-bottom:1em;}
.billprogressdead {background:#bf304d; color:#fff; padding:0px 5px 0px 5px; border-radius:5px; line-height:1; margin:0;}
.billprogresspassed {background:#36ad76; color:#fff; padding:0px 5px 0px 5px; border-radius:5px; line-height:1; margin:0;}
.billprogressother {background:#fcec7f; color:#000; padding:0px 5px 0px 5px; border-radius:5px; line-height:1; margin:0;}

.billboxhr {display:none;}

.billboxpre {font-size:.9em; margin-bottom:0;}
.billboxname {font-size:1.5em; line-height:1.3em; font-weight:600; margin-top:0;}