:root {
	--white: #E5E1E6;
	--black: #3F4444;
}

html {
	background: var(--white);
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: var(--black);
	margin-block-start: 0.4em;
	margin-block-end: 0.4em;
}

h2 {
	font-family: 'Montserrat Alternates', sans-serif;
	font-weight: 700;
	font-size: 25px;
	color: var(--black);
	margin-block-start: 0em;
	margin-block-end: 0em;
}

h2 strong {
	text-transform: uppercase;
}

p {
	font-family: 'Montserrat Alternates';
	font-weight: 400;
	font-size: 14px;
}

@media (orientation: portrait) {

	p {
		font-size: 12px;
	}	

}

p strong {
	font-weight: 700;
}

.gradient-text {
	font-size: 45px;
	background: conic-gradient(from 250.62deg at 50% 50%, #EF3340 0deg, #5F259F 51.43deg, #3A5DAE 102.86deg, #009CBD 154.29deg, #00C389 205.71deg, #FFC600 257.14deg, #FF671F 308.57deg, #EF3340 360deg);
	width: fit-content;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	font-family: 'Montserrat Alternates', sans-serif;
	line-height: 40px;
}

strong {
	font-weight: 700 !important;
}

.wp-block-image {
	margin: 0;
}

.wp-block-image img {
    vertical-align: unset;
}

div[class*="section"] {
	margin-bottom: 10vh;
}

.div {
	padding-top: 15vh;
}

@media (orientation: portrait) {

	div[class*="section"] {
		margin-bottom: 20vh;
	}

}

.only-desktop {display: block;}
.only-mobile {display: none;}

@media (orientation: portrait) {
	.only-desktop {display: none;}
	.only-mobile {display: block;}
}

/* header */

.propic {
	position: relative;
	overflow: visible;
}

.propic::before {
	content: '';
	background: url('/wp-content/uploads/propic-shadow.png');
	background-size: cover;
	background-position: center center;
	width: 150%;
	height: 150%;
	position: absolute;
	transform: translate(-17.5%, 0%);
	z-index: -1;
	overflow: visible;
}

.menu-opener {
	position: fixed;
	z-index: 501;
	right: 40px;
	top: 40px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	transform: rotate(0deg);
	background-image: url('/wp-content/uploads/menu-main.png');
	background-size: cover;
	transition: all 1s cubic-bezier(.5,0,0,1);
}

.inside {
	width: 100%;
	height: 100%;
	position: relative;
	opacity: 0;
	background-image: url('/wp-content/uploads/menu-inside.png');
	background-size: cover;
	transition: all 1s cubic-bezier(.5,0,0,1);
}

.menu-opener.open {
	transform: rotate(45deg);
}

.menu-opener.open .inside {
	opacity: 1;
}

.menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	height: 100vh;
	width: 100%;
	background: linear-gradient(-45deg, #5F259F 0%, #3A5DAE 16.67%, #009CBD 33.33%, #00C389 50%, #FFC600 66.67%, #FF671F 83.33%, #EF3340 100%);
	display: none;
	clip-path: circle(0% at 50% 50%);
	filter: grayscale(1) blur(15px);
	transform: scale(1);
	transition: all 1s cubic-bezier(.5,0,0,1);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.menu a {
	text-decoration: none;
	font-family: 'Montserrat Alternates';
	color: var(--white);
	font-weight: 700;
	text-transform: uppercase;
	margin: 7px auto;
	font-size: 25px;
}

.menu.open {
	clip-path: circle(75% at 50% 50%);
	filter: grayscale(0) blur(0px);
	transform: scale(1.2);
}

.country-selector {
	margin-top: 7px;
}

.country-selector * {
	margin: 0 !important;
	padding: 0 !important;
}

/* div */


.div {
	width: 100%;
	margin: 7vh 0;
}

.div-color {
	background: linear-gradient(270deg, #5F259F 0%, #3A5DAE 16.67%, #009CBD 33.33%, #00C389 50%, #FFC600 66.67%, #FF671F 83.33%, #EF3340 100%);
	height: 7px;
}

.div-text {
	position: relative;
	left: 50%;
	transform: translate(-50%, -60%);
	width: fit-content;
	background: var(--white);
	padding: 0 30px;
	border-radius: 30px;
	text-align: center;
}

/* hero */

.section-hero {
	display: grid;
	grid-template-columns: 50% 50%;
	width: 50%;
	margin: 0 auto;
	margin-top: 25vh;
}

.section-hero figure, .section-hero .hero-text-container {
	align-self: center;
	justify-self: center;
}

.section-hero figure {
	max-width: 20vw;
}

@media (orientation: portrait) {

	.section-hero {
		margin-top: 15vh;
		grid-template-columns: auto;
		width: 100%;
		text-align: center;
		row-gap: 50px;
	}

	.section-hero figure {
		max-width: 60vw;
	}

}

/* portfolio */

.section-portfolio {
	width: 100%;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.portfolio-item {
	aspect-ratio: 1 / 1;
	position: relative;
	cursor: pointer;
}

.portfolio-item:nth-of-type(1), .portfolio-item:nth-of-type(8), .portfolio-item:nth-of-type(15) {background-color:#009CBD}
.portfolio-item:nth-of-type(2), .portfolio-item:nth-of-type(9), .portfolio-item:nth-of-type(16) {background-color:#3A5DAE}
.portfolio-item:nth-of-type(3), .portfolio-item:nth-of-type(10), .portfolio-item:nth-of-type(17) {background-color:#5F259F}
.portfolio-item:nth-of-type(4), .portfolio-item:nth-of-type(11), .portfolio-item:nth-of-type(18) {background-color:#EF3340}
.portfolio-item:nth-of-type(5), .portfolio-item:nth-of-type(12), .portfolio-item:nth-of-type(19) {background-color:#FF671F}
.portfolio-item:nth-of-type(6), .portfolio-item:nth-of-type(13), .portfolio-item:nth-of-type(20) {background-color:#FFC600}
.portfolio-item:nth-of-type(7), .portfolio-item:nth-of-type(14), .portfolio-item:nth-of-type(21) {background-color:#00C389}

.portfolio-item-image {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: auto 100%;
	background-position: center center;
	opacity: 0.7;
	mix-blend-mode: multiply;
	filter: saturate(0.7);
	transition: all 0.5s cubic-bezier(.5,0,0,1);
}

.portfolio-item-title {
	font-family: 'Montserrat Alternates', sans-serif;
	color: var(--white);
	position: absolute;
	text-transform: uppercase;
	font-size: 20px;
	top: 50%;
	left: 50%;
	width: 80%;
	text-align: center;
	transform: translate(-50%, -50%);
	margin-block-start: 0;
	margin-block-end: 0;
	font-weight: 700;
}

.portfolio-item-desc {
	position: absolute;
	width: 90%;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	left: 50%;
	transform: translateX(-50%);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	bottom: 10px;
	color: var(--white);
}

.portfolio-item:hover .portfolio-item-image {
	background-size: auto 105%;
	opacity: 0.4;
	filter: saturate(0);
}

@media (orientation: portrait) {

	.section-portfolio {
		grid-template-columns: 50% 50%;
	}

	.portfolio-item-desc {
		font-size: 8px;
		bottom: 7px;
	}

	.hole {
		display: none;
	}

}

/* about */

.section-about {
	width: 50%;
	margin: 0 auto;
}

.about-item {
	display: grid;
	grid-template-columns: 100px auto;
	margin-bottom: 4vh;
}

.about-item p, .about-item figure {
	align-self: center;
	justify-self: center;
}

.about-item p {
	margin-left: 50px;
}

.about-item figure {
	width: 70px;
}

.small-info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.small-info-item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 10px;
}

.small-info-item p {
	font-size: 10px;
	margin-left: 15px;
	margin-block-start: 0;
	margin-block-end: 0;
}

.small-info-item figure {
	width: 15px;
}

@media (orientation: portrait) {

	.section-about {
		width: 90%;
	}

	.about-item {
		grid-template-columns: auto;
		text-align: center;
		row-gap: 15px;
		margin-top: 6vh;
		margin-bottom: 6vh;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.about-item p {
		margin-left: 0;
	}

	.about-item figure {
		width: 60px;
	}

	.small-info-item {
		margin-bottom: 5px;
	}

	.small-info-item figure {
		width: 10px;
	}

	.small-info-item p {
		font-size: 9.5px;
		margin-left: 10px;
	}

}

/* competenze */

.section-competenze {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	width: 70%;
	margin: 0 auto;
}

.competenze-item {
	text-align: center;
	margin: 15px 25px;
}

.competenze-item p {
	margin-top: 0;
}

.competenze-item p em {
	font-style: normal;
	font-size: 0.7em;
}

@media (orientation: portrait) {

	.section-competenze {
		grid-template-columns: auto auto;
		width: 90%;
	}

	.competenze-item {
		margin: 20px;
		align-self: flex-end;
	}

	.spacer {
		display: none;
	}

}

/* passioni */

.section-passioni {
	width: 60%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto auto;
	margin-bottom: 4vh;
}

.passioni-item {
	text-align: center;
	margin: 4vh 50px;
}

.passioni-item figure {
	align-self: center;
	justify-self: center;
	margin: 0 auto;
	height: 60px;
	margin-bottom: 30px;
}

.passioni-item figure img {
	height: 100%;
	width: auto;
}

@media (orientation: portrait) {

	.section-passioni {
		width: 90%;
		grid-template-columns: auto;
	}

	.passioni-item {
		margin-top: 4vh;
		margin-bottom: 4vh;
	}

	.passioni-item figure {
		height: 50px;
		margin-bottom: 20px;
	}

}

/* software */

.section-software {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 70%;
	margin: 0 auto;
}

.software-item {
	height: 80px;
	margin: 25px 35px;
}

.software-item img {
	height: 100%;
	width: auto;
}

.break {
	flex-basis: 100%;
	height: 0;
}

@media (orientation: portrait) {

	.section-software {
		width: 80%;
	}

	.software-item {
		height: 65px;
		margin: 15px;
	}

}

/* footer */

.section-contatti {
	background: var(--black);
	margin-bottom: 0 !important;
	text-align: left;
}

.section-contatti h2 {
	font-size: 30px;
	color: var(--white);
	font-weight: 700;
	line-height: 30px;
}

h3 {
	font-family: 'Montserrat Alternates', sans-serif;
	font-weight: 400;
	color: var(--white);
	font-size: 15px;
	margin-block-start: 0;
	margin-block-end: 0;
}

.section-contatti {
	display: grid;
	grid-template-columns: 30% 70%;
	width: 100%;
	margin: 0 auto;
	padding: 10vh 25vw;
}

.section-contatti figure, .section-contatti .contatti-text-container {
	align-self: center;
	justify-self: center;
}

.section-contatti figure {
	max-width: 15vw;
}

.inline-info-wrapper {
	margin-top: 25px;
}

.inline-info {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	margin-right: 25px;
	margin-bottom: 10px;
}

.inline-info p {
    margin-block-start: 0;
    margin-block-end: 0;
	margin-left: 15px;
}

.inline-info a {
	text-decoration: none;
	color: var(--white);
	font-family: 'Montserrat', sans-serif;
	display: block;
}

.super-small {
	font-size: 7px;
	color: var(--white);
	background: var(--black);
    margin-block-start: 0;
    margin-block-end: 0;
	text-align: center;
	width: 100%;
	padding-bottom: 5vh;
}

@media (orientation: portrait) {

	.section-contatti {
		grid-template-columns: auto;
		width: 100%;
		text-align: center;
		row-gap: 50px;
		padding: 15vh 15vw;
	}

	.section-contatti figure {
		max-width: 50vw;
	}

	h3 {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.inline-info {
		margin-right: auto;
		justify-content: center;
	}

}

/* animate */

.animate-fade[data-scroll], .animate-fade[data-scroll="out"] {
	opacity: 0;
	filter: grayscale(1) blur(15px);
	transform: scale(0.7);
	transition: all 1s cubic-bezier(.5,0,0,1);
}

.animate-fade[data-scroll="in"] {
	opacity: 1;
	transform: scale(1);
	filter: grayscale(0) blur(0px);
}

.animate-up[data-scroll], .animate-up[data-scroll="out"] {
	opacity: 0;
	filter: grayscale(1) blur(15px);
	transform: scale(0.7) translateY(100px);
	transition: all 1s cubic-bezier(.5,0,0,1);
}

.animate-up[data-scroll="in"] {
	opacity: 1;
	transform: scale(1) translateY(0px);
	filter: grayscale(0) blur(0px);
}