body{
    width: 600px; 
    margin: auto; /* Lo centra de manera automatica (color de relleno del body #E2ECEE;)*/
/*    background-color:  #FF9 ; */
}


.contacto{
    border: 2px solid #CED5D7;  /* Aplica un sombra al borde  y se definen el color*/
    border-radius: 6px; /* Que tan redondo seran las esquinas del formulario */
    padding: 45px 45px 20px; /* Margen superiro, izquierdo e inferior*/
    margin-top: 50px;
    background-color: white;  /* Fondo del formulario */
    box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset; /* estoy definiendo dos sombras: una externa y otra interna que da la apariencia de un borde interior*/

}




/*para lo del H1*/

.contacto h1{
    font-size: 40px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
 
/** For the moment only webkit supports the background-clip:text; */
.contacto h1{
    background: 
    -webkit-repeating-linear-gradient(-45deg, 
        rgb(18, 83, 93) , 
        rgb(18, 83, 93) 20px,
        rgb(64, 111, 118) 20px,
        rgb(64, 111, 118) 40px,
        rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
 
.contacto h1:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:5px;
    background: 
        linear-gradient(left,  
            rgba(147,184,189,0) 0%,
            rgba(147,184,189,0.8) 20%,
            rgba(147,184,189,1) 53%,
            rgba(147,184,189,0.8) 79%,
            rgba(147,184,189,0) 100%); 
}




/* 
Para las cajas de textos usamos selectores multiples, para los input y para el textarea
*/


/* 
Por ultimo para el boton de envio usaremos estilos similares a los de las cajas de textos, pero ademas va a tener bordes redondeados, sombra al texto y para el background le pondremos degradados CSS3

*/


.contacto label{
    display: block; /* esto es para que el label se sobreponga a la caja de texto */
    font-weight: bold;
}

.contacto div{
    margin-bottom: 15px; /* esto los separara un poco */
}



/* 
Para las cajas de textos usamos selectores multiples, para los input y para el textarea
*/


.contacto input[type='text'], .contacto textarea{
    padding: 7px 6px;
    width: 294px; /* una longitud definida */
    border: 1px solid #CED5D7;
    resize: none; /* esta propiedad es para que el textarea no sea redimensionable */
    box-shadow:0 0 0 3px #EEF5F7;
    margin: 5px 0;
}
.contacto input[type='email'], .contacto textarea{
    padding: 7px 6px;
    width: 294px; /* una longitud definida */
    border: 1px solid #CED5D7;
    resize: none; /* esta propiedad es para que el textarea no sea redimensionable */
    box-shadow:0 0 0 3px #EEF5F7;
    margin: 5px 0;
}


.contacto input[type='password'], .contacto textarea{
    padding: 7px 6px;
    width: 294px; /* una longitud definida */
    border: 1px solid #CED5D7;
    resize: none; /* esta propiedad es para que el textarea no sea redimensionable */
    box-shadow:0 0 0 3px #EEF5F7;
    margin: 5px 0;
}

.styled-select select {
   background: transparent;
   width: 294px;
   padding: 7px 6px;
   font-size: 16px;
   line-height: 1;
   border: 1px solid #CED5D7;
   height: 34px;
   box-shadow:0 0 0 3px #EEF5F7;
   
   }
   
  

/*se usa el selector input[type='text'](selector de atributo) esto es para que no se mezcle con el otro input[type='submit'] (el boton de envio).*/

.contacto input[type='text']:focus, .contacto textarea:focus{
    outline: none; /* reset especifico para Chrome/Safari */
    box-shadow:0 0 0 3px #dde9ec;
}


.contacto input[type='radio']:focus, .contacto textarea:focus{
    outline: none; /* reset especifico para Chrome/Safari */
    box-shadow:0 0 0 3px #dde9ec;
}



/* 
Por ultimo para el boton de envio usaremos estilos similares a los de las cajas de textos, pero ademas va a tener bordes redondeados, sombra al texto y para el background le pondremos degradados CSS3

*/

.contacto input[type='submit']{
    border: 1px solid #CED5D7;
    box-shadow:0 0 0 3px #EEF5F7;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 0px white;
 
    background: #e4f1f6; /* fallback para navegadores que no soporten degradados */
    background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
    background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
    background: #edfcff;
    background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
    background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
    background: #cfe6ef;
    background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
    background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}