@charset "utf-8";
/* CSS Document */

	body {
		height: auto;
		margin: 0 0 50px 0;
		padding: 0;
		background: linear-gradient(rgba(255,0,127,.25), transparent);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100vw 40vw;
		text-align: center;
	}

	h, h1, h2, h2 a, h3, p, a, li, cite, th p, form, ::placeholder {
		font-family: 'Segoe UI', 'Verdana', 'Helvetica';
		text-decoration: none;
		margin: 0;
	}

	h, h a, h2:hover, h2 a:hover, input[type=submit] {
		color: #FFFFFF;
	}

	h1, p, a, li, form, cite, ::placeholder {
		color: #000000;
	}

	h a:hover, h2, h2 a {
		color: #FF0000;
	}

	p2 {
		color: #FF00FF;
	}

	h, h1, h2, h2 a {
		font-size: 4vw;
		font-weight: 100;
		letter-spacing: 3vw;
		padding-left: 3vw;
	}

	h3 {
		font-size: 4vw;
		font-weight: 100;
		letter-spacing: 1.5vw;
		color: transparent;
	}

	h3:hover {
		color: #FF00FF;
	}

	p, li, form {
		font-size: 4vw;
	}

	ol {
		text-align: left;
		font-weight: 500;
	}

	ol p {
		font-weight: normal;
	}

	th  {
		height: 25px;
		background-color: rgba(255,255,255,0.75);
		border: 1px solid #FF0000;
		border-radius: 4px;
	}

	th p {
		font-size: 11px;
		font-weight: bold;
	}

	tr:nth-child(even) {
		background-color: rgba(255,0,127,.1);
	}

	cite {
		font-style: italic;
		font-size: 3vw;
	}

	input[type=number], input[type=text], input[type=submit] {
		height: 25px;
		margin: 5px;
		border-radius: 4px;
		outline: none;
	}

	input[type=number], input[type=text] {
		box-sizing: border-box;
		padding: 1%;
		border: 1px solid #FF0000;	
	}

	input[type=number]:focus, input[type=text]:focus {
		border: 1px solid hsla(0,100%,50%,0.25);
		outline: none;
	}

	input[type=number] {
		width: 80px;
	}

	input[type=text] {
		width: 240px;
	}

	input[type=submit] {
		width: 40px;
		padding: 0;
		background-color: #FF00FF;
		border: none;
		font-size: 15px;
	}

	input[type=submit]:hover, input[type=submit]:active {
		background-color: #FF0000;
	}

	::-webkit-input-placeholder {
		font-size: 1em;
		font-style: italic;
	}

	:-ms-input-placeholder {
		font-size: 1em;
		font-style: italic;
	}

	::-ms-input-placeholder {
		font-size: 1em;
		font-style: italic;
	}

	::placeholder {
		font-size: 1em;
		font-style: italic;
	}

	header {
		margin: 10px 0 20px;
	}

	div {
		margin: 0;
		padding: 0;
	}

	.menu {
		display: grid;
		grid-template-columns: 33.33333% 33.33333% 33.33333%;
		grid-gap: 2vw;
		margin: 15vw 0 0 4vw;
		width: 88vw;
		text-align: left;
	}

	.submenu {
		display: grid;
		grid-template-columns: 20% 20% 20% 20% 20%;
		grid-gap: 2vw;
		margin: 10px 0 0 4vw;
		width: 84vw;
		text-align: center;
	}
		
	.en, .es {
		text-align: left;
	}

	.cita, .descripcion, .statement {
		text-align: right;
		width: 86vw;
		padding: 5vw;
	}

	.cita {
		margin: 1vw 0 2vw 2vw;
		border: 1px solid rgba(255,0,0,1.00);
	}

	.descripcion {
		margin: 1vw 0 15vw 2vw;
		border: 1px solid rgba(255,0,255,1.00);
	}

	.statement {
		margin: 10vw 0 15vw 2vw;
	}

	.statement p {
		text-align: justify;
	}

	.cita p, .descripcion p {
		text-align: left;
	}

	.audiovisual, .storia {
		display: grid;
		grid-template-columns: 100%;
		grid-gap: 4vw;
		margin: 3vw 0 10vw 4vw;
		width: 92vw;
	}

	.substoria {
		display: grid;
		grid-template-columns: 33.33333% 33.33333% 33.33333%;
		grid-gap: 1vw;
		width: 90vw;
	}

	.fotos {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-gap: 4vw;
		margin: 3vw 0 10vw 4vw;
		width: 88vw;
	}

	.ninebysixteen {
		position: relative;
		padding-top: 177.7777777777777777777777777777777777777%; /* 9:16 */
		height: 0;
	}

	.ninebysixteen iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/*//////////////////////////////////////////////////////////////////////////*/

	@media only screen and (min-width:600px) {
		
		body {
			background-size: 100vw 30vw;
			margin-bottom: 50px;
		}
		
		h, h1, h2, h2 a {
			font-size: 2vw;
			letter-spacing: 2vw;
			padding-left: 2vw;
		}
		
		h3 {
			font-size: 2vw;
			letter-spacing: 6px;
			letter-spacing: 1vw;
		}
		
		p, li, th p, form {
			font-size: 2vw;
		}
		
		cite {
			font-size: 1.5vw;
		}

		header {
			margin-bottom: 50px;
		}
		
		.menu {
			margin: 100px 0 0 14vw;
			grid-template-columns: 20% 20% 20% 20% 20%;
			grid-gap: 2vw;
			width: 64vw;
		}

		.submenu {
			margin-left: 20vw;
			width: 52vw;
		}
		
		.en, .es {
			position: absolute;
			left: 0;
			top: 10px;
		}
		
		.cita, .descripcion, .statement {
			width: 70vw;
			padding: 5vw;
		}
		
		.cita {
			margin: 1vw 0 2vw 10vw;
		}
		
		.descripcion {
			margin: 1vw 0 10vw 10vw;
		}
		
		.statement {
			margin: 10vw 0 15vw 10vw;
		}

		.audiovisual {
			grid-template-columns: 33.33333% 33.33333% 33.33333%;
			grid-gap: 1.5vw;
			width: 89vw;
			margin-top: 2vw;
		}
		
		.storia {
			grid-gap: 2vw;
			width: 70vw;
			margin-left: 15vw;
		}
		
		.substoria {
			width: 68vw;
		}

		.fotos {
			grid-template-columns: 25% 25% 25% 25%;
			grid-gap: 1vw;
			margin-left: 15vw;
			width: 67vw;
		}
		
	}

