/* CSS Document */
html {
	height:101vh;
	background-image:url(../img/2018-02-02_11-31-43.jpg);
	background-size:cover;
	background-position:center top;
	background-attachment:fixed;

}

body {
    font-family:Roboto, Arial, Helvetica, sans-serif;
    font-size: calc(12px + (18 - 12) * (100vw - 350px) / (2400 - 350));
	line-height:1.5;
	color:#333;
	background-color:rgba(0, 0, 0, 0.3);
	height:101vh;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, table, ol, ul, form{
	margin-bottom:0.5em;
}

nav, h1, h2, h3{
	font-family:Quicksand;
}

header .inside, #container #main, footer .inside, header + .custom .inside {
	width:90vw;
	max-width:1000px;
	margin:auto;
}
#demo{
	margin-top:0em;
	background-color:#690034;
	margin-bottom:1em;
}

#demo h1, #demo p {
	margin:0;
	color:#ffbf5c;
	text-align:center;
	font-family:Quicksand;
}

#main {
	float:none;
}

#container{
	background-color: #fefefe;
	background-color: rgba(254, 254, 254, 0.85) ;

}

header {
	height: 8em;
}

header .inside {
	overflow:visible;
}

header .logo {
	overflow:visible;
}


/*header .logo figure{
	display:inline-block;
	padding:0.3em 1em;
	font-family:Roboto;
	font-size:2em;
	margin-top:3.3em;
	margin-left:-1em;
	color:#184273;
	background-color: transparent;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.7) 12.5%, rgba(255, 255, 255, 0.7) 87.5%, rgba(255, 255, 255, 0.0) );
	overflow:visible;
}*/

header .logo figure{
	display:inline-block;
	padding:0.3em 1em;
	margin-top:1.3em;
	margin-left:-1em;
	font-size:2em;
}

header .logo pre a,
.mobile_menu .logo pre a{
	color:#184273;
	text-decoration:none;
}

.mobile_menu .logo pre{
	display:block;
	padding:0.3em 1em;
	font-family:Roboto;
	font-size:2em;
	margin-top:1em;
	margin-left:0em;
	color:#184273;
	background-color: transparent;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.7) 12.5%, rgba(255, 255, 255, 0.7) 87.5%, rgba(255, 255, 255, 0.0) );
	overflow:visible;
	text-align:center;
}


header .mod_mobile_menu {
    display: block;
    width: 2.5em;
    padding: 0.3em 1em;
    font-family: Roboto;
    position: absolute;
    right: 0;
    top: 7.7em;
    z-index: 100;
}

header .mobile_menu_trigger span {
	display:block;
	width:2.5em;
	height:0.3em;
	margin: 0.3em 0;
	background-color:#fff;
	line-height:1;
	content:" ";
	cursor:pointer;
	transition: all 1s ease-in-out 0s;
	
}



.mobile_menu_trigger.active span:first-child {
    transition: all 1s ease-in-out 0s;
    transform-origin: 0% 0%;
    transform: translate(0.5em, 0.0em) rotate(45deg);
    width:90%;
}

header .mobile_menu_trigger.active span:nth-child(2) {
    display: none;
}

.mobile_menu_trigger.active span:nth-child(3) {
    transition: all 1s ease-in-out 0s;
    transform-origin: 0% 100%;
    transform: translate(0.5em, 0.9em) rotate(-45deg);
    width:90%;
}

header .mobile_menu_trigger.active .text {
	margin-top:0.9em;
	transition: none;
}

header .mobile_menu_trigger .text {
	color:#fff;
	background:transparent;
    transition: none;
}

.mobile_menu {
	background:#fff;
}

.lila .mobile_menu .inner {
	background-color:#4a0225;
	color:#fff;
	overflow:auto;
}

.mobile_menu .inner nav {
	padding:2em 2em 0 2em;
}

.mobile_menu .inner .logo {
	margin:2em;
}

.mobile_menu nav li span,
.mobile_menunav li strong{
	color:#fff;
}

header + .custom {
	background-color:#fefefe;
	background-color: rgba(79, 106, 143, 0.9);
	/*border-top: 2px solid #fefefe;*/
} 



.mobile_menu nav .level_1 :hover > a > span,
.mobile_menu nav .level_1 .active > strong,
.mobile_menu nav .level_1 .trail > a > span {
	color:#f39132;
}

.gruen header + .custom,
.gruen .mobile_menu .inner{
	background-color:#416d6a;
	background-color:rgba(65, 109, 106, 0.9);
	/*border-top: 2px solid #fefefe;*/
} 

#main-navigation nav .level_1 > .gruen:hover > a > span,
#main-navigation nav .level_1 > .gruen.active > strong,
#main-navigation nav .level_1 > .gruen.trail > a > span {
	color:#097270;
}

.gruen footer {
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em, rgba(65, 109, 106, 0.9) 2.5em, rgba(65, 109, 106, 0.9) 4em);
}

.dblau header + .custom,
.dblau .mobile_menu .inner{
	background-color:#2b326f;
	background-color:rgba(58, 64, 115, 0.9);
	/*border-top: 2px solid #fefefe;*/
} 

#main-navigation nav .level_1 > .dblau:hover > a > span,
#main-navigation nav .level_1 > .dblau.active > strong,
#main-navigation nav .level_1 > .dblau.trail > a > span {
	color:#3a4073;
}

