/*!
Theme Name: Davide Poggio
Theme URI: https://www.dinoballiana.com
Author: Dino Balliana
Author URI: https://www.dinoballiana.com
Description: Custom theme for Davide Poggio
Version: 1.0.0
Tested up to: 8.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Davidepoggio
Tags: custom-theme,

This theme, like WordPress, is licensed under the GPL.

Davidepoggio is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Typography
	- Reset
	- Box sizing
	- Document
# Global vars
# Text
	- Links
# Media
	- Links
# Components
	- Forms
# Layout
	- Header
	- Navigation
	- Footer
# Templates
	- Home
# Plugins
# Utilities
	- Accessibility


--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Reset
--------------------------------------------- */

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

#wpadminbar {
  display: none !important;
}

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level. */
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html,
body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 !important;
  /* no bouncing scroll */
	height:100%;
  overscroll-behavior-y: none;
  /* no scrollbar */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  /* no tap color on mobile */
  -webkit-tap-highlight-color: transparent;
}


html {
  -webkit-text-size-adjust: 100%;
}

html::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

body {
  -webkit-font-smoothing: antialiased;
	background-color:var(--white);
	position:relative;
}

body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

body.on-cursor *{
	cursor:none !important;
}

body.on-overlay,body.on-contact{
	overflow:hidden !important;
}

/* Globals vars
	 ========================================================================== */

:root {
  /* Colors */
  --white: #fff;
  --black: #000;

  /* Text */

  /* Margin */
	--min-space:5px;
	--small-space:20px;
	--medium-space:50px;
	--big-space:120px;
	--bigger-space:160px;
	

  /* Layers */
	
	
	--contact-h:97px;
}

@media screen and (max-width: 1024px) {
  :root {
    /* Text */

    /* Margin */
  }
}

@media screen and (max-width: 767px) {
  :root {
    /* Text */

    /* Margin */
	  --contact-h:100px;
  }
}

@media screen and (max-width: 500px) {
  :root {
    /* Text */

    /* Margin */
	  --contact-h:80px;
  }
}

/* Text
	 ========================================================================== */

body,
button,
input,
select,
optgroup,
textarea,
a {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

p{
	line-height:22px;
}

@media screen and (max-width:767px){
	body,
button,
input,
select,
optgroup,
textarea,
a {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

p{
	line-height:18px;
}
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

blockquote {
  margin: 0;
}

address {
  margin: 0;
}

ul,
ol {
  margin: 0;
}

ul,
ol {
  list-style: none;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 0;
}

b,
strong,
.text-bold {
  font-weight: 700;
}

em {
  font-style: italic;
}

.text-medium{
	font-weight: 500;
} 

.text-upper{
text-transform:uppercase;
}

/* Selection
 --------------------------------------------- */

::-moz-selection {
  color: var(--white);
  background-color: var(--black);
}

::selection {
  color: var(--white);
  background-color: var(--black);
}

/* Text Hierarchy
 --------------------------------------------- */


.page-title {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Links
--------------------------------------------- */
a,
button {
	color:var(--black);
	text-decoration:none;
	border:none;
	background:transparent;
}

a:hover,
a:focus,
a:active,
button:hover,
button:focus,
button:active,
a:visited,
button:visited {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  /* no tap color on mobile */
  -webkit-tap-highlight-color: transparent;
	border:none;
	background:transparent;
}

button{
	padding:0;
	margin:0;
}
a:hover,button:hover{
	
}

/* Media
	 ========================================================================== */
/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
  max-width: 100%;
}

img,
video,
svg {
  height: auto;
  width: 100%;
  border-style: none;
  display: block;
}

/* Components
 	 ========================================================================== */

/* Cursor */

#custom-cursor{
	position:fixed;
	top:0;
	left:0;
	opacity:0;
	pointer-events:none;
	z-index:999999;
	mix-blend-mode:difference;
}

#custom-cursor.show{
	opacity:1;
}

#custom-cursor .action-cursor{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	background-color:var(--white);
	color:var(--black);
	padding:5px;
	white-space:nowrap;
	display:block;
}

#custom-cursor .default{
	opacity:1;
	background-color:var(--white);
	width:10px;
	height:10px;
	border-radius:100%;
	-webkit-transition:-webkit-transform .3s ease;
	transition:-webkit-transform .3s ease;
	-o-transition:transform .3s ease;
	transition:transform .3s ease;
	transition:transform .3s ease, -webkit-transform .3s ease;
	display:block;
}

#custom-cursor.on-default .default{
	-webkit-transform:scale(2);
	    -ms-transform:scale(2);
	        transform:scale(2);
}

/* More */

