/* DISEÑO DE MENÚ */
body {
  margin: 0;
  font-family:sans-serif;
 
  }

 
.header {background-color:#595959;
         border-bottom: solid #BF5A50 5px;
         z-index: 100;
         overflow: hidden;
         padding-top:15px;
         padding-bottom: 15px;
         display: block;
         
          }
/* 1. SE CREAN BLOQUES Y ESTILOS */

 .topnav a {
  
  padding: 20px;
  overflow: hidden;
  color: white;
  
 
  } 


/*
 .topnav {
    background-color:#595959;
    border-bottom: solid #BF5A50 5px;
   
 }*/

.topnav .icon {
  display: none}  


/* 2. SE ASIGNAN ELEMENTOS HOVER */
/* La opción de ":not(first-child)" oculta el primer elemento; */

.topnav a:hover:not(:first-child) {
  background-color: #B6B5B8;
  border-radius: 15px;
  color: black;}



.texto {

     padding: 5px;
     text-align: left;
     background-color: rgba(33,34,38,.2);
}


#logo {padding-top: 7px;
       padding-bottom: 1px;}



#hacemos {font-size: 3em
          font-weight: bold;
          border-top: solid;
          border-width: 5px;
          border-color: #BF5A50;
          padding-top:5px} 

#residencial {color: #FACC2E;
               padding-bottom: 10px;}

#texto {text-indent: center;
        padding-left: 230px;
        padding-right: 160px;
        margin-left: : 150px;
        margin-top: 0px;
        margin-right: 50px;
        font-family: sans-serif;
        }

   #clientes {color: white;
           margin: 0;
           padding-top: 90px;
           background-image: url("../img/cliente.jpg");
           background-attachment: fixed;
           background-repeat: no-repeat;  
           background-size: 100%;
           background-position: center center;   
           font-family: sans-serif;
           color: white;   
           
           padding-bottom: 100px;
               }

    #cuadro { background-color: rgba(0,0,0,.5);
            margin-right: 100px;
            margin-left: 100px;
            border-color: white;
            border-width: 1px;
            border-style: solid;
            
           
           padding-top: 50px;
           padding-bottom: 50px;
           text-align: center;

           }

   #food {color: white;
         background-color:black;
         font-family: sans-serif;
         padding-top: 50px;
         padding-bottom: 50px;
         
          }
   #ultimo {color: yellow}

   .contenedor {display: flex;
    flex-direction: row;
    width: 100%;}

.cajas {border: 1px #e7e7e7 solid;
  width: 100%}

/*.galeria {filter: contrast(.7);}*/

.galeria:hover {filter: blur(5px); 
   transition: .5s}


/* /// FOOTER) /// */

.cajasfooter {padding: 20px;
  width: 33%}

#ContactUs {
  padding: 70px 0;
}
#ContactUs .contact-title {
  font: 400 26px/115% 'Open Sans', sans-serif;
  color: #333;
  text-align: center;
  margin: 0 0 30px;
}
#ContactUs .contact-outer-wrapper {
  width: 100%;
  height: auto;
  display: table;
  margin: 0 auto;
}
#ContactUs .address-block {
  width: 40%;
  height: 100%;
  display: table-cell;
  color: #333;
  position: relative;
  padding: 40px;
}
#ContactUs .address-block::after {
  position: absolute;
  content: "";
  left: -1%;
  width: 1px;
  height: 80%;
  background: #ccc;
  top: 10%;
}
#ContactUs .add-title {
  font: 400 18px/115% 'Open Sans', sans-serif;
  font-weight: bold;
  margin: 0 0 50px;
  color: #333;
}
#ContactUs .c-detail {
  margin-bottom: 20px;
}
#ContactUs .c-detail:last-child {
  margin-bottom: 0;
}
#ContactUs .c-detail .c-icon {
  width: 12%;
  display: inline-block;
  font-size: 30px;
  vertical-align: top;
}
#ContactUs .c-detail .c-info {
  width: 86%;
  display: inline-block;
  vertical-align: top;
  color: #333;
}
#ContactUs .c-detail .c-info h4 {
  font-size: 20px;
}
#ContactUs .c-detail span .fa {
  vertical-align: top;
}
#ContactUs .c-detail a {
  color: #333;
}
#ContactUs .c-detail a:hover {
  color: #19af83;
}
#ContactUs .form-wrap {
  width: 60%;
  display: table-cell;
  padding: 40px;
}
#ContactUs .form-wrap p {
  font: 400 16px/145% 'Open Sans', sans-serif;
  color: #333;
  margin: 0 0 45px;
}
#ContactUs .form-wrap .floating-label {
  position: relative;
  width: 47%;
  display: inline-block;
  margin-bottom: 30px;
}
#ContactUs .form-wrap .fname, #ContactUs .form-wrap .contact {
  margin-right: 20px;
}
#ContactUs .form-wrap .user-msg {
  width: 98%;
  display: block;
  margin-bottom: 40px;
}
#ContactUs .floating-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #999999;
  box-shadow: none;
  background-color: transparent;
  padding-top: 3px;
}
#ContactUs .floating-input:focus {
  outline: 0;
  border-bottom: 1px solid #19af83;
}
#ContactUs .form-wrap label {
  position: absolute;
  top: 0;
  left: 0;
  font: 400 14px/115% 'Open Sans', sans-serif;
  text-align: left;
  color: #999999;
  transition: top 0.2s ease-in-out;
  z-index: -1;
}
#ContactUs .floating-input:focus ~ label, #ContactUs .floating-input.not-empty ~ label {
  top: -18px;
  font: 400 12px/115% 'Open Sans', sans-serif;
  color:#19af83;
  transition: top 0.2s ease-in-out;
}
#ContactUs .submit-btn {
  text-align: center;
}
#ContactUs .submit-btn button {
  font: 400 16px/115% 'Open Sans', sans-serif;
  border: 0;
  border-radius: 0;
  background-color: #19af83;
  color: #fff;
  padding: 10px 30px;
  cursor: pointer;
  outline: 0;
  border-radius: 28px;
  color: #fff;
  border: 1px solid #19af83;
  transition: all 0.25s ease 0s;
}
#ContactUs .submit-btn button:hover {
  background-color: #fff;
  color: #19af83;
  transition: all 0.25s ease 0s;
}
/*ContactUs style end*/

/* 3. SE ASIGNAN ELEMENTOS MEDIA QUERY*/

@media (max-width: 768px) {
  
/* Ocultar enlaces (Menos el logotipo) */
.topnav a:not(:first-child) {display: none}

/* Flotar icono a la derecha */
.topnav a.icon {
    float: right;
    display: block;}

/* Se elimina flotación para que se muestren en cascada */
.topnav.responsive a {
  float: none;
  display: block;
  text-align: left;}

/* Se conserva el ícono a la derecha */
.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;}
}

#texto {text-indent: center;
        padding-left: 50px;
        padding-right: 30px;
        margin-left: : 50px;
        margin-top: 0px;
        margin-right: 50px;
        font-family: sans-serif;
        }

  #clientes {color: white;
           margin: 0;
           padding-top: 90px;
           background-image: url("../img/cliente.jpg");
           background-attachment: fixed;
           background-repeat: no-repeat;  
           background-size: 100%;
           background-position: center center;   
           font-family: sans-serif;
           color: white;   
           
           padding-bottom: 100px;
               }

    #cuadro { background-color: rgba(0,0,0,.5);
            margin-right: 50px;
            margin-left: 50px;
            border-color: white;
            border-width: 1px;
            border-style: solid;
           padding-top: 30px;
           padding-bottom: 30px;
           text-align: center;

           }