/*
-----------------------------------------------
		www.mathiskamplade.ch
	 by www.kuchenbeiser.de
	and 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%;
		-webkit-font-smoothing: antialiased !important;
		-moz-osx-font-smoothing: grayscale;
}

html {
		height: 100%;
	    overflow: -moz-scrollbars-vertical;
	    overflow-y: scroll;
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
}

body {
	    line-height: 1;
}

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
----------------------------------------------- */

@import url("http://fast.fonts.net/lt/1.css?apiType=css&c=b72b86a8-9daf-4b08-a872-ec5fef02cb00&fontids=777538");

@font-face{
		font-family: "Univers Next W02 Medium";
		src: url("font/4f1b0c34-1c71-42cf-813e-7927e52b538c.eot?#iefix");
		src: url("font/4f1b0c34-1c71-42cf-813e-7927e52b538c.eot?#iefix") format("eot"),
		url("font/777538/eec77ac3-1c4d-42cf-8eb6-aa54b353a00f.woff2") format("woff2"),
		url("font/7a425d6a-3af8-404b-a08e-eaf011616185.woff") format("woff"),
		url("font/777538/e7b4c9b0-9a8b-46ad-a01f-d116e7fb23cd.ttf") format("truetype"),
		url("font/5e5e14de-2505-4fac-bfe5-b066e4a892c9.svg#5e5e14de-2505-4fac-bfe5-b066e4a892c9") format("svg");
		font-weight: normal;
		font-style: normal;
}

@font-face{
		font-family: "MK Plus";
		src: url("font/mkplus.ttf") format("truetype");
		font-weight: normal;
		font-style: normal;
}


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

body {
		color: #1d1d1d;
		background: #fff;
		font-family: "Univers Next W02 Medium", Helvetica, Arial, sans-serif;
		font-size: 20px;
		line-height: 20px;
		word-spacing: -1px;
		text-align: left;
}

h1, h2, h3 {
		font-weight: normal;
}

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

a:hover, a:active {
		color: #1d1d1d;
}

h1 a:link, h1 a:visited {
		color: #1d1d1d;
}

h1 a:hover, h1 a:active {
		color: #afb0ab;
}

*::-moz-selection {
		background-color: #e2e3df;
}

*::selection {
		background-color: #e2e3df;
}

.lazy {
		display: none;
}


/*		H E A D E R
----------------------------------------------- */

#wrapper {
		width: 1320px;
		margin: auto;
		padding-top: 40px;
}

#shift {
		position: relative;
		right: -20px;
}

#indexmain {
		width: 1280px;
		float: left;
		font-size: 30px;
		line-height: 30px;
}

#indexmain header {
		height: 120px;
}

#detail {
		width: 1400px;
}

#detail header {
		height: 120px;
		font-size: 30px;
		line-height: 30px;
}

#indexmain header h1, #detail header h1 {
		width: 445px;
		float: left;
}

#indexmain header nav, #detail header nav {
		width: 445px;
		margin-left: 525px;
}



/*		O V E R V I E W
----------------------------------------------- */

.minis {
		position: relative;
}

#indexmain .minis div {
		width: 373px;
		height: 368px;
		margin: 0 80px 40px 0;
		float: left;
		position: relative;
		text-align: center;
}

#indexmain .minis div:nth-child(3n) {
		margin-right: 0;
}

.minis a {
		width: 373px;
		height: 368px;
		text-align: center;
}

#indexmain .minis em {
	    display: inline-block;
		height: 368px;
		width: 0;
		vertical-align: middle;
}

#indexmain .minis img {
		width: auto;
		height: auto;
		max-width: 373px;
		max-height: 368px;
		vertical-align: middle;
}

.minis span {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 353px;
		height: 348px;
		padding: 20px 0 0 20px;
		z-index: 10;
		text-align: left;
		opacity: 0;
}

.minis a:hover span, .minis a:active span {
		color: #fff;
		opacity: 1;
		background: #555;
		background: rgba(0,0,0,0.8);
}


/*		D E T A I L
----------------------------------------------- */

