@charset "utf-8";
/* CSS Document */
html{
/*	height: 			100%;
background-image: linear-gradient( 90deg,  rgba(29,29,29,1) 0%, rgba(100,0,0,1) 100% );	background-image: url("../imgs/Frente-Asociacion.jpg");*/
    background-image:   linear-gradient( 110.7deg,  rgba(15,33,43,1) 1.2%, rgba(74,123,157,1) 88.2% );
	background-size: 	cover;
	background-position:center;
	font-family: 		"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

body {
	display: 			block;
	text-align: 		center;
	padding: 			0;
	margin: 			0;
}

.container {
	position: 			relative;
	width: 				60%;
	margin: 			auto;
}

.contenido {
	width: 				96%;
	padding: 			2%;

}

.item {
	width: 				98%;
	padding: 			0;
	margin: 			2% 0;
    background-image:   linear-gradient( 111.1deg,  rgba(69,150,164,1) 2.5%, rgba(17,20,34,1) 100.3% );	
	border: 			5px solid white;
	border-radius: 		5px;
}

.item > div {
	width: 				58%;
	margin: 			0 auto;
	padding: 			1%;
	background-color: 	white;
	border: 			2px solid white;
	text-align: 		left;
}

.item > img {
	margin-top: 		2%;
	width: 				60%;
	border: 			2px solid white;
}

.item > h3 {
	padding: 			2%;
	margin: 			0;
	background-color: 	white;
}

h2 {
	padding: 			2%;
	color: 				white;
	border-bottom: 		1px dotted white;
}

form > * {
	margin: 			2%;
}

input {
	padding: 			1%;
	width: 				94%;
	border: 			2px solid #eee;
	border-radius: 		10px;
}

.file {
	padding: 			1%;
	margin: 			auto;
	width: 				94%;
	background-color: 	white;
	border: 			2px solid #eee;
	border-radius: 		10px;
}

textarea {
	width: 				90%;
	font-family: 		"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 			14px;
}

input[type=submit] {
	margin: 			2% auto;
	padding: 			2%;
	background-color: 	cadetblue;
	color: 				white;
	width: 				97%;
	border: 			0;
	font-size: 			14px;
	font-weight: 		bold;
	border-radius: 		5px;
}

.list {
/*	height: 			85vh;*/
	padding: 			2%;
	margin: 			auto;
/*	border-radius: 		5px;
	border: 			solid white 5px;
	box-shadow: 		0px 0px 20px black;*/
    background-image:   linear-gradient( 100.1deg,  rgba(217,157,38,1) 16.8%, rgba(247,213,110,1) 77.3% );
}

.block-center {
	position: 			absolute;
	top: 				30vh;
	left: 				15vw;
	height: 			30vh;
	width: 				25vw;
	padding: 			2%;
	margin: 			auto;
	color: 				white;
	background-color: 	darkslategray;
	border-radius: 		5px;
	border: 			solid white 5px;
	box-shadow: 		0px 0px 50px black;
}

.block-center * {
	margin: 			1%;
	border-radius: 		2px;
}

form {
	display: 			flex;
	flex-direction: 	column;
	align-content: 		center;
	justify-content: 	center;
	height: 			90%;
}

.block {
	position: 			absolute;
	top: 				-25vh;
/*	height: 			92vh;
	min-height: 		600px;*/
	width: 				94%;
	padding: 			2%;
	margin: 			auto;
	background-color: 	darkslategray;
	border-radius: 		5px;
	border: 			solid white 5px;
	box-shadow: 		0px 0px 50px black;
	overflow-y: 		scroll;
}

.block > * {
	margin: 			10px;
}

.header {
	display: 			flex;
	justify-content: 	center;
	align-items: 		center;
	width: 				100%;
	height: 			25vh;
	font-family: 		Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 			2.5rem;
	font-weight: 		bold;
	text-shadow: 		5px 5px 15px black;
	text-transform: 	uppercase; 
  	color: 				white;
	background-image: 	url("../imgs/Frente-Asociacion.jpg");
	background-size: 	cover;
	background-position:center;
	border-bottom: 		5px solid white;
	border-top: 		5px solid white;
}

.titulo {
    background:         linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 100%);
	font-family: 		Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 			1.5rem;
	font-weight: 		bold;
	text-shadow: 		5px 5px 15px black;
	text-transform: 	uppercase;
	letter-spacing: 	2px;
  	color: 				white;
	padding: 			1% 5%;
	filter: 			drop-shadow(5px 5px 15px black) sepia(); 
}

.radio {
	display: 			flex;
	align-items: 		stretch;
	justify-content: 	space-between;
	height: 			80px;
}

.radio img {
	width: 				80px;
/*	filter: 			drop-shadow(.5px .5px 0 white) 
						drop-shadow(-.5px -.5px 0 white);*/
}

.radio > div {
	width: 				200px;
    background:         linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 50%, rgba(0, 0, 0, 1) 100%);
	filter: 			drop-shadow(10px -20px 10px black); 
}

.radio > div:first-child img {
	width: 				70px;
}

