*{
box-sizing: border-box;
}


#wdc-content {
    animation: fadein 1500ms;
    -moz-animation: fadein 1500ms; /* Firefox */
    -webkit-animation: fadein 1500ms; /* Safari and Chrome */
    -o-animation: fadein 1500ms;
}
    
    @-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
    @-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
    @-o-keyframes fadein {from {opacity:0;}to {opacity:1;}}


    @-webkit-keyframes fadeout {from {opacity:1;}to {opacity:0;}}
    @-moz-keyframes fadeout {from {opacity:1;}to {opacity:0;}}
    @-o-keyframes fadeout {from {opacity:1;}to {opacity:0;}}

   .fadein {
        animation: fadein 1500ms;
        -moz-animation: fadein 1500ms; /* Firefox */
        -webkit-animation: fadein 1500ms; /* Safari and Chrome */
        -o-animation: fadein 1500ms;
    }

    .fadeout {
        animation: fadeout 1500ms;
        -moz-animation: fadeout 1500ms; /* Firefox */
        -webkit-animation: fadeout 1500ms; /* Safari and Chrome */
        -o-animation: fadeout 1500ms;
    }

    .rotate {
        animation: rotation 3s infinite linear;
    
      }
    @keyframes rotation {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
      }

a:link
{
text-decoration:none;
}

.noOverStyle a:hover, a:visited, a:active
{
	color:#000;
	text-decoration:none;
}



@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;

  }
}

@media screen and (min-width 640 and max-width: 1200px) {
  .bloc {
    display:inline;
    clear:both;
       overflow:hidden;
  }
}
.flex-container-row {
    position:relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

        -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    }


.flex-container-row::before {

   // content: url("../assets/interface/wdc_row.png");

}
.flex-body{
        display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
      min-height: 100vh;
    width:100%;
        overflow-x:hidden;
    padding:0px;
    margin:0px;
}

.flex-box{
        display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}


.flex-body-column{
       position:relative;
        display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
      min-width: 100vw;
}
.flex-container-column::before {

   // content: url("../assets/interface/wdc_column.png");

}
.flex-container-row-reverse {
       position:relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;


    }
