/* formato de SVG */
/*
<svg>
    <symbol id="text">
        <text text-anchor="middle" x="34%" y="55%">Miguel UVILLA</text>
    </symbol>
    <use xlink:href="#text"></use>
</svg>

@import url('https://fonts.googleapis.com/css?family=Montserrat:900');

@font-face {
  font-family: 'Codec';
  src: url('assets/fonts/codec/Codec-Warm-ExtraBold-trial.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
}

svg
{
    font-family: 'Codec', sans-serif;
    width: 100%;
    height: 200px;
}

svg text 
{
    font-size: 60px;
    fill: rgba(0,0,0,.1) ;
    stroke-width: 1px;
    stroke: #fff;
    stroke-Linejoin: round;
    stroke-dasharray: 50;
    letter-spacing: 4px;
    animation: animate 3s linear infinite;

}
@keyframes animate 
{
    100%
    {
        stroke-dashoffset: 100;
    }
}
*/
header h1 
{
    margin-bottom: 85px;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat:900');
.h1 
{    

   /* font-family: 'Monserrat', sans-serif;*/
    font-size: 3em;
    text-shadow: 0 5px 15px rgba(0,0,0,.5);
    text-transform: uppercase;
    /*border: 15px solid #000;
    border-top: none;*/
}

.h1 span 
{
    position: relative;
    display: inline-block;
}
.h1 span:nth-child(8),
.h1 span:nth-child(1)
{
    /*color : #fff;*/
    color: #43B3E0;
    font-size: 1.2em;
    animation : animate 3s alternate infinite;
}

@keyframes animate
{
    0%
   {
        transform : translateY(0px) rotate(0deg);
    }
    40%
   {
        transform : translateY(0px) rotate(0deg);
    } 
    50%
   {
        transform : translateY(-60px) rotate(180deg);
   }
    60%
   {
        transform : translateY(0px) rotate(360deg);
   }
    100%
    {
        transform : translateY(0px) rotate(360deg) ;     
    }
}

.h1:hover span
{
    cursor: pointer;
    animation: animate 3s alternate infinite;
}
/*.h1 span:nth-child(1)
{
    animation-delay: 0s;
}*/
.h1 span:nth-child(2)
{
    animation-delay: 0s;
}
.h1 span:nth-child(3)
{
    animation-delay: 0.6s;
}
.h1 span:nth-child(4)
{
    animation-delay: 0.1s;
}
.h1 span:nth-child(5)
{
    animation-delay: 0.5s;
}
.h1 span:nth-child(6)
{
    animation-delay: 0.3s;
}
.h1 span:nth-child(7)
{
    animation-delay: 0.7s;
}
.h1 span:nth-child(9)
{
    animation-delay: 0.4s;
}
.h1 span:nth-child(10)
{
    animation-delay: 0.8s;
}
.h1 span:nth-child(11)
{
    animation-delay: 0.2s;
}
.h1 span:nth-child(12)
{
    animation-delay: 0.6s;
}
.h1 span:nth-child(13)
{
    animation-delay: 0.9s;
}

.parrafo 
{
    margin-top: -15px;
}
.cursive 
{
    font-style: italic;
    font-weight: bold;
}