:root {
  --primary-color: #B21416;
  --secondary-color: black;
  --third-color: #aec7db;
    --grey-color: #F6F6F6;
}

body{
  width:100% !important;
  overflow-x:hidden !important;
  font-family:"open sans", sans-serif;
  background:white !important;
}
.icons{
  display:none;
}
.jmodedit{
  display:none;
}
/*deactivate card*/
.card{
  border:0px !important;
}

.card-header {
    color: var(--card-cap-color);
    background-color: unset !important;
  border-bottom: 0px solid !important;
}

.card-body{
  padding:0px !important;
}

 .container-bottom-a{
   display:block;
     max-width: 100% !Important;
 }

.container-bottom-a .card {
  margin-bottom:10vh !important;
}

/*basics*/

.container-bottom-b{
  display:block;
    
}
.page-header{
  display:none !Important;
}
a {color:var(--primary-color);}
a:hover{color:var(--secondary-color);}
a:focus {color:var(--primary-color);}

.centertext{
text-align:center;
}

.abstandshalter{
padding:50px;
}

@media only screen and (max-width: 500px) {
.abstandshalter{
padding:20px;
}
}

.flexwrapper{
  display:flex;
}

@media only screen and (max-width: 600px) {
  .flexwrapper{
  display:block;
}
}
/*text*/
h1,h2,h3,h4,p,a{
   font-family:"open sans", sans-serif;
}
h1{
color: black;
  text-transform:uppercase;
  font-weight:450;
    font-size:4em;
    animation-name: headeranimation;
  animation-duration: 1s;
}
@keyframes headeranimation{
  from {margin-left:50px;}
  to {margin-left:0px;}
}

@media only screen and (max-width: 1000px) {
  h1 {
      font-size:3em;
  }
}

@media only screen and (max-width: 600px) {
  h1 {
      font-size:2em;
  }
}

h2,h3{
    font-weight:450;
}
h2{
  font-size:3em;
}
h1 a, h2 a, h3 a, h4 a{
text-decoration:none !Important;
  
}

/*Color*/
.primarycolor{
  color: var(--primary-color);
}
.white{
color:white;
}

.primarybg{
  padding:40px;
background-color: var(--primary-color);
}

.secondarybg{
  padding:40px;
background-color: var(--secondary-color);
}

.greybg{
    padding:40px;
background-color: var(--grey-color);
}


/*boxen*/

.shadowbox{
  	box-shadow: 0 0 8px rgba(0, 0, 0, .5);
  background-color:white;
  padding:10px;
  border-radius:20px;
  height:100%;
}
.shadowbox:hover{
  box-shadow: 0 0 8px rgba(0, 0, 0, .9);
  transition:0.5s;
}
.centerbox{
width:fit-content;
margin:auto;
}

.width60{
width:60%;
margin:auto;
}
@media only screen and (max-width: 1200px) {
  .width60{
	width:80%;
}
}
@media only screen and (max-width: 600px) {
  .width60{
	width:100%;
}
}

.width80{
  width:80%;
margin:auto;
}
@media only screen and (max-width: 600px) {
.width80{
  width:100%;
}
}

/*btn*/
button{
  color: black;
  border:1px solid black;
  background:transparent;
   padding:10px 15px 10px 15px;
   border-radius:20px;
}

button:hover{
  background: rgba(0, 0, 0, 0.05);
}
button i{
  margin-right:5px;
}

.primarybtnoutline{
  padding:10px 15px 10px 15px;
  color:var(--primary-color);
  border: 2px solid var(--primary-color);
  width:fit-content;
  border-radius:20px;
  text-decoration:none!important;
}
.primarybtnoutline{
   color:var(--primary-color) !important;
  }
.primarybtnoutline:hover{
  background:var(--primary-color);
background: linear-gradient(90deg, rgba(178,20,16,1) 0%, rgba(214,29,31,1) 100%);
  color:white !important;
}
.primarybtn{
	padding:10px 15px 10px 15px;
    background:var(--primary-color);
background: linear-gradient(90deg, rgba(178,20,16,1) 0%, rgba(214,29,31,1) 100%);
  width:fit-content;
  border-radius:20px;
  color:white !Important;
  text-decoration:none!important;

}
.primarybtn a{
    color:white !Important;;
    text-decoration:none;
}

.primarybtn:hover{
  opacity:0.8;
}

.secondarybtn{
	padding:10px 15px 10px 15px;
    background-color:var(--secondary-color);
  width:fit-content;
  border-radius:20px;

}
.secondary:hover{
  opacity:0.8;
}
.secondarybtn a{
    color:var(--primary-color);
    text-decoration:none;
}

