.switch {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  /*margin-left: auto;*/


    .current {
        text-transform: uppercase;
        height: 28px;
        position: relative;
        z-index: 1;
        font-size: 1rem;
        text-align: center;
        line-height: 28px;
        display: flex;
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.2s ease-out;
        border-radius: 3px;
        padding: 0 0.2em 0 0.7em;
        color: #fff;

        span {
            display: inline-block;
            line-height: 1;
            padding: 0.4em 0.2em 0 0;
        }

        .arrow {
            display: inline-block;
            width: 20px;
            height: 20px;
        }

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
    }


    .options {
        position: absolute;
        right: 0;
        top: 0.6em;
        z-index: 0;
        opacity: 0;
        transition: all 0.6s ease-out;
        display: none;
        overflow: hidden;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

        .switch.show-options & {
            display: block;
            z-index: 999999;
        }

        .switch.anim-options & {
            opacity: 1;
        }

        .switch.show-shadow & {
            box-shadow: 0 2px 12px -4px rgba(0, 0, 0);
            background-color: #fff;
        }
        }

        .options-list {
        color: #fff;
        margin: 0;
        padding: 0px 0.4rem 0px 0.4rem;
        position: relative;
        z-index: 5;

        li {
            list-style: none;
            padding: 0;
            margin: 0;
            padding: 5px 15px 5px 15px;
            border-bottom: 1px solid #e1e4e6;
            transform: translateX(10px);
            transition: all 0.24s ease-out;
            transition-delay: 0.1s;
            opacity: 0;
            font-size: 14px;
            line-height: 1.3;
            white-space: nowrap;
            color:#20345e;

            &:last-child {
            border-bottom: none;
            }

            &:nth-child(1) {
            transition-delay: 0.1s;
            }

            &:nth-child(2) {
            transition-delay: 0.15s;
            }

            &:nth-child(3) {
            transition-delay: 0.2s;
            }

            &:nth-child(4) {
            transition-delay: 0.25s;
            }

            &:nth-child(5) {
            transition-delay: 0.3s;
            }

            &.selected {
            color: #3498db;
            }

            .switch.anim-options & {
            transform: translateX(0);
            opacity: 1;
            }
        }
    }

    #trans-circle {

        width: 80px;
        height: 80px;
        position: absolute;
        top: -80px;
        right: -80px;
        padding: 0;
        margin: 0;
        border: none;
        z-index: 1;
        transition: all 0.4s ease-out;
        transform: scale(0.5);
        overflow: hidden;

        svg {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .switch.anim-options #trans-circle {
        transform: scale(9);
    }
}