* {
    box-sizing: border-box;
    outline: none;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color: #e53364;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
input, select {
    vertical-align:middle;
    outline: none;
}
html {
    background: #fff;
}
body {
    background: #fff;

    font-family: 'Roboto Condensed',sans-serif;
    font-size: 14px;
    color: #333;
}

.logo-container {
    grid-area: logo-container;
}
.search-container {
    grid-area: search-container;
}
.right-container {
    grid-area: right-container;
}
.top-menu {
    grid-area: top-menu;
}
.heading-container {
    grid-area: heading-container;
}
.thumbs-list {
    grid-area: thumbs-list;
}
.pager {
    grid-area: pager;
}
.spots-section {
    padding: 10px 0;
    grid-area: spots-section;
}
.about-section {
    grid-area: about-section;
}
.categories-section {
    grid-area: categories-section;
}
.tubes-section {
    grid-area: tubes-section;
}
.video-view-section {
    grid-area: video-view-section;
}
footer {
    grid-area: footer;
}
.main-grid {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-areas:
    'logo-container logo-container search-container right-container right-container'
    'top-menu top-menu top-menu top-menu top-menu'
    'about-section about-section about-section about-section about-section'
    'video-view-section video-view-section video-view-section video-view-section video-view-section'
    'heading-container heading-container heading-container heading-container heading-container'
    'thumbs-list thumbs-list thumbs-list thumbs-list thumbs-list'
    'pager pager pager pager pager'
    'categories-section categories-section categories-section categories-section categories-section'
    'tubes-section tubes-section tubes-section tubes-section tubes-section'
    'spots-section spots-section spots-section spots-section spots-section'
    'footer footer footer footer footer';

    max-width: 1610px;

    margin: 0 auto;

    background: #fff;

    box-shadow: 0 0 15px rgba(0,0,0,1);
}

.logo-container {
    padding: 10px;
}
    .logo-container .logo {
        display: inline-block;

        font-size: 50px;
        line-height: 50px;
        font-weight: bold;
        color: #e53364;
        text-decoration: none;
        text-transform: uppercase;
    }
        .logo-container .logo span {
            color: #333;
        }

.search-container {
    position: relative;

    padding: 10px;

    clear: both;
}
    .search-container .search-block {
        display: block;
        position: relative;
    }
        .search-container .search-block .search-input {
            display: block;
            float: right;

            width: 100%;
            max-width: 400px;
            height: 50px;

            padding: 0 60px 0 10px;

            border: 0;
            border-radius: 3px 5px 5px 3px;

            background: #f0f0f0;

            font-size: 16px;
            line-height: 50px;
            color: #3a4752;

            transition: 0.15s ease background-color;

            font-family: 'Roboto Condensed', sans-serif;
        }
            .search-container .search-block .search-input:focus {
                background: #fff;
            }

        .search-container .search-block .search-submit {
            display: block;
            position: absolute;

            top: 0;
            right: 0;

            width: 50px;
            height: 50px;

            border: 0;
            border-radius: 0 3px 3px 0;

            background: #e53364;

            font-size: 24px;
            line-height: 50px;
            color: #fff;

            cursor: pointer;

            transition: 0.15s ease background-color;
        }
            .search-container .search-block .search-submit:hover {
                background-color: #2b2b2b;
            }

.right-container {
    padding: 7px 10px;
}
    .right-container .text {
        overflow: hidden;

        max-height: 56px;

        font-size: 14px;
        line-height: 14px;
    }
    .right-container .tags-list {
        -webkit-columns: 3;
        columns: 3;
        padding-top: 2px;
    }
        .right-container .tags-list a {
            display: inline-block;
            text-decoration: none;
            font-size: 14px;
            line-height: 18px;
        }
            .right-container .tags-list a:hover {
                color: #333;
            }

.top-menu {
    padding: 0 10px;

    background: #999;
}
    .top-menu ul {

    }
        .top-menu ul li {
            display: inline-block;
        }
            .top-menu ul li a {
                display: block;

                padding: 0 5px;

                font-size: 18px;
                line-height: 50px;
                color: #fff;
                text-decoration: none;

                transition: .15s ease color;
            }
                .top-menu ul li.active a,
                .top-menu ul li a:hover {
                    color: #e53364;
                }

            .top-menu ul li.separator {
                margin: 0 5px;
                font-size: 18px;
                line-height: 50px;
                color: #ccc;
            }

.heading {
    padding: 10px;
}
    .heading h1,
    .heading h2 {
        font-size: 24px;
        line-height: 30px;
        font-weight: normal;
        color: #333;
    }
    .error .heading {
        font-size: 24px;
        color: red;
        text-align: center;
    }
        .error .heading h1,
        .error .heading h2 {
            font-size: 36px;
            line-height: 54px;
            color: red;
            font-weight: bold;
        }

.thumbs-list {

}
    .thumbs-list .thumb {
        display: block;
        float: left;

        width: 20%;

        padding: 5px;
    }
        .thumbs-list .thumb .link {
            display: block;
            text-decoration: none;
        }
            .thumbs-list .thumb .link .thumb-container {
                position: relative;
                overflow: hidden;

                box-shadow: 0 1px 5px rgba(0,0,0,0.5);
            }
                .thumbs-list .thumb .link .thumb-container img {
                    display: block;

                    width: 100%;
                }
                .thumbs-list .thumb .link .thumb-container .movies {
                    display: block;
                    position: absolute;

                    right: 3px;
                    bottom: 3px;

                    height: 24px;

                    padding: 0 5px;

                    background: rgba(255,255,255,0.75);

                    font-size: 16px;
                    line-height: 26px;
                    color: #333;

                    transition: 0.15s ease right;
                }
                    .thumbs-list .thumb .link:hover .thumb-container .movies {
                        right: -100px;
                    }

                .thumbs-list .thumb .link .thumb-container .duration {
                    display: block;
                    position: absolute;

                    right: 3px;
                    top: 3px;

                    height: 24px;

                    padding: 0 5px;

                    background: rgba(255,255,255,0.75);

                    font-size: 16px;
                    line-height: 26px;
                    color: #333;

                    transition: 0.15s ease right;
                }
                    .thumbs-list .thumb .link:hover .thumb-container .duration {
                        right: -100px;
                    }

                .thumbs-list .thumb .link .thumb-container .title {
                    display: block;
                    position: absolute;

                    left: 3px;
                    bottom: 3px;

                    height: 24px;

                    padding: 0 5px;

                    background: rgba(255,255,255,0.75);

                    font-size: 16px;
                    line-height: 26px;
                    color: #333;

                    transition: 0.15s ease left;
                }
                    .thumbs-list .thumb .link:hover .thumb-container .title {
                        left: -160px;
                    }
                    .thumbs-list .thumb.video .link .thumb-container .title {
                        left: 0;
                        bottom: 0;

                        width: 100%;

                        transition: 0.15s ease bottom;
                    }
                        .thumbs-list .thumb.video .link:hover .thumb-container .title {
                            bottom: -30px;
                        }

.pager {
    margin: 10px 0;
    text-align: center;
}
    .pager li {
        display: inline-block;
        margin-bottom: 3px;
    }
        .pager a,
        .pager span {
            display: block;
            min-width: 40px;
            height: 42px;
            padding: 0 10px;
            border-bottom: 4px solid #e53364;
            background-color: #000;
            font-size: 16px;
            line-height: 42px;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.15s ease background-color;
        }
        .pager span {
            opacity: 0.5;
        }
            .pager li.current span {
                opacity: 1;
                background-color: #e53364;
            }
            .pager a:hover {
                background-color: #6f6f6f;
            }
            .pager .current a {
                background-color: #6f6f6f;

                cursor: pointer;
            }

.about-text {
    padding: 0 10px;

    font-size: 14px;
    line-height: 20px;
    color: #555;
}

.spots {
    text-align: center;
}
    .spots .spot {
        display: inline-block;
    }

.categories-list {
    padding: 0 10px;
}
    .categories-list ul {
        -webkit-columns: 5;
        columns: 5;
    }
        .categories-list ul li {
            display: block;

            padding: 2px 0;
        }
            .categories-list ul li a {
                display: block;
                position: relative;
                overflow: hidden;

                padding-right: 50px;

                font-size: 16px;
                line-height: 24px;
                color: #333;
                text-decoration: none;
                white-space: nowrap;
                text-overflow: ellipsis;

                transition: 0.15s ease color;
            }
                .categories-list ul li a:hover {
                    color: #e53364;
                }

                .categories-list ul li a .quantity {
                    position: absolute;

                    top: 0;
                    right: 0;

                    padding: 0 5px;

                    border-radius: 3px;

                    background: rgba(255,255,255,0.5);

                    font-size: 12px;
                    color: #000;

                    transition: 0.15s ease color;
                }
                    .categories-list ul li a:hover .quantity {
                        color: #fff;
                    }

.categories-section {
    padding: 0 0 10px;
}

.tubes-list {
    padding: 0 10px;
}
    .tubes-list ul {
        -webkit-columns: 5;
        columns: 5;
    }
        .tubes-list ul li {
            display: block;

            padding: 2px 0;
        }
            .tubes-list ul li a {
                display: block;
                position: relative;
                overflow: hidden;

                padding-right: 50px;

                font-size: 16px;
                line-height: 24px;
                color: #fff;
                text-decoration: none;
                white-space: nowrap;
                text-overflow: ellipsis;

                transition: 0.15s ease color;
            }
                .tubes-list ul li a:hover {
                    color: #e53364;
                }

.video-view-section {
    position: relative;
}
.video-view {
    float: left;

    width: calc(100% - 320px);
}
    .video-view .player-container {
        position: relative;
        background: #000;
		height: auto;
    }
        .video-view .player-container iframe {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
        }

    .video-view .info-container {
        position: relative;

        margin-bottom: 10px;
        padding: 10px;
    }
        .video-view .info-container .info-row {
            margin-bottom: 10px;

            font-size: 16px;
            line-height: 30px;
            white-space: nowrap;
        }
            .video-view .info-container .info-row .date {

            }

            .video-view .info-container .info-row .duration {
                margin-left: 20px;
            }

        .video-view .info-container .tags {
            margin-bottom: 10px;
        }
            .video-view .info-container .tags a {
                display: inline-block;

                margin: 0 5px 3px 0;
                padding: 0 7px;

                border-radius: 3px;

                background: #000;

                line-height: 25px;
                color: #fff;
                text-decoration: none;

                transition: 0.15s ease background-color;
            }
                .video-view .info-container .tags a:hover {
                    background-color: #af1820;
                }

.sidebar {
    float: right;
    width: 310px;
}
    .sidebar .side-spots {
        text-align: center;
    }
        .sidebar .side-spots .spot {
            display: inline-block;
        }

footer {
    padding: 10px;

    background: #555;
}
    footer .contact-us {
        font-size: 14px;
        line-height: 24px;
        text-align: center;
    }
        footer .contact-us a {
            transition: 0.15s ease color;
        }
            footer .contact-us a:hover {
                color: #e53364;
            }

    footer .copyright-container {
        text-align: center;
    }
        footer .copyright-container .copyright {
            font-size: 14px;
            line-height: 24px;
            color: #aaa;
        }

.fadescreen {
    z-index: 999;

    display: none;
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.5);
}
.popup {
    z-index: 1000;

    display: none;
    position: fixed;

    top: 10px;
    left: 50%;

    width: 300px;

    margin-left: -150px;
    padding: 10px;

    border-radius: 5px;

    background: #fff;

    color: #333;
}
    .popup .close {
        position: absolute;

        top: 0;
        right: 0;

        width: 36px;
        height: 40px;

        font-size: 36px;
        line-height: 36px;
        color: #333;
        text-align: center;
        cursor: pointer;

        transition: 0.15s ease opacity;
    }
        .popup .close:hover {
            opacity: 0.5;
        }

    .popup .heading {
        margin-bottom: 10px;
        padding: 0;

        font-size: 24px;
        line-height: 30px;
    }
    .popup .contact-form {

    }
        .popup .contact-form .input-row {
            margin-bottom: 10px;
        }
            .popup .contact-form .input-row label {
                display: block;

                font-size: 16px;
                line-height: 20px;

                margin-bottom: 3px;
            }
            .popup .contact-form .input-row .input-text,
            .popup .contact-form .input-row .input-textarea,
            .popup .contact-form .input-row .input-select {
                display: block;

                width: 100%;
                height: 30px;

                padding: 0 5px;

                border: 1px solid #aaa;
                border-radius: 3px;

                font-family: 'Roboto Condensed',sans-serif;
                font-size: 18px;
                line-height: 30px;
            }
            .popup .contact-form .input-row .input-textarea {
                height: 100px;

                line-height: 20px;

                resize: none;
            }
            .popup .contact-form .submit-row .input-submit {
                display: block;

                width: 100%;
                height: 40px;

                border: 0;
                border-radius: 3px;

                background: #e53364;

                font-family: 'Roboto Condensed',sans-serif;
                font-size: 18px;
                line-height: 40px;
                color: #fff;

                cursor: pointer;

                transition: 0.15s ease opacity;
            }
                .popup .contact-form .submit-row .input-submit:hover {
                    opacity: 0.5;
                }


