/* ---- RESET - Resets default browser CSS.  --------------- */

html {
  margin:0;
  padding:0;
  border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

em {
    font-style: italic;
}

#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9, #section10, #section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20 {
    position: relative;
    display: block;
    width: 100%;
    float: left;
    margin-top: -40px;
}

article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {
    display:block;
}
body {
  line-height: 1.5;
  background: #e8e8e8;
  color: #43474b;
  font-family: 'Nunito Sans', sans-serif;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  float:none !important;
}
table, thead, tbody, th, td, tr { 
    vertical-align: middle;
    border-collapse: collapse;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
}
td {
    display: table-cell;
}
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
:focus { outline: 0; }
img {
    width: 100%;
}
iframe {
    width: 100% !important;
}

.tooltip {
    display: none !important;
}

input[type="button"] {
    -webkit-appearance: none;
}

hr {
    margin-block-end: 0;
}

/* END Reset */




/* ----------   ///// UBIQ /////  ---------------- */



.has-animation {
    opacity: 0.01;
    -webkit-transition: translateY(80px);
    transform: translateY(80px);
    transform-origin: 50% 0;
    will-change: transform;
}

.has-animation-left {
    opacity: 0.01;
    -webkit-transition: translateX(-80px);
    transform: translateX(-80px);
    transform-origin: 50% 0;
    will-change: transform;
}

.has-animation-stagger {
    opacity: 0;
    -webkit-transition: translateX(300px);
    transform: translateX(300px);
}

.has-mask span > span {
    display: inline-block;
    margin: 0!important;
    line-height: 40px;
    height: 1.5;
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
}

p.has-mask span, p.has-mask span > span {
    line-height: 40px;
    height: 40px;
    margin-right: 10px;
}

figure.has-parallax {
    overflow: hidden;
    max-height: 45vw;
}



/*--------------------------------------------------
	03. Page Preloader
---------------------------------------------------*/	

	.preloader-wrap {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0; 
		bottom: 0;
		background: #000;
        z-index: 10003;
		text-align:center;
	}
    
    .preloader-bg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0; 
		bottom: 0;
		background-image: url(../images/preloader-bg.jpg);
        background-size: cover;
        z-index: 2;
		text-align:center;
        opacity: 0.2;
    }
    
    .outer {
        display: table;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

    .inner {
        display: table-cell;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
	
	.percentage {
		z-index: 100;
		color: #fff;
		opacity:1;
		font-weight: 700;
		font-size: 3.5vw;
		line-height: 90px;
        font-family: 'UniNeueBold';
	}
	
	.light-content .percentage {
		color:rgba(255,255,255,1);
	}
	
	.trackbar {
		width: 30vw;
		height: 1px;
		background: rgba(0,0,0,0.2);
		margin: 0 auto;
		margin-top:70px;
		position: relative;
		left:0;
		right:0;
		opacity: 1;
	}
	
	.loadbar {
		width: 0%;
		height: 1px;
		background: rgba(0,0,0,1); 
		position: absolute;
		top: 0px;
		left: 0;
		right:0;
		margin: 0 auto;
		overflow: hidden;
	}
	
	.hold-progress-bar {
		width: 0%;
		height: 3px;
		background: rgba(255,255,255,1); 
		position: absolute;
		top: 0px;
		left: 0;
		right:0;
		margin: 0 auto;
		overflow: hidden;
	}
	
	
	img.pageloader-R {
		position:relative;
		text-align:center;
		line-height:50px;
		width:100px;
		height:100px;
		font-size:40px;
		margin:0 auto;
		margin-top:80px;
	}
	
	img.pageloader-R:before {
		content:"(";
		position:absolute;
		height:10px;
		width:4px;
		top:32px;
		left:-6px;
		line-height:10px;
		font-size:10px;
		font-weight:700;
		color:#fff;
		-webkit-animation: movebefore 0.8s ease-out infinite;
		animation: movebefore 0.8s ease-out infinite;
	}
	
	@keyframes movebefore {
      0% {
		left:-6px;
		opacity:1;
      }
	  
	  100% {
        left:-12px;
		opacity:0
      }
	}
	
	.headphones:after {
		content:")";
		position:absolute;
		height:10px;
		width:4px;
		top:32px;
		right:-6px;
		line-height:10px;
		font-size:10px;
		font-weight:700;
		color:#fff;
		-webkit-animation: moveafter 0.8s ease-out infinite;
		animation: moveafter 0.8s ease-out infinite;
	}
	
	@keyframes moveafter {
      0% {
		right:-6px;
		opacity:1;
      }
	  
	  100% {
        right:-12px;
		opacity:0
      }
	}
	
	.headphones-text{
		font-size:10px;
		margin-top:20px;
	}


/* ///// LOGO ///// */

.logo {
    width: 120px;
    float: none;
    margin: 0px auto;
    transition: all ease 0.5s;
}

.logo.home {
    width: 155px;
}

.logo.scrolled-nav {
    width: 75px;
}

.logo img {
    width: 100%;
}

.logo a {
    border-bottom: none;
    float: left;
    line-height: 1;
    width: 100%;
}

#logo {
    position: relative;
    display: block;
    float: left;
    max-width: 420px;
    z-index: 999;
    transition: all ease .5s;
}

#logo img {
    width: 100%;
}


/* ///// NAVIGATION ///// */

#navigation {
    position: relative;
    display: block;
    float: left;
    width: auto;
}

#navigation.spacers {
    position: absolute;
    left: 7%;
    top: 50%;
    transform: translate(0, -50%);
}

#navigation.top-bar {
    position: fixed;
    width: 100%;
    display: flex;
    height: 36px;
    line-height: 1;
    background: #45474B;
    color: white;
    left: 0;
    top: 0;
    transform: none;
    z-index: 10;
}

#navigation.spacers ul.menu a {
    font-size: 12px;
    color: white;
}

ul.menu a.extern {
    position: relative;
    margin-right: 5em;
}

ul.menu a.extern:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.5em;
    transform: translate(0, -50%);
    width: 17px;
    height: 17px;
    background-image: url(../images/extern-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

#navigation .custom a {
    color: white;
}

#navigation .custom a:hover {
    color: #facd1a;
}

.navigation-grid-yellow {
    position: relative;
    display: block;
    float: left;
    width: 40%;
    height: 100vh;
    background: #facd1a;
    overflow-y: scroll;
}

.navigation-grid-grey {
    position: relative;
    display: block;
    float: right;
    width: 60%;
    height: 100vh;
}

.navigation-grid-yellow h3 {
    color: white;
	margin: 0 20px 1em;
}

.navigation-grid-grey h3 {
    color: white;
	margin-bottom: 1em;
}

.navigation-grid-1 {
    position: relative;
    display: block;
    float: left;
    width: 75%;
    margin: 21% 10% 10% 15%;
}

.navigation-grid-2 {
    position: relative;
    display: block;
    float: left;
    width: 35%;
    margin: 13% 5%;
}

.navigation-grid-grey .logo img {
    width: 100%;
}

.navigation-grid-3 {
    position: relative;
    display: block;
    float: left;
    width: 25%;
    margin: 13% 25% 5% 5%;
    color: #fff;
}

.navigation-grid-3 p {
    white-space: nowrap;
}

.navigation-grid-grey .logo {
    position: absolute;
    z-index: 999;
    width: 150px;
    height: 150px;
    bottom: 35px;
    right: 50px;
}

/* ///// INFOBUTTON ///// */

#infobutton {
    position: absolute;
    display: none;
    float: left;
    width: auto;
    max-width: 50%;
    right: 0;
    left: auto;
    top: 80px;
    padding: 2em 0;
    background: #505050;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 100005;
}

#header-fadein #infobutton {
    top: 71px;
}

.infobutton-button {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(../images/info-icon.svg);
    background-size: cover;
    right: 0;
    top: 0;
    z-index: 100006;
}

#header-fadein .infobutton-button {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(../images/info-icon.svg);
    background-size: cover;
    left: -270px;
    top: 0;
}



/* ///// HINWEIS ///// */


#hinweis .newsflash {
    position: absolute;
    float: right;
    top: 20%;
    right: 7%;
    background: #5e8398;
    border-radius: 50%;
    z-index: 2;
    display: block;
    width: 200px;
    height: 200px;
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
    padding: 1%;
}

#hinweis .beitrag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
}

#hinweis p, #hinweis a {
    color: #fff;
    line-height: 1.2;
    text-align: center;
}



/* ///// SLIDER ///// */

#slider-area {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    background-image: url(../images/floorball-background.jpg);
    background-position: center bottom;
    background-size: cover;
    z-index: 1;
}



#slider-area .shadow {
    height: 35%;
}

#slider {
    position: absolute;
    display: block;
    float: left;
    width: 100%;
    z-index: 2;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 4;
}

#slider .newsflash {
    display: block;
	height: 100%;
}

#slider .moduletable {
	height: 100%;
}

#slider .bild, #slider .hintergrundbild, #slider .bgimage {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center bottom;
    transition: transform 3s ease;
    transform: scale(1);
}

.swiper-container.swiper1 {
}

