:root {
    --nav-link-color: #fff; /* Default white */
}

html {
    scroll-padding-top: 64px !important;
}

/* header */
nav.navbar{
	height: 70px !important;
	padding: 9px 0 0 20px !important;
}

.inner-wrap{
	max-width: none !important;
	padding: 0;
}

img.custom-logo {
	max-width: 75px !important;
}

div.navbar-brand-wpz {
	padding: 0 !important;
}

/*main menu */
ul#menu-primary-navigation-1{
	text-transform: uppercase;
}

.navbar-nav > .current-menu-item a, .navbar-collapse.navbar-nav > .current_page_item a, .navbar-nav a {
	border-bottom-color: transparent !important;
}

.navbar-nav > li {
    margin: 7px !important;
}

.navbar-nav a {
	font-family: "Red Hat Text", sans-serif !important;
  font-size: 1em !important;
	font-
  font-weight: 600 !important;
  padding: 1px 0 0 0 !important;
}

div.entry-content{
	margin-top: 0 !important;
	padding: 0 !important;
}

span.child-arrow{
	display: none;
}

.menu-item-2349 a {
    color: var(--nav-link-color) !important; /* Forces color */
}

.side-nav #menu-item-2349 a{
    color: #ffffff !important;
}

/* hide submenu */
a.sf-with-ul::after{
	content: none !important;
}

.ad-submenu-item, .loc-submenu-item, .tko-submenu-item{
	display: none !important;
}

ul.sub-menu::before{
	display: none !important;
}

.navbar-nav ul{
	border-top: 0px !important;
}

/* takeovers subhead */
.tko-subhead {
	font-family: "Red Hat Text", sans-serif;
	text-transform: uppercase;
  white-space: nowrap;
  font-size: 1.15em;
  font-weight: 600;
  text-align: center;
	padding-top: 30px;
}

/* homepage photo grid */

.home-grid {
  display: flex;
  flex-direction: row;
	gap: 0px;
	width: 100vw;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.home-grid {
  flex-direction: column;
	}
}

.home-overlay{
	position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: "Red Hat Text", sans-serif;
	text-transform: uppercase;
  letter-spacing: 6px;
  white-space: nowrap;
  font-size: 1.68em;
  font-weight: 600;
  text-align: center;
  background-color: transparent;
  padding: 10px 20px;
  pointer-events: none;
}

/* home about section */
.about-tagline {
	font-family: "Red Hat Text", sans-serif;
  font-size: 2.25em;
  font-weight: 600;
  text-align: center;
	line-height: 1.25em;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    max-width: 1200px !important;
	  width: 100%;
    margin: 0 auto;
    gap: 50px;
    align-items: start;
}

a.ext-link-home{
	color: #000 !important;
	font-weight: 600;
}

.home-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5em; /* controls spacing between marker and text */
}

.custom-marker {
  color: black;
  font-size: 1.2em;
  line-height: 1;
}

/* Container for the grid */
/* Base styles for the main container */
.about-content1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 600px; /* Set a max width for large screens */
    margin: 0 auto;
}

/* Style for each row of images */
.about-row1,
.about-row2 {
    display: flex;
    gap: 20px;
    justify-content: space-between; /* Space the items out evenly */
    align-items: center;
}

/* Define the size for the first row's images */
.about-row1 div:nth-child(1) {
    flex-basis: 227px; /* 1st image in 1st row */
    height: auto;
}
.about-row1 div:nth-child(2) {
    flex-basis: 337px; /* 2nd image in 1st row */
    height: auto;
}

/* Define the size for the second row's images */
.about-row2 div:nth-child(1) {
    flex-basis: 334px; /* 1st image in 2nd row */
    height: auto;
}
.about-row2 div:nth-child(2) {
    flex-basis: 231px; /* 2nd image in 2nd row */
    height: auto;
}

/* Ensure images fill their containers without gaps */
.about-content1 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the container, cropping if necessary */
    display: block;
}


