@charset "utf-8";

/* @import url("fonts/open-sans/font.css");
@import url("fonts/lato/font.css"); */

@import url("fonts/open-sans-condensed-fontfacekit/web-fonts/opensanscondensed_light_macroman/stylesheet.css");


:root {
  --gap: 50px;
  --color-main: black;
  --color-headline: #ffd800;
  /*--navigationOffset: 64px;*/
}

strong {
    font-weight: bold;
}

/*

[data-structure="entity"]>[data-structure="field"] {
    display: inherit; 
}
*/

#banner [data-view="pages_items"]>[data-module="Container"]:first-child [data-module="Html"] {
    height: 70rem;
    min-height: 400px;
}

.parallax-window {
    /*max-height: 100vh;*/
}


.bg_color {
    background-color: #be9f55;
    color: white;
}
.bg_color *{
    color: white;
}

.bg_color_transparent {
    background-color: rgba(41, 40, 43, 0.44);
    color: white;
    padding: 2em;
}
.bg_color_transparent *{
    color: white;
}



.bg_dark {
    background-color: #29282b;
    color: white;
    /*  padding: 2em; */
    background-color: var(--color-main);
}
.bg_dark *{
    color: white;
}

.bg_light {
    background-color: #f3f7f7;
}

.bg_white {
    padding: 2em;
    background-color: white;
    color: #9d9d9c;
}
.bg_white * {
    color: #9d9d9c;
}

.border-top {
    border-top: 6px solid #be9f55;
}
.border-bottom {
    border-bottom: 6px solid #be9f55;
}


html{
	/* for ipad 
	min-width:1280px;

	height:100%;
	
	*/	
}

body
{
	/* for ipad 
	position:relative;
*/
	font-family: "open_sanscondensed_light", sans-serif;
	/* font-family: 'Lato'; */
	padding:0px;
	margin:0px;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5em;
	color: #5d5d5d;
	color: var(--color-main);
	letter-spacing: 0.01em;
}

html[data-dimension="sm"] body {
    font-size: 20px;
}

html[data-dimension="xs"] body {
    font-size: 18px;
}

#content {
    /*padding-top: 3em;  for navigation */
    margin-top: -3.5em;
    /* text-shadow: 2px 2px 4px black; */
}


#content .bg_light{
   text-shadow: none;
}

#content [data-variant="contracts_public"][data-structure="entity"] {
   text-shadow: none;
}


.grayImageOnly img {
	 filter: grayscale(50%);
}

.grayImage img {
	 filter: grayscale(50%);
	 transition: filter 5s, transform 5s;
	 
}

.grayImage:hover img{
	 filter: grayscale(0%);
	  transform: scale(1.05);
}

.grayImageLight img {
    filter: grayscale(50%);
    transition: filter 5s, transform 5s;
    
}

.grayImageLight:hover img{
    filter: grayscale(0%);
     transform: scale(1.05);
}

.fatPanel [data-module="Html"]{
    color:  white;
    /* color: var(--color-headline); */
    /* color: black; */
    font-weight: bold;
    z-index: 1;
    text-align: center;
    line-height: 2em;
    font-size: 135%;
    padding: 8em 3em;
}

#banner img{
/*	 filter: grayscale(95%); */
}

#banner [data-module="Container"] {
    min-height: 100rem;
}


.logo
{
    position:absolute;
    /*right:11px;*/
    left: 0px;
    /* top: 0px; */
    bottom: 0.27em;
    /* margin-top: -0.75em; */
    /* background-image:url(gfx/logo.png); */
    /* background-repeat: no-repeat; */
    /* background-size: auto 100%; */
    /* background-position: left top; */
    width: 6em;
    /* height: 100%; */
    /* display: inline-block; */
    /* background-origin: content-box; */
    padding-top:10px;
    padding-bottom:10px;
    z-index: 1000;
    transition: opacity 1s;
    opacity: 0;
}

body.notAtTop .logo
{
    opacity: 1;
}

.mobile_logo {
    /* height: 48px; */
    width: 6em;
    /* background-image: url(gfx/icon.png); */
    /* background-repeat: no-repeat; */
    /* background-size: auto 100%; */
    /* background-position: left top; */
    /* display: inline-block; */
    /* background-origin: content-box; */
    /* padding-top: 2px; */
    /* padding-bottom: 2px; */
    /* margin-left: 1em; */
    /*margin-right: 1em;*/
    position: absolute;
    top:  4px;
    left: 25px;
}

