/*HOME PAGE*/

@media (max-width: 500px) {.easy {margin-left: -16px;}}

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

/*Top image*/

.bgimgback {overflow: hidden; background-color: #FFF;}
.bgimg {height: 100%; position: relative; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 89% 83%, 88% 91%, 78% 86%, 73% 94%, 63% 88%, 56% 94%, 49% 91%, 44% 97%, 36% 95%, 31% 100%, 0% 100%);}

.caption {position: absolute; font-size: 60px; top: 30%; -webkit-transform: translateY(-30%); -ms-transform: translateY(-30%); transform: translateY(-30%);}
.cap1 {margin: 25px auto !important; font-weight: 700; font-size: 1.1em; line-height: 1.15; text-shadow: 1px 1px 2px #000; color: #FFF47D;}
.cap1 span {color: #FE5151; font-weight: 700;}
.cap0 {font-size: .45em;} .cap0, .cap2 {font-weight: 600; line-height: 1.3; color: #FFF;} .cap2 {font-size: .4em;}


@media (min-width: 1301px) {.bgimgback {height: 550px;}
.caption {text-align: center; left: 0; right: 0;} .bgimg .btn {margin-top: 30px; display: inline-block; text-align: center;}
}
@media (max-width: 1300px) {.bgimgback {height: 500px;} .caption {text-align: left; left: 5%;}}

@media (min-width: 761px) {.cap1 {width: 710px;}}
@media (max-width: 760px) {.bgimgback {height: 450px;} .cap1 {font-size: 8.7vw;}}
@media (max-width: 600px) {
.caption {left: 20px; top: 40%; -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%); transform: translateY(-40%);} .cap1 {margin: 20px auto !important;}
.bgimgback {height: 380px;} .cap0 {font-size: 4.5vw;} .btn a {padding: 8px 13px !important;}
.btn {margin: 20px auto 0 auto  !important;}
}
@media (max-width: 525px) {.bgimgback {height: calc(70vw + 60px);} .cap0, .cap2 {font-size: 4.5vw;}}
@media (max-width: 400px) {.btn a {padding: 8px 10px 6px 10px !important;}}

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

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

/*Buttons for Top Pic & Blocks*/

.btn {display: block; text-align: left; margin: 25px auto 0 auto; -webkit-transition: 0.4s; border-radius: 6px;}
.btn a {display: table-cell; padding: 15px 22px 13px 22px; font-size: 18px; line-height: 1.4; text-decoration: none !important; background-color: #CB0000; -webkit-transition: 0.4s; white-space: nowrap; border-radius: 6px;}
@media (max-width: 400px) {.btn span {display: block;} .btn a {padding: 8px 14px; font-size: 16px;}}
.btn, .btn a {color: #FFF;}

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

/*Top Pic Btn*/

/*Pulsing Effect*/
.bgimg .btn a {-webkit-box-shadow: 0 0 0 0 rgba(220,0,0,1); -webkit-animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);}
@keyframes pulse {to {-webkit-box-shadow: 0 0 0 30px rgba(220, 0, 0, 0);}}

/*Slide Up Effect*/
@media (min-width: 481px) {
.slideUpBtn {background-color: transparent; position: relative; overflow: hidden;}
.slideUpBtn span {display: inline-block; transition: inherit; color: #FFF;}
.slideUpBtn:hover span {opacity: 0; transform: translateY(-100%)}
.slideUpBtn::before {position: absolute; content: ""; background-color: #FFF; height: 100%; left: 0; top: 0; transform: translateY(100%); transition: inherit; width: 100%; transition: transform 0.4s;}
.slideUpBtn::after {content: 'CONTACT US'; align-items: center; display: flex; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; transition: inherit; transform: translateY(100%); width: 100%;}
.slideUpBtn:hover::before {transform: translateY(0) scale(3); transition-delay: .025s;}
.slideUpBtn:hover::after {opacity: 1; color: #D00; transform: translateY(0);}
}

/*Slide Up Effect
@media (min-width: 481px) {
.slideUpBtn {background-color: transparent; position: relative; overflow: hidden;}
.slideUpBtn span {display: inline-block; transition: inherit; -webkit-transition: inherit; -ms-transition: inherit; color: #FFF;}
.slideUpBtn:hover span {opacity: 0; transform: translateY(-100%)}
.slideUpBtn::before {position: absolute; content: ""; background-color: #FFF; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; transform: translateY(100%); transition: transform 0.4s; transform: -webkit-translateY(100%); -webkit-transition: transform 0.4s; -ms-transform: translateY(100%); -ms-transition: transform 0.4s;}
.slideUpBtn::after {content: 'CONTACT US'; align-items: center; display: flex; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; position: absolute; transition: inherit; transform: translateY(100%); -webkit-transition: inherit; -webkit-transform: translateY(100%); -webkit-transform: -webkit-translateY(100%); -ms-transition: inherit; -ms-transform: translateY(100%);}
.slideUpBtn:hover::before {transform: translateY(0) scale(3); transition-delay: .025s; -webkit-transform: translateY(0) scale(3); -webkit-transform: -webkit-translateY(0) scale(3); -webkit-transition-delay: .025s; -ms-transform: translateY(0) scale(3); -ms-transition-delay: .025s;}
.slideUpBtn:hover::after {opacity: 1; color: #D00; transform: translateY(0); -webkit-transform: translateY(0); -webkit-transform: -webkit-translateY(0); -ms-transform: translateY(0);}
}*/


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

/*Blocks*/

#blocks {display: table; margin: 20px auto; width: 100%; height: 200px; max-width: 1000px;}
.block {display: table-cell; overflow: hidden; height: 450px; width: 48%; border-radius: 6px; box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.2),0px 0px 9px -2px rgba(0,0,0,0.2); background-color: #FFF;}
.blkspacer {display: table-cell; width: 20px;}
.blkpad {padding: 25px;}
.blkhead {font-size: 1.3em; line-height: 1.2; font-weight: 600; color: #CB0000; margin-bottom: 15px !important;}
.blktxt {font-size: .9em;}
.blkpic {height: 200px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
.block:first-child .blkpic {background-image: url("images/philadelphia-auto-glass-repair-replacement.jpg");}
.block:last-child .blkpic {background-image: url("images/philadelphia-windshield-repair-replacement.jpg");}

#blocks .btn a {padding: 10px 18px;}

@media (max-width: 550px) {#blocks {display: block; height: auto;} .block {display: block; width: auto; height: auto;}
.blkspacer {width: 0; height: 30px;}}

#blocks a {-webkit-transition: 0.15s;} #blocks a:hover {background-color: #F00;}

/*Slide-Up Effect
@media (min-width: 481px) {
#blocks a {position: relative; overflow: hidden;} #blocks a span {display: inline-block; transition: inherit; color: #FFF;}
#blocks a:hover span {opacity: 0; transform: translateY(-100%)}
#blocks a::before {position: absolute; content: ""; background-color: #F00; height: 100%; left: 0; top: 0; transform: translateY(100%); transition: inherit; width: 100%; transition: transform 0.4s;
}
#blocks a::after {content: 'Learn More'; align-items: center; display: flex; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; transition: inherit; transform: translateY(100%); width: 100%;}
#blocks a:hover::before {transform: translateY(0) scale(3); transition-delay: .025s;}
#blocks a:hover::after {opacity: 1; color: #FFF47D; transform: translateY(0);}
}*/

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

/*New Area*/

.newarea {position: relative; text-align: left; clear: both; font-size: 18px; line-height: 1.4; background-color: #444;}
.newareatext {padding: 30px 35px; text-align: left; font-size: 1.15em; line-height: 1.5; color: #FFF;}
.newarea h1 {font-size: 2.15em; line-height: 1.2; font-weight: 600; margin: 0 0 20px 0 !important; color: #FFF47D;}
.newareaimg {position: relative; background-repeat: no-repeat; background-size: cover; height: 100%; border-radius: 5px;}
.newarea li {line-height: 1.4;} .newarea li {padding-bottom: 12px;} .newarea li:last-child {padding-bottom: 0 !important;}

@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%;}}
@media (min-width: 661px) {
.newarea {display: table; height: 100vw; max-height: 300px; padding: 60px 30px 80px 30px; box sizing: border-box}
.newareaimg {display: table-cell; .newareatext {padding: 0 0 0 35px;}}
}
@media (max-width: 800px) and (min-width: 661px) {.newareatext {padding: 0 0 0 25px;}}
@media (max-width: 660px) {.newarea {padding-top: 30px;} .newareaimg {height: 60vw; width: 82vw; margin: auto;}}
@media (max-width: 500px) {.newarea h1 {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/auto-glass-windshield-repair-replacement-philadelphia1.jpg"); background-position: 85% 50%;}}
@media (max-width: 500px) {.newareaimg {background-image: url("images/auto-glass-windshield-repair-replacement-philadelphia2.jpg");}}

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

/*Values*/

#valueswrap {width: 100%; max-width: 800px; margin: 55px auto 30px auto;}
.value {vertical-align: top; font-size: 20px; padding: 0 15px;}
.value img {display: block; vertical-align: middle; margin: auto; width: 113px; height: 83px; height: auto;}
.valhead {margin: 15px auto 10px auto; font-weight: 600; text-transform: uppercase; font-size: 1.3em; line-height: 1.4; color: #FFF47D;}
.valtxt {color: #EEE; font-size: .85em; line-height: 1.6;}

@media (min-width: 676px) {
#valueswrap {display: table; table-layout: fixed;}
.value {display: table-cell; width: 33.3%; text-align: center;} .valueimg {vertical-align: middle; display: table-cell; width: 1%;}
}
@media (max-width: 675px) {
.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: 415px) {
.value {text-align: center;}
.valueimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 20px;}
}