/*
Theme Name: DUNIETO
Theme URI: dadada.work
Author: Beatriz Ferreira + Renata Sá + MORIMOTO
Author URI: dadada.work
Description: Exclusive website theme tailored for Dunieto.
Tags: dunieto, portfolio
Version: 2024.0
Requires at least: 5.2
Tested up to: 6.1
Requires PHP: 7.0
License: All rights reserved. No reproduction allowed.
License URI: https://mori-moto.com
Text Domain: dadada.work

DUNIETO/Beatriz Ferreira/Renata Sá/Vitor Milagres/Morimoto © 2024
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


/* TYPE LOAD */
@font-face{font-display:block;font-family:ABC Diatype;font-style:normal;font-weight:normal;src:local("ABC Diatype"),url(/assets/fonts/ABCDiatype-Medium.woff2) format("woff2");src:local("ABC Diatype"),url(/assets/fonts/ABCDiatype-Medium.woff) format("woff")}
@font-face{font-display:block;font-family:ABC Diatype;font-style:normal;font-weight:bold;src:local("ABC Diatype"),url(/assets/fonts/ABCDiatype-Bold.woff2) format("woff2");src:local("ABC Diatype"),url(/assets/fonts/ABCDiatype-Bold.woff) format("woff")}


/* DEMO TAG */
#demo_tag {
	position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.4;
    background: url(https://dunieto.mori-moto.com/wp-content/uploads/2025/03/demotag.png);
    background-size: 230px;
	background-repeat: repeat;
    background-position: 5px -15%;
    pointer-events: none;
    user-select: none;
    z-index: 999999;
}


/* UNIVERSAL STYLES */
:root {

    /* TYPO */
    --sansserif: 'ABC Diatype', Helvetica, Arial, sans-serif;

    --lineheight: 1.35;

    --fontsizeuniversal: 14px;

    /* COLOR */
    --white: #ECECEC;
    --black: #404040;
    --black50: rgba(0, 0, 0, 0.65);
    --black15: rgba(0, 0, 0, .25);
    --black35: rgba(0, 0, 0, .4);
    --lightgray: rgba(233, 220, 212, .1);
    --mediumgray: rgba(233, 220, 212, .3);
    --darkgray: rgba(163, 150, 141, .5);
    --green: rgb(145, 255, 0);
	--green: rgb(142, 232, 97);
    --white50: rgba(238, 238, 238, .5);
	
	--bgbodyhome: #eeeeee;

    /* SPACES */
    --1un: 5px;
    --2un: 10px;
    --3un: 20px;
    --4un: 30px;

    --gapprojects: var(--3un);

    /* GRID */
    --columntotal: 16;
    --templatecolumns: repeat(var(--columntotal), 1fr);
    --singlecolumn: calc(((100vw - var(--3un) * 2) - (var(--2un) * (var(--columntotal) - 1))) / var(--columntotal));

    /* EFFECTS */
    --bluruniversal: 20px;
    --shadowuniversal: 0px 1px 3px var(--black15);
    --borderuiuniversal: 1px solid rgba(255, 255, 255, .1);

    /* NAV */
    --buttonnavwidth: 72px;
    --buttonhg: calc(1rem + var(--2un));

}


/* UNIVERSAL ENVIRONMENT */

html {
    font-size: var(--fontsizeuniversal);
    font-family: var(--sansserif);
    letter-spacing: calc(var(--fontsizeuniversal) * -0.02);
    line-height: var(--lineheight);
	font-weight: normal;
	color: var(--white);
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}

body {
    width: 100vw;
    overflow-x: hidden;
}

body.home {
	background-color: var(--bgbodyhome);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

body.page-template-page-about {
    background-color: rgba(0, 0, 0, 1);
}

/*
body.home, body.page-template-page-about {
  background-color: #545454;
  background-image: url(../imgs/bg-home-simulation.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
*/

::selection {
    background-color: var(--black15);
}

body.page-template-page-about *::selection {
    background-color: var(--white50);
}

.no_interaction {
    pointer-events: none;
    overflow: hidden;
}

.no_transition {
    transition: none!important;
}

.mobile {
	display: none;
}

::-webkit-scrollbar {
    width: var(--1un);
    height: var(--1un);
    display: none;
  }
  
::-webkit-scrollbar-track {
    background: var(--black15);
    border-radius: 100px;
  }
  
::-webkit-scrollbar-thumb {
    background: var(--white50);
    border-radius: 100px;
  }
  
figure, img {
	user-select: none!important;
}


/* TYPO */
a, a:link, a:focus {
    color: inherit;
    text-decoration: none;
    color: inherit;
    border: inherit;
    outline: none;
    user-select: none;
}

p {
    line-height: 125%;
}

p + p {
    margin-top: 1rem;
}

p a:link {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--white50);
}

p a:link:hover {
    color: var(--white50);
}

b, i, strong, em {
    color: var(--white50);
}

span a {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .012rem;
}

span a:hover {
    color: var(--white50);
}

br {
    user-select: none;
}

h2, h3 {
	font-weight: bold;
}


/* BUTTONS */
.button_tag {
    padding: var(--1un) var(--2un);
    box-sizing: border-box;
    border-radius: calc(var(--1un) + 1px);
    width: max-content;
    background-color: var(--darkgray);
    transition: background-color .5s ease;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    word-wrap: break-word;
    word-break: break-all;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

}

.button_tag:hover {
    background-color: var(--black35);
}



/* HEADER */
body > header {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /*z-index: 0;*/
}

body.home > header, body.page-template-page-archive > header {
	padding: var(--3un);
}

header .upper_links {
    pointer-events: all;
}

header .upper_links h1 {
	color: var(--black);
    color: var(--black50);
    text-transform: uppercase;
    display: inline-block;
    font-size: .95rem;
	cursor: pointer!important;
}

header .upper_links h2 {
    margin-left: calc(var(--1un) / 2);
	margin-left: var(--1un);
    text-transform: uppercase;
    display: inline-block;
    color: var(--black35);
    font-size: .95rem;
	font-weight: normal;
}

body.archive_active header .upper_links h2::after {
	color: var(--black50);
}

a#nav_home_dummy {
	transition: color .25s ease;
}

a#nav_home_dummy:hover {
	color: var(--black35);
	transition: color .35s ease;
}

header .upper_links .button_tag {
    align-items: baseline;
    float: right;
    background-color: var(--white50);
    color: var(--black50);
    margin-top: calc(var(--1un) * -1);
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: var(--shadowuniversal);
    box-sizing: border-box;
}

header .upper_links .button_tag a {
    border: none;
}

header .upper_links .button_tag:hover {
    background-color: var(--black15);
}

header .upper_links .button_tag::before {
    background-color: var(--black);
	box-shadow: none;
}



/* NAV */

nav {
    /*
    background-color: var(--lightgray);
    width: calc(100% - var(--3un) * 2);
    height: auto;
    border-radius: var(--3un) var(--3un) 0 0;
    margin: 0 var(--3un);
    box-sizing: border-box;
    z-index: 2;
    backdrop-filter: blur(var(--bluruniversal));
    */
    position: fixed;
    bottom: var(--3un);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: all;
    border-top: calc(var(--2un) + 1px) solid transparent;
}

nav ul#main_links, .nav_archive {
    position: relative;
    display: flex;
    width: max-content;
    gap: var(--2un);
    flex-wrap: nowrap;
    justify-content: center;
    background-color: var(--mediumgray);
    padding: var(--1un);
    box-sizing: border-box;
    border-radius: var(--2un);
    z-index: -2;
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal)!important;
	overflow: hidden;
}

nav {
	display: flex;
	gap: var(--2un);
    flex-direction: row;
	left: calc(50% + (var(--buttonhg) + var(--2un)) / 2);
}

.nav_archive {
	padding: calc(var(--1un) / 2);
	pointer-events: all;
	cursor: pointer;
	float: left;
	height: calc(var(--buttonhg) + var(--2un) + 2px);
	width: calc(var(--buttonhg) + var(--2un) + 2px);
	background-image: url(/assets/buttons/DUN_bin.png);
	background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
	transition: background-color .5s ease;
}

.upper_links .nav_archive {
	display: none;
}


body.archive_active nav ul#main_links:not(:hover) .nav_selector {
	left: calc(100% + 1px);
	opacity: 0;
	transition: left .75s ease, opacity .35s ease .2;
}

body.archive_active nav ul#main_links .nav_selector {
		transition: left .5s ease, opacity .35s ease!important;
}

body.archive_active nav ul#main_links .nav_selector {
	background-color: var(--black15)!important;
}


body.archive_active nav ul#main_links:hover li a {
	color: var(--black);
	transition: color .2s ease;
}

body.archive_active nav ul#main_links:not(:hover) li a {
	color: var(--black);
	transition: color .2s ease;
}


/*
nav.shrink:not(:hover) {
	left: calc(50%);
	transition: left .35s ease;
}
*/



