html {
    font-family:'Bitter',Helvetica,Arial,sans-serif;
    background:#fff;
    color:#595959;
    font-size:1em
}

body {
    margin:0
}

footer {
    font-size:.9em;
    margin-top:1em;
    text-align:center;
    padding:2em
}

a,a:visited {
    color:#494949;
}

footer a,footer span, footer a:visited {
	 color: #fff;
    margin-right:2em;
    text-decoration:none
}
a.footer-link:hover {
	color:#E38C00;
}
a.footer-link {
	color:#7E1403;
}
header {
    display:inline-block;
    width:100%
}

h2 {
    margin:0;
    padding-top:.5em;
    height:2.5em;
    line-height:1.25em
}
img {
	border:0;
	outline: 0;
}
ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.fontmini {
    font-size:.75em;
    font-weight:400
}

.fontbig {
    font-size:1.45em;
    font-weight:700;
}

.red {
    background-color:#7e1403
}

.palered {
    background-color:#921802
}

.orange {
    background-color:#e38c00;
    color:#000;
}

.palegreen {
    background-color:#90b700
}

.green {
    background-color:#4ea527
}

.petrol {
    background-color:#2f7184
}

.turquoise {
    background-color:#338364
}

.blue {
    background-color:#2c2086
}

.grey {
    background-color:#3e3e3e
}

.palegrey {
    background-color:#ccc
}

.brown {
    background-color:#726518
}

.yellow {
    background-color:#e3d51f;
    color:#000;
}

.box {
    width:33.333%;
    float:left
}

.doublebox,.halfbox {
    text-align:center;
    border-radius:5px;
    margin:1%;
    overflow:hidden;
    visibility:visible;
    height:9em
}

.doublebox {
    width:98%
}

.halfbox {
    width:48%;
    float:left
}
.doublebox > .halfbox {
	margin: 0;
	width: 50%;
}

.doublebox img,.halfbox img {
    height:4.5em;
    width:4.5em;
    vertical-align:middle
}

.doublebox img:first-child,.halfbox img:first-child {
    padding:.25em .25em 0
}


.image-left {
    float:left;
    margin-top:1.5em;
    margin-left:.25em;
	 height: 5em !important;
	 width: 5em !important;
}

.list {
    display:inline-block;
    font-weight:700;
    line-height:1.2em;
    width:100%;
    margin-top: .5em;
}
.list .fontmini {
	margin-top: .2em;
}

.list > div > img {
    margin-left:.75em;
    height:2em;
    width:auto;
    float:left
}
.list .fontmini, .list .fontbig {
	height: auto;
}
.list > div > h2 {
    line-height:inherit
}

.image-left + .list {
    width:68%
}

.tooltip {
    opacity:0;
    position:absolute;
    display:none;
}

.tooltip:after {
    content:'';
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-8px;
    width:0;
    height:0;
    border-bottom:8px solid #fff;
    border-right:8px solid transparent;
    border-left:8px solid transparent
}
.tooltip-source {
	 vertical-align: super;
	 color: #595959;
	 font-size: .8em;
}

.doublebox:hover > .tooltip,.halfbox:hover > .tooltip {
    display:block;
    opacity:1;
    width:24%;
    text-align:left;
    padding:1%;
    box-shadow:0 3px 13px 6px rgba(50,50,50,0.5);
    border-radius:5px;
    background-color:#fff;
    color:#000;
    margin-top: .25em;
    height:auto;
}

.halfbox:last-of-type:hover > .tooltip {
    margin-left:-12.333%
}

.halfbox:last-of-type:hover > .tooltip:after {
    left:80%
}

.halfbox:first-of-type:hover > .tooltip:after {
    left:20%
}

#wielogo {
    float:left;
    max-width:400px;
    width:50%;
	 max-height: 77px;
}

#mzlogo,#mzlogo-png {
    float:right;
    max-width:400px;
    width:50%
}

#intro-text {
    margin-top:1em;
    font-size: 1.1em
}
#description-text {
    margin-top:1em;
    font-size:.9em
}
#intro-text span {
    display:inline-block;
    text-align:center;
    font-weight: bold;
    font-size: 1.1em;
}

#content-frame {
    margin-left:10%;
    margin-right:10%;
    margin-top:2em
}

#realtime-frame {
    color:#fff;
    margin:1em 0;
    display:inline-block;
    width:99%;
    width:calc(100% - .25em);
    padding:.5em
}
#social-frame {
    position:relative;
    width:100%;
    float:left;
    margin-top:.5em
}

#social-frame > div {
    display:block;
    float:left;
    margin-right:1em
}
#social-frame > div:first-of-type {
    margin-right:4em
    }

#social-frame > div > div {
    float:left
}


#sources-list-header {
	position: relative;
	font-weight: 400;
	font-size: .9em;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
