/* https://www.onlinewebfonts.com */
/* https://www.fontsquirrel.com/matcherator?token=cnff16u86y617syp*/

/* Variables CSS */
:root {
	--color-activo: #fed559;
	--color-sitio-rgb: #2187bb;
	--color-test-rgb: #1f7ead;
	--color-test-hls: hsl(200, 70%, 40%);

	/* 
	--hue: 200;		--sat: 70%;			--lum: 40%;
	--hue: 41;		--sat: 100%;		--lum: 57%; 
	--hue: 0;		--sat: 70%;			--lum: 40%;
	*/

	--hue: 200;		--sat: 70%;			--lum: 40%;
	--color-sitio:    hsl( var(--hue), var(--sat), var(--lum) );
	--color-sitio-t1: hsl( var(--hue), var(--sat), var(--lum), 80%);
	--color-sitio-t2: hsl( var(--hue), var(--sat), var(--lum), 40%);

	--gradient_60: linear-gradient(0deg, #00000000 0%, #000000cc 5%, var(--color-sitio) 60%, #000000cc 95%, #00000000 100%);
	--gradient_40: linear-gradient(0deg, #00000000 0%, #000000cc 5%, var(--color-sitio) 40%, #000000cc 95%, #00000000 100%);
	--gradient_02: radial-gradient(circle, #00000000 0%, #e1e1e1 0%, var(--color-sitio) 100%, var(--color-sitio) 39%, #000000 95%, #00000000 100%);
	

	/* --color-sitio: #2187bb;
	--color-sitio-t1: #2187bbcc;
	--color-sitio-t2: #2187bb66; */
	
	--color-sitio2: #0059b3;
	--color-texto: white;
	--transicion: all 0.3s ease;

	--fuente-sitio: "Arial";
}

/* Google Drive Hack */
/* Correccion cuando se pierde el foco, falla el boton de play/pause */
.ndfHFb-c4YZDc-LgbsSe,
.ndfHFb-c4YZDc-LgbsSe-OWB6Me,
.ndfHFb-c4YZDc-E7ORLb-LgbsSe{
	display:none
}
/* Div que impide PLay/Pause
ndfHFb-c4YZDc-E7ORLb-LgbsSe ndfHFb-c4YZDc-LgbsSe-OWB6Me ndfHFb-c4YZDc-LgbsSe 
*/
/* Boton Play/Pause
ndfHFb-c4YZDc-kODWGd-NziyQe-LgbsSe ndfHFb-c4YZDc-Bz112c ndfHFb-c4YZDc-LgbsSe ndfHFb-c4YZDc-kODWGd-NziyQe-Bz112c 
*/
/* .ndfHFb-c4YZDc-kODWGd{
	width: 325px;
  height: 32px;
  left: 22.5px;
  top: 59px;
} */

/* Afecta los flex en los body */
.fb_reset{
	display: contents;
}
#fb-comentarios{
	margin: 20px 0;
	border-radius: 15px;
	/* background-color: white; */
	background: var(--gradient_02);
	box-shadow: 0px 0px 8px var(--color-sitio);
	/* box-shadow: inset 0px 0px 100px 25px rgba(0, 0, 0, 0.4);
	background-color: var(--color-sitio); */
	height: 58vh;
    overflow-y: scroll;
}

html {
	scroll-behavior: smooth;
}

#index {
		background-color: black;
		/* background-image: url(https://salzuela.com/SALZUELA/img/MCM.jpg); */
		background-size: cover;
		color: #CCCCCC;
		font-family: var(--fuente-sitio);
		color: var(--color-sitio);

		/* background-color: #00000060; */
		background-blend-mode: overlay;
}

body {
	font-family: var(--fuente-sitio);
	color: var(--color-sitio);
}

#body_wiki {
	background-color: #000000C0;
}

/*   S C R O L L   B A R S   */
/* Let's get this party started */
::-webkit-scrollbar { width: 12px; -webkit-border-radius: 50px; border-radius: 10px; cursor:pointer;}
/* Track */
::-webkit-scrollbar-track { background: rgba(20, 20, 20, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1.8); 
	-webkit-border-radius: 50px; border-radius: 10px; }