#detailinfo {
		font-size: 30px;
		line-height: 30px;
}

#detailinfo div {
		width: 620px;
		float: left;
		padding-bottom: 130px;
}

#detailinfo nav {
		width: 270px;
		margin-left: 1050px;
}

#detail .minis {
		clear: both;
		padding-bottom: 40px;
}

#detail .minis div {
		width: 230px;
		height: 200px;
		margin: 0 120px 40px 0;
		float: left;
		position: relative;
		text-align: center;
}

#detail .minis a {
		width: 230px;
		height: 200px;
		text-align: center;
}

#detail .minis em {
	    display: inline-block;
		height: 200px;
		width: 0;
		vertical-align: middle;
}

#detail .minis img {
		width: auto;
		height: auto;
		max-width: 230px;
		max-height: 200px;
		vertical-align: middle;
}

#detail .minis span {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 230px;
		height: 110px;
		padding: 90px 0 0 0;
		z-index: 10;
		text-align: center;
		opacity: 0;
		font-size: 100px;
		font-family: "MK Plus", "Univers Next W02 Medium", Helvetica, Arial, sans-serif;
}

#detail .minis a:hover span, #detail .minis a:active span {
		color: #fff;
		opacity: 1;
		background: #555;
		background: rgba(0,0,0,0.8);
}

.view-as span {
		color: #afb0ab;
}

.view-as span:hover {
		color: #1d1d1d;
		cursor: pointer;
}

.selected {
		color: #1d1d1d !important;
		cursor: default;
}

#text {
		display: none;
}

.text {
		clear: both;
		font-size: 30px;
		line-height: 30px;
}

.textleft {
		width: 620px;
		float: left;
}

.textright {
		width: 620px;
		margin-left: 700px;
}


/*		R E S P O N S I V E   S M A L L
----------------------------------------------- */

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

body {
		font-size: 18px;
		line-height: 18px;
}

#wrapper {
		width: 1184px;
		padding-top: 36px;
}

#shift {
		position: relative;
		right: -18px;
}

#indexmain {
		width: 1148px;
		font-size: 27px;
		line-height: 27px;
}

#indexmain header {
		height: 108px;
}

#detail {
		width: 1256px;
}

#detail header {
		height: 108px;
		font-size: 27px;
		line-height: 27px;
}

#indexmain header h1, #detail header h1 {
		width: 399px;
}

#indexmain header nav, #detail header nav {
		width: 399px;
		margin-left: 471px;
}

#indexmain .minis div {
		width: 334px;
		height: 330px;
		margin: 0 72px 36px 0;
}

.minis a {
		width: 334px;
		height: 330px;
}

#indexmain .minis em {
		height: 330px;
}

#indexmain .minis img {
		max-width: 334px;
		max-height: 330px;
}

.minis span {
		width: 316px;
		height: 312px;
		padding: 18px 0 0 18px;
}

#detailinfo {
		font-size: 27px;
		line-height: 27px;
}

#detailinfo div {
		width: 556px;
		padding-bottom: 110px;
}

#detailinfo nav {
		width: 240px;
		margin-left: 942px;
}

#detail .minis {
		padding-bottom: 37px;
}

#detail .minis div {
		width: 205px;
		height: 180px;
		margin: 0 109px 37px 0;
}

#detail .minis a {
		width: 205px;
		height: 180px;
}

#detail .minis em {
		height: 180px;
}

#detail .minis img {
		max-width: 205px;
		max-height: 180px;
}

#detail .minis span {
		width: 205px;
		height: 100px;
		padding: 80px 0 0 0;
		font-size: 100px;
}

.text {
		font-size: 27px;
		line-height: 27px;
}

.textleft {
		width: 556px;
}

.textright {
		width: 556px;
		margin-left: 628px;
}

}


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

body {
		font-size: 16px;
		line-height: 16px;
}

#wrapper {
		width: 1056px;
		padding-top: 32px;
}

#shift {
		position: relative;
		right: -16px;
}

#indexmain {
		width: 1024px;
		font-size: 24px;
		line-height: 24px;
}

