/* ---- 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;
}

#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;
}

article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {
    display:block;
}
body {
  line-height: 1.5;
  background: white;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  float:none !important;
}
table, th, td {
  vertical-align: middle;
    border-collapse: collapse;
}

blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
:focus { outline: 0; }
img {
    width: 100%;
}

/* END Reset */





/* ----------   ///// PAGE TRANSITIONS /////  ---------------- */

#loading-overlay {
    background: rgb(60,70,80);
    background: -moz-linear-gradient(90deg, rgba(60,70,80,1) 0%, rgba(33,41,52,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(60,70,80,1) 0%, rgba(33,41,52,1) 100%);
    background: linear-gradient(90deg, rgba(60,70,80,1) 0%, rgba(33,41,52,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c4650",endColorstr="#212934",GradientType=1);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10005;
}



/* ----------   ///// WHIZZZ /////  ---------------- */




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

.logo {
    max-width: 400px;
    width: 25vw;
    float: left;
}

#header-unterseiten .logo {
    width: 300px;
}

.logo img {
    width: 100%;
}

#logo {
    position: relative;
    display: block;
    float: left;
    max-width: 420px;
    z-index: 999;
}

#logo img {
    width: 100%;
}


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

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

nav {
    position: relative;
    display: block;
    float: left;
    top: 30%;
}

#anhaenger-navigation, #haupt-navigation, #responsive-navigation {
    position: relative;
    display: block;
    float: left;
    width: 60%;
    margin: 2% 5%;
}

#anhaenger-navigation ul.menu a {
    border: solid 1px #fff;
    padding: 5px 2vw;
    margin: 0.2vw;
    display: block;
    width: calc(15vw - 2px);
    text-align: center;
}

#anhaenger-navigation h5 {
    position: relative;
    color: #fff;
    font-size: 1rem;
}

#haupt-navigation ul.menu li {
    margin: 3px 0 3px 0;
}


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-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
}


/*overlay nav*/
.navigation-menu {
  position: fixed;
  top: -200%;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  z-index: 10000;
}

.navigation-container {
    position: relative;
    display: block;
    float: left;
    height: 100%;
}

.navigation-menu .logo {
    position: absolute;
    left: 5%;
    top: 2em;
    width: 10vw;
    opacity: 0;
}

.navigation-menu .navigation-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.navigation-menu .navigation-bg.one {
  width: 4px;
  background-color: rgba(255,0,0,0.9);
}

.navigation-menu .navigation-bg.two {
  width: 0;
background: rgb(60,70,80);
background: -moz-linear-gradient(90deg, rgba(60,70,80,1) 0%, rgba(33,41,52,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(60,70,80,1) 0%, rgba(33,41,52,1) 100%);
background: linear-gradient(90deg, rgba(60,70,80,1) 0%, rgba(33,41,52,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c4650",endColorstr="#212934",GradientType=1);
}

.navigation-menu .navigation-bg-bild {
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;
    /* background-image: url(../images/navi-bg.jpg); */
    background-size: cover;
    background-position: center;
    z-index: 1;
}

video {
    width: 100%; /* Could also use width: 100%; */
    height: 100%;
    object-fit: cover;
    position: absolute; /* Change position to absolute if you don't want it to take up the whole page */
    left: 0px;
    top: 0px;
    z-index: -1;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
video {
	height:auto;
	width:100%;
	}
}

@supports (-ms-ime-align: auto) {
video {
	height:auto;
	width:100%;
	}
}

.video-overlay {
    background-color: rgba(33,41,52,0.6);
    width: 100%;
    height: 100%;
}

.navigation-menu .navigation-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.navigation-menu .nav-inner {
  position: relative;
  text-align: right;
}

.navigation-menu .nav-inner .nav-link {
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
}

.hero-content {
  text-align: center;
  background-color: transparent;
  color: #fff;
}



/* ///// RESERVATIONSSYSTEM - Styles dann auf CRAFT übernehmen ///// */


table.abCalendarTable,
.abMenu {
    max-width: 368px!important;
}



img#pjAbcCaptchaImage {
    width: initial;
}

#pjWrapperABC_24 td.abCalendarMonthPrev, #pjWrapperABC_24 td.abCalendarMonthNext {
    background-color: #f3f1f2!important;
}

#pjWrapperABC_24 td.abCalendarMonth {
    background-color: #f3f1f2!important;
    border-right: solid 1px  #f3f1f2!important;
    border-bottom: solid 1px  #f3f1f2!important;

}