.flex-container-column {
       position:relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
.flex-container-column-allvh {
       position:relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
     min-height: 100vh;
    }
.flex-container-column-reverse {
       position:relative;
       display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

 -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;

    }

.flex-wrap-nowrap{
           -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap-wrap{
           -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


.flex-justify-content-center{
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

}
.flex-justify-content-space-around{
    -webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;

}
.flex-justify-content-space-between{
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;

}
.flex-justify-content-start{
-webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

}

.flex-justify-content-end{
-webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;

}

.flex-align-items-start{
     -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-align-items-end{
     -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.flex-align-items-center{
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-align-items-stretch{
     -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width:auto;
}


.flex-child-grow {
       -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

}

.flex-child-default{
     -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;

}

.flex-child-alignstart{
     -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.flex-child-stretch{
     -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.invert
{
        filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
}
.flex-align-content-center{
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;

}
.flex-align-content-stretch{
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;

}
.flex-align-content-space-around{
    -webkit-align-content: space-around;
    -ms-flex-line-pack: space-around;
    align-content: space-around;

}
.flex-align-content-space-between{
    -webkit-align-content: space-between;
    -ms-flex-line-pack: space-between;
    align-content: space-between;

}
.flex-align-content-start{
-webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

}

.flex-align-content-end{
-webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end

}

.background-size-default{
     background-repeat:no-repeat;
    background-size:auto;
}

.background-size-cover{
     background-repeat:no-repeat;
    background-size:cover;
}
.background-size-contain{
    background-repeat:no-repeat;
    background-size:contain;
}

.background-position-default{
    background-repeat:no-repeat;
    background-position : initial;
}
.background-position-center{
    background-repeat:no-repeat;
    background-position:center;
}
.background-position-bottom{
    background-repeat:no-repeat;
    background-position:bottom;
}
.background-size-allover{
    background-repeat:no-repeat;
    background-size: 100% 100%;
}


.background-position-rb{
    background-repeat:no-repeat;
    background-position:right bottom;
}
.background-position-lb{
    background-repeat:no-repeat;
    background-position:left bottom;
}

.background-position-cb{
    background-repeat:no-repeat;
    background-position:center bottom;
}




.background-position-rt{
    background-repeat:no-repeat;
    background-position:right top;
}
.background-position-lt{
    background-repeat:no-repeat;
    background-position:left top;
}

.background-position-ct{
    background-repeat:no-repeat;
    background-position:center top;
}


.background-position-rc{
    background-repeat:no-repeat;
    background-position:right center;
}
.background-position-lc{
    background-repeat:no-repeat;
    background-position:left center;
}

.background-position-cc{
    background-repeat:no-repeat;
    background-position:center center;
}


.br-bottom{

    border-radius: 0px 0px 10px 10px !important;

}
.br-top{

    border-radius: 10px 10px 0px 0px !important;

}
.autohide{
    top:-40px;

}

.autohide:hover{
top:0px;
-webkit-transition-property:top;
transition-property	:top;
-webkit-transition-duration:0.5s;
transition-duration :0.5s;
-webkit-transition-timing-function : ease;
transition-timing-function : ease
}

.img-button:hover{
    opacity:1;
    cursor:pointer;

}

.img-button{
    opacity:0.5;
}


.border-radius-left{

    border-radius: 4px 0px 0px 4px !important;
}

.border-radius-right{
        border-radius: 0px 4px 4px 0px !important;
}

.border-radius{
        border-radius: 4px 4px 4px 4px !important;
}

.button{
    outline:none;
    cursor: pointer;
border-radius:4px;
    border: 1px solid dodgerblue;
    padding:10px 12px;
   transition: background-color ;
       background-color : dodgerblue
}

.button:hover{
    outline:none;
    cursor: pointer;
border-radius:4px;
    border: 1px solid dodgerblue;
    padding:10px 12px;

       background-color:aqua
}


.space-bottom{
 margin-bottom:10px;
}
.border-line{
    border:solid 1px lightgrey;
}

.progress{

    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:pink;
    background-size:100% 100%;
  background-image: url(dessin.svg);
    border-radius: 4px 0px 0px 4px;
    background-repeat: no-repeat;
}

.input-trans{


    padding:10px 12px;
    border: 0px solid;
    outline:none;
    width:auto;
    background-color:transparent
}

.shadow1{

    -webkit-box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.75);
box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.75);
}
.shadow2{

    -webkit-box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.2);
box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.2);
}
.drop-shadow-image{
filter: drop-shadow(0 0 0.75rem black);


}
#flex_row-panneau1 {
    position: relative;
    height: 50px;
    background-color: #6CDFEA;
    margin: 0px;

    color: rgb(0, 0, 0);
    left: 0px;
    font-size:18px;
    padding:5px;
    max-height:26px;
    max-width:100px;
    border: 0px none grey;
}


#flex_row-panneau2 {
    position: relative;
    height: 100px;
    background-color: rgb(255, 255, 255);
    margin: 0px;

    color: rgb(0, 0, 0);
    left: 0px;
    border: 0px none rgb(255, 0, 0);
}

.sites {
    position: relative;
    min-height: 140px;
    min-width: 200px;
    margin: 20px;
    background-color: rgb(199, 199, 199);
opacity:0.5;
    color: rgb(0, 0, 0);
    left: 0px;
    border: 1px solid grey;

}

#legende {
    position: relative;
    height: 18px;
    background-color: #6CDFEA;
    margin: 0px;
    text-align:center;
    color: rgb(0, 0, 0);
    left: 0px;
    min-width: 100px;
    border: 0px none rgb(255, 0, 0);
}
.custom-menu1 {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Open Sans';
    font-size:12px;
    background: #FFF;
    // background: #f5f5f5;
    color: #333;
   border-radius: 5px;
    padding: 0;
  box-shadow: -2px 2px 12px rgba(0, 0, 0, .5);

}
/* Each of the items in the list */
.custom-menu1 li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
}

.custom-menu1 li:hover {
    background-color: #80e5ed;
}


  .marges-padding_15{
 padding:15px;
    }