* {
  box-sizing: border-box;
}

body {
  
  margin: 0;
  padding: 0;
  min-width:340px;
}

.container-fluid {
  background: url('assets/natural_paper.png') fixed no-repeat;
  background-size: cover;
}

#logo {
  margin-bottom: 10px;
  transition: transform 0.2s ease-out;
}

#logo:hover {
  transform: scale(1.02, 1.02);
}

#twitter{
  margin-left: 0.8em;
}

#github{
  margin-left: 0.7em;
}
#gitter{
  margin-left: 0.7em;
}

#youtube{
  margin-left: 0.7em;
}

#facebook{
  margin-left: 0.7em;
}

#linkedin{
  margin-left: 0.7em;
}

.footer {
  display: block;
  margin-left: 35%;
  padding: 0;
}

/*
#################################
Icon Float Away
#################################
*/
@-webkit-keyframes hvr-icon-float-away {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em);
  }
}
@keyframes hvr-icon-float-away {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em);
  }
}
@-webkit-keyframes hvr-icon-subs {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(1em,-1em);
    transform: translate(1em,-1em);
  }
}
@keyframes hvr-icon-subs {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(1em,-1em);
    transform: translate(1em,-1em);
  }
}
/* Icon Float Away */
.hvr-icon-float-away , .hvr-icon-subs {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-icon-float-away .hvr-icon , .hvr-icon-subs .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.hvr-icon-float-away:hover .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon {
  -webkit-animation-name: hvr-icon-float-away;
  animation-name: hvr-icon-float-away;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
.hvr-icon-subs:hover .hvr-icon, .hvr-icon-subs:focus .hvr-icon, .hvr-icon-subs:active .hvr-icon {
  -webkit-animation-name: hvr-icon-subs;
  animation-name: hvr-icon-subs;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}


/*
#################################
Icon Rotate
#################################
*/
.hvr-icon-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-rotate .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}


/*
#################################
Icon Bob
#################################
*/
@-webkit-keyframes hvr-icon-bob {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  50% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes hvr-icon-bob {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  50% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@-webkit-keyframes hvr-icon-bob-float {
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes hvr-icon-bob-float {
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
.hvr-icon-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-bob .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-bob:hover .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-icon {
  -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
  animation-name: hvr-icon-bob-float, hvr-icon-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
.fa-paper-plane:before {
    content: "\f1d8";
    color: #ffb362;
  animation-iteration-count: infinite;
  transform: translateZ(0);
  transition-duration: 0.3s;
      transition-property: transform;
}
