/* FUENTES INCLUIDAS */

@font-face {
  font-family: 'Roboto-thin';
  src: url(./fonts/roboto-thin.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto-light';
  src: url(./fonts/roboto-light.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url(./fonts/roboto-regular.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto-bold';
  src: url(./fonts/roboto-bold.woff) format('woff');
  font-style: bold;
  font-weight: 700;
}

@font-face {
  font-family: 'Ecologo';
  src: url(./fonts/ecologo.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat-light';
  src: url(./fonts/montserrat-light1.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat';
  src: url(./fonts/montserrat-regular1.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat-medium';
  src: url(./fonts/montserrat-medium1.woff) format('woff');
  font-style: medium;
  font-weight: 500;
}

@font-face {
  font-family: 'Montserrat-black';
  src: url(./fonts/montserrat-black1.woff) format('woff');
  font-style: bold;
  font-weight: 700;
}

@font-face {
  font-family: 'Montserrat-bold';
  src: url(./fonts/montserrat-bold.woff) format('woff');
  font-style: bold;
  font-weight: 700;
}

@font-face {
  font-family: 'linearicons';
  src: url(./fonts/linearicons-free.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

/*
  @font-face {
    font-family: 'font-awesome';
    src: url(fonts/fa-regular-400.woff ) format("woff");
    font-style: normal;
    font-weight: 400;
  }
*/


/* TIPOGRAFIA */

/* TIPOGRAFIA PAGINA */

h1 {
  font-family: 'Roboto-thin';
  letter-spacing: 0.em;
  font-size: clamp (1.7rem, 1.7rem + 0.5vw, 3rem);
  line-height: 100%;
}

h2 {
  font-family: "Montserrat-light";
  font-size: clamp(1.5, 1.4rem + 0.2vw, 1.8rem);
  line-height: 150%;
  /*max-inline-size: 35ch;*/
}

h3 {
  font-family: "Montserrat-medium";
  font-size: clamp(1.1rem, 1rem + 0.2vw, 1.5rem);
  line-height: 150%;
  padding: 1rem 0 0;
  /*max-inline-size: 45ch;*/
}

h4 {
  font-family: "Montserrat";
  font-size: clamp(0.9rem, 0.9rem + 0.2vw, 1.3rem);
  line-height: 150%;
  letter-spacing: 0.1em;
  padding: 0.5rem 0 0;
  /*max-inline-size: 40ch;*/
}

h5 {
  font-family: "Montserrat-medium";
  font-size: clamp(0.8rem, 0.8rem + 0.2vw, 1.2rem);
  line-height: 130%;
  letter-spacing: 0.1em;
  padding: 0.5rem 0 0;
  /*max-inline-size: 40ch;*/
}

p {
  font-family: "Roboto";
  font-size: clamp(0.9rem, 0.9rem + 0.1vw, 1.2rem);
  line-height: 130%;
  /*max-inline-size: 55ch;*/
  padding: 0.5rem 0 0;
}


/* RESET */
html {
  box-sizing: border-box;
  border: 0px;
  padding: 0px;
  scroll-behavior: smooth;
  margin: 0 auto 0;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

/* GLOBAL */

* {
  box-sizing: border-box;
  border: 0px solid rgb(243, 59, 59);
  margin: 0;
  padding: 0;
}

body {
  max-width: 1200px;
  border: 0px;
  padding: 0px;
  margin: 0 auto 0;
}


/* ESTILOS */


/* SITE HEADER */

.siteHeader {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 0;
  padding: 0.5rem;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.siteHeader__section {
  display: flex;
  align-items: center;
}

.siteHeader__item {
  padding: 0.5rem 1rem;
}

.siteHeader__item+.siteHeader__item {
  margin-left: 1rem;
}

.siteHeader__item.is-site-header-item-selected {
  border-radius: 0.5rem;
}

.siteHeaderButton {
  cursor: pointer;
  color: #D9E9EF;
}





/*  */


.flex-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  align-content: center;
  height: max-content;
  padding: 3rem 0rem 3rem 0rem;
  background-color: #5f928f;
  color: #e9e9e9;
  max-width: 1200px;
  border-radius: 0rem 0 0 0;
}

.flex-container>h2 {
  line-height: 150%;
}

.flex-container_foto {
  display: flex;
  flex: 1 1 auto;
  justify-content: stretch;
  flex-flow: row wrap;
  align-content: stretch;
  justify-content: flex-end;
  height: max-content;
  margin: 0rem auto 0rem;
  border-radius: 0 0 0rem 0;
  max-width: 1200px;
  height: 70vh;
  background: url("img/Valdaracete_72.jpg") no-repeat center center/cover;
}

.flex-container_2 {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-content: flex-start;
  height: max-content;
  padding: 0rem 0rem 0rem;
  gap: 0rem;
  background-color: #c5f2ef;
}

.flex-container_3 {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-content: flex-start;
  height: max-content;
  padding: 0rem 3rem 0rem;
  gap: 3rem;
  background-color: none;
}

.flex-sub_container {
  flex: 1 1 300px;
  flex-flow: row wrap;
  padding: 1rem 0 3rem;
}

.flex-sub_container_2 {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: flex-end;
  gap: 1rem;

}

/* ENTRADA CENTRADO */

.centeredPrompt {
  display: flex;
  flex: 0 1 25vw;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: content;
  padding: 2.5rem 2rem 3.5rem;
  color: aliceblue;
  background-color: rgb(101, 166, 44, 0.95);


}

/*  FICHAS LEER MAS CABECERA */

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  display: none;
  max-height: 0;
  font-size: 0;
  transition: .55s ease;
}

.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  display: contents;
  font-size: inherit;
  max-height: 999rem;
}

.read-more-state~.read-more-trigger:before {
  content: '[ + ] Leer más...';
  color: inherit;
  color: rgb(86, 170, 55);
}

.read-more-state:checked~.read-more-trigger:before {
  content: '[ X ] Leer menos.';
  color: inherit;
  color: rgb(166, 43, 43);
}

.read-more-trigger {
  cursor: pointer;
  display: inline;
  line-height: 1;
  font-family: 'Roboto';
  font-size: 0.9rem;
}



/* Other style  */


.somos_texto_inicio {
  display: block;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pie {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-content: center;
  max-height: max-content;
  max-width: 1200px;
  padding: 1.5rem 3rem 1.5rem 3rem;

  background-color: rgb(83, 46, 83);
  color: white;
}




/* COLORES */

.color0 {
  background-color: #ffffff;
  /*color: #242424;*/
  color: inherit;
}

.color1 {
  background-color: #466f8f;
  color: #e9e9e9;
}

.color2 {
  background-color: #d9d8a0;
  color: #242424;
}

.color3 {
  background-color: #8f7665;
  color: #e9e9e9;
}

.color4 {
  background-color: inherit;
  color: #466f8f;
}

.color5 {
  background-color: none;
  color: #242424;
}

.color6 {
  background-color: #5f928f;
  color: #e9e9e9;
}

.color7 {
  background-color: transparent;
  color: inherit;
}

.color8 {
  background-color: transparent;
  color: #e9e9e9;
}

.color9 {
  background-color: none;
  color: #e9e9e9;
}

.color10 {
  background-color: #754070;
  color: #e9e9e9;
}

.color11 {
  background-color: #f7f5f5;
  color: #466f8f;

}


.color_icono {
  background-color: transparent;
  background-color: inherit;
  color: rgb(202, 84, 153);
}


/* ICONOS */

.iconos {
  font-family: "linearicons";
  font-size: 2rem;
  /*color: rgb(139, 38, 38);*/
  margin-bottom: 0.5rem;
}

.iconos_pequeños {
  font-family: "linearicons";
  font-size: 1.5rem;
  /*color: rgb(139, 38, 38);*/
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}

.iconos_pequeños_2 {
  width: 55px;
  height: 55px;
  font-family: "linearicons";
  font-size: 2rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-top: 10px;
  border-radius: 50%;

}

.ecoverde {
  display: block;
  height: 50px;
  margin: 0rem 0rem 0;
}


/* IMAGENES FORMAS CAJAS */

.redonda {
  display: inline;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.redonda_derecha_grande {
  display: inline;
  width: 150px;
  height: 150px;
  border-radius: 50% 50% 50% 0;
  object-fit: cover;
  object-position: center;
}

.redonda_izquierda {
  display: inline;
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 0 50%;
  object-fit: cover;
  object-position: center;
}

.redonda_derecha {
  display: inline;
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 0;
  object-fit: cover;
  object-position: center;
}

/* BOTON */


.boton {
  display: inline-block;
  padding: 0.3rem 1.5rem;
  border-radius: 0.3rem;
  background: rgba(128, 156, 67, 0.8);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 0.7em;
  margin: 1rem 0 1rem;
}

.boton10 {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgb(81, 113, 11);
  color: rgb(81, 113, 11);
  /*background: rgba(222, 238, 188, 0.8);
  color: rgb(255, 255, 255);*/

  text-align: center;
  font-size: 0.8em;
  margin: 1rem 0 1rem;
}

.boton:hover {
  background: rgba(81, 113, 11, 0.8);
}


.boton10:hover {
  background: rgba(81, 113, 11, 0.8);
  color: white;
}

.boton_enviar {
  display: inline-block;
  padding: 0.4rem 1.5rem;
  border-radius: 0.3rem;
  background: rgba(202, 61, 120, 0.8);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 0.8em;
  margin: 1rem 0 1rem;
}

.enlace10 {
  display: block;
  padding: 0.4rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgb(81, 113, 11);
  color: rgb(81, 113, 11);
  /*background: rgba(222, 238, 188, 0.8);
  color: rgb(255, 255, 255);*/
  font-family: 'Roboto-light';
  text-align: center;
  font-size: 0.8em;
  margin: 1rem 0 1rem;
}

.enlace10:hover {
  background: rgba(81, 113, 11, 0.8);
  color: white;
}


/* QUIENES SOMOS */

.somos {
  max-width: 1200px;
  margin: 0 auto 0;
  padding: 3em 0;
  border: 0px;
  background-color: rgb(183, 207, 188);
  background: linear-gradient(rgb(255, 255, 255), 70%, rgb(183, 207, 188));
  border-radius: 0 0 3rem 3rem;
}

.somos_ficha {
  display: flex;
  align-items: first baseline;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 2rem auto 2rem;
  margin: 3rem 3rem;
}

.somos_media {
  display: flex;
  align-items: baseline;
  justify-content: space-evenly;
  flex: 1 wrap;
  gap: 0px;
  min-width: 250px;
  max-width: 450px;
  margin: 0 0rem;
  padding: 1.5rem 0;
}

.somos_foto {
  min-width: 30%;
  border-radius: 50%;
  display: inline;
  flex: wrap;
  border: 1px solid rgba(140, 139, 139, 0.55);
}

.somos_texto {
  display: block;
  border-left: 2px solid rgba(33, 33, 33, 0.1);
  padding-left: 1.5em;
  padding-right: 1rem;
}

.somos_texto p {
  display: block;
  padding: 0.3rem 0 0;
}

.cita_libro {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #466f8f;
}



/* CAMINOS */

.caminos_super {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 3rem 0;
  background-color: none;
  background-color: rgb(238, 237, 205);
  background: linear-gradient(rgb(238, 237, 205), 5%, rgb(255, 255, 255));
  border-radius: 3rem 3rem;
}

.caminos {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 3rem 0;
  background-color: none;
}

.caminos_contenedor_2 {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  justify-content: baseline;
  flex-wrap: wrap;
  width: 80%;
  margin: 4rem auto 4rem;
  gap: 2rem;
}

.caminos_contenedor {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  justify-content: baseline;
  flex-wrap: wrap;
  width: 80%;
  margin: 4rem auto 4rem;
  gap: 2rem;
}

.caminos_ficha {
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 0rem;
  min-width: 250px;
  max-width: 450px;
  padding: 1rem 2rem;
}

.caminos_contenedor h3 {
  text-align: left;
  line-height: 110%;
  margin: 0.5rem 0 0.5rem;
  color: rgb(166, 43, 43);
}

.caminos h4 {
  margin: 1rem 0 0.5rem;
}





/* TESTIMONIOS */

.testimonios {
  max-width: 1200px;
  margin: 5rem auto 0;
  padding: 3em 0;
  background-color: rgb(238, 237, 205);
  background: linear-gradient(rgb(255, 255, 255), 70%, rgb(238, 237, 205));
  border-radius: 0 0 3rem 3rem;
}

.test_contenedor {
  display: flex;
  align-items: first baseline;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 2rem auto 2rem;
  margin: 3rem 3rem;
  border: 0px solid;
}

.test_contenedor_enlace {
  display: flex;
  align-items: first baseline;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 2rem 7rem;
  border: 0px solid;
  background: #ffffff;
  padding: 2rem 0 0;
  border-radius: 2rem;
}

.test_ficha {
  display: flex;
  justify-content: space-evenly;
  flex: 1 wrap;
  flex-wrap: wrap;
  gap: .7rem;
  min-width: 250px;
  max-width: 400px;
  padding: 0.1rem 0rem;
}

.test_ficha-enlace {
  display: flex;
  flex-direction: row;
  flex: 1 wrap;
  justify-content: flex-start;
  min-width: 250px;
  max-width: 400px;
  padding: 0.1rem 0rem;
}

.test_actividad {
  flex: 1, auto;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  padding: 0 1rem;
  margin-bottom: 2.5rem;
}

.test_actividad>h4 {
  margin-top: 1rem;
  line-height: 1.1;
}



/* ASOCIACIÖN */

.asociacion {
  max-width: 1200px;
  margin: 5rem auto 0;
  padding: 3rem 0;
  background-color: none;
}

.pie_1 {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  align-content: stretch;
  color: white;
  background: linear-gradient(black, 5%, rgb(146, 197, 155));
  padding: 2rem 2.5rem 3rem;
  border-radius: 0 0 3rem 3rem;
}

.imagen_asociación {
  display: block;
  width: 100%;
  color: #415F69;
  object-fit: contain;
  object-position: bottom;
}

.pie_4 {
  flex: 1;
  background-color: aliceblue;
  margin: 0rem auto 0rem;
  padding: 2rem 1.5rem 2rem;
  margin: 0rem auto 0rem;
}

.columnas_3 {
  text-align: left;
  -webkit-columns: 270px 3;
  -moz-columns: 270px 3;
  columns: 270px 3;
  -webkit-column-gap: 2rem;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
}

.columnas_4 {
  text-align: left;
  -webkit-columns: 200px 4;
  -moz-columns: 200px 4;
  columns: 200px 4;
  -webkit-column-gap: 2rem;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
  background: none;
}

.bloque {
  margin: -2rem auto 0rem;
  padding: 0;
}




/* CONTACTO */

.contacto {
  max-width: 1200px;
  margin: 4rem auto 4rem;
  padding: 3rem;
  border: 0px;
  background-color: rgb(206, 235, 238);
  border-radius: 3rem;
}

.recuadro_contacto {
  position: relative;
  right: 0;
  display: flex;
  flex: 1;
  align-self: flex-end;
  margin: auto 0 0 0;
  padding: 5rem 8rem;
  width: 70%;
  background-color: rgb(247, 241, 230);
  border-radius: 2rem 0 0 2rem;
}






/* LEGAL */

.legal {
  max-width: 1200px;
  margin: 5rem auto 16rem;
  padding: 3rem 0;
  border: 0px;
  height: max-content;
}

.legal>.centered {
  text-align: center;
}

.centered {
  text-align: center;
}

/* LOGOTIPO TIPOGRAFICO */

.LogoBloque {
  padding: 0.5rem 0rem 0 0;
}


.ec {
  font-size: 29px;
  font-family: 'Roboto-light';
  font-weight: 300;
  line-height: 35px;
}

.icono_logo {
  font-family: 'Ecologo';
  font-size: 29px;
  font-weight: 400;
  line-height: 35px;
}

.eco_logo {
  font-family: 'Roboto_thin';
  font-size: 29px;
  letter-spacing: -1px;
  font-family: 'Roboto-thin';
  font-weight: 200;
  line-height: 35px;
}



#u329-2 {
  font-size: 29px;
  font-family: 'Roboto-light';
  font-weight: 300;
  line-height: 35px;
}

#u329-3 {
  font-size: 29px;
  font-family: 'ecologo';
  font-weight: 400;
  line-height: 35px;
}

#u329,
#u329-4 {
  font-size: 29px;
  letter-spacing: -1px;
  font-family: 'Roboto-thin';
  font-weight: 200;
  line-height: 35px;
}


/* TEXTOS LEGALES */

.texto_legal {
  max-width: 60vw;
  min-width: 300px;
  margin: 0 auto 0;
}

/* LISTAS */
li {
  font-family: "Roboto";
  font-size: clamp(0.9rem, 0.9rem + 0.1vw, 1.2rem);
  line-height: 130%;
  text-decoration: none;
}


/* volver a gagina */





/* PAGINA MAXIMOS */

.pagina {
  max-width: 1200px;
  margin: 0rem auto 0rem;
}

.menuflotante {
  display: block;
  position: relative;
  top: 0px;
  height: 5rem;
  background-color: #466f8f;
  z-index: 3;
}

/* MENU ADAPTABLE */
/* HAMBURGUESA */

.menu_bloque {
  display: block;
  position: fixed;
  top: 0px;
}

.nav {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;

  background-color: rgb(95, 134, 90);
  padding-bottom: 0.5rem;
}

.nav__checkbox {
  display: none;
  float: right;
}

.nav__toggle {
  cursor: pointer;
  margin: 0 1rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.nav__toggle svg {
  fill: #D9E9EF;
  width: 1rem;
}

.nav__toggle .close {
  display: none;
}

.nav__toggle .close,
.nav__toggle .menu {
  margin-top: 0.3rem;
}

.nav__menu {
  flex: auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: baseline;
  gap: 1rem;
  margin: 0rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: none;
  color: #fff;
}

.nav__menu li {
  display: none;
  list-style-type: none;
  position: relative;
  bottom: -0.5rem;
  color: #fff;
}

.nav__menu li:first-child {
  display: block;
  margin-right: auto;
}

.nav__menu a {
  color: inherit;
  font-size: 0.8rem;
  text-decoration: none;
}

.menu__logo {
  height: 2.8rem;
  position: relative;
  top: 0.1rem;
}

.menu__logo img {
  height: 100%;
}

.content {
  height: 85vh;
}

#nav__checkbox:checked~ul.nav__menu li {
  display: block;
}

#nav__checkbox:checked~label.nav__toggle .close {
  display: block;
}

#nav__checkbox:checked~label.nav__toggle .menu {
  display: none;
}

@media only screen and (min-width: 900px) {
  .nav__toggle {
    display: none;
  }

  .nav__menu {
    flex-direction: row;
  }

  .nav__menu li {
    display: block;
  }
}



/* FOOTER */





.footer {
  max-width: 1200px;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  background-color: #334665;
  margin: 2rem auto 0;
  color: #efefef;

}

.footer_contenedor {
  display: flex;
  flex: 0, 0, auto;
  flex-basis: 300;
  align-items: start;
  justify-content: flex-end;
  flex-flow: row;
  flex-wrap: wrap;
  border: 0px solid rgb(100, 69, 225);
  margin: 0rem;
  padding: 0.5rem 0;
  justify-content: space-evenly;

  padding-bottom: 1rem;
}

.footer_bloque {
  display: flex;
  flex: 0, 0, auto;
  flex-basis: 300px;
  flex-flow: column;
  flex-wrap: wrap;
  align-content: first baseline;
  justify-content: flex-center;
  border: 0px solid rgb(81, 208, 225);
  margin: 1rem 0rem 1rem 0rem;
  padding-left: 4rem;
}

.footer_icono {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 16px;
  color: #FFF;
}

.footer_leyenda {
  display: block;
  width: 200px;
  text-align: left;
  border: 0px solid rgb(207, 69, 225);
  color: #FFF;
}


.footer_iconos_pequeños {
  font-family: "linearicons";
  font-size: 1rem;
  /*color: rgb(139, 38, 38);*/
  margin-top: 0.5remrem;
  margin-bottom: -0.7rem;
}

.footer_texto {
  margin-top: 0.2rem;
  font-family: 'roboto-light';
  font-size: 0.7rem;
  color: #ffffff;
}







/* */

.FLEX_3_container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-content: stretch;
  align-items: stretch;
  padding: 0;
  gap: 0rem;
  border-radius: 2rem;
  background: none;
}

.contacto_ancho {
  flex: 1 1 650px;
  padding: 1rem 1.5rem;
  gap: 2rem;
  border-radius: 1.5rem;
  border: 0px solid chartreuse;
}

.contacto_estrecho {
  flex: 0 1 300px;
  max-width: 300px;
  padding: 1.5rem 0.5rem 1.5rem;
  gap: 2rem;
  border: 0px solid chartreuse;
}



/* FORMULARIO */


#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  color: #662323;
}

#contact {
  margin: 0.5rem auto 1rem;
}



fieldset {
  border: medium none !important;
  margin: 0 0 0.5rem;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  height: 2.2rem;
  border: px solid #ccc;
  background: #FFF;
  margin: 0 0rem;
  padding: 1rem;
  border-radius: 1rem;

}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 8rem;
  max-width: 100%;
  resize: vertical;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 170px;
  border: none;
  background: #a04e43;
  color: #FFF;
  margin: 0.5rem 0 0;
  padding: 10px;
  border-radius: 0.3rem;
}

#contact button[type="submit"]:hover {
  background: #299d2d;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 30px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;

}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}