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;
	
	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;
}


/*-------Animacion de texto,tamaño---------*/
header {
	width: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-position: center 0;
}

header .textos {
	color: #fff;
	position:relative;
  top: 50%;
  margin-top:-80px;
  text-align:center;
  transform: translateY(-30%); 
}
.line-1{
  position: relative;
  top: 50%;  
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 34px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
   

}

.letrero{
  display: block;
  text-align: center;
}

.tamaño-img{
  max-width:110px;
  max-height: 110px;
}
 /*fin de la animacion de texto*/

/**/



.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: 70%;
}

.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:#fff; text-shadow:1px 1px hsl(300, 100%, 24%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-1) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-2) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-3) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }

.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*/
 .text {
 
  font-size:14px;
font-weight:bold;
 
  text-transform:uppercase;

}
.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 3s;
  -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; }
}
/*texto parpadea*/
.contenedor-btns{
  margin-top: 70px;
  margin-bottom: 30px;
  text-align: center;
height:auto;
}

.contenedor-btns a {
  background: #770d8a;
 
  
  transition: all .3s;
  border-radius: 6px;
  border: 3px solid #fff;
  color: #fff;
  padding: 7px 0;
 
width: 300px;
  display: inline-block;
  
  margin-top: 350px;
 
  margin: 0 10px; }
   .contenedor-btns a:hover {
    text-decoration: none;
    background:#32003b;

    color: #fff;
   }

   .contenedor-btns .btn {
  
    background: #32003b;
      border: 3px solid #fff;
      color:#fff;
   
    }
    .contenedor-btns .btn:hover {
      text-decoration: none;  
      background:#650077;
      color: #fff; 
    }


 /* fin Boton*/
  /*-------- Transparencia de imagenes---------*/
.centrar{
display: block;
position:absolute;
text-align: center;
left:0px;

color:#fff;
width:100%;
height:92%;

}
/*------------Slide-----------*/
.block-slider{
  background:#000;
  display:block;
}
.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pic-wrapper img{
width: 100%;
height: 100%;
opacity:.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; 
  /*animation*/
  animation: slideShow 23s linear infinite 0s;
  -o-animation: slideShow 23s linear infinite 0s;
  -moz-animation: slideShow 23s linear infinite 0s;
  -webkit-animation: slideShow 23s linear infinite 0s;
}
figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #000;
}
.pic-1 {
  opacity: 1;
}
.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
}
.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
}

/* keyframes*/

@keyframes 
slideShow {  0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
 
}
 5% {
   
 opacity: 1
}
 25% {
 opacity: 1;
 
}
 30% {
 opacity: 0;
 transform:scale(1.1);
 -ms-transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}
 @-o-keyframes 
slideShow {  0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -o-transformm:scale(1);
}
}
 @-moz-keyframes 
slideShow {  0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}
 @-webkit-keyframes 
slideShow {  0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}
.foto{
  overflow-x: hidden;
  background: url('../img/delmich1.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;

}

  .textos p{
 
    margin-top: 100px;
 font-weight: bold;
    font-size: 40px;
    color: rgb(85, 0, 110);
    text-decoration:underline;
  }

.texto_letrero{

   position: relative;
top:180px;
z-index:1;     
}




/*--------img-transicion menu-----------------------------------------------*/
 .fotos{
    padding: 0px;
    }
    .galeria{
    width:220px;
    height:220px;

    text-align: center;
    overflow: hidden;
    
    }
    /*imagenes juntas*/
    .no-gutters{
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #fff;
      background-color: rgba(0,0,0, 1);

   margin-left: 0px;
   margin-right: 0px
   padding:0px;
    
    }
    /*Transicion imagenes-tramsparencias*/
    .galeria img{
      width:100%;
      height:100%;
      
      -webkit-transform:scale(1.06) translateZ(0px);
    -moz-transform:scale(1.06) translateZ(0px);
    -ms-transform:scale(1.06) translateZ(0px);
    transform:scale(1.06) translateZ(0px);
    -webkit-transition: -webkit-transform 0.35s linear;
    -moz-transition: -moz-transform 0.35s linear;
    -ms-transition: -ms-transform 0.35s linear;
    transition: transform 0.35s linear;
         opacity: 0.6; 
      
      }
      .galeria img:hover{
        -webkit-transform:scale(1.2) translateZ(0px);
        -moz-transform:scale(1.2) translateZ(0px);
        -ms-transform:scale(1.2) translateZ(0px);
        transform:scale(1.2) translateZ(0px);
        -webkit-transition: -webkit-transform 7s linear;
        -moz-transition: -moz-transform 7s linear;
        -ms-transition: -ms-transform 7s linear;
        transition: transform 7s linear;
        
        
      }
      /*texto imagenes-menu*/
      .producto{
        font-size: 18px;
        color: #ffffff;
      }
      /*Boton*/
      .boton{
        display: block;
        position: absolute;
        top: 50px;
        left: 35%;
        right: 35%;
        width: 30%;
        height: 80px;
        line-height:15px ;
        text-decoration: none;
    padding: 10px;
    font-size: 15px;
    color:  #ffffff;
    background-color: rgba(0,0,0, .2);
  border-radius: 6px;
  border: 1px solid #696969;
      }
      .boton:hover {

    color: #ffffff;
      background-color: rgba(0,0,0, .1);
    border-radius: 6px;
    border: 1px solid #696969;
      }
       /* fin Bonton*/


.container-fluid{
padding: 0px;

}
 
.centrar{
  text-align: center;
}

 /*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*/



    /*Boton servicio*/
    .servicio{
   
      margin-top: 0px;
      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;

}





    .servicio: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; }
}


 

     /*Animacion-Texto contacto*/
