/* Navbar */
*{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
}

.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2CA6A4;
  color: white;
}

.brand-title{
  font-size: 1.5rem;
  margin: .5rem;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li{
  list-style: none;
}

.navbar-links li a{
  text-decoration: none;
  color: white;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover{
  background-color: #2CA6A4;
}

.toggle-button{
  position: absolute;
  top: 1.25rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}

.toggle-button .bar{
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 900px){
  .toggle-button{
    display: flex;
  }
  .navbar-links{
    display: none;
    width: 100%;
  }
  .navbar{
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-links ul{
    width: 100%;
    flex-direction: column;
  }
  .navbar-links li{
    text-align: center;
  }
  .navbar-links li a{
    padding: .5rem 1rem;
  }
  .navbar-links.active{
    display: flex;
  }
}

/* Resume Timeline */

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   background: white;
}

.header{
	width: 100%;
	height: 50px;
	/* background: #eb4870; */
	color: black;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-weight: 900;
}

h1 {
  padding: 25px;
   text-align: center;
   font-weight: 300;
   color: black;
}

h1 span {
   font-weight: 600;
}

.container {
   width: 80%;
   padding: 5px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl;
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999;
}

.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: black;
   background: #b9e2eb;
   border-radius: 5px;
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
}

.timeline-content span {
   font-size: 15px;
   color: #383838;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #4c4d4d;
}

@media screen and (max-width: 768px) {
   .container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}