/*!
Theme Name: Lighthouse
Author: Jose Houdini
Author URI: https://josehoudini.es
Version: 2.0
*/


/* Reset CSS
==================================== */
*{
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body, div, span,
header, figure, figcaption, footer, section, article, aside, menu, nav,
h1, h2, h3, h4, h5, h6,
p, ol, ul, li, a, strong, b, i, s, address, sub, sup,
form, label,
iframe, embed, audio{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
::-webkit-scrollbar{
	display: none;
}
:focus{
	outline: none !important;
}
:focus::-ms-value{
	color: inherit;
	background-color: none;
}
::-moz-focus-inner{
	border: none !important;
}

button {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

/* Basic Styles
==================================== */
::selection{
	color: var(--cbg);
	background-color: rgba(0,0,0,.99);
}
html{
	font-size: 12px;
	scrollbar-width: none;
}
body{
	width: 100vw;
	height: 100%;
	margin: auto;
	font-family: var(--font);
	font-variant-ligatures: discretionary-ligatures;
	-webkit-text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
			 font-smoothing: antialiased;
	font-size: var(--fs);
	font-style: normal;
	font-weight: normal;
	line-height: var(--lh);
	color: var(--ctext);
	background-color: var(--cbg);
	overflow-x: hidden;
}
img,
video {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 0;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  filter: none;
  transition: filter var(--speed) linear;
  transform: translate3d(0, 0, 0);
}

.lazy {
  width: auto;
  height: 100%;
  width: 100%;
  filter: blur(10px);
}

video.no-autoplay{
	pointer-events: none;
}

a{
	width: fit-content;
	width: -moz-fit-content;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: filter .3s linear;
}

a:hover{
	filter: drop-shadow(0px 0px 5px var(--cbg));
}

li{
	list-style: none;
}

h1, h2{
	text-align: center;
}

main{
	min-height: var(--h);
	padding: var(--menu) var(--msmall) var(--msmall);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--mbig) var(--msmall);
	grid-auto-rows: max-content;
}

section{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--mbig) var(--msmall);
	grid-auto-rows: max-content;
}

input{
	opacity: 1;
	appearance: none;
	background-color: transparent;
	color: var(--cbg);
	border: none;
	text-align: center;
	padding: 0;
	width: 100%;
}

input::placeholder{
	color: var(--cbg);
	opacity: 1;
}

form{
	appearance: none;
}

.sticky{
	position: sticky;
	top: var(--menu);
	z-index: 1;
}

.full-width{
	width: 100%;
	grid-column: span 12;
}

.two-col{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--msmall);
}

.gradient-black-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	height: var(--menu);
	width: 100vw;
	z-index: 3;
	background: linear-gradient(to top, var(--ctext), rgba(0,0,0,0));
}

.gradient-white-top{
	position: fixed;
	top: 0;
	left: 0;
	height: var(--menu);
	width: 100vw;
	z-index: 3;
	background: linear-gradient(to bottom, var(--cbg), rgba(0,0,0,0));
}

.gradient-white-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	height: var(--menu);
	width: 100vw;
	z-index: 3;
	background: linear-gradient(to top, var(--cbg), rgba(0,0,0,0));
}

#loader{
	background-color: var(--cbg);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100%;
	overflow-y: hidden;
	touch-action: none;
	z-index: 999;
	pointer-events: none;
}

body:hover + .cursor {
	display: block;
}