.swiper-box {
    height: 100%;
    background: rgb(67,71,75);
    background: -moz-linear-gradient(90deg, rgba(67,71,75,1) 0%, rgba(67,71,75,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(67,71,75,1) 0%, rgba(67,71,75,0) 100%);
    background: linear-gradient(90deg, rgba(67,71,75,1) 0%, rgba(67,71,75,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43474b",endColorstr="#43474b",GradientType=1);
    width: 100%;
    position: absolute;
    float: left;
    top: 50%;
    transform: translate(0, -50%);
}

.matchcenter-bild {
    height: 85%;
    position: relative;
    z-index: 111;
    top: 10%;
}

.spiel-details {
    position: relative;
    text-align: center;
    color: #ffffff;
    z-index: 9;
    width: 50%;
    padding: 3% 5% 5% 5%;
}

.spiel-details p {
    font-size: min(max(0.8rem, 1vw), 1rem);
    margin: 0;
}

.spiel-details span.liga {
	font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #facd1a;
	text-transform: uppercase;
}

.zuschauer-startseite {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #facd1a;
    text-transform: uppercase;
    position: relative;
    text-align: center;
}

.spiel-details .zuschauer {
    font-weight: bold;
    font-size: 0.8rem;
    color: #facd1a;
	text-transform: uppercase;
    margin-bottom: clamp(0.5em, 2vw, 2em);
}

.spiel-details span.mannschaft {
	font-family: 'Conthrax Rg';
    font-weight: bold;
    font-size: min(max(0.6rem, 0.8vw), 0.9rem);
    font-style: italic;
    color: #facd1a;
    border-radius: 20px;
    padding: 4px 26px;
    border: 2px solid #facd1a;
    float: none;
    display: inline-block;
    clear: none;
	margin: 0em 1em;
	text-transform: uppercase;
}

.spiel-details .spieltag {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
}

.spiel-details .mannschaften {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 2%;
}

.spiel-details .tore-section {
    display: grid;
    justify-items: center;
    text-align: center;
}

.spiel-details span.tore {
	font-family: 'Conthrax Sb';
    font-weight: 600;
    font-style: italic;
    font-size: min(max(2rem, 5vw), 5rem);
	letter-spacing: 20px;
}

.spiel-details .drittelsresultat p {
	font-family: 'Conthrax Sb';
    font-weight: 600;
    font-style: italic;
    font-size: 0.8em;
	letter-spacing: 5px;
}

.logo-resultat {
    display: grid;
    justify-items: right;
}

.spiel-details .logo-resultat img {
    width: auto;
    height: auto;
    max-width: clamp(3.5em, 6vw, 6em);
    max-height: clamp(1.5em, 3vw, 3em);
    padding: 0 clamp(0.2em, 2vw, 2em) 0 0;
}

.logo-resultat2 {
    display: grid;
    justify-items: left;
}

.spiel-details .logo-resultat2 img {
    width: auto;
    height: auto;
    max-width: clamp(3.5em, 6vw, 6em);
    max-height: clamp(1.5em, 3vw, 3em);
    padding: 0;
}

.spiel-details .torschuetze {
    font-weight: 600;
    font-style: italic;
    font-size: 0.8em;
	letter-spacing: 0.5px;
}

.spiel-details .resultat {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    column-gap: clamp(0.5em, 1vw, 1em);
    padding: 0 17%;
}

.drittelsresultat {
    margin-bottom: clamp(0.5em, 1vw, 2em);
}

.swiper-pagination-bullet {
    width: 47px!important;
    height: 4px!important;
    border-radius: 0!important;
    background: #fff!important;
    opacity: 0.5!important;
    margin: 1px;
}

.swiper-pagination-bullet-active {
	background: #facd1a!important;
    opacity: 1!important;
}

#slider-spieler {
    position: absolute;
    width: 45%;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 4;
    overflow: hidden;
}

#slider-spieler .moduletable {
    z-index: 3;
    position: relative;
}

.ball {
    position: absolute;
    width: 40px;
    height: auto;
    float: none;
    bottom: 80px;
    z-index: 10;
    text-align: center;
    left: 50%;
    margin-left: -20px;
    color: white;
    transform: translate(-50%, 0);

	-webkit-animation: bounce-top 5s infinite both;
    animation: bounce-top 5s infinite both;
}

.scroll {
	font-family: 'Conthrax Sb';
    font-weight: 600;
    font-style: italic;
    font-size: 0.75em;
    position: absolute;
    width: auto;
    height: auto;
    float: none;
    bottom: 50px;
    z-index: 10;
    text-align: center;
    left: 50%;
    color: white;
    transform: translate(-50%, 0);
}

@-webkit-keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }
  @keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }

  

/* ///// UBIQ HEADER ///// */

.ubiq-header {
    height: 35vw;
    background-image: url(../images/floorball-background-dark.jpg);
    background-position: center center;
    background-size: cover;
	text-align: center;
	color: white;
}

.ubiq-header h1 {
	text-transform: uppercase;
}

.header-tag {
	display: block;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    position: absolute;
    border: none;
    color: #fff;
    background-color: #facd1a;
    border: 2px solid #facd1a;
    border-radius: 20px;
    padding: 4px 26px;
    margin-top: 4em;
    transition: all ease .5s;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    float: none;
    clear: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	z-index: 1;
}

.header-tag::before {
	display: block;
    content: "";
    position: absolute;
    left: calc(-50vw + 50%);
    width: 100vw;
    height: 2px;
    background: #facd1a;
    z-index: -1;
    top: 50%;
    transform: translate(0, -50%);
}

/* ///// HEADS ///// */

#heads {
    position: relative;
    display: block;
	float: left;	
    width: 100%;
    height: auto;
    margin: 0 0 5% 0;
	background-size: cover;
    background-position: center center;
    overflow: hidden;
    line-height: 1.2;
}

#heads .custom {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}

#heads .custom p {
    font-family: "khand";
    font-size: 2rem;
    font-weight: 600;
}

#heads h1, #heads h2, #heads h3, #heads h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
	color: white;
	font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
}

#heads .moduletable {
    height: 100%;
}

#heads .moduletable.breadcrumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#heads ul.breadcrumb.breadcrumb li {
    color: #fff;
    list-style: none;
    margin-left: 0px;
    text-transform: uppercase;
    font-size: 3vw;
    white-space: nowrap;
}

#heads ul.breadcrumb.breadcrumb {
    margin-left: 0px;
}

#heads ul.breadcrumb.breadcrumb li {
    display: none;
}

#heads ul.breadcrumb.breadcrumb li.active {
    display: block;
}



/* ///// SUBMENU ///// */

.top-bar {
    position: fixed;
    float: left;
    width: 100%;
    background: #1A2537;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 1111;
    height: 50px;
}

#submenu {
    position: relative;
    display: none;
    float: left;
    width: 86%;
    padding: 0 7%;
    background-color: #0a0a0a;
    z-index: 11;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 1em;
}

#submenu span.separator {
    display: none;
}

#submenu ul.menu {
	position: relative;
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    display: flex;
	overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: center;
}

#untermenu .moduletable {
    display: flex;
    justify-content: center;
}

#submenu ul.menu a {
    font-size: 11px;
}

#submenu ul.menu li.current {
    /*background: #007794;*/
}

#submenu ul.menu li {
    padding: 10px 0;
}

#submenu ul.menu li a {
    padding: 12px 20px;
    margin: 0;
    transition: all ease .5s;
}

#submenu ul.menu li a:hover {
    color: #facd1a;
}

.arrow-left {
    position: absolute;
    top: 0;
    left: 0px;
    padding: 0 0 0 12px;
    height: 100%;
    z-index: 1;
    width: 20px;
    color: #fff;
    background: #0a0a0a;
    justify-content: flex-start;
    font-size: 18px;
    display: flex;
    align-items: center;
    border-right: solid 1px #0a0a0a;
	cursor: pointer;
	-webkit-box-shadow: 10px 0px 34px 10px rgba(0,0,0,1);
	-moz-box-shadow: 10px 0px 34px 10px rgba(0,0,0,1);
	box-shadow: 10px 0px 34px 10px rgba(0,0,0,1);
    display: none;
}


.arrow-right {
    position: absolute;
    top: 0;
    right: 0px;
    padding: 0 0 0 12px;
    height: 100%;
    z-index: 1;
    width: 20px;
    color: #fff;
    background: #0a0a0a;
    justify-content: flex-start;
    font-size: 18px;
    display: flex;
    align-items: center;
    border-left: solid 1px #0a0a0a;
    cursor: pointer;
    -webkit-box-shadow: -10px 0px 30px 10px rgba(0,0,0,1);
    -moz-box-shadow: -10px 0px 30px 10px rgba(0,0,0,1);
    box-shadow: -10px 0px 30px 10px rgba(0,0,0,1);
    display: none;
}



/* ///// INTROTEXT ///// */

#introtext {
    position: relative;
    display: block;
    width: 100%;
	float: left;
}


/* ///// PARALLAX ///// */

