.regional-accordion{

}

.regional-accordion .accordion-container {
  display: flex;
  width: 100%;
  min-height: 440px;
  overflow: hidden;
}

.regional-accordion .accordion-item {
  flex: 0 0 64px;
  position: relative;
  background: #ccc;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-right: 12px;
  position: relative;
}

.regional-accordion .accordion-item:last-of-type {
    margin-right: 0;
}

.regional-accordion .accordion-item.active {
  flex: 1 1 auto;
}

#main .regional-accordion h3{
    margin: 0;
}

/* .regional-accordion .accordion-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  padding: 6px;
  cursor: pointer;
  background: transparent;
} */

/* .regional-accordion .accordion-title {
  transform: rotate(-90deg);
  text-align: left;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  padding: 6px;
  cursor: pointer;
  background: transparent;
  width: 400px;
} */

.regional-accordion .accordion-title{
  text-align: left;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  padding: 6px;
  cursor: pointer;
  background: transparent;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
}

.regional-accordion .accordion-title span{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: absolute;
  left: 7px;
  bottom: 10px;
  display: block;
}

.regional-accordion .accordion-title:hover,
.regional-accordion .accordion-title:focus{
    -webkit-box-shadow: none;
    box-shadow: none;
}

.regional-accordion .accordion-item.active .accordion-title {
  display: none;
}

.regional-accordion .accordion-content {
  display: none;
  color: white;
  padding: 2rem;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.regional-accordion .accordion-content p{
    font-size: 2rem;
}

.regional-accordion .accordion-content p strong{
    font-size: 4rem;
}

.regional-accordion .accordion-content p a{
    color: #fff;
    text-decoration: none;
}

.regional-accordion .accordion-item.active .accordion-content {
  display: block;
}

/* Mobile: untereinander */
@media (max-width: 768px) {
    
  .regional-accordion .accordion-container {
    flex-direction: column;
    height: auto;
  }

  .regional-accordion .accordion-item {
    flex: none;
    height: 50px;
    margin-right: 0;
  }

  .regional-accordion .accordion-item.active {
    height: auto;
  }

  .regional-accordion .accordion-title {
    font-size: 1.5rem;
    padding: 0;
    line-height: 2;
  }
  
  .regional-accordion .accordion-title span{
    writing-mode: horizontal-tb;
    transform: none;
    position: initial;
    padding-left: 10px;
  }
  
  .regional-accordion .accordion-content p {
    font-size: 1rem;
  }
  
  .regional-accordion .accordion-content p strong {
    font-size: 2rem;
  }
  
}


/* admin */

#editor .acf-block-preview .regional-accordion{
    height: 100px;
    max-width: 100%;
    background: url('../../images/ofek_pattern.png') center center #f4f4f4;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    margin: 0;
    padding: 0;
}

#editor .acf-block-preview .regional-accordion:after{
    content: "Regional Accordion";
    background: #fff;
    padding: 6px 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#editor .acf-block-preview .regional-accordion > *{
    display: none;
}