////////////////////////////////////////
////////////////////////////////////////
// TEMPLATE DESIGNER: Skip all this...
////////////////////////////////////////
////////////////////////////////////////

// defaults for often used variables

@px2em: 1em / 16;

@swifty_font_family: "Arial, Helvetica, sans-serif";
@swifty_font_size: 16*@px2em; //0.8125em; //13px;

@swifty_headline_font_family: @swifty_font_family;
@swifty_headline_font_size: 14*@px2em; //0.875em; //14px;

@swifty_menu_font_family: @swifty_font_family;
@swifty_menu_font_size: 15*@px2em; //0.9375em; //15px;

// Variables

@swifty_color_1: #ff0000;
@swifty_color_2: #ffff00;
@swifty_color_3: #0fff00;
@swifty_color_4: #000000;
@swifty_color_5: #ffffff;
@swifty_color_6: #808080;
@swifty_color_7: #00ffff;

@none: ~''; // Never change or use @none, but this must be here!

// todo options:
// logo, slogan position and display; exact text; color, font, size, effect (shadow/outline/...), style

// Css / less for SS UI

//.swifty_c5_block_wrapper {
//    position: relative;
//}

// SS Mixins

.swifty_mixin_background_color(@color) when not (@color = ~'') {
    background-color: @color;
}

//.swifty_mixin_background_image(@area,@image,@sz,@rp,@at,@w,@h,@breakout) when not (@image = ~''), ( @area = 'header' ) {
//    @__w: swifty_unit(`"@{w}" === "" ? "-1" : "@{w}"`, px);
//    @__h: swifty_unit(`"@{h}" === "" ? "-1" : "@{h}"`, px);
//    @__url: `"@{image}".indexOf( "swifty=1" ) > 0 && "@{rp}" !== "repeat" ? "@{image}&ssw=@{__w}&ssh=@{__h}" : "@{image}"`;
//
//    @__ssrx: `"@{image}".indexOf( "ssrx=" ) > 0 ? parseInt( "@{image}".substr( "@{image}".indexOf( "ssrx=" ) + 5 ) ) : 0`;
//    @__ssrw: `"@{image}".indexOf( "ssrw=" ) > 0 ? parseInt( "@{image}".substr( "@{image}".indexOf( "ssrw=" ) + 5 ) ) : 0`;
//    @__posx_tmp: `parseInt( "@{__ssrx}" ) > 0 && parseInt( "@{__ssrw}" ) > 0 ? parseInt( "@{__ssrx}" ) + parseInt( "@{__ssrw}" ) / 2 : 50`;
//    @__posx: swifty_unit(@__posx_tmp, ~"%");
//
//    @__sz: `"@{breakout}" === "1" ? "auto 100%" : "@{sz}"`;
//
////    background-image: ~"url('@{__url}')";
//    background-repeat: @rp;
//    background-position: @__posx center;
//
//    -webkit-background-size: @__sz;
//    -moz-background-size: @__sz;
//    -o-background-size: @__sz;
//    background-size: @__sz; // dorh is all only IE9+
//
//    background-attachment: @at;
//}

.swifty_mixin_font_family(@family) when not (@family = ~'') {
    font-family: @family;
}

.swifty_mixin_font_size(@size) when not (@size = ~'') {
    font-size: @size;
}

.swifty_mixin_font_color(@color) when not (@color = ~'') {
    color: @color;
}

.swifty_mixin_font_weight(@weight) when not (@weight = ~'') {
    font-weight: @weight;
}

// Links / a

//.swifty_mixin_link_font_color(@color) when not (@color = ~'') {
//    a { color: @color; }
//}
//.swifty_mixin_link_font_weight(@weight) when not (@weight = ~'') {
//    a { font-weight: @weight; }
//}
//.swifty_mixin_link_decoration(@deco) when not (@deco = ~'') {
//    a { text-decoration: @deco; }
//}
//.swifty_mixin_link_hover_font_color(@color) when not (@color = ~'') {
//    a:hover { color: @color; }
//}
//.swifty_mixin_link_hover_font_weight(@weight) when not (@weight = ~'') {
//    a:hover { font-weight: @weight; }
//}
//.swifty_mixin_link_hover_decoration(@deco) when not (@deco = ~'') {
//    a:hover { text-decoration: @deco; }
//}
//.swifty_mixin_link_visited_font_color(@color) when not (@color = ~'') {
//    a:visited { color: @color; }
//}
//.swifty_mixin_link_visited_font_weight(@weight) when not (@weight = ~'') {
//    a:visited { font-weight: @weight; }
//}
//.swifty_mixin_link_visited_decoration(@deco) when not (@deco = ~'') {
//    a:visited { text-decoration: @deco; }
//}

//

.swifty_mixin_shadow(@w) when not (@w = ~'') {
    box-shadow: @w;
}

.swifty_mixin_item_shadow(@w) when (@w = ~'on') {
    text-shadow: 1px 2px 2px darken(@swifty_color_6, 30%);
    -moz-text-shadow: 1px 2px 2px darken(@swifty_color_6, 30%);
    -webkit-text-shadow: 1px 2px 2px darken(@swifty_color_6, 30%);
    -ms-text-shadow: 1px 2px 2px darken(@swifty_color_6, 30%);
}

