/*
 * Imports
 */

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,700);

@import (optional) '/../../../../../../storage/app/frontend_less_code';
@import '/../../../../../../resources/assets/less/bootstrap/bootstrap';
@import '/../../../../../../resources/assets/less/shared';

/*
 * Global Variables
 */

@primary-font: 'Titillium Web';
@primary-color: #cc3e26;
@secondary-color: #FF6100; // orange: FF6100; green: 00ffb3
@text-color: white;
@red: #ff4000;
@green: #00ff4e;
@orange: #ffa800;
@dark: #292929;
@darker: #202020;
@darkest: #090a0c;

/* Text selection */
::-moz-selection { color: white; background: @primary-color; }
::selection { color: white; background-color: @primary-color; } 

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: darken(@primary-color, 40%);
}

::-webkit-scrollbar-thumb {
    background-color: darken(@primary-color, 20%); 

}
::-webkit-scrollbar-thumb:hover {
    background-color: @primary-color;
}

/*
 * Elements
 */

/* URLs */
a, a:visited { color: @primary-color; }
a:active, a:focus { color: @primary-color; text-decoration: none }
a:hover { color: @primary-color; text-decoration: none }

/*
 * Classes
 */

.page-title { 
    margin: 0 0 20px 0; padding: 10px 20px; border-bottom: 4px solid darken(@primary-color, 30%); background-color: @primary-color; color: @text-color; font-size: 16px; font-weight: bold; text-transform: uppercase; 
    a { color: @text-color }
}
.page { margin-bottom: 20px; padding: 20px; background-color: @darker; }
.alert { 
    border-radius: 0; 
    a { color: @text-color }
}
.alert-info { background-color: @primary-color; color: @text-color; border: none; border-left: 4px solid darken(@primary-color, 20%) }
.alert-success { background-color: @green; color: @text-color; border: none; border-left: 4px solid darken(@green, 20%) }
.alert-error { background-color: @red; color: @text-color; border: none; border-left: 4px solid darken(@red, 20%) }
.well { background-color: black; border-color: @dark; }

/* Messages */
.ui-message { 
    .alert();
    background-color: #eee;
    border: 1px solid @primary-color;
    border-radius: 0;
    .title { font-weight: bold }
}

/* Form */
.btn, .input-group-addon { border-radius: 2px; border-color: @primary-color; background-color: transparent; color: @primary-color }
.btn:focus, .btn:hover { border-color: @primary-color; background-color: @primary-color; color: @text-color; }
.input-group-addon { border-left: 1px solid @primary-color !important }

.form-errors { }
.form-group { 
    label { .text-overflow(); }
    label:after { /* content: ':'; */ }
    input, select, textarea {
        .form-control();
        background-color: @darker;
        border: none;
        border-bottom: 2px solid @primary-color;
        border-radius: 1px;
        color: @text-color;
        &:focus { border-color: lighten(@primary-color, 10%); box-shadow: none !important; }
    }
    textarea { height: auto }
}

/* File Upload */
.input-group-addon.delete { cursor: pointer }
.image-upload-prev { 
    margin-bottom: 10px; 
    img { max-width: 100%; }
}

/* Pagination */
ul.pagination {
    span, a, .disabled span { background-color: @dark; border-color: @primary-color; color: white }
    li.active, li.active span { background-color: @primary-color; border-color: @primary-color; }
    .disabled { opacity: 0.5 }
}

.toolbar ul.pagination { float: right; margin: -4px 0 0 0 }
@media (max-width: @screen-phone) {
    .toolbar ul.pagination { display: block; float: none; margin: 20px 0 }
}

/* Modal */
.modal .modal-header {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: @primary-color;
    color: @text-color;
}

/* Content filter UI */
.content-filter-ui {
    select {
        .form-control(); display: inline-block; width: 100px;
    }
}

/* Search box for model index pages */
.model-search-box {
    margin-bottom: 10px; text-align: right;
    input {
        .form-control(); width: auto; display: inline-block;
    }
    .btn {
        vertical-align: top;
    }
}

/* Captcha */
.captcha {
    input {
        width: 100px; display: inline-block;
    }
}

