@import url("reset.css");
/* @override https://dev.gewerbeland-schweiz.ch/site/templates/styles/main.css */
/**
 * @license
 * MyFonts Webfont Build ID 3630358, 2018-08-29T08:19:29-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: FF Mark Web Pro Regular by FontFont
 * URL: https://www.myfonts.com/fonts/fontfont/mark/pro-regular/
 * Copyright: 2016 published by Monotype GmbH
 * 
 * Webfont: FF Mark Web Pro Bold by FontFont
 * URL: https://www.myfonts.com/fonts/fontfont/mark/pro-bold/
 * Copyright: 2013 published by FontShop International GmbH
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3630358
 * Licensed pageviews: 50,000
 * 
 * © 2018 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/376516");

  
@font-face {font-family: 'FFMarkWebProRegular';src: url('webfonts/376516_0_0.eot');src: url('webfonts/376516_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/376516_0_0.woff2') format('woff2'),url('webfonts/376516_0_0.woff') format('woff'),url('webfonts/376516_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'FFMarkWebProBold';src: url('webfonts/376516_1_0.eot');src: url('webfonts/376516_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/376516_1_0.woff2') format('woff2'),url('webfonts/376516_1_0.woff') format('woff'),url('webfonts/376516_1_0.ttf') format('truetype');}
 
 
 
@charset "UTF-8";


* {
	box-sizing: border-box; 
}

html, body{
	 width: 100%;
	 height: 100%;
	 background-color: #f5f1f2;
}



/* -----FONTS----- */

body, html, p, a{
	font-family: 'FFMarkWebProRegular';
	color: rgb(0,46,64);
}
strong{
	font-family: 'FFMarkWebProBold';
}
h1, h2, h3{
    font-family: "FFMarkWebProBold";
}
a{
	color: rgb(0,46,64);
}
a:hover, a:active{
	text-decoration: none;
}

section.standorte a,
a.button
{
	text-decoration: none;
	border: 1px solid rgb(0,46,64);
	line-height: 1.8em;
	padding: 0.05em 0.6em;
	display: block;
	width: 70%;
	transition: all 0.2s;
}
section.standorte a:hover,
section.standorte a:hover,
a.button:hover{
	background-color: rgba(231,81,19,1);
}
a.button{
	width: 250px;
	display: inline-block;
	margin-right: 20px;
}

/* -----FONT SIZES----- */

p, ul, a{
	font-size: 1.1rem;
	line-height: 1.3rem;
	margin-bottom: 0.5rem;
}
h1{
	font-size: 2.8rem;
	line-height: 3rem;
}
h2{
	font-size: 2rem;
	line-height: 2rem;
}
h3{
	font-size: 1.2rem;
	line-height: 1.2rem;
}


ul li{
	margin-left: 20px;
	list-style-type: disc;
	margin-bottom: 0.5em;
}





/* --------MAIN------- */

#wrapper{
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	background-color: #f5f1f2;
	padding: 0 0;
    position: relative;
}
header img{
	width: 100%;
	height: auto;
}
header h1{
	position: relative;
	background-color: white;
	width: auto;
	height: auto;
	margin: -5rem 5rem 0 5rem;
	padding: 0.5em 0.6em 0.6em 0.6em;
	border-top: 3px solid #e75113;
	border-bottom:3px solid #e75113;
}
section{
	margin: 4em 5em;
	position: relative;
	width: auto;
}
.container{
	margin: 0 5em;
	position: relative;
	width: auto;
	background-color: white;
}
.container section{
	margin: 2em;
}
.container section h1{
	margin-bottom: 1.5em;
}
div.gewerbeland{
	position: relative;
	width: auto;
	padding: 3em 5em;
}
div.gewerbeland.home{
	position: absolute;
    padding: 3em 5em;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
div.gewerbeland p{
	text-transform: uppercase;
	color: white;
	background-color: #e75113;
	display: inline-block;
	padding: .2em .3em;
	letter-spacing: 2px;
}
div.gewerbeland p a{
	text-decoration: none;
}
div.gewerbeland p a:hover, 
div.gewerbeland p a:active{
	color: white;
}
#schliessen{
	float: right;
	padding: 0px;
	margin-top: -8px;
	transition: all 0.3s;
	border-radius: 30px
}
#schliessen:hover{
	background-color: #e75113;
}
#schliessen img{
	float: left;
	width: 40px;
	height: 40px;
}
img.icon-XL{
	width: 50px;
	height: 50px;
}
img.icon-S{
	width: 25px !important;
	height: 25px !important;
}



