/*HOME PAGE*/

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

/*Top Pic*/

.homeimg {height: 500px; overflow: hidden; background-color: #8F8F8F;}
.homeimg div {height: 100%; background-repeat: no-repeat; position: relative;}

@media (min-width: 2880px) {.homeimg div {background-position: 25% 20%, 75% 0%, 100% 50%;}}
@media (min-width: 2400px) and (max-width: 2879px) {.homeimg div {background-position: 20% 20%, 80% 0%, 100% 50%;}}
@media (min-width: 2131px) and (max-width: 2399px) {.homeimg div {background-position: 15% 20%, 85% 0%, 100% 50%;}}
@media (min-width: 1920px) and (max-width: 2130px) {.homeimg div {background-position: 15% 20%, 85% 0%, 100% 50%;}}
@media (min-width: 1701px) and (max-width: 1919px) {.homeimg div {background-position: 5% 20%, 95% 0%, 100% 50%;}}
@media (max-width: 1700px) {
.homeimg {height: 500px;}
.homeimg div {background-position: 0% 20%, 108% 0%, 100% 50%;}
}
@media (min-width: 1401px) {.homeimg div {background-size: 800px, 600px, cover;}}
@media (max-width: 1400px) {
.homeimg {height: 380px;}
.homeimg div {background-position: 5% 20%, 95% 0%, 100% 50%; background-repeat: no-repeat; background-size: calc(20% + 350px), calc(13% + 280px), cover;}
}
@media (max-width: 1060px) {
.homeimg {height: 38vw;}
.homeimg div {background-position: 0% 33%, 108% 0%, 100% 50%; background-repeat: no-repeat; background-size: 59%, 45%, cover;}
}
@media (min-width: 801px) {.homeimg div {background-image: url("../images/toppic-logo1.png"), url("../images/toppic-bubbles1.png"), url("../images/toppic-back1.jpg");}}
@media (max-width: 800px) {.homeimg div {background-image: url("../images/toppic-logo2.png"), url("../images/toppic-bubbles2.png"), url("../images/toppic-back2.jpg");}}
@media (max-width: 500px) {.homeimg div {background-image: url("../images/toppic-logo3.png"), url("../images/toppic-bubbles3.png"), url("../images/toppic-back3.jpg");}}

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

/* First Paragraph of Home Page */

.hometop {background-color: #EAEAEA;}
.hometop .bodyarea {/*position: relative;*/ padding-bottom: 10px; z-index: 1;}
@media (min-width: 701px) {.hometop {padding-top: 20px;}}
@media (max-width: 700px) {.hometop {padding-top: 0;}}
@media (min-width: 551px) {.hometop {padding-bottom: 60px;}}
@media (max-width: 550px) {.hometop {padding-bottom: 40px;}}
@media (max-width: 480px) {.hometop {padding-bottom: 20px;}}

.bodyhead h1 {font-size: .85em !important; padding: 3px 0 10px 0;}
.bodyhead {margin: 0 auto; padding: 0;}
.bh1 {line-height: 1.2 !important;}
.bh2 {color: #000 !important;}

@media (max-width: 1220px) and (min-width: 670px) {.bh2 span {display: block;}}
@media (max-width: 810px) and (min-width: 490px) {.bh1 span {display: block;}}
/*@media (max-width: 640px) and (min-width: 360px) {.hometop .bodyhead span:nth-child(2) {display: block;}}
@media (max-width: 770px) {.hometop .bodyhead h1 span {display: block;}}*/


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


/* Slanted Divs */

.slanted1 {padding-bottom: 30px; width: 100%; position: relative; background-color: #D0D0D0; overflow: visible; z-index: 0;
background-size: cover; background-position: 50% 50%;}
.slanted1:before, .slanted1:after {content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -3; top: 0; transform-origin: right top; transform: skewY(2deg);}
.slanted1:after {bottom: 0; transform-origin: left bottom; transform: skewY(-2deg); z-index: -3;}
/*transform-origin: LEFT bottom, and a negative transform: skewY, for "after" - makes slant go UP from left to right, not down*/

@media (min-width: 801px) {.slanted1 {background-image: url("../images/toppic-back1.jpg");} .slanted1:after {background:rgba(208,208,208,0.85);}}
@media (max-width: 800px) {.slanted1 {background:rgba(160,160,160,0.55);} .slanted1:after {background-color: #FFF; opacity: .5;}}

@media (max-width: 950px) {.slanted1 {padding-bottom: 10px;}}
@media (max-width: 860px) and (min-width: 481px) {
.slanted1:before, .slanted1:after {transform: skewY(3deg);} .slanted1:after {transform: skewY(-3deg);}
}
@media (max-width: 480px) {
.slanted1:before, .slanted1:after {transform: skewY(3deg);} .slanted1:after {transform: skewY(3deg);} .slanted1 .bodyarea {padding-top: 20px;}
}

.difference {position: relative; padding: 40px 0 20px 0; background: #ED1C24; overflow: visible; z-index: 1;}
.difference:before, .difference:after {content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; top: 0; transform-origin: left top; transform: skewY(-2deg);}
.difference:after {bottom: 0; transform-origin: left bottom; transform: skewY(2deg);}

.reviews {position: relative; background: #EEE; overflow: visible; z-index: 0;}
/*.reviews:after {position: absolute; content: ''; width: 100%; height: 100%; background: inherit; bottom: 0; transform-origin: right bottom; transform: skewY(2deg); z-index: -1;}*/ /*no before or after if bottom is flat*/

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

/*Blocks*/

#blocks {display: table; table-layout: fixed; width: 100%; text-align: center; margin: auto; box-sizing: border-box; border-spacing: 10px; background-color: #000;}
.block {display: table-cell; overflow: hidden; border-radius: 6px; background-color: #FFF;}
.blkhead {font-size: 1.4rem; line-height: 1.25; font-weight: 600; margin: 10px auto 13px auto; text-align: center; color: #ED1C24}
.blkpic {height: 200px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: 47% 50%;}

@media (min-width: 481px) {
.block:nth-child(1) .blkpic {background-image: url("../images/bott-electric-commercial-electrician-south-jersey1.jpg");}
.block:nth-child(2) .blkpic {background-image: url("../images/bott-electric-industrial-electrician-south-jersey1.jpg");}
.block:nth-child(3) .blkpic {background-image: url("../images/bott-electric-electrician-for-south-jersey-municipalities1.jpg");}
.block:nth-child(4) .blkpic {background-image: url("../images/bott-electric-farm-barn-electrician-south-jersey1.jpg");}
.block:nth-child(5) .blkpic {background-image: url("../images/bott-electric-generators-south-jersey1.jpg");}
.block:nth-child(6) .blkpic {background-image: url("../images/bott-electric-ev-chargers-south-jersey1.jpg");}
}

@media (max-width: 480px) {
.block:nth-child(1) .blkpic {background-image: url("../images/bott-electric-commercial-electrician-south-jersey2.jpg");}
.block:nth-child(2) .blkpic {background-image: url("../images/bott-electric-industrial-electrician-south-jersey2.jpg");}
.block:nth-child(3) .blkpic {background-image: url("../images/bott-electric-electrician-for-south-jersey-municipalities2.jpg");}
.block:nth-child(4) .blkpic {background-image: url("../images/bott-electric-farm-barn-electrician-south-jersey2.jpg");}
.block:nth-child(5) .blkpic {background-image: url("../images/bott-electric-generators-south-jersey2.jpg");}
.block:nth-child(6) .blkpic {background-image: url("../images/bott-electric-ev-chargers-south-jersey2.jpg");}
}

@media (max-width: 1750px) {.blkpic {height: 180px;}} @media (max-width: 1550px) {.blkhead {font-size: 1.9vw;} .blkpic {height: 150px;}}
@media (max-width: 1180px) {#blocks {width: 100%; border-spacing: 5px; padding-top: 3px;} .block {margin: -3px auto; display: inline-block; width: 33.3%; border: 5px solid #000; border-radius: 11px; box-sizing: border-box;} .blkhead {margin: 8px auto; font-size: 24px;}}
@media (max-width: 830px) {.blkpic {height: 120px;}}
@media (max-width: 615px) {.blkhead {font-size: 3.8vw; margin: 7px auto;} .blkpic {height: 100px;}}
@media (max-width: 500px) {#blocks {padding: 5px 0 0 2px; border-spacing: 0;} .block {width: 34.2%; margin: -5px -2px -5px -4px;} .blkhead {font-size: 4.2vw;}}
@media (max-width: 440px) {.blkpic {height: 85px;} .blkhead span {display: none;} .blkhead {font-size: 18px;}}
@media (max-width: 380px) {.blkhead {font-size: 16px; letter-spacing: -.3px;} .blkpic {height: 70px;}}
@media (max-width: 320px) {#blocks {display: none;} .homeimg {border-bottom: 8px solid #000;}}

.block, .blkpic, .blkhead {transition: .3s; -webkit-transition: .3s;}
.block:hover {background-color: #ED1C24;} .block:hover .blkhead {color: #FFF;}
.block:hover .blkpic {-webkit-filter: saturate(130%) brightness(120%); -ms-filter: saturate(140%) brightness(130%); filter: saturate(140%) brightness(130%);}


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

/*Our Services*/

#svcs {margin-left: -10px;} #svcs li {list-style-type:none;}
#svcs h3 {font-weight: 600 !important; line-height: 1.4;} #svcs a:hover {text-decoration: underline;}
#svcs li:before {content: "\2022"; position: absolute; margin: -7px 0 0 -32px; line-height: 1; color: #ED1C24; font-size: 2rem;}

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

/*Values*/

#valueswrap {width: 100%; max-width: 1600px; margin: 30px auto 20px auto;}
.value {vertical-align: top; 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.2rem; line-height: 1.4; color: #FFF;}
.valtxt {color: #FFF; font-size: .8rem; line-height: 1.5;}

@media (max-width: 1080px) and (min-width: 906px) {.valhead {font-size: 1.1rem; letter-spacing: -.4px;}}
@media (max-width: 965px) and (min-width: 906px) {.valhead {font-size: 1.05rem; letter-spacing: -.5px;} .value {padding: 10px;}}
@media (max-width: 970px) and (min-width: 906px) {.valtxt {font-size: .85rem;}}
@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*/

.reviews {background-color: #CCC; background-size: cover; background-position: 50% 50%;}
@media (min-width: 801px) {.reviews {background-image: url("../images/toppic-back1.jpg");}}
@media (max-width: 800px) {.reviews {background-image: url("../images/toppic-back2.jpg");}}
@media (max-width: 500px) {.reviews {background-image: url("../images/toppic-back3.jpg");}}

#rvws {width: 100%; margin: 80px auto 40px auto;}
.rvw {vertical-align: top; text-align: center; font-size: 1.1rem; 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: #444; font-size: .9rem; line-height: 1.7; margin-bottom: 20px;}
.rvw span {display: block; line-height: 1.5; color: #999; font-size: .7em;}

@media (max-width: 1180px) {#rvws {margin: 50px auto 30px auto;} .rvw {padding: 20px;}}
@media (min-width: 861px) {#rvws {display: table;} .rvw {display: table-cell; width: 31%;}}
@media (max-width: 860px) {#rvws {margin: 30px auto 20px auto;} .rvw {display: block; width: auto; padding: 30px;}}
@media (max-width: 330px) {.rvwimg {margin-bottom: 10px;}}