@charset utf-8;
/*
Theme Name: togetherassociates
Author: Code by Ricardo Juárez for Phantasia	
Author URI: http://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2025 Ricardo Juárez
*/

:root 	{
  --sans: 'Founders Grotesk', sans-serif;

  --big: 150px;
  --medium: 30px;
  --small: 26px;

  --linebig: 100%;
  --linemedium: 100%;
  --linesmall: 100%;

  --lsbig: 0em;
  --lsmedium: 0em;
  --lssmall: 0.01em;


--header:86px;

	--primary:#FFFFFF;
	--contrast: #000000;
	--accent:#F27E56;

	--primaryrgb:255,255,255;
	--contrastrgb:0,0,0;
	
	
	--bottom: calc(var(--pad) - 8px);
	--pad:30px;
	--padb: 60px;

	 --app-height: var(--real100);
}


*{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
     -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;

}
html, body
{
	overscroll-behavior-block: none;
overscroll-behavior: none;
margin:0;
font-size:100%;
width:100%;
     }
     
     .biglogo{
	     position: fixed;
	     width: 100%;
	     bottom:0;
	     padding: var(--pad);
	     z-index: 99;
	          }
     
     	html { margin-top: 0px !important; background-color: var(--contrast);}
	* html body { margin-top: 0px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 0px !important; }
		* html body { margin-top: 0px !important; }
	}


.page-template-home a{
	color: var(--primary);
}

body {
margin:0;
min-height: 100vh;
-moz-osx-font-smoothing: grayscale; 
text-rendering:geometricPrecision;
-webkit-font-smoothing: antialiased;
color: var(--contrast);
background-color: var(--accent);

font-family: var(--sans);
  font-size: var(--medium);
  line-height: var(--linemedium);
  font-weight: 500;
  letter-spacing: var(--lsmedium);
}
#main{
}

.big {
	padding-top: 3px;
  font-family: var(--sans);
  font-size: var(--big);
  line-height: var(--linebig);
  font-weight: 500;
  letter-spacing: var(--lsbig);
  text-align: center;
}

.medium,
.body {
  font-family: var(--sans);
  font-size: var(--medium);
  line-height: var(--linemedium);
  font-weight: 500;
  letter-spacing: var(--lsmedium);
}

.small {
  font-family: var(--sans);
  font-size: var(--small);
  line-height: var(--linesmall);
  font-weight: 500;
  letter-spacing: var(--lssmall);
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6{
	margin-bottom: 0;
	font-size: var(--body);
line-height: 1;
font-weight: 500;
}
.justify{
	text-align: justify;
}
header{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
position: sticky;
top: 0;
transition: top 0.3s ease;
padding: var(--pad);
width: 100%;
z-index: 999999999;
	justify-content: space-between;
}


.landing-splash{
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	}
	
	.landing-item.together .landing-logo{
		padding: 20px;
		}
	.landing-item.vs .landing-logo img {
		height: 250px;
		width: auto;
		}	
	
	.landing-bg{
		height: 100%;
	position: relative;
}
.landing-item{
	overflow: hidden;
	position: relative;
	}
.landing-logo{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	top:0;
	left:0;
	}

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

.landing-logo .hover-logo{
	display: none;
}
strong, b, i, em{
font-weight: 500;
font-style: normal;}

footer{
}

.uppercase{
	text-transform: uppercase;
}
.tright{
	justify-content: flex-end;
	text-align: right;
}
.tcenter{
text-align: center;}

.grid2{
	display: grid;
	      grid-template-columns: repeat(2, 1fr);
}
.wrap{
	flex-wrap: wrap;
}
.padded{
	padding:var(--pad);
}

.full{
	width: 100%;
	height: var(--app-height);
	height: 100vh;
}
.relative{
	position: relative;
}

.nexter{
	width: 50%;
	height: 100%;
	right: 0;
   top:0;
   position: absolute;
   z-index: 9999;
}
.prever{
	width: 50%;
	height: 100%;
	left: 0;
   top:0;
   position: absolute;
   z-index: 9999;
}

.sticky-heading {
  position: sticky;
  top: var(--pad);
  text-align: center;
  z-index: 10;
  transition: top 0.3s ease;
  will-change: font-size top;
}

.tax-artist #main{
	display: flex;
	flex-direction: column;
	}
.tax-artist header{
	position: fixed;
	}

header.nav-up{
	top:calc((var(--small) + var(--pad)) * -1);
	}
	
	.more-info, .sticky-heading.nav-down{
	top:calc(var(--small) + var(--pad) + var(--pad) );
} 
	
	

header .filters{
	padding: var(--pad) 0;
	}

video, .cover-img img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.news-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap:var(--padb);
	text-align: center;
	padding: var(--padb);
}

.news-grid .cover-image{
/* 	aspect-ratio:0.75; */
	margin-bottom: 15px;
}


