html, body {margin: 0; padding: 0; font-size: 18px;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}
a, a:visited, a:hover {outline: none; color: #0058D0;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; cursor: pointer;}
a, .ham {-webkit-tap-highlight-color: transparent);}
img {border: 0;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}
.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}

body {font-family: "Poppins", Verdana, Geneva, sans-serif; font-variant-ligatures: none !important;}

#social img, #btminfoback .connect img, #btminfoback .connect a, .reviewus img {transition: 0.2s;}

/*-----------------------------------------------*/

/*HEADER*/

#logo {position: absolute; margin-top: -30px; z-index: 3;} #logo img {display: block; width: 194px; height: 102px;} #logo a {display: block}

#headtopback, #headtop {height: 40px; width: 100%;} #headerback {width: 100%; position: relative;} #headerback, #header {height: 80px;}
#headtop, #header {position: relative; display: table; width: 100%; max-width: 2000px; left: 0; right: 0; margin: auto; text-align: center;}
#headtop, #logo {padding: 0 2vw;}

#phone {display: table-cell; text-align: right; font-size: 20px; line-height: 1; vertical-align: middle;}
#phone, #phone a {font-weight: 500;} #phone a {margin-left: 5px;} #phone span {font-size: .9em; font-weight: 400;}

@media (max-width: 490px) and (min-width: 381px) {#phone span {display: none;}}
@media (max-width: 380px) {#headerback, #header {height: 105px;} #logo {margin-top: 12px;} #logo img {width: 155px; height: 82px;}}

/*----------------*/

/*MENU*/
/*.navheader {border: 1px solid orange} .menu {border: 1px solid green} .menu div {border: 1px solid cyan} .menu a {border: 1px solid blue}*/

a, .ham {-webkit-tap-highlight-color: transparent);} #navcheck {display: none;}
.menu a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}
.menu a li {list-style-type:none; margin: 0 !important; padding: 0 !important;} .navheader {right: 0;}

.menu a {display: block; position: relative; text-decoration:none !important; cursor: pointer; line-height: 1.3; font-weight: 400; vertical-align: middle; -webkit-transition: background .3s, border .4s, font-size .4s;}
.menu a.selected {cursor: text;} .menu a li {list-style-type:none; margin: 0 !important; padding: 0 !important;}