#custom-cursor.on-more .default{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
}

#custom-cursor.on-more .more{
	opacity:1;
	-webkit-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease;
	position:relative;
}

/* Prev & Next */

#custom-cursor.on-prev .default,#custom-cursor.on-next .default{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
}

#custom-cursor.on-next .next{
	opacity:1;
	-webkit-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease;
	position:relative;
}

#custom-cursor.on-prev .prev{
	opacity:1;
	-webkit-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease;
	position:relative;
}

/* TOP btn */

.top-btn{
	position:fixed;
	bottom:40px;
	right:var(--small-space);
	opacity:0;
	pointer-events:none;
	-webkit-transition:opacity .6s ease;
	-o-transition:opacity .6s ease;
	transition:opacity .6s ease;
}

.long-scroll .top-btn{
	opacity:1;
	pointer-events:auto;
}

.long-scroll .top-btn svg{
	width:25px;
}

@media screen and (max-width:767px){
	.top-btn{
	right:10px;
}
}

/* Contact
	 --------------------------------------------- */

.contact-btn{
	cursor:pointer;
}

.contact-btn svg{
	width:17px;
	height:17px;
}

.contact-block{
	background-color:var(--white);
	padding:var(--small-space);
	display:-ms-grid;
	display:grid;
	-ms-grid-columns: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
	width:100vw;
	-webkit-transform:translate3d(0,-100%,0);
	        transform:translate3d(0,-100%,0);
	position:fixed;
	-webkit-transition:-webkit-transform .3s ease;
	transition:-webkit-transform .3s ease;
	-o-transition:transform .3s ease;
	transition:transform .3s ease;
	transition:transform .3s ease, -webkit-transform .3s ease;
	z-index:9999;
}

.contact-col{
	-ms-grid-column-align:left;
	    justify-self:left;
	-ms-flex-item-align:start;
	    align-self:flex-start;
	
}

.contact-col:nth-child(2){
	-ms-grid-column-align:center;
	    justify-self:center;
}

.contact-col:nth-child(3){
	text-align:right;
	-ms-grid-column-align:right;
	    justify-self:right;
}

.link-list li{
	padding-bottom:var(--min-space);
}

/* animation */

.on-contact .contact-block{
	-webkit-transform:translate3d(0,0%,0);
	        transform:translate3d(0,0%,0);
	
}

.site-main{
	-webkit-transition:-webkit-transform .3s ease;
	transition:-webkit-transform .3s ease;
	-o-transition:transform .3s ease;
	transition:transform .3s ease;
	transition:transform .3s ease, -webkit-transform .3s ease;
}

.on-contact .site-main{
	-webkit-transform:translate3d(0,var(--contact-h),0);
	        transform:translate3d(0,var(--contact-h),0);
}



@media screen and (max-width:767px){
	.contact-col{
	width:50%;
}

.contact-col:nth-child(2){
	text-align:left;
}

.contact-col:nth-child(3){
	width:50px;
}

.link-list li{
	padding-bottom:8px;
}
}

@media screen and (max-width:500px){
	.contact-block{
	padding:10px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}
	.contact-col:nth-child(3){
	width:40px;
}
		.contact-col{
	width:calc((100% - 40px) / 2);
}
}


/* Gallery Overlay */

#prj-overlay{
	width:100%;
	height:100dvh;
	position:fixed;
	top:0;
	left:0;
	opacity:0;
	z-index:9999;
	background-color:var(--bg-color);
	color:var(--txt-color);
	-webkit-transform:scale(.99);
	    -ms-transform:scale(.99);
	        transform:scale(.99);
	pointer-events:none;
	-webkit-transition:opacity .4s ease, -webkit-transform .3s ease;
	transition:opacity .4s ease, -webkit-transform .3s ease;
	-o-transition:opacity .4s ease, transform .3s ease;
	transition:opacity .4s ease, transform .3s ease;
	transition:opacity .4s ease, transform .3s ease, -webkit-transform .3s ease;
	padding:50px var(--small-space);
}

#prj-overlay *{
	pointer-events:none !important;
}

.on-overlay #prj-overlay{
	opacity:1;
	-webkit-transform:scale(1);
	    -ms-transform:scale(1);
	        transform:scale(1);
	pointer-events:auto;
}

.on-overlay #prj-overlay *{
	pointer-events:auto !important;
}

#prj-overlay .overlay-btn{
	position:fixed;
	top:var(--small-space);
	right:var(--small-space);
}

.overlay-btn svg{
	width:17px;
	height:17px;
}

#prj-overlay .overlay-btn svg path{
	fill:var(--txt-color) !important;
}

