body{
  background: url('../img/textura-blanca.jpg')
  no-repeat center center fixed;
  background-size: cover;
  background-position: center 0;
  background-attachment: fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  -moz-object-fit:cover;
  object-fit: cover;
height:100vh;


  overflow-x: hidden;

    }

    nav {


      position: relative;
      width: auto;
      height: 50px;
      background-color: #32003b;
      margin-bottom: 50px;
      font-size: 0;
      
    }
    nav a {
      font-family: arial;
      line-height: 50px;
      height: 100%;
      font-size: 12px;
      display: inline-block;
      position: relative;
      z-index: 1;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      color: white;
      cursor: pointer;
    }
    nav a:hover {
    color: #fff;
    }
    
    nav .animation {
      position: absolute;
      height: 100%;
      top: 0;
      z-index: 0;
      transition: all .5s ease 0s;
    
    }
    
    a:nth-child(1) {
      width: 100px;
    }
    a:nth-child(2) {
      width: 110px;
    }
    a:nth-child(3) {
      width: 100px;
    }
    a:nth-child(4) {
      width: 160px;
    }
    a:nth-child(5) {
      width: 120px;
    }
    nav .start-home, a:nth-child(1):hover~.animation {
      width: 100px;
      left: 0;
      background-color: #9b59b6;
    }
    nav .start-about, a:nth-child(2):hover~.animation {
      width: 110px;
      left: 100px;
      background-color: #9b59b6;
    }
    nav .start-blog, a:nth-child(3):hover~.animation {
      width: 100px;
      left: 210px;
      background-color: #9b59b6;
    }
    nav .start-portefolio, a:nth-child(4):hover~.animation {
      width:160px;
      left: 310px;
      background-color: #9b59b6;
    }
    nav .start-contact, a:nth-child(5):hover~.animation {
      width:120px;
      left: 470px;
      background-color: #9b59b6;
    }
    



/**/



.deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }

.letras {
 font-size:20px;
 font-family:'shriacha';
 user-select:none;
}

.letras{
  margin-top: 0;
  margin-bottom: 5%;
}

.letras span { display:inline-block; animation:float .2s ease-in-out infinite; }
 @keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}
.deli:hover span { animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}


span:nth-child(4n) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
span:nth-child(4n-1) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
span:nth-child(4n-2) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
span:nth-child(4n-3) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }

.letras span:nth-child(2){ animation-delay:.05s; }
.letras span:nth-child(3){ animation-delay:.1s; }
.letras span:nth-child(4){ animation-delay:.15s; }
.letras span:nth-child(5){ animation-delay:.2s; }
.letras span:nth-child(6){ animation-delay:.25s; }
.letras span:nth-child(7){ animation-delay:.3s; }
.letras span:nth-child(8){ animation-delay:.35s; }
.letras span:nth-child(9){ animation-delay:.4s; }
.letras span:nth-child(10){ animation-delay:.45s; }
.letras span:nth-child(11){ animation-delay:.5s; }
.letras span:nth-child(12){ animation-delay:.55s; }
.letras span:nth-child(13){ animation-delay:.6s; }
.letras span:nth-child(14){ animation-delay:.65s; }


    

      /*Clase para centrar es una clase universal*/
      .centrar{
        display:block;
        text-align: center;
      }
    
    
    
     .color-b{
      background:rgba(0, 0, 0,0.02);
    }
       hr{
       
        border: 1px solid #420079;
    
       }
     /*Tamaño imagen*/
      .tamaño-img{
        margin-top: 0px;
        margin-left: 20px;
        max-width:100px;
        max-height:100px ;
        text-align: center;
        float: center;
      }
    
      /*fin tamaño imagen*/
    
    
      /*Efecto-texto*/
    .line-1{
      position: relative;
      top: 50%;  
      width: 23em;
      margin: 0 auto;
      border-right: 1px solid rgba(255,255,255,.75);
      font-size: 18px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      transform: translateY(-50%);  
      margin-top: 50px;  
    
    }
    /* Animation */
    .anim-typewriter{
      animation: typewriter 4s steps(44) 1s 1 normal both,
                 blinkTextCursor 500ms steps(44) infinite normal;
                
    }
    @keyframes typewriter{
      from{width: 0;}
      to{width: 220px;}
    }
    @keyframes blinkTextCursor{
      from{border-right-color: transparent;}
      to{border-right-color: transparent;}
    }
    
    h1 {
    padding-bottom:20px ;
      font-family:'shriacha';
      color: #000;
      font-size: 16px;
    text-align: center; 
    font-weight: bold;
    }
    p{
      padding: 0;
      color: #000;
       font-family:  'shriacha';
      font-size: 20px;

    }
    
    /*Fin animacion texto*/
    





    /*Boton servicio*/
    .boton{
   margin-top: 40px;
      width: 300px;
      max-width:100%;
      height: 80px;
      line-height:50px ;
  font-size: 14px;
  color: #ffffff;
  background:linear-gradient(180deg, rgb(79, 0, 131) 0%,  rgb(197, 197, 197) 100%);
  transition: all .3s;
  border-radius: 6px;

}





    .boton:hover {


  color: rgba(0,0,0, .5);
  background: linear-gradient(180deg, rgb(197, 197, 197) 0%, rgb(79, 0, 131) 100%);
    }

    /*fin boton servicio*/

    /*Boton*/
 .text {
  font-size:14px;
  font-family:'shriacha';
  color:#fff;
  text-transform:uppercase;
}
.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}


  
  .container-fluid{
  padding: 0px;
  
  }
 
