/*
Theme Name: thaisesmeraldo
Theme URI: https://mori-moto.com
Author: Júnior Yuki Morimoto
Author URI: https://mori-moto.com
Description: Tema personalizado para Thaís Esmeraldo.
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: thaisesmeraldo

thaisesmeraldo WordPress Theme 2011-2024
thaisesmeraldo is distributed under the terms of the GNU GPL
*/

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}html{scroll-behavior:smooth}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}

@font-face {
    font-family:"carbona-variable";
    src:url("/assets/fonts/carbona-variable.woff2") format("woff2"),url("/assets/fonts/carbona-variable.woff") format("woff");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
    }

:root {

    /* TYPOGRAPH */
    --fontsizeuniversal: 14.5px;
    --fontsizesmall: calc(var(--fontsizeuniversal) * .75);
    --fontsizesup: calc(var(--fontsizeuniversal) * 0.7);
    --lineheightuniversal: 140%;
    --lineheightuniversalcalc: 1.2;
    --fontreg: carbona-variable, sans-serif;
    --textindent: var(--singlecolumnprojects);
    --letterspacingsmall: 0.05rem;

    /* SPACING */
    --0un: 3px;
    --1un: 10px;
    --2un: 20px;

    /* COLUMNS */
    --totalcolumnsnum: 15;
    --columns: repeat(var(--totalcolumnsnum), 1fr);
    --singlecolumn: calc(((100vw - var(--2un) * 2) - (var(--totalcolumnsnum) - 1) * var(--1un)) / var(--totalcolumnsnum));

    /* COLUMNS PROJECTS */
    --totalcolumnsnumprojects: 16;
    --columnsprojects: repeat(var(--totalcolumnsnumprojects), 1fr);
    --singlecolumnprojects: calc(((100vw - var(--2un) * 2) - (var(--totalcolumnsnumprojects) - 1) * var(--1un)) / var(--totalcolumnsnumprojects));

    /* COLUMNS PROJECTS */
    --endcolumn1: 6;
    --endcolumn2: 11;

    /* COLORS */
    --bgcolor: var(--white);

    --white: #fff;
    --white50: rgba(255, 255, 255, .5);
    --black: rgba(0, 0, 0, 1);
    --black5: rgba(0, 0, 0, .05); 
    --black30: rgba(0, 0, 0, .3);
    --black50: rgba(0, 0, 0, .6);
    --gray: rgb(50, 50, 50);
	--shadowuniversal: .2rem .2rem .4rem var(--black30);

    /* CONTROLLERS */
    --blurgallery: 40px;
    --blurhometext: 0px;

}

html {
    font-size: var(--fontsizeuniversal);
    font-family: var(--fontreg);
    font-variation-settings: "MONO" 0, "slnt" 0, "wght" 400;
    font-feature-settings: "ss02", "ss03";
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
}

html * {
    line-height: var(--lineheightuniversal);
}


body {
    padding: var(--2un);
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background-color: var(--bgcolor);
}

::selection {
    color: var(--white);
    background-color: rgba(0,0,0,0.99);
}

figure, img {
    user-select: none;
    overflow: hidden;
}

figure div {
	height: 100%;
}

iframe {
    pointer-events: none;
}

t {
    opacity: 0;
}

a, a:link {
    text-decoration: none;
    color: var(--black);
}

body *:not(li) a:link:hover {
    color: var(--black30);
    text-decoration: none;
}


sup {
    text-transform: uppercase;
    font-size: var(--fontsizesup);
    vertical-align: super;
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 550;
}

p {
    max-width: 750px;
}

p + p {
    text-indent: var(--textindent);
}

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


em {
    text-transform: uppercase;
    font-size: var(--fontsizesmall);
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 420;
    letter-spacing: var(--letterspacingsmall);
}

.grid_16 {
    display: grid;
    grid-template-columns: var(--columns);
    grid-template-rows: min-content;
    grid-auto-rows: min-content;
    column-gap: var(--1un);
    row-gap: var(--1un);
}

.grid_projects {
    display: grid;
    grid-template-columns: var(--columnsprojects);
    grid-template-rows: min-content;
    grid-auto-rows: min-content;
    column-gap: var(--1un);
    row-gap: var(--1un);
}

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

.notransition, .notransition * {
    transition: none!important;
}