.fondoRadio {
	position: 			sticky;
	top: 				0;
	margin: 			0;
	padding: 			0;
	background-color: 	black;
	background-position:center;
	background-image: 	url("../imgs/ondas.jpg");
	background-size: 	1500px 150px;
	filter: 			sepia(100%);
	box-shadow: 		0px 3px 15px black;
	z-index: 			1;
}

.radioOn {
	background-image: 	url("../imgs/radioOn.gif");
	background-size:   	100px 150px;
}

.containerVol {
	display: 			flex;
  	justify-content: 	center;
  	align-items: 		center;

/*	background: #000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 50%, rgba(0, 0, 0, 1) 100%);
	box-shadow: -5px 0px 5px 0px black;
*/	padding: 			10px 0 10px 0;
	width: 				200px;
}

#vol {
	width: 				100px;
/*	writing-mode: 			vertical-lr;*/
}
#pausa {
	display: 			none;
	cursor: 			pointer;
}

#reproducir {
	cursor: 			pointer;
}

#song {
	display: 			block;
	position: 			absolute;
	left: 				55%;
	margin-top: 		30px;
	padding: 			4px 15px;
	border-radius: 		50px;
	color: 				aliceblue;
	font-size: 			.7rem;
	font-weight: 		bold;
	z-index: 			5;
	background:         linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 50%, rgba(0, 0, 0, 1) 100%);
	filter: 			drop-shadow(10px -20px 10px black) opacity(.7); 
}

#song::before {
	content:      		"Estás escuchando:";
	margin-right: 5px;
}

.prevImg {
	display: 			inline-block;
	position: 			relative;
	width: 				150px;
	height: 			150px;
	cursor: 			pointer;
	text-align: 		right;
	background-color: 	black;
	background-repeat:	no-repeat;
	background-size: 	cover;
	background-position:center;
	overflow: 			hidden;
}

.addNew {
	background-size: 	50%;
	background-color: 	aliceblue;
}

.prevImgTrash {
	width: 				18px;
	top: 				5px;
	right: 				5px;
	cursor: 			pointer;
	background-color: 	navajowhite;
	padding: 			5px;
	border: 			4px solid black;
	border-radius: 		50%;
	filter: 			invert();
	position: 			absolute;
}

.upload {
	display:			inline-block;
	background-image: 	url(../imgs/upload.png);
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	18px;
	width: 				20px;
}

.upload::before{
	content:      		"\200B";
}

.cloud {
	display:			inline-block;
	background-image: 	url(../imgs/up.png);
	background-repeat:	no-repeat;
	background-position:left;
	background-size:	21px;
	background-size:	contain;
	width: 				30px;
}

.cloud::before{
	content:      		"\200B";
}

.label-upload {
	margin: 			1%;
	border: 			1px solid #ccc;
	display: 			inline-block;
	color:   			black;
	padding: 			6px 8px;
	cursor: 			pointer;
	font-weight: 		bold;
	background-color:   white;
	filter: 			invert();
	border-radius: 		5px;
}

input[type=file] {
	display: 			none;
}

.close {
	float: 				right;
	width: 				30px;
	cursor: 			pointer;
	filter: 			invert();
}

video {
	width: 				60%;
	height: 			auto;
}
@media all and (orientation: portrait) {
	
	.contenido {
		width:    		auto;
		padding: 		0;
	}

	.container {
		width: 			100%;
		margin: 		0;
	}
	
	.fondoRadio {
		background-size:1500px 200px;
	}

	.radioOn {
		background-size:300px 200px;
	}

	.radio {
		height: 		7vh;
	}
	
	.radio img {
		width: 			auto;
		filter: 		none;
	}

	.radio > div {
		visibility: 	hidden;
	}

	.titulo {
		font-size: 		1rem;
		padding: 		2%;
	}
	
	.item {
		width: 			auto;
		margin: 		0 0 4% 0;
		border-radius: 	0;
	}

	.item img {
		width: 			100%;
		margin: 		-10px;		
	} 
	
	.item div {
		width: 			98%;
	}
	
	.list {
		border: 		0;
		border-radius: 	0;
		box-shadow: 	none;
	}
	
	.prevImg {
		width: 			90%;
		margin: 		1%;
	}
	
	.addNew {
		background-size: 	25%;
		background-color: 	aliceblue;
	}
	
	.block-center {
		top: 			18vh;
		left: 			10vw;
		height: 		50vh;
		width: 			75vw;
	}
	
	.block-center input {
		width: 			90%;
	}	
	
	.block-center input[type=submit] {
		width: 			94%;
	}	
	
	.block-center * {
		margin: 		2%;	
	}
	
	.block {
		top: 			0;
		padding:  		0;
		width: 			100%;
		height: 		auto;
		border: 		none;
		border-radius: 	0;
		box-shadow: 	none;
	}

	#song {
		width: 			80%;
		font-size: 		1rem;
		text-align: 	center;
		left: 			0;
		right: 			0;
		margin: 		auto;
		margin-top: 	150px;
		padding: 		4px 15px;
	}
	
	video {
		width: 			100%;
	}

}