/*HOME PAGE*/

@font-face {font-family: 'TofinoN'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/tofino-600n.woff2') format('woff2'), url('fonts/tofino-600n.woff') format('woff');
}

@media (max-width: 930px) and (min-width: 460px) {.bodyhead span {display: block;}}

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

/*Top image*/

/*.homepicback {border: 1px solid #FFF} .homepic {border: 1px solid yellow} .homecap {border: 1px solid red} .cap1 {border: 1px solid cyan}*/

.homepicback * {box-sizing: border-box;}

html, body, .homepicback {height: 100%;}
.homepicback, .homepic {position: relative; overflow: hidden;}
.homepic {height: 100%; position: relative; background-repeat: no-repeat; background-size: cover; background-color: #363639;}
.homepic img {width: 100vw; height: 100%; object-fit: cover; overflow: hidden;}

.homecap {position: absolute; font-size: 50px; text-align: left; left: 0; right: 0; margin: auto; z-index: 1}
.homecap .cap1 {font-size: 1.35em; line-height: 1.15; font-weight: 600; text-shadow: 1px 1px 2px #000; font-family: 'TofinoN', Arial, Helvetica, sans-serif; color: #FFF;}
.homecap .cap2 {font-size: .6em; line-height: 1.35; font-weight: 500; text-transform: uppercase; font-family: 'TofinoN', Arial, Helvetica, sans-serif; color: #FFF; margin-top: 40px !important; color: var(--color1);}

@media (min-width: 2801px) {.homepicback {height: 70%;}}
@media (max-width: 2500px) and (min-height: 1060px) {.homepicback {height: 900px;}}
@media (max-width: 1090px) and (max-height: 740px) {.homepicback {height: 800px;}}
@media (max-width: 950px) and (max-height: 900px) {.homepicback {height: 850px;}}
@media (max-width: 800px) and (max-height: 900px) {.homepicback {height: 800px;}}

@media (min-width: 1091px) {.homecap {top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}}
@media (max-width: 1090px) and (min-width: 751px) {.homecap {top: 52%; transform: translateY(-45%); -webkit-transform: translateY(-45%)}}

@media (max-width: 1520px) {.cap2 span {display: block;}}
@media (max-width: 800px) {.homecap .cap1 {font-size: 1.1em;} .homecap .cap2 {font-size: .55em; margin-top: 30px !important;}}

@media (min-width: 751px) {.homecap .cap1 {width: 75%;}}
@media (max-width: 750px) {.homecap {text-align: center; top: 30%;}}
@media (max-width: 730px) {.homecap {font-size: 8vw;} .homepicback {height: 100%;}}
@media (min-width: 501px) {.homepic picture {filter: brightness(70%);} .homepic img {object-position: 50% 70%;}}
@media (max-width: 500px) {.homecap {top: 35%;} .homepic img {object-position: 50% 78%;}}
@media (max-width: 390px) {.homecap {top: 40%;}}


/*Boxes on big pic*/

#homepicbox {vertical-align: middle; position: relative; z-index: 3; text-align: left; margin-top: 40px; width: 710px; font-size: 1px;}
#homepicbox a {font-size: 18px !important; text-decoration: none; padding: 14px 0 11px 0; width: 170px; display: table-cell; text-align: center; cursor: pointer; background-color: var(--color2dark); color: #FFF; border-radius: 6px; transition: 0.25s; vertical-align: middle;}
#homepicbox ul {margin: 0; padding: 0;}
#homepicbox li {display: inline-block; margin: 2px;}

@media (max-width: 915px) {#homepicbox {width: 370px;} #homepicbox li {margin: 1px;}}
@media (max-width: 750px) {#homepicbox {margin: 30px auto 0 auto;} #homepicbox ul {text-align: center;}}
@media (max-width: 730px) {#homepicbox {display: none;}}

#homepicbox a:hover {color: var(--color2dark); background-color: var(--color1);}


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

/*Top Section*/

#topsection *:not(#topsection div) {margin-bottom: 0 !important;}
#topsection {margin: auto; padding: 30px 0 50px 0; background-color: #000;}
#topsection .bodyarea {-webkit-display: grid; display: grid; padding: 0; max-width: 1250px; color: #EEE;}
#topsection div {font-size: 16px; line-height: 1.6; font-weight: 300;}
#topsection .heading {margin-bottom: 30px; font-size: 2.2em; font-weight: 600; line-height: 1.2; color: var(--color1);}
#topsection img {width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; border-radius: 1px;}
#topsection p {margin-bottom: 0;}

@media (min-width: 1031px) {
#topsection .bodyarea {grid-template-columns: 47% 53%; grid-auto-rows: 1fr;}
#topsection section:first-child {margin-right: 20px; padding: 50px 0;} #topsection section:last-child {margin-left: 20px;}
}
@media (max-width: 1030px) {
#topsection section:first-child {padding: 20px 0 0 0;} #topsection section:last-child {margin: 30px 0 0 0; padding-bottom: 20px;}
}
@media (min-width: 501px) {#topsection img:last-child {display: none;}}
@media (max-width: 500px) {#topsection img:first-child {display: none;}}

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

/*Buttons*/

.btn {margin: 30px auto 0 auto;}
.btn a {text-align: center; line-height: 1.4; font-weight: 400; background-color: var(--color2dark); -webkit-transition: 0.15s; white-space: nowrap; border-radius: 4px; padding: 15px 15px 11px 15px; color: #FFF !important; text-decoration: none;}
.btn a:hover {background-color: var(--color2lite);}

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

/*Service Blocks*/

/*.container .bodyarea {border: 1px solid yellow} #contgrid {border: 1px solid red} article {border: 1px solid blue} article h1 {border: 1px solid green}*/

.container {padding: 25px 0 55px 0; text-align: center; background: #222 url(asphaltback1.jpg) repeat;}
.container .heading, .container .heading2 {text-align: center; margin: auto;}
.container .heading {font-size: 2em; text-transform: uppercase; margin-bottom: 10px; color: var(--color1);}
.container .heading2 {font-weight: 500; color: #FFF;}
#contgrid {margin-top: 40px;}

.container img {width: 500px; height: 300px; max-height: 300px; width: 100%; height: auto; display: block; object-fit: cover; /*object-position: 50% 50%;*/ -webkit-transition: .2s;}
.container article {color: var(--color1); background-color: var(--color2dark); -webkit-transition: .2s; white-space: nowrap;}
.container h1 {line-height: 1.2; font-weight: 500; margin: 0; text-transform: uppercase;} .container a {text-decoration: none;}

@media (min-width: 1251px) {#contgrid {gap: 30px; grid-gap: 30px;} .container h1 {font-size: 26px; padding: 18px 0;}}
@media (max-width: 1250px) and (min-width: 1001px) {#contgrid {gap: 2vw; grid-gap: 2vw;} .container h1 {font-size: 2.1vw; padding: 1.7vw 0;}}
@media (min-width: 1001px) {#contgrid {grid-template-columns: repeat(4, 1fr);}}
@media (max-width: 1000px) and (min-width: 581px) {
#contgrid {grid-template-columns: repeat(2, 1fr); gap: 3vw; grid-gap: 3vw;}
.container img {height: calc(25px + 23vw);} .container h1 {font-size: 24px; padding: 2vw 0;}
}
@media (min-width: 581px) {#contgrid {display: grid;}}
@media (max-width: 580px) {
.container .block:not(:first-child,:last-child) {margin: 20px 0;} .container img {height: 40vw;}
.container h1 {font-size: calc(20px + 2vw); padding: calc(4vw - 5px) 0;}
}

.container .block:hover img {-webkit-filter: brightness(120%) saturate(120%);} .container .block:hover article {color: #FFF;}


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

/*Bottom Pic*/

#btmpic {position: relative; overflow: hidden; z-index: 0; background-color: #000; border-top: 10px double var(--color1); border-bottom: 10px double var(--color1);}

#btmpic img {width: 500px; height: 300px; width: 100%; max-height: 400px; object-fit: cover; object-position: 50% 50%; display: block; }

.btmcap {position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); z-index: 1; font-family: 'TofinoN', Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.2; color: #FFF; text-shadow: 1px 1px 2px #000;}

@media (min-width: 1361px) {#btmpic img {height: 400px;} .btmcap {font-size: 73px;}}
@media (max-width: 1360px) {#btmpic img {height: 35vw;} .btmcap {font-size: 5.6vw;}}
@media (min-width: 971px) {.btmcap span {display: block;}}
@media (max-width: 970px) {#btmpic img {height: 40vw;} .btmcap {font-size: 7vw;}}
@media (max-width: 580px) {#btmpic img {height: 50vw;} .btmcap {font-size: 8.5vw;}}
@media (max-width: 580px) and (min-width: 420px) {.btmcap {margin: 0 50px !important;}}
@media (max-width: 420px) {#btmpic img {height: 60vw;} .btmcap {margin: 0 20px !important; font-size: 9.8vw;}}
@media (min-width: 501px) {#btmpic img {filter: brightness(70%);}}
@media (max-width: 300px) {#btmpic img {height: 55vw;} .btmcap {font-size: 9.8vw; margin: 0 30px;}}


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

/*Why Us*/

#whyus {margin: auto; padding: 60px 0 50px 0; background-color: #000;}
#whyus .bodyarea {-webkit-display: grid; display: grid; padding: 0; max-width: 1250px; color: #FFF;}
#whyus div {font-size: 16px; line-height: 1.6; font-weight: 300;}
#whyus .heading {margin: 0 auto; font-size: 2.2em; padding: 0 20px; text-align: center; font-weight: 600; line-height: 1.2; color: var(--color1);}
#whyus img {width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; border-radius: 1px;}
#whyus p {margin-bottom: 0;}

@media (min-width: 1031px) {
#whyus .bodyarea {grid-template-columns: 47% 53%; grid-auto-rows: 1fr;}
#whyus section:first-child {margin-right: 20px; padding: 50px 0;} #whyus section:last-child {margin-left: 20px; padding: 50px 0;}
}
@media (max-width: 1030px) {
#whyus {padding: 40px 0 20px 0;} #whyus section:first-child {padding: 40px 0 0 0;} #whyus section:last-child {margin: 40px 0 50px 0;}
}

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

/*Info - About Us and Customers/Services*/

.thisinfo {margin: auto; padding: 60px 0 50px 0;}
.aboutus {font-weight: 500; background-color: var(--color1);} .ourservices {font-weight: 300; background-color: #000; color: #EEE;}
.thisinfo .bodyarea {padding: 0; max-width: 1250px;}
.thisinfo div {font-size: 17px; line-height: 1.6;}
.thisinfo .heading {margin: 0 auto 40px auto; font-size: 2.2em; padding: 0 20px; text-align: center; font-weight: 600; line-height: 1.2;}
.ourservices .heading {color: var(--color1);}

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

/*Contact Form on bottom of Home page*/

#contactformarea * {box-sizing: border-box;}
#contactformarea {padding: 40px 40px 55px 40px; font-size: 19px; color: #FFF; margin: auto; clear: both; background: #222 url(asphaltback1.jpg) repeat;}
#contactformarea .heading {text-align: center; margin: auto; color: #FFF;}
#contactformarea table {width: 100%; max-width: 800px; text-align: left; margin: auto;}
#contactformarea input {width: 100%;}

.text, #comments
{padding: 14px 10px; margin-bottom: 3px; font-size: 16px; background-color: #FFF; border: 1px solid color: var(--color1); border-radius: 4px; width: 100%; resize: none; font-family: Arial, Helvetica, sans-serif;}
#comments {height: 165px;}
.spacer {width: 10px;}
.submit {transition: 0.3s; height: 45px; font-size: 20px; line-height: 1; margin: 10px 0 0 0; padding: 2px 0 0 0; border-radius: 4px; background-color: var(--color2dark); border: 1px solid var(--color2dark); color: #FFF;}
.submit:hover {cursor: pointer; background-color: var(--color2lite); border: 1px solid var(--color2lite);}

.fieldsreq {text-align: center; font-weight: 500; font-size: 18px; margin: 15px auto 25px 10px; color: var(--color1)}
.label {text-align: left; font-size: 16px !important; line-height: 14px; padding-top: 7px;}

form label {position: relative; float: right; font-size: 13px; line-height: 16px; text-align: right; right: 0; margin-top: -18px; margin-right: -20px;}
#success span, #error span {position: absolute;}
form label, form label.error, #error span p {color: var(--color1);} form label.error {left: -20px;}

#success, #error {display: none; text-align: center; margin: auto;}
#success span, #error span {display: block; left: 0; right: 0; margin-top: -170px; text-align: center; padding: 0 20px; font-size: 28px; font-weight: 500;}

@media (max-width: 720px) {#contactformarea {padding: 30px 20px 40px 20px;}}

@media (max-width: 530px) {
#contactformarea {padding: 18px 10px 35px 13px;} #contactformarea td {display: block;}
.text, #comments {padding: 12px 8px;} #comments {height: 70px; resize: auto;}
.spacer {display: none;} form label {margin-right: -16px;}
}

#clickonce {margin: 10px auto 0 auto; padding: 15px 15px 0 15px; text-align: center; line-height: 1.4; color: var(--color1)}