/* TITULO */

.titulo {
  color: #222;
  text-align: center;
  font-family: var(--font-family);
  font-size: 60px;
  padding-top:85px;  
  font-weight: 400;
  line-height: 1;
}

.titulo.azul {
  color:var(--azul-color);
  font-weight: 600;    
}


 /* TEXTO */

p.intro-texto{
text-align: center;
font-size: 20px;
padding: 10px 0 20px 0;
max-width: 1080px;
margin:0 auto;
font-weight: 400;
}
 


/* Responsividade: 1 coluna em celulares */
@media (max-width: 600px) {
  .titulo {
    font-size: 30px;
  }
  p.intro-texto{
    font-size:18px;
    margin: 0 auto;
    padding: 0;
  }
}
@media (min-width:440px) and (max-width: 1200px) {
  p.intro-texto{
    width:86%;
  }
}

 /* ACCORDIONS */

 .main {
  
  display:flex;
  flex-direction:row;
  height:600px;
    width: 86%;
    max-width: 1200px;
    margin:0 auto;
    margin-bottom: 80px;
  
}

@media(min-width:1300px){
  
  .main {    
     width: 91%;    
  } 
}

@media(min-width:1400px){
  
  .main {    
     width: 96%;    
  } 
}

@media(min-width:1500px){
  
  .main {    
     width: 100%;    
  } 
}

/*Device below 1024px, tablet/mobile*/
@media(max-width:1024px){
  
  .main {    
    display:flex;
    flex-direction:column;
    width:100%;   
    height:auto;
    
  } 
}


.column {
  
  width: 10%;
  transition: width 0.5s;
  overflow: hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  
}

.column:nth-child(1) {
  
  background-image: url('../images/ac-mensagens.jpg');
  background-size:cover;
  background-position:center center;
  border-radius: 20px 0px 0px 20px;
  
}

.column:nth-child(2) {
  
   background-image: url('../images/ac-quemsomos.jpg');
  background-size:cover;
  background-position:center center;
  
}

.column:nth-child(3) {
  
  background-image: url('../images/ac-governanca.jpg');
  background-size:cover;
  background-position:center center;
  
}

.column:nth-child(4) {
  
  background-image: url('../images/ac-presenca.jpg');
  background-size:cover;
  background-position:center center;
  
}

.column:nth-child(5) {
  
  background-image: url('../images/ac-iniciativas.jpg');
  background-size:cover;
  background-position:center center;
}

.column:nth-child(6) {
  
  background-image: url('../images/ac-eventos.jpg');
  background-size:cover;
  background-position:center center;
}

.column:nth-child(7) {
  
  background-image: url('../images/ac-gente.jpg');
  background-size:cover;
  background-position:center center;
}

.column:last-child {
  
  background-image: url('../images/ac-financas.jpg');
  background-size:cover;
  background-position:center center;
  border-radius: 0px 20px 20px 0px;
}


    
/* Overlay */

    .expanded:after {
        
        content: '';
        background-image: linear-gradient(#082d4f00 52%, #09090b);
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;

    }
    
 
    .column.col-governanca.expanded:after{
       background-image: linear-gradient(#082d4f00 12%, #09090b);
    }  

       .column.col-iniciativas.expanded:after{
         background-image: linear-gradient(#082d4f00 7%, #09090b);
       }


    
/*Inner elements inside column container styling*/
.inner-element {
        
  opacity: 0;
  transition: opacity 0s;
  z-index: 2;
  padding:20px;
  background:transparent;
  position:absolute;
  left:0;
  bottom:0;
      
}



.inner-element h2{

 color:white;
  font-size:var(--font-size-subtitulo);
  line-height: 1.2;
}
.inner-element h2 a{
  color: var(--amarelo-color);
}
.inner-element li,
.inner-element ul{
  margin:0;
  padding:0;
   color:white;
   z-index: 3;
}
.inner-element li a{
   color:white;
}
.inner-element li a:hover{
     color:white;
}
.inner-element li{
  list-style: circle;
  font-size:16px;
  margin-left:20px;

}
.inner-element li i{
  padding-right: 8px;
}

.inner-element p{
  
  color:white;
  font-size: var(--font-size);
  font-weight:100;
  
}
    
/*Inner elements made visible on clicked column*/
.column.expanded .inner-element {
              
 opacity: 1; 
 transition: opacity 0.5s 0.4s;        
       
}

/*Tablet and mobile, below 1025px*/  
@media (max-width: 600px) {

  .inner-element h2{
    font-size:var(--font-size-subtitulo-mobile);
  }
   
    .column.col-quemsomos.expanded:after{
       background-image: linear-gradient(#082d4f00 12%, #09090b);
    }  

}

.accordion-tab {
  
  position:relative;
  bottom:0;
  left:auto;
  font-size:40px;
  padding:20px;
  background:rgba(122, 122, 122, 0.37);
  z-index:2;
  height:100%;
  width: 64px;
  right:0;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  overflow: hidden;
  cursor:pointer;
   
}

.accordion-tab:after{
  content:" ";
  display: block;
  width:20px;
  height:20px;
  position: absolute;
  z-index:2;
  top:20px;
  left:15px;
  background: url("../images/plus.svg");
  background-size: cover;
  opacity: 0.5;
}

.accordion-tab.cor1{
  background-color: #00354e;
}

.accordion-tab.cor2{
  background-color: #004463;
}

.accordion-tab.cor3{
  background-color: rgb(53, 136, 175);
}

.accordion-tab.cor4{
  background-color: rgb(56, 144, 185);
}

.accordion-tab.cor5{
  background-color: rgb(61, 158, 202);
}
.accordion-tab.cor6{
  background-color: rgb(65, 167, 214);
}
.accordion-tab.cor7{
  background-color: rgb(73, 177, 224);
}
.accordion-tab.cor8{
  background-color: rgb(135, 216, 253);
}
.accordion-tab.cor9{
  background-color: hwb(199 52% 11%);
}


.expanded .accordion-tab{
  display: none;
}

.accordion-tab h4{
   font-size:18px; 
}

.accordion-tab i{
  position: absolute;
  top:20px;
}



/*Desktop Styling*/
@media screen and (min-width: 1025px) {
            
    /*Clicked column styling*/
    .expanded {
        
        width: 150% !important;
        
        }

        .accordion-tab h4{
          position: absolute;
          width:500px; 
          height:40px;
          bottom:auto;  
          top:47%; 
          transform: rotate(-90deg);    
      }

      
    .inner-element{
        flex-flow: column;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        transition: opacity .55s cubic-bezier(.36, 0, .1, 1);
        display: flex;
        position: absolute;
        top: auto;
        left:30px;
        bottom:30px;
    }
}

/*Tablet and mobile, below 1025px*/  
@media (max-width: 1024px) {
        
    .column {
            
            width:100%;
            transition: height 0.5s;
          height: 60px;
            
    }    
            
    /*Clicked column styling*/
    .expanded{
        
         height: 320px !important;        

    }
    .accordion-tab{
      width:100%;
      height: 60px;
    }
     .accordion-tab h4{
          position: relative;
          width:90%; 
          height: 20px;
          top:0; 
          left:0;
          transform: initial;    
      }

      .accordion-tab:after {
        left:auto;
        right: 15px;
          }

       .column:nth-child(1) {        
        border-radius: 20px 20px 0px 0px;        
      }
        
        .column:last-child {  
          border-radius: 0px 0px 20px 20px;
        }

        .accordion-tab {
            padding: 20px 8px;
        }
         .column .submenu-group ul{
            display: none;
         }
 }