/*
-----------------------------------------------
		www.ibttompert.de
	 by www.christinaschmid.de
	  & www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
		margin: 0;
	    padding: 0;
	    border: 0;
	    outline: 0;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: transparent;
	    -webkit-text-size-adjust: 100%;
	    font-variant-ligatures: none;
		-moz-font-feature-settings: "salt";
		-webkit-font-feature-settings: "salt";
		font-feature-settings: "salt";
}

html {
		height: 100%;
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
	    display: block;
}

blockquote, q {
	    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	    content: "";
	    content: none;
}

a {
	    margin: 0;
	    padding: 0;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: transparent;
}

table {
	    border-collapse: collapse;
	    border-spacing: 0;
}

input, select {
	    vertical-align: middle;
}

nav ul {
		list-style: none;
}


/*		W E B F O N T S
----------------------------------------------- */

/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2018 Schwartzco Inc.
        License: 1801-QSANQJ     
*/

@font-face {
  font-family: 'Graphik Web';
  src: url('/media/Graphik-Semibold-Web.eot');
  src: url('/media/Graphik-Semibold-Web.eot?#iefix') format('embedded-opentype'),
       url('/media/Graphik-Semibold-Web.woff2') format('woff2'),
       url('/media/Graphik-Semibold-Web.woff') format('woff');
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik Web';
  src: url('/media/Graphik-Regular-Web.eot');
  src: url('/media/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),
       url('/media/Graphik-Regular-Web.woff2') format('woff2'),
       url('/media/Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}


/*		B A S I C S
----------------------------------------------- */

body {
		color: #111;
		background: #fff;
		font-family: "Graphik Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 0.04em;
		text-align: left;
}

a:link, a:visited {
		color: #111;
		text-decoration: none;
		outline: none;
}

a:hover, a:active {
		color: #0083cc;
}

.content p a:link, .content p a:visited {
		border-bottom: 1px solid #ccc;
		padding-bottom: 2px;
}

.content p a:hover, .content p a:active {
		border-bottom: 1px solid #0083cc;
}

footer a:hover, footer a:active {
		color: #999 !important;
}

h1, h2 {
		font-weight: normal;
}

strong, b {
		font-weight: 600;
}

.active {
		font-weight: 600;
}


/*		D E S I G N
----------------------------------------------- */

header {
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
		padding: 5px 0;
}

header h1 {
		display: inline-block;
		margin: 5px 0 5px 15px;
		font-size: 110%;
}

header dl {
		vertical-align: top;
}

header dt {
		margin-bottom: 12px;
		font-size: 110%;
}

footer {
		margin: 40px 0 0 0;
		padding: 30px 15px 10px 15px;
		color: #fff;
		background: #333;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}

.nospace + footer {
		margin-top: 0;
}

footer dl {
		margin-bottom: 20px;
}

footer a:link, footer a:visited {
		color: #fff;
}

footer a:hover, footer a:active {
		color: #0083cc;
}

#intro {
		margin: 70px 15px 25px 15px;
}

#intro img {
		width: 100px;
		display: block;
}

#intro h2 {
		display: block;
		font-size: 140%;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: 0.01em;
		margin-top: 30px;
}

.content h1 {
		font-size: 140%;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: 0.01em;
}

#overview h2 {
		font-size: 140%;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: 0.01em;
		margin-top: 20px;
		display: block;
		margin-bottom: 20px;
}

#overview {
		padding: 34px 15px 60px 15px;
		width: auto;
		clear: both;
}

.gray {
		background: #ebebeb;
}

#overview .item {
		margin-bottom: 40px;
}

#overview a {
		display: block;
}

#overview img {
		width: 100%;
}

#list {
		margin: 40px 15px 60px 15px;
}

#list table {
		width: 100%;
		border-bottom: 1px solid #ccc;
}

#list tr:hover {
		color: #0083cc;
		cursor: pointer;
}

#list tr.toggle:hover {
		color: inherit;
		cursor: inherit;
}

#list tr:first-child:hover {
		color: inherit;
		cursor: inherit;
}

#list th {
		padding-bottom: 10px;
}

#list td {
		padding: 5px 0;
		border-top: 1px solid #ccc;
}

#list .toggle td {
		padding: 40px 0 60px 0;
		border-top: none;
}

#list .tbv {
		width: 51.3%;
		padding-right: 5%;
}

#list .tbh {
		width: 30%;
		padding-right: 5%;
}

#list .tbri {
		text-align: right;
		white-space: nowrap;
}

#list img {
		display: none;
}

#list .toggle img {
		display: block;
}

#list .tl {
		margin-bottom: 20px;
}

.rsGCaption {
		display: none;
}

.rsNav {
		margin-bottom: 20px !important;
}

#full {
		padding: 34px 15px 60px 15px;
		width: auto;
}

