@keyframes fadeIn 
{ 
  from 
  { 
    opacity:0; 
  } 
  to 
  { 
    opacity:1; 
  } 
}

* {
    box-sizing: border-box;
}

body {
  font-family: 'Coolvetica', sans-serif;
  background-color: #4b3175;
  font-size: 1.3vw;
  color: #ffffff;
}

.column {
    float: left;
    padding-left: 12.5%;
    width: 50%
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

h1 {
  text-align: center;
  font-size: 2vw;
  opacity:0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:0.5s;
    animation-delay: 0.5s;
}

.bullets {
  font-size: .85vw;
}

ul > ul {
  margin-left: 5%;
}

p {
  opacity:0;
  animation:fadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:0.5s;
  animation-delay: 1.0s;
}

ul {
  //margin-left: -2vw;
  opacity:0;
  animation:fadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:0.5s;
  animation-delay: 1.5s;
}

li {
  margin: 2px 0;
}

a:hover {
  color: #e8a684;
  transition:.5s;
}

a img:hover{
    filter: invert(100%);
    transition:.5s;
}

#flipped {
  opacity:0;
  animation:fadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:1.0s;
  animation-delay: 2.0s;
}

#flipped:hover{
  filter: invert(100%);
  transition:.5s;
}

a {
  color: #ffffff;
  transition:.5s;
}

a img{
  padding: 5px;
  transition:.5s;
}

.icons {

}

.profilepic {
  width: 50%;
}

.description {
  width: 70%;
  font-size: 1.1785vw;
}

.video-container {
  display: flex;
  flex-direction: : row;
  width: 100%;
  height: 50%;
  /*justify-content: space-between;*/
  justify-content: center;
}

.vidcolumn{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  border: 5px;
  margin: 5px;

}

.vidcolumn iframe{
  height: 33vh;
  width: 33vw;
}

.vidcolumn p{
  text-align: center;
  margin: 15px;
}

.vidcolumn50{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  border: 5px;
  margin: 5px;

}

.vidcolumn50 iframe{
  height: 50vh;
  width: 50vw;
}

.vidcolumn50 p{
  text-align: center;
  margin: 15px;
}