/*HOME PAGE*/

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

@media (min-width: 500px) {
@keyframes slide-in {0% {transform: translateX(-50%); opacity: 0;} 100% {transform: translateX(0px); opacity: 1;}}
.homecap0 {animation: slide-in 1s forwards; animation: slide-in 1s forwards;}
.homecap1 {opacity: 0; animation: slide-in 1s 0.2s forwards; animation: slide-in 1s 0.2s forwards;}
.homecap2 {opacity: 0; animation: slide-in 1s 0.4s forwards; animation: slide-in 1s 0.4s forwards;}

@keyframes myzoom {0% {transform: scale(0.5);} 10% {transform: scale(1);}}
html, body {overflow-x: hidden;} /*stops horizontal scrollbar from showing during animation*/

@keyframes blockzoom {
0% {transform: scale(0); opacity: 0;}
1% {transform: scale(.5); opacity: 0;}
5% {transform: scale(1.05); opacity: 1;}
10% {transform: scale(1); opacity: 1;}
}
#blocks div:nth-child(1) {animation: blockzoom 12s;}
#blocks div:nth-child(2) {animation: blockzoom 14s; animation-delay: .08s;}
#blocks div:nth-child(3) {animation: blockzoom 16s; animation-delay: .1s;}
#blocks div:nth-child(4) {animation: blockzoom 18s; animation-delay: .15s;}
#blocks div:nth-child(5) {animation: blockzoom 20s; animation-delay: .22s;}
#blocks div:nth-child(6) {animation: blockzoom 22s; animation-delay: .27s;}

@keyframes blockspin {
0% {transform: rotate(0deg);} .3% {transform: rotate(120deg);} .8% {transform: rotate(240deg);} 1.2% {transform: rotate(360deg);}
}
#blocks div div span {animation: blockspin .8s;}
}

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

/*Top image*/

@font-face {font-family: 'Flama'; font-style: normal; font-weight: 600; font-display: block;
  src: url('fonts/flama-600.woff2') format('woff2'), url('fonts/flama-600.woff') format('woff');
}

#homepic {position: relative; display: grid; overflow: hidden; z-index: 0; background-color: #5C5C61;}
#homepic img {width: 500px; height: 300px; width: 100%; object-fit: cover; object-position: 50% 60%; display: block;}

