styles.css

@import "./css/csans.css";
@import "./css/csans.helpers.css";
@import "./flowplayer/skin/minimalist.css";
@import "./fonts/stylesheet.css";

:root {
	--gris: #d5d7d7;
	--gris-80: rgb(221,223,223);
	--size: 0.95rem;
}

html {
	background: var(--gris);
	font-family: 'mais grotesk', sans-serif;
	min-width: 800px;
}

body {
	padding-bottom: 50px;
}

.image-dag {
	width: 159px;
	height: 60px;
	background-image: url('img/logos/logo-dag.png');
}

/* Letras */
.image-f {
	width: 100px;
	height: 170px;
	background-image: url('img/F.png');
}
.image-e {
	width: 105px;
	height: 170px;
	background-image: url('img/E.png');
}
.image-e2 {
	width: 107px;
	height: 170px;
	background-image: url('img/E_2.png');
}
.image-d {
	width: 143px;
	height: 170px;
	background-image: url('img/D.png');
}
.image-cen {
	width: 173px;
	height: 170px;
	background-image: url('img/c_cenlitros.png');
}
.image-des {
	width: 110px;
	height: 170px;
	background-image: url('img/d_desescribir.png');
}
.image-est {
	width: 145px;
	height: 170px;
	background-image: url('img/e_estaleiro.png');
}
.image-hec {
	width: 110px;
	height: 170px;
	background-image: url('img/h_hector.png');
}
.image-pan {
	width: 169px;
	height: 170px;
	background-image: url('img/p_pancho.png');
}

/* Feed */
.feed {
	& > header {
		width: 600px;
		margin: 100px auto 50px auto;
		background: url('img/logo.jpg') no-repeat center center;
		height: 283px;
		text-align: right;
		position: relative;

		& h2 {
			text-transform: uppercase;
			font-weight: normal;
			font-size: 2rem;
			line-height: 1;
			margin: 0;
			padding-top: 10px;
		}

		& p {
			line-height: 1.1;
		}

		& .social {
			margin-top: 10px;
		}
		& .image-dag {
			position: absolute;
			left: -80px;
			bottom: 20px;
		}
	}

	& > nav.menu-participantes {
		width: 660px;
		margin: 0 auto 200px auto;

		& ul {
			list-style: none;
			font-weight: bold;
			font-size: 2rem;
			margin: 0;
			
			& li {
				display: inline-block;
				margin: 0 30px 0 0;
			}

			& a {
				display: block;
				color: black;
				text-decoration: none;
			}
			& a:hover {
				opacity: 0.5;
			}
		}
	}

	& > nav.menu-principal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		text-align: center;
		padding: 5px 0;
		z-index: 3;
		background: var(--gris);
		border-bottom: solid 1px rgba(0,0,0, 0.1);
		box-shadow: 0 0 3px rgba(0,0,0, 0.1);

		& ul {
			list-style: none;
			margin: 0;

			& li {
				display: inline-block;
				margin: 0 10px;
			}

			& a {
				color: black;
				font-size: 0.8rem;
				text-transform: uppercase;
				text-decoration: none;
				font-weight: bold;
				outline: 0;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	& > .flowplayer {
		max-width: 900px;
		margin: 50px auto;
		display: block;
	}

	& > .intro {
		width: 660px;
		margin: 50px auto;

		& p {
			margin-bottom: 1em;
		}
	}
}

.titulo-seccion {
	font-size: 5rem;
	line-height: 0.3;
	padding-top: 0.3em;
	overflow: hidden;
	color: var(--gris);
	letter-spacing: -2px;
	max-width: 950px;
	margin: 0 auto;
	text-transform: lowercase;
	text-align: left;
	font-weight: bold;
}

#letra-flotando {
	position: absolute;
	right: 10%;
	display: none;
}

@media (min-width: 900px) {
	#letra-flotando {
		display: block;
	}
}