#parallax {
    position: relative;
    display: block;
    width: 100%;
	float: left;
    margin: 5% 0;
}

.parallax-container {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}

.parallax-text {
    position: absolute;
    display: block;
    float: left;
    z-index: 3;
    left: 7%;
    top: 50%;
    transform: translate(0, -50%);
    text-align: left;
    width: 50%;
}

#parallax p {
    position: absolute;
    color: #ffffff;
    font-size: 3vw;
    line-height: 1.2;
    top: 50%;
    transform: translate(0, -50%);
}

.parallaxParent {
    position: relative;
    width: 100%;
    height: 30vw;
    overflow: hidden;
}

.parallaxParent > * {
    height: 200%;
    position: relative;
    top: -100%;
    background-position: center center;
    background-size: cover;
}



/* ///// UNIVERSAL PARALLAX ///// */

.pararallax-container {
	-webkit-align-items: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}
.container--big {
	height: 175vh;
}
.container--full {
	height: 100vh;
}
.container--small {
	height: 40vw;
}
.container .slogan {
	border-radius: 8px;
	color: #fff;
	margin: 0 auto;
	padding: 30px 35px;
	text-align: center;
}

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}
.parallax__container .parallax {
	/* can be put in a seperate class for better control */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* --------------------------- */
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
    height: 100vh;
}

/* ///// STARTSEITE ///// */

.button.line::before {
    display: block;
    content: "";
    position: absolute;
    left: calc(-50vw + 50%);
    width: 100vw;
    height: 2px;
    background: #facd1a;
    z-index: -1;
    top: 50%;
    transform: translate(0, -50%);
}


/* ///// ACCORDION ///// */

#accordion {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}



/* ///// NEWS ////// */

#news {
    position: relative;
    display: block;
    float: right;
    width: 100%;
    padding: 5% 0 10%;
}

#news h3 {
    padding-left: 1em;
    border-bottom: solid 2px #43474b;
    margin-left: 1%;
    margin-right: 2%;
}

#news .newsflash {
    justify-content: flex-start;
	padding-top: 2em;
}

#news .beitrag {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.beitrag .bild-frame {
    height: 15vw;
}

.news .beitrag .bild-frame {
    height: 12vw;
}

a.button-outline {
    text-transform: uppercase;
    border: 2px solid #43474b;
    color: #43474b;
    border-radius: 20px;
    padding: 2px 30px;
    position: absolute;
    background: #e8e8e8;
    margin-top: -16px;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    right: 2%;
    font-size: min(max(0.6em, 1.5vw), 14px);
}

.beitrag .datum {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #43474b;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    display: block;
    float: left;
    width: 100%;
    letter-spacing: 1px;
}

.beitrag .details {
    background: white;
    padding: 5% 5% 10% 5%;
    font-family: 'Nunito Sans', sans-serif;
    color: #43474b;
    position: relative;
    display: block;
    float: left;
    width: 90%;
}

#live .beitrag .details {
    padding: 5%;
    width: 90%;
}

.autor {
    display: none;
    float: left;
    font-size: 14px;
    position: absolute;
    left: 5%;
    bottom: 5%;
}

.zumartikel {
    float: right;
    text-transform: uppercase;
    font-size: 14px;
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.zumartikel a {
    font-size: 10px;
    color: #43474b;
    font-weight: 700;
    letter-spacing: 1px;
}

.zumartikel a::after {
    content: "";
    position: relative;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
    width: 15px;
    height: 12px;
    background-image: url(../images/artikel-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all ease .5s;
}

.titel a {
	font-weight: bold;
	color: #43474b;
}

#news h2.newsflash-title {
    width: calc(100% - 6em);
    margin-left: 1em;
    margin-bottom: 1em;
    float: left;
    padding-right: 5em;
    line-height: 1.2;
    hyphens: auto;
}

#news .introtext, #news .introtext-zeichenlimit {
    position: relative;
    display: block;
    width: calc(100% - 4em);
    margin-left: 2em;
    margin-right: 2em;
    float: left;
}

#news #beitrag p {
    display: inline;
}

#left-col .beitrag {
    width: 100%;
	margin-right: 5%;
	height: auto;
}

.image .newstag {
    position: absolute;
    z-index: 9;
    right: 10px;
    top: 5px;
    font-size: 14px;
}

/* ///// NEWS DETAIL ///// */

.item-page.news {
    background: white;
    padding: 25px;
    width: 86%;
    margin: 0 7% 2% 7%;
}

.item-page.news .bild-frame {
	height: 30vw;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.item-page.news .datum {
	font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #43474b;
    font-size: 14px;
    text-transform: uppercase;
}

/* ///// NEWS ÜBERSICHT ///// */

.beitrag.uebersicht .details {
    background: transparent;
    padding: 0;
    margin: 15px 0;
    width: 100%;
}

.newsflash.uebersicht {
    display: block;
}

.itemtags li {
    list-style: none;
    background: #facd1a;
    width: auto;
    text-align: center;
    float: left;
    color: #43474b;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    font-size: min(max(10px, 1.0vw), 14px);
    text-transform: uppercase;
}

.beitrag.uebersicht h5.titel {
    clear: both;
    padding-left: 10px;
}

.beitrag.uebersicht .datum {
    margin-left: 1em;
    float: left;
    margin-top: 12px;
}

.newsflash.uebersicht a.button-outline {
    position: relative;
    margin-top: 2em;
    float: left;
    transform: none;
    margin-left: 0.5em;
}

.newsflash.news .beitrag {
    width: 100%;
    float: left;
    margin-right: 2%;
}

/* ///// SPIELBETRIEB ///// */

#spielbetrieb-container {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    overflow: hidden;
}

#spielbetrieb {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10% 0 5%;
    float: left;
    color: white;
    font-family: 'Conthrax Sb';
    font-weight: 600;
    font-style: italic;
    text-align: center;
    background: #969799;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43474c",endColorstr="#96979a",GradientType=1);
}

.shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: rgb(67,71,75);
    background: -moz-linear-gradient(0deg, rgba(67,71,75,1) 0%, rgba(67,71,75,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(67,71,75,1) 0%, rgba(67,71,75,0) 100%);
    background: linear-gradient(0deg, rgba(67,71,75,1) 0%, rgba(67,71,75,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43474b",endColorstr="#43474b",GradientType=1);
    z-index: 3;
}

img.circle {
    position: absolute;
    left: 0;
	z-index: 1;
}

svg#kreis1 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 35vw;
    height: 35vw;
    z-index: 1;
    transform: translate(-50%, -50%);
    margin-top: -5%;
}

svg#kreis2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40vw;
    height: 40vw;
    z-index: 1;
    transform: translate(-50%, -50%);
    margin-top: -5%;
}

svg#kreis3 {
    position: absolute;
    left: 45%;
    top: 50%;
    width: 25vw;
    height: 25vw;
    z-index: 1;
    transform: translate(-12.5vw, -50%);
    margin-top: -5%;
}

svg#kreis4 {
    position: absolute;
    left: 45%;
    top: 50%;
    width: 30vw;
    height: 30vw;
    z-index: 1;
    transform: translate(-15vw, -50%);
    margin-top: -5%;
}

img.player {
    z-index: 2;
	position: relative;
}

#spielbetrieb img {
    width: auto;
    margin-top: -16%;
}

#spielbetrieb .button {
    font-size: 1rem;
    white-space: nowrap;
}

#spielbetrieb .custom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

#spielbetrieb .custom p {
    text-transform: uppercase;
}

.button.line {
    color: white;
}

/* ///// MATCHCENTER ///// */

.newsflash.matchcenter-sidebar .beitrag .bild-frame {
    height: 12vw;
}

.matchcenter-sidebar a.button-outline {
    position: relative;
    float: left;
    margin: 1em 0 0 0.5em;
    font-size: min(max(0.8rem, 1.5vw), 12px);
    transform: none;
}

.matchcenter-sidebar .beitrag {
    margin-right: 0%!important;
}

.moduletable.next-games, .moduletable.matchberichte {
    margin-bottom: 4%;
}

.moduletable.matchberichte {
    margin-top: 8%;
}

.next-games .beitrag {
    width: 49%;
    background: white;
    margin: 1% 1% 0 0;
}

.game { 
    font-size: 14px;
}

.game-date {
    position: relative;
    float: left;
    width: 20%;
    padding: 2% 2%;
    background: #43474b;
    text-align: center;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #facd1a;
}

.game-type {
    color: white;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
}

.game-details {
    position: relative;
    float: left;
    padding: 2% 2%;
    font-size: 12px;
}

.game-date .date {
    clear: both;
    display: block;
}

.teams {
    color: #43474b;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;

}

.matchberichte .beitrag {
    width: 49%;
    background: #43474b;
    margin: 1% 1% 0 0;
}

.matchberichte .spiel-details {
    width: calc(100% - 4em);
    position: relative;
    height: auto;
    font-size: 14px;
    padding: 4em 5% 2em;
}

