/* INICIO IMPORTANTE modo PC*/
@import url(css/pdanormalize.css);
@font-face {
  font-family: "Lobster";
  src: url(../font/Lobster 1.4.otf);}

* {box-sizing: border-box;}
img {border: none; max-width: 100%;}        
html {overflow-y: scroll;}

h1 {
  font-family: "Lobster";
  src: url(../font/Lobster 1.4.otf);
  letter-spacing: 0.05em;}

h4 {
  font-family: "Lobster";
  src: url(../font/Lobster 1.4.otf);
  font-size: 1.5em;}

h5 {
  font-family: "verdana";
  font-size: 0.8em;
  font-variant: small-caps;}

p {
  font-family: "verdana";
  font-size: 1em;
  line-height: 1.25em;}

body {
  margin: 0; 
  padding: 0; 
  font-family: Arial, Helvetica, sans-serif;
  margin: auto;}

header {background-color: black;}
aside {background-color: #666;}
footer {background-color: black;}

#logo {
  padding-top: 25px;
  margin-left: 10%;
  width: 200px;}

/* Estilos comunes */
.ancho_maximo {
  max-width: 75em;
  margin: auto;
  padding: 1.5em;}

.encabezado {
  background-image: url(../fondo/SoyGr-1.png); 
  background-repeat: no-repeat; 
  background-position: bottom;
  background-size: 940px;
  height: 780px;}

/* Main */
.banner {background-color: #165b7c;}
.banner h1 {
  color: #eee;} 

.hola {
  background-image: url(../fondo/HolaPGr-1.png); 
  background-repeat: no-repeat; 
  background-position: bottom;
  background-size: 1100px;
  height: 400px;}

.hola p {
  padding-right: 33%;
  color: #e0e0e0;}

/* Article*/
.description {
  background-color: #ccc;}
.description img {
  width: 25%;
  padding-left: 10px;
  padding-bottom: 25px;}
  
.ofrezco h1 {
  background-image: url(../fondo/ServGr-1.png); 
  background-repeat: no-repeat; 
  background-position: top;
  background-size: 1100px;
  height: 100px;
  color: #0d5b89;
  font-size: 2em;}

.hago {
  display: flex;
  flex-direction: row;}
.hagocaja {
  width: 32%;
  margin-right: 25px;}  
.hagoico {
  position: relative;
  margin-left: 38%;
  margin-top: 15px;
  margin-bottom:90px;
  width: 270px;}
.hagoico img {
  position: absolute;
  left: 0;
  transition: opacity 0.3s ease-in-out;}
.hagoico img.arriba:hover {
  opacity: 0;}
.hago h4 {
  color: black;
  margin-top: -4px;
  text-align: center;}
.hago h5 {
  color: #0d5b89;
  text-align: center;}
.hago p {
  color: #555;
  font-size: 0.8em;}
.hagot img{
  width: 100%;
  margin-left: -10px;}



/* Aside */
figure img {
  padding-left: 30%;
  padding-right: 30%;}
.contame {
  display: flex; 
  flex-direction: row;}
.contame h4{
  text-align: center;}
.contame p{
  margin-left: 25%;
  width: 65%;}
.contame img {
  margin-top: 20px;}
.textB {
  width: 100%;}




 /* Footer */ 
.pieajuste {
  display: flex; 
  flex-direction:row;
  width: 90%;}
  
.pdapieM img{
  width: 350px;
  margin-left: 8%;}
.pdapieM p{
  color: #958e97;
  margin-right: -55px;
  font-size: 0.9en;
  line-height: 1.7em;}
  
.pdapieI {
  width: 90%;
  margin-top: 55px;
  margin-left: 5%;}

.pdapie {
  padding-left: 40%;
  padding-right: 10%;
  margin-right: -10px;}
.pdapie h1 {
  color: #eee;
  letter-spacing: 0.05em;
  font-family: 'Lobster', cursive;}
.pdapie img {
   width: 25px;
   margin-bottom: -4px;
   padding-right: 5px;}
.pdapie p {
  font-size: 0.7em;
  color: #ccc;
  margin-right: -100px;}








/* Estilos móvil/celular */
  @media all and (max-width: 700px) {
    .ancho_maximo {
      padding: 2em;}

    #logo {
      margin-top: -30px;
      margin-left: 0%;
      width: 100%;
      max-width: 330px;}

    .encabezado {
      background-image: url(../fondo/SoyCh-1.png); 
      background-repeat: no-repeat; 
      background-position: bottom;
      background-size: 340px;
      height: 750px;
      text-align: center;}
    
    .hola {
      padding-top: 65px;
      background-image: url(../fondo/HolaPCh-1.png); 
      background-repeat: no-repeat; 
      background-position: bottom;
      background-size: 460px;
      height: 800px;
      text-align: center;}
      
    .hola p {
      font-size: 1.3em;
      line-height: 1.45em;
      padding-right: 0%;}

    .description img {
      width: 100%;
      padding-left: 0%;}

    .hago {
      flex-direction: column;}
    .hagocaja {
      width: 100%;
      padding-left: 5px;} 
    .hagocaja h4{
      font-size: 2.4em;} 
    .hagocaja h5{
      font-size: 1.2em;}
    .hagocaja p{
      font-size: 1.1em;}

    .hagoico {
      margin-top: 20px;
      margin-bottom:120px;
      width: 70px;}
    .hagot img{
      width: 100%;
      margin-left: 0px;}


    .ofrezco h1 {
      background-image: url(../fondo/ServCh-1.png); 
      background-repeat: no-repeat; 
      background-position: top;
      background-size: 500px;
      height: 100px;
      text-align: center;}

    aside img {
      padding-left: 1%;
      padding-right: 1%;}
    .textB {
      width: 90%;}
  
  
    .clientes {
      margin-top: 25px;
      margin-left: -40px;
      margin-right: -40px}



    .contame {
      flex-direction: column;}
    .contame h4{
      font-size: 2em;}
    .contame p{
      margin-left: 10%;
      width: 90%;}

    .pieajuste {
      flex-direction: column;
      width: 90%;}

    .pdapie {
      padding-left: 8%;
      padding-right: 5%;}
    .pdapie h1 {
      font-size: 1.5em;}
    .pdapie p {
      font-size: 0.8em;}

    .pdapieM img{
      width: 300px;}
    .pdapieM p{
      margin-left: 10px;
      margin-right: -30px;}
    
    .pdapieI {
      margin-left: 80px;}

  
  /* Estilos Escritorio */
  @media all and (min-width: 701px) {}