* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

// DO NOT set font-size and line-height here!
// Adjust $base-font-size and $base-line-height in _config.scss
html {
	background: $light;
	color: $secondary;
	font-weight:300;
	font-family: $main-font;
	font-size: 100% * ($base-font-size / 16px);
	line-height: rem($base-line-height);

	/* disable text resize in landscape. e.g. on iphone */
	text-size-adjust: none;
}

body {
	line-height: $base-line-height;

	// Debug mode
	&.the-customer-page #log_hider {
		display: none;
	}

	&.ie-8 #pageloader:after {
		display: none;
	}
}

/**
 * Headlines
 */
h1 {
	@extend %optimized-rendering;
	font-family: $display-font;
	font-size: rem(25px);
	line-height: 1.5em;
	color:$primary;
	font-weight:300;
	margin-bottom:1.5rem;


	span{
		font-size: rem($h1-size);
		display:block;
		text-transform:uppercase;
		color:$alert;
	}
}

h2 {
	@extend %optimized-rendering;
	font-family: $display-font;
	font-size: rem(23px);
	line-height: 1.5em;
	color:$primary;
	font-weight:300;
	margin-bottom:1.5rem;


	span{
		font-size: rem(28px);
		display:block;
		text-transform:uppercase;
		color:$alert;
	}
}

h3 {
	@extend %optimized-rendering;
	font-size: rem($h3-size);
	text-transform:uppercase;
	font-weight:300;
	margin-bottom:1.5rem;
}

h4 {
	@extend %optimized-rendering;
	font-size: rem($h4-size);
}

h5 {
	@extend %optimized-rendering;
	font-size: rem($h5-size);
}

h6 {
	@extend %optimized-rendering;
	font-size: rem($h6-size);
}

/**
 * Links
 */
a {
	color: $alert;
	text-decoration:none;
	@extend %animation;

	&:focus, &:hover, &:active {
		color: $secondary;
	}

	img {
		border: none;
	}

	&[href$=".pdf"]:before {
		@extend .icon;
		@extend %icon-file-pdf;
		margin-right: 0.5em;
	}
}

/**
 * Images
 */
img {
	vertical-align: bottom;
}
.content{
	img{
		max-width:100%;
		height:auto;
	}
}
/**
 * Paragraphs
 */
p {
	margin-bottom: 1.2em;
	hyphens: auto;
}

hr {
	height: rem(1px);
	border: none;
	background: #BBBBBB;
	clear: both;
	margin: 1rem 0;
	margin-bottom: rem(80px);
}
strong{
	font-weight:700;
}
/**
 * Lists
 */
ul, ol, dl {
	margin-bottom: 1rem;
	hyphens: auto;
}

ul {
	li {
		padding: .3rem 0;

		&:before {
			content: "»";
			line-height: 1.5rem;
			margin-right: .5rem;
		}
	}
	ul {
		margin-left: 1rem;
		margin-bottom: 0;
	}
	list-style: none;
}

/**
 * Tables
 */
table {
	border-collapse: collapse;
	margin-bottom: 1rem;
	hyphens: auto;
	width: 100%;
	font-size:rem(14px);
}

caption {
	font-size: 1.2rem;
	font-weight: 700;
	padding-bottom: .5rem;
}

// Responsive table styles
table, thead, tbody, th, td, tr, caption {
	display: block;
}

thead {
	border-collapse: collapse;

	tr {
		position: absolute;
		top: -999%;
		left: -999%;
	}
}

tbody tr {
	border-bottom: 1px solid $medium;
	padding: rem($base-gap) 0;
}

td {
	min-height: 1rem;
	padding: .3rem rem($base-gap) .3rem 35%;
	position: relative;

	&:before {
		content: attr(data-label) ": ";
		font-weight: bold;
		left: 1rem;
		position: absolute;
		top: .3rem;
		white-space: nowrap;
		width: 45%;
	}
}

// Restore proper table display values for larger screens
@include breakpoint(large) {
	table {
		display: table;
	}

	caption {
		display: table-caption;
	}

	thead {
		display: table-header-group;
	}

	tbody {
		display: table-row-group;
	}

	tr {
		display: table-row;
	}

	th, td {
		display: table-cell;
		vertical-align: top;
		text-align:center;
	}

	td {
		min-height: inherit;
		padding:.5rem;

		&:before {
			display: none;
			content: "";
			width: auto;
		}
	}

	thead tr {
		position: static;
		left: auto;
		top: auto;
	}
}