@charset "utf-8";
/* CSS Document Video #15 */

*{
	margin: 0;
	padding: 0;
	font-family: "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 62.5%;
}
.clear {clear: both;}
p, strong, em, tr, td{
	font-size: 1.5rem;
	line-height: 2.3rem;
	margin-bottom: 1.5rem;
}

hr {
	border-top: 0.1rem dotted #E0E0E0; 
	border-bottom: 0;
	margin: 1.5rem;
	clear: both;
}
@media screen and (min-width: 980px) {
	header nav#mobile {display: none;}
	header nav#normal {display: block;}
	.normal {display: block;}
	.mobile {display: none;}
}

@media screen and (max-width: 980px) {
	header nav#normal {display: none;}
	header nav#mobile {display: block;}
	.normal {display: none;}
	.mobile {display: block;}
}

.wrapper_normal {
	margin: 0 auto;
	width: 1440px;
	max-width: 95%;
	background-color: #FFFFFF;
	color:#333333;
}

.wrapper_mobile {
	margin: 0 auto;
	max-width: 90%;
	color:#333333;
}

.bg_top_ef-normal {
	position:fixed;
	top:0;
	width: 100%;
	height: 20px;
	background-color: #efefef;
	margin-top: 0px;
	z-index: 200;
}
.bg_top_ff-normal {  /* um Navi Bereich mit 100% breite in weiss -xy*/
	position:fixed;
	top:0;
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	margin-top: 20px;
	z-index: 200;
}
.bg_top_ff-mobile {  /* um Navi Bereich mit 100% breite in weiss -xy*/
	position:fixed;
	top:0;
	width: 100%;
	height: 10rem;
	background-color: #ffffff;
	z-index: 200;
}
#normal .logo {
	position:fixed;
	left: 0px;
	width: 120px;
	height: 83px;
	background: url(../laibolin-image/LaiBolin-Logo.png);	
    background-repeat: no-repeat;
	background-size:contain;
	background-position:left;
	margin-left: 4rem;
	margin-top: -20px;
	z-index: 900;
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 90%;
	right: 0%;  /* für mobile Version Menü rechtsbüdig */
	text-align: right; /*für mobile Version menü rechtsbüdig*/
	font-weight: 400;
	font-size: 25px;
	font-size: 2.5rem;
	z-index: 300;
} 
header nav#normal .navi  {
	display: flex;	
	position: relative;
	margin-top: 2rem;
	margin-left: 10rem;
	margin-right: 10rem;
	height: 5rem;
	justify-content:space-between;
	background-color: #FFFFFF;
	align-items: center;
	z-index: 80;
}

nav#normal .navi_item a {
	text-decoration: none;
	color: #333333;
	font-size: 20px;
	font-size: 2rem;
}
nav#normal .navi_item a:hover {
	color: #B21919;
	border-bottom: solid #B21919 3px;	
}

nav#normal .navi_item_VBlogo img {
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
 transition: transform 0.8s;
}
nav#normal .navi_item_VBlogo img:hover {
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 cursor: zoom-in;
 -moz-transform: scale(1.1, 1.1);
 -webkit-transform: scale(1.1, 1.1);
 -o-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1);
 transform: scale(1.1, 1.1);
}

nav#normal .navi_aktive a {
	color: #B21919;
	border-bottom: solid #B21919 3px;	
}

header nav#mobile {	
	top:0;
	margin-top: 20px;
	width: 250px;
}

#mobile .logo {
	position:fixed;
	left: 0px;
	width: 150px;
	height: 100px;
	width: 15rem;
	height: 10rem;
	background: url(../laibolin-image/LaiBolin-Logo-mobile.png);	
    background-repeat: no-repeat;
	background-size:contain;
	background-position:left;
	margin-left: 2rem;
	margin-top: -20px;
	z-index: 900;
}

header nav#mobile ul li {
	background: #FFFFFF;
	list-style: none;
	width: 100%;
	font-weight: 400;
	text-align: center;
	font-size: 6.5rem;
	border-bottom: 1px #DDDDDD solid;
}
header nav#mobile ul li:nth-child(1) {	
	border-top: 1px #DDDDDD solid;
}

header nav#mobile ul li a {
	display: block;  /* damit die Farbe ganze Zeile wirkt */
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #333333;
}

header nav#mobile ul li:hover > a {
	background-color: #DDDDDD;
	width: 100%;
}

.site-nav {
	position: absolute;
	top: 10rem;
	right: 0px;
	width: 40%;	
	/* height: 0; nötig für IE im kleinen Festern, die in der Regeln nicht vorkommen soll. */
	overflow: hidden;	
	-webkit-clip-path: circle(0 at top right);
	-ms-clip-path: circle(0 at top right);
	-o-clip-path: circle(0 at top right);
	clip-path: circle(0 at top right);
	-webkit-transition: all ease-in-out 500ms; 
	-ms-transition: all ease-in-out 500ms; 
	-o-transition: all ease-in-out 500ms;
	transition: all ease-in-out 500ms; 
}