@media only screen and (min-width: 1024px) and (pointer: fine) {
	nav.shrink:not(:hover) {
	left: calc(50% + var(--2un) - 4px);
}
	
nav.shrink:not(:hover) .nav_archive {
	width: 0;
	height: 0;
	padding: 0;
	opacity: 0;
	transform: scale(0);
	transition: transform .5s ease, width .15s ease .2s, height .15s ease .2s, padding .15s ease .2s, opacity .25s ease .1s;
}
}

.nav_archive:hover {
	background-color: var(--black15);
}

nav.darkmode .nav_archive.status_active:hover, nav.darkmode .nav_archive.status_active {
	background-color: var(--black35);
}



nav ul#main_links li {
    /* background-color: var(--black35); */
    padding: var(--1un);
    box-sizing: border-box;
    border-radius: calc(var(--1un) + 1px);
    text-align: center;
    width: var(--buttonnavwidth);
    cursor: pointer;
}

nav ul#main_links .nav_selector {
    background-color: var(--black15);
    padding: var(--1un);
    box-sizing: border-box;
    border-radius: calc(var(--1un) + 1px);
    text-align: center;
    width: var(--buttonnavwidth);
    height: calc(var(--fontsizeuniversal) * var(--lineheight) + var(--1un));
    position: absolute;
    top: var(--1un);
    left: calc(var(--buttonnavwidth) + var(--1un) + var(--2un));
	/*
	left: calc(100% + 1px);
	*/
    z-index: -1;
    pointer-events: none;
    transition: left .5s ease, opacity .1s ease .4s, width .15s ease, height .15s ease;
}

body.single nav ul#main_links:not(:hover) .nav_selector, body.error404 nav ul#main_links:not(:hover) .nav_selector {
	display: none;
}

nav ul#main_links li.status_active ~ .nav_selector {
    background-color: var(--black35);
}



@media only screen and (min-width: 1024px) and (pointer: fine) {

    /* NAV SHRINK */
    nav.shrink ul#main_links:before {
        content: '';
        height: calc(100% + var(--3un) * 2);
        width: calc(100% + var(--3un) * 2);
        display: block;
        position: absolute;
        top: calc(var(--3un) * -1);
        left: calc(var(--3un) * -1);
        background-color: none;
        z-index: -3;
    }

    nav:not(:hover).shrink ul#main_links .nav_selector {
        opacity: 0;
        width: 0;
        height: 0;
        transition: left .5s ease, opacity 0s ease, width .15s ease, height .15s ease;
    }

    nav ul#main_links:hover .nav_selector {
        opacity: 1;
        width: var(--buttonnavwidth);
        height: calc(var(--fontsizeuniversal) * var(--lineheight) + var(--1un));
        transition: left .5s ease, opacity .1s ease .4s, width .15s ease, height .15s ease;
    }

    nav ul#main_links li {
        transition: all .5s ease, background-color 0s ease;
    }

    nav:not(:hover).shrink ul#main_links:not(:hover) li {
        width: calc(var(--1un) + 1px);
        height: calc(var(--1un) + 1px);
        padding: 0;
        background-color: var(--white);
        transition: all .5s ease, background-color .3s ease .2s;
    }

    nav ul#main_links li a {
        opacity: 1;
        transition: opacity .25s ease .1s, font-size .5s ease;
    }

    nav:not(:hover).shrink ul#main_links:not(:hover) li a {
        font-size: 0px;
        opacity: 0;
        transition: font-size .5s ease;
    }
}


/* NAV DARK MODE */
nav.darkmode ul#main_links li.status_active, nav.darkmode ul#main_links li.status_active:hover {
    color: var(--white)
}

nav.darkmode ul#main_links li, nav.darkmode ul#main_links:hover li {
    color: var(--black50);
}

nav.darkmode ul#main_links, nav.darkmode .nav_archive {
    background-color: var(--white50);
    box-shadow: 0px 1px 2px var(--black15);
}

nav.darkmode .nav_archive:hover {
	background-color: var(--black15);
}

/*
nav.darkmode:not(.shrink) ul#main_links {
    box-shadow: 0px 1px 2px var(--black15);
}
    */

body.home main#page_projects {
    background-color: rgba(64, 64, 64, .3);
}

body.home .button_round {
    background-color: rgba(64, 64, 64, .2);
}

body.single-post nav ul#main_links, body.single-post .nav_archive {
	    background-color: var(--black15);
}

body.single-post .nav_archive:hover {
	background-color: var(--black35);
}



/* NAV STATES */

#nav_home.status_active~.nav_selector {
    left: var(--1un);
}

#nav_projects.status_active~.nav_selector {
    left: calc(var(--buttonnavwidth) + var(--1un) + var(--2un));
}

#nav_about.status_active~.nav_selector {
    left: calc(var(--buttonnavwidth) * 2 + var(--1un) + var(--2un) * 2);
}

#nav_home:hover~.nav_selector {
    left: var(--1un);
}

#nav_projects:hover~.nav_selector {
    left: calc(var(--buttonnavwidth) + var(--1un) + var(--2un));
}

#nav_about:hover~.nav_selector {
    left: calc(var(--buttonnavwidth) * 2 + var(--1un) + var(--2un) * 2);
}

/* (Also change color of active nav link)
#nav_home:hover ~ .nav_selector, 
#nav_projects:hover ~ .nav_selector, 
#nav_about:hover ~ .nav_selector {
    background-color: var(--black15);
}
*/

/* (Avoid to change color of active nav link) */
#nav_home:not(.status_active):hover~.nav_selector,
#nav_projects:not(.status_active):hover~.nav_selector,
#nav_about:not(.status_active):hover~.nav_selector {
    background-color: var(--black15);
}


/* NAV PROJECTS */
nav ul#more_projects {
    bottom: calc(var(--1un) * 4 + 1rem * var(--lineheight) + var(--2un) - 1px);
    position: fixed;
    left: calc(50% - var(--buttonhg));
    transform: translateX(-50%);
    width: calc(var(--2un)* 2 + var(--1un)* 2 + var(--buttonnavwidth)* 3 + 2px);
    display: flex;
    flex-direction: column;
    gap: var(--1un);
}

nav ul#more_projects .more_projects_wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--1un);
    overflow-y: auto;
    scroll-behavior: smooth;
    max-height: 0;
    transition: all .65s ease;
}

/*
nav ul#more_projects .more_projects_wrapper:hover::-webkit-scrollbar {
    display: block;
}
    */

nav ul#more_projects.status_active .more_projects_wrapper {
    max-height: calc((var(--buttonnavwidth) + var(--2un))* 3 + var(--1un)* 2 + 3px);
	/*mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, .9), rgba(0, 0, 0, 1));*/
}

/*
nav ul#more_projects.status_active .more_projects_wrapper li:last-child {
	margin-bottom: calc(var(--buttonnavwidth) + var(--2un) * 2);
}
*/

nav ul#more_projects .more_projects_wrapper::-webkit-scrollbar {
    display: none;
}

nav ul#more_projects li {
    display: flex;
    width: 100%;
    height: max-content;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--2un);
    background-color: var(--black15);
    padding: var(--1un);
    box-sizing: border-box;
    border-radius: var(--2un);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: all .5s ease;
    pointer-events: none;
}


nav ul#more_projects.status_active li {
    pointer-events: all;
}

nav ul#more_projects:not(.status_active) .more_projects_wrapper li {
max-height: 0;
padding: 0 var(--1un);
border-width: 0;
opacity: 0;
transition: all .65s ease-in-out;
}

nav ul#more_projects .more_projects_wrapper li {
    max-height: calc(var(--buttonnavwidth) + var(--2un));
    overflow: hidden;
    padding: var(--1un);
    border-width: 1px;
    opacity: 1;
    transition: all .65s ease-in-out;

}

nav ul#more_projects:not(.status_active) li:first-child, nav ul#more_projects:not(.status_active) .more_projects_wrapper li * {
    opacity: 0;
    transition: all .45s ease-in-out;
}
    
nav ul#more_projects .more_projects_wrapper li {
    opacity: 1;
    transition: all .65s ease-in-out;
}

nav ul#more_projects .more_projects_wrapper li * {
    opacity: 1;
}


nav ul#more_projects li:hover {
    background-color: var(--white);
    color: var(--black);
    box-shadow: none;
}

nav ul#more_projects li:hover::after {
    background-color: var(--black);
}

nav ul#more_projects li > a {
    display: contents;
}

nav ul#more_projects li:not(#call_projects_home)::after, nav ul#more_projects li#call_projects_home a::after {
    content: '';
    position: absolute;
    bottom: var(--2un);
    right: var(--2un);
    display: block;
    margin-right: 0px;
    width: 1rem;
    height: 1rem;
    background-color: var(--black35);
    border-radius: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Cpolygon class='cls-1' points='8 3.4 4.6 3.4 4.6 0 3.4 0 3.4 3.4 0 3.4 0 4.6 3.4 4.6 3.4 8 4.6 8 4.6 4.6 8 4.6 8 3.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: calc(1rem - 6px);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all .5s ease, pointer-events 0s linear;
    pointer-events: none;
}