.line-1{
  position: relative;
  top: 50%;  
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);  
 margin-top: 70px;
 
}

/* 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: 10em;}
}
@keyframes blinkTextCursor{
from{border-right-color: transparent;}
to{border-right-color: transparent;}
}
   
h1 {
        
  font-family:'shriacha';

  color: rgb(255, 255, 255);
  font-size: 16px;
text-align: center; 

}
p{
  padding: 0;
  color: rgb(255, 255, 255);
   font-family: 'shriacha';
  font-size: 20px;
 
}
 /*Fin animacion texto*/

 #site-content {
  min-height: 30%;
  min-height:30vh;

  position: relative;
  z-index: 1;

  -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;

}


.servicio{
  margin-top:50px;
}

.fondo{
  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;

    }


/*Mapa, tamaño marco*/

.mapa{
   
  width: auto;
 
text-align: center;
display: block;
height:400px;

}

.mapa iframe{

  width: 100%;
  max-height: 400px;
  margin-top: 0px;
  margin-bottom:0px;
  padding: 0px;
}
.marco{
  height:auto;
  border: 5px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.6);
  margin-bottom:100px;
  margin-top:90px;
  
}
/*Fin mapa*/



  @media (width: 1024) {
    
nav {


	position: relative;
	width: auto;
	height: 50px;
	background-color: #32003b;
	
	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;
}



    header {
      width: 100%;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
    }
    header .textos {
      color: #fff;
      position:relative;
      top: 50%;
      margin-top:-80px;
      text-align:center;
      transform: translateY(80%); 
    }
  /*-------- Transparencia de imagenes---------*/
  .centrar{
    display: block;
    position: absolute;
    text-align: center;
    left:0px;
   
    color:#fff;
    width:100%;
    height:100%;

    }
  /*------------Slide-----------*/
  .block-slider{
  background:#000;
  display:block;
}
  .pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .pic-wrapper img{
  width: 100%;
  height: 100%;
  opacity: .5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; 
    /*animation*/
    animation: slideShow 23s linear infinite 0s;
    -o-animation: slideShow 23s linear infinite 0s;
    -moz-animation: slideShow 23s linear infinite 0s;
    -webkit-animation: slideShow 23s linear infinite 0s;
  }
  figurecaption {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
  }
  .pic-1 {
    opacity: 1;
  }
  .pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
  }
  .pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
  }
  .pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
  }
  
  /* keyframes*/
  
  @keyframes 
  slideShow {  0% {
   opacity: 0;
   transform:scale(1);
   -ms-transform:scale(1);
   
  }
   5% {
     
   opacity: 1
  }
   25% {
   opacity: 1;
   
  }
   30% {
   opacity: 0;
   transform:scale(1.1);
   -ms-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   transform:scale(1);
   -ms-transformm:scale(1);
  }
  }
   @-o-keyframes 
  slideShow {  0% {
   opacity: 0;
   -o-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -o-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -o-transformm:scale(1);
  }
  }
   @-moz-keyframes 
  slideShow {  0% {
   opacity: 0;
   -moz-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -moz-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -moz-transformm:scale(1);
  }
  }
   @-webkit-keyframes 
  slideShow {  0% {
   opacity: 0;
   -webkit-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -webkit-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -webkit-transformm:scale(1);
  }
  }

  }



  @media (max-width: 1023px) {

    nav {


      position: relative;
      width: auto;
      height: 50px;
      background-color: #32003b;
      
      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;
    }
    
    
    header {
      width: 100%;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
    }
    header .textos {
      color: #fff;
      position:relative;
      top: 50%;
      margin-top:-80px;
      text-align:center;
      transform: translateY(200%); 
    }
    /*imagen*/
      .letrero{
        display: block;
        text-align: center;
      }
      .texto_letrero{
       
      top:70px;
      z-index:-1;     
      }
      .tamaño-img{
        max-width:110px;
        max-height: 110px;
      }
  /*textos*/
    .line-1{
      position: relative;
      top: 40%;  
      width: 24em;
      margin: 0 auto;
      border-right: 2px solid rgba(255,255,255,.75);
      font-size: 22px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
    
    }
 
    /**/
    
    
    
    .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: 100%;
   }
    
    .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:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-1) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-2) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-3) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
    
    .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*/
     .text {
      font-size:12px;
      font-family:'shriacha';
     
     
      text-transform:uppercase;
    
    }
    .parpadea {
      
      animation-name: parpadeo;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    
      -webkit-animation-name:parpadeo;
      -webkit-animation-duration: 3s;
      -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; }
    }
    /*texto parpadea*/
    .contenedor-btns{
      margin-top: 70px;
      margin-bottom: 100px;
      text-align: center;
 
    height:auto;
    
    }
    
    .contenedor-btns a {
      background:#770d8a;
      transition: all .3s;
      border-radius: 6px;
      border: 3px solid #fff;
      color: #fff;
      padding: 7px 0px;
      font-size: 10px;
      font-family:'shriracha';
    width: 200px;
      display: inline-block;
      
  }
       .contenedor-btns a:hover {
        text-decoration: none;
       
    color: rgba(0,0,0, .5);
    background:#32003b;
    
    
        color: #fff;
      opacity: .7; }
    
       .contenedor-btns .btn {
         margin-top: 5px;
        background:#32003b;
        transition: all .3s;
          border: 3px solid #fff;
          color:#fff;
           
       
        }
        .contenedor-btns .btn:hover {
          text-decoration: none;
        color: rgba(0,0,0, .5);
    background:#650077 ;
          color: #fff; 
        opacity: .7;}
    
    
     /* fin Bonton*/
      /*-------- Transparencia de imagenes---------*/
    .centrar{
    display: block;
    position: absolute;
    text-align: center;
    left:0px;
   
    color:#fff;
    width:100%;
    height:100%;
  
    }
    /*------------Slide-----------*/
    .block-slider{
      background:#000;
      display:block;
    }
    .pic-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .pic-wrapper img{
    width: 100%;
    height: 100%;
    opacity: .5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    figure {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0; 
      /*animation*/
      animation: slideShow 23s linear infinite 0s;
      -o-animation: slideShow 23s linear infinite 0s;
      -moz-animation: slideShow 23s linear infinite 0s;
      -webkit-animation: slideShow 23s linear infinite 0s;
    }
    figurecaption {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #000;
    }
    .pic-1 {
      opacity: 1;
    }
    .pic-2 {
      animation-delay: 6s;
      -o-animation-delay: 6s;
      -moz--animation-delay: 6s;
      -webkit-animation-delay: 6s;
    }
    .pic-3 {
      animation-delay: 12s;
      -o-animation-delay: 12s;
      -moz--animation-delay: 12s;
      -webkit-animation-delay: 12s;
    }
    .pic-4 {
      animation-delay: 18s;
      -o-animation-delay: 18s;
      -moz--animation-delay: 18s;
      -webkit-animation-delay: 18s;
    }
    
    /* keyframes*/
    
    @keyframes 
    slideShow {  0% {
     opacity: 0;
     transform:scale(1);
     -ms-transform:scale(1);
     
    }
     5% {
       
     opacity: 1
    }
     25% {
     opacity: 1;
     
    }
     30% {
     opacity: 0;
     transform:scale(1.1);
     -ms-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     transform:scale(1);
     -ms-transformm:scale(1);
    }
    }
     @-o-keyframes 
    slideShow {  0% {
     opacity: 0;
     -o-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -o-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -o-transformm:scale(1);
    }
    }
     @-moz-keyframes 
    slideShow {  0% {
     opacity: 0;
     -moz-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -moz-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -moz-transformm:scale(1);
    }
    }
     @-webkit-keyframes 
    slideShow {  0% {
     opacity: 0;
     -webkit-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -webkit-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -webkit-transformm:scale(1);
    }
    }
  

  @media (max-width: 823px) {
    
nav {


	position: relative;
	width: auto;
	height: 50px;
	background-color: #32003b;
	
	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;
}


    header {
      width: 100%;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
    }
    header .textos {
      color: #fff;
      position:relative;
      top: 50%;
      margin-top:-50px;
      text-align:center;
      transform: translateY(-170%); 
    }
    /*imagen*/
      .letrero{
        display: block;
        text-align: center;
      }
      .texto_letrero{
       
      top:70px;
      z-index:-1;     
      }
      .tamaño-img{
        max-width:100px;
        max-height: 100px;
      }
  /*textos*/
    .line-1{
      position: relative;
      top: 40%;  
      width: 24em;
      margin: 0 auto;
      border-right: 2px solid rgba(255,255,255,.75);
      font-size: 22px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
         
    }
  

  /**/
    
    
  .deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }
    
  .letras {
  
   font-size:16px;
   font-family: 'shriacha';
   user-select:none;
  }
 .letras{
   margin-top: 40%;
 }
  
  .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:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-1) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-2) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-3) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
  
  .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*/
   .text {
    font-size:12px;
    font-family:helvetica;
    font-weight:bold;
   
    text-transform:uppercase;
  
  }
  .parpadea {
    
    animation-name: parpadeo;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 3s;
    -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; }
  }
  /*texto parpadea*/
  .contenedor-btns{
    margin-top: 50px;
    margin-bottom: 0px;
    text-align: center;
  height:auto;
  
  }
  
  .contenedor-btns a {
    background:#770d8a;
    transition: all .3s;
    border-radius: 6px;
    border: 3px solid #fff;
    color: #fff;
    padding: 7px 0px;
    font-size: 10px;
    font-family: cursive;
  width: 170px;
    display: inline-block;
    
}
     .contenedor-btns a:hover {
      text-decoration: none;
     
  color: rgba(0,0,0, .5);
  background:#32003b;
  
  
      color: #fff;
    opacity: .7; }
  
     .contenedor-btns .btn {
       margin-top: 5px;
      background:#32003b;
      transition: all .3s;
        border: 3px solid #fff;
        color:#fff;
         
     
      }
      .contenedor-btns .btn:hover {
        text-decoration: none;
      color: rgba(0,0,0, .5);
  background:#650077 ;
        color: #fff; 
      opacity: .7;}
  
  
   /* fin Bonton*/

      /*-------- Transparencia de imagenes---------*/
