@charset "utf-8";

/*
Theme Name: Falco
Theme URI: http://copafortaleza.alamos.edu.mx/
Author: Ricardo Sánchez Chávez
Author URI: http://ricardo.sanchez.red
Description: Tema para sitio web de la Copa Fortaleza Álamos.
Version: 1.2
Text Domain: falco
*/

/* @group Normalize */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }

/* Links */
a { background-color: transparent; }
a:hover { outline: 0; }

/* Text-level semantics  */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
small { font-size: 75%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* Embedded content */
img { border: 0; }
svg:not(:root) { overflow: hidden; }

/* Grouping content */
figure { margin: 1em 40px; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms  */
button, input, optgroup, select, textarea { color: inherit;  font: inherit;  margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer;  }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal;}
input[type="checkbox"], input[type="radio"] { padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0;  padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

/* IE Mobile */
@-ms-viewport{ width: device-width; }

/* @end */

html { height: auto; min-height: 100%; }

body {
	font-family: Roboto, sans-serif;
	font-size: 18px;
	background-color: rgb(208, 208, 206);
}

#Wrapper { max-width: 1060px;
	margin: 50px auto;
	background-color: rgb(255, 255, 255);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.contained {
	box-sizing: border-box;
	display: block;
	overflow: auto;
	max-width: 1060px;
	margin-right: auto;
	margin-left: auto;
	padding: 50px;
}

.houdini { display: none; }

a { -webkit-transition: color .2s linear; -o-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; transition: color .2s linear; text-decoration: none; outline: none; }

.video, .video iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}


/* @group Temporal */


div, main, section, article, figure, input, select, textarea, button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	
}

img, figure { max-width: 100%; height: auto; }

figure {
	margin-left: 0;
	margin-right: 0;
}

/* @end */

/* @group Header */

#Header {
	background-color: #decd31;
}

#Main-Header {
	background-color: rgb(0, 48, 87);
	background-repeat: no-repeat;
	background-position-x: -190px;
	background-position-y: -155px;
	background-size: 600px auto;
	height: 220px;
	position: relative;
}

#Halcon {
	display: block;
	width: 345px;
	height: 245px;
	background: url(pix/copa_fortaleza_alamos.svg) no-repeat;
	background-size: 300px auto;
	position: absolute;
	top: -25px;
	left: -25px;
}

h1.logo, h2.logo { text-transform: uppercase; font-size: 30px;
	display: block;
}
h1.logo:hover, h2.logo:hover { cursor: text; }
h2.tagline, h3.tagline { font-size: 22px; }

.logo a span, .tagline { display: none; }

.logo a {
	display: block;
	height: 220px;
	width: 100%;
	background: url(pix/copa_fortaleza_alamos.svg) center center no-repeat;
}

#Header-Menu {
	background-color: rgb(238, 39, 55);
	margin-left: -10px;
	margin-right: -10px;
	position: relative;
	display: block;
}

#Header-Menu:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent rgb(158, 11, 15) transparent transparent;
}

#Header-Menu:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -10px;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 0;
	border-color: rgb(158, 11, 15) transparent transparent transparent;
}


/* @end */

/* @group Forms */

input, select, textarea, button { outline: none; -webkit-appearance: none; -moz-appearance: none; 
	color: #333;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

input {
	height: 32px;
	border: 1px solid #ccc;
	padding: 6px;
	font-size: 16px;
}

input:focus, textarea:focus {
	border: 1px solid rgba(0, 82, 135, 0.5);
	color: #000;
	-moz-box-shadow: 0 0 6px rgba(0, 82, 135, 0.25);
	box-shadow: 0 0 6px rgba(0, 82, 135, 0.25);
	opacity: 1;
}

button {
	border: 1px solid #ccc;
	height: 32px;
	background-color: #ddd;
	font-size: 16px;
	padding: 0 8px;
}

/* @end */

/* @group Busqueda */

#Search {
	max-width: 512px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

#Search label { display: none; }

#Search input {
	-moz-appearance:none;
	-webkit-appearance:none;
	width: 100%;
	padding-right: 42px;
}

#Search button {
	width: 32px;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	background-color: transparent;
	color: #666;
}

#Search button:hover { color: rgb(0, 83, 135); }

/* @end */

/* @group Main */

.main.contained { min-height: 200px; }


/* Post Lists */

h1.list-title {
	color: rgb(51, 51, 51);
	margin-bottom: 50px;
}

.list-title span { font-style: italic; }

.listed {
	display: block;
	clear: both;
	margin-top: 50px;
}

.listed:first-of-type { margin-top: 0; }

.listed .post-title {
	margin-bottom: 10px;
}

.listed .post-thumbnail {
	line-height: 0;
	display: block;
	float: left;
	margin-bottom: 15px;
	margin-right: 15px;
}

.listed .post-thumbnail {
	width: 80px;
}

.listed .post-excerpt {
	margin-bottom: 15px;
}

.listed a.read-more {
	display: inline-block;
	float: right;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: lowercase;
}

.listed a.read-more:after {
	content: " \f105";
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
}

.listed .post-meta { 
	clear: both;
	font-size: 14px;
}

/* Posts Pagination */

#Posts-Pagination {
	display: block;
	clear: both;
	margin-top: 50px;
}

#Posts-Pagination .older, #Posts-Pagination .newer {
	width: 40%;
	position: relative;
	font-family: Roboto, sans-serif;
}

#Posts-Pagination .newer { float: left; text-align: left; padding-left: 14px; }