nav ul#more_projects li a > * {
    min-width: var(--buttonnavwidth);
    padding: calc(var(--1un) / 2);
    box-sizing: border-box;
}

nav ul#more_projects figure {
    /*aspect-ratio: 1 / 1;*/
    width: var(--buttonnavwidth);
    padding: 0!important;
}

nav ul#more_projects figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: var(--1un);
}

nav ul#more_projects li #brand_tag {
    text-align: right;
}


/* CALL PROJECTS HOME */

nav ul#more_projects  li#call_projects_home {
    border-radius: 100px;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: var(--1un) calc(var(--1un) + 3px);
    gap: 0;
}

nav ul#more_projects  li#call_projects_home:hover {
    color: var(--black);
    background-color: var(--black35);
    box-shadow: var(--shadowuniversal);
}

nav ul#more_projects li#call_projects_home a * {
    padding: 0;
    width: 100%;
    text-align: right;
}

nav ul#more_projects li#call_projects_home a::after {
    position: static;
    width: calc(var(--2un) + 1px);
    height: calc(var(--2un) + 1px);
    background-image: none;
    background-color: var(--white);
    pointer-events: all;
    flex-shrink: 0;
}

nav ul#more_projects li:hover::after, nav ul#more_projects li#call_projects_home:hover a::after {
    background-color: var(--black)!important;
}


#tag_contact_header {
	min-height: calc(1.15rem + var(--2un));
}

#tag_contact_header span:nth-child(2) {
	user-select: all;
	cursor: text;
}

#tag_contact_header:hover span:nth-child(2) {
	transition: font-size .5s ease .25s, opacity .25s ease .75s;
}

#tag_contact_header:hover span:first-child {
	opacity: 0;
	font-size: 0;
	transition: font-size .5s ease .25s, opacity .25s ease;
}

#tag_contact_header:not(:hover) span:nth-child(2) {
	font-size: 0;
	opacity: 0;
	transition: font-size .5s ease .25s, opacity .25s ease .75s;
}

#tag_contact_header:not(:hover) span:first-child {
	transition: opacity .35s ease 1.55s, font-size .5s ease 1.15s;
}

#tag_contact_header:not(:hover) span:nth-child(2) {
	transition: opacity .35s ease 1s, font-size .4s ease 1.35s;
}



/* STYLES PER PAGE */
/* VIDEO 3D */
body.home #video_3d {
	background-color: var(--bgbodyhome);
}

#video_3d {
	--videoRatio: calc(16 / 9);
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	pointer-events: none;
}

#video_3d iframe {
	padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: calc(50% -(var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

@media (max-aspect-ratio: 16 / 9) {
    #video_3d iframe {
        --h: 100vh;
        --w: calc(var(--h)* var(--videoRatio));
        top: 0;
        left: calc(50% -(var(--w) / 2));
    }
}



#video_3d video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background-position: center;
	background-size: cover;
}



/* PROJECTS PAGE */
main#page_projects {
    width: calc(100vw - var(--3un) * 2);
    position: fixed;
    left: var(--3un);
    top: calc(100vh - var(--4un) * 2 - var(--buttonhg) + var(--1un));
    background-color: var(--lightgray);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal);
    border-bottom: none;
    border-radius: var(--4un) var(--4un) 0 0;
    padding: var(--3un);
    box-sizing: border-box;
    transition: width .75s cubic-bezier(0.46, 0.03, 0.52, 0.96), top .75s cubic-bezier(0.46, 0.03, 0.52, 0.96), left .75s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

main#page_projects.status_active {
    width: 100vw;
    left: 0;
    top: calc(var(--3un) + .65rem);
}

main#page_projects #filter_control, main#page_projects .projects_list {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

main#page_projects.status_active #filter_control, main#page_projects.status_active .projects_list {
    opacity: 1;
    pointer-events: all;
}

main#page_projects {
    height: calc(100vh - var(--3un) - .65rem);
}

/* FILTER PROJECTS */
#filter_menu::after {
	content: '';
	width: 30%;
	height: var(--3un);
	display: block;
	position: absolute;
	left: 25%;
}

#filter_menu ul {
    position: absolute;
    display: flex;
    flex-direction: column;
	gap: var(--1un);
	/*
	align-items: center;
	*/
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--2un) + var(--buttonhg));
    z-index: 1;
	opacity: 1;
	transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    padding: var(--2un);
	/* padding-bottom: 0; */
    box-sizing: border-box;
    background-color: var(--darkgray);
    backdrop-filter: blur(var(--bluruniversal));
	-webkit-backdrop-filter: blur(var(--bluruniversal));
    border: var(--borderuiuniversal);
    border-radius: var(--2un);
    pointer-events: all;
	transition: all .65s ease, opacity .35s ease, font-size .35s ease, color .35s ease .25s;
}

/*
#filter_menu ul li {
	margin-bottom: var(--1un);
	transition: all .45s ease .15s, opacity .25s ease .2s, color .35s ease;
}
*/
/*
@media only screen and (min-width: 768px) {
#filter_menu ul li.status_active {
	font-size: 0;
	padding: 0;
	border-width: 0;
	opacity: 0;
	margin: 0;
	color: transparent;
	pointer-events: none;
	transition: all .45s ease .15s, opacity .25s ease .2s, color .35s ease;
}
	#filter_menu ul li::before {
	display: none;
}	
}
*/

/*
#filter_menu ul li {
	font-weight: bold;
}
*/


#filter_menu ul li:hover {
	opacity: .5;
	transition: opacity .35s ease;
}

#filter_menu ul li.status_active:hover {
	opacity: .7;
}

#filter_menu:not(.status_active) ul, #filter_menu:not(.status_active) ul li, #filter_menu:not(.status_active) ul li.status_active, #filter_menu.filter_empty ul {
	font-size: 0;
	padding: 1px;
	border-width: 0;
	opacity: 0;
	/*
	visibility: hidden;
	*/
	text-shadow: none;
	color: transparent;
	pointer-events: none;
	backdrop-filter: blur(var(--bluruniversal));
	-webkit-backdrop-filter: blur(var(--bluruniversal));
	transition: all .45s ease .15s, opacity .25s ease .2s, visibility 0s ease .45s, color .15s ease, text-shadow .15s ease;
}

#filter_menu ul li.status_active {
	color: var(--green);
	text-shadow: 0 0 1px var(--green);
}

#filter_menu ul li a:hover {
    cursor: pointer;
}

main#page_projects:not(.filter_active) #filter_menu .status_active::before {
	background-color: var(--black35);
	box-shadow: none;
}


#filter_control {
    position: relative;
    display: block;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    transition: opacity .5s ease;
    pointer-events: none;
}


#filter_control #filter_categories {
    display: flex;
    gap: var(--2un);
    width: max-content;
    max-width: calc(((100% - var(--3un) * 14) / 15) * 5 + var(--3un) * 4);
    max-width: 45%;
    overflow-y: hidden;
    position: absolute;
}

#filter_control #filter_categories li {
    flex-shrink: 0;
    flex-grow: 0;
}

#filter_control #filter_categories li:hover::before {
	/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Crect class='cls-1' x='3.4' width='1.2' height='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: calc(1rem - 6px);
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg);*/
	background-color: var(--black35);
	box-shadow: none;
}

#filter_control #filter_categories li:not(.status_removed) {
    padding: 0;
    font-size: 0;
    color: transparent;
    opacity: 0;
    transform: scale(0);
    animation: .5s ease 1 normal forwards filterselected, .5s ease 1 normal .35s forwards filterselectedopacity;
}

#filter_control #filter_categories li.status_removed {
    animation: .5s ease 1 normal forwards .25s filterremoved;
}

#filter_control #filter_categories li::before {
    margin-top: 0;
}

#filter_control #filter_categories li:not(.status_removed)::before {
    width: 0;
    height: 0;
    margin-right: 0;
    transform: scale(0);
    animation: filtergreen .5s ease forwards .35s;
}

#filter_control #filter_categories li.status_removed::before {
    animation: filtergreenrevert .5s ease forwards;
}

@keyframes filterselected {
    60% {
        padding: var(--1un) var(--2un);
        font-size: 1rem;
        opacity: 1;
    }
    100% {
        padding: var(--1un) var(--2un);
        font-size: 1rem;
        opacity: 1;
        transform: scale(1);
        transform-origin: left center;
    }
  }  

  @keyframes filterselectedopacity {
    to {
        color: var(--white);
    }
  }  

  @keyframes filtergreen {
    50% {
        width: var(--2un);
        height: var(--2un);
    }
    100% {
        width: var(--2un);
        height: var(--2un);
        margin-right: var(--1un);
        transform: scale(1);
        transform-origin: center;
    }
  } 

  @keyframes filtergreenrevert {

    50% {
        width: var(--2un);
        height: var(--2un);
        margin-right: var(--1un);
        transform: scale(0);
        transform-origin: center;
    }
    70% {
        margin-right: 0;
    }
    100% {
        width: 0;
        height: 0;
        margin-right: 0;
        transform: scale(0);
        transform-origin: center;
    }
  } 

  @keyframes filterremoved {
    to {
        opacity: 0;
    }
  }


