/* Fira Sans weights = 400, 400 italic, 500, 500 italic, 700 */

html { font-size: 10px; }
body { font-family: "Fira Sans", sans-serif; font-size: 2.2rem; line-height: 1.5; margin: 0; -webkit-font-feature-settings: "liga" 1; -moz-font-feature-settings: "liga" 1; -ms-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; }

a { font-weight: 500; color: #36c; text-decoration: none; outline: 0; border-bottom: solid 1px transparent; transition: all .2s linear; }
	a:hover { color: #69f; border-color: #69f; }
h1 { font-size: 7rem; line-height: 1; margin: 0; }
h2 { font-size: 3.6rem; line-height: 1.25; margin: 0 0 15px; }
h3 { font-size: 3rem; line-height: 1.25; margin: 0 0 15px; }
hr { margin: 0; border-top: solid 1px #ccc; }
iframe { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 4px; aspect-ratio: 16 / 9; }
main { margin: -110px 0 50px; }
ol { padding: 0; margin: 0 0 0 36px; }
p { margin: 0 0 15px; }
sup { font-size: 32%; font-weight: normal; top: -1.4em; opacity: .5; }



.container { max-width: 1040px; padding: 0 20px; margin: auto; }

.header-bkgd { background: #fb3; padding: 20px 0; }
.logo { display: block; }
.hero { max-width: 400px; float: right; border: solid 14px rgba(0,0,0,.1); border-radius: 50%; }
.subheader-bkgd { color: #fff; text-shadow: 2px 2px 3px rgba(0,0,0,.3); background: linear-gradient(to bottom right, #666, #333); padding: 30px 0 140px; }

.thumbnail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 0 0 50px; counter-reset: video; }
	.thumbnail-grid a { font-size: 3.6rem; line-height: 1.25; font-weight: 700; color: #000; text-align: center; background: linear-gradient(to bottom right, #fb3, transparent), #fb3; display: grid; place-items: center; overflow: hidden; padding: 20px; border: 0; border-radius: 4px; position: relative; aspect-ratio: 16 / 9; }
		.thumbnail-grid a:hover { background: linear-gradient(to bottom right, #fb3, transparent), #ff7f00; }
	a.download { font-weight: 400; color: #fff; text-shadow: 2px 2px 3px rgba(0,0,0,.3); background: linear-gradient(to bottom right, #69f, transparent), #69f; }
		a.download:hover { background: linear-gradient(to bottom right, #69f, transparent), #36c; }
	.video::before { content: counter(video); counter-increment: video; font-size: 5rem; font-weight: 500; line-height: 1; color: #333; background: rgba(255,255,255,.6); width: 50px; padding: 10px; border-radius: 50%; position: absolute; top: -10px; left: -14px; mix-blend-mode: soft-light; }
	.video::after, a.download::after { content: url(../img/video-icon.svg); height: 84px; position: absolute; right: 0; bottom: 0; mix-blend-mode: soft-light; }
	a.download::after { content: url(../img/download-icon.svg); }

#lean_overlay { background: #000; display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; }
.modal { display: none; width: 1000px; border-radius: 4px; box-shadow: 6px 6px 10px rgba(0,0,0,0.4); }
.modal-close { font-size: 2rem; line-height: 1; font-weight: 500; background: #fff; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; position: absolute; top: -12px; right: -12px; z-index: 2; cursor: pointer; transition: all .2s linear; }
	.modal-close:hover { color: #fff; background: #999; }

.start ::marker { font-size: 3rem; font-weight: 700; color: #fa0; }

footer { font-size: 1.8rem; line-height: 2; color: #fff; text-shadow: 2px 2px 3px rgba(0,0,0,.3); background: linear-gradient(to bottom right, #666, #333); padding: 15px 0 0; }
	footer span { color: #999; margin: 0 6px; }
	footer a { font-weight: 500; color: #fb3; }
		footer a:hover { color: #f93; border-color: #f93; }
.copyright { font-size: 1.4rem; background: rgba(0,0,0,.1); padding: 15px 0; margin: 15px 0 0; }



/*////////// MEDIA QUERIES //////////*/

/* To make sure global and main navigation is visible after using jQuery animate/slideToggle on smaller viewports */
@media only screen and (min-width: 767px) {
}

@media only screen and (max-width: 1440px) {
}

@media only screen and (max-width: 1100px) {
}

@media only screen and (max-width: 1023px) {
}

@media only screen and (max-width: 870px) {
}

@media only screen and (max-width: 767px) {
}

@media only screen and (max-width: 700px) {
}

@media only screen and (max-width: 599px) {
}

@media only screen and (max-width: 425px) {
}