td.abCalendarMonth {
    color: #7e7e7e!important;
}



#pjWrapperTrailers_theme2 .pjShBHeader .pjShBNav .navbar-nav .active a, #pjWrapperTrailers_theme2 .pjShBHeader .pjShBNav .navbar-nav .active a:before, #pjWrapperTrailers_theme2 .pjShBHeader .pjShBNav .navbar-nav .active a:after, #pjWrapperABC_24 .abMenu,
.abWrapper .abForm a  {
    background: #ff0100!important;
}




.abWrapper .abForm a 
{
    background: #f8f7f5!important;
    color: #ff0100!important;
}

#pjWrapperTrailers_theme2 .btn-primary {
    border-color: #ff0100!important;
    color: #fff;
    background: rgb(255 1 0);
    background: -moz-linear-gradient(top, rgba(243,76,42,1) 0%!important, rgba(231,62,29,1) 95%!important, rgba(235,61,27,1) 97%!important, rgba(232,62,27,1) 100%!important);
    background: -webkit-linear-gradient(top, rgb(255 1 0) 0%,rgb(255 1 0) 95%!important,rgb(255 1 0) 97%!important,rgb(255 1 0) 100%!important);
    background: linear-gradient(to bottom, rgb(255 1 0) 0%,rgb(255 1 0) 95%!important,rgb(255 1 0) 97%!important,rgb(255 1 0) 100%!important);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34c2a', endColorstr='#e83e1b',GradientType=0 );
}

#pjWrapperTrailers_theme2 .pjShBReservation .pjShBReservationContent .pjShBReservationTitle {
    color: #ff0100!important;
}

nav.pjShBPagination li {
    background: none!important;
}

ul.pjShBTrailerTechDetails li {
    font-size: 13px!important;
    color: #5f5f5f!important;
}

li.pjShBReservation p {
    font-size: 13px!important;
    color: #5f5f5f!important;
    line-height: 1.8!important;
}

#pjWrapperTrailers_theme2 ul.pjShBTrailerTechDetails li {
    list-style-type: none!important;
    margin-left: -12px!important;
    line-height: 1.2!important;
    font-size: 13px!important;
    color: #5f5f5f!important;
}

#pjWrapperTrailers_theme2 ul.pjShBTrailerTechDetails li:before {
    content: '- '!important;
}

.hinweis {
    font-size: 18px;
    font-weight: 500;
    color: #ff0100;
    padding: 1rem 0;
}

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

#infobutton, #infobutton-fadein {
    position: absolute;
    display: none;
    float: left;
    width: 220px;
    right: 130px;
    left: auto;
    top: 73px;
    background: #ffffff;
    color: #000;
    padding: 12px 25px 12px 25px;
    border: solid 1px #f00;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 100005;
}

#infobutton-fadein {
    top: 16%;
}

#info-icon {
    content: "";
    position: absolute;
    width: 108px;
    height: 86px;
    background-image: url(../images/info-icon.svg);
    background-size: cover;
    right: 200px;
    top: 0;
    z-index: 100006;
    cursor: pointer;
}

#header-fadein #info-icon {
    width: 76px;
    height: 60px;
}

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

#info-icon.aktiv {
    background-image: url(../images/info-icon-X.svg);
}

#infobutton.aktiv, #infobutton-fadein.aktiv {
    right: 0;
}

#infobutton a {
    font-size: 14px;
    color: #000;
    text-transform: none;
}

