.u-fancy-load > * {
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.no-js .u-fancy-load > * {
    transform: scale(1);
}
.u-fancy-load--in > * {
    transform: scale(1);
}
.u-fancy-load--out > * {
    transform: scale(0);
}
/* #demo style - you can delete it */
* {
    box-sizing: border-box;
}

#demo {
    text-align: center;
    margin: 0px auto;
    position: relative;
    display: block;
}
.flex_container{
    display: flex;
    /* align-items: center; */
    width: 100%;
    justify-content: space-between;
    margin-top: 50px;
}
#demo button {
    background: #e0e0e0;
    color: #757575;
    color: #424242;
    outline: none;
    border: none;
    padding: 0.5em 1em;
}
#demo button + * {
    margin-left: 20px;
}
#demo ul {
    list-style: none outside none;
    padding: 0;
    text-align: left;
    margin:20px 0px;
    width: 60%;
    padding: 0;
    margin: 0;
    list-style: none;
    /* -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;  
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch; */
}

.datalist{
    cursor: pointer;
    font-size: 13px;
    color: rgb(68, 68, 68);
    text-align: center;
    animation: itemEnter 500ms 90ms ease-out forwards;
    background: #f4f2d8;
    position: relative;
    width: 30%;
    margin: 5px;
    border: 1px solid #d6d6d6;
    border-radius: 20px;
    padding: 7px 0px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}

#demo li:hover{
    background-color: #e4b860;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
h2 {
    text-align: center;
}
.collage_container {
    /* margin-top: 50px; */
    animation: itemEnter1 500ms 90ms ease-out backwards;
    position: relative;
    
}
.collage_container img{
    width: 450px;


}
/* .imgbg{
    height: 900px;
    width: 500px;
    background-color: brown;
    border-radius: 20px;
} */
.collage_piece {
    overflow: hidden;
    position: absolute;
    box-sizing: border-box;
    background-repeat: no-repeat;
}
.exhibit-images {
	position: relative;
}

.exhibit-images span {
	width: 100px;
	height: 100%;
	background-color: #f5f5f5;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	position: absolute;
    left:-30px;
}

.exhibit-images img[alt*="exhibitor-discussion"] {
	    position: absolute;
    /* top: 105px; */
    left: -30px;
    border-radius: 5px;
    height: 830px;
  /* filter: blur(2px); */
}
.exhibit-images img[alt*="conference-left-image"]{
    filter: blur(2px);
    width: 90%;
    height: 100%;
}
*{
    margin: 0;
    padding: 0;
}
  
  .wrapper{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;


  }
  
  .wrapper .wrapper__video{
    object-fit: cover;
    filter: brightness(.6);
    /* opacity: .4; */
    width: 100%;
    height: 100%;
    background: radial-gradient(transparent 20%, white 70%); 
   
  }
  

 
    /* @keyframes itemEnter {
        from {
        transform: translateX(40%) scale(0.94);
        opacity: .3;
        }
        
        to {
        transform: translateX(0) scale(1);
        opacity: 1;
        }
    } */
    
   
@keyframes itemEnter1 {
    from {
      transform: translateX(-40%) scale(0.94);
      opacity: .3;
    }
    
    to {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
  }