@property --primarycolor {
  syntax: "<color>";
  inherits: false;
  initial-value: #006147;
}


html {
	font-size: 15px;
}


@media all and (min-width: 700px) {
	html {
		font-size: 20px;
	}	
}

#body {
	background-color: #EEEEEE;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	color: #1F1F1F;
}

#body.fixed { overflow: hidden; }



/* Breite */
.maxwidth {
	width: 1200px;
	margin: 0 auto;
}

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



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

.TraminoVorlage { margin-top: 80px; margin-bottom: 80px; }

.TraminoVorlage.border {
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 80px;
}

/* Font */
.font-light { font-weight: 300; }
.font-satisfy { font-family: 'Satisfy', cursive; font-weight: 400; }

.color { color: var(--primarycolor) }
.bgcolor { background-color: var(--primarycolor) }


/* Headlines */
.teaser-headline {
	font-size: 40px;
	line-height: 1;
	margin: 0 0 35px 0;
	font-weight: 400;
}

.withintro .teaser-headline {
	margin: 0 0 20px 0;
}


.teaser-headlinesmall {
	font-size: 35px;
	line-height: 1;
	margin: 0 0 32px 0;
	font-weight: 400;
}

.teaser-subheadline {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 400;
	margin: 0 0 25px 0;
}

.teaser-smallsubheadline {
	font-size: 15px;
	color: #333;
	margin: 0 0 5px 0;
	text-transform: uppercase;
	font-weight: normal;
}


.teaser-intro {
	margin-bottom: 30px;
}
.teaser-intro p {
	margin-top: 0;
}

/* Text */
.textstyle {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 300; 
}

.textstyle16 {
	font-size: 16px;
	line-height: 1.25;
	font-weight: 300; 
}

/* Buttons */
.btn {
	display: inline-block;
	font-size: 16px;
	color: #888;
	border: 2px solid #888;
	border-radius: 3px;
	text-decoration: none;
	padding: 10px 20px;
	cursor: pointer;
}

.btn:hover {
	background-color: #888;
	color: #FFF;
}

.btn.btn-blue {
	color: #006CD8;
	border-color: #006CD8;
}

.btn.btn-blue:hover {
	background-color: #006CD8;
	color: #FFF;
}

.btn.btn-red {
	color: #D6161E;
	border-color: #D6161E;
}

.btn.btn-red:hover {
	background-color: #D6161E;
	color: #FFF;
}
.btn.btn-transparent {
	background-color: transparent;
}

.btn i { font-size: 18px; }

/* 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; }

/* Table */
.textstyle table {
	border-spacing: 0px; border-width: 0px;
	margin: 0 0 20px 0;
}
.textstyle table td, .textstyle table th {
	border-bottom: 1px solid #CCC;
	padding: 6px 10px;
	vertical-align: top;
	text-align: left;
}


ul li .space {
	display: inline-block;
	width: 25px;
}

ul li a {
	color: #1F1F1F;
}


.placeholder-flex { position: relative; }
.placeholder-flex:before {
	display: block;
	content: "";
	width: 100%;
	padding-top: 50%;
}

.placeholder-flex > .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


.iconspace { margin: 0 20px 0 0 !important; }

/* Lazyloading */
.lazy {
	background-color: #CCC;
	background-image: url(https://tramino.s3.amazonaws.com/s/team-alpen/809533/25.gif);
	background-position: center center;
	background-size: 40px 40px;
	background-repeat: no-repeat;
}

/* Flaggen Darstellung */
#body .flag {
	display: inline-block;
	width: 16px;
	height: 10px;
	background-repeat: no-repeat;
	background-position: center;
	margin: 5px 5px 0 0;
}

#body .flag.de { background-image: url(https://tramino.s3.amazonaws.com/s/team-alpen/809461/icons8-germany.svg); }
#body .flag.at { background-image: url(https://tramino.s3.amazonaws.com/s/team-alpen/809460/icons8-austria.svg); }
#body .flag.ch { background-image: url(https://tramino.s3.amazonaws.com/s/team-alpen/809462/icons8-switzerland.svg); }




/* Expander */

@media (max-width: 567px) {
	.expander .expander-hidden {
		max-height: 5000px;
		transition: max-height 300ms;
	}

	.expander .expander-hidden.expander-hide {
		max-height: 0px;
		overflow: hidden;
		transition: max-height 300ms;
	}

}
#body .overlaywrapper {
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: none;
}

