/* régua vertical */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  top: 0;
  bottom: 0;
  left: 50%;
}

/* container-tl container do conteúdo */
.container-tl {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 57%;
}

/* círculos da timeline */
.container-tl::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid ;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}


.theme__por .container-tl::after{border-color:#e84a58}
.theme__edf .container-tl::after{border-color:#8a2d85}
.theme__ing .container-tl::after{border-color:#744593}
.theme__art .container-tl::after{border-color:#418ccb}
.theme__geo .container-tl::after{border-color:#605f9e}
.theme__cie .container-tl::after{border-color:#39ab55}
.theme__ing .container-tl::after{border-color:#744593}
.theme__his .container-tl::after{border-color:#2db5bb}
.theme__mat .container-tl::after{border-color:#3394d2}


.theme__por .timeline::after {background-color:#e84a58}
.theme__edf .timeline::after {background-color:#8a2d85}
.theme__ing .timeline::after {background-color:#744593}
.theme__art .timeline::after {background-color:#418ccb}
.theme__geo .timeline::after {background-color:#605f9e}
.theme__cie .timeline::after {background-color:#39ab55}
.theme__ing .timeline::after {background-color:#744593}
.theme__his .timeline::after {background-color:#2db5bb}
.theme__mat .timeline::after {background-color:#3394d2}

/* container-tl to the left */
.left {
  right: 6.9%; /*-0.3%; 25%;*/
}

/* container-tl to the right */
.right {
  left: 50.3%; /*25.5%;*/
}

/* setas (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #eff4f7;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #eff4f7;
}

/* setas (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #eff4f7;
  border-width: 10px 10px 10px 0;
  border-color: transparent #eff4f7 transparent transparent;
}

img {
width: 100%;
border-radius: 0.75rem;}

video {
  max-width:45rem;
  width:100%;
  border-radius: 0.75rem;}


  

/* Fix the circle for container-tls on the right side */
.right::after {
  left: -16px;
}

/* conteúdo */
.content-tl {
  padding: 20px 30px;
  background-color: #eff4f7;
  position: relative;
  border-radius: 6px;
  /* border-color: #5dc2d9; */    
  /* border-style: solid; */
  /* border-width: 0.125rem; */

}




/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width container-tls */
  .container-tl {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container-tl::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right container-tls behave like the left ones */
  .right {
    left: 0%;
  }
}


@media (max-width: 480px) {
.left{
right: -2% !important;
}

.right{
left: 2% !important;
}
}

@media (min-width: 480px) and (max-width: 767px) {
  .left{
right: -2% !important;
}

.right{
left: 2% !important;
}
}