html, body{
	height: 100%;
}
body{
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #ffffff;
	background-color: #1A1A1A;
	font-weight: 400;
	overflow-x: hidden;
}
.container{
	padding-right: var(--bs-gutter-x,1.25rem);
    padding-left: var(--bs-gutter-x,1.25rem);
}
.preload, .preloadDue{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transition: all 1s linear;
}
.preload{
	background-color: #96FF6E;
	z-index: 99;
	transition-delay: 1s;
}
.preloadDue{
	background-color: #1A1A1A;
	z-index: 100;
}
.cambio, .cambioDue{
	position: fixed;
	top: 0;
	left: 0;
	height: 0%;
	width: 100%;
	transition: all 1s linear;
}
.cambio{
	background-color: #1A1A1A;
	z-index: 102;
	transition-delay: 1s;
}
.cambioDue{
	background-color: #96FF6E;
	z-index: 101;
}
.cambio.cambioS, .cambioDue.cambioS{
	height: 100%;
}
.noise{
	position: fixed!important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#noise:before{
	background-image: url("../img/noise.png");
	position: absolute;
	content: "";
	width: 300%;
	height: 300%;
	left: -100%;
	top: -100%;
	animation-name: grained;
	animation-iteration-count: infinite;
	animation-duration: .5s;
	animation-timing-function: steps(20);
}
a{
	text-decoration: none;
	color: #FFFFFF!important;
}
h1, h2{
	color: #96FF6E;
	line-height: 90%;
}
h1{
	font-family: 'radwaveregular', sans-serif;
	font-size: 48px;
	overflow: hidden;
}
h1 span{
	font-family: 'radwaveoutline', sans-serif;
	margin-left: 10px;
}
h2{
	font-family: 'radwaveoutline', sans-serif;
	font-size: 25px;
	color: #96FF6E;
}
h3{
	font-family: 'radwaveregular', sans-serif;
	font-size: 19px;
	padding: 50px 0 30px;
	color: #96FF6E;
}
header{
	margin-top: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
header .logo p {
	font-size: 24px;
	margin: 0;
}
#homePage section:not(#hero){
	padding: 100px 0;
	position: relative;
}
.lightDark{
	cursor: pointer;
}
.switch {
    width: 20px;
    height: 20px;
    position: relative;
	background-color: #96FF6E;
	border: 1px solid #96FF6E;
}
.qdr {
    background-color: #000000;
    border: 1px solid #000000;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.qdr.sposta{
	left: 50%;
}
.lightDark p{
	display: none;
}
.contatti{
	display: flex;
}
.contatti a{
	transition: all .3s linear;
}
.contatti a:hover{
	color: #96FF6E!important;
}
.lingua{
	display: flex;
	align-items: center;
}
.lingua a.acceso{
	color: #96FF6E!important;
}
.lingua span{
	height: 80%;
	border: 1px solid #ffffff;
	margin: 0 10px;
}
#hero{
	height: 100%;
	margin-bottom: 100px;
}
.guido{
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 90%;
	text-align: end;
	padding-right: 3%;
}
.menu{
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: 0;
}
.selectMenu{
	width: 20px;
	height: 20px;
	border: 1px solid #96FF6E;
	margin-right: 10px;
	transition: background-color .3s linear;
}
nav ul li a:hover .selectMenu{
	background-color: #96FF6E!important;
}
.selectMenu.acceso{
	background-color: #96FF6E;
}
nav ul li{
	margin: 10px 50px 0 0;
}
.goDown{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.quadrato{
	background-color: #96FF6E;
	animation: freccia 1.5s linear infinite;
}
.quadrato.qdrUno{
	width: 10px;
	height: 10px;
	animation-delay: .5s;
}
.quadrato.qdrDue{
	width: 15px;
	height: 15px;
	margin: 10px 0;
	animation-delay: 1s;
}
.quadrato.qdrTre{
	width: 20px;
	height: 20px;
}
@-webkit-keyframes freccia{
	0%, 100%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
}
@-moz-keyframes freccia{
	0%, 100%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
}
	@-o-keyframes freccia{
	0%, 100%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
}
	@keyframes freccia{
	0%, 100%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
}
.pieno{
	top: 3px;
	left: 3px;
	font-family: 'radwaveregular', sans-serif;
}
.pienoSx{
		left: auto;
		right: 3px;
	}
#about p, #graphicDesign p, #webDesign p{
	margin-top: 50px;
	font-size: 16px;
	line-height: 24px;
}
h1 div{
	display: flex;
	flex-wrap: nowrap;
	animation: ruota 8s linear infinite;
	animation-direction: alternate;
}
h1 div:nth-of-type(2), #portfolio h1 div:nth-of-type(2){
	animation-delay: .5s;
}
h1 div:nth-of-type(3){
	animation-delay: 1s;
}
h1::-webkit-scrollbar {
  display: none;
}

