@charset "utf-8";

/* === CSS IMPORTS === */
@import url(_content/style/objects/footer.css);
@import url(_content/style/objects/fullflexandrows.css);
@import url(_content/style/objects/header.css);
@import url(_content/style/objects/sidepanel.css);

@import url(_content/style/pages/contatti.css);
@import url(_content/style/pages/home.css);
@import url(_content/style/pages/projects.css);
@import url(_content/style/pages/pubblicazioni.css);
@import url(_content/style/pages/servizi.css);
@import url(_content/style/pages/studio.css);

@import url(_content/style/text.css);

/* === CUSTOM PROPERTIES === */
:root {
  --arancio: #d75c3e;
  --green1t: #EEF1EE;
  --W: 25vw;
}

@font-face {
	font-family: athena;
	src: url(_content/fonts/Athena.ttf);
}
@font-face {
	font-family: DMSerifDisplay-Italic;
	src: url(_content/fonts/DMSerifDisplay-Italic.ttf);
}
@font-face {
	font-family: belleza;
	src: url(_content/fonts/Belleza-Regular.ttf);
}
@font-face {
	font-family: lato-light;
	src: url(_content/fonts/Lato-Light.ttf);
}
@font-face {
	font-family: lato;
	src: url(_content/fonts/Lato-Regular.ttf);
}

html,
body {
	height: 100%;
	width: 100%;
}

a,
body,
center,
div,
embed,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
img,
s {
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}

body {
	font-family: helveticaneue, helvetica, sans-serif;
	letter-spacing: .02em;
	font-size: 12px;
	line-height: 20px;
	line-height: 1;
	scrollbar-width: none;
	padding-bottom: 0px;
}

html {
	overflow: scroll;
	overflow-x: hidden
}

a {
	text-decoration: none;
	color: #000
}

img {
	width: 100%;
	height: auto;
	vertical-align: top
}

/* text */
p {
	margin-bottom: 1em
}

h1 {
	display: inline-block;
	font-size: 13px;
	line-height: 22px;
	font-family: lato;
	letter-spacing: 2px;
	color: var(--arancio);
}

h2 {
	display: inline-block;
	font-size: 37.5px;
	line-height: 65px;
	font-family: athena;
	letter-spacing: 2px;
	letter-spacing: 6px;
	color: var(--arancio);
}

h3 {
	display: inline-block;
	font-size: 17px;
	line-height: 27px;
	font-family: belleza;
	letter-spacing: 1.5px;
	color: var(--arancio);
}

h4 {
	display: inline-block;
	font-size: 23px;
	line-height: 45px;
	font-family: belleza;
	letter-spacing: -0.5px;
	color: var(--arancio);
	text-decoration: underline;
}

h5 {
	display: inline-block;
	font-size: 27px;
	line-height: 50px;
	font-family: athena;
	letter-spacing: 3px;
	color: var(--arancio);
}


h8 {
	display: inline-block;
	/*testo bio*/
	font-size: 16px;
	line-height: 23px;
	font-family: belleza;
	letter-spacing: 0.5px;
	color: #a39f94;
}

/* colors */
:root {
	--blue: #1e90ff;
	--white: #ffffff;
	--arancio: #7c5f3d;
	--giallo: #cdc8ba;
	--black: #000000;
	--green1: rgba(95, 112, 96, 1);
	--green1t: rgba(95, 112, 96, 0.3);
	--green1tnot: rgb(207, 212, 207);
	--lightgreen1: rgb(221, 225, 224, 1);
	--lightgreen2: rgb(198, 202, 201, 1);
	--transparent: rgba(0, 0, 0, 0);
	--bianco: rgba(255, 255, 255, 1);
	 --W: 300px;
	--WL: 375px;
	transition: ease all .5s;
}

body {
	--Ecolor1: rgba(221, 225, 224, 1);
	/* --Ecolor2:rgba(221,225,224,1); */
	--Ecolor3: rgba(95, 112, 96, 0.3);
}

.Ecolor1 {
	background-color: rgba(95, 112, 96, 1);
	background-color: var(--Ecolor1)
}

.Ecolor3 {
	background-color: rgba(95, 112, 96, 1);
	background-color: var(--Ecolor3)
}

.color1 {
	background-color: rgba(95, 112, 96, 0.3)
}


/* varie */
:focus {
	outline: 0
}

::-webkit-scrollbar {
	width: 0;
	background: 0 0
}

::-webkit-scrollbar-thumb {
	background: 0 0
}

/* oggetti */
#dimmer {
	z-index: 99;
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
	height: 100vh;
	width: 100%;
	position: absolute;
}

#wrapper {
	margin-top: 70px;
	height: 100vh;
}

.coverwrap {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch
}

.cover {
	-o-object-fit: cover;
	object-fit: cover;
	min-height: 100%;
}

.square {
	width: 50%;
	position: relative;
	overflow: hidden;
	height: 100%;
	/*height:calc(50vh - 35px);*/
}

