.slider-container {

    /**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */
    .carousel {
        width: 100%;
        position: relative;
        overflow: hidden;
        height: 415px;
    }

    .inner {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;

    }

    /**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
    .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        opacity: 0;

        &.active,
        &.left,
        &.right {
            z-index: 2;
            opacity: 1;
        }

        img {
            max-height: 55%;
            max-width: 100%;
            object-fit: contain;
        }

        h1 {
            color: $primary;
        }
    }

    /**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

    .js-reset-left {
        left: auto
    }

    /**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
    .slide.left {
        left: -100%;
        right: 0;
    }

    .slide.right {
        right: -100%;
        left: auto;
    }

    .transition .slide.left {
        left: 0%
    }

    .transition .slide.right {
        right: 0%
    }

    /**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
    .transition .slide.shift-right {
        right: 100%;
        left: auto
    }

    .transition .slide.shift-left {
        left: 100%;
        right: auto
    }

    /**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
    .transition .slide {
        transition-property: right, left, margin;
    }

    /**
 * ==========================
 * Indicators
 *
 */
    .indicators {
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 4;
        padding: 0;
        text-align: center;
    }

    .indicators li {
        width: 13px;
        height: 13px;
        display: inline-block;
        margin: 5px;
        background: $slider-dots;
        list-style-type: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.3s ease-out;
    }

    .indicators li.active {
        background: $primary;
    }

    .indicators li:hover {
        background-color: $primary;
    }

    /**
 * ==========================
 * Arrows 
 *
 */
    .arrow {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        z-index: 5;
        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
        cursor: pointer;
        transition: border-color 0.3s ease-out;
    }

    .arrow:hover {
        border-color: #93278f
    }

    .arrow-left {
        left: 20px;
        transform: rotate(225deg);
    }

    .arrow-right {
        right: 20px;
        transform: rotate(45deg);
    }

    /**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
    .slide {
        text-align: center;
    }
}


// Multiselect
.drop {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;

    select {
        display: none;
    }

    .drop-screen {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #000;
        top: 0px;
        left: 0px;
        opacity: 0;
        display: none;
        z-index: 1;
    }

    .drop-display {
        position: relative;
        padding: 0px;
        border: 1px solid $input-border;
        width: 100%;
        background: #FFF;
        z-index: 1;
        margin: 0px;
        font-size: $f16;
        min-height: 38px;
        border-radius: 5px;
        width: 235px;
        cursor: pointer;

        &>div {
            max-height: 40px;
            overflow-y: auto;
        }

        @media screen and (max-width: 640px) {
            width: 90vw;
            margin-right: 0px;
        }

        &:hover {
            &:after {
                opacity: 0.75;
            }
        }

        &:after {
            font-family: $font-awesome;
            content: "\f0d7";
            display: inline-block;
            position: absolute;
            right: 10px;
            top: 12px;
            font-size: $f14;
            color: #444;
            font-weight: 900;
        }

        .item {
            position: relative;
            display: inline-block;
            background: #F3F3F3;
            margin: 0 3px 0px 0px;
            padding: 0px 25px 0px 10px;
            overflow: hidden;
            height: 28px;
            line-height: 30px;
            top: 5px;
            left: 3px;
            border-radius: 25px;
            font-size: $f12;
            cursor: pointer;

            i {
                font-size: 0px;

                &:before {
                    font-size: 8px;
                }
            }

            .btnclose {
                color: #fff;
                position: absolute;
                font-size: $f16;
                right: 5px;
                top: 10px;
                cursor: pointer;
                background-color: #2A2A2A;

                &:hover {
                    opacity: 0.75;
                }
            }
        }

        .item.remove {
            -webkit-animation: removeSelected 0.2s, hide 1s infinite;
            animation: removeSelected 0.2s, hide 1s infinite;
            -webkit-animation-delay: 0s, 0.2s;
            animation-delay: 0s, 0.2s;
            display: none;
        }

        .item.add {
            -webkit-animation: addSelected 0.2s;
            animation: addSelected 0.2s;
        }

        .item.hide {
            display: none;
        }
    }

    .drop-options {
        background: $white;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        position: absolute;
        width: 100%;
        max-height: 0px;
        overflow-y: auto;
        transition: all 0.25s linear;
        z-index: 1;

        a {
            display: block;
            height: 40px;
            line-height: 40px;
            padding: 0px 20px;
            color: $primary;
            position: relative;
            max-height: 40px;
            transition: all 1s;
            overflow: hidden;

            &:hover {
                background: $login-bg;
                cursor: pointer;
                font-weight: bold;
            }
        }

        a.remove {
            -webkit-animation: removeOption 0.2s;
            animation: removeOption 0.2s;
            max-height: 0px;
        }

        a.add {
            -webkit-animation: addOption 0.2s;
            animation: addOption 0.2s;
        }

        a.hide {
            display: none;
        }
    }
}

.drop.open {
    z-index: 100;

    .drop-screen {
        z-index: 100;
        display: block;
    }

    .drop-options {
        z-index: 200;
        max-height: 200px;
    }

    .drop-display {
        z-index: 200;
        border-color: #465;
    }
}

.drop .drop-display .item i {
    position: absolute;
    right: 5px;
    top: 8px;
    width: 12px;
    height: 12px;
    overflow: hidden;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-size: 0px;
    line-height: 13px;
}