.fl {
		padding-top: 80px;
		max-width: 600px;
}

.fr {
		padding-top: 20px;
		max-width: 600px;
}

.extra {
		margin: 0 15px 0 15px;
		padding-top: 0;
		padding-bottom: 40px;
		max-width: 600px;
}

.extra img, .extra iframe {
		width: 100%;
		height: auto;
}

.extra iframe {
		height: 400px;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

.contentblock {
		clear: both;
		border-top: 3px solid #fff;
}

.contentblock:first-child {
		border-top: none;
}

.content {
		margin: 0 15px;
		padding-bottom: 60px;
		padding-top: 30px;
		max-width: 600px;
}

.content p, .content h1 {
		margin-bottom: 20px;
}

.content ul {
		margin-bottom: 20px;
}

.content li {
		margin-left: 0;
		list-style: none;
}

.content li:before {
		content: "+";
		padding-right: 10px;
}


/*		R E S P O N S I V E
----------------------------------------------- */

@media screen and (max-width: 360px) {

#ibtfull {
		display: none;
}

.tbri {
		display: none;
}

}


@media screen and (min-width: 360px) {

#ibtfull {
		display: block;
}

#ibtshort {
		display: none;
}

}


@media screen and (max-width: 1000px) {

header .nav {
		display: none;
}

header .responsive {
		display: block;
		margin-top: 6px;
		line-height: 2 !important;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		height: 90vh;
		height: calc(100vh - 42px);
		background: #fff !important;
}

header .responsive dl:last-child {
		padding-bottom: 100px;
}

header #hamburger {
		float: right;
		margin: 3px 12px 0 0;
		font-size: 150%;
}

header dl {
		display: block;
		vertical-align: top;
		padding: 15px 0 15px 0;
		border-top: 1px solid #ccc;
}

header dt, header dd {
		padding: 0 15px;
}

header dl a {
		display: block;
}

}


@media screen and (min-width: 600px) {

header nav {
		border-top: 1px solid #ccc;
}

header .nav {
		padding-left: 5px;
		padding-right: 10px;
}

header .responsive {
		height: 500px;
}

header dl {
		display: inline-block;
		width: 48%;
		margin-right: -4px;
		border-top: none;
		vertical-align: top;
}

header dl:nth-child(even) {
		width: calc(50% + 5px);
}

header dl:nth-child(odd) {
		width: calc(50% - 5px);
}

footer dl {
		display: inline-block;
		width: 48%;
		vertical-align: top;
		margin-right: -4px;
}

footer dl:nth-child(odd) {
		width: calc(50% + 10px);
}

footer dl:nth-child(even) {
		width: calc(50% - 10px);
}

#intro img {
		width: 125px;
		display: inline-block;
}

#intro h2 {
		display: inline-block;
		margin-top: 0;
		margin-left: 20px;
}

#overview .item {
		width: 48%;
		display: inline-block;
		margin-right: 5px;
		vertical-align: top;
}

#overview .item:nth-child(odd) {
		width: calc(50% - 10px);
		margin-right: 16px;
}

#overview .item:nth-child(even) {
		width: calc(50% - 10px);
		margin-right: -4px;
}

.overviewextra .item:nth-child(even) {
		width: calc(50% - 10px);
		margin-right: 16px !important;
}

.overviewextra .item:nth-child(odd) {
		width: calc(50% - 10px);
		margin-right: -4px !important;
}

header h1 {
		margin: 5px 0 5px 20px;
}

footer {
		padding: 35px 20px 15px 20px;
}

#intro {
		margin: 72px 20px 30px 20px;
}

#overview {
		padding: 40px 20px 60px 20px;
}

#list {
		margin: 40px 20px 60px 20px;
}

#full {
		padding: 40px 20px 60px 20px;
}

.extra {
		margin: 0 20px 0 20px;
}

.content {
		margin: 0 20px;
		padding-top: 35px;
}

header #hamburger {
		margin: 3px 16px 0 0;
}

}


@media screen and (min-width: 920px) {

header dl {
		display: inline-block;
		width: 23%;
		margin-right: -4px;
		border-top: none;
		vertical-align: top;
}

header dl:nth-child(even) {
		width: calc(25% + 5px);
}

header dl:nth-child(odd) {
		width: calc(25% - 5px);
}

header .responsive {
		height: 280px;
}

footer dl {
		width: 25% !important;
		width: calc(25% - 15px) !important;
		margin-right: 16px;
}

footer dl:nth-child(4) {
		margin-right: -4px !important;
}

}


@media screen and (min-width: 1000px) {

#hamburger {
		display: none;
}

header h1 {
		display: none;
}

header nav {
		padding: 3px 0 1px 0;
		float: left;
		border-top: none;
}

header dl {
		padding-bottom: 0;
		width: 205px !important;
}

header dt {
		margin-bottom: 0;
}

