*{
  box-sizing: border-box;
}

html, body{
  background: #f9f9f9fe;
}

body{
  #start{
      width: $Wi80;
      margin: $marg auto auto $marg;
      #text_figli{
        p {
          a{
            // position: relative;
            &.marg{
              margin-right: $marg;
            }
          }
        }
        #item_list{
          width: 80vw;
          margin-top: 0.5rem;
          position: relative;

        .card{
          width: calc((100% / 5) - ( #{$marg} * 2) );
          display: inline-block;
          vertical-align: top;
          position: relative;
          margin: 0 $marg $marg 0;
          height: 100%;
          & > .card-image{
            &.open{
              a{
                img{
                  filter: grayscale(0);
                  transition: filter 0.3s ease;
                }
              }
            }
          }
          a{
            display: block;
            border-radius: 5px;
            overflow: auto;
            img{
              filter: grayscale(1);
              transition: filter 0.3s ease;
            }
          }
          .card-header{
            width: 100%;
            padding: $marg;
            flex-wrap: wrap;
            display: none;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            & > *{
              font-size: 0.8rem;
              line-height: 1rem;
              margin-right: $marg;
            }
          }
          &:hover{
            a{
              display: block;
              img{
                filter: grayscale(0);
                transition: filter 0.3s ease;
              }
            }
            .card-header{
              display: inline-flex;
              position: absolute;
              // transform: translateY(-100%);
              bottom: 0;
            }
          }
          &:last-of-type{
            vertical-align: baseline!important;
          }
          #item{
            width: calc( 500% + ( #{$marg} * 4) );
            padding: 2rem;
            margin-top: $marg;
            border-radius: 5px;
            .content-title{
              margin: 0 auto 0 auto;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: baseline;
              a{
                display: block;
              }
            }
            .e-content{
              margin: 1rem auto 2rem auto;
              p{
                font-size: 1rem;
                line-height: 1.2rem;
              }
            }
            &.publique{
              background: $color_publique;

            }
            &.sociale{
              background: $color_sociale;

            }
            &.culturelle{
              background: $color_culturelle;
            }
          }
        }
        &.publique{
          .card{
            &:hover{
              .card-header{
                background: $color_publique;
              }
            }
          }
        }
        &.sociale{
          .card{
            &:hover{
              .card-header{
                background: $color_sociale;
              }
            }
          }
        }
        &.culturelle{
          .card{
            &:hover{
              .card-header{
                background: $color_culturelle;
              }
            }
          }
        }
        &.commanditaires{
          flex-direction: column;
        }
      }
    }
  }
  &:not(.home){
    #start{
      margin-top: calc( 2rem +  #{$Flhome});
    }
  }
}

#icone_list{
  z-index: 999;
  position: absolute;
  top: -60px;
  right: 20px;
  .hamburger{
    padding: 0.8rem;
    padding-right: 2rem;
    .hamburger-box{
      width: 30px;
      .hamburger-inner{
        height: 2px;
        width: 30px;
        &::before{
          width: 20px;
          height: inherit;
        }
        &::after{
          height: inherit;
          width: inherit;
        }
      }
    }
  }
}