/* @import url(http://fonts.googleapis.com/css?family=Lato:400,300,700); */

@font-face {
	font-family: 'Lato';
	font-display: fallback;
	src: url('../fonts/Lato/Lato-Regular.ttf');
	font-weight: 400;
}
@font-face {
	font-family: 'Lato';
	font-display: fallback;
	src: url('../fonts/Lato/Lato-Light.ttf');
	font-weight: 300;
}
@font-face {
	font-family: 'Lato';
	font-display: fallback;
	src: url('../fonts/Lato/Lato-Bold.ttf');
	font-weight: 700;
}


/*
	CSS 
	vh = windowHeight
	vw = windowWidth
	
*/

* {
	margin:0;
	padding:0;
}


html {
	overflow-y: scroll;
	height: 100%;
	width:100%;
}

html.stopScroll {
	overflow:hidden;
}

body {
	height: 100%;
	width:100%;
	color: #fff;
}

#backgrund {
	position:fixed;
	top:0;
	left:0;
	height: 100%;
	width:100%;
	z-index:0;
	background-repeat:no-repeat, repeat;
	background-size:auto 100%, auto;
	background-position:bottom left;
	background-attachment:fixed;
	
	-webkit-text-size-adjust: none;
	transition:all ease-in-out 1s;
	-o-transition:all ease-in-out 1s;
	-ms-transition:all ease-in-out 1s;
	-moz-transition:all ease-in-out 1s;
	-webkit-transition:all ease-in-out 1s; 
}

body,
input, textarea, select, button {
	font-family: "Lato", Arial, sans-serif;
	
	font-size: 18px;
	line-height: 26px;
	font-weight: 300;
}
#allesdrin{
	transition:1s all ease-in-out;
	-o-transition:1s all ease-in-out;
	-ms-transition:1s all ease-in-out;
	-moz-transition:1s all ease-in-out;
	-webkit-transition:1s all ease-in-out;
	
	position:relative;
	z-index:2;
}

@media only screen and (min-height: 1080px) {
	#backgrund {
		background-size:auto, auto;
	}
}
@media only screen and (max-width: 1100px) {
	#backgrund {
		height:320px;
		background-position: top 20px left;
		background-size: auto 300px, auto;
		background-attachment:initial;
		position: absolute;
	}
}

@media only screen and (max-width: 850px) {
	#backgrund {
		height:320px;
		background-position: top 20px left;
		background-size: auto 300px, auto;
		background-attachment:initial;
		position: absolute;
		top:90px;
	}
}

body.b2b  #backgrund{
	background-image:url(../images/back-b2b.jpg), url(../images/back-b2b-color.jpg);
	background-color:#000;
}
body.b2b {
	background-color:#1c1c1c;
}
body.cafechillax {
	background-color:#074985;
}



body.fans #backgrund{
	background-image:url(../images/back-fans.jpg), url(../images/back-fans-color.jpg);
	background-color:#e31a3c;
}
body.fans {
	background-color:#d91032;
}

body.news #backgrund{
	background-image:url(../images/back-news.jpg), url(../images/back-news-color.jpg);
	background-color:#181ef8;
}
body.news{
	background-color:#0a10ea;
}

body.musik #backgrund{
	background-image:url(../images/back-musik.jpg), url(../images/back-musik-color.jpg);
	background-color:#ff9000;
}
body.musik {
	background-color:#f88900;
}
body.login {
	background-color:#940f77;
}
body.login #backgrund{
	background-image:url(../images/back-login.svg);
}


body.cafechillax #backgrund{
	background-image:url(../images/back-cafe_chillax.jpg), url(../images/back-cafe_chillax-color.jpg);
}

body.breakfast #backgrund{
	background-image:url(../images/back-bed-and-breakfast.jpg), url(../images/back-bed-and-breakfast-color.jpg);
}


.b2b-rot {
	color:#f3241d;
}
.musik-blau{
	color:#7557E5;
}
.fans-blau {
	color:#36B1D5;
}
.news-blau {
	color:#9198C9;
}



.container,
.container-big  {
    margin: 0 0 0 40%;
    position: relative;
    width: 50%;
	padding:0 0px;
	box-sizing: border-box;
}
.container-big  {
    width: 100%;
    max-width: 1300px;
	margin: 0 auto;
	padding:0 20px;
}


.impressum  {
	background:#740057;
}

.impressum .titleWrapp span {
	display:none;
}

.impressum .container {
    margin: 0 auto;
    position: relative;
    width: 100%;
	max-width:1100px;
	padding:0 20px;
	box-sizing: border-box;
}
.impressum #backgrund {
	display:none; 
}
.items-row {
	padding-bottom:80px;
}