.centrar{
  display: block;
  position: absolute;
  text-align: center;
  left:0px;

  color:#fff;
  width:100%;
  height:87%;
  
  }
  /*------------Slide-----------*/
  .block-slider{
  background:#000;
  display:block;
}
  .pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .pic-wrapper img{
  width: 100%;
  height: 100%;
  opacity: .5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }  

    
  }
  @media (max-width: 812px) {
    
nav {


	position: relative;
	width: auto;
	height: 50px;
	background-color: #32003b;
	
	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;
}


    header {
      width: 100%;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
    }
    header .textos {
      color: #fff;
      position:relative;
      top: 50%;
      margin-top:-50px;
      text-align:center;
      transform: translateY(-170%); 
    }
    /*imagen*/
      .letrero{
        display: block;
        text-align: center;
      }
      .texto_letrero{
       
      top:70px;
      z-index:-1;     
      }
      .tamaño-img{
        max-width:100px;
        max-height: 100px;
      }
  /*textos*/
    .line-1{
      position: relative;
      top: 40%;  
      width: 24em;
      margin: 0 auto;
      border-right: 2px solid rgba(255,255,255,.75);
      font-size: 22px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
         
    }
  

  /**/
    
    
  .deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }
    
  .letras {
  
   font-size:16px;
   font-family: 'shriacha';
   user-select:none;
  }
 .letras{
   margin-top: 40%;
 }
  
  .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:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-1) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-2) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-3) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
  
  .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*/
   .text {
    font-size:12px;
    font-family:helvetica;
    font-weight:bold;
   
    text-transform:uppercase;
  
  }
  .parpadea {
    
    animation-name: parpadeo;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 3s;
    -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; }
  }
  /*texto parpadea*/
  .contenedor-btns{
    margin-top: 50px;
    margin-bottom: 0px;
    text-align: center;
  height:auto;
  
  }
  
  .contenedor-btns a {
    background:#770d8a;
    transition: all .3s;
    border-radius: 6px;
    border: 3px solid #fff;
    color: #fff;
    padding: 7px 0px;
    font-size: 10px;
    font-family: cursive;
  width: 170px;
    display: inline-block;
    
}
     .contenedor-btns a:hover {
      text-decoration: none;
     
  color: rgba(0,0,0, .5);
  background:#32003b;
  
  
      color: #fff;
    opacity: .7; }
  
     .contenedor-btns .btn {
       margin-top: 5px;
      background:#32003b;
      transition: all .3s;
        border: 3px solid #fff;
        color:#fff;
         
     
      }
      .contenedor-btns .btn:hover {
        text-decoration: none;
      color: rgba(0,0,0, .5);
  background:#650077 ;
        color: #fff; 
      opacity: .7;}
  
  
   /* fin Bonton*/

      /*-------- Transparencia de imagenes---------*/
