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

// Reset
@import "docs/normalize.less";
// Mixins
@import "docs/mixins.less";
// Fonts
@import "docs/fontface.less";

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

// Elements
@link-color: 				@blue;

// BORDER-BOX ALL THE THINGS! 
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {  
	box-sizing: border-box; 
}
html {
	font-size: 62.5%;
}
body {
	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #fff;
	.font-size(16);
	line-height: 1.5;
	text-align: center;
	color: #6D797F;
}
h1,
h2 {
	letter-spacing: -.025em;
	color: #2E3C44;
	margin: 0 0 10px;
	line-height: 1.2;
	.font-smoothing();
}
h1 {
	.font-size(64);
	color: #3498DB;
}
p,
small {
	margin: 0 0 20px;
}
small {
	display: block;
	.font-size(14);
}
header {
	padding: 60px 0;
	margin-bottom: 20px;

	p {
		.font-size(18);
	}
}
a {
	text-decoration: none;
	color: @link-color;
	border-bottom: 1px solid currentColor;
	transition: all .3s ease;

	&:hover,
	&:focus {
		color: #000;
	}
	&:focus {
		.tab-focus();
	}
}
.btn {
	display: inline-block;
	padding: 10px 25px;
	background: @link-color;
	border: 0;
	color: #fff;
	.font-smoothing(on);
	font-weight: 600;
	border-radius: 3px;
	
	&:hover,
	&:focus {
		color: #fff;
		background: darken(@link-color, 5%);
	}
}

section {
	padding-bottom: 80px;
}

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

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