/*
Theme Name: QUAD
Author: Brave New Pixels
Version: 1.0
*/



/* .font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/Bebas-Neue-Thin.ttf.eot');
  /* IE9 Compat Modes */
/* src: url('fonts/Bebas-Neue-Thin.ttf.eot?#iefix') format('embedded-opentype'), */
/* IE6-IE8 */
/* url('fonts/Bebas-Neue-Thin.ttf.woff') format('woff'), */
/* Modern Browsers */
/* url('fonts/Bebas-Neue-Thin.ttf.svg#BebasNeueThin') format('svg'); */
/* Legacy iOS */
/* font-style: normal; */
/* font-weight: normal; */
/* } */

/* 
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.ttf');
  font-style: normal;
  font-weight: normal;
} */


@font-face {
  font-family: "formulaCondensed";
  src: url("fonts/FormulaCondensed-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "formulaCondensed";
  src: url("fonts/FormulaCondensed-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}


/* 
@font-face {
    font-family: "formulaCondensed";
    font-family: "Formula Condensed Bold";
    src: url("https://db.onlinewebfonts.com/t/282c8e780436765ea68a4dd5f89256fb.eot");
    src: url("https://db.onlinewebfonts.com/t/282c8e780436765ea68a4dd5f89256fb.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/282c8e780436765ea68a4dd5f89256fb.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/282c8e780436765ea68a4dd5f89256fb.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/282c8e780436765ea68a4dd5f89256fb.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/282c8e780436765ea68a4dd5f89256fb.svg#Formula Condensed Bold")format("svg");
}
 */


body {
  /* font-family: sans-serif; */

}


/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

nav {
  position: absolute;
  width: 100%;
}

header a#logo {
  top: 3vh;
}

#menuToggle {
  top: 4vh;
}

#menuToggle {
  display: block;
  position: absolute;
  right: 5vh;
  /* top: 50px;
  right: 50px; */

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  transition: color 0.3s ease;
}



#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span

/* hamburger lines and close X */
  {
  display: block;
  width: 30px;
  height: 1px;
  margin-bottom: 7px;
  position: relative;

  background: #ffffff;
  /* border-radius: 3px; */

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;

  /* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); */

  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #ffffff;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
ul#menu {
  position: absolute;
  right: 0;
  width: 300px;
  margin: -100px -50px 0 0;
  padding: 50px;
  padding-top: 125px;

  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(100%, 0);

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li,
.talent-list li,
body.home .for-agency,
body.single-talent .for-agency 
{
  font-size: 1.5rem !important;
}


#menu li,
.talent-list li {
  padding: 0.6rem 0;
}

#menu li {
  /* padding: 15px 0; */
  /* font-size: 24px; */

  /* font-size: 2rem; */
  text-align: right;
}


/*
 * And let's slide it in from the left
 */
#menuToggle input:checked~#menu {
  transform: none;
}

/* #hamburger */


/* fonts typography */


/*
Fonts Added:
Bebas Neue Thin
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 100;
font-style: normal;
Bebas Neue Light
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 200;
font-style: normal;
Bebas Neue Book
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 300;
font-style: normal;
Bebas Neue Regular
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 400;
font-style: normal;
Bebas Neue Bold
font-family: "bebas-neue-by-fontfabric", sans-serif;
font-weight: 700;
font-style: normal;

*/



#menu a,
.talent-list a,
.page-template-about-us {
  /* white-space: nowrap !important; */
}
body.page-template-about-us .wp-block-column p {
  margin-right:5vw;

}

body {
  letter-spacing: .2rem;

  font-family: "formulaCondensed", sans-serif;
  /* font-family: 'Bebas Neue'; */
  /* font-family: "bebas-neue-by-fontfabric", sans-serif; */
  /* font-weight: 400; */
  /* font-weight: 300; */
  font-weight: 200;
  /* text-shadow: 2px 2px 2px #000000; */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-style: normal;
}


ul#menu a,
#scroll-container,
.talent-list a,
.single-talent h1 {
  text-transform: lowercase;
  font-weight: 200;
}



body.home a {
  text-decoration: none;
}




body.home h2,
.page-template-works .video-thumbnails h2,
body.single-talent h2 {
  font-family: "formulaCondensed", sans-serif;
  font-weight: 200;
  font-style: normal;
  vertical-align: middle;

  /* white-space: nowrap; */
  /* display: inline-block; */


  /* font-size: 5em; */
  font-size: 3.5rem;
  /* text-shadow: 4px 4px 4px #474747; */
  /* text-shadow: 2px 2px 2px #000000; */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);

  margin-top: 1vh;
  margin-bottom: 2vh;
}