.mobile_title {
    vertical-align: top;
    display: inline-block;
    line-height: 48px;
    font-size: 18px;
    /*font-weight: bold;*/
    color: white;
    margin-right: -5em;
}

html[data-dimension="xs"] .logoRow {
    text-align: center;
    /* margin-top: -10em; */
    top: 101px;
    font-size: 85%;
}
/*
html[data-dimension="xs"] .banner_slogan {
    font-size: 150%;
    text-align: center;
    margin-top: 70px;
    margin-bottom: -47px;
}
*/
html[data-dimension="xs"] .banner_slogan div{
    /*float: none !important;*/
    display: none;
}

.banner_logo {
    position: absolute;
    width: 400px;
    bottom: 100px;
}

html[data-dimension="sm"] .banner_logo {
    width: 48rem;
    left: 9rem;
    top: 25rem;
}

html[data-dimension="xs"] .banner_logo {
    width: 45rem;
    top: 28rem;
    left: 10rem;
    /* margin-left: -229px; */
    position: absolute;
}


.nav_icon {
    position: absolute;
    width: 60px;
    margin-top: 3px;
    margin-left: 1em;
    opacity: 0;
    transition: opacity 2s;
}
html[data-dimension="sm"] .nav_icon {
    width: 45px;
    margin-top: 1px;
    margin-left: 1.1em;
}



#nav-main{
    position: fixed;
    top: 0px;
    z-index: 100;
    /* text-align: right; */
    transition: all 2s;
    padding-top: 3em;
    padding-bottom: 1em;
    /* font-size: 120% !important; */
    /* font-size: 2em; */
}

body.notAtTop #nav-main{
    /* background-color: rgb(28 28 28 / 90%); */
    background-color: rgb(0 0 0 / 90%);
    box-shadow: rgb(174 146 78 / 15%) 0px 13px 90px;
    padding-top: 0.5em;
    padding-bottom: 0.05em;
    font-size: 100%;
}

#nav-main>div.container{
    transition: all 2s;
    min-height: 3.25em;
}
body:not(.notAtTop) #nav-main>div.container{
    padding-left: 0 !important ;
}




.navbar:after{
}
.navbar {
    /*background-color: white;*/
    width: 100%;
    z-index: 100;
    /* background-color: rgba(134, 134, 134, 0.75); */
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* border-bottom: 6px solid var(--color-headline); */
    /*top: 0px;*/
    /*margin-top: -3.5em;*/
    /*position: sticky;*/
    /*margin-top: -3.5em;*/
    /* top: -3.5em !important; */
    transition: background-color 2s;
    /* line-height: 0.95em; */
}


.navbar[data-stickerstatus="sticking"] {
    background-color: var(--color-headline);
    border: 0px none;
    margin-top: 0em;
    top: 0 !important;
    overflow: hidden;
}

.navbar li:first-child a{
    transition: color 2s;    
}

.navbar[data-stickerstatus="sticking"] li a {
    color: white;
}



/*
NAV LOGO

.navbar[data-stickerstatus="sticking"] li:first-child a{
    color: transparent;
}

.navbar[data-stickerstatus="sticking"] .nav_icon{
    opacity: 1;    
}*/


#myNavbar {
	vertical-align: top;

        text-align: center;
        
        
        /*padding-top: 3em;*/
        /*transition: padding 1s;*/
        
        /*background-color: #e3091740;*/
        /*margin-top: -3.5em;*/
        z-index: 101;
        
       

}

body.notAtTop #myNavbar {
        /*padding-top: 1em;*/
}


html.width-sm #myNavbarMobile {
    display:none !important;
}
#myNavbarMobile a:before{
    display: none;
}

html[data-dimension="xs"] .navbar:not(.mobile)
{
    display: none;
}
html[data-dimension="xs"] .navbar:not(.mobile)>*
{
    display: none;
}



#content:after
{
	display:none;
}



/*

html[data-dimension="xs"] #login
	{
		top:42px;
		position:fixed;
		display:none;
	 	padding-top:25px;
	 	padding-bottom:30px;
	 	width:100%;
	 	left:0px;
	 	padding-left:15px;
	 	
	 	background-image:url(gfx/header_panel_pattern.png);
		background-repeat:repeat-x;
		background-size: 100% 100%;
	 	display:none;
   			
	}*/