/* Invitado */
.invitados {
	overflow: hidden;
}
.invitado {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 80% center;
	padding: 50px;
	min-height: 500px;
	position: relative;
	border-bottom: solid 1px rgb(64,64,64);
	text-shadow: 0 1px 0 rgba(255,255,255, 0.5);

	&:after {
		content: "";
		display: block;
		clear: both;
	}

	&:first-of-type {
		border-top: solid 1px rgb(64,64,64);
	}

	& > div,
	& blockquote {
		float: right;
		margin-right: 50%;
		max-width: 26em;
	}

	& > div {
		& h1 {
			text-transform: lowercase;
			font-size: 2.4rem;
		}

		& p {
			font-size: var(--size);
			margin-top: 1em;

			& a {
				color: black;
				font-weight: bold;

				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	& blockquote {
		font-size: 2rem;
		line-height: 1;
		color: colorrgba(0,0,0, 0.5);

		& p {
			&:after, &:before {
				content: "\201D";
				font-size: 4rem;
				position: relative;
				line-height: 0;
				top: 0.4em;
				font-family: Georgia;
			}
			&:before {
				content: "\201C";
			}
		}
	}

	& .seguinte {
		display: none;
		position: absolute;
		bottom: -25px;
		margin-left: -25px;
		left: 50%;
		font-family: Arial, Helvetica, sans-serif;
		text-decoration: none;
		color: black;
		background: white;
		text-shadow: none;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		text-align: center;
		font-size: 2rem;
		cursor: pointer;
		z-index: 2;
		outline: 0;

		&:hover {
			color: white;
			background: black;
		}
	}
}

#grafica-futura {
	background-image: url('img/participantes/cesar.png');
}

#uqui-permui {
	background-image: url('img/participantes/uqui.png');
}

#pancho-lapenha {
	background-image: url('img/participantes/pancho.png');
}

#estaleiro {
	background-image: url('img/participantes/estaleiro.png');
}

#eurograficas {
	background-image: url('img/participantes/eurograficas.png');
}

#desescribir {
	background-image: url('img/participantes/desescribir.png');
}

#hector-serrano {
	background-image: url('img/participantes/hector.png');
}

#cenlitrosmetrocadrado {
	background-image: url('img/participantes/cenlitros.png');
}

#frutods {
	background-image: url('img/participantes/frutods.png');
}

#luis-gil {
	background-image: url('img/participantes/luis.png');
}

#patricia-martinez {
	background-image: url('img/participantes/arturo.png');
}

#xenia-viladas {
	background-image: url('img/participantes/xenia.png');
}

.invitado:nth-child(odd) {
	background-position: 20% center;

	& > div,
	& blockquote {
		float: left;
		margin-left: 50%;
		margin-right: auto;
	}
}
@media (min-width: 1300px) {
	& .invitado {
		background-position: 70% center;

		& > div,
		& blockquote {
			max-width: 30em;
		}
	}
	& .invitado:nth-child(odd) {
		background-position: 30% center;
	}
}

/*
@media (max-width: 1100px) {
	.invitado {
		background-position: 80% center;

		> div {
			margin-right: 60%;
		}
	}
	.invitado:nth-child(odd) {
		background-position: 10% center;

		> div {
			float: left;
			margin-left: 55%;
		}
	}
}

@media (min-width: 1400px) {
	.invitado {
		background-position: 70% center;

		> div {
			margin-right: 40%;
		}
	}
	.invitado:nth-child(odd) {
		background-position: 30% center;

		> div {
			float: left;
			margin-left: 55%;
		}
	}
}
*/

/* Calendario */

.calendario {
	margin-top: 100px;
	text-align: center;
	padding: 50px;

	&:after {
		content: "";
		display: block;
		clear: both;
	}

	& > div {
		display: inline-block;
		width: 50%;
		max-width: 28em;
		text-align: left;
		box-sizing: border-box;
		padding: 0 20px;
		vertical-align: top;
		margin-top: 30px;
	}

	& h2 {
		font-size: 1rem;
		margin: 0 0 20px 0;
	}

	& ul {
		list-style: none;
		margin: 0;
		font-size: var(--size);

		& > li {
			margin-bottom: 5px;

			&:after {
				content: "";
				display: block;
				clear: both;
			}
		}

		& .hora {
			font-weight: normal;
			float: left;
			margin-right: 10px;
			color: rgba(0,0,0, 0.5);
		}
		& p {
			overflow: hidden;
		}
	}
}


