img {
	width: 100%;
}

hr {
	margin-top:60px;
	margin-bottom: 20px;
	color: crimson;
	margin-left:20px;
	margin-right:20px;
}

button{
	border: 3px lightblue solid;
	border-radius: 50px;
	height: 50px;
	width: 156px;
	background-color: white;
	text-align: right;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	padding-right: 25px;    
	box-shadow: 2px grey;
	margin-top: 35px;
}

button:hover {
	cursor: pointer;

}

button > img {
	margin-left:0px;
	margin-right: 20px;
	width: 20px;
	height: 20px;
}

h2{
	font-family: Quicksand;
	font-weight: 200;
	text-align: left;
	height: 30px;
	margin-bottom:15px;
	width:px;
}
dl dd {
	padding:;
	float: left;
	width: 60%;
	text-align: left;
	margin: 7px;
}

dl dt {
	float: left;
	padding ;
	width:30% ;
	text-align: left;
	margin:7px;
	font-weight: bold;
}

.avatar-rettangolo {

	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin: 25px;
	padding-top: 10px;
	padding-left: 15px;
}


#avatar-box {
	width: 300px;
	# background-color: beige;
	float: left;
	height: 300px;

}

#header-text-box{
	width: 510px;
	float: right;
	#background-color:azure;
	height: 300px;
}

#name-subtitle-box{
	padding-top: 60px;
	# background-color:cornsilk;
	text-align: left;
}

#name {
	font-family: Quicksand;
	font-size:40px;
	font-weight: bold;
	letter-spacing: 6px;
	margin: 0; 
}

#subtitle {
	margin: 0;
	margin-bottom: 30px;
	font-family: Quicksand;
	font-weight: 100;
}

.icons {
	width: 30px;
	height: 30px;
	margin-right: 30px;

}

div#facebook.icons.fa.fa-facebook{
	font-size: 25px;
}

div#linkedin.icons.fa.fa-linkedin{
	font-size: 25px;

}

div#pinterest.icons.fa.fa-pinterest{
	font-size: 25px;

}
div#instagram.icons.fa.fa-instagram{
	font-size: 25px;
}

#icons-box {
	text-align: left;
	padding-top:90;
}

#about-me{
	font-family: Quicksand;
	# background-color:antiquewhite;  
	width:810px;
	margin:30px;
	height: 400px;
	margin-bottom: 20px; 
}

#about-me-title{
	font-weight: bold;
	text-align:left;
	font-size: 30px;
	margin-bottom: 30px;
	margin-top: 30px;

}

#about-me-text{
	font-weight: ligher;
	line-height: 30px;
	letter-spacing:2px;
	font-size: 16px;

}

#signature{
	height: 80px; 
	width: 250px;
	float: right;
}


#block1{
	width:810px;
	margin-right:20px;
	margin-left: 20px;
	margin-top: 20px;
	# background-color: darksalmon;
	height:200px;

}
#personal-information-box {
	# background-color:azure;
	width: 390px;
	height: 250px;
	float:left;
	font-family: Quicksand;
	padding-left: 10px;

}

#languages-box{
	#background-color: cyan;
	height:250px;

	width: 390px;
	float:right;
	font-family: Quicksand;
	padding-left:0px;
}

#title-languages{
	font-family:quicksand;
	font-weight:100;
}

.languages-subtitles {
	font-family: Quicksand;
	text-align: left;
	margin: 10px;
}

.languages-subtitles h3 {
	margin: 1px;
	margin-left: 5px;
	margin-bottom: 5px;
	font-size: 14px;
}

#progress-bar{
	width:300px;
	# background-color:bisque;
	height: 20px;
	margin: 0px;
}

.bullets-fill{
	background-color: lightblue;
	border-radius: 50px;
	margin: 5px;
	margin-top: 0;
	height: 15px;
	width: 15px;
	float: left;
}

