/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Content
==================================================
	#Reset & Basics
	##berlin.de navbbar + rest
	## card flip
	## mobile styles
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Forms
	#Misc 
	
	*/
	


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
		
		
		/* #Berlin navbar
================================================== */

.berlin-de-navbar {
	
	width:980px;
	height:59px;
	background-color:#c7d9ff!important;
	border-top-width:5px!important;
	border-top-style:solid;
	border-image-slice: 1;
	border-image-width: 5px 0 0 0;
	border-image-source:linear-gradient(to right, #253276 69%, #b5050e 31%);
	margin:auto;
	
	/*border-top-color:linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);*/
	
	
}
.berlin-de-nav-bottom-line {
	height:59px;
	border-bottom: 1px solid #94adcc !important;
	height:100%
	
}

.berlin-de-logo {
    
    margin: 11px 10px 18px 16px ;
    float: left;
   
}
.berlin-de-logo img {
	max-width: 131px;
	 max-height: 33px;
}

.aural {
	display:none;
	
	
	
}
.portal-navi {

	display:block;
	  float: right;
	font-family:Arial, sans-serif;
	font-size:13px;
	height:51px;
	padding-right:21px;

}	
		
.portal-navi li {
    display: block;
    float: left;
    padding-top: 7px;
    padding-bottom: 5px;
}
	.portal-navi a {
    display: block;
    float: none;
    
	padding:10px;
	
	}
	/* Home video Pic*/
	#home {
		
		top:190px!important;
		margin-bottom:268px!important;
		
		
	}
	#home  img{
		
		height:100%;
		
		width:100%;
	}
	/* Cards  Headline           -------------------------------------------------------------*/
	.shisha-center {
		
		text-align:center;
		
	}
		
	.shisha-center  h3 {
		font-family:BMFchangebold, sans-serif;
		font-size:4em;
		font-style:normal;
		padding-bottom:0.3em;
		
		
	}	
		.shisha-center  p {
		font-family:BMFchangebook, sans-serif;
		font-size:1.1em;
		font-style:normal;
		line-height:1.6em!important;
		
		
	}
	.mymargin {
		
		margin-top:150px;
		margin-bottom:150px;
	}
	
	/*---------------------- Shisha-cards-------------------*/
	.shisha-card-container {
		border-top: 1px solid #eaeaea;
	
		margin-top:4em;
		background-color:#fcfcfc!important;
	}
	.my-bottom-line {
		 border-bottom: 1px solid #eaeaea; 
 
		}
		
	.shisha-card-inner-container {
		/*display: flex;*/
		
		
	}
	.shisha-card {
		
			min-height:35em;
				background-color:#ffffff;
				border: 1px solid #f0f0f0;
				border-radius: 15px!important;
				
				-webkit-box-shadow: 1px 1px 23px 0px rgba(0,0,0,0.05));
				-moz-box-shadow: 1px 1px 23px 0px rgba(0,0,0,0.05);
				box-shadow: 1px 1px 23px 0px rgba(0,0,0,0.05);
		
		
	}
	
	
	
	.my-round-img {
    border-radius: 50%;
	border: 10px solid #f0f0f0;
	margin-bottom:20px;
}
.image-diamond {
	
	margin-bottom:20px;
	position:relative;
	top:-10px;
}
	.back-white {
		top:15px;
		background-color:#ffffff;
		
		text-align:center;
		
		
	}
	.less-padding {
		padding:60px 35px 60px 35px!important;
		
	}

	.my-emphasis {
		
		font-weight:bold;
	}
	
	
	.shisha-card p {
		
		font-family:BMFchangebook, sans-serif;
		font-size:1.3em;
		font-style:normal;
		line-height:1.6em!important;
	}
	.services-wrap h5 {
		
		
		font-size:1.3em;
		font-style:normal;
	}
	.shisha-card ul {
		text-align:left;
		list-style:square;
		font-family:BMFchangebook, sans-serif;
		font-size:1em;
		font-style:normal;
		list-style-position: outside;
		padding-left: 1.0rem;
		
	}
	.shisha-card li {
		line-height:18px;
		 margin: 6px 0;
	
		font-family:BMFchangebook, sans-serif;
		font-size:1.3em;
		font-style:normal;
		line-height:1.3em!important;
		
	}
	.my-t-align-right {
		
		float:right !important;
	}
	.right-footer {
		width:712px;
		height:512px;
		padding:80px 110px 30px 110px;
		background-image: url("../images/be-berlin-frame.svg");
		margin-top:90px;
		margin-right:100px;
		
		
	}
	.right-footer p{
	font-family:BMFchangebook, sans-serif;
		font-size:1.3em!important;
		font-style:normal;
		line-height:1.6em!important;
	}
	
	.right-footer  a{
		 
	margin-left:0em!important;
	margin-bottom:10px;
	text-decoration:underline;
	font-family:BMFchangebold, sans-serif;
	color:#e2001a!important;
	font-size:0.9em!important;
		
	}
	
	.right-footer h3{
		
		font-family:BMFchangebold, sans-serif;
		font-size:3em;
		font-style:normal;
		padding-bottom:0.3em;
		margin-bottom:0.4em;
		
	}
	.shisha-footer {
		
		
		
		background-image: url("../images/shisha-with-smoke.jpg");
		background-repeat: no-repeat;
		min-height:942px;
		color:#000000!important;
		padding-bottom: 0px !important;
		
		
	}
	.left-footer {
		
		padding-top: 755px;
		
		
	}
	.shisha-footer a {
		
	color:#000000;
	margin-left:5em;
		
		
	}
	.shisha-mail-link {
		float:right;
		padding-top:1.7em;
		padding-bottom:1.7em;
		padding-right:4.5em;
		background: rgba(255,255,255,0.7);
		border-radius: 5px;
	}
	
	.be-berlin-logo-bottom {
		
		vertical-align:middle;
		margin-left:5em;
		
	}
	.shisha-notfall h3 {
		font-family:BMFchangebold, sans-serif;
		font-size:5em;
		font-style:normal;
		padding-bottom:0.3em;
		
	}
	.my112 {
		
		font-family:BMFchangebold, sans-serif;
		font-size:12em;
		color:#ff1a25;
		
	}
	.shisha-list-container {
		
		text-align:left;
		padding-top:70px;
	}
	.shisha-berlinframe-list {
		
	
		 
		  list-style-image: url('../images/red-list-square.svg');
	
		font-family:BMFchangebold, sans-serif;
		font-size:1.6em;
		font-style:normal;
	
	}
	.shisha-berlinframe-list li {
		
	line-height:1.9rem;
		 margin: 12px 0;
		 
	}
		
		
				
		/* #card flip
================================================== */