@media screen and (max-width: 1200px) {
    .main-grid {
        grid-template-areas:
        'logo-container logo-container search-container search-container search-container'
        'top-menu top-menu top-menu top-menu top-menu'
        'video-view-section video-view-section video-view-section video-view-section video-view-section'
        'heading-container heading-container heading-container heading-container heading-container'
        'thumbs-list thumbs-list thumbs-list thumbs-list thumbs-list'
        'pager pager pager pager pager'
        'about-section about-section about-section about-section about-section'
        'categories-section categories-section categories-section categories-section categories-section'
        'tubes-section tubes-section tubes-section tubes-section tubes-section'
        'spots-section spots-section spots-section spots-section spots-section'
        'footer footer footer footer footer';
    }
    .right-container {
        display: none;
    }
}
@media screen and (max-width: 860px) {
    .main-grid {
        grid-template-areas:
        'logo-container logo-container logo-container logo-container logo-container'
        'search-container search-container search-container search-container search-container'
        'top-menu top-menu top-menu top-menu top-menu'
        'video-view-section video-view-section video-view-section video-view-section video-view-section'
        'heading-container heading-container heading-container heading-container heading-container'
        'thumbs-list thumbs-list thumbs-list thumbs-list thumbs-list'
        'pager pager pager pager pager'
        'about-section about-section about-section about-section about-section'
        'categories-section categories-section categories-section categories-section categories-section'
        'tubes-section tubes-section tubes-section tubes-section tubes-section'
        'spots-section spots-section spots-section spots-section spots-section'
        'footer footer footer footer footer';
    }
    .logo-container {
        text-align: center;
    }
    .logo-container {
        padding: 5px 0 0;
    }
    .logo-container .logo {
        font-size: 32px;
        line-height: 40px;
    }
    .search-container .search-block .search-input {
        max-width: 100%;
        height: 36px;

        line-height: 36px;
    }
    .search-container .search-block .search-submit {
        width: 36px;
        height: 36px;

        font-size: 18px;
        line-height: 36px;
    }
    .top-menu {
        text-align: center;
    }
    .top-menu ul li.separator {
        margin: 0;
        font-size: 16px;
        line-height: 36px;
    }
    .top-menu ul li a {
        padding: 0 2px;

        font-size: 16px;
        line-height: 36px;
    }
}

@media (max-width: 1288px) {
    .thumbs-list .thumb {
        width: 25%;
    }
    .categories-list ul,
    .tubes-list ul {
        -webkit-columns: 4;
        columns: 4;
    }
    .spots .spot:nth-child(4) {
        display: none;
    }
}
@media (max-width: 966px) {
    .thumbs-list .thumb {
        width: 33.333333%;
    }
    .categories-list ul,
    .tubes-list ul {
        -webkit-columns: 3;
        columns: 3;
    }
    .spots .spot:nth-child(3) {
        display: none;
    }
    .video-view {
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
}
@media (max-width: 644px) {
    .thumbs-list .thumb {
        width: 50%;
    }
    .categories-list ul,
    .tubes-list ul {
        -webkit-columns: 2;
        columns: 2;
    }
    .spots .spot:nth-child(2) {
        display: none;
    }
    .sidebar .side-spots .spot:nth-child(2) {
        display: none;
    }
}
@media (max-width: 322px) {
    .thumbs-list .thumb {
        width: 100%;
    }
    .categories-list ul,
    .tubes-list ul {
        -webkit-columns: 1;
        columns: 1;
    }
}

#form-messages {
    padding: 10px;

    font-size: 16px;
    line-height: 20px;
    text-align: center;
}