.block-notes {width: 560px;height: 390px;background-image: url(../img/home/calcolo_risparmio.svg); background-repeat: no-repeat; float: left;padding: 80px 50px 60px 40px;display: flex;flex-wrap: wrap;font-family: caveat;font-size: 25px;align-items: center;background-size: contain;}


.block-notes .flex-rows {width: 100%;display: flex;flex-wrap: wrap;align-items: center;align-content: center;}

.block-notes .flex-rows .label-col {width: 54%;line-height: 27px;display: flex;align-items: center;align-content: center; color: #616467;}

.block-notes .flex-rows:last-child .label-col {color: #616467;}


.block-notes .flex-rows .label-col img {width: 30px;height: 17px;margin: 14px 0 0 20px;}

.block-notes .flex-rows .value-col {width: 46%;font-size: 50px;text-align: right;}

.block-notes .flex-rows:last-child .value-col {color: #56b359;}


.block-notes .flex-rows .value-col .sep {height: 14px;width: 180px;background-image: url(../img/home/calculator-sep.png);background-size: 100%;float: right;position: relative;right: -10px;}


/* Large devices (desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

.s-calc {
width: 100% !important;
}

.s-sliders {
float: none !important;
width: 500px !important;
margin: 0 auto !important;
}

.block-notes {
margin: 40px auto 0 !important;
float: none;
}

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

	.s-calc {
	width: 100% !important;
	}

	.s-sliders {
	float: none !important;
	width: calc(100% - 32px) !important;
	margin: 0 auto !important;
	}

	.block-notes {
	display: none !important;
	}

.s-calc .s-slider .label {
font-size: 18px !important;
line-height: 18px !important;
}

.s-calc .s-slider span {
font-size: 26px !important;
line-height: 20px !important;
font-weight: 300px;
}

.block-notes .flex-rows .label-col {font-size: 18px;line-height: 20px;width: 65%;}

.block-notes .flex-rows .label-col img {width: 20px;height: 11px;margin: 7px 0 0 10px;}


.block-notes .flex-rows .value-col {font-size: 20px;width: 35%;}

.block-notes .flex-rows .value-col .sep {width: 90px;height: 7px;right: -5px;}

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}











.container-custom {
max-width: 230px;
margin: 50px auto 250px;
position: relative;
width: 100%;
}

.svg-success {
display: inline-block;
vertical-align: top;
opacity: 1;
overflow: visible;
transform: rotate(-90deg);
}

/*
@keyframes success-circle-outline {
0% {
stroke-dashoffset: -72px;
opacity: 1
}

5% {
stroke-dashoffset: -64px;
opacity: 1
}

10% {
stroke-dashoffset: -64px;
opacity: 1
}

20% {
stroke-dashoffset: -50px;
opacity: 1
}

25% {
stroke-dashoffset: -50px;
opacity: 1
}

35% {
stroke-dashoffset: -36px;
opacity: 1
}

40% {
stroke-dashoffset: -36px;
opacity: 1
}

50% {
stroke-dashoffset: -22px;
opacity: 1
}

55% {
stroke-dashoffset: -22px;
opacity: 1
}

65% {
stroke-dashoffset: -7px;
opacity: 1
}

70% {
stroke-dashoffset: -7px;
opacity: 1
}

75% {
stroke-dashoffset:0px ;
opacity: 1
}

100% {
stroke-dashoffset: 0px;
opacity: 1
}
}
*/

@keyframes success-circle-outline {
0% {
stroke-dashoffset: -72px;
opacity: 1
}

100% {
stroke-dashoffset: 0px;
opacity: 1
}
}

.success-circle-outline {
fill: none;
stroke-width: 3px;
stroke: #4c0505;
stroke-dasharray: 72px, 72px;
stroke-dashoffset: 72px;
opacity: 0;
/*stroke-linecap: butt;*/
}

.start-animation .success-circle-outline {
animation: success-circle-outline 10s linear 0s forwards;
}

.dots-circle-outline {
fill: none;
stroke-width: 1px;
stroke: #63646900;
stroke-dasharray: 0.1px, 12px;
stroke-dashoffset: 0.2px;
opacity: 1;
}

// Can't animate stroke-dashoffset on IE 10 and 11, just show svg instead
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.success-tick {
stroke-dasharray: 0;
stroke-dashoffset: 0;
animation: none;
opacity: 1;
}

.success-circle-outline {
stroke-dasharray: 0;
stroke-dashoffset: 0;
animation: none;
opacity: 1;
}

.success-circle-fill {
animation: none;
opacity: 1;
}
}

.circle-step {
position: absolute;
width: 50px;
height: 50px;
transform: scale(0,0);
opacity: 0;
transition: ease-out 300ms all;
}

.circle-step span {
display: block;
background: #ffffff;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 47px;
text-align: center;
font-size: 24px;
font-weight: 500;
border: 2px solid #4c0505;
color: #4c0505;
transition: ease-out 150ms all;
}

.circle-step.started {
transform: scale(1,1);
opacity: 1;
}

.circle-step.started span {
cursor: pointer;
}

.circle-step.started:hover span {
transform: scale(1.1,1.1);
}

#circle_3.circle-step.started {
transform: translateX(-50%) scale(1,1);
opacity: 1;
}

.circle-step .text {
position: absolute;
width: 450px;
color: #616467;
padding: 5px 10px 0 10px;
background: #f7f7f7;
transition: linear 150ms all;
}

.circle-step.started:hover .text {
background: white;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.21);
	transform: scale(1.3);
}
#circle_3.circle-step.started:hover	 .text {
	transform: translateX(-50%) scale(1.3);
}