.square img {
	max-width: 100%;
	height: auto;

	/*
width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: auto;*/

}


/* proprietà */
.left {
	float: left
}

.center {
	text-align: center
}

.clear {
	clear: both
}

.flex {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-direction: row;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-direction: row;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-ms-flex-align: start;
	-webkit-box-align: start;
	align-items: flex-start
}

.hide {
	display: none;
}

.bold,
strong {
	font-weight: 700
}

.overflow {
	overflow: auto
}

.upper {
	text-transform: uppercase
}

/* publ serv */
#mainleft {
	overflow: scroll;
	-ms-flex-order: 2;
	-webkit-box-ordinal-group: 3;
	order: 2;
	-ms-flex: 0 1 410px;
	-webkit-box-flex: 0 1 410px;
	flex: 0 0 410px;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	-ms-grid-row-align: auto;
	align-self: auto;
	height: calc(100vh - 70px);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.padd30 {
	padding: 30px
}

.marg30 {
	margin-bottom: 30px
}

.grid-item-height {
	width: 100%;
	padding-top: 100%;
	position: relative;
	overflow: hidden
}

.grid-item-height img {
	position: absolute;
	top: 50%;
	left: 50%;
	right: 0;
	bottom: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	min-height: 100%;
	width: auto;
	min-width: 100%
}

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

@media screen and (max-width:1024px) {
	:root {
		--W: 250px;
	}

	.sidepanel {
		position: absolute;
		top: 70px;
		width: 0px;
		background-color: var(--green1tnot);
		z-index: 100;
		transition-duration: 0.3;
		transition-timing-function: ease-out;
		/*EDIT P2*/
		height: calc(100vh - 70px)
	}

	.sidepanel-home {
		position: absolute;
		z-index: 1000;
		background-color: rgba(255, 255, 255, 0.21);
		top: 70px;
		/*inutili qui sotto*/
		overflow: hidden;
		/* Disable horizontal scroll */
		padding-top: 15px;
		/* Place content 60px from the top */
		transition-timing-function: ease;
		transition-duration: 0.5s;
		/* 0.5 second transition effect to slide in the sidepanel */
		flex-grow: 0;
		height: 100vh;
		/* Specify a height */
		width: 300px;
		/* 0 width - change this with JavaScript */
		min-width: 300px;
	}

	.item-square2 {
		width: 100%;
	}

	.new-item-square4 {
		width: 100%;
		transition: ease all .5s;
	}

	#fullflex a:nth-child(2n) .new-grid-item-height-text {
		order: 2;
	}

	#fullflex a:nth-child(3) .new-grid-item-height-text {
		order: -1;
	}

	.fixedheight {
		height: 150vh;
	}

	.footer-box h5 {
		font-size: 0.9em;
		margin-top: -5px
	}

	.footer-box h10 {
		font-size: 0.9em
	}

	.footer-box h8 {
		font-size: 0.7em;
		line-height: normal
	}

	.footer-box {
		width: 30%;
		margin: 0.5% 0.5% 0 0
	}

	#fullflex .square,
	#fullflex .square-title {
		width: 33.33vw;
		min-width: 33.33vw;
	}

}

@media screen and (max-width:792px) {
	.fixedheight {
		height: 150vh;
	}

	.fullflex-pubblicazioni-mobile {
		display: none;
	}

	#mainleft-pubblicazioni {
		flex: 0 0 100vw;
	}

	#fullflex .square,
	#fullflex .square-title {
		width: 50vw;
		min-width: 50vw;
	}

	#fullflex a .square:nth-child(2) {
		display: none;
	}
}