.about-content1, .about-content2 {
    width: 100%;
	  text-align: center;
}

@media (max-width: 1024px) {
    .about-container {
        grid-template-columns: 1fr;
    }
	  .about-content2{
	      padding: 0 25px;
	}
}

.home-rule {
	color: #aaa;
	width: 100% !important;
	border-bottom: 1px solid !important;
	max-width: 1200px !important;
	margin-bottom: 30px;
}

.content-pc-logo {
	text-align: center;
}

.about-text {
	text-align: left !important;
	font-family: "Red Hat Text", sans-serif;
  font-size: 1em;
  font-weight: normal;
	line-height: 1.25em;
}

.about-header {
	font-family: "Red Hat Text", sans-serif;
  font-size: 2.25em;
  font-weight: 600;
	line-height: 1.25em;
	text-transform: uppercase;
}

.home-list{
	text-align: left !important;
	font-family: "Red Hat Text", sans-serif;
  font-size: 1em;
  font-weight: normal;
	line-height: 1.25em;
}

.about-contact {
	font-family: "Red Hat Text", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
	line-height: 1.5em;
}

/* Base styles (mobile-first) */
.client-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers all images, including the last row */
    align-items: center;
    gap: 20px; /* Optional spacing between images */
    padding: 20px;
    max-width: 1400px !important; /* Set the maximum width of the grid */
    margin: 0 auto; /* Center the container horizontally on the page */
}

.client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.client-logo img {
    max-width: 100%;
    height: auto; /* Preserve aspect ratio */
    display: block;
}

/* Adjust column numbers for different screen sizes using media queries. */

/* For extra-small screens (1 column) */
@media (max-width: 480px) {
    .client-logo {
        flex-basis: 100%; /* 1 image per row */
    }
}

/* For small screens (2 columns) */
@media (min-width: 481px) and (max-width: 768px) {
    .client-logo {
        flex-basis: calc(50% - 20px); /* 2 images per row */
    }
}

/* For medium screens (4 columns) */
@media (min-width: 769px) and (max-width: 1200px) {
    .client-logo {
        flex-basis: calc(25% - 20px); /* 4 images per row */
    }
}

/* For largest screens (7 images per row) */
@media (min-width: 1201px) {
    .client-logo {
        flex-basis: calc(14.28% - 20px); /* 7 images per row (100/7 ≈ 14.28) */
    }
}


/* stuntboards */
/*
  Base styles for all screen sizes (mobile-first approach, 1 column).
*/
.stuntboards-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.stuntboards-column {
    display: block;
    aspect-ratio: 16 / 9; /* Set the aspect ratio for the column */
    overflow: hidden; 
    position: relative;
    background-color: #000;
}

.stuntboards-column img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.stuntboards-column:hover img{
  transition: transform 0.3s ease;
  transform: scale(1.05);
  filter: brightness(0.55);
}

.stuntboards-column:hover {
	background-color: #000;
}