.mobile {
	display: none;
}



/* HEADER */
header {
    position: fixed;
    width: calc(100vw - var(--2un) * 2);
    z-index: 1000;
}

body.home header {
    z-index: 998;
}

body:not(.home, .single) #main_nav::before {
    position: fixed;
    width: 100vw;
    height: calc(var(--2un) * 2 + 1rem);
    top: 0;
    left: 0;
    content: '';
    display: block;
    background: var(--bgcolor);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, var(--bgcolor) 30%);
    z-index: -1;
    transition: opacity .75s ease;
    pointer-events: none;
	/*
	mask: linear-gradient(black, black, transparent);
	backdrop-filter: blur(8px);
	display: none;
	*/
}

body:not(.home) #main_nav:not(.collapsed)::before {
    opacity: 0;
    transition: opacity .35s ease;
}

header .title {
    width: 50%;
    grid-column: 1 / -1;
}

body.home header .title {
    width: max-content;
}

header .title h1 {
    position: absolute;
}

header .title .title_text div {
    opacity: 0;
    pointer-events: none;
}

header .title .title_text div {
    opacity: 0;
    pointer-events: none;
}

header .title.noclick .title_text div {
    pointer-events: none!important;
}

header .title .title_intro {
    margin-top: calc(1rem * var(--lineheightuniversalcalc));
    cursor: pointer;
}

header .title .title_intro div {
    display: inline;
}

header .title .title_zigzag div {
    display: table;
    box-sizing: border-box;
}

header .title .title_zigzag a {
    text-decoration: none;
}

header .title:not(.collapsed) .title_text b, header .title:not(.collapsed) .title_text sup, header .title:not(.collapsed) .title_zigzag a {
    transition: all .2s ease 1s;
}

@media only screen and (min-width: 1024px) and (pointer: fine) {
    body.home header .title:not(.collapsed) .title_text b:hover, body.home header .title:not(.collapsed) .title_zigzag a:hover {
    font-size: 1.77rem;
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 400;
    transition: all .1s ease;
}

body.home header .title:not(.collapsed) .title_intro sup:hover, body.home header .title:not(.collapsed) .title_zigzag a:hover sup {
    font-size: calc(var(--fontsizeuniversal));
    font-variation-settings: "MONO" 0, "slnt" 0, "wght" 400;
    transition: all .1s ease;
    vertical-align: baseline;
    text-transform: initial;
}

header .title:not(.collapsed) .title_zigzag a:hover sup {
    vertical-align: super!important;
    margin-left: var(--0un);
}
}

header .title:not(.collapsed) .title_zigzag a:hover {
    transition: font-size .5s ease;
    color: var(--white);
}

header .title:not(.collapsed) .title_text div, header .title h1 t, header .title .title_intro {
    pointer-events: all;
    transition: opacity .5s ease, margin-top .5s ease
}

header .title.collapsed .title_intro {
    margin-top: 0;
    transition: font-size .5s ease 1.5s, margin-top .5s;
}

header .title.collapsed h1 t {
    margin-top: 0rem;
    opacity: 1;
    transition: opacity 0s ease 2.1s;
}

header .title:not(.collapsed) h1 t {
    opacity: 0;
    transition: opacity 0s ease;
}

header .title.collapsed .title_intro p div:nth-child(2) {
    opacity: 0;
    transition: font-size .5s ease 1.5s, opacity 0s ease 2s;
}

header .title:not(.collapsed) .title_intro p div:nth-child(2) {
    opacity: 1!important;
    transition: opacity 0s ease;
}

#site_title {
    pointer-events: all;
}



/* GRIDS */
.grid_ex_1 {
    grid-column: span 1;
}

.grid_ex_2 {
    grid-column: span 2;
}

.grid_ex_3 {
    grid-column: span 3;
}

.grid_ex_4 {
    grid-column: span 4;
}

.grid_ex_5 {
    grid-column: span 5;
}


/* FOOTER */
footer {
    text-transform: uppercase;
    font-size: var(--fontsizesmall);
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 420;
    margin-top: var(--2un);
    padding-bottom: var(--2un);
    letter-spacing: var(--letterspacingsmall);
}

body.page-template-page-about footer {
		position: relative;
	    margin-top: calc(var(--2un) * 2);
	}
	