.circle-step .text h3 {
color: #4c0505;
font-size: 18px;
margin-bottom: 0;
}

.circle-step .text p {
font-size: 13px;
margin-bottom: 10px;
line-height: 20px;
font-weight: 400;
}

.circle-step .text p b {
}

#circle_1.circle-step {
top: 5%;
left: 4%;
}

#circle_1.circle-step .text {
position: absolute;
right: 100px;
bottom: 0;
text-align: right;
font-weight: 400;
}

#circle_2.circle-step {
top: 56%;
left: -6%;
}

#circle_2.circle-step .text {
position: absolute;
right: 100px;
top: 0;
text-align: right;
}

#circle_3.circle-step {
top: 87%;
left: 50%;
transform: translateX(-50%) scale(0,0);
}

#circle_3.circle-step .text {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}

#circle_4.circle-step {
top: 56%;
right: -6%;
}

#circle_4.circle-step .text {
position: absolute;
left: 100px;
top: 0;
text-align: left;
}

#circle_5.circle-step {
top: 5%;
right: 4%;
}

#circle_5.circle-step .text {
position: absolute;
left: 100px;
bottom: 0;
text-align: left;
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

	.circle-step .text {
	width: 320px;
	}

	#circle_5.circle-step .text {
	/*bottom: -40px;*/
	}

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}










.history-timeline-block {
margin-top: 50px;
position: relative;
padding-left: 50px;
}

.year-item:before {
content:"";
display: block;
left: -40px;
bottom: -5px;
top: 6px;
width: 3px;
background: #4c0505;
position: absolute;
}

.year-item:last-child:before {
display: none !important;
}

.year-item {
padding-bottom: 30px;
position: relative;
}

.year-item-title {
position: relative;
cursor: pointer;
display: inline-block;
font-size: 16px;
margin-bottom: 10px;
color: #4c0505;
font-weight: 500;
line-height: 22px;
}

.year-item-title span {
font-weight: 600;
color: #184c98;
}

.year-item-title img {
position: static;
width: 24px;
height: 24px;
background: #ffffff;
left: -50px;
top: 5px;
z-index: 3;
margin-right: 10px;
}

.year-item-title div {
position: absolute;
width: 36px;
height: 36px;
background: #ffffff;
left: -56px;
top: 50%;
border-radius: 50%;
border: 2px solid #4c0505;
transition: all linear 150ms;
color: #4c0505;
text-align: center;
line-height: 34px;
transform: translateY(-50%);
}

.year-item-title.open div {
position: absolute;
background: #4c0505;
transition: all linear 150ms;
color: #fff;
}



.year-item-content {
}

.year-decade {
font-size: 40px;
line-height: 1.1;
background: #184c98;
color: #fff;
padding: 10px 0px 15px;
position: relative;
font-weight: 600;
margin-bottom: 20px;
margin-top: 50px;
position: relative;
border-radius: 0 0 20px 0;
}

.year-decade:before {
content:"";
display: block;
width: 50px;
top: 0;
bottom:0;
left: -50px;
background: #184c98;
position: absolute;
z-index: 0;
border-radius: 5px 0 0 5px;
}


.year-decade:after {
content:"";
display: block;
width: 13px;
top: -3px;
bottom:-3px;
left: -50px;
background: #184c98;
position: absolute;
z-index: 0;
border-radius: 5px 0 0 3px;
border: 3px solid #f09f1f;
border-right: 0;
}