/*redes*/

.color{
  color: #ffffff;
 }
 hr{
width: 70%;
margin-bottom: 50px;
border: 1px solid #420079;
}
.redes{
font-size: 30px;
text-align: center;
display:block;
margin-top: 50px;
height: 200px;
background:#32003b;
}
.menu-item{ 
border-radius: 90px;
background:#7f0096;
color: #ffffff;
font-size: 32px;
text-align: center;
 }
.menu-item:hover{
color: #7f0096;
background:rgba(100, 1, 139, 0.6);
 }
       /*fin redes*/


       #site-content {
        min-height: 30%;
        min-height:30vh;
        padding-top: 15px;
        position: relative;
        z-index: 1;
      margin-top: 100px;
        -webkit-box-shadow: #000 0 25px 45px 0;
        -moz-box-shadow: #000 0 25px 45px 0;
        box-shadow: #000 0 25px 45px 0;
        
      }
      
      .footer {
        padding: 25px 0;
        font-size: 85%;
        background-color: transparent;
       
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 0;
      }
      
    
      #site-content {
        height:auto;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image:;
      }
  
  
      .boton{
        margin-bottom:20px;
      }
      
      .no-gutters{
        -webkit-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
        -moz-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
        box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
      }
      img{ 
        width: 100%;
        height: 300px;
      }
      img:hover{
        opacity: .7;
      
      }


