/* basic site definitions */
/* ====================== */
html {
    -webkit-text-size-adjust: 100%; /* prevent text auto-scaling in landscape orientation on ios */
}

html.prevent_scrolling {
	overflow:hidden;
}

body {
	font-family:'Open Sans', sans-serif;
	background-color:#ffffff;
	color:#222222;
	font-size:10px; /* set em-size for whole page. 1em = 10px */
}

/* getting rid of dotted focus outline */
:focus {outline:none !important;}
::-moz-focus-inner {border:0 !important;}

a {
	text-decoration:none;
	color:#00c1f6;
	cursor:pointer;
}

a:hover {
	color:#00b4e5;
}

strong, b {
	font-weight:bold;
}

em, i {
	font-style: italic;
}

::selection {
	background:#fdcfea;
	color:#222222;
	text-shadow:none !important;
}

::-moz-selection {
	background:#fdcfea;
	color:#222222;
	text-shadow:none !important;
}

/* wrappers */
/* ======== */
.wrapper {
	width:1026px;
	margin:0 auto;
	position:relative;
}

.fat_wrapper {
	border-top:16px solid #ffffff;
}
.fat_wrapper:after {
    content: '';
    display: block;
    clear: both;
}

/* logo for printouts */
/* ================== */
.logo_print {
	display:none;
}


/* form elements */
/* ============= */
a.button,
.wrapper input,
.wrapper textarea,
.naviblock input,
.naviblock textarea {
	font-family:'Open Sans', sans-serif;
	font-size:1em;
	border:1px solid #666;
	padding:0.2em 0.4em;
	margin: 0 0.2em 0.2em 0;
	resize:none;
}

input[type=text],
input[type=password],
input[type=number],
input[type=submit],
textarea {
	-khtml-appearance: none;
	-webkit-appearance: none;
	-moz-appearance:none;
	appearance: none;
}

input.darkback, a.button.darkback, select.darkback {
	background-color:#888888;
	background-color:rgba(0,0,0,0.5);
}

input.lightback, a.button.lightback, select.lightback {
	background-color:#aaaaaa;
	background-color:rgba(255,255,255,0.5);
}

input.darkfont, a.button.darkfont, select.darkfont {
	color:#222222;
}

input.lightfont, a.button.lightfont, select.lightfont {
	color:#ffffff;
}

input.error {
	background-color:#f40f97;
}

input.button,
a.button,
.standard-button {
  display:inline-block;
  padding: 0em 0.75em;
  margin: 0;
  border: none;
  border-radius: 2px;
  background: #7bd400;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-size: 1em;
  line-height: 2.2857em;
  transition: all 0.2s;
  text-transform: none;
  font-weight: normal;
  box-shadow: none;
  height: auto;
  width: auto;
  box-sizing: border-box;
}

input.button:hover,
a.button:hover,
.standard-button:hover {
  opacity: 0.9;
  color: #ffffff;
}

input.button:disabled,
a.button:disabled,
.standard-button:disabled {
  background: #cccccc;
}
.naviblock select {
	font-family:'Open Sans', sans-serif;
	font-size:1em;
	border:1px solid #666;
	margin: 0 0.2em 0.2em 0;
	-webkit-appearance: none;
	appearance:none;
}

.wrapper select {
	-webkit-appearance: normal;
	appearance:normal;
	font-family:'Open Sans', sans-serif;
	font-size:1em;
}

.wrapper select option,
.naviblock select option {
	border-bottom:2px solid #eeeeee;
	background-color:#ffffff;
	color:#222222;
}


/* general handyness */
/* ================= */
.stretch_to_fit {
	width:100%;
	height:100%;
}

/* custom hide and display */
/* ======================= */
.hide_on_desktop { display:none !important; }
.show_on_desktop { display:block !important; }
.show_on_desktop_ib { display:inline-block !important; }
.show_overflow { overflow:visible !important; }

/* custom hyphenation */
/* ================== */
.dont_hyphenate {
	-moz-hyphens: manual !important;
	-webkit-hyphens: manual !important;
	-ms-hyphens: manual !important;
	-o-hyphens: manual !important;
}