.matchberichte .spiel-details .mannschaften {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.matchberichte .spiel-details .resultat {
    margin-bottom: 1em;
}

.newsflash.matchberichte .spiel-details .mannschaften {
    margin: 0;
    margin-bottom: 1em;
    font-size: 0.7rem;
}

.newsflash.matchberichte span.mannschaft.heim {
    margin-left: 0;
    margin-right: 0.5em;
}

.newsflash.matchberichte span.mannschaft.gast {
    margin-left: 0.5em;
    margin-right: 0;
}

.matchberichte .spieltag {
    position: absolute;
    left: 3%;
    top: 3%;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #fff;
    font-size: 1rem;
}

.matchberichte .liga {
    position: absolute;
    right: 3%;
    top: 3%;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #facd1a;
    text-transform: uppercase;
    font-size: 1rem;
}

.matchbericht-resultat {
    position: relative;
    float: left;
    width: 100%;
    background: #43474b;
    margin-bottom: 2em;
}

.matchbericht-resultat .spiel-details {
    width: 100%;
    padding: 10% 0;
}

/* ///// FLOORALL URI LIVE //// */

#live {
    position: relative;
    display: block;
    float: right;
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
    padding: 5% 0% 10%;
}

#live .moduletable, #live .newsflash {
    height: 100%;
}


#live .newscontent:nth-child(6n+1) {
    flex: 1 60%;
    margin: 2% 2% 0 1%;
  }
  
  #live .newscontent:nth-child(6n+1) .beitrag .bild-frame {
    height: 100%;
  }
  
  #live .newscontent:nth-child(6n+1) .beitrag .details {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38.5%;
    height: auto;
    z-index: 2;
  }

  #live .newscontent:nth-child(6n+2) {
    margin: 2% 2% 0 0%;
}

#live .beitrag {
    height: 100%;
    overflow: hidden;
}

#live h3 {
    text-align: center;
}

#live .bild-frame {
    margin-bottom: 0;
}

#live .titel a {
	font-size: min(max(1.2rem, 1.7vw), 26px);
	font-family: 'Nunito Sans', sans-serif;
	font-weight: bold;
	color: #43474b;
}

.live-button {
    border: 1px solid #43474b;
    width: auto;
    float: left;
    padding: 2px 20px;
    border-radius: 20px;
    color: #43474b;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    font-size: min(max(10px, 1.0vw), 14px);
	text-transform: uppercase;
}

.live-button a {
	color: #43474b;
}

#live .moduletable.mobile {
    display: none;
}

/* ///// TERMINE ///// */

#termine {
	position: relative;
    height: auto;
    min-height: 20vw;
	width: 76%;
	float: left;
	padding: 5% 12% 10%;
	color: white;
	background-image: url(../images/floorball-background-dark.jpg);
    background-position: center bottom;
    background-size: cover;
}

#termine h3 {
	color: white;
	margin-left: 1em;
}

#termine h3::after {
    content: '';
    border-bottom: 1px solid #fff;
    width: calc(100% + 1em);
    position: relative;
    float: left;
    margin-left: -1em;
    margin-bottom: 1em;
}

#termine img.player {
    position: absolute;
    max-height: 70%;
    width: auto;
    right: 30%;
    margin-top: 2%;
}

.mod-dpcalendar-upcoming-default__date {
    display: none;
}

.mod-dpcalendar-upcoming-default__information .dp-link {
    color: white;
}

.mod-dpcalendar-upcoming-default .dp-flatcalendar {
    font-size: 1em;
    width: 4em;
    height: 4em;
    margin: 0 1.1em 1.1em 0;
    background-color: transparent !important;
    box-shadow: none !important;
    border: solid 2px #fff !important;
    border-radius: 15px;
}

.mod-dpcalendar-upcoming-default .dp-flatcalendar__day, .mod-dpcalendar-upcoming-default .dp-flatcalendar__day {
    padding-top: 10px;
    font-family: 'Conthrax Sb';
    font-weight: 600;
    font-style: italic;
	color: #fff !important;
}

.mod-dpcalendar-upcoming-default .dp-flatcalendar__month {
    font-family: 'Conthrax Sb';
    font-weight: 600;
    font-style: italic;
	font-size: 12px;
    color: #fff !important;
    background-color: transparent !important;
    box-shadow: 0 0px 0 #3366CC !important;
    top: 40px;
}

.mod-dpcalendar-upcoming-default__event {
    margin-top: 1em;
}

.com-dpcalendar-event:not(.has-cta) .com-dpcalendar-event__actions {
    display: none;
}

.com-dpcalendar-event:not(.has-image) .com-dpcalendar-event__information {
    grid-column: 1 / 4;
    margin-bottom: 4%;
}

/* ///// INSTAGRAM //// */
#instagram {
    position: relative;
    display: block;
    float: left;
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
    background: #e8e8e8;
    padding: 10% 0;
}

#instagram h3 {
    text-align: center;
    padding: 1% 0;
}

/* ///// SPONSOREN //// */

#sponsoren {
    position: relative;
    display: block;
    float: right;
    width: 84%;
    padding: 5% 8% 10%;
	background: white;
}

#sponsoren h3 {
    text-align: center;
}

.newsflash.sponsoren-carousel {
    margin-top: 5em;
}

.newsflash.sponsoren-carousel .bild {
    max-height: 20vw;
    height: auto;
}

.newsflash.sponsoren-carousel .slick-slide img {
    max-width: 90%;
}

.moduletable.sponsoren-startseite.hauptsponsoren {
    position: relative;
    float: left;
    width: 45%;
}

.newsflash.sponsoren-startseite.hauptsponsoren .beitrag {
    width: 65%;
    margin: 0 auto 10% auto;
}

.newsflash.sponsoren-startseite.silbersponsoren .beitrag {
    width: 40%;
}

.newsflash.sponsoren-startseite.bronzesponsoren .beitrag .bild {
    max-height: 5vw;
}

.moduletable.sponsoren-startseite {
    position: relative;
    float: left;
    width: 55%;
}

.newsflash.sponsoren-startseite .beitrag {
    width: 25%;
    margin-right: 5%;
    margin-top: 5%;
}

.newsflash.sponsoren-startseite .beitrag .bild {
    max-height: 7vw;
    height: auto;
    width: auto;
    max-width: 100%;
}

.moduletable.sponsoren-startseite {
    margin-top: 5%;
}

.newsflash.sponsoren {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.sponsoren .beitrag {
    flex: 0 23%;
    margin: 1%;
    background: white;
    position: relative;
    float: left;
    text-align: center;
    padding: 4em;
    height: 6vw;
}

.sponsoren .image {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sponsoren .bild {
    height: auto;
    max-height: 6em;
    width: auto;
    max-width: 250px;
}

.moduletable.sponsoren {
    position: relative;
    width: 100%;
    float: left;
}

.moduletable.sponsoren h3 {
    margin-left: 1%;
}

#sponsoren .logo {
    max-width: 100%;
    margin-top: 35%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 120px;
    height: 25vw;
    width: 200px;
}

#sponsoren .swiper-slide a {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}

.moduletable.sponsoren-titel {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 5%;
}

.moduletable.sponsoren-titel:first-child {
    margin-top: 0;
}

.moduletable.sponsoren.medical-partner {
    margin-bottom: 10%;
}

.moduletable.sponsoren-titel.ausruester, .moduletable.sponsoren-titel.heimturnier, .moduletable.sponsoren-titel.medical-partner {
    margin-bottom: 2em;
}

.teamsponsoring .beitrag {
    padding: 1em;
    width: 100%;
    flex: 0 50%;
    margin: 0;
    background: transparent;
}

.teamsponsoring .sponsoren-bild img {
    max-height: 100%;
}


/* ///// CLUB 200 ///// */

section {
    position: relative;
    float: left;
    width: 100%;
}

#main-col .club-200 h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.club-200-frage {
    position: relative;
    float: left;
    width: 100%;
}

.club-200-frage ul {
    margin-left: 2em;
}

.club-200-frage p {
    white-space: normal;
}

ul.club-200-mitglieder {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.introtext {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 2em;
}

.introtext li {
    list-style: none;
}

#fox-container-m192 {
    width: 100%;
    float: left;
    padding: 0;
}

div#fox-container-m192 .fox-form select, div#fox-container-m192 .fox-form textarea, div#fox-container-m192 .fox-form input[type="text"], div#fox-container-m192 .fox-form input[type="email"] {
    border-radius: 0px;
    color: #000;
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border: solid 1px #fff;
}

div#fox-container-m192 .fox-form input[type="text"]:hover, div#fox-container-m192 .fox-form input[type="email"]:hover, div#fox-container-m192 .fox-form textarea:hover, div#fox-container-m192 .fox-form input[type="text"]:focus, div#fox-container-m192 .fox-form input[type="email"]:focus, div#fox-container-m192 .fox-form textarea:focus {
    background-color: #facd1a;
    color: #000;
}

div#fox-container-m192 .btn {
    display: inline-block;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    background: #facd1a;
    color: #fff;
    border: solid 1px #facd1a;
    border-radius: 30px;
    padding: 4px 20px;
    font-size: 14px;
    margin-bottom: 1em;
    transition: all ease .5s;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
}