//.swifty_mixin_border_(top,@width,@color,@style) when not (@style = ~'') {
//    border-top-width: @width;
//    border-top-color: @color;
//    border-top-style: @style;
//}
//.swifty_mixin_border_(bottom,@width,@color,@style) when not (@style = ~'') {
//    border-bottom-width: @width;
//    border-bottom-color: @color;
//    border-bottom-style: @style;
//}
//.swifty_mixin_border_(left,@width,@color,@style) when not (@style = ~'') {
//    border-left-width: @width;
//    border-left-color: @color;
//    border-left-style: @style;
//}
//.swifty_mixin_border_(right,@width,@color,@style) when not (@style = ~'') {
//    border-right-width: @width;
//    border-right-color: @color;
//    border-right-style: @style;
//}

.swifty_mixin_x(@x,@area,@x1,@x2,@x3,@breakout) when (@x = "") {
}
.swifty_mixin_x(@x,@area,@x1,@x2,@x3,@breakout) when (@x = page_center) {
    margin-left: auto;
    margin-right: auto;
    > .swifty_area_inner {
        margin-left: auto;
        margin-right: auto;
    }
}

//.swifty_mixin_x(@x,@area,@x1,@x2,@x3,@breakout) when (@x = page_center) and (swifty_unit(@breakout, px) > 0) {
//    > .swifty_area_inner {
//        margin-left: auto;
//        margin-right: auto;
//    }
//}

.swifty_mixin_display_item(@display) {
}
.swifty_mixin_display_item(@display) when not (@display = 1) {
    display: none;
}

//.swifty_mixin_display(@display) when (@display = 1) {
.swifty_mixin_display(@display) {
    &.swifty_area_page_overrule_show, &.swifty_area_page_overrule_left, &.swifty_area_page_overrule_right {
        display: block !important;
    }
    &.swifty_area_page_overrule_hide {
        display: none !important;
    }
    &.swifty_area_page_overrule_left {
        .swifty_mixin_flex_order( @swifty_area_main_flex_order - 10 );
    }
    &.swifty_area_page_overrule_right {
        .swifty_mixin_flex_order( @swifty_area_main_flex_order + 10 );
    }
}
//.swifty_mixin_display(@display) when (@display = 0) {
.swifty_mixin_display(@display) when not (@display = 1) {
    display: none;
}

.swifty_mixin_frame_width(@w,@boxed) {
    > .swifty_area_inner {
        max-width: 100%;
    }
}

.swifty_mixin_frame_width(@w,@boxed) when (@boxed = 1) {
    > .swifty_area_inner {
        max-width: @swifty_cfg_width;
    }
}

.swifty_mixin_width(@w,@breakout) when not (@w = ~'') {
    width: 100%;

    > .swifty_area_inner {
        max-width: @w;
        margin-left: auto;
        margin-right: auto;
    }
}

.swifty_mixin_width(@w,@boxed) when not (@w = ~'') and (swifty_unit(@boxed, px) > 0) {
    max-width: @w;
    margin-left: auto;
    margin-right: auto;

    > .swifty_area_inner {
        width: 100%;
    }
}

//.swifty_mixin_width(@w,@breakout) when not (@w = ~'') and (swifty_unit(@breakout, px) > 0) {
//    width: 100%;
//
//    > .swifty_area_inner {
//        max-width: @w;
//        margin-left: auto;
//        margin-right: auto;
//    }
//}

.swifty_mixin_max_width(@w) when not (@w = ~'') {
    max-width: @w;
}

.swifty_mixin_height(@w) when not (@w = ~'') {
    height: @w;
}

.swifty_mixin_min_height(@w) when not (@w = ~'') {
    min-height: @w;
}

.swifty_mixin_margin_top(@w) when not (@w = ~'') {
    margin-top: @w;
}

.swifty_mixin_margin_bottom(@w) when not (@w = ~'') {
    margin-bottom: @w;
}

.swifty_mixin_margin_left(@w) when not (@w = ~'') {
    margin-left: @w;
}

.swifty_mixin_margin_right(@w) when not (@w = ~'') {
    margin-right: @w;
}

////.swifty_mixin_margin_left(@w,@breakout) when not (@w = ~'') {
//.swifty_mixin_margin_left(@w,@breakout) when (swifty_unit(@breakout, px) > 0) {
////    margin-left: swifty_unit(@w, px) + (swifty_unit(@breakout, px) * (0 - 9999px));
//    margin-left: -9999px;
//}

////.swifty_mixin_margin_right(@w,@breakout) when not (@w = ~'') {
//.swifty_mixin_margin_right(@w,@breakout) when (swifty_unit(@breakout, px) > 0) {
////    margin-right: swifty_unit(@w, px) + (swifty_unit(@breakout, px) * (0 - 9999px));
//    margin-right: -9999px;
//}

.swifty_mixin_padding_top(@w) when not (@w = ~'') {
    padding-top: @w;
}

.swifty_mixin_padding_bottom(@w) when not (@w = ~'') {
    padding-bottom: @w;
}

.swifty_mixin_padding_left(@w) when not (@w = ~'') {
    padding-left: @w;
}

.swifty_mixin_padding_right(@w) when not (@w = ~'') {
    padding-right: @w;
}

////.swifty_mixin_padding_left(@w,@breakout) when not (@w = ~'') {
//.swifty_mixin_padding_left(@w,@breakout) when (swifty_unit(@breakout, px) > 0) {
////    padding-left: swifty_unit(@w, px) + (swifty_unit(@breakout, px) * (0 + 9999px));
//    @__w2: swifty_unit(@breakout, px) - 1 + 9999;
////    @__w2: unit(@breakout, px) - 1 + 9999;
//    padding-left: @__w2;
//}