#prj-overlay .overlay-wrap{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	position: relative;
    height: 100%;
}

#prj-overlay .overlay-wrap .overlay-column{
	width:220px;
}

#prj-overlay .overlay-wrap .info-container{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	padding-left:var(--small-space);
}

.project-info .title-wrap{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	padding-bottom:20px;
}

#prj-overlay .overlay-wrap .info-container #prj-title{
	
	padding-right:3px;
} 

.overlay-wrap .info-container .single-image-info{
	position:absolute;
	opacity:0;
	-webkit-transform:translate3d(0,5px,0);
	        transform:translate3d(0,5px,0);
	margin-top:40px;
}

.overlay-wrap .info-container .single-image-info.active{
	position:relative;
	opacity:1;
	-webkit-transform:translate3d(0,0px,0);
	        transform:translate3d(0,0px,0);
	-webkit-transition:opacity .6s ease, -webkit-transform .6s ease;
	transition:opacity .6s ease, -webkit-transform .6s ease;
	-o-transition:opacity .6s ease, transform .6s ease;
	transition:opacity .6s ease, transform .6s ease;
	transition:opacity .6s ease, transform .6s ease, -webkit-transform .6s ease;
}

.overlay-wrap .info-container .alt-text{
	font-weight:700;
	text-transform:uppercase;
	margin-bottom:10px;
}



#prj-overlay .overlay-wrap .preview-wrapper{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column wrap;
	        flex-flow: column wrap;
	height:100%;
	-webkit-box-pack:start;
	    -ms-flex-pack:start;
	        justify-content:flex-start;
	-ms-flex-line-pack:start;
	    align-content:flex-start;
	gap:10px;
}

#prj-overlay .overlay-wrap .preview-container img{
	width:60px;
	height:60px;
	-o-object-fit:cover;
	   object-fit:cover;
	-o-object-position:center;
	   object-position:center;
	-webkit-transition:-webkit-transform .3s ease;
	transition:-webkit-transform .3s ease;
	-o-transition:transform .3s ease;
	transition:transform .3s ease;
	transition:transform .3s ease, -webkit-transform .3s ease;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
}

#prj-overlay .overlay-wrap .preview-container img:hover{
	-webkit-transform:scale(1.05);
	    -ms-transform:scale(1.05);
	        transform:scale(1.05);
	-webkit-filter: grayscale(0%);
	        filter: grayscale(0%);
}

#prj-overlay .overlay-wrap .preview-container img.active{
	-webkit-filter: grayscale(0%);
	        filter: grayscale(0%);
}

#prj-overlay .overlay-wrap .img-container{
	width:calc(100% - 440px);
	overflow:hidden;
}

#prj-overlay .img-container img{
	width:100%;
	height:100%;
	-o-object-fit:contain;
	   object-fit:contain;
	-o-object-position:center;
	   object-position:center;
	opacity:0;
	-webkit-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease; 
}

#prj-overlay .img-container .swiper-slide-active img{
	opacity:1;
}

#prj-overlay .img-container .arrow-wrap{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	gap:80px;
	position:absolute;
	bottom:-33px;
	left:0;
	width:100%;
}

.on-click #prj-overlay .img-container .arrow-wrap{
	display:none;
}

.on-touch #prj-overlay .img-container .arrow-wrap{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}

.arrow-wrap .slide-prev{
	-webkit-transform:scale(-1);
	    -ms-transform:scale(-1);
	        transform:scale(-1);
}

#prj-overlay .slide-btn svg{
	height:17px;
}

#prj-overlay .slide-btn svg path{
	fill:var(--txt-color) !important;
}


@media screen and (max-width:1024px){
	
	#prj-overlay .overlay-wrap{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		    -ms-flex-direction:column;
		        flex-direction:column;
		-webkit-box-pack:justify;
		    -ms-flex-pack:justify;
		        justify-content:space-between;
		position: relative;
		height: 100%;
	}
	
	#prj-overlay .overlay-wrap .preview-container{
		display:none;
	}
	
	#prj-overlay .overlay-wrap .img-container{
	width:100%;
	position:relative;
		padding-bottom:30px;
}
	#prj-overlay .img-container .arrow-wrap{
	bottom:0px;
	width:100%;
	display:block;	
}
	
	
#prj-overlay .overlay-wrap .info-container{
	padding-left:0;
	padding-top:var(--small-space);
	width:100%;
}

#prj-overlay .overlay-wrap .info-container .info-wrapper{
	width:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}
	
	
