:root  {
    
    --smooth: 0.75s cubic-bezier(0.5, 0, 0, 1);
    --smoothQuicker: 0.5s cubic-bezier(0.5, 0, 0, 1);
    --darkGrey: #40474D;
    --grey: #5C6770;
    --orange: #FF6B01;
    
}


* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html 	{scroll-behavior: smooth;}
body 	{line-height:1; background-color: #FFEEE2; font-family: futura-pt, sans-serif;}

h1		{font-size: 58px; font-family: questa-grande, serif; color: var(--darkGrey); margin-bottom: 0.5em}
h2		{font-size: 30px; font-family: questa-grande, serif; color: var(--darkGrey); margin-bottom: 0.5em}
h3		{font-family: questa-grande, serif; color: var(--darkGrey);}
h4		{font-family: questa-grande, serif; color: var(--darkGrey);}
h5		{font-family: questa-grande, serif; color: var(--darkGrey);}
h6		{font-family: questa-grande, serif; color: var(--darkGrey);}

p.tag   {text-transform: uppercase; font-family: futura-pt-condensed, sans-serif; font-size: 22px; color: var(--orange); margin-bottom: 0.85em; font-weight: 700}

p		{font-size: 22px; color: var(--grey); line-height: 1.4em}

ul,
ol		{}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner  {width:1300px; max-width:100%; margin:0 auto; padding: 0 30px; position: relative; z-index: 6}

/* COLS */
.cols           {display: flex;}
.cols.wrap      {flex-wrap: wrap}
.col.span-2     {width: 50%;}

/* HEADER */
header 			      {padding: 15px 0; position: sticky; top: 0; z-index: 99; background-color: #FFEEE2; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);}
header .inner 	      {display: flex; justify-content: space-between; align-items: center}

header.hide-header    {transform: translateY(-100%); visibility: hidden; opacity: 0;}

.logo           {width: 55px; height: auto; display: block; font-size: 0;}

/* NAV */
nav		            {font-family: questa-grande, serif;}
nav ul	            {display: flex; font-size: 20px;}
nav ul li           {margin-left: 25px;}
nav ul li a         {color: var(--darkGrey); text-decoration: none; position: relative; display: block; padding: 10px 0 12px; transition: var(--smoothQuicker);}
nav ul li a:hover   {color:var(--orange); transform: translateY(-3px)}
nav ul li.active a  {color: var(--orange)}

nav ul li a:before,  
nav ul li a:after    {width: 0%; position: absolute; bottom: 0; left: 0; transition: var(--smoothQuicker); content: ''; border-top:1.5px dashed var(--orange); opacity: 0}

nav ul li a:before  {top: 0; left: auto; right: 0}

nav ul li:hover a:before, 
nav ul li:hover a:after    {width: 100%; opacity: 1}

/* HOME ICON */
.home .home-icon    {display: none}

.home-icon          {position: fixed; z-index: 99; left: 0; top: 100px; border-radius: 0 10px 10px 0; padding: 5px; background-color: var(--orange); transition: var(--smooth); font-size: 0}
.home-icon svg      {width: 25px; height: auto; transition: var(--smooth)}
.home-icon:hover    {background-color: var(--darkGrey)}
.home-icon:hover svg    {transform: rotate(90deg)}

/* HOME HERO */
.home-hero                      {font-size: 0; position: relative;}
.video-wrapper video            {width: 100%; height: auto; cursor: url(/_uploads/_assets/volume-off.svg), auto;}
.video-wrapper.unmuted video    {cursor: url(/_uploads/_assets/volume-on.svg), auto;}

/* HOME INTRO SECTION */
.home-what-we-do,
.home-intro-section,
.home-recent-projects       {min-height: 100vh; padding: 100px 0; position: relative; display: flex; align-items: center}
.home-intro-section .inner  {display: flex; align-items: center; height: 100%;}
.home-intro-text            {width: 785px; max-width: 100%; position: relative; z-index: 5}
.home-intro-text p          {width: 600px; max-width: 100%;}

.home-intro-section     {z-index: 10}

.tvn-repeater           {position: absolute; right: 0; top: 0; width: 50%; height: 100%; background-image: url(/_uploads/_assets/the-vision-network-repeater.svg); background-position: left; opacity: 0.1}
.tvn-repeater:before    {position: absolute; top:0; left: 0; height: 100%; width: 100%; content: ''; background: rgb(255,238,226); background: linear-gradient(90deg, rgba(255,238,226,1) 0%, rgba(255,238,226,0) 100%);}

span.publishers     {font-family: "john-doe", sans-serif; color: #FFCA28}
span.brands         {font-family: "forgotten-futurist-shadow", sans-serif; color: #FFA15D; font-weight: normal}

/* WHAT WE DO */
.home-what-we-do                    {flex-direction: column; justify-content: center;}
.wwd-card                           {height: 550px; position: relative; display: flex; justify-content: center; align-items: center; text-decoration: none}
.card-image-container               {position: absolute; inset:0; overflow: hidden;}
.card-image                         {position: absolute; inset:0; background-size: cover; background-position: center; transition: var(--smooth);}
.wwd-card-text                      {position: relative; z-index: 5; backdrop-filter: blur(7px); background-color: rgba(0,0,0,0.25); padding:18px 0; min-width: 285px; text-align: center; border-radius: 40px; transition: var(--smooth);}
.wwd-card-text p                    {color: #ffffff; text-decoration: none; font-family: futura-pt-condensed, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 20px; letter-spacing: 1px;}
.wwd-carousel .slide                {margin:0 14px; opacity: 0.12; transition: var(--smooth);}
.wwd-carousel .slick-list           {overflow: visible}
.wwd-carousel .slide.slick-active   {opacity: 1;}
.wwd-carousel-container             {position: relative; width: calc(100% + 24px); margin-left: -12px;}

.project-card:hover .card-image,
.wwd-card:hover .card-image     {transform: scale(1.1);}

.wwd-card:hover .wwd-card-text  {transform: translateY(-10px); background-color: rgba(0,0,0,0.5); }

.slick-arrow        {position: absolute; width: 60px; height: 60px; background-image: url(/_uploads/_assets/slick-arrow.svg); background-size: cover; font-size: 0; background-color: transparent; top:50%; margin-top: -30px; left: -60px; z-index: 5; transition: var(--smooth);}
.slick-next         {left: auto; right: -60px;}
.slick-prev         {background-image: url(/_uploads/_assets/slick-arrow-prev.svg);}
.slick-next:hover   {transform: translateX(15px);}
.slick-prev:hover   {transform: translateX(-15px);}

.pullout-text           {padding-top: 40px; position: relative; z-index: 20; width: 100%;}
.pullout-text .inner    {display: flex; justify-content: flex-end}
.pullout-text-inner     {width: 700px; max-width: 100%; text-align: right;}

/* HOME PROJECTS LISTING */
.home-recent-projects               {align-items: flex-start; padding-bottom: 250px;}
.project-card                       {position: relative; text-decoration: none}
.project-card .card-image-container {position: relative; height: 280px;}
.project-card .card-image           {background-size: cover;}
.project-card p.tag                 {font-size: 18px; margin-bottom: 0.45em; transform: none !important; opacity: 1 !important}
.project-card h2                    {font-size: 29px;}
.project-card p                     {font-size: 18px;}
.project-card-text                  {padding:25px 15px 15px}
.cta-arrow                          {position: absolute; right: 20px; bottom: 20px; z-index: 5; fill: #ffffff; transition: var(--smooth);}

.project-card:hover .cta-arrow {transform: translateX(5px); fill:var(--orange);}

.home-recent-projects .col:nth-child(1) .project-card .card-image-container,
.home-recent-projects .col:nth-child(2) .project-card .card-image-container     {height: 470px;}

.home-recent-projects .cols                         {gap: 28px;}
.home-recent-projects .col                          {flex: 0 1 calc((100% - (2 * 28px)) / 3); /* 3 columns with 2 gaps of 28px */}
.home-recent-projects .col.span-2                   {flex: 0 0 calc((100% - (2 * 7px)) * 2 / 3); /* 2 columns worth of space, minus gaps */}
.home-recent-projects .col.span-2 .project-card p   {width: 530px; max-width: 100%;}

/* CLIENT LOGOS */
.client-logos                   {background-color: var(--darkGrey); padding:130px 0 100px 0; position: relative;}
.client-logos .cols             {gap: 28px; margin: 20px 0; justify-content: center}
.client-logos .cols .col        {flex: 0 1 calc((100% - (3 * 28px)) / 4); display: flex; justify-content: center; align-items: center; margin: 20px 0}
.client-logos .cols .col img    {/*max-height: 60px; width: auto*/ max-height: 75px; max-width: 200px;}

/* CATEGORY LISTING PAGE */
.category-listing               {padding: 100px 0 50px; overflow: hidden; position: relative;}
.category-listing .text-intro   {width: 925px; max-width: 100%; margin-bottom: 0;}

.category-listing .cols                         {gap: 28px;}
.category-listing .cols .col                    {flex: 0 1 calc((50% - 14px)); margin: 25px 0}
.category-listing .cols .col:nth-child(3n + 1)  {flex: 0 1 100%;}

.category-listing .cols .col .project-card .card-image-container    {padding-top: 65%; height: auto}

.category-listing .project-card h2                      {font-size: 40px; margin-bottom: 0.25em}
.category-listing .project-card p                       {font-size: 22px;}
.category-listing .cols .project-card-text              {padding: 30px; padding-bottom: 0}

.category-listing .cols .col:nth-child(3n + 1) .project-card-text       {position: absolute; bottom:30px; left: 0}
.category-listing .cols .col:nth-child(3n + 1) .project-card-text h2    {color:#ffffff}
.category-listing .cols .col:nth-child(3n + 1) .project-card-text p     {color:#ffffff}
.category-listing .cols .col:nth-child(3n + 1) .project-card .card-image-container  {padding-top: 50%; height: auto}
.category-listing .cols .col:nth-child(3n + 1) .project-card .card-image-container:after    {position: absolute; bottom:0; left: 0; height: 200px; width: 100%; content: ''; background: rgb(255,238,226); background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);}

/* PROJECT DETAIL PAGE */
.project-hero-container	{overflow: hidden;}
.project-hero			{padding-top: 56.5%; position: relative; overflow: hidden;}
.project-hero img,
.project-hero iframe	{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block}

.project-hero img   {animation:faderimage 2s ease-out 0.5s forwards; transform: scale(1.1); opacity: 0;}

@keyframes faderimage {

    to  {opacity: 1; transform: scale(1)}
    
}

.project-intro      {padding: 80px 0; width: 970px; max-width: 100%;}
.project-intro p    {margin-bottom: 1em;}
.project-intro h2   {margin-top: 1em}

.project-other-assets        {padding-bottom: 100px;}
.project-other-assets .cols  {gap: 28px;}
.project-other-assets .col   {flex: 0 1 calc((100% - (1 * 28px)) / 2);}

.other-content-container    {background-color: #ffffff; padding: 100px 0}
.other-content-container p.tag span {color: var(--darkGrey);}

.other-content-container .cols      {gap: 28px;}
.other-content-container .cols .col {flex: 0 1 calc((100% - (2 * 28px)) / 3);}
.other-content-container .project-card h2   {text-transform: capitalize}

.full-width-video-container {overflow: hidden;}
.full-width-video			{padding-top: 56.5%; position: relative;}
.full-width-video iframe	{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block}

body.square-videos  .full-width-video {padding-top: 100%;}

.project-intro .client-credits-container p { margin-bottom: 0; }
span.client-credits-label { font-weight: 700; }

/* CONTACT */
.contact                                        {padding: 100px 0}
.contact .cols                                  {justify-content: space-between}
.contact .cols .col                             {width: 50%;}
.contact .cols .col-contact-details             {width: 42%; display: flex; flex-direction: column; justify-content: space-between}
.contact .cols .col-contact-details p:not(.tag) {font-size: 18px;}
.contact .cols .col-contact-details p a:hover   {color:var(--orange);}
.contact .col-contact-details .cols             {margin: 20px 0; gap: 15px;}

.newsletter-sign-up        {margin-bottom: 76px;}
.newsletter-sign-up p.tag  {margin-bottom: 0.25em}

.nsu-box                    {border-radius: 40px; background-color: var(--darkGrey); overflow: hidden; position: relative; height: 60px; margin-top: 15px;}
.nsu-box input[type="text"] {position:absolute; inset:0; background-color: transparent; font-size: 20px; color: #ffffff;}
.nsu-box button             {position: absolute; right: 5px; top: 5px; margin: 0;}

/* FOOTER */
footer	        {background-color: var(--darkGrey); padding: 100px 0 85px}
footer .cols    {justify-content: space-between; margin-bottom: 40px;}
footer p        {color: #ffffff; font-size: 18px;}

.footer-left            {display: flex;}
.footer-left ul         {list-style: none; margin-right: 60px; font-size: 18px;}
.footer-left ul li      {margin-bottom: 15px;}
.footer-left ul li a    {color: #ffffff; text-decoration: none}

footer p a:hover,
.footer-left ul li a:hover  {color:var(--orange)}

.footer-right   {text-align: right;}

ul.social               {list-style: none; display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px;}
ul.social li            {}
ul.social li a          {width: 50px; height: 50px; display: flex; border:1px solid #ffffff; justify-content: center; align-items: center; border-radius: 50px; transition: var(--smooth)}
ul.social li a svg      {fill: var(--orange);}
ul.social li a:hover    {background-color: #ffffff}

/* TEXT PAGE */
.text-page .inner   {color: var(--grey); padding-top: 40px;}
.text-page p        {font-size: 18px; margin: 1em 0;}
.text-page h2       {font-size: 50px; margin: 1em 0;}
.text-page h3       {font-size: 40px; margin: 1em 0;}
.text-page h4       {font-size: 35px; margin: 1em 0;}
.text-page h5       {font-size: 30px; margin: 1em 0;}
.text-page h6       {font-size: 25px; margin: 1em 0;}

.text-page ol,
.text-page ul       {line-height: 1.4em; margin: 1em 0 1em 2em; font-size: 18px;}

.text-page ol li,
.text-page ul li    {margin-bottom: 0.5em}

/* BUTTONS */
.btn	            {font-family: futura-pt-condensed, sans-serif; font-size: 18px; text-transform: uppercase; font-weight: 700; padding:15px 30px 15px 30px; text-align: center; color: #ffffff; background-color: var(--orange); border-radius: 40px; text-decoration: none; display: inline-block; margin-top: 0.5em; overflow: hidden; position: relative;}
.btn span           {position: relative; transition: var(--smoothQuicker); display: block; z-index: 2}
.btn:after          {transform: scale(0); transition: var(--smoothQuicker); background-color: var(--darkGrey); position: absolute; inset:0; content: ''; border-radius: 40px; opacity: 0; transition: var(--smooth);}
.btn:hover:after    {transform: scale(1.1); opacity: 1}
.btn:hover          {}
.btn:hover span     {color: #ffffff}

/* FORM STYLES */
.form-container			{}
.form-row				{margin-bottom: 15px;}
.form-cell				{}

.form-field-error       {background: var(--orange); padding: 5px; color: #ffffff;}

textarea,
input[type="text"],
.form-cell select,
.form-cell select option      { font-size: 18px; color: var(--darkGrey); padding: 20px 30px; width: 100%; }
input[type="password"]	{}
input[type="submit"]	{}
textarea				{height: 210px;}

.form-cell .select-css                 { background-color: #fff; border-radius: 0; }
.form-cell select option:first-of-type { color: #bdbdbd; opacity: 1; font-family: futura-pt-condensed, sans-serif; }
.form-cell select.first-selected       { color: #bdbdbd; opacity: 1; font-family: futura-pt-condensed, sans-serif; }

::-webkit-input-placeholder     {color:#bdbdbd; font-family: futura-pt-condensed, sans-serif;}
::-moz-placeholder              {color:#bdbdbd; opacity:1; font-family: futura-pt-condensed, sans-serif;}
:-ms-input-placeholder          {color:#bdbdbd; font-family: futura-pt-condensed, sans-serif;}
:-moz-placeholder               {color:#bdbdbd; opacity:1; font-family: futura-pt-condensed, sans-serif;}


/* SELECT CSS */
.select-css				{}

/* HOME LOTTIES */
#lottieSun          {position: absolute; left: 50%; margin-left: -1800px; z-index: 6; bottom: -180px; width: 1640px; height: auto;}
#lottieHeart        {position: absolute; right: 50%; margin-right: -1850px; z-index: 4; top:50%; transform: translateY(-50%); width: 1640px; height: auto;}
#lottieBook         {position: absolute; left: 50%; margin-left: -1800px; z-index: 6; top: -150px; width: 1640px; height: auto;}
#lottiePlane        {position: absolute; left: 50%; margin-left: -1800px; z-index: 10; bottom: -100px; width: 1640px; height: auto;}
#lottiePhone        {position: absolute; right: 50%; margin-right: -1850px; z-index: 8; bottom:-210px; width: 1640px; height: auto;}
#lottieSpeechBubble {position: absolute; left: 50%; margin-left: -1850px; z-index: 10; top: -240px; width: 1640px; height: auto;}
#lottieTicket       {position: absolute; right: 50%; margin-right: -1850px; z-index: 8; top:-240px; width: 1540px; height: auto;}