/*LAYOUTS*/

/*DESKTOP*/

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

/*selection*/
::selection, ::-moz-selection {
	color: #f5f5f5;
	background: transparent;
}

/*types formats*/
h1, h2, h3, h4, h5 {
	font-weight: 400;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding: 0;
  margin: 0;
  display: inline;   
}

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

ul {
  display: block;
  list-style-type: none;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  /*margin-inline-end: 8px;*/
  margin-inline-end: 0 !important;
  padding-inline-start: 0 !important;
}

a {
	text-decoration: none;
  color: #000000;
  transition: color .15s;
}

a:hover {
  color: #999999;
}

body,
h1, p, span,
nav.menu a,
nav.menu span {
  font-size: 1.1vw;
  transition: color .15s;
  line-height: 1.2;
  letter-spacing: 0;
}

.site-title h1:hover,
nav.menu a:hover,
nav.menu span:hover {
	color: #999999;
}

/*types faces*/
@font-face {
  font-family: Unica Regular;
  src: url("fonts/Unica77LL-Regular.woff");
}

@font-face {
  font-family: Unica Italic;
  src: url("fonts/Unica77LL-Italic.woff");
}

@font-face {
  font-family: Unica Medium;
  src: url("fonts/Unica77LL-Medium.woff");
}

@font-face {
  font-family: Unica Italic;
  src: url("fonts/Unica77LL-MediumItalic.woff");
}

/*body*/
body {
  position: relative;
  margin: 0.5vw 1.2vw;
  color: #000000;
  background: #ffffff;
  font-family: Unica Medium;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*header*/
/* .header{
	width: calc(100% - 2.1vw);
	display: grid;
  grid-gap: 0.7vw;
	grid-template-columns: repeat(4, 25%);
  text-align: left;
} */

.site-title {
	position: absolute;
}

.menu-bar {
	display: none;
}

.burger, .cross {
	display: none;
}

nav.menu ul {
	width: calc(100% - 2.1vw);
	display: grid;
  	grid-gap: 0.7vw;
	grid-template-columns: repeat(4, 25%);
  	text-align: left;
}

li.lang-switcher {
  position: absolute;
  top: 0;
  right: 0;
}

li.lang-switcher a{
  margin-left: 0.7vw;
}

.menu-mobile, .menu-mobile nav.menu, .menu-mobile nav.menu.open{
	display: none;
}

.menu-thumbnails-mobile, .menu-data-mobile, .menu-about-mobile {
	display: none;
}

.menu-data-mobile {
	display: none;
}

.menu-about-mobile {
	display: none;
}

/*multilingual*/
body.spanish .english, body.english .spanish {
	display: none;
}

.lang-switcher a.english, .lang-switcher a.spanish {
	display: inline;
}

body.english .lang-switcher a.spanish, body.spanish .lang-switcher a.english {
	color: #999999;
}

body.english .lang-switcher a.english, body.spanish .lang-switcher a.spanish {
	color: #000000;
	pointer-events: none;
}

.lang-switcher a.spanish:hover, .lang-switcher a.english:hover {
	color: #000000 !important;
}

/*TABLET*/
@media (max-width:1024px) {
}

/*MOBILE*/
@media (max-width:600px) {

body,
h1, p, span,
nav.menu a,
nav.menu span {
  font-size: 3.5vw;
  line-height: 1.2;
  letter-spacing: 0;
}

body {
	margin: 3vw 3.5vw;
	/*viewport height*/
  	height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  	height: calc(var(--vh, 1vh) * 100);
}

.content {
    margin-top: 16vw !important;
    padding-bottom: 6vw;
}

.site-title {
    position: fixed;
    top: 3.5vw;
    left: 3vw;
    z-index: 100;
}

.menu-bar {
	width: 100vw;
    height: 10vw;
	display: inline;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
}

.burger {
    width: 7.5vw;
    position: fixed;
    top: 3vw;
    right: 3.5vw;
    display: inline;
}

.cross {
    width: 3vw;
    position: fixed;
    top: 3vw;
    right: 3.5vw;
    display: none;
}

nav.menu {
	display: none;
}

.menu-mobile {
	display: none;
}

.menu-mobile.open {
	display: inline;
}

.menu-mobile nav.menu {
	width: 100vw;
    height: 100vh;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 0;
}

.menu-mobile nav.menu.open{
	display: inline;
    margin-top: 10vw;
    z-index: 50;
}

nav.menu ul {
    width: calc(100% - 7vw);
    display: block;
    text-align: left;
    margin-left: 3.5vw !important;
    margin-top: 6vw !important;
}

nav.menu ul .menu-item {
	/*display: none;*/
}

li.lang-switcher {
	position: static;
}

.lang-switcher {
	/*display: none;*/
}

li.lang-switcher a:first-child {
    margin-left: 0;
}

.menu-status a:after, .menu-categories a:after {
    content: normal;
}

.menu-thumbnails-mobile.open {
	display: inline;
}

.menu-data-mobile.open {
	display: inline;
}

.menu-about-mobile.open {
	display: inline;
}

.menu-thumbnails-mobile, .menu-data-mobile, .menu-about-mobile {
	width: 100%;
    position: absolute;
    top: 32vw;
    z-index: 100;
}

.menu-thumbnails-mobile.open .menu-projects {
	display: inline;
}

.menu-data-mobile.open .menu-projects {
	display: inline;
}

.menu-about-mobile.open .menu-projects {
	display: inline;
}

.menu-status {
	display: grid;
    grid-template-columns: [col] 50% [col] 50%;
}

.menu-status br {
	display: none;
}

.menu-categories {
	display: grid;
    grid-template-columns: [col] 50% [col] 50%;
	margin-top: 5vw;
}

.menu-about-mobile.open .menu-about {
    display: grid;
    grid-template-columns: [col] 50% [col] 50%;
}

}