/* Colaboradores */

.colaboradores {
	max-width: 950px;
	margin: 100px auto 0 auto;
	padding: 50px;

	& h2 {
		font-size: 1rem;
		margin-top: 70px;
		margin-right: 50px;
		width: 100px;
		float: left;
	}

	& ul {
		list-style: none;
		margin: 50px 0 0 0;
		overflow: hidden;

		& li {
			display: inline-block;
			margin-right: 40px;

			&:hover {
				opacity: 0.2;
			}
		}
	}

	& .image-agadic {
		width: 205px;
		height: 66px;
		background-image: url('img/logos/logo-agadic.png');
	}

	& .image-xunta {
		width: 159px;
		height: 66px;
		background-image: url('img/logos/logo-xunta.png');
	}

	--height: 75px;

	& .image-cgac {
		width: 152px;
		height: var(--height);
		background-image: url('img/logos/logo-cgac.png');
	}

	& .image-eurograficas {
		width: 180px;
		height: var(--height);
		background-image: url('img/logos/logo-eurograficas.png');
	}

	& .image-fedrigoni {
		width: 164px;
		height: var(--height);
		background-image: url('img/logos/logo-fedrigoni.png');
	}

	& .image-agenciagrafica {
		width: 145px;
		height: var(--height);
		background-image: url('img/logos/logo-ag.png');
	}

	& .image-brial {
		width: 139px;
		height: var(--height);
		background-image: url('img/logos/logo-brial.png');
	}

	& .image-formatos {
		width: 163px;
		height: var(--height);
		background-image: url('img/logos/logo-formatos.png');
	}

	& .image-galiciaeditorial {
		width: 113px;
		height: var(--height);
		background-image: url('img/logos/logo-galiciaeditorial.png');
	}

	& .image-fabulatorio {
		width: 135px;
		height: var(--height);
		background-image: url('img/logos/logo-fabulatorio.png');
	}

	& .image-andurinha {
		width: 132px;
		height: var(--height);
		background-image: url('img/logos/logo-andurinha.png');
	}

	& .image-axeitos {
		width: 142px;
		height: var(--height);
		background-image: url('img/logos/logo-axeitos.png');
	}

	& .image-legatoria {
		width: 72px;
		height: var(--height);
		background-image: url('img/logos/logo-legatoria.png');
	}

	& .image-moure {
		width: 133px;
		height: var(--height);
		background-image: url('img/logos/logo-moure.png');
	}

	& .image-pecados {
		width: 133px;
		height: var(--height);
		background-image: url('img/logos/logo-pecados.png');
	}
}

.entradas {
	max-width: 950px;
	margin: 100px auto;
	padding: 50px;

	& .entradas-modalidades {
		list-style: none;
		margin: 0;
		width: 600px;

		& li {
			display: inline-block;
			vertical-align: top;
			width: 150px;
			text-align: center;
			margin: 40px 40px 0 0;

			& > h2 {
				background: black;
				color: white;
				padding: 30px 15px 15px;
				box-sizing: border-box;
				width: 150px;
				height: 150px;
				border-radius: 75px;
				line-height: 0.8;
				margin: 0 0 10px 0;
				cursor: default;

				& strong,
				& span {
					display: block;
				}
				& strong {
					font-size: 100px;
				}
				& span {
					font-size: 0.8rem;
					text-transform: uppercase;
				}
			}

			& > p {
				font-size: 0.85rem;
				line-height: 1.3;

				& strong {
					white-space: nowrap;
				}
			}
		}
	}
}

.onde,
.contacto {
	max-width: 950px;
	margin: 100px auto;
	padding: 50px;
}

.seccion-intro {
	font-size: var(--size);
	max-width: 500px;
	margin-top: 50px;

	& p {
		margin-bottom: 1em;

		& a {
			color: black;

			&:hover {
				text-decoration: none;
			}
		}
	}

	& iframe {
		margin: 5px 0 10px 0;
		border: solid 3px white;
	}
}