/*HOME PAGE*/

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

/*Top Pic*/

.bgimgback {height: 30vw; max-height: 400px; position: relative; background-color: #007AC3;}
.bgimg {position: relative; background-repeat: no-repeat; background-size: cover; background-position: 50% 57%; height: 100%;}

@media (max-width: 750px) {.bgimgback {height: 25vw;}}
@media (max-width: 600px) {.bgimgback {height: 38vw;}}
@media (max-width: 380px) {.bgimgback {display: none;} #header {border-bottom: 0;}}

@media (min-width: 501px) {.bgimg {background-image: url("../images/toppic1.jpg");}}
@media (max-width: 500px) {.bgimg {background-image: url("../images/toppic2.jpg");}}

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

/*Service Blocks*/

#blocks {display: table; margin: 10px auto; line-height: 0; width: 100%; text-align: center;}
#blocks a {display: table-cell; width: 20%; text-decoration: none !important; color: #FFF !important;}
#blocks div {margin: 0 5px; padding: 12px 0; text-align: center; background-color: #007AC3; transition: .4s; border-radius: 8px;} /*blue 007AC3*/
#blocks img {width: 90px; height: 90px; height: auto; margin-bottom: 8px; -webkit-transition: .4s; transform: translateZ(0); transform: translate3d(0,0,0); filter: blur(0); backface-visibility: hidden} /*transform, filter and/or backface help stop img from moving slightly in Chrome after transition*/
#blocks h1 {font-size: 20px; line-height: 1.3; font-weight: 400 !important; color: #FFF !important; text-transform: uppercase;}

#blocks div:hover {background-color: #219CDE;}
#blocks div:hover img {transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1);}

@media (max-width: 1055px) and (min-width: 726px) {
#blocks {margin: 4px auto;} #blocks div {margin: 0 2px; height: 115px; padding: 8px 0;}
#blocks h1 {font-size: 18px;} #blocks img {width: 85px;}
}
@media (max-width: 940px) and (min-width: 881px) {#blocks h1 {font-size: 1.9vw;}}
@media (max-width: 880px) and (min-width: 726px) {
#blocks span {display: block;} #blocks div {height: 140px;} #blocks h1 {font-size: 17px;}
}
@media (max-width: 760px) and (min-width: 726px) {#blocks h1 {font-size: 2.2vw;}}
@media (min-width: 726px) {#blocks {white-space: nowrap;}} /*otherwise last image may wrap to next line on some devices*/
@media (max-width: 725px) {
#blocks {margin: 2px auto;} #blocks a {display: inline-block; width: 50%;}
#blocks div {margin: 2px;} #blocks a:last-child {display: none;}
}
@media (max-width: 510px) {#blocks img {width: 80px;} #blocks h1 {font-size: 18px;}}
@media (max-width: 380px) {
#blocks {margin: 1px auto;} #blocks div {height: 130px; margin: 1px;}
#blocks h1 {font-size: 18px; display: table-cell; vertical-align: middle; width: 300px; overflow: hidden; height: 40px;}
#blocks span {display: block;}
}
@media (max-width: 300px) {#blocks div {height: 125px;} #blocks h1 {font-size: 16px;}}

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

/*New Area*/

.newareaback, .newarea {background-color: #444;}
.newarea {position: relative; text-align: left; clear: both; font-size: 18px; line-height: 1.4; max-width: 1500px; margin: auto;}
.newareatext {text-align: left; font-size: 1.15em; line-height: 1.5; color: #FFF;}
.newarea h1 {font-size: 2em; line-height: 1.2; font-weight: 700; text-transform: uppercase; margin: 0 0 20px 0 !important; color: #FFF;}
.newareaimg {position: relative; background-repeat: no-repeat; background-size: cover; height: 100%; border-radius: 5px;}

@media (max-width: 900px) {.newarea h1 {font-size: 2em;}}
@media (min-width: 801px) {.newareaimg {width: 40%;}}
@media (max-width: 800px) and (min-width: 661px) {.newareaimg {width: 30%;} .newareatext {padding: 0 0 0 25px;}}
@media (min-width: 661px)  {
.newarea {display: table; height: 100vw; max-height: 300px; padding: 30px; box sizing: border-box;}
.newareaimg {display: table-cell;} .newareatext {padding: 20px 0 20px 35px;}
}
@media (max-width: 660px) {.newarea {padding-top: 30px;} .newareaimg {height: 60vw; width: 82vw; margin: auto;} .newareatext {padding: 30px 6vw;}}
@media (min-width: 501px) {.newareaimg {background-image: url("../images/pic1.jpg"); background-position: 50% 70%;}}
@media (max-width: 500px) {
.newareaimg {background-image: url("../images/pic2.jpg");}
.newarea h1 {text-transform: none; font-size: 1.8em;}} @media (max-width: 400px) {.newarea h1 {font-size: 1.6em;}
}

/*Service List*/

#svclist {width: 100%; max-width: 750px;}
#svclist a {color: #6CC8FF !important; text-decoration: none;} #svclist a:hover {text-decoration: underline;}
#svclist td {width: 50%; vertical-align: top;}
#svclist ul {margin: 0 auto;} #svclist li {margin: 0 0 13px -18px; line-height: 1.4; text-align: left; color: #FFF;}
#svclist li:last-child {margin-bottom: 0;}
@media (min-width: 431px) {#svclist td:nth-child(1) ul {padding-right: 20px;}}
@media (max-width: 430px) {#svclist td {display: block; width: auto !important;} #svclist td:nth-child(2) {padding-top: 15px;}}