@import url('http://fonts.googleapis.com/css?family=Roboto+Slab:700' );
*{
  box-sizin:border-box;
  font-family: "Roboto Slab", san-serif;
}
body{
  background-color:#1B1B2D;
}
.huge-image{
  width:100%;
  height:95vh;
  overflow:hidden;
  span:first-of-type{
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    background-color: #eee;
    top:10%;
    margin-left:5%;
    box-shadow: 1px 2px 50px 2px #eee;
  }
  span:nth-of-type(2){
    position:absolute;
    width:300px;
    height:300px;
    transform:translatey(150%) rotatez(45deg);
    background-image: linear-gradient(5deg,#2D2E4B,#201F35);
  }
  span:nth-of-type(3){
    position:absolute;
    width:300px;
    height:300px;
    transform:translatey(125%) rotatez(45deg);
    background-image: linear-gradient(5deg,#2D2E4B,#201F35);
  }
  span:nth-of-type(4){
    position:absolute;
    width:300px;
    height:300px;
    margin-left:50%;
    transform:translatey(145%) rotatez(45deg);
    background-image: linear-gradient(5deg,#2D2E4B,#201F35);
  }
}
section{
  position:relative;
  display:flex;
  justify-content:space-between;
  margin-bottom:50px;
  z-index:5;
}
article{
  width:30%;
  background-color:#6A6A76;
  margin:0 15px;
  padding:10px;
  box-shadow:0px 0px 2px 1px #eee;
  transform: translateY(50px);
  animation: show-up 1s ease;
  h2{text-align:center;}
  &:first-of-type{
    transition: transform 0.5s ease 0.05s;
  }
  &:nth-of-type(2){
    transition: transform 0.5s ease 0.40s;
  }
  &:nth-of-type(3){
    transition: transform 0.5s ease 0.70s;
  }
}
.show{
  transform: translatey(0);
}
.main{
  position:relative;
  margin-left:43%;
  margin-top:20%;
  color: #eee;
  transform:translatey(-20px);
  opacity:0;
  transition: all 1s ease;
  h2{
    text-transform:uppercase;
    color:#D90953;
    text-shadow: 1px 1px rgba(0,0,0,0.4);
  }
  &.show{
    transform:translatey(0);
    opacity:1;
  }
}