*{
padding:0;
text-align:center;	
}
body{
background-color:#F9F9F9;
min-width:320px;

}


header{
height:60px;
width:100%;
display:inline-block;
vertical-align:top;
margin-top:0;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
margin-bottom:10px;
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top,  #ededed 2%, #F9F9F9 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#ededed), color-stop(99%,#F9F9F9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ededed 2%,#F9F9F9 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ededed 2%,#F9F9F9 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ededed 2%,#F9F9F9 99%); /* IE10+ */
background: linear-gradient(to bottom,  #ededed 2%,#F9F9F9 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

#img_logo_ctd{
 width:100%;
 height:42px;	
 margin:0 auto;
 position:absolute;
 bottom:0px;
}

hr{
 margin-top:14px;
 height:2px;
 border:none;
 background: -moz-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(224,224,224,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(224,224,224,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.banner_ctd{
height:40px;
border: 1px solid #666;	
}

/* STYLES INICIALES */

#allbody
{
  width:100%;
}


#input_div_contect p label
{
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:600; 
	 color:#333;
	 padding:50px;
}


#cont_from p input
{
   padding:12px;
   padding-left:20px;
   margin-top:20px;	
   text-align:left;
/*   -webkit-border-radius: 5px;
   -moz-border-radius::5px;
   -webkit-box-shadow:inset -5px -5px 20px #BCFBFE;*/
   outline:none;
   border:1px #CCCCCC solid;
   border-collapse:collapse;
   width:88%; 
   margin:0 auto;
   min-width:170px;
}

#cont_from p input:focus
{
 border-color:#03AAE9;
 -webkit-box-shadow:inset -3px -3px 5px #F3F3F3;
 -box-shadow:inset -3px -3px 5px #F3F3F3;
 -ms-box-shadow:inset -3px -3px 5px #F3F3F3;
 -moz--box-shadow:inset -3px -3px 5px #F3F3F3;	
}


#p_boton{
  width:100%;
  height:40px;
  margin-top:20px;
}
 
#cont_from input[type='button']{
   padding:12px;	
   text-align:center;
   -webkit-border-radius: 5px;
   -moz-border-radius::5px;
   outline:none;
   color:#FFF;
   font-weight:800;
   background-color:#999999;
   border:none;
   text-shadow: 1px 1px 1px #333;
   cursor:pointer;
}
 
#cont_from input[type='button']:hover{-webkit-box-shadow:0px 0px 10px #fff;box-shadow:0px 0px 10px #fff;	 }

.items_contect{
   display:inline-block;
   maring:0 auto;
   margin-bottom:10px;
   width:23%;
   text-wrap:normal; 
   margin-top:10px;
   margin-left:8px;
   margin-right:8px;
   vertical-align:top;
 }
 
 .img_items{
  display:block;
  width:100%;
  height:50px;
  background-position: center;	
  margin:0 auto; 
 }
 
 section{
  width:100%;
  margin-top:20px;
  margin-top:0 auto;  
 }
 
 
 .titulo_list_icons_login{
    width:98%;
	height:43px;
	display:inline-block; 
	text-align:center;
	font-weight:500;
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:1em;
	padding:1px;
 }
 
 .parrafo_items_icons_lg{
  width:75%;
  color:#999;
  display:none;
  float:right;
  text-align:left;
  margin:2px;
  /*margin-left:50px;*/
  margin-top:4px;
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  text-align:justify;

 }


/* ICONOS DE LOS ITEMS */

#ventas{
 background-image:url("../icons/login/venta.png");
 background-position:center;
 background-repeat:no-repeat;
 background-size:45px 45px;
}
#inventarios{
 background-image:url("../icons/login/inventarios.png");
 background-position:center;
 background-repeat:no-repeat;
 background-size:45px 45px;
}

#cartera{
 background-image:url("../icons/login/cartera.png");
 background-position:center;
 background-repeat:no-repeat;
 background-size:45px 45px;
}

#reportes{
 background-image:url("../icons/login/reportes.png");
 background-position:center; 
 background-repeat:no-repeat;
 background-size:45px 45px;
}

#usuarios{
 background-image:url("../icons/login/usuarios.png");
 background-position:center; 
 background-repeat:no-repeat;
 background-size:45px 45px;
}

#control_p{
 background-image:url("../icons/login/control_p.png");
 background-position:center;
 background-repeat:no-repeat;
 background-size:45px 45px;
 vertical-align:top;
 }
 
#seguro{
 background-image:url("../icons/login/seguro.png");
 background-position:center; 
 background-repeat:no-repeat;
 background-size:45px 45px;
 }
 
/* .more_info{
	display:none; 
 }*/
 
