@charset "UTF-8";
/* CSS Document */


/*---BASICS---*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
} 

a img { 
	border:none;
}


a:link, a:visited {
	text-decoration:none;
	padding-bottom:1px;
	font-weight:700;
	letter-spacing:1px;
	color:rgb(255,36,32);
	border-bottom:2px solid rgb(255,36,32);
	transition:0.5s;
}


/*@media only screen and (max-width:600px) {
    a:link, a:visited {
		border-bottom:1.5px solid rgb(255,36,32);
    }
}*/


.row::after {
    content:"";
    clear:both;
    display:table;
}


[class*="col-"] {
    float:left;
    padding:0 15px;
	/*border:1px solid red;*/
}


 /* For mobile phones: */
[class*="col-"] {
    width:100%;
}


@media only screen and (max-width:600px) {
    /* For mobile: */
    .col-m-1 {width:8.33%;}
    .col-m-2 {width:16.66%;}
    .col-m-3 {width:25%;}
    .col-m-4 {width:33.33%;}
    .col-m-5 {width:41.66%;}
    .col-m-6 {width:50%;}
    .col-m-7 {width:58.33%;}
    .col-m-8 {width:66.66%;}
    .col-m-9 {width:75%;}
    .col-m-10 {width:83.33%;}
    .col-m-11 {width:91.66%;}
    .col-m-12 {width:100%;}
}


@media only screen and (min-width:601px) {
    /* For tablets: */
    .col-t-1 {width:8.33%;}
    .col-t-2 {width:16.66%;}
    .col-t-3 {width:25%;}
    .col-t-4 {width:33.33%;}
    .col-t-5 {width:41.66%;}
    .col-t-6 {width:50%;}
    .col-t-7 {width:58.33%;}
    .col-t-8 {width:66.66%;}
    .col-t-9 {width:75%;}
    .col-t-10 {width:83.33%;}
    .col-t-11 {width:91.66%;}
    .col-t-12 {width:100%;}
}


@media only screen and (min-width:1201px) {
    /* For desktop: */
    .col-1 {width:8.33%;}
    .col-2 {width:16.66%;}
    .col-3 {width:25%;}
    .col-4 {width:33.33%;}
    .col-5 {width:41.66%;}
    .col-6 {width:50%;}
    .col-7 {width:58.33%;}
    .col-8 {width:66.66%;}
    .col-9 {width:75%;}
    .col-10 {width:83.33%;}
    .col-11 {width:91.66%;}
    .col-12 {width:100%;}
}


body {
	font-family:'Roboto', sans-serif;
	font-size:17px;
	font-weight:400;
	letter-spacing:0.6px;
	line-height:170%;
	color:rgb(0,0,0);
	padding:0;
	background:rgb(162,226,219);
}


@media only screen and (max-width:600px) {
    body {
		font-size:90%;
		letter-spacing:0.6px;
    }
}


h1 {
	font-size:230%;
	letter-spacing:5px;
	word-spacing:2px;
	line-height:150%;
	text-align:center;
	text-transform:uppercase;
	color:rgb(255,36,32);
	transition:0.5s;
}


@media only screen and (max-width:700px) {
    h1 {
		font-size:170%;
		letter-spacing:3px;
    }
}


h2 {
	line-height:150%;
	letter-spacing:3px;
	text-transform:uppercase;
	color:rgb(255,36,32);
	transition:0.5s;
}


@media only screen and (max-width:700px) {
    h2 {
		font-size:130%;
		letter-spacing:2px;
    }
}


h3 {
	font-size:100%;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:1.5px;
	padding-top:15px;
	transition:0.5s;
}


.mittig {
	text-align:center;
}


b {
	letter-spacing:1.2px;
}


img.scaled {
	width:100%;
	position:relative;
	float:left;
	transition:0.5s;
}


img.scaled_60 {
	width:60%;
	margin:0 20%;
	position:relative;
	float:left;
	transition:0.5s;
}


@media only screen and (max-width:900px) {
    img.scaled_60 {
		width:100%;
		margin:0;
    }
}


img.scaled_50 {
	width:50%;
	position:relative;
	float:left;
	transition:0.5s;
}


@media only screen and (max-width:600px) {
    img.scaled_50 {
		width:100%;
    }
}


img.image {
	display:block;
	width:auto;
	height:auto;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	transition:0.5s;
}


.abstand {
	height:6vh;
}


@media only screen and (max-width:1200px) {
    .abstand {
		height:4vh;
    }
}


@media only screen and (max-width:600px) {
    .abstand {
		height:3vh;
    }
}


