/*HOME PAGE*/

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

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

/*Top image*/

#homepic {position: relative; height: calc(80px + 35vw); max-height: 450px; overflow: hidden; background-color: #F9FAFD;}
#homepic img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 500px; height: 300px; width: 100%; height: auto; display: block;}

#homepic h1 {margin: 0 auto;}
.caption {position: absolute; text-align: center; left: 0; right: 0; bottom: 0; background-color:rgba(0,0,0,0.4); padding: 25px 0; font-family: 'OpenSansComp', Arial, Helvetica, sans-serif; font-weight: 700 !important; font-size: 60px; line-height: 1.2; text-shadow: 1px 1px 2px #000; color: #FFF; text-transform: none; z-index: 1;}
@media (max-width: 1470px) {.caption {font-size: 4.1vw;}}
@media (max-width: 750px) {.caption {padding: 5px 0 10px 0; font-size: 6.3vw} .caption span {display: block;}}
@media (max-width: 395px) {.caption {visibility: hidden;}}

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

/*Service Blocks*/

#blocks .blockin {display: block; text-align: center; vertical-align: top; overflow: hidden;}
#blocks img {padding: 15px; margin: auto; display: block; -webkit-backface-visibility: hidden;}
#blocks .blockimg {background-color: #0063B1;}
#blocks .blockin, #blocks img, #blocks .blockimg, #blocks h4 {transition: .3s;}
#blocks h4 {text-align: center; font-size: 18px; font-weight: 400 !important; margin: 0 auto !important; background-color: #9A2514 /*208CE1*/; text-transform: none; white-space: nowrap;}
#blocks a {text-decoration: none !important; color: #FFF !important;}

/*For IE10 & IE11:*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {#blocks .block {border-left: 1px solid #FFF; border-right: 1px solid #FFF;}}

@media (min-width: 1201px) {#blocks img {width: 134px; height: 134px;}}
@media (max-width: 1200px) {#blocks img {width: 114px; height: 114px;}}
@media (min-width: 1101px) {
#blocks {margin: 9px 5px 0 5px;} #blocks .block {margin: 0 5px; background-color: #EEE;}
#blocks p {font-size: 16px; line-height: 1.45; padding: 0 10px; margin-top: 10px; color: #000; font-weight: 400; text-align: left;}
#blocks h4 {padding: 7px 0 6px 0;}
}
@media (max-width: 1100px) {#blocks p {display: none;}}
@media (max-width: 1100px) and (min-width: 871px) {
#blocks {margin: 5px 2px 0 2px;} #blocks .block {margin: 0 3px;}
#blocks img {width: 80px; height: 80px; padding: 10px;} #blocks h4 {font-size: 16px; padding: 5px 0 6px 0;}
}
@media (min-width: 871px) {
#blocks {display: flex; align-self: center; flex-wrap: nowrap; justify-content: center;} #blocks .block {width: 20%; display: table-cell;}
}
@media (max-width: 870px) {
#blocks {display: table; table-layout: fixed; width: 100%; text-align: center;}
#blocks .block {display: table-cell; width: 16.7% !important;}
#blocks .blockin {margin: 5px 3px 0 3px;}
#blocks img {width: 70px; height: 70px; padding: 10px;}
#blocks h4 {display: none;}
/*.block:nth-child(4), .block:nth-child(5) {width: 49.5% !important; text-align: center; margin: auto;} */
}
@media (max-width: 590px) {#blocks .block {display: inline-block; width: 33.3% !important;}
.block:nth-child(4) .blockin, .block:nth-child(5) .blockin, .block:nth-child(6) .blockin {margin-top: 0 !important;}
}

/*@media (max-width: 100px) {#blocks .blockin {margin: 2px 1px 0 1px;} #blocks img {width: 55px; height: 55px; padding: 8px 0;}}
@media (max-width: 100px) {#blocks img {width: 45px; height: 45px; padding: 8px 0;}}*/

#blocks .block a:hover .blockimg {background-color: #208CE1;}
#blocks .block a:hover img {-webkit-transform: scale(1.05);} #blocks .block a:hover h4 {background-color: #C00;}

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

/*Area*/

