/*
 * Mixins
 */

.clearfix() {
    *zoom: 1;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.box(@float: left; @z_index: 1; @display: block; @position: relative) {
    float: @float;
    z-index: @z_index;
    display: @display;
    position: @position;
}

.fullBox(@width: 100%; @float: left; @z_index: 1; @display: block; @position: relative) {
    .box(@float; @z_index; @display; @position);
    width: @width;
}

.placeholder(@color: @secondary_color) {
    &::-webkit-input-placeholder {
        color: @color;
    }

    &:-moz-placeholder { /* Firefox 18- */
        color: @color;
    }

    &::-moz-placeholder {  /* Firefox 19+ */
        opacity: 1;
        color: @color;
    }

    &:-ms-input-placeholder {
        color: @color;
    }
}

.font-face(@font_name, @font_file, @font_weight: normal, @font_style: normal) {
    font-family: "@{font_name}";
    src: url("@{font_file}.eot");
    src: url("@{font_file}.eot?#iefix") format("embedded-opentype"),
    url("@{font_file}.woff2") format("woff2"),
    url("@{font_file}.woff") format("woff"),
    url("@{font_file}.ttf") format("truetype"),
    url("@{font_file}.svg#@{font_name}") format("svg");
    font-weight: @font_weight;
    font-style: @font_style;
}

.rems(@value) {
    @rem_value : (@value / @base_font_size);
    font-size: ~"@{rem_value}rem";
}

.ems(@value: @base_font_size, @context: @base_font_size) {
    @em_value: (@value / @context);
    font-size: ~"@{em_value}em";
}

.fa(@unicode, @color: inherit, @style: 'regular', @is_brand: false) {
    color: @color;

    & when not(isstring(@unicode)) {
        content: "\@{unicode}";
    }

    & when (isstring(@unicode)) {
        content: @unicode;
    }

    & when (@is_brand = false) {
        font-family: "Font Awesome 5 Pro";
    }

    & when (@is_brand = true) {
        font-family: "Font Awesome 5 Brands";
    }

    & when (@style = 'light') and (@is_brand = false) {
        font-weight: 300;
    }

    & when (@style = 'regular') and (@is_brand = false) {
        font-weight: 400;
    }

    & when (@style = 'solid') and (@is_brand = false) {
        font-weight: 900;
    }
}

/*
 * Converts letter-spacing pixel values into ems
 * For consistent letter-spacing values throughout and equal to those in designs
 */

.letterSpacing(@pixels) {
    letter-spacing: (@pixels / 1000) * 1em;

    .return() when (@pixels = 0) {
        letter-spacing: normal;
    }

    .return();
}

/*
 * Navigation Style
 */

.nav() {
    .list();

    li {

        > ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            margin: 0;
            padding: 0;
            z-index: 400;
            background: @highlight_color;

            @media @flyout {
                position: relative;
            }

            > li {

                > ul {
                    position: absolute;
                    top: 0;
                    left: 100%;

                    @media @flyout {
                        position: relative;
                    }
                }
            }
        }

        ul {

            li {
                float: left;
                display: block;
                width: 100%;
                white-space: nowrap;
            }
        }

        &:hover {

            > ul {
                @media all and (min-width: (@flyout_breakpoint + 1)) {
                    display: block;
                }
            }
        }
    }
}

/*
 * Edge to edge navigation
 */

.edgeNav() {
    .clearfix();
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;

    li {
        display: table-cell;
        text-align: center;

        a {
            padding: 5px 15px;
            display: block;
        }

        > .relative {

            > ul {
                position: absolute;
                display: none;
                top: 100%;
                left: 0;
                margin: 0;
                padding: 0;
                z-index: 400;
                background: #fff;
            }
        }

        ul {
            display: none;

            li {
                float: left;
                display: block;
                width: 100%;
                white-space: nowrap;
            }
        }
    }

    li:hover {

        > ul {
            display: block;
        }
    }
}

/*
 * Fade Dropdown Hover
 */

.fadeNav() {
    .clearfix();

    li {

        ul {
            display: block;
            opacity: 0;
            visibility: hidden;
            transition: opacity 400ms linear 0s, visibility 0s linear 400ms;
        }

        &:hover {

            > ul {
                opacity: 1;
                visibility: visible;
                transition-delay: 0s;
            }
        }
    }
}

/*
 * List styles
 */