/* SLIDER */
.slider{
	position: relative;
	overflow: hidden;
}
.swiper-slide{
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


.layout-switcher{
	position: fixed;
	top:var(--pad);
	display: flex;
	gap:var(--pad);
	z-index: 999999;
	right: var(--pad);
}

.project-title{
	position: fixed;
	bottom:var(--bottom);
	z-index: 9999;
	left: var(--pad);}


.artist-single-title{
	position: fixed;
	top:var(--pad);
	z-index: 99;
width: 100%;
left: 0;
text-align: center;
	}	

.swiper-fraction {
  position: fixed !important;
  width: auto !important;
	bottom:var(--bottom) !important;
	z-index: 9999;
	text-align: right !important;
	right: var(--pad);}
}

.layout-view.hidden { display: none; }

.single-media,
.gallery-swiper{
	z-index: 0;
	position: absolute;
	width: 100vw;
	height: 100vh;
	top:0;
	left: 0;
	overflow: hidden;
}


.vimeo-play-overlay {
	display: block;
  position: fixed;
  top: -86px;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999999;
  background: rgba(0,0,0,.4);
}


.interaction-gate.hidden { display: none; }
.interaction-gate {
  position: fixed;
  z-index: 9999; /* higher than your nav */
  height: calc(100vh - 80px);
  bottom: 0px;
  width: 100vw;
}
.nexter.disabled, .prever.disabled {
  pointer-events: none; /* belt-and-suspenders with JS guard */
}



/* Floating control dock (outside slide, above arrows) */
.control-dock {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 10000;        /* above .nexter/.prever */
  pointer-events: none;  /* only the button is clickable */
}
.control-dock.hidden { display: none; }




.single-media .swiper-slide{
	display: flex;
  justify-content: center;
  align-items: center;
  }

.swiper-slide.horizontal img{
	width: calc(100vh - 160px);
	height: auto;
}
.swiper-slide.vertical img{
	height: calc(100vh - 160px);
	width: auto;
	}
	
	
.swiper-slide iframe {
width: 100vw !important;
height: 100vh !important;
position: absolute;
top: 0;
left: 0;
padding: 80px 0;
}


.grid-crop .video-wrapper{
	height: 100%;
	}
	
	.grid-crop{
		height: 27.8vw;
  overflow: hidden;
  }


.gallery-swiper .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
}

.rel99{
	position: relative;
	z-index: 99;
}

	
/* MENU */

header [id^="menu-main"]{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
header [id^="menu-main"] li a{
}

.icon-menu, .icon-close{
	display: inline-block;
	    font-size: 24px;
	    cursor: pointer;
}
.inverter{
	    mix-blend-mode: difference;
	    color:var(--primary);
position: fixed;
z-index: 99999999
	
}

.mobile-menu.icon-close{
	color: var(--contrast);
}

.icon-close{
	    mix-blend-mode: difference;
	    color:var(--primary);
position: fixed;
z-index: 99999;
top:var(--padm);
right:var(--padb);	
	}

.menu-hover{

	overflow: hidden;
transition: all 0.6s ease;
pointer-events: none;
	width: 100%;
	height: auto;
	max-height: 0;
	top:0px;
z-index: 999;
margin-top: -3px;
}

.menu-int{

}
.menu-int [id^="menu-main"]{
	text-align: center;
	text-transform: uppercase;
}

.menu-int [id^="menu-main"] a{
display: inline-block;
}

.menu-hover.appear{
	    max-height: var(--app-height);
pointer-events: all;}


.switch-btn, header a, .filters li{
	display: inline-block;
	line-height: 0.8;
	}

.blocks{

margin: 0px auto;
max-width: calc(900px + var(--padb));
	display: flex;
	flex-direction: column;
	gap:calc(var(--pad) * 2);
	padding: var(--padb);
}
.post-content{
	columns: var(--col);
}
.post-content p,
.post-content h2,
.post-content h3,
.post-content ul,
.post-content ol,
.post-content blockquote {
	break-inside: avoid;
}

.post-content strong{
	text-transform: uppercase;
	}
.filters li {
  display: inline-block;
  margin-right: var(--pad);
  cursor: pointer;
  pointer-events: all;
}

.control-label{
	border-bottom: 3px solid transparent;
position: absolute;
left: 50%;
cursor: pointer;
transform: translateX(-50%);
  bottom: calc(var(--bottom) -  3px);
  line-height: 1;
  }

header, .interaction-gate{
	pointer-events: none;}
	header *, .interaction-gate * {
		pointer-events: all;
		}


header a, .filters li, .switch-btn{
border-bottom: 3px solid transparent;
}
.current-menu-item a, .filters li.active, .switch-btn.active {
border-bottom: 3px solid;}

.artists, .filters{
	position: relative;
	z-index: 2;
}
.filters, header{
	pointer-events: none;
}
header * {
pointer-events: all;}
.covers{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 1;
}

.cover-hover.hidden {
  display: none;
}
.cover-artist .cover-image{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
}

.artist-item a{
	display: inline-block;
}


.page-template-default #main{
	display: flex;
	flex-direction: column;
	min-height: var(--real100);
	justify-content: center;
	margin-top: -86.4px;
}


.ardefault:has(.vertical){
	aspect-ratio:0.667;
	overflow: hidden;
	height: 100vh;
	}

