/* ---------------- Typo */

/* fonts */

:root{
	--font-headline: "sans";
	--font-copy: "sans";

	--font-size_title: 100%;
}

@font-face			{ font-family: "Icons"; src: url("fonts/SofaIcons-Regular.woff");}
@font-face			{ font-family: "sans"; font-weight: 300; src: url("fonts/opensans-light-webfont.woff2") format('woff2'),url('fonts/opensans-light-webfont.woff') format('woff');}
@font-face			{ font-family: "sans"; font-weight: 500; src: url("fonts/opensans-regular-webfont.woff2") format('woff2'),url('fonts/opensans-regular-webfont.woff') format('woff');}
@font-face			{ font-family: "sans"; font-weight: 600; src: url("fonts/opensans-semibold-webfont.woff2") format('woff2'),url('fonts/opensans-semibold-webfont.woff') format('woff');}
@font-face			{ font-family: "sans"; font-weight: 700; src: url("fonts/opensans-bold-webfont.woff2") format('woff2'),url('fonts/opensans-bold-webfont.woff') format('woff');}

/* defaults */

*{
	font-family: var(--font-copy), sans-serif;
}

body{
	font-size: 100%;
	font-weight: 300;
	line-height: 140%;
}



h1,h2,h3,h4,h5,h6,.model_name{
	font-family: var(--font-headline), sans-serif;
	margin:0;
	font-weight: 300;
	text-transform: uppercase;
}

h1					{ font-size: 300%; }
h2					{ font-size: var(--font-size_title);
					border-bottom: 1px solid var(--col-hr);
					padding: 10px 0;
					margin: 50px 0 20px 0;
					letter-spacing: 1px;
					text-align: center;
					font-weight: 600;
					display: inline-block;
}
h3					{ font-size: var(--font-size_title);
					margin-bottom: 10px;
					text-transform: none;
}
h4 {
	font-weight: 300;
	margin-top: 20px;
}
h5{
	font-size: 110%;
	letter-spacing: 2px;
	font-weight: 300;
	text-align: center;
	margin-top: 7%;
}
h6{
	font-size: 110%;
	text-align: center;
	margin-top: 5%;
	color: var(--col-grey);
}

.typo_l,.typo_m,.typo_s,.typo_xs{
	transition: all .1s ease-in-out; 
}

.typo_l{
	font-size: 170%;
}
.typo_m{
	font-size: 105%;
}
.typo_s{
	font-size: 85%;
}
.typo_xs{
	font-size: 75%;
}

p{
	margin:0;
}
a					{ text-decoration: none; }
a:hover, a span:hover, a:hover span { color: var(--col-highlight); }

.l					{ font-weight: 300; }
.r					{ font-weight: 500; }
b, .b,strong		{ font-weight: 600; }
.sb					{ font-weight: 600; }
.uc					{ text-transform: uppercase; }
.wide				{ letter-spacing: 1px; }

.sf_icon			{ font-family: "Icons"; }
.sf_icon_big		{ font-family: "Icons"; font-size: 26px; }

.model_name{
	text-align: center;
	margin-top: 5%;
}

.credits{
	font-size:70%;
	letter-spacing: 1px;
}
.credits a{
	text-decoration: none;
}
.copyright{
	font-size: 80%;
	letter-spacing: 1px;
}

/* table header */

.table_header{
	font-size: .8rem;
	color: var(--col-grey);
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: var(--col-margin) 0;
}

/* ---------------- Caption */

.caption, .social_caption, .video_caption{
	margin-top: 1%;
	text-align: center;
	font-weight: 300;
	color: var(--col-highlight);
}
.social_caption{
	margin-bottom: 6%;
}
.video_caption{
	text-align: left;
	margin-top:10px;;
}


/* privacy policy */

.imprint_text h1,
.imprint_text h2,
.imprint_text h3	{ font-weight: 600; margin: 1em 0; }
.imprint_text ul li	{ list-style-type: circle; font-size: 100%; }
.imprint_text p		{ font-size: 100%; margin-bottom: 1em; color: var(--col-grey) !important; }

@media only screen and (max-width: 1200px) {
	.typo_l{
		font-size: 150%;
	}
}
@media only screen and (max-width: 900px) {
	.typo_l{
		font-size: 120%;
	}
}

@media only screen and (max-width: 768px) {
	h2{
		padding: 10px 0;
		margin: 20px 0 20px 0;
	}
	h6{
		font-size: 90%;
	}
	.typo_l{
		font-size: 110%;
	}
	.typo_m{
		font-size: 85%;
	}
	.typo_s{
		font-size: 80%;
	}
	.typo_xs{
		font-size: 70%;
	}
}
@media only screen and (max-width: 414px) {
	h4 {
		margin-top: 10px;
	}
	.typo_l{
		font-size: 100%;
	}
	.model_data_overlay .typo_l{
		font-size: 110%;
	}
	.model_data_overlay .typo_m{
		font-size: 75%;
	}