.whitebtn{
	padding:10px 15px 10px 15px;
    background-color:white;
  width:fit-content;
  border-radius:20px;

}
.whitebtn a{
    color:var(--primary-color);
    text-decoration:none;
}
.btn-secondary{
   background-color:var(--primary-color);
  color:white;
  }
.btn-secondary:hover{
   background-color:var(--primary-color);
  color:white;
   opacity:0.8;
  }
.btn-secondary:focus{
     background-color:var(--primary-color);
  color:white;
   opacity:0.8;
  }
.readmore span{
  display:none;
}
/*brand logo*/
.brand-logo{
  position:fixed !important;
  z-index:2;
  width:200px;
  position:absolute;
  left:20px;
  top: 40px;
}
@media only screen and (max-width: 1000px) {
  .brand-logo {
  width:150px;
  }
}

@media only screen and (max-width: 300px) {
  .brand-logo {
  width:80px;
  }
}

@media only screen and (max-width: 807px) {
.brand-logo{
 top: 60px;
}
  }


.brand-logo img{

}

@media only screen and (max-width: 500px) {
.brand-logo{
position:absolute !important;
  top:0px !important;
}
  }

/* nav (weiß) mit Cassiopeia Collap / Dropdown */

.metismenu-item{
  color:black; 
}

.metismenu-item a{
  color:black; 
}
.container-header {
    background-color: transparent;
	color:black;
    background-image: none;
}
.navbar{
  color:black !important;
}
.nav-header{
    color:black !important;
}
.navbar-collapse{
  
}
.container-header .navbar-toggler {
    border: 0px solid #fff;
    color:  var(--primary-color);
    cursor: pointer;
}

.nav-item{
  color:black !important;
}
.container-nav{
  position:fixed;
  width:100% !important; 
  background-color:white !important;
      margin-top: 8px;
    width: 100% !important;
    max-width: 100% !important;
  padding-right:20px !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}

@media only screen and (max-width: 807px) {
.container-nav{
  margin-top: 30px; 
}
  }

@media only screen and (max-width: 500px) {
.container-nav{
  display:block !Important;
     position:relative !important;
  margin-top: -30px !important;
}


  }
.container-header .container-nav .container-search:only-child{
  margin:auto !Important;
}

.mod-menu{
  justify-content: end !important;
  
}
.metismenu.mod-menu .mm-toggler:after {
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid;
  }

/*nav toggle stays right */
.navbar{
  display:block !important;
  text-align:right;
}
.container-header .container-nav {
    justify-content: end !important;   
}

/* Footer */

.footer{
   background-color: #0E0E0E;
    background-image: none;
}
.footer a{
   text-decoration:none;
}
.footer .grid-child .mod-custom{
  width:100% !Important; 
}


/* (footer?)größe 100% */
#mod-custom110{
width:100%;
}

/*Screen kleiner als 200 */
@media only screen and (max-width: 200px) {
h1, h2, h3{
  font-size:0.8em !important;
    word-wrap: break-word !important;
}
  }

@media only screen and (max-width: 200px) {
p{
  font-size:0.8em !important;
  word-wrap: break-word !important;

}
  }


/*offline header*/
.offline-card .header{
    background-color: #F6F6F6;
  color:black !important;
    background-image: none;
    background-image: none;
      height: 80vh;
    }
    
    .btn-primary {
    background-color: #D61D1F;
    border:0px solid;
    color:White;
}
.offline-card .logo-icon{
  display:none;
}

.offline-card .header h1 img{
  display:none !Important;
}
.offline-card .header h1{
   /* background-image: url(https://ollis-fahrschule.coach/images/Fanslau-Logo.png); */
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
#plg_system_webauthn-3WOSQ9ElgSSd-3cyakq3d{
  display:none !important;
}

.offline-card {
  width:100% !important;
  max-width:100%;
}

.login {
    max-width: 50%;
    margin: auto;
}
/*topbar*/
.topbarwrapper{
  position:fixed;
  width:100%;
      padding: 5px 20px 5px 20px;
    background: var(--primary-color);
background: linear-gradient(90deg, rgba(178,20,16,1) 0%, rgba(214,29,31,1) 100%);
}
.topbarwrapper p{
      margin-bottom: 0px !important;
}

.topbarwrapper a{
      text-decoration:none !Important;
  margin-right:10px;
}
.topbarwrapper a i{
  margin-right:5px;
}

