/* quicksand-300 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/quicksand-v7-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Quicksand Light'), local('Quicksand-Light'),
       url('../fonts/quicksand-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/quicksand-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/quicksand-v7-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/quicksand-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/quicksand-v7-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
}

@font-face {
font-family: 'Megan June Regular';
font-style: normal;
font-weight: normal;
src: local('Megan June Regular'), url('Megan June.woff') format('woff'),
url('../fonts/Megan-June.woff') format('woff');
}

body {
	font-family: 'Megan June Regular', sans-serif;
	background-color: rgb(164, 200, 228);
	background-image:url(../img/bg.jpg);
	background-size:100% 100vh;
	background-attachment:fixed;
	font-size:20px;
	background-repeat:repeat;
	font-weight: 500;
	color: rgb(33, 33, 33);
	color: #fff;
	letter-spacing: 0.1vw;	
}

#header {
	margin-top:3rem;
	margin-bottom:2rem;
	width:98%;
}

h1, h2, h3, h4 {
	font-family: 'Megan June Regular', sans-serif;
	font-weight:normal;
	color: rgb(33, 33, 33);
	color:#fff;
}

h1 {
	font-size: 5vw;
	color:#fff;
	text-align:center;
	margin-bottom:5vw;
	text-transform:uppercase;
	letter-spacing: 0.5vw;
}

h2 {
    font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: 0.5vw;
}

h3 {
	margin-top:2rem;
	font-size: 2.8rem;

}

h2.vitaheader {
	font-size: 6vw;
	color:#fff;
	text-align:center;
	margin-top:5vw;
	margin-bottom:1vw;
	text-transform:uppercase;
}

h4 {
	font-size: 1.5rem;
}

p {
	line-height:1.2;
}

.white ul { list-style-type: none;}
.white li:before { 
	content: "\25BA\A0";
	font-size:60%;
    position: relative;
    top: -3px;
}
.white li {
		text-indent:-1.3rem;

}

a {
	color:rgb(231, 245 ,10,0.8);
	font-weight:500;
	text-decoration:none;
}

a:hover {
	color: rgba(231, 245 ,10,1);
}

#main-menu {
	padding-left:2rem;
	font-size:1.8rem;
	z-index:15;
	background-color:#eee;
}

.is-submenu-item {
	font-size:1.1rem !important;
	margin-left:1.5rem;
}

#main-menu a, .transparent-white a {
	color:rgba(15, 92, 106,1);
	text-decoration:none;
	z-index:15;	
	text-transform:uppercase;	
	
}

#main-menu a.active, #main-menu a:hover, #main-menu a:focus, .transparent-white a:active, .transparent-white a:hover,  .transparent-white a:focus {
	color:rgb(231, 245 ,10);
}

.menu > li > a {
    padding: 0.7rem 1.5rem 0.7rem 1rem !important;
	margin-right:1rem;
}

.menu > li > ul > li > a {
    padding: 0.7rem 1rem 0.7rem 1rem !important;
	margin-right:0rem;
}

.accordion {
	background-color:transparent;
}

.accordion-title {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #e6e6e6 #e6e6e6 currentcolor;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px 0;
	color:rgb(15, 92, 106);	
	color:#fff;
    display: block;
    font-size: 1.25rem;
    line-height: 1;
    padding: 1.25rem 1rem;
    position: relative;
	font-weight:700;
	text-decoration:none;	
}

.accordion-title:hover, .accordion-title:focus {
	background-color:rgba(255,255,255,0.2);
	color:rgb(15, 92, 106);	
	color:#fff;
}

.accordion-content {
	color: #676767;
	color: #fff;
	background-color:transparent;
}



.mainsheet {
	background-color:#FFF;
	padding:3rem;
	margin-bottom:2rem;
}

.fltlt {
	float:left;
	margin-right:4rem;
}


ul.accordion li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #eee;
	border-color:#E7E7A9;
    border-image: none;
    border-style: solid; 
    border-width: 0 0 5px;
    list-style-type: none;
	z-index:9;
}

ul.standard li {
    border-width: 0 !important;
    float: left;
    list-style-position: outside;
    list-style-type: circle !important;
    margin-left: 15px;
    margin-right: 20px;
    width: 330px;
}

.clearfloats {
	clear:both;
}

#contentlogo {
	background-image:url(../img/logo_klein.jpg);
	background-repeat:no-repeat;
	background-position:bottom center; 
	height:75px;
	width:100px;
	float:right;
}

.callout {
	background-color: transparent;
	color: #0a0a0a;
	margin: 0 0 1rem;
	padding: 1.6rem;
	padding-right: 0;
	position: relative;
}

.top-bar, .top-bar ul li {
    background-color:transparent;
	float: right;
	clear:both;
}

.top-bar ul>li:first-child {
	float: left;
}

.is-dropdown-submenu {
	background-color:#f0f0f0 !important;
}

.topnavigation {
	background-color: rgb(164, 200, 228);
/*	background-image:url(../img/bg.jpg);*/
	background-attachment:fixed;
	background-size:auto;
	background-repeat:repeat;
	margin-top: 0 !important;
	border-bottom:#CCC 0px solid;
	width:100%;
	    background-color:rgba(15, 92, 106,1);
	    background-color:rgba(255, 255, 255,1);

}
table thead, table tbody, table tfoot {
    background-color: transparent;
}
table tbody tr:nth-child(2n) {
    background-color: transparent;
    border-bottom: 0 none;
}