#filter_toggle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#filter_menu:not(.status_active) #filter_toggle:not(.status_active)::before {
	box-shadow: none;
	background-color: var(--black35);
}


#page_projects_close {
    position: absolute;
    right: 0;
	top: 0;
}

.button_round {
    width: max-content;
    background-color: var(--mediumgray);
    border-radius: 100px;
    height: max-content;
    padding: var(--1un) var(--2un);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    transition: background-color .5s ease;
}


.button_round:hover {
    background-color: var(--black35) !important;
}

.button_round.button_close {
    padding: var(--1un);
}

.button_round.button_close a::after {
    content: '';
    display: block;
    width: var(--2un);
    height: var(--2un);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M5.01568 3.90127L8.095 0.821956L9.19364 1.92061L6.11433 4.99992L9.30196 8.18755L8.18784 9.30167L5.00021 6.11404L1.92089 9.19336L0.822245 8.09471L3.90156 5.01539L0.698454 1.81229L1.81258 0.698165L5.01568 3.90127Z' fill='white'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}


.status_indicator::before {
    content: '';
    display: flex;
    margin-right: 0px;
    margin-top: calc((1rem - var(--2un)) / 3);
    width: 0px;
    height: 0px;
    border-radius: 100px;
    background-color: var(--green);
    /* background-color: var(--white); */
    float: left;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: background-color .5s ease, width .35s ease .2s, height .35s ease .2s, transform .35s ease, opacity .3s ease .1s, margin-right .5s ease .1s;
	 box-shadow: none;

}

.status_active.status_indicator::before, #filter_control.status_active .status_indicator::before, .status_indicator.status_notactive::before {
    width: var(--2un);
    height: var(--2un);
    transform: scale(1);
    transform-origin: center;
    margin-right: var(--1un);
    background-color: var(--green);
    opacity: 1;
	box-shadow: 0 0 5px var(--green);
    transition: background-color .5s ease, width .35s ease, height .35s ease, transform .35s ease .2s, opacity .3s ease .1s, margin-right .5s ease .1s;
}

.status_indicator.status_notactive:not(.status_active)::before {
    background-color: var(--black35);
	box-shadow: none;
}

.shake {
    animation: shake 0.7s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0px, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0px, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.shakecentered {
	animation: shakecentered 0.7s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(-50%, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shakecentered {
	10%, 90% {
        transform: translate3d(calc(-50% - 1px), 0px, 0);
    }

    20%, 80% {
        transform: translate3d(calc(-50% + 2px), 0px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(calc(-50% - 4px), 0px, 0);
    }

    40%, 60% {
        transform: translate3d(calc(-50% + 4px), 0, 0);
    }
}


/* PROJECTS FILTERED */
main#page_projects.filter_active .project_thumb:not(.filter_active) {
    display: none;
}

body.home main#page_projects .project_thumb figure::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--2un);
    background-color: var(--white);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

body.home main#page_projects.filter_trans .project_thumb figure::after {
    opacity: 1;
    transition: opacity .5s ease;
}

body.home main#page_projects.filter_trans .project_thumb * {
    color: transparent;
}

body.home main#page_projects.filter_trans .project_thumb .button_tag {
    background-color: var(--white50)!important;
    transition-delay: none;
}

.project_thumb ul.project_thumb_cats [data-cat].status_active {
    background-color: var(--white);
    color: var(--black);
}

body.home main#page_projects.filter_active .project_thumb ul.project_thumb_cats li {
	display: none;
}



/* PROJECTS LIST */
.projects_list {
    width: 100%;
    height: calc(100% - var(--buttonhg));
    max-height: calc(100% - var(--buttonhg));
    margin-top: calc(var(--3un));
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-auto-rows: max-content;
    gap: var(--gapprojects);
    padding-bottom: calc(var(--3un) * 2 + var(--1un) + 1px + var(--1un) * 2);
    padding-bottom: var(--3un);
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.projects_list::-webkit-scrollbar {
    display: none;
}

.project_thumb {
    position: relative;
    grid-column: span 5;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 439 / 588;
    border-radius: var(--2un);
    padding: var(--2un);
    box-sizing: border-box;
    background-color: var(--mediumgray);
    /* transform: none; */
    transition: all .5s ease;
}


.project_thumb:hover {
    transform: scale(.98);
}

.projects_list.status_clicked .project_thumb:not(.status_clicked) {
    filter: blur(2px);
    opacity: .35;
    transform: scale(.98);
    animation: all .65s ease;
}

.project_thumb.status_clicked {
    transform: none!important;
}
    

.project_thumb.eight_un {
    grid-column: span 8;
    aspect-ratio: 1 / 1;
}

.project_thumb ul.project_thumb_cats {
    position: absolute;
    bottom: var(--2un);
    right: var(--2un);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--1un);
}

.project_thumb ul.project_thumb_cats .button_tag {
    background-color: var(--black35);
    transition: color .5s ease;
}

.project_thumb ul.project_thumb_cats .button_tag:hover {
    color: var(--black);
}

.project_thumb .project_thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--2un);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.project_thumb .project_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--2un);
}

.project_thumb .project_thumbnail.type_iframe {
   --videoRatio: calc(16 / 9); /* CHANGE THIS */
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   }

.project_thumb .project_thumbnail.type_iframe iframe {
   padding: 0;
   margin: 0;
   position: relative;
   --h: 100%;
   --w: calc(var(--h) * var(--videoRatio));
   height: var(--h);
   width: var(--w);
   top: 0;
   left: calc(50% - (var(--w) / 2));
   width: var(--w);
   height: var(--h);
   pointer-events: none;
}

.project_thumb_header.button_tag a + a {
	margin-left: var(--4un);
}





/* SINGLE PROJECT */
body.single {
	background-color: var(--white);
}


main#single_project {
    width: 100vw;
    overflow-x: hidden;
}


main#single_project article {
    width: 100%;
    grid-column: 1 / -1;
    display: block;
    padding: calc(var(--3un) / 2);
    padding-bottom: 0;
    padding-top: calc((100vw / (16 / 9)) + var(--gapprojects) / 2);
    box-sizing: border-box;
}


/* IMAGES */

main#single_project figure {
    width: calc(100% - var(--gapprojects));
    height: 100%;
    margin: calc(var(--gapprojects) / 2);
    box-sizing: border-box;
    float: left;
    background: var(--black15);
    background-clip: content-box;
    border-radius: var(--3un);
    overflow: hidden;
	font-size: 0;
}

main#single_project figure * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--3un);
}

main#single_project figure#main_img_project {
    width: 100vw;
    min-height: calc(100vw / (16 / 9));
    height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    clear: both;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

main#single_project figure#main_img_project, main#single_project figure#main_img_project * {
    border-radius: 0 0 var(--4un) var(--4un)!important;
}

main#single_project figure.size-full {
    aspect-ratio: auto 16 / 9;
    grid-column: 1 / -1;
    width: calc(100% - var(--gapprojects));
}

main#single_project figure.large, main#single_project figure.size-large {
    grid-column: span 8;
    width: calc(50% - var(--gapprojects));
    height: calc(((100vw - var(--gapprojects) * 3) / 2) / (8 / 9) + var(--gapprojects));
}

main#single_project figure.medium, main#single_project figure.size-medium {
    aspect-ratio: 16 / 9;
    grid-column: span 8;
    width: calc(50% - var(--gapprojects));
}

main#single_project figure.medium:last-child, main#single_project figure.large:last-child, main#single_project figure.size-medium:last-child, main#single_project figure.size-large:last-child {
    padding-bottom: var(--gapprojects);
}

main#single_project figure.size-full:last-child, main#single_project figure.size-full:last-child * {
    margin-bottom: 0;
    border-radius: var(--3un) var(--3un) 0 0;
}



/* IFRAMES */

main#single_project figure#main_img_project, main#single_project figure.full-size {
    --videoRatio: calc(16 / 9); 
    }
    
main#single_project figure#main_img_project iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: 0;
    left: calc(50% - (var(--w) / 2));
    width: var(--w);
    height: var(--h);
    pointer-events: none;
 }

 main#single_project figure.full-size iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: calc(100vw - var(--gapprojects) * 2);
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: 0;
    left: calc(50% - (var(--w) / 2));
    width: var(--w);
    height: var(--h);
    pointer-events: none;
 }


main#single_project figure.large iframe {
    --videoRatio: calc(16 / 9); 
    }

 main#single_project figure.large iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: calc((((100vw - var(--gapprojects) * 3) / 2) / (8 / 9) + var(--gapprojects)) * var(--videoRatio));
    --h: calc(((100vw - var(--gapprojects) * 3) / 2) / (8 / 9) + var(--gapprojects));
    height: var(--h);
    width: var(--w);
    top: 0;
    left: calc(50% - (var(--w) / 2));
    width: var(--w);
    height: var(--h);
    pointer-events: none;
 }



 @media (max-aspect-ratio: 16 / 9) {
    main#single_project article {
        padding-top: calc(100vh + var(--4un) + var(--gapprojects) / 2);
    }

    main#single_project figure#main_img_project {
        width: 100vw;
        max-width: 100vw;
        height: calc(100vh + var(--4un));
        display: block;
        overflow: hidden;
    }

    main#single_project figure#main_img_project iframe {
        --h: calc(100vh + var(--4un));
        --w: calc(var(--h)* var(--videoRatio));
        top: 0;
        left: calc(50% -(var(--w) / 2));
    }
}


