@font-face {font-family: TopSecret;src: url(top_secret.ttf);}
/* Etiquetas generales */
body {
	background-color: #111 !important;
	background-image: url('../img/bg-jail.jpg');
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: fixed;
}
body, tr, td{
	font-family: "Segoe UI", Verdana;
	color: #EEE;
	margin: 0px;
}
a:link {text-decoration: none;}
a, a:visited {color: #dc0f0f; text-shadow: #000 1px 1px 2px;}
a:active {color: #dc0f0f; text-shadow: #000 0px 0px 1px;}
a:hover {text-decoration: underline;}
iframe{max-width: 100% !important;}
input[type="text"],input[type="email"],textarea{
	font-family: "Segoe UI";
	font-weight: lighter;
	font-size: 1.2em;
	padding: 5px;
	color: #666;
	border: 1px solid #CCC;
}
input[type="text"]:focus,input[type="email"]:focus,textarea:focus{
	color: #000;
	border: 1px solid #09F;
	outline: 0px;
}
input[type="submit"],input[type="reset"],input[type="button"]{
	padding: 10px;
	font-size: 1.2em;
	background-color: #dc0f0f;
	color: #FFF;
	text-shadow: #000 1px 1px 1px;
	box-shadow: #000 1px 1px 5px 0px;
	border: 0px;
	cursor: pointer;
	-webkit-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  transition:all 0.1s ease-out;
}
input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background-color: #09F;}

/* CONTENT */
#content {margin: auto; position: relative;  min-width: 800px;}

/* HEADER */
#header {

	height: 250px;
	background-image: url('../img/cabecera-nosotros.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: static;
	position: relative;
	z-index: 3;
}

#banner {
	width: 300px;
	background-size: 100%;
	height: 110px;
	background-image: url('../img/logoEnteroTransparente2.png');
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 49%;
	z-index:2;
}

#header #share {position: absolute; top: 185px; right: 0px;}
#header #share ul {list-style: none; padding-left: 0px; margin-top: 14px !important;}
#header #share ul li {
	background-size: 40px;
	width: 40px;
	height: 40px;
	display: inline;
	float: left;
	cursor: pointer;
	position: relative;
	margin-right: 10px;
	-webkit-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  transition:all 0.1s ease-out;
	}
#header #share ul li:hover {margin-top: -3px;}

#share #facebook {background-image:url('../img/facebook.PNG');}
#share #twitter {background-image:url('../img/twitter.PNG');}
#share #tuenti {background-image:url('../img/tuenti.PNG');}
#share #myspace {background-image:url('../img/myspace.PNG');}
#share #instagram {background-image:url('../img/instagram.PNG');}
#share #youtube {background-image:url('../img/youtube.PNG');}
#share #spotify {background-image:url('../img/spotify.png');}

/* MENU HORIZONTAL */
#menu {
	text-align: center;
	margin: auto;
	z-index: 10002;
	display: inline-table;
	line-height: 32px;
}
.menu_fixed{
	position: fixed !important;
	top: 0px !important;
	border-bottom: 1px solid #000 !important;
	background-image: url('../img/bg_menu2.jpg');
	width: 100%;
	display: block !important;
	margin-left: 0px;
}

#menu #nav_menu{
	background-size: 100%;
	width: 50px;
	height: 50px;
	float: right;
	display: none;
	background-image: url('../img/nav_menu1.png');
	cursor: pointer;
}
#menu #nav_menu:hover{background-color: rgba(0,0,0,0.6);}
#menu .activo {color: #dc0f0f; background-image: url('../img/bg_menu2.jpg'); background-size: auto;}

#menu #logo_menu{
	background-image: url('../img/logoEnteroTransparente2.png');
	background-size: 100%;
	width: 100px;
	height: 30px;
	float: left;
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	display: none;
}
#menu ul {list-style: none; padding: 0px; margin: 0px; margin: auto;}
#menu ul a {color: #FFF; text-transform: uppercase;}
#menu ul li {
	font-family: TopSecret;
	margin-top: 10px;	
	padding: 10px 30px 10px;
	font-size: 1.3em !important;
	height: 30px;
	cursor: pointer;
	float: left;
	display: inline;
	margin: 0px;
	-webkit-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  transition:all 0.1s ease-out;
	}
#menu ul li:hover {color: #dc0f0f;}
#menu ul .activo {color: #FFF;-webkit-box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,1);-moz-box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,1);box-shadow: inset 0px 0px 15px 5px #000;}