/* Handle */
::-webkit-scrollbar-thumb { -webkit-border-radius: 50px; border-radius: 10px; background: var(--color-sitio-t1); 
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1.8); }
::-webkit-scrollbar-thumb:window-inactive {	background: var(--color-sitio-t2); }
::-webkit-scrollbar-track:hover { background: rgba(40, 40, 40, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1.8); 
	-webkit-border-radius: 50px; border-radius: 10px; }
::-webkit-scrollbar-track:active {background: rgba(60, 60, 60, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1.8); 
	-webkit-border-radius: 50px; border-radius: 10px; }
::-webkit-scrollbar-corner { background: transparent;	}


/* p {
		width: 100%;
		left: 0px;
		font-size: 16px;
		font-family: var(--fuente-sitio);
		font-weight: 400;
		letter-spacing: 0px;
		text-align: center;
		vertical-align: top;
		max-width: 550px;
		color: #727586;
		margin: 0px;
}
a:hover {
		cursor: pointer;
		color: #673DE6;
		text-decoration: underline;
}
h1 {
		font-family: var(--fuente-sitio);
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0px;
		text-align: center;
		margin: 8px;
}
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
}
.ic-launch  {
		margin-left: 10.5px;
		width: 21px !important;
		height: 20px !important;
}
.link-container {
		margin-top: 32px;
		margin-bottom: 32px;
}
.link {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-family: var(--fuente-sitio);
		font-style: normal;
		font-weight: 700;
		font-size: 14px;
		color: #673DE6;
		margin-top: 8px;
		text-decoration: none;
}
.main-image {
		width: 100%;
		max-width: 650px;
		max-height: 406px;
		height: auto;
} */




.bar_side{
		position: fixed;
		top: 0;
		width: 3vw;
		height: 100%;
}
.bar_side_left{
		left: 0;
		background: linear-gradient(90deg, #00000000 0%, #000000cc 5%, var(--color-sitio) 60%, #000000cc 95%, #00000000 100%);
}
.bar_side_right{
		right: 0;
		background: linear-gradient(90deg, #00000000 0%, #000000cc 5%, var(--color-sitio) 40%, #000000cc 95%, #00000000 100%);
}
.menu_bar{
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		background: var(--gradient_60);
}

.boton {
		background: var(--gradient_60);
		font-size: 16px;
		text-shadow: 0px 0px 2px #000000;
		width: 20%;
		max-width: 100px;
		height: 50px;
		border: 0;
		border-right: solid 2px rgb(0, 0, 0);
		border-left: solid 2px rgb(0, 0, 0);
		border-radius: 0px;
		margin: 0px 2px 0px 2px;
		padding: 0px 0px 0px;
		cursor: pointer;
		color: #CCCCCC;
}
.boton:hover{
		background: var(--gradient_40);
		font-size: 18px;
		color: white;
}
.boton:focus {
		color: var(--color-activo);
		background: var(--gradient_40);
		font-size: 18px;
}

#LogoBar{
		height: 10vw;
		display: flex;
		justify-content: space-around;
		align-content: center; 
}

/* #LogoSalzuela{
	width: 18vw;
	object-fit: contain;
} */

/* #Escudo,
#Escudo2 {
	width: 7vw;
	object-fit: contain;
} */

#player{
		width: 25%;
		background-color: #101010;
		height: 250px;
}
#lp3{
		width: 65%;
		height: 65vh;
		background-color: #10101055;
}
#contenedor{
		/* display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly; */

		display: flex;
		flex-wrap: wrap;
		/* align-items: center; */
		/* height: 90vh; */
		width: 95%;
		margin: auto;
		justify-content: space-around;
}

/* iframe lp3 artistas.php */
#body_lp3,
#body_artista,
#body_artistas{
	color: var(--color-sitio);
	background-color: transparent;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: flex-start;
}
#body_lp3{
	flex-direction: column;
	align-content: center;
}