/* DESCRIPTION */
aside {
    width: calc(var(--singlecolumn) * 4 + var(--gapprojects) * 3);
    max-width: 400px;
    position: fixed;
    bottom: var(--3un);
    right: var(--3un);
    display: flex;
    gap: var(--2un);
    flex-direction: column;
    flex-wrap: nowrap;
}

aside > div {
    position: relative;
    width: 100%;
    background-color: var(--black35);
    padding: var(--2un);
    box-sizing: border-box;
    border-radius: var(--2un);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal);
    max-height: 500px;
    overflow-y: hidden;
}

aside h3 {
    color: var(--white50);
}

aside .project_description {
    padding-bottom: 0!important;
}

aside .project_description .maxhgtext {
    max-height: 450px;
}

aside .toggle_description {
    display: flex;
    gap: var(--2un);
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--black15);
    transition: all .5s ease;
    cursor: pointer;
    /* padding-bottom: calc(var(--2un) - .1rem); */ /* Optical corrention */
}

aside .toggle_description h1, aside .toggle_description span:first-of-type {
	flex-grow: 1;
}

/*
aside .toggle_description span:first-of-type {
	flex-grow: 1;
}
*/

aside .toggle_description::after, .toggle_description_button {
    content: '';
    display: block;
    margin-right: 0px;
    width: 1rem;
    height: 1rem;
    background-color: rgba(64, 64, 64, .2);
    opacity: 1;
    border-radius: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Cpolygon class='cls-1' points='8 3.4 4.6 3.4 4.6 0 3.4 0 3.4 3.4 0 3.4 0 4.6 3.4 4.6 3.4 8 4.6 8 4.6 4.6 8 4.6 8 3.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: calc(1rem - 6px);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all .5s ease, background-image 0s linear;
}

.toggle_description_button {
    position: absolute;
    top: var(--2un);
    right: var(--2un);
}

aside.status_active .toggle_description::after, .toggle_description_button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Crect class='cls-1' x='3.4' width='1.2' height='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(90deg);
}

aside.status_active .toggle_description:hover::after, .toggle_description_button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23646464; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Crect class='cls-1' x='3.4' width='1.2' height='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(90deg);
}

aside .toggle_description:hover {
    background-color: var(--black35);
    /*color: var(--darkgray);*/
    box-shadow: none;
}

aside .toggle_description:hover::after, .toggle_description_button:hover {
    background-color: var(--white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23646464; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Cpolygon class='cls-1' points='8 3.4 4.6 3.4 4.6 0 3.4 0 3.4 3.4 0 3.4 0 4.6 3.4 4.6 3.4 8 4.6 8 4.6 4.6 8 4.6 8 3.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

aside.status_active .toggle_description:hover::after, .toggle_description_button:hover {
    transform: rotate(180deg);
}

aside .project_credits {
    padding-bottom: 0!important;
}

.clear {
    clear: both;
}

aside .project_credits .text_half {
    width: calc(50% - var(--2un) / 2);
    float: left;
    font-size: .85rem;
}

.maxhgtext {
    max-height: calc((.85rem * 1.25) * 8);
    overflow-y: auto;
    padding-bottom: var(--2un);
    box-sizing: border-box;
	transform-style:preserve-3d;
}

.text_half.maxhgtext {
    cursor: ns-resize;
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, .9), rgba(0, 0, 0, 1));
}


.text_half.maxhgtext > *:last-child {
	margin-bottom: 2rem;
}
/*
.text_half.maxhgtext:hover::-webkit-scrollbar {
    display: block;
}
    */

aside .project_credits .text_half:first-of-type {
    margin-right: var(--2un);
    /* color: var(--white50); */
}

aside .project_credits .text_half:first-of-type p + p {
margin: 0;
}


aside > div:not(.toggle_description) {
    max-height: 0px;
    padding: 1px var(--2un);
    transition: all .75s ease, order 0s linear;
    opacity: 0;
	backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
}

aside.status_active > div:not(.toggle_description) {
    max-height: calc(450px + 2rem + var(--2un));
    padding: var(--2un);
    transition: all .75s ease-in-out, order 0s linear;
    opacity: 1;
}

aside.status_active > div.project_credits {
    max-height: calc((.85rem * 1.25) * 8 + 2rem + var(--2un));
}



/* ABOUT PAGE */
/* GENERAL ABOUT */
main#about {
	padding-bottom: calc(var(--4un)* 3 + var(--buttonhg));
}

main#about article {
    width: calc(var(--singlecolumn) * 4 + var(--gapprojects) * 3);
    position: absolute;
    top: var(--3un);
    left: -350px;
    display: flex;
    gap: var(--2un);
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 350px;
	animation-name: articlelfside;
    animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	animation-delay: .2s;
	    padding-bottom: calc(var(--4un)* 3 + var(--buttonhg));
}

main#about article#rg_side {
    left: initial;
    right: -350px;
	animation-name: articlergside;
    /*width: calc(var(--singlecolumn) * 5 + var(--2un) * 4);*/
}

main#about.filtertrans article {
	left: var(--3un);
	animation-name: articlelfsiderev;
	animation-duration: .7s;
	animation-delay: 0s;
	animation-play-state: running;
}

main#about.filtertrans article#rg_side {
	right: var(--3un);
	animation-name: articlergsiderev;
}

@keyframes articlelfside {
	to {
		left: var(--3un);
	}
}

@keyframes articlergside {
	to {
		right: var(--3un);
	}
}

@keyframes articlelfsiderev {
	to {
		left: -350px;
	}
}

@keyframes articlergsiderev {
	to {
		right: -350px;
	}
}

main#about article#lf_side .about_notifications {
	display: none;
}

main#about article > section {
    position: relative;
	margin: 0;
    width: 100%;
    background-color: var(--lightgray);
    padding: var(--2un);
    box-sizing: border-box;
    border-radius: var(--2un);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal);
    overflow-y: auto;
    transition: background-color .5s ease;
    scroll-behavior: smooth;
}

main#about article > section:hover {
    background-color: var(--mediumgray);
}

main#about article section h3 {
    color: var(--white50);
    position: sticky;
    top: 0;
}

main#about .maxhgtext {
	max-height: calc((.85rem * 1.25) * 8);
}




/* ABOUT SECTION DESCRIPTION */

.socials_tag span + span {
    margin-left: var(--1un);
}

.socials_tag #socials_email a {
	position: absolute;
	bottom: var(--2un);
}

#socials_email a:nth-child(2) {
	user-select: all;
	cursor: text;
}

#socials_email a:nth-child(2), #socials_email:hover a:first-child {
	opacity: 0;
	transition: opacity .25s ease;
}

#socials_email:hover a:nth-child(2) {
	opacity: 1;
	transition: opacity .25s ease;
}

#socials_email:not(:hover) a:first-child {
	transition: opacity .35s ease 1.2s;
}

#socials_email:not(:hover) a:nth-child(2) {
	transition: opacity .35s ease 1s;
}

.socials_tag span:last-child,
.socials_tag span:nth-last-child(2) {
  float: right;
}



/* ABOUT LIFETIME */
#about_lifetime {
    overflow: hidden;
}

#about_lifetime:not(.status_active) {
    cursor: pointer;
}

#about_lifetime .toggle_description_button {
    top: initial;
top: var(--2un);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Cpolygon class='cls-1' points='8 3.4 4.6 3.4 4.6 0 3.4 0 3.4 3.4 0 3.4 0 4.6 3.4 4.6 3.4 8 4.6 8 4.6 4.6 8 4.6 8 3.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
transform: none;
}

#about_lifetime .toggle_description_button:hover {
    transform: none;
}


/* Add Status active */
#about_lifetime.status_active .toggle_description_button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Crect class='cls-1' x='3.4' width='1.2' height='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    transform: rotate(90deg);
}

#about_lifetime.status_active .toggle_description_button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8 8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg id='Camada_1'%3E%3Crect class='cls-1' x='3.4' width='1.2' height='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    transform: rotate(180deg);
}



/* ABOUT LIFETIME DESCRIPTION */
#about_lifetime h3 {
    position: relative!important;
    display: inline-block;
    left: 0;
    transition: all .65s ease;
}

#about_lifetime.status_active h3 {
    left: 50%;
    transform: translateX(-50%);
}