html[data-dimension="xs"] 	.user_menu {
	    left: 170px;
	    top: 67px ;
    	display:none;
        
}	
	
html[data-dimension="xs"] 	.navbar.mobile
{
        top: 0px !important;
        background: rgba(0, 0, 0, 0.5);
        /*display:none;*/
        /* border-bottom: 4px solid #be9f55; */
        /*min-height: 100px;*/
        position: fixed;
        /* padding: 20px; */
        /* height: 77px; */
        /* background: rgba(255, 255, 255, 0.8); */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* animation: headerIntro 500ms; */
        /* animation-timing-function: cubic-bezier(0.1, 0.87, 0.35, 0.965); */
        -webkit-box-shadow: 0px 14px 53px -16px rgb(0 0 0 / 25%);
        -moz-box-shadow: 0px 14px 53px -16px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 14px 53px -16px rgb(0 0 0 / 25%);
}

#myNavbarMobile {
        padding-bottom:20px;
        /* background-color: #29282b; */
        padding-top: 2em;
        display: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
}
	
	
	
html[data-dimension="xs"] 	#myNavbar>ul>li
	{
		display:block;
		float:none;
	}
	
html[data-dimension="xs"] 	#mainHeader
	{
		height:50px;
		top: -1px;
		margin-top:0px;
		position:fixed;
		width:100%;
	}

	
html[data-dimension="xs"] 	.logo
	{
		position:absolute;
		top:-15px;
		left:11px;
		height: 57px;
		width: 61px;
		background-image:url(gfx/icon.png);

	}
		





html.width-sm .user_menu {
	   	display:block !important;
	}		

	
html.width-sm 	#btnNavToggle {
		display:none;
	}
		
	
	
html.width-sm 	#myNavbar>ul
	{
		display:inline-block;
	}
	
html.width-sm 	#mainHeader
	{
		height:100px;
		margin-bottom: -5px;  
		margin-top:50px;	
	}	
	
html.width-sm 	.logo
	{
		/* padding-top:5px; */
		/* padding-bottom:5px; */
		/*		height:100px;	
	 	width: 354px;*/
		bottom: 0.11em;
		/* opacity: 0; */
		width: 5em;
		margin-left: -1em;
	}	
	
/*html.width-sm 	.navbar {
		display:block !important;
	}*/

html.width-sm .navbar.mobile {
    display: none;
}



html[data-dimension="sm"]	#btnLoginToggle {
			margin-top:33px !important;
			margin-left:0px !important;
			float:left !important;
		}	
	
html[data-dimension="sm"]		#login
		{
			top:4px;
		 	width:100%;
		 	left:50px;
		 	padding-left:15px;
		 	display:none;		 		   			
		}	
html[data-dimension="sm"]		#login .login_label
		{
			display: none;
		}
html[data-dimension="sm"]		#login .login_submit
		{
		    left: 200px;
		    position: absolute;
		    top: 55px;
		}
		
html[data-dimension="sm"]		.user_menu {
		    left: 180px;
		   	top: 15px;
		}		
	


html.width-md	#login
	{
		display:block !important;
	}		
	
html.width-md	#btnLoginToggle {
		display:none;
	}		

html.width-md	.user_menu {
	    left: 180px;
	    top: 18px;
	}		

	
	
html.width-md	#mainHeader
	{
		height:156px;
		margin-bottom: -7px;  
		margin-top:50px;	
	}	
	
html.width-md	.logo
	{
            /* padding-top: 10px; */
            /* padding-bottom: 10px; */
            /*margin-top:12px;*/
            /*		height:150px;
		width: 504px;	*/
            bottom: -0em;
            width: 5em;
            margin-left: 0em;
 }

html.width-md	#login
	{
	 	top:8px;
	}




html.width-lg	#mainHeader
	{
		height:186px;
		margin-bottom: -9px;  
		margin-top:50px;	
	}	
	
html.width-lg	.logo
	{
	
/*		height:173px;	
		width:554px;*/
	
width: 6.5em;
	}	


html.width-lg	#login
	{
	 	top:25px;
	}
	
html.width-lg	.user_menu {
	    left: 180px;
	    top: 35px;
	}





	
