/*@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');


html,body,div,p,img {
    margin:0;padding:0;border:0;
    font-family: 'DM Sans', sans-serif;
    /*font-size:22px;*/
    font-weight: bold;
    
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    
}
body {
   /* border:1px solid blue;*/
}

#main_stage {
    background: #E8BA7A;
    background:#88B2C1;
    height:100%;   
    width:auto;
}
#panel_bottom {
    background:#F60405;
    position:fixed;
    bottom:0;
    left:0;
    z-index:20;
    
    color:#F60405;
    height:3em;
    width:100%;
}
#panel_bottom_container {
    
    position:fixed;
    display:flex;
    background:black;
    color:#F60405;
    width:100%;
    height:3em;
}

.panel_bottom_item {
    background:black;
    width:200px;
    padding-top:0.6em;
}
.panel_bottom_item + .panel_bottom_item { 
    /*margin-left: 2%; */
}

.panel_bottom_item_center {
    flex-grow:1;
}

.leaflet-container {
    background: #E8BA7A;
    background:rgba(0,0,0,0);
    outline: 0;
}

#panel_info {
    
    padding:0em 3.5em 0 3.5em;
    height:100%;
    border:0px solid yellow;
    margin-top:1em;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    
}
#panel_info::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
#panel_info_container {
    display:flex;
    
    
    
    
}
#panel_info h3 {
    color:white;
    font-size:large;
    margin-top:2.5em;

}

#panel_info p {
    font-size:normal;
    margin-bottom:1em;

}
.panel_info_col {
    
    color:black;
}
.panel_info_col + .panel_info_col {
    /*margin-left:6%;*/
}

.panel_info_col {
    font-size:110%;

}
.obra_artista {
    color:white;
    font-size:130%;
    margin:0;padding:0;
}

.obra_horario {
    font-weight:normal;
}

.obra_titulo {
    color:black;
    margin:0;padding:0;
}

.palco_content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

 
  .contrast {
    filter: brightness(300%);
    

  }

  @keyframes animate {
    0%   {
        filter: brightness(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
    50%  {
        filter: brightness(1.4);
        -webkit-filter: brightness(1.4);
    }
    70% {
        filter: brightness(1.6);
        -webkit-filter: brightness(1.6);
    }
    85% {
        filter: brightness(1.8);
        -webkit-filter: brightness(1.8);
    }

    100% {
        filter: brightness(2);
        -webkit-filter: brightness(2);
    }

}

.brilho {
    animation-name: animate;
    animation-duration: 1s;
    animation-iteration-count: 1;

}

#circle {
    position:absolute;
    display:inline-block;
    top:0vh;
    left:23vw;
    cursor:pointer;

/*    top:200px;
    left:200px;
*/
    width: 70%;
    height: 100%;
    background:bisque;
    opacity: 0.0;
    border-radius: 50%;
    border-color: blue;
    border-width:2px;
    color:white;

}

#circle2 {
    position:absolute;
    display:inline-block;
    top:0vh;
    left:28vw;
    cursor:pointer;

/*    top:200px;
    left:200px;
*/
    width:100%;
    width: 800px;
    height: 100%;
    max-width:900px;
    background:bisque;
    opacity: 0.2;
    border-radius: 50%;
    border-color: blue;
    border-width:2px;
    color:white;

}