/* Ratings */
.rating {
    .stars { 
        margin-bottom: 10px;
        i { float: left; padding: 0 2px; }
        &.enabled i { cursor: pointer; }
        .active { color: @primary-color }
    }
}

/* Datetime Picker */
.date-time-picker .input-group-addon { cursor: pointer; }
.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover { background-color: @primary-color !important }

/* Slider Default Styling - Feel free to overwrite */
.slider { 
    position: relative; width: 100%; height: 360px; /* Height of a single slide */
    .slides { 
        position: absolute; left: 0; top: 0; width: 100%; height: 100%;
        ul { position: relative; width: 100%; height: 100%; overflow: hidden; margin-left: 0; }
        ul li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; }
        a { display: block; width: 100%; height: 361px; background-position: center; background-size: cover; color: transparent; font-size: 0 }
        img { max-width: 100%;  }
    }
    .to-left { position: absolute; left: 20px; top: 35%; padding: 20px; line-height: 35px; color: @text-color; opacity: 0.2; text-align: center; z-index: 1; }
    .to-right { position: absolute; right: 20px; top: 35%; padding: 20px; line-height: 35px; color: @text-color; opacity: 0.2; text-align: center; z-index: 1; }
    .to-left:hover, .to-right:hover { opacity: 1 }
    .buttons { 
        position: absolute; right: 40px; bottom: 40px;
        ul { margin-bottom: 0; }
        li { 
            width: 30px; height: 30px; line-height: 30px; margin-left: 3px; background-color: black; color: rgba(255, 255, 255, 0.5); opacity: 0.5; cursor: pointer; text-align: center;
            &.active{ outline: 1px solid @primary-color; color: @text-color; }
        }
        li:hover { opacity: 1; color: @text-color; }
    }
    .container { position: relative; height: 100%; z-index: 1; }
    .slide-title { 
        position: absolute; max-width: ~"calc(100% - 80px)" /* 80 = left * 2 */; margin: 0; left: 40px; bottom: 40px; color: white; text-shadow: 0 0 3px black; background-color: rgba(0, 0, 0, 0.7);
        a { display: inline-block; padding: 20px; color: @text-color; }
    }
}
@media (max-width: 990px) {
    .slider {
        .buttons { display: none; }
        h2 { font-size: 20px; }
    }
}

.scroller { 
    overflow-x: hidden;
    ul {  }
    li { width: 100% }
}

.create-comment { 
    margin-top: 20px;
    .textarea-wrapper { margin: 20px 0; padding: 0 20px }
    p { margin: 0 }
    textarea { width: 100%; height: 70px; margin-left: -20px; padding: 10px 20px; border: 2px solid silver; color: #666; }
    textarea:focus { border-color: #ff6100; }
}

.comments-login-info {
    margin-top: 10px;
}

#comments .comment .text { 
  word-wrap: break-word; 
}

#gdpr-alert {
    display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 999;
    .btn { border: 1px solid @text-color; float: right; }
}

/*
 * Modules
 */

.widget-partners {
    a { display: block; text-align: center; }
    img {
        max-width: 100%;
        &.filter { filter: grayscale(1); -webkit-filter: grayscale(1); transition: all 0.8s ease; }
        &.filter:hover { filter: grayscale(0); -webkit-filter: grayscale(0); transition: all 0.2s ease; }
    }
}

.page-news-show-overview, .page-news-show {
    .news {
        margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid @dark;
        h2 { text-transform: uppercase; font-weight: bold; margin-bottom: 0; }
        header span { display: block; margin-bottom: 20px; color: @primary-color; }
        .image img { max-width: 100% }
    }
}
.page-news-show-stream {
    .item { float: left; margin-bottom: 10px; background-color: @dark; box-sizing: border-box; width: 50%; padding: 20px; transition: all 0.5s; }
    .item:nth-of-type(even) { border-left: 5px solid @darker; }
    .item:nth-of-type(odd) { border-right: 5px solid @darker; }
    .item.new {  transform: scale(0.9); }
    .image { display: block; height: 200px; background-size: cover; background-position: center; }
    h2 { width: 100%; .text-overflow(); }
    a { color: @text-color; }
}
@media (max-width: 600px) {
    .page-news-show-stream {
        .image { height: 100px; }
        h2 { font-size: 16px; }
    }
}