#infobutton span {
    font-size: 1.4em;
}


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

#slider {
    position: relative;
    display: block;
    float: left;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    overflow: hidden;
    margin: 20px;
    background: rgba(17,26,45,1);
}

#slider .newsflash, #slider .moduletable, #slider .slick-slider {
    display: block;
    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;
}


#slider .slick-active .hintergrundbild {
	-webkit-animation: kenburns-top 3s ease-in-out both;
	        animation: kenburns-top 3s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-1-16 9:35:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.1) translateY(-15px);
            transform: scale(1.1) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.1) translateY(-15px);
            transform: scale(1.1) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}



#slider-frame {
    position: absolute;
    top: 20px;
    right: 20px;
    height: calc(100% - 40px);
    width: 100px;
    z-index: 12;
    background: rgba(17,26,45,0.8);
}

#slider-frame-discover {
    font-family: "stuessi";
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(-90deg);
    display: inline-block;
    width: 300px;
    transform-origin: 0% 0%;
    bottom: 7em;
    position: absolute;
    left: 50%;
    margin-left: -0.7em;
}

#slider-claim {
    position: absolute;
    z-index: 2;
    left: 7%;
    bottom: 40%;
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-family: "stuessi";
    line-height: 1.2;
    font-size: 4vw;
}

.socialmedia {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    z-index: 1;
    bottom: 2em;
    right: 150px;
    width: auto;
}

.socialmedia img {
    height: 1.2em;
    width: auto;
    padding: 0em 1em;
    transform: scale(1.0);
    transition: all ease 0.5s;
}

.threesixty {
    position: absolute;
    top: 2.5em;
    right: 170px;
    z-index: 2;
    width: 4em;
}


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

#heads {
    position: relative;
    display: block;
	float: left;	
    width: 100%;
	height: 20vw;
    margin-bottom: 3vw;
	background-size: cover;
    background-position: center center;
}

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

#heads h1, #heads h2, #heads h3, #heads h4 {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#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;
}



/* ///// HEADS TITEL ////// */

#heads-titel {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 100%;
    height: 20em;
    margin-bottom: 3vw;
    background-size: cover;
    background-position: center center;
    background: rgb(20,27,34);
    background: -moz-linear-gradient(45deg, rgba(20,27,34,1) 0%, rgba(31,41,53,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(20,27,34,1) 0%, rgba(31,41,53,1) 100%);
    background: linear-gradient(45deg, rgba(20,27,34,1) 0%, rgba(31,41,53,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#141b22",endColorstr="#1f2935",GradientType=1);
}

#heads-titel h2 {
    color: #fff;
}

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

#submenu {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    background: #01647a;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
    -webkit-box-shadow: 0px 12px 14px -9px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 12px 14px -9px rgba(0,0,0,0.25);
    box-shadow: 0px 12px 14px -9px rgba(0,0,0,0.25);
}

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

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

#submenu ul.menu a {
    font-size: 1rem;
}

#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 {
    background: #017794;
}

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

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



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

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


/* ///// AUSWAHL ///// */

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

.auswahl {
    position: relative;
    float: left;
    overflow: hidden;
    height: auto;
    background: #030c17;
    text-align: center;
    cursor: pointer;
}

.auswahl:before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.4,1.4,1);
    transform: scale3d(1.4,1.4,1);
}

.auswahl:hover:before {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

.auswahl img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: all ease 0.35s;
}

.auswahl:hover img {
    opacity: 0.4;
    transform: scale(1.5);
}

.auswahl p {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 2em;
    transform: translate(-50%, 0);
    text-transform: uppercase;
    color: #fff;
    font-family: "gotham-bold";
    hyphens: none;
    letter-spacing: 1px;
    padding: 5px 10px;
    background: rgba(17,26,45,0.0);
    transition: all ease 0.5s;
}

.auswahl:hover p {
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    font-size: 0.8rem;
    background: rgba(17,26,45,0.0);
}


