/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< GENERAL >>>>>>>>>>*/	
@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';
@import 'https://fonts.googleapis.com/css?family=Muli:300,400,600,700';

html, body {
	font-family: 'Muli', sans-serif;
	font-weight:400;
	font-size:20px;
	height: auto;
	min-height:100%;
	line-height:1.3em;
	position: relative;
	}
	@media only screen and (max-width:1500px) {
	div.inner{
	font-size: 16px;
	}}



h1, h2, h3, h4, h5, h6{
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	letter-spacing: 0.04em;
	}

h1, h2, h3, h4, h5, h6 {
	color: inherit;
	margin:0px;
	padding: 0px;
	line-height:1.3em;
	width: 100%;
	}

h1 {font-size:2em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1em;}

img{
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

a, a:visited{
	color:inherit;
	margin:0px;
	padding: 0px;
	text-decoration:none;
	}

a:hover {	
	text-decoration:none;
	}

p {
	color: inherit;
	float: left;
	height:auto;
	line-height:1.2em;
	margin: 0px;
	padding:20px 0px;
	width: 100%;
	}

p strong{
	font-weight:700;
	}

ul, ol {
	float: left;
	height: auto;
	margin:15px 0px 15px 18px;
	padding: 0px;
	width:100%;
	}

ul li, ol li{
	float: left;
	height: auto;
	line-height:1.4em;
	margin: 0px;
	padding: 0px;
	width:100%;
	}

ul li { list-style:none; }
ol li { list-style:decimal; }

hr {
	border:0px;
	padding:0px;
	margin:15px 0px;
	float: left;
	height:1px;
	width: 100%;
	}

/* 
---------- // z index // ------------------- */
body {z-index:1; }
div.banner { z-index: 2; }
header{ z-index: 9999; }
.homepage-hero-module { z-index: 99;}
div.toggle{z-index:7;}
div.toggle input#togglebutton{z-index:8;}
div.toggle input#togglebutton[type=checkbox] + label {z-index:9;}
footer{ z-index: 99; }



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ESTRUCTURA >>>>>>>>>>*/
div.contenedor,
header,
section,
article,
footer{ 
	display:block;
	float:left;
	height:auto;
	width:100%;
	}

div.in, 
div.inheader,
div.inner{
	display:block;
	height:auto;
	float:none;
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	width:96%;
	}

div.in{ 
	width:96%; 
	}


div.inheader{
	width:88%;
	}
	@media only screen and (max-width:1320px) {
	div.inheader{
	width:96%;
	}}

div.inner{
	width:1000px;
	}
	@media only screen and (max-width:1040px) {
	div.inner{
	width:96%;
	}}


div.inheader {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items:center;
	}
	@media only screen and (max-width:920px) {
	div.inheader {
	flex-direction:column;
	}}
	@media only screen and (max-width:620px) {
	div.inheader {
	flex-direction: row;
	justify-content:space-between;
	}}

h1{
	background-color: rgba(0,0,0, 0.5);
	border: 2px solid #fff;
	float: none;
	font-size:2em;
	padding:10px 20px;
	text-align: center;
	height: auto;
	width:auto;
	text-transform:uppercase;
	z-index: 999;
	}
	@media only screen and (max-width:1320px) {
	h1{
	font-size: 1.9em;
	}}
	@media only screen and (max-width:1040px) {
	h1{
	font-size: 1.8em;
	}}
	@media only screen and (max-width:620px) {
	h1{
	padding:10px 0px;
	text-align: center;
	width:90%;
	}}


h2{ 
	float: none;
	font-weight:700;
	font-size: 1.6em;
	margin:92px auto 10px auto;
	text-align: center;
	width:100%;
	}
	@media only screen and (max-width:920px) {
	h2{
	margin:150px auto 10px auto;
	}}
	@media only screen and (max-width:620px) {
	h2{
	margin:85px auto 10px auto;
	}}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< HEADER >>>>>>>>>>*/
header {
	background-color:#fff;
	height:auto;
	padding:15px 0px;
	margin:0px;
	position:fixed;
	z-index:9999999;
	}
	@media only screen and (max-width:920px) {
	header{
	padding:10px 0px;
	}}

body#index header {
	position:relative;
	}





body#index header.fijo { 
	position:fixed;  
	top: 0;
	} 

