@font-face {
font-family:'Anaheim';
font-style:normal;
font-weight:400;
src: url('../schrift/anaheim-v7-latin-regular.eot'); 
src: local('Anaheim'), local('Anaheim-Regular'),
url('../schrift/anaheim-v7-latin-regular.eot?#iefix') format('embedded-opentype'), 
url('../schrift/anaheim-v7-latin-regular.woff2') format('woff2'), 
url('../schrift/anaheim-v7-latin-regular.woff') format('woff'), 
url('../schrift/anaheim-v7-latin-regular.ttf') format('truetype'), 
url('../schrift/anaheim-v7-latin-regular.svg#Anaheim') format('svg'); 
}

@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 800;
src: url('../fonts/assistant-v18-latin-800.eot'); 
src: local(''),
url('../fonts/assistant-v18-latin-800.eot?#iefix') format('embedded-opentype'), 
url('../fonts/assistant-v18-latin-800.woff2') format('woff2'),
url('../fonts/assistant-v18-latin-800.woff') format('woff'), 
url('../fonts/assistant-v18-latin-800.ttf') format('truetype'), 
url('../fonts/assistant-v18-latin-800.svg#Assistant') format('svg'); 
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;} 

html{
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

#lion-left {position:absolute; left:0px; top:180px; z-index:-1;}
#lion-right {position:absolute; right:0px; top:680px; z-index:-1;}

.bg, .portrait { 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

a:link, a:hover {
text-decoration:none;
}

.link::after {
content:"";
width: 11px;
height: 11px;
margin-left: 7px;
margin-right:7px;
background-image: url("../pix/extern.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}

body { font-family:'Anaheim'; font-size:17px; line-height: 24px; color:#555; }

a, a > * {-webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; text-decoration:none; color:#555}
p { padding:8px } /* in der box */

b {color:#000}

.header {padding:0px; width:100%; position:relative; margin:0px auto;}
.logo {font-family: "Assistant"; font-size:18px; color:#111; float:right; padding: 80px; font-weight:800; letter-spacing:1px;}
.logo {display: flex;  }
.mhg-logo { padding:0; width:90px; height:90px; position:fixed; z-index:10; top:0; left:0}

h1,h2,h3,h4, .h1, .h2, .h3, .h4 { font-family:'Assistant', sans-serif; font-size:20px; text-transform: uppercase;}

h2, h3, h4 {
color:#444;		
}

.container { padding:0px; width:1080px; position:relative; margin:75px auto 50px auto;}
.col1-3 { width:300px; height:300px; margin:30px; float:left; } 
 



/*
([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
*/

.footer {
float: left;
background: #fff;
font-size: 15px;
padding:50px;
color:#999;
width:100%;
text-align:center;
}


.umbruch {   
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}


.animated_up {
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 2s all ease;
transition-delay: 1s;
}

.animated_up.active {
transform: translateY(0);
opacity: 1;
}

.animated_left {
position: relative;
transform: translateX(-150px);
opacity: 0;
transition: 2s all ease;
transition-delay: 1s;
}

.animated_left.active {
transform: translateX(0);
opacity: 1;
}





.btn-flip {
opacity: 1;
outline: 0;
color: #fff;
line-height: 40px;
position: relative;
text-align: center;
letter-spacing: 1px;
display: inline-block;
text-decoration: none;
font-family: 'Anaheim', sans-serif;
text-transform: uppercase;
}
.btn-flip:hover:after {
opacity: 1;
-ms-transform: translateY(0) rotateX(0);
-o-transform: translateY(0) rotateX(0);
-webkit-transform: translateY(0) rotateX(0);
transform: translateY(0) rotateX(0);
}
.btn-flip:hover:before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}
.btn-flip:after {
top: 0;
left: 0;
opacity: 0;
width: 100%;
color: #fff;
display: block;
transition: 0.8s;
position: absolute;
background: #908db8;
content: attr(data-back);
-ms-transform: translateY(-50%) rotateX(90deg);
-o-transform: translateY(-50%) rotateX(90deg);
-webkit-transform: translateY(-50%) rotateX(90deg);
transform: translateY(-50%) rotateX(90deg);
}
.btn-flip:before {
top: 0;
left: 0;
opacity: 1;
color: #fff;
display: block;
padding: 0 30px;
line-height: 40px;
transition: 0.5s;
position: relative;
background: #222;
content: attr(data-front);
-ms-transform: translateY(0) rotateX(0);
-o-transform: translateY(0) rotateX(0);
-webkit-transform: translateY(0) rotateX(0);
transform: translateY(0) rotateX(0);
}

.centered {
text-align:center;
}


.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}

.transitions-enabled.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
-webkit-transition-property: none;
-moz-transition-property: none;
-ms-transition-property: none;
-o-transition-property: none;
transition-property: none;
}

* html .clearfix { height:1%; }
.clearfix { display:block; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }

footer { background:#fff; position:relative; color:#aaa; padding:55px; }


@media only screen and (max-width: 1160px) {
.leer, .logo, .bg {display:none;}
.container { padding:0px; width:360px; position:relative; margin:50px auto;}
.col1-3 { width:300px; padding-bottom:30px; height:auto;}
}

@media only screen and (max-width: 646px) {
.mhg-logo {display:none;}
}