.for-agency {
  font-family: "formulaCondensed", sans-serif;
  font-weight: 200;
  font-style: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);

  /* font-size: 3em; */
  font-size: 2rem;
}

/* #fonts #typography */

/* colors */
body {
  background-color: #000;
}

body,
main a {
  color: #fff;
}

#menuToggle a,
.talent-name,
.client-name,
.for-agency,
ul.talent-list a {
  color: #ffffff;
  text-decoration: none;
}



#menuToggle a:hover {
  color: red;
}

/* #colors */



#scroll-container,
.scroll-area {
  width: 100%;
  height: 100vh;
  height: 100svh;
  position: relative;
}

.scroll-area {
  /* overflow: hidden; */
  /* cursor: pointer; */
}

#scroll-container {
  scroll-behavior: smooth;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
}

#scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* .scroll-area:nth-of-type(1) {
  background: #49b293;
}

.scroll-area:nth-of-type(2) {
  background: #c94e4b;
}

.scroll-area:nth-of-type(3) {
  background: #4cc1be;
}

.scroll-area:nth-of-type(4) {
  background: #8360A6;
} */

#scroll-container {
  scrollbar-width: none;
  margin: 0;
  width: 100vw;
}

#scroll-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the area of the container */
  object-position: center;
  /* Adjust as needed to focus on a particular part of the image */
}

/* #ttd */
body {
  /* overflow: hidden; */
  /* overflow-x: hidden; */
  /* width: 100%; */
  /* max-width: 100vw; */
  width: 100%;
}

body.home, body.single-talent {


  overflow: hidden;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Structure */
header {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  /* z-index: 10; */
  /* overflow: hidden; */
  pointer-events: none;
  z-index: 3;
}

header {
  position: fixed;
}

body.home header, body.single-talent header {
  position: absolute;
}


header a,
header #menuToggle {
  pointer-events: auto;
}

header a#logo {
  overflow: hidden;
}

header a#logo,
body.home .featured-item-info,
body.single-talent .featured-item-info
 {
  left: 2rem;
  /* match with below */
}

a {
  text-decoration: none;
}

.vjs-control-bar {
  padding-left: 2rem;
  padding-right: 1rem;
}


body.home .play-video,
body.single-talent .play-video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: 2;
  /* background-color: aqua; */
  text-indent: -100%;
}

body.home .active .play-video,
body.single.talent .active .play-video
{
  z-index: 0;
}

header a#logo {
  display: block;
  position: absolute;
  /* z-index: 1; */
  width: 150px;
  height: 50px;
  /* width: 100px;
  height: 50px; */
  /* width: 10vw;
  height: 5vw; */
  /* top: 50px;
  left: 50px;
  width: 100px;
  height:50px; */
  /* width: 20vw;
  height: 10vh; */
  background-image: url("images/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* overflow: hidden; */
  /* Ensures no overflow of text */
  text-indent: 100%;
  /* Pushes the text off to the right */
  white-space: nowrap;
  /* Prevents the text from wrapping */
}

.featured-item-info {
  transition: all 0.5s ease !important;
  bottom: auto;
}


body.home .featured-item-info,
body.single-talent .featured-item-info {
  position: absolute;
  z-index: 1;
  bottom: 50%;
  /* transform */
  transform: translate(0, 50%);
}


body.home .talent-name,
body.single-talent .talent-name {
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: 1px solid red;
}

/* .page-template-works .talent-name,
.single-talent .talent-name { */
.page-template-works .talent-name {
  padding-right: 0.5rem;
  margin-right: 0.6rem;
  border-right: 1px solid red;
}

body.home .featured-item-info h2,
body.single-talent .featured-item-info h2 {
  /* margin-bottom: 1rem; */
  max-width: 80vw;
}


/* video-js */

.video-js {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 3;
}

#scroll-container video {}

.scroll-area .bnp-video-player {
  height: 100vh;
  height: 100svh;
  /* display: none; */
  opacity: 0;
  /* transition: 500ms; */
  transition: 500ms;
  pointer-events: none;
  z-index: 2;
}

.scroll-area .bnp-video-player.active {
  /* display: block; */
  opacity: 1;
  pointer-events: all;
  z-index: 3;
}