/* LIFETIME CAROUSEL */
.card-carousel {
    padding-top: var(--3un);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    transition: padding .65s ease;
    transform: translateX(20%);
  }

 #about_lifetime:not(.status_active) .card-carousel {
    padding: 0;
    transition: padding .65s ease .35s;
 }
  
  .card-carousel .my-card {
    width: 60%;
    position: relative;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    flex-shrink: 0;
    transition: .65s;
  }
  
  .card-carousel .my-card.active {
    z-index: 3;
    transform: scale(1) translateY(0) translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: .65s;
  }
  
  .card-carousel .my-card.prev, .card-carousel .my-card.next {
    z-index: 2;
    opacity: .5;
    pointer-events: auto;
    transition: .65s;
  }

  .card-carousel .my-card:not(.active) figure {
    transform: scale(0.75) translateY(0) translateX(0);
  }

  .card-carousel .my-card:not(.active):hover figure {
    transform: scale(0.8) translateY(0) translateX(0);
  }

  .card-carousel .my-card figure {
    width: 100%;
    height: calc(((var(--singlecolumn) * 4 + var(--gapprojects) * 3) * 0.6) * 1.25);
    opacity: 1;
    border-radius: var(--3un);
    background-color: var(--black15);
    transition: all .65s ease, opacity .35s ease .4s, height .65s ease 0s;
    overflow: hidden;
  }

  #about_lifetime:not(.status_active) .my-card figure {
    height: 0;
    opacity: 0;
    transition: opacity .65s ease, height .45s ease .25s;
 }

  .card-carousel .my-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--3un);
  }

  .card-carousel .my-card .card_caption {
    margin-top: var(--3un);
    font-size: inherit;
    opacity: 1;
    max-height: 200px;
    transition: all .65s ease, opacity .35s ease .35s, font-size .35s ease;
  }

  #about_lifetime:not(.status_active) .card_caption {
    font-size: 0;
    margin: 0;
    opacity: 0;
    max-height: 0;
    transition: all .65s ease, opacity .35s ease, font-size .35s ease .35s;
 }

  .card-carousel .my-card .card_caption p {
    text-align: center;
    margin-top: 0;
    transition: opacity .2s ease .2s;
  }

  .card-carousel .my-card .card_caption p b, .card-carousel .my-card .card_caption p i {
    font-size: .85rem;
  }
  
  .card-carousel .my-card:not(.active) .card_caption p {
    opacity: 0;
    transition: opacity .35s ease;
    }

    
  









/* ABOUT SECTION PUBLICATIONS/TALK */
section#about_publications {
    padding-bottom: 0!important;
}

section#about_publications .text_half {
    width: calc(50% - var(--2un) / 2);
    float: left;
}

section#about_publications .text_half p {
    font-size: .85rem;
}

section#about_publications .text_half:nth-child(odd) {
    margin-right: var(--2un);
}


/* ABOUT SECTION AWARDS */


section#about_awards {
    width: 100%;
    overflow: hidden;
}

section#about_awards .awards_wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--2un);
    overflow: hidden;
    overflow-x: auto;
	    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), rgba(0, 0, 0, .9), rgba(0, 0, 0, .9), rgba(0, 0, 0, 1));
}

section#about_awards .awards_wrapper:hover * {
    cursor: ew-resize!important;

}

section#about_awards .awards_wrapper::-webkit-scrollbar {
    display: none;
}

/* Scroll bar on Awards tag 

section#about_awards .awards_wrapper::-webkit-scrollbar {
    width: var(--1un);
    height: var(--1un);
  }
  
  section#about_awards .awards_wrapper::-webkit-scrollbar-track {
    background: var(--black15);
    border-radius: 100px;
  }
  
  section#about_awards .awards_wrapper::-webkit-scrollbar-thumb {
    background: var(--white50);
    border-radius: 100px;
  }

  section#about_awards .awards_wrapper {
    padding-bottom: var(--2un);
}
    */
  
  

section#about_awards .awards_single {
    width: calc((100% - var(--2un) * 3) / 4);
    flex-shrink: 0;
    flex-grow: 0;

}

/*
section#about_awards .awards_single:last-child {
	    margin-right: calc((100% - var(--2un) * 3) / 4 + var(--2un));
}
*/

section#about_awards .awards_single *:not(:first-child) {
    margin-top: var(--1un);
}

section#about_awards .awards_single figure {
    width: 100%;
    aspect-ratio: 1 / 1;
	background-image: url(/assets/placeholders/awards.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--1un);
}

section#about_awards .awards_single figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--1un);
}

section#about_awards .awards_single .year_tag {
    font-size: .85rem;
    color: var(--white50);
    margin-top: var(--2un);
}

section#about_awards .awards_single p {
    line-height: 110%;
}



/* ABOUT NOTIFICATIONS SECTION */
main#about article > section.about_notifications {
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
    overflow: visible;
    border-radius: 0;
    backdrop-filter: none;
}

section.about_notifications ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--2un);
}

section.about_notifications ul li {
    position: relative;
    display: inline-block;
    background-color: var(--lightgray);
    padding: var(--2un);
    box-sizing: border-box;
    border-radius: var(--2un);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal);
    cursor: move;
    overflow: visible;
    flex-shrink: 0;
    transition: all .5s ease;
}

section.about_notifications ul.status_active li:not(:last-child) {
    margin-bottom: calc((var(--buttonnavwidth) + var(--2un) * 2 + 2px) * -1);
}

section.about_notifications ul li:first-child {
    z-index: 3!important;
}
section.about_notifications ul li:nth-child(2) {
    z-index: 2!important;
}

section.about_notifications ul li:last-child {
    z-index: 1!important;
}

section.about_notifications ul.status_active li:not(:first-child) {
    opacity: .5;
    background-color: var(--darkgray);
    transform: scale(.98);
}

section.about_notifications ul.status_active li:last-child {
    transform: scale(.96);
}

section.about_notifications ul.status_active li .button_round {
    display: none;
}

section.about_notifications ul.status_active li .button_round {
    transform: translate(-45%, -45%) rotate(45deg);
}

section.about_notifications ul.status_active:not(.no_hover):hover li:not(:last-child) {
    margin-bottom: calc((var(--buttonnavwidth) + var(--2un) + 2px) * -1);
}

section.about_notifications ul.status_active li:not(:first-child) * {
    opacity: 0;
    transition: opacity .5s ease;
}

section.about_notifications ul.status_active:not(.no_hover):hover li:not(:first-child) * {
    opacity: .5;
}

section.about_notifications ul.status_active li {
    cursor: pointer;
}

section.about_notifications ul li.ui-sortable-helper {
    transition: none;
}

section.about_notifications ul li.ui-state-highlight {
    height: calc(var(--buttonnavwidth) + var(--2un) * 2 + 2px);
    border: 0;
    background-color: var(--white50);
    opacity: .1;
    box-shadow: none;
}


section.about_notifications ul li:hover {
    background-color: var(--mediumgray);
}

section.about_notifications ul li > a {
    display: contents;
}

section.about_notifications #call_action_button {
    position: absolute;
    bottom: var(--2un);
    right: var(--2un);
    width: auto;
    text-align: center;
    font-size: .8rem;
    letter-spacing: .005rem;
    color: var(--white50);
    min-width: 0;
    display: block;
    margin-right: 0px;
    background-color: rgba(64,64,64,.5);
    border-radius: 100px;
    background-position: center;
    padding: calc(var(--1un) / 1.5) calc(var(--2un) / 1.5);
    cursor: pointer;
    transition: all .5s ease;
}

section.about_notifications ul li:first-child:hover #call_action_button, section.about_notifications ul:not(.status_active) li:hover #call_action_button {
    background-color: var(--green);
    box-shadow: 0px 0px 10px var(--green);
    color: var(--black);
}

section.about_notifications ul li > * {
    min-width: var(--buttonnavwidth);
    width: calc(100% - var(--buttonnavwidth));
    padding-left: var(--2un);
    box-sizing: border-box;
    float: left;
}

section.about_notifications ul li figure {
    aspect-ratio: 1 / 1;
    width: var(--buttonnavwidth);
    padding: 0!important;
	filter: grayscale(1) contrast(1.1);
}

section.about_notifications ul li:hover figure {
	filter: none;
}

section.about_notifications ul li figure img {
    width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: var(--1un);
}

section.about_notifications ul li #info_tag {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: .85rem;
    margin-bottom: var(--1un);
}

section.about_notifications ul li .button_round {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    width: auto;
    flex-grow: 0;
    padding-left: var(--1un);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
    min-width: 0;
    background-color: var(--lightgray);
    transform: translate(-45%, -45%);
    transform-origin: center top;
    transition: transform .35s ease, background-color .35s ease;
}

section.about_notifications ul li .button_round a {
    border: none;
}

section.about_notifications ul li .button_round:hover {
    background-color: var(--mediumgray)!important;
}

section.about_notifications ul li:hover .button_round {
    opacity: 1;
    pointer-events: all;
}

/* ABOUT / CREDITS */
table#about_credits {
	position: fixed;
    bottom: 0;
    margin: var(--3un);
    color: var(--white50);
	z-index: -1;
	transition: opacity .5s ease;
}