.bullets-empty{
	border-width:1px;
	border-style: solid;
	border-radius:50px;
	margin:5px;
	margin-top:0;
	width:15px;
	height:15px;
	border-color: lightblue;
	float:left;

}

#block2{
	width:810px;
	height:205px;
	# background-color:darkcyan;
	margin-left: 20px;
	margin-right: 20px;

}

.professional-skills-title{
	font-family: Quicksand;
	width: 400px;
	padding-left: 5px;
}


#progress-circle-box{

	width: 400px;
	height:200px;
	float:left;
	padding-left: 5px;
}


.circle1{
	float:left;
	width: 100px;
	height:100px;

}

/*.circle1 > svg {
transform: rotate(-15deg);
}*/

.circle2{
	float:left;
	width:100px;
	height:100px;
}

.circle3{
	float:left;
	width:100px;
	height:100px;
}

.circle4{
	float:left;
	width:100px;
	height:100px;
}

.cerchio-sotto {
	cx:50%;
	cy:50%;
	r:40px;
	fill:none;
	stroke-width:66%;
	stroke: white;

}

#cerchio-sopra-1{
	cx:50%;
	cy:50%;
	r:40px;
	fill:none;
	stroke:lightblue;
	stroke-dasharray:220px;
	stroke-dashoffset:5px;
	stroke-width: 3%;

}


#cerchio-sopra-2{
	cx:50%;
	cy:50%;
	r:40px;
	fill:none;
	stroke:lightblue;
	stroke-dasharray:197.92px;
	stroke-dashoffset:20px;
	stroke-width: 3%;

}

#cerchio-sopra-3{
	cx:50%;
	cy:50%;
	r:40px;
	fill:none;
	stroke:lightblue;
	stroke-dasharray:197.92px;
	stroke-dashoffset:40px;
	stroke-width: 3%;

}

#cerchio-sopra-4{
	cx:50%;
	cy:50%;
	r:40px;
	fill:none;
	stroke:lightblue;
	stroke-dasharray:197.92px;
	stroke-dashoffset:20px;
	stroke-width: 3%;titl

}

svg {
	height:titl0px;
	width:100px;
	position: absolute;

}

.percentage{

	transform: translate(35px, 40px);
	font-weight: 200;
	font-family: Quicksand;
	width: 30px;

}

.skill-title{
	position: absolute;
	margin: 0 auto;
	text-align: center;
	width: 100px;
	margin-top: 70px;
	z-index: 2;
	font-weight: 700;
}

#progress-bar-box{
	width:390px;
	# background-color: beige;
	float: right;
	height:200px;
	padding-left: 10px;

}

#progress-line-box-1, #progress-line-box-2, #progress-line-box-3{
	margin-top: 25px;
}

.progress-title{
	font-family: Quicksand;
	font-size: 15px;
	margin-top:10px;
}
.line-under-1{
	height: 5px;
	width: 340px;
	background-color: lightgrey;
	border-radius: 30px;	
}

.line-under-1::after{
	content:'';
	display:block;
	background-color: lightblue;
	width: 200px;
	height: 5px;
	border-radius: 0%;
	margin-top: 10px;
}

.line-under-2{
	height: 5px;
	width: 340px;
	background-color: lightgrey;
	border-radius: 30px;	
}

.line-under-2::after{
	content:'';
	display:block;
	background-color: lightblue;
	width: 300px;
	height: 5px;
	margin-top: 10px;
}

.line-under-3{
	height: 5px;
	width: 340px;
	background-color: lightgrey;
	border-radius: 30px;	
}

.line-under-3::after{
	content:'';
	display:block;
	background-color: lightblue;
	width: 100px;
	height: 5px;
	margin-top: 10px;
}

#percentage-bar{
	float: right;
	margin-right: 30px;
	font-family: Quicksand;
}

.avatar-barra{
	height: 40px;
	width: 40px; 
	border-radius: 50px;
	margin-bottom: 20px;
}