.ardefault:has(.horizontal){
	aspect-ratio:1.5;
	overflow: hidden;
	}
	.cover-artist .cover-image .vertical{
	height: 100vh;
		object-fit:cover;
		width: 100%;
}
.cover-artist .cover-image .horizontal{
	width: 100vh;
	height: 100%;
	object-fit:cover;
}

.grid-2{
	display: grid;
		grid-template-columns:1fr 1fr;

		gap: calc(var(--pad) * 2);
	padding: calc(var(--pad) * 2);
}
.artist-title-single{
	margin: calc(((100vh - var(--big)) / 2) + 20px) var(--pad) 20vh;
}


.custom-swiper{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top:0;
	left: 0;
	overflow: hidden;
}
.custom-swiper .swiper-slide{
	width: 100vw;
	height: 100vh;
}
.custom-swiper .swiper-slide img, .custom-swiper .swiper-slide video{
	object-fit:cover;
	height: 100%;
}
.webgrid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: calc(var(--pad) * 2);
	padding: calc(var(--pad) * 2);
}


.news-post:has(.horizontal),

.project-item:has(.horizontal), .project-item.horizontal{
	grid-column: span 2;
}
.gallery-item{
	cursor: pointer;
	}

.more-info.nav-up{
	top: calc((var(--pad) / 1) - 2px);

}
.more-info{
	transition: top 0.3s ease;

padding-top: 2px;
	  user-select: none;
z-index: 9999999;
	position: fixed;
	right: var(--pad);
	cursor:pointer;
}

.term-description{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;display: flex;
height: 100vh;
width: 100vw;
background: var(--color);
position: fixed;
z-index: 99999;
top: 0;
left: 0;
justify-content: center;
align-items: center;
height:auto;
transition: all 0.3s ease;
}
.term-description.appear{  
  max-height: 100vh; 
  padding-top: 100px;
}

a.bordera{
	display: inline-block;
	line-height: 0.7;
	border-bottom: 3px solid;
}

.mtb{
	margin: var(--small) 0;
}
.mb{
	margin-bottom: var(--small);
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(0,0,0,0.5) !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0,0,0,0.5) !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(0,0,0,0.5) !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(0,0,0,0.5) !important;
}

 .cmApp_signupContainer input[type="submit"]{
		font-size:  var(--medium) !important;
 margin-top: 15px !important;
	 }
 .cmApp_signupContainer input{
	 height: auto !important;
	 padding: 0 !important;
	 }
	 .cmApp_formInput{
		 position: relative;
		 }
	 .cmApp_formInput:after{
content: '';
width: 100%;
left: 0;
position: absolute;		 
bottom: 5px;	border-bottom: 3px solid !important;

		 }

.cmApp_signupContainer input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), .cmApp_signupContainer textarea, .cmApp_signupContainer select{
	background: transparent !important;
	 margin-top: 10px !important;
	border:none !important;
	text-transform: none !important;
	font-size:  var(--medium) !important;
	text-align: center;
	color: var(--contrast) !important;
	}
.project-item h2{
	margin-top: 15px;
}
#cmApp_signupContainer *, #signupFormPreviewCon *, .cmApp_signupContainer.cmApp_slideoutTab .cmApp_slideOutTab #cmApp_slideoutButton{
	font-family: var(--sans) !important;
	}
.cmApp_signupContainer{
	padding: 0 !important;
	}
.cmApp_signupContainer div, #cmApp_signupForm .cmApp_fieldWrap{
	margin: 0 !important;
	}
	
/* INPUTS */
input[type="checkbox"]
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     height: 0px;
     border-radius: 0;
     width: 0px;
     cursor: pointer;     
     outline: none;
     border: none;
     margin: 0;
}
.cmApp_formInput #cmApp_signupEmail{
	outline: none !important;}

#cmApp_errorAll{
	text-align: center;
}
input[type="checkbox"]:checked + label{
	color: #444444;
}
input[type="checkbox"]:hover
{
     background-color: var(--contrast);
}
input[type="checkbox"]:checked
{
background-color: var(--contrast);
}

input[type="submit"]{
	  font-size: var(--body);
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     font-family: var(--sans);
     text-transform: uppercase;
     border: none;
     cursor: pointer;
     cursor: pointer;
     outline: none;
	background: transparent !important;
	border:none !important;
	text-transform: none !important;
	font-size:  var(--small) !important;
	text-align: center;
	color: var(--contrast) !important;
	
display: inline-block !important;	
background: #E5E5E5;
border-radius: 0px !important;
}


input[type="text"],
input[type="tel"], 
input[type="email"], 
input[type="password"],
select,
textarea{
	flex: 1;
	  font-size: var(--body);
	padding: 10px 0px 5px;
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: transparent;
     font-family: var(--sans);
     text-transform: uppercase;
     color: var(--primary);
     border: none;
     border-bottom: 1px solid var(--primary);
     border-radius: 0px;
     outline: none;
}
input[type="text"]:focus,
input[type="tel"]:focus, 
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
} 



@media all and (-ms-high-contrast:none){}