:root {
  --vbegruen: #76b727;
  --vbeblau: #093057ff;
  --vbegrau: #abb6c8ff;
  --vbehellgrau: #f5f5f5;
}

.col-md-3 {
	width: 25%;
}

.navbar-brand>img {
  padding-top: 11px;
  margin-left: 60px;
}

.navbar-brand {
    height: auto;
    margin: 0;
    padding: 0;
    margin-right: 80px;
}

.dropdown-menu {
	border-radius: 0px;
	border: 0px solid white;
	border-top: 1px solid #76b725ff;
}

.navbar {
	margin-bottom: 0px;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
	background-color: white;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
	background-color: white;
	color: #75b724ff;
}

.navbar-default{
	color: black;
	background-color: #FFF;
	-webkit-box-shadow: 0px 8px 17px -2px rgba(0,0,0,0.1); 
	box-shadow: 0px 8px 17px -2px rgba(0,0,0,0.1);
}
.navbar-default .navbar-nav > li > a{
	color:#000;
	font-family:FFQuadraatSansWebRegular;
	color: #16365cff;
	text-decoration: none;
	font-size: 1.6em;
	font-weight:600;
    letter-spacing:1px;
	margin-top: 1.5em;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
	/*border-top-color: #000;
    border-bottom-color: #000;*/
	display: none;
}
.navbar-default .navbar-brand{
	color:#fff;
}
.menu-large {
  position: static !important;
}

.dropdown:hover {
	border-top: 4px solid var(--vbegruen);
	margin-top: -4px;
}

.megamenu{
  padding: 20px 0px;
  width:100%;
}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #FFF;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: var(--vbegruen);
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}

.dropdown-header {
  color: var(--vbeblau);
  font-size: 18px;
}

.containerflow {
	float: left;
	margin-top: 1em;
	padding-bottom: 2em;
	width: 100%;
}

.menucell {
	width: 250px;
	height: 300px;
	background-color: #f4f4f4ff; 
	white-space: normal;
	margin-bottom: 1em;
	border-radius: 10px;
	font-family: FFQuadraatSansWebRegular;
	font-size: 1.3em;
	padding: 1em;
}

a.cell-link {
  font-family: FFQuadraatSansWebRegular;
  font-size: 1.2em;
  color: var(--vbeblau);
}


a.cell-link:hover, a.cell-link:focus {
	color:var(--vbegruen);
}

a.cell-link-inactive {
  font-family: FFQuadraatSansWebRegular;
  font-size: 1.2em;
  color: var(--vbegrau);
}

.inactive-menu-header {
	font-family: FFQuadraatSansWebRegular;
	font-size: 1.2em;
	color: var(--vbegrau);
}

.inactive-menu-text {
	font-family: FFQuadraatSansWebRegular;
	color: var(--vbegrau);
}

a.cell-link-inactive:hover, a.cell-link-inactive:focus {
	color:var(--vbegruen);
}

p.nav-cell {
	padding-top: 0.5em;
}

/*Menuekacheln - gleichzeitige Änderung der beiden Links innerhalb der Kachel */
a.nav-cell { color: #abb6c8ff; }
.nav-tile:hover a.nav-cell { color: #093057ff; }
.nav-tile:hover .cell-link { color:#76b725ff; }

.cellcontainer {
	margin-left: 21em;
	max-width: 1200px;
}

/*menu Login und Mitglied werden */

.service-menu {
		float: right;
		margin-top: 1.5em;
		margin-left: 0.5em;
		font-size: 1.7em;
	}

/*Small Devices - like Laptops */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
	.col-md-3 {
		width: 24%;
	}
	.cellcontainer {
		margin-left: 5rem;
	}
}

/*Mobile Devices in landscape mode like iPad etc. */
@media only screen and (min-width: 1024px) and (max-height: 1366px)
    and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
   
   .menucell {
		width: 220px;
		height: auto;
		background-color: #f4f4f4ff; 
		white-space: normal;
		margin-bottom: 1em;
		border-radius: 10px;
		font-family: FFQuadraatSansWebRegular;
		font-size: 1.2em;
		padding: 2em;	
	}
	
	a.cell-link {
	  font-family: FFQuadraatSansWebRegular;
	  font-size: 1.2em;
	  color: var(--vbeblau);
	}


	a.cell-link:hover, a.cell-link:focus {
		color:var(--vbegruen);
	}

	a.cell-link-inactive {
	  font-family: FFQuadraatSansWebRegular;
	  font-size: 1.2em;
	  color: var(--vbegrau);
	}

	.inactive-menu-header {
		font-family: FFQuadraatSansWebRegular;
		font-size: 1.2em;
		color: var(--vbegrau);
	}

	.inactive-menu-text {
		font-family: FFQuadraatSansWebRegular;
		color: var(--vbegrau);
	}
	.cellcontainer {
		margin-left: 5em;
	}
	
	.navbar-mobile {
		margin-left: -6em;
	}
	
	li.nav-cell {
		margin-left: -2em;
	}
	
	p.nav-cell {
		color: var(--vbeblau);
		font-size: 1.1em;
	}
	
	.logo-style {
		margin-bottom: 1em;
		margin-left: -3em;
	}
	
	a.cell-link {
		margin-top: 10px;
		font-size: 1.4em;
	}
	
	.service-menu {
		float: right;
		margin-top: 40px;
		margin-left: 1em;
		font-size: 1em;
	}
	
	.navbar-brand>img {
		margin-left: 20px;
	}
	.smallbutton_white {
		margin-bottom: 1em;
	}
}

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) {
	
	.logo-style {
		margin-bottom: 1em;
	}
	
	.navbar-brand>img {
		margin-left: 40px;
	}
	
	.menucell {
		width: 240px;
		height: auto;
		background-color: #f4f4f4ff; 
		white-space: normal;
		margin-bottom: 1em;
		border-radius: 10px;
		font-family: FFQuadraatSansWebRegular;
		font-size: 1.1em;
		padding: 2em;
	}
	
	li.nav-cell {
		margin-left: -1em;
	}
	.cellcontainer {
		margin-left: -1em;
	}
	.navbar-header {
		width: 18em;
		margin-top: 1em;
	}
	
	.navbar-default .navbar-nav > li > a{
		font-size: 1.4em;
		font-weight:600;
		letter-spacing:1px;
		margin-top: 0.5em;
	}
	.service-menu {
		margin-top: 0.7em;
		margin-right: 0em;
		margin-left: 0.8em;
		font-size: 1.5em;
		display: block;
		float: left;
	}
}
/*Mobile Devices like Cellphones etc. */
@media (max-width: 728px) {
  .megamenu{
    margin-left: 0 ;
    margin-right: 0 ;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .service-menu {
	 float: left;
	 margin-top: 1.8em;
	 margin-left: 0em;
	 margin-right: 1em;
	 font-size: 1.5em;
	}
  .navbar-nav .open .dropdown-menu .dropdown-header{
	color:#fff;
  }
  .menucell {
		width: 320px;
		height: auto;
		background-color: #f4f4f4ff; 
		white-space: normal;
		margin-bottom: 1em;
		border-radius: 10px;
		font-family: FFQuadraatSansWebRegular;
		font-size: 1em;
		padding: 2em;	
	}
	.cellcontainer {
		margin-left: -0.5em;
	}
	
	.logo-style {
		margin-bottom: 1em;
		margin-left: -3em;
	}
	
	a.cell-link {
		margin-top: 10px;
		font-size: 1.5em;
	}
}