.scroll-area video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.home .scroll-area.active a.featured-item-info,
body.single-talent .scroll-area.active a.featured-item-info,
.video-thumbnail.active a.featured-item-info {
  z-index: 100 !important;
  position: fixed;
  left: 2rem;
  /* top:auto; */
  bottom: 40px !important;
  transform: none;
  pointer-events: none;
}

.page-template-works .video-thumbnail.active a.featured-item-info {
  bottom: 20px !important;
  /* band-aid. Don't know why doesn't work with bottom 40px like above */
}

.scroll-area.active .featured-item-info .talent-name {
  border-right: 1px solid red !important;
}

.scroll-area.active .featured-item-info .talent-name,
.scroll-area.active .featured-item-info .client-name,
.video-thumbnail h2 span {
  font-size: 1rem !important;
}

.scroll-area.active a.featured-item-info h3 {
  font-size: 1rem !important;
}

.scroll-area .featured-item-info h2 {
  line-height: 2rem;
}

.scroll-area.active .featured-item-info h2,
.video-thumbnail h2 {
  /* margin-bottom: 0.5rem !important; */
  margin: 0;
  padding: 0;
  line-height: 1rem;
}


.my-noscroll {
  overflow: hidden !important;
}




/* Hide the default control bar */
.video-js .vjs-control-bar {
  display: flex;
  justify-content: flex-end;
}

/* Custom styles for play button to be on the right */
.video-js .vjs-play-control {
  order: 2;
  /* Position after the progress control */
}

.video-js .vjs-progress-control {
  flex-grow: 1;
  /* Allow the seeker to grow and fill available space */
  order: 1;
  /* Ensure it's to the left of the play button */
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin-left: 0;
}

.vjs-control-bar {
  font-size: 1.5em;
  /* This increases the size of the icons and text */
  height: 4em;
  /* Adjust the height of the control bar */
  background: none !important;
}

/* .vjs-control-bar {
  padding-left: 5vh;
  padding-right: 1vh;
} */
.video-js .vjs-load-progress div {
  background: white;
}


.vjs-progress-holder .vjs-slider-bar {
  background: red;
}

/* Hide the seek handle on the play progress bar */
.vjs-play-progress .vjs-seek-handle,
.vjs-play-progress::before,
.vjs-play-progress::after {
  display: none !important;
}

/* Adjust the play button size specifically, if needed */
.vjs-play-control {
  width: 4em;
  /* Adjust the width as needed */
  height: 4em;
  /* Adjust the height as needed */
  line-height: 4em;
  /* Center the icon in the button */
}

/* Adjust the progress bar (seeker) height */
.video-js .vjs-progress-control .vjs-progress-holder {
  height: .1em;
  /* Adjust the height of the progress bar */
}

.video-js .vjs-big-play-button {
  border: none;
  background-color: transparent;
  font-size: 5rem;

  display: none;
}


.close-button {
  position: absolute;
  display: inline-block;
  top: 1vh;
  right: 1vh;
  /* match with .vjs-control-bar padding -right */
  width: 50px;
  /* Size of the button */
  height: 50px;
  /* Size of the button */
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  /* text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); */
}

.close-button::before,
.close-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  /* Length of the 'X' lines */
  height: 1px;
  /* Thickness of the 'X' lines */
  background-color: white;

}

.close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-button:hover {
  /*
    background-color: rgba(255, 255, 255, 0.2); 
    */
}




/* #video-js */



/* #structure */


/* homepage dots */

.dots-container {
  text-align: center;
  padding: 10px;
  position: fixed;
  right: 0;

  top: 50%;
  /* Start at the middle of the screen vertically */
  transform: translateY(-50%);
  /* Offset the container by half its height to truly center it vertically */


}

.dot {
  height: 5px;
  width: 5px;
  margin: 5px;
  margin-right: 0;
  background-color: #b5b5b5;
  /* Grey color */
  border-radius: 50%;
  display: block;
  /* outline: 1px solid rgb(148, 148, 148);  */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
}

.dot.active {
  background-color: #fff;
  /* White color for active dot */
}