ul {
	padding-left:20px;
}


/*---BASICS ENDE---*/


/*---NAVI---*/


#navigation {
	height:180px;
	padding:0;
	position:fixed;
	top:0;
	float:left;
	background:rgb(162,226,219);
	transition:0.5s;
	z-index:999;
}


@media only screen and (max-width:1200px) {
    #navigation {
		height:150px;
    }
}


@media only screen and (max-width:600px) {
    #navigation {
		height:120px;
    }
}


#logo_mitte {
	width:165px;
	min-height:10px;
	padding:0;
	float:none;
	position:absolute;
	top:50%;
 	left:50%;
 	transform:translate(-50%, -50%);
	transition:0.5s;
	z-index:5;
}


#logo_mitte a {
	border:0;
}


@media only screen and (max-width:1200px) {
    #logo_mitte {
		top:-100%;
    }
}


#logo_rechts {
	width:100px;
	min-height:10px;
	padding:0;
	float:none;
	position:absolute;
	top:50%;
 	right:-500px;
 	transform:translate(-50%, -50%);
	transition:0.5s;
}


#logo_rechts a {
	border:0;
}


@media only screen and (max-width:1200px) {
    #logo_rechts {
		width:100px;
		right:-30px;
    }
}


#logo_hamburger {
	width:100px;
	min-height:10px;
	padding:0;
	float:none;
	position:absolute;
	top:34px;
 	right:20px;
	transition:0.5s;
}


@media only screen and (max-width:600px) {
    #logo_hamburger {
		top:19px;
    }
}


/*---NAVI Ende---*/


/*---MENUE---*/


#topnavigation {
	padding:0 6%;
	overflow:hidden;
	color:#f2f2f2;
	text-decoration:none;
	float:left;
	position:relative;
	top:50%;
	transform:translate(0%, -50%);
	transition:0.5s;
}


@media only screen and (max-width:1200px) {
    #topnavigation {
		top:-100px;
    }
}


#navi_links a {
	margin-right:3%;
	padding:0;
	font-size:15px;
	line-height:150%;
	letter-spacing:0.7px;
	color:rgb(255,36,32);
	border-bottom:2px solid rgb(255,36,32);
	float:left;
}


#navi_rechts a {
	margin-left:3%;
	padding:0;
	font-size:15px;
	line-height:150%;
	letter-spacing:0.7px;
	color:rgb(255,36,32);
	border-bottom:2px solid rgb(255,36,32);
	float:right;
}


#hamburger {
	min-width:50px;
	min-height:10px;
	float:none;
	position:absolute;
	top:50%;
	left:-100px;
 	transform:translate(-50%, -50%);
	transition:0.5s;
}


@media only screen and (max-width:1200px) {
    #hamburger {
		left:45px;
    }
}


span {
	cursor:pointer;
}


#menu_ausgeklappt {
	padding:0;
	z-index:1;
}


#menu_ausgeklappt a:link, a:visited {
	border-bottom:0px;
}


.overlay_menue {
	height:0%;
	padding:0;
	position:fixed;
	top:0;
	left:-100%;
	background:rgba(250,51,31,1);
	overflow-y:hidden;
	transition:0.5s;
}


@media only screen and (max-width:1200px) {
    .overlay_menue {
		left:0;
    }
}


.overlay-content {
	position:relative;
	top:10vh;
	width:100%;
	text-align:center;
	margin-top:30px;
}


.overlay-content a {
	padding:30px 0;
	font-size:40px;
	font-weight:400;
	letter-spacing:2px;
	text-decoration:none;
	color:rgb(255,255,255);
	display:block;
	transition:0s;
}


@media only screen and (max-width:600px) {
    .overlay-content {
		top:15vh;
    }
	.overlay-content a {
		padding:15px 0;
		font-size:25px;
    }
}


.overlay-content a:hover {
	font-weight:700;
	transition:0;
}


.overlay_menue .closebtn {
	color:rgb(255,255,255);
	position:absolute;
	top:56px;
	left:20px;
	transition:0.5s;
}


@media only screen and (max-width:600px) {
    .overlay_menue .closebtn {
		top:41px;
    }
}


@media only screen and (max-width:1200px) {
    .overlay_menue .closebtn {
    }
}


@media screen and (max-height:800px) {
	.overlay_menue {overflow-y:auto;}
	.overlay-content a {font-size:25px; padding:15px 0;}
}


@media screen and (max-height:550px) {
	.overlay_menue {overflow-y:auto;}
	.overlay-content a {font-size:20px; padding:10px 0;}
}