.cursor{
	position: absolute;
	display:none;
	mix-blend-mode: soft-light;
	pointer-events: none;
	width: 200px;
	height: 200px;
	/* background: radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(255,255,255,0.1) 100%); */
	background-image: radial-gradient( circle,rgba(255, 255, 255, 0.85) 20%, transparent 60%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

.hidden{
	filter: blur(10px);
}

/* Fonts
==================================== */
@font-face {
    font-family: 'Agentur-Regular';
    src: url('../lighthouse/fonts/Agentur-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'SaolText-Regular';
    src: url('../lighthouse/fonts/SaolText-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'SaolText-RegularItalic';
    src: url('../lighthouse/fonts/SaolText-RegularItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.xl{
	font-family: 'Agentur-Regular';
	font-size: var(--fsl);
	text-transform: uppercase;
	line-height: 80%;
	letter-spacing: -0.5rem;
}

.m{
	font-family: 'SaolText-Regular';
	font-size: var(--fsm);
	line-height: 120%;
}

.m p{
	margin-bottom: var(--fsm);
}

.italic, em{
	font-family: 'SaolText-RegularItalic';
	font-style: normal;
}

/* Header
==================================== */
header{
	width: 100vw;
	position: fixed;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0);
	transition: all var(--speed) ease-in-out;
}

.menu{
	padding: var(--msmall);
	display: grid;
    grid-template-columns: max-content 1fr max-content;
    justify-items: center;
}

.invert{
	color:var(--cbg);
}

.invert .bar{
	background-color: var(--cbg);
}

.menu-toggle {
	width: var(--mbig);
	height: var(--mbig);
	display: flex;
	flex-direction: column;
	justify-content:space-around;
	cursor: pointer;
}

.active-header{
	background-color: rgba(0, 0, 0, .8);
	color: var(--cbg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.active-header .bar{
	background-color: var(--cbg);
}

.menu-content{
	padding: 0 var(--msmall) var(--msmall);
	z-index: 1;
	height: calc(var(--h) - var(--menu));
	justify-content: space-between;
}

.menu-content, #menu-top, #menu-bottom{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.menu-row{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	align-items: end;
	padding: 0;
}

.menu-row a{
	filter: none;
	overflow: hidden;
}

.menu-row a:hover{
	filter: drop-shadow(0px 0px 5px var(--cbg));
}

.menu-row:nth-child(odd) img, .menu-row:nth-child(odd) video{
	justify-self: end;
}

.menu-row:nth-child(even) .menu-counter{
	justify-self: end;
}

.menu-row img, .menu-row video{
	width: auto;
	height: 8rem;
}

.menu-link{
	justify-self: center;
}

.bar {
	width: 100%;
	height: 1px;
	background-color: var(--ctext);
	transition: transform 0.3s ease;
}

.bar:nth-child(1) {
	transform-origin: top;
}
  
.bar:nth-child(2) {
	transform-origin: bottom;
}

.menu-toggle.active-toggle{
	justify-content: center;
}

.menu-toggle.active-toggle .bar:nth-child(1) {
	transform: translateY(50%) rotate(45deg);
}

.menu-toggle.active-toggle .bar:nth-child(2) {
	transform: translateY(-50%) rotate(-45deg);
}

/* Homepage
==================================== */
#homepage{
	padding: 0;
	display: block;
}

.logotype{
	position: absolute;
	top: calc(0px - var(--menu));
	z-index: 3;
	width: 100vw;
	height: max-content;
}

.home-slider{
	position: relative;
	height: var(--h);
	width: 100vw;
	overflow: hidden;
	margin-top: var(--negative);
}

.slide-inner{
	display: flex;
    width: 100%;
    height: 100%;
}

.slide-inner img, .slide-inner video{
	object-fit: cover;
}

.margin{
	padding: 8rem;
}

.margin img, .margin video{
	object-fit: contain;
}

.slider-data{
	position: absolute;
    bottom: 0;
    padding: var(--mbig);
    width: 100%;
    display: flex;
    justify-content: space-between;
	align-items: end;
}

.slideTitle{
	text-align: center;
}

.message{
	width: 100vw;
	padding: var(--msmall) 0;
    background-color: var(--cbg);
    filter: var(--shadow);
	overflow: hidden;
}

.message p{
	margin: 0;
}

.featured-projects-row{
	display: grid;
	padding: 0 var(--msmall);
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-gap: var(--msmall);
}

.featured-projects-row .thumbnail-image{
	aspect-ratio: 4 / 5;
	height: auto;
}

.smallabout{
	padding: 0 var(--msmall);
}

.highlights{
	width: 100vw;
}

.highlight{
	padding: var(--mbig) 0;
	text-align: center;
}

.highlight-gallery{
	padding: var(--msmall) 0;
	display: inline-flex;	
    height: 50vh;
    width: 100%;
    overflow: scroll;
	-ms-overflow-style: none;
    scrollbar-width: none;
}

.highlight-gallery img:first-child{
	margin-left: var(--msmall);
}

.highlight-gallery img, .highlight-gallery video{
	height: 100%;
	width: auto;
	margin-right: var(--msmall);
}

.highlights{
	counter-reset: hl;
}

.highlight-actual::after{
	counter-increment: hl;
	content: counters(hl, ".", decimal-leading-zero);
}

.highlight-credits{
	display: flex;
	flex-flow: wrap;
    justify-content: center;
}

/* Production
==================================== */
.projects-row{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--msmall);
	margin-bottom: var(--mbig);
}

.thumb-module{
	text-align: center;
	width: 100%;
	display: grid;
}

.thumb-module:hover .thumbnail-image{
	filter: var(--shadow);
}

.thumb-module h3{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.one-column{
	grid-column: span 1;
}

.double-column{
	grid-template-rows: max-content;
	grid-column: span 2;
}

.double-column .thumbnail-image{
	height: 100%;
	padding-bottom: initial;
}

.thumb-infos{
    overflow: hidden;
    max-width: 100%;
}

.thumbnail-image{
	height: 0;
 	padding-bottom: 125%; /* Set the height to 1.25 times the width */
  	position: relative;
	overflow: hidden;
	transition: all var(--speed) linear;
}

.thumbnail-image img, .thumbnail-image video{
	position: absolute;
 	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
}

/* Talents
==================================== */
#talents .thumb-module, #talent .thumb-module{
	grid-column: span 3;
}

.project-filters{
	display: flex;
	justify-content: center;
}

.cat-trigger{
	padding: 0 var(--mbig);
	text-transform: lowercase;
	cursor: pointer;
}

.cat-trigger.active{
	font-family: var(--font);
}

/* About
==================================== */
#about, #manifesto, #contact{
	background-color: var(--ctext);
	color: var(--cbg);
}

#about{
	display: grid;
	grid-template-rows: max-content 1fr max-content;
}

.about-module{
	text-align: center;
	grid-column: 2 / span 10;
}

.text-big, .client-list{
	margin: var(--mbig) 0;
}

.client-list{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 0 var(--msmall);
}

.credits{
	text-align: center;
}

/* Manifesto
==================================== */
#manifesto{
	height: var(--h);
	overflow: scroll;
}