.my-card-container {
	
	 background-image: url("../images/card-slider-backgrnd.jpg"); 
	background-repeat:repeat-x;
	/* Changed min-height: 940px;*/	
	min-height:440px;
	margin: 200px 0px 0px 0px;
	padding-top:110px;
	
}


.card-container1 {
position: relative;
float: left;
width: 640px;
height: 900px;
 

-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
 left: 50%;
    transform: translate(-50%, -12%);
}

.card {
	/*margin: auto !important;*/
   
width: 640px;
height: 554px;
position: absolute;
cursor: pointer;
-webkit-transition: -webkit-transform 1.1s;
-moz-transition: -moz-transform 1.1s;
-o-transition: -o-transform 1.1s;
transition: transform 1.1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}



.card.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
  
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;

position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .back {
width: 100%;

}
.front img {
    width: 100%;
    max-width: 100%;
}
.back img {
width: 100%;
max-width: 100%;
}

.card .back {

-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}

/* Card shadow*/
.card:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 98px;
	height: 2px;
	
	/* Shadow size */
	width: 9%; /* Add a 10th of the width you want (scaled up later) */
	left: -4%; /* Half of the 10th of the width! */
	margin: 0 0 0 50%; /* Centers element before it's upscaled, don't change this */
	
	/* Transform: rotateX to create depth, scale to 10x to make left/right more blurry than top/bottom */
	-moz-transform: rotateX(45deg) scale(10, .75);
	-ms-transform: rotateX(45deg) scale(10, .75);
	-o-transform: rotateX(45deg) scale(10, .75);
	-webkit-transform: rotateX(45deg) scale(10, .75);
	transform: rotateX(45deg) scale(10, .75);

	/* Apply shadow & background */
	background: #000;
	-moz-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-o-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-webkit-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-ms-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	
	/* Change opacity of entire element to tint shadow */
	-moz-opacity:.55;
	filter:alpha(opacity=55);
	opacity:.55;
}
.flipped:after {
	-moz-opacity:.35;
	filter:alpha(opacity=35);
	opacity:.35;
	bottom: 98px;
	height:2px;
	
}




/* ##mobile Styles
================================================== */

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



.cbp-af-header{
	
	top:50px!important;
}

}


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



.shisha-center h3 {
    font-family: BMFchangebold, sans-serif;
    font-size: 2em;
    font-style: normal;
    padding-bottom: 0.3em;
}


/*    cards flip smaller size
-----------------------------------------------------------*/







.card-container1 {
position: relative;
float: left;
width: 320px;
height: 460px;
 left: 50%;
    transform: translate(-50%, 0%);
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;

}

.card {
	
width: 320px;
height: 277px;
position: absolute;
cursor: pointer;
-webkit-transition: -webkit-transform 1.1s;
-moz-transition: -moz-transform 1.1s;
-o-transition: -o-transform 1.1s;
transition: transform 1.1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}



.card.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
  
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;

