/* #Reset & Basics (Inspired by E. Meyers)
Los reset nos ayuda al tema de compatibilidad de nuestra web en los distintos navegadores, obligando al maquetador a definir todas las pautas para una web optima ante los validadores oficiales.
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


/*======== Elementos ============*/
a {
	color: #5f5e5d;
	-webkit-transition: color 0.25s;
	transition: color 0.25s;
}
/*========= Acciones =============*/
body:hover #submenu{
	visibility: visible;
	margin-left: 15px;

}
#submenu{
	visibility: hidden;
}

/*=========== Slide =============*/
.miSlide {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: center;
  
  
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #e0e0e0;
  padding: 1px;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/*============= Fin Slide ============*/

/* ======= Contenedor ========*/
body {
	/*width: 1000px;*/
	/*border: solid 1px;*/
	margin: 0 auto;
	margin-top: 20px;
	border: border-box;
	-webkit-box-shadow: 2px 2px 5px #999;
    -moz-box-shadow: 2px 2px 5px #999;
    filter: shadow(color=#999999, direction=135, strength=2);
    background: url("../img/bg.png");
    background-repeat: repeat-x repeat-y;
    border-radius: 5px;


}
.contenedor {
	margin-bottom: 20px;
	border-radius: 5px;
}
.shadow{
  -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
  filter: shadow(color=#999999, direction=135, strength=2);

 }
 .wrap{
 	background: white;
 	height: 100%;
 }
 p{
 	font-family: 'Open Sans', sans-serif;
 }
 .box1 p{
 	font-family: 'Lato', sans-serif;
 }
 h1, h2, h3, h4, h5, h6{
 	font-family: 'Source Sans Pro', sans-serif;
 	color: #a88629;
 }
 a{
 	font-family: 'Oswald', sans-serif;
 	-webkit-transition: color 0.25s;
	transition: color 0.25s;
 }
/*========= Fin Contenedor =============*/

/*============ Cabecera ========*/
/*======== Caja Exterior ==========*/
.menu-principal{
	padding-left: 10px;
	padding-right: 20px;
	padding-top: 20px;
	margin-top: 20px;
	/*margin: 0 auto;*/
	position: relative;
	
	float: none;
	min-height: 60px;  
	
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	max-height: auto;

	
}
.menu-principal .wrap {
	max-width: 1000px;
	padding:  0;
	background: #fff;

}

.menu-principal a{
	/*Configuramos para que tenga efecto cuando 
	este encima del enlace del menu*/
	color: #5f5e5d;
	-webkit-transition: color 0.25s;
	transition: color 0.25s;
}
.menu-principal  .elemento-menu > a,
.menu-principal .elemento_pagina > a{
	/*con esto le decimos que los enlaces del elemento menu y 
	pagina esten con este menu*/
	color: #5f5e5d;
}
/*====== Fin caja exterior del menu =========*/
/*===== Dando forma a la caja del menu ==========*/
.navegacion-principal{
	float: right;
	margin: 0 auto;
	position: relative;
		/*le damos un clear both para que las capas esten por debajo*/
	display: block;
	float: right;
	padding-right: 30px;
	padding-top: 10px;

	
}

.navegacion-principal a{
	display: block;
	text-decoration: none;
}
.navegacion-principal a:hover{
	color: #aa8e41;
}
.menu-acordion{
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #3c2c02;
	display: none;
}
nav{
	float: left;

}
.navegacion-principal ul{
	background: #ffdc7d;
	list-style: none;
	margin: 0;
}
.navegacion-principal ul li{
	display: block;
	float: left;
	list-style: none;
	padding-left: 15px;
	position: relative;
}
.navegacion-principal ul li ul{
	display: none;
}
.navegacion-principal li:hover ul{
	display: block;
	position: relative;
}
.navegacion-principal ul li ul li:hover{
	display: block;
		position: relative;

}
.navegacion-principal ul li ul li{
	display: block;
		position: relative;

}
#logo{
	float: left;
	width: auto;
	padding-left: 10px;
	height: auto;
	position: relative;
	padding-left:50px; 
	width: 200px; 

}

.menu {
	float: right;
	width: auto;
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
}
ul.menu li{
	display: inline block;
	float: left;
	list-style: none;
	padding-left: 30px;
	
}
ul li a{
	color: black;
	text-decoration: none;
}
ul.menu ul{
	display: none;
	/*cambiar si fuese necesario*/
	position: absolute;
	/*fin cambiar*/
}
ul.menu ul:hover{
	display: block;
}

#submenu1{

}
#submenu2{

}


