/*HOME PAGE*/

.bahome {max-width: 1100px;}


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

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #766353;}
#homepic img {display: block; width: 500px; height: 300px; width: 100%; height: auto; max-height: 700px; object-fit: cover;}

.homecap {position: absolute; text-align: left; left: calc(30vw - 200px); padding-right: 5%; top: 45%; -webkit-transform: translateY(-48%); -ms-transform: translateY(-48%); transform: translateY(-48%); width: 600px; z-index: 1; color: #FFF;}
.homecap h1 {font-size: 57px; line-height: 1.1; padding-bottom: 15px;}
.homecap h2 {margin-top: 30px; font-size: 20px; line-height: 1.5;}

#homepic .btns div {display: inline-block;}
#homepic .btns a {text-align: center; margin-top: 30px; display: grid; align-content: center; padding: 0 15px; height: 47px; width: 120px; border-radius: 2px; font-size: 17px; line-height: 1.25; font-weight: 400; text-decoration: none; vertical-align: middle; transition: .15s;}

#homepic .btns div:first-child a {background-color: var(--menuback); color: #FFF !important;}
#homepic .btns div:first-child a:hover {background-color: #30A5BF;}
#homepic .btns div:last-child a {background-color: #DCD8D0; color: #000 !important; margin-left: 30px;}
#homepic .btns div:last-child a:hover {background-color: #FFF;}

@media (max-width: 1135px) {#homepic img {height: 550px;}}
@media (max-width: 125px) {.homecap {width: 70%; top: 47%;}}
@media (max-width: 900px) {
#homepic img {height: 480px;} .homecap {width: 75%; margin: auto; padding: 0; left: 0; right: 0;}
.homecap {text-align: center; width: 85%;}
.homecap h1 {font-size: 55px; line-height: 1.1;} .homecap h2 {font-size: 22px; line-height: 1.5;}
}
@media (max-width: 600px) {
#homepic img {height: 350px;} .homecap h2 {visibility: hidden; line-height: 0; font-size: 0;}
.homecap h1 {font-size: 10vw;} #homepic .btns a {margin-top: 20px;}
}
@media (min-width: 501px) {#homepic img {filter: brightness(70%);}}
@media (max-width: 500px) {#homepic img {height: 70vw;} .homecap {width: 95%;} #homepic .btns a {height: 44px; width: 100px;}}
@media (max-width: 380px) {
#homepic .btns div:first-child {display: none;}
#homepic .btns div:last-child a {background-color: var(--menuback); color: #FFF !important; margin: 10px auto 0 auto;}
#homepic .btns div:last-child a:hover {background-color: #30A5BF;}
}

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

/*Home Page Sections*/

.thissection .bodyarea {padding: 30px 0 30px 0;} .thissection h1 {font-weight: 600;}
.boxpicsback h1, .boxpicsback h2 {text-align: center;}

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


/*Home Box Pics*/

.boxpicsback {background-color: #DCD8D0;}
.boxpicsback .thishead {text-align: center; font-size: 37px; line-height: 1.2; color: var(--menuback); font-weight: 600;}
.boxpicsback h2 {padding-top: 10px; font-size: 22px; line-height: 1.5; color: #444;}

#boxpics {margin: 30px auto; text-align: center;}
#boxpics section {display: inline-block; text-align: center; vertical-align: top; width: 100%; max-width: 450px;}
#boxpics section:last-child {margin-bottom: 0;}
#boxpics img {display: block; width: 500px; height: 300px; width: 100%; height: auto; height: 320px; margin: auto; object-fit: cover; border-radius: 3px; transition: .2s;}
#boxpics span:not(span span) {display: block; margin: 15px auto 0 auto; font-size: 17px; line-height: 1.5; text-align: left;}
#boxpics h3 {font-size: 1.4em; font-weight: 600; transition: .2s;}
#boxpics p {margin: 0} #boxpics ul {margin: 17px 0 0 0;} #boxpics li {margin-left: -18px;}
#boxpics a:hover img {filter: brightness(110%) saturate(110%);} #boxpics a:hover h3 {color: var(--menuback);}

@media (min-width: 1771px) {#boxpics section {margin: 20px;}}
@media (max-width: 1770px) {#boxpics section {max-width: 25vw; margin: 20px 1vw;} #boxpics img {height: 18vw;}}
@media (max-width: 1000px) {#boxpics section {max-width: 36vw; margin: 20px 2vw;} #boxpics img {height: min(230px,25vw)}}
@media (max-width: 700px) {
#boxpics section {max-width: 600px; margin: 20px 0;} #boxpics img {width: 500px; height: 300px; width: 100%; height: auto; max-width: 500px;}
}
@media (max-width: 480px) {#boxpics section {margin: 15px 0;}}
@media (max-width: 350px) {#boxpics img {height: 47vw;}}


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

.midsection {background-color: #686051; padding: 25px 30px;} .midsection div {text-align: center;}
.midsection div:first-child {font-size: 37px; line-height: 1.2; color: #FFF; font-weight: 600; padding-bottom: 10px;}
.midsection div:last-child {padding-top: 10px; font-size: 22px; line-height: 1.5; color: #E0DDD7;}

.midsection .btn {text-align: center; margin: 30px auto 0 auto; display: grid; align-content: center; padding: 0; height: 49px; line-height: 51px; width: 140px; background-color: #DCD8D0; color: #555 !important; border-radius: 4px; font-size: 19px; line-height: 1.3; font-weight: 400; text-decoration: none; vertical-align: middle; transition: .15s; white-space: nowrap;}
.midsection .btn:hover {background-color: #EEE;}


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

/*Side-by-Side Pics*/

#sideby {text-align: center;}

.sidebypic {margin: auto; text-align: left; position: relative; width: 100%; background-color: #444;}
.sidebypic img {width: 500px; height: 300px; width: 100%; height: auto; max-height: 400px; object-fit: cover; object-position: 50% 50%; overflsow: hidden; display: block; transition: .2s;}

.colorback {position: absolute; width: 100%; z-index: 1; background-color: rgba(0,126,163,.6); transition: .2s;}
.colorback div {padding: 20px 25px 25px 25px; text-align: center;}

.sidebypic h4 {font-size: 32px; line-height: 1.2; color: #FFF; font-weight: 600;} .sidebypic h4 span {font-weight: 400;}

.sidebypic a:hover img {filter: brightness(120%) saturate(120%);}
.sidebypic a:hover .colorback {background-color: rgba(0,126,163,.85);}

@media (min-width: 2501px) {#sideby {margin: 40px auto; display: grid; gap: 35px;} .sidebyback {background-color: #e7e4de;}}
@media (max-width: 2500px) {.sidebyback {margin-top: 5px} .sidebyback .bodyarea {padding: 0; width: auto; max-width: 100%;} #sideby {gap: 5px;}}

@media (max-width: 1150px) and (min-width: 701px) {.sidebypic h4 {font-size: calc(1.7vw + 12px);} .sidebypic img {height: 35vw;}}
@media (min-width: 701px) {
#sideby {display: grid; grid-template-columns: repeat(2, 1fr);} .sidebypic:last-child .colorback {top: auto; bottom: 0;}
}
@media (max-width: 700px) {.sidebypic:last-child {margin-top: 5px;}}
@media (max-width: 600px) {.sidebypic h4 {font-size: calc(2.7vw + 15px);}}
@media (max-width: 450px) {.colorback div {padding: 10px 15px 15px 15px;}}

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