/*HOME PAGE*/

@font-face {font-family: 'RFDewi'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/rfdewi-600.woff2') format('woff2'), url('fonts/rfdewi-600.woff') format('woff');
}
@font-face {font-family: 'RFDewiCond'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/rfdewicond-600.woff2') format('woff2'), url('fonts/rfdewicond-600.woff') format('woff');
}
@font-face {font-family: 'RFDewiCond'; font-style: normal; font-weight: 800; font-display: block;
  src: local(''), url('fonts/rfdewicond-800.woff2') format('woff2'), url('fonts/rfdewicond-800.woff') format('woff');
}

@media (max-width: 1070px) and (min-width: 640px) {.bodyhead span {display: block;}} @media (max-width: 1000px) {#bread {margin-bottom: 10px;}}

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

/*Big Pic*/

/*.homecap {border: 1px solid red} .homecap article {border: 1px solid cyan} .homecap article:first-child { border: 1px solid yellow}
.homecap h1 {border: 1px solid green} .homecap div {border: 1px solid magenta}*/

#homepic, #homepic * {box-sizing: border-box;}

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #34451B;}
#homepic img:not(#homepic article img) {width: 500px; height: 300px; width: 100%; height: 80vw; max-height: 800px; object-fit: cover; object-position: 50% 50%; display: block;}

.homecap {position: absolute; display: table; left: 5%; right: 5%; text-align: left; width: 90% /*must keep for Safari, or else it goes off right side of page*/; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; margin: 0 auto; color: #FFF;}
.homecap h1 {font-family: 'RFDewiCond', Arial, Helvetica, sans-serif; font-weight: 800; word-spacing: 4px; font-size: 80px; line-height: 1.15; color: #FFF;}
.homecap h1 span {color: var(--limegreen);}
.homecap article {display: table-cell; vertical-align: middle;}

.homecap article div {margin-top: 50px; font-size: 26px; line-height: 1.35; font-weight: 600;}
.homecap article img {width: 500px; height: 300px; width: 100%; height: auto; display: block; border: 4px solid var(--limegreen); border-radius: 5px;}

@media (max-width: 1670px) and (min-width: 1381px) {.homecap h1 {font-size: calc(9.5vw - 75px);}}
@media (min-width: 1551px) {
.homecap article:first-child {width: 65%;} .homecap article:last-child {width: 35%;} .homecap article:first-child {padding-right: 5%;}
}
@media (max-width: 1550px) and (min-width: 1381px) {/*Keeps pic from getting too small at smaller screen sizes*/
.homecap article:first-child {width: calc(60vw - ((1550px - 100vw) * 1)); }
.homecap article:last-child {width: calc(40vw + ((1550px - 100vw) * .1));}
}
@media (max-width: 1550px) and (min-width: 1361px) {.homecap article:first-child {padding-right: 3%;}}
@media (max-width: 1380px) and (min-width: 1361px) {
.homecap article:first-child {width: calc(70vw - ((1550px - 100vw) * .5));}
.homecap article:last-child {width: calc(30vw + ((1550px - 100vw) * 1));}
.homecap h1 {font-size: calc(8vw - 50px);}
}
@media (max-width: 1360px) {#homepic article:last-child, #homepic article img {display: none;} .homecap {text-align: center;}}
@media (min-width: 711px) {.homecap article div span {display: block;}}
@media (max-width: 1090px) {.homecap h1 {font-size: 8.4vw;}}
@media (max-width: 650px) {
#homepic img:not(#homepic article img) {height: 85vw;} .homecap h1 {font-size: 10vw;} .homecap article div {font-size: 4vw;}
}
@media (min-width: 501px) {#homepic img:not(#homepic article img) {filter: brightness(65%);}}
@media (max-width: 500px) {
.homecap h1 {font-size: 9.8vw;} #homepic img:not(#homepic article img) {height: 65vw;}
.homecap article div {margin: 0; padding: 0; line-height: 0; visibility: hidden;}
}

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

/*Under Pic*/

#underpic {font-family: RFDewiCond; font-weight: 600; font-size: 1.5em; text-transform: uppercase; background-color: #224335; color: #FFF;}
#underpic article {display: table; width: 100%; text-align: center; margin: auto; padding: 15px 0; max-width: 1200px;}
#underpic div {display: table-cell; width: 33%;}
@media (max-width: 635px) and (min-width: 501px) {#underpic {font-size: calc(2.5vw + 8px);}}
@media (min-width: 501px) {#underpic div:nth-child(2) {border-left: 1px solid #FFF; border-right: 1px solid #FFF;}}
@media (max-width: 500px) {#underpic div {display: block; width: auto;} #underpic div:nth-child(2) {margin: 10px auto;}}
@media (max-width: 400px) {#underpic {font-size: 1.3em;}}

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

/*Service Page Blocks*/

/*#boxpics {border: 1px solid red} #boxpics article {border: 1px solid red} #boxpics img {border: 1px solid cyan}*/

.boxpicsback {background-color: #000;} .boxpicsback .bodyarea {padding: 30px 0 30px 0;}
.boxpicsback .thishead {text-align: center; font-size: 32px; line-height: 1.2; color: var(--limegreen); font-weight: 500;}
.boxpicsback h2 {text-align: center; padding-top: 20px; line-height: 1.5; color: #ddd;}

#boxpics {margin: 40px auto 30px auto; text-align: center;}
#boxpics article {display: inline-block; text-align: center; vertical-align: top; width: 100%; max-width: 451px;}
#boxpics article:last-child {margin-bottom: 0;}
#boxpics img {display: block; width: 500px; height: 300px; width: 100%; height: auto; height: 320px; margin: auto; object-fit: cover; border-radius: 3px; transition: .2s; border: 2px solid transparent}
#boxpics span:not(span span) {display: block; margin: 15px auto 0 auto; font-size: 18px; line-height: 1.5;}
#boxpics * {text-align: left !important; /*needed for Safari*/}
#boxpics h3 {font-size: 1.4em; line-height: 1.4; font-weight: 500; transition: .2s; color: var(--limegreen);}
#boxpics p {margin: 0} #boxpics ul {margin: 17px 0 0 0;} #boxpics li {margin-left: -18px;}
#boxpics a:hover img {filter: brightness(115%) saturate(115%); border: 2px solid var(--limegreen);} #boxpics a:hover h3 {color: #C6FC5D;}

@media (min-width: 1771px) {#boxpics article {margin: 30px 20px;}}
@media (max-width: 1770px) {#boxpics article {max-width: 24vw; margin: 25px 1.5vw;} #boxpics img {height: 18vw;}}

@media (min-width: 1001px) {#boxpics article:nth-child(-n+3) {margin-top: 0;}}
@media (max-width: 1000px) {
#boxpics article {max-width: 37vw; margin: 25px 2vw;} #boxpics img {height: min(230px,25vw);}
}
@media (max-width: 1000px) and (min-width: 701px) {#boxpics article:nth-child(-n+2) {margin-top: 0;}}
@media (max-width: 700px) {
#boxpics article {max-width: 600px; margin: 25px 0;} #boxpics article:first-child {margin-top: 0;}
#boxpics img {width: 500px; height: 300px; width: 100%; height: auto; height: 45vw;}
}
@media (max-width: 480px) {#boxpics article {margin: 15px 0;}}
@media (max-width: 350px) {#boxpics img {height: 47vw;}}

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

/*Values*/

#valueback {background-color: var(--darkgreen); padding: 0 6%;}
#values {display: grid; grid-template-columns: 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr; position: relative; margin: 0 auto; padding: 50px 0; max-width: 1400px;}
.val {position: relative; font-size: 1.08rem; line-height: 1.4; padding: 0 0 0 80px; margin: 30px 5%; color: #FFF;}
.val div:first-child {font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; color:var(--limegreen);}
.val:before {position: absolute; top: 0; left: 0;}
.val:nth-child(1):before {content: url(images/icons/quality.png);} .val:nth-child(2):before {content: url(images/icons/reliable.png);}
.val:nth-child(3):before {content: url(images/icons/skilled.png);} .val:nth-child(4):before {content: url(images/icons/caring.png);}
.val:nth-child(5):before {content: url(images/icons/committed.png);} .val:nth-child(6):before {content: url(images/icons/honest.png);}
@media (max-width: 1100px) {#valueback {padding: 0 5%;} #values {grid-template-columns: 1fr 1fr; -ms-grid-columns: 1fr 1fr; padding: 40px 0;}}
@media (max-width: 700px) {#valueback {padding: 0 3%;} #values {grid-template-columns: 1fr; -ms-grid-columns: 1fr; padding: 50px 0;} .val {margin: 20px 5%}}
@media (max-width: 480px) {#values {text-align: center;} .val {padding: 0;} .val:before {position: relative; padding: 0;} #values {padding: 30px 0;}}

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

/*Bottom Pic*/

#btmpic {position: relative; overflow: hidden; z-index: 0; background-color: #3F6214;}
#btmpic img {width: 500px; height: 300px; width: 100%; max-height: 400px; object-fit: cover; object-position: 50% 50%; display: block; }

#btmpic h3 {position: absolute; display: table-cell; left: 50px; right: 50px; text-align: center; top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); z-index: 1; font-family: 'RFDewiCond', Arial, Helvetica, sans-serif; font-weight: 600 !important; line-height: 1.3; color: #FFF; text-shadow: 1px 1px 2px #000; max-width: 850px; margin: auto;}

@media (min-width: 986px) {#btmpic img {height: 400px;} #btmpic h3 {font-size: 42px;}}
@media (max-width: 985px) {#btmpic img {height: 35vw;} #btmpic h3 {font-size: 4vw;}}
@media (max-width: 615px) {#btmpic h3 {left: 30px; right: 30px;}}
@media (max-width: 570px) {#btmpic img {height: 52vw;} #btmpic h3 {font-size: 5vw;}}
@media (max-width: 450px) {#btmpic img {height: 70vw;} #btmpic h3 {font-size: 6vw;}}
@media (max-width: 350px) {#btmpic img {height: 90vw;} #btmpic h3 {font-size: 6.5vw;}}
@media (min-width: 501px) {#btmpic img {filter: brightness(70%);}}

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

/*Contact Us*/

#contus {text-align: center; max-width: 800px; margin: auto;} #contus .bodyarea {padding: 60px 0 45px 0;}
#contus .heading {color: var(--limegreen);}

#contus .btn {display: table; margin: 30px auto 0 auto;}
#contus .btn div {margin: auto; text-align: center;} /*must include the extra div for Safari*/
#contus .btn a {line-height: 1.4; text-decoration: none !important; background-color: var(--limegreen); -webkit-transition: 0.2s; white-space: nowrap; border-radius: 5px; padding: 9px 15px 10px 15px; font-weight: 500; color: #222; margin: auto; text-align: center;}
#contus .btn a:hover {background-color: #c6f192;}