/* CSS Document */

/* Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html and modified by Diego Quintana: http://diegoquintana.com
	-------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 500;
}

ol,
ul {
	list-style: none;
}

blockquote {
	quotes: none;
}

blockquote:before,
blockquote:after {
	content: '';
	content: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	color: inherit;
	text-decoration: none;
	outline: none;
	cursor: pointer;
	transition-property: width, height, color, opacity, background, border;
	transition-duration: .3s;
	transition-timing-function: ease-out;
}

a img {
	border: none;
}

object {
	cursor: pointer;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.textcenter {
	text-align: center;
}

.fixed {
	position: fixed;
}

.clear {
	display: block;
	clear: both;
	width: 100%;
	height: 0;
	zoom: 1;
}

.color3 {
	color: #e52e2e;
}

::selection {
	background-color: rgba(0, 0, 0, 0.99);
	color: #fff;
	text-shadow: none;
}

html {
	font-size: 62.5%;
}

body {
	font-family: 'PT Serif Caption', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #040502;
	background-size: cover;
	color: #fff;
	overflow-x: hidden;
	min-height: 60rem;
}

#videobg { 
   
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
  
	position: fixed;    
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%); 
		
	z-index: -100;
	  
	background-size: cover;
  
  }

#bg {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	object-fit: cover;
	object-position: center bottom;
	transition: opacity 1s ease-out;
	pointer-events: none;
}

#bg_cover {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background: rgba(4, 5, 2, 0.5);
}

#wave {
	display: block;
	position: fixed;
	left: -2%;
	top: 50%;
	width: 104%;
	height: 600px;
	transform: translateY(-50%);
	z-index: 2;
	pointer-events: none;
	transition: opacity 1s ease-out;
	opacity: 0;
}

html.audio-playing #wave {
	opacity: 1;
}

html.bg-ok #bg {
	opacity: .5;
}

html.bg-ok .home #bg {
	opacity: .5;
}

#main_header,
#hitos .hito.aa .hora,
#hitos .hito.aa.pasada {
	display: none !important;
}

.logo {
	display: block;
}

#texto .logo {
	width: 60%;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

#hitos .logo {
	width: 40%;
	margin: 0 auto;
	max-width: 25rem;
}

#play {
	display: none;
	margin-top: 4rem;
}

#play.gogo {
	display: block !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.btn {
	display: inline-block;
	border: 1px solid #fff;
	padding: 1.5rem 2rem;
	border-radius: 4rem;
	white-space: nowrap;
	background: #fff;
	color: #040502;
}

html.audio-playing .tocar {
	color: #040502;
	background: #fff;
}

.btn i {
	display: inline-block;
	vertical-align: middle;
	font-size: 85%;
	line-height: 1;
	margin-right: 1rem;
}

@keyframes pulse {
	0% {
		opacity: .5;
	}

	100% {
		opacity: 1;
	}
}

.btn span {
	display: block;
	transition: opacity .3s ease-out;
}

html.audio-playing .btn span {
	animation: pulse .6s alternate infinite;
}

#wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding: 4rem 3rem 4rem;
	/*padding: 12rem 3rem 4rem;*/	
	box-sizing: border-box;
	position: relative;
	z-index: 4;
	width: 100%;
}

#texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 46%;
	box-sizing: border-box;
	/*margin: 0 auto;*/
	position: fixed;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 5;
}

#hitos {
	width: 46%;
	box-sizing: border-box;
	text-shadow: .1rem .1rem .3rem rgba(4, 5, 2, 0.99);
}

#hitos .meta {
	text-align: center;
	margin-bottom: 5rem;
}

#hitos h3 {
	font-size: 120%;
	margin-bottom: 2rem;
}

#hitos aside {
	font-size: 85%;
	font-style: italic;
}

#hitos ul {
	color: #666;
}

#hitos li.hito {
	display: block;
	padding: 0;
	padding-left: 2.5rem;
	border-left: 1px solid transparent;
	transition: .3s ease-out;
	transition-property: opacity, border, color;
	position: relative;
	cursor: pointer;
	color: #ccc;
}

#live #hitos li.hito {
	cursor: default;
	color: #fff;
}

#hitos li.hito.grande {
	font-size: 120%;
}

#hitos li.hito > .in {
	padding: 1.5rem 0;
}

#hitos li.pasada {
	display: block;
	color: #999;
	border-left-color: inherit;
	opacity: 1;
}

#hitos li:not(.actual):hover {
	border-left-color: #777 !important;
}

#hitos li.actual {
	display: block;
	opacity: 1;
	border-left-color: #f00 !important;
	color: #fff !important;
}

#hitos li .hora-fin {
	display: none !important;
}

#hitos li.actual + li.pasada > .in {
	/*border-top-color: #fff !important;*/
}