#body .overlaywrapper  .close {
	font-size: 18px;
	line-height: 1;
	position: absolute;
	top: 55px;
	right: 100px;
	z-index: 205;
	color: #FFF;
	cursor: pointer;
	border: 1px solid #FFF;
	display: block;
}

#body .overlaywrapper  .close .inner {
	display: block;
	position: relative;
	padding: 6px 13px 6px 28px;
}

#body .overlaywrapper  .close i {
	position: absolute;
	top: 3px;
	left: 2px;
	font-size: 25px;
	line-height: 1;
}

#body .overlaywrapper .overlay_map {
	margin: 100px;
}

#body .overlaywrapper .overlay_map .overlay_inner > div { height: auto !important; }
#body .overlaywrapper .overlay_map #map_canvas { height: 100% !important; bottom: 0; top: 0; background-color: #EEE; }




@media all and (min-width: 1000px) and (max-width: 1250px) {
	#body .overlaywrapper .overlay_map { margin: 70px; }

	#body .overlaywrapper  .close {
		top: 30px;
		right: 70px;
	}
}

@media all and (min-width: 768px) and (max-width: 999px) {
	#body .overlaywrapper .overlay_map { margin: 50px; }

	#body .overlaywrapper  .close {
		top: 10px;
		right: 50px;
	}
}

@media all and (min-width: 568px) and (max-width: 767px) {
	#body .overlaywrapper .overlay_map { margin: 0px; }
	#body .overlaywrapper  .close {
		background-color: #428000;
		top: 20px;
		right: 20px;
	}
}

@media all and (max-width: 567px) {
	#body .overlaywrapper .overlay_map { margin: 0px; }
	#body .overlaywrapper  .close {
		background-color: #428000;
		top: 15px;
		right: 15px;
		font-size: 13px;
	}
	#body .overlaywrapper .close i { top: 0; }


	.TraminoOverlayBox { 
		left: 0px !important;
		width: 250px !important;
		margin: 0px 10px;
		
	}
	#traminomapinfowindow { width: 100% !important; border-bottom: 1px solid #000; }

	.TraminoOverlayBox .File {
		width: 60px !important;
		height: 45px !important;
	}
	.TraminoOverlayBox .File img { width: 100% !important; height: auto !important; }

	.TraminoOverlayBox > div:nth-child(2) { 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: 50px;
	height: 50px;
	z-index: 10;
	border-radius: 50%;
	transform: translate(0,-50%);
	background-color: #FFF;
	color: #000 !important;
	font-size: 25px;
}
.slider-nav i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

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

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


.slick-dots {
	position: absolute;
	top: -55px;
	right: 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.withintro .slick-dots { top: -25px; }


.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: 45px;
		height: 45px;
		font-size: 23px;
		padding: 7px 0 0 13px;
	}

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

	.slick-dots { top: -45px; }
	.slick-dots li { margin: 0 4px 0 0; }
	.slick-dots li button {
		width: 11px;
		height: 11px;
	}

}

@media all and (min-width: 768px) and (max-width:1023px) {
	.slider-nav {
		width: 40px;
		height: 40px;
		font-size: 21px;
		padding: 6px 0 0 11px;
	}

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

	.slick-dots { top: -40px; }
	.slick-dots li { margin: 0 3px 0 0; }
	.slick-dots li button {
		width: 10px;
		height: 10px;
	}

}

@media all and (min-width: 568px) and (max-width: 767px) {
	.slider-nav {
		width: 30px;
		height: 30px;
		font-size: 15px;
		padding: 5px 0 0 8px;
	}

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

	.slick-dots { top: -32px; }
	.slick-dots li { margin: 0 2px 0 0; }
	.slick-dots li button {
		width: 9px;
		height: 9px;
	}
}

@media all and (max-width: 567px) {
	
	.slider-nav {
		width: 30px;
		height: 30px;
		font-size: 15px;
		padding: 5px 0 0 8px;
	}

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

	.slick-dots { top: -27px; display: none !important; }
	.slick-dots li { margin: 0 2px 0 0; }
	.slick-dots li button {
		width: 8px;
		height: 8px;
	}
}

