/* Sección contenedora de la páginas */

	  section#contenedor {
        background-color: transparent;
        width: 1100px;
        max-width: 1100px;
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-style: preserve-3d;
      }

/* Parte 1 */

      section#parte1 {
        background-color: white;
        width: 1100px;
        height: 115px;
      }

	   /* Líneas verticales */

      .gwd-img-verI {
        position: absolute;
  		width: 1px;
  		height: 504px;
        margin-top: 0px;
        margin-left: 0px;
      }
      .gwd-img-verD {
        position: absolute;
  		width: 1px;
  		height: 504px;
        margin-top: 0px;
        margin-left: 1099px;
      }

      /* Líneas horizontales */

	  .gwd-img-hor1 {
        position: absolute;
  		height: 1px;
  		width: 1100px;
        margin-top: 0px;
        margin-left: 0px;
      }
	  .gwd-img-hor2 {
        position: absolute;
  		height: 1px;
  		width: 1100px;
        margin-top: 26px;
        margin-left: 0px;
      }

	  /* Título de la página */

      p.ltit {
        position: absolute;
        margin-top: 6px;
        margin-left: 4px;
        text-align: left;
        font-family: 'Arial';           
        font-weight: normal;
        font-size: 92%;
        color: black;
      }

	/* Subtítulo de la página */

	  div#subtitulo {
        position: absolute;
        text-align: center;
  		margin-top: 50px;
        margin-left: 0px;
        width: 1100px;
        max-width: 1100px;
  	    height:38px;
        background-color: #666666;
  
      }
      p.lStit {
        margin-top:0px;
        font-family: 'Trebuchet MS';           
        font-weight: normal;
        font-size: 200%;
        color: white;  /*#333333;*/
      }

/* Parte 2 */

      section#parte2 {
        background-color: white;
        width: 1100px;  /* 549px; */
        height: 75px;
      }

	  .gwd-img-hor3 {
        position: absolute;
  		height: 1px;
  		width: 1100px;
        margin-top: 0px;
        margin-left: 0px;
      }

	  .gwd-img-verC {
        position: absolute;
  		width: 1px;
  		height: 388px;
        margin-top: 0px;
        margin-left: 549px;
      }

	  p.li1-1 {
        position: absolute;
  		width: 530px;
  
        line-height: 18px;
        margin-top: 10px;
        margin-left: 10px; 
        text-align: justify;
        font-family: 'Trebuchet MS';      
        font-weight: normal;
        font-size: 15px;
        color: black;
	  }

/* Parte 3 */

      section#parte3 {
        background-color: white;
        width: 1100px;
        height: 310px;
      }

	   /* Formulario de contacto */

      .contact_form h2 {
        margin-top: 0px;
        margin-left: 100px;  
        background:  none repeat scroll 0 0 rgb(77, 71, 70);
        color: white;
        display: block;
        font-family: sans-serif;
        font-size: 20px;
        text-align: center;
        width: 331px;
      }

/* Aplicamos los estilos para los <li> y <ul> del formulario que son los
contenedores de cada campo con su label, damos una anchura a la lista y
quitamos los margin y padding y de igual posicionamos los ítems <li> y 
colocamos bordes debajo de cada <li>.*/

      /*--- estilos para los ul y li del formulario ---*/

      .contact_form ul {
        width: 650px;  /*540*/
        list-style-type:none;
        margin:3px;
      }

      /* Altura entre los campos */

      .contact_form li{
        padding:3px; 
/*        border-bottom:1px solid #eee;*/
        position:relative;
      }

	/* Posicionamient de los labels */

      .contact_form label {
        color: #555555;
        display: inline-block;
        float: left;
        font-family: sans-serif;
        font-size: 13px;
        font-weight: bold;
        margin-top: 0px;
        margin-left: 0px;
        text-align: right;
        width: 100px;
      }

/* Con este código damos estilos a los <input>, damos un ancho,
alto y padding, de igual manera al textarea y al botón de enviar
la damos un margin left para posicionarlo.*/

      .contact_form input {
        height: 20px; 
        width: 300px; 
/*        padding:5px 8px; */
      }

      .contact_form textarea {
/*        padding: 8px;  */ 
        width: 300px;
      }

      .contact_form button {
        margin-left:351px;
      }

/* Con estos estilos anteriores damos un aspecto visual agradable
a los campos de entrada de texto, entre ellos un borde, una sombra
interna por medio de box-shadow inset, bordes redondeados, padding
y una transición que se hace con el padding que simula una animación
que cambia del estado normal a focus, en este estado cambiamos el
background el color del borde y el box-shadow.*/


      /*----- estilos visuales de los elementos --------*/

      .contact_form input, .contact_form textarea { 
        border:1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
        border-radius:2px;
        color: #888;
        font-size: 12px;
        padding-right:30px;
        -moz-transition: padding .25s; 
        -webkit-transition: padding .25s; 
        -o-transition: padding .25s;
        transition: padding .25s;
      }

      .contact_form input:focus, .contact_form textarea:focus {
        background: white; /*     #fff;  */
        border:1px solid #555; 
        box-shadow: 0 0 3px #aaa; 
        padding-right:40px;
      }

/* Con este código anterior lo que hacemos es darle las propiedades a los
diferentes estados de los campos de entrada, el primero es verde y se 
coloca cuando hay información y es válida, esto va de acuerdo al tipo de
entrada del campo, y se coloca  rojo cuando está en estado focus o la
entrada es invalida. */

/* === Estilos de Validacion === */

	  .contact_form input:required:valid, .contact_form textarea:required:valid {
        box-shadow: 0 0 5px #5cd053;
      }     

      .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
        box-shadow: 0 0 5px #d45252;
        border-color: #b03535;
      }

/* Damos los estilos al botón de envío del formulario entre ellos damos
un degradado a ese botón, sombras en el botón y en el texto, bordes
redondeado entre otros. También damos los estilos en el estado hover del
botón que es cuando el mouse esta sobre él y el estado active que se
ejecuta al momento de clickear el botón. */

/* === Estilos del boton de Envio === */

      button.submit {
        padding: 9px 17px;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        line-height: 1;
        color: #444;
        border: none;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
        background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
        background-color: #fff;
        border: 1px solid #f1f1f1;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }

      button.submit:hover {
        opacity:.75;
        cursor: pointer; 
        color: grren    /* #fff;  */
     }

     button.submit:active {
       border: 1px solid #222;
       box-shadow: 0 0 10px 5px #444 inset; 
     }

	  .gwd-img-sobre {
        position: absolute;
  		
        margin-top: -60px;
        margin-left: 560px;
      }