#auswahl .slick-slide {
    margin: 0 0.5em;
}

/*
#auswahl .slick-center {
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    opacity: 1;
    transform: scale(1.08);
    margin: 0 6em;
}*/

#auswahl .slick-prev:before, #auswahl .slick-next:before {
    background-image: url(../images/slider-arrow-dark.svg);
}

#auswahl .slick-next {
    right: 31%;
    top: 50%;
    transform: translate(0, -50%);
}

#auswahl .slick-prev {
    left: 31%;
    top: 50%;
    transform: translate(0, -50%);
}


#auswahl .slick-slide {
  transform: scale(0.7);
}

/*
#auswahl .slick-slide.slick-center + .slick-slide {
  transform: scale(0.8) translate(-250px);
  z-index: 10;
}

#auswahl .slick-slide.slick-center + .slick-slide + #auswahl .slick-slide {
  transform: scale(0.7)  translate(-640px);
  z-index: 5;
}
#auswahl .slick-slide.slick-active {
  transform: scale(0.8) translate(250px);
}
*/

#auswahl .slick-slide.slick-center {
  /* margin: 0 -10%; */
  transform: scale(1);
  z-index: 30;
}

#auswahl .slick-center:after {
  opacity: 0;
}




/* ///// BOTTOM CONTAINER ///// */

#bottom-container {
    position: relative;
    display: flex;
    width: 100%;
	float: left;
    margin: 5% 0 0;
}

#ausstellungen {
    position: relative;
    display: flex;
    align-items: center;
    float: left;
    width: calc(40% - 1px);
    padding: 5%;
    border-right: solid 1px #000;
    border-top: solid 1px #000;
    text-align: center;
}

#ausstellungen h3 {
    text-transform: none;
}

#occasionen {
    position: relative;
    display: flex;
    align-items: center;
    float: left;
    width: 40%;
    padding: 5%;
    border-top: solid 1px #000;
    text-align: center;
}

#occasionen p {
    margin: 0;
}

.item-page.occasionen span.field-value p {
    display: block;
    float: left;
    padding: 0 2%;
}

.occasionslinks {
    position: relative;
    display: flex;
    float: left;
    width: 100%;
}


/* ///// ANHÄNGER ///// */

.anhaenger .bild-frame, .anhaenger .bild {
    height: 7vw;
    margin: 0 0 1em;
}

.blog.col3.anhaenger .items-row {
  display: inline-block;
  position: relative;
    background: #f2f1f1;
    padding: 2%;
    flex: 0 27%;
    margin: 1%;
    transition: all ease 0.5s;
}


.anhaenger h2 {
    font-size: 1.2rem;
}

.anhaenger .span12 {
    width: 100%;
}

.secondary-infos p {
    font-size: 13px;
    color: #5f5f5f;
}

.anhaenger strong {
    font-size: 15px;
}

.moduletable.referenzenfilter h4 {
    padding-left: 40px;
}

