@font-face {
    font-family: 'Rockinsoda';
    src: url('fonts/Rockinsoda.ttf') format('truetype'),
         url('fonts/Rockinsoda.woff') format('woff'),
         url('fonts/Rockinsoda.woff2') format('woff2');
}
@font-face {
    font-family: 'Moderat-Regular';
    src: url('fonts/Moderat-Regular.ttf') format('truetype'),
         url('fonts/Moderat-Regular.woff') format('woff'),
         url('fonts/Moderat-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Moderat-Bold';
    src: url('fonts/Moderat-Bold.ttf') format('truetype'),
         url('fonts/Moderat-Bold.woff') format('woff'),
         url('fonts/Moderat-Bold.woff2') format('woff2');
}
:root {
  --red: #EA5650;
  --blue: #006FB6;
}


*::selection { background: var(--blue); color: var(--red) }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background-color: var(--blue); border-radius: 2px; }
::-webkit-scrollbar-track { background-color:#fff; }
@media(max-width: 1024px){
	::-webkit-scrollbar { width: 0px; }
	::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 2px; }
	::-webkit-scrollbar-track { background-color: #fff; }
}
html {
	scroll-behavior: smooth;
}
html, body {
	font-family: 'Moderat-Regular';
	margin: 0;
	max-width: 100vw;
	overflow-x: hidden;
/*	cursor: url('images/cursor.svg'), auto !important; 
	cursor: url('images/cursor-hover.svg'), pointer !important; 
	cursor: url('images/cursor.svg'), text !important; */
}
a {
	transition: 0.54s;
	color: #046FB6;
	text-decoration: none;
/*	cursor: url('images/cursor-hover.svg'), auto !important; 
	cursor: url('images/cursor-hover.svg'), pointer !important; 
	cursor: url('images/cursor-hover.svg'), text !important; */
}
a:hover {
	color: #EA5650;
}
header {
	transition: 0.54s;
	position: fixed;
	width: calc(100% - 80px);
	top: 0;
	padding: 25px 40px;
	z-index: 6;
}
header .containerh {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
nav#nav {
	border-radius: 30px 0 0 30px;
	position: fixed;
	width: 300px;
	min-width: 33vw;
	top: 0;
	right: -300px;
	height: 100vh;
	background-color: #fff;
	z-index: 7;
	transition: all 0.54s;
}
nav#nav .links {
	padding: 80px 20px;
}
nav#nav a.link {
	color: #046FB6;
	font-size: 52px;
	line-height: 74px;
	display: block;
	font-family: 'Moderat-Bold';
}
nav#nav a.link.active {
	color: #EA5650;
}
nav#nav a.link:hover {
	padding-left: 20px;
}
nav#nav a.link::before {
	content: '';
	width: 15px;
	height: 15px;
	background-color: #EA5650;
	border-radius: 50%;
	position: absolute;
    margin-top: 32px;
    margin-left: -20px;
    transform: scale(0);
    transition: 0.54s;
}
nav#nav a.link:hover::before {
	transform: scale(1);
}
@media(min-width: 900px){
	nav#nav {
		right: -33.3vw;
	}
}
nav#nav.active {
	right: 0;
}
#closeBar {
	position: absolute;
    right: 40px;
    top: 40px;
    transition: 0.54s;
}
#closeBar:hover {
	transform: scale(1.05);
}
#bg {
	position: fixed;
	z-index: 6;
	background-color: rgba(255, 255, 255, 0.85);
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	transition: all 2.54s;
	display: none;
	opacity: 0;
}
#bg.active {
	display: block;
	opacity: 0.85;
}
#clogo {
	position: absolute;
    margin: 2px 10px;
}
.hlogo {
	z-index: 8;
}
#mainsection {
	height: 100vh;
	width: 100%;
	background-color: #006FB6;
}
#cloud1 {
	display: block;
	position: absolute;
	left: 0%;
	top: 4vh;
}
#cloud2 {
	display: block;
	position: absolute;
	left: calc(50vw - 180px);
    top: 60vh;
}
#cloud3 {
	display: block;
	position: absolute;
	right: -5%;
	top: calc(50% - 80px);
}
#rino {
	display: block;
    position: absolute;
    left: calc(50vw + 282px);
    top: calc(50% - 242px);
    z-index: 1;
}
#mainsection .containerh img {
	position: absolute;
	height: 170px;
	filter: blur(128px);
    transform: scale(1);
    transition: filter 2.5s ease, transform 1.5s ease;
}
#mainsection .containerh img.cleared {
	filter: blur(0);
    transform: scale(1);
}


