/*HOME PAGE*/

@media (min-width: 760px) {
@keyframes slide-in {0% {transform: translateX(-60%); opacity: 0;} 100% {transform: translateX(0px); opacity: 1;}}
@keyframes -webkit-slide-in {0% {transform: translateX(-60%); opacity: 0;} 100% {transform: translateX(0px); opacity: 1;}}
.caption0 {-webkit-animation: slide-in 1s forwards; animation: slide-in 1s forwards;}
.caption1 {opacity: 0; -webkit-animation: slide-in 1s 0.2s forwards; animation: slide-in 1s 0.2s forwards;}
.caption2 {opacity: 0; -webkit-animation: slide-in 1s 0.4s forwards; animation: slide-in 1s 0.4s forwards;}

@keyframes slide-in2 {0% {transform: translateX(20%); opacity: 0;} 100% {transform: translateX(0px); opacity: 1;}}
@keyframes -webkit-slide-in2 {0% {transform: translateX(20%); opacity: 0;} 100% {transform: translateX(0px); opacity: 1;}}
#blocksa {overflow: hidden; -webkit-animation: slide-in2 1s; animation: slide-in2 1s;}
html, body {overflow-x: hidden;} /*stops horizontal scrollbar from showing during animation*/
}

/*transforms don't work in IE 9 thru 11. IE 9 can only be targeted in html page.
This code targets Edge 12 thru 18*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.caption0, .caption1, .caption2, #blocks {animation: none !important; -webkit-animation: none !important; transform: none !important; opacity: 1 !important;}
}

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

#trust h1 {margin: 0 auto !important; padding-top: 10px; text-align: center; font-size: 30px; font-weight: 600 !important; line-height: 1.3;}
@media (max-width: 880px) and (min-width: 520px) {#trust h1 .nodash {display: none;} #trust h1 .nexth1 {display: block;}}

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

/*Top image*/

@font-face {font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; font-display: block;
  src: local(''), url('../fonts/pt-sans-narrow-700.woff2') format('woff2'), url('../fonts/pt-sans-narrow-700.woff') format('woff');
}

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #777771;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 40vw; max-height: 460px; object-fit: cover; object-position: 50% 50%; display: block; filter: brightness(70%)}

