/*HOME PAGE*/

@media (min-width: 500px) {
@keyframes bgimgboxzoom {
   0% {-webkit-transform: translateY(-50%) scale(0.5); opacity: 0;}
   100% {-webkit-transform: translateY(-50%) scale(1); opacity: 1;}
}
.bgimgbox {-webkit-animation: bgimgboxzoom 1s;}
.homecap {-webkit-animation: slidecap 1s;}

@keyframes sblockzoom {
0% {-webkit-transform: scale(0); transform: scale(0); opacity: 0;}
1% {-webkit-transform: scale(.5); transform: scale(.5); opacity: 0;}
5% {-webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1;}
10% {-webkit-transform: scale(1); transform: scale(1); opacity: 1; transform-origin: 20% 0%;}
}
.sb:nth-child(1) {-webkit-animation: sblockzoom 8s;}
.sb:nth-child(2) {-webkit-animation: sblockzoom 10s; animation-delay: .05s;}
.sb:nth-child(3) {-webkit-animation: sblockzoom 12s; animation-delay: .08s;}
.sb:nth-child(4) {-webkit-animation: sblockzoom 14s; animation-delay: .11s;}
.sb:nth-child(5) {-webkit-animation: sblockzoom 16s; animation-delay: .14s;}
.sb:nth-child(6) {-webkit-animation: sblockzoom 18s; animation-delay: .17s;}
.sb:nth-child(7) {-webkit-animation: sblockzoom 20s; animation-delay: .2s;}
.sb:nth-child(8) {-webkit-animation: sblockzoom 22s; animation-delay: .23s;}
.sb:nth-child(9) {-webkit-animation: sblockzoom 24s; animation-delay: .26s;}
}

#bread {padding-top: 20px;}

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

/*Top image*/

#homepic {position: relative; height: calc(120px + 32vw); max-height: 500px; overflow: hidden; display: flex; align-items: center; background-color: #999;}
#homepic img {width: 500px; height: 300px; width: 100vw; height: auto; display: block;}

#hpcont {position: absolute; margin: auto; left: 0; right: 0; text-align: center; z-index: 1;}

