/*
	FONTS
*/
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Book.otf');
  font-weight: normal;
  font-style: normal;
}


/*
	RESET
*/
*, *:before, *:after {
	box-sizing: inherit;
	animation-fill-mode: both !important;
}
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,
main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: 'Gotham';
	background: #fcfdfa;
}
body {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}

.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 0;
	max-width: 1920px;
	padding-top: 56.25%;
	overflow: hidden;
	background-size: cover;
	z-index: 1;
	outline: 1px solid #000;
}
	.wrapper.preview {
		transform: translate(-50%, -50%) scale(.6);
	}

	.butacas .wrapper {
		padding-top: 28.125%;
		transform: translate(-50%, 0);
		overflow: visible;
	}
		.butacas .wrapper:before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: -100%;
			left: 0;
			background: #000;
		}
	.vertical .wrapper {
		max-width: 1080px;
		padding-top: 177.77777777777%;
	}
	.foyer .wrapper {
		max-width: 1202px;
		padding-top: 159.734%;
		background: #000;
	}


#BUTTONS {
	z-index: 1000;
	text-align: center;
	background: none;
}
	#BUTTONS .btns {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 1em 0;
		background: rgba(255, 255, 255, 0.75);
	}

.contenedor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*animation: fadeOut 1s 11s;*/
}
	.contenedor:before {
		content: '';
		display: block;
		position: absolute;
		top: 26px;
		left: 26px;
		right: 26px;
		bottom: 26px;
		border: 5px solid #AD232A;
		animation: fadeIn 2s;
	}

	.foyer .contenedor {
		width: 73.045%;
		left: 13.4775%;
		background: #fff;
	}

.logo {
	position: absolute;
	width: 25%;
	left: 50%;
	animation: introLogo 2.5s;
	transform-origin: top left;
}
	.foyer .logo {
		width: 39.9334%;
		animation-name: introLogoFoyer;
	}
	.vertical .logo {
		width: 44.4444444%;
	}

.msg-container {
	position: absolute;
	top: 50%;
	width: 80%;
	margin-left: 10%;
	transform: translateY(-50%);
	text-align: center;
}
	.butacas .msg-container {
		transform: translateY(-50px);
	}
.msg {
	margin-bottom: 10px;
	line-height: 1.2;
}
	.horizontal .msg,
	.butacas .msg {
		font-size: 3.3854vw;
	}
	.butacas .msg {
		margin-bottom: 0;
	}
	.vertical .msg {
		font-size: 3.3854vh;
	}
	.foyer .msg {
		font-size: 3.0208vh;
		line-height: 1.5;
	}
.word {
	display: inline-block;
}
	.word + .word {
		margin-left: .75ex;
	}
.letter {
	display: inline-block;
}







/*
	ANIMATIONS
*/
@keyframes introLogo {
    0% {
    	top: 50%;
    	transform: scale(0) translate(-50%, -50%);
    }
    50% {
    	top: 50%;
    	transform: scale(1) translate(-50%, -50%);
    }
    100% {
    	top: 50px;
    	transform: scale(0.75) translate(-50%, 0%);
    }
}
@keyframes introLogoFoyer {
    0% {
    	top: 50%;
    	transform: scale(0) translate(-50%, -50%);
    }
    50% {
    	top: 50%;
    	transform: scale(1) translate(-50%, -50%);
    }
    100% {
    	top: 80px;
    	transform: scale(0.75) translate(-50%, 0%);
    }
}
@keyframes fadeIn {
    from {
    	opacity: 0;
    }
    to {
    	opacity: 1;
    }
}
@keyframes fadeOut {
    from {
    	opacity: 1;
    }
    to {
    	opacity: 0;
    }
}




/*
	RESPONSIVE
*/
@media (min-aspect-ratio:9/16) {
	.vertical .wrapper,
	.foyer .wrapper {
		width: 0;
		height: 100%;
		max-height: 1920px;
		padding-top: 0;
	}
	.foyer .wrapper {
		padding-left: 62.604166667vh;
	}
	.vertical .wrapper {
		padding-left: 56.25vh;
	}
	.butacas .wrapper {
		height: 50vh;
		padding-top: 50vh;
	}
		.butacas .wrapper:before {
		}

}
@media (min-aspect-ratio:16/9) {
	.wrapper {
		width: 0;
		height: 100vh;
		max-height: 1080px;
		padding-top: 0;
		padding-left: 177.7777777vh;
	}
	.horizontal .msg,
	.butacas .msg {
		font-size: 6.0185vh;
	}
}
@media (min-width: 1920px) and (min-height: 1080px) {
}