// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

@import "uikit/uikit.less";


/* ========================================================================
   Warp theme
 ========================================================================== */


// Variables
// ==========================================================================

@utility-container-large-max-width:             1020px;

@utility-margin-large:                          @theme-block-padding * 2;

@global-body-style:                             'default';
@global-border-image-style:                     'none';

@theme-widgetkit-style:                         'dark';

@theme-block-padding:                           @global-grid-gutter-large;
@theme-block-large-padding:                     round(@theme-block-padding * 2.4);

@theme-block-background:                        @global-background;
@theme-block-light-background:                  @global-light-background;
@theme-block-dark-background:                   @global-dark-background;
@theme-block-primary-background:                @global-primary-background;
@theme-block-primary-dark-background:           desaturate(darken(@global-primary-background, 4%), 15%);

@theme-light-border:                            lighten(@global-border, 4%);
@theme-primary-border:                          fade(@global-primary-color, 15%);

@theme-toolbar-background:                      @theme-block-background;
@theme-toolbar-padding:                         10px;
@theme-toolbar-height:                          @global-line-height + (@theme-toolbar-padding * 2);
@theme-toolbar-subnav-border:                   @global-border;

@theme-nav-logo-width:                          90px;
@theme-nav-logo-height:                         60px;

@theme-navbar-height:                           130px;
@theme-navbar-padding:                          15px;
@theme-navbar-small-height:                     90px;
@theme-navbar-small-padding:                    10px;
@theme-navbar-phone-height:                     70px;
@theme-navbar-background:                       @theme-block-light-background;

@theme-heading-border-width:                    150px;

@theme-large-icon-font-size:                    60px;

@theme-text-medium-font-size:                   round(@global-font-size * 1.2); // 18px
@theme-text-medium-line-height:                 round(@theme-text-medium-font-size * 1.33); // 24px

@theme-fullscreen-heading-color:                @global-link-color;
@theme-fullscreen-color:                        @global-color;
@theme-fullscreen-border:                       fade(@global-contrast-color, 10%);

@theme-nite-icon-border:                        @global-contrast-color;
@theme-nite-icon-color:                         @global-contrast-color;
@theme-nite-icon-hover-background:              @global-contrast-color;
@theme-nite-icon-hover-color:                   @global-background;
@theme-nite-icon-font-size:                     64px;


/* Layout Block Styling
 ========================================================================== */

/*
 * Blocks
 */

.tm-block-padding,
.tm-block-large-padding {
    padding-top: @theme-block-padding;
    padding-bottom: @theme-block-padding;
}

/* Only phones */
@media (min-width: @breakpoint-medium) {

    .tm-block-large-padding {
        padding-top: @theme-block-large-padding;
        padding-bottom: @theme-block-large-padding;
    }

}

.tm-block-light { background-color: @theme-block-light-background; }
.tm-block-dark { background-color: @theme-block-dark-background; }
.tm-block-primary { background-color: @theme-block-primary-background; }
.tm-block-primary-dark { background-color: @theme-block-primary-dark-background; }

.tm-block-footer { background-color: @theme-block-background; }

/* Color overrides for block-light position styling */
.tm-block-light {

    /*
     * Modifier: `uk-grid-divider`
     */

    .uk-grid-divider:not(:empty) > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-2-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-3-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-4-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-5-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-6-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-7-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-8-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-9-']:nth-child(n+2) { border-left-color: @theme-light-border; }

    /* Only tablets and desktop */
    @media (min-width: @breakpoint-medium) {

        .uk-grid-divider:not(:empty) > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) { border-left-color: @theme-light-border; }

    }

    /* Only desktop */
    @media (min-width: @breakpoint-large) {

        .uk-grid-divider:not(:empty) > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) { border-left-color: @theme-light-border; }

    }

    /*
     * Vertical divider
     */

    .uk-grid-divider:empty { border-top-color: @theme-light-border; }

    /*
     * Modifier: `uk-panel-header`
     */

    .uk-panel-header .uk-panel-title { border-bottom-color: @theme-light-border; }

    /*
     * Modifier: `uk-panel-divider`
     */

    .uk-panel + .uk-panel-divider:before { border-top-color: @theme-light-border; }

}