.centrar{
  display: block;
  position: absolute;
  text-align: center;
  left:0px;

  color:#fff;
  width:100%;
  height:100%;

  }
  /*------------Slide-----------*/
  .block-slider{
    background:#000;
    display:block;
  }
  .pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .pic-wrapper img{
  width: 100%;
  height: 100%;
  opacity: .5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }  

    

  }
  @media (max-width: 768px) {
    
nav {


	position: relative;
	width: auto;
	height: 50px;
	background-color: #32003b;
	
	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;
}


    header {
      width: 100%;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
    }
    header .textos {
      color: #fff;
      position:relative;
      top: 50%;
      margin-top:-23px;
      text-align:center;
      transform: translateY(30%); 
    }
    /*imagen*/
      .letrero{
        display: block;
        text-align: center;
      }
      .texto_letrero{
       
      top:70px;
      z-index:-1;     
      }
      .tamaño-img{
        max-width:90px;
        max-height: 90px;
      }
  /*textos*/
    .line-1{
      position: relative;
      top: 40%;  
      width: 24em;
      margin: 0 auto;
      border-right: 2px solid rgba(255,255,255,.75);
      font-size: 22px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
         
    }
   

  /**/
    
    
    
  .deli {height: 100%; display: flex; justify-content: center; align-items: center; margin:0px 0; text-align:center; overflow:hidden; }
    
  .letras {
  
   font-size:16px;
   font-family: 'shriacha';
   user-select:none;
  }
 .letras{
   margin-top: 40%;
 }
  
  .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:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-1) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-2) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-3) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
  
  .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*/
   .text {
    font-size:12px;
    font-family:helvetica;
    font-weight:bold;
   
    text-transform:uppercase;
  
  }
  .parpadea {
    
    animation-name: parpadeo;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 3s;
    -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; }
  }
  /*texto parpadea*/
  .contenedor-btns{
    margin-top: 30px;
    margin-bottom: 0px;
    text-align: center;
  height:auto;
  
  }
  
  .contenedor-btns a {
    background:#770d8a;
    transition: all .3s;
    border-radius: 6px;
    border: 3px solid #fff;
    color: #fff;
    padding: 7px 0px;
    font-size: 10px;
    font-family: cursive;
  width: 170px;
    display: inline-block;
    
}
     .contenedor-btns a:hover {
      text-decoration: none;
     
  color: rgba(0,0,0, .5);
  background:#32003b;
  
  
      color: #fff;
    opacity: .7; }
  
     .contenedor-btns .btn {
       margin-top: 5px;
      background:#32003b;
      transition: all .3s;
        border: 3px solid #fff;
        color:#fff;
         
     
      }
      .contenedor-btns .btn:hover {
        text-decoration: none;
      color: rgba(0,0,0, .5);
  background:#650077 ;
        color: #fff; 
      opacity: .7;}
  
  
   /* fin Bonton*/

      /*-------- Transparencia de imagenes---------*/
