.hero {
  background: black url("../img/css/hero.jpg") top right no-repeat;
  background-size: cover;
  min-height: 750px
}

.hero .buttons{
  margin-top: 33.3333%;
}
.hero .button{
  margin: 0.2em 0 0.2em 0 !important;
}

html,
body {
    height: 100%;
    padding: 0;
}

.main {

  min-height:100%;
}

.main.grid {
  min-height: 100%;
}

.face {
  background-image: url('../img/css/me.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 150px;
}

.face .cv {
  background-color: white;
  min-height: 100%;
}

a {
  color: black;
  text-decoration: underline;
}

.projects {
  min-height:100%;
}

.project, .project--title{
  background-color: white;
}

.project--title {
  margin-top: 5.6em;
}

.main--projects {
  background-image: url('../img/css/projects.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 70% 50%;
  padding-left: 1.7em;
  padding-right: 1.7em;
  padding-bottom: 150px;
}

.contact {
  background-image: url('../img/css/contact.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height:100%;
  background-position: center bottom;
  padding-top: 150px;
  padding-bottom: 500px;
}

.contact--form {
  background-color: white;
}

.lost {
  background-image: url(../img/css/lost.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  min-height: 750px
}

.timeline-Body {
  border-top-width: 0px !important;
}

.icon.ruby {
  background-image: url('../img/css/icon/ruby.svg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 1em !important;
  display: inline-block;
}

.icon.ruby.black {
  background-image: url('../img/css/icon/ruby-black.svg');
}