#fox-container-m192 .btn:hover, div#fox-container-m192 .btn:focus {
    background: #000;
    border-color: #000;
    color: #fff
}

#fox-container-m192 .btn:hover span, div#fox-container-m192 .btn span span {
    color: #fff;
}

#fox-container-m192 .btn, div#fox-container-m192 .btn span {
    color: #000;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

div#fox-container-m192 .required:after, div#fox-container-m192 .asterisk:after {
    content: "*";
    color: #facd1a;
    font-weight: 200;
}

label {
    letter-spacing: 1px;
    font-size: 0.8em;
    text-transform: uppercase;
    font-family: 'Conthrax Rg';
    font-weight: normal;
    font-style: normal;
}

img.fox-item-captcha-img-reload.fox-popover {
    width: auto;
}

img#fox-m192-captcha {
    width: auto;
}

/* ///// SHOP ///// */

#fox-container-c192 {
    width: 80%;
    float: left;
    padding: 0 10%;
}

#fox-container-c192 img {
    width: auto;
}

div#fox-container-c192 .fox-form select, div#fox-container-c192 .fox-form textarea, div#fox-container-c192 .fox-form input[type="text"], div#fox-container-c192 .fox-form input[type="email"] {
    border-radius: 0px;
    color: #000;
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border: solid 1px #fff;
}

div#fox-container-c192 .fox-form input[type="text"]:hover, div#fox-container-c192 .fox-form input[type="email"]:hover, div#fox-container-c192 .fox-form textarea:hover, div#fox-container-c192 .fox-form input[type="text"]:focus, div#fox-container-c192 .fox-form input[type="email"]:focus, div#fox-container-c192 .fox-form textarea:focus {
    background-color: #facd1a;
    color: #000;
}

div#fox-container-c192 .btn {
    display: inline-block;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    background: #facd1a;
    color: #fff;
    border: solid 1px #facd1a;
    border-radius: 30px;
    padding: 4px 20px;
    font-size: 14px;
    margin-bottom: 1em;
    transition: all ease .5s;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
}

#fox-container-c192 .btn:hover, div#fox-container-c192 .btn:focus {
    background: #000;
    border-color: #000;
    color: #fff
}

#fox-container-c192 .btn:hover span, div#fox-container-c192 .btn span span {
    color: #fff;
}

#fox-container-c192 .btn, div#fox-container-c192 .btn span {
    color: #000;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

div#fox-container-c192 .required:after, div#fox-container-c192 .asterisk:after {
    content: "*";
    color: #facd1a;
    font-weight: 200;
}

img.fox-item-captcha-img-reload.fox-popover {
    width: auto;
}

img#fox-c192-captcha {
    width: auto;
}


/* ///// FOOTER ///// */

#footer {
    position: relative;
    display: block;
    float: left;
    width: 80%;
    padding: 2% 10% 2% 10%;
	background: black;
    color: white;
    overflow: hidden;
}

#footer-1 {
    position: relative;
    display: block;
    float: left;
    width: 28%;
    margin: 6% 2%;
    z-index: 2;
}

.logo-footer {
    width: 200px;
    margin-left: 50%;
    transform: translate(-50%, 0);
}

#footer-2 {
    position: absolute;
    display: block;
    width: 50%;
    margin-top: 2%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    height: 40vh;
    background: url(../images/ball-dark.jpg) no-repeat center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

#footer-2 a, #footer-3 a {
    color: white;
}

#footer-3 {
    position: relative;
    display: block;
    float: right;
    width: 29%;
    margin: 6% 2%;
    text-align: left;
    z-index: 2;
}

#footer h3 {
	color: white;
}

#footer p {
    white-space: nowrap;
}

.social-icons {
    display: flex;
    clear: both;
    width: 100%;
    text-align: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.social-icons a {
    display: inline-block;
    margin: 0 1em;
}

.social-icons img {
    max-height: 35px;
}

.social-icons img {
    margin-top: 2em;
}

.kontakt-button-container {
    position: relative;
    display: block;
    float: left;
    margin-top: 5%;
    width: 100%;
}

.kontakt-button {
    width: 100%;
    color: #facd1a;
    border: 2px solid #facd1a;
    border-radius: 20px;
    text-align: center;
    text-transform: uppercase;
    padding: 2px 10px;
    margin-bottom: 10px;
	font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
	transition: all ease .5s;
}

.kontakt-button:hover {
    background: #facd1a;
    color: black;
}

.kontakt-button:hover a {
    color: #000!important;
}

.kontakt-button a {
	color: #facd1a!important;
}

.kontakt-button a:hover {
	color: #000!important;
}



/* ///// COPYRIGHT ///// */


#copyright {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    float: left;
    width: 80%;
    padding: 0% 10% 1% 10%;
    color: #007ec6;
    text-transform: uppercase;
    background: transparent;
    transform: translate(0, -100%);
    z-index: 999;
}

#copyright a {
	color: #b9b9b9;
	text-decoration: none;
    font-size: 12px;
    margin: 7px 20px 7px 20px;
}

#copyright .copyright-1 a {
    margin: 0;
}

#copyright p {
	color: #b9b9b9;
	font-size: 12px;
	text-align: center;
}

#copyright ul.nav.menu.mod-list {
    visibility: visible !important;
    transform: none !important;
    opacity: 1 !important;
}

#copyright ul.menu li {
    width: auto;
}

.copyright-1 {
    position: relative;
    display: block;
    float: left;
    width: 100%;
	margin: 0 10px;
}

.copyright-2 {
    position: relative;
    display: flex;
    float: left;
    width: 100%;
    margin: 0 10px;
    text-align: center;
    justify-content: center;
}





/* ///// SCROLL TO TOP BUTTON ///// */

a.scrolltotop {
    display: none;
    position: fixed;
    background-image: url(../images/scrolltotop.svg);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 4em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: calc(4% - 20px);
    z-index: 9;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 100ms ease-in;
}



/* ///// TEAM SEITE ///// */

#left-col ul.nav.menu.mod-list {
    width: 100%;
	margin-top: 1em;
}

.sponsoren-titel {
    font-size: 14px;
    color: #43474b;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    border-bottom: 1px solid #43474b;
    letter-spacing: 1px;
}

#left-col .newsflash.sponsoren .beitrag {
    width: 35%;
    margin-right: 15%;
    margin-bottom: 5%;
}

.sponsoren-bild img {
    float: left;
    max-width: 100%;
    max-height: 3em;
    width: auto;
}

/* ///// SPIELER ///// */

#spieler {
    position: relative;
    width: 90%;
    margin: 2% 5%;
    float: left;
    text-align: center;
}

#spieler .newsflash {
    margin: 0 0 5%;
}

#spieler h4, .vorstand h4 {
    text-align: center;
    margin: 20px 0 0;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 14px;
}

#spieler .beitrag {
    text-align: center;
}

.nummer-position {
    position: relative;
    display: flex;
    float: left;
    width: 100%;
    justify-content: center;
    align-items: center;
}

span.nummer {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #43474b;
    font-size: 45px;
    margin: 0 20px;
    position: relative;
}

span.nummer:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translate(0,-50%);
    width: 1px;
    height: 30px;
    background-color: #43474b;
}

span.position {
    font-family: 'Nunito Sans', sans-serif;
    color: #43474b;
    font-weight: bold;
    margin: 0 20px;
	letter-spacing: 1px;
}

h4.sponsor-titel {
    margin-top: 10px!important;
    float: left;
    text-align: center;
    width: 100%;
}

span.sponsor-name a {
    font-family: 'Nunito Sans', sans-serif;
    color: #43474b;
    font-weight: bold;
    margin: 0 20px;
	letter-spacing: 1px;
}

span.sponsor-name a:hover {
    color: #facd1a;
}


/* ///// VORSTAND ///// */

.vorstand .nummer-position {
    display: block;
}

.vorstand a.mail, .vorstand span.phone, .vorstand span.position {
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    margin: 0;
    text-align: center;
    color: #43474b;
}

a.mail {
    padding-top: 0.5em;
}

a.mail:hover {
    color: #facd1a;
}

/* ///// JOOMLA NEWSFLASH ///// */


.introtext-zeichenlimit {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 8px 0;
    font-size: 1rem;
    line-height: 1.5;
}

.intro-bg {
    width: 100%;
    height: 20vw;
    background-position: center center;
	background-size: cover;
}

.bgimage {
    width: 100%;
    height: 20vw;
    background-position: center center;
	background-size: cover;
}

.image {
    width: 100%;
    float: left;
}

.image img {
	width: 100%;
}

.newsbild {
    width: 100%;
    height: 15em;
    background-size: cover;
    background-position: center;
	margin-bottom: 20px;
}

figure.newsflash-image img {
    width: 100%;
}


/* ///// JOOMLA BLOG ///// */