/* Detailseiten Grid */
.detailgrid { margin: 0 0 50px 0; }
.detailgrid:after { display: block; content: ""; clear: left; }
.detailgrid .leftbar {
	width: 230px;
	margin-right: 85px;
	float: left;
	font-size: 15px;
}

.detailgrid .leftbar .box {
	padding: 25px 0;
	border-top: 1px solid #CCC;
}
.detailgrid .leftbar .box.noborder { border-top-width: 0px; }

.detailgrid .leftbar .box.firstbox ul li { margin: 0 0 3px 0; }
.detailgrid .leftbar .box.firstbox ul li .flag { margin-right: 22px !important; }
.detailgrid .leftbar .box.firstbox ul li i { margin-right: 22px; }

.detailgrid .leftbar .box ul li { margin: 0 0 3px 0; }
.detailgrid .leftbar .standorte ul li { display: flex; }
.detailgrid .leftbar .standorte ul li.country { margin-top: 10px; }

.detailgrid .leftbar .standorte ul li .list_name { flex-grow: 1; }


.detailgrid .leftbar .box .logo img {
	width: 100%;
	height: auto;
}
.detailgrid .leftbar .box .staticmap {
	width: 190px;
	height: 190px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	margin: 20px 0 20px 40px;
	display: block;
}
.detailgrid .leftbar .box .staticmap img {
	width: 190px;
	height: 190px;
}

.detailgrid .leftbar .box .intro { color: #444; margin: 10px 0 0 0; }

.detailgrid .contentarea {
	width: 885px;
	float: left;
}

.detail-block { margin: 0 0 80px 0; }

.detail-block .column2 .text {
	column-count: 2;
	column-gap: 30px;
	padding: 15px 0;
}
.detail-block .column2 .text ul { margin: 0; } 


.detail-block .col_wrapper:after { display: block; content: ""; clear: left; }
.detail-block .col_wrapper .col {
	width: calc(50% - 15px);
	float: left;
}
.detail-block .col_wrapper .col:nth-child(1) { margin-right: 30px; }

.socialbenefits a { text-decoration: none; color: #D61720; }


@media all and (min-width: 1024px) and (max-width: 1279px) {
	
	.detailgrid { margin: 0 0 40px 0; }
	.detailgrid .leftbar { width: 210px; margin-right: 65px; font-size: 15px; }
	.detailgrid .leftbar .box { padding: 22px 0;  }
	.detailgrid .leftbar .box .staticmap { width: 175px; height: 175px; margin: 18px 0 18px 35px; }
	.detailgrid .leftbar .box .staticmap img { width: 175px; height: 175px; }
	.detailgrid .contentarea { width: 705px; }

	.detail-block { margin: 0 0 70px 0; }


}

@media all and (min-width: 768px) and (max-width:1023px) {

	.detailgrid { display: flex; margin: 0 0 30px 0; }
	.detailgrid .leftbar { width: 170px; margin-right: 35px; float: none; font-size: 14px; }
	.detailgrid .leftbar .box { padding: 20px 0; }
	.detailgrid .leftbar .box .staticmap { width: 140px; height: 140px; margin: 15px 0 15px 30px; }
	.detailgrid .leftbar .box .staticmap img { width: 140px; height: 140px; }
	.detailgrid .contentarea { width: auto; float: none; flex: 1; }
	
	.detail-block { margin: 0 0 60px 0; }

}

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

	.detailgrid { display: flex; margin: 0 0 30px 0; }
	.detailgrid .leftbar { width: 150px; margin-right: 20px; float: none; font-size: 13px; }
	.detailgrid .leftbar .box { padding: 15px 0; }
	.detailgrid .leftbar .box .staticmap { width: 125px; height: 125px; margin: 15px 0 15px 25px; }
	.detailgrid .leftbar .box .staticmap img { width: 125px; height: 125px; }
	.detailgrid .contentarea { width: auto; float: none; flex: 1; }

	.detail-block { margin: 0 0 45px 0; }

	.detail-block .column2 .text {
		column-count: auto;
		column-gap: normal;
		padding: 15px 0;
	}
}

@media all and (max-width: 567px) {

	.detailgrid { display: flex;  flex-direction: column; margin: 0 0 20px 0; }
	.detailgrid .leftbar { order: 2; width: 100%; margin-right: 20px; float: none; font-size: 13px; }
	.detailgrid .leftbar .box { padding: 15px 0; }
	.detailgrid .leftbar .box .staticmap { width: 125px; height: 125px; margin: 15px 0 15px 25px; }
	.detailgrid .leftbar .box .staticmap img { width: 125px; height: 125px; }
	.detailgrid .contentarea { order: 1; width: auto; float: none; flex: 1; margin: 0 0 20px; }

	.detail-block { margin: 0 0 35px 0; }

	.detail-block .column2 .text {
		column-count: auto;
		column-gap: normal;
		padding: 15px 0;
	}

	.detail-block .col_wrapper .task {
		width: 100%;
		float: none;
	}
}
@media all and (min-width: 1024px) and (max-width: 1279px) {
	
	.maxwidth { width: 980px; }

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

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

	#body .teaser-smallsubheadline { font-size: 14px; margin: 0 0 4px 0; }
	#body .teaser-headline { font-size: 35px; margin: 0 0 30px 0; }
	#body .withintro .teaser-headline { margin: 0 0 18px 0; }
	#body .teaser-headlinesmall { font-size: 30px; margin: 0 0 28px 0; }
	.teaser-subheadline { font-size: 20px; margin: 0 0 20px 0; }

	.btn { font-size: 15px; padding: 9px 18px; }
	.btn i { font-size: 17px; }

	.textstyle table { margin: 0 0 18px 0; }
	.textstyle table td, .textstyle table th { padding: 3px 8px; }

	.iconspace { margin: 0 18px 0 0 !important; }


}

@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; }

	.TraminoVorlage { margin-top: 50px; margin-bottom: 50px; }
	.TraminoVorlage.border { padding-bottom: 50px; }

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

	#body .teaser-smallsubheadline { font-size: 13px; margin: 0 0 3px 0; }
	#body .teaser-headline { font-size: 30px; margin: 0 0 25px 0; }
	#body .withintro .teaser-headline { margin: 0 0 16px 0; }
	#body .teaser-headlinesmall { font-size: 25px; margin: 0 0 23px 0; }
	.teaser-subheadline { font-size: 18px; margin: 0 0 18px 0; }

	.btn { font-size: 14px; padding: 8px 16px; }
	.btn i { font-size: 16px; }

	.textstyle table { margin: 0 0 15px 0; }
	.textstyle table td, .textstyle table th { padding: 3px 4px; }

	.iconspace { margin: 0 15px 0 0 !important; }	

}

