/* CSS Document */


    
.accordion {
	display: flex;
	height: 100%;
	width: 100%;
	position: relative;
	padding: 0;
	}
    
.accordion-item {
	height: 100%;
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
	margin: 0;
	cursor: pointer;
	}
.accordion-item:nth-child(odd){
	background-color: #613439;
}
.accordion-item:nth-child(even){
	background-color: #c43c30;
}   
   
    
.accordion-item.active {
	flex: 3.4;
}

.accordion-item:not(.active) {
	flex: 0.8;
}
    
   
    
    .content {
      width: 100%;
		height: 100%;
      padding: 25px 35px;
      color: #f7f2ef;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
      transform: translateY(20px);
      z-index: 2;
      pointer-events: none;
    }
    
    .accordion-item.active .content {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    
    h3 {
      margin-bottom: -5px;
      font-size: 46px;
		font-family: "Orbit", sans-serif;
  font-weight: 400;
  font-style: normal;
    }
h4{
	font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
	font-size: 32px;
}
 
    .content p {
      font-size: 18px;
      line-height: 25px;
      width: 310px;
		position: absolute;
		bottom: 0;
		left: 320px;
    }
    
.orateurPicAndText{
	/*width: 100px;*/
	position: relative;
	height: 440px;
}

.content .orateurPic{
	position: absolute;
	bottom: 0;
	left: 0;
	
}
    
    .location-label {
      position: absolute;
		text-align: left;
      bottom: 80px;
		width: 100%;
      left: 50%;
      transform: translate(-50%) rotate(-90deg);
      color: white;
      font-size: 46px;
		font-family: "Orbit", sans-serif;
  font-weight: 400;
  font-style: normal;
      white-space: nowrap;
      transition: opacity 0.3s ease;
      z-index: 1;
      opacity: 1;
		line-height: 40px;
    }
    
    .accordion-item.active .location-label {
      opacity: 0;
    }
.location-label span{
	font-family: "Zalando Sans Expanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
	font-size: 32px;
}
.accordion-item:nth-child(odd) .location-label span,
.accordion-item:nth-child(odd) h4{
	color: #c43c30;
}
.accordion-item:nth-child(even) .location-label span,
.accordion-item:nth-child(even) h4{
	color: #613439;
}  


    
    
    /* Responsive adjustments */
    @media (max-width: 700px) {
      
     
      
      .accordion {
        padding: 10px 0;
      }
      
      .accordion-item {
        height: 100%;
        margin: 0 3px;
      }
      
      
      
      .content {
        padding: 20px;
      }
      
      h3 {
        font-size: 32px;;
      }
		h4{
			font-size : 21px;
			margin-bottom: 15px;
		}
      
      .content p {
        font-size: 16px;
		  line-height: 19px;
      }
      
      
    }
    
    /* Animation for tab opening */
    @keyframes slideIn {
      0% { transform: translateX(30px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }
    
    
    
    .content h3 {
      animation: slideIn 0.5s ease forwards;
      opacity: 0;
    }
    
    .content p {
      animation: slideIn 0.5s ease forwards;
      animation-delay: 0.1s;
      opacity: 0;
    }
    
    
    
    /* Radial cursor effect */
    /*.accordion-item::after {
      content: '';
      position: absolute;
      height: 80px;
      width: 80px;
      background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
      opacity: 0;
      transition: opacity 0.5s;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 3;
    }*/
    
    .accordion-item:not(.active):hover::after {
      opacity: 1;
    }