section.factsheets{
	width: 100%;
	margin: 5em 0 0 0;
	padding: 0 5em;
}
div.factsheet{
	background-color: white;
	margin-bottom: 20px;
	filter: drop-shadow(5px 5px 5px #ddd);
	min-height: 730px;
	transition: all 0.3s;
	/*cursor: pointer;*/
}
div.factsheet:hover{
	/*background-color: #f5f1f2;*/
}
div.factsheet:hover img{
	
}
div.factsheet-text{
	padding: 2em;
}
div.factsheet-text h2{
	margin-bottom: 1em;
}
div.factsheet-link{
	position: absolute;
	bottom: 2em;
	right: 2em;
	width: 100%;
	text-align: right;
	padding-top: 2em;
}
div.factsheet-link a.button{
	margin-right: 0;
	width: auto;
}

section.benefits{
	display: flex;
	justify-content: space-between;
}
section.benefits div{
	width: 30%;
}
section.benefits img{
	margin-bottom: 1em;
}

section.standorte{
	background-color: white;
	margin:  5em 0;
	padding: 5em 5em;
	overflow: hidden;
}
section.standorte img{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 60%;
	z-index: 0;
}
section.standorte div.standort-text{
	position: relative;
	z-index: 2;
	width: 40%;
	min-height: 434px;
}

section.kontakt{
	position: relative;
	display: flex;
}
section.inhalt{
	position: relative;
	display: flex;
	background-color: white;
}
section.facts{
	margin: 0;
	position: relative;
	width: 50%;
	padding-right: 20px;
}
section.info{
	margin: 0;
	position: relative;
	width: 50%;
	padding-left: 20px;
}
section.kontakt h2{
	width: 50%;
}
section.facts h2,
section.info h2{
	width: 100%;
	margin-bottom: 1em;
}
section.kontakt div.detail{
	position: relative;
	width: 50%;
}
div.detail div{
	border-top: 1px solid rgb(0,46,64);
	padding: 1em 0 0.5em 0;
}
div.detail div:last-child{
	border-bottom: 1px solid rgb(0,46,64);
}
div.detail div img{
	float: left;
	margin: 0 1.5em 0 0;
}
div.detail img{
	width: 100%;
	margin-top: 3em;
}
div.detail p{
	display: inline-block;
}
section.karte{
	width: auto;
}
section.karte img{
	width: 100%;
}
div.back{
	width: 100%;
	padding: 3em 1em;
	text-align: right;
	background-color: white;
	margin-bottom: 1em;
}
div.back a.button{
	text-align: center;
}

footer{
	background-color: white;
	/*margin:  5em 0;*/
	padding: 5em 5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#logo-LM{
	width: 220px;
	height: auto;
}
#logo-SI{
	width: 256px;
	height: auto;
}





/* OWL CONTROLS */
.owl-prev {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-left: -3.5em;
    display: block!IMPORTANT;
    border: 0px solid rgb(0,46,64);
    
}
.owl-prev span{
	width: 30px;
	height: 30px;
	background-color: red;
	display: block;
	background: url(/site/templates/images/arrow_left.svg);
	text-indent: -10000px;
}
.owl-prev:hover span{
	background: url(/site/templates/images/arrow_left_hover.svg);
}
.owl-prev.disabled, .owl-next.disabled{
	opacity: 0.2;
}

.owl-next {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-right: -3.5em;
    display: block!IMPORTANT;
    border:0px solid rgb(0,46,64);
}
.owl-next span{
	width: 30px;
	height: 30px;
	background-color: red;
	display: block;
	background: url(/site/templates/images/arrow_right.svg);
	text-indent: -10000px;
}
.owl-next:hover span{
	background: url(/site/templates/images/arrow_right_hover.svg);
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}