#indexmain header {
		height: 96px;
}

#detail {
		width: 1120px;
}

#detail header {
		height: 96px;
		font-size: 24px;
		line-height: 24px;
}

#indexmain header h1, #detail header h1 {
		width: 356px;
}

#indexmain header nav, #detail header nav {
		width: 356px;
		margin-left: 420px;
}

#indexmain .minis div {
		width: 298px;
		height: 294px;
		margin: 0 64px 32px 0;
}

.minis a {
		width: 298px;
		height: 294px;
}

#indexmain .minis em {
		height: 294px;
}

#indexmain .minis img {
		max-width: 298px;
		max-height: 294px;
}

.minis span {
		width: 282px;
		height: 278px;
		padding: 16px 0 0 16px;
}

#detailinfo {
		font-size: 24px;
		line-height: 24px;
}

#detailinfo div {
		width: 496px;
		padding-bottom: 100px;
}

#detailinfo nav {
		width: 216px;
		margin-left: 840px;
}

#detail .minis {
		padding-bottom: 32px;
}

#detail .minis div {
		width: 184px;
		height: 160px;
		margin: 0 96px 32px 0;
}

#detail .minis a {
		width: 184px;
		height: 160px;
}

#detail .minis em {
		height: 160px;
}

#detail .minis img {
		max-width: 184px;
		max-height: 160px;
}

#detail .minis span {
		width: 184px;
		height: 88px;
		padding: 72px 0 0 0;
		font-size: 100px;
}

.text {
		font-size: 24px;
		line-height: 24px;
}

.textleft {
		width: 496px;
}

.textright {
		width: 496px;
		margin-left: 560px;
}

}


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

body {
		font-size: 14px;
		line-height: 14px;
}

#wrapper {
		width: 928px;
		padding-top: 28px;
}

#shift {
		position: relative;
		right: -24px;
}

#indexmain {
		width: 880px;
		font-size: 21px;
		line-height: 21px;
}

#indexmain header {
		height: 84px;
}

#detail {
		width: 984px;
}

#detail header {
		height: 84px;
		font-size: 21px;
		line-height: 21px;
}

#indexmain header h1, #detail header h1 {
		width: 313px;
}

#indexmain header nav, #detail header nav {
		width: 313px;
		margin-left: 369px;
}

#indexmain .minis div {
		width: 256px;
		height: 251px;
		margin: 0 56px 28px 0;
}

.minis a {
		width: 256px;
		height: 251px;
}

#indexmain .minis em {
		height: 251px;
}

#indexmain .minis img {
		max-width: 256px;
		max-height: 251px;
}

.minis span {
		width: 242px;
		height: 237px;
		padding: 14px 0 0 14px;
}

#detailinfo {
		font-size: 21px;
		line-height: 21px;
}

#detailinfo div {
		width: 436px;
		padding-bottom: 90px;
}

#detailinfo nav {
		width: 190px;
		margin-left: 738px;
}

#detail .minis {
		padding-bottom: 28px;
}

#detail .minis div {
		width: 142px;
		height: 140px;
		margin: 0 104px 28px 0;
}

#detail .minis a {
		width: 142px;
		height: 140px;
}

#detail .minis em {
		height: 140px;
}

#detail .minis img {
		max-width: 142px;
		max-height: 140px;
}

#detail .minis span {
		width: 142px;
		height: 75px;
		padding: 65px 0 0 0;
		font-size: 100px;
}

.text {
		font-size: 21px;
		line-height: 21px;
}

.textleft {
		width: 436px;
}

.textright {
		width: 436px;
		margin-left: 492px;
}

}


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

body {
		font-size: 12px;
		line-height: 12px;
}

#wrapper {
		width: 792px;
		padding-top: 24px;
}

#shift {
		position: relative;
		right: -20px;
}

#indexmain {
		width: 752px;
		font-size: 18px;
		line-height: 18px;
}

#indexmain header {
		height: 72px;
}

#detail {
		width: 840px;
}

#detail header {
		height: 72px;
		font-size: 18px;
		line-height: 18px;
}

