/*===================================================================================================
1) Reset & basics
===================================================================================================*/
	html, body, div, span, applet, object, iframe, h1, h2, h3, h6, h9, h11, h12, h13, 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; }
		
/*===================================================================================================
2) Basic styles
===================================================================================================*/
	@import url(https://fonts.googleapis.com/css?family=Pavanam:300,400,700);
	body {
		font-family: 'Pavanam', Calibri, Arial, sans-serif;
		background: #fff;
		color: #444;
	}
/*===================================================================================================
4) Links
===================================================================================================*/
	
	a, a:hover, a:active, a:focus {text-decoration:none; border:0px; outline: 0;}
	a {color:#444;}
	a, a:visited { color: #444; }
	a:hover, a:focus { color: #000; }
	p a, p a:visited { line-height: inherit; }
		
/*===================================================================================================*/


@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome.eot');
	src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fontawesome.svg#fontawesome') format('svg'),
		url('../fonts/fontawesome.woff') format('woff'),
		url('../fonts/fontawesome.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

h1 	{color:#FFF;font-size:24px;line-height:1.5em;}
h2 	{color:#FFF;font-size:26px;line-height:1.5em;}
h3 	{color:#FFF;font-size:32px;line-height:1.5em;}
h6 	{color:#444;font-size:24px;line-height:1.5em;}
h7 	{color:#444;font-size:26px;line-height:1.5em;}
h8 	{color:#444;font-size:30px;line-height:1.5em;}
h11 {color:#888;font-size:24px;line-height:1.5em;}
h12 {color:#888;font-size:28px;line-height:1.5em;}
h13 {color:#888;font-size:38px;line-height:1.5em;}
h14 {color:#444;font-size:24px;line-height:1.5em;}

.container {
	width: 100%;
	height: 100%;
	/*min-width:750px;*/
	z-index: -5;
}
.bandaIzquierda {
	position:fixed;
	opacity:1;
	width: 19%;
	height:100%;
	/*min-width:160px;*/
	top: 0;
	left: 0;
	padding: 1.5em;
	text-align: center;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.menu{ margin:0 auto; padding:0 20px 0 20px; list-style:none; text-align:center}

.menu li a{
    display: block;
    text-transform: uppercase;
    color: #444;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.menu:hover li a {color: #aaa;}	
.menu li a:hover{color: #000;}
#actual {color:#aaa;}

.redes-sociales{ margin:0 auto; padding:0 25% 0 25%; list-style:none; text-align:center}
.redes-sociales li {
	float: left;
    width: 33%;
}

.redes-sociales li a img {
    width: 70%;
}

.bandaDerechaFija {
	position:fixed;
	overflow:hidden;
	margin-left:23%;
	width: 75%;
	/*min-width:450px;*/
	height:100%;
	z-index: -2;
	text-align:left;
	vertical-align: bottom;
	box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	-webkit-box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	-moz-box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
}
.cycle-slideshow { width: 100%; height: 100%; overflow:hidden;}
.cycle-slideshow img { height:100%; opacity: 0; filter:alpha(opacity=0);}
.bandaDerecha {
	margin-left:23%;
	width: 75%;
	/*min-width:450px;*/
	height:100%;
	z-index: -2;
	text-align:center;
	vertical-align: bottom;
	box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	-webkit-box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	-moz-box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
	overflow:hidden;
}
.bandaDerecha img {
	width:100%;
	margin:8px 0 0 0;
	padding:0;
	vertical-align: bottom;
}
.bandaIzquierda {
	position:fixed;
	opacity:1;
	width: 19%;
	height:100%;
	min-width:160px;
	top: 0;
	left: 0;
	padding: 1.5em;
	text-align: center;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.bandaSuperior {
	opacity:1;
	float:left;
	width: 100%;
	height:30%;
	padding: 0;
	text-align: center;
 	align-items: center;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.bandaSuperior img {
	width: 11%;
	margin: 8% 0 6% 0;
}
.bandaInferior {
	float:left;
	width: 100%;
	text-align:center;	
	box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	-webkit-box-shadow: 4px 4px 20px rgba(124,111,103,.6);
	-moz-box-shadow: 4px 4px 20px rgba(124,111,103,.6);
}


/*===================================================================================================*/

figure.proyecto,
figure.prensa,
figure.prensaInt,
figure.index {
	position: relative;
	float: left;
	overflow: hidden;
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 25%, rgba(60,40,10,1) 75%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(60,40,10,1) 75%);
}
figure.proyecto {
	width: 33.334%;
}
figure.prensa, figure.index {
	width: 25%;
}
figure.prensaInt {
	width: 33.334%;
}
figure.proyecto img,
figure.prensa img,
figure.prensaInt img,
figure.index img {
	margin: 0;
	display: block;
	min-height: 114%;
	max-width: none;
	width: 114%;
	opacity: 1;
	-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
	transition: opacity 0.4s, transform 0.4s;
	-webkit-transform: translate3d(-10%,0, 0);
	transform: translate3d(-10%,0,0);
}
figure figcaption {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
figure figcaption,
figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
figure figcaption > div {
	position: absolute;
	bottom: 12%;
	left: 10%;
	padding: 0;
	width: 80%;
	height: 25%;
}
figure h3::after,
figure h9::after {
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 90%;
	height: 1px;
	background: #fff;
	content: "";
	transform:scale(0.5,0.5);
	transition: transform 0.5 s;
}
figure h1,
figure h3,
figure h6,
figure h9,
figure h3::after,
figure h9::after {
	opacity: 0.7;
	-webkit-transform: translate3d(0,150%,0);
	transform: translate3d(0,150%,0);
}
figure h9,
figure h3 {
	color: rgba(255,255,255,1);
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
figure:hover h1,
figure:hover h3,
figure:hover h9,
figure:hover h6 {
	color: rgba(255,255,255,1);
	opacity: 1;
}
figure:hover h9::after,
figure:hover h3::after {
	opacity: .9;
    transform: scale 10,10;
	transform: scale(10,10);
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
figure h3,
figure h1,
figure h3::after,
figure h9::after {
	color: rgba(255,255,255,1);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}
	
/*figure:hover div {
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	-ms-transform:scale(1.3);
	-o-transform:scale(1.3);
	transform:scale(1.3);
}*/
figure:hover img {
	opacity: 0.75;
}
figure:hover img,
figure:hover h9,
figure:hover h6,
figure:hover h1,
figure:hover h3,
figure:hover h3::after,
figure:hover h9::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
figure:hover h6,
figure:hover h1 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}
figure:hover h9::after,
figure:hover h3::after {
	-webkit-transition-delay: 0.02s;
	transition-delay: 0.02s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}
/*===================================================================================================*/
.texto {
	padding:0 1em 0 1.2em;
	text-align:left;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto; 
}
.textoDerecho {
	padding:3em 4em 2em 12%;
	text-align:left;
}
.textoDerecho h6{
	column-count: 2;
	column-gap: 40px;
	column-rule: 0px solid #ccf;
	-webkit-column-count: 2;
	-webkit-column-gap: 40px;
	-webkit-column-rule: 0px solid #ccf;   
}
.textoDerechoPie {
	padding:2em 4em 2em 12%;
	text-align:left;
}
.actividad {
	padding:1em 0 1em 0;
	text-align:left;
}

.titulo {
	float:left;
	padding-top:22%;
	text-transform:uppercase;
}
h13::after {
	float:left;
	margin:0.1em 5em 0.1em -1.5em;
	width: 120%;
	height: 1px;
	background: #444;
	content: "";
}
.subtitulo {float:left;}
.subtitulo a {color:#888;}
.subtitulo a:hover {color:#000;}
.datos {margin: 0 auto; padding:0;}
	
.logo {
	position:relative;
	width:100%;
	height:1px;
	padding-bottom:50%;
	margin:2.5em 0 1.5em 0;
	float:right;
	opacity:1;
	z-index:20;	
	background-image:url('../imagenes/logoDsignio.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
}
.logo img{	width: 70%;}

.actividad {margin: 1em 0 1.5em 0; border-top:1px solid #888; border-bottom:1px solid #888; text-align:center}

.separador {margin: 1.5em 0 1.5em 0; border-top:1px solid #888}

.clearfloat {
	clear:both;
	height:0;
}
@media screen and (max-width: 4000px){
	h1 	{font-size:24px}
	h2 	{font-size:26px}
	h3 	{font-size:32px}
	h11 {font-size:24px}
	h12 {font-size:28px}
	h13 {font-size:38px}
	h6 	{font-size:24px}
	h7 	{font-size:26px}
	h8 	{font-size:30px}
	h14	{font-size:22px}
	.bandaIzquierda {width:19%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:23%;width: 74%;}
	figure.proyecto {width: 33.333334%;}
	figure.prensa {width: 25%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:640px}
	.textoDerecho h6{column-count: 2;column-gap: 5%;column-rule: 0px solid #ccf;}
@media screen and (max-width: 2000px){
	h1 	{font-size:24px}
	h2 	{font-size:26px}
	h3 	{font-size:32px}
	h11 {font-size:24px}
	h12 {font-size:28px}
	h13 {font-size:38px}
	h6 	{font-size:24px}
	h7 	{font-size:26px}
	h8 	{font-size:30px}
	h14	{font-size:22px}
	.bandaIzquierda {width:20%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:24%;width: 74%;}
	figure.proyecto {width: 33.333334%;}
	figure.prensa {width: 25%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:640px}
	.textoDerecho h6{column-count: 1}
}
@media screen and (max-width: 1500px){
	h1 	{font-size:22px}
	h2 	{font-size:24px}
	h3 	{font-size:28px}
	h11 {font-size:22px}
	h12 {font-size:26px}
	h13 {font-size:36px}
	h6 	{font-size:22px}
	h7 	{font-size:24px}
	h8 	{font-size:28px}
	h14	{font-size:20px}
	.bandaIzquierda {width:20%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:24%;width: 74%;}
	figure.proyecto {width: 33.333334%;}
	figure.prensa {width: 25%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:590px}
}

@media screen and (max-width: 1200px){
	h1 	{font-size:20px}
	h2 	{font-size:22px}
	h3 	{font-size:26px}
	h11 {font-size:20px}
	h12 {font-size:24px}
	h13 {font-size:34px}
	h6 	{font-size:20px}
	h7 	{font-size:22px}
	h8 	{font-size:26px}	
	h14	{font-size:18px}
	.bandaIzquierda {width:19%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:23%;width: 75%;}
	figure.proyecto {width: 33.333334%;}
	figure.prensa {width: 25%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:550px}
}
@media screen and (max-width: 1150px){
	.bandaIzquierda {width:20%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:24%;width: 74%;}
	figure.proyecto {width: 33.333334%;}
	figure.prensa {width: 25%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:490px}
}
@media screen and (max-width: 1100px){
	h1 	{font-size:18px}
	h2 	{font-size:20px}
	h3 	{font-size:24px}
	h11 {font-size:19px}
	h12 {font-size:23px}
	h13 {font-size:33px}
	h6 	{font-size:19px}
	h7 	{font-size:21px}
	h8 	{font-size:25px}
	h14	{font-size:17px}
	.bandaIzquierda {width:21%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:25%;width: 73%;}
	figure.proyecto {width: 33.333334%;}
	figure.prensa {width: 25%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:440px}
}
@media screen and (max-width: 1000px){
	h1 	{font-size:20px}
	h2 	{font-size:26px}
	h3 	{font-size:21px}
	h11 {font-size:18px}
	h12 {font-size:22px}
	h13 {font-size:32px}
	h6 	{font-size:18px}
	h7 	{font-size:20px}
	h8 	{font-size:24px}
	h14	{font-size:16px}
	.bandaIzquierda {width:22%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:26%;width: 72%;}
	figure.proyecto {width: 50%;}
	figure.prensa {width: 33.333334%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.video {height:400px}
}
@media screen and (max-width: 900px){
	h1 	{font-size:18px}
	h2 	{font-size:24px}
	h3 	{font-size:20px}
	h11 {font-size:16px}
	h12 {font-size:20px}
	h13 {font-size:30px}
	h6 	{font-size:16px}
	h7 	{font-size:18px}
	h8 	{font-size:22px}
	h14	{font-size:14px}
	.bandaIzquierda {width:23%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:27%;width: 71%;}
	figure.index {width: 25%;}
	figure.proyecto {width: 50%;}
	figure.prensa {width: 33.333334%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 1px;}
	.bandaSuperior img {width: 12%; margin: 10% 0 6% 0;}
	.video {height:360px}
}
@media screen and (max-width: 820px){
	h1 	{font-size:28px}
	h2 	{font-size:32px}
	h3 	{font-size:30px}
	h11 {font-size:14px}
	h12 {font-size:18px}
	h13 {font-size:28px}
	h6 	{font-size:14px}
	h7 	{font-size:16px}
	h8 	{font-size:20px}
	h14	{font-size:12px}
	.bandaIzquierda {width:24%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:28%;width: 70%;}
	figure.index {width: 50%;}
	figure.proyecto {width: 100%;}
	figure.prensa {width: 33.33334%;}
	figure.prensaInt {width: 33.334%;}
	figure h3::after {height: 2px;}
	.bandaSuperior img {width: 25%;margin: 15% 0 10% 0;}
	.video {height:340px}
}
@media screen and (min-width: 700px) and (max-width: 760px){
	h1 	{font-size:24px}
	h2 	{font-size:32px}
	h3 	{font-size:28px}
	h11 {font-size:15px}
	h12 {font-size:17px}
	h13 {font-size:26px}
	h6 	{font-size:13px}
	h7 	{font-size:15px}
	h8 	{font-size:19px}
	h14	{font-size:11px}
	.bandaIzquierda {width:24%;}
	.bandaDerecha, .bandaDerechaFija {margin-left:29%;width: 69%;}
	figure.index {width: 50%;}
	figure.proyecto {width: 100%;}
	figure.prensa {width: 50%;}
	figure.prensaInt {width: 50%;}
	figure h3::after {height: 2px;}
	.video {height:320px}
}
@media screen and (max-width: 700px){
	h1 	{font-size:20px}
	h2 	{font-size:32px}
	h3 	{font-size:24px}
	h11 {font-size:15px}
	h12 {font-size:17px}
	h13 {font-size:26px}
	h6 	{font-size:13px}
	h7 	{font-size:15px}
	h8 	{font-size:19px}
	h14	{font-size:11px}
	
	figure.index {width: 50%;}	
	figure.proyecto {width: 100%;}
	figure.prensa {width: 50%;}
	figure.prensaInt {width: 50%;}
	figure h3::after, figure h9::after {height: 2px; opacity: 1;}
	.video {height:300px}

	.bandaDerecha, .bandaDerechaFija {width: 96%; margin: 0px 2%}
	
	figure h1, figure h3, figure h9, figure h6 {color: rgba(255,255,255,1);	opacity: .9;  transform: scale 1,1; transform: scale(1,1); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}
	
	
	figure.proyecto img {opacity: 0.8;}
	
	
	.bandaIzquierda {
    width: 50%;   
    padding: 1%;
    /*position: fixed;*/
    background: white;
		z-index: 99;
		position: absolute;
    height: auto;
    min-height: 100%;


}

	
	
}
#closemenum{
		display:none;
	  position: absolute;
    right: 15px;
    top: 15px;
    background: #ffffff85;
    width: 30px;
    height: 30px;
    font-size: 30px;
    text-align: center;
    font-weight: 900;
    border-radius: 50px;
    cursor: pointer;
		z-index: 99;

}

	  #dmenu{height: 100px;
    width: 100%;
		transition: all 1s ease-out;
		display:none;}
		
		#menum{
		background-image: url(../imagenes/menud.png);
    background-size: 35px 35px;
    background-position: left;
    background-repeat: no-repeat;
    width: 110px;
    height: 50px;
    text-align: right;
    font-size: 25px;
    color: #877d74;
    cursor: pointer;    
    font-weight: 400;
    line-height: 51px;
    margin-left: 15px;
    float: left;
    margin-top: 25px;
		transition: all 0.2s ease-out;
		}
		
		#dmenulogo{
    background-image: url(../imagenes/logoDsignio.jpg);
		width: 70px;
    height: 70px;
    background-size: contain;
    display: inline-block;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
    transition: all 0.2s ease-out;
		}