#prj-overlay .overlay-wrap .info-container #prj-title{
	padding-bottom:20px;
}
	.overlay-wrap .info-container .single-image-info{
	margin-top:0;
}
	
	.image-info, .project-info{
		width:50%;
	}
	
	
	
	.single-image-info{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-orient:vertical;
		-webkit-box-direction:reverse;
		    -ms-flex-direction:column-reverse;
		        flex-direction:column-reverse;
		-webkit-box-align:end;
		    -ms-flex-align:end;
		        align-items:flex-end;
	}
	.n-slide{
		padding-bottom:2px;
	}
}

@media screen and (max-width:500px){
	#prj-overlay .img-container .arrow-wrap{
		-webkit-box-pack:justify;
		    -ms-flex-pack:justify;
		        justify-content:space-between;
	}
	#prj-overlay .slide-btn{
		width:15px;
	}
	#prj-overlay .slide-btn svg{
	height:20px;
}
}

/* Layouts
	 ========================================================================== */


/* Header
	 --------------------------------------------- */

.section-hero{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	height:100svh;
	width:100%;
	position:absolute;
}


.site-header{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
	padding:var(--small-space);
	width:100%;
	color:var(--white);
	z-index:999;
	-webkit-transition:-webkit-transform .3s ease;
	transition:-webkit-transform .3s ease;
	-o-transition:transform .3s ease;
	transition:transform .3s ease;
	transition:transform .3s ease, -webkit-transform .3s ease;
}

.site-header.is-sticky{
	position: fixed;
	top:0%;
	-webkit-transform:translate3d(0,0%,0);
	        transform:translate3d(0,0%,0);
	z-index:999;
}

.site-header.is-sticky.on-white{
	mix-blend-mode:difference;
}

.on-contact .site-header{
	-webkit-transform:translate3d(0,var(--contact-h),0);
	        transform:translate3d(0,var(--contact-h),0);
}

.site-header :nth-child(1){
	-ms-grid-column-align: start;
	    justify-self: start;
	-ms-flex-item-align:center;
	    -ms-grid-row-align:center;
	    align-self:center;
	color:var(--white);

}

.site-header :nth-child(2){
	-ms-grid-column-align: center;
	    justify-self: center;
	-ms-flex-item-align:center;
	    -ms-grid-row-align:center;
	    align-self:center;
	color:var(--white);
}

.site-header :nth-child(3){
	-ms-grid-column-align: end;
	    justify-self: end;
	-ms-flex-item-align:center;
	    -ms-grid-row-align:center;
	    align-self:center;
	color:var(--white);
}

.site-header .site-description, 
.site-header .contact-btn{
	opacity:0;
} 

.site-header.is-sticky.on-white .site-description, 
.site-header.is-sticky.on-white .contact-btn{
	opacity:1;
} 

.site-description{
	display:inline-block;
}

.site-title a{
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:5px;
	font-size:30px;
	line-height:30px;
	pointer-events:none;
}

.is-sticky .site-title a{
	pointer-events:auto;
}

@media screen and (max-width:767px){
	
	.site-header{
	padding:10px 10px;
}
	
.site-title a{
	letter-spacing:3px;
	font-size:23px;
	line-height:23px;
}
	.site-header .site-description{
		opacity:0 !important;
		font-size:4px;
		line-height:4px;
	}

}

@media screen and (max-width:500px){
	.site-title a{
	letter-spacing:2px;
	font-size:18px;
	line-height:18px;
}
	
	
}



/*--------------------------------------------------------------
# Pages
--------------------------------------------------------------*/

/* Home
	--------------------------------------------- */


/* Intro Animation */

.hero .swiper-wrapper{
	overflow:hidden;
	opacity:0;
	-webkit-transform:translatez(0) scale(0.2);
	    -ms-transform:translatez(0) scale(0.2);
	        transform:translatez(0) scale(0.2);
}

.on-load .hero .swiper-wrapper{
	opacity:1;
	-webkit-transform:translatez(0) scale(1);
	    -ms-transform:translatez(0) scale(1);
	        transform:translatez(0) scale(1);
	-webkit-transition: opacity .8s .8s, -webkit-transform 1s 2s;
	transition: opacity .8s .8s, -webkit-transform 1s 2s;
	-o-transition: opacity .8s .8s, transform 1s 2s;
	transition: opacity .8s .8s, transform 1s 2s;
	transition: opacity .8s .8s, transform 1s 2s, -webkit-transform 1s 2s;
}

.hero #intro-grid{
	padding:10px;
	width:100%;
	height:100dvh;
	 display:-ms-grid;
	 display:grid;
	gap:10px;
  	-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
  	grid-template-columns: repeat(5, 1fr);
  	-ms-grid-rows: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
  	grid-template-rows: repeat(5, 1fr);
	position:fixed;
	top:0;
	left:0;
	pointer-events:none;
}