/* works */
.video-thumbnails {
  padding-top: 10vh;
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2vw;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

body.single-talent .video-thumbnails {
  grid-template-columns: repeat(2, 1fr);
}

/* .page-template-works .video-thumbnail,
.single-talent-list .video-thumbnail { */

.page-template-works .video-thumbnail {
  /* text-align: center; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumbnail h3 {
  margin-top: 10px;
}

/* 
.video-thumbnail img {
  width: 33%; 
  aspect-ratio: 5 / 3; 
  object-fit: cover; 
} */


/* .page-template-works .video-thumbnail img,
.single-talent-list .video-thumbnail img { */

.page-template-works .video-thumbnail img {
  width: 100%;
  /* Make the image fill the entire width of its container */
  height: calc(33vw * (3 / 5));
  /* Calculate height based on viewport width to maintain 5:3 ratio */
  object-fit: cover;
  /* Ensures the image covers the area, may be cropped to maintain aspect ratio */

}

/* .page-template-works .talent-name,
.page-template-works .client-name,
.single-talent-list .talent-name,
.single-talent-list .client-name { */

.page-template-works .talent-name,
.page-template-works .client-name {
  font-size: 1.1rem;
  /* letter-spacing: .2rem; */
}

/* .page-template-works .for-agency,
.single-talent-list .for-agency { */
.page-template-works .for-agency {
  font-size: 1rem;
}



/* transitions */

.talent-name,
.client-name,
.for-agency {
  /* transition: font-size 0.5s, top 0.5s, left 0.5s; */
  transition: font-size 0.5s;
}

.scroll-area a.featured-item-info {
  transition: font-size 0.5s, top 0.5s, bottom 0.5s, left 0.5s;
}



body.home .bnp-preview-player,
body.home .home-video-preview,
body.single-talent .bnp-preview-player,
body.single-talent .home-video-preview {

  /* object-fit: cover; */
  position: absolute;

  width: 100%;
  height: 100vh;
  height: 100svh;
  /* z-index: 0; */
}

/* video {
  object-fit: cover !important;
} */




.video-thumbnail h2 {
  padding: 0 1rem;
  /* padding: 0; */
  /* line-height: 1rem; */
  line-height: 0.5rem;
}

.video-thumbnail.active h2 {
  padding: 0;
}



/* Customizes the entire scrollbar */
::-webkit-scrollbar {
  width: 7px;
  /* Width of the vertical scrollbar */
}

/* Customizes the background of the scrollbar track */
::-webkit-scrollbar-track {
  background: #fff;
  /* Light grey track */
}

/* Customizes the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: red;
}





.video-thumbnails .bnp-preview-player,
.video-thumbnails .bnp-preview-player video,
.video-thumbnails .play-video {
  /* 5:3 aspect ratio */
  width: 33.3vw;
  height: 20vw;
  object-fit: cover;
}

/* .single-talent .video-thumbnails .bnp-preview-player,
.single-talent .video-thumbnails .bnp-preview-player video,
.single-talent .video-thumbnails .play-video {
  width: 50vw;
  height: 50vh;

} */

/* .single-talent .video-thumbnails {
  row-gap: 0;
  padding-bottom: 0;
  height: 100vh;
} */


/* .single-talent .video-thumbnails {
  padding-top: 0;
} */

/* .single-talent .featured-item-info {
  display: none;
} */

/* .single-talent .video-thumbnail.active .featured-item-info {
  display: block;
} */


/* .single-talent .play-video, */
.page-template-works .play-video {
  text-indent: -1000%;
  position: absolute;
  display: block;
  height: 23vw;
  z-index: 1;
}

/* .page-template-works .bnp-video-player,
.single-talent .bnp-video-player { */
.page-template-works .bnp-video-player {
  opacity: 0;
  /* display: none; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  width: 100vw;
  height: 100vh;
  transform: translateX(-100000vw);
  transition: opacity 0.5s ease-in-out;
}

/* .page-template-works .bnp-video-player.active,
.single-talent .bnp-video-player.active { */
.page-template-works .bnp-video-player.active {
  /* display: block; */
  opacity: 1;
  transform: none;
}

.bnp-video-player video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

body.activeVideo {
  overflow: hidden;
}

.video-thumbnails {
  overflow: hidden;
  /* padding-bottom: 5vh; */
}

/* FIX */
.talent-list {
  padding-top: 9.5rem;
  padding-left: 6rem;
  /* margin-left: 5vh; */
}

/* .single-talent h1 {
  position: fixed;
  top: 50vh;
  left: 4rem;
  transform: translate(0, -60%);
  padding: 0;
  line-height: 3.5rem;
} */

body.page-template-about-us {
  /* overflow: hidden; */
}

body.page-template-about-us main {
  padding: 8rem 2rem 0;
  /* text-transform: uppercase; */
  /* height: 100vh; */
  /* overflow: hidden; */
}

body.page-template-about-us main,
body.page-template-about-us h2 {
  font-size: 1.2rem !important;
}

body.page-template-about-us h2 {
  height: 5rem;
  line-height: 1.5rem;
  font-size: 1.5rem !important;
}

body.page-template-about-us ul {
  /* margin-bottom: 7rem; */
}

body.page-template-about-us li {
  margin-bottom: 0.5rem;
}


body.page-template-about-us main ul {}

body.page-template-about-us main .wp-block-column:nth-child(1) {
  max-width: 25vw;
  padding-right: 1rem;
}

body.page-template-about-us main .wp-block-column:nth-child(2) ul {
  columns: 2;
  /* Creates two columns */
  column-gap: 20px;
  /* Adjust gap between columns as needed */
  max-width: 25vw;
}


body.page-template-about-us main .wp-block-column:nth-child(2) ul li {
  break-inside: avoid;
  padding-right: 0.1rem !important;
  white-space: wrap;
}


/* 
.page-template-contact-us main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.page-template-contact-us main>* {
  display: block;
  margin-bottom: 7rem;
  text-align: center;
  line-height: 1.5rem;
}
.page-template-contact-us main p:last-of-type {
  margin-bottom: 0 !important;
}
.page-template-contact-us figure {
  margin-bottom: 0.3rem;
  max-width: 10rem;
  object-fit: cover;
}
.page-template-contact-us figure img {
 width: 100%;
 height: 100%;
}


body.page-template-about-us main .wp-block-column:nth-child(3) ul:nth-child(2) {
  margin-bottom: 7rem;
} */


/* ////////////////////// */

body.page-template-talents .bnp-preview-player video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.page-template-talents .talents-video-preview {
  width: 100%;
  height: 100%;

}

body.page-template-talents .bnp-preview-player {
  position: fixed;
  top: 0;
  left: 0;
  /* display: none; */


  /* object-fit: cover; */

  width: 100%;
  height: 100vh;
  height: 100svh;
  opacity: 0.4;

}

body.page-template-talents ul.talent-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

body.page-template-talents ul.talent-list-urls {
  position: absolute;
  top: 0;
  left: 50vw !important;
  z-index: 1;
}


@media only screen and (max-width: 767px) {

  body.page-template-talents ul.talent-list,
  body.page-template-talents ul.talent-list-urls {
    position: unset;
    inset: unset;
  }

}



/* remove black bars */

@media screen and (orientation: landscape) {
  body.page-template-works .video-thumbnails {
    row-gap: 0;
  }

  body.page-template-works .video-thumbnail {
    position: relative;
  }

  body.page-template-works a.featured-item-info {
    /* display: none; */
    position: absolute;
    z-index: 2;
    bottom: 0;
  }

  .page-template-works .play-video {
    height: 20vw;
  }

}

.pagination {
  padding: 2rem 0;
  text-align: center;
}

.pagination a {
  padding: 0 0.25rem;
  color: #fff;
  font-size: 1.5rem;
}
.pagination a.current-page {
  font-weight:300;
  color: #868686;
  pointer-events: none;
}
.pagination a:hover {
  color: red;
}

.hidden video {
  display: none;
}

.zzz {
  border:1px solid red;
}



.loadingIndicator {
  display: none;
  position: absolute;
  top: 20%;
  left: 40%;
  border: 3px solid grey; /* Light grey background */
  border-top: 3px solid #fff; /* Blue color for the spinner */
  border-radius: 50%; /* Circular shape */
  width: 50px; /* Size of the loader */
  height: 50px; /* Size of the loader */
  animation: spin 2s linear infinite; /* Animation applied to the loader */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.page-template-about-us p {
  margin-bottom: 2rem;
  line-height: 1.75rem;
  letter-spacing: .15rem;
}

/* body.page-template-about-us main .wp-block-column:nth-child(1) h2 {
  margin-top: 5rem;

} */
/* #end */

.talent-list li .last-name,
body.home .client-name,
.single-talent .client-name
{
  font-weight: 700;
}

.talent-list li a {
  /* font-size: 1.8rem; */
  display: inline-block;
  transition: transform 0.2s ease;
}

.talent-list li a:hover {
  transform: scale(1.08);
}




@media screen and (orientation: portrait) {
  body.page-template-about-us h2 {
    height: auto;
    margin-bottom: 1rem;
  }

  body.page-template-about-us main .wp-block-column ul {
    margin-bottom: 4rem;
  }

  body.page-template-about-us main .wp-block-column:nth-child(2) ul {
    columns: 1;
    /* Creates two columns */
    max-width: none;
  }

  /* .single-talent h1 {
    left: 2rem;
    white-space: wrap;
  } */

  .page-template-works .video-thumbnails h2 span {
    font-size: 0.75rem !important;
  }

  .page-template-works .video-thumbnails h2 {
    font-size: 0.75rem !important;
    line-height: 1rem !important;

  }

  /* Your CSS rules here */
  .bnp-video-player video {
    width: 100vw !important;
    object-fit: contain !important;
  }

  .bnp-preview-player video {
    object-fit: cover;
  }

  body.home .talent-name,
  body.home .client-name,
  body.single-talent .talent-name,
  body.single-talent .client-name {
    font-size: 2rem;
  }

  body.home .for-agency,
  body.single-talent .for-agency {
    margin-top: 2rem;
  }



  /* .page-template-works .video-thumbnails,
  .single-talent .video-thumbnails { */
  .page-template-works .video-thumbnails {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* .single-talent .video-thumbnails {
    height: 100vh;
  } */

  .page-template-works .bnp-preview-player,
  .page-template-works .bnp-preview-player video,
  .page-template-works .play-video {
  /* .single-talent .bnp-preview-player,
  .single-talent .bnp-preview-player video,
  .single-talent .play-video { */
    width: 50vw;
    height: 30vw;
    object-fit: cover;
  }

  body.page-template-about-us .wp-block-column p {
    margin-right:5vw;
    margin-bottom: 2em;
  }

  /* Target the wp-block-columns wrapper */
  .wp-block-columns {
      display: block; /* Change display from flex to block */
  }

  /* Ensure each column stacks vertically */
  .wp-block-column {
      max-width: 90vw !important; /* Make each column take the full width */
      display: block; /* Ensure the column itself is a block element */
  }


}

@media screen and (max-height: 399px) {
  body.home #scroll-container h2 {
    margin-bottom: 0.2em;
  }

  /* Target the wp-block-columns wrapper */
  .wp-block-columns {
      display: block; /* Change display from flex to block */
  }

  /* Ensure each column stacks vertically */
  .wp-block-column {
      max-width: 90vw !important; /* Make each column take the full width */
      display: block; /* Ensure the column itself is a block element */
  }


  body.home .talent-name,
  body.home .client-name {
    font-size: 2rem;
  }

  body.home .for-agency {
    margin-top: 1rem;
    /* font-size: 1.5rem; */
  }
}


/* black bg behind menu if smartphone */
@media screen and (max-height: 399px) {

  .page-template-works ul#menu,
  .single-talent ul#menu {
    width: auto;
    background-color: black;
  }
}

@media screen and (max-width: 399px) {

  .page-template-works ul#menu,
  .single-talent ul#menu {
    width: auto;
    background-color: black;
  }
}

/* end black bg behind menu if smartphone */

/* smartphones in landscape */
@media (max-width: 768px) and (orientation: landscape) {



  body.page-template-about-us main h2 {
    height: auto;
    margin-bottom: 1.5rem;
  }

  body.page-template-about-us main .wp-block-column ul {
    margin-bottom: 4rem;
  }

  body.page-template-about-us main .wp-block-column:nth-child(2) ul {
    max-width: none;
    columns: 1;
  }
}


body.home, body.single-talent {
  overscroll-behavior: none;
}

body.home .scroll-container,
body.single-talent .scroll-container,
{
  overscroll-behavior: contain;
}


/* apple mouse */

/* The container that scrolls */
#scroll-container {
  height: 100vh;                 /* full screen */
  overflow-y: auto;
  scroll-snap-type: y mandatory; /* snap vertically */
  overscroll-behavior: contain;  /* stop rubber-band chaining */
}