body.page-template-page-about footer::before {
		content: '';
		width: 100%;
		height: 1px;
		background-color: var(--black50);
		position: absolute;
		top: calc(var(--2un) * -1);
}

span#ft_lastupdate, span#ft_brtime {
    text-align: right;
}

span#ft_socials {
    display: flex;
    /*
    justify-content: flex-end;
    */
    flex-direction: row;
    gap: var(--1un);
}


/* BLUR LAYER */
#blur_layer {
    width: 100vw;
    height: 100vh;
    /*background-color: var(--white50);*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}

#blur_layer.active {
    opacity: 1;
    pointer-events: all;
}


/* MENU COLLAPSABLE UNIVERSAL */
.menu_collapsable {
    position: fixed;
    right: var(--2un);
    display: flex;
    flex-direction: row-reverse;
    z-index: 999;
    transition: filter .5s ease;
    pointer-events: none;
}

.menu_collapsable * {
    pointer-events: all;
}

.nointeraction .menu_collapsable.collapsed * {
    pointer-events: none;
}


.menu_collapsable.collapsed.nofocus {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    pointer-events: none;
    transition: filter .5s ease;
}

.menu_collapsable ul {
    margin-top: calc(1rem + var(--1un));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.menu_collapsable.collapsed ul {
    pointer-events: none;
}

.menu_collapsable.bottom {
    bottom: var(--2un);
    align-items: flex-end;
}

.menu_collapsable.bottom ul {
    margin: 0;
    margin-bottom: calc(1rem + var(--1un));
    flex-direction: column-reverse;
}

.menu_collapsable .menu_toggle, .menu_collapsable ul li, .button {
    padding: calc(var(--1un) / 2) var(--1un);
    padding-bottom: var(--0un);
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadowuniversal);
    box-sizing: border-box;
    text-align: center;
    width: max-content;
    height: max-content;
    user-select: none;
}

.menu_collapsable ul li a:link:hover {
    color: inherit;
}

.button {
    min-width:  calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    min-height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--0un));
    max-height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    transition: all .5s ease;
}

a.button:hover {
    background-color: var(--black);
    color: var(--white)!important;
}

.button.toggleicon {
    padding: calc(var(--1un) / 2);
    min-width:  calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    min-height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    max-height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    transition: all .5s ease;
}

.button.toggleicon.icon::before {
    transform: rotate(0deg);
}

.button.toggleicon:hover {
    color: var(--white);
    background-color: var(--black);
    cursor: pointer;
}

.button.toggleicon.icon:hover::before {
    background-image: url(/assets/icons/xicon_white.svg);
}

.menu_collapsable ul li {
    transition: background-color .5s ease;
}

.menu_collapsable ul li:hover {
    background-color: var(--black);
    cursor: pointer;
}

.menu_collapsable ul li a {
    transition: color .5s ease;
}

.menu_collapsable ul li:hover a {
    color: var(--white)!important;
}

.menu_collapsable ul li:not(:hover) {
    background-color: var(--white)!important;
    transition: background-color .5s ease;
}

.menu_collapsable.icon .menu_toggle::before, .button.icon::before {
    position: absolute;
    content: '';
    width:  calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc));
    height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc));
    padding: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) - var(--fontsizeuniversal));
    box-sizing: border-box;
    display: block;
    background-image: url(/assets/icons/xicon.svg);
    background-size: 100% 100%;
    background-repeat: none;
    background-clip: content-box;
    transform: rotate(45deg);
    opacity: 1;
    transition: all .5s ease, background-image 0s linear;
}

.menu_collapsable.icon:not(.collapsed) .menu_toggle::before, .menu_collapsable.icon .menu_toggle:hover::before {
    background-image: url(/assets/icons/xicon_white.svg);
}

#main_nav.menu_collapsable.icon:not(.collapsed) .menu_toggle::before {
    background-image: none;
}

.menu_collapsable .menu_toggle {
    min-width:  calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    min-height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
    max-height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) + var(--1un));
}

.menu_collapsable.collapsed ul li {
    opacity: 0;
    pointer-events: none!important;
}

.menu_collapsable.collapsed ul li * {
    pointer-events: none!important;
}

.menu_collapsable:not(.collapsed) ul li {
    pointer-events: all;
}

