:root {
	/*colores*/
  --blue: #00a7e1;
  --darkblue: #026782;
  --green: #3aaa35;
  --green2: #3fbc5c;
  --green3: #95e391;
  --white: #ffffff;
  --gray: #706f6f;
  --gray2: #c2c2c2;
  --brown: #635241;

}


/*ANIMACIONES*/
@keyframes movimiento-arrow {
0% {top: 0px;}100% {top: 50px;}}

@keyframes anime-texto {
0% {
  top: -50px;
  opacity: 0;
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -o-filter: blur(50px);
  -ms-filter: blur(50px);
  }
  100% {
    top: 0px;
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    }}    

 /* nuevas animaciones */
@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}
/*END*/   

#anim1 {
      animation-name: movimiento-arrow;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-direction: alternate;/*para que vuelva a su posicion inicial */
      position: relative;}

#anim-txt-1 {
      animation-name: anime-texto;
      animation-duration: 1s;
      position: relative;}      

}

#anim1-txt-2 {
      animation-name: slidein;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-direction: alternate;/*para que vuelva a su posicion inicial */
      position: relative;}






/*EFECTOs*/

.x2{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}

.op{filter:alpha(opacity=80);
  -moz-opacity:.80;
  -webkit-opacity:.80;
  -o-opacity:.80;
  -ms-opacity:.80;
  opacity:.80;
}

.op:hover{opacity: 100;}

.zoomIt{-webkit-transition:-webkit-transform 1s ease-out;-moz-transition:-moz-transform 1s ease-out;-o-transition:-o-transform 1s ease-out;-ms-transition:-ms-transform 1s ease-out;transition:transform 1s ease-out;}
.zoomIt:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}

.moveup{-webkit-transition:-webkit-transform 1s ease-out;-moz-transition:-moz-transform 1s ease-out;-o-transition:-o-transform 1s ease-out;-ms-transition:-ms-transform 1s ease-out;transition:transform 1s ease-out;}


.moveup:hover{
-moz-transform: translate(0px, -10px);
-webkit-transform: translate(0px, -10px);
-o-transform: translate(0px, -10px);
-ms-transform: translate(0px, -10px);
 transform: translate(0px, -10px);}

.shad{
border-radius:0px;
-webkit-transition:-webkit-transform 1s ease-out;-moz-transition:-moz-transform 1s ease-out;-o-transition:-o-transform 1s ease-out;-ms-transition:-ms-transform 1s ease-out;transition:transform 1s ease-out;
-webkit-box-shadow: 2px 2px 16px 0px rgba(6, 117, 147, 0);
-moz-box-shadow:    2px 2px 16px 0px rgba(6, 117, 147, 0);
box-shadow:         2px 2px 16px 0px rgba(6, 117, 147, 0);
}

.shad:hover{
-webkit-box-shadow: 2px 2px 25px 0px rgba(6, 117, 147, 1);
-moz-box-shadow:    2px 2px 25px 0px rgba(6, 117, 147, 1);
box-shadow:         2px 2px 25px 0px rgba(6, 117, 147, 1); 
}


.img_cpt{
-webkit-transition:-webkit-transform 1s ease-out;-moz-transition:-moz-transform s ease-out;-o-transition:-o-transform 1s ease-out;-ms-transition:-ms-transform s ease-out;transition:transform 1s ease-out;
border-bottom: 4px solid rgba(0,168,226,0);}


.img_cpt:hover{
border-bottom: 4px solid rgba(0,168,226,0.6);}


.rad25{border-radius:25px;}


.sd{
-webkit-box-shadow: 10px 10px 47px 0px rgba(181,181,181,0.45);
-moz-box-shadow: 10px 10px 47px 0px rgba(181,181,181,0.45);
box-shadow: 10px 10px 47px 0px rgba(181,181,181,0.45);       
}

.sd:hover{
-webkit-box-shadow: 10px 10px 47px 0px rgba(181,181,181,0.75);
-moz-box-shadow: 10px 10px 47px 0px rgba(181,181,181,0.75);
box-shadow: 10px 10px 47px 0px rgba(181,181,181,0.75);  
}

.sdgreen{
-webkit-box-shadow: 10px 10px 47px 0px rgba(6,158,63,0.6);
-moz-box-shadow: 10px 10px 47px 0px rgba(6,158,63,0.6);
box-shadow: 10px 10px 47px 0px rgba(6,158,63,0.6);       
}

.sdgreen:hover{
-webkit-box-shadow: 10px 10px 47px 0px rgba(6,158,63,0.85);
-moz-box-shadow: 10px 10px 47px 0px rgba(6,158,63,0.85);
box-shadow: 10px 10px 47px 0px rgba(6,158,63,0.85);  
}