/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
	@import url("framework.css");

	html{
		scroll-behavior: smooth;
	}

	img:hover{
		transition: 0.5s;transform: scale(1.1);
	}
	#header #logo{
		margin:22px 0 0 0;
	}

	#introduzione{
		padding:200px 0 280px;
	}

	#introduzione article, #introduzione article p{
		display:block;
		max-width:75%;
		margin:0 auto;
		text-align:center;
	}
	#introduzione article p{
		max-width:65%;
		line-height:2rem;
	}
	#introduzione .titolo-progetto{
		margin-bottom:20px;
		font-size:4rem;
		font-family: "montserrat",sans-serif;
	}
	#introduzione footer{
		margin-top:50px;
	}

	.container{
		padding:0 0;
	}

	.sectiontitle{
		display:block;
	    max-width:55%;
	    margin:0 auto 80px;
	    text-align:center;
	}
	.sectiontitle *{
		margin:0;
	}

	.elements-three li, .elements-four li{
		margin-bottom:50px;
	}
	.elements-three li:nth-child(3n+1), .elements-four li:nth-child(4n+1){
		width: 100%; margin-left:0;
		} /*parte da uno e seleziona raggrupando a gruppi di 3*/
	.elements article{
		display:block;
		padding:30px 15px;
		border-radius:25px;
		text-align:center;
	}
	.elements article *{
		padding:0; line-height:1;
	}
	.elements article i{
		width:60px;
		height:60px;
		line-height:60px;
		margin-bottom:30px;
		font-size:1.6rem;
		text-align:center;
		border-radius:50%;
	}
	.elements article .titolo-progetto{
		font-size:1.2rem;
		font-weight:700;
		font-weight: bold;
	}
	.elements article p{
		margin:0;
		line-height:28px;
		text-align: left;
		padding-left: 3%;
		padding-right: 3%;
	}


	#introblocks{
		display:block;
	    position:relative;
	    margin:-160px 0 130px 0;
	    z-index:1;
	}

	#copyright{
		padding:20px 0;
	}
	#copyright *{
		margin:0;
	    padding:0;
	}

	*, *::before, *::after{
		transition:all .3s ease-in-out;
	}

	nav ul, nav ol{
		margin:0;
	    padding:0;
	    list-style:none;
	}

	#mainav .drop::after, #mainav li li .drop::after, .sidebar nav a::after{
		position:absolute;
		font-family:"Font Awesome\ 5 Free";
		font-weight:900;
		font-size:10px;
		line-height:10px;
	}

	#mainav ul{
		text-transform:uppercase;
	}
	#mainav ul ul{
		position:absolute;
		width:180px;
		text-transform:none;
		z-index:9999;
	}
	#mainav ul ul ul{
		left:180px; top:0;
	}
	#mainav li{
		display:inline-block;
		position:relative;
		margin:0 15px 0 0; padding:0;
	}
	#mainav li:last-child{
		margin-right:0;
	}
	#mainav li li{
		width:100%;
		margin:0;
	}
	#mainav li a{
		display:block;
		padding:30px 0;
	}
	#mainav li li a{
		border:solid;
		border-width:0 0 1px 0;
	}
	#mainav .drop{padding-left:15px;}
	#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
	#mainav .drop::after{top:35px; left:5px;}
	#mainav li li .drop::after{top:15px; left:5px;}
	#mainav ul ul{visibility:hidden; opacity:0;}
	#mainav ul li:hover > ul{visibility:visible; opacity:1;}

	#mainav form{display:none; width:100%; margin:0; padding:0;}
	#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
	#mainav form select{width:100%; padding:5px; border:none;}
	#mainav form select option{margin:5px; padding:0; border:none;}

	#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
	#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
	#backtotop.visible{visibility:visible; opacity:.5;}
	#backtotop:hover{opacity:1;}


	body{color:#A5A6AA; background-color:#282E39;}
	a{color:#97A9BD}
	a:active, a:focus{background:transparent !important;}
	hr, .borderedbox{border-color:#D7D7D7;}
	label span{color:#FF0000; background-color:inherit;}
	input:focus, textarea:focus, *:required:focus{border-color:#97A9BD !important;}

	.quasiTutto{color:#FFFFFF; background-color:inherit;}
.quasiTutto::after{color:inherit; background-color:rgba(40,46,57,.7);/* #282E39 */}
.quasiTutto.light::after{background-color:rgba(151,169,189,.7);/* #97A9BD */}

	.gradient{color:#474747; background:linear-gradient(to bottom, #F4F4F4 55%, #FFFFFF 50%, #FFFFFF 100%);}
	@media screen and (max-width:750px){
		.gradient{background:linear-gradient(to bottom, #F4F4F4 24%, #FFFFFF 19%, #FFFFFF 100%);}
	}

	.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#97A9BD; border-color:#97A9BD;}
	.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

	.imgover:hover::before{background-color:rgba(151,169,189,.5);/* #97A9BD */}
	.imgover, .imgover:hover::after{color:#FFFFFF;}

	.mioNome a{color:#FFFFFF;}
	.mioNome::first-letter, .mioNome span{color:#1C3540;}
	.primo{
		color:#FFFFFF;
		background-color:#000000;
	}

	.secondo{
		color:#474747;
		background-color:#FFFFFF;
	}

	.terzo, .terzo a{
		color:#A5A6AA;
		background-color:#282E39;
	}
	.coloured{
		color:#FFFFFF;
	    background-color:#97A9BD;
	}

	#header #logo a{
		color:inherit;
	}

	#introduzione{
		color:#FFFFFF;
	}


	#introblocks .elements li article{
		color:#FFFFFF;
		background-color:#97A9BD;
	}
	#introblocks .elements li article a i{
		color:#97A9BD;
		background-color:#FFFFFF;
	}
	#introblocks .elements li article:hover a i{
		color:#FFFFFF !important;
		background-color:#97A9BD;
	}
	#mainav li a{
		color:inherit;
	}
	#mainav .active a, #mainav a:hover, #mainav li:hover > a{
		color:#97A9BD;
		background-color:inherit;}
	#mainav li li a, #mainav .active li a{
	color:#FFFFFF;
	background-color:rgba(151,169,189,.5);
	border-color:rgba(151,169,189,.5);
}
	#mainav li li:hover > a, #mainav .active .active > a{
		color:#FFFFFF;
		background-color:#97A9BD;
	}
	#mainav form select{
		color:#474747;
		background-color:#FFFFFF;
	}

	#backtotop{
		color:#FFFFFF;
	    background-color:#97A9BD;
	}

	#dwn{
		margin-left: 815px;
		margin-top: -70px;
		height: 40px;
	}

	@-ms-viewport{width:device-width;}

	@media screen and (min-width:1140px){
		.aiuto{
	    	max-width:1140px;
	    }
	}

	@media screen and (min-width:978px) and (max-width:1140px){
		.aiuto{
	    	max-width:95%;
	    }
	}

	@media screen and (max-width:978px){
		.aiuto{
	    	max-width:90%;
	    }

		#header{
	    	padding:30px 0;
	    }
		#header #logo{
	    	margin-top:0;
	    }

		#mainav ul{
	    	display:none;
	    }
		#mainav form{
	    	display:block;
	        margin-top:2px;
	    }

		#copyright p:first-of-type{
	    	margin-bottom:10px;
	    }
	}

	@media screen and (max-width:750px){
		.imgl, .imgr{
	    	display:inline-block;
	        float:none;
	        margin:0 0 10px 0;
	     }
		.fl_left, .fl_right{
	    	display:block;
	        float:none;
	     }

		.one_half, .one_third, .two_third, .progetti, .two_quarter, .three_quarter{
	    	display:block;
	        float:none;
	        width:auto;
	        margin:0 0 30px 0;
		}

		#header{
	    	text-align:center;
	    }
		#header #logo{
	    	margin:0 0 15px 0;
	    }

		#introduzione article, #introduzione article p{
	    	max-width:none;
	    }
		#introduzione .titolo-progetto{
	    	font-size:2rem;
	    }
		.elements-three li:nth-last-child(-n+3), .elements-four li:nth-last-child(-n+4){
	    	margin-bottom:50px;
	    }
	}

	*{
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
	}
	
	.container2{
		position: relative;
		max-width: 500px;
		width: 100%;
		margin: 0 auto;
		padding: 10px 20px;
		border-radius: 7px;
		font-family: 'Poppins', sans-serif;
	}

	.container .skill-box{
		width: 100%;
		margin: 25px 0;
	}

	.skill-box .title{
		display: block;
		font-size: 14px;
		font-weight: 600;
		color: #333;
	}

	.skill-box .skill-bar{
		height: 8px;
		width: 100%;
		border-radius: 6px;
		margin-top: 6px;
		background: rgba(0,0,0,0.1);
	}

	.skill-bar .skill-per{
		position: relative;
		display: block;
		height: 100%;
		width: 90%;
		border-radius: 6px;
		background: #4070f4;
		animation: progress 0.4s ease-in-out forwards;
		opacity: 0;
	}

	.skill-per.devc{
		width: 85%;
		animation-delay: 0.1s;
	}

	.skill-per.html{
		width: 95%;
		animation-delay: 0.1s;
	}

	.skill-per.css{
		width: 100%;
		animation-delay: 0.1s;
	}

	.skill-per.assembly{
		width: 90%;
		animation-delay: 0.1s;
	}

	.skill-per.javascript{
		width: 75%;
		animation-delay: 0.2s;
	}

	.skill-per.java{
		width: 60%;
		animation-delay: 0.3s;
	}

	@keyframes progress {
		0%{
			width: 0;
			opacity: 1;
		}
		100%{
			opacity: 1;
		}
	}

	.skill-per .tooltip{
		position: absolute;
		right: -14px;
		top: -28px;
		font-size: 9px;
		font-weight: 500;
		color: #fff;
		padding: 2px 6px;
		border-radius: 3px;
		background: #4070f4;
		z-index: 1;
	}

	.tooltip::before{
		content: '';
		position: absolute;
		left: 50%;
		bottom: -2px;
		height: 10px;
		width: 10px;
		z-index: -1;
		background-color: #4070f4;
		transform: translateX(-50%) rotate(45deg);
	
	}