/* 
  Media query for medium screens (tablets, 768px and up).
  Change to 2 columns.
*/
@media screen and (min-width: 768px) {
    .stuntboards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
  New media query for larger tablets and smaller desktops (992px to 1199px).
  This will create 3 columns.
*/
@media screen and (min-width: 992px) and (max-width: 1399px) {
    .stuntboards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 
  Media query for large screens (desktops, 1400px and up).
  Change to 4 columns.
*/
@media screen and (min-width: 1400px) {
    .stuntboards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* motion graphics*/
/* Base styles for all screen sizes (mobile-first approach) */
.motiongraphics-grid {
	  background-color: #000;
    display: flex;
    flex-direction: column;
}

.mg-left,
.mg-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

/* Images fill the width of their container and set the height based on their aspect ratio */
.mg-left a,
.mg-right a {
    display: block;
    width: 100%; /* Fill the container width on mobile */
    height: auto; /* Allow aspect ratio to control height */
    overflow: hidden;
}

.mg-left img,
.mg-right img {
    height: auto;
    width: 100%;
    /* This ensures the image always fills the container and maintains its aspect ratio */
    object-fit: cover;
    display: block;
}

/* Use specific widths for the images on small screens within their parent column */
.mg-left .mg-odd:nth-child(1),
.mg-right .mg-odd:nth-child(1) {
    width: 36%;
}

.mg-left .mg-even:nth-child(2),
.mg-right .mg-even:nth-child(2) {
    width: 64%;
}

.mg-left .mg-odd:nth-child(3),
.mg-right .mg-odd:nth-child(3) {
    width: 64%;
}

.mg-left .mg-even:nth-child(4),
.mg-right .mg-even:nth-child(4) {
    width: 36%;
}

    width: 64%;
}

.mg-left .mg-even:nth-child(4),
.mg-right .mg-even:nth-child(4) {
    width: 36%;
}

/*
  Media query for larger screens (e.g., desktops).
  Switch from a single column to a two-column layout.
*/
@media screen and (min-width: 1200px) {
    .motiongraphics-grid {
        display: grid; /* Use CSS Grid for the two-column layout */
        grid-template-columns: 1fr 1fr; /* Two equal-width columns */
        gap: 0; /* Remove any gaps between the columns */
    }
}

.mg-odd img, .mg-even img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.mg-odd:hover img, .mg-even:hover img{
  transition: transform 0.3s ease;
  transform: scale(1.05);
  filter: brightness(0.55);
}
.mg-odd:hover, .mg-even:hover {
	background-color: #000;
}

.mg-odd, .mg-even {
  position: relative;
}

.mg-odd::after, .mg-even::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  background-image: url('/wp-content/uploads/2025/09/noun-play-72018-FFFFFF.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
	opacity: 0.5;
}

/* takeovers */
.tko-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); /* Dynamic columns */
	gap: 0px;
	width: 100vw;
	margin: 0;
	padding: 0;
}

.tko-subhead {
	padding-right: 6px;
}


/* gallery pages */
div.fiv-inner-container {
	border: none !important;
	background-color: #000 !important;
}

.fg-item-inner {
	background-color: #fff !important;
}

.finishing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* Dynamic columns */
	gap: 0px;
	width: 100vw;
	margin: 0;
	padding: 0;
	background-color: #000;
}

@media (max-width: 885px) {
	.finishing-grid, .adaptive-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

@media (max-width: 375px) {
	.finishing-grid, .adaptive-grid, .tko-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.finishing-column{
	display: block;
	width: 100%;
	height: auto;
  overflow: hidden;
  position: relative;
}

.home-column, .adaptive-column, .localization-column, .tko-column {
	display: block; 
	width: 100% !important; 
	height: auto; 
	overflow: hidden; 
	position: relative;
	background-color: #000 !important;
}

.finishing-column:hover, .home-column:hover, .adaptive-column:hover, .localization-column:hover, .tko-column:hover {
	background-color: #000;
}

.finishing-column img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-column img, .adaptive-column img, .localization-column img, .tko-column img {
	width: 100%;
  height: 100%;
  object-fit: cover;
}

.finishing-column:hover img {
  filter: brightness(0.55);
}

.adaptive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* Dynamic columns */
	gap: 0px;
	width: 100vw;
	margin: 0;
	padding: 0;
}

.home-column img, .adaptive-column img, .localization-column img, .tko-column img {
  transition: transform 0.3s ease;
}

.home-column:hover img, .adaptive-column:hover img, .localization-column:hover img, .tko-column:hover img{
	transition-timing-function: ease;
  transform: scale(1.05);
  filter: brightness(0.55);
}

.localization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(313px, 1fr)); /* Dynamic columns */
	gap: 0px;
	width: 100vw;
	margin: 0;
	padding: 0;
}

@media (max-width: 1580px) {
	.localization-grid {
  grid-template-columns: repeat(auto-fit, minmax(261px, 1fr));
	}
}

@media (max-width: 1320px) {
	.localization-grid {
  grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
	}
}