/* FOOTER */
#footer {
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	margin: auto;
	color: #EEE;
	font-size: 0.7em;
	clear: both;
	display: block;
}

/* PAGE */
#page {
	margin: auto;
	background: none;
	margin-top: -4px;
	padding: 40px;
}

/* PAGE - Estructura pagina inicial */
#page #container {margin: 0px auto; min-width: 700px; max-width: 1200px;}
#page #left {float: left; width: 50%; position: relative;}
#page #right {width: 48%; max-width: 520px; float: right;}
#page #right .fb-page{-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.75);-moz-box-shadow: 0 0 20px 0 rgba(0,0,0,.75);box-shadow: 0 0 20px 0 rgba(0,0,0,.75);}
#page #right #tweets {margin-top: 30px;}
#page #right #tweets #twitter-widget-0 {height: 300px;-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.75);-moz-box-shadow: 0 0 20px 0 rgba(0,0,0,.75);box-shadow: 0 0 20px 0 rgba(0,0,0,.75);}

#paginacion {padding-top: 5px; padding-bottom: 5px; text-align: center; margin: auto;}
#paginacion p {margin-top: 0px; margin-bottom: 0px;}

/* Clases */
.centrador{
	text-align: center;
	background-image: url('../img/bg_menu2.jpg');
	height: 50px;
	-webkit-box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.45), 0px 0px 10px 4px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.45), 0px 0px 10px 4px rgba(0, 0, 0, 0.45);
	box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.45), 0px 0px 10px 4px rgba(0, 0, 0, 0.45);
}
.titulo1{font-family:TopSecret;font-size: 1.8em; border-bottom: 2px solid #CCC; width: 100%; margin-bottom: 20px; line-height: 1em; text-shadow: #000 1px 1px 2px;}
.s{}

.boton1{
	font-family: TopSecret;
	font-size: 1em;
	padding: 7px;
	background-color: #FFF;
	color: #666;
	border-radius: 5px;
	border: 1px solid #CCC;
	cursor: pointer;
	min-width: 80px;
	max-width: 200px;
	text-align: center;
	background-image: url('../img/btn-grad1.png');
	background-position: bottom;
	background-repeat: repeat-x;
	-webkit-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  transition:all 0.1s ease-out;
}
.boton1:hover{color: #dc0f0f; border-color: #E8E8E8;}
.boton1:active{color: #09F; background-color: #FFF;}

.boton2{
	font-family: TopSecret;
	font-size: 1.4em;
	padding: 7px 18px;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #111;
	-webkit-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  transition:all 0.1s ease-out;
	min-width: 90px;
	max-width: 200px;
	text-align: center;
	background-color: #111;
	box-shadow: 1px 1px 4px #000;
	color: #FFF !important;
	background-image: url('../img/bg_menu2.jpg');
	text-shadow: 1px 1px 2px #000;
	margin-bottom: 30px;
}
.boton2:hover{text-decoration: none; background-color: #333; box-shadow: 0px 0px 3px #000;}
.boton2:active{box-shadow: 0px 0px 3px #000;}

.noticia {background-color: #fff; margin-bottom: 40px; text-shadow: #000 1px 1px 1px; box-shadow: 1px 1px 5px #000; position: relative; max-width: 100%; overflow: hidden;}
.noticia .noticia-fondo {overflow: hidden; width: 100%; height: 100%; position: absolute; background-size: 100%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);}

.noticia .header {position: relative;}
.noticia .header .titulo {font-size: 1.2em; float: left; position: absolute; top: -0.1em; overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 63% !important;}
.noticia .header .fecha {text-align: right; margin-right: 10px;}
.noticia .cuerpo {background-size: 100%; padding-top: 20px; position: relative;}
.noticia .cuerpo .contenido {text-align:justify; padding: 20px; background-color: rgba(0,0,0,0.5);}
.noticia .cuerpo .img-noticia{display: inline-block; margin: 0px 20px -10px 20px; border: 4px #222; box-shadow: 1px 1px 5px #000; border-radius: 50px; width: 100px; height: 100px;}
.noticia .share {border-top: 1px solid #e8e8e8;	padding-top: 5px;}

#eventos {
	padding: 30px;border: 2px solid #111;border-radius: 20px; background: rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	}
	
.conciertos #eventos{
	height: 20em;
	overflow: hidden;
	position: relative;
	-webkit-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  transition:all 1s ease-out;
}
.conciertos #eventos #ver-mas{
	font-size: 18px;
    color: #fff;
    background-color: rgba(0,0,0,0.8);
    -webkit-box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.8);
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 0 0 1em;
	display: block;
	-webkit-transition:display 1s ease-out;
  -o-transition:display 1s ease-out;
  -moz-transition:display 1s ease-out;
  -ms-transition:display 1s ease-out;
  transition:display 1s ease-out;
}
	.conciertos #eventos #ver-mas:hover{
		cursor: pointer;
		color: #dc0f0f;
	}

#eventos .evento {font-size: 1em; font-style: italic; text-decoration: line-through;}
#eventos .evento table {border-collapse:collapse; width: 100%;}
#eventos .evento table .fecha {width: 1px; white-space:nowrap;}
#eventos .evento table tr {border-bottom: 1px solid #444;}
#eventos .evento table tr td {padding: 5px 0px 5px 0px; color: #AAA;}
#eventos .evento table .titulo {padding-left: 10px; word-break: break-word;}
#eventos .evento:nth-last-child(1) table tr {border-bottom: none;}
#eventos .prox {font-style: initial; text-decoration: none; font-size: 1.2em;}
#eventos .prox table tr td {color: #FFF !important;}

iframe.youtube {
-webkit-box-shadow: 0px 0px 30px 4px rgba(50, 50, 50, 0.45);
-moz-box-shadow:    0px 0px 30px 4px rgba(50, 50, 50, 0.45);
box-shadow:         0px 0px 30px 4px rgba(50, 50, 50, 0.45);
}

.disco .year, .disco .titulo{
	font-family: TopSecret;
    text-align: center;
	font-weight: normal;
	text-shadow: #000 1px 1px 2px;
}
.disco .titulo{font-size: 42px;margin: 0px;}
.disco .year{font-size: 36px;margin: 5px 0 20px 0;}

.discografia .disco{margin: 30px auto 90px; max-width: 80%; padding: 20px 20%; background: rgba(0,0,0,0.5);}
.discografia .disco .caratula{float: left;text-align: center;width:50%;}
.discografia .disco .caratula img{width: 380px; max-width: 100%;}
.discografia .disco iframe{display: block; margin: 0 auto;float:left;width:50%;}
.discografia .disco .texto{text-align: justify;max-width: 700px;margin: 0 auto;    padding-top: 10px;clear: both;}
.discografia .disco .youtube{margin-top: 20px;}
.discografia .disco .letras{border: 0px;background: transparent;}
	.discografia .disco .letras div {
		color: #000;
		max-width: 600px;
		margin: 20px auto;
		padding: 25px;
		border-radius: 20px;
		-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
		background: url('/img/papel.jpg');
		font-family: "Indie Flower";
		font-size: 22px;
}
	.discografia .disco .letras .ui-widget-header{background: transparent; border: 0px;}
	.discografia .disco .letras li.ui-tabs-tab{
		font-family: TopSecret;
		font-size: 1.2em;
		text-transform: uppercase;
		padding: 7px 18px;
		cursor: pointer;
		border-radius: 5px;
		border: 1px solid #111;
		-webkit-transition:all 0.1s ease-out;
	  -o-transition:all 0.1s ease-out;
	  -moz-transition:all 0.1s ease-out;
	  -ms-transition:all 0.1s ease-out;
	  transition:all 0.1s ease-out;
		text-align: center;
		background-color: #111;
		box-shadow: 1px 1px 4px #000;
		color: #FFF !important;
		background-image: url('../img/bg_menu2.jpg');
		text-shadow: 1px 1px 2px #000;
	}
	.discografia .disco .letras li.ui-tabs-tab a{padding: 0;}
	.discografia .disco .letras .ui-state-default a, 
	.discografia .disco .letras .ui-state-default a .ui-state-default a:link,
	.discografia .disco .letras .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button{
		color: #fff;
	}
	.discografia .disco .letras .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
		color: #dc0f0f  !important;
		-webkit-box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,1) !important;
		-moz-box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,1) !important;
		box-shadow: inset 0px 0px 15px 5px #000 !important;
	}
	.discografia .disco .letras .ui-state-active,.discografia .disco .letras .ui-state-focus a{
		outline : none;
	}
		