.menu-icon::after, .menu-icon:hover::after {
    background: rgb(15, 92, 106) none repeat scroll 0 0;
    box-shadow: 0 7px 0 rgb(15, 92, 106), 0 14px 0 rgb(15, 92, 106);
}

.no-js .top-bar {
  display: none;
}

.top-background-image {
    background-image: url("../img/lma-logo.svg");
    background-position: center center;
    background-repeat: no-repeat;
	background-size:contain;
	display:block;
	margin-top: 5vw;
    margin-bottom: 3vw;
	height:20vw;
}

.m75 {
	max-width: 66rem !important;
    margin-left: auto !important;
    margin-right: auto !important;

	margin-top:4rem;
	margin-bottom:3rem;
	width:98%;
}

.row {
    margin-left: auto;
    margin-right: auto;
    max-width: 66rem;
}
.darkgreen {
	background-color:rgb(15, 92, 106) !important;
}

.white {
	background-color:rgba(255,255,255,1);
	color:rgb(15, 92, 106) !important;
	padding:2rem;	
}

.white h1, .white h2, .white h3, .white h4 {
	color: rgb(15, 92, 106);
}


.darkgreen p, .darkgreen h1, .darkgreen h2, .darkgreen h3, .darkgreen h4 {
	color: #fff;
}

.transparent-white {
	background-color:rgba(255, 255, 255, 1);
}

.divider {
	display:block;
	height:10px;
	width:100%;
}

.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    border-color: #73a228 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.footer {
	padding-top:0.8em;
	text-align: center;
	color: #444;
}

.title-bar-title {
	margin-top:10px;
}

.image-row {
    padding-left: 0 !important;
    padding-right: 0 !important;	
}

.image-row img {
	width:100%;
}

.boxheader {
	color:rgb(15, 92, 106);
		text-align:center;
		display:block;
}

a.boxheader {
	text-decoration:none;
	text-align:center;
	text-transform:uppercase;
	
}

.block-container {
	display:grid;
	grid-template-columns: 1fr;
    gap: 1rem 1rem;
    -moz-gap: 1rem 1rem;
    -webkit-gap: 1rem 1rem;
	margin-top:2rem;
	margin-bottom:2rem;	
}

.container-21 {
	display:grid;
	grid-template-columns: 1fr;		
	margin-top:2rem;
	margin-bottom:2rem;	
}

.container-11 {
	display:grid;
	grid-template-columns: 1fr;		
	margin-top:2rem;
	margin-bottom:2rem;	
}

.container-4 {
	display:grid;
	grid-template-columns: 1fr 1fr;		
	margin-top:2rem;
	margin-bottom:2rem;	
}

.table-container, .table-container-3 {
	display: grid;
    -moz-column-width: 100%;
    -webkit-column-width: 100%;
    column-width: 100%;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
   grid-gap: 2rem;
    -moz-grid-gap: 2rem;
    -webkit-grid-gap: 2rem;	
}

.table-item {
    background-color: #fefefe;
	background-color:transparent;
	color:#fff;
    width: 100%;
    vertical-align: middle;
    align-content: center;
	text-align:center;
	margin-bottom: 1em;
}