.moduletable.referenzenfilter h4:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(0,-50%);
    width: 30px;
    height: 13px;
    background-image: url(../images/filter.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.noUi-connect {
    background: #ff0000;
}

.moduletable.anhaengerkategorien h4 {
    padding-left: 40px;
}

.moduletable.anhaengerkategorien h4:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(0,-50%);
    width: 30px;
    height: 13px;
    background-image: url(../images/the-s.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

ul.categories-module.anhaengerkategorien.mod-list {
    list-style: none;
}

ul.categories-module.anhaengerkategorien.mod-list a {
    font-size: 0.8rem;
}

.moduletable.anhaenger-titel h3 {
    font-family: "stuessi-demibold";
    font-size: 2rem;
}

.tabelle tr {
    border-bottom: solid 1px #000000;
}

.tabelle tr th:nth-child(1) {
    min-width: 130px;
}

.tabelle {
    margin-top: 2em;
}




/* ///// BORDER EFFECT ON HOVER ////// */

/*
.blog.col3.anhaenger .items-row {
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 20px 30px;
  background: rgba(0,0,0,0.09);
}
span{
  display: block;
  padding: 25px 80px;
}
*/

.blog.col3.anhaenger .items-row:before, .blog.col3.anhaenger .items-row:after{
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #cccccc;
}

.blog.col3.anhaenger .items-row span:before, .blog.col3.anhaenger .items-row span:after{
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: #cccccc;
}
.blog.col3.anhaenger .items-row:hover::before, .blog.col3.anhaenger .items-row:hover::after{
  width: 100%;
}
.blog.col3.anhaenger .items-row:hover span::before, .blog.col3.anhaenger .items-row:hover span::after{
  height: 100%;
}
/*----- button 1 -----*/
.btn-1::before, .btn-1::after{
  transition-delay: 0.2s;
}
.btn-1 span::before, .btn-1 span::after{
  transition-delay: 0s;
}
.btn-1::before{
  right: 0;
  top: 0;
}
.btn-1::after{
  left: 0;
  bottom: 0;
}
.btn-1 span::before{
  left: 0;
  top: 0;
}
.btn-1 span::after{
  right: 0;
  bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
  transition-delay: 0s;
}
.btn-1:hover span::before, .btn-1:hover span::after{
  transition-delay: 0.2s;
}






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

.navigation-menu #kontakt {
    position: absolute;
    float: left;
    right: 32%;
    top: 1em;
    color: #fff;
    text-align: right;
    opacity: 0;
}

.navigation-menu #kontakt a, .navigation-menu #kontakt p {
    font-size: 12px;
    color: #fff;
}

div#fox-container-m138 .fox-form select, div#fox-container-m138 .fox-form textarea, div#fox-container-m138 .fox-form input[type="text"], div#fox-container-m138 .fox-form input[type="email"] {
    border-radius: 0;
    color: #555555;
    background-color: #f2f1f1;
    border: 0px;
}

.grid.adressblock-1, .grid.adressblock-2, .grid.adressblock-3 {
    position: relative;
    display: flex;
    float: left;
    width: 100%;
    margin: 5em 0 5em 0;
    background: #f2f1f1;
}

.grid.adressblock-1 .bild, .grid.adressblock-2 .bild, .grid.adressblock-3 .bild {
    margin: 0 0;
}

.grid.adressblock-1 .col-2, .grid.adressblock-2 .col-2, .grid.adressblock-3 .col-2 {
    margin: 0;
}

.grid.adressblock-1 .col-2:nth-child(1), .grid.adressblock-2 .col-2:nth-child(1), .grid.adressblock-3 .col-2:nth-child(1) {
    margin: 4% 4%;
}

.map {
    width: 100%;
    margin: -8px 0;
}

/* ///// 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;
    font-family: "eurostile";
    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;
}



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

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


/* ///// SUBCONTENT ///// */

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



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

#news {
    position: relative;
    display: block;
    float: right;
    width: 59%;
    padding: 5% 8% 20%;
}

#news .newscontent {
    margin: 2%;
    flex: 0 45%;
    background: #fff;
    border-radius: 20px;
    -webkit-box-shadow: 5px 5px 9px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 5px 5px 9px 0px rgba(0,0,0,0.15);
    box-shadow: 5px 5px 9px 0px rgba(0,0,0,0.15);
}

#news .newscontent:nth-child(1) {
    flex: 0 100%;
}

#news .newsflash {
    justify-content: flex-start;
}

#news #beitrag {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}

#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;
}


/* ///// FILTER ///// */

button.jlmf-link {
    background: #f00;
    padding: 5px 10px;
    color: #fff;
    border: solid 1px #f00;
    text-transform: uppercase;
    font-size: 0.7rem;
    transition: all ease 0.5s;
}

button.jlmf-link:hover {
    background: #fff;
    color: #000;
}

.jlmf-link:hover {
    text-decoration: none;
}





/* ///// ÜBER UNS ///// */