/*---MENUE ENDE---*/


/*---SOCIAL---*/


#social {
	width:150px;
	height:40px;
	position:fixed;
	bottom:28px;
	right:25px;
	float:left;
	transition:0.5s;
	z-index:900;
}


@media only screen and (max-width:1200px) {
    #social {
		width:40px;
		height:150px;
		bottom:15px;
		right:30px;
    }
}


@media only screen and (max-width:700px) {
    #social {
		width:35px;
		right:20px;
		bottom:0;
    }
}


.icon_social {
	width:50px;
	height:40px;
	padding:0 5px;
	float:left;
}


@media only screen and (max-width:1200px) {
    .icon_social {
		width:40px;
		height:50px;
		padding:0;
		float:left;
    }
}


@media only screen and (max-width:700px) {
    .icon_social {
		width:35px;
    }
}


.icon_social a {
	color:rgb(255,36,32);
	border:0;
}


/*---SOCIAL Ende ---*/


/*---CONTENT---*/


#content {
	font-weight:400;
	min-height:10px;
	margin:230px 16.66% 8vh 16.66%;
	padding:0;
	transition:0.5s;
}


#content p {
	padding:0 5px;
}


@media only screen and (max-width:1200px) {
    #content {
		margin:150px 8.33% 5vh 8.33%;
    }
}


@media only screen and (max-width:600px) {
    #content {
		margin:150px 0 30px 0;
		padding:0 15px;
    }
}


#content_schmal {
	min-height:10px;
	margin:230px 29.17% 8vh 29.17%;
	padding:0;
	transition:0.5s;
}


@media only screen and (max-width:1200px) {
    #content_schmal {
		margin:150px 8.33% 5vh 8.33%;
    }
}


@media only screen and (max-width:600px) {
    #content_schmal {
		margin:150px 0 30px 0;
		padding:0 20px;
    }
}


.wer_was {
	height:35vh;
	padding:0;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	overflow:hidden;
	transition:0.5s;
}


@media only screen and (max-width:1200px) {
    .wer_was {
		height:35vh;
    }
}


@media only screen and (max-width:600px) {
    .wer_was {
		height:30vh;
		width:calc(100% - 10px);
		margin:0 5px;
    }
}


.overlay_wer_was {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	width:100%;
	height:0;
	transition:0.5s;
}


.design {
	background:rgb(133,188,34);
}


.schmuck {
	background:rgb(0,117,118);
}


.kulinarik {
	background:rgb(245,156,0);
}


.kurse {
	background:rgb(0,46,85);
}


.mode {
	background:rgb(182,28,62);
}


.kunst {
	background:rgb(16,186,230);
}


.kultur {
	background:rgb(157,22,128);
}


.literatur {
	background:rgb(91,34,131);
}


.wer_was:hover .overlay_wer_was {
	height:100%;
}


.titel_wer_was {
	font-size:25px;
	line-height:170%;
	color:rgb(255,255,255);
	padding-bottom:4px;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	text-align:center;
}


@media only screen and (max-width:600px) {
    .titel_wer_was {
		font-size:20px;
    }
}


.titel_wer_was a {
	border-bottom:3px solid rgb(255,36,32);
}


#bildbox {
	min-height:10px;
	margin-bottom:10px;
	padding:0;
}


@media only screen and (max-width:600px) {
    #bildbox {
		margin-bottom:0;
    }
}


.bild {
	min-height:10px;
	padding:0 5px;
}


@media only screen and (max-width:600px) {
    .bild {
		padding:0 5px 10px 5px;
    }
}


hr {
	width:calc(100% - 10px);
	height:5vh;
	margin:0 5px 5vh 5px;
	padding:0;
	border:none;
	float:left;
}


.westschatz {
	min-height:250px;
	padding:0 5px 10px 5px;
}


@media only screen and (max-width:600px) {
    .westschatz {
		min-height:10px;
		padding:0 5px 50px 5px;
    }
}


/*---CONTENT ENDE---*/


/*---FOOTER---*/


#footer {
	height:120px;
	padding:25px 0;
	line-height:200%;
	letter-spacing:0.75px;
	text-align:center;
	background:rgb(162,226,219);
	float:left;
	transition:0.5s;
}


@media only screen and (max-width:1200px) {
    #footer {
		font-size:15px;
		padding:28px 0;
    }
}


@media only screen and (max-width:600px) {
    #footer {
		height:100px;
		padding:25px 20px;
		font-size:12px;
		text-align:left;
    }
}


/*---FOOTER ENDE---*/