.menu_collapsable .menu_toggle {
    padding: calc(var(--1un) / 2);
    transition: padding .25s ease;
}

.menu_collapsable:not(.icon) .menu_toggle {
    padding: calc(var(--1un) / 2) var(--1un);
    padding-bottom: var(--0un);
}

.menu_collapsable .menu_toggle {
    transition: all .25s ease;
}

.menu_collapsable:not(.collapsed) .menu_toggle, .menu_collapsable .menu_toggle:hover {
    background-color: var(--black);
    color: var(--white);
    cursor: pointer;
    transition: all .5s ease;
}

/* MAIN NAV HOME */
.menu_collapsable:not(.collapsed) .menu_toggle::before {
    transform: rotate(0);
    transition: all .5s ease;
}

/* MAIN NAV */
#main_nav {
    top: calc(var(--2un) - var(--1un) / 2);
}

#main_nav.menu_collapsable:not(.collapsed) #main_nav.menu_toggle span, #main_nav.menu_collapsable .menu_toggle::before {
    transition: font-size .5s ease, opacity .25s ease .6s, background-image 0s linear;
}

#main_nav.menu_collapsable:not(.collapsed) .menu_toggle span {
    opacity: 1;
    transition: font-size 1s ease, opacity .25s ease .8s;
}

#main_nav.menu_collapsable:not(.collapsed) .menu_toggle {
    padding: calc(var(--1un) / 2) var(--1un);
    padding-bottom: var(--0un);
    transition: padding .5s ease;
}

#main_nav.menu_collapsable.collapsed .menu_toggle span, #main_nav.menu_collapsable:not(.collapsed) .menu_toggle::before {
    font-size: 0;
    line-height: 0;
    opacity: 0;
    transition: font-size .5s ease .5s, opacity .25s ease, padding .5s ease .5s;
}

#main_nav.menu_collapsable:not(.collapsed) ul ~ #actual_page span {
    margin-left: calc(var(--singlecolumnprojects) * 8 + var(--1un) * 7);
    transition: margin-left 1.25s ease;
}

#actual_page {
    pointer-events: none;
    position: fixed;
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    left: calc(var(--singlecolumnprojects)* 8 + var(--1un)* 8 + var(--2un));
    margin-top: calc(var(--1un) / 2);
    max-width: calc(var(--singlecolumnprojects)* 8 + var(--1un)* 7 - var(--1un));
    z-index: -1;
}

#actual_page span {
    transition: margin-left 1s ease .25s;
    pointer-events: all;
}



/* CONTROLLERS */
.controller {
    position: fixed;
    bottom: var(--2un);
    cursor: grab;
    padding: var(--0un);
    min-width: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    min-height: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    max-height: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    transition: background-color .5s ease;
}

.controller:hover, .controller.ui-draggable-dragging {
    background-color: var(--black);
}

.controller::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: .9rem;
    height: .9rem;
    border: 1px solid var(--black);
    border-radius: 100px;
    transform: translate(-50%, -50%);
}

.controller:hover::after, .controller.ui-draggable-dragging::after {
    border-color: var(--white);
}

.controller:hover:active {
    cursor: grabbing;
}


/* CONTACT */
#contact.title_zigzag a {
    padding: calc(var(--1un) / 2) var(--1un);
    padding-bottom: var(--0un);
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadowuniversal);
    box-sizing: border-box;
    text-align: center;
    width: max-content;
    height: max-content;
    transition: all .5s ease;
    text-decoration: none;
}

#contact.title_zigzag a:hover {
    color: var(--white);
    background-color: var(--black);
}

#contact_close {
    display: none;
    position: absolute;
    top: calc(var(--1un) / 2 * -1);
    right: 0;
    pointer-events: all;
}

.title:not(.collapsed) .title_text#contact * {
    pointer-events: all!important;
}

.noclick.collapsed .title_text#contact * {
    pointer-events: none!important;
}

body:not(.home) header {
    pointer-events: none;
}



/* HOME */
body.home {
    background-color: var(--black);
}

body.home header * {
    color: var(--white);
}

body.home header {
    filter: blur(var(--blurhometext));
}