.homecap {position: absolute; font-size: 65px; text-align: center; margin: auto; left: 5%; right: 5%; z-index: 1; max-width: 800px; top: 47%; -webkit-transform: translateY(-47%); -ms-transform: translateY(-47%); transform: translateY(-47%);}
.caption1 {font-weight: 700; font-size: 1.15em; line-height: 1.15; text-shadow: 1px 1px 2px #000; font-family: 'PT Sans Narrow', Impact, Calibri, Arial, Franklin Gothic, sans-serif; color: #FFF;}
.caption0 {font-size: .3em; text-transform: uppercase; margin-bottom: 10px;}
.caption0, .caption2 {font-weight: 600; line-height: 1.3; color: #FFF;}
.caption2 {margin-top: 15px !important; font-size: .4em;} .caption2 span {display: block;}

@media (max-width: 830px) {.caption1 {font-size: 9vw;} .caption2 {font-size: 3.5vw;}}
@media (max-width: 980px) {#homepic img {height: 80vw;}}
@media (max-width: 870px) {#homepic {max-height: 50vw;} #homepic img {object-fit: fill;}}
@media (max-width: 620px) {#homepic {max-height: 58vw;}}
@media (max-width: 470px) {.caption0 {font-size: 4vw;} .caption2 {font-size: 4vw;}}

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

/*Service Blocks*/

/*#blocks a {border: 1px solid red} #blocks div {border: 1px solid blue}*/

#blocks {display: table; padding: 14px 0 7px 0; line-height: 0; width: 100%; text-align: center; background-color: #D5D5D5;}
#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; transition: .4s;}
#blocks img {width: 90px; height: 90px; margin-bottom: 8px; transition: .4s; transform: translateZ(0); transform: translate3d(0,0,0); filter: blur(0); backface-visibility: hidden}
#blocks h1 {font-size: 20px; line-height: 1.3; font-weight: 600; color: #333 !important; text-transform: uppercase;}

#blocks div:hover {filter: brightness(130%);} #blocks div:hover img {transform: scale(1.1);}

@media (max-width: 1650px) {#blocks a:nth-child(2) span {display: block;}}
@media (max-width: 1440px) {#blocks a:nth-child(4) span {display: block;}}
@media (max-width: 1280px) and (min-width: 616px) {#blocks span {display: block;} #blocks div {height: 150px;}}
@media (max-width: 940px) {#blocks h1 {font-size: 17px;} #blocks div {height: 138px;}}
@media (max-width: 820px) and (min-width: 616px) {
#blocks div {margin: 0 2px; height: 114px; padding: 8px 0;}
#blocks h1 {font-size: 15px;} #blocks img {width: 70px; height: 70px;}
}
@media (max-width: 690px) and (min-width: 616px) {#blocks div {height: 110px;} #blocks h1 {font-size: 2.2vw;}}
@media (min-width: 616px) {#blocks {white-space: nowrap;}}
@media (max-width: 615px) {
#blocks a {display: inline-block; width: 49%; max-width: 220px;} #blocks div {margin: 2px;} #blocks span {display: block;}
}
@media (max-width: 360px) {#blocks img {width: 80px; height: 80px;} #blocks h1 {font-size: 4.6vw;}}
@media (max-width: 300px) {
#blocks div {height: 105px; margin: 0;} #blocks img {width: 65px; height: 65px;} #blocks h1 {font-size: 14px;}}

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

/*Qualities*/

#quals {width: 100%; margin: 40px auto 20px auto;}
.qual {vertical-align: top; font-size: 20px; padding: 15px;}
.qualimg {height: 137px;}
.qual img {display: block; vertical-align: middle; margin: auto;}
.qual h3 {margin: 15px auto 10px auto !important; font-weight: 600 !important; text-transform: uppercase; font-size: .85em; line-height: 1.35;}
.qualtxt {color: #6B6B6B; font-size: .9em;}
.qual a {text-decoration: underline; color: inherit;}

@media (min-width: 851px) {.qual img {width: 125px; height: 137px;} .qualmid img {width: 196px;}}
@media (max-width: 850px) and (min-width: 741px) {.qual img {width: 95px; height: 104px;} .qualmid img {width: 145px; height: 101px;}}
@media (min-width: 741px) {
#quals {display: table;} .qual {display: table-cell;	width: 31%; text-align: center;}
.qualimg {vertical-align: middle; display: table-cell; width: 1%;}
}
@media (max-width: 740px) {
.qual {display: block; width: auto; text-align: left; margin: 0; padding: 20px 15px; min-height: 137px;}	
.qualimg {float: left; text-align: left; margin-right: 15px;}
.qual h3 {margin: 0 auto 10px auto !important;}
.qualtxt {display: table-cell;} .qualmid img {width: 145px; height: 101px;}	
}
@media (max-width: 430px) {
.qual {text-align: center;}
.qualimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 20px;}	
.qual img:not(.qualmid img) {width: 95px; height: 104px;}
}

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

/*Big Pic at bottom*/

.midpic {height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 0 3%; background-color: #89BCD9;}
.midpic div {position: relative; top: 45%; transform: translateY(-45%); margin: 0 auto; padding: 0 25px; text-align: center;}
.midpic div h3 {margin: 0 !important; font-weight: 600 !important; font-size: 1.2em; line-height: 1.1; text-shadow: 1px 1px 2px #000; font-family: 'PT Sans Narrow', Impact, Calibri, Arial, Franklin Gothic, sans-serif; font-weight: 700 !important; color: #FFF;}

@media (min-width: 501px) {.midpic {background-image: url("../images/south-jersey-glass-service1.jpg");}}
@media (max-width: 500px) {.midpic {background-image: url("../images/south-jersey-glass-service2.jpg");}}

@media (min-width: 1071px) {.midpic div h3 {font-size: 82px;} .midpic {height: 400px;}}
@media (max-width: 1070px) {.midpic div h3 {font-size: 7.5vw;}.midpic {height: 35vw;}}
@media (max-width: 800px) {.midpic div h3 {font-size: 60px;} .midpic div h3 span {display: block;} .midpic {height: 280px;}}
@media (max-width: 460px) {.midpic div h3 {font-size: 13vw;}}