/* Each “page” / section */
.scroll-area {
  height: 100vh;                 /* each area = 1 viewport */
  scroll-snap-align: start;      /* snap so it starts at top */
}

/* When you want to lock scrolling (you already use this) */
#scroll-container.my-noscroll {
  overflow: hidden;
}


body.page-template main {
  padding-top: 12vh !important;
}

body.page-template-contact-us main {
  padding-top: 15vh !important;
}

body.page-template ul {
  list-style-type: square;
  margin-left: 1.5rem;
}

body.page-template-talents ul {
  list-style-type: none;
}

/* =========================
   NEWS (ARCHIVE + SINGLE)
   Extends your existing archive-only rules to single news pages too.
   Single news body class is typically: body.single-news
   ========================= */

/* Layout */
body.archive.post-type-archive.post-type-archive-news #main.site-main,
body.single-news #main.site-main,
body.page #main.site-main,
body.archive.post-type-archive.post-type-archive-news #main.site-main,
body.single-news #main.site-main {
  padding-top: 8vh;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom:5vh;

  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  letter-spacing: 0.08rem;
}

/* Kill uppercase */
body.archive.post-type-archive.post-type-archive-news #main.site-main,
body.archive.post-type-archive.post-type-archive-news #main.site-main *,
body.single-news #main.site-main,
body.single-news #main.site-main * {
  /* text-transform: none !important; */
}

