/*
Theme Name: Inprodch
Theme URI: http://yourwebsite.com
Description: Child Theme For Divi
Author: Your Name
Author URI: http://yourwebsite.com
Version: 1.0.0
Template: Divi
*/



/*logo svg animation */
/***************************************************
 * Generated by SVG Artista on 12/3/2024, 8:23:59 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
 
/*prevent jumpoing page when css -> js*/
#page-container{padding-top:104px !important;}

/*logo SVG*/
header #logo{
  max-width:140px;
}
header.et-fixed-header #logo{
  max-width:80px;
}

 svg .svg-elem-1 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  }
  
  svg.active .svg-elem-1 {
    fill: rgb(254, 254, 254);
  }
  
  svg .svg-elem-2 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  }
  
  svg.active .svg-elem-2 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-3 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
  
  svg.active .svg-elem-3 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-4 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  }
  
  svg.active .svg-elem-4 {
    fill: rgb(254, 254, 254);
  }
  
  svg .svg-elem-5 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  }
  
  svg.active .svg-elem-5 {
    fill: rgb(254, 254, 254);
  }
  
  svg .svg-elem-6 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  }
  
  svg.active .svg-elem-6 {
    fill: rgb(254, 254, 254);
  }
  
  svg .svg-elem-7 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  }
  
  svg.active .svg-elem-7 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-8 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  }
  
  svg.active .svg-elem-8 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-9 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
  }
  
  svg.active .svg-elem-9 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-10 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
  }
  
  svg.active .svg-elem-10 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-11 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
  }
  
  svg.active .svg-elem-11 {
    fill: rgb(0, 0, 0);
  }
  
  svg .svg-elem-12 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
  }
  
  svg.active .svg-elem-12 {
    fill: rgb(0, 0, 0);
  }
  



/*H & P*/
h4{
    line-height: 1.2em;
}
#Hdesc {
display: flex;
flex-direction: row;
justify-content: flex-start;
/*color: red !important;*/
flex-wrap: wrap;
}
#Hdesc div.et_pb_module{
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
    max-width:50%;
}


/* liste spectacles */
/* date case for syimply the best page */
#show_dates a, #show_dates a:hover, #show_dates a:visited{
    text-decoration: underline;
    color: black;
}

.show_dates div{
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    padding: 12px;
    border: 1px solid black;
    margin: 2px;
}
.show_dates a, .show_dates a:hover, .show_dates a:visited{
    text-decoration: underline;
    color: black;
}

.future_dates div{
    background-color: rgba(113, 113, 113, 0.05);
}

.past_dates div{
    background-color: rgba(211, 211, 211, 0.487);
}

.show_dates div span.titre_spectacle{
    display:inline-block;
    width:35%;
}
.show_dates div span.date{
    display:inline-block;
    width:15%;
}
.show_dates div span.location{
    display:inline-block;
    width:25%;
}
.show_dates div span.spectacle{
    display:inline-block;
    width:25%;
}

/*module reseaux sociaux*/
.reseaux_sociaux img{
    width: 50px;
}

/*footer widget*/
.footer-widget{
    display: flex;
    justify-content: space-between;
}

/*animations*/
.decale{
    animation: decale 5s forwards;
    padding-left:0px;
    
}

@keyframes decale{
    100% {padding-left: 50px;}
}

.decaleleft{
    animation: decaleleft 5s forwards;
    padding-left:50px;
    
}


@keyframes decaleleft{
    100% {padding-left: 0px;}
}

.spasmos span{
    visibility: hidden ;
    position: relative;
    animation: spasmos 2s forwards ease-out;
}

@keyframes spasmos{
    30%{visibility:hidden;}
    100% {visibility:visible;top: 0px;right: 0px;}
}

@media only screen and (max-width: 600px) {
    .headpage h1{font-size:30px !important;}
    .headpage h2{font-size:20px !important;}
    
    /*logo SVG*/
    header #logo{
      max-width:110px;
    }
    
    .show_dates div{
        flex-flow: column;
    }
    .show_dates div span.titre_spectacle{
        display:inline-block;
        width:100%;
    }
    .show_dates div span.date{
        display:inline-block;
        width:100%;
    }
    .show_dates div span.location{
        display:inline-block;
        width:100%;
    }
    .show_dates div span.spectacle{
        display:inline-block;
        width:100%;
    }
}

@media (max-width: 980px) {
  .et_header_style_left #logo {
    max-width:110px;
  }
}