.ul(@color: @text_color, @icon: @fa-var-circle, @style: 'solid', @icon_font_size: 6, @margin_left: 30) {
    @margin: (@margin_left / @base_font_size);
    @left: (@margin_left / @icon_font_size);
    margin-left: ~"@{margin}em";

    li {
        position: relative;

        &:before {
            .fa(@icon, @color, @style);
            position: absolute;
            top: 0;
            left: ~"-@{left}em";
            width: ~"@{left}em";
            .rems(@icon_font_size);
            text-align: center;
        }
    }
}

.ol(@color: @text_color, @margin_left: 30) {
    @margin: (@margin_left / @base_font_size);
    &:extend(ul all);
    counter-reset: count;

    li {
        padding: 0;

        &:before {
            counter-increment: count;
            content: counters(count, '.') '.';
            margin: ~"0 "(@margin / 3em) ~ " 0";
            color: @color;
        }

        ol {
            margin-left: ~"@{margin}em";
        }
    }
}

/*
 * Column Based Grid
 *
 * To use this grid you need a colGroup to surround the grid
 * items.  You can call this simply by using .col(12); in your
 * css within your media queries but classes have been autogenerated
 * for the desktop, tablet and mobile media queries that will allow
 * you to control layout with helper classes prefixed with your desired
 * media query.
 *
 * Using the classes "desktop_grid_23 tablet_grid_23 mobile_grid_23"
 * means you can set the desired amount of columns at each breakpoint
 * within the markup.
 */

@column_width: 100% / @column_count;

.colGroup(@gutter_width: @gutter_width) {
    .clearfix();
    width: ~'calc(100% + @{gutter_width})';
    margin-right: -@gutter_width / 2px;
    margin-left: -@gutter_width / 2px;
}

.colGroup {
    .colGroup();
}

.col(@i, @gutter_width: @gutter_width, @margin: true) {
    float: left;
    width: @column_width * @i;
    min-height: 1px;
    padding-right: @gutter_width / 2px;
    padding-left: @gutter_width / 2px;

    & when (@margin = true) {
        margin-bottom: @gutter_width * 1px;
    }

    .noBottomMargin & {
        margin-bottom: 0;
    }
}

.columns (@i) when (@i > 0) {

    .desktop_grid_@{i} {

        @media @desktop {
            .col(@i);
        }
    }

    .tablet_grid_@{i} {

        @media @tablet {
            .col(@i);
        }
    }

    .mobile_grid_@{i} {

        @media @mobile {
            .col(@i);
        }
    }

    .columns(@i - 1);
}

.columns(0) {}
.columns(@column_count);

/*
 * Equal width grid helper
 *
 * To use this grid helper you simply need to use .grid(4);
 * in your CSS which will make all elements the same width, removing
 * margin on the number of elements specified and clearing the first
 * element of the next row.  You can optionally specify an override
 * of the default gutter width.
 */

.grid (@grid_columns, @margin: @gutter_width) {
    float: left;
    margin: 0 @margin @margin 0;
    width: ~"calc((100% - (@{margin} * (@{grid_columns} - 1))) / @{grid_columns})";

    &:nth-of-type(@{grid_columns}n) {
        margin-right: 0;

        // Detect IE11
        @media all
        and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            width: ~"calc((100% - (@{margin} * (@{grid_columns} - 1))) / @{grid_columns} - 0.5px)";
            float: right;
        }

        // Detect Edge
        @supports (-ms-ime-align: auto) {
            width: ~"calc((100% - (@{margin} * (@{grid_columns} - 1))) / @{grid_columns} - 0.5px)";
            float: right;
        }
    }

    &:nth-of-type(@{grid_columns}n + 1) {
        clear: both;
    }
}

/*
 * Deprecated Mixins - DON'T USE THESE
 */

.transitionPrefix(@prop, @time, @ease) {
    transition: @prop @time @ease;
}

.transition(@transition) {
    transition: @transition;
}

.transitionDelay(@delay) {
    transition-delay: @delay;
}

.transitionDuration(@duration) {
    transition-duration: @duration;
}

.transform(@string) {
    transform: @string;
}

.translate(@translate) {
    transform: translate(@translate);
}

.rotate(@degrees) {
    transform: rotate(@degrees);
}

.transformStyle(@string) {
    transform-style: @string;
}

.transformOrigin(@string) {
    transform-origin: @string;
}

.keyframes(@name; @arguments) {
    @keyframes @name { @arguments(); }
}

.animation(@arguments) {
    animation: @arguments;
}

.opacity(@opacity: 1) {
    opacity: @opacity;
}

.gradient(@start_color: #2170b5, @end_color: #164b91) {
    background: linear-gradient(to bottom, @start_color 0%, @end_color 100%);
}

