/* __________ CALENDAR __________ */

.page-content.page-cms-18{
    background: transparent;
  }
 #module-mwsadventcalendar-frontcalendar #wrapper{
  background: rgb(0,244,144);
  background: linear-gradient(93deg, rgba(0,244,144,1) 4%, rgba(22,73,105,1) 53%, rgba(9,9,121,1) 244%);
  padding-top: 20px;
 } 
  #module-mwsadventcalendar-frontcalendar  #content,#module-mwsadventcalendar-frontcalendar  #wrapper{
    padding: 0;
  }
  #module-mwsadventcalendar-frontcalendar  #decouvrir_hool{
    display: none;
  }
  #calendar .header_calendar{
      background: url(../img/banner_noel_transparent.png);
      padding: 40px;
      margin-bottom: 40px;
      background-size: cover;
      background-position: top;
      background-repeat: no-repeat;
      height: 440px;
      padding-top: 5px;
      margin-top: 120px;
  }
  #module-mwsadventcalendar-frontcalendar #wrapper > .container{
    width: 100%;
    padding: 0px;
  }
    #module-mwsadventcalendar-frontcalendar .card{
       background-color: transparent;
       margin-bottom: 0;
    }
  #calendar .header_calendar h1 {
      font-size: 30px;
      color: #fff;
      text-align: left;
      padding-top: 10px;
      text-transform: uppercase;
  }
  #calendar .header_calendar h1 span{
      font-size: 55px;
      font-weight: 400;
      font-family: 'Eufoniem';
      text-transform: capitalize;
  }
  .reglement{
    padding: 25px;
    text-align: center;
    background: #fff;
  }
  #calendar .header_calendar p{
    color: #fff;
    text-transform: uppercase;
    font-size: 22px;
  }
  
  #calendar .header_calendar .col-md-3, #calendar .header_calendar .col-md-9{
    text-align: center;
    padding-top: 10px;
        position: relative;
    top: -105px;

   
  }
  #module-mwsadventcalendar-frontcalendar  #main .page-footer{
    margin-bottom: 0;
  }
  #calendar .header_calendar .col-md-9{
    text-align: left;
        position: relative;
    top: -125px;
  }
  #calendar .content_calendar .box{
    max-width: 80%;
    margin: 0 auto;
    display: inline-block;
    padding: 30px;
  }
  #calendar .content_calendar .case_calendar .case_calendar_recto{
    position: relative;
  }
  #calendar .content_calendar .case_calendar .case_calendar_recto .jour,   #calendar .content_calendar .case_calendar .case_calendar_verso .jour{
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    margin-left: auto;
    margin-right: auto;
    width: 70px;
    background: #d1d1d1;
    color: #949393;
    font-size: 39px;
    font-family: 'Eufoniem';
    padding: 24px 24px;
    border-radius: 100%;
    text-align: center;
  }
  
  #calendar .content_calendar .case_calendar.closed .case_calendar_verso{
    display: none;
  }
  #calendar .content_calendar {
    text-align: center;
    
  }
  #calendar .content_calendar .case_calendar {
    max-width: 20%;
    margin-bottom: 30px;
    min-height: 218px;
    background: rgba(22, 63, 89, 1);
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 20px;
  }
  #calendar .content_calendar .case_calendar.open .case_calendar_recto{
    display: none;
  }
  #calendar .content_calendar .case_calendar.open .case_calendar_verso{
    display: block;
    
  }
  #calendar .content_calendar .case_calendar.open.inactive{
    min-height: 215px;
  }
  #calendar .content_calendar .case_calendar.open.inactive .btn{
    display: none;
  }
  #calendar .content_calendar .case_calendar.open.inactive img{
    position: relative!important;
    max-width: 100%;
    top:25px;
  }
   #calendar .content_calendar .case_calendar.dday{
    cursor: pointer;
    background: #fff;    
   }
   #calendar .content_calendar .case_calendar.dday .jour{
        position: relative;
    top: -30px;
   }
    #calendar .content_calendar .case_calendar.dday:hover .btn{
       background: rgba(0, 244, 144, 1) 100%;
      color: #fff;    
    }
  #calendar .content_calendar .case_calendar.closed.dday .jour{
    background: rgba(0, 244, 144, 1) 100%;
    color: #fff;
  }
  #calendar .content_calendar .case_calendar_verso .btn{
  transform: rotate(-5deg);
      display: block;
      background: #173152;
      text-transform: uppercase;
      color: #fff;
      font-size: 25px;
      border-radius: 15px;
      text-align: center;
      margin: 0 auto;
      padding: 5px 60px;
      z-index: 999;
      position: absolute;
      bottom: -1px;
  }
  #calendar .content_calendar .case_calendar_verso .jour{
    display: block;
    font-size: 39px;
     font-family: 'Eufoniem';
     color:  #173152;
     text-align: center;
     z-index: 999;
  }
  #calendar .content_calendar .case_calendar_verso img{
      z-index: 9;
  }

  #img_cadeau_past{
    position: absolute!important;
    top: 37%;
    border-radius: 10px;
    max-width: 160px!important;
  }
  .col-md-3.case_calendar.open.dday img{
    top: 35px!important;
    left: 23%;
  }
  .col-md-3.case_calendar.open.dday .case_calendar_verso::before{
    content: url(../img/left.png);
    position: absolute;
    left: -30px;
    top: -10px;
    z-index: 999;
  }
    .col-md-3.case_calendar.open.dday .case_calendar_verso::after{
    content: url(../img/right.png);
    position: absolute;
    right: -30px;
    top: -10px;
    z-index: 99;
  }
  
  @media(max-width: 768px){
    #calendar .content_calendar .case_calendar {
        width: 50%;
        max-width: 100%;
        float: left;
        margin: 0;
        margin-bottom: 30px;
    }
    .col-md-3.case_calendar.open.dday .case_calendar_verso::after, .col-md-3.case_calendar.open.dday .case_calendar_verso::before{
      overflow: hidden;
      width: 40px;
    }
    #calendar .content_calendar .box{
      display: flow-root;
    }
    #calendar .content_calendar img{
      width: 100%;
      height: auto;
    }
    #calendar .content_calendar .case_calendar_verso img{
      position: relative;
      left: initial;
    }
    #calendar .content_calendar .case_calendar_verso .btn{
      transform: initial;
      font-size: 15px;
      padding: 3px 20px;
      position: initial;
  
    }
    #module-mwsadventcalendar-frontcalendar #wrapper{
      background: rgb(0,244,144);
      background: linear-gradient(93deg, rgba(0,244,144,1) 4%, rgba(22,73,105,1) 53%, rgba(9,9,121,1) 244%);
    }
    #calendar .header_calendar{
      background: url(../img/banner_noel_mobile.png);
      background-size: contain;
    }
    #calendar .header_calendar{
      padding: 0px;
      margin-bottom: 90px;
      text-align: center;
      background-position: bottom;
      background-size: contain;
      background-repeat: no-repeat;
      height: 320px;
    }
    #calendar .content_calendar .box{
      max-width: 90%;
      padding: 0px;
    }
    #module-mwsadventcalendar-frontcalendar  .container{
      padding: 0px
    }
    #calendar .header_calendar h1{
      text-align: center;
    }
    #calendar .header_calendar .col-md-9{
      text-align: center;
    }

    #img_cadeau_past{
      position: initial!important;
    }
  
  }
  @media(max-width: 320px){
    #calendar .content_calendar .case_calendar{
      width: 100%;
    }
  }
  
 #module-mwsadventcalendar-frontcalendar #header{
  z-index: 9999999;
 }
 #play_modal .modal-dialog{
  margin: 160px auto;
 }

 #module-mwsadventcalendar-frontcalendar #header {
  display:none;
 }
  .reglement h3{
      text-transform: uppercase;
}

#btn_scroll{
  background: #f5456d;
  color: #fff;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 10px;
    display: block;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    top: -60px;
}