.hero #intro-grid > *:nth-child(1){
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.hero #intro-grid > *:nth-child(2){
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.hero #intro-grid > *:nth-child(3){
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.hero #intro-grid > *:nth-child(4){
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

.hero #intro-grid > *:nth-child(5){
  -ms-grid-row: 1;
  -ms-grid-column: 9;
}

.hero #intro-grid > *:nth-child(6){
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.hero #intro-grid > *:nth-child(7){
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.hero #intro-grid > *:nth-child(8){
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.hero #intro-grid > *:nth-child(9){
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}

.hero #intro-grid > *:nth-child(10){
  -ms-grid-row: 3;
  -ms-grid-column: 9;
}

.hero #intro-grid > *:nth-child(11){
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

.hero #intro-grid > *:nth-child(12){
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}

.hero #intro-grid > *:nth-child(13){
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}

.hero #intro-grid > *:nth-child(14){
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}

.hero #intro-grid > *:nth-child(15){
  -ms-grid-row: 5;
  -ms-grid-column: 9;
}

.hero #intro-grid > *:nth-child(16){
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}

.hero #intro-grid > *:nth-child(17){
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}

.hero #intro-grid > *:nth-child(18){
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}

.hero #intro-grid > *:nth-child(19){
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}

.hero #intro-grid > *:nth-child(20){
  -ms-grid-row: 7;
  -ms-grid-column: 9;
}

.hero #intro-grid > *:nth-child(21){
  -ms-grid-row: 9;
  -ms-grid-column: 1;
}

.hero #intro-grid > *:nth-child(22){
  -ms-grid-row: 9;
  -ms-grid-column: 3;
}

.hero #intro-grid > *:nth-child(23){
  -ms-grid-row: 9;
  -ms-grid-column: 5;
}

.hero #intro-grid > *:nth-child(24){
  -ms-grid-row: 9;
  -ms-grid-column: 7;
}

.hero #intro-grid > *:nth-child(25){
  -ms-grid-row: 9;
  -ms-grid-column: 9;
}

.on-load .hero #intro-grid{
	-webkit-transform:scale(1.5);
	    -ms-transform:scale(1.5);
	        transform:scale(1.5);
	opacity:0;
	-webkit-transition: opacity .1s 3s, -webkit-transform .8s 2s;
	transition: opacity .1s 3s, -webkit-transform .8s 2s;
	-o-transition: transform .8s 2s, opacity .1s 3s;
	transition: transform .8s 2s, opacity .1s 3s;
	transition: transform .8s 2s, opacity .1s 3s, -webkit-transform .8s 2s;
}

#intro-grid .grid-item{
	opacity:0;
}

#intro-grid .grid-item img{
	width:100%;
	height:100%;
	-o-object-fit:cover;
	   object-fit:cover;
	-o-object-position:center;
	   object-position:center;
}


.on-load #intro-grid .grid-item{
	opacity:1;
}

.on-load #intro-grid .grid-item:first-child{
	-webkit-transition: opacity .8s ease .2s;
	-o-transition: opacity .8s ease .2s;
	transition: opacity .8s ease .2s;
}

.on-load #intro-grid .grid-item:nth-child(2){
	-webkit-transition: opacity .8s ease .41s;
	-o-transition: opacity .8s ease .41s;
	transition: opacity .8s ease .41s;
}

.on-load #intro-grid .grid-item:nth-child(4){
	-webkit-transition: opacity .8s ease .55s;
	-o-transition: opacity .8s ease .55s;
	transition: opacity .8s ease .55s;
}

.on-load #intro-grid .grid-item:nth-child(3){
	-webkit-transition: opacity .8s ease .8s;
	-o-transition: opacity .8s ease .8s;
	transition: opacity .8s ease .8s;
}

.on-load .hero .swiper-wrapper{
	opacity:1;
	-webkit-transform:translatez(0) scale(1);
	    -ms-transform:translatez(0) scale(1);
	        transform:translatez(0) scale(1);
	-webkit-transition: opacity .8s .8s, -webkit-transform 1s 2s;
	transition: opacity .8s .8s, -webkit-transform 1s 2s;
	-o-transition: opacity .8s .8s, transform 1s 2s;
	transition: opacity .8s .8s, transform 1s 2s;
	transition: opacity .8s .8s, transform 1s 2s, -webkit-transform 1s 2s;
}

.on-load #intro-grid .grid-item:nth-child(6){
	-webkit-transition: opacity .8s ease .8s;
	-o-transition: opacity .8s ease .8s;
	transition: opacity .8s ease .8s;
}