/*//////////////////////////////////////////////////////////////////////////*/

	@media only screen and (min-width:1000px) {
		
		body {
			margin-bottom: 30px;
		}
		
		h, h1, h2, h2 a {
			font-size: 1.2vw;
			letter-spacing: 1vw;
			padding-left: 1vw;
		}
		
		h3 {
			font-size: 1vw;
			letter-spacing: .5vw;
		}
		
		p, li, th p, form {
			font-size: 1.2vw;
		}
		
		th p {
			font-size: 1vw;			
		}
		
		cite {
			font-size: .8vw;
		}
		
		.menu {
			margin-left: 28vw;
			width: 40vw;
			grid-gap: 1vw;
		}

		.submenu {
			margin-left: 40vw;
			grid-gap: 1vw;
			width: 16vw;
		}

		.cita, .descripcion, .statement {
			padding: 2vw;
		}
		
		.cita {
			margin: 1vw 0 1vw 23vw;
			width: 50vw;
		}
		
		.descripcion {
			margin: 1vw 0 5vw 8vw;
			width: 80vw;
		}
		
		.statement {
			margin: 5vw 0 5vw 15vw;
			width: 66vw;
		}

		.statement p {
			color: transparent;
		}

		.statement p:hover {
			color: inherit;
		}

		.audiovisual {
			grid-template-columns: 33.33333% 33.33333% 33.33333%;
			grid-gap: 1vw;
			margin: 1.2vw 0 5vw 15vw;
			width: 68vw;
		}

		.storia {
			grid-template-columns: 33.33333% 33.33333% 33.33333%;
			grid-gap: 1vw;
			margin: 1.2vw 0 5vw 10vw;
			width: 78vw;
		}
		
		.substoria {
			grid-gap: 2%;
			width: 96%;
		}

		.fotos {
			grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
			grid-gap: .5vw;
			margin: 3vw 0 10vw 15vw;
			width: 66.5vw;
		}

	}