html,body{ margin:0; padding:0px;    max-width: 100%;overflow-x: hidden;  }
div{  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
article{  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
section{  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
.body{ background-image: url("../images/bgbodytest.png"); color: white; font-family: arial; text-align: center;  }
header{width:100%; float: left;}

nav{ float: left;width:100%;background-color: #333333; }
.Menu ul { list-style-type: none;margin: 0;padding: 0;overflow: hidden;}
.row{ float:left;margin:auto;width:100%; margin-top: 15px; margin-bottom: 15px; }
.full{ float:left;width:100%; margin:auto; }

@media only screen and (max-width: 500px) {
.container{  float:left;width:800px;margin:auto;align-content: center;text-align: center;} 
.col75{ float:left;width:100%;  }
.col25{ float:left;width:100%;  }
.block20{ float:left;width:50%; height: 200px; }
.block25{ float:left;width:55%;  }
.block33{width:100%; padding:0px ;float:left; text-align:center; }
.block50{ float:left;width:100%;  }
.block50{ float:left;width:100%;  }
.titulo{font-size: 35px;  }
.servicios{width:100%;height: auto; padding: 10px; float: left; margin:auto; text-align: center; vertical-align:center; background: #040aff; }
.logo{ float: left;width:100%; padding-top: 15px; padding-bottom: 20px;}
.Menu{float: left;width: 50%; padding-left: 100px ; }	
.Menu li {float: left; width:100%; margin: 15px 0 15px 0;  }
.Menu  li a {width:350px;display:inline;color: white;text-align: center;padding: 16px;text-decoration: none;}
.Menu li a:hover {background-color: #111111; width: 100%;}
.description{ padding: 10px; background: #5299fa; margin-bottom: 10px;  }
.description p{ text-align: justify; text-align-last: left; margin-bottom: 30px;padding: 0 10px 0 10px ;  }
}

@media only screen and (min-width: 800px) {
.logo{ float: left;width:100%; padding-top: 15px; display: block-inline; }
.Menu{float: left;width: 100%; padding-left: 100px ; }	
.container{  float:left;width:800px;margin:auto;align-content: center;text-align: center;} 
.col75{ float:left;width:75%;  }
.col25{ float:left;width:25%;  }
.block20{ float:left;width:50%;  }
.block25{ float:left;width:25%;  }
.block50{ float:left;width:50%;  }
.block50{ float:left;width:50%;  }
.titulo{font-size: 35px;  }
.servicios{height: 200px; padding: 10px; float: left; margin:auto; text-align: center; vertical-align:center; background: #040aff; }
.Menu  li a {display: block;color: white;text-align: center;padding: 16px;text-decoration: none;width:300px;float: left;}
.Menu li a:hover {background-color: #111111;}
.span20{ width: 100%; text-align: center; float: left; }
}


@media only screen and (min-width: 1100px) {
    .block33{width:33%; padding:0px ;float:left; text-align:center; }
.logo{ float: left;width:150px; padding-top: 15px; }
.Menu{float: right; width:800px;  }	
.container{  float:left;width:800px;margin:auto;align-content: center;text-align: center;} 
.col75{ float:left;width:75%;  }
.col25{ float:left;width:25%;  }
.block20{ float:left;width:20%;  }
.block25{ float:left;width:25%;  }
.block50{ float:left;width:50%;  }
.block50{ float:left;width:50%;  }
.titulo{font-size: 35px;  }
.servicios{height: 200px; padding: 10px; float: left; margin:auto; text-align: center; vertical-align:center; background: #040aff; }
.Menu li {float: left;  margin: 15px 0 15px 0;}
.Menu  li a {display: block;color: white;text-align: center;padding: 16px;text-decoration: none;width:75px;}
.Menu li a:hover {background-color: #111111; }
.description{ padding: 30px; background: #5299fa; margin-bottom: 10px;  }
.description p{ text-align: justify; text-align-last: left; margin-bottom: 30px;padding: 0 20% 0 20% ;  }
.block20 span{ padding: 50px; text-align: center; }
.span20{ padding: 20px; text-align: center; float: left; }


}

#Empresa{background-color: #0606c3;}

.imgBrand{width: 100%;height: auto;}
a{ text-decoration: none; color:white;  }
a:hover{  background: black; }

.verMás{  float:left;width:30%; padding:15px;  margin: auto;  background:#006bff;padding:15px;  border-radius: 7px; margin-left: 35%; margin-bottom: 50px;}
#Producto{}
.Servicio1{ background: url("../images/consultoriaTecnologica.png"); background-size: cover; background-position: center;  }
.Servicio2{ background: url("../images/SoporteTecnico.jpg"); background-size: cover; background-position: center;}
.Servicio3{ background: url("../images/CursosRegistradosSTPS.jpeg"); background-size: cover; background-position: center;}
.Servicio4{ background: url("../images/CursoEmpresas.jpg"); background-size: cover; background-position: center;}
.servicios{height: 200px; width: 200px; padding: 20px; float: left; margin:auto; text-align: center; vertical-align:center; background: #5299fa;  }
#Servicios{}

.Contacto{}
#Contacto{ background:black;}
.formulario{}
label{width: 100%; text-align: left;;}
input { width: 100%; padding-top: 8px; padding-bottom: 8px; padding-left: 5px;  }
textarea { width: 100%; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; }
.Enviar{
	margin-top: 15px;
	margin-bottom: 15px;
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    width: 50%;
}
.Clabel{ text-align: left; padding-top: 18px; }
h2{  padding-top: 8px; padding-bottom: 8px; }