.coronainfo {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 1% 0 10% 0;
    text-align: center;
    padding: 3% 23%;
    margin-left: -23%;
    background: #f2f1f1;
}

.vorteile {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 10% 0;
    text-align: center;
    padding: 9% 23%;
    margin-left: -23%;
    background: #f2f1f1;
}

.vorteile .grid {
    margin-top: 5%;
}

.team {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}

.team .bild {
    height: 15vw;
}

.panorama-tour {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    margin: 15% 0;
    background-image: url(../images/360-grad-tour.jpg);
    background-size: cover;
    background-position: center;
    padding: 15% 0;
    margin-left: -23%;
    width: 146%;
}

.panorama-tour h3, .panorama-tour a, .panorama-tour p {
    color: #fff;
}

.panorama-tour .button {
    color: #fff;
    border: solid 1px #ffffff;
    cursor: pointer;
}

.panorama-tour .button:before {
    background-image: url(../images/right-arrow-white.svg);
}

.panorama-tour-frame {
    display: none;
}

.panorama-tour-frame.aktiv {
    display: block;
}

.panorama-tour-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.9);
    z-index: 30000;
}

.panorama-tour-frame .closeX {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    width: 40px;
    height: 40px;
    background-size: cover;
}

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

.meilensteine em {
    position: relative;
    z-index: 2;
    font-size: 1rem;
}

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

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

.meilensteine em:nth-child(6n+1):before {
    content: "";
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    height: 1px;
    background: #000000;
}

.meilensteine em:nth-child(6n+1):after {
    content: "";
    position: absolute;
    top: 50%;
    left: -40px;
    width: 1px;
    height: 40px;
    margin-top: -20px;
    background: #000000;
}

.meilensteine em:nth-child(6n+4):before {
    content: "";
    position: absolute;
    top: 50%;
    right: -40px;
    width: 40px;
    height: 1px;
    background: #1c3258;
}

.meilensteine em:nth-child(6n+4):after {
    content: "";
    position: absolute;
    top: 50%;
    right: -40px;
    width: 1px;
    height: 40px;
    margin-top: -20px;
    background: #000000;
}

.meilensteine em:nth-child(3n+1) {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5em;
    height: 5em;
    margin: 10em 0;
    left: 50%;
    transform: translate(-50%, 0);
    border: solid 1px;
    border-radius: 50%;
    font-family: "stuessi";
    font-size: 0.8rem;
    background: #000000;
    color: #fff;
    text-align: center;
}

.meilensteine em:nth-child(3n+2) {
    position: absolute;
    font-family: "stuessi";
    width: 40%;
    margin-top: -12em;
    color: #1b3257;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.meilensteine em:nth-child(3n+3) {
    position: absolute;
    width: 40%;
    margin-top: -8em;
}

.meilensteine em:nth-child(6n+5) {
    right: 0;
}

.meilensteine em:nth-child(6n) {
    right: 0;
}


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

#footer {
    position: relative;
    display: block;
    float: left;
    width: 90%;
    padding: 5% 5% 5% 5%;
    background: rgb(20,27,34);
background: -moz-linear-gradient(45deg, rgba(20,27,34,1) 0%, rgba(31,41,53,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(20,27,34,1) 0%, rgba(31,41,53,1) 100%);
background: linear-gradient(45deg, rgba(20,27,34,1) 0%, rgba(31,41,53,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#141b22",endColorstr="#1f2935",GradientType=1);
}

#footer-1 .newsflash, #footer-2 .newsflash, #footer-3 .newsflash {
    display: block;
}

#footer-1 a, #footer-2 a, #footer-3 a, #footer-1 p, #footer-2 p, #footer-3 p, #footer-1 h3, #footer-2 h3, #footer-3 h3 {
    color: #c7c4c3;
}

#footer-1 {
    position: relative;
    display: block;
    float: left;
    width: 40%;
}

#footer-1 .beitrag {
    margin-left: 11em;
    width: calc(100% - 11em);
}