.centrar{
  display: block;
  position: absolute;
  text-align: center;
  left:0px;
 
  color:#fff;
  width:100%;
  height:100%;
  
  }
  /*------------Slide-----------*/
  .block-slider{
    background:#000;
    display:block;
  }
  .pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .pic-wrapper img{
  width: 100%;
  height: 100%;
  opacity: .5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }  

  }
  @media (max-width: 480px) {

    nav {


      position: relative;
      width: auto;
      height: 40px;
      background-color: #32003b;
      
      font-size: 0;
    }
    nav a {
      font-family: arial;
      line-height: 40px;
      height: 100%;
      font-size: 10px;
      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: 50px;
    }
    a:nth-child(2) {
      width: 60px;
    }
    a:nth-child(3) {
      width: 50px;
    }
    a:nth-child(4) {
      width: 80px;
    }
    a:nth-child(5) {
      width: 60px;
    }
    nav .start-home, a:nth-child(1):hover~.animation {
      width: 50px;
      left: 0;
      background-color: #9b59b6;
    }
    nav .start-about, a:nth-child(2):hover~.animation {
      width: 55px;
      left: 500px;
      background-color: #9b59b6;
    }
    nav .start-blog, a:nth-child(3):hover~.animation {
      width: 50px;
      left: 50px;
      background-color: #9b59b6;
    }
    nav .start-portefolio, a:nth-child(4):hover~.animation {
      width:80px;
      left: 80px;
      background-color: #9b59b6;
    }
    nav .start-contact, a:nth-child(5):hover~.animation {
      width:60px;
      left: 60px;
      background-color: #9b59b6;
    }
    
    
    header {
      width: 100%;
      background-size: cover;
      background-attachment: fixed;
      background-position: center 0;
    }
    header .textos {
      color: #fff;
      position:relative;
      top: 50%;
      margin-top:-50px;
      text-align:center;
      transform: translateY(80%); 
    }
    /*imagen*/
      .letrero{
        display: block;
        text-align: center;
      }
      .texto_letrero{
       
      top:70px;
      z-index:-1;     
      }
      .tamaño-img{
        max-width:100px;
        max-height: 100px;
      }
  /*textos*/
    .line-1{
      position: relative;
      top: 40%;  
      width: 24em;
      margin: 0 auto;
      border-right: 2px solid rgba(255,255,255,.75);
      font-size: 22px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
         
    }
  

  /**/
    
    
    
  .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: 'shriacha';
   user-select:none;
  }
 .letras{
   margin-top: 60%;
 }
  
  .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:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-1) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-2) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