#Posts-Pagination .newer i { position: absolute; left: 0; top: 2px; }

#Posts-Pagination .older { float: right; text-align: right; padding-right: 15px; }

#Posts-Pagination .older i { position: absolute; right: 0; top: 2px; }

/* @end */

/* @group 404 & Error */

.error404 main, .no-results { text-align: center; }

.error404 h1, .no-results h1 {
	font-size: 48px;
	color: rgb(174, 9, 35);
	text-transform: uppercase;
}

.error404 h2, .no-results h2 {
	color: rgb(51, 51, 51);
	margin-bottom: 50px;
}

.search .no-results h2 {
	margin-top: 50px;
}

.error404 #Search, .no-results #Search { margin-top: 30px; }

/* @end */

/* @group Eventos */

#Eventos { margin-top: 25px; }

#Eventos .row { margin-top: 20px; }

#Eventos .pasado { opacity: 0.5; }

#Eventos .date-time { display: block; overflow: auto; float: left; }

#Eventos .date-time div {
	float: left;
	height: 50px;
	position: relative;
	color: rgb(255, 255, 255);
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
	text-align: center;
	padding-right: 15px;
	padding-left: 5px;
}

#Eventos .weekday {
	line-height: 50px;
	background-color: rgb(199, 200, 202);
	text-align: right;
	color: rgb(51, 51, 51) !important;
	width: 100px;
}

#Eventos .weekday::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 25px 0;
	border-color: transparent rgb(238, 39, 55) transparent transparent;
}

#Eventos .weekday::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 25px 15px;
	border-color: transparent transparent rgb(238, 39, 55) transparent;
}

#Eventos .current .weekday {
	color: rgb(255, 255, 255) !important;
	background-color: rgb(128, 130, 133);
	text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}

#Eventos .date {
	background-color: rgb(238, 39, 55)!important;
	width: 60px;
}

#Eventos .date span {
	display: block;
	font-size: 12px;
	padding-top: 8px;
}

#Eventos .date::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 25px 0;
	border-color: transparent rgb(0, 83, 135) transparent transparent;
}

#Eventos .date::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 25px 15px;
	border-color: transparent transparent rgb(0, 83, 135) transparent;
}

#Eventos .time {
	background-color: rgb(0, 83, 135);
	line-height: 50px;
	width: 80px;
}

#Eventos .time::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 25px 0;
	border-color: transparent #ffffff transparent transparent;
}

#Eventos .time::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 25px 15px;
	border-color: transparent transparent rgb(255, 255, 255) transparent;
}

#Eventos .data-event {
	padding-left: 0;
	margin-left: 260px;
}

#Eventos .data-event h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 22px;
	color: rgb(0, 61, 104);
}

#Eventos .data-event p {
	margin-top: 5px;
	color: rgb(51, 51, 51);
}

/* @end */

/* @group Subpaginas */

#Children-Pages {
	list-style: none;
	margin-top: 25px;
	margin-bottom: 0;
	padding: 0;
}

#Children-Pages li {
	display: table;
	margin-top: 20px;
	height: 50px;
	float: left;
	width: 50%;
	padding-left: 15px;
	padding-right: 15px;
}

#Children-Pages a {
	display: table-cell;
	height: 50px;
	vertical-align: middle;
	padding-left: 25px;
	padding-right: 25px;
	border: 1px solid rgb(199, 200, 202);
	background-color: rgba(199, 200, 202, 0.3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 100%;
	text-align: center;
	color: rgb(0, 83, 135);
}

#Children-Pages a:hover {
	color: rgb(238, 39, 55);
	border-color: rgb(0, 83, 135);
}

/* @end */

/* Álamos TV - Ustream*/

#TV {
	background: url(pix/bk_alamostv_720.png) center top no-repeat;
	height: 531px;
	overflow: hidden;
	margin-top: 50px;
}

#TV iframe {
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 32px;
}

/* @group Footer */

footer {
	border-top: 5px solid rgb(238, 39, 55) !important;
}

footer .contained {
	padding: 25px 0;
}

/* @end */


.albums{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  padding-top: 64px;
}

.albums h3 {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 24px !important;
}

.album-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:#222;
  background-color: rgba(199, 200, 202, 0.3);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}

.album-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.album-card img{
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit:cover;
  display:block;
}

.album-card__content{
  padding:18px;
}

.album-card__content h3{
  margin:0 0 10px;
  font-size:1.1rem;
}

.album-card__content span{
  display:inline-block;
  font-weight:600;
  color:#0b6bcb;
}


/* @group Dev */

/* Screens */
#Screens {
	background-color: rgba(0, 0, 0, 0.33);
	position: fixed;
	z-index: 1000;
	bottom: 0px;
	width: 100%;
	overflow: visible;
	height: 6px;
	display: block;
}

#Screens .box {
	background-color: rgba(0, 0, 0, 1);
	display: block;
	margin-right: auto;
	margin-left: auto;
	font-size: 14px;
	overflow: visible;
	position: relative;
	height: 6px;
}

#Screens .holder {
	display: block;
	height: 0;
	width: 100%;
	position: absolute;
	top: -30px;
	overflow: visible;
	text-align: center;
	line-height: 24px;
}

#Size {
	display: inline-block;
	white-space: nowrap;
	background-color: rgba(0, 0, 0, 0.8);
	color: rgb(255, 255, 255);
	font-size: 14px;
	padding-left: 12px;
	padding-right: 12px;
	height: 24px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

#Size:before { margin-right: 15px; }

/* @end */