@-webkit-keyframes ruota{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-190%);
		-moz-transform: translateX(-190%);
		-o-transform: translateX(-190%);
		-ms-transform: translateX(-190%);
		transform: translateX(-190%);
	}
}
@-moz-keyframes ruota{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-190%);
		-moz-transform: translateX(-190%);
		-o-transform: translateX(-190%);
		-ms-transform: translateX(-190%);
		transform: translateX(-190%);
	}
}
@-o-keyframes ruota{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-190%);
		-moz-transform: translateX(-190%);
		-o-transform: translateX(-190%);
		-ms-transform: translateX(-190%);
		transform: translateX(-190%);
	}
}
@keyframes ruota{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-190%);
		-moz-transform: translateX(-190%);
		-o-transform: translateX(-190%);
		-ms-transform: translateX(-190%);
		transform: translateX(-190%);
	}
}
.linea{
	width: 60%;
	border: 1px solid #ffffff;
	position: absolute;
	top: 0;
	left: 0;
}
.linea.lineaDx{
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
}
.lineaDx.lineaMeta{
	bottom: 47%;
}
#skill{
	padding: 100px 0;
}
#skill, #getIn, #graphicDesign, #webDesign{
	overflow: hidden;
}
.tool{
	font-size: 20px;
	display: flex;
	flex-direction: column;
}
.tool .app{
	margin-bottom: 20px;
}
.tool svg{
	width: 40px;
	height: 40px;
	margin-right: 20px;
}
.tool .app p svg path{
	transition: all .3s ease-in-out;
	stroke: #ffffff;
}
.tool .app p:hover #adobe-xd #x, .tool .app p:hover #dreamweaver #d{
	stroke-width: 0;
	fill: #470137;
}
.tool .app p:hover #adobe-xd #xd, .tool .app p:hover #dreamweaver #dw{
	stroke-width: 0;
	fill: #FF61F6;
}
.tool .app p:hover #wordpress path{
	stroke-width: 0;
	fill: #00749A;
}
.tool .app p:hover #html #ht{
	stroke-width: 0;
	fill: #E34F26;
}
.tool .app p:hover #html #ml{
	fill: #EF652A;
}
.tool .app p:hover #html #cinque, .tool .app p:hover #css #tre{
	stroke-width: 0;
	fill: #ffffff;
}
.tool .app p:hover #css #cs{
	stroke-width: 0;
	fill: #1B73BA;
}
.tool .app p:hover #css #c{
	fill: #1C88C7;
}
.tool .app p:hover #javascript #j{
	stroke-width: 0;
	fill: #F0DB4F;
}
.tool .app p:hover #javascript #js{
	stroke-width: 0;
	fill: #323330;
}
.tool .app p:hover #bootstrap{
	stroke-width: 0;
	fill: #7952B3;
}

.tool .app p:hover #illustrator #a{
	stroke-width: 0;
	fill: #330000;
}
.tool .app p:hover #illustrator #ai{
	stroke-width: 0;
	fill: #FF9A00;
}
.tool .app p:hover #photoshop #p{
	stroke-width: 0;
	fill: #001E36;
}
.tool .app p:hover #photoshop #ps{
	stroke-width: 0;
	fill: #31A8FF;
}
.tool .app p:hover #indesign #i{
	stroke-width: 0;
	fill: #49021F;
}
.tool .app p:hover #indesign #id{
	stroke-width: 0;
	fill: #FF3366;
}

.works{
	padding-top: 50px;
}
.works .swiper-slide img{
	width: 100%;
	height: 150px;
	object-fit: cover;
}
#getIn a{
	font-size: 16px;
}
#getIn a span.barra{
	position: absolute;
	left: auto;
	bottom: -5px;
	right: 0;
	width: 0%;
	height: 1px;
	background-color: #FFFFFF;
	transition: all .6s ease-in-out;
}
#getIn a:hover span.barra{
	width: 100%;
	right: auto;
	left: 0;
}
.bottoni{
	display: flex;
	flex-direction: column;
	text-align: end;
	padding-right: 3%;
}
.progetti{
		padding: 100px 0;
	}
