/*
Theme Name: FirstFrame Child
Theme URI: https://firstframe.qodeinteractive.com
Description: A child theme of FirstFrame
Author: Edge Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: firstframe
Template: firstframe
*/

@font-face {
  font-family: "Singolare";
  src: url("./assets/fonts/Singolare-UltraLight.woff2") format("woff2"),
  url("./assets/fonts/Singolare-UltraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Singolare";
  src: url("./assets/fonts/Singolare-Light.woff2") format("woff2"),
  url("./assets/fonts/Singolare-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Singolare";
  src: url("./assets/fonts/Singolare-Regular.woff2") format("woff2"),
  url("./assets/fonts/Singolare-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Singolare";
  src: url("./assets/fonts/Singolare-Bold.woff2") format("woff2"),
  url("./assets/fonts/Singolare-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Singolare";
  src: url("./assets/fonts/Singolare-Black.woff2") format("woff2"),
  url("./assets/fonts/Singolare-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Singolare Layers";
  src: url("./assets/fonts/SingolareLayers-One.woff2") format("woff2"),
  url("./assets/fonts/SingolareLayers-One.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Singolare Layers";
  src: url("./assets/fonts/SingolareLayers-Two.woff2") format("woff2"),
  url("./assets/fonts/SingolareLayers-Two.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Singolare Layers";
  src: url("./assets/fonts/SingolareLayers-Three.woff2") format("woff2"),
  url("./assets/fonts/SingolareLayers-Three.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Singolare Layers";
  src: url("./assets/fonts/SingolareLayers-Four.woff2") format("woff2"),
  url("./assets/fonts/SingolareLayers-Four.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Singolare Layers";
  src: url("./assets/fonts/SingolareLayers-Black.woff2") format("woff2"),
  url("./assets/fonts/SingolareLayers-Black.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "Singolare", sans-serif;
  font-weight: 300;
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Singolare", sans-serif;
  font-weight: 200;
}

.uppercase {
  text-transform: uppercase;
}

.text-layers {
  font-family: "Singolare Layers", sans-serif;
  font-weight: 200;
}

.text-footer-heading {
  font-family: "Singolare", sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-size: calc(20rem / 16);
  margin-bottom: 0.5em;
}

footer {
  border-top: 1px solid color-mix(in srgb, #dbdbdb, transparent 85%);
  padding: 80px 0;
  color: #dbdbdb;
}

.footer-logo-tagline {
  margin-top: 1rem;
}

.footer-social-nav {
  display: flex;
  gap: 0.5em;
  margin-top: 1rem;
}

.footer-social-nav .sc-icon {
  --icon-size: 1.5rem;
  width: var(--icon-size);
  height: var(--icon-size);
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-grid-item--logo {
  max-width: 160px;
}

@media only screen and (min-width: 1024px) {
  .footer-grid {
    gap: 5rem;
    grid-template-columns: 1fr 15% 20% 188px;
  }
}

/**
Theme overrides
 */
.qodef-image-gallery .qodef-play-button {
  width: calc(90rem / 16) !important;
  height: calc(90rem / 16) !important;
  top: 0;
  right: 0;
}

.qodef-e.qodef-image-wrapper.qodef-grid-item {
  padding-inline-end: calc(120rem / 16) !important;
}

.qodef-image-slider-holder.qodef-background-text
.qodef-text-marquee
.qodef-m-text-1,
.qodef-image-slider-holder.qodef-background-text
.qodef-text-marquee
.qodef-m-text-2,
.qodef-image-slider-holder.qodef-background-text
.qodef-text-marquee
.qodef-m-text-3,
.qodef-text-marquee .qodef-m-content {
  font-family: "Singolare Layers", sans-serif;
  font-weight: 200;
}

.qodef-image-slider-holder.qodef-background-text
.qodef-text-marquee
.qodef-m-separator {
  margin: 0;
  opacity: 0.15;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-image: url("./assets/images/icon-marquee.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  color: transparent !important;
  width: 100px;
  aspect-ratio: 1;
  -webkit-text-stroke: unset;
}


.qodef-text-marquee .qodef-m-content-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.qodef-image-slider-holder.qodef-background-text .qodef-text-marquee .qodef-m-text-1, .qodef-image-slider-holder.qodef-background-text .qodef-text-marquee .qodef-m-text-2, .qodef-image-slider-holder.qodef-background-text .qodef-text-marquee .qodef-m-text-3 {
  line-height: 1;
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
  opacity: 0.15;
}


/**
Header
 */

#qodef-page-header-inner {
  gap: calc(50rem / 16);
}

#qodef-page-header .qodef-header-logo-link {
  order: 2;
}

/**
About page
 */
#about-intro {
}

.logo-offset-image {
  position: relative;
}

.logo-offset-image::before {
  --offset-right: calc((100% - 1100px) / 2);
  content: "";
  display: block;
  top: 0;
  transform: translateY(-40%);
  right: var(--offset-right);
  width: 33%;
  max-width: 450px;
  aspect-ratio: 340/205;
  background-image: url("./assets/icons/stacked-logo.svg");
  background-repeat: no-repeat;
  position: absolute;
}

@media only screen and (min-width: 1441px) {
  .logo-offset-image::before {
    --offset-right: calc((100% - 1400px) / 2);
  }
}

.about-bios .qodef-m-title {
  font-family: "Singolare", sans-serif;
  font-weight: 200;
  color: #8fc064;
  font-size: calc(45rem / 16);
  line-height: 1;
  margin-bottom: 0.6em;
}

.qodef-portfolio-list.qodef-item-layout--info-on-hover
article
.qodef-e-content {
  padding: 1rem;
}

.portfolio-item .entry-title {
  font-size: calc(20rem / 16);
}

.portfolio-item .entry-title,
.portfolio-item .qodef-e-info > * {
  font-family: "Singolare", sans-serif;
  font-weight: 400;
  text-transform: none;
}

/**
Process
 */

.process-callouts .qodef-m-subtitle,
.process-intro .qodef-m-subtitle,
.wwd-intro .qodef-m-subtitle {
  color: #f93dae;
}

.process-section-quote {
  --e-con-grid-template-columns: 3fr 2fr !important;
}

.process-section-quote p {
  margin: 0;
  font-family: "Singolare", sans-serif;
  font-weight: 200;
  font-size: calc(18rem / 16);
  color: #dbdbdb;
}

.process-quote .qodef-m-text {
  color: #46cccc;
  text-transform: none;
  font-size: calc(36rem / 16);
}

/**
Partnership page
 */

.partner-grid h4 {
  font-size: calc(30rem / 16);
  color: #46cccc;
}

.partner-grid {
  padding: 0 !important;
  margin-bottom: -1px;
}

.partner-grid > * {
  border: 1px solid #272537;
  margin: -1px;
}

.partner-grid > *:nth-child(3n + 1) {
  border-left: none;
}

.partner-grid > *:nth-child(3n) {
  border-right: none;
}

.partner-grid .elementor-widget-text-editor:nth-child(2n) h4 {
  color: #8fc064;
}

.partner-grid p {
  font-family: "Singolare", sans-serif;
  font-weight: 400;
  color: #dbdbdb;
}

.qodef-portfolio-single .qodef-portfolio-info .qodef-e-label {
  font-family: "Singolare", sans-serif;
  color: #46cccc;
}

.qodef-portfolio-single .qodef-portfolio-info .qodef-e-label {
  margin-bottom: 0.25em;
}

.qodef-portfolio-single
.qodef-portfolio-info
.qodef-info--info-items
.qodef-e-info-item,
.qodef-portfolio-single
.qodef-portfolio-info
.qodef-info--category
.qodef-e-category
a,
.qodef-portfolio-single .qodef-portfolio-info a,
.qodef-portfolio-single .qodef-portfolio-info p {
  font-family: Singolare, sans-serif;
  line-height: 1.5;
}

/*.qodef-offset-image-wrapper img {*/
/*}*/

.fpo {
  padding: 1rem;
  border: 3px solid deeppink;
  color: deeppink;
}

/* Our Process header crop adjustment */
.page-id-3154 .qodef-page-title {
  background-position: 50% 25%;

}

/**
Custom cursor
 */

.no-touchevents:not(.elementor-html)
.qodef-custom-cursor-enabled.qodef-custom-cursor-circle
#qodef-custom-cursor-holder
.qodef-custom-cursor-circle {
  width: 55px;
  height: 35px;
  background-color: transparent;
  border-radius: 0;
  background-image: url("./assets/images/cursor-sm.svg");
  background-repeat: no-repeat;
  background-position: center center;
}

.portfolio-item-template-default .qodef-portfolio-title {
  font-size: calc(54rem / 16);
  font-weight: 600;
  color: #dbdbdb;
}

.portfolio-item-template-default .qodef-portfolio-content > p:first-child {
  font-size: calc(24rem / 16);
  color: #dbdbdb;
}

#qodef-portfolio-single-related-items .qodef-e-media .qodef-e-media-image {
  aspect-ratio: 1100 / 575;
  overflow: hidden;
}

#qodef-portfolio-single-related-items .qodef-e-media .qodef-e-media-image img {
  object-fit: contain;
}

.bts-marquee {
  opacity: 0.15;
}

.bts-marquee .qodef-m-separator {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-image: url("./assets/images/icon-white@2x.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 60%;
  color: transparent !important;
  -webkit-text-stroke: unset;
}

.qodef-team-list.qodef-item-layout--info-below
.qodef-e-image
.qodef-e-social-wrapper
.qodef-team-member-social-icons
> a {
  font-size: 24px;
}

.home-kicker {
  aspect-ratio: 3;
}


@media only screen and (min-width: 1024px) {
  .poster-slider .swiper-slide {
    max-width: 25vw;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hide "Year" and "Category" field from portfolio detail */
.qodef-e.qodef-info--date,
.qodef-e.qodef-info--category {
  display: none;
}

.qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in .qodef-e-content .qodef-e-bottom-holder {
  z-index: 10;
}

.qodef-button.qodef-layout--outlined.qodef-html--link {
  font-family: "Singolare", sans-serif;
  font-weight: 200;
  background-image: linear-gradient(to right, #8FC064, #1A6DED, #8247E1, #F93DAE, #FA8852);
  color: #fff;
  text-transform: uppercase;
  font-size: calc(24rem / 16);
  white-space: nowrap;
  padding: 1rem 2rem;
}

#qodef-page-mobile-header .qodef-mobile-header-logo-link {
  display: none;
}

@media screen and (min-width: 1024px) {
  #qodef-page-mobile-header .qodef-mobile-header-logo-link {
    display: block;
  }
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  justify-content: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  padding-inline: 30px;
}

.portfolio-filter {
  display: inline-flex;
}
.portfolio-filter + .portfolio-filter::before {
  content: '';
  position: relative;
  left: -0.5em;
  top: 15%;
  height: 70%;
  border-left: 1px solid #fff;
}

.portfolio-filter--active {
  font-weight: bold;
  color: var(--e-global-color-primary);
}

.qodef--awards {
  margin-block: 2em;
  display: grid;
  gap: 2em;
  align-items: center;
}

.qodef-e-award {
  max-width: 180px;
}