@media only screen and (max-width: 1200px) {
.topbarwrapper a{
  width:80%;
}
}

@media only screen and (max-width: 500px) {

  .topbarwrapper{
  display:grid !Important;
    position:relative !important;
}

  }

/*header*/
.headerwrapper{
  max-width:100% !important;
  min-height:60vh;
  padding-top:50px;
}
.leistungswrapper {
 margin-top:-8vh !important;
  width:60%;
  margin:auto;
}

@media only screen and (min-width: 2100px) {
 .leistungswrapper {
  width:40%;
}
  }

@media only screen and (max-width: 1400px) {
  .headerwrapper{
padding-bottom:50px;
    margin-top:60px;
  }
}

@media only screen and (max-width: 1200px) {
 .leistungswrapper {
  width:80%;
}
}


@media only screen and (max-width: 1200px) {
 .leistungswrapper {
 margin-top:-5vh !important;
}
}

@media only screen and (max-width: 767px) {
 .leistungswrapper {
  width:90%;
    margin-top:-2vh !important;
}
  .headerwrapper{
padding-bottom:50px;
    margin-top:40px;
  }
  .leistungswrapper  i{
  float:left;
}
  .leistungswrapper  .col-12{
  margin-bottom:40px;
}
  .headerwrapper h1{
  text-align:center;
}
    .headerwrapper a{
 display:block;
      text-align:center;
      margin-bottom:10px;
      width:100%;
}

}

@media only screen and (max-width: 500px) {
 .headerwrapper {
   margin-top:50px;
  } 
  .headerwrapper .my-auto{
    margin-top:20px !important;
  }
    } 
.leistungswrapper  h2{
  font-size:2em;
}
@media only screen and (max-width: 860px) {
 .leistungswrapper  h2{
  font-size:1.5em;
}
}
.leistungswrapper .shadowbox{
  height:100% !important;
   align-content: center;
}

.highlight{
border:2px solid  var(--primary-color);
}
.highlight:after{
  content:"Ab 15 Jahren";
  background: var(--primary-color);
background: linear-gradient(90deg, rgba(178,20,16,1) 0%, rgba(214,29,31,1) 100%);
  margin-top:20px;
  margin:auto;
      border-radius: 200px;
    padding: 10px;
    position: absolute;
    /*bottom: 10px;*/
  color:white !important;
  transform: translate(-50%, 0);
}
@media only screen and (max-width: 767px) {
   .highlight:after{
bottom:unset !Important;
    }
}
.square{
      aspect-ratio: 1 / 1 !important;
}

@media only screen and (max-width: 800px) {
  .square{
      aspect-ratio: auto !important;
}

  }
/*home*/
.theoriezeitenouterwrapper{
  min-height:70vh;
  padding:5vh;
  background-size:cover;
  background-position:center; 
  background-repeat:no-repeat;
  backgound:url("images/fahrschulebg.webp");
  align-content:center;
}
.theoriezeiteninnernwrapper{
  background:rgba(255,255,255, 0.9);
  border-radius:20px;
  padding:20px;
  max-width: 60%;
    margin: auto;
}

@media only screen and (max-width: 1200px) {
  .theoriezeiteninnernwrapper{
     max-width: 80%;
  }
}

@media only screen and (max-width: 800px) {
  .theoriezeiteninnernwrapper{
     max-width: 90%;
  }
  .theoriezeitenouterwrapper{
    padding:10px;
  }
}

@media only screen and (max-width: 600px) {
  .theoriezeiteninnernwrapper{
     max-width: 99%;
  }
  .theoriezeitenouterwrapper{
    padding:10px;
  }
}


.theoriezeiten{
  display:flex;
  background-color:White;
  color:black; 
    border-radius:100px;
       align-content: center;
  width:fit-content;
  padding-right:10px !important;
  font-size:1.3em;
  margin:auto;
  	box-shadow: 0 0 8px rgba(0, 0, 0, .5);
  margin-bottom:10px;
}
@media only screen and (max-width: 575px) {
  .theoriezeiten{
      width: 100%; 
  }
    .theoriezeiten p{
      width: 100%; 
    text-align:center !important;
  }
}


.theoriezeiten p{
  align-content: center;
  margin-bottom:0px; 
}

.theoriezeiten .redcircle{
background:var(--primary-color);
background: linear-gradient(90deg, rgba(178,20,16,1) 0%, rgba(214,29,31,1) 100%);
  border-radius:100px;
padding:5px 10px 5px 10px;
  color:white;
  aspect-ratio: 1 / 1 !important;
  width:fit-content;
      align-content: center;
  margin-right:10px;
  height:80px;
  text-align:center;
}