/* Color overrides for block-primary position styling */
.tm-primary {
    color: @global-primary-color;

    h1, h2, h3, h4, h4, h6 { color: @global-primary-color; }

    /* link color */
    > a:not([class]),
    > :not([class*='uk-nav']) a:not([class]),
    .uk-panel a { color: @global-primary-link-color; }

    > a:not([class]):hover,
    > :not([class*='uk-nav']) a:not([class]):hover,
    .uk-panel a:hover { color: @global-primary-link-hover-color; }

    /* uk-button style */
    .uk-button {
        background: @global-primary-color;
        color: @global-primary-background;

        &:hover {
            background: fade(@global-primary-color, 90%);
            color: @global-primary-background;
        }
    }

    /* uk-button-primary */
    .uk-button-primary {
        background: @panel-box-primary-button-background;

        &:hover { background: fade(@panel-box-primary-button-background, 80%); }
    }

    /* uk-form input fields */
    .uk-form input:not([type]),
    .uk-form input[type="text"],
    .uk-form input[type="password"],
    .uk-form input[type="email"] {

        border: none;
        background: @panel-box-primary-form-background;
        color: fade(@global-primary-color, 85%);

        /* Focus state */
        &:focus {
            background: darken(@panel-box-primary-form-background, 3%);
            color: @global-primary-color;
        }

    }

    /* uk-form placeholder */
    .uk-form :-ms-input-placeholder { color: @panel-box-primary-form-placeholder-color !important; }
    .uk-form ::-moz-placeholder { color: @panel-box-primary-form-placeholder-color; }
    .uk-form ::-webkit-input-placeholder { color: @panel-box-primary-form-placeholder-color; }

    /* uk-list-line */
    .uk-list-line > li:nth-child(n+2) { border-top-color: @theme-primary-border; }

    /*
     * Modifier: `uk-grid-divider`
     */

    .uk-grid-divider:not(:empty) > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-2-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-3-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-4-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-5-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-6-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-7-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-8-']:nth-child(n+2),
    .uk-grid-divider:not(:empty) > [class*='uk-width-9-']:nth-child(n+2) { border-left-color: @theme-primary-border; }

    /* Only tablets and desktop */
    @media (min-width: @breakpoint-medium) {

        .uk-grid-divider:not(:empty) > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) { border-left-color: @theme-primary-border; }

    }

    /* Only desktop */
    @media (min-width: @breakpoint-large) {

        .uk-grid-divider:not(:empty) > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) { border-left-color: @theme-primary-border; }

    }

    /*
     * Vertical divider
     */

    .uk-grid-divider:empty { border-top-color: @theme-primary-border; }


    /*
     * Modifier: `uk-panel-box`
     */

    .uk-panel-box {
        background: @panel-box-primary-background;
        color: @panel-box-primary-color;
    }

    .uk-panel-box .uk-panel-title { color: @panel-box-primary-title-color; }

    /*
     * Modifier: `uk-panel-header`
     */

    .uk-panel-header .uk-panel-title { border-bottom-color: @theme-primary-border; }

    /*
     * Modifier: `uk-panel-divider`
     */

    .uk-panel + .uk-panel-divider:before { border-top-color: @theme-primary-border; }

}


/* Layout
 ========================================================================== */

body { min-height: 100vh; }

/*
 * Force vertical scrollbar
 */

html { overflow-y: scroll; }

/*
 * Toolbar
 */

