/*HOME PAGE*/

@media (max-width: 940px) and (min-width: 515px) {.bodyhead span {display: block;}}
@media (max-width: 1000px) {#bread {margin-bottom: 10px;}}

@media (min-width: 700px) {
@keyframes fadein2 {25% {opacity: 0;} 100% {opacity: 1;}}.homecap2 {opacity: 0; -webkit-animation: fadein2 1.6s forwards !important;}}

@media (min-width: 501px) {

@keyframes logoscale {0% {-webkit-transform: scale(0);} 100% {-webkit-transform: scale(1);}}
#logo img {-webkit-animation: logoscale .8s; -webkit-backface-visibility: hidden;}

#blocks {overflow: hidden;}
.block h4 {-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); -webkit-filter: blur(0); perspective(1px); -webkit-filter: blur(0); -webkit-font-smoothing: subpixel-antialiased;}

@keyframes blockzoom {
0% {-webkit-transform: scale(0); opacity: 0;}
1% {-webkit-transform: scale(.5); opacity: 0;}
5% {-webkit-transform: scale(1.02); opacity: 1;}
10% {-webkit-transform: scale(1); opacity: 1; transform-origin: 20% 0%;}
}

#blocks .block:nth-child(1) {-webkit-animation: blockzoom 5s;}
#blocks .block:nth-child(2) {-webkit-animation: blockzoom 8s;}
#blocks .block:nth-child(3) {-webkit-animation: blockzoom 12s;}
#blocks .block:nth-child(4) {-webkit-animation: blockzoom 16s;}
#blocks .block:nth-child(5) {-webkit-animation: blockzoom 20s;}
#blocks .block:nth-child(6) {-webkit-animation: blockzoom 24s;}

} /*close min-width: 500px*/


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

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #155482;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 40vw; max-height: 420px; object-fit: cover; object-position: 50% 50%; display: block;}
.homecap {position: absolute; left: 5%; right: 5%; text-align: center; top: 48%; -webkit-transform: translateY(-48%); -ms-transform: translateY(-48%); transform: translateY(-48%); z-index: 1; font-size: 55px; color: #FFF;}

.homecap {position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 47%; -webkit-transform: translateY(-47%); -ms-transform: translateY(-47%); transform: translateY(-47%); z-index: 1; margin: 0 30px;}
.homecap h1 {font-family: 'Archivo Narrow', Arial, Helvetica, sans-serif; font-weight: 600; font-size: 80px; line-height: 1.15; color: #FFF; text-shadow: 1px 1px 2px #000;}

@media (min-width: 1221px) {.homecap h1 {font-size: 80px;}}
@media (max-width: 1220px) {.homecap {margin: 0 5%} .homecap h1 {font-size: 6.5vw;}}
@media (max-width: 150px) {.homecap h1 {font-size: 6.8vw;}}
@media (min-width: 501px) {.homecap h1 span {display: block;}}
@media (max-width: 500px) {.homecap h1 {font-size: 10vw;} #homepic img {height: 58vw;}}

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

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

/*Free Estimate Button on Home Page*/

.btn {display: table; text-align: center; margin: 25px auto 0 auto; -webkit-transition: 0.4s;}
.btn a {display: table-cell; padding: 15px 22px; font-size: 17px; line-height: 1.4; font-weight: 600; text-decoration: none !important; color: #000; -webkit-transition: 0.4s; white-space: nowrap; text-transform: uppercase;}
@media (max-width: 500px) {.btn {display: none;}}

@-webkit-keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
@keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
.rippleout {display: inline-block; vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative;}
.rippleout:before {content: ''; position: absolute; border: #FDF026 solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; pointer-events: none;}
.rippleout:hover:before, .rippleout:focus:before, .rippleout:active:before {-webkit-animation-name: rippleout; animation-name: rippleout;}

.btn a, #formhead span {background-color: #FDF026;} .btn a:hover {background-color: #FFFF85;}

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

/*Blocks*/

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

#blocks .block {vertical-align: top;}
.block div {display: block; text-align: center; vertical-align: top; overflow: hidden;}
#blocks img {width: 383px; height: 223px; width: 100%; height: auto; display: block; object-fit: cover;}
.block div, #blocks img, #blocks h2 {transition: .3s;}
#blocks h2 {display: table-cell; width: 1%; text-align: center; vertical-align: middle; font-size: 18px; height: 43px; line-height: 1.35; font-weight: 400 !important; margin: 0 auto; white-space: nowrap; background-color: #227AB9;}
#blocks a {text-decoration: none !important; color: #FFF !important;}

@media (min-width: 2001px) {#blocks img {height: 180px;}}
@media (max-width: 2000px) {#blocks img {height: 160px;}}
/*@media (max-width: 1540px) {#blocks h2 {font-size: 16px;}}*/

@media (max-width: 1340px) {#blocks img {height: 130px;}}
@media (min-width: 1056px) {#blocks {margin-top: 6px;} #blocks .block {margin: 0 3px;}}
@media (max-width: 1055px) and (min-width: 931px) {#blocks h2 {font-size: 16px;} #blocks {margin-top: 4px;} #blocks .block {margin: 0 2px;}}
@media (min-width: 931px) {
#blocks {display: flex; align-self: center; flex-wrap: nowrap; justify-content: center;}
#blocks .block {width: 16.67%; display: table-cell;}
}
@media (max-width: 930px) {
#blocks {display: table; text-align: center;} #blocks .block {display: inline-block; width: 33.33%;}
.block div {margin: 3px 2px 0 2px;} #blocks h2 {margin: 0 2px; display: grid; width: auto; align-content: center;}
}
@media (max-width: 930px) and (min-width: 471px) {#blocks h2 {height: 52px;}}

/*@media (max-width: 660px) {
#blocks .block:nth-child(6) h2 span {display: block;}
#blocks .block:nth-child(4) h2, #blocks .block:nth-child(5) h2, #blocks .block:nth-child(6) h2, #blocks .block:nth-child(7) h2 {height: 42px; padding: 3px 0;}
}
@media (max-width: 550px) {
#blocks .block:nth-child(1) h2 span, #blocks .block:nth-child(2) h2 span, #blocks .block:nth-child(3) h2 span {display: block;}
#blocks .block:nth-child(1) h2, #blocks .block:nth-child(2) h2, #blocks .block:nth-child(3) h2 {height: 42px; padding: 3px 0;}
}*/

@media (max-width: 540px) {.block div {margin: 2px 1px 0 1px;} #blocks h2 {margin: 0 1px; height: 44px; font-size: 16px;}}
@media (max-width: 470px) {
#blocks .block {width: 50%;} #blocks h2 {height: 35px;} #blocks img {height: 110px;}
/*#blocks h2 {height: 58px;} #blocks img {height: 80px;}
#blocks .block:nth-child(2) h2 span, #blocks .block:nth-child(6) h2 span {display: inline;}
#blocks .block:nth-child(1) h2, #blocks .block:nth-child(2) h2, #blocks .block:nth-child(6) h2, #blocks .block:nth-child(7) h2 {height: 30px;}*/
}
@media (max-width: 320px) {#blocks h2 {font-size: 15px;}}

#blocks .block:hover img {filter: saturate(125%) brightness(115%); /*transform: scale(1.05);*/}
#blocks .block:hover h2 {background-color: #FDF026; color: #000;}

/*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;}}

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

/*Why Us*/

#whyus {background-color: #2688CF;} #whyus .bodyarea {padding: 50px 0 30px 0;} #whyus .heading {text-align: center; font-size: 1.7em; color: #FFF;}

#whyusboxes {margin: 30px auto;}
#whyusboxes .box {display: inline-block; margin: 10px 2px; font-size: 17px; line-height: 1.55; background-color: #FFF; break-inside: avoid; color: #555; border-radius: 5px;}
#whyusboxes .box div:first-child {width: 100%; margin-bottom: 20px; font-size: 1.5em; line-height: 1.15; font-weight: 600; padding-bottom: 20px; border-bottom: 1px solid #CCC; color: #000;}

@media (min-width: 1201px) {#whyusboxes .box {padding: 23px;}}
@media (max-width: 1200px) {#whyusboxes .box {padding: 20px;}}
@media (min-width: 1041px) {#whyusboxes {-webkit-column-count: 3; column-count: 3;}}
@media (max-width: 1040px) {#whyusboxes {-webkit-column-count: 2; column-count: 2; margin: 35px auto 25px auto;}}
@media (max-width: 720px) {#whyusboxes {-webkit-column-count: 1; column-count: 1;}}

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

/*New Area*/

.newareaback {padding: 50px 0; background-color: #444;} .newarea a {color: #FFF !important; text-decoration: none;}
.newarea {position: relative; text-align: left; font-size: 19px; line-height: 1.4; max-width: 1100px; margin: auto;}
.newareatext {text-align: left; font-size: inherit; line-height: 1.6; color: #FFF;}
.newareatext div {font-size: 2.15em; line-height: 1.25; font-weight: 600; margin: 0 0 30px 0; color: #FDF026;}
.newareaimg {background-repeat: no-repeat; background-position: 50% 50%;}

@media (min-width: 1091px) {
.newarea {display: table; padding: 30px 0; width: 85%; box sizing: border-box;}
.newareatext {padding: 20px 0 20px 50px;}
.newareaimg {background-image: url("images/pic1.jpg"); background-size: cover; height: 100%; width: 50%; display: table-cell; border-radius: 5px;}
}
@media (max-width: 1090px) {
.newareaimg {height: 60vw; max-height: 400px; width: 100%; margin: auto; object-fit: cover; object-position: 0% 100%;}
.newareatext {padding: 50px 6vw 40px 6vw;} .newareatext div {text-align: center;}
}
@media (max-width: 1090px) and (min-width: 501px) {.newareaimg {background-image: url("images/pic2.jpg");}}
@media (max-width: 800px) {.newareaback, .newarea {padding: 0;}}

@media (max-width: 500px) {.newareaimg {background-image: url("images/pic3.jpg");} .newareatext div {font-size: 1.8em;}}
@media (max-width: 400px) {.newareatext div {font-size: 1.7em;}}
@media (max-width: 360px) {.newareatext {padding: 30px 20px;}}

/*list*/

.newareatext span {display: table; margin: auto;}
.newarea li {margin: 0 0 15px 30px; line-height: 1.4;}

@media (max-width: 700px) {.newarea li {font-size: .95em;}}
@media (min-width: 521px) {.newarea ul {display: table-cell; vertical-align: top; padding: 15px 15px 15px 5px;} .newarea li:last-child {margin-bottom: 0;}}
@media (max-width: 520px) {.newarea ul {display: block; padding: 0; margin: 0;}}

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

/*Reviews*/

#rvwback {padding: 50px 0 0 0;} #rvws {width: 100%; margin: 40px auto 0 auto;}
#rvwback .bodyarea, #rvwback a {text-align: center; color: #FFF;}
.rvwshead {text-align: center; font-size: 1.8em; line-height: 1.25; font-weight: 600;}
#rvws > div {vertical-align: top; text-align: center; padding: 35px; background-color: #FFF; color: #444; border-radius: 8px;}

.rvwimg {display: inline-block; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 220px 40px; width: 220px; height: 40px; margin-bottom: 17px;}
#rvws > div div:nth-child(2) {margin-bottom: 20px;}
#rvws > div span {display: block; line-height: 1.5; color: #767676; font-size: 15px; margin-top: -7px;}

@media (min-width: 1351px) {
#rvws {display: table;} #rvws > div {display: table-cell; width: 31%;}
/*#rvws > div:nth-child(1) {font-size: 1.05em;} #rvws > div:nth-child(3) {font-size: .95em;}*/
}
@media (max-width: 1350px) {#rvwback {padding: 30px 0 0 0;} #rvws {margin: 40px auto 10px auto;}}
@media (max-width: 430px) {.rvwimg {margin-bottom: 10px;} #rvws > div {padding: 25px;}}
@media (max-width: 360px) {#rvws > div {padding: 25px 15px;}}

#rvwback, #rvwback .bodyarea {background-color: #2688CF;}

#googrvws {margin: 30px auto 0 auto; text-align: center;}

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