/* HOME - GALLERY */
.gallery {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

.gallery figure {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.gallery figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gallery figure img.blur {
    filter: blur(var(--blurgallery));
    opacity: .95;
    background-color: var(--black30);
}



/* PROJECTS */
body:not(.home) main {
    margin-top: calc(1rem + var(--2un));
	min-height: calc(100vh - var(--2un) * 4 - 2rem);
}

.project_thumb {
    position: relative;
    height: max-content;
    grid-column: span 5;
}

.project_thumb:first-child, .project_thumb:nth-child(3n+1) {
    grid-column: 1 / var(--endcolumn1);
}

.project_thumb:nth-child(3n-1) {
    grid-column: var(--endcolumn1) / var(--endcolumn2);
}

.project_thumb:nth-child(3n) {
    grid-column: var(--endcolumn2) / -1;
}

.project_thumb a {
    display: contents;
}

.project_thumb figure {
    width: 100%;
    height: 100%;
}

.project_thumb figure img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.project_thumb figcaption {
    color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: var(--1un);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(15px);
    opacity: 1;
    transition: opacity .5s ease;
    user-select: none;
}

.project_thumb figcaption *:not(h2) {
    font-size: var(--fontsizesmall);
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 420;
    letter-spacing: var(--letterspacingsmall);
}

.project_thumb:not(:hover) figcaption {
    opacity: 0;
}

.project_thumb figure img.mob_img {
    display: none;
}

main#projects.filtering .project_thumb:not(.filter_active) {
    opacity: .2;
	pointer-events: none;
}


main#projects.filtering .project_thumb:not(.filter_active) figcaption {
    opacity: 1;
    backdrop-filter: blur(10px);
    pointer-events: none;
}

main#projects.filtering .project_thumb:not(.filter_active) figcaption * {
    opacity: 0;
}


/* FILTER */
#filter ul li.filter_active {
    display: none;
    width: 0;
    height: 0;
    padding: 0;
    font-size: 0;
}

#filter div.filter_active {
    position: fixed;
    margin-right: 0!important;
    margin-bottom: calc(var(--2un) + 1rem);
    opacity: 1!important;
    right: -500px;
    transition: all .5s ease, right .75s ease;
    cursor: pointer;
    display: flex;
    gap: calc(var(--1un) / 1.5);
    padding-right: calc(var(--1un) / 2);
    line-height: var(--lineheightuniversalcalc);
}

#filter.menu_collapsable ul li:hover a {
	color: var(--black)!important;
}

/*
#filter div.filter_active a {
margin-top: 2px;
}
*/

#filter div.filter_active:hover {
    background-color: var(--black)!important;
}

#filter div.filter_active:hover a {
    color: var(--white);
}

#filter div.filter_active::after {
    display: inline-block;
    content: '';
    width:  calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc));
    height: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc));
    padding: calc(var(--fontsizeuniversal) * var(--lineheightuniversalcalc) - var(--fontsizeuniversal));
    box-sizing: border-box;
    display: block;
    background-image: url(/assets/icons/xicon.svg);
    background-size: 100% 100%;
    background-repeat: none;
    background-clip: padding-box;
    opacity: 1;
    transition: all .5s ease;
    background-color: var(--white);
    border: 2px solid var(--white);
    border-radius: 100px;
}

#filter div.filter_active.removed, #filter.menu_collapsable.collapsed.nofocus div.filter_active {
    right: -500px!important;
    transition: all .75s ease;
}

#filter.menu_collapsable.collapsed div.filter_active {
    right: var(--2un);
}


#filter .menu_toggle::before {
    background-image: url(/assets/icons/filtericon.svg);
    transform: none;
    background-clip: border-box;
}

#filter:not(.collapsed) .menu_toggle::before, #filter .menu_toggle:hover::before {
    background-image: url(/assets/icons/filtericon_white.svg);
    transform: none;
    background-clip: border-box;
}

/* CONTROL PROJECTS */
.project_columns_controls {
    grid-column: 1 / -1;
    width: calc(100% - var(--singlecolumn) * 4 - var(--1un) * 4);
    height: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    bottom: var(--2un);
    left: calc(var(--singlecolumn) * 2 + var(--2un) + var(--1un) * 2);
    position: sticky;
    /*margin-top: var(--1un);*/
}
  
.project_columns_controls .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
}