/*
#about .fijo,
#fashion .fijo,
#portrait .fijo,
#panographs .fijo,
#series .fijo,
#contact .fijo{ width: 100%; }

#index .fijo{ width: 97%; }

*/
a.logotipo{	
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	font-size:1em;
	border:2px solid #000;
	letter-spacing: 0.04em;
	padding: 14px 15px;
	margin: 0px;
	height: auto;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	width:auto;
	}
	@media only screen and (max-width:1040px) {
	a.logotipo{
	font-size:0.8em;
	padding:10px 10px;
	}}
	@media only screen and (max-width:920px) {
	a.logotipo{
	font-size:1em;
	padding:10px 10px;
	}}
	@media only screen and (max-width:620px) {
	a.logotipo{
	font-size:0.8em;
	padding:2px 10px;
	}}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< NAV >>>>>>>>>>*/
nav {
	display:block;
	text-align: center;
	height:auto;
	width:auto;
	}
	@media only screen and (max-width:920px) {
	nav{
	width:100%;	
	}}
	@media only screen and (max-width:620px) {
	nav {
	background-color:#fff;
	border-top:1px solid #dedede;
	font-size:1.4em;
	visibility:hidden;
	position:fixed;
	height:100vh;
	bottom:0px;
	top:70px;
	left:0px;
	right:0px;
	bottom:0px;
	opacity:0.0;
	width:100%;
	transition:all 0.2s;
	z-index:9;
	}}



nav ul{
	text-align: center;
	float:none;
	margin:0px;
	padding:0px;
	width:100%;
	}
	@media only screen and (max-width:620px) {
	nav ul{
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin-top:50px;
	padding:0px 10%;
	z-index:999;
	width:80%
	}}




nav ul li{
	display:inline-block;
	text-align:center;
	float:none;
	padding:0px 10px;
	margin:0px;
	width:auto;
	}
	@media only screen and (max-width:620px) {
	nav ul li{
	border-bottom:1px solid #ddd;
	margin-left:0px;
	padding:0px 0px;
	}}




nav ul li a{
	font-family: 'Muli', sans-serif;
	font-style:1em;
	height: 30px;
	line-height:30px;
	padding:0px 5px;
	margin:0px;
	position:relative;
	width: auto;
	}
	@media only screen and (max-width:1500px) {
	nav ul li a{
	font-size:0.7em;
	}}
	@media only screen and (max-width:920px) {
	nav ul li a{
	font-size:0.7em;
	}}
	@media only screen and (max-width:620px) {
	nav ul li a{
	height:52px;
	line-height:52px;
	}}


nav ul li a:hover span{
	transform: translate(0px, 0px);
	opacity:1.0;
	}
	@media only screen and (max-width:620px) {
	nav ul li a:hover span{
	display:none;
	}}

nav ul li a span{
	background-color:#535353;
	bottom:0px;
	height:1px;
	left:0px;
	opacity:0.0;
	position: absolute;
	transform: translate(0px, 15px);
	width:100%;
	}

nav ul li a,
nav ul li a span {
	transition:all 0.3s;
	-webkit-transition:all 0.3s ; /* Safari and Chrome */
	-o-transition:all 0.3s ;   /* Opera */
	-moz-transition:all 0.3s ; /* Mozilla Firefox */
	-ms-transition:all 0.3s;   /* Internet Explorer */
	}

nav ul li.hide{
	display: none;
	}
	@media only screen and (max-width:620px) {
	nav ul li.hide{
	font-size: 1.3em;
	float: left;
	display: block;
	}}

nav ul li.hide a{
	margin:0px 0px 0px 4px;
	padding:8px 10px;
	}



ul.social{
	display:block;
	margin:0px;
	padding:0px;
	width:auto;
	}
	@media only screen and (max-width:920px) {
	ul.social{
	text-align: center;
	width:100%;
	}}


ul.social li{
	display: inline-block;
	float:left;
	width:auto;
	}
	@media only screen and (max-width:920px) {
	ul.social li{
	float: none;
	}}



ul.social li a{
	font-family:'Muli', sans-serif;
	float:left;
	height:30px;
	line-height:30px;
	margin:0px 0px 0px 5px;
	padding:0px 4px;
	width: auto;
	}
	@media only screen and (max-width:1040px) {
	ul.social li a{
	margin:0px 0px 0px 3px;
	}}
	@media only screen and (max-width:620px) {
	header ul.social{
	display: none;
	}}