nav ul
{
	padding:0px;	
	margin: 0px;
        
        overflow: visible !important;
}

nav ul li
{
	list-style: outside none none;
        display: inline-block;
        float:none !important;
        
}



.navbar-nav > li > a {
    color: rgb(192 190 190);
    color:  white;
    display: block;
    font-size: 20px;
    text-decoration: none;
    padding: 0.5em;
    z-index: 2;
    text-transform: uppercase;
    font-weight: normal;
    transition: color 0.5s;
}

.navbar-nav > li:first-child > a{
    padding-left: 0px;
    color: var(--color-headline);
}

html[data-dimension="md"] .navbar-nav > li > a {
    font-size: 16px;
}

html[data-dimension="sm"] .navbar-nav > li > a {
    font-size: 12px;
    /* padding: 0.5em; */
}
html[data-dimension="xs"] .navbar-nav > li > a {
    font-size: 120%;
    padding: 0.5em;
    text-transform: uppercase;
    text-align: center;
    /*background-color: rgb(41, 40, 43);*/
    /* font-weight: bold; */
}
html[data-dimension="xs"] .navbar-nav > li > a:after {
    display: none;
}


/*
.navbar-nav > li > a:before {
        background-color: #6e6e6e;
        content: " ";
        position: absolute;
        display: inline-block;
        top: 3em;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: -1;
        box-shadow: 3px -1px 3px #00000021;
        transition: top 0.5s;
        background-image: url(gfx/navi-shine.png);
        background-position: bottom right;
}

/*
.navbar-nav > li > a:focus:before, .navbar-nav > li > a:hover:before {
        top: -1em;      
       
}


.navbar-nav > li > a:after, .navbar-nav > li > a:after {
    
    content: "\f0d8";
    font-family: "FontAwesome";
    color: var(--color-headline);
    text-shadow: none;
    position: absolute;
    bottom: -0.33em;
    font-size: 0.7em;
    left: 50%;
    margin-left: -0.25em;
    opacity: 0;
    transition: font-size 0.5s;
}


.navbar-nav > li > a:focus:after, .navbar-nav > li > a:hover:after {
    opacity: 1;
}
*/




/*
.navbar-nav > li.active > a:before {
        background-color: #29282b;
        content: " ";
        position: absolute;
        display: inline-block;
        top: -1em;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: -1;
        box-shadow: 3px -1px 5px #00000042;
        
        transition: top 0.5s, background-color 0.5s;  
        
        background-image: url(gfx/navi-shine.png);
        background-position: bottom right;
        
}
*/


.navbar-nav > li > a:focus, .navbar-nav > li > a:hover {
	/*
	background-color: rgba(0,0,0,0.4);
	*/
	/*background-color: #d3e7f9;*/
	/*text-shadow: 4px 3px 2px #0a1843;*/
	/* color: white; */
	color: var(--color-headline);
}


.navbar-nav > li.active > a {
	color: white;
        /*font-weight: bold;*/
        /*text-shadow: 4px 3px 2px #0a1843;*/
}


html[data-dimension="xs"] .navbar-nav > li.active > a {
    color: #be9f55;
}
html[data-dimension="xs"] .navbar-nav > li > a:focus, html[data-dimension="xs"]  .navbar-nav > li > a:hover {
    color: #be9f55;
}


.navbar-default {
    background-color:transparent;
}

.navbar-default{
	border-color: #cc0000;
}



.navbar-default #btnNavToggle:hover, .navbar-default #btnNavToggle:focus, #btnLoginToggle:hover, #btnLoginToggle:foucs {
    background-color: #cc0000;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
	background-color: #ff0000;
	
}



#btnLoginToggle:before{
	content: "";
}



#btnNavToggle:before{
	content : "";
}



#btnNavToggle, #btnLoginToggle {
	background-color: rgba(0,0,0,0.6);
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    float: right;
    margin-left:8px;
    margin-top: 7px;
    padding: 6px;
    position: relative;
    color:white;
    font-family: "FontAwesome";   
    font-size:17px; 
    width: 34px;
}







td{
	vertical-align:top;
}








#menu
{
	margin: 0px auto;
	height:100px;
	/*
	width:1200px;
	*/
	padding-top:10px;
	font-size:18px;
}