#hitos li + li > .in {
	border-top: 1px dotted rgba(153, 153, 153, 0.5);
}

#hitos .hora {
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 20%;
	padding-right: 1.5rem;
	margin: 0;
	font-size: 114.28571429%;
}

#hitos .nombre {
	display: inline-block;
	vertical-align: middle;
	padding-left: 1.5rem;
	border-left: 1px dotted rgba(153, 153, 153, 0.5);
	width: 78%;
	margin: 0;
	box-sizing: border-box;
}

html.csscalc #hitos .hora {
	width: calc(8rem);
}

html.csscalc #hitos .nombre {
	width: calc(100% - 9rem);
}

body.fb #wrapper {
	padding: 4rem !important;
}

body.fb #museo,
body.fb #hitos li.pasada,
body.fb #hitos h3,
body.fb #hitos aside {
	display: none !important;
}

body.fb #hitos .hora {
	font-size: 50%;
}

body.fb #hitos .nombre {
	width: 100% !important;
	padding-left: 0 !important;
	border-left-width: 0 !important;
}

body.fb #hashtag {
	font-size: 2.4rem;
}

body.fb #hitos {
	font-size: 3.6rem;
}

/*
#hitos .actual > .in {
	border: none !important;
}

#hitos li.actual > .in,
#hitos li.actual .hora,
#hitos li.actual .nombre {
	display: block;
}

#hitos li.actual .hora {
	margin-bottom: .6rem;
}

#hitos li.actual .nombre {
	font-size: 150%;
	padding-left: 0;
	border-left: 0;
}

body.fb #hitos li.actual .nombre {
	font-size: 2vw;
}
*/

.rrss {
	white-space: nowrap;
	color: #aaa;
}

#main_header .rrss {
	padding: 1rem 1.5rem;
}

#texto h4 {
	font-size: 140%;
	margin-top: 4rem;
	margin-bottom: -1rem;
}

#texto .rrss {
	font-size: 120%;
	margin-top: 4rem;
}

.rrss li {
	display: inline-block;
	vertical-align: middle;
}

.rrss li + li {
	font-size: 120%;
	margin-left: 4rem;
}

.rrss .social_mail {
	font-size: 85%;
}

.rrss a {
	display: block;
	transition: color .5s ease-out;
	color: inherit;
}

.rrss a:hover {
	color: #fff;
}

html.flexbox .hito > .in {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

html.flexbox #hitos .hora,
html.flexbox #hitos .nombre {
	width: auto;
}

html.flexbox #hitos .nombre {
	flex: 1;
}

/*
#hitos .tope {
	visibility: hidden;
	width: 0;
	height: 0;
	overflow: hidden;
}
*/

#hitos .tope {
	border-left-color: transparent !important;
	text-align: center;
	pointer-events: none;
}

#hitos .tope > .in {
	padding-top: 3rem;
}

#museo {
	
display: block;
/*position: fixed;
left: 3rem;
top: 3rem;
max-width: 7rem;*/
width: 300px;
z-index: 5000;
margin: 0 auto 50px auto;	
	
	/*display: block;
	position: fixed;
	left: 3rem;
	top: 3rem;
	max-width: 7rem;
	width: 25%;
	z-index: 5000;*/
}

#museo img {
	display: block;
	width: 100%;
}

#texto > div > *,
#hitos {
	opacity: 0;
	pointer-events: none;
	transition: opacity 2s ease-out;
}

html #texto > div > *:not(#play),
html.playable #play,
html #hitos {
	opacity: 1;
	pointer-events: auto;
}

#texto > div > * {
	transition-delay: 1s;
}

#hitos {
	transition-delay: 2s;
}

#go-fb {
	display: none;
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	background: #d40505;
	color: #fff;
	padding: 1rem 1.6rem;
	max-width: 60%;
	box-sizing: border-box;
	z-index: 2500;
	border-radius: 3px;
}

.fb-ohoh #go-fb {
	display: block;
}

#hashtag {
	margin-top: 4rem;
	/*text-align: center;*/
	font-size: 1.8rem;
	/*font-style: italic;*/
}

#hashtag span {
	color: inherit !important;
}

#hashtag > div {
	display: inline-block;
	padding: .4rem .8rem;
	color: #fff !important;
	position: relative;
}

#hashtag > div:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #040502;
	transform: rotate(-1.2deg);
}

#hashtag > div > div {
	position: relative;
	z-index: 2;
}

#reloj {
	white-space: nowrap;
	text-align: center;
	font-size: 400%;
	line-height: 1;
	text-shadow: .3rem .3rem 1rem rgba(4, 5, 2, 0.5);
}

html.cssvwunit #reloj {
	font-size: 8vw;
}

#reloj li {
	color: #fff !important;
	display: inline-block;
	vertical-align: middle;
}

#reloj .point {
	font-size: 75%;
}

#reloj .point.dots {
	opacity: 0;
}

