/*HOME PAGE*/

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

@media (min-width: 700px) {
@keyframes fadein2 {25% {opacity: 0;} 100% {opacity: 1;}}.homecap2 {opacity: 0; -webkit-animation: fadein2 1.6s forwards !important;}}

@media (min-width: 501px) {

@keyframes logoscale {0% {-webkit-transform: scale(0);} 100% {-webkit-transform: scale(1);}}
#logo img {-webkit-animation: logoscale .8s; -webkit-backface-visibility: hidden;}

#blocks {overflow: hidden;}
.block h4 {-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); -webkit-filter: blur(0); perspective(1px); -webkit-filter: blur(0); -webkit-font-smoothing: subpixel-antialiased;}

@keyframes blockzoom {
0% {-webkit-transform: scale(0); opacity: 0;}
1% {-webkit-transform: scale(.5); opacity: 0;}
5% {-webkit-transform: scale(1.02); opacity: 1;}
10% {-webkit-transform: scale(1); opacity: 1; transform-origin: 20% 0%;}
}
/*for some reason, adding transform-origin to last item of blockzoom stops blurry text after animation*/

#blocks .block:nth-child(1) {-webkit-animation: blockzoom 5s;}
#blocks .block:nth-child(2) {-webkit-animation: blockzoom 8s;}
#blocks .block:nth-child(3) {-webkit-animation: blockzoom 12s;}
#blocks .block:nth-child(4) {-webkit-animation: blockzoom 16s;}