@media (max-width: 451px) {
	.localization-grid {
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
	}
}

@media (max-width: 306px) {
	.localization-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}
}

/* localization videos */
.wp-block-video {
	margin: 0 !important;
	background-color: #000;
}

.wp-block-jetpack-layout-grid{
	background-color: #000;
}

.localizationcontent-grid {
  display: flex;
  flex-wrap: nowrap;
	gap: 3%;
	width: 100vw;
	margin: 0;
	padding: 0;
}

.localizationcontent-column {
	display: block; 
	width: 100% !important; 
	height: auto; 
	overflow: hidden; 
	position: relative;
}

/* gallery controls */
div.fiv-ctrls, .fiv-count {
		visibility: hidden;
		width: 240px;
    position: absolute !important;
    z-index: 999 !important;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
		border: 0 !important;
		background-color: transparent !important;
		color: #ffffff !important;
		font-family: "Red Hat Text", sans-serif;
		font-size: 2em;
		letter-spacing: 6px;
	  pointer-events: none;
}

div.fiv-prev, div.fiv-next, .fiv-count-current{
	display: none !important;
}

.fiv-count-total::after {
	content: ' IMAGES';
}

.fbx-light, .fbx-rounded, .fbx-close, .fbx-inner {
	background-color: transparent !important;
	border-color: none !important;
	border: 0 !important;
}

.fbx-inner-shadow{
	box-shadow: none;
	background-color: #444444 !important;
}

.hidden-text, .fbx-close svg, .fbx-next svg, .fbx-prev svg {
    display: none;
}

.fbx-close{
	display: inline-block;
	position: absolute !important;
  background: url(/wp-content/uploads/2025/05/CloseButton_21x22.svg) no-repeat center center;
  background-size: contain;
	top: 1.5% !important;
	right: 2% !important;
	left: auto !important;
	height: 21px !important;
	width: 21px !important;
	border-radius: 0 !important;
}

.fbx-next{
	display: inline-block;
  background: url(/wp-content/uploads/2025/05/RightArrows_48x76.svg) no-repeat center center;
  background-size: contain;
	margin: -50px 60px 0 0 !important;
	border-radius: 0 !important;
}

.fbx-prev{
	display: inline-block;
  background: url(/wp-content/uploads/2025/05/LeftArrows_48x76.svg) no-repeat center center;
  background-size: contain;
	margin: -50px 0 0 60px !important;
	border-radius: 0 !important;
}

a.fbx-prev, a.fbx-next{
	background-color: transparent !important;
}

.fbx-modal.fbx-phone .fbx-next {
	position: absolute !important;	   top: 45% !important;
	left: auto !important;
	right: 2% !important;
	width: 30px !important;
	height: 40px !important;
	margin: 0 !important;
}

.fbx-modal.fbx-phone .fbx-prev {
	position: absolute !important;	   top: 45% !important;
	left: 2% !important;
	width: 30px !important;
	height: 40px !important;
	margin: 0 !important;
}

.fbx-btn-shadow{
	 box-shadow: none !important;
}

.fbx-count {
  position: absolute;
  top: 34.65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff !important;
  font-size: 1.8em;
  font-family: "Red Hat Text", sans-serif;
  letter-spacing: 6px;
  white-space: nowrap;
  width: max-content;
}

.fbx-phone .fbx-count {
	top: 35% !important;
}

.fbx-modal.fbx-phone.fbx-portrait .fbx-close {
	left: auto !important;
	right: 2% !important;
}

.fbx-loader {
  display: none !important;
}

/* footer links */
p.copyright{
	color: #505050;
	font-size: 12px;
	line-height: 14px;
}

a.legal {
	color: #505050;
	font-weight: normal;
}

.site-info.site-info-style-8 {
	padding: 10px !important;
}

/* hide theme attribution */

p.designed-by{
	display: none !important;
}

/* hide meta on search results pages */

.entry-meta, .more_link.clearfix {
	display: none !important;
}