/*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;}

@keyframes bgimgboxzoom {
   0% {-webkit-transform: translateY(-48%) scale(0.5); opacity: 0;}
   100% {-webkit-transform: translateY(-48%) scale(1); opacity: 1;}
}
.bgimgbox {-webkit-animation: bgimgboxzoom 1s;}

#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%;}
}
/*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(--tan);} 100% {background-color: var(--gold);}}
#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*/

/*Top image*/

#homepic {position: relative; display: grid; overflow: hidden; z-index: 0; background-color: #1C1311;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 50vw; max-height: 550px; object-fit: cover; object-position: 50% 35%; display: block;}

#hpcont, .homecap {position: absolute; z-index: 1; -webkit-align-self: center; align-self: center;}
#hpcont {margin: auto; top: 0; bottom: 0; left: 0; right: 0; text-align: center; z-index: 1;} /*top & bottom for Safari*/

.homecap {left: 0; z-index: 1; font-size: 80px; color: #FFF;}
.homecap h1 {font-family: 'Pathway Extreme Cond', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1em; line-height: 1.1; text-shadow: 1px 1px 2px #000;}
.homecap div:first-of-type {font-size: .35em; line-height: 1.4; letter-spacing: .3px; padding-top: 20px; font-weight: 400 !important;}

@media (max-width: 1090px) {.homecap h1 {font-size: calc(8.5vw - 18px);}}
@media (min-width: 861px) {
#hpcont, .homecap {text-align: left;}
.homecap {top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 850px;}
@keyframes slidecap {0% {top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 0;} 100% {top: 50%; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); opacity: 1;}}
.btn {margin: 35px auto 0 auto;} .btn a {padding: 12px 20px; font-size: 19px;}
}
@media (max-width: 860px) and (min-width: 706px),(max-width: 600px) {#hpcont, .homecap {justify-items: center; text-align: center; width: 100%;}}
@media (max-width: 860px) {
.homecap {top: 43%; -webkit-transform: translateY(-43%); transform: translateY(-43%);}
.homecap h1 {font-size: calc(9vw - 10px);}
@keyframes slidecap {0% {top: 43%; -webkit-transform: translate(-43%,-43%); transform: translate(-43%,-43%); opacity: 0;} 100% {top: 43%; -webkit-transform: translate(0%,-43%); transform: translate(0%,-43%); opacity: 1;}}
.btn {margin-top: 20px;} .btn a {padding: 9px 17px 10px 17px; font-size: 18px;}
}
@media (max-width: 830px) {.homecap div:first-of-type {font-size: 2.9vw;}}
@media (min-width: 706px) {#hpcont {width: 88%; max-width: 1300px;}}
@media (max-width: 705px) {#hpcont {width: 92%;} .homecap h1 {font-size: calc(9.5vw - 25px);} .homecap div:first-of-type {font-size: 2.7vw;}}
@media (max-width: 705px) and (min-width: 601px) {#hpcont, .homecap {text-align: left;}}
@media (max-width: 600px) {.homecap h1 {font-size: calc(13vw - 20px);} .homecap div:first-of-type {display: none;}}
@media (min-width: 501px) {.homecap {-webkit-animation: slidecap 1s;} #homepic img {filter: brightness(65%);}}
@media (max-width: 500px) {
.homecap {top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#homepic img {height: calc(50vw + 60px);} .homecap h1 {font-size: 11vw;} .btn {margin-top: 15px;}
}

.btn {-webkit-transition: 0.4s; border-radius: 6px; z-index: 20 !important;}
.btn a {display: table-cell; line-height: 1.4; text-decoration: none !important; background-color: var(--gold); -webkit-transition: 0.2s; white-space: nowrap; border-radius: 6px; font-weight: 500; z-index: 20 !important; color: #000;}
.btn a:hover {
background-color: var(--ylw);
box-shadow: 0 0 12px 2px rgba(255, 255, 200, 0.6), 0 0 30px 6px rgba(255, 255, 180, 0.4), 0 0 60px 10px rgba(255, 255, 150, 0.25);
}
@media (max-width: 600px) {.btn {margin: 30px auto 0 auto; text-align: center; display: table;} .btn a {padding: 9px 17px 10px 17px; font-size: 18px;}}

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

/*How Can We Help Box*/
.bgimgbox {position: absolute; text-align: center; right: 0; top: 48%; -webkit-transform: translateY(-48%); transform: translateY(-48%); line-height: 1.3; background-color: #020D1C; border-radius: 6px; z-index: 2; border: 2px solid var(--gold);}
.bgimgbox div {text-align: center; font-weight: 500; color: #FFF;}
.bgimgbox a {display: table-cell; color: #000; border-radius: 5px; vertical-align: middle; transition: 0.2s; white-space: nowrap; text-decoration: none; background-color: var(--gold);}

@media (min-width: 861px) {
.bgimgbox {padding: 15px 15px 12px 15px;} .bgimgbox div {font-size: 1.25em; margin-bottom: 5px;}
.bgimgbox a {width: 115px; height: 60px; margin: 5px 0; font-size: 1em;}
}
@media (max-width: 860px) and (min-width: 706px),(max-width: 600px) {.bgimgbox {display: none;}}
@media (max-width: 705px) and (min-width: 601px) {
.bgimgbox {padding: 10px 8px 5px 8px;} .bgimgbox div {font-size: 1.1em; margin-bottom: 3px;}
.bgimgbox a {width: 110px; height: 55px; margin: 4px 0; font-size: .95em;}
}

.bgimgbox a:hover {
background-color: var(--ylw);
box-shadow: 0 0 12px 2px rgba(255, 255, 200, 0.6), 0 0 30px 6px rgba(255, 255, 180, 0.4), 0 0 60px 10px rgba(255, 255, 150, 0.25);
}

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

/*Blocks*/

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

#blocks .block {vertical-align: top; -webkit-transition: .25s;}
#blocks .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;}
#blocks h2 {display: grid: width: 100%; text-align: center; align-content: center; font-size: 18px; line-height: 1.35; font-weight: 400 !important; margin: 0 auto; white-space: nowrap; background-color: var(--gold);}
#blocks a {text-decoration: none !important; color: #000 !important;}

.block:nth-child(1) img {object-position: 50% 30%;}

@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: 5px;} #blocks .block {margin: 0 3px;} #blocks h2 {height: 43px;}}
@media (max-width: 970px) and (min-width: 636px) {
#blocks {margin-top: 3px;} #blocks .block {margin: 0 2px;}
#blocks h2 {padding: 7px 0 11px 0; height: 45px;} #blocks h2 span {display: block;}
}
@media (max-width: 700px) and (min-width: 636px) {#blocks h2 {height: 39px; 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: flex; flex-wrap: wrap; text-align: center;}
#blocks .block {width: calc(50% - 2px); margin-top: 3px; box-sizing: border-box;}
#blocks .block:nth-child(odd) {margin-right: 2px;} #blocks .block:nth-child(even) {margin-left: 2px;}
#blocks img {height: calc(20vw + 40px);}
#blocks h2 {height: 42px; display: block; width: auto; align-content: center;}
}
@media (max-width: 470px) {
#blocks h2 {padding: 5px 0 13px 0;} #blocks h2 span {display: block;}
#blocks img {height: calc(25vw + 50px);}
}
#blocks .block:hover img {filter: saturate(115%) brightness(105%);}
#blocks .block:hover h2 {background-color: var(--ylw); color: #000;}

#blocks .block {position: relative; overflow: hidden;}
/*must do opacity for glow or else transition won't work*/
#blocks .block::after {
content:""; position:absolute; inset:0; pointer-events:none; opacity: 0; transition: opacity .2s ease;
box-shadow: inset 0 0 12px 2px rgba(255, 255, 200, 0.7), inset 0 0 30px 6px rgba(255, 255, 180, 0.5), inset 0 0 60px 10px rgba(255, 255, 150, 0.3);
}
#blocks .block:hover::after{opacity: 1;}

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

/*Our Services*/

#oursvcs {margin: auto; background-color: var(--gold); color: #000;} #oursvcs a {color: #00F;}
#oursvcs .heading {text-align: center; padding: 10px 20px 12px 20px; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: var(--tan); color: #FFF;}

#oursvcs .bodyarea {-webkit-display: grid; display: grid; padding: 0;}
#oursvcs section div {font-size: .95em;}
#oursvcs span {display: block; font-size: 1.15em; font-weight: 500; line-height: 1.3; padding: 6px 8px 7px 8px; background-color: #000; color: #FFF; border-radius: 6px;}
#oursvcs p {margin-bottom: 0;} #oursvcs a {font-style: italic; font-size: .85em;}

#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;}

.tapics {display: grid; gap: 10px; grid-gap: 10px; overflow: hidden /*for old Safari*/;}
.tapics picture {display: block; width: 100%; height: 100%;}
.tapics picture img {width: 500px; height: 300px; width: 100%; height: 100%; object-fit: cover; display: block;}

@media (min-width: 1601px) {
#oursvcs .bodyarea {grid-template-columns: 55% 45%; grid-auto-rows: 1fr;}
#oursvcs section:first-child {margin-right: 20px; padding: 40px 0 50px 0;}
#oursvcs section:last-child {margin-left: 20px;}

.tapics {grid-template-columns: 1fr 1fr;}
.tapics picture:nth-child(1) {grid-column: 1; grid-row: 1;}
.tapics picture:nth-child(2) {grid-column: 2; grid-row: 1;}
.tapics picture:nth-child(3) {grid-column: 1; grid-row: 2;}
.tapics picture:nth-child(4) {grid-column: 2; grid-row: 2;}
}
@media (max-width: 1600px) {#oursvcs img {border-radius: 8px;}}

@media (max-width: 1600px) and (min-width: 701px) {
#oursvcs section:first-child {padding: 40px 0 0 0;}
#oursvcs section:last-child {margin: 35px 0 40px 0;}
.tapics {grid-auto-rows: 280px;}
.tapics picture:nth-child(1) {grid-column: 1 / 2; grid-row: 1 / 1;}
.tapics picture:nth-child(2) {grid-column: 2 / 2; grid-row: 1 / 1;}
.tapics picture:nth-child(3) {grid-column: 1 / 2; grid-row: 2 / 2;}
.tapics picture:nth-child(4) {grid-column: 2 / 2; grid-row: 2 / 2;}
}
@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;}
}
@media (max-width: 845px) {#oursvcs .p3 {margin-bottom: 15px;}}
@media (max-width: 800px) {.tapics {grid-auto-rows: 220px;}}
@media (max-width: 700px) {.tapics {grid-auto-rows: 300px; grid-template-columns: 1fr; margin: 40px 0;}}
@media (max-width: 450px) {.tapics {grid-auto-rows: 240px;}}
@media (max-width: 380px) {.tapics {grid-auto-rows: 210px;}}

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

/*Why Us*/

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

#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 var(--gold); color: var(--tan);}

@media (min-width: 1266px) {#whyusboxes {-webkit-column-count: 3; column-count: 3;} #whyusboxes .box {padding: 23px;}}
@media (max-width: 1265px) {#whyusboxes {-webkit-column-count: 2; column-count: 2; margin: 35px auto 25px auto;} #whyusboxes .box {padding: 20px;}}
@media (max-width: 830px) {#whyusboxes {-webkit-column-count: 1; column-count: 1;}}