.newareaback, .newarea {background-color: #0063B1;}
.newarea {position: relative; text-align: left; clear: both; font-size: 18px; line-height: 1.4; width: 90%; max-width: 1500px; margin: auto;}
.newareatext {text-align: left; line-height: 1.6; color: #FFF;}
.newareatext div {font-size: 2.15em; line-height: 1.2; font-family: 'OpenSansComp', Arial, Helvetica, sans-serif; font-style: normal; line-height: 1.1; font-size: 2.8em; font-weight: 700; text-transform: uppercase; margin: 0 0 20px 0; color: #FFF;}
.newareaimg {position: relative; background-repeat: no-repeat; background-size: cover; height: 100%; border-radius: 5px;}

@media (max-width: 900px) {.newareatext div {font-size: 2em;}}
@media (min-width: 801px) {.newareaimg {width: 40%;}}
@media (max-width: 800px) and (min-width: 661px) {.newareaimg {width: 30%;}}
@media (min-width: 741px) {
.newarea {display: table; height: 100vw; max-height: 300px; padding: 30px 0; box sizing: border-box}
.newareatext {padding: 20px 0 20px 35px;} .newareaimg {display: table-cell;}
}
@media (max-width: 800px) and (min-width: 661px) {.newareatext {padding: 0 0 0 25px;}}

@media (max-width: 740px) {.newarea {padding-top: 30px;} .newareaimg {height: 60vw; width: 88vw; margin: auto;} .newareatext {padding: 30px 1vw;}}
@media (max-width: 500px) {.newareatext div {text-transform: none; font-size: 1.8em;}} @media (max-width: 400px) {.newarea h1 {font-size: 1.6em;}}

@media (min-width: 501px) {.newareaimg {background-image: url("images/kook-and-son-hudson-county-nj-heating-air-conditioning-plumbing1.jpg"); background-position: 25% 50%;}}
@media (max-width: 500px) {.newareaimg {background-image: url("images/kook-and-son-hudson-county-nj-heating-air-conditioning-plumbing2.jpg");}}


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

/*Values*/

#valueswrap {width: 100%; max-width: 1400px; margin: 30px auto 20px 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: 700; text-transform: uppercase; font-size: 1.2em; line-height: 1.4;}
.valtxt {color: #666; font-size: .85em; line-height: 1.5;}

@media (max-width: 1080px) and (min-width: 906px) {.valhead {font-size: 1.1em; letter-spacing: -.4px;}}
@media (max-width: 965px) and (min-width: 906px) {.valhead {font-size: 1.05em; letter-spacing: -.5px;} .value {padding: 10px;}}
@media (max-width: 960px) and (min-width: 906px) {.valtxt {font-size: .85em;}}
@media (min-width: 906px) {
#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: 905px) {
.value {display: block; width: auto; text-align: left; margin: 0; padding: 15px; min-height: 110px;}	
.valueimg {float: left; vertical-align: top; text-align: left; margin-right: 15px;}
.valhead {margin: 0 auto 10px auto;} .valtxt {display: table-cell;}
}
@media (max-width: 410px) {
.value {text-align: center;}
.valueimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 20px;}	
}

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

/*Reviews*/

#rvws {width: 100%; margin: 30px auto 40px auto;}
.rvw {vertical-align: top; text-align: center; font-size: 20px; padding: 30px; background-color: #FFF; border-radius: 8px;}
.rvwimg {display: inline-block; position: relative; width: 100%; max-width: 265px; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 100%; background-position: center center; margin-bottom: 20px;}
.rvwimg div {padding-top: 48px;}
.rvwtxt {color: #0063B1; font-size: 1.1em; line-height: 1.7; margin-bottom: 20px;}
.rvw span {display: block; line-height: 1.5; color: #666; font-size: .8em;}

@media (min-width: 1181px) {#rvws {gap: 0 50px;}}
@media (max-width: 1180px) {#rvws {margin: 20px auto 30px auto; gap: 0 3%;} .rvw {padding: 20px;} .rvwtxt {font-size: 1.05em;}}
@media (min-width: 781px) {#rvws {display: grid; grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 780px) {
#rvws {margin: 0 auto 20px auto;} .rvw {display: block; width: auto; padding: 30px;}
.rvw:nth-child(2) {margin: 20px auto;}
}
@media (max-width: 380px) {.rvwtxt {font-size: 1em;}} @media (max-width: 330px) {.rvwimg {margin-bottom: 10px;}}