#iframe_lp3{
	width:100%;
	height:100%;
	border: none;
}

.art{ 
	display: flex;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer; 
	text-overflow:ellipsis; 
	margin: 0;
	width: 200px;
	transition: all 0.3s ease 0s;
}
.art img{
	width:32px; 
	height:32px; 
	margin:4px; 
	-webkit-filter: grayscale(1); 
	filter:gray;
	transition: all 0.3s ease 0s;
}
/* .art:hover{
} */
.art:hover>img{
	transform: scale(1.2);
	-webkit-filter: grayscale(0);
	filter:grayscale(0);
}

.cap{ 
	text-overflow:ellipsis; 
	white-space:nowrap; 
	overflow:hidden; 
	text-decoration: none; 
	color: var(--color-sitio); 
	font-family: var(--fuente-sitio); 
	font-size: 14px; 
	/* text-shadow: 0 0 25px var(--color-sitio), 0 0 25px var(--color-sitio);  */
	font-weight: normal;
	transition: all 0.3s ease 0s;
}
.art:hover>.cap{
	transform: scale(1.05);
	margin: 5px;
	text-shadow: 0 0 15px var(--color-sitio), 0 0 15px var(--color-sitio); 
	font-weight: bold;
}

/* iframe lp3 artista.php */
a:link 		{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-decoration: none; color:var(--color-sitio); font-family:var(--fuente-sitio); font-size: 14px; 
	text-shadow: 0 0 25px var(--color-sitio), 0 0 25px var(--color-sitio); font-weight: normal;}
a:visited 	{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-decoration: none; color:var(--color-sitio); font-family:var(--fuente-sitio); font-size: 14px; 
	text-shadow: 0 0 25px var(--color-sitio), 0 0 25px var(--color-sitio); font-weight: normal;}
a:active 	{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
a:hover 	{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-decoration: none; color:var(--color-sitio); font-family:var(--fuente-sitio); font-size: 14px; 
	text-shadow: 0 0 15px var(--color-sitio), 0 0 15px var(--color-sitio); font-weight: bold;}

.reflection {
	display:inline-block;
	width: 200px;
	height:199px;
	position: relative;
	/*background-image: url(http://docs.google.com/uc?authuser=0&id=0B0TehhNifyreTmJwNV9qSGlueGM);*/
	background-size:cover;
	background-position: bottom;
	box-shadow: 0 20px 20px -20px black inset, 
							20px 0 20px -20px black inset, 
						 -20px 0 20px -20px black inset;
	image-rendering: pixelated;
	image-rendering: -webkit-optimize-contrast;
	margin-bottom:100px;
	transition: all 0.3s ease 0s;
	cursor: pointer;
	opacity:0.9;
}
.reflection::after {
	content:"";
	background-image: inherit;
	background-size:inherit;
	background-size:cover;
	background-position: bottom;
	width:inherit;
	height:33%;
	position: absolute;
	bottom:-33.5%;
	transform:scaleY(-1);
	box-shadow: 0 60px 50px -20px black inset;
}
.reflection:hover{
	opacity:1;
	z-index: 1;
}

.caratula{
	display: flex;
	align-items: center;
	flex-direction: column;
	transition: all 0.3s ease 0s;
	margin:5px;
}
.caratula:hover{
	transform: scale(1.05);
}
.caratula a{
	width: 195px;
	text-align: center;
}

#player_barra{
	display: flex;
	align-items: center;
	/* justify-content: flex-start; */
	justify-content: space-between;
	margin-bottom:20px;
	width: 98%;
	height: 45px;	
	border: 0px solid var(--color-sitio);
	box-shadow: 0px 0px 8px var(--color-sitio);
	border-radius: 50px;
	cursor: pointer;
}
#artista_barra{
	z-index: 1;
  background: #000000C0;
	position: fixed;
	top: 10px;
	width: 98%;
	height: 45px;	
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: 0px solid var(--color-sitio);
	box-shadow: 0px 0px 8px var(--color-sitio);
	border-radius: 50px;
	cursor: pointer;
}
#player_barra img,
#artista_barra img{
	height:90%;
	margin-left: 2px;
	border-radius: 50%;
}
#player_barra span,
#artista_barra span{
	margin-left: 10px;
}