h1, h2 {
	font-size: 76px;
    line-height: 84px;


    font-size: 56px;
    line-height: 60px;


	text-align:center;
	font-weight:100;
	text-transform:uppercase;
}

.b2b h1,
.b2b h2/*,
.b2b p strong */{
	color:#f3241d;
}

.musik h1,
.musik h2/*,
.musik p strong */{
	color:#7557E5;
}

.fans h1,
.fans h2/*,
.fans p strong */{
	color:#36B1D5;
}

.news h1,
.news h2/*,
.news p strong */{
	color:#9198C9;
}


.cafechillax h1,
.cafechillax h2/*,
.cafechillax p strong */{
	color:#074985;
}

.breakfast h1,
.breakfast h2/*,
.breakfast p strong */{
	color:#A3B4F9;
}

h3 {
    font-size: 40px;
    line-height: 44px;
	padding-bottom:7.5vh;
	text-align:center;
	font-weight:100;
	text-transform:uppercase;
}


a {
    color: #009fe3;
	text-decoration: none;
	
	/* 
	-webkit-transition: all 500ms ease 0s;
       -moz-transition: all 500ms ease 0s;
         -o-transition: all 500ms ease 0s;
            transition: all 500ms ease 0s;
	*/
}

a:hover{
	background-color: transparent;
	color:#254194;
	text-decoration:none;
}
.login a:hover{
	color:#fff;
}

a:focus  {
	outline:none;
}

a img {
	border:none;
}

.nav-stacked,
p {
	margin-bottom:20px;
}

p:last-child {
	margin-bottom: 0;
}

p.zweispaltig {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	text-align:justify;
	
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
	
	
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
	        hyphens: auto;

}

ul, ol {
    margin-left:0px;
}
#content ul,#content ol {
    margin-left:20px;
}

ul li {
	padding-bottom:10px;
}
ul li ul {
	margin-bottom: 10px;
    margin-top: 0px;
}

img {
	max-width: 100%;
	width: auto \9; /* only ie 8+9 */
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* im IE SVGs richtig scalieren */

/* IE9 */
.ie9  img[src*=".svg"] {
	width: 100%; 
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	img[src*=".svg"] {
		width: 100%; 
	}
}


input, textarea, button {
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;

    -webkit-border-radius: 0; 
}

address {
	font-style:normal;
}

.nobr {
	white-space:nowrap;
}

.text-center {
	text-align:center;
} 

.clear {
	clear:both;
}

.left {
	float:left;
}

.right {
	float:right;
}

.w40 {
	width:40%;
	box-sizing:border-box;
}

.w50 {
	width:50%;
	box-sizing:border-box;
}
.w60 {
	width:60%;
	box-sizing:border-box;
}
.w100 {
	width:100%;
	box-sizing:border-box;
}



.fa-lg {
  font-size: 1.33333333em;
  line-height: .75em;
  vertical-align: -7.5%;
}


/* pleil ohne <i> */
.jlink:before {
	content:'\f105';
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	padding-right:3px;
	
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	
	font-size: 1.33333333em;
	line-height: .75em;
	vertical-align: -7.5%;
}


/* 
 * beim scrollen einfaden 
 * Siehe KaGe
 */

.desktop .fadeIn {
	opacity:0
}
.desktop .fadeIn.inview  {
	opacity:1;
	
   -webkit-transition: opacity 0.4s ease-in-out 0.2s;
   -moz-transition: opacity 0.4s ease-in-out 0.2s;
   -o-transition: opacity 0.4s ease-in-out 0.2s;
   -ms-transition: opacity 0.4s ease-in-out 0.2s;
   transition: opacity 0.4s ease-in-out 0.2s;
}

/* alte browser oder kein JS  */

.chromeframe {
	position:fixed;
	z-index:999988;
	background-color:#222;
	color:#fff;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	padding:20%;
	padding-top:10%;
	width:100%;
	height:100%;
	box-sizing:border-box;
}

.chromeframe a{
	color:#ccc;
}

.chromeframe a:hover{
	color:#fff;
}


/* system-message  */

#system-message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background:rgba(0, 0, 0, 0.7);
	z-index: 555;
}

.alert {
	position: absolute;
	top: 20%;
	left: 20%;
	padding: 15px;
	width: 60%;
	background: #fff;
	color: #000;
}

.close {
	cursor:pointer;
	font-size: 80px;
}

.alert-message .alert-heading {
	display:none;
}




.news .moduletable h3{
	padding-bottom:50px;
}
.news .acymailing_introtext {
	padding-bottom:50px;
	text-align:center;
}

