[data-xl-width="3"] {
flex: 0 0 auto;
flex-basis: 25%;
max-width: 25%;
width: 25%;
}
.text-center {
text-align: center;
}
.gallery-group {
margin-top: -1px;
}
.gallery-group .card {
float: left;
height: 300px;
left: 50%;
margin: -150px;
perspective: 500px;
position: absolute;
top: 50%;
width: 300px;
}
.gallery-group .content {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
width: 100%;
}
.gallery-group .card:hover .content {
transform: rotateY(180deg);
transition: transform 0.5s;
}
.sr-card-inner {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.custom-back-card,
.custom-front-card {
min-height: auto;
overflow: hidden;
-ms-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
z-index: 5;
}
.custom-front-card {
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.custom-back-card,
.custom-front-card {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.custom-back-card {
background: linear-gradient(180deg, #daff01, #9bb600);
height: 100%;
left: 0;
padding-bottom: 50px;
position: absolute;
top: 0;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
width: 100%;
}
.sr-card-inner:hover .custom-front-card {
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.sr-card-inner:hover .custom-back-card {
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.gallery-group .custom-back-card {
color: #000;
font-size: 16px;
font-size: 32px;
line-height: 1.6;
padding: 20px;
}
.gallery-group .custom-back-card,
.gallery-group .custom-back-card a {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.gallery-group .custom-back-card a {
height: 100%;
width: 100%;
}
.gallery-group .custom-back-card h3 {
font-size: 100%;
position: relative;
text-align: center;
}
.gallery-group .custom-back-card a p {
color: #000;
font-size: 15px;
text-align: center;
}
.gallery-group .custom-back-card h3:before {
background: #000;
bottom: 0;
content: "";
height: 3px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 100%;
}
.gallery-group {
background: #000;
padding: 120px 0 0;
position: relative;
z-index: 6;
}
.gallery-group .content-wrapper {
max-width: 100%;
}
.gallery-group h2 {
color: #fff;
margin-bottom: 40px;
}
#content .masonry,
.body-wrapper .masonry {
display: flex;
flex-direction: row;
}
#content .masonry .masonry-item-width,
.body-wrapper .masonry .masonry-item-width {
width: 8.33333%;
}
#content .masonry .masonry-item,
.body-wrapper .masonry .masonry-item {
box-sizing: border-box;
font-size: 0;
line-height: 0;
transition-timing-function: ease;
}
.body-wrapper .masonry .masonry-item {
padding: 10px;
}
#content .masonry .masonry-item img,
.body-wrapper .masonry .masonry-item img {
height: auto;
max-width: 100%;
width: 100%;
}
#content .masonry .pg-lazy-load,
.body-wrapper .masonry .pg-lazy-load {
transform: translateY(30px);
}
#content .masonry .masonry-filter-transition,
.body-wrapper .masonry .masonry-filter-transition {
transition: all 0.5s ease;
}
@media (max-width: 767px) {
.gallery-group h2 {
color: #fff;
margin-bottom: 10px;
}
.gallery-group {
padding: 30px 0 50px;
}
.body-wrapper .masonry .masonry-item {
padding: 10px;
}
[data-xl-width="3"] {
flex-basis: 50%;
max-width: 50%;
width: 50%;
}
.gallery-group .custom-back-card {
font-size: 12px;
line-height: 1.4;
overflow-y: auto;
}
.gallery-group .custom-back-card h3 {
font-size: 24px;
margin: 0;
padding: 0;
}
.gallery-group .content-wrapper {
padding-left: 5px;
padding-top: 5px;
}
}
@media (min-width: 401px) and (max-width: 600px) {
.gallery-group .custom-back-card {
font-size: 10px;
line-height: 1;
overflow-y: auto;
padding: 15px;
}
.gallery-group .custom-back-card a p {
font-size: 11px;
margin-top: 9px;
}
.gallery-group .custom-back-card h3 {
font-size: 16px;
}
.gallery-group .custom-back-card h3:before {
height: 2px;
}
}
@media (max-width: 400px) {
[data-xl-width="3"] {
flex-basis: 100%;
max-width: 100%;
width: 100%;
}
}
.gallery-section-1 {
justify-content: center;
margin-bottom: 77px;
}
.gallery-scroll-links ul,
.gallery-section-1 {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.gallery-scroll-links ul {
justify-content: center;
list-style: none;
margin-bottom: 0;
padding: 0;
width: 100%;
}
.gallery-scroll-links ul li {
margin: 0 10px;
}
.gallery-scroll-links li a {
border: 1px solid #142d48;
color: #142d48;
display: inline-block;
font-size: 14px;
padding: 10px 15px; transition: all 0.7s;
text-transform: uppercase;
}
.gallery-scroll-links li a.active,
.gallery-scroll-links li a:focus,
.gallery-scroll-links li a:hover {
background-color: #142d48;
color: #fff;
}
.gallery-scroll-links li {
display: inline-block;
}
.gallery-scroll-select select {
-webkit-appearance: none;
border: 1px solid #142d48;
min-width: 267px;
padding: 10px 15px;
}
.gallery-module img,
.gallery-module video {
object-fit: cover;
}
.events-item {
display: inline-block; height: 390px;
position: relative;
width: 49%;
margin-right: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.events-item > a {
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 4;
}
.event-image { height: 100%;
position: absolute;
left: 0;
top: 0;
transition: all 0.5s ease;
width: 100%;
z-index: 1;
}
.events-item img {
width: 105%;
position: absolute;
top: 0;
left: 0%;
height: 100%;
max-width: none;
transition: all 0.3s;
z-index: 1;
}
.events-item:focus .event-content,
.events-item:hover .event-content {
bottom: 2em;
}
.events-item:focus .event-overlay,
.events-item:hover .event-overlay {
opacity: 0;
}
.events-item:focus img,
.events-item:hover img {
left: inherit;
}
.event-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 90;
transition: all 0.4s;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.event-content {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
padding: 20px;
transition: all 0.4s;
width: 100%;
}
.event-content::after {
background: linear-gradient(-360deg, black, transparent);
content: "";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 146%;
z-index: -1;
}
.event-content h4 {
color: #fff;
font-size: 20px;
margin-bottom: 0;
}
.event-video {
display: inline-block;
width: 32px;
height: 32px;
}
.event-video img {
display: inline-block;
width: 100%;
height: 100%;
left: auto;
position: relative;
}
.event-date-time {
color: #fff;
display: inline-block;
margin-bottom: 5px; }
.event-date-time span { font-size: 14px;
line-height: 24px;
text-transform: uppercase;
}
.event-date-time span.year {  }
@media (min-width: 576px) and (max-width: 767.98px) {
.events-item {
height: 320px;
margin-right: 0;
width: 48%;
}
.event-content h4 {
font-size: 18px;
}
}
@media (max-width: 575.98px) {
.gallery-scroll-links ul li {
margin: 0 10px 10px 0;
width: 100%;
}
.gallery-scroll-links ul li a {
display: block;
}
.events-item {
height: 320px;
margin-right: 0;
width: 100%;
}
.event-content h4 {
font-size: 18px;
}
}
.events-slider .slick-list.draggable {
padding: 0 !important;
}
.slick-slide.slick-current.slick-active.slick-center .event-image {
filter: grayscale(0);
height: 495px;
}
.gallery-item-section-2 {
margin-bottom: 90px;
margin-top: 100px;
}
.events-title {
margin-bottom: 70px;
}
.events-slider {
margin-left: -19px;
margin-right: -19px;
width: calc(100% + 38px);
}
.featured-video {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
justify-content: SPACE-BETWEEN;
margin-bottom: 136px;
}
.featured-video-left {
width: 59%;
}
.featured-video-right {
width: 38%;
}
.video-list-item {
width: calc(33.33% - 35px);
}
.video-list-flex {
display: flex;
flex-wrap: wrap;
}
span.gallery-title-arrow-left {
background: #000;
height: 1px;
left: 0;
margin-top: 33px;
position: absolute;
top: 0;
width: 120px;
z-index: -1;
}
.gallery-item-section-1 {
position: relative;
}
.gallery-title {
margin-bottom: 115px;
}
.section-gallery-title {
margin-bottom: 35px;
}
.events-title-flex {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.events-title-left h2 {
margin-bottom: 0;
}
.gallery-item-section-2,
.video-list-item-image {
position: relative;
}
.video-list-item-image > a {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
top: calc(50% - 30px);
}
.video-list-item p {
font-size: 22px;
margin-bottom: 24px;
margin-top: 60px;
text-align: center;
}
.video-list-item {
margin-bottom: 60px;
margin-right: 5%;
text-align: center;
width: 30%;
}
.video-list-item:nth-child(3n) {
margin-right: 0;
}
span.events-title-arrow-left {
background: #000;
height: 1px;
left: 0;
margin-top: 33px;
position: absolute;
top: 0;
width: 120px;
z-index: -1;
}
.video-title {
margin-bottom: 70px;
position: relative;
}
span.video-title-arrow-left {
background: #000;
height: 1px;
left: 0;
margin-top: 33px;
position: absolute;
top: 0;
width: 120px;
z-index: -1;
}
.featured-video-wrapper {
position: relative;
}
span.featured-video-title-arrow-right {
background: #000;
height: 1px;
margin-top: 18px;
position: absolute;
right: 0;
width: 34%;
z-index: -1;
}
.featured-video-right-title h4 {
background: #fff;
display: inline-block;
padding-right: 20px;
}
.featured-video-right-content > :last-child {
margin-bottom: 0;
}
.events-slider-arrows button {
background: transparent;
border: 0;
margin: 0 7px;
padding: 0;
}
.gallery-section-1-arrow {
background: #000;
height: 85px;
margin: 100px auto 0;
width: 1px;
} .gallery-section-2-arrow {
background: #000;
height: 85px;
margin: 80px auto 0;
width: 1px;
}
.gallery-scroll-select select:focus-visible {
background-color: #102236;
background-image: url(https://26475452.fs1.hubspotusercontent-eu1.net/hubfs/26475452/down-filled-triangular-arrow-1.png);
color: #fff;
outline: none;
}
.gallery-scroll-select select option {
padding: 8px 0;
}