* {
    box-sizing: border-box;
    margin: 0
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,900&display=swap');

html {
    font-size: 16px;
    height: 100%;
}

body {
    font-family: 'Roboto Slab';
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #d0d0d0;
}

.grid-container {
    display: grid;
    grid-template-columns: 720px 1fr repeat(3, 9rem);
    grid-template-rows: repeat(17, 1fr);
    grid-gap: .5rem;
    grid-template-areas:
        "Plakat Datum Datum Datum Datum" 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . ." 
        "Plakat . . . .";
    height: 100vh;
    margin-right: 1rem;
}

.grid-item-plakat {
    grid-area: Plakat;
}

.grid-item-datum {
    font-size: 3.0rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    text-shadow: 3px 2px #e2e3e5;
    letter-spacing: 1.5rem;
    text-align: center;
    align-self: center;
    margin: 3rem 0 2rem 0;
    grid-area: Datum;
}

.grid-item-filmcim {
    background-color: #e2e3e5;    
    color: #6c757d;
    border: .12rem solid #d3d6d8;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1rem;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.grid-item-filmcim-aktiv {
    background-color: #6c757d;
    color: #fff;
    border: .12rem solid #5c636a;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1rem;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.grid-item-a-terem {
    background-color: #588da8;
    color: #ffffff;
    border: .18rem solid #e2e3e5;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.grid-item-a-terem-aktiv {
    background-color: #dc3545;
    color: #fff;
    border: .12rem solid #ba2d3b;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.grid-item-b-terem {
    background-color: #f67280;
    color: #ffffff;
    border: .18rem solid #e2e3e5;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.grid-item-b-terem-aktiv {
    background-color: #198754;
    color: #fff;
    border: .12rem solid #157347;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.grid-item-e-terem {
    background-color: #f5b971;
    color: #ffffff;
    border: .18rem solid #e2e3e5;
    border-radius: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    align-self: center;
    padding: .5rem;
}

.carousel {
    /*
    max-width: 1000px;
    width: 90%;
    height: 90vh;
    margin: 5vh auto;
    box-shadow: 0 30px 40px -20px rgba(0,0,0,.5);
    */
    position: relative;
    overflow: hidden
}
/*
@media(orientation:portrait) {
  .carousel { height: 30vh }
}
*/
    .carousel div {
        width: 100%;
        height: 100%;
        position: absolute;
        background-position: center center;
        background-size: cover;
        opacity: 0;
    }
/*
        .carousel div:nth-child(1) {
            background-image: url("/images/filmek/az-elfeledett-karacsony.jpg")
        }

        .carousel div:nth-child(2) {
            background-image: url("/images/filmek/shaun-a-barany-es-a-farmonkivuli.jpg");
            animation-delay: 4s
        }

        .carousel div:nth-child(3) {
            background-image: url("/images/filmek/macskak.jpg");
            animation-delay: 8s
        }

        .carousel div:nth-child(4) {
            background-image: url("/images/filmek/boldog-idok.jpg");
            animation-delay: 12s
        }

        .carousel div:nth-child(5) {
            background-image: url("/images/filmek/pamacs-a-mikulas-kis-renszarvasa.jpg");
            animation-delay: 16s
        }

        .carousel div:nth-child(6) {
            background-image: url("/images/filmek/kemesítve.jpg");
            animation-delay: 20s
        }

        .carousel div:nth-child(7) {
            background-image: url("/images/filmek/portre-a-langolo-fiatal-lanyrol.jpg");
            animation-delay: 24s
        }

        .carousel div:nth-child(8) {
            background-image: url("/images/filmek/jexi-tul-okos-telefon.jpg");
            animation-delay: 28s
        }

        .carousel div:nth-child(9) {
            background-image: url("/images/filmek/star-wars-skywalker-kora.jpg");
            animation-delay: 32s
        }

        .carousel div:nth-child(10) {
            background-image: url("/images/filmek/kulonleges-eletek.jpg");
            animation-delay: 36s
        }

        .carousel div:nth-child(11) {
            background-image: url("/images/filmek/naszszezon.jpg");
            animation-delay: 40s
        }
*/

.fader div {
    animation: fade 44s infinite
}

@keyframes fade {
    0%, 40% {
        opacity: 0
    }

    10%, 35% {
        opacity: 1
    }
}

.slider div {
    top: -100%;
    animation: slide 44s infinite
}

@keyframes slide {
    0%, 40% {
        opacity: 0;
    }

    1% {
        opacity: 1;
        top: -100%
    }

    6%, 34.5% {
        top: 0
    }

    39.5% {
        opacity: 1;
        top: 100%
    }
}

.carousel.slider {
    opacity: 0;
    animation: carousel-fade-in 2s forwards
}

@keyframes carousel-fade-in {
    0%, 40% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}