span:nth-child(4n-3) { color:#fff; text-shadow:1px 1px hsl(308, 100%, 41%), 2px 2px hsl(308, 100%, 41%), 3px 3px hsl(308, 100%, 41%) , 4px 4px hsl(308, 100%, 41%); }
  
  .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*/
   
  .parpadea {
    
    animation-name: parpadeo;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  
    -webkit-animation-name:parpadeo;
    -webkit-animation-duration: 3s;
    -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; }
  }
  /*texto parpadea*/
  .contenedor-btns{
    margin-top: 40px;
    margin-bottom: 0px;
    text-align: center;
  height:auto;
  
  }
  
  .contenedor-btns a {
    background:#770d8a;
    transition: all .3s;
    border-radius: 6px;
    border: 3px solid #fff;
    color: #fff;
    padding: 7px 0px;
    font-size: 10px;
    font-family: 'shriacha';
  width: 170px;
    display: inline-block;
    
}
     .contenedor-btns a:hover {
      text-decoration: none;
     
  color: rgba(0,0,0, .5);
  background:#32003b;
  
  
      color: #fff;
    opacity: .7; }
  
     .contenedor-btns .btn {
       margin-top: 5px;
      background:#32003b;
      transition: all .3s;
        border: 3px solid #fff;
        color:#fff;
         
     
      }
      .contenedor-btns .btn:hover {
        text-decoration: none;
      color: rgba(0,0,0, .5);
  background:#650077 ;
        color: #fff; 
      opacity: .7;}
  
  /*-------- Transparencia de imagenes---------*/
  .centrar{
    display: block;
    position: absolute;
    text-align: center;
    left:0px;
 
    color:#fff;
    width:100%;
    height:91%;
 
    }
    /*------------Slide-----------*/
    .block-slider{
      background:#000;
      display:block;
    }
    .pic-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .pic-wrapper img{
    width: 100%;
    height: 100%;
    opacity: .5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }



  }





/*--------------------------------------------------------------*/



.foto{
  overflow-x: hidden;
  background: url('../img/delmich2.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;
}
.textos p{
 
  margin-top: 100px;
font-weight: bold;
  font-size: 40px;
  color: rgb(85, 0, 110);
  text-decoration:underline;
}

.texto_letrero{

 position: relative;
top:180px;
z-index:1;     
}




.margen{
  margin-top: 330px;
}

/*img-transicion*/
 .fotos{
    padding: 0px;
    }
    .galeria{
    width:220px;
    height:220px;

    text-align: center;
    overflow: hidden;
    
    }
    /*imagenes juntas*/
    .no-gutters{
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #fff;
      background-color: rgba(0,0,0, 1);

   margin-left: 0px;
   margin-right: 0px
   padding:0px;
    
    }
    /*Transicion imagenes-transparencias*/
    .galeria img{
      width:100%;
      height:100%;
      
      -webkit-transform:scale(1.06) translateZ(0px);
    -moz-transform:scale(1.06) translateZ(0px);
    -ms-transform:scale(1.06) translateZ(0px);
    transform:scale(1.06) translateZ(0px);
    -webkit-transition: -webkit-transform 0.35s linear;
    -moz-transition: -moz-transform 0.35s linear;
    -ms-transition: -ms-transform 0.35s linear;
    transition: transform 0.35s linear;
         opacity: 0.6; 
      
      }
      .galeria img:hover{
        -webkit-transform:scale(1.2) translateZ(0px);
        -moz-transform:scale(1.2) translateZ(0px);
        -ms-transform:scale(1.2) translateZ(0px);
        transform:scale(1.2) translateZ(0px);
        -webkit-transition: -webkit-transform 7s linear;
        -moz-transition: -moz-transform 7s linear;
        -ms-transition: -ms-transform 7s linear;
        transition: transform 7s linear;
        
        
      }
      /*texto imagenes-menu*/
      .producto{
        font-size: 18px;
        color: #ffffff;
      }
      /*Boton*/
      .boton{
        display: block;
        position: absolute;
        top: 50px;
        left: 35%;
        right: 35%;
        width: 30%;
        height: 80px;
        line-height:15px ;
        text-decoration: none;
    padding: 10px;
    font-size: 15px;
    color:  #ffffff;
    background-color: rgba(0,0,0, .2);
  border-radius: 6px;
  border: 1px solid #696969;
      }
      .boton:hover {

    color: #ffffff;
      background-color: rgba(0,0,0, .1);
    border-radius: 6px;
    border: 1px solid #696969;
      }
       /* fin Bonton*/


.container-fluid{
padding: 0px;

}
 
.centrar{
  text-align: center;
}

 /*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*/



    /*Boton servicio*/
    .servicio{
   
      margin-top: 0px;
      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;

}





    .servicio: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; }
}


 

     /*Animacion-Texto contacto*/
.line-1{
  position: relative;
  top: 50%;  
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 22px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);  
 margin-top: 70px;
 
}

