/*HOME PAGE*/

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

/*Big Home Pic*/

/*.homecap {outline: 1px solid #F00} #homecapback {outline: 1px solid #FF0}*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #444 /*sdf*/;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 650px; object-fit: cover; object-position: 50% 70%; display: block;}
#homecapback {position: absolute; width: 100%; max-width: 1300px; left: 0; right: 0; margin: auto; text-align: center; top: 46%; transform: translateY(-46%); z-index: 2;}
.homecap {position: relative; text-align: left; z-index: 1; color: #FFF; font-size: 16px; max-width: 770px;}

.homecap::before {content: ""; position: absolute; inset: -20px; z-index: -1; background: rgba(0, 0, 0, 0.6); -webkit-filter: blur(15px); filter: blur(15px); -webkit-transform: scale(0.96); transform: scale(0.96);}

@media (max-width: 1370px) {.homecap {margin-left: 30px; margin-right: 20px;}}
@media (max-width: 500px) {.homecap {margin-left: 20px; margin-right: 15px;}}

.homecap1 {font-size: 1.1em; text-transform: uppercase; line-height: 1.15; font-weight: 500; letter-spacing: 1px;}
.homecap2 {font-size: 4em; line-height: 1.2; padding-top: 20px; font-weight: 600;}
.homecap2 span:not(#btns span) {white-space: nowrap;}
.homecap2 span:last-child:not(#btns span) {display: block; font-size: .9em; color: var(--yellow);}
.homecap3 {font-size: 1.2em; line-height: 1.55; padding-top: 20px; font-weight: 400; color: #DDD;}

@media (max-width: 1000px) {#homepic img {height: 580px;} .homecap {max-width: 670px;} .homecap2 {font-size: 3.5em;}}
@media (max-width: 860px) {#homepic img {height: 550px;} .homecap {max-width: 570px;} .homecap2 {font-size: 3em;}}
@media (max-width: 680px) {
#homepic img {height: calc(655px - 30vw); /*height: calc(40vw + 280px);}*/}
.homecap {max-width: auto;} .homecap2 {font-size: 7vw;} .homecap3 {line-height: 1.35;}
.homecap::before {background: rgba(0, 0, 0, 0.25); -webkit-transform: scale(0.8); transform: scale(0.8);}
}

#btns.homepicbtns {justify-content: flex-start;}

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

/*Top Blocks*/

@media (min-width: 570px) {.topblks .bodyhead span {display: block;}}

#blocks49 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: auto; padding: 40px 0 50px 0; max-width: 1300px;}
#blocks49 * {box-sizing: border-box;}
#blocks49 a {padding: 25px 24px 22px 24px; font-size: .9em; line-height: 1.5; text-align: left; background-color: #FFF; border: 1px solid #D5DADD; border-radius: 12px; box-shadow: 0 2px 3px rgba(0,0,0,.10); transition: .3s; text-decoration: none;}
#blocks49 a:not(a:last-child):hover {border: 1px solid var(--colorvlite);}
#blocks49 a:last-child {cursor: text;}

#blocks49 h3 {margin: 10px 0 15px 0; padding: 0; font-size: 1.15em; line-height: 1.25; font-weight: 600; color: var(--colormain);}
#blocks49 span {display: block; padding: 0; color: #4D555A;}
#blocks49 .icon {display: inline-block; padding: 10px; border-radius: 6px; background-color: var(--yellowlite)}
#blocks49 img {width: 26px; height: 26px; display: block;}

#blocks49 .learnmore {display: block; margin-top: 17px; font-size: .95em; color: var(--colorlite); text-decoration: none;}
#blocks49 .learnmore::after {position: relative; display: inline-block; content: "\21E2"; margin-left: 4px; top: 1px; font-size: 1.2em; font-weight: 600; line-height: 1; transition: .1s;}
#blocks49 a:hover .learnmore, #blocks49 .learnmore:hover {text-decoration: underline;}
#blocks49 a:hover .learnmore::after {margin-left: 7px;}

@media (max-width: 1005px) and (min-width: 801px) {#blocks49 {grid-template-columns: repeat(3, 1fr); gap: 18px;}}
@media (max-width: 800px) and (min-width: 551px) {#blocks49 {grid-template-columns: repeat(2, 1fr); gap: 15px;}}
@media (max-width: 550px) {#blocks49 {grid-template-columns: 1fr; row-gap: 20px;}}

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

/*Why Us*/

@media (max-width: 800px) and (min-width: 506px) {.whyus .bodyhead span {display: block;}}

#blocks50 {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 55px; row-gap: 32px; margin: auto; padding: 40px 0 0 0; max-width: 1300px;}
#blocks50 * {box-sizing: border-box;}

#blocks50 > div {position: relative; padding-left: 62px; text-align: left;}
#blocks50 .icon {position: absolute; left: 0; top: 0; padding: 10px; border-radius: 6px; background-color: var(--yellowlite);}
#blocks50 img {width: 26px; height: 26px; display: block;}
#blocks50 > div > div:nth-child(2) {line-height: 1.25; font-weight: 600; color: var(--colormain);}
#blocks50 span {display: block; margin-top: 4px; font-size: .9em; line-height: 1.55;}

@media (max-width: 800px) {#blocks50 {grid-template-columns: repeat(2, 1fr); column-gap: 35px;}}
@media (max-width: 515px) {#blocks50 {grid-template-columns: 1fr; row-gap: 25px;}}

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

/*Life Safety*/

.lifesafe .small {margin: 0 auto 20px auto; text-align: left; color: #DDD;}
.lifesafe {padding: 80px 0; text-align: left;}
.lifesafe .bodyarea {display: grid; padding: 60px; background-color: var(--colordark); border-radius: 20px;}
.lifesafe .bodyhead {text-align: left;} .lifesafe .bodyhead, .lifesafe .bodyhead span {color: var(--yellowlite);}
.lifesafe .bodyhead span {white-space: nowrap;}
.lifesafe * {box-sizing: border-box;} .lifesafe div {color: #DDD;}
.lifesafe img {display: block; width: 825px; height: 550px; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; border-radius: 15px;}

.btn2 {margin-top: 20px; display: table; text-align: left; background-color: var(--colormain); border-radius: 6px;}
.btn2 a {display: table-cell; margin: auto; text-align: center; font-size: 16px; line-height: 1.2; transition: 0.15s; color: #FFF; text-decoration: none; height: 38px; width: 280px; vertical-align: middle; padding-top: 3px; border-radius: inherit;}
.btn2 a:hover {background-color: var(--colorlite);}

@media (min-width: 1301px) {.lifesafe section:first-child {margin-right: 40px;} .lifesafe section:last-child {margin-left: 40px;}}
@media (max-width: 1300px) and (min-width: 901px) {
.lifesafe section:first-child {margin-right: 5%;} .lifesafe section:last-child {margin-left: 5%;}
}
@media (min-width: 1201px) {.lifesafe .bodyhead span {display: block;}}
@media (min-width: 1101px) {.lifesafe .bodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr;}}
@media (max-width: 1100px) and (min-width: 901px) {.lifesafe .bodyarea {grid-template-columns: 55% 45%; grid-auto-rows: 1fr;}}
@media (max-width: 970px) {.lifesafe img {object-position: 70% 50%;}}
@media (max-width: 900px) {
.lifesafe {padding: 70px 0; background-color: var(--colordark) !important;} .lifesafe .bodyarea {padding: 0;}
.lifesafe section:first-child {padding: 0;} .lifesafe section:last-child {margin: 40px 0 0 0;}
}
@media (max-width: 320px) {.btn2 span {display: block;} .btn2 a {padding: 9px 0 5px 0; line-height: 1.3;}}

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

/*Already Have System*/

@media (min-width: 531px) {.ahave .bodyhead span {display: block;}}

#ahavebtns {display: grid; grid-template-columns: 210px 210px; column-gap: 20px; margin: 30px auto 15px auto; font-size: 16px;}
#ahavebtns, #ahavebtns * {line-height: 1.2;}
#ahavebtns div {height: 40px; border-radius: 6px; padding-top: 3px; text-align: center; box-sizing: border-box; align-content: center; transition: .1s;}
#ahavebtns div:first-child {background-color: var(--colormain); border: 2px solid transparent; box-shadow: 0 2px 3px rgba(0,0,0,.20);}
#ahavebtns div:last-child {white-space: nowrap; border: 2px solid var(--colormain) /*#D5DADD*/; box-shadow: 0 2px 3px rgba(0,0,0,.10);}

#ahavebtns a:not(.phlink) {display: block; width: 100%; box-sizing: border-box; text-align: center; transition: 0.15s; white-space: nowrap; color: #FFF !important; text-decoration: none;}
#ahavebtns a.phlink {display: inline;}
#ahavebtns div:first-child:hover {background-color: var(--colorlite);}
#ahavebtns div:last-child:has(.phlink:hover) {border: 2px solid var(--colorvlite);}
#ahavebtns span {display: inline;}

@media (min-width: 551px) {#ahavebtns {width: 440px;}}
@media (max-width: 550px) {#ahavebtns {grid-template-columns: 210px; row-gap: 20px; justify-content: center;}}

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