@charset "utf-8";

@font-face {
    font-family: "Lato Black";
	src: url("../font/Lato-Black.woff2");
	font-weight: 900;
}

@font-face {
    font-family: "Lato Regular";
    src: url(../font/Lato-Regular.woff2);
	font-weight: 400;
}

@font-face {
    font-family: "Lato Light";
    src: url(../font/Lato-Light.woff2);
	font-weight: 300;
}

/*---------------------------------------------General*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

* {margin:0;padding:0;}

body {
	font-family: 'Lato Light', sans-serif;
	font-weight: 300;
	line-height:1.4;
}

.scrollblock {
	width: 100%;
	height: auto;
	overflow:hidden;
}

.bg_top {
	background-size: cover;
	background-repeat: no-repeat;
	height: 900px;
	width: 100%;
}

.bg_bottom {
	background-size: cover;
	background-repeat: no-repeat;
}

.content {
	margin: 200px auto;
	display:block;
	max-width: 700px;
	width: 90%;
}

.content_web {
	margin: 0 auto -300px;
	display:block;
	width: 100%;
	max-width: 1000px;
}

.content_details {
	width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	padding: 300px 0 200px;
}

.font_details {
	position: relative;
	left: 50%;
	width: 800px;
	margin-left: -400px;
	padding: 200px 0 300px;
	
}

.details_smart {
	width: 700px;
	margin-right: -150px;
}

.details_color {
	width: 400px;
}

.more_left {
	margin-left: -100px;
}

.details_web {
	margin: -100px auto 200px;
	display:block;
	width: 100%;
	max-width: 800px;
}

.cards {
	width: 600px;
}

.roll_up {
	margin: -150px auto 200px;
	display:block;
	width: 100%;
	max-width: 1200px;
}

.content_logo {
	width: 100%;
	padding: 70px 0;
	text-align: center;
}

.content_logo img {
	width: 70%;
	max-width: 500px;
}

.rose {
	background-color:#FFE9DC;
}

.beige {
	background-color: #fff7e2;
}

.grey {
	background-color:#EEEFEF;
}

.black {
	background-color:#1A1A1A;
}

.darkblue {
	background-color: #002337;
}

.white {
	background-color:#FFF;
}

.darkgreen {
	background-color:#003136;
}

.darkgray {
	background-color:#2E353E;
}

.lightgray {
	background-color:#E9E7E3;
}

.top {
	margin-top: 500px;
}

.bottom {
	margin-bottom: 300px;
}

.example1 {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 40%;
	height: 800px;
	float: left;
	margin-top: 200px;
}

.example2 {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 60%;
	display: inline-block;
	height: 800px;
	margin-top: 200px;
}

#web_detail1 img, #web_detail2 img, #headline_hoch img, #headline_quer img {
	width: 100%;
}

.laptop {
	position: relative;
	z-index: 2;
	margin:-400px 0 0 -700px;
	width: 1400px;
	display: block;
	left: 50%;
}

.poster {
	position: relative;
	z-index: 2;
	margin:-300px 0 0 -500px;
	width: 1000px;
	display: block;
	left: 50%;
}

.flyer {
	position: relative;
	z-index: 2;
	margin:-400px 0 0 -700px;
	width: 1400px;
	display: block;
	left: 50%;
}


/*---------------------------------------------Navi*/

.close_1, .close_2, .next_1, .next_2, .prev_1, .prev_2 {
	width: 2px;
	background-color: #fff;
}

.close_1 {
	height: 40px;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
	margin-left: 15px;
	float: left;
}

.close_2 {
	height: 40px;
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  	transform: rotate(-45deg);
	margin-left: 15px;
}

.close {
	width: inherit;
	height: 50px;
	padding: 10px 10px 0;
	display:block;
}

.close:hover .close_1, .close:hover .close_2, .close:hover .prev_1, .close:hover .prev_2, .close:hover .next_1, .close:hover .next_2{
	background-color: #555;
}

.close_holder {
	width:50px;
	height:180px;
	position:fixed;
	top:50%;
	margin-top:-90px;
	padding: 5px 0;
	background-color: #000;
	right: 0;
	z-index: 9999;
}

.prev_1 {
	height: 25px;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
	margin: 0 0 0 13px;
	float: left;
}

.prev_2 {
	height: 25px;
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  	transform: rotate(-45deg);
	margin: 16px 0 0 13px;
}

.next_1 {
	height: 25px;
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  	transform: rotate(-45deg);
	margin: 0 0 0 15px;
	float: left;
}

.next_2 {
	height: 25px;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
	margin: 16px 0 0 15px;
}



/*---------------------------------------------Footer*/

.footer {
	background-color: #000;
	height: 200px;
	width: 100%;
	text-align: center;
	float:left;
}

.footer span {
	color: #fff;
	letter-spacing: 10px;
	font-size: 13px;
	padding: 0 20px;
}

.footer span > a {
	color: #fff;
	text-decoration:none;	
}

.footer img {
	width: 100px;
	margin: 50px auto 25px;
	display: block;
}

#topper {
	margin: 200px auto 150px;
	width: 100px;
	height: 100px;
	background: url(../bilder/top.png) center center no-repeat;
	background-size: contain;
	transition: transform ease-out 0.2s, background 0.4s;
	display: block;
}

#topper:hover {
	transform: translate(0px, -20px);
}




/*-------------------------------------------------------space*/

.bg_space1 {
	background-image: url("../bilder/gallery_space_background1.jpg");
}

.bg_space2 {
	background-image: url("../bilder/gallery_space_background2.jpg");
}

#logo_space {
	position: relative;
	width: 700px;
	margin: 0 auto;
}

#logo_space img {
	width: 100%;
}