/* Page title (archive H1) + single post title (often H1) */
body.archive.post-type-archive.post-type-archive-news #main.site-main > h1,
body.single-news #main.site-main > h1 {
  font-size: 2.75rem;
  font-weight: 200;
  line-height: 1.1;
  margin: 0 0 2.5rem 0;
}

/* Divider at top of items (archive) + divider at top of single content */
body.archive.post-type-archive.post-type-archive-news .news-item,
body.single-news .news-single
{
  border-top: 1px solid rgb(110, 110, 110);
  padding-top: 1.5rem;
}
body.single-news article {
  margin-top: 2rem;
}
/* Keep archive item spacing */
body.archive.post-type-archive.post-type-archive-news .news-item {
  margin: 0 0 5rem 0;
  padding-top: 1.5rem;
}

/* Single page spacing so border doesn't touch header */
/* body.single-news #main.site-main {
  padding-top: calc(10vh + 1.5rem);
} */

/* Featured image wrapper */
body.archive.post-type-archive.post-type-archive-news .news-thumb,
body.single-news .news-thumb,
body.single-news .news-single-thumb,
body.single-news .post-thumbnail {
  display: block;
  width: 100%;
  margin: 0 0 1rem 0;
}

/* Featured image */
body.archive.post-type-archive.post-type-archive-news .news-thumb img,
body.single-news .news-thumb img,
body.single-news .news-single-thumb img,
body.single-news .post-thumbnail img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  margin: 0 0 1rem 0;
}