@keyframes backclr {0% {background-color: var(--red);} 100% {background-color: #000;}}
#blocks .block h2 {-webkit-animation: backclr 1.5s;}
#blocks .block:nth-child(1) h4 {-webkit-animation-delay: .2s; animation-delay: .25s;}
#blocks .block:nth-child(2) h4 {-webkit-animation-delay: .4s; animation-delay: .40s;}
#blocks .block:nth-child(3) h4 {-webkit-animation-delay: .6s; animation-delay: .55s;}
#blocks .block:nth-child(4) h4 {-webkit-animation-delay: .8s; animation-delay: .70s;}

} /*close min-width: 500px*/


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

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #942631;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 40vw; max-height: 420px; object-fit: cover; object-position: 50% 25%; display: block;}

.homecap {position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 47%; -webkit-transform: translateY(-47%); -ms-transform: translateY(-47%); transform: translateY(-47%); z-index: 1; margin: 0 30px; color: #FFF;}
.homecap h1 {font-family: 'Pathway Extreme Cond', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 80px; line-height: 1.15; color: #FFF; text-shadow: 1px 1px 2px #000;}

@media (min-width: 1221px) {.homecap h1 {font-size: 80px;}}
@media (max-width: 1220px) {.homecap {margin: 0 5%} .homecap h1 {font-size: 6.5vw;}}
@media (min-width: 631px) {.homecap h1 span {display: block;}}
@media (max-width: 630px) {.homecap h1 {font-size: 8.5vw;} #homepic img {height: 52vw;}}
@media (min-width: 501px) {#homepic img {filter: brightness(70%);}}
@media (max-width: 500px) {.homecap h1 {font-size: 10.5vw;} #homepic img {height: 58vw;}}

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

/*Free Estimate Button on Home Page*/

.btn {display: table; text-align: center; margin: 25px auto 0 auto; -webkit-transition: 0.25s; }
.btn a {display: table-cell; padding: 16px 20px 15px 20px; font-size: 17px; line-height: 1.4; font-weight: 500; text-decoration: none !important; color: #FFF; -webkit-transition: 0.4s; white-space: nowrap; text-transform: uppercase; border-radius: 6px;}
@media (max-width: 630px) {.btn {display: none;}}

.btn a {background-color: var(--red);} .btn a:hover {background-color: #EB5D53;}

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

/*Blocks*/

/*#blocks {border: 1px solid yellow} #blocks div {border: 1px solid magenta} #blocks a {border: 1px solid blue} #blocks h2 {border: 1px solid red}*/

#blocks .block {vertical-align: top;}
.block div {display: block; text-align: center; vertical-align: top; overflow: hidden;}
#blocks img {width: 383px; height: 223px; width: 100%; height: auto; display: block; object-fit: cover;}
.block div, #blocks img, #blocks h2 {transition: .3s;}
#blocks h2 {display: table-cell; width: 1%; text-align: center; vertical-align: middle; font-size: 18px; height: 43px; line-height: 1.35; font-weight: 400 !important; margin: 0 auto; white-space: nowrap; background-color: #000;}
#blocks a {text-decoration: none !important; color: #FFF !important;}

.block:nth-child(1) img {object-position: 50% 100%;}
.block:nth-child(2) img {object-position: 50% 70%;}
.block:nth-child(3) img {object-position: 50% 70%;}
.block:nth-child(4) img {object-position: 50% 70%;}

@media (min-width: 2001px) {#blocks img {height: 180px;}}
@media (max-width: 2000px) {#blocks img {height: 160px;}}

@media (max-width: 1340px) {#blocks img {height: 130px;}}
@media (min-width: 971px) {#blocks {margin-top: 6px;} #blocks .block {margin: 0 3px;}}
@media (max-width: 970px) and (min-width: 636px) {
#blocks {margin-top: 4px;} #blocks .block {margin: 0 2px;}
#blocks h2 {padding: 7px 0 9px 0;} #blocks h2 span {display: block;}
}
@media (max-width: 700px) and (min-width: 636px) {#blocks h2 {font-size: 16px}}
@media (min-width: 636px) {
#blocks {display: flex; align-self: center; flex-wrap: nowrap; justify-content: center;}
#blocks .block {width: 25%; display: table-cell;}
}
@media (max-width: 635px) {
#blocks {display: table; text-align: center;} #blocks .block {display: inline-block;}
#blocks .block {width: 50%;} #blocks .block div {margin: 3px 2px 0 2px;}
#blocks h2 {margin: 0 2px; display: block; width: auto; align-content: center;}
}
@media (max-width: 470px) and (min-width: 331px) {
#blocks h2 {padding: 7px 0 15px 0; margin: 0 1px;} #blocks h2 span {display: block;}
#blocks .block div {margin: 2px 1px 0 1px;} #blocks img {height: calc(23vw + 10px);}
}
@media (max-width: 330px) {
#blocks .block {width: 100%;} #blocks .block div {margin: 2px 0 0 0;}
#blocks h2 {margin: 0;} #blocks img {height: 115px;}
}

#blocks .block:hover img {filter: saturate(125%) brightness(115%); /*transform: scale(1.05);*/}
#blocks .block:hover h2 {background-color: var(--red);}

/*For IE10 & IE11:*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {#blocks .block {border-left: 1px solid #FFF; border-right: 1px solid #FFF;}}

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

/*About*/

/*#oursvcs section {border: 1px solid blue} #oursvcs .bodyarea {border: 1px solid red}
#oursvcs .pmain, #oursvcs .p1, #oursvcs .p2, #oursvcs .p3, #oursvcs .p4 {border: 1px solid magenta}*/

#oursvcs {margin: auto; background-color: #BD050B;} #oursvcs * {color: #FFF;} #oursvcs a {color: #beebff}
#oursvcs .heading {text-align: center; background-color: #404040; color: #FFF; padding: 10px 20px 12px 20px; font-size: 1.6em; font-weight: 500; line-height: 1.2;}

#oursvcs .bodyarea {-webkit-display: grid; display: grid; padding: 0;}
#oursvcs section div {font-size: 17px; line-height: 1.6;}
#oursvcs span {display: block; font-size: 1.15em; font-weight: 500; line-height: 1.3; padding: 6px 8px 7px 8px; background-color: #404040;}
#oursvcs img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; /*object-position: 50% 50%;*/}
#oursvcs p {margin-bottom: 0;} #oursvcs a {font-style: italic;}

#oursvcs .pmain {grid-area: b; margin-bottom: 30px;}
#oursvcs .p1 {grid-area: c; margin-bottom: 25px;} #oursvcs .p2 {grid-area: d; margin-bottom: 25px;}
#oursvcs .p3 {grid-area: e;} #oursvcs .p4 {grid-area: f;}

@media (min-width: 1301px) {
#oursvcs .bodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr;}
#oursvcs section:first-child {margin-right: 20px; padding: 40px 0 50px 0;}
#oursvcs section:last-child {margin-left: 20px;}
}
@media (max-width: 1300px) {
#oursvcs section:first-child {padding: 40px 0 0 0;}
#oursvcs section:last-child {/*-webkit-order: 2; order: 2;*/ margin: 35px 0 40px 0; height: calc(80px + 45vw); max-height: 450px;}
/*#oursvcs img {max-width: 600px; margin: auto;}*/}

@media (min-width: 846px) {
#oursvcs section:first-child {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "a a" "b b" "c d" "e f" "g h";  gap: 0 40px; grid-gap: 0 40px;}
/*#oursvcs .p1, #oursvcs .p3 {padding-right: 20px;} #oursvcs .p2, #oursvcs .p4 {padding-left: 20px;}*/
}
@media (max-width: 845px) {#oursvcs .p3 {margin-bottom: 15px;}}

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

/*Why Us*/

#whyus {background-color: #AAA;} #whyus .bodyarea {padding: 50px 0 30px 0;} #whyus .heading {text-align: center; font-size: 1.7em;}

#whyusboxes {margin: 30px auto;}
#whyusboxes .box {display: inline-block; margin: 10px 2px; font-size: .9em; line-height: 1.6; background-color: #FFF; break-inside: avoid; color: #555; border-radius: 5px;}
#whyusboxes .box div:first-child {width: 100%; margin-bottom: 20px; font-size: 1.45em; line-height: 1.15; font-weight: 500; padding-bottom: 20px; border-bottom: 1px solid #CCC; color: var(--red);}

@media (min-width: 1201px) {#whyusboxes .box {padding: 23px;}}
@media (max-width: 1200px) {#whyusboxes .box {padding: 20px;}}
@media (min-width: 1041px) {#whyusboxes {-webkit-column-count: 3; column-count: 3;}}
@media (max-width: 1040px) {#whyusboxes {-webkit-column-count: 2; column-count: 2; margin: 35px auto 25px auto;}}
@media (max-width: 720px) {#whyusboxes {-webkit-column-count: 1; column-count: 1;}}