.dblau footer {
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em,rgba(58, 64, 115, 0.9) 2.5em, rgba(58, 64, 115, 0.9) 4em);
}


.orange header + .custom,
.orange .mobile_menu .inner{
	background-color:#fe8659;
	background-color:rgba(254, 134, 89, 0.9);
	/*border-top: 2px solid #fefefe;*/
} 

#main-navigation nav .level_1 > .orange:hover > a > span,
#main-navigation nav .level_1 > .orange.active > strong,
#main-navigation nav .level_1 > .orange.trail > a > span {
	color:#e95300;
}

.orange footer {
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em, rgba(254, 134, 89, 0.9) 2.5em, rgba(254, 134, 89, 0.9) 4em);
}



.rot header + .custom,
.rot .mobile_menu .inner{
	background-color:#c34f5a;
	background-color:rgba(195, 79, 90, 0.9);
	/*border-top: 2px solid #fefefe;*/
} 

#main-navigation nav .level_1 > .rot:hover > a > span,
#main-navigation nav .level_1 > .rot.active > strong,
#main-navigation nav .level_1 > .rot.trail > a > span {
	color:#cb1f45;
}

.rot footer {
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em, rgba(195, 79, 90, 0.9) 2.5em, rgba(195, 79, 90, 0.9) 4em);
}


.lila header + .custom,
.lila .mobile_menu .inner{
	background-color:#690034;
/*	background-color:rgba(105, 0, 52, 0.9);*/
	/*border-top: 2px solid #fefefe;*/
} 

#main-navigation nav .level_1 > .lila:hover > a > span,
#main-navigation nav .level_1 > .lila.active > strong,
#main-navigation nav .level_1 > .lila.trail > a > span,
header nav .level_1 > .lila:hover > a > span,
header nav .level_1 > .lila.active > strong,
header nav .level_1 > .lila.trail > a > span{
	color:#690034;
}

.lila footer {
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em, #690034 2.5em, #690034 4em);
}

.lavendel header + .custom,
.lavendel .mobile_menu .inner{
	background-color:#6e537d;
	background-color:rgba(110, 83, 125, 0.9);
	/*border-top: 2px solid #fefefe;*/
} 

#main-navigation nav .level_1 > .lavendel:hover > a > span,
#main-navigation nav .level_1 > .lavendel.active > strong,
#main-navigation nav .level_1 > .lavendel.trail > a > span {
	color:#9130b1;
}

.lavendel footer {
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em, rgba(110, 83, 125, 0.9) 2.5em, rgba(110, 83, 125, 0.9) 4em);
}



#main {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	
}

#main .inside {
	flex-basis: 65%;
	padding:2em 0;
}

.home #main .inside {
	padding:0.5em 0;
}

.home figure {
	line-height:1;
}

/*#main .inside img{
	width:100%;
}*/

#main .inside .first .first h2:first-child {
	margin-top:0;
}
#main .inside a {
	color:#666;
}


#main .custom {
		flex-basis: 25%;
}

#main #main-navigation {
	padding:1em 0;

}

nav li >  a{
	text-decoration:none;
}


nav li span,
nav li strong{
	font-size:1.3em;
	color: #666;
	font-weight:normal;
	line-height:2em;
}



nav .level_1 > li:hover > a > span,
nav .level_1 > .active > strong,
nav .level_1 > .trail > a > span {
	color:#42699e;
}



#main-heading {
	width:90vw;
	max-width:1200px;
	margin:auto;
}

#main-heading h1{
	font-size:1.4em;
	color:#fff;
	line-height:1.3;
	margin:0.5em 0;
	font-family:Quicksand;
}

#main > .inside h2 {
	font-size:1.2em;
		color:#690034;
		font-weight:600;
}

#main > .inside h3 {
	font-size:1.0em;
		color:#690034;
}

#main > .inside ul {
	margin-left:1em;
	list-style:none;
}

#main  >.inside ul li{
	text-indent:-0.8em;
}

#main > .inside ul li:before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 0.5em;
  color: #184273; /* Or a color you prefer */
  
}
#main .logo {
	font-family: Quicksand;
font-size: 1.4em;
}

footer {
	background-color: #690034;
	color: #fff;
	font-size:0.833em;
	margin-bottom:4em;
}

/*footer {
	background-color: #fefefe ;
	background-color: rgba(254, 254, 254, 0.85) ;
	background-image: linear-gradient(to bottom, transparent 0%, transparent 2.5em, rgba(79, 106, 143, 0.9) 2.5em, rgba(79, 106, 143, 0.9) 3.5em);
	margin-bottom:4em;
}*/

footer .inside {
	text-align:center;
}

footer nav ul li {
	display:inline-block;
	padding:0 1em;
}

footer nav span,
footer nav strong {
	color: #1c2e43;
	font-size:1em;
}

footer .ce_text {
	line-height:2em;
	padding-top:0.5em;
}

footer  a{
	color:#fff;
	text-decoration:none;
}

@media (max-width:768px) {
	header {
		height: 8em;	
	}
	header .logo pre {
		margin-top:1em;
	}
	
	header + .custom .inside {
		width:80%;
		margin-left:0;
	}
	#main .custom {
		display:none;
	}
	#main .inside {
		flex-basis:100%;
	}
}