.blog {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.page-header {
    display: block;
    float: left;
    width: 100%;
}

.item.column-1:hover .bild, .newscontent:hover .bild {
    transform: scale(1.1);
}

.item.column-1:hover .bild-overlay, .newscontent:hover .bild-overlay {
    opacity: 0;
}

.intro-bg {
    width: 100%;
    height: 20vw;
    background-position: center center;
	background-size: cover;
    margin: 1em 0;
}

.row-fluid {
    width: 100%;
}

.items-row {
    display: flex;
    flex: 0 98%;
    flex-wrap: wrap;
    margin: 2%;
}

.col-6 .items-row {
  display: flex;
  flex: 0 14%;
  flex-wrap: wrap;
  margin: 2%;
}

.col-4 .items-row {
  display: flex;
  flex: 0 22.5%;
  flex-wrap: wrap;
  margin: 2%;
}

.col-3 .items-row {
  display: flex;
  flex: 0 27%;
  flex-wrap: wrap;
  margin: 2%;
}

.col-2 .items-row {
  display: flex;
  flex: 0 47%;
  flex-wrap: wrap;
  margin: 2%;
}

.multiple-category-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    float: left;
    margin: 2em 0;
}

.multiple-category-area h4 {
    margin: 3em 1em 1em;
    border-bottom: solid 3px #00933b;
}



@media screen and (max-width: 1600px) {
.col-6 .items-row {
  flex: 0 30%;
}
}


@media screen and (max-width: 1400px) {
.col-5 #beitrag {
    display: flex;
    flex: 0 29%;
}
}


@media screen and (max-width: 1200px) {
.col-6 .items-row, .col-4 .items-row, .col-3 .items-row {
  flex: 0 46%;
}
}

@media screen and (max-width: 600px) {
.col-6 .items-row, .col-4 .items-row, .col-3 .items-row, .col-2 .items-row {
    flex: 0 100%;
    margin: 2% 0;
}
}

.column-1, .column-2, .column-3 {
    padding: 0;
}

.blog img {
    width: 100%;
}


/* ///// JOOMLA ARTIKEL ///// */

.item-page {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 0 0;
}

.articleBody {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 4%;
}

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

.bild {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    height: 27vw;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    margin: 0;
    transition: all ease 0.5s;
}

.bild-frame {
    position: relative;
    width: 100%;
    height: 30vw;
    /* margin-bottom: 1em; */
    overflow: hidden;
}

.bild-frame.teambild {
    height: 40vw;
}

.bild-frame .bild {
    height: 100%;
}

.bild.teambild {
    object-fit: contain;
    width: 100%;
    height: auto;
}

.bild-overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 2;
    background: rgba(0,0,0,0.2);
    transition: all ease 0.5s;
}

a.lightbox {
    position: absolute;
    z-index: 3;
    width: 3em;
    height: 3em;
    right: 3em;
    bottom: 3em;
    background-image: url(../images/plus.svg);
    background-size: contain;
    background-repeat: no-repeat;
    left: auto;
    cursor: pointer;
    transition: all ease 0.5s;
}

a.lightbox:hover {
    transform: scale(1.1);
}


p.counter.pull-right {
    display: none;
}

.pagination {
	margin-top: 50px;
}

.pagination li {
    list-style: none;
    float: left;
    padding: 3px 15px;
    background: #15a538;
    color: #82c693;
    margin: 1px 1px;
    font-size: 14px;
}

.pagination a {
    color: #fff;
	transition: all ease .5s;
}

.pagination a:hover {
	color: #fff;
}

.galerie {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 5% 0;
}

.showtime-default .showtime-image img {
    outline: solid 0px transparent;
    border: 0px solid #fff;
    -webkit-box-shadow: rgba(0, 0, 0, .13) 0 0px 14px, rgba(0, 0, 0, .12) 0 0 0 0px;
    box-shadow: rgba(0, 0, 0, .13) 0 0px 14px, rgba(0, 0, 0, .12) 0 0 0 0px;
}

/* HELFERTOOL */

a.button.helfertool {
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 1em;
    float: left;
}


/* DOWNLOADS */

a.pdf, a.ipdf, a.link, a.word, a.excel, a.formular, a.download {
    position: relative;
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
    height: 4em;
    background: rgb(232, 232, 232);
    transition: all ease .5s;
}

a.pdf:hover, a.ipdf:hover, a.link:hover, a.word:hover, a.excel:hover, a.formular:hover, a.download:hover {
    text-decoration: none;
    color: #333333;
    background: #bdbdbd;
}

.dokumente a.pdf {
    background: white;
    margin-bottom: 1rem;
}

.newsflash.col-1 .custom {
    width: 100%;
    margin-bottom: 4%;
}

a.pdf:hover .download-icon, a.ipdf:hover .download-icon, a.link:hover .download-icon, a.word:hover .download-icon, a.excel:hover .download-icon, a.formular:hover .download-icon, a.download:hover .download-icon {
    background: #000;
}

a.pdf:hover .download-icon:before, a.ipdf:hover .download-icon:before, a.link:hover .download-icon:before, a.word:hover .download-icon:before, a.excel:hover .download-icon:before, a.formular:hover .download-icon:before, a.download:hover .download-icon:before {
    transform: translate(-50%,-50%) scale(1.1);
}

.onlineschalter-titel {
    width: 65%;
    padding: 2% 13% 2% 2%;
    float: left;
    font-size: 1rem;
    line-height: 1.5;
    color: #333333;
}

.download-icon {
    position: relative;
    width: 20%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    float: right;
    background: #facd1a;
    height: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    transition: all ease 0.5s;
}

a.pdf .download-icon:before {
    position: absolute;
    content: "";
    bottom: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 23px;
    height: 26px;
    background-image: url(../images/downloads/download-pdf.svg);
    background-size: cover;
    transition: all ease 0.5s;
}

a.ipdf .download-icon:before {
    position: absolute;
    content: "";
    bottom: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 23px;
    height: 26px;
    background-image: url(../images/downloads/download-ipdf.svg);
    background-size: cover;
}

a.link .download-icon:before {
    position: absolute;
    content: "";
    bottom: 18%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 27px;
    height: 23px;
    background-image: url(../images/downloads/download-link.svg);
    background-size: cover;
}

a.word .download-icon:before {
    position: absolute;
    content: "";
    bottom: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 23px;
    height: 26px;
    background-image: url(../images/downloads/download-word.svg);
    background-size: cover;
}

a.excel .download-icon:before {
    position: absolute;
    content: "";
    bottom: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 23px;
    height: 26px;
    background-image: url(../images/downloads/download-excel.svg);
    background-size: cover;
}

a.download .download-icon:before {
    position: absolute;
    content: "";
    bottom: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 27px;
    background-image: url(../images/downloads/download-download.svg);
    background-size: cover;
}

a.formular .download-icon:before {
    position: absolute;
    content: "";
    bottom: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 27px;
    background-image: url(../images/downloads/download-form.svg);
    background-size: cover;
}

/* ////// LAGEPLAN / MAPS ///// */

.moduletable.map {
    position: relative;
    float: left;
    width: 45%;
    margin-right: 2%;
    margin-bottom: 6%;
}

/* ///// GESCHICHTE ///// */

.text-meilensteine {
    text-align: center;
}

.meilensteine {
    position: relative;
}

.meilensteine ul {
    position: relative;
    margin-left: 0px;
    list-style-type: none;
}

.meilensteine ul:before {
    position: absolute;
    content: "";
    left: 50%;
    bottom: -4em;
    width: 2px;
    height: 100%;
    background: #facd1a;
    z-index: 1;
}

.meilensteine li {
    position: relative;
    z-index: 2;
	list-style-type: none;
}

.meilensteine li:first-child {
    margin-top: 0!important;
}

/* Jahreszahl */
.meilensteine li:nth-child(2n+1) {
	font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5em;
    height: 5em;
    margin: 6em 0;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 50%;
    font-size: 1.2rem;
    background: #facd1a;
}

/* rechts links wird benötigt */
.meilensteine li:nth-child(2n+2) {
    position: absolute;
    width: 38%;
    margin-top: -11em;
}

/* Text 2 */
.meilensteine li:nth-child(4n) {
    right: 0;
	background: white;
	padding: 25px;
}

/* Text 1 */
.meilensteine li:nth-child(4n+2){
    text-align: right;
	background: white;
    padding: 25px;
}


/* ///// KONTAKT ///// */

#fox-container-c120 {
    width: 80%;
    float: left;
    padding: 0 10%;
}

div#fox-container-c120 .fox-form select, div#fox-container-c120 .fox-form textarea, div#fox-container-c120 .fox-form input[type="text"], div#fox-container-c120 .fox-form input[type="email"] {
    border-radius: 0px;
    color: #000;
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border: solid 1px #fff;
}

div#fox-container-c120 .fox-form input[type="text"]:hover, div#fox-container-c120 .fox-form input[type="email"]:hover, div#fox-container-c120 .fox-form textarea:hover, div#fox-container-c120 .fox-form input[type="text"]:focus, div#fox-container-c120 .fox-form input[type="email"]:focus, div#fox-container-c120 .fox-form textarea:focus {
    background-color: #facd1a;
    color: #000;
}

div#fox-container-c120 .btn {
    display: inline-block;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    background: #facd1a;
    color: #fff;
    border: solid 1px #facd1a;
    border-radius: 30px;
    padding: 4px 20px;
    font-size: 14px;
    margin-bottom: 1em;
    transition: all ease .5s;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
}

