#body {
	font-family: "Open Sans";
	font-weight: 400;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


#page { max-width: 1600px; margin: 0 auto; }

.maxwidth { width: 1200px; margin: 0 auto; }
.maxwidthsmall { width: 900px; margin: 0 auto; }

.calc-margin-left { margin-left: calc( (100vw - 1200px) / 2); }
.calc-margin-right { margin-right: calc( (100vw - 1200px) / 2); }

.calc-padding-left { padding-left: calc( (100vw - 1200px) / 2); }
.calc-padding-right { padding-right: calc( (100vw - 1200px) / 2); }

.extra-padding-left { padding-left: 40px; }


#page * { box-sizing: border-box; }
#page .inlineeditors a { box-sizing: content-box; }

.TraminoVorlage { margin-top: 60px; margin-bottom: 100px; }

#contentwrapper { padding-top: 50px; }

.polaroid {
	background-color: #FFF;
	padding: 14px;
	box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
}

.videoiframe {
	display: block;
	width: 100%;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
}

.videoiframe .play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #FFF;
	font-size: 100px;
	line-height: 1;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}

.videoiframe iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.youtube {
    position: relative;
    padding-bottom: 56.25%; /* speziell; 56.25% wäre 16:9 */
    padding-top: 25px;
    height: 0;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Neue Oberstdorf Bausteine */
picture { width: 100%; height: auto; }
picture img { width: 100%; height: auto; }


.radius { border-radius: 1.3rem; }
.radius_light { border-radius: 0.35rem; }

.boxshadow-down { box-shadow: 0 20px 30px -7px rgba(0,0,0,0.3); }


.collapsed { position: relative; padding-bottom: 2rem !important; overflow: hidden; }

.mobile_closing { max-height: 9999px; }
.collapsed .mobile_closing {
	max-height: 300px;
	overflow: hidden;
	transition: max-height 500ms;
}

.collapsed .extra_shadow {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2rem;
	height: 50px;
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
}

.expand { display: none; }
.collapsed .expand {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	padding: 1rem;
}

.collapsed .expand:after {
	display: block;
	content: "";
	width: 50%;
	height: 6px;
	border-radius: 20px;
	margin: 0 auto;
	background-color: rgba(128,128,128,0.5);
}

.collapsed .expand:before {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'traminoicon' !important;
	content: "\e958";
	position: absolute;
	top: 9%;
	left: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin: 0 auto;
	background-color: rgba(255,255,255,1);
	border: 1px solid rgba(128,128,128,0.5);;
	transform: translate(-50%, 0%);
}

@media (min-width: 768px) {

	.collapsed .expand { display: none; }


}






	

.slider.slider-single .slider-item { display: none; }
.slider.slider-single .slider-item:first-child { display: block; }
.slider.slider-single.slick-initialized .slider-item { display: block; }

.slider-nav {
	position: absolute;
	top: 50%;
	width: 78px;
	height: 78px;
	z-index: 10;
	border-radius: 50%;
	transform: translate(0,-50%);
	background-color: #FFF;
	color: #555 !important;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.2)
}

.slider-nav i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 35px;
}

.slider-nav.slick-disabled { display: none !important; }

.slider-nav-next { right: 25px; }
.slider-nav-prev { left: 25px; }

.slider-nav-next i { left: 52%;}
.slider-nav-prev i { left: 48%; } 


.slick-dots {
	position: absolute;
	top: -20px;
	right: 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.slick-dots:after { display: block; content: ""; clear: left; }
.slick-dots li { float: left; margin: 0 5px 0 0; }
.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: #BDBDAE;
}
.slick-dots li.slick-active button {
	background: #464637;
}


@media all and (min-width: 1024px) and (max-width: 1279px) {
	.slider-nav { width: 65px; height: 65px; }
	.slider-nav i { font-size: 30px; }
	.slider-nav-next { right: 20px; }
	.slider-nav-prev { left: 20px; }
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.slider-nav { width: 60px; height: 60px; }
	.slider-nav i { font-size: 28px; }
	.slider-nav-next { right: 18px; }
	.slider-nav-prev { left: 18px; }
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.slider-nav { width: 45px; height: 45px; }
	.slider-nav i { font-size: 25px; }
	.slider-nav-next { right: 16px; }
	.slider-nav-prev { left: 16px; }
}

