@media screen {

	/* ----------------------- Allgemein ----------------------- */

	* {
		margin: 0;
		padding: 0;
	}

	@font-face {
		font-family: "UtopiaStdItalic";
		src: url('../fonts/UtopiaStdItalic/font.woff2') format('woff2'), url('../fonts/UtopiaStdItalic/font.woff') format('woff');
	}

	@font-face {
		font-family: "UtopiaStdRegular";
		src: url('../fonts/UtopiaStdRegular/font.woff2') format('woff2'), url('../fonts/UtopiaStdRegular/font.woff') format('woff');
	}

	@font-face {
		font-family: "UtopiaStdBold";
		src: url('../fonts/UtopiaStdBold/font.woff2') format('woff2'), url('../fonts/UtopiaStdBold/font.woff') format('woff');
	}


	html,
	body {
		font-family: 'UtopiaStdRegular';
		color: #1a171b;
		font-size: 18px;
		line-height: 24px;
	}


	h1 {
		font-size: 13px;
		line-height: 20px;
		font-family: 'UtopiaStdRegular';
		font-weight: normal;
	}

	h2 {
		font-size: 60px;
		line-height: 70px;
		color: #fff;
		font-family: 'UtopiaStdRegular';
		font-weight: normal;
	}

	h3 {
		font-size: 28px;
		line-height: 36px;
		color: #626160;
		font-family: 'UtopiaStdItalic';
		font-weight: normal;
	}


	strong {
		font-family: 'UtopiaStdRegular';
		color: #000;
	}



	/* ----------------------- Startseite ----------------------- */

	#start {
		z-index: 300;
		min-width: 100%;
		height: 95px;
		top: 0;
		background-color: black;
	}

	#text2 {
		display: none;
	}

	.start-logo {
		float: left;
		width: 280px;
		margin-top: 35px;
		margin-left: 38px;
	}


	#start:after {
		content: '';
		display: block;
		clear: both;
	}

	.fixWrapper {
		width: 100%;
		top: 0;
	}

	.wrapper {
		max-width: 960px;
		width: 100%;
		margin: 0 auto 0 auto;

	}


	.start-text {
		margin-top: 40px;
		position: relative;
		float: right;
		width: 280px;
		text-align: right;
	}

	.start-text p {
		position: absolute;
		color: white;
		text-align: right;
		right: 45px;
		top: 0;
	}

	/* ----------------------- Elemente ----------------------- */

	.overlay {
		box-sizing: border-box;
		background-image: url(/img/bg-transparent.png);
		position: absolute;
		z-index: 420;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		padding-left: 30px;

		-webkit-transition: opacity 0.25s;
		-moz-transition: opacity 0.25s;
		-ms-transition: opacity 0.25s;
		-o-transition: opacity 0.25s;
		transition: opacity 0.25s;

	}

	.overlay h3 {
		padding-top: 30px;
	}

	.item:hover .overlay,
	.item.hover_effect {
		opacity: 1;
	}


	.kleinweiss-hover {
		position: absolute;
		bottom: 25px;
		font-size: 13px;
		line-height: 16px;
		color: #fff;
	}



	#container {

		background-color: #e8e8e8;
		padding: 35px;
	}

	#container:after {
		content: '';
		display: block;
		clear: both;
	}

	.item {
		float: left;
		width: 220px;
		padding: 30px;
		height: 220px;
		margin-bottom: 20px;
	}

	.item.next {
		background-color: #696260;
	}

	.item.w2 {
		width: 530px;
		background-color: #fff;
		padding: 35px 25px 35px 25px;
		height: 210px;
	}

	.item.pic {
		width: 280px;
		padding: 0px;
		height: 280px;
	}




	.item.pic2 {
		width: 280px;
		padding: 0px;
		height: 408px;
	}

	.liste {
		line-height: 29px;
		color: #626160;
	}

	.liste2 {
		line-height: 24px;
		color: #626160;
	}

	.klein {
		font-size: 13px;
		line-height: 16px;
		margin: 53px 0 0 0;
	}

	.item.fishes {
		width: 220px;
		padding: 30px;
		height: 219px;
		background-color: #2d2c2c;
	}

	.kleinweiss {
		font-size: 13px;
		line-height: 16px;
		margin: 101px 0 0 0;
		color: #fff;
	}

	.item.firm {
		width: 230px;
		background-color: #fff;
		padding: 35px 25px 35px 25px;
		height: 635px;
	}

	.kleingrau {
		font-size: 13px;
		line-height: 16px;
		margin: 122px 0 0 0;
		color: #626160;
	}


	.tab1 {
		display: inline-block;
		width: 100px;
	}



	/* ----------------------- Contact ----------------------- */

	#start-contact {
		bottom: 0;
		z-index: 300;
		width: 100%;
		height: 200px;
		background-color: #000;
		color: #fff;
	}

	.contact {
		width: auto;
		padding: 25px 0 0 40px;
	}

	.kleinschwarz {
		font-size: 16px;
		line-height: 23px;
		font-weight: 300;
		margin: 20px 0 0 0;
		color: #fff;
	}

	.kleinschwarz a {
		color: #fff;
		font-size: 16px;
		line-height: 19px;
		text-decoration: none;
	}


	a {
		cursor: hand;
		cursor: pointer;
	}

	/* ----------------------- Responsive ----------------------- */


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

		.item.w2 {
			width: 230px;
			background-color: #fff;
			padding: 35px 25px 35px 25px;
			height: 510px;
		}

	}


	/* ----------------------- Generisch ----------------------- */

	.color--white {
		color: #ffffff;
	}

	.background-color--696260 {
		background-color: #696260;
	}

	.background-color--ffffff {
		background-color: #ffffff;
	}



	.font-size--38px {
		font-size: 38px;
		line-height: 50px;
	}

	.font-size--28px {
		font-size: 28px;
		line-height: 36px;
	}

	.font-size--18px {
		font-size: 18px;
	}

	.font-size--13px {
		font-size: 13px;
	}



	.font-style--normal {
		font-style: normal;
		font-family: 'Utopia W01';
	}

	.font-style--italic {
		font-style: normal;
		font-family: 'UtopiaStdItalic';
	}

	.item.height--auto {
		height: auto;
	}

	.item.height--400px {
		height: 400px;
	}

	.item.height--378px {
		height: 378px;
	}

	.item.height--280px {
		height: 280px;
	}

	.item.width--280px {
		width: 280px;
	}

	.box-sizing--border-box {
		box-sizing: border-box;
	}

	.img-responsive {
		max-width: 100%;
		line-height: 0;
	}

	.position-relative {
		position: relative;
	}

	.position-absolute {
		position: absolute;
	}

	.bottom {
		bottom: 0;
	}

	.small-padding-bottom {
		margin-bottom: 27px;
	}

}