#footer-2 {
    position: relative;
    display: flex;
    float: left;
    width: 40%;
}

#footer-3 {
    position: relative;
    display: flex;
    float: left;
    width: 20%;
}


#footer ul.menu a {
    margin: 7px 0px;
    font-family: "gotham";
    text-transform: none;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

#footer ul.menu a:hover {
    color: #000;
}

#footer ul.menu li {
    float: none;
}

#footer ul.menu a:hover, #footer span.separator:hover {
    background: #c7c3c2;
}

#footer ul.menu a.extern:before {
    width: 14px;
    height: 14px;
    right: -1em;
    background-image: url(../images/extern-grey.svg);
}


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


#copyright {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    float: left;
    width: 90%;
    padding: 1% 5%;
    color: #8d97a3;
    text-transform: uppercase;
    background: #131b22;
}

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

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

#copyright p {
	color: #c7c4c3;
	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: cover;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: 0;
    z-index: 99999;
    width: 50px;
    height: 40px;
    cursor: pointer;
    transition: all 100ms ease-in;
}

a.scrolltotop:hover {
    background-image: url(../images/scrolltotop-hover.svg);
}

/* ///// SCROLL DOWN ///// */

a.scrolldown {
    display: block;
    position: absolute;
    background-image: url(../images/mouse.svg);
    background-size: contain;
    bottom: 2em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 9;
    width: 19px;
    height: 40px;
    cursor: pointer;
    -webkit-animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-28 15:39:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}




/* ///// 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%;
}

.icon {
    height: 6em;
    position: relative;
    margin-left: 50%;
    transform: translate(-50%, 0);
}

.icon img {
    display: block;
    height: 100%;
    width: auto;
    margin-left: 50%;
    transform: translate(-50%, 0);
}

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

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


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

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

.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;
}

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

.row-fluid {
    width: 100%;
}

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

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

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

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

.col2 .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) {
.col6 .items-row {
  flex: 0 30%;
}
}


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


@media screen and (max-width: 1200px) {
.col6 .items-row, .col4 .items-row, .col3 .items-row {
  flex: 0 46%;
}
}

@media screen and (max-width: 600px) {
.col6 .items-row, .col4 .items-row, .col3 .items-row, .col2 .items-row {
    flex: 0 98%;
}
}

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

.blog img {
    width: 100%;
}


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

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

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

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

.bild-frame {
    position: relative;
    width: 100%;
    height: 20vw;
    margin-bottom: 2em;
    overflow: hidden;
}

.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: cover;
    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: 0 1px;
    font-size: 14px;
}

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

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



/* END WHIZ */



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

html {
    height: 100%;
}

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

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

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

#header {
    position: absolute;
    display: block;
    float: left;
    width: auto;
    padding: 30px 0 30px 0;
    z-index: 10;
    transition: all ease 0.5s;
    margin: 20px 3em;
}

#header-unterseiten {
	position: relative;
    display: block;
    float: left;
    width: 100%;
    padding: 10px 0 5px 0;
    z-index: 10;
    transition: all ease 0.5s;
}

#header-fadein {
    position: fixed;
    top: -100px;
	visibility: hidden;
    left: 0;
    display: block;
    float: left;
    width: 100%;
    padding: 5px 0 5px 0;
    z-index: 9999;
    background: #fff;
    -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.fade-in {
	visibility: visible;
	top: 0;
}

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

#header-fadein .logo {
    max-width: 200px;
}

#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 {
    position: relative;
    display: flex;
    float: left;
    width: 100%;
    margin: 0 0 4em;
    justify-content: center;
}

#breadcrumbs:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
    height: 1px;
    background: #4c4c4c;
}

#breadcrumbs li {
    list-style: none;
    float: left;
    font-size: 12px;
    color: #4c4c4c;
    margin: 0;
}

#breadcrumbs .moduletable {
    background: #ffffff;
    padding: 0 10px;
    z-index: 2;
}

.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;
    display: block;
    word-wrap: break-word
}

