/* CSS Document */

@import url('genericons/genericons.css');

* {
	padding:0;
	margin:0;
	text-decoration:none;
	box-sizing:border-box;
}

html {
	font-size:10px;
	font-family: 'Poppins', sans-serif;
	/*background-color:#232323;*/
}

html,
body,
section,
header,
footer {
	width:100%;
	display:block;
}

img {
	outline:none;
	border:none;
	vertical-align:top;
	max-width:100%;
}

@media screen and (max-width:800px) {
	section {
	}
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.micro {
	position:absolute;
	width:100%;
	display:flex;
	justify-content:space-around;
	z-index:1;
}

@media screen and (max-width:800px) {
	.micro img {
		width:200px;
		height:auto;
	}
}

nav {
	position:relative;
	display:flex;
	justify-content:center;
	padding:20px;
	margin-bottom:50px;
	border:solid rgba(255,255,255,.2);
	border-width:0 0 1px 0;
	background-color:rgba(0,0,0,.5);
	z-index:2;
}

.menu li {
	display:block;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	text-align:center;
	
}

.menu h1 {
	color:#EEE;
	font-size:4rem;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
}

.menu h2 {
	margin-left:20px;
	color:#EEE;
	font-size:2.8rem;
}

@media screen and (max-width:800px) {
	.menu h1 {
		width:100%;
		font-size:3.5rem;
		text-align:center;
	}
	
	.menu h2 {
		width:100%;
		font-size:2rem;
		text-align:center;
		margin-left:0;
	}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
INDEX
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section {
	
}

.fondom {
	padding-bottom:50px;
	background-image:url(../images/fondosonido.jpg);
	background-position:center top;
	background-size:contain;
	background-color:#000;
	background-repeat:repeat-y;
}

.sinto {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:90%;
	max-width:600px;
	margin:150px auto 25px auto;
	background-color:#1E1E1E
}

.sinto > span {
	padding:20px;
	color:#FFF;
	font-size:2.5rem;
	background-color:#E9123A;
}


.sinto > h1 {
	padding:20px;
	color:#FFF;
	font-size:2.5rem;	
	font-weight:bold;
}

@media screen and (max-width:800px) {
	.sinto {
		display:none;
	}
}

.radio {
	width:90%;
	max-width:600px;
	padding:20px;
	margin:auto;
	border-radius:20px;
	border:solid 1px rgba(255,255,255,.2);
	box-shadow:inset 0 0 15px rgba(255,255,255,.5);
	background-color:#232323;
}

@media screen and (max-width:800px) {
	.radio {
		margin:150px auto 25px auto;
	}
}

.radio .cuerpo {
	padding:10px;
	background-color:#1E1E1E;
	border-style:solid;
	border-width:1px;
	border-color:#808080;
	border-radius:10px;
	box-shadow:inset 0 0 15px rgba(0,0,0,.8);
	margin:10px 0 10px 0;
}

.radio .cassete {
	position:relative;
	display:block;
	width:80%;
	height:100%;
	margin:auto;
	
}

.radio .cassete:after {
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url(../images/cassete-c-superior-01.png);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	z-index:3;
}


.rotar {
	position:absolute;
	top:25%;
	width:40%;
	height:auto;
    max-width: 120px;
    max-height: 120px;
	z-index:2;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

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

.radio .disco_1 {
	left:15%;
}

.radio .disco_2 {
	right:15%;
}

@media screen and (max-width:800px) {
	.rotar {
		width:28%;
	}
	
	.radio .disco_1 {
	left:18%;
	}
	
	.radio .disco_2 {
		right:18%;
	}
}

.radio .contador {
	display:flex;
	justify-content:space-around;
	align-items:center;
	padding:20px;
	margin:10px 0 10px 0;
	
	border:solid 1px rgba(255,255,255,.2);
	border-radius:10px;
	background-color:#1E1E1E;
}

.radio .contador li {
	width:30%;
	padding:20px;
	color:#EEE;
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	border-radius:10px;
	box-shadow: inset 0 0 10px rgba(0,0,0,.5);
	border:solid 2px rgba(255,255,255,.1);
	background: rgb(68,68,68);
background: -moz-linear-gradient(top,  rgb(68,68,68) 0%, rgb(14,14,14) 100%);
background: -webkit-linear-gradient(top,  rgb(68,68,68) 0%,rgb(14,14,14) 100%);
background: linear-gradient(to bottom,  rgb(68,68,68) 0%,rgb(14,14,14) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#0e0e0e',GradientType=0 );

}

.radio .contador li i {
	margin:5px;
}

.radio .btn {
	background-color:#B3B3B3;
}

.botones {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}

.botones > li {
	width:20%;
	border-style:solid;
	border-width:0 1px 5px 0;
	border-color:transparent  rgba(0,0,0,.1) #7A7A7A #FFF;
}


.botones > li a{
	display:flex;
	justify-content:center;
	align-items:center;
	color:#474747;
	padding:30px 0 20px 0;
	background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(196,196,196) 100%);
background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(196,196,196) 100%);
background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(196,196,196) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 );
transition:all .15s;

}

.botones > li:hover {
	border-color:transparent  rgba(0,0,0,.1) #111 #FFF;
}

.botones > li:hover a {
	color:#FFF;
	background: rgb(69,72,77);
background: -moz-linear-gradient(top,  rgb(69,72,77) 0%, rgb(0,0,0) 100%);
background: -webkit-linear-gradient(top,  rgb(69,72,77) 0%,rgb(0,0,0) 100%);
background: linear-gradient(to bottom,  rgb(69,72,77) 0%,rgb(0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );

}

.botones .play {
	border-color:transparent rgba(0,0,0,.1) #A00D25 #FFF;
}

.botones .play a {
	color:#FFF;
	background: rgb(255,28,62);
background: -moz-linear-gradient(top,  rgb(255,28,62) 0%, rgb(255,1,54) 100%);
background: -webkit-linear-gradient(top,  rgb(255,28,62) 0%,rgb(255,1,54) 100%);
background: linear-gradient(to bottom,  rgb(255,28,62) 0%,rgb(255,1,54) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1c3e', endColorstr='#ff0136',GradientType=0 );

	box-shadow:inset 0 0 5px rgba(0,0,0,.8);

}

.botones > li a i {
	font-size:3.5rem;
}

.consola {
	position:relative;
	display:block;
	padding-bottom:25px;
	background-image:url(../images/pattern.png);
}

.consola > div {
	width:90%;
	max-width:1000px;
	margin:auto;
	
}

.consola img {
	transform:translateY(-20px);
	box-shadow:0 0 10px rgba(0,0,0,.5);
}

.horarios {
	background-color:#FFF;
}

.horarios > div {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:90%;
	max-width:1420px;
	margin:auto;
}

.horarios .foto {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	width:50%;
	background-color:#1E1E1E;
}

.horarios .foto > li {
	width:100%;
}

.horarios .foto h1 {
	padding:20px;
	color:#FF0136;
	font-size:3rem;
	font-weight:bold;
	text-transform:uppercase;
}

.horarios .foto h1 span {
	color:#FFF;
	font-size:2.5rem;
}

.horarios .foto p {
	padding:20px;
	color:#979797;
	font-size:2.5rem;
	font-weight:100;
	background-color:#EEE;
}

.horarios .foto a {
	position:relative;
	display:block;
}

.horarios .foto a span {
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:all .15s;
	transform:scale(0.5,0.5);
	background-color:rgba(255,1,54,.3);
}

.horarios .foto a:hover span {
	
	opacity:1;
	transform:scale(1,1);
	z-index:2;
}

.horarios .foto a i {
	color:#FFF;
	font-size:5rem;
}

.horarios .semana {
	padding:40px 10px 40px 10px;
	width:50%;
	background-color:#EEE;
	background-image:url(../images/fondoelulo.jpg);
	background-repeat:no-repeat;
	background-position:bottom right;
}

.horarios .semana .titulo {
	font-size:2.5rem;
	color:#F20638;
	font-weight:bold;
	text-transform:uppercase;
}

.semana .dia {
	margin-top:15px;
	padding:20px;
	background-color:rgba(214,214,214,.5);
	border:solid 1px rgba(0,0,0,.1);
}

.semana .dia h1 {
	color:#FFF;
	padding:10px;
	font-size:3rem;
	border-radius:0 0 10px 10px;
	background-color:#1E1E1E;
}

.semana .dia span {
	display:block;
	color:#FFF;
	font-size:2rem;
	padding:10px;
	border-radius:10px 10px 0 0;
	background-color:#FF0136;
}


.semana .dia p {
	margin-top:20px;
	color:#474747;
	font-size:3rem;
}

@media screen and (max-width:800px) {
	
	.semana .dia h1 {
		padding:10px;
	}
	
	.semana .dia h1 span {
		padding:0;
		background-color:transparent;
	}
	
	.horarios .foto {
		padding:40px 0 40px 0;
		width:100%;
	}
	
	.horarios .foto > li {
		width:100%;
	}
	
	.horarios .semana {
		width:100%;
	}
}

.interes {
	display:block;
	width:100%;
	background-color:#FFF;
}

.interes .patro {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-around;
	width:90%;
	max-width:1420px;
	margin:auto;
	padding:50px 0 50px 0;
}

.interes  > h1 {
	position:relative;
	padding:20px;
	width:50%;
	max-width:1420px;
	margin:auto;
	color:#FFF;
	font-size:4.5rem;
	text-align:center;
	border-radius:0 0 20px 20px;
	background-color:#1E1E1E;
}


.interes > h1 span {
	padding:5px;
	background-color:#FF0136;
}

@media screen and (max-width:800px) {
	.interes > h1 {
		padding:8px;
		font-size:2rem;
	}
	.interes > h1 span {
		padding:8px;
	}
}

.interes .patro li {
	width:30%;
}

.galeria {
	position:relative;
	display:block;
	padding:100px 0 150px 0;
	background-image:url(../images/pattern.png);
	background-color:#2D2D2D;
}

.galeria > h1 {
	width:90%;
	max-width:1420px;
	margin:0 auto 25px auto;
	color:#979797;
	font-size:4.5rem;
	text-transform:uppercase;
}

@media screen and (max-width:800px) {
	.galeria {
		padding:25px 0 25px 0;
	}
	.galeria > h1 {
		font-size:2rem;
		margin:0 auto 10px auto;
	}
}

.galeria > ul {
	position:relative;
	display:flex;
	align-items:center;
	width:90%;
	max-width:1420px;
	margin:auto;
	z-index:3;
}

.galeria > ul li {
	position:relative;
	padding:5px;
	background-color:#FFF;
}

.galeria > ul li > span {
	position:absolute;
	padding:20px;
	width:auto;
	color:#EEE;
	font-size:1.5rem;
	background-color:rgba(0,0,0,.8);
}

.galeria  > ul li a {
	display:block;
}

.hover-galeria {
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:all .15s;
	transform:scale(0.5,0.5);
	background-color:rgba(255,1,54,.3);
}

.galeria  a:hover .hover-galeria {
	
	opacity:1;
	transform:scale(1,1);
	z-index:2;
}

.hover-galeria i {
	color:#FFF;
	font-size:5rem;
}

.pinguino-c {
	position:absolute;
	bottom:-25px;
	width:100%;
	text-align:center;
	z-index:2;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
CONTACTOS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */

footer {
	background-image:url(../images/pattern.png);
}

.datafooter {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
	padding:25px 0 25px 0;
	margin:auto;
	width:90%;
	max-width:1420px;
}

.datafooter > li {
	width:20%;
}

@media screen and (max-width:800px) {
	.datafooter > li {
		width:100%;
	}
}

.datafooter ul > h1 {
	margin-bottom:25px;
	color:#FFF;
	font-size:2rem;
	font-family: 'Fjalla One', sans-serif;
	text-transform:uppercase;
}

.datafooter ul li {
	color:#999999;
	font-size:1.5rem;
	margin:0 0 10px 0;
}

.redes {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.redes > h1 {
	width:100%;
}

.redes > li {
	width:45%;
	margin:0 0 15px 0;
}

.redes a {
	display:block;
	text-align:center;
	padding:10px 25px 10px 25px;
	color:#FFF;
	font-size:1.3rem;
	border-radius:5px;
}

.facebook {
	background-color:#475993;
}

.instagram {
	background-color:#25618A;
}

.twitter {
	background-color:#1DA1F2;
}

.youtube {
	background-color:#BE252B;
}

@media only screen and (min-width:1025px) and (max-width:1100px) {
	.redes span {
		font-size:1rem;
	}
}

@media only screen and (min-width:801px) and (max-width:1024px) {
	.redes span {
		display:none;
	}
}

#canvas {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px;
	color:#EEE;
	background-color:rgba(0,0,0,.5);
}

#canvas img {
	margin:0 10px 0 10px;
	width:80px;
	height:auto;
}