body {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    line-height: 1.4em;
    background: #dfdfdf;
}

.logotipo {
    margin: 0 auto;
    margin-top: 16%;
    width: 100%;
    max-width: 220px;
    overflow: hidden;
}



.logotipo h1 span { display: none; }

/*
    logotipo svg
     ---------------------------------------- */
.cls-1 {
    fill:transparent; 
    stroke: #E87722;
    stroke-width: 1px;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 3s;
    animation-delay: 5s;
    animation-name:  relleno;
}
.cls-2 {
    fill:transparent; 
    stroke: #000;
    stroke-width: 1px;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 3s;
    animation-delay: 5s;
    animation-name:  relleno-nombre;
}
/* logotipo */
@-webkit-keyframes relleno  { 
    from { 
        fill: #dfdfdf;
        stroke-width: 1px;
    } 
    to { 
        fill:  #E87722;
        stroke-width: 0; 
    }
}

@keyframes relleno  {
    from {
        fill: #dfdfdf;
        stroke-width: 1px;
    }
    to { 
        fill:  #E87722;
        stroke-width: 0;
    }
}
@-webkit-keyframes relleno-nombre  { 
    from { 
        fill: #dfdfdf;
        stroke-width: 1px;
    } 
    to { 
        fill:  #222221;
        stroke-width: 0; 
    }
}

@keyframes relleno-nombre  {
    from {
        fill: #dfdfdf;
        stroke-width: 1px;
    }
    to { 
        fill:  #222221;
        stroke-width: 0;
    }
}


/* media queries
     ---------------------------------------- */

@media screen and (min-width: 400px)  {
    .logotipo {
     max-width: 360px;
    }
}

@media screen and (min-width: 600px)  {
    .logotipo {
      max-width: 400px;
    }
}