/* Contact
==================================== */
#contact{
	display: grid;
    grid-template-rows: max-content max-content max-content 1fr max-content;
}

.contact-module{
	text-align: center;
}

.contact-module p{
	margin: 0;
}

.locations{
	display: flex;
    justify-content: space-around;
}

.team{
	display: grid;
    grid-auto-rows: max-content;
    grid-gap: var(--mbig);
}

.team-row, .people{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-gap: var(--msmall);
}

.person{
	margin: 0 var(--msmall);
}

/* Talent Page
==================================== */
.talent-description{
	text-align: center;
	padding: var(--msmall) 10rem;
}

.talent-description p:last-child{
	margin-bottom: 0;
}

.talent-facts{
	text-align: center;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-gap: var(--msmall);
	padding: var(--msmall) 0;
}

/* Project
==================================== */
.project-header{
	height: max-content;
	display: grid;
	grid-gap: var(--msmall);
	grid-auto-rows: max-content;
}

.project-description{
	padding: 0 10rem;
	text-align: center;
}

.main-credits{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-gap: var(--msmall);
}

.project-content{
	counter-reset: element;
}

.project-row{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-gap: var(--msmall);
	padding-bottom: var(--msmall);
}

.image-module{
	display: grid;
	grid-gap: var(--msmall);
	grid-auto-rows: max-content;
}

.element-counter{
	display: flex;
	justify-content: space-between;
	padding: 0 var(--mbig);
}

.actual::after{
	counter-increment: element;
	content: counters(element, ".", decimal-leading-zero);
}

.full-credits{
	grid-column: 2 / span 10;
	margin-bottom: var(--mbig);
}

.full-credits-row{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-gap: var(--msmall);
}

.zoom, .vidzoom{
	cursor: zoom-in;
}
  
.zoomer, .vidzoomer{
	cursor: zoom-out;
	left: 0;
	top: 0;
	height: var(--h);
	width: 100vw;
	position: fixed;
	background-color: rgba(250, 250, 250, .5);
	z-index: 9999;
	display: none;
	-webkit-backdrop-filter: blur(20px);
			backdrop-filter: blur(20px);
}

