body{
    font-family: Source Sans Pro, sans-serif;
    overflow: hidden;
}

.slider .slider-screen {
    display:none
}

.container {
    width: 100%;
    padding-bottom: 1.77%; /* 16:9 Aspect Ratio */
}

.card{
    padding: 0;
}

.location-text, .tag, .title, .note, .date-text{
    margin-left: 20px;
}

.title{
    font-size: 3.8em;
    font-weight: bold;
    padding-top: 20px;
}

.note{
    margin-top: 25px;
    font-size: 30px;
    /* https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css */        
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-width: 100ch;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;

}

#root{
    padding-bottom: 177.77%; /* 9:16 Aspect Ratio */
    width: 100%;
}

.img-container{
    overflow: hidden;
}

.img-main{
    width: 100%;
    height: 100%;
    z-index: -1;
}

.img-zoom{
    transition: transform 10s, filter 3s ease-in-out;
    transform: scale(1.1);
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}

.qr-code{
    position:absolute;
    bottom:0;
    right: 0;
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    margin-bottom: -50px !important;
    border-radius: 5px;
    
    z-index: 1;
}

.top-container{
    position: relative;
}

.bottom-content{
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 15px;
}

.tag{
    text-transform: uppercase;
    color: black;
    display: inline;
    background: white;
    border-radius: 4px;
    padding: 0.4em;
    font-weight: 700;
    font-size: 20px;
}

.location-text{
    margin-bottom: 5px;
}

.location-text, .date-text{
    font-size: 28px;
    font-weight: 700;
}