/* Copyright 1999-2017. Parallels IP Holdings GmbH. All Rights Reserved. */
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek,greek-ext,vietnamese);
html {
    font: normal 13px/1.4 "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-y: auto;
    color: #fff;
    background:#0d1c3d;
}


#main {
    margin:40px;
    display:grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 20vw 1fr;
    grid-gap: 20px;
}

#logo {

    background:url('../img/logo.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:50%;
}


#events-list {
    position: relative;
    overflow: hidden;
    border:1px solid #b85423;
    border-radius:1px;
}

.item {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    opacity:1;
    transition:transform 500ms;
}

.item.prepare {
    transform:translateX(100%);
    z-index:20;
    transition-duration:0ms;
}

.item.visible {
    transform:translateX(0%);
    opacity:1;
    z-index:30;
}

.item.hidden {
    transform:translateX(-100%);
    opacity:1;
    z-index:10;
    transition-delay:1000ms;
}

.item .bg {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:#000;
    background-size:cover;
    background-position:50% 70%;
}

.item .info {
    position:absolute;
    left:0;
    right:0;
    bottom:0px;
    padding:10px;
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    grid-gap:3px;
    background:rgba(0,0,0,0.7);
}



.item .name {
    font-size:35px;
    font-weight:bold;
}

.item .sub {
    font-size:16px;
}

.item .sub .sep {
    padding:0px 10px;
}

.item .streams {
    position:absolute;
    top:10px;
    right:10px;
}

.stream-item {
    padding:4px 10px 4px 30px;  
    background:rgba(0,0,0,0.7); 
    background-size:auto 60%;
    background-position:6px 50%;
    background-repeat: no-repeat;
}

.stream-item.service-twitch {
    background-image:url('../img/twitch-icon.svg');
}