.menu_group 
{
	
	margin-right:0px;	
	margin-left:0px;
/*	
	border:#F00 solid 1px;
*/
}



.menu 
{
	display:inline;	
/*	
	border:1px solid;
	*/

}






.menu[selected="true"] .menu_group
{
	display:block;
}

.menu[selected="false"] .menu_group
{
	display:none;	
}




#menu a
{
	
	padding-left:0px;
	padding-right:24px;
	
	height:74px;
	
	display:inline-block;
	
	text-transform:lowercase;	
	
	
}


	

#menu a:hover
{
	color:#00cc0e;
}


.menu a[selected="true"] 
{
	color:#00cc0e;
	
}


#menu a[selected="false"] 
{
	color:#FFFFFF;

}

#layout_bottom {
    /* font-size: 80%; */
    /* padding-top: 3em; */
    /* padding-bottom: 3em; */
    /* border-top: 7px solid white; */
}

#layout_bottom a {
    color: white;
    text-decoration: none;
    transition: all 0.5s;
}
#layout_bottom a:hover {
    /* text-decoration: underline; */
    color: var(--color-headline);
}

#content [data-module="Container"]:not(.noPadding) {
    padding-top: 7rem;
    padding-bottom: 7rem;
}
    
h1, h2, h3 {
    color: inherit;
    font-weight: bold;
}

h1 {
    font-size: 160%;
    
}



h2{
    font-size: 150%;
    margin-bottom: 0.25em;
}
h3{
    font-size: 110%;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.1em;
    padding: 0.4em 0.75em;
    margin: 0.5em 0em;
    color: black;
    background-color: var(--color-headline);
    text-shadow: none;
}

#content a {
    color: var(--color-headline);
    text-decoration: none;
    /*font-variant: small-caps;*/
}

#content a:hover {
    text-decoration: underline;
}



[data-view="challenges"][data-field="title"]{
    color: #1e5a93;
    font-weight: bold;
    font-size: 1.2em;
/*    font-variant: small-caps;
    font-family: 'Source Serif Pro';    */
}

[data-view="challenges"] .stats>*{
    display: inline-block;
    margin-right: 1em;
}

[data-view="challenges"][data-structure="entity"]:hover .stats {
    color: #1e5a93;
}


[data-view="users_challenges"] .title {
    color: #1e5a93;
    font-weight: bold;
    font-size: 1.2em;
}






.wikiEntry {
    padding: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #e1e1e1;
}
.wikiEntry:hover {
    background-color: #f0f6fb;
    border: 1px solid #1e5a93;
}

.wikiEntry .searchTitle{
    color: #1e5a93;
    font-weight: bold;    
}

.wikiEntry .searchSource{
    font-style: italic;
    font-size: 70%;
}
.wikiEntry .searchSource .searchmatch{
    color: #1e5a93;
}


.wikiThumb {
    width: 10em;
    height: 10em;
    display: inline-block;
    background-size: cover;
    background-position: center center;
    
}

[data-view="tasks"][data-structure="entity"] {
    padding: 1em;
    border: 1px solid #e1e1e1;
}









.ratingIcon {
    margin: 1px;
}

input {
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    color: #1e5a93;
    border: 1px solid #4c93d6;
    max-width: 100%;
}

#content .editable {
    min-height: 2.5em;
    
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    /*color: #1e5a93 !important;*/
    color: inherit;
    border: 1px solid var(-color-main);
    
    margin-bottom: 1em;
}


.login .login_header {
    display: none;
}





.imageRhomboid {
    width: 500px;
    height: 100px;
    white-space: nowrap;
}

.imageRhomboid>div {
    display: inline-block;
    transform: skew(-20deg);
    overflow: hidden;
    width: 100px;
    height: 100px;    
    
    box-shadow: 0px 0px 0px #1e5a93;
    transition: box-shadow 0.5s;
    position: relative;
    /*outline: 1px solid #1e5a9369;*/
}

.imageRhomboid>div:hover {
    box-shadow: 5px 3px 12px #1e5a93;
    z-index: 1;
}

.imageRhomboid>div>div {
    position: absolute;
    background-size: cover;
    transform: skew(20deg);
    top: 0px;
    bottom: 0px;
    left: -20%;
    right: -20%;
}



.modalBG {
    background-color: #000000f5;
}