.block-item {
	place-self:stretch;

}

.block-item ul li {
	margin-bottom:1em;
	line-height: 1.25;
}

.vita {
	display:block;
	width:100%;
	min-height:300px;
	background-image:url(../img/vita-white.svg);
	background-size:80vw 500px;
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,0.3);
	background-position:center;
}

.kunden {
	display:block;
	width:100%;
	min-height:40vh;
	background-size:contain;
	background-image:url(../img/kunden.png);
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,0.3);
	background-position:center;
}


.cl {
	display:block;
	width:100%;
	min-height:300px;
	background-image:url(../img/cl.svg);
	background-size:80vw 300px;
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,0.0);
	background-position:center;
}

.portfolio {
    display: block;
    width: 100%;
    min-height: 800px;
    background-image: url(../img/portfolio-1.svg);
    background-size: 90vw 600px;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.0);
    background-position: right;
	margin-top:-290px;
}

.ref {
	display:block;
	width:100%;
	min-height:300px;
	background-image:url(../img/referenzen.svg);
	background-size:80vw 300px;
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,1);
	background-position:center;
}

.tropfen {
	display:block;
	width:100%;
	min-height:100px;
	background-image:url(../img/dunkelgruen1.svg);
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:top;
}

.ohne-tropfen {
	display:block;
	width:100%;
	min-height:200px;
	background-image:url(../img/wellen.svg);
	background-size:101vw;
	background-repeat:no-repeat;
	background-position:top;
	margin-top: -2px;	
}

.mirrored {
	transform:scaleX(-1);
}

.title-bar {
    padding: .5rem;
    background: #fff;
    color: #333;
}

.is-stuck {
	/*
    -moz-box-shadow: 3px 2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 2px 2px rgba(0,0,0,0.3);
    box-shadow: 3px 2px 2px rgba(0,0,0,0.3);
	*/
}

.circle-portrait {
    border-radius: 50%;
	border-width:5px;
	border-style:solid;
	border-color:#FFF;
    width: 100%;
}

.accordion-title:before {
    content: "+";
    font-size: 3vw;
    font-weight: normal;
}

.is-active>.accordion-title:before {
    content: "-";
}

.rakete {
	background-image:url(../img/rakete.png);
	background-repeat:no-repeat;
	background-size:10vw;
	background-position:bottom right;
	margin-bottom:-60px;
}

.ref-item {
	background-color:#fff;
	border-radius:50%;
	display:block;
	background-size:80%;
	background-position:center;
	background-repeat:no-repeat;
}

.ref-item:hover {
	background-image:none;
	background-color:#E7F50A;
	transition:ease 1s;	
}

.ref-item p {
	display:none;
	text-align:center;
	font-size:1.8vw;
	margin-top:3.5vw;
	margin-left:2vw;
	margin-right:2vw;
}

.ref-item:hover p {
	transition:ease 2s;	
	display:block;
	color:#0F5C6A;
	position:relative;
	z-index:99;
}

.ref-text {
	background-color:#00b3b3;
	border-radius:50%;
	display:block;
	color:#fff;
	padding:0.9vw;
	padding-left:0;
	padding-right:0;

}

.ref-text p {
	text-align:center;
	font-size:1.6vw;
	line-height:1.05;
	margin-bottom:0.5vw;
	
}


.m4e {
	background-image:url(../img/logo-m4e.svg);
	position:absolute;
	width: 19vw;
	height:19vw;
	top:4vw;
	left:12.5vw;
	padding-top:0vw;	
}

.m4e-text {
	position:absolute;
	width: 18.5vw;
	height:18.5vw;
	top:1vw;
	left:30vw;
}

.Mela-Cafe {
	background-image:url(../img/logo-Mela-Cafe.svg);
	position:absolute;
	width: 16vw;
	height:16vw;
	top:8vw;
	left:57vw;
}

.John-Pettersson {
	background-image:url(../img/logo-jp.svg);
	position:absolute;
	width: 16vw;
	height:16vw;
	top:2vw;
	left:77vw;
	padding-top:1vw;		
}

