@font-face 
{
	font-family: Exo;
	src: url(font/exo_regular.woff);
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: Exo;
	src: url(font/exo_semibold.woff);
	font-weight: bold;
	font-style: normal;
}

@font-face 
{
	font-family: Exo;
	src: url(font/exo_bold.woff);
	font-weight: bolder;
	font-style: normal;
}

@font-face 
{
	font-family: Exo;
	src: url(font/exo_italic.woff);
	font-weight: normal;
	font-style: italic;
}

@font-face 
{
	font-family: Exo;
	src: url(font/exo_semibolditalic.woff);
	font-weight: bold;
	font-style: italic;
}

@font-face 
{
	font-family: Exo;
	src: url(font/exo_bolditalic.woff);
	font-weight: bolder;
	font-style: italic;
}



@font-face 
{
	font-family: ExoLight;
	src: url(font/exo_thin.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: ExoLight;
	src: url(font/exo_extralight.ttf);
	font-weight: bold;
	font-style: normal;
}

@font-face 
{
	font-family: ExoLight;
	src: url(font/exo_light.ttf);
	font-weight: bolder;
	font-style: normal;
}

@font-face 
{
	font-family: ExoLight;
	src: url(font/exo_thinitalic.ttf);
	font-weight: normal;
	font-style: italic;
}

@font-face 
{
	font-family: ExoLight;
	src: url(font/exo_extralightitalic.ttf);
	font-weight: bold;
	font-style: italic;
}

@font-face 
{
	font-family: ExoLight;
	src: url(font/exo_lightitalic.ttf);
	font-weight: bolder;
	font-style: italic;
}


*
{
  margin:0; 
  padding:0; 
  text-align:center
}

html,body
{
  height:100%;
}

body
{
  width:100%;
  background: #009688;
  /* background: gray; */
  color:white
  color:black; 
  font-family: ExoLight;
  font-weight: bold;
	font-style: normal;
}

a:link
{
  text-decoration:none;
  color: rgba(150,150,150,1);
}

a:visited
{
  text-decoration:none;
  color: rgba(150,150,150,1);
}

a:hover
{
  text-decoration:none;
  color: rgba(150,150,150,1);
}

a:active
{
  text-decoration:none;
  color: rgba(255,255,255,1);
}


nav
{
  float: top;
  position:fixed;
  width: 100%;
  height: 100px;
  background: rgba(255,255,255,0.7); 
  color: black;
  font-family: ExoLight;
  font-weight: bolder;
	font-style: normal;
}


p.menu_nav
{
  float: left;
  width: 100%;
  height:60px;
  text-align:center;

  transition:1.8s;
}

p.menu_nav:hover
{
  color: rgba(255,255,255,1);
  background: rgba(0,0,0,0.7);
  text-shadow: 3px 3px 4px black;
  transition:1.3s;
}

p.seccion_activa
{
  width:178px;
  background: rgba(0,0,0,0.7);
  border-left: 2px solid green;
  transition:1.6s;
}

p.seccion_activa:hover
{
  color: white;
  background: rgba(2,0,0,1.2);
  width:178px;
  border-left: 2px solid dimgray;
  opacity:1.0;
  transition:1.2s;
}

@-moz-keyframes mostrar_leyenda
{
  from {width:0%} to {width:2%}
  
}


.leyenda_servicios
{
  background:rgba(0,0,0,0.8);
  color:white;
  float:center;
  position:relative;
  bottom: 5%;

}

.marco_portada
{
  float:left;
  position:relative;
  top:5%;
  min-width:650px;
  width:62%;
  height:95%;
  margin-left:10%;
  /*background: rgba(5,5,5,0.7);*/
  /*box-shadow: 8px 10px 18px rgb(50,50,50);*/
}

.portada
{
  float:center;
  position:relative;
  top:15px;
  min-width:450px;
  width: 100%;
  height:170px;
  background:rgba(255,255,255,0.9);
  box-shadow: 8px 10px 18px rgb(50,50,50);
  opacity:0.8;
  z-index:20;
}

article.servicios
{
  background: rgba(5,5,5,0.9);
  float:left;
  position:relative;
  top:28px;
  min-width:450px;
  width:100%;
  box-shadow: 8px 10px 18px rgb(50,50,50);
  opacity:0.9;
  z-index: 10:
}

.titulo
{
	top: 20px;
	left: center;
	position: relative;
	float: left;
  font-weight: bold;
  width: 100%;
}

p.servicio_portada
{
  float:left;
  position:relative;
  margin-left:2.4%;
  width:30%;
  text-align:center;
  filter:saturate(60%);
  filter:grayscale(100%);
  transition:1.2s;
  
}

p.servicio_portada:hover
{
  filter:saturate(90%);
  filter:grayscale(10%);
  font-family:Exo;
  font-weight:regular;
  transition:0.5s;
}

picture.servicio
{
  float:center;
  position:relative;
  width:90%;
}

img.imagen_portada
{
  float:left;
  position:relative;
  width:100%;
  top:15%;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;

}


.western
{
  float: center;
  position:relative;
  top:15px;
  filter:saturate(30%);
  filter:grayscale(100%);
  opacity:0.8;
  transition:2.2s;
  width:250px;
}

.bienvenida
{
  float:left;
  position:relative;
  min-width:900px;
  min-height:450px;
  width:100%;
  height:auto;
  height:100%;
  background:darkgray;
  
  background-size: auto 150%;
  filter:saturate(60%);
  filter:grayscale(10%);
  color:black; 
  font-family: ExoLight;
  font-weight: normal;
	font-style: normal;


}

section.formulario
{
  float:left;
  position:relative;
  top:130px;
  left:15%;
  min-width:600px;
  width: 70%;
  height:70%;
  background:rgba(255,255,255,0.9);
  box-shadow: 8px 10px 18px rgb(50,50,50);
  opacity:0.8;

}

fieldset
{
  border:0px;
  float:left;
  position:relative;
}

.leyenda_formulario
{
  float:left;
  position:relative;
  top: 0px;
  width:100%;
  height:40px;
  background:rgba(0,0,0,0.7);
  color:white;
  margin-bottom:40px;
}

span
{
	float: left;
  position:relative;
  margin-top:10px;
  top: 0px;
  left: 20px;
  text-align:right;
  width: 90%;
}

span.icono_ayuda
{
  float:right;
  position:relative;
  right: 15px;
  top: 12px;
  background:rgba(50,50,50,0.7);;
  color:white;
  width:45px;
  height:24px;
  text-align:center;
  border-radius:42px;
  vertical-align:base;
  font-family: Exo;
  font-weight:bold;
  font-size:1.2em;
  transition:1.8s;
}

span.icono_ayuda:hover
{

  background: darkred;
  color:white;
  text-align:center;
  border-radius:42px;
  vertical-align:base;
  font-family: Exo;
  font-weight:bolder;
  font-size:1.2em;
  transition:0s;
}

label
{
  float:left;
  width:150px;
  height:100%;
  text-align:left;
  
}

.dependencias{
	float: right;
	position: relative;
	width: 40%;
	text-align: left;
	margin-right: 7%;
	margin-top: 2%;
}

b{
	font-weight:bolder;
}

ul,li{
	text-align: left;

}

p.formulario
{
  float:left;
  position:relative;
  left:20px;
  text-align:left;
  width:780px;
  height:35px;
}

input[type="text"]
{
  width: 39.3%;
}

input[type="file"]
{
  /*display:none;*/
}

textarea
{
  width:320px;
  text-align:left;
}

input[type="submit"].enviar_datos
{
  margin-top: 50px;
  margin-left:150px;
  width:94px;
}

input[type="submit"].enviar_mensaje
{
  margin-top: 45px;
  margin-left:20%;
  width:94px;
}

.marco_logo
{
  float: left;
  top: 28px;
  left: 3%;
  position: relative;
  width: 220px;
  height: 190px;
  border:0px solid rgba(0,0,0,0.0);
  border-radius: 18px;
  transition:2.2s;
  margin-bottom: 15px;
  
}

.logo
{
  float:left;
  position:relative;
  top: -18px;
  left: 20px;
  filter: drop-shadow(1px 3px 15px black);
  transition:2.2s;
  width:100%;

}

@-moz-keyframes slide
{
  from {left:220px} to {left:300px}
  
}


footer
{
	float:left;
  position:absolute;
  bottom: 0px;
  height:5%;
  width: 100%;
	background: rgba(255,255,255,0.7); 
  /*-moz-animation: slide 2s alternate infinite;*/

}
.derechos{
	float: left;
	position: relative;
	margin-left: 10%;
	top: 25%;
	width:80%;
	height:100%;
}

.icono_seccion
{
  height:100%;
  
  
}

.icono_marca
{
	float: left;
	position: relative;
  height:90%;
  
  
}