#fox-container-c120 .btn:hover, div#fox-container-c120 .btn:focus {
    background: #000;
    border-color: #000;
    color: #fff
}

#fox-container-c120 .btn:hover span, div#fox-container-c120 .btn span span {
    color: #fff;
}

#fox-container-c120 .btn, div#fox-container-c120 .btn span {
    color: #000;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

div#fox-container-c120 .required:after, div#fox-container-c120 .asterisk:after {
    content: "*";
    color: #facd1a;
    font-weight: 200;
}

label {
    letter-spacing: 1px;
    font-size: 0.8em;
    text-transform: uppercase;
    font-family: 'Conthrax Rg';
    font-weight: normal;
    font-style: normal;
}

img.fox-item-captcha-img-reload.fox-popover {
    width: auto;
}

img#fox-c120-captcha {
    width: auto;
}

/* ///// SHOP ///// */

#fox-container-c192 {
    width: 80%;
    float: left;
    padding: 0 10%;
}

#fox-container-c192 img {
    width: auto;
}

div#fox-container-c192 .fox-form select, div#fox-container-c192 .fox-form textarea, div#fox-container-c192 .fox-form input[type="text"], div#fox-container-c192 .fox-form input[type="email"] {
    border-radius: 0px;
    color: #000;
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border: solid 1px #fff;
}

div#fox-container-c192 .fox-form input[type="text"]:hover, div#fox-container-c192 .fox-form input[type="email"]:hover, div#fox-container-c192 .fox-form textarea:hover, div#fox-container-c192 .fox-form input[type="text"]:focus, div#fox-container-c192 .fox-form input[type="email"]:focus, div#fox-container-c192 .fox-form textarea:focus {
    background-color: #facd1a;
    color: #000;
}

div#fox-container-c192 .btn {
    display: inline-block;
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    background: #facd1a;
    color: #fff;
    border: solid 1px #facd1a;
    border-radius: 30px;
    padding: 4px 20px;
    font-size: 14px;
    margin-bottom: 1em;
    transition: all ease .5s;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
}

#fox-container-c192 .btn:hover, div#fox-container-c192 .btn:focus {
    background: #000;
    border-color: #000;
    color: #fff
}

#fox-container-c192 .btn:hover span, div#fox-container-c192 .btn span span {
    color: #fff;
}

#fox-container-c192 .btn, div#fox-container-c192 .btn span {
    color: #000;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

div#fox-container-c192 .required:after, div#fox-container-c192 .asterisk:after {
    content: "*";
    color: #facd1a;
    font-weight: 200;
}

label {
    letter-spacing: 1px;
    font-size: 0.8em;
    text-transform: uppercase;
    font-family: 'Conthrax Rg';
    font-weight: normal;
    font-style: normal;
}

img.fox-item-captcha-img-reload.fox-popover {
    width: auto;
}

img#fox-c192-captcha {
    width: auto;
}

/* END UBIQ */



/* ----------   LAYOUT   ---------------- */

html {
    height: 100%;
}

body {
    height: 100%;
    overflow-x: hidden;
}

body.rollout {
    overflow-y: hidden;
}

#mainWrapper {
    display: inline;
    float: left;
    width: 100%;
    height: 100%;
}

#container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
}

#container-header a.button-right {
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0;
}

#container-header a.button-left {
    position: absolute;
    left: 7%;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0;
    padding: 6px 26px 6px 56px;
}

a.button.button-left:before {
    content: '';
    position: absolute;
    left: 26px;
    height: 18px;
    width: 18px;
    top: 50%;
    transform: translate(0, -50%);
    background-image: url('/templates/ubiqdesign/images/clublokal.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: .5s all ease;
}

#container-header a.button_club {
    position: absolute;
    right: 12%;
    top: 80%;
    transform: translate(0, -50%);
    margin: 0;
}

#header {
	position: fixed;
    display: block;
    float: left;
    width: 100%;
    padding: 30px 0 15px 0;
    background-color: transparent;
    box-shadow: none;
    z-index: 1006;
    transition: all ease 0.5s;
    top: 36px;
}

#header.scrolled-nav {
    background-color: #e8e8e8;
    padding: 10px 0 10px 0;
    -webkit-box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05);
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#header-fadein {
    position: fixed;
    top: -100px;
	visibility: hidden;
    left: 0;
    display: block;
    float: left;
    width: 100%;
    padding: 5px 0 5px 0;
    z-index: 108;
    background: #e8e8e8;
    -webkit-box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05);
	transition: all 1s ease 0s;
}

#header-fadein.active {
	visibility: visible;
	top: 0;
}

#header-fadein.rollout {
	background: transparent;
    box-shadow: none;
}

#header-fadein.rollout .logo {
	opacity: 0;
}

#header-fadein .logo {
    max-width: 150px;
    margin-top: 15px;
    margin-bottom: 15px;
}

#header #container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wideWrap {
    display: inline;
    float: left;
    width: 86%;
	margin-left: 7%;
    margin-right: 7%;
}

#top {
    background: none repeat scroll 0 0 transparent;
    display: inline;
    float: left;
    width: 100%;
}

#topLeft {
    background: none repeat scroll 0 0 transparent;
    float: left;
}

#topRight {
    background: none repeat scroll 0 0 transparent;
    float: right;
}

#rowA, #rowB, #rowC, #rowD, #rowE, #rowF, #rowG {
    background: none repeat scroll 0 0 transparent;
    display: inline;
    float: left;
    width: 100%;
}


#breadcrumb {
    background: none repeat scroll 0 0 transparent;
    display: inline;
    float: left;
    width: 100%;
}

.breadcrumbs {
    font-size: 12px;
    font-style: italic;
    margin-left: 10px;
}

#breadcrumbLeft {
    background: none repeat scroll 0 0 transparent;
    float: left;
}

#breadcrumbRight {
    background: none repeat scroll 0 0 transparent;
    float: right;
    text-align: right;
}

#mainrow {}

#left-col {
    float: left;
    margin-bottom: 8%;
}

#left-col-cont {
}

#left-col-cont .moduletable {
	padding-bottom: 30px;
	margin-bottom: 10px;
}

#main-col {
    background: none repeat scroll 0 0 transparent;
    float: right;
}

#main-col-cont {
    background: none repeat scroll 0 0 transparent;
    padding: 0;
}

#right-col {
	float: right;
	width: 25%;
}

#right-col-cont .moduletable {
	padding-bottom: 30px;
	margin-bottom: 20px;
}

#right-col-cont {
}


#content-top {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}

#content-bottom {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}

#footWrapper{
    background: none repeat scroll 0 0 #DDDDDD;
    display: inline;
    float: left;
    width: 100%;
}

#debugRow { 
    display: inline;
    float: left;
}

#topLeft, #topRight {
    width: 470px;
}

#topRight {
    text-align: right;
}


#breadcrumb {
}

.cols-1 {
    display: block;
    float: none;
    margin: 0;
}
.cols-2 .column-1 {
    float: left;
    width: 46%;
}
.cols-2 .column-2 {
    float: right;
    margin: 0;
    width: 46%;
}
.cols-3 .column-1 {
    float: left;
    margin-right: 4%;
    padding: 0 5px;
    width: 29%;
}
.cols-3 .column-2 {
    float: left;
    margin-left: 0;
    padding: 0 5px;
    width: 29%;
}
.cols-3 .column-3 {
    float: right;
    padding: 0 5px;
    width: 29%;
}
.items-row {
    margin-bottom: 10px !important;
    overflow: hidden;
}

.row-fluid {
	width: 100%;
	*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
	display: table;
	content: "";
	line-height: 0;
}
.row-fluid:after {
	clear: both;
}


/* END LAYOUT */	
	

/* ----------   TYPOGRAPHY  ---------------- */

body {
	color: #000000;
	font-size: 1.1rem; 
	line-height: 1.5;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: normal;
	-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

a {
    color: #000000;
    text-decoration: none;
	cursor: pointer;
    transition: all ease .5s;
}

a:hover {
    text-decoration: none;
    color: #facd1a;
}

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}



.button, a.button, p.button, a.button_club, a.readmore, button.goback, .video-button {
    font-family: 'Conthrax Rg';
    font-size: 0.8rem;
    font-weight: bold;
    font-style: italic;
	position: relative;
    border: none;
    color: #43474b;
    background-color: #facd1a;
	border: 2px solid #facd1a;
	border-radius: 20px;
    padding: 6px 26px;
    margin: 1em;
    transition: all ease .5s;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    float: none;
	clear: none;   
}

.button_club img {
    max-width: clamp(1em, 2vw, 1.5em);
    max-height: clamp(2em, 2vw, 2em);
    padding: 0 clamp(0.2em, 2vw, 2em) 0 0;
}

.button-white, a.button-white, p.button-white {
    position: relative;
    border: solid 1px #ffffff;
    color: #000;
    background-color: #fff;
    padding: 9px 35px 5px 20px;
    margin: 5px 15px 5px 0;
    transition: all ease .5s;
    display: table;
    text-transform: uppercase;
    font-family: "khand";
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1;
    float: left;
}

