@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #f4f4f4;
    font-family: 'Montserrat', sans-serif;
	align-items: center;
	justify-content: center;
	
	margin: 0;
}


.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.parent-istruzione {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 1 / 1 / 2 / 2; }
.div8 { grid-area: 1 / 2 / 2 / 3; }


.progressx, .progress2, .progress3, .progress4, .progress5, .progress6, .progress7, .progress8, .progress9, .progress10 {
	background-color: #d8d8d8;
	border-radius: 20px;
	position: relative;
	margin: 15px 60px;
	margin-left: 0px;
	margin-top: 1%;
	height: 50%;
}

.progress-done, .progress-done2, .progress-done3, .progress-done4, .progress-done5, .progress-done6, .progress-done7, .progress-done8, .progress-done9, .progress-done10 {
	background: linear-gradient(to left, #F2709C, #FF9472);
	box-shadow: 0 3px 3px -5px #F2709C, 0 2px 5px #F2709C;
	border-radius: 20px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
}