/*DESKTOP*/

/* global variables */
:root {
	/* margin */
	--bodyMargin: 1.5vw;
	--rowMargin: 2vw;
	--colMargin: 1.5vw;
	--topMargin: 9vw;
	--footMargin: 6vw;
	/* grid */
	--layoutGrid: repeat(12, 1fr);
	--thumbnailGrid: repeat(3, 1fr);
	--menuGrid: repeat(3, 1fr);
	/* color */
	--backColor: #FFFFFF;
	--textColor: #111111;
	--linkColor: #0F0F0F;
	--hoverColor: #BBBBBB;
	/*font sizes*/
	--smallFont: 1vw;
	--mediumFont: 1.43vw;
	--largeFont: 2.6vw;
	/* text formats */
	--letterSpacing: 0.015em;
	--wordSpacing: -0.015em;
	--lineHeight: 1.2;
	/* transitions */
	--transitionTime: .25s;
}

/*setup*/
::-webkit-scrollbar {
	display: none;
}

::selection {
	color: var(--backColor);
	background-color: var(--textColor);
}

::-moz-selection {
	color: var(--backColor);
	background-color: var(--textColor);
}

html {
	scroll-behavior: smooth !important;
}

body {
	position: relative;
	margin: var(--bodyMargin);
	background-color: var(--backColor);
	color: var(--textColor);
}

img {
	vertical-align: middle;
}

/* font faces */
@font-face {
	font-family: Suisse Int Regular;
	src: url("fonts/SuisseIntlRegular.woff");
}

/* text formats */
body {
 	font-family: "Suisse Int Regular", sans-serif;
	/* font-family: Arial, sans-serif; */
	font-size: var(--mediumFont);
	letter-spacing: var(--letterSpacing);
	word-spacing: var(--wordSpacing);
	line-height: var(--lineHeight);
	text-decoration: none;
	/*font smooth*/
  	-webkit-font-smoothing: smooth !important;
  	-moz-osx-font-smoothing: smooth !important;
  	text-rendering: geometricPrecision !important;
}

h1, h2, h3,
h1 span, h2 span, h3 span {
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding: 0;
	font-weight: 400;
}

p {
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0;
}

span {
}

/* site title */
.site_title {
	font-size: var(--largeFont);
	position: absolute;
    top: 0;
    left: 0;
}

.site_title img {
	width: 6vw;
	height: auto;
}

/* menu format */
nav.menu ul {
	display: block;
	list-style-type: none;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
	font-size: var(--smallFont);
}

nav.menu h1, nav.menu li {
	display: inline;
}

/* menu design */
nav.menu {
	width: calc(100vw - (var(--bodyMargin)*2));
	position: fixed;
	bottom: 0;
	left: 0;
	padding: calc(var(--rowMargin)/2) var(--bodyMargin);
	/*grid-column: 1 / 13;*/
	background: var(--backColor);
	z-index: 50;
}

nav.menu ul {
	display: flex;
	/*
	grid-template-columns: var(--menuGrid);
	*/
	gap: var(--colMargin);
	justify-content: space-between;
	/*
	display: flex;
	*/
}
/*
nav.menu li:nth-child(3) {
	grid-column: 3 / 4;
}

nav.menu li:nth-child(4) {
	width: auto;
	position: absolute;
    right: var(--bodyMargin);
	text-align: right;
}
*/

/* links */
a {	
	color: var(--linkColor);
	text-decoration: none;
	transition-property: color;
	transition-duration: var(--transitionTime);
}

a:hover {
	color: var(--hoverColor);
}

/* content */
.content {
	display: grid;
	grid-template-columns: var(--layoutGrid);
	grid-gap: var(--colMargin);
	margin-bottom: var(--footMargin);
}

/* site title text */
.site_title_text {
	position: absolute;
	top: 0;
	left: 0;
	font-size: var(--mediumFont);
	text-transform: uppercase;
	z-index: 0;
}

