/*Home Page*/

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

@media (min-width: 1161px) {
@keyframes bgimgboxzoom {
   0% {-webkit-transform: translateY(-42%) scale(0.5); opacity: 0;} 100% {-webkit-transform: translateY(-42%) scale(1); opacity: 1;}}
}
@media (max-width: 1160px) {
@keyframes bgimgboxzoom {
   0% {-webkit-transform: translateY(-46%) scale(0.5); opacity: 0;} 100% {-webkit-transform: translateY(-46%) scale(1); opacity: 1;}}
}

@media (min-width: 500px) {
.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 12s;}
.sb:nth-child(2) {-webkit-animation: sblockzoom 14s; animation-delay: .08s;}
.sb:nth-child(3) {-webkit-animation: sblockzoom 16s; animation-delay: .1s;}
.sb:nth-child(4) {-webkit-animation: sblockzoom 18s; animation-delay: .15s;}

@keyframes blockspin {
0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}} .sb div {-webkit-animation: blockspin .8s;}

}

.bahome .bodyhead {padding-bottom: 10px;}
.bahome .bodyhead:nth-child(2) {padding-bottom: 3px; color: #D00000;}
.bahome .bodyhead:nth-child(3) {font-size: 1.5em;}
@media (max-width: 800px) {.bahome .bodyhead:nth-child(3) {font-size: 1.45em;}}
@media (max-width: 600px) {.bahome {padding-top: 0;}}
@media (max-width: 360px) {.bahome .bodyhead:nth-child(3) {font-size: 1.4em;}}

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

/*Header Back*/

header {background-image: url(images/headback.png); /*background-repeat: repeat-x;*/ background-size: 100% 100%; background-color: #D6E2EE;}

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

/*Home Pic*/

#homepic {position: relative; height: calc(120px + 32vw); max-height: 500px; overflow: hidden; display: flex; align-items: center; background-color: #555;} /*sdf*/
#homepic img {width: 500px; height: 300px; width: 100vw; height: auto; display: block; filter: brightness(65%);}

#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: 850px; z-index: 1; font-size: 3.6em; color: #FFF;}
.homecap h1 {font-family: 'Archivo', Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1.2em; text-shadow: 1px 1px 2px #000;}
.homecap div:first-of-type {font-size: .55em; line-height: 1.4; letter-spacing: .3px; padding-top: 20px; font-weight: 400 !important;}

@media (max-width: 1430px) and (min-width: 1126px) {.homecap {width: calc(65vw - 190px);} .homecap h1 {font-size: 4.5vw;}}
@media (max-width: 1160px) and (min-width: 771px) {.homecap {width: calc(70vw - 100px);} .homecap h1 {font-size: 5vw;}}

@media (min-width: 861px) {
#hpcont {width: 88%; max-width: 1500px;}
.homecap h1 {line-height: 1.1;} .homecap {top: 48%; -webkit-transform: translateY(-48%); transform: translateY(-48%)}
@keyframes slidecap {0% {top: 48%; -webkit-transform: translate(-48%,-48%); transform: translate(-48%,-48%); opacity: 0;} 100% {top: 48%; -webkit-transform: translate(0%,-48%); transform: translate(0%,-48%); opacity: 1;}} /*all 55% if no flag border*/
.btn {margin-top: 35px;}
}
@media (max-width: 860px) {
#hpcont {width: 92%;}
.homecap {top: 48%; -webkit-transform: translateY(-48%); transform: translateY(-48%); width: calc(70vw - 100px);}
.homecap h1 {font-size: 5vw; line-height: 1.1;}
.homecap div:first-of-type {font-size: 2.7vw;}
@keyframes slidecap {0% {top: 48%; -webkit-transform: translate(-48%,-48%); transform: translate(-48%,-48%); opacity: 0;} 100% {top: 48%; -webkit-transform: translate(0%,-48%); transform: translate(0%,-48%); opacity: 1;}}
.btn {margin-top: 30px;}
}
@media (max-width: 830px) {.homecap div:first-of-type {font-size: 2.9vw;}}

@media (min-width: 706px) {.btn a {padding: 12px 20px; font-size: 20px;}}
@media (max-width: 705px) {
.homecap {width: calc(75vw - 170px);}
.homecap h1 {font-size: calc(7.7vw - 16px);}
.homecap div:first-of-type {visibility: hidden; font-size: 0; line-height: 0; padding: 0;}
.btn {margin: 25px auto 0 auto;} .btn a {padding: 9px 17px; font-size: 21px;}
}
@media (max-width: 590px) {
#homepic {height: calc(105px + 31vw);}
.homecap {width: auto; text-align: center; top: 44%; -webkit-transform: translateY(-44%); transform: translateY(-44%)}
.homecap h1 {font-size: 7.5vw;} .btn {display: table; margin: 20px auto 0 auto;}
@keyframes slidecap {0% {top: 44%; -webkit-transform: translate(-44%,-44%); transform: translate(-44%,-44%); opacity: 0;} 100% {top: 44%; -webkit-transform: translate(0%,-44%); transform: translate(0%,-44%); opacity: 1;}}
}
@media (max-width: 500px) {#homepic {height: calc(110px + 32vw);}}
@media (max-width: 420px) {.btn {display: none;} .homecap h1 {font-size: 10vw;}}
@media (max-width: 360px) {#homepic {height: calc(101px + 30vw);}}

.btn a {display: table-cell; text-align: center; line-height: 1.4; background-color: var(--divback); -webkit-transition: 0.4s; white-space: nowrap; border-radius: 6px; color: #FFF !important; text-decoration: none; font-weight: 500;}
.btn a:hover {background-color: var(--menuselect);}

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

/*How Can We Help Box*/

.bgimgbox {position: absolute; text-align: center; right: 0; line-height: 1.3; background-image: url(images/flag1.png); background-repeat: no-repeat; background-size: 100% 100%; background-color: #FFF; padding: 19px 15px 12px 15px; border-radius: 2px; z-index: 2;}
.bgimgbox td {padding: 3px;}
.bgimgbox div {text-align: center; margin: 0 auto 5px auto; font-size: 1.1em; font-weight: 500; padding-bottom: 4px;}
/*.bgimgbox div {display: table; margin: 10px 0; vertical-align: middle; transform: translateZ(0); transform: translate3d(0,0,0);}*/
.bgimgbox a {display: table-cell; width: 180px; height: 60px; margin: 5px 0; color: #FFF; border-radius: 5px; vertical-align: middle; transition: 0.4s; font-size: 1.1em; white-space: nowrap; text-decoration: none; background-color: var(--divback);}

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

@media (min-width: 1161px) {.bgimgbox { top: 42%; -webkit-transform: translateY(-42%); transform: translateY(-42%);}}
@media (max-width: 1160px) {
.bgimgbox {top: 46%; -webkit-transform: translateY(-46%); transform: translateY(-46%); background-image: url(images/flag2.png);}
.bgimgbox td {display: block;} .bgimgbox a {height: 50px;} .bgimgbox span {display: block;}}

@media (max-width: 860px) {.bgimgbox {padding: 15px 10px 8px 10px;}}
@media (max-width: 750px) {
.bgimgbox {padding: 10px 5px 5px 5px;} .bgimgbox a {height: 45px; width: 165px; font-size: 1.05em;}
.bgimgbox div {font-size: 1em; margin-bottom: 2px;}
}
@media (max-width: 590px) {.bgimgbox {display: none;}}


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

/*Blocks Under Big Pic*/

#svcblks {position: relative; display: table; margin: 0 auto; line-height: 0; width: 100%; text-align: center; padding: 25px 0; background-image: url(images/flagback1.png); background-repeat: repeat; background-color: #145688;}
.sb {width: 25%; position: relative; display: inline-block; vertical-align: top; max-width: 250px;}
.sb div {display: block; text-align: center; margin: 0 15px 15px 15px; transition: .2s; overflow: hidden;
-webkit-filter: drop-shadow(1px .5px 0 #FFF) drop-shadow(.5px 1px 0 #FFF) drop-shadow(0 -.5px 0 #FFF) drop-shadow(-.5px 0 0 #FFF);
filter: drop-shadow(1px .5px 0 #FFF) drop-shadow(.5px 1px 0 #FFF) drop-shadow(0 -.5px 0 #FFF) drop-shadow(-.5px 0 0 #FFF);
}
.sb h2 {position: relative; display: block; text-align: center; left: 0; right: 0; margin: auto; font-size: 1.4em; line-height: 1.2; font-weight: 500;}
.sb h2 a {color: #FFF; text-decoration: none !important; transition: .2s; display: inline-block;} /*.sb h2 a:hover {color: #FFF301;}*/
.sb h2 img {display: block; transition: .4s; transform: translateZ(0); width: 213px; height: 213px; object-fit: cover;}

@media (min-width: 1151px) {.sb {margin: 0 10px;}}
@media (max-width: 1070px) {.sb h2 img {width: calc(20vw - 8px); height: calc(20vw - 8px);}}
@media (max-width: 880px) {.sb h2 span {display: block;}}
@media (max-width: 690px) {#svcblks {padding: 20px 0;} .sb h2 img {width: calc(19vw - 8px); height: calc(19vw - 8px);} .sb h2 {font-size: 1.2em;}}

@media (min-width: 551px) {#svcblks {white-space: nowrap;} #sbback {display: table; margin: 0 auto; width: 95%;}}
@media (max-width: 550px) {
.sb {width: 45%; padding: 0;} .sb:nth-child(3), .sb:nth-child(4) {margin-top: 35px;}
.sb a div {margin: 0 auto 10px auto;} .sb h2 {margin: 0 auto 20px auto; white-space: nowrap}
.sb a {width: 100%;} .sb a div, .sb h2 img {width: 28vw; height: 28vw;}
}
@media (min-width: 501px) {.sb h2:hover img {filter: brightness(110%) saturate(110%);}}

.sb h2:hover div {-webkit-filter: drop-shadow(1px .5px 0 #F00) drop-shadow(.5px 1px 0 #F00) drop-shadow(0 -.5px 0 #F00) drop-shadow(-.5px 0 0 #F00);}

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

/*Our Services*/

/*Must do it this way as overflow:visible results in 20pt drop in PageSpeed Insights, but
without it, icon img gets cut off, and I can't change icon top & right margin.
Only an issue with round icons!
*/

@font-face {font-family: 'Mazin'; font-style: normal; font-weight: 500; font-display: block;
  src: local(''), url('fonts/mazin-500.woff2') format('woff2'), url('fonts/mazin-500.woff') format('woff');
}

#oursvcs {background-image: url(images/flagback.jpg); background-repeat: repeat; background-color: #DDD;}
#oursvcs .bodyarea {padding: 50px 0 30px 0;} #oursvcs .bodyhead {text-align: left;}

#osboxes {margin: 30px auto; text-align: center; font-size: 17px; font-weight: 400; color: #FFF; max-width: 1500px;}
#osboxes * {box-sizing: border-box;}
#osboxes .box {display: inline-block; line-height: 1.55; background-color: #FFF; text-align: left; color: #555; border-radius: 8px; border: 2px solid var(--divback);}
.oshead {padding-bottom: 15px;}
.oshead h2 {width: 100%; margin-bottom: 15px; font-size: 1.5em; line-height: 1.25; font-weight: 500 !important; color: #D80000;}

.icon {padding: 9px 10px 11px 10px; border-radius: 50%; background-color: var(--divback);}
.icon img {display: block; width: 55px; height: 55px;}

@media (min-width: 1701px) {#osboxes .box {flex: 0 0 calc(25% - calc(15px * 2)); margin: 10px;}}
@media (max-width: 1700px) {#osboxes .box {flex: 0 0 calc(50% - calc(1vw * 2)); margin: .9vw;}}
@media (min-width: 881px) {
#osboxes {display: flex; flex-wrap: wrap; justify-content: center;} #osboxes .box {padding: 13px 13px 15px 15px;}
.oshead h2 {padding: 5px 20px 0 10px;} #osboxes .boxtext {padding: 0 10px 10px 10px;}
.oshead h2, .icon {display: table-cell; vertical-align: top;}
}
@media (max-width: 880px) {
#osboxes {margin: 30px auto 10px auto;} #osboxes .box {display: block; margin: 15px 0; padding: 20px;}
.oshead h2 {padding: 5px 0 0 10px; text-align: center;} #osboxes .boxtext {padding: 0 10px 10px 10px;}
.icon {margin: 15px auto 0 auto; display: table;}
}

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

/*Why Us*/

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

#whyus {margin: auto; background-color: #094A78; color: #FFF;}
#whyus .bodyarea {-webkit-display: grid; display: grid; padding: 0;}
#whyus div:not(.phead) {font-size: 1.05em; line-height: 1.4;}
#whyus .bodyhead {color: #8cbfe6; text-align: left;}
#whyus span {display: block; font-size: 1.5em; font-weight: 600; line-height: 1.25; color: #8cbfe6;} /*pink: #FF9894, yellow: #FFDF29*/
#whyus img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; /*object-position: 50% 50%;*/}
#whyus p {margin-bottom: 0;}

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

@media (min-width: 1301px) {
#whyus .bodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr;}
#whyus section:first-child {margin-right: 20px; padding: 50px 0;} #whyus section:last-child {margin-left: 20px;}
}
@media (max-width: 1300px) {
#whyus section:first-child {padding: 50px 0 0 0;}
#whyus section:last-child {/*-webkit-order: 2; order: 2;*/ margin-top: 45px;}
#whyus img {height: calc(80px + 45vw); max-height: 450px;}
}
@media (min-width: 846px) {
#whyus section:first-child {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "a a" "b b" "c d" "e f" "g h";}
#whyus .p1, #whyus .p3 {padding-right: 20px;} #whyus .p2, #whyus .p4 {padding-left: 20px;}
}
@media (max-width: 845px) {#whyus * {display: block;} #whyus .p3 {margin-bottom: 15px;}}

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

/*Values*/

#valueback {background-color: #9A0000; 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.08em; line-height: 1.4; padding: 0 0 0 80px; margin: 30px 5%; color: #FFF;}
.val div:first-child {font-size: 1.5em; font-weight: 600; margin-bottom: 8px; color: #8cbfe6;}
.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;}}

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

/*Our Story*/

#story .bodyarea {padding: 40px 0 45px 0;} #story .bodyhead {text-align: left;}
#story img {margin-top: 35px; display: block; max-height: 400px; width: 500px; height: 300px; width: 100%; height: auto; object-fit: cover;}

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

/*Email Form and Interested In*/

/*#getstarted .homecontleft {background-color: yellow} #getstarted .homecontright {background-color: cyan}*/

#getstarted {background-image: url(images/flagback.jpg); background-repeat: repeat; background-color: #DDD; padding: 30px 0;}
#getstarted .bodyarea {max-width: 1200px;}
#getstarted span {text-align: center; display: block; font-size: 1.5em; line-height: 1.25; font-weight: 600; color: var(--divback);}

/*#getstarted ul {display: table-cell; list-style-type: none; margin: 0 0 0 5px; padding: 0;}
#getstarted li {padding: 0 0 16px 0px; line-height: 1.45;}
#getstarted li:before {content: "\2605"; font-size: 1.4em; line-height: 1; padding-right: 8px; color: #D00;}
#getstarted li:last-child {padding-bottom: 0;}*/