/*
ul.social li:nth-child(1){width:30%;}
ul.social li:nth-child(2),
ul.social li:nth-child(3){width:35%;}
*/



ul.c-social{
	display: block;
	float:right;
	margin: 0px;
	padding:0px;
	width: auto;
	}
	@media only screen and (max-width:920px) { 
	ul.c-social{
	float:left;
	}}



ul.c-social{ 
	margin: 7px 0px 0px 0px;
	}


ul.c-social li{
	display: inline-block;
	float: right;
	width: auto;
	}


ul.c-social li a {
	font-family:'Muli', sans-serif;
	float: right;
	height: 30px;
	line-height:30px;
	padding:0px 4px;
	width: auto;
	}



ul.c-social li a{ margin: 0px 0px 0px 15px; }

ul.c-social li a.icono-f{  font-size: 1.7em;  }
ul.c-social li a.icono-i{ font-size: 1.9em; }
ul.c-social li a.icono-b{ 
	font-size: 1.7em;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< VIDEO >>>>>>>>>>*/
.homepage-hero-module {
	border-right: none;
    border-left: none;
    margin-top:20px;
    overflow: hidden;
    position: relative;
    width:100%;
	}

.video-container {
	background-color:#000;
	display: -webkit-flex; /* Safari */
	-webkit-flex-direction: column; /* Safari 6.1+ */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    -webkit-justify-content: center; 
    -webkit-align-items: center; /* Safari 7.0+ */
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	justify-content:center;
	align-items:center;
    position: absolute;
    right:0px;
    bottom:0px;
    left:0px;
    top:0px;
    height:auto;
    width:auto;
    overflow: hidden;
	}
	@media only screen and (max-width:620px) {
	.video-container video{
	display:none;
	}}

a.buttonNormal{
	background-image: url(../svg/arrow.svg);
	background-size:100% auto;
	display:block;
	margin-top:20px;
	top:60%;
	text-align: center;
	z-index: 999;
	height:60px;	
	width:60px;
	}




.no-video .video-container video,
.touch .video-container video {
    display: none;
	}

.no-video .video-container .poster,
.touch .video-container .poster {
	background-color:#000;
    display: block !important;
	}


.video-container .poster img {
	left:0;
    width: 100%;
    bottom: 0;
    position: absolute;
	}

.video-container .filter {
	display:none;
	background: rgba(0, 0, 0, 0.4); 
    height:auto;
    width: 100%;
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    z-index: 100;
	}

.video-container video {
    position: absolute;
    z-index:0;
    bottom:0;
    width:100%;
	}

.video-container video.fillWidth {
	object-fit:cover;
	height:100%;
	padding:0px;
	margin:0px;
	width:100%;
	}

.hidden{ display: none; }

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< GALLERY >>>>>>>>>>*/
#portrait div.columnas,
#fashion div.columnas,
#series div.columnas{ margin-top: 0px; }

div.columnas{
	float: left;
	height: auto;
	margin:85px 0px 30px 0px;
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
    -moz-column-gap: 2%;
    -webkit-column-gap: 2%;
    column-gap:2%;
	width: 100%;
	}
	@media only screen and (max-width:820px) {
	div.columnas{
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	}}
	@media only screen and (max-width:620px) {
	div.columnas{
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	}}



div.contenedor.ls div.columnas {
	margin:5px 0px 30px 0px;
	}


div.columnas-panographs{
	float: left;
	height: auto;
	margin: 0px 0px 30px 0px;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
    -moz-column-gap: 2%;
    -webkit-column-gap: 2%;
    column-gap:2%;
	width: 100%;
	}
	@media only screen and (max-width:820px) {
	div.columnas-panographs{
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	}}


img.prueba{
	display: inline-block; 
	height: auto;
	margin-bottom:12px;
	width: 100%;
	}

a.onclick,
a.gallery-image{
	display: inline-block; 
	height: auto;
	margin-bottom:12px;
	width: 100%;
	}

a.onclick img,
a.gallery-image img,
a.onclick picture{
	float: left;
	height: auto;
	width: 100%;
	}

a.onclick:hover{
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< SECTION >>>>>>>>>>*/
section {
	margin: 0px;
	}

body#contact section{
	display: block;
	float: left; 
	width:59%;
	}
	@media only screen and (max-width:920px) {
	body#contact section{
	width:100%;
	}}