@font-face {
  font-family:"open sans";
  src: url("/media/templates/site/cassiopeia/OpenSans-VariableFont_wdth,wght.ttf");
}

@font-face {
  font-family: 'open sans';
  src: url('/media/templates/site/cassiopeia/OpenSans-VariableFont_wdth,wght.ttf') format('ttf');
}

.erfahrungen .shadowbox{
  padding:1.5em;
  padding-bottom:1.8em;
}
.erfahrungen .quelle{
  margin-top:-5px;
  opacity:0.5;
}

.erfahrungen .iconuser{
  margin:auto;
  margin-top:-30px;
      color: var(--primary-color);
  background:white;
  border-radius:200px;
}

@media only screen and (max-width: 775px) {
  .kontakt a{
 display:block;
      text-align:center;
      margin-bottom:10px;
      width:100%;
}
  }

/*reveal fade bottom */

.reveal {
  position: relative;
  opacity: 0;
}
.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 0.5s ease-in;
}
.active.fade-left {
  animation: fade-left 0.5s ease-in;
}
.active.fade-right {
  animation: fade-right 0.5s ease-in;
}


@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/*cookies*/
#redim-cookiehint-bottom{
  background:transparent !Important;
      box-shadow: none !important;
}



  #redim-cookiehint{
 background: rgba(255,255, 255, 0.9) !important;
  }


@media only screen and (min-width: 800px) {
#redim-cookiehint-bottom #redim-cookiehint{
  max-width:50%;
float:left;

}
}

@media only screen and (max-width: 800px) {
#redim-cookiehint-bottom #redim-cookiehint{
  max-width:60%;
float:left;

}
}


#cookiehintsubmit, #cookiehintsubmitno{
 background-color: var(--primary-color) !important;
}

#cookiehintsubmit:hover, #cookiehintsubmitno:hover{
   background-color: var(--primary-color) !important;
  opacity:0.8;
}

@media only screen and (max-width: 600px) {
  #redim-cookiehint {
   width: 100%;
    float: none;
}
  }

/*accordion */


details{
  background-color: #F8F7F7;
  color: black;
  font-size: 1.5rem;
  margin-bottom:10px;
}

summary {
  padding: .5em 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  transition: height 1s ease;
}

summary::-webkit-details-marker {
  display: none;
}

summary:after{
  content: "\002B";
}
.foldout{
  background-color:white;
  }
details[open] summary {
    /*border-bottom: 1px solid #aaa;
    margin-bottom: .5em;*/
}

details[open] summary:after{
  content: "\00D7";
}

details[open] div{
  padding: .5em 1em;
}
  .accordion summary, .foldout{
    font-size:1rem;
  }


.row .col{
  margin-bottom:100px;
}



/*img slider*/


.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 30vh;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  border:5px solid white;
  border-radius:20px; 
  filter:saturate(0.3);
  
  &:hover{
    flex: 4;
    filter:saturate(1);
  }
}

.item-1 { 
  background-image: url('/images/slider/slider1.jpg');
}

.item-2 { 
  background-image: url('/images/slider/slider2.jpg');
}

.item-3 { 
  background-image: url('/images/slider/slider3.jpg');
}

.item-4 { 
  background-image: url('/images/slider/slider4.jpg');
}

.item-5 { 
  background-image: url('/images/slider/slider5.jpg');
}

  .item-6 { 
  background-image: url('/images/slider/slider6.jpg');
}

    .item-7 { 
  background-image: url('/images/slider/slider7.jpg');
}

  .item-8 { 
  background-image: url('/images/slider/slider8.jpg');
}

  .item-9 { 
  background-image: url('/images/slider/slider10.jpg');
}




/* news*/
.aktuelles{
    /* background: var(--primary-color); */
    background: rgba(178,20, 22, 0.7);
  color:white;
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:10;
  max-width:30%; 
  max-height:40%;
  overflow:hidden;
  }

  .aktuelles .mod-articlesnews__item{
    padding:20px;
      }

    .aktuelles .mod-articlesnews__item:before{
    content:"";
      float:right;
      color:White;
      }


@media only screen and (max-width: 800px) {
  .aktuelles{
  }
}


/*slick*/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

#plg_system_eprivacy_details{
  display:none !important;
}

#plg_system_eprivacy_modal button{
  background:black; 
  color:white;
}