.button-whiteline, a.button-whiteline {
    position: relative;
    border: solid 1px #ffffff;
    padding: 7px 10px 5px 10px;
    margin: 5px 15px 5px 0;
    transition: all ease .5s;
    display: table;
    text-transform: none;
    font-size: 1rem;
    line-height: 1;
    float: left;
    color: #fff;
    text-transform: uppercase;
    font-family: "khand";
    letter-spacing: 2px;
}

.button-extern-whiteline, a.button-extern-whiteline {
    position: relative;
    border: solid 1px #ffffff;
    padding: 7px 35px 5px 10px;
    margin: 5px 15px 5px 0;
    transition: all ease .5s;
    display: table;
    text-transform: none;
    font-size: 1rem;
    line-height: 1;
    float: left;
    color: #fff;
    text-transform: uppercase;
    font-family: "khand";
    letter-spacing: 2px;
}

.button-extern, a.button-extern {
    position: relative;
    border: solid 1px #ff220f;
    padding: 3px 35px 1px 10px;
    margin: 5px 0 5px 15px;
    transition: all ease .5s;
    display: table;
    text-transform: none;
    font-size: 1rem;
    line-height: 1;
    float: left;
    color: #fff;
    background-color: #ff220f;
    text-transform: uppercase;
    font-family: "khand";
    letter-spacing: 2px;
}

.video-button {
    padding: 10px 40px 10px 70px;
}

.button-white:before, a.button-white:before, p.button-white:before, a.readmore-white:before, button-white.goback:before, .video-button-white:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 15px;
    width: 7px;
    height: 13px;
    background-image: url(../images/right-arrow-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all ease .5s;
}

.button-extern:before, a.button-extern:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 15px;
    width: 12px;
    height: 12px;
    background-image: url(../images/link.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -1px;
    transition: all ease .5s;
}

.button-extern-whiteline:before, a.button-extern-whiteline:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 15px;
    width: 12px;
    height: 12px;
    background-image: url(../images/link.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -1px;
    transition: all ease .5s;
}


.button:hover, a.button:hover, a.readmore:hover, button.goback:hover, .video-button:hover {
    background: #000;
    color: #fff;
    border: solid 2px #000;
    text-decoration: none;
}

.button:hover a {
    color: #facd1a!important;
}

.button-white:hover, a.button-white:hover {
    background: #000;
    color: #fff;
    border: solid 1px #000;
    text-decoration: none;
}

.button-whiteline:hover, a.button-whiteline:hover {
    background: #fff;
    color: #000;
    border: solid 1px #fff;
    text-decoration: none;
}

.button-extern-whiteline:hover, a.button-extern-whiteline:hover {
    background: #fff;
    color: #000;
    border: solid 1px #fff;
    text-decoration: none;
}

.button-extern:hover, a.button-extern:hover {
    background: transparent;
    color: #000;
    border: solid 1px #ff220f;
    text-decoration: none;
}

.button:hover:before, a.button:hover:before, a.readmore:hover:before, button.goback:hover:before, .video-button:hover:before {
    background-image: url(../images/right-arrow-white.svg);
}

a.button-left:hover:before {
    background-image: url('/templates/ubiqdesign/images/clublokal.svg');
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(193deg) brightness(105%) contrast(103%);
}

.button-white:hover:before, a.button-white:hover:before, a.readmore-white:hover:before, button-white.goback:hover:before, .video-button-white:hover:before {
    background-image: url(../images/right-arrow.svg);
}


.button-extern:hover:before, a.button-extern:hover:before, .button-extern:hover:before, a.button-extern:hover:before {
    background-image: url(../images/link-black.svg);
}

.button-extern-whiteline:hover:before, a.button-extern-whiteline:hover:before, .button-extern:hover:before, a.button-extern:hover:before {
    background-image: url(../images/link-black.svg);
}


input.button.goback {
    margin-left: 7%;
    margin-bottom: 10%;
    color: white;
}

.gobackpage input.button.goback {
    display: block;
    margin: 5% 0;
}

.video-button:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translate(0, -50%);
    width: 38px;
    height: 38px;
    background-image: url(../images/play.svg);
}


p, span.field-value, span.field-label {
	margin: 8px 0;
	font-size: 1.1rem;
	line-height: 1.5;
    white-space: pre-wrap;
	-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    -webkit-text-size-adjust: 100%; /* Für Text, damit er auf mobilen Geräten nicht grösser erscheint */
}

dd.field-entry.editor span {
	margin: 8px 0;
	font-size: 1.1rem;
	line-height: 1.5;
    white-space: normal;
	-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    -webkit-text-size-adjust: 100%; /* Für Text, damit er auf mobilen Geräten nicht grösser erscheint */
}

li {
	margin: 8px 0;
	font-size: 1.1rem;
	line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* Für Text, damit er auf mobilen Geräten nicht grösser erscheint */
}

h1 {
    font-family: "opensans";
    color: #43474b;
    font-size: 3rem;
	font-weight: 600;
    letter-spacing: 1px;
	line-height: 1.5;
}

/*h2 {
    font-family: 'Nunito Sans', sans-serif;
    color: #43474b;
    font-size: 2rem;
	font-weight: 600;
    letter-spacing: 1px;
	line-height: 1.5;
}*/

h2 {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #43474b;
    font-size: min(max(20px, 2.2vw), 30px);
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
}

h3 {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #43474b;
    font-size: min(max(16px, 2.2vw), 25px);
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
}

h4 {
    font-family: "opensans";
    color: #43474b;
    font-size: 1.5rem;
	font-weight: 600;
    letter-spacing: 1px;
	line-height: 1.5;
}

h5 {
    font-family: 'Nunito Sans', sans-serif;
	font-weight: bold;
	text-transform: none;
	font-style: normal;
    color: #43474b;
    font-size: 1.1rem;
    letter-spacing: 1px;
    line-height: 1.5;
    margin-bottom: 0.5em;
}

h5.titel {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 0.5em 0;
}

h6 {
    font-family: 'Conthrax Rg';
    font-weight: bold;
    font-style: italic;
    color: #43474b;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5;
    font-size: 1.35rem;
}

#main-col h3 {
    margin-top: 2em;
}

/* END TYPOGRAPHY */


/* ----------   MISC ELEMENTS ---------------- */

label {
    float: left;
    min-width: 122px;
}

ul, ol {
    margin-left: 0;
}

.news ul {
    margin-left: 1.5em;
}

ul.news {
    margin-left: 1em;
}

ul.actions {
    margin-left: 0;
}
	
ul.actions li {
    display: inline;
    list-style: none outside none;
    padding: 0;
}


/* ///// REPEATABLE FIELD TABELLE ///// */

ul.repeatable-2, ul.repeatable-3, ul.repeatable-4 {
    display: flex;
    float: left;
    flex-wrap: wrap;
    border: solid 0.1vw #43474b1f;
    width: 100%;
    margin-bottom: 1em;
}

ul.repeatable-2 li, ul.repeatable-3 li, ul.repeatable-4 li {
    list-style: none;
    margin: 0;
    padding: 2%;
    float: left;
    border-top: solid 0.1vw #43474b1f;
}

ul.repeatable-2 li {
    flex: 1 42%;
    width: 42%;
}

ul.repeatable-3 li {
    flex: 1 29%;
    width: 29%;
}

ul.repeatable-4 li {
    flex: 1 20%;
    width: 20%;
}

ul.repeatable-2 li:nth-child(odd) {
    font-family: "opensans-bold";
    border-right: solid 0.1vw #43474b1f;
}

ul.repeatable-3 li:nth-child(3n + 1), ul.repeatable-3 li:nth-child(3n + 2) {
    border-right: solid 0.1vw #43474b1f;
}

ul.repeatable-4 li:nth-child(4n + 1), ul.repeatable-4 li:nth-child(4n + 2), ul.repeatable-4 li:nth-child(4n + 3) {
    border-right: solid 0.1vw #43474b1f;
}

ul.repeatable-2 li:nth-child(-n+2), ul.repeatable-3 li:nth-child(-n+3), ul.repeatable-4 li:nth-child(-n+4) {
    border-top: none;
}


 #system-message dd.error ul {
    margin-left: 0;
	background-position: 5px 40%;
}

th {
    padding: 3px;
}

caption, th, td {
    padding: 2px 10px 2px 2px;
    text-align: left;
}

thead tr {
    background: none repeat scroll 0 0 #EEEEEE;
}


fieldset.filters {margin: 10px 0;}

div.current {
    border: 1px solid #CCCCCC;
    clear: both;
    padding: 10px;
}

dl.tabs dt {
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    color: #666666;
    float: left;
    margin-right: 3px;
    padding: 4px 10px;
}

dl.tabs dt.open {
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #F9F9F9;
    color: #000000;
    z-index: 100;
}

.panel {
    border: 1px solid;
    margin-top: -1px;
}


.contentpane {
	margin:10px;
}



/* END MISC ELEMENTS */