#t1 {
	top: calc(50vh - 200px);
	left: calc(50% - 362px);
	z-index: 4;
}
#t2 {
	top: calc(50vh - 200px);
	left: calc(50% + 562px - 86px);
}
#t3 {
	top: calc(50vh + 10px);
	left: calc(50% - 395px);
}
@media(min-width: 1101px) and (max-width: 1601px){
	#rino {
		display: block;
	    position: absolute;
	    left: calc(50vw + 252px);
	    top: calc(50% - 220px);
	    z-index: 1;
	    width: 660px;
	}
	#mainsection .containerh img {
		height: 150px;
	}
	#mainsection .containerh img.cleared {
		filter: blur(0);
	    transform: scale(1);
	}
	#t1 {
		top: calc(50vh - 200px);
		left: calc(50% - 308px);
		z-index: 4;
	}
	#t2 {
		top: calc(50vh - 200px);
		left: calc(50% + 508px - 76px);
	}
	#t3 {
		top: calc(50vh + 10px);
		left: calc(50% - 349px);
	}
}
@media(max-width: 1100px){
	#mainsection .containerh img {
		height: 40px;
	}
	#t1 {
		top: calc(50vh + 100px);
		left: calc(50% - 109px);
		z-index: 4;
	}
	#t2 {
		top: calc(50vh + 100px);
		left: calc(50% + 109px - 20px);
	}
	#t3 {
		top: calc(50vh + 160px);
		left: calc(50% - 92px);
	}
	#rino {
		display: block;
	    position: absolute;
	    width: 300px;
	    left: calc(50vw - 150px);
	    top: calc(30vh - 50px);
	    z-index: 1;
	}
	
	#cloud1 {
		max-width: 80vw;
		display: block;
		position: absolute;
		left: 0%;
		top: 14vh;
	}
	#cloud2 {
		max-width: 60vw;
		display: block;
		position: absolute;
		left: calc(50vw - 220px);
	    top: calc(100vh - 180px);
	}
	#cloud3 {
		max-width: 40vw;
		display: block;
		position: absolute;
		right: 5%;
		top: 50vh;
	}
	#clogo {
		display: none !important;
	}
}
#cov {
	position: relative;
	z-index: 4;
}
.mainbtn.soc {
	padding: 0;
}
.mainbtn {
	font-size: 20px;
	color: #046FB6;
	background: rgba(147, 200, 237, 0.5);
	transition: 0.54s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	min-height: 58px;
	border-radius: 29px;
	padding: 0 16px;
	font-weight: 700;
}
.mainbtn i {
	font-size: 16px;
	color: #FF655F;
	margin-bottom: 0px;
	margin-left: 8px;
	margin-bottom: -4px;
}
.mainbtn:hover {
	color: #fff;
	background: #046FB6;
}
.mainbtn i {
	color: var(--red);
}
.mainbtn .fab {
	margin: 0;
}
.social, .social div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.social {
	padding: 40px 20px;
    position: absolute;
    bottom: 0;
    width: calc(100% - 40px);
}
.social div {
	width: 214px;
}
@media(max-width: 1100px){
	.social div {
		width: 150px;
	}
	.mainbtn {
		min-width: 48px;
		min-height: 48px;
	}
}
#scroll {
	width: 100%;
	z-index: 5;
	display: flex;
	position: absolute;
	justify-content: center;
	bottom: 40px;
	align-items: center;
	justify-content: center;
}
#scroll i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #EA5650;
	margin-right: 10px;
	position: relative;
}
#scroll span {
	transition: 0.54s;
	color: #fff;
	font-size: 26px;
	font-family: 'Rockinsoda';
}
#scroll:hover span {
	letter-spacing: 0.3px;
}
.container {
	width: calc(100% - 200px);
	margin: 0 auto;
	display: flex;
}
.wrap {
	flex-wrap: wrap;
}
@media(max-width: 1100px){
	.container {
		width: 94%;
	}
	.wrap {
		display: flex !important;
		flex-wrap: wrap;
	}
}
#chi-siamo {
	padding: 100px 0;
}
#chi-siamo h1 {
	font-family: 'Rockinsoda';
    font-weight: 700;
    font-size: 62px;
    line-height: 70px;
    color: var(--blue);
    margin-top: 20px;
    max-width: 94%;
}
.w100 {
	width: 100%;
}
.w75 {
	width: 75%;
}
.w66 {
	width: 66.6%;
}
.w60 {
	width: 60%;
}
.w40 {
	width: 40%;
}
.w33 {
	width: 33.3%;
}
.w50 {
	width: 50%;
}
.w-25 {
	width: 25%;
}
.w20 {
	width: 20%;
}
.w16 {
	width: 16.5%;
}
@media(max-width: 1100px){
	.container {
		display: block;
	}
	.w75 {
		width: 100%;
	}
	.w50 {
		width: 100%;
	}
	.w60 {
		width: 100%;
	}
	.w40 {
		width: 100%;
	}
	.w66 {
		width: 100%;
	}
	.w33 {
		width: 100%;
	}
	.w-25 {
		width: 100%;
	}
	.w-25.servitem {
		width: 50%;
	}
	.w20 {
		width: 100%;
	}
	.w16 {
		width: 33%;
	}
}
.liltitle {
	color: #FF655F;
	font-size: 16px;
	text-transform: uppercase;
}
.bigtitle {
	font-family: 'Rockinsoda';
	text-transform: uppercase;
	font-weight: 700;
	color: #FF655F;
	font-size: 60px;
	line-height: 68px;
	color: var(--blue);
	margin-top: 20px;
	max-width: 94%;
}
@media(max-width: 1100px){
	.bigtitle {
		font-size: 36px;
		line-height: 42px;
	}
}
#chi-siamo .text {
	margin-top: 42px;
}
#chi-siamo .text p {
	font-size: 20px;
	color: var(--blue);
	margin-bottom: 30px;
}
#chi-siamo .mainbtn {
	width: 192px;
}
#mainportfolio {
	padding: 100px 0;
	background-color: #FBE0E0;
}
.item-4 {
	overflow: hidden;
	cursor: url('images/cursor-portfolio.svg'), auto !important; 
	cursor: url('images/cursor-portfolio.svg'), pointer !important; 
	cursor: url('images/cursor-portfolio.svg'), text !important;
	cursor: url('images/cursor-portfolio.svg') 30 30, auto !important; 
}
/*.itemcursor {
	background-color: #006FB6;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	z-index: 9;
	position: absolute;
	display: none; 
	transition: 0.54s;
}*/
.item-4 .bgitem {
    background-color: rgba(255, 101, 95, 0.7);
    width: 100%;
    height: calc(100% + 8px);
    position: relative;
    bottom: calc(100% + 4px);
    transition: 0.54s;
    opacity: 0;
}
.item-4 img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
	transition: 0.54s;
}
.item-4:hover img {
	transform: scale(1.08);
}
.item-4:hover .bgitem {
	opacity: 1;
}
.item-4 .names {
	color: #fff;
    position: relative;
    height: 120px;
    bottom: 0px;
    left: 0;
    width: calc(100% - 40px);
    padding: 0 20px;
    transition: 0.54s;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}