.more_info img{
  height:16px;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.more_info{
   display:none;
   height:22px;
   width:98%;
   border-collapse:collapse;
   border:1px solid #FFF;
   margin:0 auto;
   cursor:pointer;
} 

 #usuario{background:url(../icons/user_icon.png) no-repeat left ; 	 }
 
 #clave{background:url(../icons/key.png) no-repeat left;  }
 
 #cont_from
 {
	 padding:15px;
	 -webkit-box-shadow: 5px 5px 20px #666;
	 -moz-box-shadow:5px 5px 20px #666;
	 -ms-box-shadow:5px 5px 20px #666;
	 box-shadow:5px 5px 20px #666;
	 background-color:#FCFCFC;
	 width:75%; 
	 display:block;
     position:relative;
	 margin:0 auto;
	 max-width:300px;
  }

 #logo_smi{ display:block; }
 #title_login{ display:block; } 
  
 #logo_smi{
  background:url("../images/smi.png");
  background-size: 80px 50px;
  background-repeat:no-repeat;
  height:50px;
  width:70px;
  margin:0 auto;
  display:block;
  position:relative;
  z-index:1;
 } 
  
 #logo_smi_h{
  background:url("../icons/login/ctd.png");
  background-size: 120px 50px;
  background-repeat:no-repeat;
  background-position:center top;
  height:50px;
  padding-top:5px;
  width:100%;
  margin:0 auto;
  display:block;
  position:relative;
  z-index:1;
  color:#333;
  clear:both;
  opacity: 0.6;
  filter: alpha(opacity=60); 
 }
 
 #title_login{
	text-align:center;
	font-weight:500;
	margin-bottom:4px;
	font-size:1em;
	padding-bottom:2px;
	text-shadow: 1px 0px 10px #fff;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	color:#333;
	position:relative;
 }
.piepagina{
	width:100%;
	height:60px;
	background-color:#9AF071;
	display:block;
	margin-top:5px;	
}


@media (min-width: 480px)
{
	
 .items_contect{
   display:inline-block;
   float:0 auto;
   margin-bottom:10px;
   width:27%;
   height:auto;
   text-wrap:normal; 
   margin-top:10px;
   margin-left:5px;
   margin-right:5px;
   vertical-align:top;
   
 }
 
 .titulo_list_icons_login{

	font-size:1em;
	margin:0 auto;
	text-align:center;
	margin-top:10px;
	padding:1px;
	text-wrap:normal;
	height:30px;
	width:100%;
 }
 
  .img_items{
	  display:block;
	  width:100%;
	  height:50px;
	  background-position: center;	
	  margin:0 auto; 
 }

 
 #cont_from
 {
   margin-top:25px; 
 }

 #cont_from p input
 {
   padding:12px;
   padding-left:20px;
   margin-top:20px;	
   text-align:left;
/* -webkit-border-radius: 5px;
   -moz-border-radius::5px;
   -webkit-box-shadow:inset -5px -5px 20px #BCFBFE;*/
   outline:none; 
   border-collapse:collapse;
   margin:0 auto;
   width:270px;
   display:block;
 }
 
 #input_div_contect p label
 {
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:600; 
	 color:#333;
	 padding:50px;
	 width:100px;
 }
 
 .parrafo_items_icons_lg{
   display:block;
   width:100%;
 }
 section  div:last-child{
  	width:50%; 
 }
 section div.items_contect:last-child div.parrafo_items_icons_lg{
  margin-left:10px;
  }

 section div.items_contect:last-child div.img_items{
 float:left;
 width:45px;
 background-position:left;
 }
 
  section div.items_contect:last-child div.titulo_list_icons_login{
	 width:75%;
	 text-align:left; 
	 display:inline-block;
  }
 
 .items_contect:hover{
   -webkit-border-radius: 5px;
   -moz-border-radius::5px;
   -webkit-box-shadow: 2px 2px 4px #CCCCCC;
   background-color:#FFF;
 }
 
}




