@import "_variables";
@import "_base";


.slide {
    background-color: $color-bg;
}


.header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}


.room-location {
    position: absolute;
    top: 240px;
    //top: 255px;
    // right: 65px;
    left: 1300px;

    z-index: 20;

    font-family: 'Source Code Pro';
    font-weight: 500;
    //font-size: 40px;
    font-size: 60px;


    text-align: end;
    color: white;

    // box-align: center;
    // -moz-box-align: center;
    // -webkit-box-align: center;
}

.schedule {
    position: absolute;
    top: 240px;
    left: 65px;

    /* 1920 - 2 * 65 */
    width: 1790px;

    color: white;
}

.schedule .title {
    // position: static;

    font-family: 'Source Code Pro';
    font-weight: 700;
    font-size: 60px;

    //text-align: bottom;
}


.events {
    position: absolute;
    top: 360px;
    left: 65px;

    width: 1790px;
    // width: 1820px;
    // 5 * 110 + 4 * 25
    // height: 660px;
    // 5 * 109 + 4 * 25
    height: 645px;

    overflow: hidden;
}

.event {
    position: relative;
    // left: 0px;

    margin-bottom: 25px;
    width: 100%;

    // overflow: hidden;
}

.event-time {
    position: absolute;
    // top: 0;
    left: 0px;

    font-family: 'Source Code Pro';
    font-weight: 400;
    font-size: 50px;

    color: white;

    // max-width: 50px;
}

.event-location {
    position: absolute;
    left: 200px;

    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 50px;

    // width: 100px;
    // max-width: 100px;
    // background-color: purple;
}

.this-room {
    font-style: italic;
    color: white;
}



.event-info {
    position: relative;
    left: 250px;
    width: 1500px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    // word-break: break-all;
    // overflow-wrap: break-word;

    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 45px;

    // max-width: 100px;
}

.event-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}

.event-speaker {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    font-style: italic;
    font-size: 35px;
}

.type-0 {
    .event-title{
        color: $color-warm-white;
    }
    .event-speaker {
        display: none;
        color: $color-warm-white;
    }
}

.type-1 {
    .event-title{
        color: $color-talk;
    }
    .event-speaker {
        color: $color-speaker;
    }
}

.type-2 {
    .event-title{
        color: $color-talk;
    }
    .event-speaker {
        color: $color-speaker;
    }
}


.stale {
    animation-name: fade-to-gray-anim;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.lapse {
    animation-name: fadeout-anim;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

@keyframes fade-to-gray-anim {
    0% { }
    100% { color: gray; }
}

@keyframes fadeout-anim {
    0% { opacity: 100%; }
    100% { opacity: 10%; }
}