.entry-detail {
    .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        .nav-entries {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            margin-bottom: 30px;
            padding-right: 15px;
            &__control {
                display: block;
                color: $black;
                position: relative;
                @extend %arrowClose;
                &:before,
                &:after { background: $red; @include size(8px, 2px); }
                &.prev {
                    padding-left: 15px;
                    &:before, &:after { left: 0; }
                    &:before { margin-top: -3px; }
                    &:after { margin-top: 3px; }
                }
                &.next {
                    padding-right: 20px;
                    margin-left: 50px;
                    &:before, &:after { left: auto; right: 0; }
                    &:before { margin-top: 3px; }
                    &:after { margin-top: -3px; }
                }
            }
        }
    }
    &__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        .block {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 40px;
            &.entry-block {
                position: relative;
                background: rgba($grey, 0.2);
                padding: 20px;
            }
        }
        .entry {
            &__title,
            &__author,
            &__detail { width: 100%; text-align: center; }
            &__title {
                font-weight: $fBlack;
                font-size: $f24;
                color: $black;
                margin-bottom: 32px;
            }
            &__author {
                font-size: $f14;
                .link { font-weight: $fBlack; font-size: $f18; color: $red; }
            }
            &__img {
                @include size(80%,auto);
                border-radius: 100%;
                overflow: hidden;
                margin: 20px auto 30px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            &__detail {
                display: flex;
                flex-direction: column;
                font-size: $f14;
                .contest-title {
                    display: block;
                    color: $red;
                    margin-bottom: 20px;
                }
                .voti {
                    font-weight: $fBlack;
                    font-size: $f24;
                    color: $red;
                    small { font-size: $f18; font-weight: $fBlack; }
                }
            }
        }
        .btns-block {
            display: flex;
            flex-direction: column;
            margin-bottom: 40px;
            .btn {
                width: 100%;
                font-size: $f12;
                margin: 5px 0;
                padding: 10px;
                &:hover { background: $red; }
            }
        }
        .tags-block {
            display: flex;
            flex-wrap: wrap;
        }
    }
    &__content {
        .gallery {
            display: block;
            width: 100%;
            margin-bottom: 50px;
            position: relative;
            &__overlay {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                @extend %flexCenterBetween;
                width: 100%;
            }
            .award {
                display: flex;
                @extend %flexCenterCenter;
                background: $red;
                @include size(60px,60px);
                z-index: 12;
                .icon {
                    @include size(50%,50%);
                    fill: $white;
                }
            }
            .switch-view {
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                background: $red;
                @include size(40px,40px);
                z-index: 12;
                .icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    display: block;
                    transform: translate(-50%,-50%);
                    .boxed { opacity: 1; }
                    .full { opacity: 0; }
                    svg {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        @include size(17px,17px);
                        fill: $white;
                        transition: 180ms linear;
                        transform: translate(-50%,-50%);
                    }
                }
                &.boxed {
                    .full { opacity: 1; }
                    .boxed { opacity: 0; }
                }
            }
            &__main {
                display: block;
                @include size(100%,0);
                padding-bottom: 56.7%;
                margin-bottom: 30px;
                position: relative;
                z-index: 10;
                overflow: hidden;
                .tns-liveregion,
                .tns-controls,
                button[data-action="start"],
                button[data-action="stop"] { display: none; }
                .tns-outer { width: 100%; }
                &-list {
                    display: flex;
                    flex-wrap: nowrap;

                }
                &-img {
                    img { width: 100%; height: auto; }
                }
            }
            &__preview {
                display: flex;
                width: 100%;
                height: 120px;
                &-thumbs {
                    display: block;
                    width: auto;
                    height: 100%;
                    overflow: hidden;
                    .tns-liveregion { display: none; }
                }
                .gallery-dragger {
                    display: flex;
                    width: auto;
                }
                .thumb {
                    display: block;
                    height: 120px;
                    margin: 0 5px;
                    img {
                        height: 100%;
                    }
                    &.download {
                        display: flex;
                        flex-direction: column;
                        @extend %flexCenterCenter;
                        background: $red;
                        font-weight: $bold;
                        color: $white;
                        text-transform: uppercase;
                        text-align: center;
                        font-size: 0.9em;
                        line-height: 1em;
                        padding: 0 10px;
                        svg {
                            @include size(30px,40px);
                            fill: $white;
                            margin: 0 auto 10px;
                        }
                    }
                }
            }
        }
        .detail {
            font-size: $f14;
            &__title { font-size: $f24; }
        }
        .comments {
            margin: 3vh 0 4vh;
            .user__pic {
                display: block;
                @include size(100%,0);
                padding-bottom: 100%;
                border-radius: 100%;
                position: relative;
                overflow: hidden;
                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    @include size(100%,100%);
                    object-fit: cover;
                }
            }
            &__recap {
                display: flex;
                @extend %flexCenterStart;
                line-height: 1em;
                &-hide {
                    display: flex;
                    @extend %flexCenterStart;
                    margin-left: 40px;
                    .arrow {
                        display: block;
                        @include size(20px,20px);
                        @extend %arrowClose;
                        position: relative;
                        &:before,
                        &:after {
                            background: $red;
                            @include size(8px,3px);
                        }
                        &:before { margin-left: -2px; }
                        &:after { margin-left: 2px; }
                    }
                    .label {
                        font-weight: $bold;
                        color: $red;
                    }
                }
            }
            &__list {
                display: flex;
                flex-direction: column;
                margin-top: 4vh;
            }
            &__recap {
                margin-bottom: 20px;
                .arrow {

                }
            }
            &__new {
                display: flex;
                width: 100%;
                &-input {
                    .post-comment {
                        display: flex;
                        flex-wrap: wrap;
                        textarea {
                            background: rgba($grey, 0.3);
                            width: 100%;
                            margin-bottom: 20px;
                            border: 0;
                            resize: none;
                            padding: 10px;
                        }
                    }
                }
            }
            .comment {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                &__content {
                    &-head,
                    &-body,
                    &-actions {
                        display: block;
                        width: 100%;
                    }
                    &-head {
                        margin-bottom: 15px;
                        .user {
                            font-family: $title;
                            font-size: 1.2em;
                            color: $red;
                            margin-right: 25px;
                        }
                    }
                    &-actions {
                        display: flex;
                        @extend %flexCenterStart;
                        margin: 30px 0;
                        .action {
                            display: flex;
                            @extend %flexCenterStart;
                            height: 20px;
                            font-weight: $bold;
                            font-family: $title;
                            color: $black;
                            margin-right: 50px;
                            svg {
                                @include size(auto,100%);
                                fill: $red;
                                margin-right: 10px;
                                transition: 180ms linear;
                            }
                            &:hover {
                                svg { fill: $black; }
                            }
                        }
                    }
                }
                &__replies {
                    display: flex;
                    flex-direction: column;
                    margin-top: 50px;
                    .comment { margin: 0 0 20px; }
                }
            }
        }
    }
    @media (max-width: 1023px) {
        &__content {
            .comments {
                .comment {
                    &__content {
                        &-actions {
                            .action {
                                margin-right: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
    @media (max-width: 767px) {
        &__info { display: none; }
        &__content {
            .gallery {
                .switch-view { display: none; }
                &__main {
                    width: 100%;
                    height: auto;
                    padding-bottom: 0;
                }
                &__preview { display: none; }
            }
            .comments {
                &__new {
                    &-user {
                        @include size(60px,60px);
                        padding: 0;
                    }
                    &-input {
                        width: calc(100% - 60px);
                    }
                }
                .comment {
                    &__user {
                        @include size(60px,60px);
                        padding: 0;
                    }
                    &__content {
                        width: calc(100% - 60px);
                        &-head {
                            display: flex;
                            flex-direction: column;
                        }
                        &-actions {
                            .action {
                                .label { display: none; }
                            }
                        }
                    }
                }
            }
        }
    }
}