#indexmain header h1, #detail header h1 {
		width: 267px;
}

#indexmain header nav, #detail header nav {
		width: 267px;
		margin-left: 315px;
}

#indexmain .minis div {
		width: 218px;
		height: 215px;
		margin: 0 48px 24px 0;
}

.minis a {
		width: 218px;
		height: 215px;
}

#indexmain .minis em {
		height: 215px;
}

#indexmain .minis img {
		max-width: 218px;
		max-height: 215px;
}

.minis span {
		width: 206px;
		height: 203px;
		padding: 12px 0 0 12px;
}

#detailinfo {
		font-size: 18px;
		line-height: 18px;
}

#detailinfo div {
		width: 255px;
		padding-bottom: 80px;
}

#detailinfo nav {
		width: 162px;
		margin-left: 630px;
}

#detail .minis {
		padding-bottom: 24px;
}

#detail .minis div {
		width: 121px;
		height: 120px;
		margin: 0 89px 24px 0;
}

#detail .minis a {
		width: 121px;
		height: 120px;
}

#detail .minis em {
		height: 120px;
}

#detail .minis img {
		max-width: 121px;
		max-height: 120px;
}

#detail .minis span {
		width: 121px;
		height: 64px;
		padding: 56px 0 0 0;
		font-size: 100px;
}

.text {
		font-size: 18px;
		line-height: 18px;
}

.textleft {
		width: 372px;
}

.textright {
		width: 372px;
		margin-left: 420px;
}

}


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

body {
		font-size: 12px;
		line-height: 12px;
}

#wrapper {
		width: 632px;
		padding-top: 24px;
}

#shift {
		position: relative;
		right: -45px;
}

#indexmain {
		width: 542px;
		font-size: 18px;
		line-height: 18px;
}

#indexmain header {
		height: 126px;
}

#detail {
		width: 632px;
}

#detail header {
		height: 108px;
		font-size: 18px;
		line-height: 18px;
}

#indexmain header h1, #detail header h1 {
		width: 267px;
		margin-bottom: 18px;
}

#indexmain header nav, #detail header nav {
		width: 267px;
		margin-left: 0;
}

#indexmain .minis div {
		width: 247px;
		height: 244px;
		margin: 0 48px 24px 0;
}

#indexmain .minis div:nth-child(3n) {
		margin-right: 48px;
}

#indexmain .minis div:nth-child(2n) {
		margin-right: 0;
}

.minis a {
		width: 247px;
		height: 244px;
}

#indexmain .minis em {
		height: 244px;
}

#indexmain .minis img {
		max-width: 247px;
		max-height: 244px;
}

.minis span {
		width: 235px;
		height: 232px;
		padding: 12px 0 0 12px;
}

#detailinfo {
		font-size: 18px;
		line-height: 18px;
}

#detailinfo div {
		width: 255px;
		padding-bottom: 18px;
}

#detailinfo nav {
		width: 162px;
		margin-left: 0;
}

.view-as li {
		display: inline-block;
		margin-right: 7px;
}

#detail .minis {
		margin-top: 54px;
		padding-bottom: 24px;
}

#detail .minis div {
		width: 121px;
		height: 120px;
		margin: 0 89px 24px 0;
}

#detail .minis a {
		width: 121px;
		height: 120px;
}

#detail .minis em {
		height: 120px;
}

#detail .minis img {
		max-width: 121px;
		max-height: 120px;
}

#detail .minis span {
		width: 121px;
		height: 64px;
		padding: 56px 0 0 0;
		font-size: 100px;
}

.text {
		margin-top: 36px;
		font-size: 18px;
		line-height: 18px;
}

.textleft {
		width: 477px;
		float: none;
}

.textright {
		width: 477px;
		margin-left: 0;
		float: none;
}


}


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

body {
		font-size: 12px;
		line-height: 12px;
}

#wrapper {
		width: 477px;
		padding-top: 24px;
}

#shift {
		position: relative;
		right: -21px;
}