table#about_credits.hidden {
	opacity: 1;
	transition: opacity .5s ease;
}

@media only screen and (min-width: 1024px) {
	table#about_credits, table#about_credits.hidden {
		opacity: 0;
		animation: fadeincredits .45s ease;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	
	@keyframes fadeincredits {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
}

#about_credits tr td:nth-child(2n) {
	font-weight: bold;
	padding-left: var(--2un);
}

#about_credits tr + tr td {
	padding-top: .2rem;
}

/*
#about_credits tr:last-of-type td {
	padding-bottom: var(--3un);
}
*/

th, td {
	padding: 0;
}



/* 404 PAGE */
.blrlayer {
    width: 100vw;
    height: 100vh;
    background-color: var(--black15);
	gap: var(--2un);
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
	/*
		display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
	*/
}

.errorbox {
	position: absolute;
	left: 50%;
	top: calc(50% - var(--buttonhg) - var(--2un));
	transform: translate(-50%, -50%);
    display: flex;
    width: max-content;
    gap: var(--1un);
    flex-wrap: nowrap;
    justify-content: center;
    background-color: var(--mediumgray);
	/*padding: var(--2un);*/
    padding: var(--3un);
    box-sizing: border-box;
    border-radius: var(--2un);
    box-shadow: var(--shadowuniversal);
    border: var(--borderuiuniversal);
    flex-direction: column;
    align-items: center;
	/*
    backdrop-filter: blur(var(--bluruniversal));
    -webkit-backdrop-filter: blur(var(--bluruniversal));
	*/
}

.errorbox h1 {
	font-size: 1.8rem;
	font-weight: normal;
	letter-spacing: -0.06rem;
}


/* LOADING */
body.home .blrlayer {
	display: none;
	position: fixed;
	z-index: 100;
	cursor: progress;
}

.ldBar {
	width:200px!important;
	position: absolute!important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ldBar-label {
	display: none;
}

.ldBar path.mainline {
    stroke-linecap: round!important;
}



/* ARCHIVE */

body.page-template-page-archive > header .upper_links h2 {
	color: var(--black)!important;	
	margin-left: 0;
}


#archive {
	position: fixed;
	top: 100vh;
	width: 100%;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-rows: max-content;
    gap: var(--gapprojects);
	row-gap: 90px;
	padding: var(--3un);
	padding-top: 90px;
    /*padding-bottom: calc(var(--3un)* 2 + var(--1un) + 1px + var(--1un)* 2);*/
	padding-bottom: calc(var(--4un) * 3 + var(--buttonhg));
    box-sizing: border-box;
	color: var(--black);
	/*font-weight: bold;*/
	z-index: -2;
	max-height: 100vh;
	transition: top 1s ease;
	overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);

}

#archive a {
	display: contents;
}

body.archive_active #archive {
	top: 0;
	transition: top 1s ease .2s;
}

body #video_3d {
	transition: opacity .4s ease .5s;
}

body.archive_active #video_3d {
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

#archive .archive_project {
	grid-column: span 3;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: calc(var(--1un) + var(--1un)/2);
}

#archive .archive_project figure {
	width: 100%;
	background: var(--black15);
	/* FOR DEBBUGING 
	min-width: 100%;
	min-height: 105vh;
	*/
}

#archive .archive_project figure img {
	width: 100%;
	height: 100%;
}

#archive .archive_project:nth-child(4n-2) {
		grid-column: span 5;
}


#archive .archive_project:nth-child(7n-2) {
		grid-column: span 6;
}

#archive .archive_project:nth-child(7n-1) {
		grid-column: span 4;
}

#archive .archive_project:nth-child(7n) {
		grid-column: 13 / -1;
}

#archive .archive_project:nth-child(11n-1), #archive .archive_project:nth-child(11n-2), #archive .archive_project:nth-child(11n-3), #archive .archive_project:nth-child(11n), #archive .archive_project:nth-child(18n-1), #archive .archive_project:nth-child(18n-2), #archive .archive_project:nth-child(18n-3), #archive .archive_project:nth-child(18n) {
		grid-column: span 4;
}

#archive .archive_project:nth-child(14n) {
		grid-column: span 4;
}

#archive .archive_project:nth-child(14n-1) {
		grid-column: 7 / 12;
}

#archive .archive_project:nth-child(14n-2) {
		grid-column: span 5;
}

#archive .archive_project:nth-child(21n-2) {
		grid-column: 2 / 5;
}

#archive .archive_project:nth-child(21n-1) {
		grid-column: span 6;
}

#archive .archive_project:nth-child(21n) {
		grid-column: 13 / -1;
}







/* SMALLER SCREENS */
/* TABLETS ETC */

@media only screen and (max-width: 1024px) {
	
		.mobile {
	display: block;
}
	
	.no_mobile {
		display: none!important;
	}

    /* SINGLE PROJECT DESCRIPTION */
    aside {
        top: var(--3un);
        flex-direction: column-reverse;
        justify-content: flex-end;
        width: calc(var(--singlecolumn) * 8 + var(--2un) * 7);
        left: 50%;
        max-width: none;
        transform: translateX(-50%);
    }

    aside .toggle_description_button {
        display: none;
    }

    aside > .toggle_description {
        order: 3;
    }

    aside > .project_description {
        order: 2;
    }

    aside > .project_credits {
        order: 1;
    }


    /* ABOUT */
    main#about {
        position: absolute;
        top: var(--3un);
        left: var(--3un);
        padding-bottom: calc(var(--3un)* 3 + var(--1un) + 1px + var(--1un)* 2);
        max-width: none;
    }

    main#about article {
        position: static;
        width: calc(var(--singlecolumn) * 6 + var(--2un) * 5);
    }

    main#about article + article {
        margin-top: calc(var(--2un) + 1px);
    }

    main#about article#rg_side {
        flex-direction: column-reverse;
    }

    .card-carousel .my-card figure {
        height: calc(((var(--singlecolumn)* 5 + var(--gapprojects)* 4)* 0.6)* 1.25);
    }
	
	section.about_notifications ul li figure {
		filter: none;
	}

    main#about article > section.about_notifications {
        order: 9999;
    }

    main#about article#lf_side section:first-child {
        order: -1!important;
    }

    section#about_awards .awards_single {
        width: calc((100% - var(--2un)* 2) / 3);
    }

    section.about_notifications ul li .button_round {
        opacity: 1;
        pointer-events: all;
    }

    section.about_notifications ul li:not(:first-child) .button_round {
        display: none;
    }
	
	main#about article#lf_side .about_notifications {
	display: block;
}
	
	main#about article#rg_side .about_notifications {
	display: none;
}
	
	table#about_credits.hidden {
	opacity: 0;
	}
	
	
	/* ANIMATION ABOUT */
	main#about article {
		animation: 0s!important;
		padding-bottom: 0;
	}
	
	main#about article > section {
    margin-left: -110%;
	animation-name: articlelfside;
    animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1)!important;
	transition: none!important;
}
	
	main#about article#lf_side > section:nth-child(2) {
			animation-delay: .2s;
	}
	
	main#about article#lf_side > section:nth-child(3) {
			animation-delay: .3s;
	}
	
	main#about article#rg_side > section:nth-child(2) {
			animation-delay: .5s;
	}
	
	main#about article#rg_side > section:nth-child(3) {
			animation-delay: .4s;
	}

main#about.filtertrans article > section {
	margin-left: 0;
	animation-name: articlelfsiderev;
	animation-duration: .65s;
	animation-delay: 0s!important;
	animation-play-state: running;
}

@keyframes articlelfside {
	to {
		margin-left: 0;
	}
}

@keyframes articlelfsiderev {
	to {
		margin-left: -110%;
	}
}

}


/* MOBILE */