/*========== Cuerpo =========*/
p a{
	float: right;
	padding-top: 10px;
}
#cuerpo{

	background: white;
	padding-top: 10px;
	border-top: solid 10px #d1d6c9;

}
.seccion:hover{
	border-top: solid 1px #d1d6c9;
}
#contenido{
	background-color: blue;
}
.lista.web{
	padding-bottom: 5px;
}
#box{
	
	width: 200px;
	height: auto;
	float: left;
	padding: 10px;
	margin-left: 20px;
	margin-right: 5px;
	margin-top: 20px;
	margin-bottom: 10px; 
	border: solid 1px #dddddd;
}
#box:hover{
	border: solid 1px #a88629;
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}
#box1{
	width: 100%;
	max-width: 180px;
	height: auto;
	float: left;
	
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	/*border: 1px solid black; */
	color: #948c78;

}
#box1:hover{
	/*border: solid 1px #a88629;*/
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}
#box2{
	
	height: auto;
	float: left;
	
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	/*border: 1px solid black; */
	color: #948c78;

}
#box2:hover{
/*	border: solid 1px #a88629;*/
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}
#box3{
	
	height: auto;
	float: left;
	
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	/*border: 1px solid black; */
	color: #948c78;

}
#box3:hover{
	border: solid 1px #a88629;
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}

.footer.wrap{
	border-top: 1px solid #262626;
	float: left;
	width: 100%;
	height: 100%;
	position: relative;

}
.footer{

		margin-bottom: 20px;
}
.socket{
	margin-top: 5px;
	height: 40px;
	margin-bottom: -20px;
	background: black;
	float: left;
	position: relative;
	width: 100%;
	color: #434749;
}
.socket p{
	margin: 0 auto;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
.wrap-footer{
 	background: #2d3032;
 	border-top: solid 10px #d1d6c9;
 	border-bottom:  solid 5px #d1d6c9;
 	height: all;
 	margin-bottom: 10px;
 }
/* .row { margin-bottom: 20px;}*/



/* Servicios
================================================*/
.box{
	
	width: auto;
	height: auto;
	float: left;
	padding: 10px;
	margin-left: 20px;
	margin-right: 5px;
	margin-top: 20px;
	margin-bottom: 10px; 
	border: solid 1px #dddddd;
}
.box:hover{
	border: solid 1px #a88629;
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}
.box1{
	width: 100%;
	max-width: 180px;
	height: auto;
	float: left;
	
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	/*border: 1px solid black; */
	color: #948c78;

}
.box1:hover{
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}
.box2{
	
	height: auto;
	float: left;
	
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	/*border: 1px solid black; */
	color: #948c78;

}
.box2:hover{
	
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}
.box3{
	
	height: auto;
	float: left;
	
	padding: 20px;
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	/*border: 1px solid black; */
	color: #948c78;

}
.box3:hover{
	color: #727171;
	-webkit-transition: color 0.50s;
	transition: color 0.50s;}






/*	Tipografias 
=================================================*/
	
	h1, h2, h3, h4, h5, h6 {
		color: #a88629;
		font-family: "Open Sans", arial, serif;
		font-weight: normal; 
	}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 29px; line-height: 38px; margin-bottom: 14px;}
	h2 { font-size: 21px; line-height: 28px; margin-bottom: 10px; }
	h3 { font-size: 18px; line-height: 26px; margin-bottom: 8px; }
	h4 { font-size: 16px; line-height: 24px; margin-bottom: 8px; margin-top: 4px; }
	h5 { font-size: 15px; line-height: 21px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #735c1d; }
	small { font-size: 80%; }
	.apartados{
		color: #a88629; margin: 0 auto; margin-top: 15px; margin-bottom: 10px; size: 5em;
	}
/* Enlaces
================================================== */
	a, a:visited { color: #444; outline: 0; text-decoration: none;
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		transition: all 0.2s linear;			
	}
	a:hover, a:focus { color: #a88629; }
	p a, p a:visited { line-height: inherit; }

/* Imagenes
================================================== */
	
	img.img-responsive {
		max-width: 100%;
		height: auto; 
		padding-bottom: 10px;
	}
	.frame-responsive {
		max-width: 100%; }
		
	#google_map iframe {
		width: 100%;
		height: 416px;
		border: 0;
	}	

/* Clear
================================================== */

	/*Para realizar esta parte tuve que apoyarme con un framework de css sencillo, ya que al no hacerlo el sistema de rejillas no funcionaria como deberia.*/

    /* Tengamos un poco de bondad con el contendero :) ; */
    .contenedor:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix para borrar las columnas anidadas o utilice un row para agrupar las files de la columna <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* Podemos usar <br class="clear" /> para limpiar los espacios entre columnas */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

/*
#menu > li ul {
	display: none;
}
#menu ul li:hover ul {
	position: relative;
}
*/