.hexagon {
  position: relative;
  width: 100px; 
  height: 57.74px;
  margin: 28.87px 0;
  /*background-image: url(http://csshexagon.com/img/meow.jpg);*/
  background-size: auto 115.4701px;
  background-position: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 14.64px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 100.0000px;
  height: 57.73502691896258px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -35.3553px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -35.3553px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 100.0000px;
  height: 57.7350px;
  z-index: 2;
  background: inherit;
}



.courses.courses_day{
    background-color: white;
    padding: 2em;
}

.courses.courses_day strong {
    display: inline-block;
    width: 10em;
    text-align: right;
    padding-right: 2em;
}

.courses a {
    color: inherit !important;
    text-decoration: underline !important;
}



.kursbeschreibung p {
    background-color: white;  
}

.kursbeschreibung p:hover {
    color: #9d9d9c;
}

.kursbeschreibung strong {
    color: #be9f55;    
}




.facebook_panel {
    text-align: center;
    padding: 5em;
    background-color: #29282b;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.5s;
}

.facebook_panel:hover{

    background-color: #be9f55;

}


.blink{
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1s, transform 1s; 
    
}

.blink[observed-visible="true"]{
    opacity: 1;
    transform: scale(1);    
}




.banner_slogan {
    /* box-shadow: 0px 0px 50px -2px rgba(0,0,0,0.75); */
    /* box-shadow: 0px 0px 50px -2px rgba(255,255,255,0.75); */
    /* box-shadow: 0px 0px 130px 46px rgba(255,255,255,1); */
    /* box-shadow: 0px 0px 196px 127px rgb(255 255 255 / 49%); */
    /* background-color: rgba(255, 255, 255, 0.12); */
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    /*text-transform: uppercase;*/
    font-size: 140%;
    line-height: 2.8em;
    font-weight: normal;
    /*    padding-top: 0.5em;
    padding-bottom: 0.5em;*/
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    /*text-align: right;*/
    /*height: 2.4em;*/
    position: fixed;
    width: 100%;
    top: 0px;
    height: 0px;
}

html[data-dimension="xs"] .banner_slogan {
    /* box-shadow: 0px 0px 100px 61px rgb(255 255 255 / 50%); */
}

.logoRow {
    position: absolute;
    top: 3rem;
    left: 0px;
    width: 100%;
    overflow: visible !important;
}

html[data-dimension="sm"] .logoRow {
    top: 5rem;
}
.logoRow *{
    overflow: visible !important;
}

.logoRow .banner_logo {
    /*    position: absolute;
    width: 264px;
    bottom: -138px;
    left: 14vw;*/
    position: fixed;
    width: 36rem;
    top: 19rem;
    left: 0rem;
    margin-left: var(--width-margin);
    }



.form .column, #subscribe_sommerfest .column{
    display: inline-block;
    width: 8em;
}

.form input, #subscribe_sommerfest input{
   color: #249bab;
}

.form [data-valid="false"], #subscribe_sommerfest [data-valid="false"] {
    color: red;
    border: 1px solid red;
}



.button {
    display: inline-block;
    background-color: white;
    padding: 1em 1.5em;
    color: var(--color-main);
    /* font-weight: 300; */
    cursor: pointer;
    transition: all 0.5s;
}
.button:hover {
    box-shadow: 4px 4px 4px rgba( 0,0,0, 0.4);
}






[data-variant="contracts_public"][data-structure="set"] {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: center;
}

[data-variant="contracts_public"][data-structure="entity"] {
    background-color: rgba(243, 247, 247, 0.75);
    /*border: 1px solid #5d5d5d;*/
    padding: 2em;
    padding-top: 4em;
    cursor: pointer;
    margin: 1.5em;
    margin-bottom: 1em !important;
    margin-top: 1em !important;
    border-radius: 0em;
    /*transform: scale(0.9);*/
    min-height: 30rem;
    width: 500px;
    max-width: 100rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s;
    text-align: center;
}


[data-variant="contracts_public"][data-structure="entity"]:hover {
    background-color: var(--color-headline);
    color: white;
     /*border-radius: 1em;*/
    transform: scale(1.05);
    z-index: 10;
    border-radius: 10em;
}

[data-variant="contracts_public"][data-structure="entity"][data-value-highlight="1"] {
    
    color: white;
    background-color: var(--color-headline);
}