.on-load #intro-grid .grid-item:nth-child(5){
	-webkit-transition: opacity .8s ease .95s;
	-o-transition: opacity .8s ease .95s;
	transition: opacity .8s ease .95s;
}

.on-load #intro-grid .grid-item:nth-child(7){
	-webkit-transition: opacity .8s ease .95s;
	-o-transition: opacity .8s ease .95s;
	transition: opacity .8s ease .95s;
}

.on-load #intro-grid .grid-item:nth-child(8){
	-webkit-transition: opacity .8s ease 1s;
	-o-transition: opacity .8s ease 1s;
	transition: opacity .8s ease 1s;
}


#intro-grid .grid-item:first-child{
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
  	-ms-grid-row: 1;
  	-ms-grid-row-span: 1;
  	grid-row: 1 / 2;
}


#intro-grid .grid-item:nth-child(2){
	-ms-grid-column: 3;
	-ms-grid-column-span: 1;
	grid-column: 3/ 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}



#intro-grid .grid-item:nth-child(3){
	-ms-grid-column: 5;
	grid-column: 5/ 5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
	
}

#intro-grid .grid-item:nth-child(4){
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/ 2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}



#intro-grid .grid-item:nth-child(5){
	-ms-grid-column: 5;
	grid-column: 5/ 5;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}


#intro-grid .grid-item:nth-child(6){
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1/ 2;
  	-ms-grid-row: 5;
  	grid-row: 5 / 5;
}

#intro-grid .grid-item:nth-child(7){
	-ms-grid-column: 3;
	-ms-grid-column-span: 1;
	grid-column: 3/ 4;
  -ms-grid-row: 5;
  grid-row: 5 / 5;
}



#intro-grid .grid-item:nth-child(8){
	-ms-grid-column: 5;
	grid-column: 5/ 5;
  	-ms-grid-row: 5;
  	grid-row: 5 / 5;
}


.site-header .site-branding a,.hero .cover-text.site-description,.hero .contact-btn{
	opacity:0;
}

.on-load .site-header .site-branding a,
.on-load .hero .site-description{
	opacity:1;
	-webkit-transition:opacity .8s 3s;
	-o-transition:opacity .8s 3s;
	transition:opacity .8s 3s;
}


.on-load .hero .contact-btn{
	opacity:1;
	-webkit-transition: opacity .8s 4s;
	-o-transition: opacity .8s 4s;
	transition: opacity .8s 4s;
}



/* Intro Animation with cookie */

/*.cookies-accepted .hero #intro-grid{
	display:none;
}

.cookies-accepted.on-load .hero .swiper-wrapper{
	opacity:1;
	transform:translatez(0) scale(1);
	transition: none;
}


.cookies-accepted.on-load .site-header .site-branding a,
.cookies-accepted.on-load .hero .site-description{
	opacity:1;
	transition:opacity .8s 1s;
}


.cookies-accepted.on-load .hero .contact-btn{
	opacity:1;
	transition: opacity .8s 2s;
}
*/



/* hero */


.hero{
	position:relative;
	
}

.hero .cover-text{
	position:absolute;
	color:var(--white);
	z-index:999;
}

.hero .cover-text.contact-btn{
	top:var(--small-space);
	left:50%;
	-webkit-transform:translate3d(-50%,0,0);
	        transform:translate3d(-50%,0,0);
}

.hero .cover-text.site-description{
	top:50%;
	left:50%;
	-webkit-transform:translate3d(-50%,calc(-50% + 25px),0);
	        transform:translate3d(-50%,calc(-50% + 25px),0);
	font-size:16px;
	letter-spacing:3px;
	white-space:nowrap;
}

.hero .swiper-slide{
	width:100%;
	height:100svh;
}

.hero .swiper-slide img{
	width:100%;
	height:100%;
	-o-object-fit:cover;
	   object-fit:cover;
	-o-object-position:center;
	   object-position:center;
}

@media screen and (max-width:767px){
	
	.hero .cover-text.site-description{
		top:50%;
		left:50%;
		-webkit-transform:translate3d(-50%,calc(-50% + 25px),0);
		        transform:translate3d(-50%,calc(-50% + 25px),0);
		font-size:11px;
		letter-spacing:3px;
	}
}

@media screen and (max-width:500px){
	.hero .cover-text.site-description{
		top:50%;
		left:50%;
		-webkit-transform:translate3d(-50%,calc(-50% + 21px),0);
		        transform:translate3d(-50%,calc(-50% + 21px),0);
		font-size:9px;
		letter-spacing:2px;
	}
}
	


.section{
	padding:var(--big-space) var(--bigger-space) 0;
	max-width:1600px;
	margin:0 auto;
	opacity:0;
}