/* Title (archive uses .news-title h2; single may use h1 or theme defaults) */
body.archive.post-type-archive.post-type-archive-news .news-title,
body.single-news .news-single-title,
body.single-news h2.news-title {
  font-size: 1.9rem;
  font-weight: 200;
  line-height: 1.15;
  margin: 0 0 0.6rem 0;
  letter-spacing: 0.12rem;
}

body.archive.post-type-archive.post-type-archive-news .news-title a,
body.single-news .news-title a {
  color: #fff;
}

body.archive.post-type-archive.post-type-archive-news .news-title a:hover,
body.single-news .news-title a:hover {
  color: red;
}

/* Date/meta */
body.archive.post-type-archive.post-type-archive-news .news-meta,
body.single-news .news-meta,
body.single-news .news-single-meta,
body.single-news .entry-meta {
  font-size: 1.05rem;
  font-weight: 200;
  letter-spacing: 0.08rem;
  margin: 0 0 1rem 0;
  opacity: 0.85;
}

/* Body text: archive paragraphs in .news-item, plus single content paragraphs */
body.archive.post-type-archive.post-type-archive-news .news-item p,
body.single-news #main.site-main p {
  font-size: 1.15rem;
  line-height: 1.7rem;
  letter-spacing: 0.08rem;
  margin: 0 0 1rem 0;
  max-width: 70ch;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Last paragraph spacing */
body.archive.post-type-archive.post-type-archive-news .news-item p:last-child,
body.single-news #main.site-main p:last-child {
  margin-bottom: 0;
}

/* Pagination: archive only (single usually doesn't paginate list) */
body.archive.post-type-archive.post-type-archive-news .navigation.pagination,
body.archive.post-type-archive.post-type-archive-news .pagination,
body.archive.post-type-archive.post-type-archive-news .nav-links {
  padding: 2rem 0;
  text-align: center;
}

body.archive.post-type-archive.post-type-archive-news .page-numbers,
body.archive.post-type-archive.post-type-archive-news .nav-links a {
  padding: 0 0.25rem;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
}

body.archive.post-type-archive.post-type-archive-news .page-numbers.current {
  font-weight: 300;
  color: #868686;
  pointer-events: none;
}

body.archive.post-type-archive.post-type-archive-news .page-numbers:hover,
body.archive.post-type-archive.post-type-archive-news .nav-links a:hover {
  color: red;
}


