/*HOME PAGE*/

.emp {font-size: 1.15em; font-weight: 600;}

@media (min-width: 500px) {
@keyframes htextscale {0% {-webkit-transform: scale(0);} 10% {-webkit-transform: scale(0);} 80% {-webkit-transform: scale(1.05);} 100% {-webkit-transform: scale(1);}}
#headertext {-webkit-animation: htextscale 1.8s; -webkit-backface-visibility: hidden;}

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

@keyframes blockscale {0% {-webkit-transform: scale(0);} 100% {-webkit-transform: scale(1);}}
.blk {-webkit-animation: blockscale .8s;}

/*blockzoom not working on Safari 11 & below (2018). Don't use*/

/*works but looks hokey:
@keyframes blockspin {
0% {-webkit-transform: rotate(0deg);} .3% {-webkit-transform: rotate(120deg);}
.8% {-webkit-transform: rotate(240deg);} 1.2% {-webkit-transform: rotate(360deg);}
}
#blocks div a {-webkit-animation: blockspin .8s;}*/
} /*close min-width: 500px*/


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

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #827128;}
#homepic img {object-fit: cover; object-position: 50% 50%; max-height: 450px; width: 500px; height: 300px; width: 100%; height: calc(80px + 35vw); display: block;}
.homecap {position: absolute; width: 90%; max-width: 1350px; top: 45%; left: 0; right: 0; margin: auto; text-align: center; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); z-index: 1; font-size: 55px; line-height: 1.2; font-weight: 500; font-style: italic; text-shadow: 1px 1px 2px #000; color: #FFF;}
.hc2 {position: absolute; width: 90%; max-width: 1350px; bottom: 20px; left: 0; right: 0; margin: auto; text-align: right; z-index: 1; font-size: 20px; line-height: 1.2; font-weight: 400; font-style: italic; color: #FFF;}

@media (max-width: 1040px) {.homecap {font-size: calc(9px + 5.5vw);}}
@media (max-width: 480px) {.homecap {top: 42%; width: 95%; font-size: 10.3vw;} .hc2 {font-size: 17px; bottom: 10px;}}
@media (min-width: 501px) {#homepic img {filter: brightness(75%);}}
@media (max-width: 390px) {.hc2 {font-size: 16px;}}

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

/*Blocks*/

/*#blocks {border: 1px solid yellow} .blk {border: 1px solid cyan}
#blocks div {border: 1px solid magenta} #blocks a {border: 1px solid blue}*/

#blocksback > div:first-child {display: table; padding-top: 15px; margin: auto; text-align: center; font-size: 28px; font-weight: 600; color: #FFF;}

#blocks {position: relative; display: table; margin: auto; padding: 5px 0 20px 0; text-align: center; line-height: 0;}
#blocks div {display: table-cell; vertical-align: top; text-align: center; } #blocks img {margin-bottom: 0;}
/*this blocks a is only needed if icons spin:*/
#blocks a {display: inline-block; width: 100%; text-decoration: none !important; box-sizing: border-box;}
#blocks h1 {margin: 0 auto 0 auto !important; font-size: 20px; line-height: 1.3; font-weight: 400 !important; color: #FFF;}

@media (min-width: 841px) {#blocks div {margin: 10px 45px 5px 45px;} #blocks img {width: 140px; height: 140px; padding: 20px 22px 20px 22px;}}
@media (max-width: 1150px) {#blocks div {margin: 10px 30px 5px 30px;} #blocks div span {display: block;}}
@media (max-width: 840px) {#blocks img {width: 105px; height: 105px; padding: 15px 15px 15px 15px;}}
@media (max-width: 700px) {#blocks div {margin: 10px 20px 5px 20px;}}
@media (max-width: 600px) {#blocks div {margin: 10px 15px 5px 15px;} #blocks h1 {font-size: 18px;}}
@media (max-width: 520px) {#blocks div {margin: 10px 10px 5px 10px;} #blocks img {width: 90px; height: 90px;}}

@media (max-width: 420px) {
#blocks div {padding: 0;} #blocks img {width: 80px; height: 80px;} #blocks h1 {text-transform: none; letter-spacing: -.4px;}
}
@media (max-width: 405px) {
#blocks {margin: auto;} #blocks img {width: 70px; height: 70px; padding: 10px;}
#blocks h1 {font-size: 16px; letter-spacing: -.5px;}
}
@media (max-width: 340px) {#blocks div {margin: 10px 5px 5px 5px;}}
@media (max-width: 310px) {
#blocks {padding-bottom: 5px;} #blocks div {margin: 5px;} #blocks img {width: 65px; height: 65px;}
#blocks h1 {visibility: hidden; font-size: 0; line-height: 0; height: 0;}
}
@media (min-width: 501px) {
#blocks div div {-webkit-transition: color 0.3s; transition: color 0.3s;}
#blocks div div:before {-webkit-transition: transform 0.4s ease-out; transition: transform 0.4s ease-out;}
#blocks .blk {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);}
}
#blocks div div {border-radius: 50%; display: inline-block; vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden;
}

#blocks div div:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0);}

#blocks div div:hover:before, #blocks div div:focus:before, #blocks div div:active:before {-webkit-transform: scale(2); transform: scale(2); border: 1px solid #016412 !important; background: #258002;}

/*works but looks hokey:
#blocks div div:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-radial-gradient(circle, rgba(69,173,0,1) 0%, rgba(1,100,18,1) 47%, rgba(1,100,18,1) 53%, rgba(1,65,12,1) 100%);
border-radius: 100%; -webkit-transform: scale(0); transform: scale(0);
}*/

/*#blocks div div:hover:before, #blocks div div:focus:before, #blocks div div:active:before {-webkit-transform: scale(2); transform: scale(2); border: 1px solid #016412 !important;}*/ /*border prevents extra large circle in Safari

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

/*Join the Team*/

#jointeam {max-width: 600px; margin: 40px auto; padding: 35px 25px 35px 35px; font-size: 1.2em; line-height: 1.4; border-radius: 10px; border-left: 5px solid #016412; border-right: 5px solid #016412; background-color: #EEE; color: #6C6C6C; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}
.jthead {font-size: 1.4em; color: #016412; font-weight: bold;} #jointeam p {margin-bottom: 0;}
@media (max-width: 500px) {#jointeam {margin: 30px auto; padding: 25px 20px 25px 25px; font-size: 1.35em;}}
@media (min-width: 421px) {#jointeam p span:nth-child(2) {display: none;}}
@media (max-width: 420px) {#jointeam p span:nth-child(1) {display: none;}}
@media (max-width: 380px) {#jointeam {margin: 25px auto; padding: 20px 15px 23px 20px; font-size: 1.3em;}}

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

/*Reviews*/

#rvws {width: 100%; margin: 30px auto;}
.rvwshead {text-align: center; padding-bottom: 15px; font-size: 1.3em; line-height: 1.35; font-weight: 500; color: #FFF;}
#rvws > div {vertical-align: top; text-align: center; padding: 25px; background-color: #FFF; border-radius: 8px;}

.rvwimg {display: inline-block; width: 100%; max-width: 180px; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 100%; background-position: center center; margin-bottom: 10px;}
.rvwimg div {padding-top: 48px;} #rvws > div div:nth-child(2) {color: #016412; font-size: 1em; line-height: 1.7; margin-bottom: 20px;}
#rvws div span {display: block; line-height: 1.5; color: #666; font-size: .8em; margin-top: -7px;}

@media (max-width: 1350px) {#rvws {margin: 25px auto;}}
@media (min-width: 1551px) {
#rvws {display: table;} #rvws > div {display: table-cell; width: 31%;}
#rvws div:nth-child(3) div:nth-child(2) {font-size: 1.25em;}
#rvws div:nth-child(5) div:nth-child(2) {font-size: 1.1em;}
}
@media (max-width: 1550px) {#rvws {margin: 15px auto;}}
@media (max-width: 380px) {#rvws > div div:nth-child(2) {font-size: 1em;}} @media (max-width: 330px) {.rvwimg {margin-bottom: 10px;}}

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