.item-4 .names p {
	margin: 5px;
	width: 100%;
	font-size: 24px;
	margin-top: 0;
	padding-bottom: 20px;
}
.item-4 .names p span {
	font-size: 16px;
	width: 100%;
	display: block;
	margin-bottom: 15px;
}
.item-4:hover .names {
	bottom: calc(100% + 130px);
}
.mainbtn.rigrtbtn {
    margin-top: 30px;
    width: 160px;
    float: right;
}
#mainportfolio .mainbtn.rigrtbtn {
	background-color: #fff;
}
#mainportfolio .mainbtn.rigrtbtn:hover {
	background-color: var(--blue);
}

@media(max-width: 1100px){
	.item-4 .names {
		bottom: calc(100% + 130px);
	}
	.mainbtn.rigrtbtn {
	    margin: 0 0 30px;
	    width: 160px;
	    float: none;
	}
	.item-4 .names p {
		font-size: 16px;
		text-shadow: 0 0 1px #000;
	}
	.item-4 .names p span {
		font-size: 12px;
	}
}
#mainservices {
	padding: 100px 0;
}
.imgcont {
	height: 160px;
	display: flex;
	align-items: center;
}
.imgcont img {
	max-height: 160px;
}
.servitem h3 {
	font-size: 36px;
	color: var(--blue);
	margin-bottom: 20px;
	font-weight: 700;
}
.servitem ul {
	margin: 10px 0;
	padding: 0;
}
.servitem ul li {
	color: var(--blue);
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.3;
}
@media(max-width: 1100px){
	.servitem {
		padding: 30px 0;
	}
	.servitem img {
		max-height: 50%;
	}
	.servitem ul li {
		font-size: 16px;
		line-height: 1.5;
	}
	.servitem h3 {
	    font-size: 28px;
	    margin-top: 0;
	}
	.imgcont {
		height: 130px;
	}
}
#ourclients {
	background-color: #96CCF4;
	padding: 100px 0;
}
#ourclients .cli {
	text-align: center;
	text-transform: uppercase;
	font-size: 16px;
	color: #fff;
	width: 100%;
	margin: 5px 0;
}
#ourclients h2 {
	font-family: 'Rockinsoda';
	text-transform: uppercase;
	text-align: center;
	font-size: 60px;
	color: #fff;
	font-weight: 700;
	width: 100%;
	margin: 5px 0;
}
.mainlogos {
	margin: 50px 0 0;
	justify-content: center;
}
.logoitem {
	display: flex;
	justify-content: center;
	align-items: center;
}
.logoitem img {
	height: 7vw;
	margin: 10%;
	width: 80%;
	object-fit: contain;
}
@media(max-width: 1100px){
	.logoitem img {
		height: 14vw;
		margin: 3%;
		width: 94%;
		object-fit: contain;
	}
}
#maincallus {
	padding: 100px 0 0;
	background-color: #FF655F;
}
#maincallus:before {
	content: "";
    width: 200px;
    height: 200px;
    position: absolute;
    background-image: url(images/fumetto.svg);
    right: 3vw;
    margin-top: -100px;
    background-repeat: no-repeat;
    background-size: contain;
}
#maincallus.white:before{
	background-image: url(images/fumetto-white.svg);
}
#gif-rino-main {
	width: 60%;
	margin-bottom: -4px;
}
#maincallus h2 {
	color: #fff;
	font-size: 46px;
	line-height: 54px;
}
#maincallus .mainbtn {
	background-color: transparent;
	border: 2px solid #fff;
	max-width: 180px;
	color: #fff;
}
#maincallus .mainbtn:hover {
	background-color: #96CCF4;
	border: 2px solid #96CCF4;
}
#maincallus .mainbtn i {
	color: #96CCF4;
}
#maincallus .mainbtn:hover i {
	color: #fff;
}
.mainfooter {
	padding: 100px 0 50px;
}
.subfooter {
	padding: 40px 0;
}
.foos {
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
}
.foosoc {
	width: 58px;
	height: 58px;
	padding: 0;
}
.foosoc i {
	color: var(--blue);
	font-size: 21px;
}
.foosoc:hover i {
	color: #fff;
}
.mainfooter h4 {
	font-size: 26px;
	font-weight: 700;
	color: var(--red);
	margin-top: 0;
	margin-bottom: 20px;
}
.mainfooter .w20.contacts a,
.mainfooter .w20.contacts p {
	line-height: 1.7;
	margin: 0;
	padding: 0;
	display: block;
	color: var(--blue);
}
.fooimg1 {
	width: 248px;
	float: right;
	margin-bottom: 30px;
}
.fooimg2 {
	width: 168px;
	float: right;
}
.subfooter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.subfooter p {
	color: var(--blue);
}
.subfooter a {
	margin-left: 30px;
}
@media(max-width: 1100px){
	footer {
		text-align: center;
	}
	.foos {
		margin: 20px auto;
	}
	.foosoc {
		width: 48px;
		height: 48px;
		padding: 0;
	}
	.fooimg1, .fooimg2 {
		float: left;
		display: block;
		margin: 30px 5% 0;
		width: 40%;
	}
	.subfooter p {
		width: 100%;
		text-align: center;
	}
	.subfooter a {
		text-align: center;
		margin: 0 15px;
	}
	#mainportfolio .container.wrap {
		width: 100%;
		max-height: 200vw;
		overflow: hidden;
	}
	#placetomainportfoliobtn {
		margin-top: 30px;
		display: flex;
		justify-content: center;
	}
}
#lavorimain {
	padding: 100px 0 30px;
}
#lavorimain div {
	width: 100%;
}
#lavorimain h1 {
	width: 100%;
	display: block;
	font-family: 'Rockinsoda';
	font-size: 160px;
	line-height: 180px;
	color: var(--blue);
	text-align: center;
	margin: 0;
}
#lavorimain p {
	width: 100%;
	display: block;
	font-size: 36px;
	color: var(--blue);
	text-align: center;
}
.pfilter {
	margin-top: 30px;
	justify-content: center;
}
.filterl {
	margin: 10px;
}
.filterl.active  {
	background-color: var(--red);
	color: #fff;
}
.detalimgs, .ptext {
	display: flex;
	margin: 30px 0;
}
@media(max-width: 1100px){
	.detalimgs, .ptext {
		display: block;
	}
}
#pordetal {
	padding: 100px 0;
}
#pordetal h1 {
	font-size: 100px;
	margin: 20px 0;
	font-family: 'Rockinsoda';
	color: var(--red);
}
#pordetal h2 {
	font-size: 60px;
	margin: 20px 0;
	font-family: 'Rockinsoda';
	color: #96CCF4;
	font-weight: 400;
}
.lilcontainer {
	max-width: 1400px;
}
#pordetal p {
	font-size: 20px;
	color: var(--blue);
}
#pordetal ul {
	padding-left: 16px;
}
#pordetal ul li {
	font-size: 20px;
	color: var(--blue);
	list-style-type: none;
}
#pordetal ul li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    background-color: var(--red);
    margin-left: -16px;
    margin-top: 10px;
}
#listp {
	max-width: 50%;
}
#portlink {
	float: right;
}
#pback {
	position: fixed;
	left: 50px;
	width: 65px;
	top: 150px;
}
#pback img {
	transition: 0.54s;
	border-radius: 50%;
}
#pback img:hover {
	margin-top: 2px;
	background-color: var(--blue);
}
@media(max-width: 1100px){
	#pback {
		display: none;
	}
}
@media(min-width: 1101px){
	.alillright {
		margin-left: 70px;
		max-width: calc(50% - 70px);
	}
}