@media (min-width: 680px){
 
 #logo_smi{ display:block;width:120px; }
 #title_login{ display:block; } 
 #title_login_h{ display:; } 
 #divisor{
   display:none; 
 }
 
 header{
	height:50px; 
 }

 
 #cont_from
 {
	 border:1px solid #CCC;
	 padding:15px;
	 -webkit-box-shadow: 5px 5px 20px #666;
	 -moz-box-shadow:5px 5px 20px #666;
	 -ms-box-shadow:5px 5px 20px #666;
	 box-shadow:5px 5px 20px #666;
	 background-color:#FCFCFC;
	 width:35%; 
	 display:block;
     position:relative;
     float:right;
	 margin-left:7px;
	 margin-top:20px;

  }
 
 
 .more_info{
   display:none; 
 }
  
 
 section{
	width:57%;
    display:inline-block;
	vertical-align:top;
	float:left;
	border-right:1px solid #CCC;
 }
 
 .items_contect{
	display:inline-block;
	margin-left:10px;
	margin-top:10px;
	width:45%;
	float:left;
	height:auto;
 }
 
 #cont_from p input
 {
	 display:block;
	 padding-left:20px;
	 width:88%;
 }
 
 .img_items{
	 width:33%;
	 height:45px;
	 display:inline-block;
	 vertical-align:top;
	 background-position:left;
	 margin-right:2px;
	 margin-bottom:2px;
	 float:left;
  }
  
 .titulo_list_icons_login{
    width:65%;
	display:inline-block;
	vertical-align:top; 
	text-align:left;
	font-weight:500;
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:1em;
	padding-left:0px;
	margin:0;
 }
 
 
 .parrafo_items_icons_lg{
  padding:2px;
  display:inline-block;
  width:97%;
  margin-top:0px; 
  float:left;
 }
 
 section  div:last-child{
  	width:60%; 
 }
 section div.items_contect:last-child div.parrafo_items_icons_lg{
  margin-left:10px;
  }

 section div.items_contect:last-child div.img_items{
 float:left;
 width:45px;
 background-position:left;
 }
 
 section div.items_contect:last-child div.titulo_list_icons_login{
	 width:78%;
	 text-align:left; 
	 display:inline-block;
  }
}

@media (min-width:768px) {

 .items_contect{
	 width:40%; 
	 margin-right:10px;
 }
 .parrafo_items_icons_lg{
	margin-left:10px;
	width:95%;
 }
}

@media (min-width: 880px) {

 #allbody{
	width:900px;
	margin:0 auto; 
 }
  
  #cont_from {
	margin-right:5px;
  }
  section{
	margin-right:5px;  
  }
}

@media (min-width:1200px) {
 
  .items_contect{
	   width:40%;
	   float:left;
  }
   .titulo_list_icons_login{
	width:59%;
	margin:0;   
   }
   
}


.block{
   display: block;
   position: absolute;
   z-index: 100;
   width: 100%;
   height: 100%;
   background-color:#000 ; 
   top:0;  
   left:0;  
   overflow:none;
   padding:0px;
   margin:0px;
 }

 .espere{

	font-family:"Arial Black", Gadget, sans-serif;
	font-size:12px;
	color:#85C109;
	width: 170px;
	height: 50px;
	margin: 0 auto;
	z-index: 100;
	margin-top:15%;
	position: relative;
 }
/*CSS DE LA ANIMACION*/


#fadingBarsG{
position:relative;
width:240px;
height:29px}

.fadingBarsG{
position:absolute;
top:0;
background-color:#58CC3B;
width:29px;
height:29px;
-moz-animation-name:bounce_fadingBarsG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_fadingBarsG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_fadingBarsG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_fadingBarsG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_fadingBarsG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}

#fadingBarsG_1{
left:0;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}

#fadingBarsG_2{
left:30px;
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-o-animation-delay:0.45s;
animation-delay:0.45s;
}

#fadingBarsG_3{
left:60px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}

#fadingBarsG_4{
left:90px;
-moz-animation-delay:0.63s;
-webkit-animation-delay:0.63s;
-ms-animation-delay:0.63s;
-o-animation-delay:0.63s;
animation-delay:0.63s;
}

#fadingBarsG_5{
left:120px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

#fadingBarsG_6{
left:150px;
-moz-animation-delay:0.81s;
-webkit-animation-delay:0.81s;
-ms-animation-delay:0.81s;
-o-animation-delay:0.81s;
animation-delay:0.81s;
}

#fadingBarsG_7{
left:180px;
-moz-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-o-animation-delay:0.9s;
animation-delay:0.9s;
}

#fadingBarsG_8{
left:210px;
-moz-animation-delay:0.99s;
-webkit-animation-delay:0.99s;
-ms-animation-delay:0.99s;
-o-animation-delay:0.99s;
animation-delay:0.99s;
}

@-moz-keyframes bounce_fadingBarsG{
0%{
-moz-transform:scale(1);
background-color:#58CC3B;
}

100%{
-moz-transform:scale(.3);
background-color:#E9F028;
}

}

@-webkit-keyframes bounce_fadingBarsG{
0%{
-webkit-transform:scale(1);
background-color:#58CC3B;
}

100%{
-webkit-transform:scale(.3);
background-color:#E9F028;
}

}

@-ms-keyframes bounce_fadingBarsG{
0%{
-ms-transform:scale(1);
background-color:#58CC3B;
}

100%{
-ms-transform:scale(.3);
background-color:#E9F028;
}

}

@-o-keyframes bounce_fadingBarsG{
0%{
-o-transform:scale(1);
background-color:#58CC3B;
}

100%{
-o-transform:scale(.3);
background-color:#E9F028;
}

}

@keyframes bounce_fadingBarsG{
0%{
transform:scale(1);
background-color:#58CC3B;
}

100%{
transform:scale(.3);
background-color:#E9F028;
}
}