@media (min-width: 768px) and (max-width: 1199px) {
  body{
    background: url('../img/textura-blanca.jpg')
    no-repeat center center fixed;
    background-size: cover;
    background-position: center 0;
    background-attachment: fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -moz-object-fit:cover;
    object-fit: cover;
  height:100vh;
  
  
    overflow-x: hidden;
  
      }
 
  
      nav {


        position: relative;
        width: auto;
        height: 50px;
        background-color: #32003b;
        margin-bottom: 50px;
        font-size: 0;
        
      }
      nav a {
        font-family: arial;
        line-height: 50px;
        height: 100%;
        font-size: 12px;
        display: inline-block;
        position: relative;
        z-index: 1;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        color: white;
        cursor: pointer;
      }
      nav a:hover {
      color: #fff;
      }
      
      nav .animation {
        position: absolute;
        height: 100%;
        top: 0;
        z-index: 0;
        transition: all .5s ease 0s;
      
      }
      
      a:nth-child(1) {
        width: 100px;
      }
      a:nth-child(2) {
        width: 110px;
      }
      a:nth-child(3) {
        width: 100px;
      }
      a:nth-child(4) {
        width: 160px;
      }
      a:nth-child(5) {
        width: 120px;
      }
      nav .start-home, a:nth-child(1):hover~.animation {
        width: 100px;
        left: 0;
        background-color: #9b59b6;
      }
      nav .start-about, a:nth-child(2):hover~.animation {
        width: 110px;
        left: 100px;
        background-color: #9b59b6;
      }
      nav .start-blog, a:nth-child(3):hover~.animation {
        width: 100px;
        left: 210px;
        background-color: #9b59b6;
      }
      nav .start-portefolio, a:nth-child(4):hover~.animation {
        width:160px;
        left: 310px;
        background-color: #9b59b6;
      }
      nav .start-contact, a:nth-child(5):hover~.animation {
        width:120px;
        left: 470px;
        background-color: #9b59b6;
      }
      
  
  
  
  /**/
  
  
  
  .deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }
  
  .letras {
   font-size:20px;
   font-family:'shriacha';
   user-select:none;
  }
  
  .letras{
    margin-top: 0;
    margin-bottom: 5%;
  }
  
  .letras span { display:inline-block; animation:float .2s ease-in-out infinite; }
   @keyframes float {
    0%,100%{ transform:none; }
    33%{ transform:translateY(-1px) rotate(-2deg); }
    66%{ transform:translateY(1px) rotate(2deg); }
  }
  .deli:hover span { animation:bounce .6s; }
  @keyframes bounce {
    0%,100%{ transform:translate(0); }
    25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
    50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
  }
  
  
  span:nth-child(4n) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-1) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-2) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-3) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  
  .letras span:nth-child(2){ animation-delay:.05s; }
  .letras span:nth-child(3){ animation-delay:.1s; }
  .letras span:nth-child(4){ animation-delay:.15s; }
  .letras span:nth-child(5){ animation-delay:.2s; }
  .letras span:nth-child(6){ animation-delay:.25s; }
  .letras span:nth-child(7){ animation-delay:.3s; }
  .letras span:nth-child(8){ animation-delay:.35s; }
  .letras span:nth-child(9){ animation-delay:.4s; }
  .letras span:nth-child(10){ animation-delay:.45s; }
  .letras span:nth-child(11){ animation-delay:.5s; }
  .letras span:nth-child(12){ animation-delay:.55s; }
  .letras span:nth-child(13){ animation-delay:.6s; }
  .letras span:nth-child(14){ animation-delay:.65s; }
  
  
      

    /*Boton servicio*/
    .boton{
      margin-top: 40px;
         width: 300px;
         max-width:100%;
         height: 80px;
         line-height:50px ;
     font-size: 14px;
     color: #ffffff;
     background:linear-gradient(180deg, rgb(79, 0, 131) 0%,  rgb(197, 197, 197) 100%);
     transition: all .3s;
     border-radius: 6px;
   
   }
   
   
   
   
   
       .boton:hover {
   
   
     color: rgba(0,0,0, .5);
     background: linear-gradient(180deg, rgb(197, 197, 197) 0%, rgb(79, 0, 131) 100%);
       }
   
       /*fin boton servicio*/
   
       /*Boton*/
    .text {
     font-size:14px;
     font-family:'shriacha';
     color:#fff;
     text-transform:uppercase;
   }
   .parpadea {
     
     animation-name: parpadeo;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
   
     -webkit-animation-name:parpadeo;
     -webkit-animation-duration: 2s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
   }
   
   @-moz-keyframes parpadeo{  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }
   
   @-webkit-keyframes parpadeo {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
      100% { opacity: 1.0; }
   }
   
   @keyframes parpadeo {  
     0% { opacity: 1.0; }
      50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }
     
      /*Efecto-texto*/
      .line-1{
        position: relative;
        top: 50%;  
        width: 23em;
        margin: 0 auto;
        border-right: 1px solid rgba(255,255,255,.75);
        font-size: 22px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        transform: translateY(-50%);  
        margin-top: 50px;  
      
      }
      /* Animation */
      .anim-typewriter{
        animation: typewriter 4s steps(44) 1s 1 normal both,
                   blinkTextCursor 500ms steps(44) infinite normal;
                  
      }
      @keyframes typewriter{
        from{width: 0;}
        to{width: 190px;}
      }
      @keyframes blinkTextCursor{
        from{border-right-color: transparent;}
        to{border-right-color: transparent;}
      }
      
      h1 {
      padding-bottom:20px ;
        font-family:'shriacha';
        color: #000;
        font-size: 16px;
      text-align: center; 
      font-weight: bold;
      }
      p{
        padding: 0;
        color: #000;
         font-family:  'shriacha';
        font-size: 38px;
  
      }
      
      /*Fin animacion texto*/
      
   
     
     .container-fluid{
     padding: 0px;
     
     }
    
   /*redes*/
   
   .color{
     color: #ffffff;
    }
    hr{
   width: 70%;
   margin-bottom: 50px;
   border: 1px solid #420079;
   }
   .redes{
   font-size: 30px;
   text-align: center;
   display:block;
   margin-top: 50px;
   height: 200px;
   background:#32003b;
   }
   .menu-item{ 
   border-radius: 90px;
   background:#7f0096;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
    }
   .menu-item:hover{
   color: #7f0096;
   background:rgba(100, 1, 139, 0.6);
    }
          /*fin redes*/
   
   
          #site-content {
            min-height: 30%;
            min-height:auto;
            width: 85%;
            padding-top: 15px;
            position: relative;
            z-index: 1;
          
            -webkit-box-shadow: #000 0 17px 45px 0;
            -moz-box-shadow: #000 0 17px 45px 0;
            box-shadow: #000 0 17px 45px 0;
            
          }
          
          .footer {
            padding: 25px 0;
            font-size: 85%;
            background-color: transparent;
            
            z-index: 2;
            left: 0;
            right: 0;
            bottom: 0;
          }
        
          #site-content {
            height:auto;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
          
          }
      
      
          .boton{
            margin-bottom:20px;
          }
          .no-gutters{
            -webkit-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
            -moz-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
            box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
          }
          img{ 
            width: 100%;
            height: 300px;
          }
          img:hover{
            opacity: .7;
          
          }
    


}