.homecap {position: absolute; z-index: 1; display: grid; -webkit-align-self: center; justify-self: center; align-self: center; text-align: center; left: 5%; right: 5%; padding-bottom: 15px; font-size: 65px; color: #FFF;}

.homecap0 {font-size: .4em; line-height: 1.2; padding-bottom: 30px; font-weight: 400;}
.homecap1 {font-size: 1.2em; line-height: 1.1; font-weight: 600; text-shadow: 1px 1px 2px #000;}
.homecap2 {font-size: .45em; line-height: 1.2; padding-top: 30px; font-weight: 400;}

@media (max-width: 1225px) {.homecap1 {font-size: 6.5vw;}}
@media (min-width: 651px) {#homepic img {height: calc(120px + 35vw); max-height: 500px;} .homecap1 span {display: block;}}
@media (max-width: 650px) {
#homepic img {height: 70vw;} .homecap0 {font-size: 4vw;} .homecap1 {font-size: 8.7vw;}
.homecap2 {font-size: 4.5vw;} .hhhomecap2 span {display: block;}
}
@media (max-width: 460px) {
#homepic img {height: calc(100px + 60vw);} .homecap1 {font-size: 9vw;}
.homecap0 {font-size: 5vw;} .homecap2 {font-size: 5.5vw;} .homecap2 span {display: block;}
}
@media (min-width: 501px) {#homepic img {filter: brightness(55%);}}

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

/*Blocks*/

/*#blocks {outline: 1px solid yellow} #blocks div {outline: 1px solid blue} #blocks a {outline: 1px solid cyan}
#blocks span {outline: 1px solid magenta} #blocks h3 {outline: 1px solid green}
#blocks, #blocks * {box-sizing: border-box;}*/

#blocksback, #blocks {background-color: var(--red1);}
#blocks {text-align: center; margin: auto; padding: 30px 15px;}

#blocks div {display: inline-block; text-align: center; max-width: 210px;}

#blocks span:not(h3 span) {display: inline-block; text-align: center; width: 90%; max-width: 190px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 3px solid #FFF;}

#blocks h3 {margin: 5px auto 0 auto !important; font-size: 20px; line-height: 1.3; font-weight: 500 !important; color: #FFF;}

#blocks img {display: block; width: 100%; height: 100%; object-fit: cover;}
#blocks a {text-decoration: none;}

@media (min-width: 991px) {#blocks div {width: 15.5%; margin: 0 3px;}}
@media (max-width: 990px) {
#blocks {display: grid; margin: 0 auto;}
#blocks div {display: block; width: auto; max-width: none; margin: 0;}
#blocks span:not(h3 span) {width: 90%; max-width: none;}
}
@media (max-width: 990px) and (min-width: 571px) {
#blocks {grid-template-columns: repeat(3, 1fr); max-width: 750px;}
#blocks div {margin: 0 10px;}
#blocks div:nth-last-of-type(-n+3) {margin-top: 30px;}
}
@media (min-width: 991px), (max-width: 715px) and (min-width: 571px) {#blocks h3 span {display: block;}}
@media (max-width: 570px) {
#blocks {grid-template-columns: repeat(2, 1fr);} #blocks div {margin: 0 10px;}
#blocks div:nth-child(3), #blocks div:nth-child(4) {margin: 30px 10px;}
#blocks div:nth-child(5) span {display: block;}
}
@media (max-width: 530px) {#blocks div:nth-child(3) span {display: block;}}
@media (max-width: 400px) {
#blocks div {margin: 0 5px;}
#blocks div:nth-child(3), #blocks div:nth-child(4) {margin: 25px 5px;}
#blocks div:nth-child(odd) {margin-left: 0;} #blocks div:nth-child(even) {margin-right: 0;}
#blocks div:nth-child(4) span {display: block;}
}
@media (min-width: 361px) {#blocks h3 {text-transform: uppercase;}}
@media (max-width: 330px) {#blocks h3 {font-size: 19px;}}
@media (max-width: 320px) {#blocks h3 {font-size: 18px;}}

#blocks span:not(h3 span) {-webkit-transition: .3s;}
#blocks div:hover span:not(h3 span) {transform: scale(1.1) !important; filter: brightness(120%) contrast(100%) saturate(120%); border: 3px solid var(--blue1);}


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

/*Logos on Home Page*/

#homelogos a {padding: 10px; border-radius: 10px; transition: .15s;}

#homelogos {text-align: center;}
#homelogos div {padding: 10px 15px; text-align: center; vertical-align: middle;}
#homelogos img {display: block; width: 400px; height: 200px; width: 100%; height: auto; transition: .2s; margin: auto;}
#homelogos img:hover {filter: saturate(110%) brightness(130%);}
#homelogos a:hover {background: #EEE}

@media (min-width: 1416px) {
#homelogos {display: table; margin: 30px auto 0 auto;}
#homelogos div {display: table-cell;} #homelogos img {max-width: 400px;}
}
@media (max-width: 1415px) {
#homelogos {margin: 0 auto 30px auto; max-width: 1100px;}
#homelogos div {display: inline-block;} #homelogos img {max-width: 180px;}
#homelogos div:nth-child(3) img, #homelogos div:nth-last-of-type(-n+3) img {max-width: 260px;}
}
@media (max-width: 1160px) and (min-width: 931px) {#homelogos div:nth-last-of-type(-n+3) {margin-top: 15px;}}
@media (max-width: 1160px) {
#homelogos {margin: 0 auto 20px auto; max-width: 850px;}
#homelogos div {padding: 0 15px;} #homelogos img {max-width: 140px;}
#homelogos div:nth-child(3) img, #homelogos div:nth-last-of-type(-n+3) img {max-width: 210px;}
#homelogos div:nth-child(4) img {max-width: 110px;}
}
@media (max-width: 930px) and (min-width: 731px) {
#homelogos {max-width: 620px;} #homelogos div:nth-child(n+4):nth-child(-n+5) {margin: 20px auto 30px auto;}
}
@media (max-width: 730px) and (min-width: 491px) {
#homelogos {max-width: 450px;} #homelogos div {margin: 15px 5px;}
}
@media (min-width: 491px) {#homelogos a {display: block;}}
@media (max-width: 490px) {
#homelogos {max-width: 300px; margin: 0 auto;} #homelogos a {display: inline-block;}
#homelogos div {display: block; margin: 25px auto; padding: 0;}
#homelogos div:nth-last-of-type(-n+3) {margin: 40px auto;}
}

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

/*Service blocks*/

#services .svcsba {background-color: var(--blue1);}
#svcboxes {margin: auto; text-align: center; width: 90%; max-width: 1500px;}

#svcboxes div {font-size: 19.5px; line-height: 1.5; border-radius: 5px; text-align: left; background-color: #EEE; border-radius: 8px; break-inside: avoid; margin-bottom: 20px; position: relative;}
#svcboxes h4 {font-size: 1.2em !important; line-height: 1.25; font-weight: 500 !important; background-color: var(--red1); color: #FFF; border-radius: 5px 5px 0 0;}
#svcboxes span {display: block;}
#svcboxes .learnmore {position: absolute; right: 20px; bottom: 15px; font-size: .9em;}
#svcboxes .learnmore::after {position: relative; display: inline-block; content: "\203A"; margin-left: 7px; top: 1px; font-size: 1.4em; line-height: 0;}
#svcboxes .learnmore:hover {font-style: italic;}

@media (min-width: 1201px) {
#svcboxes {column-count: 3; column-gap: 20px;} #services .svcsba {padding: 70px 0;} #svcboxes h4 {padding: 10px 25px 16px 25px;}
#svcboxes span {padding: 20px 25px 20px 25px;} #svcboxes span.spanpad {padding-bottom: 60px;}
}
@media (max-width: 1200px) {
#svcboxes {column-count: 2;} #services .svcsba {padding: 55px 0;} #svcboxes h4 {padding: 8px 20px 14px 20px;}
#svcboxes span {padding: 13px 20px 19px 20px;} #svcboxes span.spanpad {padding-bottom: 58px;}
}
@media (max-width: 800px) {#svcboxes {column-count: 1;} #services .svcsba {padding: 50px 0;}}

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

/*Why Us*/

#whyus {margin: auto; background-color: var(--red2); color: #FFF;}
#whyus .heading {margin-bottom: 30px; font-size: 1.8em; font-weight: 500; line-height: 1.2; color: #FFF;}
#whyus .pagepic {margin-top: 10px;} #whyus img {border-radius: 6px;}
#whyus .heading2 {padding: 5px 10px 8px 10px; background-color: var(--red1); border-radius: 5px;}
@media (max-width: 870px) {#whyus .heading {margin: 0 auto 40px auto; text-align: center;}}

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

/*Process*/

#process {margin: auto; background-color: var(--blue1); color: #FFF;}
#process .heading {margin-bottom: 30px; font-size: 1.8em; font-weight: 500; line-height: 1.2; color: #FFF;}
#process .heading2 {padding: 5px 10px 8px 10px; background-color: var(--red1); border-radius: 5px;}
@media (max-width: 870px) {#process .heading {margin: 0 auto 40px auto; text-align: center;}}

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

/*Values*/

#valueswrap {width: 100%; max-width: 1600px; margin: 30px auto 20px auto;}
.valsection .bodyhead {font-weight: 500; color: var(--red1);}
.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: 500; text-transform: uppercase; font-size: 1.2em; line-height: 1.4;}
.valtxt {font-size: .9em; line-height: 1.5;}

@media (max-width: 965px) and (min-width: 906px) {.value {padding: 10px;}}
@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;}
}

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

/*Our Process blocks*/

#blocks49 div {font-size: .95em; line-height: 1.5; text-align: left; background-color: #E5E5E5; border: 2px solid var(--blue1); border-radius: 8px;}
#blocks49 div > span {display: block; padding: 8px 15px 15px 15px;}
#blocks49 div > span:first-child {display: block; margin: 0; line-height: 1.3; font-weight: 500; background-color: var(--red1); color: #FFF; border-radius: 6px 6px 0 0;}
#blocks49 span span {display: table-cell;}
#blocks49 span span:first-child {padding-right: 6px; white-space: nowrap; color: #FF0;}
#blocks49 div > span:last-child {padding: 15px 25px 20px 25px; color: var(--blue1);}

@media (min-width: 1051px) {#blocks49 div {flex: 1 1 25%; margin: 12px;} #blocks49 span:first-child {font-size: 1.15em;}}
@media (max-width: 1050px) {#blocks49 div {flex: 1 1 40%; margin: 8px;} #blocks49 span:first-child {font-size: 1.1em;}}
@media (min-width: 681px) {#blocks49 {display: flex; flex-wrap: wrap; justify-content: center;}}
@media (max-width: 680px) {#blocks49 {margin: 30px auto;} #blocks49 div {margin: 20px auto;}}

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

/*Reviews*/

#rvwback {background-color: #717171; padding: 50px 0 40px 0;}

#rvws {margin: 20px auto; width: 90%; max-width: 1500px;}
.rvwshead {text-align: center; padding: 0 20px 15px 20px; font-size: 32px; line-height: 1.35; font-weight: 500; color: #FFF;}
#rvws > div {vertical-align: top; text-align: center; padding: 35px; background-color: #FFF; border-radius: 5px;}

.rvwimg {display: inline-block; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 180px 33px; width: 180px; height: 33px; margin-bottom: 17px;}
#rvws > div div:nth-child(2) {font-size: 18px; line-height: 1.5; margin-bottom: 12px;}
#rvws div span {display: block; line-height: 1.5; color: #666; font-size: 15px;}

.morereviews {text-align: center;}

@media (max-width: 1350px) {#rvws {margin: 25px auto;}}

@media (min-width: 976px) {
#rvws {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
#rvws > div {margin: 0; width: auto;}
}

@media (max-width: 975px) {#rvws {margin: 30px auto 10px auto;} #rvws > div {margin-bottom: 25px;}}
@media (max-width: 430px) {.rvwimg {margin-bottom: 10px;} #rvws > div {padding: 25px;}}

.morereviews {font-size: 22px; font-weight: 500; margin: 20px auto 10px auto; text-align: center; text-transform: uppercase; white-space: nowrap;}
.morereviews, .morereviews a {color: #FF0;}