@charset "utf-8";
/* CSS Document */

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}


.banner_microkosmos {
background-image: url(images/banner_microkosmos.jpg?v=1.4);
}
.banner_hipercubo {
background-image: url(images/banner_hipercubo.jpg?v=1.3);
}
.banner_mir {
background-image: url(images/banner_mir.jpg?v=1.4)
}
.banner_irdin {
background-image: url(images/banner_irdin.jpg?v=1.6);
}
.banner_mantra {
background-image: url(images/banner_mantra.jpg?v=1.6)
}
.banner_humano {
background-image: url(images/banner_humano.jpg?v=1.4);
}


.radio {
vertical-align: middle; 
margin-right: 25px;
}
.wrapper {
width: 100%;
min-height:100%;   
	position:relative;
}

.header {
	width: calc(100% - 150px);
	padding: 0 75px 0 75px;
	height: 75px;
	background-color:#333;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.header_left {
float: left; 
height: 100%; 
display: table;
}
.header_right {
float: right; 
display: table; 
height: 100%;
}
.logo {
width: 180px;
height: auto;
}
.footer {
	position:absolute;
	bottom:0;
	width:calc(100% - 150px);
	padding: 0 75px 0 75px;
	height:150px;
	text-align: center;
	background-color: #FFF;
	display: table;
}
.align {
vertical-align: middle;
display: table-cell;
}
.banner {
width: 100%;
}
.contenido {
padding: 150px 75px 150px 75px;
width: calc(100% - 150px);
}
.main_banner {
position: absolute !important;
background-color: #CCC;
left: 0;
right: 0;
top: 75px;
bottom: 150px;
border-bottom: solid 1px #ccc;
}
.slide {
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
.visor_bio, .visor_musica, .visor_media, .visor_contacto {
display: none;
}
.visor_bio, .visor_musica {
background-image: url(images/img_about.jpg); 
background-position: left 50px top 125px; 
background-repeat: no-repeat; 
background-size: 40% auto; 
background-attachment: fixed;
}
.visor_musica {
background-image: url(images/img_media.jpg); 
background-position: right -50px top 125px; 
}


	.content_bio {
	float: right; 
	width: 50%;
	}	
		
		
/*/////////////////////////////////////////////*/

.texto{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#666;
	line-height:16px;
}
.texto_blanco{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#FFF;
	line-height:16px;
}

.texto_footer{
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	line-height:16px;
}

.titulo {
	font-family: 'Abel', sans-serif;
	font-size: 25px;
	color:#666;
	text-transform:uppercase;
	line-height:24px;
}
.titulo_blanco {
	font-family: 'Abel', sans-serif;
	font-size: 25px;
	color:#FFF;
	text-transform:uppercase;
	line-height:24px;
}	
.t1{
	color:#666;
	text-decoration:none;
	font-family: 'Abel', sans-serif;
	font-size: 15px;
	text-transform:uppercase;
	outline:none;
}
/*/////////////////////////////////////////////*/

.menu {
	font-family: 'Abel', sans-serif;
	font-size: 25px;
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
	padding-right:25px;
	vertical-align: middle;
	height: 30px;
}	

.menu:hover {
	color:#999;
}

.contact {
	cursor:pointer;
	display:inline-block;
	height:30px;
	width:30px;
	background-image:url(images/icon_email.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px auto;
	color:transparent;
	text-decoration:none;
	outline:none;
	vertical-align: middle;
}



.fb, .in, .yt, .sp, .am {
	cursor:pointer;
	display:inline-block;
	height:30px;
	width:30px;
	margin: 0 20px 0 20px;
	text-decoration:none;
	color: transparent;
	vertical-align: middle;
	outline:none;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.fb {
	background-image:url(images/icon_fb.png);
}
.in {
	background-image:url(images/icon_in.png);
}
.yt {
	background-image:url(images/icon_yt.png);
}
.sp {
	background-image:url(images/icon_sp.png);
}
.am {
	background-image:url(images/icon_am.png);
}
.icon_small {
	height:20px;
	width:20px;
		margin: 0 10px 0 10px;
}

.album {
width: calc(100% - 400px); 
margin-bottom: 75px;
}
.cover {
float: left; 
width: 400px;
}
.tracks {
float: right; 
width: calc(100% - 450px);
}
.track {
	cursor:pointer;
	display: block;
	width: 100%;
	padding: 15px 0 15px 0;
	border-top: solid 1px #CCC;
	background-image:url(images/icon_menu_black.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 20px auto;
	color:#666;
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	outline:none;
}
.detalle {
padding-bottom: 25px;
}
.like {
border:none; 
overflow:hidden;
width:125px; 
height:21px; 
margin-right: 25px; 
vertical-align: middle;
}

.icon_nav {
position: absolute;
right: 25px;
display: none;
top: 15px;
}
/*

.download{
	cursor:pointer;
	display:block;
	height:30px;
	width:265px;
	background:url(images/download.png) center right no-repeat;
	color:#666;
	text-decoration:none;
	padding-top:10px;
	font-family: 'Abel', sans-serif;
	font-size: 15px;
	text-transform:uppercase;
	outline:none;
}
.download:hover{
	background:url(images/downloadr.png) center right no-repeat;
	color:#ccc;
}


.letra{
	cursor:pointer;
	display:block;
	height:27px;
	width:265px;
	background:url(images/letra.png) center right no-repeat;
	color:#666;
	text-decoration:none;
	padding-top:13px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	outline:none;
}
.letra:hover{
	background:url(images/letrar.png) center right no-repeat;
	color:#ccc;
}
*/
.link {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#002b45;
	text-decoration:underline;
}
.link:hover {
	color:#b2a496;
}

.credito {
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#666;
	text-decoration:none;
	
}
credito:hover {
	color:#333;
}


/* ////////////////////////////////// */


.form_field {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	height: 30px;
	width: 300px;
	border: solid 1px #999;
	outline:none;

}

.form_area {
	resize:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	line-height: 16px;
	height: 120px;
	width: 300px;
	overflow:hidden;
	border: solid 1px #999;
	outline:none;
		
}
.boton {
	border: none;
	width:80px;
	height:30px;
	cursor:pointer;
	font-family: 'Abel', sans-serif;
	font-size: 25px;
	color:#666;
	text-transform:uppercase;
	background:#FFF;
}
.boton:hover {
	color:#999;
}


.pop_v1, .pop_v2, .pop_v3, .pop_v4, .pop_v5 {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.75);
text-align: center;
position: fixed;
z-index: 9000;
}
.pop_align {
width: 100vw;
height: 100vh;
display: table;
}
.close {
position: absolute;
top: 50px;
right: 50px;
}
.close_nav {
position: absolute;
top: 25px;
right: 25px;
display: none;
}
.gallery_wrapper {
width: calc(100% - 20px); 
margin: 10px;
text-align: left;
line-height: 0;   
  -webkit-column-count: 2;
  -webkit-column-gap:   10px;
  -moz-column-count:    2;
  -moz-column-gap:      10px;
  column-count:         2;
  column-gap:           10px;  
}
.gallery_wrapper .photo {
  width: 100% !important;
  height: auto !important;
		margin-bottom: 10px !important;
		position: relative;
}
.play {
position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -25px; 
margin-left: -25px; 
z-index: 2;
width: 50px;
height: auto;
}




 .panelBaner {
     position:relative;
 }
 .panelBaner .bx-controls{
				display: block;
				position: absolute;
    bottom: 50px;
				width: 100%;
/*	 display:none !important;*/
	 }
		
 .bx-controls-direction {
	display: none;
	}
	.bx-wrapper .bx-pager.bx-default-pager a {
    background: rgba(255,255,255,.5);
    width: 20px;
    height: 20px;
    margin: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
				border: solid 1px #ccc;
}
	.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #FFF;
}
	
.panelBaner .bx-wrapper, .panelBaner .bx-viewport, .panelBaner .boxSlider, .panelBaner .slide{
	position:absolute !important;
	left:0px;
	top:0px;
	width:100% !important;
	height:100% !important;
}
.panelBaner .bx-wrapper{
	z-index:0;
} 
.panelBaner .slide .link{
    position:absolute;
    left:0px;
    bottom:0px;
    height:100%;
    width:100%;
    z-index:15;
}

@media screen and (max-width: 1050px) {

.radio, .like {
margin-right:0;
position: absolute;
bottom: 75px;
left: 50%;
margin-left: -145px;
}
.like {
bottom: 150px;
margin-left: -62.5px
}
.header {
	width: calc(100% - 50px);
	padding: 0 25px 0 25px;
	height: 50px;
}
.footer {
	width: calc(100% - 50px);
	padding: 0 25px 0 25px;
}

.contenido {
padding: 75px 25px 150px 25px;
width: calc(100% - 50px);
}
.main_banner {
top: 50px;
}
.visor_bio, .visor_musica {
background-position: left 50px top 125px; 
background-size: 60% auto; 
background-attachment: scroll;
}
.visor_musica {
background-image: none; 
}
	.content_bio {
	width: 100%;
	padding-top: 300px;
	}	

.gallery_wrapper {  
  -webkit-column-count: 1;
  -moz-column-count:    1;
  column-count:         1;
}
.album {
width: 100%; 
margin-bottom: 50px;
}
.cover {
float: none; 
width: 100%;
margin-bottom: 25px;
}
.tracks {
float: none; 
width: 100%;
}
.header_right {
position: fixed;
top: -100vh;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.85);
display: table;
text-align: center;
}
.menu {
	display: block;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-right: 0;
}	
.logo {
width: 150px;
}
.fb, .in, .yt, .sp, .am {
	margin: 0 10px 0 10px;
		height:20px;
	width:20px;
}
.contact {
margin: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	display:block;
}
.like {
margin-right: 0; 
}
.close_nav {
display: block;
}
.icon_nav {
display: block;
}



}

@media screen and (max-width: 600px) {

.banner_microkosmos {
background-image: url(images/banner_microkosmos_v.jpg?v=1.2);
}
.banner_hipercubo {
background-image: url(images/banner_hipercubo_v.jpg?v=1.2);
}
.banner_mir {
background-image: url(images/banner_mir_v.jpg?v=1.2)
}
.banner_irdin {
background-image: url(images/banner_irdin_v.jpg?v=1.2);
}
.banner_mantra {
background-image: url(images/banner_mantra_v.jpg?v=1.3)
}
.banner_humano {
background-image: url(images/banner_humano_v.jpg?v=1.2);
}

}

@media (min-width: 1800px) {
body {
	zoom: 125%;
	-moz-zoom: 125%;
	-webkit-zoom: 125%;
}	
}

@media (min-width: 2100px) {
body {
	zoom: 150%;
	-moz-zoom: 150%;
	-webkit-zoom: 150%;
}
}

@media (min-width: 2500px) {
body {
	zoom: 175%;
	-moz-zoom: 175%;
	-webkit-zoom: 175%;
}
}

@media (min-width: 3000px) {
body {
	zoom: 200%;
	-moz-zoom: 200%;
	-webkit-zoom: 200%;
}
}