.colonna-storia-sing {
display: flex;
flex-direction: row;
position: relative;
}
.colonna-storia-sing::before {
position: absolute;
content: '';
height: 100%;
width: 3px;
background-color: var(--color-tender);
left: 50%;
transform: translate(-50%, 0);
top: 7px;
bottom: 0;
}
.colonna-storia-sing:last-child::before {
height: 0;
}
.anno.titolo-dots {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
background: #fff;
padding: 10px;
}
.colonna-storia-sing > div {
flex-grow: 1;
flex-basis: 50%;
order: 3;
}
.colonna-storia-sing:nth-child(2n+1) > div.singola-colonna {
order: 2;
}
.colonna-storia-sing div.singola-colonna {
}
.colonna-storia-sing div.singola-colonna .anno-spacer {
padding-top: 60px;
}
.colonna-storia-sing div.singola-colonna .contenuto {
position: relative;
padding: 0 20px 50px 65px;
}
.colonna-storia-sing div.singola-colonna .contenuto::after {
position: absolute;
content: '';
height: 60px;
width: 60px;
background-color: var(--color-tender);
border: 3px solid var(--color-tender);
border-radius: 100%;
left: 0;
transform: translate(-50%, -50%);
top: 0;
}
.colonna-storia-sing:nth-child(1) div.singola-colonna .contenuto::after {
height: 15px;
width: 15px;
}
.colonna-storia-sing:nth-child(2) div.singola-colonna .contenuto::after {
height: 20px;
width: 20px;
}
.colonna-storia-sing:nth-child(3) div.singola-colonna .contenuto::after {
height: 25px;
width: 25px;
}
.colonna-storia-sing:nth-child(4) div.singola-colonna .contenuto::after {
height: 30px;
width: 30px;
}
.colonna-storia-sing:nth-child(5) div.singola-colonna .contenuto::after {
height: 35px;
width: 35px;
}
.colonna-storia-sing:nth-child(6) div.singola-colonna .contenuto::after {
height: 40px;
width: 40px;
}
.colonna-storia-sing:nth-child(7) div.singola-colonna .contenuto::after {
height: 45px;
width: 45px;
}
.colonna-storia-sing:nth-child(8) div.singola-colonna .contenuto::after {
height: 50px;
width: 50px;
}
.colonna-storia-sing:nth-child(9) div.singola-colonna .contenuto::after {
height: 55px;
width: 55px;
}
.colonna-storia-sing:nth-child(2n+1) > div.singola-colonna .contenuto::after {
right: 0;
transform: translate(50%, -50%);
left: unset;
}
.colonna-storia-sing div.singola-colonna .contenuto .descrizione p {
margin: 0;
}
.colonna-storia-sing .box-image {
padding: 0 50px 100px 50px;
}
.colonna-storia-sing .box-image .immagine img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
body .colonna-storia-sing > div {
order: 1;
} body .colonna-storia-sing::before {
left: 0;
transform: unset;
}
body .colonna-storia-sing {
display: block;
}
body .colonna-storia-sing:nth-child(2n+1) > div.singola-colonna .contenuto::after {
left: 0;
transform: translate(-50%, -50%);
right: unset;
}
body .colonna-storia-sing {
display: flex;
flex-direction: column-reverse;
}
}