#indexmain {
		width: 435px;
		font-size: 18px;
		line-height: 18px;
}

#indexmain header {
		height: 126px;
}

#detail {
		width: 477px;
}

#detail header {
		width: 477px;
		height: 108px;
		font-size: 18px;
		line-height: 18px;
}

#indexmain header h1, #detail header h1 {
		width: 267px;
		margin-bottom: 18px;
}

#indexmain header nav, #detail header nav {
		width: 120px;
		margin-left: 0;
}

#indexmain .minis div {
		width: 193px;
		height: 190px;
		margin: 0 48px 24px 0;
}

.minis a {
		width: 193px;
		height: 190px;
}

#indexmain .minis em {
		height: 190px;
}

#indexmain .minis img {
		max-width: 193px;
		max-height: 190px;
}

.minis span {
		width: 181px;
		height: 178px;
		padding: 12px 0 0 12px;
}

#detailinfo {
		width: 255px;
		font-size: 18px;
		line-height: 18px;
}

#detailinfo div {
		width: 255px;
		padding-bottom: 18px;
}

#detailinfo nav {
		width: 200px;
		margin-left: 0;
}

#detail .minis {
		padding-bottom: 24px;
}

#detail .minis div {
		width: 121px;
		height: 120px;
		margin: 0 36px 24px 0;
}

#detail .minis a {
		width: 121px;
		height: 120px;
}

#detail .minis em {
		height: 120px;
}

#detail .minis img {
		max-width: 121px;
		max-height: 120px;
}

#detail .minis span {
		width: 121px;
		height: 64px;
		padding: 56px 0 0 0;
		font-size: 100px;
}

.text {
		font-size: 18px;
		line-height: 18px;
}

.textleft {
		width: 440px;
		float: none;
}

.textright {
		width: 440px;
		margin-left: 0;
		float: none;
}

}


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

body {
		font-size: 7px;
		line-height: 7px;
}

#wrapper {
		width: 280px;
		padding-top: 14px;
}

#shift {
		position: relative;
		right: -12px;
}

#indexmain {
		width: 256px;
		font-size: 14px;
		line-height: 14px;
}

#indexmain header {
		height: 98px;
}

#detail {
		width: 280px;
}

#detail header {
		width: 280px;
		height: 84px;
		font-size: 14px;
		line-height: 14px;
}

#indexmain header h1, #detail header h1 {
		width: 156px;
		margin-bottom: 14px;
}

#indexmain header nav, #detail header nav {
		width: 100px;
		margin-left: 0;
}

#indexmain .minis div {
		width: 114px;
		height: 112px;
		margin: 0 28px 14px 0;
}

#indexmain .minis div:nth-child(3n) {
		margin-right: 28px;
}

#indexmain .minis div:nth-child(2n) {
		margin-right: 0;
}

.minis a {
		width: 114px;
		height: 112px;
		font-size: 7px;
		line-height: 7px;
}

#indexmain .minis em {
		height: 112px;
}

#indexmain .minis img {
		max-width: 114px;
		max-height: 112px;
}

.minis span {
		width: 107px;
		height: 105px;
		padding: 7px 0 0 7px;
}

#detailinfo {
		width: 156px;
		font-size: 14px;
		line-height: 14px;
}

#detailinfo div {
		width: 156px;
		padding-bottom: 14px;
}

#detailinfo nav {
		width: 200px;
		margin-left: 0;
}

#detail .minis {
		padding-bottom: 14px;
}

#detail .minis div {
		width: 71px;
		height: 70px;
		margin: 0 22px 14px 0;
}

#detail .minis a {
		width: 71px;
		height: 70px;
}

#detail .minis em {
		height: 70px;
}

#detail .minis img {
		max-width: 71px;
		max-height: 70px;
}

#detail .minis span {
		width: 71px;
		height: 34px;
		padding: 36px 0 0 0;
		font-size: 100px;
}

.text {
		font-size: 14px;
		line-height: 14px;
}

.textleft {
		width: 95%;
		float: none;
}

.textright {
		width: 95%;
		margin-left: 0;
		float: none;
}

}