/*  RESER DE ELEMENTOS  */
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/*  FORMATO PARA LINK  */
a:link {text-decoration:none; color:#0074D2;}
a:visited {text-decoration:none; color:#B38600;}
a:hover {text-decoration:none; color:#003A6A;}
a:active {text-decoration:none; color:#00B32D;}

hr{ padding: 0px; margin: 0px; }

/*  FORMATO BODY  */
.body{
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF3d3d////riJKgAAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR42mJgBAEGGMmAxAYCgAADAAGGABmnk/7aAAAAAElFTkSuQmCC') repeat scroll 0% 0% #EEE;
}





.calendario{
  width: 100%;
  padding: 0px;
  margin-top: -15px;
  background-color: #5895BE;
}
.calendario td{
  min-width: 10px;
  -webkit-transition:All 0.5s ease;
  -moz-transition:All 0.5s ease;
  -o-transition:All 0.5s ease;
}
.calendario td:hover{
  background-color: #73C3F9;
}
.calendario th{
  background-color: #003A6A;
  color: #fff;
}

.titulo {
 width:90%;
 padding:0px;
 margin:10px auto;
 font-family: arial,sans-serif;
 font-weight: bold;
 text-align: center;
 color: #595959;
 -webkit-text-shadow: #9e9e9e 0 1px 0;
 -moz-text-shadow: #9e9e9e 0 1px 0;
 -o-text-shadow: #9e9e9e 0 1px 0;
 text-shadow: #9e9e9e 0 1px 0;
 text-transform:uppercase;
 text-shadow: #ffffff 0 1px 0;
}




/***CLASE FORMULARIO***********************************/

.formulario {
 border: 1px solid #bbb;
 background: #EEE;
 background: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#EEE));
 background: -webkit-linear-gradient(top, #E6E6E6, #EEE);
 background: -moz-linear-gradient(top, #E6E6E6, #EEE);
 background: -ms-linear-gradient(top, #E6E6E6, #EEE);
 background: -o-linear-gradient(top, #E6E6E6, #EEE);
 background-image: -ms-linear-gradient(top, #E6E6E6 0%, #EEE 100%);
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
 -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
 box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
 font-family: 'Helvetica Neue',Helvetica,sans-serif;
 text-decoration: none;
 vertical-align: middle;
 min-width:300px;
 padding:20px;
 margin:5px 5px;
}
.formulario input[type="text"],  .formulario input[type="password"] , .formulario input[type="number"] , .formulario input[type="date"] , .formulario select , .formulario textarea {
 border: 1px solid #9e9e9e;
 background: #e6e6e6;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 color: #999799;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 /*padding:5px;
 margin-bottom:5px;*/
 width:98%;
 height:30px;
 -webkit-transition:All 0.5s ease;
 -moz-transition:All 0.5s ease;
 -o-transition:All 0.5s ease;
}
.formulario input[type="text"]:focus,  .formulario input[type="password"]:focus , .formulario input[type="number"]:focus , .formulario input[type="date"]:focus , .formulario select:focus , .formulario textarea:focus{
 background: #fff;
 color: #757473;

}



.formulario label {
 text-shadow: #ffffff 0 1px 0;
 font-size:18px;
 margin: 0 0 10px 0;
 font-weight:bold;
 text-align:center;
 color: #494949;
}

.boton {
 border: 1px solid #154773;
 background: #3667a3;
 background: -webkit-gradient(linear, left top, left bottom, from(#5a97bf), to(#3667a3));
 background: -webkit-linear-gradient(top, #5a97bf, #3667a3);
 background: -moz-linear-gradient(top, #5a97bf, #3667a3);
 background: -ms-linear-gradient(top, #5a97bf, #3667a3);
 background: -o-linear-gradient(top, #5a97bf, #3667a3);
 background-image: -ms-linear-gradient(top, #5a97bf 0%, #3667a3 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 text-shadow: #7fc2db 0 1px 0;
 color: #fff;
 font-family: helvetica, serif;
 padding: 5px 10px;
 left: 5px;
 font-size: 14px;
 text-decoration: none;
 vertical-align: middle;
 /*border: medium none;*/
}
.boton:hover {
 border: 1px solid #155273;
 text-shadow: #0c2c52 0 1px 0;
 background: #368da3;
 background: -webkit-gradient(linear, left top, left bottom, from(#5aa3bd), to(#368da3));
 background: -webkit-linear-gradient(top, #5aa3bd, #368da3);
 background: -moz-linear-gradient(top, #5aa3bd, #368da3);
 background: -ms-linear-gradient(top, #5aa3bd, #368da3);
 background: -o-linear-gradient(top, #5aa3bd, #368da3);
 background-image: -ms-linear-gradient(top, #5aa3bd 0%, #368da3 100%);
 color: #fff;
}
.boton:active {
 text-shadow: #dbd793 0 1px 0;
 border: 1px solid #155573;
 background: #b0d0d4;
 background: -webkit-gradient(linear, left top, left bottom, from(#9fbdd4), to(#368da3));
 background: -webkit-linear-gradient(top, #9fbdd4, #b0d0d4);
 background: -moz-linear-gradient(top, #9fbdd4, #b0d0d4);
 background: -ms-linear-gradient(top, #9fbdd4, #b0d0d4);
 background: -o-linear-gradient(top, #9fbdd4, #b0d0d4);
 background-image: -ms-linear-gradient(top, #9fbdd4 0%, #b0d0d4 100%);
 color: #fff;
}

/***CLASE FORMULARIO***********************************/


   /****TABLAS DENTRO DEL FORMULARIO***
   
   .formulario table {
    margin-right: 20px;
   }
   .formulario td {
  border:none;
     border: hidden;
   }
   
   /****TABLAS DENTRO DEL FORMULARIO***/

   
   /****TABLA DE LISTADO*****/
   .icono_listado{
    height:16px;
    margin-bottom: -2px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .listado_animado tr {
    border: none;
    padding:5px;
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
  }

  .listado_animado tr:hover, .formulario tr:focus, .formulario tr:active {
    background-color:rgba(0,109,186,0.3);
    color:#fff;
    /*-webkit-transform: scale(1.01) translateX(-1px);
    -moz-transform: scale(1.01) translateX(-1px);
    -o-transform: scale(1.01) translateX(-1px);*/
  }


  /* FORMATO PARA LISTADO*/
  .listado td:first-child  {
    text-align:right;
  }
  .listado {  border-collapse: collapse; 
    text-align: left; 
    width: 100%; 
    margin: auto;} 
    
    .listado {  font: normal 12px/150% Arial, Helvetica, sans-serif; 
      background: #fff; 
      overflow: hidden; 
      overflow: visible; 
      border: 2px solid #3E739E; 
      -webkit-border-radius: 7px; 
      -moz-border-radius: 7px; 
      border-radius: 7px; }
      
      .listado td, .listado th { padding: 0px 1px; }

      .listado  th {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #559DD9), color-stop(1, #00557F) );
        background:-moz-linear-gradient( center top, #559DD9 5%, #00557F 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#559DD9', endColorstr='#00557F');
        background-color:#559DD9; 
        color:#FFFFFF; 
        font-size: 14px; 
        font-weight: bold; 
        border-left: 1px solid #0070A8; 
        -webkit-transition:All 0.5s ease;
        -moz-transition:All 0.5s ease;
        -o-transition:All 0.5s ease;
      } 

      .listado tr{
        -webkit-transition:All 0.5s ease;
        -moz-transition:All 0.5s ease;
        -o-transition:All 0.5s ease;
      }

      .listado  td { color: #00557F; border-left: 1px solid #E1EEF4;
        border-bottom: 1px solid #E1EEF4; 
        font-size: 12px;
        font-weight: normal; 
        -webkit-transition:All 0.5s ease;
        -moz-transition:All 0.5s ease;
        -o-transition:All 0.5s ease;
      }

      .listado  tr:hover { background-color:#87BAE4; }
      /*.listado  td:hover { background-color:#B8D8EF; }*/
/*
--------------------------------------------------------------------------------------------
*/


/**
 * CLASE PARA RADIO Y CHECKBOX
 * Forma de uso 
 * <div class="radio">
    <input id="agente" type="checkbox" name="agente" value="agente">
    <label for="agente">Etiqueta</label>
  </div>
  */
  .radio label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 12px;  
  }  
  .radio input[type=radio] {  
    display: none;  
  }
  .radio input[type=checkbox] {  
    display: none;  
  }

  .radio label:before {  
    content: "";  
    display: inline-block;  
    
    width: 16px;  
    height: 16px;  
    
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
  }  
  .radio label:before {  
    border-radius: 8px;  
  }
  .radio input[type=radio]:checked + label:before {  
    content: "\2022";  
    color: #f3f3f3;  
    font-size: 12px;  
    text-align: center;  
    line-height: 18px;  
  }  

  .radio input[type=checkbox]:checked + label:before {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 12px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
  }
  /*Para darle forma de Checkbox*/
  .checkbox label:before {  
    border-radius: 0px;  
  } 
  
/*
-------------------------------------------------------------------------------------------
*/


/**
 * CLASE PARA ETIQUETAS DE PAGINACIÓN
 */
}
.paginacion {
  width:100%;
  height: 20px;
  padding: 5px;
  background-color: #2980b9;
  color: #fff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #559DD9), color-stop(1, #00557F) );
  background:-moz-linear-gradient( center top, #559DD9 5%, #00557F 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#559DD9', endColorstr='#00557F');
}
.paginacion a{
  width: 20px;
  height: 20px;
  padding: 1px 5px;
  background-color:#eee;
  background-color:#3F86C8;
  background-color:#7EBEFA;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7EBEFA), color-stop(1, #3F86C8) );
  background:-moz-linear-gradient( center top, #7EBEFA 5%, #3F86C8 100% );
  
  border-radius: 5px;
  color: #fff;
}
/*
-----------------------------------------------------------------------------------------------
*/

/**
 * CLASE PARA PIE DE PAGINA DESARROLLOS CON CODEIGNITER
 */

 .pie{
  /*background-color: #2980b9;*/
  /*background:-moz-linear-gradient( center top, #559DD9 5%, #00557F 100% );*/
  /*background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #559DD9), color-stop(1, #00557F) );*/
  bottom: 0;
  color: #fff;
  /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#559DD9', endColorstr='#00557F');*/
  height: 15px;
  left: 0;
  margin: 0px;
  padding: 5px;
  position: fixed;
  width:100%;
}
.pie1{
  bottom: -10px;
  color: #fff;
  font-size: 10px;
  left: 5px;
  position: fixed;
}
.pie2{
  bottom: -10px;
  color: #fff;
  font-size: 10px;
  position: fixed;
  right: 5px;
}
/*
----------------------------------------------------------------------------------------------
*/



/**
 * CLASE PARA MENSAJES DE ERROR E INFORMATIVOS 
 * EN UNA BARRA SUPERIOR
 */
 .mal {
   display: block !important;
   transition: All 0.5s ease;
   background-color: #ff0000;
   border-radius: 5px;
   border-style: solid;
   border-color: #555555;
   color: #FFF;
   padding: 5px;
   margin: auto;
   position: fixed;
   text-align: center;
   top: 50px;
   left: calc(50% - 150px);
   width: 300px;
   z-index: 1;
 }

.bien {
  display: block !important;
  transition: All 0.5s ease;
  background-color: #8ae98e;
  border-radius: 5px;
  border-style: solid;
  border-color: #555555;
  color: #555555;
  padding: 5px;
  margin: auto;
  position: fixed;
  text-align: center;
  top: 50px;
  left: calc(50% - 150px);
  width: 300px;
  z-index: 1;
}
/*
----------------------------------------------------------------------------------------------------
*/

/**
 * CLASE PARA FORMATO DE TEXTO EN GENERAL
 */
 .texto{
  font-family: "trebuchet MS",sans-serif;
}
.ajustar_texto{
 letter-spacing: -0.5pt;
 word-spacing: -1.5pt;
 /*line-height: 0.5;*/
}
.mayuscula{text-transform:uppercase;}

/* webkit, opera, IE9 */
::selection { background:#87BAE4; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#87BAE4; color #fff; }

.articulo_parrafo p:first-letter {
  display:block;
  margin:5px 0 0 5px;
  float:left;
  color:#FF3366;
  font-size:60px;
  font-family:Georgia;
  text-align: justify;
}

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


/***TOOL TIPS PARA LISTADOR LATERALES**********/
.tooltip > span{ 
  width: 300px; 
  padding: 5px 5px 5px 5px;
  margin-top: 30px;
  margin-left: -100px; 
  opacity: 0; 
  visibility: hidden; 
  z-index: 1000; 
  position: absolute; 
  font-size: 12px; 
  font-style: normal; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; -o-border-radius: 3px; 
  border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; 
  -moz-box-shadow: 2px 2px 2px #999; 
  box-shadow: 2px 2px 2px #999; 
  -webkit-transition-property: opacity, margin-top, visibility, margin-left; 
  -webkit-transition-duration:0.5s; 
  -webkit-transition-delay:1s; 
  -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  -moz-transition-property: opacity, margin-top, visibility, margin-left; 
  -moz-transition-duration:0.5s; 
  -moz-transition-delay:1s; 
  -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  transition-property:opacity, margin-top, visibility, margin-left; 
  transition-duration:0.5s; 
  transition-delay:1s; 
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  color: #FFFFFF; 
  background: #245166; 
  background: -moz-linear-gradient(top, #245166 0%, #4B9CC2 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#245166), color-stop(100%,#4B9CC2)); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#245166', endColorstr='#4B9CC2',GradientType=0 ); 
  border: 1px solid #000000; 
} 


.tooltip:hover > span
{ 
  opacity: 1; 
  text-decoration:none; 
  visibility: visible; 
  overflow: visible; 
  margin-top: 30px; 
  display: inline; 
  margin-left: 0px; 
}

.tooltip span b{ 
  z-index: 1; 
  width: 10px; 
  height: 10px; 
  margin-left: 5px; 
  margin-top: -13px; 
  display: block; 
  position: absolute; 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  -webkit-box-shadow: inset -1px 1px 0 #fff; 
  -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; 
  box-shadow: inset 0 1px 0 #fff; 
  display: none\0/; *display: none; 
  background: #245166; 
  border-top: 1px solid #000000; 
  border-right: 1px solid #000000; }

  /***TOOL TIPS PARA LISTADOR LATERALES**********/




/**
 * EFECTOS Y ANIMACIONES
 */

 .zom{
  -webkit-transition:All 0.5s ease;
  -moz-transition:All 0.5s ease;
  -o-transition:All 0.5s ease;
}
.zom:hover {
  z-index: 10;
  transform: scale(1.1);
}
/*
------------------------------------------------
*/

.animacion_x { 
  -webkit-animation-duration: 3s; 
  animation-duration: 3s; 
  -webkit-backface-visibility: visible !important; 
  -webkit-animation-name: flipInX; 
  backface-visibility: visible !important; 
  animation-name: flipInX;

} 

@-webkit-keyframes flipInX { 
  0% { 
    -webkit-transform: perspective(400px) rotateX(90deg); 
    opacity: 0; 
  } 
  40% { 
    -webkit-transform: perspective(400px) rotateX(-10deg); 
  } 
  70% { 
    -webkit-transform: perspective(400px) rotateX(10deg); 
  } 
  100% { 
    -webkit-transform: perspective(400px) rotateX(0deg); 
    opacity: 1; 
  } 
} 
@keyframes flipInX { 
  0% { 
    transform: perspective(400px) rotateX(90deg); 
    opacity: 0; 
  } 
  40% { 
    transform: perspective(400px) rotateX(-10deg); 
  } 
  70% { 
    transform: perspective(400px) rotateX(10deg); 
  } 
  100% { 
    transform: perspective(400px) rotateX(0deg); 
    opacity: 1; 
  } 
} 

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

.animacion_y { 
  -webkit-animation-duration: 2s; 
  animation-duration: 2s; 
    /*-webkit-animation-fill-mode: both; 
    animation-fill-mode: both; */
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInY; 
    backface-visibility: visible !important; 
    animation-name: flipInY;
  } 

  @-webkit-keyframes flipInY { 
    0% { 
      -webkit-transform: perspective(400px) rotateY(90deg); 
      opacity: 0; 
    } 
    40% { 
      -webkit-transform: perspective(400px) rotateY(-10deg); 
    } 
    70% { 
      -webkit-transform: perspective(400px) rotateY(10deg); 
    } 
    100% { 
      -webkit-transform: perspective(400px) rotateY(0deg); 
      opacity: 1; 
    } 
  } 
  @keyframes flipInY { 
    0% { 
      transform: perspective(400px) rotateY(90deg); 
      opacity: 0; 
    } 
    40% { 
      transform: perspective(400px) rotateY(-10deg); 
    } 
    70% { 
      transform: perspective(400px) rotateY(10deg); 
    } 
    100% { 
      transform: perspective(400px) rotateY(0deg); 
      opacity: 1; 
    } 
  } 


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


.animacion_zom { 
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
    /*-webkit-animation-fill-mode: both; 
    animation-fill-mode: both; */
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
  } 

  @-webkit-keyframes bounceIn { 
    0% { 
      opacity: 0; 
      -webkit-transform: scale(.3); 
    } 

    50% { 
      opacity: 1; 
      -webkit-transform: scale(1.05); 
    } 

    70% { 
      -webkit-transform: scale(.9); 
    } 

    100% { 
     -webkit-transform: scale(1); 
   } 
 } 

 @keyframes bounceIn { 
  0% { 
    opacity: 0; 
    transform: scale(.3); 
  } 

  50% { 
    opacity: 1; 
    transform: scale(1.05); 
  } 

  70% { 
    transform: scale(.9); 
  } 

  100% { 
    transform: scale(1); 
  } 
} 

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

.animacion_up { 
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
    /*-webkit-animation-fill-mode: both; 
    animation-fill-mode: both; */
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-name: bounceInUp; 
    animation-name: bounceInUp; 
  } 

  @-webkit-keyframes bounceInUp { 
    0% { 
      opacity: 0; 
      -webkit-transform: translateY(2000px); 
    } 
    60% { 
      opacity: 1; 
      -webkit-transform: translateY(-10px); 
    } 
    80% { 
      -webkit-transform: translateY(10px); 
    } 
    100% { 
      -webkit-transform: translateY(0); 
    } 
  } 

  @keyframes bounceInUp { 
    0% { 
      opacity: 0; 
      transform: translateY(2000px); 
    } 
    60% { 
      opacity: 1; 
      transform: translateY(-10px); 
    } 
    80% { 
      transform: translateY(10px); 
    } 
    100% { 
      transform: translateY(0); 
    } 
  } 

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

.animacion_up_fade { 
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
    /*-webkit-animation-fill-mode: both; 
    animation-fill-mode: both; */
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
  } 

  @-webkit-keyframes fadeInUp { 
    0% { 
      opacity: 0; 
      -webkit-transform: translateY(20px); 
    } 
    100% { 
      opacity: 1; 
      -webkit-transform: translateY(0); 
    } 
  } 

  @keyframes fadeInUp { 
    0% { 
      opacity: 0; 
      transform: translateY(20px); 
    } 
    100% { 
      opacity: 1; 
      transform: translateY(0); 
    } 
  } 

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

.animacion_down_fade { 
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
    /*-webkit-animation-fill-mode: both; 
    animation-fill-mode: both; */
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
  } 

  @-webkit-keyframes fadeInDown { 
    0% { 
      opacity: 0; 
      -webkit-transform: translateY(-20px); 
    } 
    100% { 
      opacity: 1; 
      -webkit-transform: translateY(0); 
    } 
  } 

  @keyframes fadeInDown { 
    0% { 
      opacity: 0; 
      transform: translateY(-20px); 
    } 
    100% { 
      opacity: 1; 
      transform: translateY(0); 
    } 
  } 
/*
------------------------------------------------
*/