.slickArrows(@style: defaultStyles) {

    .slideshowLeftArrow, .slideshowRightArrow {
        position: absolute;
        top: 0;
        z-index: 1;
        padding: 0 40px;
        background: 0;
        transition: all 0.3s ease-out;
        cursor: pointer;
        height: 100%;

        &:focus {
            border: none;
            outline: none;

            i {
                color: #fff;
                background: @dark_color;
            }
        }

        i {
            color: #fff;
            display: block;
            background: fade(@dark_color, 50%);
            height: 40px;
            width: 40px;
            text-align: center;
            .rems(25);
            line-height: 40px;
            cursor: pointer;
            z-index: 4000;
            padding: 0 0 0 0.1em;
            position: absolute;
            margin: -20px 0 0;
        }

        &:hover {

            i {
                color: #fff;
                background: @dark_color;
            }
        }
    }

    & when (@style = defaultStyles) {

        .slideshowLeftArrow {
            left: -50px;

            @media all and (max-width: 1480px) {
                left: 15px;
            }

            i {

                &:before {
                    margin-left: -3px;
                }
            }

            i {
                left: 15px;
            }
        }

        .slideshowRightArrow {
            right: -50px;

            @media all and (max-width: 1480px) {
                right: 15px;
            }

            i {
                right: 15px;
            }
        }
    }

    & when (@style = arrowSlideOut) {

        .slideshowLeftArrow {
            left: -40px;
            opacity: 0;

            i {
                left: 0;
            }

            @media (max-width: (@wrapper_width + 100px)) {
                left: 15px;
                opacity: 1;

                i {
                    left: 15px;
                }
            }
        }

        .slideshowRightArrow {
            right: -40px;
            opacity: 0;

            i {
                right: 0;
            }

            @media (max-width: (@wrapper_width + 100px)) {
                right: 15px;
                opacity: 1;

                i {
                    right: 15px;
                }
            }
        }

        &:hover {

            .slideshowLeftArrow {
                opacity: 1;
                left: -50px;
            }

            .slideshowRightArrow {
                opacity: 1;
                right: -50px;
            }
        }
    }

    & when (@style = arrowSlideIn) {

        .slideshowLeftArrow, .slideshowRightArrow {
            opacity: 0;

            &:focus {
                opacity: 1;
            }
        }

        .slideshowLeftArrow {
            left: 0;

            i {
                left: 15px;
            }

            &:focus {
                left: 15px;
            }

            @media (max-width: (@wrapper_width + 100px)) {
                left: 15px;
                opacity: 1;

                i {
                    left: 15px;
                }
            }
        }

        .slideshowRightArrow {
            right: 0;

            i {
                right: 15px;
            }

            &:focus {
                opacity: 1;
                right: 15px;
            }

            @media (max-width: (@wrapper_width + 100px)) {
                right: 15px;
                opacity: 1;

                i {
                    right: 15px;
                }
            }
        }

        &:hover {

            .slideshowLeftArrow {
                opacity: 1;
                left: 15px;
            }

            .slideshowRightArrow {
                opacity: 1;
                right: 15px;
            }
        }
    }

    & when (@style = sideArrows) {

        .slideshowRightArrow, .slideshowLeftArrow {
            width: 80px;
            margin: 0;
            border-radius: 0;
            background: fade(#000, 30%);

            &:hover {
                background: fade(#000, 50%);

                i {
                    background: 0;
                }
            }

            i {
                transform: translateX(-50%);
                background: 0;

                &:hover {
                    background: 0;
                    box-shadow: none;
                }
            }
        }

        .slideshowLeftArrow {
            left: 15px;

            i {
                left: 50%;
            }
        }

        .slideshowRightArrow {
            right: 15px;

            i {
                transform: translateX(50%);
                right: 50%;
            }
        }
    }
}

.slickDots() {

    .slick-dots {
        text-align: center;

        li {
            display: inline-block;
            min-height: 0;

            button {
                position: relative;
                height: 10px;
                width: 10px;
                margin: 10px 5px;
                cursor: pointer;
                text-indent: -9999px;
                background: rgba(255, 255, 255, 0.7);
                border-radius: 50%;

                &:focus {
                    border: none;
                    outline: none;
                }
            }

            &.slick-active {

                button {
                    background: @highlight_color;
                }
            }
        }
    }
}

.backgroundOverlay(@color_option: light, @fade_percent: 40%) {

    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        top: 0;
        left: 0;

        & when (@color_option = light) {
            background: fade(#fff, @fade_percent);
        }

        & when (@color_option = dark) {
            background: fade(#000, @fade_percent);
        }
    }
}