html,
body {
    background: #000;
    color: #fff;
    font-weight: 200;
    font-family: 'Quicksand', sans-serif;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 200;
    font-family: 'Quicksand', sans-serif;
}

a { color: #fff; text-decoration: none; }

b, strong { font-weight: 900;}

th { text-align: left;}

header {
    position: fixed;
    z-index: 1000;
    overflow: auto;
    top: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 150px 1fr 400px;
    grid-gap: 10px;
    background: rgba(0,0,0,1);
    transition: all 0.3s ease;
}
.gf-logo { font-size: 30px; 32px; color: #d00; }

.gf-menu {}

.gf-menu ul,
nav ul,
nav li,
.gf-menu li { padding: 0; margin: 0; list-style: none; white-space: nowrap; }

.gf-menu ul {
    display: flex;
}
.gf-menu li {
    margin-left: 20px;
}
.gf-menu li a
{ line-height: 32px; }


.gf-menu .gf-menu-selected { font-weight: bold; }

a.gf-lang { color: #b00; }
a.gf-current-lang { font-weight: 900;}

main { padding: 80px 40px; }
main.full-size { padding: 0; }
main.decoration { background: url('/media/images/fantasy-4241186_1920.jpg') center center no-repeat; background-size: cover; }

section {}
.hero-gebedflix h1 { font-size: 40px; font-weight: 900; }

.full-screen { min-height: 100%; }
.p404 { text-align: center; background: #000 url('/media/images/stone-rolled-away-2.jpg') center center no-repeat; background-size: cover; )}
.p404 h1 {  font-size: 50px; font-weight: 900; text-shadow: 2px 0px rgba(0, 0, 0, 0.25); }

.btn { background: #d00; color: #fff; border-radius: 4px; transition: all 0.3s ease; padding: 10px 20px; display: inline-block; border: none; cursor:pointer; }
.btn-block { display: block; padding: 20px; width: 100%; text-align: center; font-weight: 900; font-family: Quicksand; }
.btn:hover { background: #e00; }

blockquote {  line-height: 40px; font-size: 30px; font-weight: 100; padding: 30px; margin: 30px 0; border-left: 1px solid #b00; }

section .gf-list-scroller {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: none;
    padding: 10px 0 30px;
    margin-left: -30px;
    padding-left: 30px;
}
section .gf-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 320px);
    grid-gap: 20px;

}

.section .gf-list-scroller::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.section .gf-list-scroller {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scrollbar-height: none;  /* Firefox */
}

section .gf-list.gf-list-1 { width: 320px; }
section .gf-list.gf-list-2 { width: 660px; }
section .gf-list.gf-list-3 { width: 1000px; }
section .gf-list.gf-list-4 { width: 1340px; }
section .gf-list.gf-list-5 { width: 1680px; }
section .gf-list.gf-list-6 { width: 2020px; }
section .gf-list.gf-list-7 { width: 2460px; }
section .gf-list.gf-list-8 { width: 2700px; }
section .gf-list.gf-list-9 { width: 3060px; }
section .gf-list.gf-list-10 {width: 3400px; }


.teaser { margin-top: -40px;  }
.gf-teaser { background: rgba(255,0,0,0.75); color: #fff; font-weight: 900; padding: 5px;  }

section .gf-list .epic { border: 1px solid #fff; background: #000; color: #bbb; transition: all 0.3s ease; }
section .gf-list .epic img { max-width: 100%; }

section .gf-list .epic:hover,
section .gf-list .epic:active
{ transform: scale(1.05); }

section h3  small { font-size: 75%; color: #b00; line-height: 160%; }
section h3  small a { color: #b00; transition: all 0.3s ease; position: relative;}
section h3  small a:hover,
section h3  small a:active  { color: #f00; }

.season_selector { border: 1px solid #fff; border-radius: 2px; background: #282828; padding: 10px; cursor: pointer; transition: all .3s ease; position: relative }
.season_selector:hover { transform: scale(1.05); background: #181818; }

.seasons_holder {
    position: absolute;
    opacity: 0;
    display: none;
    height: 0;
    transition: all 0.3 ease;
    padding: 10px;
    background: #282828;
    text-align: center;
    right: 0;
    top: 0;
    border-radius: 2px;
    border: 1px solid #fff;
    white-space: nowrap;
}
.season_selector:hover + .seasons_holder,
.season_selector:active + .seasons_holder,
.seasons_holder:hover,
.seasons_holder:active
{
    display: block;
    opacity: 1;
    height: auto;

}
.seasons_holder span { display: block; padding: 10px; }
.seasons_holder a {   }

.seasons_holder a,
.gf-menu nav a,
a.gf-lang { position: relative; }

.seasons_holder a:after,
.gf-menu nav a:after,
a.gf-lang:after,
section h3  small a:after {
     position: absolute;
     content: '';
     height: 1px;
     width: 0;
     left: 0;
     background: #b00;
     bottom: 0;
     transition: all .2s ease;
}

.seasons_holder a:after,
.gf-menu nav a:after { background: #fff; }

.seasons_holder a:hover:after,
.gf-menu nav a:hover:after,
a.gf-lang:hover:after,
section h3  small a:hover::after {
     width: 100%;
    background: #b00;
}
.seasons_holder a:hover:after,
.gf-menu nav a:hover:after { background: #fff; }




section .gf-list .epic .gf-text {  padding: 0 20px 20px; }
section .gf-list .epic a { font-weight: 700; color: #fff; }
section .gf-list .epic h4 { font-weight: 900; color: #fff; }

section .gf-two-columns img { max-width: 100%;}

section .gf-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
h1 b { font-weight: 900; }
section .gf-two-columns h1 { font-size: 32px; font-weight: 900; }
section .gf-two-columns h2 { font-size: 28px; font-weight: 900; }
section .gf-two-columns h3 {  font-weight: 900; margin: 0; }
section .gf-two-columns h2 span { font-size: 28px; font-weight: 300; }


.gf-login {
    padding: 80px 0;
    width: 480px;
    max-width: 100%;
    box-sizing: border-box;
    /*background: rgba(0,0,0, 0.7);*/
    margin: 40px auto;
    border-radius: 4px;
}
.gf-login h1 { margin: 0 0 20px; }
.gf-login label { display: block; border-radius: 4px; background: #181818; padding: 5px 0px; font-size: 10px; margin-bottom: 20px; }
.gf-login label span { display:block; padding: 5px 30px; }
.gf-login label input { background: #181818; color: #fff; border: 1px solid transparent; width: 100%; box-sizing: border-box; padding: 5px 30px;  }

.gf-login label:active,
.gf-login label:focus,
.gf-login label:focus-within,
.gf-login label input:active,
.gf-login label input:focus { background: #484848; border: 1px solid transparent; }

.gf-epic { position: relative; }
.gf-epic a { font-weight: 900; }
.gf-epic img { max-width: 100%; }
.gf-position-absolute { position: absolute; top: 0; width: 100%; box-sizing: border-box; }
.gf-padding-10 { padding: 10px; }
.gf-padding-8040 { padding: 90px 40px; }

.circle-icon {
    padding: 5px 7px;
    border: 1px solid;
    border-radius: 100px;
    font-weight: 900px;
}

.gf-tags,
.gf-tags li { list-style:  none; display: inline; margin: 0; padding: 0;}
.gf-tags li { display: inline-block;}
.gf-tags li { margin-right: 10px; margin-bottom: 10px;  }
.gf-tags li a { display: inline-block; padding: 5px; background: #383838; font-size: 12px; }
.gf-tags li a.gf-tag-actions { background: #b00; font-size: 12px; }


.gf-episode {
    padding: 10px 30px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 20px 120px 1fr;
    grid-gap: 20px;
    transition: all 0.3s ease;
}
.gf-current-episode,
.gf-episode:active,
.gf-episode:hover, { background: #181818; }
.gf-episode:hover,
.gf-episode:active
{ transform: scale(1.05); }

.gf-episode p {
    display: -webkit-box;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    appearance: none;
    width: 100%;
    height: 10px;
    border: none;
    color: #d00;
}
progress[value]::-moz-progress-bar,
progress[value]::-webkit-progress-value {
    background: #d00;
}


.gf-right { float: right; }

.gf-episode .gf-right { }


.gf-play,
.gf-current-episode,
.gf-episode:hover { background: #383838; }

.gf-play-seasons {
    padding: 20px 40px; background: #181818; border-radius: 10px;
}



.gf-episode img { border-radius: 5px; }

footer {  font-size: 12px; color: #ddd; max-width: 960px; margin: 0 auto; }
footer nav {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
footer nav a { line-height: 22px }
footer .bottom{ text-align: center; }

.vimeo-player { height: 600px; }

@media screen and (max-width: 767px) {

    section h3  small { display: block; }
    section .gf-two-columns  {
        grid-template-columns: 1fr;
    }
    section .gf-two-columns h2,
    section .gf-two-columns h2 span
    { font-size: 22px; }

    .gf-episode { display: block; }

    .gf-episode .gf-right { display: block; float: none; font-weight: normal; }

    .gf-play { padding: 60px 0; }

    .gf-play .gf-position-absolute { position: static; }
    .gf-play .gf-padding-8040 { padding: 20px; }

    section .gf-two-columns.mobile {
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px
    }
    main {
        padding: 80px 10px;
    }
    .vimeo-player { height: 400px; }


    section .gf-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, 220px);
        grid-gap: 20px;

    }

    section .gf-list.gf-list-1 { width: 220px; }
    section .gf-list.gf-list-2 { width: 480px; }
    section .gf-list.gf-list-3 { width: 720px; }
    section .gf-list.gf-list-4 { width: 960px; }
    section .gf-list.gf-list-5 { width: 1200px; }
    section .gf-list.gf-list-6 { width: 1440px; }
    section .gf-list.gf-list-7 { width: 1680px; }
    section .gf-list.gf-list-8 { width: 1920px; }
    section .gf-list.gf-list-9 { width: 2160px; }
    section .gf-list.gf-list-10 {width: 2400px; }

}
@media screen and (max-width: 500px) {
    section .gf-two-columns  {
        grid-template-columns: 1fr;
    }
}