:root {
	/* Box model */
	--full-header-height: 64px;
	--full-logo-height: 128px;
	--responsive-header-height: calc(var(--full-header-height) * 6);
	--responsive-logo-height: calc(var(--full-logo-height) / 2); 
}

html {
	/* Typographic */
	font-family: 'Open Sans', sans-serif !important;
	color: #333;
	
	/* Visual. */
	background-color: #FAFAFA;
}

body {
	/* Box model */
	margin: 0;
	padding: 0;
}

main {
	/* Box model */
	max-width: 1400px;
	margin: 2rem auto;
	padding: 1rem;
				
	/* Visual. */
	background-color: #FFF;
	box-shadow:
	0px 6px 10px 0px rgba(0, 0, 0, 0.14),
	0px 1px 18px 0px rgba(0, 0, 0, 0.12), 
	0px 3px 5px -1px rgba(0, 0, 0, 0.30);
}

#premium-header {
	/* Visual */
	background-color: #333;
}

#premium-nav-bar {
	/* Box model */
	height: var(--full-header-height);
	max-width: 1400px;
	margin: auto;
}

#premium-nav-bar > ul {
	/* Box model */
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	
	/* Typographic */
	list-style-type: none;
}

#premium-nav-bar > ul > li {
	/* Box model */
	height: var(--full-header-height);
	float: left;
}

#premium-nav-bar > ul > li > a {
	/* Box model */
	display: block;
	height: var(--full-header-height);
	padding: 0px 16px;
	
	/* Typographic */
	font-weight: bold;
	line-height: var(--full-header-height);
	color: white;
	text-align: center;
	text-decoration: none;
}

#premium-nav-bar > ul > li > a:hover {
	/* Visual */
	background-color: #111;
}

#premium-header-logo {
	/* Box model */
	height: var(--full-logo-height);
	width: 100%;
	
	/* Visual */
	background-image: url("../media/full-logo.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#premium-footer {
	/* Box model */
	height: 3rem;
	width: 100%;
	
	/* Typographic */
	line-height: 3rem;
	color: white;
	text-align: center;
	
	/* Visual */
	background-color: #333;
}

.card-container {
	/* Box model */
	display: inline-block;
	width: 33.333%;
	padding: 4px;
	box-sizing: border-box;
	
	/* Typographic */
	vertical-align: top;
}

.card {
	/* Box model */
	width: 100%;
	
	/* Typographic */
	text-align: center;
	
	/* Visual */
	background-color: #ECECEC;
}

.card > h3 {
	/* Box model */
	margin: 0;
	padding: 0.5rem 0;
}

.card-text {
	min-height: 12rem;
	padding: 1rem;
}

@media only screen and (max-width:1000px) {
	.card-container {
		/* Box model */
		display: block;
		width: 100%;
	}
}

@media only screen and (max-width:700px) {
	#premium-nav-bar {
		/* Box model */
		height: var(--responsive-header-height);
	}
	
	#premium-nav-bar > ul > li {
		/* Box model */
		width: 100%;
	}
	
	#premium-header-logo {
		/* Box model */
		height: var(--responsive-logo-height);
		
		/* Visual */
		background-image: url("../media/responsive-logo.png");
	}
	
	.card-container {
		/* Box model */
		display: block;
		width: 100%;
	}
}