.tm-toolbar {

    position: relative;
    background-color: @theme-toolbar-background;
    padding: @theme-toolbar-padding 0;

    text-align: center;

    color: @global-primary-color;
    z-index: 5;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Toolbar uk-subnav */
.tm-toolbar .uk-subnav {

    > li {

        &:before { border-color: @theme-toolbar-subnav-border; }

        > a {
            color: @global-muted-color;

            &:hover { color: @global-color; }
        }
    }
}

.tm-toolbar .uk-panel + .uk-panel { margin: @global-grid-gutter 0 0 0; }

/*
 * Logo
 */

.tm-nav-logo {

    position: absolute;
    top: 50%;
    left: 50%;
    width: @theme-nav-logo-width;
    height: @theme-nav-logo-height;
    margin-top: -(@theme-nav-logo-height / 2);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;

    > a { display: block; }

    .tm-logo:hover { text-decoration: none; }

}

/*
 * Logo small
 * Remove whitespace caused by vertical centering to prevent logo wrapping into the next line
 */

.tm-logo-small { letter-spacing: -0.31em; }

/*
 * Navbar
 */

.tm-navbar {


    position: relative;
    z-index: 10;
    height: @theme-navbar-height;

    padding: @theme-navbar-padding;

    background: @theme-navbar-background;

    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-sizing: border-box;
    box-sizing: border-box;


    > .uk-container {
        max-width: 100%;
        height: 100%;
        padding: 0;
    }

    .tm-navbar-center {

        position: relative;
        display: table;
        height: 100%;
        width: 100%; /* Firefox Only */
        text-align: center;

        .tm-nav {

            display: table-cell;
            vertical-align: middle;
            text-align: center;

            .tm-nav-wrapper {

                display: inline-block;

                > .uk-navbar-nav > li { text-align: left; }

            }

        }

    }

}

/*
 * Search
 */

.tm-block-search {

    padding: @global-margin 0;
    background: @theme-block-primary-dark-background;
    text-align: center;

    /* Sub-object `uk-search-field` */
    .uk-search-field { color: @global-primary-color; }

    .uk-search-close,
    .uk-search:before { color: @panel-box-primary-form-placeholder-color; }

    .uk-search-field:-ms-input-placeholder { color: @panel-box-primary-form-placeholder-color; }
    .uk-search-field::-moz-placeholder { color: @panel-box-primary-form-placeholder-color; }
    .uk-search-field::-webkit-input-placeholder { color: @panel-box-primary-form-placeholder-color; }

}

/*
 * Middle
 */

.tm-main > :nth-child(n+2) { margin-top: @global-grid-gutter; }

.tm-content > :last-child { margin-bottom: 0; }

/*
 * Footer
 */

.tm-footer {
    margin: @global-grid-gutter 0;
    position: relative;
    color: @global-muted-color;
    text-align: center;
}

.tm-footer .uk-panel + .uk-panel { margin-top: @global-grid-gutter; }

/*
 * To-top scroller
 */

.tm-totop-scroller {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: @global-z-index;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: fade(@global-color, 50%);
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all linear 0.05s;
    -ms-transition: all linear 0.05s;
    transition: all linear 0.05s;
}

.tm-totop-scroller:after {
    content: "\f077";
    font-family: "FontAwesome";
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

.tm-totop-scroller:hover,
.tm-totop-scroller:focus { /* 1 */
    color: lighten(@global-color, 20%);
    font-size: 16px;
    outline: none; /* 2 */
}

/* Active */
.tm-totop-scroller:active {
    color: darken(@global-color, 20%);
    font-size: 11px;
}

/*
 * Navbar animated
 */

/* Only large screens */
@media (min-width: @breakpoint-medium) and (min-device-width: 1025px) {

    .tm-navbar-fixed.tm-navbar-animated {

        .tm-navbar {

            -webkit-transition: 0.15s ease-in-out;
            -ms-transition: 0.15s ease-in-out;
            transition: 0.15s ease-in-out;
            -webkit-transition-proberty: height, padding, line-height;
            -ms-transition-proberty: height, padding, line-height;
            transition-proberty: height, padding, line-height;

            .tm-nav-logo {
                -webkit-transition: 0.15s ease-in-out;
                -ms-transition: 0.15s ease-in-out;
                transition: 0.15s ease-in-out;
                -webkit-transition-proberty: top;
                -ms-transition-proberty: top;
                transition-proberty: top;
            }
        }

        .tm-navbar-small {
            height: @theme-navbar-small-height;
            padding: @theme-navbar-small-padding @theme-navbar-padding;

            background: lighten(@theme-navbar-background, 1%);
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
        }

    }

}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

    .tm-navbar,
    .tm-navbar.tm-navbar-small {
        height: @theme-navbar-phone-height;
        padding: @theme-navbar-padding;
    }

    .tm-navbar {

        .uk-navbar-toggle { height: @theme-navbar-phone-height - (@theme-navbar-padding * 2); }

    }

    .tm-logo-small:hover { text-decoration: none; }

    .tm-block-search { padding: (@global-margin / 2) 0; }

}


/* Fullscreen image
========================================================================== */

.tm-fullscreen-container {

    .tm-fullscreen {
        padding: @theme-block-large-padding;
        background-color: @theme-block-background;

        /* Content style */
        .uk-panel {

            h1 { color: @theme-fullscreen-heading-color; }
            p { color: @theme-fullscreen-color; }

            .tm-heading-border:after { border-color: @theme-fullscreen-border; }

        }

    }

}

/* Only large screens */
@media (min-width: @breakpoint-medium) {

    /* Setting the height of the fullscreen container */
    .tm-fullscreen-container {

        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: ~'calc(100vh - @{theme-navbar-height})';
        overflow: hidden;
        position: relative;
        z-index: 1;

        /* Fullscreen content, containing the background image */
        .tm-fullscreen {

            height: 100%;
            width: 100%;
            padding: 0;
            background-color: @theme-block-background;

            > div {

                display: table;
                height: 100%;
                width: 100%;

                > div {
                    display: table-cell;
                    vertical-align: middle;
                }
            }

            /* Content style */
            .uk-panel {

                h1 { color: @theme-fullscreen-heading-color; }
                p { color: @theme-fullscreen-color; }

                .tm-heading-border:after { border-color: @theme-fullscreen-border; }

            }

        }

    }

    /* Height of fullscreen container when navbar + toolbar are published */
    .tm-toolbar + .tm-navbar + .tm-fullscreen-container { height: ~'calc(100vh - (@{theme-navbar-height} + @{theme-toolbar-height}))'; }

}


/* Fixed navbar
========================================================================== */

/* Only large screens */
@media (min-width: @breakpoint-medium) {

    .tm-navbar-fixed {

        .tm-fullscreen-container {

            height: 100vh;

            .tm-fullscreen {
                position: absolute;
                top: (@theme-navbar-height / 2);
                bottom: 0;
            }

        }

        .tm-toolbar + .tm-navbar + .tm-fullscreen-container {

            height: 100vh;

            .tm-fullscreen { top: ((@theme-navbar-height + @theme-navbar-padding) / 2); }

        }

        .tm-toolbar,
        .tm-navbar {
            position: fixed;
            top: 0;
            width: 100%;
        }

        .tm-wrapper { position: relative; }

        /* Margin top of navbar when toolbar is published */
        .tm-toolbar + .tm-navbar { top: @theme-toolbar-height; }

        /* Margin top of block container following the navbar container */
        .tm-navbar + .tm-wrapper { top: @theme-navbar-height; }

        /* Margin top of block container following the navbar + toolbar container */
        .tm-toolbar + .tm-navbar + .tm-wrapper { top: @theme-navbar-height + @theme-toolbar-height; }

    }

}


/* Additional
 ========================================================================== */

/*
* Headline border
*/

.tm-heading-border {

    position: relative;
    margin-bottom: @global-margin;
    padding-bottom: @global-margin;

    &:after {
        display: block;
        width: @theme-heading-border-width;
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        bottom: 0;
        border-bottom: @global-border-width solid @global-border;
    }
}

/*
 * Text uppercase
 */

.tm-text-uppercase { text-transform: @global-text-transform; }

/*
 * Text medium
 */

.tm-text-medium {
    font-size: @theme-text-medium-font-size;
    line-height: @theme-text-medium-line-height;
}

/*
 * Text right
 */

@media (max-width: @breakpoint-medium) {

    .tm-text-left-small { text-align: left !important; }

}

/*
 * Link muted
 */

a.tm-link-muted,
.tm-link-muted a {

    color: @global-muted-color;
    text-decoration: underline;

    &:hover { color: @global-color; }

}

/*
 * Text line-height for forms
 */

.tm-form-line-height { line-height: @form-height; }

/*
 * Large icon
 */

.tm-icon-large {
    float: left;
    margin-top: round(@global-margin / 3);
    margin-right: @global-margin;
    font-size: @theme-large-icon-font-size;
}

/*
 * Social icons
 */

.tm-social-icons {
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
        display: inline-block;
        margin: 4px 2px;
    }
}