/* 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: 10em;}
}
@keyframes blinkTextCursor{
from{border-right-color: transparent;}
to{border-right-color: transparent;}
}
   
h1 {
        
  font-family:'shriacha';

  color: rgb(255, 255, 255);
  font-size: 16px;
text-align: center; 

}
p{
  padding: 0;
  color: rgb(255, 255, 255);
   font-family: 'shriacha';
  font-size: 38px;
 
}
 /*Fin animacion texto*/

 #site-content {
  min-height: 30%;
  min-height:30vh;

  position: relative;
  z-index: 1;

  -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;

}


.servicio{
  margin-top:50px;
}



@media (min-width: 768px) and (max-width: 1199px) { 

.foto {
    background: url('../img/delmich2.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;
  }
  .textos p{
 
    margin-top: 100px;
 font-weight: bold;
    font-size: 40px;
    color: rgb(85, 0, 110);
    text-decoration:underline;
  }

.texto_letrero{

   position: relative;
top:180px;
z-index:1;     
}


 

  
  /*img-transicion*/
   .fotos{
      padding: 0px;
      }
      .galeria{
      width:220px;
      height:220px;
      background: rgba(0,0,0, .7);
      text-align: center;
      overflow: hidden;
      }
      /*imagenes juntas*/
      .no-gutters{
     
        margin-left: 0px;
        margin-right: 0px
    
      }
      /*Transicion imagenes-tramsparencias*/
      .galeria img{
        width:100%;
        height:100%;
        
        -webkit-transform:scale(1.06) translateZ(0px);
      -moz-transform:scale(1.06) translateZ(0px);
      -ms-transform:scale(1.06) translateZ(0px);
      transform:scale(1.06) translateZ(0px);
      -webkit-transition: -webkit-transform 0.35s linear;
      -moz-transition: -moz-transform 0.35s linear;
      -ms-transition: -ms-transform 0.35s linear;
      transition: transform 0.35s linear;
        }

        .galeria img:hover{
          -webkit-transform:scale(1.2) translateZ(0px);
          -moz-transform:scale(1.2) translateZ(0px);
          -ms-transform:scale(1.2) translateZ(0px);
          transform:scale(1.2) translateZ(0px);
          -webkit-transition: -webkit-transform 7s linear;
          -moz-transition: -moz-transform 7s linear;
          -ms-transition: -ms-transform 7s linear;
          transition: transform 7s linear;
          
          
        }
        /*texto imagenes-menu*/
        .producto{
          font-size: 12px;
          color: #ffffff;
        }
        /*Boton*/
        .boton{
          display: block;
          position: absolute;
          top: 50px;
          left: 25%;
          right: 25%;
          width: 50%;
          height: 80px;
          line-height:15px ;
          text-decoration: none;
      padding: 10px;
      font-size: 15px;
      color:  #ffffff;
      background-color: rgba(0,0,0, .2);
    border-radius: 6px;
    border: 1px solid #696969;
        }
        .boton:hover {
  
      color: #ffffff;
        background-color: rgba(0,0,0, .1);
      border-radius: 6px;
      border: 1px solid #696969;
        }
         /* fin Bonton*/
  
    

  .centrar{
    text-align: center;
  }
  
 /*redes*/
 .color{
  color: #ffffff;
  }
  hr{
  margin-top: 10px;
  margin-bottom: 40px;
  width: 70%;
  border: 1px solid #7f0096;
  }
  .redes{
  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*/



 
  
     /*Boton servicio*/
     .servicio{
     
     margin-bottom: 60px;
      width: 200px;
      max-width:100%;
      height: 50px;
      line-height:30px ;
  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;}
  
    .servicio:hover {
  color: rgba(0,0,0, .5);
  background: linear-gradient(180deg, rgb(197, 197, 197) 0%, rgb(79, 0, 131) 100%);
    }
  
     /*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; }
  }
  /*texto parpadea*/
  
       /*Animacion-Texto contacto*/
  .line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px 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 {
    font-family:'shriacha';
    color: #fff;
    font-size: 14px;
text-align: center; 

  }

   /*Fin animacion texto*/
  
 /*footer*/
 
 #site-content {
  min-height: 30%;
  min-height:auto;
  width: 85%;

  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;

}


.servicio{
  margin-top: 50px;
  
}


}
@media (max-width: 767px) { 

  .foto {
   
    background: url('../img/delmich2.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;
  }
  /*texto imagenes-menu*/
  .producto{
    font-size: 10px;
    color: #ffffff;
  }

  .textos p{
 
    margin-top: 0px;
 font-weight: bold;
    font-size: 20px;
    color: rgb(85, 0, 110);
    text-decoration:underline;
  }

.texto_letrero{

   position: relative;
top:150px;
z-index:1;     
}


.centrar{
text-align: center;
}

/*redes*/
.color{
color: #ffffff;
}
hr{
margin-top: 10px;
margin-bottom: 40px;
width: 70%;
border: 1px solid #7f0096;
}
.redes{
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*/





/*Boton servicio*/
.servicio{

width: 200px;
max-width:100%;
height: 50px;
line-height:30px ;
font-size: 12px;
color: #ffffff;
background:linear-gradient(180deg, rgb(79, 0, 131) 0%,  rgb(197, 197, 197) 100%);
transition: all .3s;
border-radius: 6px;}

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

/*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; }
}
/*texto parpadea*/

 /*Animacion-Texto contacto*/
.line-1{
position: relative;
top: 50%;  
width: 24em;
margin: 0 auto;
border-right: 2px solid rgba(255,255,255,.75);
font-size: 18px;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);   
margin-top: 40px; 
}

/* 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;}
}


h1 {
  font-family:'shriacha';
  color: #fff;
  font-size: 14px;
text-align: center; 

}

/*Fin animacion texto*/

/*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;
  
  }
  
  
  .servicio{
    margin-top: 20px;
  margin-bottom:20px;
  }
  

}

@media (max-width: 480px) {


  .foto {
   
    background: url('../img/delmich2.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;


  }
  .textos p{
 
    margin-top: 220px;
 font-weight: bold;
    font-size: 20px;
    color: rgb(85, 0, 110);
    text-decoration:underline;
  }

.texto_letrero{

   position: relative;
top:130px;
z-index:1;     
}

  /*Boton*/
  .boton{
    display: block;
    position: absolute;
    top: 33%;
    left: 33%;
    right:33%;
    width: auto;
    height: auto;
    line-height:15px ;
    text-decoration: none;
padding: 10px;
font-size: 15px;
color:  #ffffff;
background-color: rgba(0,0,0, .2);
border-radius: 6px;
border: 1px solid #696969;
  }
  .boton:hover {

color: #ffffff;
  background-color: rgba(0,0,0, .1);
border-radius: 6px;
border: 1px solid #696969;
  }
   /* fin Bonton*/


 /*Animacion-Texto contacto*/
 .line-1{
  position: relative;
  top: 50%;  
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
  margin-top: 40px;
  }
  
  /* 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: 10em;}
  }
  @keyframes blinkTextCursor{
  from{border-right-color: transparent;}
  to{border-right-color: transparent;}
  }
  
  
  h1 {
    font-family:'shriacha';
    color: #fff;
    font-size: 14px;
  text-align: center; 
  
  }
  
  /*Fin animacion texto*/
   #site-content {
    min-height: 30%;
    min-height:auto;
    width: 90%;
   
    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;
    
    }
    
  .servicio{
    margin-top: 20px;
    margin-bottom:20px;
    }
    
      

  
}

/*---------------------------------------------------*/

/*imagen fondo*/
.fondo{
  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;

    }


/*Mapa, tamaño marco*/

.mapa{
   
  width: auto;
 
text-align: center;
display: block;
height:400px;

}

.mapa iframe{

  width: 100%;
  max-height: 400px;
  margin-top: 0px;
  margin-bottom:0px;
  padding: 0px;
}
.marco{
  height:auto;
  border: 5px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.3);
  margin-bottom:100px;
  margin-top:90px;
  height: 400px;
}
/*Fin mapa*/




