/**handles:visualizer-custom-style**/
/*Ce css permet de maitriser la taille des graphiques créés par visualizer de manière responsive Il y a une ligne dans function.php qui charge cette feuille css dans le cas ou le shortcode de visualizer est présent sur un article*/
* + div.visualizer-front-container{
margin-top:24px;}

.visualizer-front-container{
    position:relative;
    aspect-ratio: 5 / 3;
    padding: 10px; 
    background-color: #EBEBEC;
    border: 10px solid #fff;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    margin-bottom:24px;
}
.visualizer-front-container:before{
    content: " ";  
    position: absolute;
    z-index: 3;
    display: block;
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    width: 100%;
    height: 69px;
    left:0px;
    top: 0px;
    transform: translateY(-70%);
    background: url(/wp-content/plugins/visualizer-custom-css/bout-de-scotch.png) no-repeat center;
    background-size: contain;
}

 
 
.visualizer-front-container .visualizer-front,
.visualizer-front-container .visualizer-front > div{
  height:100%;
}

.visualizer-actions{display:none;/*enleve le bouton modifier quand on est logué en admin*/}

/*je déplace le content-visibility qui sert à lazy loader une div en dessus. De cette manière je peux styler dans frein visualizer-front-container.*/
.visualizer-front-container.visualizer-lazy-render {
    content-visibility: unset;
}
.visualizer-front-container.visualizer-lazy-render .visualizer-front {
    content-visibility: auto;
}


@media (max-width: 500px){
  .visualizer-front-container{aspect-ratio: 1 / 1;}
 
    .visualizer-front-container .visualizer-front,
    .visualizer-front-container .visualizer-front div{
      height:100%;
    }
    .visualizer-front-container:before {
    height: 45px;
    transform: translateY(-80%);
    }
}