////.swifty_mixin_padding_right(@w,@breakout) when not (@w = ~'') {
//.swifty_mixin_padding_right(@w,@breakout) when (swifty_unit(@breakout, px) > 0) {
////    padding-right: swifty_unit(@w, px) + (swifty_unit(@breakout, px) * (0 + 9999px));
//    @__w2: swifty_unit(@breakout, px) - 1 + 9999;
////    @__w2: unit(@breakout, px) - 1 + 9999;
//    padding-right: @__w2;
//}

.swifty_mixin_area(@area) {
    // Order can be important
    .swifty_mixin_display( ~"@{swifty_area_@{area}_on}" );
//    .swifty_mixin_width( ~"@{swifty_area_@{area}_width}", ~"@{swifty_area_@{area}_breakout}" );
    .swifty_mixin_width( ~"@{swifty_area_@{area}_width}", ~"@{swifty_area_@{area}_boxed}" );
    .swifty_mixin_max_width( ~"@{swifty_area_@{area}_max_width}" );
    .swifty_mixin_height( ~"@{swifty_area_@{area}_height}" );
    .swifty_mixin_min_height( ~"@{swifty_area_@{area}_min_height}" );
    .swifty_mixin_margin_top( ~"@{swifty_area_@{area}_margin_top}" );
    .swifty_mixin_margin_bottom( ~"@{swifty_area_@{area}_margin_bottom}" );
    .swifty_mixin_margin_left( ~"@{swifty_area_@{area}_margin_left}" );
    .swifty_mixin_margin_right( ~"@{swifty_area_@{area}_margin_right}" );
//    .swifty_mixin_margin_left( ~"@{swifty_area_@{area}_margin_left}", ~"@{swifty_area_@{area}_breakout}" );
//    .swifty_mixin_margin_right( ~"@{swifty_area_@{area}_margin_right}", ~"@{swifty_area_@{area}_breakout}" );
    > .swifty_area_inner > .swifty_area_inner_content {
        .swifty_mixin_padding_top(~"@{swifty_area_@{area}_padding_top}");
        .swifty_mixin_padding_bottom(~"@{swifty_area_@{area}_padding_bottom}");
        .swifty_mixin_padding_left(~"@{swifty_area_@{area}_padding_left}");
        .swifty_mixin_padding_right(~"@{swifty_area_@{area}_padding_right}");

        &.swifty_area_empty {
            padding: 0;
        }
    }
//    .swifty_mixin_padding_left( ~"@{swifty_area_@{area}_padding_left}", ~"@{swifty_area_@{area}_breakout}" );
//    .swifty_mixin_padding_right( ~"@{swifty_area_@{area}_padding_right}", ~"@{swifty_area_@{area}_breakout}" );
    .swifty_mixin_x(
        ~"@{swifty_area_@{area}_x}",
        @area,
        @swifty_area_sidebar_x,
        @swifty_area_extrasidebar_x,
        @swifty_area_main_x,
//        ~"@{swifty_area_@{area}_breakout}"
        ~"@{swifty_area_@{area}_boxed}"
    ); // Must come after margin
//    .swifty_mixin_background_color( ~"@{swifty_area_@{area}_background_color}" ); // Is done by hardcoding CSS in selectors
//    .swifty_mixin_background_image(
//        @area,
//        ~"@{swifty_area_@{area}_background_image}",
//        ~"@{swifty_area_@{area}_background_size}",
//        ~"@{swifty_area_@{area}_background_repeat}",
//        ~"@{swifty_area_@{area}_background_attachment}",
//        ~"@{swifty_area_@{area}_max_width}",
//        ~"@{swifty_area_@{area}_height}",
//        ~"@{swifty_area_@{area}_breakout}"
//    );
//    .swifty_mixin_font_family( ~"@{swifty_area_@{area}_font_family}" );
//    .swifty_mixin_font_size( ~"@{swifty_area_@{area}_font_size}" );
//    .swifty_mixin_font_color( ~"@{swifty_area_@{area}_font_color}" );
//    .swifty_mixin_font_weight( ~"@{swifty_area_@{area}_font_weight}" );
    // links
//    .swifty_mixin_link_font_color( ~"@{swifty_area_@{area}_link_font_color}" );
//    .swifty_mixin_link_font_weight( ~"@{swifty_area_@{area}_link_font_weight}" );
//    .swifty_mixin_link_decoration( ~"@{swifty_area_@{area}_link_decoration}" );
//    .swifty_mixin_link_hover_font_color( ~"@{swifty_area_@{area}_link_hover_font_color}" );
//    .swifty_mixin_link_hover_font_weight( ~"@{swifty_area_@{area}_link_hover_font_weight}" );
//    .swifty_mixin_link_hover_decoration( ~"@{swifty_area_@{area}_link_hover_decoration}" );
//    .swifty_mixin_link_visited_font_color( ~"@{swifty_area_@{area}_link_visited_font_color}" );
////    .swifty_mixin_link_visited_font_weight( ~"@{swifty_area_@{area}_link_visited_font_weight}" );
////    .swifty_mixin_link_visited_decoration( ~"@{swifty_area_@{area}_link_visited_decoration}" );
//    //
//    .swifty_mixin_border_( top, ~"@{swifty_area_@{area}_border_top_width}", ~"@{swifty_area_@{area}_border_top_color}", ~"@{swifty_area_@{area}_border_top_style}" );
//    .swifty_mixin_border_( bottom, ~"@{swifty_area_@{area}_border_bottom_width}", ~"@{swifty_area_@{area}_border_bottom_color}", ~"@{swifty_area_@{area}_border_bottom_style}" );
//    .swifty_mixin_border_( left, ~"@{swifty_area_@{area}_border_left_width}", ~"@{swifty_area_@{area}_border_left_color}", ~"@{swifty_area_@{area}_border_left_style}" );
//    .swifty_mixin_border_( right, ~"@{swifty_area_@{area}_border_right_width}", ~"@{swifty_area_@{area}_border_right_color}", ~"@{swifty_area_@{area}_border_right_style}" );
//    .swifty_mixin_shadow( ~"@{swifty_area_@{area}_shadow}" );

    // Flex
    .swifty_mixin_flex_order(~"@{swifty_area_@{area}_flex_order}");
}