.site-nav--open {
	height: auto;
	-webkit-transition: all ease-in-out 500ms;
	-ms-transition: all ease-in-out 500ms;
	-o-transition: all ease-in-out 500ms;
	transition: all ease-in-out 500ms; /* damit die Liste langsam auflistet. es funktioniert nur, wenn heitght mit einem Zahl definiert statt auto ist.  height und transition sind nur für internet exploer da  */
	-webkit-clip-path: circle(150% at top right);
	-ms-clip-path: circle(150% at top right);
	-o-clip-path: circle(150% at top right);
	clip-path: circle(150% at top right);
}


.mobile-menu {
	position: absolute;
	background: #FFFFFF;
	padding: 1.5rem;
	top: 40px;
	right: 3rem;
	cursor: pointer;
}

.mobile-3line,
.mobile-3line::before,
.mobile-3line::after{
	content: '';
	display: block;
	background: #4c4c4c;
	height: 0.5rem;
	width: 5rem;
	border-radius: 0.5rem;
	-webkit-transition: all ease-in-out 500ms;
	-ms-transition: all ease-in-out 500ms;
	-o-transition: all ease-in-out 500ms;
	transition: all ease-in-out 500ms; /* damit von drei Liene zu Kruez langsam geht */
}
.mobile-3line::before{
	-webkit-transform: translateY(-12px);
	    -ms-transform: translateY(-12px);
	    -o-transform: translateY(-12px);
	        transform: translateY(-12px);
	border-radius: 3px;
}
.mobile-3line::after{
	-webkit-transform: translateY(8px);
	    -ms-transform: translateY(8px);
	    -o-transform: translateY(8px);
	        transform: translateY(8px);
}

