/* team emblem  */
.sec_team_emblems{
	padding-bottom: 40px !important;
	min-height: 630px;
	padding-top: 300px;
}

.sec_team_emblems .desc{
	padding-top: 40px;
	max-width: 700px;
	margin: auto;
}

.sec_team_emblems .desc h2{ margin-bottom: 30px; }
.sec_team_emblems .desc p{ margin-bottom: 20px; }


/* emblem logo */
.emblem_logo_slider .slick-list{ 
	width: 100%;
	max-width: 1100px;
}
.emblem_logo figure img{
	width: 100%!important;
	height: 350px !important;
	filter: grayscale(1);
	transition: transform 0.5s; 
	transform: scale(.6) translateY(100px);
}

.emblem_logo_slider .slick-slide{
	padding: 0 0px;
}
.emblem_logo_slider .slick-slide.slick-center img{
  transform: scale(1);
	filter: none;
}

.emblem_logo_slider { 
	margin-bottom: -300px;
    position: relative;
    z-index: 1;
	margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
    max-width: 100vw;
    justify-content: center;
}

/* slick arrow */
.emblem_slider .slick-arrow{
	background: transparent;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.emblem_slider .slick-arrow.aright{ right: 10vw; }
.emblem_slider .slick-arrow.aleft{ 
	left: 10vw;
    right: auto;
}

.emblem_slider .slick-arrow span.wrapper{
	position: relative;
    z-index: 1;
    width: 70px;
    height: 70px;
    background: url(/wp-content/uploads/2023/08/socials-border.svg) no-repeat !important;
    opacity: 1;
    left: 0;
    margin: 0;
}
.emblem_slider .slick-arrow span.wrapper img{
	width: auto;
	position: absolute;
    top: 10px;
    left: 18px;
}

.emblem_slider .aleft span.wrapper img{ top: 11px; left: 11px; }

.emblem_slider .slick-arrow span.wrapper:hover img{ filter: brightness(32);}
.emblem_slider .slick-arrow span.wrapper::before{
	content: '';
    background: #000;
    width: 48px;
    border-radius: 50px;
    height: 48px;
    position: absolute;
    transition: .5s;
    z-index: -3;
	opacity:0;
}

.emblem_slider .slick-arrow span.wrapper:hover::before{ opacity: 1; }


/* gallery */
.sec_team_gallery { padding-bottom: 120px; }
.sec_team_gallery  h2{ 
	font-size: 2.8rem; 
	max-width: 1040px;
    margin: 70px auto 50px auto;
    transform: translateX(-10%);
}
.sec_team_gallery .gallery_row{
	gap: 0px;
	display: none;
} 

.sec_team_gallery .infiniteslide_wrap .gallery_row{ display: flex;}
.sec_team_gallery .gallery_row a{ pointer-events: none;}

.sec_team_gallery .infiniteslide_wrap{ 
	margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
    max-width: 100vw;
}
.sec_team_gallery .gallery_row figure.wp-block-image {
    flex-basis: 18% !important;
	padding: 0 5px;
}
.sec_team_gallery .gallery_row figure img{
	width: 100%!important;
	border-radius: 10px;
}

.team_gallery_modal .mfp-content{
	max-width: 1000px!important;
}

/* popup gallery  */
.team_gallery_modal  .mfp-close::before{
	background-position: 12px;
}
.sec_team_gallery .wp-block-buttons{ padding-top: 60px; }
.sec_team_gallery .wp-block-buttons > .wp-block-button > a{
	min-width: auto;
	gap: 10px;
	font-size: 20px;
}
.gallery-video-nav, .gallery-image-nav { justify-content:center;  padding-top: 10px; }
.gallery-video-nav .slick-slide, .gallery-image-nav .slick-slide{ padding: 0px 5px; cursor: pointer; }
.gallery-video-nav .slick-list, .gallery-video-nav .slick-track{ width: 100% !important; display: flex; }

.gallery-video-carousel, .gallery-image-carousel{ overflow: hidden; border-radius: 20px; }
.gallery-video-carousel .slick-slide{ text-align: center; background: #000;}
.gallery-video-carousel video{
	height: 600px;
	border-radius: 0px;
	width: auto!important;
}
.gallery-video-nav figure,
.gallery-image-nav figure{ border-radius: 0px!important; }

.gallery-image-nav figure img,
.gallery-video-nav figure img{ 
	width: 100% !important;
    height: 100px !important;
    object-fit: cover;
    border-radius: 10px;
}

/* image modal */
.gallery-image-carousel .slick-slide figure img{ 
	width: 100% !important;
    object-fit: cover;
    height: 600px !important;
	border-radius: 20px;
}

.gallery-image-nav{
	padding: 10px 80px 0 80px;
}

.gallery-image-nav  .slick-arrow{
    padding: 0;
    opacity: 1;
    background: url(/wp-content/uploads/2023/08/socials-border.svg) transparent no-repeat !important;
    background-position: center !important;
    bottom: 11px;
    top: auto;
	right: 0px;
    height: 70px;
    border-radius: 0;
    width: 70px;
    background-size: 45px !important;
}
.gallery-image-nav .aleft{ left: 0; right: auto;}

.gallery-image-nav .slick-arrow .wrapper::before{
	content: '';
    background: #000;
    border-radius: 50px;
    width: 42px;
    height: 42px;
    margin: 0;
    top: 14px;
    left: 14px;
    z-index: -1;
    opacity: 0;
    transition: all 0.25s ease-out;
    position: absolute;
}
.gallery-image-nav .slick-arrow img{ 
	position: absolute;
    top: 20px;
    right: 21px;
}

.gallery-image-nav .slick-arrow.aleft img{
	top: 21px;
	right: 27px;
}

.gallery-image-nav .slick-arrow:hover .wrapper::before{ opacity: 1;}
.gallery-image-nav .slick-arrow:hover img{ filter: brightness(32);}

#gallery-videos .slick-arrow { display: none!important; }


/* Slide effect */
.mfp-slide-left .mfp-content .mfp-img {
    animation: slideInLeft 0.3s ease-in-out forwards;
}

.mfp-slide-right .mfp-content .mfp-img{
    animation: slideInRight 0.3s ease-in-out forwards;
}

@keyframes slideInLeft {
    from { transform: translateX(50%); }
    to { transform: translateX(0); }
}

@keyframes slideInRight {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

.mfp-img-mobile figure{ overflow: hidden; border-radius: 25px; }
.mfp-img-mobile .mfp-img{
	-webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
	backface-visibility: hidden;
}

.mfp-img-mobile.arrow-right-clicked .mfp-img {
    -webkit-animation-name: slideInRight;
    -moz-animation-name: slideInRight;
    -o-animation-name: slideInRight;
    animation-name: slideInRight;
}

.mfp-img-mobile.arrow-left-clicked .mfp-img {
    -webkit-animation-name: slideInLeft;
    -moz-animation-name: slideInLeft;
    -o-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

/* Teams latests post */
.team_posts .filter_cards { gap: 15px; }
.team_posts > .gb-container-inside > .gb-container-content{ transform: translateX(-10%);}


/* weekly ranking */
.sec_weekly_ranking{ 
	padding-top: 80px!important;
	padding-bottom: 80px!important;
}

/* bar animation */
.chart {
    display: grid;
    padding-top: 30px;
    gap: 20px;
    grid-template-columns: repeat(6, 1fr);
}
.chart .chart{ display: block; }

.bar {
  color: white;
  padding: 10px;
  margin: 5px;
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-height: 420px;
  border-radius: 50px;
/*   background-color: rgba(255, 255, 255, 0.20); */
  margin: auto;
  margin-bottom: 10px;
}

.bar .fill {
  position: absolute;
  bottom: 0;
  left: 0;
/*   z-index: -1; */
  width: 100%;
  background-color: rgba(255, 255, 255);
  height: 0;
  transition: height 1s ease-in-out;
  border-radius: 50px;
}

.bar img{
	position: relative;
	z-index: 1;
}

.bar span {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  color: #000;
  position: absolute;
  bottom: 10px; /* Adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin-bottom: -45px;
  font-weight: 700;
  font-size: 1.8rem;
}

.chart_bar { text-align: center; }

.chart_bar .lbl {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	max-width: 140px;
	display: inline-block;
}

.bar_warriors .bar span{  color: #619030; }
.bar_mantas .bar span{  color: #0080B2; }
.bar_hawks .bar span{  color: #AB2B1D; }
.bar_titans .bar span{  color: #B73C58; }
.bar_hunters .bar span{  color: #8F3088; }
.bar_fitness .bar span{  color: #BE7513; }