.on-load .section{
	opacity:1;
	-webkit-transition: opacity .2s linear 3s;
	-o-transition: opacity .2s linear 3s;
	transition: opacity .2s linear 3s;
}


.section.bio p{
	text-align:justify;
	max-width:650px;
	margin:0 auto;
}

.projects .img-block{
	margin-bottom:var(--big-space);
}

.projects .img-block .info-wrap{
	padding-top:10px;
}

.projects .img-block .info-wrap .image-description{
	line-height:18px;
}


.projects .two-images{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	gap:120px;
}

.projects .img-block .column{
	width:50%;
}


.projects .img-block img{
	height:80vh;
	max-height:710px;
	min-height:650px;
	width:100%;
	-o-object-fit:cover;
	   object-fit:cover;
}

@media screen and (max-width:1280px){
	.section{
		padding:var(--big-space) var(--big-space) 0;
	}
	

	
	.projects .img-block img{
		max-height:600px;
		min-height:550px;
	}
	
	.projects .two-images{
	gap:80px;
}
}

@media screen and (max-width:1024px){
	.section{
		padding:var(--big-space) var(--medium-space) 0;
	}
	
		.projects .img-block{
	margin-bottom:var(--medium-space);
}
	
	.projects .img-block img{
		max-height:500px;
		min-height:450px;
	}
	
	.projects .two-images{
	gap:var(--medium-space);
}
}

@media screen and (max-width:767px){
	
		.projects .img-block{
	margin-bottom:var(--medium-space);
}
	
	.projects .img-block img{
		max-height:400px;
		min-height:400px;
	}
	
	.projects .two-images{
	gap:0;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		    -ms-flex-direction:column;
		        flex-direction:column;
}
	.projects .img-block .column{
	width:100%;
		margin-bottom:var(--medium-space);
}
	.projects .img-block .column:last-child{
		margin-bottom:0;
}
}

.projects .img-block .img-container{
	overflow:hidden;
	position:relative;
	cursor:none;
	opacity:1;
	-webkit-transition:opacity .4s ease;
	-o-transition:opacity .4s ease;
	transition:opacity .4s ease;
}


.projects .img-block .img-container.not-loaded{
	opacity:0;
}



.img-container .cursor{
	position:absolute;
	top:0;
	left:0;
	padding:var(--min-space);
	background-color:var(--white);
	mix-blend-mode:difference;
	z-index:10;
	opacity:0;
	pointer-events:none;
}

.img-container.on-cursor .cursor{
	opacity:1;
}

/* Pagina Privacy */

.privacy-policy .section-hero{
	height:auto;
	position:fixed;
	mix-blend-mode:difference;
}

.privacy-policy .site-header .site-description,.privacy-policy .site-header .contact-btn{
	opacity:1;
}

.privacy-policy .site-title a{
	pointer-events:auto;
	opacity:1;
}

.deafult-page{
	padding:var(--big-space);
	max-width:1440px;
	margin:0 auto;
}

.privacy-policy .entry-header h1{
	font-weight:700;
	text-transform:uppercase;
	margin-bottom:var(--small-space);
}

@media screen and (max-width:767px){
	.deafult-page{
	padding:var(--big-space) var(--small-space);
}
}

/* 404 Page */

.error404.on-load .hero .swiper-wrapper{
	opacity:1;
	transform:translatez(0) scale(1);
	transition: none;
}

.error404 .site-header{
	display:none;
}

.error404.on-load .hero .site-description{
	opacity:1;
	transition:opacity .8s 1s;
	text-align:center;
}


.error404.on-load .hero .contact-btn{
	opacity:1;
	transition: opacity .8s 2s;
}

.error404 .back-link{
	margin-top:20px;
	display:inline-block;
	color:var(--white);
}

.error404 h1{
	font-size:30px;
	line-height:30px;
	margin-bottom:15px;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Cookie banner */

#cookie-notice *{
	font-family: "Montserrat", sans-serif;
}

#cookie-notice{
	left:auto;
	right:50%;
	-webkit-transform:translate3d(50%,0,0);
	        transform:translate3d(50%,0,0);
	width:300px;
	min-width:300px;
	bottom:20px;
	z-index:999;
	opacity:0;
	-webkit-animation-name:none !important;
	        animation-name:none !important;
}

.on-load #cookie-notice{
	opacity:1;
	-webkit-transition:opacity .4s ease 4s;
	-o-transition:opacity .4s ease 4s;
	transition:opacity .4s ease 4s;
}

.cookies-accepted #cookie-notice{
	opacity:0;
	-webkit-transition:opacity .3s ease;
	-o-transition:opacity .3s ease;
	transition:opacity .3s ease;
}

