/********** Estilos Generales **********/

body { font-family: 'Roboto Condensed'; font-size: 20px; margin:0; }

li { list-style-type: none;  margin-right: 30px; font-size: 25px;  }

h1 { font-size: 40px; margin: 0; color:#eeeeee; }
h3 { font-size: 30px; margin: 0; margin-bottom: 60px; color:#eeeeee; }


.divisor {width:100%; border: 0; height: 20px; box-shadow: inset 0 12px 12px -12px #004002; margin-top:20px; margin-bottom: 20px;}

.separador-vacio { display: block; height: 20px; clear: both; margin: 20px 0px;}

h3.seccion-titulo { text-align:center; font-size: 40px; margin: 40px 20px; color:#111111; font-weight: normal; }

.subir { display:inline-block; vertical-align: middle; }

/********** HEADER **********/

header {
  background-image: url(../img/iglesiaoxitaa9.jpg);
  height: 100vh;
  background-size:cover;
 }

 #header-encabezado-paginas {
   height:auto;
   background-size:cover;
   background-image: url(../img/andes-tours_encabezado_bg_1600x620.jpg);   
  }

/********** FOOTER **********/

footer {
  background-color: #111111; margin: 0 auto; padding:0px; clear: both; height: 100px;
}

footer .creditos   { float: left; padding: 20px 10px 20px 20px; color: #ff9900; }
footer .enlaces { float: right; padding: 30px 20px 20px 10px; color: #ff9900;  }

/***** Encabezados *****/

.encabezado-fondo {
  position: relative;  overflow: hidden;  padding: 10px;
  border: 2px dashed green;  background-color: #000;  
}
.encabezado-fondo h1 {
  padding: 100px;  position: relative;  z-index: 2; text-align: center;
}
.encabezado-fondo img {
  position: absolute;
  left: 0;  top: 0;
  width: 100%;  height: auto;  opacity: 0.8;
}

/***** Menú y Logo *****/

 .menu {
  display: flex; 
  justify-content: right;
  align-items: center;
  
  
}
.menu img {  padding: 20px 0px 20px 40px;}

.lista { display: flex; }
.lista a { color:#A9A9A9; text-decoration: none; }
.lista a:hover { color:#808000;}

/* ======================================== */

/***** Página INICIO - Presentación *****/

.presentacion { width:50%; margin-left: auto; margin-right: auto;
  margin-top: 190px; height:300px; background-color: rgba(0,0,0,0.6) }

.presentacion h1, h3 { text-align: center; }

.presentacion-boton {
  display:block;  width: 150px;  margin: 0 auto;  margin-left: auto;
  margin-right: auto;  text-decoration: none;  text-transform: uppercase;
  text-align: center;  color:#ffffff; padding: 10px; background-color: #ff4400; font-size: 25px; border-radius: 25px; }
  .presentacion-boton:hover { background-color: #3e6d40;}  

/* Página INICIO - Sección Nosotros */

.seccion-inicio-nosotros { display: flex; justify-content: space-around; align-items: center; padding: 0px 0px 40px 0px;}
.seccion-inicio-nosotros-texto { width: 50%; margin-top:0px }
.seccion-inicio-nosotros-texto p { font-size: 17px; text-align: justify;}
.seccion-inicio-nosotros-texto-boton {
  text-decoration: none; text-transform: uppercase;
  color:#ffffff; padding: 20px; background-color: #111111; font-size: 25px;
  display: inline-block; margin-bottom: 60px;
}
.seccion-inicio-nosotros-texto-boton:hover { background-color: #ff4400;}

/* Página INICIO - Sección Servicios */

.seccion-servicios-contenedor {
  display: flex; flex-wrap: wrap; justify-content: space-around;
}

.seccion-servicios-item {
  width: 31%; padding: 30px 25px; background:#3e6d40; color:#ffffff; border-radius: 20px;
  margin-bottom: 40px;
}
.seccion-servicios-item h4 { font-size: 40px; margin: 0 0 20px 0; }
.seccion-servicios-item p { font-size: 24px; }
.seccion-servicios-item img { width:99%; height: auto; border: 2px solid #eeeeee; }

.seccion-inicio-servicios-boton {
  display:block;  width: 300px;  margin: 0 auto;  margin-left: auto;
  margin-right: auto;  text-decoration: none;  text-transform: uppercase;
  text-align: center;  color:#ffffff; padding: 10px; background-color: #000000; font-size: 25px; border-radius: 25px; }
  .seccion-inicio-servicios-boton:hover { background-color: #ff4400;}  

/***** Página NOSOTROS *****/

.nosotros-contenedor { margin:0 auto; ; padding: 20px;}
.nosotros-bloque { display: flex; align-items:flex-start; justify-content: space-around;}
.nosotros-foto { width:40%; margin: 0; padding: 0; display: flex; justify-content: center;} 
.nosotros-texto { width: 40%; margin:0px; padding: 0px 20px 20px 20px; }
.nosotros-texto p { font-size: 20px; text-align: justify;}

/***** Página SERVICIOS *****/

.servicios-contenedor { margin:0 auto; display:flex; flex-wrap: wrap; justify-content:space-around;}
.servicios-item {
  width: 25%; padding: 30px 25px; background:#3e6d40; color:#ffffff; border-radius: 20px;  margin-bottom: 40px; }
.servicios-item h4 { font-size: 40px; margin: 0 0 20px 0; text-align: center; }
.servicios-item p { font-size: 24px; }
.servicios-item img { width:100%; height: auto; border: 2px solid #eeeeee; }

/***** Página CONTACTO *****/

.contacto-contenedor { margin:0 auto; display: flex; align-items:flex-start; padding: 20px;}
.contacto-contenedor h4 { font-size: 35px; text-decoration: underline;}

.contacto-formulario { width: 45%; margin:0 auto; color: #222222; padding: 0px 20px; }
form { margin:0 auto; width:600px; }
label { display:inline-block; margin-top:20px; letter-spacing:1px; width:100px; vertical-align: top; font-size: 20px; text-transform: uppercase;}
input, textarea { width:380px; height:26px; background:#eeeeee;
    padding:10px; margin-top:5px; font-size:16px; color:#004002; outline:#004002; border-radius: 0px 20px 20px 0px;}
input:focus, textarea:focus { border:2px solid #3dff8b; }
textarea { height: 150px; border:2px solid #004002;}
#boton-submit, #boton-reset { display: inline-block; width:150px; height:35px; border:none; margin:20px 0px 0px 10px; cursor:pointer; justify-items: right; border:2px solid #004002; font-size: 14px; font-weight: bold; border-radius: 20px 0px ; }
.formulario-botones {display: flex; justify-content:flex-start;}

.contacto-info { width: 45%; margin:0 auto; color: #222222; padding: 0px 20px; }
.contacto-info p { font-size: 20px; text-align: justify;}
.contacto-info span { font-weight:bold;}

.contacto-google-maps { width: 100%; display:block; margin:0; padding: 0;}