@media (max-width: 767px) {
  body{
    background: url('../img/textura-blanca.jpg')
    no-repeat center center fixed;
    background-size: cover;
    background-position: center 0;
    background-attachment: fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -moz-object-fit:cover;
    object-fit: cover;
  height:100vh;
  
  
    overflow-x: hidden;
  
      }
      nav {


        position: relative;
        width: auto;
        height: 50px;
        background-color: #32003b;
        margin-bottom: 50px;
        font-size: 0;
        
      }
      nav a {
        font-family: arial;
        line-height: 50px;
        height: 100%;
        font-size: 12px;
        display: inline-block;
        position: relative;
        z-index: 1;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        color: white;
        cursor: pointer;
      }
      nav a:hover {
      color: #fff;
      }
      
      nav .animation {
        position: absolute;
        height: 100%;
        top: 0;
        z-index: 0;
        transition: all .5s ease 0s;
      
      }
      
      a:nth-child(1) {
        width: 100px;
      }
      a:nth-child(2) {
        width: 110px;
      }
      a:nth-child(3) {
        width: 100px;
      }
      a:nth-child(4) {
        width: 160px;
      }
      a:nth-child(5) {
        width: 120px;
      }
      nav .start-home, a:nth-child(1):hover~.animation {
        width: 100px;
        left: 0;
        background-color: #9b59b6;
      }
      nav .start-about, a:nth-child(2):hover~.animation {
        width: 110px;
        left: 100px;
        background-color: #9b59b6;
      }
      nav .start-blog, a:nth-child(3):hover~.animation {
        width: 100px;
        left: 210px;
        background-color: #9b59b6;
      }
      nav .start-portefolio, a:nth-child(4):hover~.animation {
        width:160px;
        left: 310px;
        background-color: #9b59b6;
      }
      nav .start-contact, a:nth-child(5):hover~.animation {
        width:120px;
        left: 470px;
        background-color: #9b59b6;
      }
      
  
  
  
  /**/
  
  
  
  .deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }
  
  .letras {
   font-size:20px;
   font-family:'shriacha';
   user-select:none;
  }
  
  .letras{
    margin-top: 0;
    margin-bottom: 5%;
  }
  
  .letras span { display:inline-block; animation:float .2s ease-in-out infinite; }
   @keyframes float {
    0%,100%{ transform:none; }
    33%{ transform:translateY(-1px) rotate(-2deg); }
    66%{ transform:translateY(1px) rotate(2deg); }
  }
  .deli:hover span { animation:bounce .6s; }
  @keyframes bounce {
    0%,100%{ transform:translate(0); }
    25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
    50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
  }
  
  
  span:nth-child(4n) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-1) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-2) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-3) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  
  .letras span:nth-child(2){ animation-delay:.05s; }
  .letras span:nth-child(3){ animation-delay:.1s; }
  .letras span:nth-child(4){ animation-delay:.15s; }
  .letras span:nth-child(5){ animation-delay:.2s; }
  .letras span:nth-child(6){ animation-delay:.25s; }
  .letras span:nth-child(7){ animation-delay:.3s; }
  .letras span:nth-child(8){ animation-delay:.35s; }
  .letras span:nth-child(9){ animation-delay:.4s; }
  .letras span:nth-child(10){ animation-delay:.45s; }
  .letras span:nth-child(11){ animation-delay:.5s; }
  .letras span:nth-child(12){ animation-delay:.55s; }
  .letras span:nth-child(13){ animation-delay:.6s; }
  .letras span:nth-child(14){ animation-delay:.65s; }
  
  
      

    /*Boton servicio*/
    .boton{
     
         width: 250px;
         max-width:90%;
         height: 60px;
         line-height:50px ;
     font-size: 14px;
     color: #ffffff;
     background:linear-gradient(180deg, rgb(79, 0, 131) 0%,  rgb(197, 197, 197) 100%);
     transition: all .3s;
     border-radius: 6px;
   
   }
   
   
   
   
   
       .boton:hover {
   
   
     color: rgba(0,0,0, .5);
     background: linear-gradient(180deg, rgb(197, 197, 197) 0%, rgb(79, 0, 131) 100%);
       }
   
       /*fin boton servicio*/
   
       /*Boton*/
    .text {
     font-size:14px;
     font-family:'shriacha';
     color:#fff;
     text-transform:uppercase;
   }
   .parpadea {
     
     animation-name: parpadeo;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
   
     -webkit-animation-name:parpadeo;
     -webkit-animation-duration: 2s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
   }
   
   @-moz-keyframes parpadeo{  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }
   
   @-webkit-keyframes parpadeo {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
      100% { opacity: 1.0; }
   }
   
   @keyframes parpadeo {  
     0% { opacity: 1.0; }
      50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }
   
       
      /*Efecto-texto*/
      .line-1{
        position: relative;
        top: 50%;  
        width: 23em;
        margin: 0 auto;
        border-right: 1px solid rgba(255,255,255,.75);
        font-size: 18px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        transform: translateY(-50%);  
        margin-top: 20px;  
      
      }
      /* Animation */
      .anim-typewriter{
        animation: typewriter 4s steps(44) 1s 1 normal both,
                   blinkTextCursor 500ms steps(44) infinite normal;
                  
      }
      @keyframes typewriter{
        from{width: 0;}
        to{width:203px;}
      }
      @keyframes blinkTextCursor{
        from{border-right-color: transparent;}
        to{border-right-color: transparent;}
      }
      .texto{
        margin-top: -40px;
      }
      
      h1 {
     
        font-family:'shriacha';
        color: #000;
        font-size: 16px;
      text-align: center; 
    
      }
      p{
        padding: 0;
        color: #000;
         font-family:  'shriacha';
        font-size: 28px;
  
      }
      
      /*Fin animacion texto*/
      
  
  
  
     
     .container-fluid{
     padding: 0px;
     
     }
    
   /*redes*/
   
   .color{
     color: #ffffff;
    }
    hr{
   width: 70%;
   margin-bottom: 50px;
   border: 1px solid #420079;
   }
   .redes{
   font-size: 30px;
   text-align: center;
   display:block;
   margin-top: 50px;
   height: 200px;
   background:#32003b;
   }
   .menu-item{ 
   border-radius: 90px;
   background:#7f0096;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
    }
   .menu-item:hover{
   color: #7f0096;
   background:rgba(100, 1, 139, 0.6);
    }
          /*fin redes*/
   
   /*footer*/