.hidden{display: none !important;}

h1.seccion{
    font-family: TopSecret;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    text-shadow: #000 2px 2px;
	margin-bottom: 0;
	color: #fff;
}
.banner_tienda{
	    margin: 20px auto;
    max-width: 100%;
}
.banner_tienda img{max-width: 100%;}

@media screen and (max-width: 1140px){
	#menu ul li {font-size: 1em; padding-left:10px; padding-right:10px; width: 100px;}
	#menu ul {display: block;}
}

@media screen and (max-width: 840px){
	#menu ul li {font-size: 1em; width:60px;}
	#menu ul {display: block;}	
}
@media screen and (max-width: 760px){
	.menu_fixed ul li {font-size: 0.9em !important; width: auto !important; padding: 10px 14px !important;}
	.menu_fixed ul {display: block;}
}
@media screen and (max-width: 701px){
	.menu_fixed ul li {font-size: 0.9em !important; width: auto !important; padding: 10px 10px !important;}
	.menu_fixed ul {display: block;}
}
@media screen and (max-width: 768px){
	div{max-width: 100% !important;}
	textarea, input, .div_editable{max-width: 90% !important;}
	#content {width: 100%; min-width: 100%;}
	#header {height: 100px;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
	#banner { background-image: url('../img/logo_small_w.png'); width: 80px; height: 80px; left: 2%;image-rendering: crisp-edges;}
	.menu_fixed{position: fixed !important;	top: 0px !important; border-bottom: 1px solid #000 !important;	background-color: #000;	width: 100%; display: block !important;	margin-left: 0px;}
	#menu {width: 100%; position: absolute; left: 0px;}
	#menu ul {font-size: 1.2em; width: 100%; text-align:left; display: none; margin: 0px; right: 0px; top: 153px; border-right: none; background-color: #111;}
	#menu ul li {float: left; clear: both; padding: 5px 0px !important; padding-left: 7% !important; width: 93% !important; border-bottom: 1px solid #000; background-image: url('../img/bg_menu2.jpg'); background-size: cover;}
	#menu ul .activo {border: none; background-repeat:no-repeat; background-position: left;}
	#menu ul #inicio {border-top: 1px solid #000;}
	#menu #nav_menu {display: block;}
	#header #share {top: 97px; left: 10px; width: 200px; z-index: 20000;}
	#header #share ul li {width: 30px; height: 30px; background-size: 100%;}
	#page {padding: 30px 10px;}
	#page #container {max-width: 100% !important; min-width: 100% !important;}
	#page #container #left, #page #left {width: 100% !important; clear: both; float: none !important; margin: auto !important;}
	#page #container #right, #page #right {width: 100% !important; float: none !important; margin: auto !important; margin-top: 30px !important;}
	#footer {margin: 0px !important; width: auto !important;}
	.conciertos #eventos{height: 50em;}
	.discografia .disco {padding: 20px;}
	.discografia .disco .caratula {float: none; display: block; text-align: center; margin: 0 auto; width: 100%;}
	.discografia .disco iframe{display: block; margin: 0 auto;float:none;width:100%;}
	.discografia .disco .texto{text-align: justify;max-width: 100%;margin: 0 auto;}
	.discografia .disco .letras li.ui-tabs-tab{float: none;display: grid;}
	.discografia .disco .letras .ui-widget-header{max-width: 300px; margin: 0 auto;}
}
@media screen and (max-width: 425px){
	body{    background-position-x: center;background-position-y: top;background-size: contain;}
}

/* FB FIX */
.fb_iframe_widget{background-color: #FFF;}

#loader{    position: absolute;
    top: 10px;
    left: calc(50% - 40px);
}
.spinner {
  margin: 60px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #ddd;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {0%, 100% { -webkit-transform: scale(0.0) }50% { -webkit-transform: scale(1.0) }}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

#payasoh{
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background: url('../img/payasoh.png');
	background-position: center; background-size: cover; z-index: 1001; display: none; background-repeat: no-repeat;
}
#overlay{top: 0; width: 100%; height: 100%; position: fixed; z-index: 1000; background-color: rgba(0,0,0,0.2); display: none;}
#aviso_payasoh{
	bottom: 20%; width: 100%; display: block; position: fixed; z-index: 1003; padding: 10px 0; background-color: rgba(0,0,0,0.8); display: none; text-align: center;
}
#aviso_payasoh span{	  animation: .8s shake infinite alternate;
	  transform: translate3d(0, 0, 0);
	  backface-visibility: hidden;
	  perspective: 1000px;
	  display: block;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(0, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}