#category-links {
	margin-bottom: 2em;
}

#category-links li {
    display: inline-block;
    width: 23.75%;
    margin-bottom: 1em;
    margin-right: 1%;
    vertical-align: top;
}

.arrow-up {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #595959;
    margin-left: .1em;
    position: absolute;
    top: .45em;
}
.arrow-down {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #595959;
    margin-left: .1em;
    position: absolute;
    top: .45em;
}


#sources-list {
	height: 0;
	font-size: .75em;
	visibility: 0;
	opacity: 0;
   transition:all .25s ease-in-out;
	overflow: hidden;
}



@media all and (min-width: 1126px) {
.halfbox:last-of-type:hover > .tooltip,.halfbox:first-of-type:hover > .tooltip {
    width:23%;
}
.image-left {
  	margin-left: .55em;
}
}

@media all and (min-width: 900px) and (max-width:1162px) {
#content-frame {
    margin:3% 1%;
    width:97%
}
}

@media all and (max-width:1024px) {
.doublebox:hover > .tooltip,.halfbox:hover > .tooltip {
    width:29.5%;
}

.halfbox:last-of-type:hover > .tooltip {
    margin-left:-16%
}
#realtime-frame {
	padding: .25em;
}
}

@media all and (max-width:950px) {
#content-frame {
    margin:1%
}

#realtime-frame {
	width: calc(100% - .5em);
}

.box {
    width:50%
}

#social-frame > div {
    margin-right:.5em
}

#mzlogo,#mzlogo-png {
    width:50%
}

.doublebox:hover > .tooltip,.halfbox:hover > .tooltip {
    width:43%;
    margin-left:1%
}

.halfbox:last-of-type:hover > .tooltip {
    margin-left:-22%
}
#category-links li {
    width: 48%;
}
}

@media all and (max-width:640px) {
.box {
    width:100%
}

footer a,footer span {
    display:block;
    margin-bottom:.5em;
    margin-right:0
}

.doublebox:hover > .tooltip,.halfbox:hover > .tooltip {
    width:80%;
    margin-left:2%
}

.halfbox:last-of-type:hover > .tooltip {
    margin-left:-40%
}

#realtime-frame {
    padding:0;
    width: 100%;
}
#intro-text {
	font-size: .9em;
}
}

@media all and (max-width:500px) {
#wielogo {
	margin-top: 1em;
}
#mzlogo,#wielogo,#mzlogo-png {
    width:100%;
    max-width:none
}

.list > div > img {
    margin-left:.1em
}
#category-links li {
    width: 99%;
}
#social-frame > div {
width: 100%;
margin-top: .5em;
}
}
@media all and (max-width:400px) {
.image-left {
	 width: 4em !important;
}
}

.wellknow {
    width: 100%;
    background: #fff;
    float: left;
    position: relative;
    margin-bottom: 20px;
}

.wellknow > .wellknow-list > div {
    min-height: 59px;
    width: 25%;
    min-width: 200px;
    float: right;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto;
}
.wellknow .wellknow-content {
    vertical-align: middle;
    width: 10%;
    position: absolute;
    float: left;
    top: 40%;
    padding: 3px 5px;
    font-weight: bold;
}
.wellknow .wellknow-list {
    width: 100%;
    float: left;

}
.wellknow .stern {
     background-image: url(https://cdn.monsterzeug.info/assets/frontend/img/wellknow/stern.png);
 }
.wellknow .absatzwirtschaft {
    background-image: url(https://cdn.monsterzeug.info/assets/frontend/img/wellknow/absatzwirtschaft.png);
}
.wellknow .deutschestartups {
    background-image: url(https://cdn.monsterzeug.info/assets/frontend/img/wellknow/deutschestartups.png);
}
.wellknow .onlinehaendler {
    background-image: url(https://cdn.monsterzeug.info/assets/frontend/img/wellknow/onlinehaendler.png);
}

@media all and (max-width:1200px) {
    .wellknow > .wellknow-list > div {
        background-position: center;
        width: 25%;
        min-width: 25%;
        height: 40px;
        background-size: 70%;
    }
    .wellknow .wellknow-content {
        position: relative;
        float: left;
        width: 100%;
    }
}

@media all and (max-width:640px) {
    .wellknow > .wellknow-list > div {
        background-position: center;
        width: 25%;
        min-width: 25%;
        height: 40px;
        background-size: 70%;
    }
    .wellknow .wellknow-content {
        width: 100%;
    }
    .wellknow .wellknow-list {
        width: 100%;
    }
}

@media all and (max-width:400px) {
    .wellknow > .wellknow-list > div {
        background-position: center;
        width: 50%;
        min-width: 50%;
        height: 40px;
        background-size: 70%;
    }
    .wellknow .wellknow-content {
        width: 100%;
    }
    .wellknow .wellknow-list {
        width: 100%;
    }
}