.zoomed{
	display: block;
	padding: var(--mbig);
}

.zoomed img, .zoomed video{
	height: 100%;
    	width: 100%;
    	object-fit: contain;
}

.custom-video-area{
	padding: 0 10rem;
	display: grid;
	grid-gap: var(--msmall);
}

.custom-video-area video{
	height: auto;
}

.video-controls{
    	display: grid;
    	justify-content: space-between;
	grid-template-columns: repeat(4, 1fr);
}

.time{
    	display: grid;
    	width: 6vw;
    	grid-template-columns: 1fr max-content 1fr;
}

.duration{
	text-align: right;
}

.play-button{
	width: fit-content;
}

.play-button, .fs-button, .sound-toggle{
	cursor: pointer;
}

.fs-button{
	text-align: right;
}


/* Footer
==================================== */
footer{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--msmall);
	justify-items: center;
	padding: calc(var(--mbig)*2) var(--msmall) var(--msmall);
	z-index: 5;
}

/* Privacy
==================================== */
.cky-box-bottom-left {		
   	bottom: var(--msmall);	
   	left: var(--msmall);			
   	transform: none;		
   	transform-origin: left bottom !important;	
   	border: none;
}

.cky-btn-customize, .cky-btn-reject{
	color: var(--ctext);
    	border-color: var(--ctext);
}

.cky-btn-accept{
	background-color: var(--ctext);
    	border-color: var(--ctext);
}

.cky-notice-group {
    color: var(--ctext);
}
	.privacy h3, .priv-content{
		grid-column: 3 / 8 span;
		text-align: center;
	}

/* Mobile
==================================== */
@media only screen and (max-width: 834px){
	.cursor{
		display: none!important;
	}

	html{
		font-size: 10px;
	}
	.xl{
		font-size: 5rem;
		letter-spacing: -0.3rem;
	}

	#homepage{
		grid-auto-rows: max-content;
	}
	.home-slider{
		margin-top: -4.6em;
	}

	.menu-row{
		align-items: baseline;
	}

	.menu-row img, .menu-row video{
		height: 3.5rem;
	}

	#talents .thumb-module, #talent .thumb-module{
		grid-column: span 6;
	}

	.talent-description{
		padding: var(--msmall) 0;
	}

	.featured-projects-row{
		grid-template-columns: 1fr;
		grid-auto-flow: inherit;
	}

	.projects-row{
		grid-template-columns: 1fr 1fr;
		margin-bottom: var(--msmall);
	}

	.project-description{
		padding: 0;
	}

	.main-credits{
		grid-auto-flow: unset;
	}

	.slide-inner img:nth-child(2){
		display: none;
	}

	.slider-data{
		padding: var(--msmall);
	}

	.margin{
		padding: var(--mbig);
	}

	.slick-prev, .slick-next{
		height: 0;
		width: 0;
	}
	.double-column .thumbnail-image{
		padding-bottom: 80%;
	}

	.manifesto-module{
		display: block;
	}
	.team{
		grid-gap: var(--msmall);
	}
	.locations{
		display: grid;
		grid-gap: var(--msmall);
	}
	.team-row{
		grid-auto-flow: row;
	}
	.about-module{
		grid-column: span 12;
	}
	.client-list{
		grid-template-columns: 1fr 1fr;
	}
	.texts-small{
		width: 100%;
	}
	.text-module{
		font-size: var(--fs);
	}
	.highlights .contact-module{
		margin-bottom: var(--mbig);
	}
	.privacy h3, .priv-content {
		grid-column: span 12;
	}
	footer{
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Variables
==================================== */
:root{
	/* Text Setting */
	--font: 'SaolText-Regular', serif;
	--fs: 14px;
	--fsm: 2rem;
	--fsl: 10rem;
	--lh: 140%;

	/* Color */
	--cbg: #fff;
	--ctext: #000;
	--shadow: drop-shadow(0px 0px 5px rgba(0, 0, 0, .8));

	/* Margins */
	--mbig: calc(var(--msmall) * 2);
	--msmall: 12px;
	--negative: calc(0px - var(--menu) - (var(--mbig)*3));

	/* Transitions */
	--speed: 350ms;
}