/*-------------------------------------------------------MK PMU*/

.bg_mk1 {
	background-image: url("../bilder/gallery_mk_background1.jpg");
}

.bg_mk2 {
	background-image: url("../bilder/gallery_mk_background2.jpg");
}

#logo_mk {
	position: relative;
	width: 500px;
	margin: 0 auto;
}

#logo_mk img {
	width: 100%;
}

/*---------------------------------------------Emelys Jewelry*/

.bg_emelys1 {
	background-image: url("../bilder/gallery_emelys_background1.jpg");
}

.bg_emelys2 {
	background-image: url("../bilder/gallery_emelys_background2.jpg");
}

#logo_emelys {
	position: relative;
	width: 600px;
	margin: 0 auto;
}

#logo_emelys img {
	width: 100%;
}


/*---------------------------------------------Remida*/

.bg_remida1 {
	background-image: url("../bilder/gallery_remida_background1.jpg");
}

.bg_remida2 {
	background-image: url("../bilder/gallery_remida_background2.jpg");
}

#logo_lebioda {
	position: relative;
	width: 600px;
	margin: 0 auto;
}

#logo_lebioda img {
	width: 100%;
}

/*---------------------------------------------Arkaden*/

.bg_arkaden1 {
	background-image: url("../bilder/gallery_arkaden_background1.jpg");
}

.bg_arkaden2 {
	background-image: url("../bilder/gallery_arkaden_background2.jpg");
}

#logo_arkaden {
	position: relative;
	width: 400px;
	margin: 0 auto;
}

#logo_arkaden img {
	width: 100%;
}

/*-------------------------------------------------------logo*/

.bg_logo {
	background-image: url("../bilder/gallery_logo_background.jpg");
}

#logo_logo {
	position: relative;
	width: 400px;
	margin: 0 auto;
}

#logo_logo img {
	width: 100%;
}

/*---------------------------------------------VinzenzGemeinschaft*/

.bg_vinzenz1 {
	background-image: url("../bilder/gallery_vinzenz_background1.jpg");
}

.bg_vinzenz2 {
	background-image: url("../bilder/gallery_vinzenz_background2.jpg");
}

#logo_vinzenz {
	position: relative;
	width: 500px;
	margin: 0 auto;
}

#logo_vinzenz img {
	width: 100%;
}

/*---------------------------------------------Bianca Kost*/

.bg_kost1 {
	background-image: url("../bilder/gallery_kost_background1.jpg");
}

.bg_kost2 {
	background-image: url("../bilder/gallery_kost_background2.jpg");
}

#logo_kost {
	position: relative;
	width: 600px;
	margin: 0 auto;
}

#logo_kost img {
	width: 100%;
}



/*---------------------------------------------Hövel Ecu*/

.bg_hovel1 {
	background-image: url("../bilder/gallery_hovel_background1.jpg");
}

.bg_hovel2 {
	background-image: url("../bilder/gallery_hovel_background2.jpg");
}

#logo_hovel {
	position: relative;
	width: 600px;
	margin: 0 auto;
}

#logo_hovel img {
	width: 100%;
}


/*---------------------------------------------MK Scalp Design*/

.bg_scalp1 {
	background-image: url("../bilder/gallery_scalp_background1.jpg");
}

.bg_scalp2 {
	background-image: url("../bilder/gallery_scalp_background2.jpg");
}

#logo_scalp {
	position: relative;
	width: 600px;
	margin: 0 auto;
}

#logo_scalp img {
	width: 100%;
}

/*-------------------------------------------------------1100px*/

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

.laptop {
	margin:-400px 0 0 -500px;
	width: 1000px;
}
	
#logo_lebioda, #logo_kost, #logo_emelys, #logo_musix, #logo_kingdom, #logo_space, #logo_font, #logo_hovel {
	width: 500px;
}

#logo_arkaden, #logo_logo {
	width: 300px;
}

#logo_mk, #logo_vinzenz, #logo_scalp {
	width: 350px;
}
	
.bg_top {
	height: 800px;
}
	
.content_details {
	width: 750px;
}

.details_smart {
	width: 500px;
	margin-right: -100px;
}
	
.cards {
	width: 400px;
}

.details_color {
	width: 350px;
}
	
.poster {
	margin:-300px 5% 0;
	width: 90%;
	left: unset;
}
	
.flyer {
	margin:-400px 0 0 -500px;
	width: 1000px;
}
	
.font_details {
	width: 600px;
	margin-left: -300px;
	
}


	
}

	
/*-------------------------------------------------------750px*/

@media screen and (max-width: 750px) {
	
.laptop {
	margin:-200px 0 0 -300px;
	width: 600px;
}
	
#logo_lebioda, #logo_kost, #logo_emelys, #logo_musix, #logo_kingdom, #logo_space, #logo_font, #logo_hovel {
	width: 350px;
}
	
#logo_mk, #logo_arkaden, #logo_logo, #logo_scalp {
	width: 250px;
}
	
.bg_top {
	height: 600px;
}
	
.details_web {
	width: 100%;
	display: block;
}
	
.details_web img {
	width: 600px;
	position: relative;
	margin-left: -300px;
	left: 50%;
}
	
.content_details {
	width: 100%;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.details_smart {
	width: 100%;
	margin-right: 0;
}

.details_color {
	width: 350px;
}
	
.cards {
	width: 90%;
}
	
.roll_up {
	width: 140%;
	left: -20%;
	position: relative;
}

	
.poster {
	margin:-150px 0 0;
	width: 100%;
	left: unset;
}
	
.flyer {
	margin:-150px 0 0;
	width: 140%;
	left: -23%;
}
	
.font_details {
	width: 100%;
	margin-left: unset;
	left: 0;
	
}

	
}