/********************************************************************************
*                             BEM Methodology                                   *
*  [$] Block = block                                                            *
*  [$] Element = block__element                                                 *
*  [$] Modifier = block__element--modifier                                      *
*                                                                               *
*                             Accordion Component                                     *
*                                                                               *
*  [^]                                              *                                                             
*  [^]
*  [^]
*                                                                               *
*                                                                               *
*                                                                               *
*                                                                               *
********************************************************************************/


/* [$] Element *****************************************/
    

    .accordion * {
      transition: all .3s ease 0s;
    }
    .accordion__title{
        text-align:center;
    }
    
    .accordion__panels {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      overflow: hidden;
    }

    .accordion__panel-background-image  {
        background-size: cover;
    }
    
    .accordion__panel  {
        position: relative;
        width: 100%;
        min-height: 450px;
    }
    
    .accordion__panels:hover article {
      flex: initial;
      width: 10%;
    }
    
    .accordion-2 .accordion__panels article:hover {
      width: 90%;
    }
    
    .accordion-2 .is-accordion-hovering article:nth-last-child(1) {
      width: 90%;
    }
    
    .accordion-3 .accordion__panels article:hover {
      width: 80%;
    }
    
    .accordion-3 .is-accordion-hovering article:nth-last-child(1) {
      width: 80%;
    }
    
    .accordion-4 .accordion__panels article:hover {
      width: 70%;
    }
    
    .accordion-4 .is-accordion-hovering article:nth-last-child(1) {
      width: 70%;
    }
    
    .accordion-5 .accordion__panels article:hover {
      width: 60%;
    }
    
    .accordion-5 .is-accordion-hovering article:nth-last-child(1) {
      width: 60%;
    }
    
    .accordion-6 .accordion__panels article:hover {
      width: 50%;
    }
    
    .accordion-6 .is-accordion-hovering article:nth-last-child(1) {
      width: 50%;
    }
    
    .accordion__panels article > .accordion__panel__text {
      opacity: 0;
      transition: opacity .2s ease 0;
    }
    
    .accordion__panels .accordion__panel:hover > .accordion__panel__text {
      opacity: 1;
      transition: opacity .3s ease .3s;
      position: relative;
    }
    
    .accordion__panels .accordion__panel:hover > .accordion__panel__title {
        -ms-transform: scale(0); /* IE 9 */
        -webkit-transform: scale(0); /* Safari */
        transform: scale(0); /* Standard syntax */
     
    }
    
    .accordion__panels:hover .accordion__panel__text {
        transform: scale(0); /* Standard syntax */
    }
    
    .accordion__panels .accordion__panel:hover > .accordion__panel__text {
        -ms-transform: scale(1); /* IE 9 */
        -webkit-transform: scale(1); /* Safari */
        transform: scale(1); /* Standard syntax */
        position: relative;
     
    }

    .accordion__panels:hover .accordion__panel__title {
       font-size:0.7em;
    }
    
    .accordion__panel > .accordion__panel__title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 1.3em;
        
    }
    
    .accordion__panel__text {
        text-align: justify;
        position: absolute;
        padding: 90px 200px 0 200px;       
        height: 300px;
    }

/* [#] md screen */
@media (min-width: 992px) and (max-width: 1199px) {
    
    .accordion__panel > .accordion__panel__title {
       font-size: 1.2em;
    }

    .accordion__panels:hover .accordion__panel__title {
        font-size:0.7em;
    }
       .accordion__panel__text {
        padding: 70px 30px 0 30px;        
    }
    
}

/* [#] sm screen */
@media (max-width: 991px) and (min-width: 768px){
    

    .accordion__panels {
      min-height: 350px;
    }
    
    .accordion__panels .accordion__panel > .accordion__panel__title {
        font-size: 1.3em;
    }
    
    .accordion__panels:hover .accordion__panel__title {
       font-size:0.6em;
    }
    
    .accordion__panel__text {
        padding: 70px 30px 0 30px;        
    }

}
/* [#] xs screen */
@media (max-width: 767px) {
  
    .accordion__panels:hover .accordion__panel__title {
       font-size: 1em;
    }
 
    .accordion__panels {
        flex-direction: column;
    }

    .accordion__panels:hover .accordion__panel{
        width: 100%;
    }

    .accordion__panel:hover {
      height: auto;
    }

    .accordion__panel__text {
        text-align: center;
        margin: auto;
        height: auto;
    }
    
    .accordion__panel  {
        min-height: 300px;
    }
    
    .accordion__panel__text {
        padding: 0 30px;        
    }

    .accordion-2 .accordion__panels article:hover , .accordion-2 .is-accordion-hovering article:nth-last-child(1),
    .accordion-3 .accordion__panels article:hover , .accordion-3 .is-accordion-hovering article:nth-last-child(1),
    .accordion-4 .accordion__panels article:hover , .accordion-4 .is-accordion-hovering article:nth-last-child(1),
    .accordion-5 .accordion__panels article:hover , .accordion-5 .is-accordion-hovering article:nth-last-child(1),
    .accordion-6 .accordion__panels article:hover , .accordion-6 .is-accordion-hovering article:nth-last-child(1){
      width: 100%;
    }

    
}


/* [$] Modifier ****************************************/