/* GLOBAL */
body { width: 100%; background: #222 }
* { outline: none }
h1, h2, h3 { font-family: 'Alfa Slab One', sans-serif }
h1 { color: #DDD; line-height: 1.2em; margin-top: 2em; margin-bottom: .75em; font-size: 2.6em }
h2 { color: #AAA; line-height: 1em; border-bottom: 14px solid #333; padding-bottom: .2em; margin-bottom: 1.5em; font-size: 2em }
p { font-family: 'Lato', sans-serif; color: #AAA; font-size: 1.2em; line-height: 1.5em }
p a { color: inherit; text-decoration: underline }
p a:hover { color: #ee4035 }
.grid-x { margin-bottom: 6em }


.medal { height: 200px; color: #FFF; font-family: 'Alfa Slab One', sans-serif; font-size: 1.2em; border-right: 4px solid #222; border-bottom: 4px solid #222; margin-bottom: 10px }
.medal span { max-width: 180px; margin: 0 auto }
.medal.bronze { background: url('../img/bronze.png') no-repeat center center; background-size: contain }
.medal.silver { background: url('../img/silver.png') no-repeat center center; background-size: contain }
.medal.gold { background: url('../img/gold.png') no-repeat center center; background-size: contain }
.medal { display: flex; align-items: center }


.video { height: 300px; position: relative; border-bottom: 4px solid #222 }
.video div.title { position: absolute; bottom: 10%; padding-right: 10px }
.video div.image { position: absolute; width: 100%; height: 100%; opacity: .4; transition: all .4s; background: #222 }
.video:hover div.image { opacity: 1  }
.video h3 { font: 1.3em/1.25 'Alfa Slab One', sans-serif; color: white; display: inline; text-transform: uppercase; margin-bottom: 1em }
.highlight { display: inline; background: #ee4035; color: white }
.highlight--wrapping { position: relative; left: 0.25em; padding-left: 0; box-shadow: 0.25em 0 0 #ee4035, -0.25em 0 0 #ee4035 }
span.time { background: #000; padding: .75em .75em .5em .5em; display: inline-block; font-size: .6em }


/* MODAL */
.reveal { border: 0; background: transparent; padding: 50px 0 0 0 }
.reveal-overlay { background-color: rgba(10, 10, 10, .9) }
.responsive-embed video { position: relative }
.close-button { font-size: 2em; color: white; position: fixed; top: 0; right: 0; padding: 15px 25px 18px; background: #ee4035 }
.close-button:hover { color: #AAA }
body.is-reveal-open .grid-container { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px) }
 
 
@media print, screen and (min-width: 40.025em) {
	h1 { color: #DDD; line-height: 1.1em; font-size: 3.2em }
	h1 span.king { font-size: .6em }
	.medal { height: 280px; margin-bottom: 20px }
	.video { border-right: 4px solid #222 }
	.reveal.large { max-width: 55rem }
}