// Flex minins

.swifty_mixin_flex() {
    // order is important!
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

.swifty_mixin_flex_stretch(@stretch) when not (@stretch = ~'') {
    -webkit-box-flex: ~"@{stretch}";      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: ~"@{stretch}";         /* OLD - Firefox 19- */
//    width: 20%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: ~"@{stretch}";          /* Chrome */
    -ms-flex: ~"@{stretch}";              /* IE 10 */
    flex: ~"@{stretch}";                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.swifty_mixin_flex_order(@ord) when not (@ord = ~'') {
    -webkit-box-ordinal-group: @ord;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: @ord;      /* OLD - Firefox 19- */
    -ms-flex-order: @ord;              /* TWEENER - IE 10 */
    -webkit-order: @ord;               /* NEW - Chrome */
    order: @ord;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.swifty_mixin_flex_direction('vertical') {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    -ms-box-orient: vertical;
    -ms-flex-direction:column;
    box-orient:vertical;
    flex-direction:column;
}

.swifty_mixin_flex_direction('horizontal') {
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -webkit-flex-direction:row;
    -moz-box-orient:horizontal;
    -moz-box-direction:normal;
    -ms-box-orient: horizontal;
    -ms-flex-direction:row;
    box-orient:horizontal;
    flex-direction:row;
}


// Template Mixins

// This will only set vars that do not yet exist. No overrides. This is by design in Less.

// This line will auto generate all default vars for all these areas (in get.php).
@swifty_cfg_areas: body frame topbar header navbar hub sidebar main extrasidebar footer bottombar;

@swifty_cfg_boxed: 0;
@swifty_cfg_width: 960px;

@swifty_area_body_width: 100%; //"";
//@swifty_area_body_font_family: Arial, Helvetica, sans-serif;
//@swifty_area_body_font_size: 12px;
//@swifty_c_area_body_background: "#   SS=515ea314e2d753784d000001";

@swifty_area_frame_x: page_center;
@swifty_area_frame_width: 100%;
@swifty_area_frame_max_width: 100%; //960px;

@swifty_area_topbar_flex_order: 10;
@swifty_area_topbar_min_height: 20px;

@swifty_area_header_flex_order: 20;
@swifty_area_header_min_height: 200px;
@swifty_area_header_background_size: cover;
@swifty_area_header_background_repeat: no-repeat;

@swifty_area_navbar_flex_order: 30;

@swifty_area_hub_flex_order: 40;

@swifty_area_sidebar_flex_order: 110;
@swifty_area_sidebar_x: left;
@swifty_area_sidebar_width: 200px;

@swifty_area_main_flex_order: 120;
@swifty_area_main_min_height: 200px;
@swifty_area_main_x: middle;
//@swifty_area_main_width: 400px;

@swifty_area_extrasidebar_flex_order: 130;
@swifty_area_extrasidebar_x: right;
@swifty_area_extrasidebar_width: 200px;

@swifty_area_footer_flex_order: 50;

@swifty_area_bottombar_flex_order: 60;

@swifty_item_logo_on: 1;
@swifty_item_logo_in_area: topbar;
@swifty_item_logo_leftright: left;
@swifty_item_logo_topbottom: top;
@swifty_item_logo_px_horizontal: 10px;
@swifty_item_logo_px_vertical: 10px;
@swifty_item_logo_px_width: 50px;
@swifty_item_logo_px_height: 50px;

@swifty_item_title_on: 1;
@swifty_item_title_in_area: topbar;
@swifty_item_title_leftright: left;
@swifty_item_title_topbottom: top;
@swifty_item_title_px_horizontal: 70px;
@swifty_item_title_px_vertical: 10px;
@swifty_item_title_onclick: gohome;
@swifty_item_title_txt_font: @swifty_font_family;
@swifty_item_title_shadow: on;

@swifty_item_slogan_on: 1;
@swifty_item_slogan_in_area: topbar;
@swifty_item_slogan_leftright: left;
@swifty_item_slogan_topbottom: top;
@swifty_item_slogan_px_horizontal: 70px;
@swifty_item_slogan_px_vertical: 35px;
@swifty_item_slogan_onclick: gohome;
@swifty_item_slogan_txt_font: @swifty_font_family;
@swifty_item_slogan_shadow: on;

@swifty_item_mainmenu_on: 1;
@swifty_item_mainmenu_in_area: navbar;
@swifty_item_mainmenu_leftright: left;
@swifty_item_mainmenu_bg_color: @swifty_color_3;
@swifty_item_mainmenu_txt_color: @swifty_color_4;
@swifty_item_mainmenu_bg_transparency: 0%;

@swifty_item_headlines_txt_color: @swifty_color_3;
@swifty_item_headlines_case: inherit;

@swifty_item_bodytext_txt_color: @swifty_color_1;

//@swifty_area_navbar_in_area: frame__3; // dorh
//@swifty_area_navbar_small_in_area: header__1; // dorh



////////////////////////////////////////
////////////////////////////////////////
// TEMPLATE DESIGNER: START HERE... BUT ONLY IF YOU REALLY WANT TO CHANGE THE BASE
////////////////////////////////////////
////////////////////////////////////////

// PAGETYPE definitions

@swifty_margin: 0;
@swifty_padding: 20px;

// Ovverruling Underscores
ul, ol {
    margin: 0 0 1.5em 0;
    padding-left: 0;
    // 2016-04-21 We're not sure whay this was ever added, but it's not good because 2nd lines after bullits will not align nicely.
    //list-style-position: inside;
}

body {
    font-family: @swifty_font_family !important;;
    font-size: @swifty_font_size !important;;
    font-weight: normal;
    color: @swifty_item_bodytext_txt_color;
    background-color: darken(@swifty_color_2,10%);
}

.swifty_area_included {
    p {
        margin: 0;
    }
}

.swifty_area_inner {
    height: 100%;
    position: relative;
    min-height: inherit;
}

.swifty_area_inner_content {
    width: 100%;
//////    height: 100%;
}

.swifty_area_frame {
//    background-color: @swifty_color_2;
}

.swifty_area_hub {
//    background-color: @swifty_color_2;
//    padding: 20px 0;
}

.swifty_area_inner_hub {
    background-color: @swifty_color_2;
}

//.swifty_area_topbar, .swifty_area_sidebar, .swifty_area_main, .swifty_area_footer, .swifty_area_bottombar{
//    padding: @swifty_padding;
//}


h1, h2, h3, h4, h5, h6{
    font-family: @swifty_headline_font_family;
    text-transform: @swifty_item_headlines_case;
    a, a:hover {
        text-decoration: none;
    }
}

h1 { font-size: @swifty_headline_font_size * 1.8; }
h2 { font-size: @swifty_headline_font_size * 1.6; }
h3 { font-size: @swifty_headline_font_size * 1.4; }
h4 { font-size: @swifty_headline_font_size * 1.2; }
h5 { font-size: @swifty_headline_font_size * 1; }
h6 { font-size: @swifty_headline_font_size * 0.8; }

.swifty_area_main{
    h1, h2, h3, h4, h5, h6{
        font-weight: bold;
        color: @swifty_item_headlines_txt_color;
        a {
            color: @swifty_item_headlines_txt_color;
            &:hover{
                color: darken(@swifty_item_headlines_txt_color, 20%);
            }
        }
    }
}


// Menu //

.swifty_mixin_hamburger(@c,@h) {
//    background:
//        linear-gradient(to bottom,
//          #fff 0px, #fff 14px,
//          @c 14px, @c 18px,
//          #fff 18px, #fff 22px,
//          @c 22px, @c 26px,
//          #fff 26px, #fff 30px,
//          @c 30px, @c 34px,
//          #fff 34px, #fff 50px);

//    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve' style='fill:@{c};'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
//    background-size: contain;

//    &:before {
//        content: "";
//        display: block;
//        height: 2px;
//        width: 24px;
//        background: none repeat scroll 0% 0% @c;
//        left: 13px;
//        top: 18px;
//        box-shadow: 0px 6px 0px @c, 0px 12px 0px @c;
//    }

    display: block;
    width: 100%;
    height: @h / 5;
    background: @c;
    position: relative;
    &:before, &:after {
        display: block;
        width: inherit;
        height: @h / 5;
        position: absolute;
        background: inherit;
        left: 0;
        content: '';
    }
    &:before {
        bottom: 200%;
    }
    &:after {
        top: 200%;
    }
}

.main-navigation.swifty_main_menu { // dorh
    float: inherit !important; // Needed because in .main-navigation css a float left is set, which we need to overrule here

//    max-width: @swifty_area_navbar_width;
    width: 100%;
//    margin-top: (0 - @swifty_area_navbar_padding_top);
//    margin-bottom: (0 - @swifty_area_navbar_padding_bottom);
//    margin-left: (0 - @swifty_area_navbar_padding_left);
//    margin-right: (0 - @swifty_area_navbar_padding_right);

    .menu-toggle {
        @h: 30px;
        @p: 4px;
        cursor: pointer;
        width: 40px;
        height: @h;
        padding: @p;
        padding-top: ( @h / 2 ) + @p;
        padding-bottom: ( @h / 2 ) + ( 2 * @p );

        // Center
        margin:0 auto;
        float: none;

        .menu-toggle_inner {
            width: 100%;
            height: 100%;
            .swifty_mixin_hamburger( darken(@swifty_color_4, 5%), @h );

        }
        &:hover .menu-toggle_inner {
            .swifty_mixin_hamburger( darken(@swifty_color_4, 10%), @h );
        }
    }
}

.swifty_item_mainmenu {

    .swifty_mixin_menu_positioning(
        @swifty_item_mainmenu_leftright
    );

    * {
        box-sizing: border-box;
    }

    ul { // both main and sub
        width: 100%;
        padding: 0;
        margin: 0;
        background-color: fade( @swifty_item_mainmenu_bg_color, 100% - @swifty_item_mainmenu_bg_transparency );

        li { // both main and sub

            a, a:hover { // both main and sub; a:hover is added so that area hover styles will not overrule these (hover has special overrule priorities)
                background-color: fade( @swifty_item_mainmenu_bg_color, 100% - @swifty_item_mainmenu_bg_transparency );
                color: @swifty_item_mainmenu_txt_color;
                font-family: @swifty_menu_font_family;
                font-size: @swifty_menu_font_size;
                text-decoration: none;
//                padding: (@swifty_padding / 2) @swifty_padding;
                padding: @swifty_padding;
//                width: 100%;

                &:hover {
                    background-color: lighten(fade( @swifty_item_mainmenu_bg_color, 100% - @swifty_item_mainmenu_bg_transparency ), 10%);
                }
            }

            &:hover {
                background-color: lighten(fade( @swifty_item_mainmenu_bg_color, 100% - @swifty_item_mainmenu_bg_transparency ), 10%);
            }

            ul { // only submenu and sub-submenu
                background-color: @swifty_item_mainmenu_bg_color;
//                top: 100%;
                min-width: 225px;
                width: inherit;

                li { // only submenu and sub-submenu
                    min-width: 100%;

                    a, a:hover { // only submenu and sub-submenu; a:hover is added so that area hover styles will not overrule these (hover has special overrule priorities)
                        font-size: @swifty_menu_font_size * 0.8;
                        width: inherit; // Needed because in .main-navigation css a fixed width is set, which we need to overrule here

                        &:hover {
                        }
                    }

                    &:hover {
                    }

                }
            }
        }

        // Clearfix
        &:before, &:after {
            content: " ";
            display: table;
        }
        &:after {
            clear: both;
        }
    }

    > ul { // only main
        > li { // only main
            > a, > a:hover {// only main; a:hover is added so that area hover styles will not overrule these (hover has special overrule priorities)
            }

            > ul { // only direct submenu
                top: 100%;
            }
        }
    }

    .current_page_item {
        > a, > a:hover, a:focus { // current/active page

            background-color: lighten(fade( @swifty_item_mainmenu_bg_color, 100% - @swifty_item_mainmenu_bg_transparency ), 10%);
        }
    }
}

// Dropdown arrows for menu items that have a submenu
//.page_item_has_children
.swifty_main_menu.swifty_menu_show_arrows li.page_item_has_children > a:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid @swifty_item_mainmenu_txt_color;
    position: relative;
    top: @swifty_menu_font_size - 0.15em;
    margin-left: 8px;
}

// Removes the dottet focus rect on a menu item when it's submenu is opened by click
.swifty_main_menu a:focus {
    outline: none;
}

@media screen and (min-width: 639px) {
    // Addition is for touch screens. Not all touch screen can do the hover trick like iOS.
    .main-navigation.swifty_menu_allow_hover ul li:hover > ul, .main-navigation ul li.hovertrick > ul {
        left: auto;
    }

    // Addition is for touch screens. Not all touch screen can do the hover trick like iOS.
    .main-navigation.swifty_menu_allow_hover ul ul li:hover > ul, .main-navigation ul ul li.hovertrick > ul {
        left: 100%;
    }
}
    // Addition is for touch screens. Not all touch screen can do the hover trick like iOS.
    .main-navigation ul li.hovertrick > ul {
        left: auto;
    }

    // Addition is for touch screens. Not all touch screen can do the hover trick like iOS.
    .main-navigation ul ul li.hovertrick > ul {
        left: 100%;
    }

// On small screens the submenu must always be aligned left
@media all and (max-width: 639px) {
    .swifty_vertical_area .swifty_item_mainmenu.swifty_menu_allow_hover ul li:hover > ul.children, .swifty_vertical_area .swifty_item_mainmenu ul li.hovertrick > ul.children {
        //left: 0 !important;
    }

    .main-navigation ul li > ul.children {
        overflow: hidden;
    }

    .swifty_area_main > .swifty_area_inner > .swifty_area_inner_content {
        // On small screens force the padding on the main content to have a small padding (but not normal wider padding)
        // so the text full most of the screen with, but there still is a small padding at the sides of the screen.
        padding: 8px !important;
    }
}

// Trick for making menu's work on touch screens, with the help of Javascript.
// See the desciption in the Javascript file.
.main-navigation ul li > ul.children {
    opacity: 0;
    height: 0;
    display: block;
}
@media screen and (min-width: 639px) {
    .main-navigation.swifty_menu_allow_hover ul li:hover > ul.children {
        opacity: 1;
        height: initial;
        transition: opacity 0.1s;
    }
}
.main-navigation ul li.hovertrick > ul.children {
    opacity: 1;
    height: initial;
    transition: opacity 0.1s;
}
@media screen and (max-width: 639px) {
    .main-navigation ul li.hovertrick > ul.children, .swifty_vertical_area .main-navigation ul li.hovertrick > ul.children {
        left: 0 !important;
    }
}

.swifty_mixin_menu_positioning(@leftright) when (@leftright = left) {
    float: left !important;
}
.swifty_mixin_menu_positioning(@leftright) when (@leftright = right) {
    float: right !important;
}

.swifty_mixin_menu_toggled() {
    ul, li, a {
        width: 100% !important;
    }

    ul {
        display: block !important;
        position: inherit !important;
        left: 0 !important;
        box-shadow: none !important;

        li {

            ul {

                li {

                    a {
                        padding-left: 40px;
                    }

                    ul li {
                        a {
                            padding-left: 60px;
                        }

                        ul li {
                            a {
                                padding-left: 80px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.swifty_main_menu.toggled {
    .swifty_mixin_menu_toggled();
}

.swifty_mixin_vertical_menu() {
    width: 100%;

    > ul { // only main
        width: 100%;

        > li { // only main
            width: 100%;
        }
    }
}


.swifty_vertical_area {
    .swifty_item_mainmenu {
        .swifty_mixin_vertical_menu();
        .swifty_mixin_menu_side(@swifty_area_main_flex_order, ~"@{swifty_area_@{swifty_item_mainmenu_in_area}_flex_order}");
    }
}

.swifty_mixin_submenu_right() {
    /*&.swifty_menu_allow_hover*/ ul li:hover > ul, ul li.hovertrick > ul {
        left: 100% !important;
        right: inherit !important;
        top: 0 !important;
    }
}

.swifty_mixin_submenu_left() {
    /*&.swifty_menu_allow_hover*/ ul li:hover > ul, ul li.hovertrick > ul {
        right: 100% !important;
        left: inherit !important;
        top: 0 !important;
    }
}

.swifty_mixin_menu_side(@ord_main, @ord_menu) when (swifty_unit(@ord_main, px) >= swifty_unit(@ord_menu, px)) {
    .swifty_mixin_submenu_right();
}

.swifty_mixin_menu_side(@ord_main, @ord_menu) when (swifty_unit(@ord_main, px) < swifty_unit(@ord_menu, px)) {
    .swifty_mixin_submenu_left();
}

// Menu template:
.swifty_item_mainmenu {
    ul { // both main and sub
        li { // both main and sub
            a, a:hover { // both main and sub
            }
            ul { // only submenu and sub-submenu
                li { // only submenu and sub-submenu
                    a, a:hover { // only submenu and sub-submenu
                    }
                }
            }
        }
    }
    > ul { // only main
        > li { // only main
            > a, > a:hover { // only main
            }
        }
    }
    .current_page_item {
        > a, > a:hover, a:focus { // applies to current/active page
        }
    }
}


// Other overrules

.swifty_area_frame {
    .hentry, .entry-content {
        margin: 0;
    }
}

p {
    margin-top: 0;
}

// LOGO //

.swifty_mixin_item_positioning(@hor,@ver,@px_hor,@px_ver,@w,@h) {
    position: absolute;
    max-width: @w;
    max-height: @h;

    img {
        max-width: @w !important;
        max-height: @h !important;;
        min-width: inherit !important;
        width: auto !important;
        height: auto !important;
    }
}
.swifty_mixin_item_positioning(@hor,@ver,@px_hor,@px_ver,@w,@h) when (@hor = left) {
    left: @px_hor;
}
.swifty_mixin_item_positioning(@hor,@ver,@px_hor,@px_ver,@w,@h) when (@hor = right) {
    right: @px_hor;
}
.swifty_mixin_item_positioning(@hor,@ver,@px_hor,@px_ver,@w,@h) when (@ver = top) {
    top: @px_ver;
}
.swifty_mixin_item_positioning(@hor,@ver,@px_hor,@px_ver,@w,@h) when (@ver = bottom) {
    bottom: @px_ver;
}

.swifty_ssd_item_logo {
    .swifty_mixin_item_positioning(
        @swifty_item_logo_leftright,
        @swifty_item_logo_topbottom,
        @swifty_item_logo_px_horizontal,
        @swifty_item_logo_px_vertical,
        @swifty_item_logo_px_width,
        @swifty_item_logo_px_height
    );
}

.swifty_ssd_item_title {
    .swifty_mixin_item_positioning(
        @swifty_item_title_leftright,
        @swifty_item_title_topbottom,
        @swifty_item_title_px_horizontal,
        @swifty_item_title_px_vertical,
        none,
        none
    );

    color: @swifty_color_4;
    font-family: @swifty_item_title_txt_font;

    .swifty_mixin_item_shadow( @swifty_item_title_shadow );
}

.swifty_ssd_item_slogan {
    .swifty_mixin_item_positioning(
        @swifty_item_slogan_leftright,
        @swifty_item_slogan_topbottom,
        @swifty_item_slogan_px_horizontal,
        @swifty_item_slogan_px_vertical,
        none,
        none
    );

    color: @swifty_color_4;
    font-family: @swifty_item_slogan_txt_font;

    .swifty_mixin_item_shadow( @swifty_item_slogan_shadow );
}

// Blog

.post {
    .swc_blog_image img {
        float: right;
        width: 40%;
        min-width: 80px;
        max-width: 700px;
        margin: 0 0 0 20px;
    }

    .swc_blog_date, .swc_blog_author, .swc_blog_category {
        font-style: italic;
    }

    .swc_blog_details {
        margin-top: 0.83em !important;
    }

    .swc_p_0 {
        margin-bottom: 0.83em !important;
    }
}

.post-navigation {
    .nav-previous {
        width: 50%;
        float: left;
        margin-top: 1.66em;
    }
    .nav-previous a::before {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 8px solid #000000;
        content: "";
        height: 0;
        margin-right: 8px;
        position: relative;
        top: 0;
        display: inline-block;
        width: 0;
    }
    .nav-next {
        width: 50%;
        float: right;
        text-align: right;
        margin-top: 1.66em;
    }
    .nav-next a::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #000000;
        content: "";
        height: 0;
        margin-left: 8px;
        position: relative;
        top: 0;
        display: inline-block;
        width: 0;
    }
}

// Figure

figure {
    margin: 0;
    text-align: center;

    &.wp-caption {
        margin-bottom: 0;

        .wp-caption-text {
            margin: 0.3em 0;
            font-style: italic;
        }
    }
}

// Swifty Assets

//Search Box

.swc_asset_swifty_search_box {
	label.swc_search_label {
		line-height: 1.7;
		padding: 3px 0;
	}

    input.swc_search_submit {
        background-color: lighten(@swifty_color_3, 10%);
        color: @swifty_color_4;
        text-shadow: none;
        box-shadow: none;
        padding: 10px;
        border: 1px solid @swifty_color_3;
        font-size:0.8em;
        border-radius: 3px;
        box-sizing: border-box;

        &:hover{
            background-color: @swifty_color_3;
            border: 1px solid darken(@swifty_color_3, 10%);
        }
    }

	.swc_input_box input.swc_search_field {
		padding: 4px;
		border-radius: 3px;
	}
}

//Button

.swc_mixin_button_reset() {
    border: none;
    box-shadow: none;
    font-size: inherit;
    line-height: inherit;
    text-shadow: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;

    padding: 10px;
    background-color:@swifty_color_3;
    color: @swifty_color_4;

    &:hover {
        background-color:darken(@swifty_color_3,30%);
        color: @swifty_color_4;
    }
}

.swc_mixin_button_sub2() {
    color:@swifty_color_4;
    background-color:transparent;
    border:2px solid @swifty_color_4;
}

.swc_asset_swifty_button {
    button, input[type="button"], input[type="reset"], input[type="submit"] {
        &.swc_style_btn_1 {
            .swc_mixin_button_reset();
        }

        &.swc_style_btn_2 {
            .swc_mixin_button_reset();

            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
        }

        &.swc_style_btn_3 {
            .swc_mixin_button_reset();

            -moz-border-radius: 28px;
            -webkit-border-radius: 28px;
            border-radius: 28px;
        }

        &.swc_style_btn_4 {
            .swc_mixin_button_reset();
            .swc_mixin_button_sub2();
        }

        &.swc_style_btn_5 {
            .swc_mixin_button_reset();
            .swc_mixin_button_sub2();

            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
        }

        &.swc_style_btn_6 {
            .swc_mixin_button_reset();
            .swc_mixin_button_sub2();

            -moz-border-radius: 28px;
            -webkit-border-radius: 28px;
            border-radius: 28px;
        }
    }
}

.swc_asset_swifty_button {
	input[type="submit"] {
		background-color: darken(@swifty_color_6, 25%);
		font-size: 0.9em;
		border: 1px solid @swifty_color_6;
		color: @swifty_color_7;
		text-shadow: none;
		box-shadow: none;
		line-height: 1.5;
		padding: 15px 20px;
		border-radius: 3px;
		box-sizing: border-box;

		&:hover{
			background-color: darken(@swifty_color_6, 50%);
			box-shadow: none;
		}
	}
}

// Image

.swifty_ssd_item_logo {
    img {
        box-shadow: none !important;
    }
    figure {
    box-shadow: none !important;
        img {
            box-shadow: none !important;
        }
    }
}

.swc_mixin_style_cap_3() {
    figcaption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 14px;
        font-style: normal;
        background-color: rgba( 255, 255, 255, 0.7 );
    }
}

.swc_mixin_style_cap_4() {
    figcaption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 14px;
        font-style: normal;
        color: white;
        background-color: rgba( 0, 0, 0, 0.7 );
    }
}

.swc_mixin_style_cap_5() {
    position: relative;
    overflow: hidden;
    figcaption {
        display: block;
        position: absolute;
        bottom: -200px;
        left: 0;
        right: 0;
        margin: 0;
        padding: 14px;
        font-style: normal;
        color: white;
        background-color: rgba( 0, 0, 0, 0.7 );
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }
}

.swc_mixin_style_cap_5_hover() {
    figcaption {
        bottom: 0;
    }
}

.swc_mixin_style_cap_6() {
    position: relative;
    overflow: hidden;
    figcaption {
        position: absolute;
        top: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 14px;
        font-style: normal;
        color: white;
        background-color: rgba( 0, 0, 0, 0.7 );
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        span {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.swc_mixin_style_cap_6_hover() {
    figcaption {
        top: 0;
    }
}

// Contactform

.swc_asset_swifty_contact_form{
	.ninja-forms-form-wrap {
		input[type="submit"] {
			background-color: darken(@swifty_color_6, 25%);
			font-size: 0.9em;
			border: 1px solid @swifty_color_6;
			color: @swifty_color_7;
			text-shadow: none;
			box-shadow: none;
			line-height: 1.5;
			padding: 15px 20px;
			border-radius: 3px;
			box-sizing: border-box;
		
			&:hover{
				background-color: darken(@swifty_color_6, 50%);
				box-shadow: none;
			}
		}
		
		input[type="text"] {
			border-radius: 3px;
		}
		
		textarea {
			border-radius: 3px;
		}
	}
}

// Quote

.swc_asset_swifty_quote{
	.swc_asset_cntnt{
		background-color: none !important;

		.swc_quote_wrapper {
			font-style: normal;
			color: @swifty_color_3;

			.swc_quote_cite {
				font-style: italic;
			}
				
			.swc_quote_has_cite {
				font-style: normal;		
			}
				
			&:before{
				font-family: @swifty_font_family;
				color: @swifty_color_3;
				font-size: 50*@px2em !important;
			}

			&:after{
				font-family: @swifty_font_family;
				color: @swifty_color_3;
				font-size: 50*@px2em !important;
			}
		}
	}
}

////////////////////////////////////////
// END OF base_start
////////////////////////////////////////