#left-col-cont {
}

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

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

#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 {
}

#adverttop {
    margin: 0 0 0px;
}

#advertBottom {
    margin: 0px 0 0;
}

#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: 0.9rem; 
	line-height: 1.5;
	font-family: "gotham";
	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: #ff0000;
}


.button, a.button, p.button, a.readmore, button.goback, button#playme {
    position: relative;
    border: solid 1px #000000;
    padding: 10px 35px 10px 10px;
    transition: all ease .5s;
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.5;
}

a.button.button-details {
    margin-left: 0;
    padding: 2px 25px 2px 10px;
    font-size: 12px;
    text-transform: none;
}

.button:before, a.button:before, p.button:before, a.readmore:before, button.goback:before, button#playme:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 15px;
    width: 7px;
    height: 13px;
    background-image: url(../images/right-arrow.svg);
    background-size: contain;
}

a.button.button-details:before {
    right: 8px;
    width: 5px;
    height: 9px;
}

.button:hover, a.button:hover, a.readmore:hover, button.goback:hover, button#playme:hover {
    background: #ff0000;
    color: #fff;
    border: solid 1px #ff0000;
}

a.button.button-details:hover {
    background: #000000;
    color: #fff;
    border: solid 1px #000000;
}

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

a.button-back {
    position: relative;
    margin: 1em 0 4em;
    padding-left: 50px;
    display: block;
}

a.button-back:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    width: 40px;
    height: 25px;
    background-image: url(../images/goback.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

a.ricardo, a.tutti, a.autoscout24 {
    position: relative;
    height: 100%;
    border: solid 1px #000;
    padding: 10px 10px 50px 10px;
    transition: all ease .5s;
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-size: 0.8rem;
    line-height: 1.5;
}

a.autoscout24 {
    padding: 10px 10px 60px 10px;
}

a.ricardo:before, a.tutti:before, a.autoscout24:before {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    height: 22px;
    background-image: url(../images/ricardo.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

a.tutti:before {
    width: 120px;
    height: 33px;
    background-image: url(../images/tutti.svg);
}

a.autoscout24:before {
    width: 90px;
    height: 45px;
    background-image: url(../images/autoscout24.svg);
}

a.ricardo:hover, a.tutti:hover, a.autoscout24:hover {
    background: #ff0000;
    color: #fff;
    border: solid 1px #ff0000;
}

a.ricardo:hover:before {
    background-image: url(../images/ricardo-weiss.svg);
}

a.tutti:hover:before {
    background-image: url(../images/tutti-weiss.svg);
}

a.autoscout24:hover:before {
    background-image: url(../images/autoscout24-weiss.svg);
}



p, span.field-value, span.field-label {
	margin: 8px 0;
	font-size: 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.inhaltsfeld p {
    margin: 0;
}

strong {
    font-family: "gotham-bold"
}

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: "stuessi";
    color: #000000;
    font-size: 3rem;
	font-weight: 600;
    letter-spacing: 1px;
	line-height: 1.5;
}

h2 {
    font-family: "stuessi";
    color: #000000;
    font-size: 2.5rem;
	font-weight: 600;
    letter-spacing: 1px;
	line-height: 1.5;
}

h3 {
    font-family: "stuessi";
    color: #000000;
    font-size: 1.6rem;
	font-weight: 600;
    letter-spacing: 2px;
	line-height: 1.5;
    text-transform: uppercase;
}

h4 {
    position: relative;
    font-family: "gotham";
    color: #000000;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.5;
    border-bottom: solid 1px;
}

h5 {
    font-family: "stuessi-demibold";
    color: #000000;
    font-size: 1.1rem;
	font-weight: 600;
    letter-spacing: 1px;
	line-height: 1.5;
}


/* END TYPOGRAPHY */


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

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

ul, ol {
    margin-left: 0;
}

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

 #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;
}


select {
    height: 30px;
    border-radius: 0;
    background: #fff;
}

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 */