@media all and (max-width: 567px) {
	.slider-nav { width: 43px; height: 43px; }
	.slider-nav i { font-size: 18px; }
	.slider-nav-next { right: 13px; }
	.slider-nav-prev { left: 13px; }
}

.lazyload {
	opacity: 0;
}
.lazyloading {
	opacity: 1;
	transition: 600ms opacity;
	background-size: cover;
	min-height: 60px;

	
	background-color: #DDD;
	animation-name: laoding;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 1500ms;

}
.lazyloaded {
	opacity: 1;
	transition: 10ms opacity;
}
.ratio-container {
	position: relative;
}
.ratio-container:after {
	content:'';
	display: block;
	height: 0;
	width: 100%;
  }

@keyframes laoding {
	0% { background-color: #DDD; }
	20% { background-color: #CCC; }
	40% { background-color: #BBB; }
	60% { background-color: #AAA; }
	80% { background-color: #BBB; }
	100% { background-color: #CCC; }
}/* Schriften */
.os-light { font-weight: 300; }
.os-semibold { font-weight: 600; }

.suezone { font-family: 'Suez One', serif; }
.caveat { font-family: 'Caveat', cursive; font-weight: 400; }

/* Farben */
.color { color: #00303F; }
.grey { color: #555;  }

/* Schriftgrößen */
.fontsize55 { font-size: 55px; line-height: 1.1; }
.fontsize40 { font-size: 40px; line-height: 1.1; }
.fontsize35 { font-size: 32px; line-height: 1.1; }
.fontsize30 { font-size: 30px; line-height: 1.1; }
.fontsize25 { font-size: 24px; line-height: 1.2; }
.fontsize20 { font-size: 20px; line-height: 1.1; }

/* Headline abstände */
.fontsize55.margin-bottom { margin-bottom: 30px; }
.fontsize40.margin-bottom { margin-bottom: 25px; }
.fontsize35.margin-bottom { margin-bottom: 20px; }
.fontsize30.margin-bottom { margin-bottom: 19px; }
.fontsize25.margin-bottom { margin-bottom: 10px; }
.fontsize20.margin-bottom { margin-bottom: 10px; }

/* Styles */
.textstyle { font-size: 18px; line-height: 1.4; }
.textstyle16 { font-size: 16px; line-height: 1.4; }

.textile p { margin-top: 0; }
.textile a { color: #00303F; }


.btn-light {
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #00303F;
	color: #00303F;
	border-radius: 2px;
	padding: 5px 35px;
}

/* Listen */
ul.list-nostyling {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.list-nostyling > li { margin: 0; padding: 0; }

ul.list-floated:after { display: block; content: ""; clear: left; }
ul.list-floated > li { float: left; }

/* Sonstiges */
.tdn { text-decoration: none; }
.ttu { text-transform: uppercase;  }


/* Breiten */

.width-56 { width: 56%; }
.width-44 { width: 44%; }

.width-56.float, .width-44.float { float: left; }





@media all and (min-width: 1024px) and (max-width: 1279px) {
	.fontsize55 { font-size: 51px; }
	.fontsize40 { font-size: 37px; }
	.fontsize35 { font-size: 30px; }
	.fontsize30 { font-size: 26px; }
	.fontsize25 { font-size: 21px; }
	.fontsize20 { font-size: 17px; }

	.fontsize55.margin-bottom { margin-bottom: 25px; }
	.fontsize40.margin-bottom { margin-bottom: 20px; }
	.fontsize35.margin-bottom { margin-bottom: 15px; }
	.fontsize30.margin-bottom { margin-bottom: 14px; }
	.fontsize25.margin-bottom { margin-bottom: 10px; }
	.fontsize20.margin-bottom { margin-bottom: 10px; }

	.textstyle { font-size: 17px;}
	.textstyle16 { font-size: 15px; }

	
}

@media all and (min-width: 768px) and (max-width:1023px) {
	
	.fontsize55 { font-size: 46px; }
	.fontsize40 { font-size: 33px; }
	.fontsize35 { font-size: 26px; }
	.fontsize30 { font-size: 21px; }
	.fontsize25 { font-size: 15px; }
	.fontsize20 { font-size: 14px; }

	.fontsize55.margin-bottom { margin-bottom: 22px; }
	.fontsize40.margin-bottom { margin-bottom: 17px; }
	.fontsize35.margin-bottom { margin-bottom: 14px; }
	.fontsize30.margin-bottom { margin-bottom: 12px; }
	.fontsize25.margin-bottom { margin-bottom: 10px; }
	.fontsize20.margin-bottom { margin-bottom: 8px; }

	.textstyle { font-size: 16px; }
	.textstyle16 { font-size: 14px; }

	.btn-light { font-size: 13px; padding: 4px 30px; }
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.fontsize55 { font-size: 38px; }
	.fontsize40 { font-size: 22px; }
	.fontsize35 { font-size: 20px; }
	.fontsize30 { font-size: 19px; }
	.fontsize25 { font-size: 18px; }
	.fontsize20 { font-size: 15px; }

	.fontsize55.margin-bottom { margin-bottom: 19px; }
	.fontsize40.margin-bottom { margin-bottom: 14px; }
	.fontsize35.margin-bottom { margin-bottom: 12px; }
	.fontsize30.margin-bottom { margin-bottom: 10px; }
	.fontsize25.margin-bottom { margin-bottom: 9px; }
	.fontsize20.margin-bottom { margin-bottom: 6px; }

	.textstyle { font-size: 15px; }
	.textstyle16 { font-size: 13px; }

	.btn-light { font-size: 12px; padding: 3px 25px; }
}

@media all and (max-width: 567px) {
	.fontsize55 { font-size: 28px; }
	.fontsize40 { font-size: 18px; }
	.fontsize35 { font-size: 17px; }
	.fontsize30 { font-size: 16px; }
	.fontsize25 { font-size: 15px; }
	.fontsize20 { font-size: 13px; }

	.fontsize55.margin-bottom { margin-bottom: 17px; }
	.fontsize40.margin-bottom { margin-bottom: 13px; }
	.fontsize35.margin-bottom { margin-bottom: 11px; }
	.fontsize30.margin-bottom { margin-bottom: 9px; }
	.fontsize25.margin-bottom { margin-bottom: 8px; }
	.fontsize20.margin-bottom { margin-bottom: 5px; }

	.textstyle { font-size: 14px; }
	.textstyle16 { font-size: 13px; }

	.btn-light { font-size: 12px; padding: 3px 25px; }
}

.symbol { margin: 45px auto; background-position: top left; background-repeat: no-repeat; }
.symbol.bigmargin { margin: 90px auto; }

/* 0,708333333 */
.symbol.leafs {
	width: 120px;
	height: 85px;
	background-image: url(https://tramino.s3.amazonaws.com/s/heimweh-blog/840889/leaf.png);
}

/* 1,17721519 */
.symbol.heart {
	width: 79px;
	height: 93px;
	background-image: url(https://tramino.s3.amazonaws.com/s/heimweh-blog/840939/heart.png);
}


@media all and (min-width: 1024px) and (max-width: 1279px) {
	.symbol { margin: 40px auto; }
	.symbol.bigmargin { margin: 80px auto; }

	.symbol.leafs {
		width: 100px;
		height: 70.8333px;
		background-size: 100px auto;
	}

	.symbol.heart {
		width: 70px;
		height: 82.4050633px;
		background-size: 70px auto;
	}
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.symbol { margin:35px auto; }
	.symbol.bigmargin { margin: 70px auto; }

	.symbol.leafs {
		width: 85px;
		height: 60.208333305px;
		background-size: 85px auto;
	}

	.symbol.heart {
		width: 60px;
		height: 70.6329114px;
		background-size: 60px auto;
	}
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.symbol { margin:30px auto; }
	.symbol.bigmargin { margin: 60px auto; }

	.symbol.leafs {
		width: 75px;
		height: 53.124999975px;
		background-size: 75px auto;
	}

	.symbol.heart {
		width: 50px;
		height: 58.8607595px;
		background-size: 50px auto;
	}
}

@media all and (max-width: 567px) {
	.symbol { margin: 20px auto; }
	.symbol.bigmargin { margin: 40px auto; }

	.symbol.leafs {
		width: 50px;
		height: 35.41666665px;
		background-size: 50px auto;
	}

	.symbol.heart {
		width: 35px;
		height: 41.20253165px;
		background-size: 35px auto;
	}
}

.module-headline {
	font-weight: 300;
	text-transform: uppercase;
	font-size: 40px;
	margin: 0 0 20px 0;
}


.module:after { display: block; content: ""; clear: both; }
.module .headline { float: left; }

.module .rightside { float: right; padding-top: 18px; }
.module .rightside:after { display: block; content: ""; clear: left; }
.module .hashtag { float: left; font-size: 20px; color: #888888;  margin: 0 50px 0 0; }

.module .username { position: relative; float: left; font-size: 20px; color: #000;  padding-left: 40px;}
.module .username i { position: absolute; top: 0px; left: 0px; font-size: 30px; line-height: 1; }
.module .username i.youtube { top: -2px; font-size: 33px; }



@media all and (min-width: 1024px) and (max-width: 1279px) {
	.module-headline { font-size: 38px; margin: 0 0 45px 0; }

	.module .rightside { padding-top: 18px; }
	.module .hashtag { font-size: 18px; margin: 0 40px 0 0; }
	.module .username { font-size: 18px; padding-left: 32px; }
	.module .username i { font-size: 25px; }
}

@media all and (min-width: 768px) and (max-width:1023px) {
	.module-headline { font-size: 35px; margin: 0 0 40px 0; }

	.module .rightside { padding-top: 18px; }
	.module .hashtag { font-size: 16px;  margin: 0 30px 0 0; }
	.module .username { font-size: 16px; padding-left: 28px;  }
	.module .username i { font-size: 22px; }
}

@media all and (min-width: 568px) and (max-width: 767px) {
	.module-headline { font-size: 30px; margin: 0 0 30px 0; }

	.module .rightside { padding-top: 7px; }
	.module .hashtag { font-size: 14px;  margin: 0 20px 0 0; }
	.module .username { font-size: 14px; padding-left: 32px;  }
	.module .username i { font-size: 22px; }

}

@media all and (max-width: 567px) {
	.module-headline { font-size: 20px; margin: 0 0 15px 0; }

	.module .headline { float: none; }
	.module .rightside { float: none; padding: 0 0 10px 0; }
	.module .hashtag { font-size: 14px;  margin: 0 10px 0 0; }
	.module .username { font-size: 14px; padding-left: 28px;  }
	.module .username i { font-size: 22px; }
}

.metaheader {
	margin: 0 0 20px 0;
	font-size: 14px;
}

.metaheader a {
	color: #000;
}

.metaheader:after { display: block; content: ""; clear: both; }
.metaheader .elm {
	float: left;
	margin: 0 10px 0 0;
}

.metaheader .rightside {
	float: right;
	color: rgba(0,0,0,0.6);
}

.metaheader .rightside .datum {
	margin-right: 60px;
}

.metaheader .rightside .autor {
	position: relative;
	padding-right: 80px;
	text-align: right;
	margin: 0;
}

.metaheader .rightside .autor .autor_name {
}

.metaheader .rightside .autor .autor_bild {
	position: absolute;
	top: -45px;
	right: -20px;
	overflow: hidden;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid #fff;
}

.metaheader .rightside .autor .autor_bild img {
	width: 100%;
	height: auto;
}

@media all and (min-width: 1024px) and (max-width: 1279px) {
	.metaheader { margin: 0 0 18px 0; font-size: 13px; }
	.metaheader .elm { margin: 0 8px 0 0; }
	.metaheader .rightside .datum { margin-right: 50px; }
	.metaheader .rightside .autor { padding-right: 70px; }
	.metaheader .rightside .autor .autor_bild { top: -35px; width: 55px; height: 55px; }
}


@media all and (min-width: 768px) and (max-width:1023px) {
	.metaheader { margin: 0 0 15px 0; font-size: 12px; }
	.metaheader .elm { margin: 0 7px 0 0; }
	.metaheader .rightside .datum { margin-right: 35px; }
	.metaheader .rightside .autor { padding-right: 60px; }
	.metaheader .rightside .autor .autor_bild { top: -20px; width: 50px; height: 50px; }

}

@media all and (min-width: 568px) and (max-width: 767px) {

	.metaheader { margin: 0 0 10px 0; font-size: 11px; }
	.metaheader .elm { margin: 0 5px 0 0; }
	.metaheader .rightside .datum { margin-right: 30px; }
	.metaheader .rightside .autor { padding-right: 60px; }
	.metaheader .rightside .autor .autor_bild { top: -20px; width: 50px; height: 50px; }
	
}

@media all and (max-width: 567px) {
	.metaheader { margin: 0 0 18px 0; font-size: 11px; }
	.metaheader .elm { margin: 0 0 0 0; }
	.metaheader .rubrik { width: 30%; }
	.metaheader .rightside {  width: 70%;  }
	.metaheader .rightside .datum { margin-right: 25px; position: absolute; top: 25px; left: 15px; text-align: right;  }
	.metaheader .rightside .autor { padding-right: 70px;  position: absolute; top: 10px; right: 0; }
	.metaheader .rightside .autor .autor_bild { top: -30px; right: 10px; width: 50px; height: 50px; }
}


@media all and (min-width: 1600px) {

	.maxwidth-clear { width: 100%; }

	.calc-margin-left { margin-left: calc( (100% - 1200px) / 2); }
	.calc-margin-right { margin-right: calc( (100% - 1200px) / 2); }

	.calc-padding-left { padding-left: calc( (100% - 1200px) / 2); }
	.calc-padding-right { padding-right: calc( (100% - 1200px) / 2); }

	.calc-margin-left-clear { margin-left: 0;}
	.calc-margin-right-clear { margin-right: 0;}

	.calc-padding-left-clear { padding-left: 0;}
	.calc-padding-right-clear { padding-right: 0;}

}
@media all and (min-width: 1024px) and (max-width: 1279px) {
	.maxwidth { width: 980px; }

	.calc-margin-left { margin-left: calc( (100vw - 980px) / 2); }
	.calc-margin-right { margin-right: calc( (100vw - 980px) / 2); }

	.calc-padding-left { padding-left: calc( (100vw - 980px) / 2); }
	.calc-padding-right { padding-right: calc( (100vw - 980px) / 2); }

	.extra-padding-left { padding-left: 36px; }

	#contentwrapper { padding-top: 40px; }
	.TraminoVorlage { margin-top: 50px; margin-bottom: 80px; }

	.polaroid {	padding: 8px; }

	.videoiframe .play { font-size: 90px; }
}

@media all and (min-width: 768px) and (max-width:1023px) {
	body { -webkit-text-size-adjust: 100%; }
	.maxwidth { width: auto; margin: 0 20px; }
	.maxwidthsmall { width: auto; margin: 0 30px; }

	.calc-margin-left { margin-left: 20px; }
	.calc-margin-right { margin-right: 20px; }

	.calc-padding-left { padding-left: 20px; }
	.calc-padding-right { padding-right: 20px; }

	.extra-padding-left { padding-left: 30px; }

	#contentwrapper { padding-top: 30px; }
	.TraminoVorlage { margin-top: 40px; margin-bottom: 60px; }

	.polaroid {	padding: 6px; }

	.videoiframe .play { font-size: 80px; }

}

@media all and (min-width: 568px) and (max-width: 767px) {
	body { -webkit-text-size-adjust: 100%; }
	
	.maxwidth { width: auto; margin: 0 15px; }
	.maxwidthsmall { width: auto; margin: 0 20px; }

	.calc-margin-left { margin-left: 15px; }
	.calc-margin-right { margin-right: 15px; }

	.calc-padding-left { padding-left: 15px; }
	.calc-padding-right { padding-right: 15px; }

	.extra-padding-left { padding-left: 20px; }

	.width-56.clear-tablet, .width-44.clear-tablet { width: 100%; }
	.width-56.float.clear-tablet, .width-44.float.clear-tablet { float: none; }


	#contentwrapper { padding-top: 20px; }
	.TraminoVorlage { margin-top: 30px; margin-bottom: 40px; }

	.polaroid {	padding: 4px; }

	.videoiframe .play { font-size: 70px; }

}

@media all and (max-width: 567px) {
	body { -webkit-text-size-adjust: 100%; }
	.maxwidth { width: auto; margin: 0 15px; }
	.maxwidthsmall { width: auto; margin: 0 15px; }

	.calc-margin-left { margin-left: 15px; }
	.calc-margin-right { margin-right: 15px; }

	.calc-padding-left { padding-left: 15px; }
	.calc-padding-right { padding-right: 15px; }

	.extra-padding-left { padding-left: 15px; }

	.width-56.clear-tablet, .width-44.clear-tablet { width: 100%; }
	.width-56.float.clear-tablet, .width-44.float.clear-tablet { float: none; }

	#contentwrapper { padding-top: 15px; }
	.TraminoVorlage { margin-top: 20px; margin-bottom: 30px; }

	.polaroid {	padding: 3px; }

	.videoiframe .play { font-size: 60px; }

}