.page-videos {
    .video { 
        float: left; width: 33%; margin-bottom: 10px; text-align: center;
        div { width: 90%; height: 150px; margin-left: auto; margin-right: auto; background-position: center; background-repeat: no-repeat; background-size: cover }
    }
    .video-player iframe { width: 100%; border: none }
}
@media (max-width: @screen-phone) {
    .page-videos .video { width: 100% }
}

.widget-videos img.cover { max-width: 100% }

.page-streams {
    .stream { 
        float: left; width: 33%; margin-bottom: 10px; text-align: center;
        div { width: 90%; height: 150px; margin-left: auto; margin-right: auto; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #ddd; }
    }
    .stream-player iframe { width: 100%; border: none }
}
@media (max-width: @screen-phone) {
    .page-streams .stream { width: 100% }
}

.widget-streams {
    li { height: 80px; }
    a { display: block; position: relative; }
    a:hover { 
        div { -webkit-filter: brightness(1.5); filter: brightness(1.5); transition: all 0.3s ease }
    }
    .image { display: inline-block; height: 60px; width: 100px; float: left; margin: 10px 10px 0 0; background-size: cover; }
    .title { clear: right; font-weight: bold; text-transform: uppercase; }
    .viewers { display: block; line-height: 20px;  }
}

.page-galleries .galleries {
    .item { float: left; display: block; width: 20%; height: 100px; overflow: hidden }
    .image { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all 0.3s ease; }
    .image:hover { transform: scale(1.1, 1.1); transition: all 0.3s ease; }
}
@media (max-width: @screen-phone) {
    .page-galleries .galleries .item { width: 33% }
}

.page-galleries .images {
    .image { text-align: center; }
    .image img { max-width: 100%; max-height: 500px; cursor: zoom-in; }
    .previews-wrapper { position: relative; height: 100px; overflow: hidden }
    .previews { 
        height: 100%;
        .item { float: left; display: block; width: 100px; height: 100%; overflow: hidden; }
        .image { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all 0.3s ease; }
        .image:hover { transform: scale(1.1, 1.1); transition: all 0.3s ease; }
        .item.active {  }
    }
    .previews-wrapper .link { opacity: 0.5; position: absolute; top: 0; height: 100%; width: 50px; line-height: 100px; background-color: rgba(0, 0, 0, 0.5); color: @text-color; text-align: center; }
    .previews-wrapper:hover .link { opacity: 1 }
    .previews-wrapper .to-left { left: 0; }
    .previews-wrapper .to-right { right: 0; }
}

.widget-galleries {
    ul { font-size: 0; /* ignore white space */ }
    li { width: 25%; height: 100px; }
    .item { 
        display: block; width: 100%; height: 100%;
        div { width: 100%; height: 100% }
    }
}

.page-downloads {
    .download-cats .download-cat { display: block; float: left; width: 100px; margin: 0 20px 20px 20px; text-align: center; }
    .downloads .download { 
        display: block; float: left; width: 100px; margin: 0 20px 20px 20px; text-align: center; .background-image('img/default/file.png'); background-position: center top; background-repeat: no-repeat;
        a { display: block; padding-top: 100px; background-position: center 20px; background-repeat: no-repeat; }
    }
}
.page-downloads-show .download-detail button[type=submit] i:before { content: "\f019" }

.page-matches {
    .content-filter-ui { float: left }
    .overview {
        & > div { width: 33%; text-align: center; float: left }
        img { max-width: 120px; max-height: 120px }
        .mid { padding-top: 40px; font-size: 30px; }
        .mid .left-win { color: @green }
        .mid .left-defeat { color: @red }
        .mid .left-draw { color: @orange }
    }
    .details { margin-bottom: 20px; padding-top: 20px; }
    div.scores {
        .item { width: 33%; float: left; text-align: center; }
        .item:nth-child(n+4) { margin-top: 20px } /* Will only affect the 4th, 5th etc. item */
        .item img { max-width: 100%; }
        .item span { display: block; }
    }
}
@media (max-width: @screen-phone) {
    .page-matches {
        .overview {
            img { max-width: 80px; max-height: 80px }
        }
    }
}

.widget-matches-latest {
    li { position: relative; }
    li a { display: block; text-transform: uppercase; font-weight: bold; }
    li img { margin-right: 10px; vertical-align: -9px; }
    li .scores { position: absolute; right: 10px; top: 0; }
    li .scores .left-win { color: @green }
    li .scores .left-defeat { color: @red }
    li .scores .left-draw { color: @orange }
}

.widget-languages a[data-active="1"] { display: none; }

.page-servers .server { margin-bottom: 20px }

@forums-box-color: @primary-color;

.page-forums, .page-threads {
    h1 a { color: @text-color; }
}

/* Forums index page */
.page-forums-index {
    .action { border-radius: 3px; background-color: @primary-color; color: @text-color }
    .root-forum {
        h2 { margin: 0; padding: 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: @primary-color; font-size: 18px; font-weight: normal; color: @text-color; }
        margin-top: 20px;
    }
    .sub-forums { .clearfix(); }
    .sub-forum {
        padding: 10px; border: 2px solid @forums-box-color; border-top: none; overflow: hidden;
        &.head { 
            padding: 10px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: @primary-color; font-size: 18px; font-weight: normal; color: @text-color; 
        }
        .info { 
            width: 55%; float: left;
            .desc { display: block; font-size: 10px }
        }
        .counter { width: 20%; float: left }
        .latest { 
            width: 25%; float: left;
            .meta { display: block; font-size: 10px }
        }
    }
}
@media (max-width: 500px) {
    .page-forums-index .sub-forum .counter { display: none }
}

.page-forums-show-forum, .page-forums-show-new-threads {
    .buttons { margin-bottom: 20px; }
    .sub-forums {
        margin-bottom: 20px;
    }
    .threads, .sub-forums {
        .clearfix(); 
        .thread, .sub-forum {
            padding: 10px; border: 2px solid @forums-box-color; border-top: none; overflow: hidden;
            &.head { padding: 10px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: @primary-color; font-size: 18px; font-weight: normal; color: @text-color; }
            .info { 
                width: 60%; float: left;
                .sticky, .closed { padding: 2px; border-radius: 3px; background-color: @primary-color; font-size: 10px; color: @text-color; }
                .meta { display: block; font-size: 10px }
            }
            .counter { width: 15%; float: left }
            .latest { 
                width: 25%; float: left;
                .meta { display: block; font-size: 10px }
            }
        }
    }
}
@media (max-width: 500px) {
    .page-forums-show-forum, .page-forums-show-new-threads {
        .threads, .sub-forums {
            .counter { display: none }
            .latest a { display: block; font-size: 10px }
        }
    }
}

.page-threads, .page-posts {
    .buttons { margin-bottom: 20px }
    .post { 
        @meta-width: 100px;
        @min-height: 135px;
        .clearfix(); position: relative; margin-bottom: 10px; border: 2px solid @forums-box-color;
        .meta {
            position: absolute; left: 0; top: 0; width: @meta-width + 20px; height: 100%; min-height: @min-height; box-sizing: border-box; padding: 10px; background-color: @dark; float: left;
            .creator-name { .text-overflow(); display: block; }
            .avatar { display: block; max-width: 100px; max-height: 100px; }
            .counter { display: block; }
        }
        .content { 
            @padding: 10px;
            margin-left: @meta-width + 20px; min-height: @min-height + 20px;
            .top-bar { 
                position: relative; padding: @padding; 
                .buttons { position: absolute; right: @padding; top: @padding; }
            }
            .text { 
                padding: @padding; word-wrap: break-word; overflow-x: hidden;
                img { max-width: 100% } 
                hr { border-color: @forums-box-color }
                .signature { padding-top: @padding }
            }
            .updated { padding: @padding; font-size: 10px; text-align: right; }
        }
        &.highlight {
            animation-name: posthighlight;
            animation-duration: 3s;
        }
        &:hover .top-bar .buttons {
            display: block !important;
        }
    }
}
@media (max-width: 500px) {
    .page-threads, .page-posts {
        .buttons a { margin-bottom: 10px }
        .post {
            .meta { 
                position: relative; width: auto; min-height: 0; float: none; 
                .avatar { float: right; max-width: 16px; max-height: 16px; }
            }
            .content { 
                margin-left: 0; min-height: 0; 
                .buttons { position: relative !important; right: auto !important; }
            }
        }
    }
}

@keyframes posthighlight {
    0% {
        border-color: @primary-color;
    }
    100% {
        border-color: @forums-box-color;
    }
}

.page-threads.page-forums-threads-new {
    .page-forums-index();
}

.widget-latest-threads {
    li { position: relative; }
    li .posts-count { position: absolute; right: 0; top: 0; }
}

.page-users-show {
    th { width: 40% }
    .profile-basics { margin-bottom: 20px; }
    .details {
        img { max-width: 180px; max-height: 240px; }
        text-align: center;
        .actions { margin-top: 20px; }
    }
}

.widget-random-user {
    padding: 10px;
    a { display: block; text-align: center; }
    .image {
        text-align: center;
        img { max-width: 90%; max-height: 240px; }
    }
}

.page-friends {
    .clearfix();
    .friend {
        float: left; box-sizing: border-box; width: 20%; margin-bottom: 20px; padding: 0 20px; text-align: center;
        img { max-width: 100%; max-height: 240px; }
        .name { display: block; margin-top: 10px; }
        .actions { margin-top: 20px; }
    }
}
@media (max-width: @screen-phone) {
    .page-friends .friend { width: 33% }
}

.page-contact textarea { resize: vertical }

.page-messages {
    .message-text {
        word-wrap: break-word; overflow-x: hidden;
        img { max-width: 100% }
    }
}

.page-events-calendar {
    .day-names div {
        width: (1 / 7) * 100%;
        float: left;
        .text-overflow();
    }
    .day {
        float: left;
        width: (1 / 7) * 100%;
        height: 100px;
        overflow-y: auto;
        a {
            display: block;
            .text-overflow();
        }
        &.before-month, &.after-month {
            cursor: pointer;
        }
        &.today {
            border: 1px solid @primary-color;
        }
    }
}

.page-cups-show {
    .image {
        margin: 20px 0; text-align: center;
        img { max-width: 100%; }
    }
    .actions { margin: 20px 0; padding: 20px; border: 2px solid @primary-color; font-size: 1.5em; text-align: center; }
    #description .text { margin: 20px 0; }
    #bracket { overflow: auto }
    .bracket {
        @border-color: @text-color;
        display: flex; flex-direction: row;
        .round { display: flex; flex-direction: column; justify-content:center; width: 200px; list-style: none; padding: 0; }
        .round .spacer { flex-grow: 1; }
        .round .spacer:first-child, .round .spacer:last-child { flex-grow: .5; }
        .match { padding-left: 20px; }
        .match.winner { font-weight: bold; }
        .match .score { float: right; margin-right: 5px; }
        .match-top { border-bottom: 1px solid @border-color;  }
        .match-spacer { border-right: 1px solid @border-color; min-height: 40px; display: flex; justify-content: center; flex-direction: column; text-align: right; padding-right: 5px; flex-grow: 1; }
        .match-bottom { border-top: 1px solid @border-color; }
    }
}
.page-cups-teams-overview, .page-cups-show-team {
    li { margin-bottom: 10px; }
    .image {
        margin: 20px 0;
        img { max-height: 200px; }
    }
}
.page-cups-show-match {
    .overview {
        & > div { width: 33%; text-align: center; float: left }
        img { max-width: 120px; }
        a { display: block }
        .mid { padding-top: 40px; font-size: 30px; }
        .mid .left-win { color: @green }
        .mid .left-defeat { color: @red }
        .mid .left-draw { color: @orange }
    }
    .details {
        margin-bottom: 20px; padding-top: 20px;
        form { margin-bottom: 5px }
        form:last-child { margin-bottom: 0 }
        input { width: 50px; text-align: center; }
    }
}
@media (max-width: @screen-phone) {
    .page-matches {
        .overview {
            img { max-width: 80px; max-height: 80px }
        }
    }
}

.widget-featured-cup {
    img { margin: 20px 0; }
}

.widget-navigation-default {
    .list-unstyled {
        li.item-level-0 { padding-left: 20px }
        li.item-level-1 { padding-left: 40px }
        li.item-level-2 { padding-left: 60px }
        li.item-level-3 { padding-left: 80px }
        li.item-level-4 { padding-left: 100px }
    }
}

.page-teams-show {
    .lineup {
        li { margin: 20px 0; padding: 20px 0; background-color: @dark; }
        h3 { margin-top: 0; }
        img { max-width: 180px; max-height: 240px; }
    }
    .matches {
        .left-win { color: @green }
        .left-defeat { color: @red }
        .left-draw { color: @orange }
    }
}

.widget-teams {
    img { max-width: 100% }
}

.page-auth-login {
    form { position: relative; }
    .btn-restore { position: absolute; bottom: 40px; right: 40px; }
}

.page-questions-index {
    h2 { padding-left: 10px; border-left: 4px solid @primary-color }
    h2:nth-child(2n) { margin-top: 40px }
    .text { padding: 20px; background-color: @dark }
}

.page-polls-show, .widget-polls {
    line-height: normal !important;
    p { margin-top: 10px; }
    .poll-form {
        label { padding: 10px; cursor: pointer }
        input { display: none }
        .styled-radio, .styled-checkbox { display: inline-block; width: 20px; height: 20px; margin-right: 10px;  vertical-align: bottom; }
        .styled-radio { border: 1px solid @primary-color; border-radius: 10px; }
        .styled-checkbox { outline: 1px solid @primary-color /* Use outline instead of border to avoid problems with the height of the ::before part */; }
        input[type="radio"]:checked + .styled-radio { background-color: @primary-color; }
        input[type="checkbox"]:checked + .styled-checkbox::before { background-color: @primary-color; }
        input[type="checkbox"]:checked + .styled-checkbox::before { display: inline-block; width: 20px; content: '✓'; text-align: center }
    }
    .poll-results li { padding: 10px; }
    .poll-result { height: 10px; background-color: #02C39A }
    .poll-result.result-number-2 { background-color: #EDAE49 }
    .poll-result.result-number-3 { background-color: #00798C }
    .poll-result.result-number-4 { background-color: #f032e6 }
    .poll-result.result-number-5 { background-color: #fabebe }
    .poll-result.result-number-6 { background-color: #DDF9C1 }
    .poll-result.result-number-7 { background-color: #8A2BE2 }
    .poll-result.result-number-8 { background-color: #9A6324 }
    .poll-result.result-number-9 { background-color: #F9A03F }
    .poll-result.result-number-10 { background-color: #4363d8 }
    .poll-result.result-number-11 { background-color: #bfef45 }
    .poll-result.result-number-12 { background-color: #e6beff }
    .poll-result.result-number-13 { background-color: #D1495B }
    .poll-result.result-number-14 { background-color: #ffe119 }
    .poll-result.result-number-15 { background-color: #30638E }
}

/*
 * Main layout
 */

html { font-size: 16px; }
body { background-color: @darkest; font-family: @primary-font; color: @text-color; }
th, td { border-color: lighten(@dark, 10%) !important; border-width: 2px !important }
.table-hover > tbody > tr:hover { background-color: @dark; }
.nav-tabs li.active a { border-left: @dark !important; border-top: @dark !important; border-right: @dark !important; background-color: @dark !important; color: @text-color !important }
.nav-tabs a:hover { background-color: @dark !important }

#header { 
    position: absolute; z-index: 2; width: 100%; background-color: rgba(0, 0, 0, 0.5);
    .top-bar { 
        position: relative; height: 80px;
        .header-logo { 
            float: left;
            img { max-height: 40px; margin-top: 20px; margin-right: 100px; }
        }
        nav { 
            float: left; margin: 20px 0; font-size: 1rem; font-weight: bold; text-transform: uppercase;
            ul { .list-inline(); }
            a { display: block; height: 40px; line-height: 40px; color: @text-color }
            a:hover { color: @primary-color }
            .active { color: @primary-color !important }
        }
        .user { 
            position: absolute; right: 0; margin: 20px 0; height: 40px; line-height: 40px; font-size: 1rem;
            .image { display: inline-block; width: 40px; height: 40px; border-radius: 40px; border: 2px solid @primary-color; background-position: center; background-size: cover; vertical-align: middle; }
            .dropdown { display: inline-block; margin-left: 20px; }
            .dropdown.open .btn { border-color: @primary-color; background-color: @primary-color  }
        }
    }
}
@media (min-width: 1190px) {
    #header nav li { margin-left: 20px; }
}
@media (max-width: 990px) {
    #header nav { width: 100%; }
}

.slider {
    height: 600px;
    .slides a { 
        height: 601px; filter: grayscale(1) brightness(0.4); -webkit-filter: grayscale(1) brightness(0.4); 
    }
    .to-left, .to-right { top: 40%; opacity: .4; }
    .slide-title { 
        width: 100%; text-align: center; bottom: auto; top: 35%; background-color: transparent;
        a { font-size: 3rem; color: @primary-color; text-transform: uppercase; font-weight: bold; }
    }
    .text { top: 50%; left: 0; right: 0; max-width: 50%; margin-left: auto; margin-right: auto; font-size: 1.5rem; position: absolute; text-align: center; }
    .buttons { width: 100%; right: auto; text-align: center; }
}
@media (max-width: 990px) {
   .slider {
        .slide-title { 
            a { font-size: 2rem; }
        }
        .text { top: 60%; max-width: 80%; font-size: 1rem; }
        .to-left, .to-right { top: auto; bottom: 20px; }
    } 
}

.widget-partners {
    z-index: 1;
    position: relative;
    padding: 20px 0;
    ul { .list-inline(); }
    li { width: 24%; text-align: center; }
    img { max-width: 80%; opacity: 0.75 }
    img:hover { opacity: 1 }
}

#mid-container {
    position: relative;
    z-index: 1;
}

#sidebar h3 {
    position: relative; height: 60px; line-height: 20px; margin: 0; padding: 20px; background-color: @dark; font-weight: bold; font-size: 18px; text-transform: uppercase; z-index: 1;
    a {
        position: absolute; display: block; right: 0; top: 0; width: 60px; height: 60px; line-height: 60px; background-color: lighten(@dark, 3%); text-align: center; transition: 0.1s all;
        &:hover {
            color: white;
        }
    }
}

.widget-matches-latest {
    a { 
        position: relative; height: 60px; line-height: 20px; margin: 0; padding: 20px; background-color: @darker; 
        &:hover { background-color: lighten(@dark, 3%) }
    }
    .vs { color: darken(@primary-color, 20%) !important; text-transform: lowercase; }
    .scores {
        position: absolute; display: block; right: 0 !important; top: 0; width: 60px; height: 60px; line-height: 60px; text-align: center; color: white !important;
    }
}

.widget-galleries {
    text-align: center;
    ul { margin: 0 }
    li { width: 33%; padding: 0; }
    .image { outline: 1px solid fade(@primary-color, 50%); outline-offset: -1px; }
    .image:hover { outline-color: @primary-color; -webkit-filter: brightness(1.1); filter: brightness(1.1); transition: all 0.3s ease }
}

.widget-teams {
    a { 
        display:block; margin: 0 0 2px 0; outline: 1px solid fade(@primary-color, 50%); outline-offset: -1px; 
        &:hover { outline-color: @primary-color; -webkit-filter: brightness(1.1); filter: brightness(1.1); transition: all 0.3s ease }
    }
}

#footer {
    margin: 40px 0;
    z-index: 1;
    position: relative;
    .links {
        .clearfix();
        height: 60px;
        .footer-logo { 
            float: left;
            img { max-height: 40px; }
        }
        nav {
            font-weight: bold; text-transform: uppercase;
            li { margin-left: 20px; }
            a { padding: 10px 0; display: block; }
        }
    }
    .more {
        a { color: darken(white, 50%) }
        .info { 
            margin-right: 100px; color: darken(white, 50%);
        }
        .social-link {
            font-size: 20px;
        }
        .col-md-8 { text-align: right; }
    }
}
@media (max-width: @screen-md-min) {
    #footer {
        z-index: 1;
        position: relative;
        text-align: center;
        .footer-logo { float: none !important; }
        .info { display: block; margin-right: 0 !important; clear: both; }
        .list-inline { padding-top: 20px; text-align: center; }
    }
}