#portfolio section:not(#hero){
	padding: 100px 0 0;
	position: relative;
}
#portfolio h1 div{
	animation: ruotaP 6s linear infinite;
	animation-direction: alternate;
}
@-webkit-keyframes ruotaP{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-90%);
		-moz-transform: translateX(-90%);
		-o-transform: translateX(-90%);
		-ms-transform: translateX(-90%);
		transform: translateX(-90%);
	}
}
@-webkit-keyframes ruotaP{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-90%);
		-moz-transform: translateX(-90%);
		-o-transform: translateX(-90%);
		-ms-transform: translateX(-90%);
		transform: translateX(-90%);
	}
}
@-moz-keyframes ruotaP{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-90%);
		-moz-transform: translateX(-90%);
		-o-transform: translateX(-90%);
		-ms-transform: translateX(-90%);
		transform: translateX(-90%);
	}
}
@-o-keyframes ruotaP{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-90%);
		-moz-transform: translateX(-90%);
		-o-transform: translateX(-90%);
		-ms-transform: translateX(-90%);
		transform: translateX(-90%);
	}
}
@keyframes ruotaP{
	0%{
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-o-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-webkit-transform: translateX(-90%);
		-moz-transform: translateX(-90%);
		-o-transform: translateX(-90%);
		-ms-transform: translateX(-90%);
		transform: translateX(-90%);
	}
}
#portfolio .wrapper-img{
	width: 280px;
	height: 200px;
	border: 1px solid #ffffff;
	position: relative;
	margin-bottom: 50px;
}
#portfolio .wrapper-img .lavori, #portfolio .wrapper-img .sito {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100%;
	height: 100%;
}
#portfolio .wrapper-img .lavori .swiper-wrapper .swiper-slide img, #portfolio .wrapper-img .sito{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#portfolio .sito{
	object-position: top;
}
#portfolio .testi h3{
	padding-top: 0;
}
#portfolio .testi p{
	margin: 0 0 30px;
}
#portfolio .testi a{
	font-size: 14px;
	border-bottom: 1px solid #FFFFFF;
}
#portfolio section#getIn{
	padding: 100px 0;
}
span.swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	border-radius: 0;
	background-color: #FFFFFF;
	opacity: 1;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
	margin: 0 10px;
}
span.swiper-pagination-bullet-active{
	background-color: #000000;
	mix-blend-mode: difference;
}




footer{
	border-top: 1px solid #ffffff;
	padding: 50px 0;
}
footer p, footer a{
	font-size: 12px;
}
footer .termini a{
	margin-left: 30px;
	color: #96FF6E!important;
}












@media (min-width: 576px){
	.container{
	padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
}
	h1{
		font-size: 35px;
	}
	h1 div, #portfolio h1 div{
		animation: none;
	}
	.works .swiper-slide img{
		height: 250px;
	}
	#portfolio h1{
	width: 70%;
	margin: auto;
	}
	.bottoni{
	width: 70%;
	margin: 5px auto 0;
	padding: 0;
	}
	#portfolio .wrapper-img{
	width: 450px;
	height: 300px;
	margin-bottom: 100px;
	}
}






















@media (min-width: 768px){
	body{
		font-size: 18px;
		line-height: 26px;
	}
	h1{
		font-size: 50px;
	}
	h2{
		font-size: 40px;
	}
	header .logo p {
	font-size: 37px;
	margin: 0;
	}
	.lingua{
	margin-left: 30px;
	}
	.guido{
		font-size: 30px;
		padding: 0;
	}
	.pieno{
		top: 5px;
		left: 5px;
	}
	.pienoSx{
		left: auto;
		right: 5px;
	}
	#portfolio h3{
		font-size: 30px;
	}
	#portfolio .testi p{
		font-size: 20px;
		line-height: 28px;
	}
	.works .swiper-slide img{
	height: 350px;
	}
	#getIn a{
		font-size: 30px;
	}
	footer p, footer a{
		font-size: 15px;
		margin: 0;
	}
	.bottoni a{
	font-size: 30px;
	line-height: 120%;
	}
	
	#portfolio .wrapper-img{
	width: 630px;
	height: 400px;
	margin-bottom: 100px;
	}
	#portfolio .wrapper-img.wrapper-imgDx{
	margin: 0 0 100px auto;
	}
	
	#portfolio .wrapper-img .lavori, #portfolio .wrapper-img .sito{
	top: 10px;
	left: 10px;
	}
	#portfolio .wrapper-img.wrapper-imgDx .lavori{
	top: auto;
	left: -10px;
	bottom: -10px;
	}
	#portfolio .testi{
	padding: 0 30px;
	}
	#portfolio .testi a{
	font-size: 18px;
	}
}


@media (min-width: 992px){
	h1{
		font-size: 70px;
	}
	h2{
		font-size: 60px;
	}
	h3{
		font-size: 25px;
	}
	.lightDark p.on{
	display: block;
	}
	.switch{
		margin-right: 10px;
	}
	#about p{
	font-size: 24px;
	line-height: 32px;
	padding: 0;
	}
	.tool{
		font-size: 24px;
	}
}







@media (min-width: 1440px){
	.works .swiper-slide img{
	height: 350px;
	object-fit: cover;
	}
	
	
}