/*
 * Footer
 */
.footer {
  text-align: center;
  font-size: 10px;
}

/*
 * Timeline
 */
@media (min-width: 70em) {
  .profile-circle {
    width: 10rem !important;
    height: 10rem !important;
    padding: 1rem !important;
  }

  .profile-img {
    width: 8rem !important;
    height: 8rem !important;
  }

  .profile-img:hover {
    -moz-transform: scale(1.15)  !important;
    -webkit-transform: scale(1.15) !important;
    transform: scale(1.15) !important;
  }
}

@media (max-width: 30em) {
  .left-panel {
    width: 100% !important;
  }

  .right-panel {
    width: 100% !important;
  }

  .profile-circle {
    width: 14rem !important;
    height: 14rem !important;
    padding: 1rem !important;
  }

  .profile-img {
    width: 12rem !important;
    height: 12rem !important;
  }

  .timeline > ul > .long:before {height: 5rem !important;}
}


.profile-img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.profile-img {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
}

.profile-circle {
    border-radius: 50%;

    width: 6rem;
    height: 6rem;
    padding: 0.5rem;

    border: 1px solid #616161;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

.right-panel {
  vertical-align:top;
  display: inline-block;
  order: 2;
  width: 30%;
}

.left-panel {
  vertical-align:top;
  display: inline-block;
  order: 1;
  width: 68%;
  text-align: justify;
}

.timeline > ul {
	list-style: none;
}


.timeline > ul > li:before {
  content: "";
  display: block;
  z-index: 1;
  top: 0%;
  border: 1px solid;
  border-width: 0 0 0 1px;
  width: 1px;
  height: 5rem;
  color: #616161;
}

.timeline > ul > .long:before {height: 10rem;}



.timeline > ul > li:first-child::before {
  display: none;
}

.ctfpost {
  text-align: justify;
}

/*
 * Buttons
 */
.button {
    background-color: white;
    border: 2px solid #ac4142;
    color: #ac4142;
    padding: 4px 8px;
    text-align: center;
    text-decoration: bold;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    margin-top: 0.8em;
    cursor: pointer;
}

.button:hover {
    background-color: #ac4142;
    color: white;
}