#player_barra{
	width: 294px;
	margin: auto;
	margin-bottom:12px;
}
#player_barra span{
	font-size: 12px;
	width: 100%;
}

#caratulas{
	margin-top: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}



#donate-button img {
	height:35px;
	margin:20px;
	/* border-radius: 50%; */
}

/***********************/
/*     P L A Y E R     */
/***********************/

#divPlayer{
	display: none;
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
	width: 340px;
	height: 380px;
}

#player_div{
	border: 0px solid var(--color-sitio);
	border-radius: 15px;
	box-shadow: 0px 0px 8px var(--color-sitio);
	padding-top: 10px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;
	width: 280px;
	height: 280px;
	background: #000000;
	background-size: 300px;
	background-repeat: no-repeat;
}

#audio{
	background: transparent;
	/* width:280px; */
	box-shadow: 2px 2px 5px #000000;
	opacity: 0.9;
	/* border: 2px solid #F0F0F0; */
	border-radius: 7px;
	opacity:0.8;margin-top:0px;display:block;overflow:hidden;width: 280px;height: 45px;border-radius: 10px 10px 10px 10px;margin-left: 0px;

}
#audio iframe{
	width: 370px;
	margin-top: -53px;
	border: 0;
	margin-left: -16px;
}

#player_div ol{
	/* background: transparent;
	background: url('loading3.gif') no-repeat center; */
	border: 0px solid #A0A0A0;
	width:280px;
	height: 205px; 
	padding:0px;
	box-shadow: 3px 3px 8px #000000;
	background-color:rgba(0,0,0,0.7);
	overflow: auto;
	border-radius: 10px;
}

#player_div li a{
	font-family: var(--fuente-sitio);
	font-weight: normal;
	font-size: 16px;
	padding:3px;
	display:block;
	text-decoration:none;
	text-transform: capitalize;
	cursor:pointer;
	color: #D8D8D8;
	text-shadow: 0px 0px 2px #000000;
	white-space:nowrap; 
	overflow:hidden;
}

#player_div li a:hover{
	/* font-size: 18px; */
	color: white;
	text-decoration:none;
	background-color: var(--color-sitio-t1);
	text-shadow: 0px 0px 2px #000000;
}

#playlist .active a{
	color: white;
	text-decoration:none;
	background-color: var(--color-sitio);
}

#login_facebook{
	display: flex;
	/* display: none; */

	justify-content: space-between;
	align-items: center;
	width: 165px;
	font-size: 12px;
	max-width: unset;
}
#login_google #g_img_user,
#login_facebook #logo_facebook,
#login_facebook #img_user{
	height: 28px;
	width: 28px;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 1px #00000080;
}
#login_facebook #img_user{
	display:none;
	margin-right:5px;
}
#login_facebook #logo_facebook{
	margin-left:5px;
}
#login_text{
	padding: 0 5px;
}

/*********************/
/*   G A L E R I A   */
/*********************/
#index .galeria_modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #000000C0;
}

.galeria_modal .modal-content {
	width: 100%;
	height: 100%;
  position: relative;
  background-color: transparent;
  margin: auto;
  padding: 0;
  /* width: 90%;
  max-width: 1200px; */
}

.galeria_modal #img_toolbar{
	z-index: 1;
	position: fixed;
	right: 3vw;
}

.galeria_modal #zoomImage,
.galeria_modal #closeModal,
.galeria_modal #rotateImage {
	cursor: pointer;
  color: var(--color-sitio);
	font-size: 2.5vw;
	font-weight: bold;
	transition: var(--transicion);
}