#tv {
	/*display: none;*/
}

#tv {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 4000;
	transition: opacity 1s ease-out, visibility 0s 1s;
	background: #040502;
}

html.ok #tv {
	opacity: 0;
	visibility: hidden;
}

.mobile #tv {
	display: none !important;
}

#tv .video {
	width: 80%;
}

#tv .video_holder {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	width: 100%;
	overflow: hidden;
}

#tv .video_holder > * {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#skip {
	text-align: center;
	margin-top: 3rem;
	font-size: 1.2rem;
}

#skip a {
	display: inline-block;
	padding: .6rem 1rem;
	border: 1px solid #fff !important;
	border-radius: 2rem;
}



.home #texto {
	max-width: 60rem;
	box-sizing: border-box;
	justify-content: flex-start;
	padding: 12rem 0 4rem 3rem;
}

.fb #texto {
	transform: translateY(-3rem);
}

body.gracias #wrapper {
	justify-content: center;
	min-height: 100vh;
}

body.gracias #hitos .actual {
	padding-left: 0;
	border-left: 0;
	text-align: center;
}

#player_holder {
	display: block;
	position: relative;
	margin-bottom: 2rem;
	width: 100%;
}

#live #player_holder {
	overflow: hidden;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.plyr--audio .plyr__controls {
	background: transparent;
}

.plyr__progress {
	flex: 3;
}

.plyr--full-ui input[type=range] {
	color: #f00;
	height: 10px;
}

.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
	background: #f00;
}

.plyr__volume input[type=range] {
	color: #fff;
}

.en-vivo #wrapper {
	align-items: stretch;
}

.en-vivo #hitos {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.en-vivo #hitos .meta {
	position: fixed;
	top: 3rem;
	right: 4rem;
	width: 13rem;
}

.en-vivo #hitos .logo {
	max-width: none;
	width: 100%;
}

.en-vivo #hitos ul {
	flex: 1;
	display: block;
	position: relative;
	pointer-events: none;
}

.en-vivo #hitos ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: opacity 1s ease-out;
	opacity: 0;
	padding: 0;
	border: 0;
	transform: translateY(-5rem);
}

.en-vivo #hitos li + li > .in {
	border: none;
}

.en-vivo #hitos ul li.actual {
	opacity: 1;
}

.en-vivo #hitos li .hora {
	display: none;
}

.en-vivo #hitos li .nombre {
	padding: 0;
	border: 0;
	font-size: 150%;
}

@media all and (max-width: 800px) {
	body {
		font-size: 1.4rem;
	}

	#texto {
		/*justify-content: center;*/
	}

	#wrapper {
		display: block;
		padding: 4rem 2.5rem 11.2rem;
		padding-bottom: 16.2rem;
	}

	.en-vivo #wrapper,
	body.gracias #wrapper {
		display: flex;
	}

	#grad {
		display: block;
		position: fixed;
		left: 0;
		bottom: 11rem;
		width: 100%;
		height: 5rem;
		z-index: 398;
		pointer-events: none;
		background-image: linear-gradient(to top, rgba(4, 5, 2, 1), rgba(4, 5, 2, 0));
	}

	#hitos {
		width: 100%;
	}

	/*
	#hitos li.actual .nombre {
		font-size: 150%;
	}
*/

	/*#museo,*/
	#texto .rrss {
		display: none !important;
	}

	#main_header {
		display: flex !important;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 400;
		background: #040502;
		font-size: 1.4rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #333;
	}

	#museo_mobile {
		float: left;
		width: 4rem;
		padding: 1rem 1.5rem;
	}

	#museo_mobile img {
		display: block;
		width: 100%;
	}

	#tocar_mobile {
		float: right;
		border-radius: 0;
		font-size: 1.2rem;
		padding: 1rem 1.5rem;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 1s ease-out;
		pointer-events: none;
		opacity: 0;
	}

	html.ok.playable #tocar_mobile {
		opacity: 1;
		pointer-events: auto;
	}

	body:not(.home) #texto {
		position: fixed;
		left: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		height: auto;
		background: #040502;
		min-height: 0 !important;
		border-top: 1px solid #333;
		z-index: 399;
		padding-bottom: 4.1rem;
	}

	#go-fb {
		bottom: 12rem;
	}

	body:not(.home) #texto > div > *:not(#reloj):not(#player_holder):not(#play) {
		display: none !important;
	}

	#play {
		margin-top: 1rem !important;
	}

	.home #texto {
		width: 100%;
		box-sizing: border-box;
		padding: 4rem 3rem;
		justify-content: center;
	}

	#reloj {
		padding: 1rem 2.5rem 1.5rem;
		font-size: 4rem !important;
	}

	.en-vivo #hitos .meta {
		display: none;
	}

	.en-vivo #hitos ul li {
		transform: none;
	}
}