/* general icons */
/* ============ */
.slider {
	display: block;
	width: 25px;
	height: 16px;
	background-image: url('/media/img/main/icons/slider-down.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

.slider.down {
	background-image: url('/media/img/main/icons/slider-down.png');
}

.slider.up {
	background-image: url('/media/img/main/icons/slider-up.png');
}

.slider.right {
	width:16px;
	height:25px;
	background-image: url('/media/img/main/icons/slider-right.png');
}

.slider.left {
	width:16px;
	height:25px;
	background-image: url('/media/img/main/icons/slider-left.png');
}

/* member icons */
/* ============ */
.member_icon {
	position:relative;
	margin:0;
	display:inline-block;
	float:left;
}

.member_icon .badge {
	width:100%;
	height:0;
	padding-bottom:61%; /* 100% / 200px * 122px */
	position:absolute;
	left:0;
	top:0;
	z-index:3;
	background-size:contain;
	margin-top:Calc(100% + 4px);
}

.member_icon .badge img {
	position:absolute;
}

.member_icon img.portrait {
	-webkit-border-radius:50%;
	border-radius:50%;
	width:100%;
	text-indent: -9999px;
	overflow: hidden;
	color: #999999;
	font-size: 0.5em;
}

.member_icon.member_highlight_1 img.portrait { border-color: #edba13 !important; }
.member_icon.member_highlight_1 img.portrait { border-color: #edba13 !important; }
.member_icon.member_highlight_2 img.portrait { border-color: #0fb4f4 !important; }
.member_icon.member_highlight_3 img.portrait { border-color: #7bd400 !important; }
.member_icon.member_highlight_4 img.portrait { border-color: #ae2cf2 !important; }
.member_icon.member_highlight_5 img.portrait { border-color: #f22c2c !important; }
.member_icon.member_highlight_6 img.portrait { border-color: #2c4df2 !important; }


/* commercial */
/* ========== */
.commercial {
	width:100%;
	text-align:center;
}

.commercial .dfp_ad > div {
    margin: 0 auto;
}

.commercial .teaser_type_paid_content {
	text-align: left;
}

/* side-ad commercial */
/* ================== */
.seiten_ad.commercial {
	position:fixed;
    margin-left:1026px;
    width:auto;
	display:none;
	background-color: transparent;
    text-align: left;
	z-index:12;
}

.sidebar_ad {
    height: calc(100vh - 12em);
    width: calc((100vw - 1026px) / 2 + 150px);
}

.sidebar_ad:not(.commercial_anzeige) > div {
    width: 100% !important;
    height: 100% !important;
}

.sidebar_ad:not(.commercial_anzeige) > div > iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.fat_wrapper .seiten_ad.commercial {
	transition: margin-top 0.5s;
}

.wrapper.has_fixed_sticky:not(.has_spondored_header):not(.no_wide_breakers) .fat_wrapper .seiten_ad.commercial {
	margin-top:8.7em;
}

.seiten_ad.commercial.talkback_ad {
	position:absolute;
    height:900px;
    display: none;
    border-top:12px solid #ffffff;
    margin-top:-24px;
}

/* left-ad commercial */
/* ================== */
.left_ad.commercial {
	position: absolute;
	width: 160px;
	transform: translateX(-100%);
	text-align: right;
	margin-left: 16px;
	margin-top: 33px;
}

/* sticky commercial  */
/* ================== */
.sticky-wp {
  position: fixed;
  top: auto;
  z-index:12;
}

/* front commercial in regions */
/* =========================== */
.region.commercial {
    border-bottom:0 !important;
}

.wrapper .cluster:nth-child(2) .region.commercial .commercial_delivered {
	border-top-width:0;
}

.region.commercial .commercial_delivered .commercial_delivered {
	border-bottom:0 !important;
}

.region.commercial .commercial_delivered:not(.minHeight):not(:empty) {
    margin-bottom:16px;
    margin-top:0;
    padding-bottom:16px;
}

.wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered:not(:empty) {
    margin-top:16px;
    padding-top:16px;
}

.region.commercial .commercial_delivered.commercial_anzeige {
    border-bottom:1px solid #cccccc;
}
.wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered.commercial_anzeige {
    border-top:1px solid #cccccc;
}

.wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered:not(:empty)::before {
    color: #999999;
    content: "Werbung";
    display: block;
    font-size: 12px;
    line-height:16px;
    position: absolute;
    top:16px;
}
html[lang="fr"] .wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered:not(:empty)::before{
    content: "Publicité";
}
.wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered:not(.commercial_anzeige)::before {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered.commercial_anzeige::before {
    content: "Anzeige";
}

.sven_watzak_desktop {}

.cluster.poster-ad .region.commercial {
    background-color: transparent;
    border: 0;
}

.wrapper .cluster.poster-ad .region.commercial .commercial_delivered:not(:empty) {
    padding: 0;
    margin: 0;
}

.wrapper .cluster.poster-ad .region.commercial .commercial_delivered:not(.commercial_anzeige)::before {
    display: none;
}

.cluster.poster-ad .region.commercial .commercial_delivered > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* desktop only */
@media screen and (min-width: 976px) {
	/* fishtank */
	.cluster.fishtank {
		border-left:none;
		background-color:transparent;
		width:100%;
	}

	.cluster.fishtank .region.commercial {
		border-width:0 !important;
	}

	.cluster.fishtank .region.commercial .commercial_delivered::before {
	    display: none !important;
	}

	.cluster.fishtank .region.commercial .commercial_delivered {
	    background-color: transparent !important;
	    border-bottom: 16px solid white !important;
	    border-top: medium none !important;
	    margin-bottom: 0 !important;
	}

    .wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered:not(:empty) {
        margin-top: 32px;
    }
    .wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered:not(.commercial_anzeige)::before {
        top: 24px;
    }
}

@media screen and (max-width: 975px) {
    .region.commercial {
        border-top-width: 2px;
    }

    .region.commercial .commercial_delivered.commercial_anzeige {
        padding: 0;
        border: 0;
    }

    .wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered.commercial_anzeige {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .wrapper .cluster:not(:nth-child(2)) .region.commercial .commercial_delivered.commercial_anzeige::before {
        display: none;
    }
}

@media screen and (max-width: 591px) {
	.region.commercial {
		border-right:0 !important;
		left:-10px;
		width:calc(100% + 10px) !important;
		float:left !important;
        border-top-width: 6px;
	}

    .wrapper .cluster:nth-child(2) .region.commercial .commercial_delivered {
        border-top-width:0;
        border-bottom-width:0;
        padding-bottom: 0;
    }

    .watson-ad.minHeight .commercial_delivered {
        top: 5.85em;
    }

  input.button,
  a.button {
    width: 100%;
  }
  input.button,
  a.button,
  .standard-button {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }
}

/* story commercial in inserts */
/* =========================== */
.watson-ad.minHeight {
    background-color: #EEEEEE;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.story .watson-ad.minHeight {
    margin-top: 1rem;
}

.region .watson-ad.minHeight {
    margin-bottom: 1rem;
}

.watson-ad.minHeight:before {
    content: "Werbung";
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #999999;
}

.watson-ad.minHeight .commercial_delivered {
    z-index: 20;
    display: flex;
    position: sticky;
    top: 8.7em;
}

.insert .commercial_delivered:not(:empty)::before {
	content: "Werbung";
	color:#999999;
	font-size:12px;
	line-height:16px;
	display:block;
	padding-top:6px;
	padding-bottom:6px;
	position:relative;
	padding-left: calc(50% - 437px);
}

.commercial_delivered > div:first-child {
    line-height: 0;
}

html[lang="fr"] .insert .commercial_delivered:not(:empty)::before,
html[lang="fr"] .watson-ad.minHeight:before {
    content: "Publicité";
}
.insert .commercial_delivered.commercial_anzeige:not(:empty)::before {
    content: "Anzeige";
}

.insert.side .commercial_delivered::before {
	width: 300px;
	margin: 0 auto;
	padding-left: 0;
}
.insert.side .commercial_delivered:not(.commercial_anzeige)::before {
    text-align: center;
}

.insert.side .stack_element.businessclick .commercial_delivered::before {
    display: none !important;
}

.insert .commercial_delivered:not(.minHeight):not(:empty) {
    padding:16px 0;
    margin-top:32px;
    margin-bottom: 16px;
}

.insert .commercial_box .commercial_delivered:not(.minHeight):not(:empty) {
    margin-top: 0;
}

.insert .commercial_delivered.commercial_anzeige {
    margin-bottom:3em;
}

.ticker .insert .commercial_delivered {
  padding:0;
  margin-bottom:auto !important;
}

/* WP 0 */
.story .insert.jumbo:nth-child(2) .commercial_delivered::before,
.story .insert.inread .commercial_delivered::before,
.wrapper .cluster:not(:nth-child(2)) .region.commercial.inread .commercial_delivered::before {
	display:none;
}
.story .insert.inread {

}

.story .insert.jumbo:nth-child(2) .commercial_delivered:not(.minHeight) {
	margin-top:0;
	border-top:none;
}

.insert.jumbo .commercial_delivered.commercial_anzeige,
.widget.quiz .commercial_box .commercial_delivered.commercial_anzeige {
    border-bottom:1px solid #cccccc;
    border-top:1px solid #cccccc;
}

.insert.jumbo .commercial_delivered::before,
.widget.quiz .commercial_box .commercial_delivered::before {
    padding:0;
    position:absolute;
    top:-16px;
}

.insert.jumbo .commercial_delivered:not(.commercial_anzeige)::before,
.widget.quiz .commercial_box .commercial_delivered:not(.commercial_anzeige)::before {
    top:-8px;
    left: 50%;
    transform: translateX(-50%);
}

/* desktop only */
@media screen and (min-width: 976px) {

}

@media screen and (max-width: 975px) {
    .insert.jumbo .commercial_delivered.commercial_anzeige,
    .widget.quiz .commercial_box .commercial_delivered.commercial_anzeige {
        border: 0;
        margin-top: 0;
        padding: 0 0 1px 0;
    }
    .insert.jumbo .commercial_delivered.commercial_anzeige[data-ad="quer-wp0"],
    .widget.quiz .commercial_box .commercial_delivered.commercial_anzeige {
        margin-top: 16px;
    }

	.insert .commercial_delivered.commercial_anzeige::before {
		margin-left:4.347%;
	}
    .insert.jumbo .commercial_delivered.commercial_anzeige::before,
    .widget.quiz .commercial_box .commercial_delivered.commercial_anzeige::before {
        padding-top: 6px;
        padding-bottom: 6px;
        position:relative;
        top:unset;
    }

	/* WP 0 */
	.story .insert.jumbo:nth-child(2) .commercial_delivered:not(.minHeight) {
		margin-top:14px;
	}
}

@media screen and (max-width: 591px) {
	/* WP 0 */
	.story .insert.jumbo:nth-child(2) .commercial_delivered:not(.minHeight) {
		margin-top:3em;
        padding: 0;
        border-bottom: 0;

	}

    .sven_watzak_mobile {}
}

/* alert message */
/* ============= */
.messageBox {
	z-index: 12345;
	display: none;
	position: fixed;
	top:100px;
	left: 30%;
	width: 40%;
	margin-left:-10px;
	padding: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background-color: #00c1f6;
	color: #ffffff;
	font-size: 1.8em;
	line-height: 1.3em;
	text-align:center;
	-moz-box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.2);
}

.messageBox.success {
	background-color: #7bd400;
}

.messageBox.fail {
	background-color: #f40f97;
}







/* fileuploader Dashboard */
/* ====================== */
.fileinput input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
}


/* sto => subscription and superscription */
/* ====================== */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

/* no space for displaying side_ad */
/* =============================== */
@media screen and (max-width: 1330px) {
	.wrapper .commercial.seiten_ad:not(.talkback_ad) {
		display:none;
	}

	.seiten_ad.commercial.talkback_ad {
	    margin-left:679px;
    }
}

/* provide space for side_ad       */
/* =============================== */
@media screen and (min-width: 1331px) {
    .wrapper {
        padding-right:300px;
    }
}

/* ipad landscape */
/* ============== */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	.wrapper {
		width:1024px;
	}

}

/* tablet */
/* ====== */
@media screen and (max-width: 975px) {
	body {
		font-size:9px;
	}

	.wrapper {
		width:100%;
		margin-bottom:8em;
	}

	.fat_wrapper {
		border-top-width:14px;
	}

	.messageBox {
		top:4em;
		left: 20%;
		width: 60%;
	}

    .wrapper .commercial.seiten_ad {
        display:none !important;
    }

	/* custom hide and display */
	.hide_on_tablet { display:none !important; }
	.show_on_tablet { display:block !important; }
	.show_on_tablet_ib { display:inline-block !important; }
}


/* mobile */
/* ====== */
@media screen and (max-width: 591px) {
	body {
		font-size:7px;
	}

	.fat_wrapper {
		border-top-width:10px;
	}

	.messageBox {
		top:3em;
		left: 8%;
		width: 84%;
		font-size:2.2857em !important;
	}

	/* custom hide and display */
	.hide_on_mobile { display:none !important; }
	.show_on_mobile { display:block !important; }
	.show_on_mobile_ib { display:inline-block !important; }
}


/* minwidth */
/* ======== */
@media screen and (max-width: 320px) {
	.wrapper {
		width:320px;
	}
}