.single-talent-name {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100vw;
  text-align: center;
  z-index: 1;
  font-size: 1.4rem;
}



/* #end */


/* Responsive tweaks */
@media screen and (orientation: portrait) {
  body.archive.post-type-archive.post-type-archive-news #main.site-main > h1,
  body.single-news #main.site-main > h1 {
    font-size: 2.2rem;
  }

  body.archive.post-type-archive.post-type-archive-news .news-title,
  body.single-news .news-title,
  body.single-news h2.news-title {
    font-size: 1.6rem;
  }

  body.archive.post-type-archive.post-type-archive-news .news-item p,
  body.single-news #main.site-main p {
    font-size: 1.05rem;
    line-height: 1.6rem;
  }
}

.more-link, .read_more_external, .back-to-news {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.4;

  font-family: "formulaCondensed", sans-serif;
}
.more-link:hover {
  color: red;
}
.more-link span {
  display:none;
}
.read_more_external {

  padding-right: 1.75rem; /* space for icon */

  background-image: url("images/icons8-external-link-24.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.4rem 1.4rem;

  text-decoration: none;
}

body.page-template-talents .read_more_external {
  background-size: 1rem 1rem;
}

/* Retina / HiDPI (2x) */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .read_more_external {
    background-image: url("images/icons8-external-link-48.png");
  }
}

/* Retina / HiDPI (3x) */
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi) {
  .read_more_external {
    background-image: url("images/icons8-external-link-96.png");
  }
}



/* CONTACT PAGE: contact rows */
body.page-template-contact-us .wp-block-group,
body.page-template-contact-us .wp-block-group p,
body.page-template-contact-us .wp-block-group strong,
body.page-template-contact-us .wp-block-group .wp-block-column {
  text-align: left;
}

/* 3-column row: region / address / contacts */
body.page-template-contact-us .wp-block-group .wp-block-columns {
  display: grid;
  grid-template-columns: 110px minmax(260px, 360px) minmax(320px, 1fr);
  column-gap: 28px;
  align-items: start;
  justify-items: start;
  margin: 0 0 56px 0;
}

/* neutralize flex leftovers */
body.page-template-contact-us .wp-block-group .wp-block-columns.is-layout-flex {
  gap: 0;
}

body.page-template-contact-us .wp-block-group .wp-block-column {
  width: auto;
  flex: none;
  margin: 0;
}

/* Region label style */
body.page-template-contact-us .wp-block-group .wp-block-column:first-child strong {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Paragraph spacing */
body.page-template-contact-us .wp-block-group .wp-block-column p {
  margin: 0 0 12px 0;
  line-height: 1.35;
}
body.page-template-contact-us .wp-block-group .wp-block-column p:last-child {
  margin-bottom: 0;
}

/* Last column: make the two <p> blocks into two columns */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(3) {
  display: grid;
  grid-template-columns: minmax(140px, 170px) 1fr; /* narrower left col */
  column-gap: 8px;                                 /* smaller gap */
  align-items: start;
}

/* Remove margins inside the 3rd column grid */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(3) p {
  margin: 0;
  margin-bottom: 4rem;
}

/* Prevent ugly email/phone breaking */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(3) p:nth-of-type(2) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Address can wrap normally */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(2) p {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(2) {
  padding-right: 5vw;
}


/* Control the 3-column layout */
body.page-template-contact-us .wp-block-group .wp-block-columns {
  display: grid;

  /* column widths */
  grid-template-columns: 150px 400px 1fr;

  /* gap between columns */
  column-gap: 20px;
}

/* First column (Region: ASIA / GLOBAL) */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(1) {
  padding-right: 10px;
}

/* Second column (Address) */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(2) {
  padding-right: 25px;
}

/* Third column (Contacts) */
body.page-template-contact-us
.wp-block-columns > .wp-block-column:nth-child(3) {
  padding-left: 10px;
}



/* Mobile: stack */
@media (max-width: 768px) {
  body.page-template-contact-us .wp-block-group .wp-block-columns {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  body.page-template-contact-us
  .wp-block-columns > .wp-block-column:nth-child(3) {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  body.page-template-contact-us
  .wp-block-columns > .wp-block-column:nth-child(3) p:nth-of-type(2) {
    white-space: normal;
  }
}



body.page-template-contact-us
.wp-block-columns strong {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem !important;
} 

body.page-template-about-us h2, body.page-template-contact-us h2 {
  font-size: 1.5rem !important;
  font-weight: 700;
}