@-webkit-keyframes fadeIn { 
  from {
    opacity: 0;
    transform: translatey(-10px); 
  }
  to {
    opacity:1;
    transform: translatey(0); 
  } 
}

@keyframes fadeIn { 
  from {
    opacity: 0;
    transform: translatey(-10px); 
  }
  to {
    opacity:1;
    transform: translatey(0); 
  } 
}

@keyframes slideUp { 
  from {
    width: 0;
  }
  to {
    width: 100%;
  } 
}

@-webkit-keyframes slideUp { 
  from {
    width: 0;
  }
  to {
    width: 100%;
  } 
}

* {
  box-sizing: border-box;
}

body {
  background-color: #af957a;
  background-image: url("/resources/cartographer.png");
  padding: 40px  60px 60px 60px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
}

.paper {
  display: flex;
  flex-direction: column;
  width: 1140px;
  margin: 0 auto;
  box-shadow: 0 0 20px #000;
  opacity: 0;
  -webkit-animation: fadeIn ease-out .5s;
  animation: fadeIn ease-out .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

}

.top {
  background: #424144;
  color: #FFF;
  text-align: center;
  padding: 70px 200px;
}

.heading {
  border: 2px solid white;
  margin: 0 auto;
  text-transform: uppercase;
}

h1 {
  font-weight: 600;
  font-size: 32pt;
  letter-spacing: 5px;
  padding:0;
}

.dash {
  margin: 0 auto;
  width: 150px;
  border-top:2px solid white;
  height:1px;
  margin: 30px auto;
}

.tag {
  overflow: hidden;
  position: relative;
  margin: 30px 0;
}

h2 {
  font-weight: 300;
  letter-spacing: 3px;
  padding:0;
  margin:0;
}

.main {
  padding: 50px 0;
  background: #FFF;
}

.cols {
  display: flex;
  flex-direction: row;
}

.left {
  width: 380px;
  text-align: right;
  padding: 0 50px;
  border-right: 2px solid #424144;
  flex-shrink: 0;
}

h3 {  
  transition: all ease 0.3s;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 3px;
  padding: 0;
  margin: 0;
}

.left h3:hover {
  transform: translatex(-10px);
}

.right h3:hover {
  transform: translatex(10px);
}

.section {
  margin: 30px 0;
  font-size: 11pt;
  opacity: 0;
  -webkit-animation: fadeIn ease-in-out .5s;
  animation: fadeIn ease-in-out .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.section:nth-of-type(1) {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  animation-delay: .2s;
}

.section:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
  animation-delay: .4s;
}

.section:nth-of-type(3) {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  animation-delay: .6s;
}

.section:nth-of-type(4) {
  -webkit-animation-delay: .8s;
  -moz-animation-delay: .8s;
  animation-delay: .8s;
}

.right {
  padding: 0 50px;
  flex-grow: 1;
}

.skill {
  font-size: 10pt;
  margin: 1em 0;
  line-height: 2em;
}

.progressBar {
  height: 10px;
  border: 1px solid #424144;
  background-color: #FFF;
  position: relative;
}

.progress {
  height: 8px;
  background-color: #424144;
  position: absolute;
  right:0;
}

.skill:hover .progress::after {
  content:'';
  background-color: #fa4;
  height:8px;
  display:block;
  position: absolute;
  right:0;
  border-left: 1px solid #424144;
  animation: slideUp ease-in-out 0.3s;
  animation-fill-mode: both;
}

.left .section {
  font-size: 10pt;
}

.employer {
  text-transform: uppercase;
  font-weight: 600;
  border-right: 2px solid #424144;
  padding-right: 10px;
}

.dates {
  text-transform: uppercase;
  padding-left: 10px;
}

@media only screen {
  .print {
    display: none;
  }
}

@media only print {
  body {
    padding: 0;
    margin: 0;
    background: #fff;
  }

  .paper {
    width: 100%;
  }

  .top {
    padding: 40px 130px;
  }

  h1 {
    font-size: 28pt;
    margin: 10px 0;
  }

  .dash {
    margin: 10px auto;
  }

  .tag {
    margin: 10px 0;
  }

  .main {
    padding: 20px 0;
  }

  .left {
    width: 260px;
    padding: 0 20px;
  }

  .right {
    padding: 0 20px;
  }

  .section {
    margin: 10px 0;
    font-size: 9.5pt;
  }

  .left .section {
    font-size: 9pt;
  }

  .skill {
    font-size: 9pt;
  }

  .main  {
    padding: 20px 0;
  }

  .print {
    display: block;
  }

}