<header>
<style>body {
	background-color: #212121;
	color: white;
}
.bg-dark-own {
  background-color: #212121 !important;
}
.card {
	margin: 0 auto; /* Added */
	float: none; /* Added */
	margin-bottom: 10px; /* Added */
	transition: transform .2s; /* Animation */
}
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}
.card:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  cursor: pointer;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
}    
#title {
font-size: 7.9vh; !important;;
}
.loader-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background-color:#111;font:5em/1 Open Sans,Impact;text-transform:uppercase;}
.layout-light .loader-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background-color:#fff;font:5em/1 Open Sans,Impact;text-transform:uppercase}
.loader-wrap svg{position:absolute;width:100%;height:100%}
.text{fill:none;stroke-width:3;stroke-linejoin:round;stroke-dasharray:70 330;stroke-dashoffset:0;-webkit-animation:stroke 6s infinite linear;animation:stroke 6s infinite linear}
.text{fill:none;stroke-width:3;stroke-linejoin:round;stroke-dasharray:70 330;stroke-dashoffset:0;-webkit-animation:stroke 6s infinite linear;animation:stroke 6s infinite linear}
.text:nth-child(5n+1){stroke:#f2385a;-webkit-animation-delay:-1.2s;animation-delay:-1.2s}
.text:nth-child(5n+2){stroke:#f5a503;-webkit-animation-delay:-2.4s;animation-delay:-2.4s}
.text:nth-child(5n+3){stroke:#e9f1df;-webkit-animation-delay:-3.6s;animation-delay:-3.6s}
.text:nth-child(5n+4){stroke:#56d9cd;-webkit-animation-delay:-4.8s;animation-delay:-4.8s}
.text:nth-child(5n+5){stroke:#3aa1bf;-webkit-animation-delay:-6s;animation-delay:-6s}
@-webkit-keyframes stroke{100%{stroke-dashoffset:-400}}@keyframes stroke{100%{stroke-dashoffset:-400}}*::-webkit-input-placeholder{color:#eeeff6}*:-moz-placeholder{color:#eeeff6;opacity:1}*::-moz-placeholder{color:#eeeff6;opacity:1}*:-ms-input-placeholder{color:#eeeff6}*::-ms-input-placeholder{color:#eeeff6}*::placeholder{color:#eeeff6}
.skillbar {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 30px;
}
.skillbar-bar:before {
    background: #eee;
    content: "";
    height: 3px;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.skillbar-bar {
    height: 3px;
    width: 0px;
    background: #323232;
    transition-property: width, background-color;
}
.skillbar-title {
    color: #323232;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}
.skill-bar-percent {
    float: right;
    display: inline-block;
    color: #323232;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}</style></header><div id="loader-wrap" class="loader-wrap" style="display:block">
<svg viewBox="0 0 600 300" style="display: blok;">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">Jon Lara</text>
</symbol>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
</svg>
</div>