.site_title_text img {
	display: inline;
	height: 1vw;
    margin-top: -0.275vw;
    padding: 0 0.05vw 0 0.025vw;
}

/* intro text */
.intro_text {
	position: absolute;
	top: 0;
	left: calc(50% + (var(--colMargin)*0.5));
	font-size: var(--mediumFont);
	/*
	text-transform: uppercase;
	grid-column: 7/13;
	*/
	z-index: -1;
}

.intro_img {
    width: 100%;
    height: calc(100vh - 16.5vw);
    position: absolute;
    top: 6.75vw;
    left: 50%;
    transform: translateX(-50%);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: -2;
}

.intro_img img {
	max-width: 100%;
    max-height: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity 1s;
}

.intro_img img.visible {
	opacity: 1;
}

/* section title */
.section_title {
	grid-column: 1/13;
	margin-top: calc(50vh - var(--bodyMargin));
    padding-bottom: calc(var(--bodyMargin)/2);
	font-size: var(--smallFont);
	border-bottom: 1px solid var(--textColor);
}

/* single layout */
.left_stack {
	grid-column: 1/7;
	column-count: 1;
	position: -webkit-sticky;
  	position: sticky;
	top: var(--bodyMargin);
	margin-top: var(--topMargin);
}

.right_stack {
	margin-top: var(--topMargin);
	grid-column: 7/13;	
	column-count: 1;
	position: -webkit-sticky;
  	position: sticky;
	top: var(--bodyMargin);
	/*
	margin-top: calc(50vh - var(--bodyMargin));
	*/
}

.right_stack .news {
	border-bottom: 1px solid var(--textColor);
	padding-bottom: calc(var(--rowMargin)*2.5);
    margin-top: var(--rowMargin);
}

.right_stack .news:first-child {
    margin-top: 0;
}

.right_stack .news:last-child {
	border-bottom: 0;
}

.left_stack .title, .right_stack .title {
	font-size: var(--largeFont);
}

.left_stack .image, .right_stack .image,
.left_stack .video, .right_stack .video{
	margin-bottom: var(--rowMargin);
}

.image img {
	width: 100%;	
}

.image .caption {
	font-size: var(--smallFont);
	margin-top: calc(var(--rowMargin)/4);
	margin-bottom: var(--rowMargin);
	/*width: calc(100% - var(--bodyMargin));*/
}

.news .texto {
	font-size: var(--smallFont);
}

.enlace {
	margin-top: calc(var(--rowMargin)*1);
	font-size: var(--smallFont);
	text-decoration: underline;
}

/*MOBILE*/
@media (max-width:1024px) {
:root {
	/* margin */
	--bodyMargin: 12vw 3vw 3vw 3vw;
	--rowMargin: 3vw;
	--colMargin: 3vw;
	--topMargin: 15vw;
	--footMargin: 7.5vw; 
	/*font sizes*/
	/*--smallFont: 2.5vw;*/
	--smallFont: 1.75vw;
	--mediumFont: 3.5vw;
	--largeFont: 6.5vw;
}

.site_title_text img {
    height: 2.55vw;
    margin-top: -0.55vw;
    padding: 0 0.1vw 0 0.025vw;
}

.intro_text br {
	display: none;
}

.left_stack, .right_stack {
	grid-column: 1/13;
}

.left_stack {
    position: static;
    top: 200px;
    margin-top: 100px;
}

.right_stack {
	margin-top: 0;
}

.work_header {
    margin-bottom: 1.5vw !important;
	margin-top: 9vw;
}

.right_stack .news:first-child .work_header{
	margin-top: 0;
}

nav.menu {
	width: 94vw;
    top: 0;
    bottom: inherit,
	left: 0;
    padding: 2vw 3vw;
    height: 3vw;
}

nav.menu ul {
    display: flex;
    justify-content: space-between;
}

nav.menu li:nth-child(4) {
    width: auto;
    position: static;
    right: inherit;
}

.thumb_title {
 margin-top: 1.5vw !important;
}

.video iframe {
    width: 100%;
    height: 60vw !important;
}

}