// ==========================================================================
// HTML5 Video Player Demo Page
// ==========================================================================

// Reset
@import "docs/normalize";
// Mixins
@import "docs/mixins";

// Variables
// ---------------------------------------
// Colors
$blue:          			#3498DB;
$gray-dark: 				#343f4a;
$gray: 						#565d64;
$gray-light: 				#cbd0d3;

// Elements
$link-color: 				$blue;
$padding-base: 				20px;

// Breakpoints
$screen-md: 				768px;

// BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {
	box-sizing: border-box;
}

// Base
html {
	//font-size: 62.5%;
}
body {
	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #fff;
	line-height: 1.5;
	text-align: center;
	color: #6D797F;
}

// Type
h1,
h2 {
	letter-spacing: -.025em;
	color: #2E3C44;
	margin: 0 0 ($padding-base / 2);
	line-height: 1.2;
	@include font-smoothing();
}
h1 {
	@include font-size(64);
	color: #3498DB;
}
p,
small {
	margin: 0 0 $padding-base;
}
small {
	display: block;
	padding: 0 ($padding-base / 2);
	@include font-size(14);
}

// Header
header {
	padding: $padding-base;
	margin-bottom: $padding-base;

	p {
		@include font-size(18);
	}
	@media (min-width: 560px) {
		padding-top: ($padding-base * 3);
		padding-bottom: ($padding-base * 3);
	}
}

// Sections
section {
	padding-bottom: $padding-base;

	@media (min-width: 560px) {
		padding-bottom: ($padding-base * 2);
	}
}

// Links & Buttons
a {
	text-decoration: none;
	color: $link-color;
	border-bottom: 1px solid currentColor;
	transition: all .3s ease;

	&:hover,
	&:focus {
		color: #000;
	}
	&:focus {
		@include tab-focus();
	}
}
.btn {
	display: inline-block;
	padding: ($padding-base / 2) ($padding-base * 1.5);
	background: $link-color;
	border: 0;
	color: #fff;
	@include font-smoothing(on);
	font-weight: 600;
	border-radius: 3px;

	&:hover,
	&:focus {
		color: #fff;
		background: darken($link-color, 5%);
	}
}

// Players
.example-audio .player {
	max-width: 480px;
}
.example-video .player {
	max-width: 1200px;
}
.example-audio .player,
.example-video .player {
	margin: 0 auto $padding-base;

	&-fullscreen,
	&.fullscreen-active {
		max-width: none;
	}
}

// Fonts
// Last to not block rendering
@import "docs/fontface.less";