.Praxis-am-Fluss {
	background-image:url(../img/logo-Praxis-am-Fluss.svg);
	position:absolute;
	width: 15vw;
	height:15vw;
	top:21vw;
	left:2vw;
	padding-top:1vw;		
}

.Blue-Ocean {
	background-image:url(../img/logo-blue-ocean.svg);
	position:absolute;
	width: 21vw;
	height:21vw;
	top:32vw;
	left:17vw;
}

.Blue-Ocean-text {
	position:absolute;
	width: 18.5vw;
	height:18.5vw;
	top:39vw;
	left:1vw;
}

.studio100 {
	background-image:url(../img/logo-studio-100.svg);
	position:absolute;
	width: 23vw;
	height:23vw;
	top:21vw;
	left:38vw;
	padding-top:1vw;		
}

.studio100-text {
	position:absolute;
	width: 18vw;
	height:18vw;
	top:37vw;
	left:50vw;
}


.Stuebben {
	background-image:url(../img/logo-stuebben.svg);
	position:absolute;
	width: 19vw;
	height:19vw;
	top:23vw;
	left:69vw;
	padding-top:1vw;		
}

.clear {
	clear:both;
}

.ref-container {
	position:relative;
	display:block;
	height:60vw;
	margin-top:2vw;
}

@media screen and (min-width: 39em) {
	.kunden {
		min-height:60vh;
	}
	
	.block-container {
		grid-template-columns: 1fr 3fr;	
	}
	
	.container-11 {
		grid-template-columns: 1fr 1fr;	
	}	
	
	.container-21 {
		grid-template-columns: 2fr 1fr;	
	}	
	
	container-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;	
	}

	.table-container {
		-moz-column-width: 100%;
		-webkit-column-width: 100%;
		column-width: 100%;
		column-count: 4;
		-moz-column-count: 4;
		-webkit-column-count: 4;
	   grid-gap: 2rem;
		-moz-grid-gap: 2rem;
		-webkit-grid-gap: 2rem;	
		grid-template-columns: 1fr 1fr 1fr 1fr;			
	}
	
	.table-container-3 {
		-moz-column-width: 75%;
		-webkit-column-width: 75%;
		column-width: 75%;
		column-count: 3;
		-moz-column-count: 3;
		-webkit-column-count: 3;
	   grid-gap: 6rem;
		-moz-grid-gap: 6rem;
		-webkit-grid-gap: 6rem;	
		grid-template-columns: 1fr 1fr 1fr;			
	}	
	
	.table-item {
		font-size:1.5rem;
	}
	
	.title-bar-title {
		margin-top:30px;		
	}
	
	.boxheader {
		text-align:center;
		color:rgb(15, 92, 106);
		font-size:2rem;
	}	

	.top-bar, .top-bar ul li {
		clear:none;
	}
	
	#main-menu {
	    background-color: #fff;
	}
	
}

@media screen and (min-width: 48em) {
	.kunden {
		min-height:90vh;
	}
		
	.vita {
		background-size:90%;
		min-height:55vw;
	}
	
	.cl {
		background-size:90%;
		min-height:35vw;
	}
	
	.ref	 {
		background-size:90%;
		min-height:35vw;
	}
			
	.tropfen {
		min-height:400px;
	}

	.boxheader {
		font-size:3rem;
	}	
	
	
	#main-menu {
 	   font-size: 1.5rem;
	}	
	
	#content {
		padding-right:0rem;
	}		
	
	#header {
		margin-left: 1rem;
	}		
				
	.title-bar-title {
		margin-right:15px;
		margin-top:30px;		
	}
	
	.divider {
		width:100%;
	}
	
	.table-item {
		font-size:1.8rem;
	}	
	
}

@media screen and (min-width: 64em) {
	
				
	.mainsheet {
		background-color:#FFF;
		padding:3rem;	
	}
	
	#main-menu {
 	   font-size: 1.5rem;
	}
	
	#content {
		padding-right:1rem;
	}		
	
	.logo {
		background-position:3rem 0rem;
		background-size:25rem;
		display:block;
		z-index:99;
	}
	
	#header {
		margin-left: auto;
	}	

	.divider {
		width:100%;
	}
	
	.table-item {
		font-size:2rem;
	}						
}

@media screen and (min-width: 80em) {

}

@media screen and (min-width: 100em) {

}

@media screen and (min-width: 140em) {

}