.homecap {position: absolute; left: 0; text-align: left; max-width: 700px; z-index: 1; font-size: 70px; color: #FFF; border: 0px solid #F00}
.homecap h1 {font-family: 'Archivo', Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1em; 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: 1400px) and (min-width: 771px) {.homecap {width: calc(70vw - 170px);} .homecap h1 {font-size: calc(6vw - 16px);}}

@media (min-width: 861px) {
.homecap h1 {line-height: 1.1;}
.homecap {top: 55%; -webkit-transform: translateY(-55%); transform: translateY(-55%)}
@keyframes slidecap {0% {top: 55%; -webkit-transform: translate(-55%,-55%); transform: translate(-55%,-55%); opacity: 0;} 100% {top: 55%; -webkit-transform: translate(0%,-55%); transform: translate(0%,-55%); opacity: 1;}}
}
@media (max-width: 860px) {
.homecap {top: 52%; -webkit-transform: translateY(-52%); transform: translateY(-52%); width: calc(70vw - 170px);}
.homecap h1 {font-size: 4.2vw; line-height: 1.1;}
@keyframes slidecap {0% {top: 52%; -webkit-transform: translate(-52%,-52%); transform: translate(-52%,-52%); opacity: 0;} 100% {top: 52%; -webkit-transform: translate(0%,-52%); transform: translate(0%,-52%); opacity: 1;}}
}
@media (max-width: 830px) {.homecap div:first-of-type {font-size: 2.9vw;}}
@media (min-width: 771px) {#hpcont {width: 88%; max-width: 1300px;}}
@media (max-width: 770px) {#hpcont {width: 92%;} .homecap h1 {font-size: calc(7vw - 20px);} .homecap div:first-of-type {font-size: 2.7vw;}}

@media (max-width: 705px) {
.homecap {width: calc(75vw - 240px);} .homecap h1 {font-size: calc(7.5vw - 16px);}
.homecap div:first-of-type {visibility: hidden; font-size: 0; line-height: 0; padding: 0;}
}
@media (min-width: 611px) {.btn {margin: 35px auto 0 auto;} .btn a {padding: 12px 20px; font-size: 19px;}}
@media (max-width: 610px) {.btn {margin-top: 25px;} .btn a {padding: 9px 17px; font-size: 18px;}}
@media (max-width: 590px) and (min-width: 501px) {#homepic {height: calc(105px + 31vw);} .homecap h1 {font-size: calc(8vw - 16px);}}
@media (max-width: 550px) {
.homecap {width: calc(75vw - 200px);} .homecap h1 {font-size: calc(9vw - 16px);}
.btn {margin-top: 20px;} .btn a {padding: 9px 14px 8px 14px; font-size: 17px;}
}
@media (min-width: 501px) {#homepic img {filter: brightness(65%);}}
@media (max-width: 500px) {#homepic {height: calc(110px + 32vw);}}
@media (max-width: 530px) {.btn a {color: #000 !important}}
@media (max-width: 480px) {.homecap {width: calc(78vw - 210px);} .homecap h1 {font-size: calc(9vw - 16px);}}
@media (max-width: 480px) and (min-width: 451px) {.btn {display: none;}}
@media (max-width: 450px) {
.homecap {top: 51%; -webkit-transform: translateY(-51%); transform: translateY(-51%); width: auto; text-align: center;}
.homecap h1 {font-size: 8.8vw;} .btn {display: table; margin: 20px auto 0 auto;}
}
@media (max-width: 350px) {#homepic {height: calc(100px + 30vw);}}

/*button*/

.btn a {line-height: 1.4; text-decoration: none; white-space: nowrap; border-radius: 6px; font-weight: 500; color: #000; background-color: var(--yellow);}
.btn a:before {border: var(--yellow) solid 6px;}

@-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;}}
.btn a {display: table-cell; position: relative;}
.btn a:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; pointer-events: none; border-radius: 5px;}
.btn a:hover:before, .btn a:focus:before, .btn a:active:before {-webkit-animation-name: rippleout; animation-name: rippleout; border-radius: 5px;}

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

/*How Can We Help Box*/

/*.bgimgbox {border: 1px solid red} .bgimgbox td {border: 1px solid magenta} .bgimgbox a {border: 1px solid yellow}*/

.bgimgbox {position: absolute; text-align: center; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.25; background-color: #FFF; padding: 19px 15px 12px 15px; border-radius: 2px; z-index: 2;}
.bgimgbox div {text-align: center; margin: 0 auto 5px auto; font-size: 1.25em; font-weight: 500; padding-bottom: 4px;}
.bgimgbox a {display: table-cell; width: 140px; height: 60px; color: #FFF; border-radius: 5px; vertical-align: middle; transition: 0.2s; font-size: 1.25em; white-space: nowrap; text-decoration: none; background-color: var(--menuback);}
.bgimgbox tr:first-of-type td a {width: 288px;}

.bgimgbox a:hover {background-color: var(--menuselect); color: var(--yellow);}

@media (max-width: 860px) {
.bgimgbox {padding: 15px 10px 8px 10px; line-height: 1.15;} .bgimgbox td {padding: 0;}
.bgimgbox a {width: 125px; height: 50px; font-size: 1.15em;} .bgimgbox tr:first-of-type td a {width: 256px;}
}
@media (max-width: 590px) {
.bgimgbox {padding: 10px 5px 3px 5px;} .bgimgbox div {font-size: 1.15em;}
.bgimgbox a {display: grid; align-items: center; margin: 1px; width: 115px; height: 45px; font-size: 1.05em;}
.bgimgbox tr:first-of-type td a {width: 234px;}
}
@media (max-width: 500px) {.bgimgbox {right: -6px;}}
@media (max-width: 450px) {.bgimgbox {display: none;}}

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

/*Svc Boxes*/

/*#sbback {border: 1px solid #FFF} .sb {border: 1px solid #FF0;} .sb div {border: 1px solid #F00;} .sb article {border: 1px solid green} .sb article a {border: 1px solid blue}*/

#svcblks {position: relative; display: table; table-layout: fixed; margin: 0 auto; line-height: 0; width: 100%; text-align: center; padding: 35px 0; background-color: var(--menuback);}
#sbback {max-width: 1500px; margin: auto;}
.sb {width: 11.1%; position: relative; display: table-cell; vertical-align: top; max-width: 150px;}
.sb div {display: block; text-align: center; margin: 0 10px 10px 10px; transition: .2s; overflow: hidden; border-radius: 50%; border: 4px solid #FFF; -webkit-mask-image: -webkit-radial-gradient(white, black);} /*-webkit-mask-image required for Safari*/
.sb article {position: relative; display: block; text-align: center; left: 0; right: 0; margin: auto; font-weight: 500; font-size: 20px; line-height: 1.2; font-weight: 500;}
.sb article a {color: #FFF; text-decoration: none !important; transition: .2s; display: inline-block;}
.sb article img {display: block; transition: .4s; transform: translateZ(0); width: 140px; height: 140px; object-fit: cover;}

@media (max-width: 1480px) {.sb article img {width: 120px; height: 120px; width: 100%; height: auto;}}
@media (min-width: 1271px) {.sb article {font-size: 18px;} .sb article:hover div {border: 4px solid var(--yellow);}}
@media (max-width: 1270px) {
#svcblks {padding: 30px 0;} .sb {margin: 0 20px;} .sb article {font-size: 1.5vw;}
.sb div {border: 3px solid #FFF;} .sb article:hover div {border: 3px solid var(--yellow);}
}
@media (min-width: 1021px) {#svcblks {white-space: nowrap;} #sbback {display: table; margin: 0 auto; width: 95%;}}
@media (max-width: 1020px) {#sbback {max-width: 700px;} .sb article {font-size: 18px;} .sb {width: 100%; display: inline-block;}}
@media (max-width: 1020px) and (min-width: 341px) {.sb:nth-last-of-type(-n+6) {margin-top: 20px;}}
@media (max-width: 625px) {.sb {margin: 0 5px;}}
@media (max-width: 530px) {#sbback {max-width: 380px;} .sb article img {width: 90px; height: 90px;} .sb {margin: 0; max-width: 120px;}}
@media (max-width: 410px) {
#sbback {max-width: 500px;} .sb article img {width: 70px; height: 70px;} .sb {max-width: 100px;} .sb article {font-size: 15px;}
}
@media (min-width: 401px) {
.sb article:hover img {-webkit-transform: scale(1.1); filter: brightness(110%) saturate(110%);}
.sb article:hover div {-webkit-transform: scale(1.05); -webkit-mask-image: -webkit-radial-gradient(white, black);}
.sb article a:hover {color: var(--yellow);}
}
@media (max-width: 400px) {.sb div {margin: 0 10px 5px 10px;}}
@media (max-width: 340px) {
.sb:nth-last-of-type(-n+7) {margin-top: 20px;}
.sb {display: inline-grid; margin: 0 10px; justify-content: center;} .sb article img {width: 80px; height: 80px;}
}

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

/*Why Us*/

#whyus {background-color: #E5E5E5;} #whyus .bodyarea {padding: 50px 0;}
#whyus .heading {color: var(--menuback);} #whyus img {margin-top: 8px;}
@media (min-width: 901px) {#whyus .pagepic {margin-top: 20px;}}

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

/*Our Services*/

#oursvcs {margin: auto; background-color: var(--menuhover);}
#oursvcs .bodyarea {-webkit-display: grid; display: grid; padding: 0;}
#oursvcs .heading {color: #222; font-size: 1.8em; font-weight: 500; line-height: 1.2; text-align: center;}
#oursvcs img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
#oursvcs p {margin-bottom: 0;}

/*If padding above and below, do this to make image not so tall: for section:last-child:  height: 90%; align-self: center;*/

@media (max-width: 1560px) {#oursvcs img {object-position: 15% 50%;}}

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

/*list*/

#oursvcs article {display: table; margin: auto;} #oursvcs li {margin: 0 0 15px 30px; line-height: 1.4; text-align: left;}

@media (min-width: 481px) {
#oursvcs ul {display: table-cell; vertical-align: top; padding: 15px 15px 15px 5px; width: 50%;} #oursvcs li:last-child {margin-bottom: 0;}
}
@media (max-width: 480px) {#oursvcs ul {display: block; padding: 0; margin: 0;}}

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

/*Values*/

.valsection .bodyarea {padding: 70px 0 50px 0;} .valsection {background-color: #DDD; color: #000} .valsection .bodyhead {color: var(--menuback);}

#valueswrap {width: 100%; max-width: 1600px; margin: 30px auto 10px auto;}
.value {vertical-align: top; font-size: 20px; padding: 15px;}
.value img {display: block; vertical-align: middle; margin: auto; width: 113px; height: 83px; height: auto;}
.valhead {margin: 15px auto 10px auto; font-weight: 500; text-transform: uppercase; font-size: 1.2em; line-height: 1.4; color: var(--menuback);}
.valtxt {font-size: .9em; line-height: 1.5;}

@media (max-width: 1195px) {.valsection .bodyarea {padding: 60px 0 40px 0; width: 90%;}}
@media (max-width: 1195px) and (min-width: 991px) {.valhead {font-size: 1.1em;}}
@media (max-width: 1255px) and (min-width: 991px) {.valtxt {font-size: 1.5vw;}}
@media (max-width: 1065px) and (min-width: 991px) {.value {padding: 10px;}}
@media (min-width: 991px) {
#valueswrap {display: table; table-layout: fixed;}
.value {display: table-cell; width: 20%; text-align: center;} .valueimg {vertical-align: middle; display: table-cell; width: 1%;}
}
@media (max-width: 990px) {
.value {display: block; width: auto; text-align: left; margin: 0; padding: 5px 0; min-height: 110px;}
.valueimg {float: left; vertical-align: top; text-align: left; margin-right: 15px;}
.valhead {margin: 0 auto 0 auto;} .valtxt {display: table-cell;}
}
@media (max-width: 410px) {
.valsection .bodyarea {width: 85%;} .value {text-align: center;}
.valueimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 20px;}
}

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

/*Service Area*/

.servicearea .bodyarea {padding: 50px 0 50px 0;}
.map img {width: 188px; height: 400px; width: 100%; height: auto; max-width: 188px; display: block;}

@media (min-width: 616px) {.map {float: right; margin: 40px 0 10px 25px; padding-bottom: 40px;}}
@media (max-width: 615px) {.map {text-align: center; margin: 15px auto 25px auto;} .map img {margin: auto;}}