#site-content {
  min-height: 30%;
  min-height:auto;
  width: 80%;
 
  position: relative;
  z-index: 1;
  
  -webkit-box-shadow: #000 0 17px 45px 0;
  -moz-box-shadow: #000 0 17px 45px 0;
  box-shadow: #000 0 17px 45px 0;
  
  }
  
  .footer {
  padding: 25px 0;
  font-size: 85%;
  background-color: transparent;
  
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  }
  
  #site-content {
  height:auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  
  }
  
  
  .boton{
    margin-top: 10px;
  margin-bottom:20px;
  }
  

  .no-gutters{
    -webkit-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
    -moz-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
    box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
  }
  img{ 
    width: 100%;
    height: 300px;
  }
  img:hover{
    opacity: .7;
  
  }






}

@media (max-width: 480px) {
  body{
    background: url('../img/textura-blanca.jpg')
    no-repeat center center fixed;
    background-size: cover;
    background-position: center 0;
    background-attachment: fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -moz-object-fit:cover;
    object-fit: cover;
  height:100vh;
  
  
    overflow-x: hidden;
  
      }
  
  
      nav {


        position: relative;
        width: auto;
        height: 50px;
        background-color: #32003b;
        margin-bottom: 50px;
        font-size: 0;
        
      }
      nav a {
        font-family: arial;
        line-height: 50px;
        height: 100%;
        font-size: 10Spx;
        display: inline-block;
        position: relative;
        z-index: 1;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        color: white;
        cursor: pointer;
      }
      nav a:hover {
      color: #fff;
      }
      
      nav .animation {
        position: absolute;
        height: 100%;
        top: 0;
        z-index: 0;
        transition: all .5s ease 0s;
      
      }
      
      a:nth-child(1) {
        width: 80px;
      }
      a:nth-child(2) {
        width: 80px;
      }
      a:nth-child(3) {
        width: 100px;
      }
      a:nth-child(4) {
        width: 160px;
      }
      a:nth-child(5) {
        width: 120px;
      }
      nav .start-home, a:nth-child(1):hover~.animation {
        width: 80px;
        left: 0;
        background-color: #9b59b6;
      }
      nav .start-about, a:nth-child(2):hover~.animation {
        width: 80px;
        left: 0px;
        background-color: #9b59b6;
      }
      nav .start-blog, a:nth-child(3):hover~.animation {
        width: 100px;
        left: 210px;
        background-color: #9b59b6;
      }
      nav .start-portefolio, a:nth-child(4):hover~.animation {
        width:160px;
        left: 310px;
        background-color: #9b59b6;
      }
      nav .start-contact, a:nth-child(5):hover~.animation {
        width:120px;
        left: 470px;
        background-color: #9b59b6;
      }
      
  
  
  
  /**/
  
  
  
  .deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }
  
  .letras {
   font-size:12px;
   font-family:'arial';
   user-select:none;
  }
  
  .letras{
    margin-top: 0;
    margin-bottom: 5%;
  }
  
  .letras span { display:inline-block; animation:float .2s ease-in-out infinite; }
   @keyframes float {
    0%,100%{ transform:none; }
    33%{ transform:translateY(-1px) rotate(-2deg); }
    66%{ transform:translateY(1px) rotate(2deg); }
  }
  .deli:hover span { animation:bounce .6s; }
  @keyframes bounce {
    0%,100%{ transform:translate(0); }
    25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
    50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
  }
  
  
  span:nth-child(4n) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-1) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-2) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  span:nth-child(4n-3) { color:#9b59b6; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(300, 100%, 24%), 3px 3px hsl(300, 100%, 24%) , 4px 4px hsl(300, 100%, 24%); }
  
  .letras span:nth-child(2){ animation-delay:.05s; }
  .letras span:nth-child(3){ animation-delay:.1s; }
  .letras span:nth-child(4){ animation-delay:.15s; }
  .letras span:nth-child(5){ animation-delay:.2s; }
  .letras span:nth-child(6){ animation-delay:.25s; }
  .letras span:nth-child(7){ animation-delay:.3s; }
  .letras span:nth-child(8){ animation-delay:.35s; }
  .letras span:nth-child(9){ animation-delay:.4s; }
  .letras span:nth-child(10){ animation-delay:.45s; }
  .letras span:nth-child(11){ animation-delay:.5s; }
  .letras span:nth-child(12){ animation-delay:.55s; }
  .letras span:nth-child(13){ animation-delay:.6s; }
  .letras span:nth-child(14){ animation-delay:.65s; }
  
  
      

    /*Boton servicio*/
    .boton{
     
         width: 250px;
         max-width:90%;
         height: 60px;
         line-height:50px ;
     font-size: 14px;
     color: #ffffff;
     background:linear-gradient(180deg, rgb(79, 0, 131) 0%,  rgb(197, 197, 197) 100%);
     transition: all .3s;
     border-radius: 6px;
   
   }
   
   
   
   
   
       .boton:hover {
   
   
     color: rgba(0,0,0, .5);
     background: linear-gradient(180deg, rgb(197, 197, 197) 0%, rgb(79, 0, 131) 100%);
       }
   
       /*fin boton servicio*/
   
       /*Boton*/
    .text {
     font-size:14px;
     font-family:'shriacha';
     color:#fff;
     text-transform:uppercase;
   }
   .parpadea {
     
     animation-name: parpadeo;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
   
     -webkit-animation-name:parpadeo;
     -webkit-animation-duration: 2s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
   }
   
   @-moz-keyframes parpadeo{  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }
   
   @-webkit-keyframes parpadeo {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
      100% { opacity: 1.0; }
   }
   
   @keyframes parpadeo {  
     0% { opacity: 1.0; }
      50% { opacity: 0.0; }
     100% { opacity: 1.0; }
   }
   
       
      /*Efecto-texto*/
      .line-1{
        position: relative;
        top: 50%;  
        width: 23em;
        margin: 0 auto;
        border-right: 1px solid rgba(255,255,255,.75);
        font-size: 18px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        transform: translateY(-50%);  
        margin-top: 20px;  
      
      }
      /* Animation */
      .anim-typewriter{
        animation: typewriter 4s steps(44) 1s 1 normal both,
                   blinkTextCursor 500ms steps(44) infinite normal;
                  
      }
      @keyframes typewriter{
        from{width: 0;}
        to{width: 220px;}
      }
      @keyframes blinkTextCursor{
        from{border-right-color: transparent;}
        to{border-right-color: transparent;}
      }
      .texto{
        margin-top: -40px;
      }
      h1 {
     
        font-family:'shriacha';
        color: #000;
        font-size: 16px;
      text-align: center; 
      font-weight: bold;
      }
      p{
        padding: 0;
        color: #000;
         font-family:  'shriacha';
        font-size: 28px;
  
      }
      
      /*Fin animacion texto*/
      
  
  
  
     
     .container-fluid{
     padding: 0px;
     
     }
    
   /*redes*/
   
   .color{
     color: #ffffff;
    }
    hr{
   width: 70%;
   margin-bottom: 50px;
   border: 1px solid #420079;
   }
   .redes{
   font-size: 30px;
   text-align: center;
   display:block;
   margin-top: 50px;
   height: 200px;
   background:#32003b;
   }
   .menu-item{ 
   border-radius: 90px;
   background:#7f0096;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
    }
   .menu-item:hover{
   color: #7f0096;
   background:rgba(100, 1, 139, 0.6);
    }
          /*fin redes*/
   
 /*footer*/
#site-content {
  min-height: 30%;
  min-height:auto;
  width: 80%;
 
  position: relative;
  z-index: 1;
  
  -webkit-box-shadow: #000 0 17px 45px 0;
  -moz-box-shadow: #000 0 17px 45px 0;
  box-shadow: #000 0 17px 45px 0;
  
  }
  
  .footer {
  padding: 25px 0;
  font-size: 85%;
  background-color: transparent;
  
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  }
  
  #site-content {
  height:auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  
  }
  
.boton{
  margin-top: 20px;
  margin-bottom:20px;
  }
  .no-gutters{
    -webkit-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
    -moz-box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
    box-shadow: rgba(78, 0, 122, 0.548) 0 5px 5px 5px;
  }
  img{ 
    width: 100%;
    height: 300px;
  }
  img:hover{
    opacity: .7;
  
  }


}