#team {
padding-bottom: 4rem;
}
@media (max-width: 768px) {
#team {
padding-top: 2rem;
}
}
.expandable-grid {
margin: 0 auto;
width: 100%;
text-align: center;
overflow: hidden;
}
.expandable-grid a {
display: block;
text-decoration: none;
color: #465155;
}
.expandable-grid a .grid-item {
text-align: center;
overflow: hidden;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
-webkit-transition: margin 0.75s ease-out;
-moz-transition: margin 0.75s ease-out;
-ms-transition: margin 0.75s ease-out;
-o-transition: margin 0.75s ease-out;
transition: margin 0.75s ease-out;
background-color: #dfdcd4;
-webkit-transition: margin 0.5s ease, background-color 0.5s ease;
-moz-transition: margin 0.5s ease, background-color 0.5s ease;
-ms-transition: margin 0.5s ease, background-color 0.5s ease;
-o-transition: margin 0.5s ease, background-color 0.5s ease;
transition: margin 0.5s ease, background-color 0.5s ease;
}
.expandable-grid .grid__cell.is-expanded .grid-item { background-color: rgb(212.12, 208.1, 197.38);
}
.expandable-grid a .grid-item .grid-item-image {
width: 100%;
height: 110vw;
text-align: center;
position: relative;
}
@media only screen and (max-width: 1200px) and (min-width: 801px) {
.expandable-grid a .grid-item .grid-item-image {
height: 55vw;
}
}
@media only screen and (min-width: 1201px) {
.expandable-grid a .grid-item .grid-item-image {
height: 35vw;
}
}
@media (min-width: 1400px) {
.expandable-grid a .grid-item .grid-item-image {
height: 550px;
}
}
@media (max-width: 640px) {
.expandable-grid a .grid-item .grid-item-image {
height: 100vw;
}
}
.expandable-grid a .grid-item .grid-item-text {
position: relative;
padding: 25px 1.5em;
-webkit-transition: padding 0.25s ease;
-moz-transition: padding 0.25s ease;
-ms-transition: padding 0.25s ease;
-o-transition: padding 0.25s ease;
transition: padding 0.25s ease;
}
@media (max-width: 800px) {
.expandable-grid a .grid-item .grid-item-text {
height: auto !important;
}
}
.expandable-grid a .grid-item .grid-item-text .grid-item-name {
font-size: 22px;
font-weight: 600;
line-height: 1.25em;
color: #465155;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
transition: all 0.75s ease;
margin-bottom: 0.25em;
text-transform: uppercase;
}
.expandable-grid a .grid-item .grid-item-text .grid-item-info {
font-size: 17px;
line-height: 1.25em;
margin-bottom: 0;
color: #465155;
}
.expandable-grid a .grid-item .arrow--more {
color: #465155;
position: absolute;
right: 10px;
top: 10px;
font-size: 1.25rem;
-webkit-transition: color 0.25s ease;
-moz-transition: color 0.25s ease;
-ms-transition: color 0.25s ease;
-o-transition: color 0.25s ease;
transition: color 0.25s ease;
}
.expandable-grid .grid__cell.is-expanded .grid-item .grid-item-text {
padding: 25px 1.5em;
}
.expandable-grid .grid__cell.is-expanded .grid-item .arrow--more {
opacity: 0;
}
.expandable-grid a:hover .grid-item {
background-color: rgb(212.12, 208.1, 197.38);
}
.expandable-grid a:hover .grid-item .arrow--more {
color: #49777d;
}
.grid__cell {
float: left;
position: relative; -webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
}
.grid__cell.active {
transform: scale(1);
}
.grid--basic {
padding: 0 10px;
}
.grid--basic a {
color: #ffffff;
}
.grid__cell.is-collapsed .grid--basic {
cursor: pointer;
}
.grid__cell.is-expanded .grid--expand {
max-height: 5000px;
opacity: 1;
}
.grid--expand {
position: relative;
left: -10px;
padding: 0 10px;
box-sizing: content-box;
overflow: hidden;
max-height: 0;
text-align: left;
border: 0;
opacity: 0;
transition: max-height 0.5s ease-in-out, margin-bottom 0.25s, opacity 0.5s;
}
.grid--expand .grid-item-name {
font-size: 2.5em;
font-weight: 400;
margin-bottom: 0.5rem;
color: #465155;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
transition: all 0.75s ease;
text-transform: uppercase;
}
@media (max-width: 800px) {
.grid--expand .grid-item-name {
text-align: center;
}
}
@media (max-width: 768px) {
.grid--expand .grid-item-name {
font-size: 2.25em;
}
}
@media (max-width: 640px) {
.grid--expand .grid-item-name {
font-size: 2em;
}
}
.grid--expand .grid-item-info {
font-size: 1.5em;
line-height: 1.25em;
margin-bottom: 1rem;
color: #465155;
}
@media (max-width: 800px) {
.grid--expand .grid-item-info {
text-align: center;
}
}
@media (max-width: 768px) {
.grid--expand .grid-item-info {
font-size: 1.25em;
}
}
@media (max-width: 640px) {
.grid--expand .grid-item-info {
font-size: 1.25em;
}
}
.grid--expand #grid-item-description {
text-align: center;
}
.grid--expand #grid-item-description a, .grid--expand #grid-item-description .spanlink {
display: inline-block !important;
text-decoration: underline;
color: #49777d;
}
.grid__cell.is-expanded .grid--expand .grid-item-detail {
border-top: 2px solid #49777d;
border-bottom: 2px solid #49777d;
}
.grid__cell .grid--expand {
background-color: #ffffff;
}
.grid__cell .grid--expand .grid-item-detail {
border-top: 2px solid #49777d;
border-bottom: 2px solid #49777d;
margin-bottom: 40px;
-webkit-transition: margin 0.5s ease, border 0.5s 0.5s;
-moz-transition: margin 0.5s ease, border 0.5s 0.5s;
-ms-transition: margin 0.5s ease, border 0.5s 0.5s;
-o-transition: margin 0.5s ease, border 0.5s 0.5s;
transition: margin 0.5s ease, border 0.5s 0.5s;
}
.grid__cell.is-collapsed .arrow--up {
height: 0px;
width: 100%;
}
.grid__cell.is-expanded .arrow--up {
border-bottom: 19px solid #49777d;
border-left: 19px solid transparent;
border-right: 19px solid transparent;
height: 0;
width: 0;
margin: 5px auto 0;
position: relative;
}
.grid__cell.is-expanded .arrow--up .arrow--up--inside {
border-bottom: 19px solid #fff;
border-left: 19px solid transparent;
border-right: 19px solid transparent;
position: absolute;
top: 3px;
z-index: 5;
left: -19px;
}
.expand__close {
position: absolute;
z-index: 100;
right: 31px;
top: 11px;
display: block;
width: 46px;
height: 46px;
overflow: hidden;
cursor: pointer;
}
.expand__close:hover { }
.expand__close:hover::after, .expand__close:hover::before {
background: #49777d;
}
.expand__close::after {
content: "";
position: absolute;
height: 2px;
width: 30px;
top: 50%;
left: 50%;
margin: -1px auto 0 -10px;
background: #465155;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.expand__close::before {
content: "";
position: absolute;
height: 2px;
width: 30px;
top: 50%;
left: 50%;
margin: -1px auto 0 -10px;
background: #465155;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.expand__close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.expand__close.black::after, .expand__close.black::before {
height: 2px;
margin-top: -2px;
}
.grid--large {
max-width: calc(100% - (20px));
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}
@media (max-width: 800px) {
.grid--large {
padding: 4em 0 2em;
}
}
.grid-item-detail p {
margin: 0 auto;
text-align: left;
width: 100%;
margin-bottom: 1rem;
}
@media (max-width: 800px) {
.grid-item-detail p {
text-align: center;
}
}
.grid-item-detail p::last-of-type {
margin: 0;
}
@media only screen and (max-width: 800px) {
.grid__cell {
width: 100%;
}
.grid--basic {
padding: 0;
}
.grid-item {
width: 100%;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
}
.grid-item-image {
width: 100%;
box-sizing: border-box;
}
.grid-item-text {
width: 100%;
box-sizing: border-box;
padding-left: 1em;
padding-right: 1em;
}
.grid--expand {
width: 100%;
left: 0;
padding: 0;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.grid--large {
width: 100%;
padding-left: 1em;
padding-right: 1em;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
}
}
@media only screen and (max-width: 1200px) and (min-width: 801px) {
.grid__cell {
width: 50%;
}
.grid__cell:nth-of-type(2n+2) .grid--expand {
margin-left: -100%;
}
.grid__cell:nth-of-type(2n+3) {
clear: left;
}
.grid--expand {
width: 200%;
}
}
@media only screen and (min-width: 1201px) {
.grid__cell {
width: 33.333333%;
}
.grid__cell:nth-of-type(3n+2) .grid--expand {
margin-left: -100%;
}
.grid__cell:nth-of-type(3n+3) .grid--expand {
margin-left: -200%;
}
.grid__cell:nth-of-type(3n+4) {
clear: left;
}
.grid--expand {
width: 300%;
}
}
.grid__cell--filler .grid--filler {
cursor: default;
}
.grid__cell--filler .grid--filler .grid-item--filler {
text-align: center;
overflow: hidden;
width: 100%;
position: relative;
background-color: transparent;
margin-bottom: 20px;
}
.grid__cell--filler .grid--filler .grid-item--filler .grid-item-image {
width: 100%;
min-height: 400px;
}
.grid__cell--filler .grid--filler .grid-item--filler .grid-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media only screen and (min-width: 1201px) {
.grid__cell--filler.span-1 {
width: 33.333333%;
}
}
@media only screen and (max-width: 1200px) and (min-width: 801px) {
.grid__cell--filler.span-1 {
width: 50%;
}
}
@media only screen and (max-width: 800px) {
.grid__cell--filler.span-1 {
width: 100%;
}
}
@media only screen and (min-width: 1201px) {
.grid__cell--filler.span-2 {
width: 66.666666%;
}
}
@media only screen and (max-width: 1200px) and (min-width: 801px) {
.grid__cell--filler.span-2 {
display: none;
}
}
@media only screen and (max-width: 800px) {
.grid__cell--filler.span-2 {
display: none;
}
}
#services {
margin-bottom: 2rem;
}
@media (max-width: 640px) {
#services {
margin-bottom: 1rem;
}
}
#services .expandable-grid .grid__cell a .grid-item {
background-color: #49777d;
}
#services .expandable-grid .grid__cell a .grid-item .overlay {
z-index: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#services .expandable-grid .grid__cell a .grid-item .grid-item-image {
height: auto;
margin-top: 2rem;
position: relative;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#services .expandable-grid .grid__cell a .grid-item .grid-item-image img {
height: 80px;
width: auto;
}
#services .expandable-grid .grid__cell a .grid-item .grid-item-text {
position: relative;
padding-bottom: 65px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#services .expandable-grid .grid__cell a .grid-item .grid-item-text .grid-item-name {
font-weight: 400;
font-size: 30px;
text-align: center;
}
#services .expandable-grid .grid__cell a .grid-item .arrow--more {
color: #ffffff;
font-weight: 600;
font-size: 1.5rem;
text-transform: uppercase;
bottom: 1.5rem !important;
}
#services .expandable-grid .grid__cell a .grid-item .arrow--more i {
color: #dfdcd4;
display: inline;
position: inherit;
padding: 0 5px 0 0;
font-size: 0.85em;
-webkit-transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-ms-transition: padding 0.3s ease;
-o-transition: padding 0.3s ease;
transition: padding 0.3s ease;
}
#services .expandable-grid .grid__cell a:hover .grid-item .overlay {
opacity: 0.1;
}
#services .expandable-grid .grid__cell a:hover .grid-item .arrow--more i {
padding: 0 0 0 5px;
}
@media (min-width: 0px) {
#services .expandable-grid .grid__cell:nth-child(even) a .grid-item {
background-color: #dfdcd4;
}
#services .expandable-grid .grid__cell:nth-child(even) a .grid-item .arrow--more i {
color: #49777d;
}
}
@media (min-width: 769px) {
#services .expandable-grid .grid__cell:nth-child(4n+1) a .grid-item, #services .expandable-grid .grid__cell:nth-child(4n) a .grid-item {
background-color: #49777d;
}
#services .expandable-grid .grid__cell:nth-child(4n+1) a .grid-item .arrow--more i, #services .expandable-grid .grid__cell:nth-child(4n) a .grid-item .arrow--more i {
color: #dfdcd4;
}
#services .expandable-grid .grid__cell:nth-child(4n+2) a .grid-item, #services .expandable-grid .grid__cell:nth-child(4n+3) a .grid-item {
background-color: #dfdcd4;
}
#services .expandable-grid .grid__cell:nth-child(4n+2) a .grid-item .arrow--more i, #services .expandable-grid .grid__cell:nth-child(4n+3) a .grid-item .arrow--more i {
color: #49777d;
}
}
@media (min-width: 1249px) {
#services .expandable-grid .grid__cell:nth-child(4n+1) a .grid-item, #services .expandable-grid .grid__cell:nth-child(4n) a .grid-item {
background-color: #49777d;
}
#services .expandable-grid .grid__cell:nth-child(4n+1) a .grid-item .arrow--more i, #services .expandable-grid .grid__cell:nth-child(4n) a .grid-item .arrow--more i {
color: #dfdcd4;
}
#services .expandable-grid .grid__cell:nth-child(4n+2) a .grid-item, #services .expandable-grid .grid__cell:nth-child(4n+3) a .grid-item {
background-color: #49777d;
}
#services .expandable-grid .grid__cell:nth-child(4n+2) a .grid-item .arrow--more i, #services .expandable-grid .grid__cell:nth-child(4n+3) a .grid-item .arrow--more i {
color: #dfdcd4;
}
#services .expandable-grid .grid__cell:nth-child(even) a .grid-item {
background-color: #dfdcd4;
}
#services .expandable-grid .grid__cell:nth-child(even) a .grid-item .arrow--more i {
color: #49777d;
}
}
#services .grid--expand .grid-item-name {
text-align: center;
}
#services .grid--expand .grid-item-name br {
content: " ";
}
#services .grid--expand .grid-item-name br:after {
content: " ";
}