@media only screen and (max-width: 768px) {

    /* UNIVERSAL STYLES */

    :root {

        /* TYPO */
        --fontsizeuniversal: 15px;

        /* SPACE */
        --gapprojects: var(--2un);

        /* NAV */
        --buttonnavwidth: calc(100% / 3);

    }
	
	
	body.home {
    overflow-y: scroll;
	height: 101vh;
}

	
	#video_3d video {
	height: 100dvh;
}
	

    /* HEADER */
	/*
	body.home > header {
		position: sticky;
		top: 0;
	}
	*/
	
    header .upper_links h2 {
        display: none;
    }



    /* NAV */

    nav {
        width: calc(100% - var(--3un) * 2);
        left: var(--3un);
        transform: none;
    }

    nav ul#main_links {
        width: 100%;
    }
	
	nav.darkmode ul#main_links {
		color: var(--black50);
	}

    nav ul#main_links .nav_selector {
        left: var(--1un);
        display: none;
    }
    
    nav ul#main_links .status_active ~ .nav_selector {
    display: block;
    }

    nav ul#main_links .nav_selector {
        width: calc(var(--buttonnavwidth) - var(--2un));
    }

    #nav_home.status_active~.nav_selector {
        left: var(--1un);
    }

    #nav_projects.status_active~.nav_selector {
        left: calc(var(--buttonnavwidth) + var(--1un));
    }

    #nav_about.status_active~.nav_selector {
        left: calc(var(--buttonnavwidth) * 2 + var(--1un));
    }

    #nav_home:not(.status_active):hover~.nav_selector,
    #nav_projects:not(.status_active):hover~.nav_selector,
    #nav_about:not(.status_active):hover~.nav_selector {
        background-color: var(--black35);
    }
	
	nav ul#more_projects.status_active .more_projects_wrapper {
    max-height: calc(var(--buttonnavwidth) * 3 + var(--1un) * 2);
}
	
	/*
	nav ul#more_projects.status_active .more_projects_wrapper li:last-child {
    margin-bottom: calc(var(--buttonnavwidth) + var(--2un) + var(--1un));
}
	*/


    /* NAV PROJETOS */
    nav ul#more_projects {
        --buttonnavwidth: calc((100vw - var(--3un) * 2 - var(--2un) * 3) / 3);
		left: 50%;
        bottom: calc(var(--1un)* 5 + 1rem* var(--lineheight) + var(--2un)* 2 + 2px);
    }
	
	nav ul#main_links li.status_active a {
		color: var(--white);
	}



	/* FILTERS */
	/*
	#filter_control #filter_categories {
		display: none;
	}
	
	#filter_menu.status_active #filter_toggle::before {
	margin-right: 0px;
    width: 0px;
    height: 0px;
	}
	*/
	
	#filter_categories li:not(:first-child) {
		display: none;
	}

    /* PROJETOS LIST */
    main#page_projects {
        width: calc(100vw - var(--3un));
        left: calc(var(--3un) / 2);
        padding: var(--3un) calc(var(--3un) / 2);
		top: calc(100dvh - var(--4un)* 2 - var(--buttonhg) + var(--1un));
		height: calc(100dvh - var(--buttonhg) - 2px - var(--3un) - var(--1un));
    }
	
	/*
	body.home > header {
		z-index: 1;
	}
	*/
	
	main#page_projects.status_active {
		top: calc(var(--3un) * 2 - var(--2un) + var(--buttonhg));
	}

    .projects_list {
        border-radius: var(--2un) var(--2un) 0 0;
        padding-bottom: calc(var(--buttonhg) + var(--3un) * 2 + var(--2un) + 2px);
		max-height: calc(100vh - var(--buttonhg) - var(--3un)* 2 -(var(--3un)* 2 - var(--1un) + var(--buttonhg)));
		max-height: calc(100dvh - var(--buttonhg) - var(--3un)* 2 -(var(--3un)* 2 - var(--1un) + var(--buttonhg)));
		-webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .project_thumb {
        grid-column: 1 / -1!important;
    }


    /* SINGLE PROJECT */
    main#single_project article {
        padding: calc(var(--3un) / 3);
        padding-bottom: 0;
        padding-top: calc(100vh + var(--3un) + var(--3un) / 3 * 2);
    }
    
    main#single_project figure {
        margin: calc(var(--2un) / 2);
        border-radius: var(--2un);
    }

    main#single_project figure * {
        border-radius: var(--2un);
    }

    main#single_project figure#main_img_project, main#single_project figure#main_img_project * {
        border-radius: 0 0 var(--3un) var(--3un)!important;
    }

    main#single_project figure.size-full:last-child, main#single_project figure.size-full:last-child * {
        border-radius: var(--2un) var(--2un) 0 0;
    }
	
	main#single_project figure.large, main#single_project figure.size-large {
		    width: calc(100% - var(--gapprojects));
    height: calc((100vw - var(--gapprojects)) /(8 / 9) + var(--gapprojects));
	}
	
	main#single_project figure.large iframe, main#single_project figure.size-large iframe {
		    --w: calc(((100vw - var(--gapprojects)) /(8 / 9) + var(--gapprojects))* var(--videoRatio));
    --h: calc((100vw - var(--gapprojects)) /(8 / 9) + var(--gapprojects));
	}
	
	main#single_project figure.medium, main#single_project figure.size-medium {
		width: calc(100% - var(--gapprojects));
	}

    /*
    main#single_project figure.medium, main#single_project figure.small {
        width: 100%;
    }
        */

        @media (max-aspect-ratio: 16 / 9) {
            main#single_project figure#main_img_project iframe {
                --h: calc(100vh + var(--4un));
                --w: calc(var(--h)* var(--videoRatio));
                top: 0;
                left: calc(50% -(var(--w) / 2));
                transform: translateX(-50%);
            }
        }


    /* SINGLE PROJECT DESCRIPTION */
    aside {
        width: calc(100% - var(--3un)* 2);
        transform: none;
        left: var(--3un);
    }

    aside .toggle_description {
        padding-bottom: calc(var(--2un) - .02rem);
    }

    aside .toggle_description::after, .toggle_description_button, nav ul#more_projects li:not(#call_projects_home)::after {
        width: 1rem;
        height: 1rem;
        background-size: 10px;
    }
	
	aside .project_description .maxhgtext {
		max-height: calc(100vh - ((.85rem * 1.25) * 8 + 2rem + var(--2un)) - 40px * 2 - var(--3un) * 2 - var(--2un) * 5 - 1rem - 4px);
		max-height: calc(100dvh - ((.85rem * 1.25) * 8 + 2rem + var(--2un)) - 40px * 2 - var(--3un) * 2 - var(--2un) * 5 - 1rem - 4px);
	}
	
		#filter_menu ul {
	gap: var(--2un);
	}

    nav ul#more_projects li#call_projects_home a::after {
        width: calc(var(--2un) + 4px);
        height: calc(var(--2un) + 4px);
    }
	
	
	/* MORE PROJECTS NAV */
	nav ul#more_projects .more_projects_wrapper li {
		padding: calc(var(--1un) + var(--1un)/2);
		justify-content: space-between;
		height: var(--buttonnavwidth);
	}
	
	nav ul#more_projects li a {
	--buttonnavwidth: calc(100% / 4);
	}
	
	nav ul#more_projects li a #name_tag {
	width: calc(var(--buttonnavwidth) * 2);
	}
	
	nav ul#more_projects li#call_projects_home {
		padding-right: var(--2un);
	}



     /* ABOUT */
     main#about {
        top: 0;
        left: 0;
        padding: var(--3un);
        padding-bottom: calc(100vh - var(--4un));
    }

    main#about article {
        width: calc(100vw - var(--3un) * 2);
		max-width: none;
    }

    section.about_notifications ul.status_active li:not(:last-child) {
        margin-bottom: calc((var(--buttonnavwidth) + var(--2un) + 2px)* -1);
    }
	
	section.about_notifications {
        --buttonnavwidth: calc(100% / 4);
	}

    section.about_notifications #call_action_button {
        padding: var(--1un) calc(var(--2un) / 1.5);
		background-color: var(--green);
    	box-shadow: 0px 0px 10px var(--green);
    	color: var(--black);
    }

    .card-carousel .my-card figure {
        height: calc(((var(--singlecolumn)* 16 + var(--gapprojects)* 15)* 0.6)* 1.25);
    }
	
	main#about .maxhgtext {
		max-height: calc((.85rem* 1.25)* 12);
	}
	
	table#about_credits {
		bottom: calc(var(--buttonhg) + var(--1un)* 2 + var(--3un));
	}
	
	/*
	section#about_awards .awards_single:last-child {
		    margin-right: calc((100% - var(--2un)* 2) / 3 + var(--2un));
	}
	*/
	
	
	/* ARCHIVE */
	
	nav .nav_archive {
	display: none;
	}
	
	.upper_links .nav_archive {
	display: block;
}
	
	.nav_archive {
	position: absolute;
    right: var(--3un);
    top: calc(var(--3un) * 2 - var(--2un) + var(--buttonhg));
	background-color: var(--white50);
		        height: calc(var(--buttonhg) + var(--2un) + 3px);
        width: calc(var(--buttonhg) + var(--2un) + 3px);
	z-index: 0;
	}
	
	.nav_archive.status_active {
	background-color: var(--black35);
}
	
	#archive {
		max-height: 100dvh;
		pointer-events: all;
		overflow-y: scroll;
	}
	
	
body.archive_active nav ul#main_links:not(:hover) .nav_selector {
	left: calc(100% + 1px);
	opacity: 0;
	transition: left .75s ease, opacity .35s ease .2;
}

body.archive_active nav ul#main_links .nav_selector {
		transition: left .5s ease, opacity .35s ease!important;
}

body.archive_active nav ul#main_links .nav_selector {
	background-color: var(--black15)!important;
}


body.archive_active nav ul#main_links:hover li a {
	color: var(--black);
	transition: color .2s ease;
}

body.archive_active nav ul#main_links:not(:hover) li a {
	color: var(--black);
	transition: color .2s ease;
}
	
	#archive {
	row-gap: var(--4un);
		z-index: 0;
	}
	
	#archive .archive_project {
	grid-column: span 12!important;		
	}
	
	#archive .archive_project:nth-child(2n) {
	grid-column: 1 / -1!important;		
	}


}