.galeria_modal #zoomImage:hover,
.galeria_modal #closeModal:hover,
.galeria_modal #rotateImage:hover{
  color: red;
}

.galeria_modal .galeria_img {
  /* display: none; */
	display:block;
  margin: auto;
	max-height: 100vh;
	max-width: 89vw;
	object-fit: cover;
	transition: var(--transicion);
}
.zoom{
	transition: var(--transicion);
	max-height: unset !important;
	width: 100vw!important;
}

.rotate0{
	transform: rotate(0deg);
}
.rotate90{
	transform: rotate(90deg);
}
.rotate180{
	transform: rotate(180deg);
}
.rotate270{
	transform: rotate(270deg);
}

.cursor {
  cursor: pointer;
}

.modal-show{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
}

/* .galeria_modal .modal-img {
	width: 100%;
	height: 100%;
} */

.galeria_modal .prev,
.galeria_modal .next {
	z-index: 1;
  cursor: pointer;
  color: var(--color-sitio);
  font-weight: bold;
  font-size: 35px;
  transition: var(--transicion);
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.galeria_modal .next {
  border-radius: 3px 0 0 3px;
}

.galeria_modal .prev:hover,
.galeria_modal .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.galeria_modal .botones{
	display: flex;
	display: flex;
	justify-content: center;
}

.galeria_modal .column {
	width: 20px;
	color: var(--color-sitio);
	height: 10px;
}
.galeria_modal img.hover-shadow {
  transition: 0.3s;
}
.galeria_modal .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/*********************/
/*   M E N S A J E   */
/*********************/
#index #mensaje_modal {
  display: none;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000C0;

}
#index #mensaje_modal #mensaje{
	display: flex;
	flex-direction: column;
	justify-content: space-around;

	font-size: calc(1em + 1vw);
	line-height: 1em;
	padding: 1em;
	margin: 1em;
	
	width: 50%;
	height: 50%;
	background: white;
	border-radius: 15px;
	box-shadow: 0px 0px 15px var(--color-sitio);
}

#user_info table{
	border-collapse: collapse;
}
#user_info td{
	border:1px solid var(--color-sitio);
	text-align:center;
	padding:7.5pt;
	color:lightgray;
	font-weight:normal;
}
#user_info a{
	color:lightgray;
	padding: 10px;
}
#user_info .boton:hover{
	font-size: 14px;
  color: red;
	font-weight:bold;
}


#download{
	position: absolute;
    top: 110px;
    font-size: 24px;
    right: 40px;
}

/*  W i k i p e d i a  */
#divWiki{
	width:90%;
	height:0;
}
#divWiki #wiki{
	width:100%;
	border: 0px;
	height: 0;
}

/* Titulos Wiki */
#body_wiki	h2,
#body_wiki	h1{
	color: white;
}
	
/* Posiciona la tabla de resumen */
#body_wiki .infobox{float: left;}

.listaref,
.mw-authority-control,
.post-content,
.section-heading,
/* .collapsible-block, */
.mw-editsection,
.toc,
.noprint,
#body_wiki .header-container,
#body_wiki .page-actions-menu{
	display:none
}

.mf-section-1 {
	display:block;
}

/*  b u s c a s a l s a  */
#body_wiki	.header{display: none;}



@media screen and (max-width: 580px) and (min-width: 0px) {
	h1, p, .link-container {
			width: 80%;
	}
}
@media screen and (min-width: 650px) and (min-height: 0px) and (max-height: 750px) {
	.link-container {
			margin-top: 12px;
	}
	h1 {
			margin-top: 0px;
			margin-bottom: 0px;
	}
}
@media only screen and (max-width: 420px) {
/* index */
	#divPlayer {
		float:none!important;
	}
	#sqlArtistas {
		width:95%!important;
		float:none!important;
	}
	/* sql_artista */
	.caratula {
		float:none!important;
		margin: auto!important;	
		width:95%!important;	
	}

	#lp3 {
    width: 82%;
	}

	#adsterra{
		width:100%;
	}
	/* .art {
		
	} */
}