@media screen and (max-width:450px) {
	:root {
		--W: 75vw;
	}

	.sidepanel {
		position: absolute;
		top: 70px;
		width: 0px;
		background-color: var(--green1tnot);
		z-index: 100;
		transition-duration: 0.3;
		transition-timing-function: ease-out;
	}

	#fullflex {
		flex: 0 0 100%;
		overflow: scroll;
		min-height: calc(100vh - 70px);
		overflow-x: hidden;
		padding-bottom: 50px;
	}

	.new-item-square4 {
		width: 100%;
		height: calc(25%);
		transition: ease all .5s;
	}

	.row {
		width: 200%;
		height: auto;
	}

	.flex {
		flex-wrap: wrap;
		flex-direction: row;
		overflow: scroll;
		height: 50%;

	}

	.flex-studio {
		flex-wrap: wrap;
		flex-direction: row;
		overflow: scroll;
		height: 100vh;
	}

	#mainleft-studio {
		order: 2;
		overflow: hidden;
		flex: 1 1 100%;
		height: auto;
	}

	#mainright-studio {
		order: 1;
		overflow: hidden;
		flex: 0 0 100%;
		height: calc(50vh - 30px);
	}

	#mainleft {
		order: 2;
		overflow: hidden;
		flex: 1 1 100%;
		height: calc(100vh);
	}

	#mainleft-pubblicazioni {
		order: 2;
		overflow: hidden;
		flex: 1 1 100%;
		height: calc(100vh);
	}

	#mainleft-contatti {
		order: 2;
		overflow: hidden;
		flex: 1 1 100%;
		height: calc(100% + 15vh);
		padding-bottom: 50px;
	}

	#mainright {
		order: 1;
		overflow: hidden;
		flex: 0 0 100%;
		max-height: calc(50vh - 35px);
	}

	#mainright h4 {
		width: 90vw;
		font-size: 2.8em;
		line-height: 1.4em;
		text-align: right;
		text-align-last: right;
	}

	/* progetti*/
	.flexed {
		display: flex;
		flex-direction: column;
		/*max-height: 10vh;*/
		height: auto;
	}

	.square {
		align-self: flex-start;
		order: 1;
		height: 10%;
	}

	.square img {
		object-fit: cover;
	}

	.square-title {
		align-self: flex-start;
		order: 2;
		height: 15vh;
	}

	/*EDIT P3*/
	 #fullflex a .square:nth-child(2) {
		display: block;
	  }
	 #fullflex a .square:not(.best) {
		display: none;
	}

	#fullflex a:nth-child(odd) .square-title,
	#fullflex a:nth-child(even) .square-title {
		background-color: white;
	}

	#fullflex .square,
	#fullflex .square-title,
	#fullflex .square img {
		width: 100vw;
		min-width: 100vw;
	}

	.square-title h4 {
		top: 0%;
		width: 100%;
		left: 0;
		text-align: center;
		text-decoration: none;
	}

	.square-title h3 {
		top: 32.5%;
		width: 100%;
		left: 0;
		text-align: center;
	}

	.square-title h5 {
		top: 42.5%;
		width: 100%;
		left: 0;
		text-align: center;

	}

	/* HOME */
	#home-box {
		height: 100vh;
		max-height: auto;
		object-fit: cover;

	}

	/* EDIT P2*/
	#home-box {
		position: relative;
		height: calc(100vh - 100px)
	}

	#home-text h4 {
		width: 90vw;
		font-size: 2.8em;
		line-height: 1.4em;
		text-align: right;
		text-align-last: right;
	}

	#home-text {
		position: absolute;
		right: 10%;
		top: 20vh;
	}

	.footer-box h10 {
		height: 3vh;
		display: block;
		text-align: left;
	}

	.footer-box h5 {
		height: 6vh;
		display: block;
		left: 0%;
	}

	.footer-box h8 {
		display: block;
		top: 0;
	}

	#footer img {
		display: block;
	}

	#footer {
		flex-wrap: wrap;
		background-color: white;
		height: calc(100vh + 200px);
		height: auto;
		position: relative;
		padding-bottom: 100px;
	}

	.footer-box {
		margin-top: 1%;
		width: 90%;
		margin-left: 5%;
		display: block;
		max-height: 30vh;
		height: auto;
	}

	/* pubblicazioni*/
	.fullflex-pubblicazioni-mobile {
		display: none;
	}

	/*PAGINA PROGETTI SINGOLI*/
	#LRfullflex {
		order: 3;
		flex: 1 1 calc(100vw);
		align-self: auto;
		min-height: auto;
		height: calc(100% - 70px);
		position: relative;
		right: 0;
		margin: 0px;
		padding: 0px;
	}

	#LRfullflex.projects {
		overflow-y: scroll;
	}

	.LRproject-all {
		position: relative;
		white-space: default;
		overflow: scroll;
		/*min-height:calc(100vh - 70px);
		top: 70px;*/
		background-color: #FFFFFF;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}

	.LRproject-box {
		height: auto;
		width: 100%;
		display: block;
		margin: 5px 0px;
		padding: 0px;
	}

	.LRproject-box img {
		height: auto;
		width: 100%;
		display: block;
		/*vertical-align:top;*/
		margin: 0px;
		padding: 0px;
	}

	#infos {
		display: block;
	}

	.LRlateral-box {
		background-color: var(--Ecolor3);
		width: 100%;
		position: sticky;
		top: 70px;
		left: 0;
		height: auto;
		z-index: 10;
		overflow: hidden
	}

	#arrow-down {
		display: block;
		padding-bottom: 15px;
	}

	.LRtext-box {
		width: 100vw;
		display: block;
		padding: 0px;
		margin: 0px;
		text-align: inherit;
	}

	#infos a svg {
		display: block;
	}

	.LRtext-box h1 {
		display: block;
		font-size: 10px;
		text-align: center;
		margin-bottom: 5px;
	}

	#description {
		max-height: 0px;
		padding: 0px 15px;
		text-align: justify;
		overflow: hidden;
	}

	#description div:last-of-type {
		padding-bottom: 15px;
	}

	#header h1 {
		letter-spacing: 1px;
		font-size: 11.5px;
	}

	#header h2 {
		letter-spacing: 2px;
		font-size: 35px;
		white-space: nowrap;
	}
}

@media screen and (max-width:450px) {
	#fullflex a .square {
		width: 100vw;
	}
}