.project_columns_controls .ui-slider-handle {
    position: absolute;
    z-index: 2;
   
    background: var(--white); 
    cursor: pointer;
    pointer-events: all;

    min-width: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    min-height: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    max-height: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));

    background-color: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadowuniversal);
    box-sizing: border-box;

    transform-origin: center;

    transition: background-color .5s ease;
	
	outline: none!important;
  }

  .project_columns_controls .ui-slider-handle:first-of-type {
    transform: translateX(-50%);
  }

  .project_columns_controls .ui-slider-handle:last-child {
    transform: translateX(calc(-50%));
    transform-origin: center;  
  }

  .ui-slider-handle:hover, .ui-slider-handle.ui-state-active {
    background-color: var(--black);
}

.ui-slider-handle:hover:active {
    cursor: grabbing;
}

.ui-slider-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: .9rem;
    height: .9rem;
    border: 1px solid var(--black);
    border-radius: 100px;
    transform: translate(-50%, -50%);
}

.ui-slider-handle:hover::after, .ui-slider-handle.ui-state-active::after {
    border-color: var(--white);
}



/* SINGLE PROJECTS */
main#single_projects {
    width: 100%;
}

/* DESCRIPTION */
.description {
    display: contents;
}

.description .half {
    grid-column: span 8;
    margin-bottom: var(--1un);
}

.description .half#additional_info {
	    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.description .half:first-child p + p {
	    text-indent: 0;
}

.description .half#descr_excerpt p {
    text-indent: var(--textindent);
}

.description .half#credits p {
    text-indent: 0;
}

.description .half#credits p + p {
    text-indent: 0;
    margin-top: 1rem;
}

main#single_projects .description:last-of-type .half {
    margin-top: var(--1un);
}

main#single_projects br + em {
	    margin-top: .4rem;
    display: block;
}

#lang_switch {
    position: absolute;
    width: var(--textindent);
    display: flex;
    gap: var(--1un);
}

#lang_switch a {
    font-size: var(--fontsizesmall);
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 450;
    cursor: pointer;
    user-select: none;
    transition: color .3s ease;
}

#lang_switch a:not(.active) {
    color: var(--black30);
}

#lang_switch a:not(.active):hover {
    color: var(--black50);
}

#excerpt_pt {
    display: none;
}


/* IMAGES / FIGURES */

main#single_projects figure {
    width: 100%;
    grid-column: span 8;
}

main#single_projects figure img, main#single_projects figure video, main#single_projects figure iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: var(--black5);

}

main#single_projects figure.size-full {
    width: 100%;
    aspect-ratio: 16 / 9;
    grid-column: 1 / -1;
}

main#single_projects figure.size-large {
	grid-column: span 8;
}

main#single_projects figure.size-large img, main#single_projects figure.size-large video, main#single_projects figure.size-large iframe {
    width: 100%;
    height: initial;
    object-fit: initial;
}

/*
main#single_projects figure.size-large iframe {
    aspect-ratio: 4 / 5;
}
*/

main#single_projects figure.size-large {
	    aspect-ratio: auto!important;
}

main#single_projects figure.size-medium {
    width: 100%;
    aspect-ratio: auto!important;
    grid-column: span 4;
}

main#single_projects figure.size-medium img, main#single_projects figure.size-medium video, main#single_projects figure.size-medium iframe {
	height: auto;
}


/* MORE PROJECTS */
#more_projects {
    width: 100%;
    grid-column: 1 / -1;
    position: sticky;
    bottom: var(--2un);
    display: flex;
    justify-content: space-between;
    opacity: 1;
    transition: opacity .5s ease;
}

#more_projects.hidden {
    opacity: 0;
}

#more_projects a:hover span:first-child, #more_projects a span:last-child {
    display: none;
}

#more_projects a:hover span:last-child  {
    display: block;
}



/* ABOUT */
main#about article {
    grid-row-gap: var(--2un);
}

#about_bio {
    grid-column: 1 / 7;
}

#about_bio p:first-child {
    font-size: 1.77rem;
    line-height: 120%;
    letter-spacing: -.015rem;
    font-variation-settings: "MONO" 0, "slnt" 0, "wght" 360;
}

#about_profile {
    position: fixed;
    right: var(--2un);
    width: calc(var(--singlecolumnprojects) * 3 + var(--1un) * 2);
    height: auto;
    aspect-ratio: 4 / 5;
    pointer-events: none;
    /* EXTRA MIGHT REMOVE */
    filter: grayscale(1) brightness(1.3);
}