/*
 * Nite demo icons
 */

.tm-nite-icons {

    margin: @global-grid-gutter-large 0 0 0;
    padding: 0;
    list-style: none;

    > li {

        display: inline-block;

       > a {
            display: inline-block;
            border: (@global-border-width + 1) solid @theme-nite-icon-border;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            line-height: 85px;
            margin: 15px 15px 0 15px;
            padding: 20px;
            font-size: @theme-nite-icon-font-size;
            color: @theme-nite-icon-color;
            -webkit-transition: all 0.1s ease-in-out;
            -webkit-transform: translate3d(0,0,0);
            color: @theme-nite-icon-color;

            &:hover {
                border-color: rgba(0,0,0,0);
                background-color: @theme-nite-icon-hover-background;
                color: @theme-nite-icon-hover-color;
                text-decoration: none;
                -webkit-transform: scale(1.2);
            }

        }

    }

}

/* Only phones */
@media (max-width: @breakpoint-medium) {

    .tm-nite-icons {

        > li {

            > a {
                width: 48px;
                height: 48px;
                line-height: 53px;
                margin: 10px;
                padding: 12px;
                font-size: round(@theme-nite-icon-font-size / 1.5);
            }

        }

    }

}

/*
 * Custom nite font for icons
 */

@font-face {
    font-family: 'yootheme';
    src:url('../fonts/yootheme.eot?w5n8lw');
    src:url('../fonts/yootheme.eot?#iefixw5n8lw') format('embedded-opentype'),
        url('../fonts/yootheme.woff?w5n8lw') format('woff'),
        url('../fonts/yootheme.ttf?w5n8lw') format('truetype'),
        url('../fonts/yootheme.svg?w5n8lw#yootheme') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="tm-icon-yootheme-"],