[data-variant="contracts_public"][data-structure="entity"] .button {
background-color: white;
color: var(--color-headline);
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1.5em;
}

#content  [data-variant="contracts_public"][data-structure="entity"]:hover .button {
    color: var(--color-headline);
    background-color: white;
}

#content [data-variant="contracts_public"][data-structure="entity"][data-value-highlight="1"] .button{
    
    color: var(--color-headline);
    background-color: white;
}

#content  [data-variant="contracts_public"][data-structure="entity"] .button:hover {
    background-color: #4c4c4c !important;
	color: white !important;
}


[data-variant="contracts_public"][data-structure="entity"] .price_value {
    font-size: 300%;
    font-weight: bold;
    transition: transform 2s;
}

[data-variant="contracts_public"][data-structure="entity"]:hover .price_value{
    transform: scale(1.3) !important;
}





.conditions {
    background-color: #f3f7f7;
    /*border: 1px solid #5d5d5d;*/
    padding: 2em;
          padding-top: 4em;
    transition: background-color 2s, color 2s, border-radius 2s, transform 2s;
    cursor: pointer;
    margin-bottom: 1em !important;
    margin-top: 1em !important;
        border-radius: 3em;
          transform: scale(0.9);
          min-height: 30rem;
}
.conditions .price{
    font-size: 250%;
    font-weight: bold;
    transition: transform 2s;
}
.conditions:hover .price{
    transform: scale(1.3);
}


.conditions .details{
    font-size: 75%;
}

.conditions:hover{
        background-color: #be9f55;
        color: white;
         /*border-radius: 1em;*/
         border-radius: 100%;
          transform: scale(1);
          z-index: 10;
         
}




#content .button {
    background-color: var(--color-headline);
    border-radius: 4px;
    color: var(--color-main);
    /*font-weight: 400;*/
    text-align: center;
    padding: 1em 1.5em;
    display: inline-block;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.5s, transform 0.5s, color 0.5s;
}

.button img{
    height: 2.4em;
    width: auto;
    cursor: pointer;
    margin-right: 1em;
}
.button>*{
    vertical-align: top;
    line-height: 1.2em;
    text-align: left;
    display: inline-block;  
    text-transform: uppercase;
    
}
#content .button:hover {
    background-color: #f5a300;
    transform: scale(1.1);
    color: white;
    text-decoration: none;
}

.cookieNote{
    font-size: 90%;
}
.cookieNote .btnCookieOK:hover, .cookieNote .btnCookieInfo:hover {
    background-color: #be9f55;
}




.accordion p strong {
    color: black;
}

.accordion p {
    display: block;
    padding: 1em;    
    color: transparent;
    max-height: 3.25em;
    transition: color 1s, max-height 2s, box-shadow 1s;
    overflow: hidden;
    cursor: default;

    /* padding: 2em; */
    background-color: rgb(255 255 255 / 86%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* color: black; */
    text-shadow: none;
    box-shadow: 5px 5px 40px #00000036;
}

.accordion p:hover {
    color: var(--color-main);
    max-height: 50em;
box-shadow: 5px 5px 10px #000000;
}

.shadow_box {
	box-shadow: 5px 5px 22px black;
}



.aktion {
    background-color: #29282b;
    color: white;
   /* padding: 2em; */
}
.aktion [data-module="Picture"]{
 	max-width: 100%; 
	margin: auto; 
	width: 800px;
	box-shadow: 5px 5px 22px black;
}

.team img{
    width: 100%;
    height:auto;
    box-shadow: 5px 5px 9px #bbbbbb;
    transition: transform 0.5s, box-shadow 0.5s ;
}

.team img:hover{
    transform: scale(1.05);
}

.team p {
    margin: 0px;
}

.team [data-module="ContainerItem"] {
    padding: 0.5em;
}

.team p:nth-child(2) {
    position: absolute;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    padding: 1.3em 1em;
    /* background-color: rgba(190, 159, 85, 0); */
    color: white;
    pointer-events: none;
}

.team p:nth-child(2):first-line {
    font-weight: bold;
}




.permission_dialog {
    text-align: center;
    padding: 2em 3rem;
    width: 700px;
    max-width: 80rem;
    max-height: 90vh;
    overflow-y: auto;
    font-size: 90%;
    background-color: #29282b;
    color: white;
}

.permission_dialog a {
    color: #be9f55;
}

.permission_dialog h1, .permission_dialog h2 {
    margin-top: 0px !important;
}

.permission_type_panel .checkContainer {
    float: left;
    padding-top: 0.4em;
    padding-right: 3rem;
    width: auto;
}

.permission_logo {
    width: 15em;
    height: auto;
    margin-top: 1em;
    margin-bottom: 1.5em;
    display: none;
}
.permission_type_panel input[type="checkbox"] {
    transform: scale(2);
}

.permission_type_panel {
    padding: 1em;
    /* background-color: #f9f9f9; */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: left;
}

.permission_type_panel .permission_title {
    font-weight: bold;
    font-size: 120%;
}
.permission_type_panel .infoContainer {
    overflow: hidden;
}

.permission_type_panel {
    padding: 1em;
    /* background-color: #f9f9f9; */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: left;
}

.permission_denied {
    background-color: #29282b;
    color: white;
    padding: 2em;
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.6);
}