header dd {
		display: none;
}

header:hover dl {
		padding-bottom: 20px;
}

header:hover dt {
		margin-bottom: 15px;
}

header:hover dd {
		display: block;
}

header dd a {
		display: inline-block;
		padding: 2px 0 3px 0;
}

header dl:last-child dd {
		padding: 2px 0 3px 0;
}

header .nav {
		padding-left: 170px;
}

footer {
		padding-left: 170px;
}

#overview {
		padding-left: 170px;
}

#full {
		padding-left: 170px;
}

.fl {
		padding-top: 20px;
		width: 50%;
		width: calc(50% - 20px);
		margin-right: 26px;
		display: inline-block;
		vertical-align: top;
}

.fr {
		padding-top: 20px;
		width: 45%;
		display: inline-block;
		vertical-align: top;
}

#list {
		padding-left: 150px;
}

.content {
		padding-left: 150px;
}

.extra {
		padding-left: 150px;
}

#list td {
		position: relative;
}

#list .tbri img {
		width: 350px;
		height: auto;
		position: absolute;
		left: 250px;
		top: 0;
}

#list .tl {
		width: 50%;
		float: left;
}

#list .tr {
		width: 50%;
		width: calc(50% - 15px);
		margin-left: 50%;
		margin-left: calc(50% + 20px);
}

}


@media screen and (min-width: 1300px) {

body {
		font-size: 17px;
		line-height: 25px;
		letter-spacing: 0.025em;
}

#overview .item {
		width: 30%;
		width: calc(33.333333333% - 16px) !important;
		margin-right: 19px !important;
}

#overview .item:nth-of-type(3n) {
		margin-right: -6px !important;
}

footer {
		margin: 50px 0 0 0;
		padding: 35px 25px 15px 200px;
}

footer dl {
		margin-bottom: 25px;
		width: 220px !important;	
}

header nav {
		padding: 3px 0 6px 0;
}

header .nav {
		padding-left: 200px;
}

header dl {
		padding-bottom: 0;
		width: 240px !important;
}

header dl:last-child {
		padding-bottom: 0;
		width: 120px !important;
}

header dt {
		padding-top: 1px;
}

#intro {
		margin: 80px 25px 33px 25px;
}

#intro img {
		width: 148px;
}

#overview h2 {
		margin-top: 25px;
		margin-bottom: 25px;
}

#overview {
		padding: 44px 25px 75px 200px;
}

#overview .item {
		margin-bottom: 50px;
}

#list {
		margin: 50px 25px 75px 50px;
}

#list .toggle td {
		padding: 50px 0 75px 0;
		border-top: none;
}

#list .tl {
		margin-bottom: 25px;
}

.rsNav {
		margin-bottom: 25px !important;
}

#full {
		padding: 44px 25px 75px 200px;
}

.fullgallery {
		max-width: 1100px;
		display: block;
}

.text {
		margin-top: 75px;
}

.content {
		margin: 0 25px;
		padding-bottom: 75px;
		padding-top: 35px;
		padding-left: 175px;
		width: 600px;
		float: left;
}

.content p, .content h1 {
		margin-bottom: 25px;
}

.content ul {
		margin-bottom: 25px;
}

.extra {
		width: 425px;
		float: left;
		margin-left: 50px;
		padding-left: 0;
		margin-top: 40px;
}

#info:after {
		content: ".";
		clear: both;
		display: block;
		visibility: hidden;
		height: 0px;
}

#list table {
		width: 60%;
		width: calc(100% - 225px);
		margin-bottom: 200px;
}

#list td {
		position: relative;
}

#list .timg {
		border-top: none !important;
}

#list .timg img {
		width: 200px;
		height: auto;
		display: none;
		position: absolute;
		left: 25px;
		top: 0;
}

#list tr:hover img {
		display: block;
}

}


@media screen and (min-width: 1500px) {

header h1 {
		width: 380px;
		width: calc(33.333333333% - 68px) !important;
		padding-left: 180px;
		display: block;
		float: left;
}

header .nav {
		padding-left: 0;
		float: left;
}

header dt {
		padding-top: 1px;
}

footer dl {
		width: 220px !important;
}

footer dl:first-child {
		width: 380px;
		width: calc(33.333333333% - 15px) !important;
}

}


@media screen and (min-width: 1850px) {

header h1 {
		width: 380px;
		width: calc(25% - 52px) !important;
}

footer dl:first-child {
		width: 380px;
		width: calc(25% - 17px) !important;
}

#overview .item {
		width: 23%;
		width: calc(25% - 19px) !important;
}

#overview .item:nth-of-type(3n) {
		margin-right: 19px !important;
}

#overview .item:nth-of-type(4n) {
		margin-right: -6px !important;
}

.extra iframe {
		width: 180%;
		height: 600px;
}

}