@charset "UTF-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}

@font-face {
font-family: "AgendaLight";
src: url('fonts/Agenda-Light.ttf') format("truetype");
}

body {
	font-family: "AgendaLight", Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #404040;
}
.wrapper{
	background: #404040;
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
}
h1 {
	font-weight: lighter;
	font-size: 4em;
	color:#FFF;
	padding: 3%;
	text-shadow: 5px 5px 10px #000;
}
h2 {
	font-weight: lighter;
	font-size: 2.7em;
	color:#999;	
}
h2 span {
	
	color:#ba7011;
}
h3 {
	font-weight: lighter;
	font-size: 4em;
	color:#FFF;
	padding: 3%;
	text-shadow: 5px 5px 10px #000;
}
h4 {
	font-weight: lighter;
	font-size: 1.5em;
	background:#D09135;
	color:#FFF;
	padding: 3% 4%;
}

a {
color: #FBF2E8;
}

/* Esta es la página*/
.contacto {
	background: #d4c7b6;
	height: 26px;
	color:#513311;
	text-align: right;
	padding:.5% 3% .5% .5%;
}

.contacto a {
	text-decoration: none;
	color:#513311;
}
.menu {
	clear:both;
	width: 100%;
	position: relative;
}
.logo {
	float:left;
	width: 49%;
}
nav {
	float:left;
	width: 49%;
	display: block;
	position:relative;
}
nav ul {
	position: absolute;
	top: 20px;
	bottom: 0;
	right: 0;
	left: 0;
	list-style-type: none;
	font-size:1.2em;
}
nav ul li {
	float: right;
	width: 100px;
	border-right: #404040 solid 1px;
	text-align: center;
}
nav ul li a {
	display: block;
	background-color: #404040;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	padding: 5px 0px;
}

nav ul li a:hover {
	background-color:#BF7E1B;
	color:#FFF;	
}

nav ul li a:active {
	background-color:;
	color:#FFF;	
}
hr {
	clear:both;
	z-index: 500;
}
.portada {
	clear:both;
	background:#404040;
	color:#FFF;
	height:250px;
	position:relative;
}
.mensajeinicio {
	float:left;
	position:relative;
	top: 70px;
	display: block;
	width:49.8%;
	}
.sloganinicio {
	clear: both;
	float:left;
	top: 100px;
	display: block;
	width:49.8%;
	position:relative;
	}
.fotoinicio {
	float:left;
	display: block;
	position:relative;
	top: -90px;
	width:49.8%;
	text-align:center;
	}
.presentacion {
	clear:both;
	float:left;
	background:#d4c7b6;
	font-size:1.1em;
	color:#513311;
	position:relative;
	padding: 10px;
}
.presentacion div {
	background:#d4c7b6;
	float:left;
	display: block;
	width:31%;
	padding:10px;
	position:relative;
}
.presentacion p span {
line-height:1.6em;
}
.servicios {
	clear:both;
	text-align: center;
	height: 60px;
	padding: 20px 0 0 0;
}
.diseno {
	clear:both;
	background:#fbf2e8;
	height:450px;
	color:#404040;
}
.titdiseno{
	padding: 20px 20px;
	}

.contenedorejemplos {
	float: left;
	padding: 2%;
	}
.ejemplos {
	width:500px;
	display: inline-block;
	float: left;
	}
.disenocontenido {
	width:40%;
	display: block;
	float: left;
	font-size:1.2em;
	padding: 1.5%;
	}
.titfoto{
	padding: 20px 20px;
	}

.fotografia {
	clear:both;
	background:#404040;
	color:#FFF;
	font-size:1.2em;
}
.fotografia p span{
	color:#d09135;
}
.fotocontenido{
	padding: 2%;
	}
.titmulti{
	padding: 20px 20px;
	}
.multimedia {
	clear:both;
	background:#fbf2e8;
	color:#513311;
}
.multimediacontenido {
	display: block;
	background:#d09135;
	width:890;
	height:415;
	color:#FFF;
	font-size:1.2em;
	padding: 2%;
}
.multimediacontenido span {
	color:#404040;
}
.clientes {
	clear:both;
	background:#d4c7b6;
	color:#513311;
	text-align:center;
	padding: 20px;
}
.clientescontenido {
	clear:both;
	background:#9b9386;
	color:#FFF;
	font-size:1.2em;
}
.clientescontenido div {
    display: inline-block;
	width:27%;
	padding: 2%;
	text-align: top;
}
.clientescontenido div span{
   color:#404040;
}
.clientescontenido div p b span{
   color: #FBF2E8;
}

footer {
	clear:both;
	color:#FFF;
	font-size:1.2em;
	padding: 2%;
}
footer a {
	text-decoration: none;
	color:#FFF;
}
/* estilo para Slide */
.slidesjs-pagination{
	background: #B97010;
	list-style: none;
	overflow: hidden;
	}
.slidesjs-pagination li{
	float:left;
	}
.slidesjs-pagination li a{
	display: block;
	padding: 10px 20px;
	}
.slidesmenu .active{
	background: #FBF2E8;
	}
.slidesjs-navigation{
	background: #B97010;
	text-decoration: none;
	display:inline-block;
	padding: 10px 10px;
	float: right;
	}
	/* PESTAÑAS */
	
.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 920px;
height:365px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #9B9386;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #D09135 inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #D4C7B6;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
.fotocontent {
	float:left;
	width:60%;
	}
.textocontent {
	float:left;
	width:40%;
	}
/* y un poco de animación */
.content > * {
opacity: 0;

-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #D4C7B6;
box-shadow: 0 3px 2px #D4C7B6 inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}