#order .editable {
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.75em;
    color: var(--color-main);
    border: 1px solid #8c8c8c;
    max-width: 100%;
    margin-top: 1em;
    margin-bottom: 1.5em;
    border-radius: 1px;
    background-color: white;
    font-size: 130%;
}

#order [data-structure="field"][data-label]:not([data-type="boolean"])::after {
    color: var(--color-main);
    left: 0.2em;
    top: 0.2em;
    font-weight: bold;
}

#order [data-structure="field"][data-label][data-type="boolean"]::after {
    font-size: 80%;
}





[data-toggle-class] {
	max-height: 0px;
    transition: max-height 1s, opacity 0.5s;
    opacity: 0;
	overflow: hidden;
}
[data-toggle-class].expanded {
	max-height: 2000px;
	opacity: 1;
}

[data-toggle-class] + a:after {
	content: "weiterlesen";
	/* float: right; */
	text-align: center;
	margin: auto;
	display: block;
	width:  100%;
	position: relative;
}


[data-toggle-class].expanded + a:after {
	content: "ausblenden";
}


[data-toggle-class] + a {
    margin: auto;
}



.shadow{
	
box-shadow: 0px 0px 196px 127px rgba(0,0,0, 0.5);
	
z-index:  100;
	
/* height: 100px; */
	
position: fixed;
	
width: 100%;
}


#layout_fixed{
	 padding-top: 1.2em;
	 position: fixed;
	 width: 100%;
	 bottom: 0px;
	 left: 0px;
	 text-align: center;
	 padding-bottom: 1.2em;
	 white-space:  nowrap;
	 z-index: 100;
}

#layout_fixed a{
	color: white;
	font-size: 190%;
	margin: 0.5em !important;
}




.gym_selector {
    color: white;
    /* padding-left: 0.6em; */
    margin-bottom: -0.75em;
    z-index: 200;
    position: relative;
    font-size: 100%;
}


.gym_selector a {
    color: var(--color-headline);
    text-decoration: none;
    text-transform: uppercase;
}

.label{
    display: inline-block;
    background-color: white;
    background-color: var(--color-headline);
    color: var(--color-headline);
    color: black;
    font-size: 0.5em;
    padding: 0.5em 1em;
    /* margin-top: 0.8em; */
    margin-top: 0.7rem;
    border-radius: 5px;
    line-height: 1em;
    font-weight: bold;
}


.text_shadow{
    text-shadow: 1px 1px 4px black;
    color:  white;
}

.panel_white{
        padding: 2em;
        background-color: rgb(255 255 255 / 86%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: black;
        text-shadow: none;
        box-shadow: 5px 5px 40px #00000036;
}




/* CALENDAR */

.calendar .cal_title {
    min-height: 1.5em;
}

.calendar_customer.calendar {
    color: white;
	background-image: none;
}

/* PRINTING BLACK IF NOT LOGGED IN*/
body:not(.group_ALL-USERS).printing .calendar{
        color: black;
        background-color: white;
        --color-headline: gray;
}

body.group_ALL-USERS.printing .calendar{
    	background-image: url(gfx/bg_calendar.jpg);    
}


body:not(.group_ALL-USERS).printing [data-view="calendars_events"][data-field="title"] {
    color: black;
}





.cal_event [data-structure="field"]{
    color: black !important;
}

.cal_event [data-field="title"] {
    font-weight: bold;
}