@media (min-width: 1931px) {.menu a {height: 35px;} .navheader {top: 20px;}}
@media (max-width: 1930px) {.menu span {display: block;} .navheader {top: 15px;}}
@media (max-width: 1930px) and (min-width: 746px) {.menu a {height: 45px; font-size: 16px;}}
@media (min-width: 1521px) {.menu a {padding: 3px 11px 2px 11px;}}
@media (max-width: 1520px) and (min-width: 746px) {.menu a {font-size: 15px; padding: 2px 7px 3px 7px;}}
@media (max-width: 1360px) and (min-width: 1251px) {
.menu a {font-size: 14px; letter-spacing: -.1px;} .menu div {margin: 0 -1px;} .navheader {padding-right: 1.3vw !important;}
}
@media (max-width: 1250px) and (min-width: 1016px) {
.menu {width: 900px; text-align: right;} .menu div {margin: 2px;} .navheader {top: 11px;}
#headerback, #header {height: 130px !important;} #logo {margin-top: 14px;}
.menu {display: table !important;} .menu a {width: 100px;}
.menu div:last-child {display: table-cell !important; padding-left: 2px;} .menu div:last-child a {height: 99px;}
}
@media (max-width: 1090px) and (min-width: 1046px) {.menu {width: 800px;} .menu a {width: 94px;}}
@media (max-width: 1045px) and (min-width: 1016px) {
.navheader {top: 13px;} .menu {width: 750px;} .menu div {margin: 1px;} .menu a {width: 94px; padding: 2px 6px 3px 6px;}
.menu div:last-child {padding-left: 1px;} .menu div:last-child a {height: 97px;}
}
@media (max-width: 1015px) and (min-width: 746px) {
.menu {width: 650px; text-align: right;} .menu div {margin: 2px 0;} .navheader {top: 11px;}
#headerback, #header {height: 130px !important;} #logo {margin-top: 14px;} .menu a {padding: 2px 12px 3px 12px;}
}
@media (max-width: 890px) and (min-width: 746px) {.menu {width: 560px;} .menu a {padding: 2px 6px 3px 6px;}}
@media (min-width: 746px) {
.hamburger {display: none;} .navheader {position: absolute; padding: 0 2vw;}
.menu {display:inline-block;} .menu div {display: inline-block; vertical-align: middle; white-space: nowrap;}
.menu a {display: table-cell; text-align: center; border-radius: 2px;}
}
@media (max-width: 805px) and (min-width: 746px) {.menu {width: 500px;} .menu a {font-size: 14px; letter-spacing: -.1px;} .menu div {margin: 1px -1.3px;}}
@media (max-width: 745px) {
.menu {position: relative; text-align: center; transition: .15s; height: 0; font-size: 0; box-shadow: 0 8px 10px -9px #000; box-sizing: border-box; z-index: -1; top: 80px;}
.menu div {width: 25%; display: inline-block; text-align: center; left: 0; margin: -1.5px -2px; font-size: 0; right: 0; height: 0; opacity: 0; transition: height .3s, opacity .6s; border: 1px solid transparent;}
.menu div:last-child {width: 99.3%;}
.menu a {text-align: center; font-size: 0; opacity: 0; height: 0; white-space: nowrap; padding: 1px 8px;}
.menu li {width: 1%; display: table-cell; height: 67px; vertical-align: middle;}

#navcheck:checked ~ .menu {height: 100%; z-index: 2;} #navcheck:checked ~ .menu div {opacity: 1; height: 70px; }
#navcheck:checked ~ .menu a {font-size: 20px; border: 1px solid #777; opacity: 1; height: auto;}

.hamburger {position: absolute; z-index: 6; height: 35px; width: 45px; top: 12px; right: 10px; margin: auto; text-align: center; padding: 10px;}
.hamburger:hover {cursor: pointer;} .hamburger > div {top: 25px; left: 10px;}
.hamburger > div, .hamburger > div::before, .hamburger > div::after {display: block; content: ""; position: absolute; height: 4px; width: 44px; opacity: 1; background: #000; -webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; -webkit-transition: transform 0.2s ease-out; -webkit-transition: -webkit-transform 0.2s ease-out;}
.hamburger > div::before {top: -11px;} .hamburger > div::after {top: 11px;}
#navcheck:checked ~ .hamburger > div {width: 0; background: rgba(18, 18, 18, 0);}
#navcheck:checked ~ .hamburger > div::before {-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); top: 0;}
#navcheck:checked ~ .hamburger > div::after {-webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); top: 0;}
}
@media (max-width: 615px) {#navcheck:checked ~ .menu a {font-size: 18px;}}
@media (max-width: 540px) {.menu div {width: 50%;} .menu span {display: inline;} .menu div:last-child {width: 99.6%;}}
@media (max-width: 420px) {.menu span {display: block;}} @media (max-width: 380px) {.menu {top: 105px;}}

/*-----------------------------------------------*/

/*TOP IMAGES*/

#toppic {position: relative; height: calc(90px + 25vw); max-height: 320px; overflow: hidden; display: flex; align-items: center; outline: 2px solid #000;}
@media (min-width: 501px) {#toppic {border-bottom: 6px solid #FBC513;}}
@media (max-width: 500px) {#toppic {border-bottom: 5px solid #FBC513;}}

#toppic img {width: 500px; height: 300px; width: 100vw; height: auto;}
#toppic h1 {visibility: hidden !important; position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 48%; -webkit-transform: translateY(-48%); -ms-transform: translateY(-48%); transform: translateY(-48%); z-index: 1; margin: 0 20px; font-size: 80px; line-height: 1.15; font-weight: 500; color: #FFF; text-shadow: 1px 1px 2px #000;}
@media (max-width: 900px) {#toppic h1 {font-size: calc(4.5vw + 40px);}}

#toppic.comm {background-color: #CACCC7;} #toppic.res {background-color: #7E5D48;} #toppic.sheet {background-color: #5B5D5C;}
#toppic.sid {background-color: #8B4A44;} #toppic.sky {background-color: #888A7F;} #toppic.gut {background-color: #B4C5D9;}
#toppic.mas {background-color: #7F493D;} #toppic.rep {background-color: #8E4B14;} #toppic.abt {background-color: #5C4B44;}
#toppic.rvws {background-color: #1D4C60;} #toppic.careers, #toppic.cont {background-color: #FFF;}

@media (min-width: 1501px) {#toppic.careers img {margin-top: 10%;}}
@media (min-width: 1300px) and (max-width: 1500px) {#toppic.careers img {margin-top: 5%;}}

/*-----------------------------------------------*/

/*BODY AREA*/

.bodyarea {margin: auto; padding: 30px 0 40px 0; width: 90%; max-width: 1300px;}
.bodyarea, .bodyarea h2 {font-size: 22px !important; line-height: 1.6; font-weight: 400 !important;}
.bodyhead {font-size: 34px; line-height: 1.3; font-weight: 600; text-align: center; padding: 15px 0 10px 0;}
.heading {font-weight: 500; font-size: 1.3em; line-height: 1.3;}
.heading2 {font-weight: 500; font-size: 1.15em; line-height: 1.3; font-style: italic;}
h1, h2 {margin: 0 !important;}

@media (max-width: 920px) {.bodyhead {padding: 8px 0 8px 0;}}
@media (max-width: 480px) {
.bodyarea, .bodyarea h2 {font-size: 20px !important;} .bodyarea {padding: 30px 0 25px 0;} .bodyhead {font-size: 31px;}
}

/*-----------------------------------------------*/

/*Process section on Residential Roofing pages*/

#process {width: 100%; margin: 25px auto 45px auto; table-layout: fixed;}
.process {vertical-align: top; text-align: center; font-size: 1em; padding: 25px 40px 30px 40px; background-color: #FBC513; border-radius: 5px;}
.process div:first-child {font-weight: 500; font-size: 1.45em; line-height: 1.35; color: #CF1919;}
.processtxt {color: #000; line-height: 1.7; margin-top: 15px;}

@media (max-width: 1200px) {.process {padding: 25px 30px 30px 30px;}}
@media (max-width: 1000px) {.process div:first-child {font-size: 1.4em;}}
@media (min-width: 961px) {#process {border-spacing: 15px;}}
@media (max-width: 960px) {#process {margin: 0 auto 40px auto;} .process {margin: 10px auto; display: block;} #process tr {display: block;}}
@media (max-width: 480px) {.process {padding: 20px 20px 25px 20px;}}

/*-----------------------------------------------*/

/*Logos*/

#logos {text-align: center; margin: 40px auto; max-width: 1050px; /*border: 1px solid red*/}
#logos img, #logos a {text-align: center; margin: 0 auto;} #logos a {display: table-cell;}
#logos img {display: block; width: 175px; height: 70px; width: 100%; height: auto;}
#logos th {display: inline-block; margin: 8px 15px; vertical-align: middle;}
@media (max-width: 1000px) {#logos {max-width: 650px;}}

/*-----------------------------------------------*/

/*Service List*/

#svcs div {display: inline-block; margin: 0 auto 5px auto; padding: 8px 12px; font-size: .95em; line-height: 1.35; border-radius: 5px; background-color: #C70000; color: #FFF;}
@media (max-width: 600px) {#svcs {text-align: center;}}
@media (max-width: 460px) {
#svcs {padding: 15px; background-color: #E5E5E5; border-radius: 5px;}
#svcs div {font-size: .97em; display: inline; background: none; color: inherit;}
#svcs div:first-child {padding-left: 0;} #svcs div:last-child:after {content: "";} 
}
@media (max-width: 460px) and (min-width: 361px) {
#svcs div {padding: 5px 11px 0 5px; line-height: 1.8;}
#svcs div:after {content: "\2022"; position: absolute; margin: 0 0 0 6px; color: #E70000; font-weight: 700;}
}
@media (max-width: 360px) {#svcs div {display: block; padding: 5px 0; line-height: 1.5;} #svcs div:after {display: none;}}

/*-----------------------------------------------*/

/*Ready*/

#ready {clear: both; text-align: center; padding: 40px 20px; font-size: 1.8em; line-height: 1.4; font-weight: 600;} #ready div {margin-top: 25px;}
.bordbtn {display: block;} .bordbtn a {display: inline-block; border-radius: 5px; font-weight: 500; padding: 10px 13px 8px 13px; font-size: 22px; text-decoration: none !important;}

@-webkit-keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
@keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
.rippleout {display: inline-block; vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative;}
.rippleout:before {content: ''; position: absolute; border: #ffdf2e solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; pointer-events: none; border-radius: 5px;}
.rippleout:hover:before, .rippleout:focus:before, .rippleout:active:before {-webkit-animation-name: rippleout; animation-name: rippleout; border-radius: 5px;}

/*-----------------------------------------------*/

/*Page Pics*/

.pagepic img, .twopics img {border-radius: 3px;} .pagepic img {width: 100%; display: block;} .picwide {max-width: 500px;} .pictall {max-width: 485px;}
.picleft {float: left; margin: 10px 30px 10px 0;} .picright {float: right; margin: 10px 0 10px 30px;}
@media (max-width: 900px) and (min-width: 821px) {.picwide, .pictall {max-width: 430px;}}
@media (max-width: 820px) {.picleft, .picright {text-align: center; float: none; margin: 35px auto;} .pictall {max-width: 430px;}}

.twopics {display: table; margin: 40px auto 30px auto;}
.twopics div {display: table-cell; vertical-align: middle;}
.twopics img {width: 100%; display: block; margin: auto; border-radius: 3px;} .tpwide {max-width: 500px;} .tptall {max-width: 400px;}
@media (min-width: 701px) {.twopics div:first-child {padding-right: 2%;} .twopics div:last-child {padding-left: 2%;}}
@media (max-width: 700px) {.twopics div {display: block;} .twopics div:last-child {padding-top: 30px;}}

/*-----------------------------------------------*/

/*Roof Types on roofing pages*/
.roofs table {text-align: center; margin: auto;}
.roofs td {display: inline-block; vertical-align: top; margin-top: 15px;} .roofs1 {margin-bottom: 15px;} .roofs1 td {width: 145px;} .roofs2 td {width: 165px;}
.roofs td p {font-size: 17px; line-height: 1.35; margin-top: 7px;}
.roofs img {display: block; margin: auto;} .roofs1 img {width: 109px; height: 109px;} .roofs2 img {width: 122px; height: 122px;}
@media (max-width: 1315px) and (min-width: 705px) {.roofs2 table {max-width: 680px;}}
@media (max-width: 1165px) and (min-width: 705px) {.roofs1 table {max-width: 620px;}}
@media (max-width: 565px) and (min-width: 521px) {.roofs1 td {max-width: 135px;} .roofs2 td {max-width: 140px;}}
@media (max-width: 120px) {.roofs table {max-width: 380px;}}
@media (max-width: 380px) {.roofs2 td {width: 135px;}} @media (max-width: 350px) {.roofs1 td {width: 135px;}}

/*-----------------------------------------------*/

/*Photo Albums*/
#album {margin: 45px auto 20px auto !important;} #album div {border-radius: 5px;}

/*-----------------------------------------------*/

/*BOTTOM INFO*/

#btminfoback {width: 100%; padding: 20px 0; text-align: center; margin: auto;}
#btminfo {width: 100%; max-width: 1300px; text-align: center; margin: auto; padding: 0 15px;}
#btminfo a:not(.phlink) {color: #A1D6FC !important}
#btminfo td {vertical-align: top; font-size: 16px; line-height: 1.6; padding: 10px 0;} #btminfo a {text-decoration: none;}
.btmhead {font-size: 26px; font-weight: 700;}
.contactus, .hrs, .hrs span, .btmaddr span {text-align: left; display: inline-block;} .contactus div {padding: 3px 0;}
.hrs span:nth-child(3) {font-size: .85em;}

.pay img {width: 175px; height: 78px;}
.pay li {width: 57px; height: 33px; margin: 0 1px;}
.cash, .check, .mc, .visa, .amex, .disc {background: url(../images/pay.png); display: inline-block;}
.cash {background-position: 0 0;} .check {background-position: 0 -33px;} .mc {background-position: 0 -66px;}
.visa {background-position: 0 -99px;} .amex {background-position: 0 -132px;} .disc {background-position: 0 -165px;}
@media (max-width: 430px) {#pay {max-width: 200px;}}

.connect a {margin: 0 2px;} .connect img {width: 36px; height: 36px;}
.connect a:hover img {-webkit-transform: scale(1.1);} .connect a:hover {filter: brightness(120%);}

.contactus li, .hrs li {position: relative; float: left; vertical-align: top; margin-top: 3px; margin-right: 7px; width: 20px; height: 20px;}
.btmphicon, .btmemailicon, .btmaddricon, .hrsicon {background: url(../images/btmicons.png); display: inline-block; width: 20px; height: 20px;}
.btmphicon {background-position: 0 0px;} .btmemailicon {background-position: 0 -20px;}
.btmaddricon {background-position: 0 -40px;} .hrsicon {background-position: 0 -60px;}

@media (max-width: 950px) and (min-width: 626px) {
#btminfoback {width: auto; padding: 25px 0;}
.contactusback, .hrsback, .payback, .connectback {width: 48%; display: inline-block; background-color: #555; margin: 2px; border-radius: 3px;}
.contactusback, .hrsback {height: 180px;} .payback, .connectback {height: 250px;}
}

@media (max-width: 625px) {
#btminfoback {padding: 30px 0;} #btminfoback, #btminfo {width: auto;}
.contactusback, .hrsback, .payback, .connectback {display: block; margin: 5px auto; background-color: #555; padding: 10px 15px !important;} .btmhead {font-size: 23px;}
}
@media (max-width: 305px) {.contactusback, .hrsback, .payback, .connectback {padding: 10px 7px !important;}}

#reviewus {margin: auto;} #reviewus img {display: block; margin: auto;} @media (min-width: 381px) {#reviewus td {padding: 0 12px 10px 12px;}}
@media (max-width: 380px) {#reviewus td {display: block;}}
@keyframes shake {20% {-webkit-transform: rotateZ(-2deg);} 80% {-webkit-transform: rotateZ(2deg);}}
.reviewus {margin-top: 20px;} .reviewus img {max-width: 144px;} .reviewus img:hover {-webkit-animation: shake .18s 6;}

/*-----------------------------------------------*/

/*Serving*/

#servhead, #serving, #llms {font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.4;} #servhead {margin-top: 25px; font-size: 12px;}
#servhead, #serving, #serving a, #llms {color: #999 !important; text-decoration: none !important; cursor: text;}

#serving {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); grid-gap: 10px 25px; gap: 10px 25px; padding: 20px 15px 0 15px; text-align: left;}

@media (max-width: 600px) {#serving {padding: 20px 10px 0 10px;}} @media (max-width: 360px) {#serving {padding: 20px 0 0 0;}}

/*-----------------------------------------------*/

/*BOTTOM AREA*/

#bottomarea {text-align: center; padding: 20px 15px 20px 15px; font-size: 14px; line-height: 1.6;} #lic {margin-top: 15px; font-size: .85em;}
#web {margin-top: 25px;}
@media (max-width: 580px) {.copyco span, #web a {display: block;}}

#totop, #requote {position: fixed; right: 16px; text-align: center; font-family: Arial, Helvetica, sans-serif; }
#totop:hover, #requote:hover {-webkit-transform: scale(1.1); cursor: pointer;}
@media (min-width: 481px) {#totop, #requote {-webkit-transition: .2s;}}

#totop {bottom: 13px; border-radius: 50%; font-size: 16px; background-color: rgba(0, 0, 0, 0.35); padding: 8px; border: 2px solid #888;}
#totop img {width: 20px; height: 12px;}
#requote {bottom: 65px; border-radius: 2px; font-size: 19px; font-weight: 500; background-color: rgba(255, 228, 0, 0.7); padding: 7px 6px; border: 2px solid #FBC513; color: #000; letter-spacing: -.4px; text-decoration: none;}

/*#requote {position: fixed; right: 16px; bottom: 65px; border-radius: 2px; font-size: 19px; font-weight: 500; background-color: rgba(255, 228, 0, 0.7); padding: 7px 6px; text-align: center; font-family: Arial, Helvetica, sans-serif; border: 2px solid #FBC513; color: #000; letter-spacing: -.4px;}
#requote:hover {-webkit-transform: scale(1.1); cursor: pointer;}
@media (min-width: 481px) {#requote {-webkit-transition: .3s;}}*/


/*====================================================*/

/*COLORS*/

body {color: #444;} body, .bodyarea {background-color: #FFF;}
#headtopback, #headtop {background-color: #000;} #headerback, #header {background-color: #FFF}
#phone, #phone a {color: #ffd52b;} #phone span {color: #FFF;}
.bodyhead, .bodyhead2, .heading {color: #000;} .bodyhead {color: #CF1919;}
.newareaback, .newarea {background-color: #D5D5D5;} .newareatext div {color: #000;}
#ready {color: #FFF; background-color: #D70000;} .bordbtn a {color: #000; background-color: #ffdf2e;}
#blocksback, #blocksback .bodyarea, #blocks {background-color: #CF1919;}

.menu a {color: #FFF; background-color: #D70000;} .menu a:hover {background-color: #F70000;}
.menu a.selected {background-color: #970000;} .menu a.selected, .menu a.selected:hover {color: #FFF;}
@media (max-width: 745px) {.menu, .menu a {background-color: #000;}  .menu a:hover {background-color: #444;}}

#btminfo, #btminfoback a,  #bottomarea, #bottomarea a, #btm_menu a {color: #FFF;} #btminfoback {background-color: #444;}
#bottomarea {background-color: #000;} .tb, .tb a {color: #ffd52b !important;}