.news .acymailing_form {
	padding-bottom:80px!important;
	
} 

.news .acymailing_form .button {
    background: none repeat scroll 0 0 #15a2ff;
	display:inline-block;
    border: medium none;
    border-radius: 100%;
	text-align:center;
    color: #ffffff;
    cursor: pointer;
    font-family: "Lato",serif;
    font-size: 20px;
    height: 120px;
    outline: 0 none;
    width: 120px; 
    margin: 0px 10px 30px 10px;
    box-sizing: content-box; 
}

.news .acymailing_form .button:hover {
    background: none repeat scroll 0 0 #0a10ea;
}

/************************************************************
*
*				banner background
*				
************************************************************/


.custom_background {
	margin-top: 110px;
	height: 650px;
	background-size: cover; 
	background-position: top center;
}

@media only screen and (min-width: 1800px) {
	.custom_background {
		height: 750px;
	}
} 

@media only screen and (max-width: 767px) {
	.custom_background {
		height: 377px;
	}
} 



/************************************************************
*
*				Content
*				
************************************************************/
#header{
    height: 85px;
    margin-top: 60px;
    margin-bottom: 220px;
	text-align:center;
}
.titleWrapp {
	display: inline-block;
	text-align:left;
}

#header h1 {
	color:#fff;
	display:inline;
	font-size:54px;
	line-height:64px;
}

.ohneUberMenue {
	position: relative;
	top: -25px;
}

#header a.homeLink {
	display: inline-block;
	width: 100px;
	position: relative;
	top: 8px;
	margin-right: 15px;
}

#allesdrin .menueTitle {
	color:#fff;
	margin-bottom:200px;
	margin-top:10px;
	/*text-transform:none;*/
	font-size:60px;
}

#logo {
	width:100px;
	height:auto;
	display:inline-block;
}

#logo path {
	-webkit-transition: all 500ms ease 0s;
    -moz-transition: all 500ms ease 0s;
    -o-transition: all 500ms ease 0s;
    transition: all 500ms ease 0s;
}


#backgrund h1 {
	display:none;
}


.article-textWrap {
	background-color: #f3f3f3;
	color:#000;
	padding: 45px 50px;
	margin-bottom: 80px;
	
}

.article-textWrap img {
    float: left;
    padding: 0px 40px 25px 0;
}

.view-article #content h2 {
    margin-bottom: 30px;
    text-transform: none;
}


.login-description {
	padding-bottom: 20px;
}
	
	

@media only screen and (max-width: 1300px) {
	#header{
		margin-right: 80px;
		text-align:right;
	}
	
	.impressum #header{
		margin-right: 0px;
		text-align:center;
	}
}

@media only screen and (max-width: 920px) {
	#header{
		margin-right: 0px;
		margin-left: 90px;
		text-align:center;
	}
	
	#header a.homeLink {
		display: block;
		width: 100px;
		position: relative;
		top: 0px; 
		margin: 0 auto;
	}
}
@media only screen and (max-width: 850px) {
	#header{
		margin: 0px;
		text-align:left;
		background-color:#000;
		position:fixed;
		z-index:48;
		height:90px;
		width:100%;
		top:0;
		left:0;
	}
	
	.b2b #header {
		background-color:#1c1c1c;
	}
	.fans #header {
		background-color:#d91032;
	}
	.musik #header {
		background-color:#f88900;
	}
	.news #header {
		background-color:#0a10ea;
	}
	.cafechillax #header {
		background-color:#FFFFFF;
	}
	.breakfast #header {
		background-color:#FFC234;
	}
	.login #header {
		background-color:#87026a;
	}
	.cafechillax #header {
		background-color:#074985;
	}



	#header a.homeLink {
		display: inline-block;
		width: 60px;
		position: relative;
		top: 15px; 
		left:15px;
		margin: 0 10px 0 0;
	}
	#logo {
		width: 60px;
		height: 100%;
	}
	.titleWrapp span, 
	.nachOben,
	.ohneUberMenue	{
		display: none!important;
	}
	
	#backgrund h1 {
		position:absolute;
		right:15px;
		bottom:10px;
		color:#fff;
		display:block;
		font-size:44px;
	}
	
	h1, h2 {
		font-size: 34px;
		line-height: 42px;
	}

	#header h1 {
		font-size:44px;
		padding-left:10px;
	}

	#wrapper {
		margin-top: 420px;/* background + header height + 20*/
	}
	
	.impressum #wrapper {
		margin-top: 120px;
	}
	
	.impressum #header h1 strong  {
		display:none;
	}
	
}


/*  Google Maps  */

#map_canvas{
	width: 100%;
	height: 500px;
}

#map_canvas img {
	max-width:none;
}




