@import url('https://fonts.googleapis.com/css?family=Roboto');


                                                     /*                                   ______________________________                                             */                                               
                                                     /*                                  /                              \                                            */
                                                     /*                                 |   2 linhas que incomodaram...  |                                           */
:root {                                              /*                                  \______________________________/                                            */
    --font-xl: clamp(0.1rem, 4vw + 0.1rem, 1.8rem);  /*         ┬─┬ ノ( ゜-゜ノ)          /                                                              */
    --font-md: clamp(0.1rem, 3vw + 0.1rem, 1.5rem);  /*                             (╯°□°）╯︵ ┻━┻                                                       */
}


.timeline{
    font-family: 'Roboto Thin', sans-serif;
    width:1000px;
    color:aliceblue;
    padding:30px 20px;
    box-shadow:0px 0px 10px rgba(0,0,0,.5);
    margin-bottom: 50px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.2s;
}
span, h3 {
    color: #0E2C40;
    transition: all 0.2s;
}

.timeline ul li:hover span{
    color: aliceblue;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition: all 0.2s;
}

.timeline ul li:hover h3 {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    transition: all 0.2s;
}

.timeline ul li:hover ul {
    -webkit-transform: scale(2);
    transform: scale(2);
    transition: all .2s;
}

.timeline ul li:hover p {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    transition: all 0.2s;
}

.timeline ul{
    list-style-type:none;
    border-left:2px solid aliceblue;
    padding:10px 5px;
    
}
.timeline ul li{
    padding:20px 20px;
    position:relative;
    cursor:pointer;
    transition:.2s;
}
.timeline ul li span{
    display:inline-block;
    background-color:#eebe7a;
    border-radius:25px;
    padding:2px 5px;
    font-size: var(--font-xl);
    text-align:center;
}
.timeline ul li .content h3{
    color:#eebe7a;
    font-size: 1.8vw;
    padding-top:5px;
    font-size: var(--font-xl);
}
.timeline ul li .content p{
    padding:5px 0px 15px 0px;
    font-size: var(--font-md);
}

.timeline ul li:before{
    position:absolute;
    content:'';
    width:10px;
    height:10px;
    background-color:aliceblue;
    border-radius:50%;
    left:-11px;
    top:28px;
    transition:.5s;
}
.timeline ul li:hover{
    box-shadow:0px 0px 10px rgba(0,0,0,.5);
    
}
.timeline ul li:hover:before{
    background-color:#eebe7a;
    box-shadow:0px 0px 10px 2px #eebe7a;
}

.hub:hover {
    color: #eebe7a;
}

.sm {
    margin-bottom: 0px;
}

p {
    text-align: justify;
}

@media screen and (max-width: 1140px){
    .timeline{
        font-family: 'Roboto Thin', sans-serif;
        width:90%;
        color:aliceblue;
        padding:30px 20px;
        box-shadow:0px 0px 10px rgba(0,0,0,.5);
        margin-bottom: 50px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        transition: all 0.2s;
    }
}

@media screen and (max-width: 760px){

    .timeline ul li span{
        display:inline-block;
        background-color:#eebe7a;
        border-radius:25px;
        padding:2px 5px;

        text-align:center;
    }
    .timeline ul li .content h3{
        color:#eebe7a;
        padding-top:5px;
    }
    .timeline ul li .content p{
        padding: 5px 0px 15px 0px;

        margin-right: 10px;
    }    
}

@media screen and (max-width: 600px){
    .timeline ul li span{
        display:inline-block;
        background-color:#eebe7a;
        border-radius:25px;
        padding:2px 5px;

        text-align:center;
    }
    .timeline ul li .content h3{
        color:#eebe7a;

        padding-top:5px;
    }
    .timeline ul li .content p{
        padding: 5px 0px 15px 0px;
 
        margin-right: 10px;
    }
}

@media screen and (max-width: 485px){
    .timeline ul li span{
        display:inline-block;
        background-color:#eebe7a;
        border-radius:25px;
        padding:2px 5px;

        text-align:center;
    }
    .timeline ul li .content h3{
        color:#eebe7a;

        padding-top:5px;
    }
    .timeline ul li .content p{
        padding: 5px 0px 15px 0px;

        margin-right: 10px;
    }
}

@media screen and (max-width: 404px){
    .timeline ul li span{
        display:inline-block;
        background-color:#eebe7a;
        border-radius:25px;
        padding:2px 5px;
        text-align:center;
    }
    header.par {
        padding-top: 0;
        margin-top: 0;
    }
    section.sm {
        margin: 0;
        padding-top: 0;
    }
    .timeline 
    .timeline ul li .content h3{
        color:#eebe7a;
        padding-top:5px;
    }
    .timeline ul li .content p{
        padding: 5px 0px 15px 0px;
        margin-right: 10px;
    }
    .timeline ul li:hover:before{
        background-color:#eebe7a;
        box-shadow:0px 0px 10px 2px #eebe7a;
    }
    .timeline ul li:before {
        left: -16px;
    }
}