#sobre {
    padding: 120px 0px;
    align-items:center;
}

#sobre img {
    box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
    max-width:100%;
}

#sobre .title {color: var(--cor-primaria); font-size:70px; font-weight:100;margin:0px;}

#sobre .sobre {
    padding:50px;
}

#sobre .artist-summary {font-family: "Montserrat", sans-serif; line-height: 24px; margin: 40px 0px}

.page-sobre .page-content {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height:22px;
    padding:50px 0px;
}

.artist-timeline {
    display:flex;
    position:relative;
    overflow:auto;
    padding:30px 5vw 20px;
}

/* width */
.artist-timeline::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.artist-timeline::-webkit-scrollbar-track {
  background: #726b5d24;
}

/* Handle */
.artist-timeline::-webkit-scrollbar-thumb {
  background: #555;
    border:4px solid #e0dfdd;
    border-radius:10px;
}

/* Handle on hover */
.artist-timeline::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#timeline {position:relative;
    margin-top:-30px;}

#timeline:before {
    position: absolute;
    content:"";
    height:12px;
    left:0px;
    right:0px;
    width:100%;
    background:var(--cor-primaria);
    top:50%;
    margin-top: -6px;
}

.artist-timeline .timeline-item {
    min-width: 570px;
    max-width: 570px;
    display:flex;
    margin-right: -250px;
    box-shadow:0px 0px 20px rgba(0,0,0,0.2);
}

.artist-timeline .timeline-item:last-child {
    margin-right:1px
}

.artist-timeline .timeline-item:nth-child(odd) {
    margin-bottom:200px
}

.artist-timeline .timeline-item:nth-child(even) {
    margin-top:200px
}

.timeline-content {
    background: #726b5d;
    padding:16px;
    position:relative;
        box-shadow:0px 0px 20px rgba(0,0,0,0.2);
}

.timeline-content p {
    color:white;
    font-family:"Averia Serif Libre", serif;
    font-weight:100;
    font-style:italic;
}

.timeline-year {
    margin:0px;color:var(--cor-primaria)
}

.timeline-image {
    min-width:150px;
    max-width:150px;
    height:150px;
    margin-right:12px;
        box-shadow:0px 0px 20px rgba(0,0,0,0.2);
}

.timeline-content:before {
    content: "";
    position:absolute;
    width:16px;
    height:16px;
    background:#726b5d;
    border:4px solid #f2f2f2;
    border-radius:50%;
    position:absolute;
    right:16px;
}

.timeline-item:nth-child(odd) .timeline-content:before {
    bottom:-37px;
}

.timeline-item:nth-child(even) .timeline-content:before {
    top:-37px;
}

.timeline-content:after {
    position:absolute;
    content:"";
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 100px 150px 100px;
   border-color: transparent transparent #726b5d transparent;
   transform: rotate(0deg);
    right:20px;
}

.timeline-item:nth-child(odd) .timeline-content:after {
    bottom:-10px;
   border-width: 10px 8px 0 8px;
   border-color: #726b5d transparent transparent transparent;
}

.timeline-item:nth-child(even) .timeline-content:after {
    top:-10px;
   border-width: 0 8px 10px 8px;
   border-color: transparent transparent #726b5d transparent;
}

@media(max-width: 768px) {
    #sobre {padding:0px}
    #sobre .imagem {display:none; }
    #sobre .p50 {width:100%}
    .page-sobre .page-content{padding:0px}

    .artist-timeline {
        flex-direction:column;
        padding:0px 5vw;
        overflow:hidden;
        align-items:center;
    }

    #timeline:before {
        height:auto;
        position: absolute;
        content:"";
        top:0px;
        bottom:0px;
        left:50%;
        right:auto;
        width:3vw;
        background:var(--cor-primaria);
        margin-top: 0px;
        margin-left: -1.5vw;
    }
    #timeline {margin-top:0px;}

    .artist-timeline .timeline-item {
        flex-direction:column;
        box-shadow:none;
    }

    .timeline-image {
        min-width: 35vw;
        max-width: 35vw;
        height:35vw;
        margin-right:0px;
    }

    .timeline-content {
        min-width: 35vw;
        max-width: 35vw;
        box-sizing:border-box;
        padding:3vw
    }

    .artist-timeline .timeline-item {
        min-width: 35vw;
        max-width: 35vw;
        display:flex;
        box-sizing:border-box;
        margin-right:0px;
    }
    
    .artist-timeline .timeline-item:last-child {
        margin-right:1px
    }
    
    .artist-timeline .timeline-item:nth-child(odd) {
        margin-bottom:0px;
        margin-right:55vw;
    }
    
    .artist-timeline .timeline-item:nth-child(even) {
        margin-top:-35vw;
        /* margin-left:55vw; */
        /* align-items:end */
        margin-left:55vw;
    }

    .timeline-content:before {
        width:4vw;
        height:4vw;
        background:#726b5d;
        border:1vw solid #f2f2f2;
        border-radius:50%;
        position:absolute;
        right:auto;
        top:3vw;
    }
    
    .timeline-item:nth-child(odd) .timeline-content:before {
        bottom:auto;
        right:-13vw;
        /* left:42vw; */
    }
    
    .timeline-item:nth-child(even) .timeline-content:before {
        top:4vw;
        left:-13vw;
    }

    .timeline-content:after {
        right:auto;
        top:3vw;
    }
    
    .timeline-item:nth-child(odd) .timeline-content:after {
        bottom:auto;
       border-width: 3vw 0 3vw 3vw;
       border-color: transparent transparent transparent #726b5d;
        right:-2.5vw;
    }
    
    .timeline-item:nth-child(even) .timeline-content:after {
        top:16px;
       border-width: 3vw 3vw 3vw 0;
       border-color: transparent #726b5d transparent transparent;
        left:-2.5vw;
    }

}