@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; }

	.TraminoVorlage { margin-top: 40px; margin-bottom: 40px; }
	.TraminoVorlage.border { padding-bottom: 40px; }

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

	#body .teaser-smallsubheadline { font-size: 12px; margin: 0 0 2px 0; }
	#body .teaser-headline { font-size: 25px; margin: 0 0 20px 0; }
	#body .withintro .teaser-headline { margin: 0 0 15px 0; }
	#body .teaser-headlinesmall { font-size: 20px; margin: 0 0 18px 0; }
	.teaser-subheadline { font-size: 16px; margin: 0 0 15px 0; }

	.btn { font-size: 13px; padding: 7px 14px; }
	.btn i { font-size: 15px; }

	.textstyle table { margin: 0 0 12px 0; }
	.textstyle table td, .textstyle table th { padding: 2px 4px; }

	.iconspace { margin: 0 12px 0 0 !important; }

}

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

	.TraminoVorlage { margin-top: 30px; margin-bottom: 30px; }
	.TraminoVorlage.border { padding-bottom: 30px; }

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

	.filtergrid { margin-top: 20px; }

	#body .teaser-smallsubheadline { font-size: 12px; margin: 0 0 2px 0; }
	#body .teaser-headline { font-size: 20px; margin: 0 0 15px 0; }
	#body .withintro .teaser-headline { margin: 0 0 10px 0; }
	#body .teaser-headlinesmall { font-size: 15px; margin: 0 0 12px 0; }
	.teaser-subheadline { font-size: 14px; margin: 0 0 10px 0; }

	.btn { font-size: 12px; padding: 6px 12px; }
	.btn i { font-size: 14px; }

	.textstyle table { margin: 0 0 10px 0; }
	.textstyle table td, .textstyle table th { padding: 2px 3px; }

	.iconspace { margin: 0 10px 0 0 !important; }

}