.open .mobile-3line {
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.open .mobile-3line::before {
	opacity: 0; /*damit nur zwei Liene erscheint. */
}
.open .mobile-3line::after {
	-webkit-transform: translateY(-3px) rotate(-90deg);
	    -ms-transform: translateY(-3px) rotate(-90deg);
	    -o-transform: translateY(-3px) rotate(-90deg);
	        transform: translateY(-3px) rotate(-90deg);
}


.titel_bild img {
	position: relative;
	width: 100%;	
	text-align: center;
	margin-top: 7rem;
	z-index: 1;
}

@media screen and (max-width: 980px) {
	.titel_bild img {margin-top: 10rem;}
}
.titel_bild_copyright {
	width:100%;
	font-size: 1.5rem; 
	text-align: right; 
	max-width: 99%;
}

article {
	position: relative;
	max-width: 100%;
	align-content: center;
	font-size: 1.5rem;
		margin-top: 2rem;
		background-color: #e0e0e0;
		padding: 1rem;
}

.inhalt_opacity {opacity:1;}
.inhalt_opacity_open {opacity: 0.5;}

 
.hp_container {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem;
	padding-top: 1rem;
}

@media screen and (max-width: 980px) {
	article {
		background-color: #FFFFFF;
		margin-top: 1rem;
	}
	.hp_container {
		margin: 0rem;
		padding-top: 0rem;
	}
}
	
.hp_item {
	flex-basis: 50rem;
	flex-grow: 1;
	font-size: 2rem;
	margin: 10px;
}

.hp_laibolin {
	text-align: center; 
	font-weight: bold; 
	color: #B21919; 
	height: 6rem;
	animation: textwelle 1s;
	font-size: 5rem;
}
@keyframes textwelle {
    from { transform: translateX(-100%) }
    to   { transform: translateX(0) }
}

.hp_laibolin_text {
	text-align: center; 
	font-size: 3rem; 
	font-weight: 300; 
	color: #B21919; 
	height: 6rem; 
	padding-top: 1.5rem;
	animation: textwelle1 2s;
}

@keyframes textwelle1 {
    from { transform: translateX(200%) }
    to   { transform: translateX(0) }
}

.hp_laibolin_text_notfound {
	text-align: center; 
	font-size: 3rem; 
	font-weight: 300; 
	color: #B21919; 
	height: 6rem; 
	padding-top: 1.5rem;
	animation: textwelle2 2s;
}
@keyframes textwelle2 {
    from { transform: translateX(-100%) }
    to   { transform: translateX(0) }
}

.hp_bild img {
	display: inline-block;
	width: 100%;
}
.hp_bild_copyright {
	position: relative;
	text-align: right;
	right: 1%;
	margin-top: -1.5rem;
	font-size: 0.8rem; 
	font-weight: 100;
	color: #FFFFFF;
	text-shadow: 0 0 0.8rem #000000;
}

.hp_text {
	position: relative;
	background-color: #EFEFEF;
	padding-bottom: 1rem;
	
}
.hp_text_titel {
	margin-top: 1rem;
	padding: 1rem 3rem;
	text-align: left;
}
.hp_text_titel a {
	text-decoration: none;
	font-size: 3rem;
	font-weight: 500;
	color: #B21919;
}

.hp_text_liste img {
	vertical-align:middle;
	width: 2.4rem;
	height: 2.4rem;
	margin-right: 1rem;
}
.hp_text_liste p { 
	text-align: left;
	width: 90%;
	margin: 1rem 4rem;
	font-size: 2rem;	
	line-height: 3rem;
}

.hp_text_liste p a {
	text-decoration: none;
	font-size: 2rem;
	color:#333333;
}
.hp_text_liste_Null{	
	font-size: 2rem;
}

.sub_text_titel {
	margin-top: 1rem;
	padding: 1rem 2rem;
	text-align: left;
	font-size: 2rem;
	font-weight: 500;
}
.sub_text_titel a {
	margin-top: 1rem;
	text-align: left;
	font-size: 2rem;
	font-weight: 500;
	color: #B21919;
	text-decoration: none;
}

.sub_item { /*für die 2. Seite */
	flex-basis: 35rem; /* da max-width 1440 ist, kann max 3 Bilder auf eine Zeile erscheinen. */
	flex-grow: 1;
	font-size: 2rem;
	margin: 1rem;
}

.sub_item_2rows { /*für die 3. Seite Text */
	flex-basis: 50rem;
}

.sub_text {
	padding: 0rem 2rem;
	font-size: 1.5rem;
	line-height: 2.3rem;
}

.sub_text a {
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 2.3rem;
	color: #B21919;
}

.sub_text ul{
	list-style-type: square; 
	padding-left: 2rem;
}
.sub_text ol{ /* bsp für 柏林米其林星级餐馆 */
	padding-left: 2rem;
}
.sub_text li{
	font-size: 1.5rem; 
	margin-bottom: 1rem;
}

.sub_text_nav {
	display: block;
	font-size: 1.2rem;
	font-weight: 500;
	margin: 1rem 0;
	padding-left: 4.5rem;	
	background-color: #e0e0e0;
}
.sub_text_nav a{
	font-size: 1.2rem;
	font-weight: 500;
	text-decoration: underline;
	color: #333333;
}


.sub_text_imgl {  /* für die 4. Level Bild im Text links berlin.php */
	display: block;
	float: left;
	margin-right: 2rem;
	width: 30%;
}
.sub_text_imgl img{
	width: 100%;
}
.sub_text_imgl_copyright {
	text-align: right;
	margin-top: -2rem;
	margin-right: 1rem;
	font-size: 0.8rem; 
	font-weight: 100;
	color: #FFFFFF;
	text-shadow: 0 0 0.8rem #000000;
}

.footer {
	background-color: #E0E0E0;
	font-size: 2.5rem;
	padding: 2rem 6rem;
	
}
.footer a{
	text-decoration: none;
	font-size: 2.5rem;
}
.footer_item {
	flex-basis: 20rem; /* da max-width 1440 ist, kann max 3 Bilder auf eine Zeile erscheinen. */
	flex-grow: 1;
	margin: 0.8rem;
}

@media screen and (max-width: 980px) {
	p, strong, em, td{font-size: 4rem; line-height: 6rem;}
	.hp_bild_copyright {margin-top: -3rem;}
	.hp_item {font-size: 4rem;}
	.hp_text_liste p {font-size: 4rem;	line-height: 6rem;}
	.hp_text_liste p a {font-size: 4rem;}
	.hp_text_liste img {height: 4rem; width: 4rem;}
	.hp_text_liste_Null {display: none;}
	.hp_text_titel a {font-size: 6rem;}
	.sub_item{flex-basis: 50rem;} /*damit Mobile nur eine Spalte vorkommt */
	.sub_text_titel {font-size: 6rem;}
	.sub_text_titel a {font-size: 6rem;}
	.sub_text {font-size: 4rem;	line-height: 6rem;}
	.sub_text ol {padding-left: 4rem;}
	.sub_text li{font-size: 4rem; line-height: 6rem;}
	.sub_text a {font-size: 4rem; line-height: 6rem;}
	.sub_text_nav {font-size: 2rem;}
	.sub_text_nav a {font-size: 2rem;}
	.sub_text_imgl {width: 100%;}
	.sub_text_imgl_copyright {font-size: 0.8rem; margin-top: -7rem;}
	.sub_text_titelimgl_copyright {font-size: 0.8rem; margin-top: -4rem; }
	.footer{margin: 1rem;}
	hr {margin: 1.5rem 1.5rem 3rem 1.5rem; border-top: 0.5rem dotted #000000; }
}

.footer_copyright {
	display: block;
	margin: 1rem;
	font-size: 15px;
	font-size: 1.5rem;
	text-align: center;	
}
.footer_copyright a {
	text-decoration: none;
	font-size: 15px;
	font-size: 1.5rem;
	color: #4c4c4c;
}