body {
  background: #3a3c42;
  font-family: 'Raleway', sans-serif; /*font-size: 1em;*/
  color: #fff;
  margin-top: 150px;
  margin-bottom: 50px;
}

a,
a:hover,
a:visited,
a:focus {
  color: #ffca00;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  color: #ffca00;
  font-size: 2em;
}

/* Preloader
========================================================================== */

.preloader {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  background-color: #3a3c42;
  overflow: hidden;
}

.spinner {
  margin: -40px 0 0 -40px;
  width: 70px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #ffc527;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);

    transform: scale(1);
  }
}

/* Content sections
========================================================================== */

.img-logo,
.img-profile {
  width: 100%;
}

.vseparator.vseparator-logo {
  background: url('../img/verticalLine.png') center repeat-y;
}

.current-experience-section {
  margin-top: 30px;
  text-align: justify;
}

.current-experience-section span:not(:last-child):after {
  content: ' • ';
  color: #ffca00;
}

.contact-section {
  margin-top: 30px;
  display: inline-block;
}

.contact-section a {
  display: inline-block;
  float: left;
  clear: both;
  color: #fff;
}
.contact-section a:not(:last-child) {
  margin-bottom: 0.5rem;
}

.contact-section a:hover {
  color: #fff;
  text-decoration: none;
}

.contact-section a:hover i {
  color: #ffca00;
}

.contact-section a > i.fas {
  display: block;
  float: left;
  width: 50px;
  line-height: inherit;
}

.contact-section a > span,
.contact-section a > address {
  display: block;
  float: left;
  margin-bottom: 0;
}

.social-section {
  margin-top: 30px;
}

.social-section a {
  padding-right: 10px;
  font-size: 1.2em;
  color: #fff;
}

.social-section a:hover {
  color: #ffca00;
}

/* Footer
========================================================================== */

body > footer {
  background-color: #232323;
  width: 100%;
  padding: 0.3em;
  position: fixed;
  left: 0;
  bottom: 0;
  color: #c9c9c9;
  font-style: italic;
  text-align: center;
}

body > footer .copy:after {
  content: ' - ';
}

/* Media devices
========================================================================== */

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
  body {
    margin-top: 0;
    margin-bottom: 60px;
    font-size: 1.6em;
  }

  .img-logo,
  .img-profile {
    width: 60%;
  }

  .vseparator,
  .vseparator.vseparator-logo,
  .vseparator.vseparator-picture {
    background: url('../img/verticalLine.png') center repeat-x;
    min-height: 10px;
  }

  .vseparator.vseparator-logo {
    margin-top: 30px;
    margin-bottom: 60px;
  }

  .vseparator.vseparator-picture {
    margin-top: 60px;
    margin-bottom: 30px;
  }

  .current-experience-section > span {
    display: block;
    clear: both;
    margin-bottom: 20px;
  }

  .current-experience-section > span:not(:last-child):after {
    content: '';
  }
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
}

/* Extra small devices (Portrait phones, < 544px) */
@media (max-width: 544px) {
  body {
    margin-bottom: 0;
  }

  .img-logo,
  .img-profile {
    width: 100%;
  }

  .contact-section a:not(:last-child) {
    margin-bottom: 20px;
  }

  .contact-section a > i.fas,
  .contact-section a > span,
  .contact-section a > address {
    clear: both;
    text-align: justify;
  }

  body > footer {
    position: inherit;
    display: inline-block;
    top: auto;
    bottom: auto;
    height: auto;
  }

  body > footer .copy,
  body > footer .vat {
    display: inline-block;
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
  }

  body > footer .copy:after {
    content: '';
  }
}