/*HOME PAGE*/

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

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

/*Top image*/

/*.homepicback {border: 1px solid #FFF} .homepic {border: 1px solid yellowbrite} .homecap {border: 1px solid red} .cap1 {border: 1px solid cyanlite}*/

.homepicback * {box-sizing: border-box;}

html, body, .homepicback {height:100%;}
.homepicback, .homepic {position: relative; overflow: hidden;}
.homepic {height: 100%; position: relative; background-repeat: no-repeat; background-size: cover;}
.homepic img {width: 100vw; height: 100%; object-fit: cover; object-position: 50% 50%; overflow: hidden;}

.homecap {position: absolute; font-size: 50px; text-align: left; left: 0; right: 0; margin: auto; z-index: 1;}
.homecap .cap1 {font-size: 1.35em; line-height: 1.15; font-weight: 600; text-shadow: 1px 1px 2px #000; font-family: 'TofinoN', Arial, Helvetica, sans-serif; color: #FFF;}
.homecap .cap2 {font-size: .6em; line-height: 1.35; font-weight: 500; text-transform: uppercase; font-family: 'TofinoN', Arial, Helvetica, sans-serif; color: #FFF; margin-top: 40px !important; color: var(--yellowbrite);}

@media (min-width: 2801px) {.homepicback {height: 70%;}}
@media (max-width: 2500px) and (min-height: 1060px) {.homepicback {height: 900px;}}
@media (max-width: 1320px) {.homecap .cap1 {font-size: 5vw;}}
@media (max-width: 1150px) {.homecap .cap2 span {display: block;}}
@media (min-width: 941px) {.homecap {top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);} .homecap .cap1 {width: 75%;}}
@media (max-width: 940px) {.homecap {text-align: center; top: 30%;}}
@media (max-width: 800px) {.homepicback {height: 800px;} .homecap .cap1 {font-size: 6.5vw;}}
@media (max-width: 730px) {.homecap {top: 28%;}}
@media (max-width: 650px) {.homepicback {height: 750px;}}
@media (max-width: 500px) {.homepicback {margin-top: 224px; height: 550px;} .homecap {top: 15%;} .homecap .cap2 {font-size: .5em; margin-top: 25px !important;}}
@media (max-width: 450px) {.homepicback {height: 560px;} .homecap {top: 9%;} .homecap .cap1 {font-size: 8vw;} .homecap .cap2 {font-size: 6.2vw;}}
@media (max-width: 370px) {.homepicback {height: 500px;}}

/*Boxes on big pic*/

#homepicbox {position: relative; vertical-align: middle; position: relative; z-index: 3; text-align: left; margin-top: 40px; font-size: 1px;}
#homepicbox a {font-size: 18px; line-height: 1.2; text-decoration: none; padding: 3px 10px 0 10px; width: 167px; height: 60px; display: table-cell; text-align: center; cursor: pointer; background-color: var(--cyanlite); color: var(--greendark); border-radius: 6px; transition: 0.25s; vertical-align: middle;}
#homepicbox ul {margin: 0; padding: 0;} #homepicbox li {display: inline-block; margin: 2px;}

@media (max-width: 1150px) {#homepicbox a {width: 140px;}}
@media (min-width: 941px) {#homepicbox {width: 730px;}}
@media (max-width: 940px) {#homepicbox {margin: 40px auto 0 auto;} #homepicbox ul {text-align: center;}}
@media (max-width: 730px) {#homepicbox a {width: 164px;} #homepicbox li {margin: 2px 1px;}}
@media (max-width: 730px) and (min-width: 451px) {#homepicbox {width: 370px;}}
@media (max-width: 500px) {#homepicbox {margin-top: 30px;} #homepicbox a {font-size: 17px; width: 135px; height: 55px;}}
@media (max-width: 350px) {#homepicbox a {font-size: 16px; width: 131px; height: 52px;}}
@media (min-width: 331px) {#homepicbox span {display: block;}}
@media (max-width: 330px) {#homepicbox a {width: 105px; height: 70px;}}

#homepicbox a:hover {color: var(--greendark); background-color: var(--yellowbrite);}


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

/*Services*/

#seclogos {padding: 30px 25px 35px 25px; background-color: var(--yellowback);}
#seclogos .heading {text-align: center; margin: auto; font-size: 1.6em;}
#logos {margin: auto; padding: 30px 0 0 0; text-align: center;}
#logos div {padding: 0 15px; text-align: center; vertical-align: middle;}
#logos img {display: block; width: 275px; height: 120px; width: 100%; max-width: 275px; height: auto; transition: .2s;}
#logos div:hover img {filter: saturate(110%) brightness(130%); transform: scale(1.02);}

@media (min-width: 1351px) {#logos {display: table;} #logos div {display: table-cell;}}
@media (max-width: 1350px) and (min-width: 756px) {#logos div {display: inline-block; margin: 5px;}}
@media (max-width: 755px) and (min-width: 431px) {
#logos {display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center;} #logos div {margin: 5px;}
}
@media (max-width: 430px) {#logos div {margin: 0 auto 15px auto; display: inline-block;}}


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

/*Why Us*/

.whyus {margin-top: 40px;}
#whyus ul:not(#whyus ul ul) {list-style: none; vertical-align: top; margin: 0;}
#whyus li:not(#whyus ul ul li) {position: relative; padding: 10px 20px 10px 12px; margin-left: -36px;}
#whyus span {display: table; padding-left: 22px;}
#whyus ul ul {list-style-type: disc;} #whyus ul ul li {margin: 8px 0 0 -20px;}

#whyus li:not(#whyus ul ul li):before {position: absolute; top: 0; padding-top: 8px; left: 0; line-height: 1; color: var(--greenlite); font-size: 32px; content: "\2714";} /*2713*/


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

/*Bottom Pic*/

#btmpic {position: relative; overflow: hidden; z-index: 0; clear: both;}
#btmpic img {width: 500px; height: 300px; width: 100%; max-height: 450px; object-fit: cover; display: block;}

.btmcap {position: absolute; display: table-cell; left: 0; right: 0; text-align: center; top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); z-index: 1; margin: 0 30px; font-family: 'TofinoN', Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.2; color: #FFF; text-shadow: 1px 1px 2px #000;}

@media (min-width: 1031px) {#btmpic img {height: 450px;} .btmcap {font-size: 73px;}}
@media (max-width: 1030px) {#btmpic img {height: 40vw;} .btmcap {font-size: 7vw;}}
@media (min-width: 501px) {.btmcap span {display: block;}}
@media (max-width: 500px) {#btmpic img {height: 55vw;} .btmcap {font-size: 9.8vw; margin: 0 30px;}}

@media (min-width: 1301px) {#btmpic img {object-position: 50% 35%;}}
@media (max-width: 1300px) {#btmpic img {object-position: 50% 50%;}}

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

/*Contact Form on bottom of Home page*/

#contactformarea * {box-sizing: border-box;}
#contactformarea {padding: 40px 40px; font-size: 19px; color: #444; background-color: var(--yellowback); clear: both;}
#contactformarea .heading {text-align: center; margin: auto; color: var(--greenlite);}
#contactformarea table {width: 100%; max-width: 800px; text-align: left; margin: auto;}
#contactformarea input {width: 100%;}

.text, #comments
{padding: 14px 10px; margin-bottom: 3px; font-size: 16px; background-color: #FFF; border: 1px solid #ffcc00; border-radius: 4px; width: 100%; resize: none; font-family: Arial, Helvetica, sans-serif;}
#comments {height: 170px;}
.spacer {width: 10px;}
.submit {transition: 0.3s; height: 45px; font-size: 20px; line-height: 1; margin: 10px 0 0 0; border-radius: 4px; background-color: var(--greenlogo); border: 1px solid var(--greenlogo); color: #FFF;}
.submit:hover {cursor: pointer; background-color: var(--greenlite); border: 1px solid var(--greenlite);}

.fieldsreq {text-align: center; font-weight: 500; font-size: 18px; margin: 15px auto 25px 10px; color: red;}
.label {text-align: left; font-size: 16px !important; line-height: 14px; padding-top: 7px;}

form label {position: relative; float: right; font-size: 13px; line-height: 16px; text-align: right; right: 0; margin-top: -18px; margin-right: -20px;}
#success span, #error span {position: absolute;}
form label, form label.error, #error span p {color: red;} form label.error {left: -20px;}

#success, #error {display:none; text-align: center;}
#success span, #error span {display: block; margin-top: -140px; text-align: center; margin-left: 18px; font-weight: 500;}

@media (max-width: 720px) {#contactformarea {padding: 30px 20px 40px 20px;}}

@media (max-width: 530px) {
#contactformarea {padding: 18px 10px 35px 13px;} #contactformarea td {display: block;}
.text, #comments {padding: 12px 8px;} #comments {height: 90px; resize: auto;}
.spacer {display: none;} form label {margin-right: -16px;}
}

#clickonce {margin: 10px auto 0 auto; padding: 15px 15px 0 15px; text-align: center; line-height: 1.4; color: #000;}