/*HOME PAGE*/

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

@keyframes slidecap {
   0% {transform : translateY(-48%) translateX(-60%); opacity: 0;}
   100% {transform: translateY(-48%) translateX(0%); opacity: 1;}
}
.bgimgback.home .caption {animation: slidecap 1s;}

@keyframes sblockzoom {
0% {transform: scale(0.5,0.5);}
5% {transform: scale(1.05,1.05);}
10% {transform: scale(1,1);}
}

.sb1 {animation: sblockzoom 12s;}
.sb2 {animation: sblockzoom 14s; animation-delay: .08s;}
.sb3 {animation: sblockzoom 16s; animation-delay: .1s;}
.sb4 {animation: sblockzoom 18s; animation-delay: .15s;}

}

@media (max-width: 930px) and (min-width: 460px) {.bodyhead span {display: block;}}

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


/*Top image*/

.bgimgback.home {height: 39vw; max-height: 500px; overflow: hidden;}
.bgimgback.home .bgimg {background-position: 0 50%;}

.bgimgback.home .caption {position: absolute; font-size: 80px; text-align: left; left: 5%; top: 48%; transform: translateY(-48%);}
.caption .cap1 {font-weight: 500; font-size: 1.35em; line-height: 1.1; text-shadow: 1px 1px 2px #000; font-family: 'Oswald', Arial, Helvetica, sans-serif; color: #FFF; text-transform: uppercase;}
.caption .cap0 {font-size: .49em; text-transform: uppercase; margin-bottom: 10px;}
.caption .cap0, .caption .cap2 {font-weight: 500; line-height: 1.3; color: #FFF;}
.caption .cap2 {margin-top: 15px; font-size: .35em;}

@media (max-width: 1080px) {
.bgimgback.home .caption {left: 4%;}
.caption .cap0 {font-size: 3.6vw;}
.caption .cap1 {font-size: 10vw;}
.caption .cap2 {font-size: 2.7vw;}
}
@media (max-width: 900px) {.bgimgback.home {height: 38vw;}}
@media (min-width: 761px) {
.caption .cap1 {margin-left: -2px !important;}
.caption .cap2 {margin-left: 2px !important;}
}
@media (max-width: 760px) {
.bgimgback.home {height: 42vw;}
.bgimgback.home .caption {text-align: center; left: auto; width: 100%; top: 48%;}
.caption .cap0 {font-size: 4.6vw;}
.caption .cap1 {font-size: 13vw;}
.caption .cap2 {font-size: 3.7vw;}
}
@media (max-width: 540px) {
.caption .cap0 {font-size: 5vw;}
.caption .cap1 {font-size: 14.5vw;}
.caption .cap2 {display: none;}
}

.bgimgback.home .bgimg {background-image: url("../images/toppic1a.jpg");}
@media (max-width: 800px) {.bgimgback.home .bgimg {background-image: url("../images/toppic1b.jpg");}}
@media (max-width: 500px) {.bgimgback.home .bgimg {background-image: url("../images/toppic1c.jpg");}}

/*---------*/
/*How Can We Help Box*/
.bgimgbox {position: absolute; text-align: center; right: 5%; top: 50%; transform: translateY(-50%); line-height: 1.3; background-color: #FFF; padding: 19px 25px 16px 25px; border-radius: 2px;}
.bghead {text-align: center; margin: auto !important; font-size: 1.4em; font-weight: 600; 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: 220px; height: 60px; margin: 5px 0; color: #FFF; border-radius: 6px; vertical-align: middle; transition: 0.3s; font-size: 1.1em; font-weight: 500;}
.bgib1 a {background-color: #33417c;}
.bgib2 a {background-color: #091756;}
.bgib3 a {background-color: #000a37;}

.bgib1 a:hover, .bgib2 a:hover, .bgib3 a:hover {background-color: #3c53c0; transform: scale(1.03);}
/*---------*/

/*COVID Box
.bgimgbox {position: absolute; text-align: center; right: 5%; top: 53%; transform: translateY(-53%); background-color: #E8BA40; padding: 13px 18px; border-radius: 4px; width: 100%; max-width: 300px;}
@media (max-width: 1200px) {.bgimgbox {max-width: 25vw; padding: 1vw;}}
.bgimgbox .covid {font-size: .9em; line-height: 1.4;}
@media (max-width: 815px) {.bgimgbox .covid {font-size: .85em;}}
*/

@media (min-width: 1351px) {.capbox {width: 1300px; position: absolute; top: 50%; transform: translateY(-50%); margin: auto; text-align: center; left: 0; right: 0;}}
@media (min-width: 1350px) {.capbox {display: inline;}}

@media (max-width: 1020px) {
.bgimgbox {padding: 15px 20px 12px 20px; right: 4%;}
.bgimgbox a {width: 200px; height: 50px; margin: 4px 0; font-size: 1em;}
.bghead {font-size: 1.25em;padding-bottom: 3px;}
}
@media (max-width: 850px) {
.bgimgbox {padding: 10px 15px 5px 15px;}
.bgimgbox a {width: 180px; height: 45px; margin: 3px 0; font-size: .95em;}
.bghead {font-size: 1.15em; padding-bottom: 2px;}
}
@media (max-width: 760px) {.bgimgbox {display: none;}}

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

/*Service Blocks*/

#blocks {text-align: center; width: 100%; margin: auto;}
#blocks td {width: 25%; border: 1px solid #705E34; transition: .4s; background-color: #091756;} /*33% if 3, 25% if 4*/
#blocks img {width: 110px; margin: 0 15px 0 0; vertical-align: middle; transition: .3s;}
#blocks a {display: block; padding: 25px 0;}
#blocks h4 {display: inline; text-transform: uppercase; font-size: 1.5em; line-height: 1.35; color: #FFF; text-decoration: none; font-weight: 400 !important;}

@media (max-width: 1640px) {
#blocks img {width: 100px; margin: 0 0 15px 0;}
#blocks a {padding: 20px 0 15px 0;}
#blocks h4 {display: block; font-size: 1.4em;}
}
@media (max-width: 1060px) {
#blocks img {width: 90px;}
#blocks a {padding: 17px 0 12px 0;}
#blocks h4 {font-size: 1.3em;}
#blocks h4 span {display: block;}
}
@media (max-width: 775px) {#blocks h4 {font-size: 1.1em;}}
@media (max-width: 665px) {
#blocks img {width: 80px;}
#blocks a {padding: 17px 0 12px 0;}
#blocks h4 {text-transform: none}
}
@media (max-width: 520px) {
#blocks img {width: 17vw;}
#blocks h4 {display: none;}
#blocks a {padding: 12px 0 0 0;}
}

#blocks td:hover {background-color: #2F45AC;}
#blocks td:hover img {transform: scale(1.1); /*filter: brightness(120%) saturate(500%);*/}



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

/*Right Box*/

#rightbox {padding: 8px 15px 5px 15px; background-color: #f6cf64; border-radius: 4px;}
.rbhead {text-align: center; font-weight: 600;}
#rightbox ul {margin: 10px 0 0 0; text-align: left;}
#rightbox li {padding-bottom: 14px; font-size: .95em; line-height: 1.4; margin-left: -22px;}
#rightbox a:hover {text-decoration: underline;}
@media (min-width: 901px) {.rb-dsk {width: 250px; margin: 5px 0 10px 25px;}}
@media (max-width: 900px) and (min-width: 603px) {.rb-dsk {width: 32%; margin: 5px 0 10px 20px;}}
@media (max-width: 680px) and (min-width: 602px) {#rightbox li {font-size: .85em;}}
@media (min-width: 603px) {
.rb-ph {display: none;}
.rb-dsk {float: right;}
}
@media (max-width: 602px) {
.rb-dsk {display: none; visibility: hidden;}
.rb-ph {padding: 0; margin: 25px auto 15px auto; left: 0; right: 0; width: auto; /*max-width: 220px;*/}
#rightbox li {font-size: 1em;}
}