body#contactok section{
	width: 100%;
	}

body#contactok article h2{
	float: left;
	display: block;
	margin: 100px 0px 160px 0px;
	text-align: center;
	width: 100%;
	}

body#contact div.inner iframe{
	margin-bottom: 20px;
	display: block;
	float: left;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ARTICLE >>>>>>>>>>*/

article p { 
	margin: 10px 0px 20px 0px;
	text-align: justify;
	width: 100%;
 	}

article img,
article picture{
	height: auto;
	display: block;
	float: left;
	width: 100%;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< TABS >>>>>>>>>>*/
div.box-tab {
	display:flex;
	float:none;
	flex-direction:row-reverse;
	flex-wrap: wrap; 
	justify-content:flex-start;
	margin-top:0px;/* set */
	padding:0px;/* set */
	padding-top:60px;
	width:100%;/* set */
	}

div.box-tab > input[type=radio] {
	display: none;
	}

div.box-tab > label {
	border-bottom:1px solid transparent;/* set */
	color:#bbb;/* set */
	display:block;
	height:50px;
	line-height:50px;
	font-size:0.8em;
	margin:0px 0px -1px 0px;
	padding:0px 10px;/* set */
	text-align:center;
	width:auto;
	z-index:10;
	transition:all 0.2s;
	}
	@media only screen and (max-width:920px) {
	div.box-tab > label{
	font-size:0.7em;
	}}


div.box-tab > label:hover {
	color: #888;/* set */
	cursor: pointer;
	}


div.box-tab > input:checked + label {
	color: #555;/* set */
	border-bottom: 1px solid #000;/* set */
	}



#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6{
  display:block!important;
	}


div.tab-contenido{
	display:none;
	padding:20px 0px; /* set */
	border-top:1px solid #dedede; /* set */
	width:100%;
	}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ASIDE >>>>>>>>>>*/
aside {
	margin: 25px 0px 30px 0px;
	display: block;
	float: right;
	padding-left:2%;
	border-left:1px solid #e9e9e9; 
	width: 36.5%;
	}
	@media only screen and (max-width:920px) {
	aside{
	border-left:0px solid #e9e9e9;
	float: left;
	margin:30px 0px 40px 0px;
	padding-left:0%;
	width:100%;
	}}


aside p{
	text-align: right;
	margin: 0px;
	padding: 0px;
	width: 100%;
	}
	@media only screen and (max-width:920px) {
	aside p{
	text-align:left;
	}}
	


aside p span{
	font-size: 0.7em;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FOOTER >>>>>>>>>>*/
footer {
	font-size:0.6em;
	padding:10px 0px;
	}

footer div.in {
	padding:0px;
	border-top:1px solid #c1c1c1;
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	flex-wrap:wrap; 
	}
	@media only screen and (max-width:720px) {
	footer div.in {
	flex-direction:column;
	justify-content:flex-start;
	}}

footer div.in p{
	width:45%;
	}
	@media only screen and (max-width:720px) {
	footer p{
	text-align: center;
	width:100%!important;
	}}


footer p:nth-child(2){
	color:#999;
	}

footer p.firma{
	text-align: right;
	}
	@media only screen and (max-width:720px) {
	footer p.firma{
	border-top:1px solid #c1c1c1;
	text-align: center;
	}}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FIRMA >>>>>>>>>>*/
p.firma a,
p.firma a:visited,
p.firma a:hover{
	cursor:text;
	display:inline-block;
	float:none;
	text-decoration: none;
	width:auto;
	}


p.firma a:hover strong{
	cursor: pointer;
	color:#000;
	}


p.firma a i,
p.firma a span,
p.firma a strong{
	height: 20px;
	line-height: 20px;
	float: left;
	}

p.firma a i,
p.firma a strong {
	font-style: normal;
	font-weight: normal;
	}


p.firma a span{
	background-image: url(../svg/icon-ls.svg);
	background-size:40px 20px;
	background-position:0px 0px;
	display:inline-block;
	/*background-color: #da1f43;*/
	border-radius:50%;
	float:left;
	height:20px;
	margin:0px 3px 0px 3px;
	width:20px;
	}

p.firma a:hover span{
	background-color: #da1f43;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< VARIOS >>>>>>>>>>*/