.owl-dots{
	position: absolute;
	z-index: 20;
	width: 100%;
	text-align: center;
	height: 50px;
	margin-top: -40px;
}
button.owl-dot{
	width: 12px;
    height: 12px;
    /*border: 2px solid #000 !important;*/
    background-color: #e75113 !important;
    opacity: 0.3;
    border-radius: 10px;
    margin-right: 10px;
    transition: all 1s;
}
/* #e75113 */
button.owl-dot.active{
	background-color: #e75113 !important;
	opacity: 1;
}
















/* ---------------- */
/* ---------------- */
/* ---------------- */
/* ---------------- */
/* -----MOBILE----- */




@media only screen and (max-width: 750px){

	html, body{
		font-size: 14px;
	}
	#wrapper{
		background-color: #f5f1f2;
	}
	/* -----FONT SIZES----- */

	p, ul, a{
		font-size: 1.1rem;
		line-height: 1.3rem;
		margin-bottom: 0.5rem;
	}
	h1{
		font-size: 1.5rem;
		line-height: 2rem;
	}
	h2{
		font-size: 1.5rem;
		line-height: 2rem;
	}
	h3{
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
	header{
		overflow: hidden;
	}
	header img{
		width: 200%;
		height: auto;
		
	}
	header h1{
		margin: -3rem 2rem 0 2rem;
		padding: 0.5em 0.6em 0.6em 0.6em;
	}
	div.gewerbeland{
		width: 100%;
		padding: 2em 2em;
	}
	div.gewerbeland.home{
		padding: 2em 2em;
	}
	div.gewerbeland p{
		letter-spacing: 2px;
		width: 100%;
		text-align: center;
	}
	#schliessen{
		display: none;
	}
	
	
	
	/* -----SECTION----- */
	section{
		margin: 3em 2em;
	}
	section.factsheets{
		margin: 5em 0 0 0;
		padding: 0 2em;
	}
	div.factsheet{
		margin-bottom: 20px;
		min-height: 600px;
	}
	section.benefits{
		display: flex;
		flex-direction: column;
	}
	section.benefits div{
		width: 100%;
		margin-bottom: 2em;
	}
	section.benefits div:last-child{
		margin-bottom: 0;
	}
	section.standorte{
		margin: 3em 0;
		padding: 0;
		overflow: hidden;
	}
	section.standorte img{
		position: relative;
		display: block;
		width: 100%;
	}
	section.standorte div.standort-text{
		width: 100%;
		padding: 3em 2em 0 2em;
	}
	section.kontakt{
		margin-top: 3em;
		margin-bottom: 3em;
		flex-direction: column
	}
	section.kontakt h2{
		width: 100%;
		margin-bottom: 1em;
	}
	section.kontakt div.detail{
		position: relative;
		width: 100%;
	}
	
	footer{
		padding: 3em 2em;
		flex-direction: column;
		align-items: center;
	}
	footer .adresse{
		margin-bottom: 2em;
		width: 100%;
		text-align: center;
	}
	#logo-LM{
		width: 150px;
		height: auto;
		margin-bottom: 2em;
	}
	#logo-SI{
		width: 150px;
		height: auto;
		margin-bottom: 1em;
	}
	.factsheets .owl-dots {
	    width: 100%;
	    text-align: center;
	    margin-top: 0;
	    margin-left: -2em;
	}
	.factsheet-link{
		width: 100%;
		left: 0;
		bottom: 1em !important;
		margin: 1em 0;
		padding: 0 2em;
	}
	.factsheet-link a.button{
		width: 100%;
		display: block;
		text-align: center;
	}



	.container{
		margin: 0 0;
	}
	section.inhalt{
		display: block;
	}
	section.facts, section.info{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	section.kontakt h2{
		width: 100%;
	}
	section.facts h2,
	section.info h2{
		width: 100%;
		margin-bottom: 1em;
	}
	
	div.back {
	    padding: 3em 0;
	    text-align: left;
    }
	div.back a.button{
		width: 100%;
		display: block;
		margin-right: 0;
	}
	
	.owl-dots {
	    height: 50px;
	    margin-top: -30px;
    }





}