position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .back {
width: 100%;

}
.front img {
    width: 100%;
    max-width: 100%;
}
.back img {
width: 100%;
max-width: 100%;
}

.card .back {

-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}

/* Card shadow*/
.card:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 48px;
	height: 2px;
	
	/* Shadow size */
	width: 9%; /* Add a 10th of the width you want (scaled up later) */
	left: -4%; /* Half of the 10th of the width! */
	margin: 0 0 0 50%; /* Centers element before it's upscaled, don't change this */
	
	/* Transform: rotateX to create depth, scale to 10x to make left/right more blurry than top/bottom */
	-moz-transform: rotateX(45deg) scale(10, .75);
	-ms-transform: rotateX(45deg) scale(10, .75);
	-o-transform: rotateX(45deg) scale(10, .75);
	-webkit-transform: rotateX(45deg) scale(10, .75);
	transform: rotateX(45deg) scale(10, .75);

	/* Apply shadow & background */
	background: #000;
	-moz-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-o-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-webkit-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-ms-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	
	/* Change opacity of entire element to tint shadow */
	-moz-opacity:.55;
	filter:alpha(opacity=55);
	opacity:.55;
}
.flipped:after {
	-moz-opacity:.35;
	filter:alpha(opacity=35);
	opacity:.35;
	bottom: 48px;
	height:2px;
	
}

}









/* #Basic Styles
================================================== */
@font-face {
    font-family: 'BMFchangebold';
    src: url('../fonts/BMF/bmfchangebold-webfont.eot');
    src: url('../fonts/BMF/bmfchangebold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BMF/bmfchangebold-webfont.woff') format('woff'),
         url('../fonts/BMF/bmfchangebold-webfont.ttf') format('truetype'),
         url('../fonts/BMF/bmfchangebold-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}   
@font-face {
    font-family: 'BMFchangebook';
    src: url('../fonts/BMF/bmfchangebook-webfont.eot');
    src: url('../fonts/BMF/bmfchangebook-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BMF/bmfchangebook-webfont.woff') format('woff'),
         url('../fonts/BMF/bmfchangebook-webfont.ttf') format('truetype'),
         url('../fonts/BMF/bmfchangebook-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}   

@font-face {
    font-family: 'BMFchangeLetter';
    src: url('../fonts/BMF/bmfchangeletterbold-webfont.eot');
    src: url('../fonts/BMF/bmfchangeletterbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BMF/bmfchangeletterbold-webfont.woff') format('woff'),
         url('../fonts/BMF/bmfchangeletterbold-webfont.ttf') format('truetype'),
         url('../fonts/BMF/bmfchangeletterbold-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}



body {
	background: #fff;
	font-family: 'Open Sans';
	font-weight:300;
	font-size: 1.1rem;
	line-height:22px;
	color:#323232;
	overflow-x:hidden;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	-webkit-text-size-adjust: 100%;
 }
 html {
		overflow-x:hidden; 
	height:100%;
}
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
	color: #414141;
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	text-align:center;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 40px; line-height:48px;}
h2 { font-size: 34px; line-height:42px;}
h3 { font-size: 30px; line-height: 38px;}
h4 { font-size: 24px; line-height: 32px;}
h5 { font-size: 16px; line-height: 22px;font-weight:600;}
h6 { font-size: 14px; line-height: 20px;font-weight:600;}


	p {  }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: 600;}
	small { font-size: 80%; }
	


/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #323a3d; border-width: 1px 0 0; clear: both; margin:0 10px 0 10px; height: 0; position:relative;}


/* #Links
================================================== */
	a, a:visited { text-decoration: none; }
	a:hover, a:focus { color: #e74c3c;}
	p a, p a:visited { line-height: inherit; text-decoration: none;}
	a:focus{
	outline:none;
	}

/* #Lists
================================================== */
	ul, ol { }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li {  }
	li { line-height: 18px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }
/* #Buttons
================================================== */

	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
	background:#363636;	
	margin-top:10px;
	border:none;
	  color: #dfdfdf;
	  display: inline-block;
	  font-size: 16px;
	  cursor: pointer;
	  line-height: normal;
	  padding: 15px 25px;
	-webkit-transition : all 0.3s ease-out;
	-moz-transition : all 0.3s ease-out;
	-o-transition :all 0.3s ease-out;
	transition : all 0.3s ease-out; 
	width:100%}

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {	
	  color: #e74c3c;
	background:#292929;	 }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {	
	  color: #e74c3c;}

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}
/* #Images
================================================== */






/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 12.5px !important; }
	.add-bottom { margin-bottom: 25px !important; }
	.remove-top { margin-top: 0 !important; }
	.half-top { margin-top: 12.5px !important; }
	.add-top { margin-top: 25px !important; }

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
::selection {
	color:#fff;
}
::-moz-selection {
	color:#fff;
}