#about_experiences {
    grid-column: 6 / 12;
    grid-row: 2;
}

#about_recognition {
    grid-column: 11 / -1;
    grid-row: 3;
}

main#about article div h2 {
    margin-bottom: 1rem;
}

main#about article div:not(#about_bio) p + p {
    text-indent: 0;
    margin-top: 1rem;
}

body.page-template-page-about #control_box {
    position: fixed;
    left: var(--2un);
    top: calc(var(--2un) * 2 + 1rem);
    width: calc(100vw - var(--2un) * 2);
    height: calc(100vh - var(--2un) * 3 - 1rem);
    pointer-events: none;
}

#color_control {
    pointer-events: all;
}

#color_control::after {
    background-color: var(--bgcolor);
}


/* 404 */
body.error404 main article p {
	grid-column: 9 / -1;
    font-size: 1.77rem;
    line-height: 120%;
    letter-spacing: -.015rem;
    font-variation-settings: "MONO" 0, "slnt" 0, "wght" 360;
}



/* INDEX PAGE */
body.page-template-page-index main#projects {
    min-height: calc(100vh - 1rem - var(--2un)* 4 - 1rem);
}

body.page-template-page-index #main_nav::before {
    background: var(--white);
}

#header_index {
    position: sticky;
    top: calc(1rem + var(--2un) * 2);
    background-color: white;
    z-index: 1;
}


#main_nav:not(.collapsed) ~ main #header_index {
    z-index: -1;
    transition: z-index 0s linear;
}

#main_nav.collapsed ~ main #header_index {
    transition: z-index 0s linear 1s;
}

.project_thumb.thumb_index a {
    display: contents;
}

#filter.menu_collapsable ul li:hover a {
    color: var(--black)!important;
}

#header_index h2 {
    font-size: var(--fontsizesmall);
    font-variation-settings: "MONO" 100, "slnt" 0, "wght" 420;
    letter-spacing: var(--letterspacingsmall);
    text-transform: uppercase;
}

#header_index > div {
    grid-column: span 1;
    border-bottom: 1px solid var(--black30);
    padding-bottom: calc(var(--1un) / 2);
    position: relative;
    min-height: calc(var(--fontsizeuniversal)* var(--lineheightuniversalcalc) + var(--1un));
    display: flex;
        align-content: center;
        align-items: center;
        justify-content: space-between;
}

#header_index > #index_client_project {
	    grid-column: span 3;
}

/*

#header_index nav#filter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: unset;
    align-items: flex-start;
}

#header_index nav#filter.menu_collapsable.collapsed div.filter_active, #filter div.filter_active {
    position: absolute;
    right: calc(var(--fontsizeuniversal )* var(--lineheightuniversalcalc) + var(--2un));
    opacity: 1!important;
}

#filter div.filter_active {
    opacity: 0!important;
}

#header_index nav#filter ul {
    margin: 0;
    margin-top: calc(1rem + var(--1un));
    flex-direction: column;
}

*/

.ithumb_year {
    grid-column: span 1;
}

.ithumb_client {
	    grid-column: span 3;
}

#header_index #index_name_project, .ithumb_title {
    grid-column: span 5;
}

#header_index #index_category_project, .ithumb_category {
    grid-column: span 7;
}

.project_thumb.thumb_index {
    border-bottom: 1px solid var(--black30);
    width: calc(100vw - var(--2un) * 2);
    grid-column: 1 / -1;
    padding-bottom: calc(var(--1un) - 2px);
    padding-bottom: calc(var(--1un) - 1px);
}

.project_thumb.thumb_index figure {
    position: fixed;
    width: calc(var(--singlecolumnprojects) * 7 + var(--1un) * 6);
    height: auto;
    top: 50vh;
    left: calc(var(--singlecolumnprojects) * 5 + var(--1un) * 5 + var(--2un));
    transform: translateY(-50%);
    display: none;
    z-index: -1;
    pointer-events: none;
	max-height: 70vh;
}

.project_thumb.thumb_index:hover figure {
    display: block;
}

body.page-template-page-index main#projects.filtering .project_thumb:not(.filter_active) {
    opacity: 1;
    pointer-events: none!important;
	display: none;
}