#cookie-notice .cookie-notice-container{
	padding:10px;
	border:none;
}

#cookie-notice .cn-text-container{
	margin-bottom:15px;
	font-weight:400;
}

#cookie-notice #cn-close-notice{
	display:none;
}


#cookie-notice .cn-button:not(.cn-button-custom){
	border-radius: 0;
    padding: 8.5px 25px;
	text-transform:uppercase;
	font-size:12px;
	margin:0;
}


@media screen and (max-width:767px){
	#cookie-notice{
		left:20px;
		right:20px;
		width:calc(100% - 40px);
		min-width:calc(100% - 40px);
		bottom:20px;
		-webkit-transform:translate3d(0%,0,0);
		        transform:translate3d(0%,0,0);
	}
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  -webkit-clip-path: none;
          clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

:root {
    --ticker-animation-duration: 20s;
    --ticker-gap-x: 5px;
    /* horizontal gap */
    --ticker-img-width: 280px
}

@media (min-width: 48rem) {
    :root {
        --ticker-img-width:400px
    }
}

@media (min-width: 64rem) {
    :root {
        --ticker-img-width:550px
    }
}

.ticker {
    overflow: hidden
}

.ticker__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
    will-change: transform;
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

/* class added in JS to trigger the scrolling animation */
.ticker--animate .ticker__list {
    -webkit-animation: ticker-animation var(--ticker-animation-duration) infinite;
            animation: ticker-animation var(--ticker-animation-duration) infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear
}

/* pause animation on hover or using an external control button */
.ticker[data-ticker-pause-hover=on] .ticker__list:hover,.ticker--paused .ticker__list {
    -webkit-animation-play-state: paused;
            animation-play-state: paused
}

.ticker__item {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-right: calc(var(--ticker-gap-x) / 2);
    margin-left: calc(var(--ticker-gap-x) / 2)
}

.ticker__img {
    display: block;
    width: var(--ticker-img-width)
}

.ticker-control {
    /* pause/play button */
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 40px;
    height: 40px;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
    border-radius: 50%;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.ticker-control i {
    /* icon */
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
    color: var(--color-bg)/* icon color */
}

.ticker-control i::before,.ticker-control i::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: currentColor;
    transition: -webkit-clip-path 0.2s var(--ease-out);
    -webkit-transition: -webkit-clip-path 0.2s var(--ease-out);
    -o-transition: clip-path 0.2s var(--ease-out);
    transition: clip-path 0.2s var(--ease-out);
    transition: clip-path 0.2s var(--ease-out), -webkit-clip-path 0.2s var(--ease-out);
    transition: clip-path 0.2s var(--ease-out),-webkit-clip-path 0.2s var(--ease-out)
}

.ticker-control i::before {
    -webkit-clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px));
    clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px))
}

.ticker-control i::after {
    -webkit-clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
    clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px))
}

.ticker-control:hover {
    cursor: pointer;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95)
}

.ticker-control[aria-pressed=true] i::before {
    -webkit-clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%);
    clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%)
}

.ticker-control[aria-pressed=true] i::after {
    -webkit-clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
    clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px))
}

/* ticker--anim-off class turns off translate animation - added in JS if reduced-motion option is on */
.ticker:not(.ticker--anim-off) .ticker__list {
    overflow: visible
}

.ticker--reverse:not(.ticker--anim-off) .ticker__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse
}

.ticker--reverse.ticker--animate:not(.ticker--anim-off) .ticker__list {
    -webkit-transform: translateX(calc(100vw - 100%));
        -ms-transform: translateX(calc(100vw - 100%));
            transform: translateX(calc(100vw - 100%));
    -webkit-animation-name: ticker-animation-reverse;
            animation-name: ticker-animation-reverse
}

/* intermediate steps are added to fix a bug on Safari */
@-webkit-keyframes ticker-animation {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%)
    }
}
@keyframes ticker-animation {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%)
    }
}

@-webkit-keyframes ticker-animation-reverse {
    0% {
        -webkit-transform: translateX(calc(100vw - 100%));
                transform: translateX(calc(100vw - 100%))
    }

    100% {
        -webkit-transform: translateX(calc(100vw - 50%));
                transform: translateX(calc(100vw - 50%))
    }
}

@keyframes ticker-animation-reverse {
    0% {
        -webkit-transform: translateX(calc(100vw - 100%));
                transform: translateX(calc(100vw - 100%))
    }

    100% {
        -webkit-transform: translateX(calc(100vw - 50%));
                transform: translateX(calc(100vw - 50%))
    }
}