/* login formular */
.loginlogin {
	width: 80%;
}
fieldset {
	border: 0;
}

.control-group {
	margin-bottom:15px; 
}


/************************************************************
*
*				footer
*				
************************************************************/

#footer {
	padding:15px 0 0 0;
	margin-top: 0px;
	background-color:#000;
	
	position: relative;
    z-index: 1;
}
/* normale background-color */
.b2b #footer {
	background-color:#1c1c1c;
}
.fans #footer {
	background-color:#d91032;
}
.musik #footer {
	background-color:#f88900;
}
.news #footer {
	background-color:#0a10ea;
}
.cafechillax #footer {
	background-color:#3476b2; 
}
.cafechillax #footer .menu_sitemap span{
	color:#074985;
}
.breakfast #footer {
	background-color:#e6b628;
}

.login #footer {
	background-color:#87026a;
}

@media only screen and (max-width: 1100px) {
	.b2b #footer {
		background-color:#000;
	}
	.fans #footer {
		background-color:#e31a3c;
	}
	.musik #footer {
		background-color:#ff9000;
	}
	.news #footer {
		background-color:#181ef8;
	}/*
	.cafechillax #footer {
		background-color:#FFFFFF;
	}*/
	.cafechillax #footer .menu_sitemap span{
		color:#074985;
	}
	.breakfast #footer {
		background-color:#FFC234;
	}
}


.webDesign {
	text-align:center;
	padding:10px;
	background-color:#222;
}


.webDesign a{
	color:#fff;
}
.webDesign a:hover{
	color:#000;
}
/*
.b2b .webDesign {
	background-color:#323232;
}
.fans .webDesign {
	background-color:#cc0325;
}
.musik .webDesign {
	background-color:#e97d00;
}
.cafechillax .webDesign {
	background-color:#FFFFFF;
}
*/
/************************************************************
*
*				Resposive
*				
************************************************************/

.tb-quer,
.tb-hoch,
.sm-quer,
.sm-hoch {
	display:none;
}
.no-tb-quer,
.no-tb-hoch,
.no-sm-quer,
.no-sm-hoch {
	display:block;
}


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

	.container {
		margin: 0 0 0 10%;
		position: relative;
		width: 80%;
		padding:0 0px;
		box-sizing: border-box;
	}
	

}

/*samsung tab 3  quer*/
@media only screen and (max-width: 1280px) {
	
}

/*ipad quer*/
@media only screen and (max-width: 1024px) {
	
	.tb-quer {
		display:block;
	}
	.no-tb-quer {
		display:none;
	}
	
	/********************/
	
	
}

/*samsung tab 3  hoch*/
@media only screen and (max-width: 800px) {
	
	.tb-hoch {
		display:block;
	}
	.no-tb-hoch {
		display:none;
	}
	
	/********************/
	
	body,
	input, textarea {
		font-size: 20px;
		line-height: 28px;
	}
/*
	h1, h2 {
  		font-size: 54px;
		line-height: 58px;
	}
*/
	
	h3 {
	    font-size: 30px;
	    line-height: 34px;
	}
	
	/********************/
	
}

/*ipad hoch*/
@media only screen and (max-width: 768px) {
	
}

/* smartphone quer */
@media only screen and (max-width: 767px) {
	
	.sm-quer {
		display:block;
	}
	.no-sm-quer {
		display:none;
	}
	
	.left,
	.right {
		float:none;
	}
	
	.w60,
	.w50,
	.w40 {
		width:100%;
	}
	
	/* */
	
	#googleMaps {
		margin-bottom:40px;
		padding:0 20px;
		box-sizing:border-box;
	}

	#map_canvas {
		width: 100%;
		height: 250px;
	}
	
	
	/********************/
}

/* smartphone hoch 
 *
 * iphone 5  			- 320px 
 * samsung Galaxy S4  	- 360px 
 * iphone 6 Plus  		- 414px 
 */
 
@media only screen and (max-width: 567px) {
	
	.sm-hoch {
		display:block;
	} 
	.no-sm-hoch {
		display:none;
	}
	
	/********************/
	.container, .container-big {
		margin: 0 0 0 0;
		position: relative;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	#wrapper {
		margin-top: 435px;
	}

	body,
	input, textarea {
	    font-size: 16px;
	    line-height: 22px;
	}

	h1, h2, h3 {
	    font-size: 20px;
	    line-height: 22px;
	}
	.titleWrapp {
		display: inline-block;
		margin-top: -22px;
		text-align: left;
		vertical-align: middle;
	}
	#header h1 {
		font-size:24px;
		padding-left:10px;
	}
	
	/********************/
	
}