[class*=" tm-icon-yootheme-"] {
    font-family: 'yootheme';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tm-icon-yootheme-zoo:before { content: "\e600"; }
.tm-icon-yootheme-yoo:before { content: "\e601"; }
.tm-icon-yootheme-widgetkit:before { content: "\e602"; }
.tm-icon-yootheme-warp:before { content: "\e603"; }
.tm-icon-yootheme-uikit:before { content: "\e604"; }
.tm-icon-yootheme-pagekit:before { content: "\e605"; }


/* Dropdown stack
 ========================================================================== /

/
 * Reset width if column width is set
 */

.uk-dropdown-navbar.uk-dropdown-stack {
    min-width: 0 !important;
    max-width: none !important;
}


/* Styles
 ========================================================================== */

.body-style ();

/*
 * Default Style
 */

.body-style () when (@global-body-style = 'default') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/default.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Vainlla Style
 */

.body-style () when (@global-body-style = 'vanilla') {

    .tm-fullscreen {
        background: #8c9298 url(../images/fullscreen/vanilla.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Mint Style
 */

.body-style () when (@global-body-style = 'mint') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/mint.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Turquoise Style
 */

.body-style () when (@global-body-style = 'turquoise') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/turquoise.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Salmon Style
 */

.body-style () when (@global-body-style = 'salmon') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/salmon.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Graphite Style
 */

.body-style () when (@global-body-style = 'graphite') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/graphite.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Ruby Style
 */

.body-style () when (@global-body-style = 'ruby') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/ruby.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}

/*
 * Blue Style
 */

.body-style () when (@global-body-style = 'blue') {

    .tm-fullscreen {
        background: #2d3135 url(../images/fullscreen/blue.jpg) 50% 50% no-repeat;
        background-size: cover;
    }

}


/* Border Image
 ========================================================================== */

.border-image-style ();

.border-image-style () when not (@global-border-image-style = 'none') {

    .tm-block-top-a.tm-block-primary,
    .tm-block-bottom-b.tm-block-primary-dark,
    .tm-block-bottom-a.tm-block-primary  {
        position: relative;
        background-clip: padding-box;
        z-index: 3;
    }

    .tm-block-top-a.tm-block-primary,
    .tm-block-bottom-b.tm-block-primary-dark  {
        border-width: 0 0 15px 0;
        border-color: transparent;
        border-style: solid;
    }

    .tm-block-top-a.tm-block-primary { border-image: url("../images/border/@{global-border-image-style}/primary_bottom.svg") 15 15 round; }
    .tm-block-bottom-b.tm-block-primary-dark { border-image: url("../images/border/@{global-border-image-style}/primary_dark_bottom.svg") 15 15 round; }

    .tm-block-top-a.tm-block-primary + [class*='tm-block-'],
    .tm-block-bottom-b.tm-block-primary-dark + [class*='tm-block-'] {
        position: relative;
        margin-top: -15px;
        z-index: 2;
    }

    .tm-block-bottom-a.tm-block-primary {
        border-image: url("../images/border/@{global-border-image-style}/primary_top.svg") 15 15 round;
        border-width: 15px 0 0 0;
        border-style: solid;
        border-color: transparent;
    }

    /* Desktop and bigger */
    @media (min-width: @breakpoint-large) {

        .uk-hidden-large + [class*='tm-block-'] { margin-top: 0 !important; }

    }

    /* Only tablets portrait */
    @media (min-width: @breakpoint-medium) and (max-width: @breakpoint-medium-max) {

        .uk-hidden-medium + [class*='tm-block-'] { margin-top: 0 !important; }

    }

    /* Phone landscape and smaller */
    @media (max-width: @breakpoint-small-max) {

        .uk-hidden-small + [class*='tm-block-'] { margin-top: 0 !important; }

    }

}


/* Blog
 ========================================================================== */

 .uk-article + .uk-article {
    margin-top: @global-margin-large;
    padding-top: @global-margin-large;
    border-top: @global-border-width solid @global-border;
 }

 /* Joomla only */
 .tm-leading-article .uk-article:last-child {
    margin-bottom: 0;
    padding-bottom: @global-margin-large;
    border-bottom: @global-border-width solid @global-border;
 }



/* Error
 ========================================================================== */

.tm-error-icon { font-size: 250px; }

.tm-error-headline { font-size: 100px; }


/* Offline
 ========================================================================== */

.tm-offline { width: 300px; }


/* Socialbuttons
 ========================================================================== */

 .tm-socialbuttons {

     line-height: 1;

     > div {
         margin-right: 10px;
         float: left;
     }
 }


/* WordPress only
 ========================================================================== */

.alignleft {
    display: block;
    margin-right: @utility-align-horizontal;
    float: left;
}

.alignright {
    display: block;
    margin-left: @utility-align-horizontal;
    float: right;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Push navbar and toolbar when admin toolbar is enabled */

@media (min-width: @breakpoint-medium) {

    .admin-bar .tm-toolbar { top: 46px; }

    .admin-bar .tm-toolbar + .tm-navbar { top: @theme-toolbar-height + 46px; }

}

@media (min-width: 783px) {

    .admin-bar .tm-navbar,

    .admin-bar .tm-toolbar { top: 32px; }

    .admin-bar .tm-toolbar + .tm-navbar { top: @theme-toolbar-height + 32px; }

}


/* Widgetkit Layer for dark styles
 ========================================================================== */

.widgetkit-style ();

.widgetkit-style () when (@theme-widgetkit-style = 'dark') {

    /*
     * Widgetkit Slideshow: Showcase Style
     */

    .wk-slideshow-showcasebox .slides-container {
        border-color: @global-border;
        background: @global-background;
    }

    /* Slideset: Container */
    .wk-slideshow-showcasebox .wk-slideset > div {
        border-color: @global-border;
        background: darken(@global-background, 3%);
        background: -webkit-linear-gradient(top, darken(@global-background, 3%) 0%, @global-background 7%);
        background: linear-gradient(to bottom, darken(@global-background, 3%) 0%, @global-background 7%);
    }

    /* Slideset: Content */
    .wk-slideshow-showcasebox .wk-slideset .set > li > div,
    .wk-slideshow-showcasebuttons .wk-slideset .set > li > div { background: @global-border; }

    .wk-slideshow-showcasebox .wk-slideset .set > li > div > div,
    .wk-slideshow-showcasebuttons .wk-slideset .set > li > div > div {
        background: darken(@global-background, 1%);
        box-shadow: none;
        text-shadow: 0 1px 0 @global-background;
    }

    /* Hover */
    .wk-slideshow-showcasebox .wk-slideset .set > li > div:hover,
    .wk-slideshow-showcasebuttons .wk-slideset .set > li > div:hover {
        background: @global-border;
        background: -webkit-linear-gradient(top, @global-border, darken(@global-border, 3%));
        background: linear-gradient(to bottom, @global-border, darken(@global-border, 3%));
    }

    .wk-slideshow-showcasebox .wk-slideset .set > li > div:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

    .wk-slideshow-showcasebox .wk-slideset .set > li > div:hover > div,
    .wk-slideshow-showcasebuttons .wk-slideset .set > li > div:hover > div {
        background: @global-background;
        background: -webkit-linear-gradient(top, @global-background, darken(@global-background, 3%));
        background: linear-gradient(to bottom, @global-background, darken(@global-background, 3%));
    }

    /* Active */
    .wk-slideshow-showcasebox .wk-slideset .set > li.active > div,
    .wk-slideshow-showcasebuttons .wk-slideset .set > li.active > div {
        box-shadow: none;
        background: @global-border;
    }

    .wk-slideshow-showcasebox .wk-slideset .set > li.active > div > div,
    .wk-slideshow-showcasebuttons .wk-slideset .set > li.active > div > div {
        background: darken(@global-background, 3%);
        box-shadow: 0 0 1px rgba(0,0,0,0.1) inset;
    }

    /*
     * Widgetkit Slideshow: Tabs Style
     */

    /* Navigation */
    .wk-slideshow-tabs .nav li,
    .wk-slideshow-tabsbar .nav-container {
        border-color: @global-border;
        background: darken(@global-background, 3%);
        background: -webkit-linear-gradient(top, @global-background, darken(@global-background, 3%));
        background: linear-gradient(to bottom, @global-background, darken(@global-background, 3%));
        box-shadow: none;
        text-shadow: 0 1px 0 @global-background;
    }

    .wk-slideshow-tabsbar .nav li,
    .wk-slideshow-tabsbar .nav-center .nav li:first-child,
    .wk-slideshow-tabsbar .nav-right li  { border-color: @global-border; }
    .wk-slideshow-tabsbar .nav span,
    .wk-slideshow-tabsbar .nav-center .nav li:first-child span,
    .wk-slideshow-tabsbar .nav-right span  { border-color: @global-background; }

    .wk-slideshow-tabs .nav li:hover,
    .wk-slideshow-tabsbar .nav li:hover { background: darken(@global-background, 3%); }
    .wk-slideshow-tabs .nav li.active,
    .wk-slideshow-tabsbar .nav li.active { background: @global-background; }

    /* Content */
    .wk-slideshow-tabs .slides-container,
    .wk-slideshow-tabsbar .slides-container {
        border-color: @global-border;
        background: @global-background;
    }

    /*
     * Widgetkit Slideshow: List Style
     */

    .wk-slideshow-list > div,
    .wk-slideshow-list .nav li.active {
        border-color: @global-border;
        background: @global-background;
    }

    .wk-slideshow-list .nav {
        border-top-width: 0;
        border-color: @global-border;
        background: darken(@global-background, 3%);
        background: -webkit-linear-gradient(left, @global-background, darken(@global-background, 3%));
        background: linear-gradient(to right, @global-background, darken(@global-background, 3%));
    }

    /*
     * Widgetkit Gallery: Simple Style
     */

    .wk-slideshow-inside .nav li {background: @global-background; }

    /*
     * Widgetkit Accordion: Default Style
     */

    .wk-accordion-default .toggler {
        border-color: @global-border;
        background: darken(@global-background, 3%);
        background: -webkit-linear-gradient(top, @global-background, darken(@global-background, 3%));
        background: linear-gradient(to bottom, @global-background, darken(@global-background, 3%));
        box-shadow: none;
        text-shadow: 0 1px 0 @global-background;
    }

}