@media (min-width: 768px) and (max-width: 1199px) { 
  /*imagen fondo*/
.fondo{
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;

}


/*Mapa, tamaño marco*/
.mapa{
   
  width: auto;
  height:300px;
text-align: center;
display: block;


}
iframe{

  width: 100%;
  max-height: 300px;
  margin-top: 0px;
  margin-bottom:0px;
  padding: 0px;
}
.marco{
  height:auto;
  border: 5px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.3);
  margin-bottom:60px;
  margin-top:50px;
}
}
/*Fin mapa*/

@media (max-width: 767px) { 

  .fondo{

  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;
  
  }
  /*Mapa, tamaño marco*/
.mapa{
   
  width: auto;
  height:300px;
text-align: center;
display: block;


}
iframe{

  width: 100%;
  max-height: 300px;
  margin-top: 0px;
  margin-bottom:0px;
  padding: 0px;
}
.marco{
  height:auto;
  border: 5px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.3);
  margin-bottom:60px;
  margin-top:50px;
}

}

@media (max-width: 480px) {

     
  .fondo{

    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;
    
    }

  /*Mapa, tamaño marco*/
  .mapa{
     
    width: auto;
    height:250px;
  text-align: center;
  display: block;
  
  
  }
  iframe{
  
    width: 100%;
    max-height: 250px;
    margin-top: 0px;
    margin-bottom:0px;
    padding: 0px;
  }
  .marco{
    height:auto;
    border: 5px solid #ffffff;
    border-radius: 5px;
    box-shadow: 0px 25px 55px 0px rgba(0, 0, 0, 0.3);
    margin-bottom:60px;
    margin-top:50px;
  }
  /*Fin mapa*/
}