body.page-template-page-index main#projects.filtering .project_thumb {
    border-color: rgba(0, 0, 0, .2);
}

body.page-template-page-index main#projects.filtering .project_thumb:not(.filter_active) * {
    color: var(--black30);
}




/* SMALLER SCREENS */
@media only screen and (max-width: 1024px) {

    main#about article div {
        grid-column: span 9;
        border-bottom: 1px solid var(--black50);
        padding-bottom: var(--2un);
    }

    #about_profile {
        width: calc(var(--singlecolumnprojects)* 4 + var(--1un)* 3);
    }

    span#ft_lastupdate {
        display: none;
    }
	
	#about_recognition {
		border-color: transparent!important;
	}
	
	body.page-template-page-about footer {
		margin-top: var(--2un);
	}
	
	footer span#ft_copyright {
		grid-column: span 6;
	}
	
	footer span#ft_socials {
		grid-column: span 5;
		justify-content: flex-end;
	}

}






/* MOBILE SCREENS */
@media only screen and (max-width: 768px) {

    :root {
        --fontsizeuniversal: 16px;
        --textindent: calc(var(--singlecolumnprojects) * 6);
    }
	
	/* UNIVERSAL */
	.mobile {
	display: block;
}
	
	.nomobile {
	display: none;
}
	
	
	/* HOME */
	body.home {
		height: 100svh;
		overflow-y: hidden;
	}


    /* HEADER */
    header .title {
        width: 90%;
    }
    
    body.home header .title {
        width: 85vw;
    }

    header .title .title_intro p br, header .title .title_intro p div:nth-last-child(2) sup {
        display: none;
    }
	
	#actual_page span {
    max-width: 38vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
	}


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

    .project_thumb figure {
        aspect-ratio: 4 / 5;
    }

    .project_thumb figure img {
        height: 100%;
        display: none;
    }

    .project_thumb figure img.mob_img {
        display: block;
    }

    .project_thumb:hover figcaption {
        opacity: 0;
    }

    .project_columns_controls {
        display: none;
    }
	
	main#projects.filtering .project_thumb:not(.filter_active) {
		display: none;
	}


    /** INDIVIDUAL PROJECTS **/
    main#single_projects figure {
        grid-column: 1 / -1;
    }

    main#single_projects figure.size-medium {
        grid-column: span 8;
    }

    #lang_switch a {
        font-size: var(--fontsizeuniversal);
    }

    .description {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column-reverse;
        gap: var(--1un);
    }

    main#single_projects article .description:last-of-type {
        flex-direction: column;
        grid-column: span 8;
        margin-top: var(--1un);
    }

    main#single_projects article .description:last-of-type .half {
        margin: 0;
    }

    #more_projects {
        grid-column: span 8;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    #more_projects .button:first-child {
        display: none;
    }


    /* ABOUT */
    main#about article div {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--black50);
        padding-bottom: var(--2un);
    }
	
	
    #about_bio {
        grid-row: 2;
    }

    #about_experiences {
        grid-row: 3;
    }

    #about_recognition {
        grid-row: 4;
    }

    #about_profile {
        position: sticky;
        top: calc(var(--2un)* 2 + 1rem);
        width: 100%;
        grid-column: 9 / -1;
        z-index: -1;
    }


 /* INDEX PAGE */
    #header_index > div {
        grid-column: span 3;
    }

    #header_index #index_name_project, .ithumb_title {
        grid-column: span 6;
    }

    #header_index #index_category_project, .ithumb_category {
        grid-column: span 7;
    }

    #header_index #index_client_project, .ithumb_client {
        display: none;
    }
	
	.ithumb_year {
		grid-column: span 2;
	}

    .project_thumb.thumb_index {
        padding-bottom: var(--2un);
    }

    body.page-template-page-index main#projects {
        row-gap: var(--2un);
    }

    .project_thumb.thumb_index:hover figure {
        display: none;
    }


    /** FOOTER **/
    footer {
        align-items: end;
    }

    span#ft_copyright, span#ft_socials {
        display: none;
    }

    span#ft_nytime, span#ft_brtime {
        grid-column: span 8!important;
        text-align: left;
    }

    span#ft_lastupdate {
        grid-column: span 10;
    }
	
	/* 404 NOT FOUND */
body.error404 main article p {
	grid-column: 1 / -1;
}

}