.stroke-white {
    stroke: #fefefe;
}

.fill-white {
    fill: #fefefe;
}

.color-white {
    color: #fefefe;
}

.bg-white {
    background-color: #fefefe;
}

.stroke-yapikredi {
    stroke-dasharray: 0 628.32;
    stroke-dashoffset: 498;
    stroke: #E65100;
    transition-delay: 25ms;
}

.fill-yapikredi {
    fill: #E65100;
}

.color-yapikredi {
    color: #E65100;
}

.bg-yapikredi {
    background-color: #263238;
}

.stroke-halkbankasi {
    stroke: #EF6C00;
}

.fill-halkbankasi {
    fill: #EF6C00;
}

.color-halkbankasi {
    color: #EF6C00;
}

.bg-halkbankasi {
    background-color: #37474F;
}

.stroke-sekerbank {
    stroke: #F57C00;
}

.fill-sekerbank {
    fill: #F57C00;
}

.color-sekerbank {
    color: #F57C00;
}

.bg-sekerbank {
    background-color: #455A64;
}

.stroke-denizbank {
    stroke: #FB8C00;
}

.fill-denizbank {
    fill: #FB8C00;
}

.color-denizbank {
    color: #FB8C00;
}

.bg-denizbank {
    background-color: #546E7A;
}

.stroke-vakifbank {
    stroke: #FF9800;
}

.fill-vakifbank {
    fill: #FF9800;
}

.color-vakifbank {
    color: #FF9800;
}

.bg-vakifbank {
    background-color: #607D8B;
}

.stroke-ziraatbank {
    stroke: #FFA726;
}

.fill-ziraatbank {
    fill: #FFA726;
}

.color-ziraatbank {
    color: #FFA726;
}

.bg-ziraatbank {
    background-color: #78909C;
}

.stroke-isbank {
    stroke: #FFB74D;
}

.fill-isbank {
    fill: #FFB74D;
}

.color-isbank {
    color: #FFB74D;
}

.bg-isbank {
    background-color: #90A4AE;
}

.stroke-garantibank {
    stroke: #FFCC80;
}

.fill-garantibank {
    fill: #FFCC80;
}

.color-garantibank {
    color: #FFCC80;
}

.bg-garantibank {
    background-color: #B0BEC5;
}

.stroke-akbank {
    stroke: #FFE0B2;
}

.fill-akbank {
    fill: #FFE0B2;
}

.color-akbank {
    color: #FFE0B2;
}

.bg-akbank {
    background-color: #c7cdd0;
}


.flex-pos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}

.flex-pos--row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.hidden {
    text-indent: -900em;
    position: absolute;
    overflow: hidden;
    height: 0;
}

.shadow:before {
    content: '';
    width: 80%;
    height: 100%;
    display: inline-block;
    position: absolute;
    z-index: 1;
    left: 10%;
    top: 0;
    background-color: black;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    box-shadow: 0 2em 2em 1em rgba(0, 0, 0, 0.2), 0 2em 4em 1em rgba(0, 0, 0, 0.2), 0 2em 4em 0.5em rgba(0, 0, 0, 0.2), 0 2em 12em 3em rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

.progress-bar {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    background-image: -webkit-linear-gradient(left, #ffffff, #ffffff), -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(90deg, #ffffff, #ffffff), linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    background-size: 0% 100%, 100% 100%;
    background-position: left top, left top;
    background-repeat: no-repeat;
    -webkit-transition: background 1.4s ease-in-out;
    transition: background 1.4s ease-in-out;
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

    .progress-bar[aria-valuenow='9'] {
        background-size: 9.09% 100%, 100% 100%;
    }

    .progress-bar[aria-valuenow='18'] {
        background-size: 18.18% 100%, 100% 100%;
    }

    .progress-bar[aria-valuenow='100'] {
        background-size: 100% 100%, 100% 100%;
    }

.goldenbox {
    width: 51.5em;
    height: 25.48424em;
    -webkit-perspective: 80em;
    perspective: 80em;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

    .goldenbox .golden-blueprint {
        background-repeat: no-repeat;
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 1.95em, rgba(74, 74, 74, 0.25) 2em), -webkit-linear-gradient(left, rgba(74, 74, 74, 0.05) 0%, rgba(74, 74, 74, 0.05) 11.75em, rgba(0, 0, 0, 0) 11.75em), -webkit-linear-gradient(left, rgba(74, 74, 74, 0.05) 0%, rgba(74, 74, 74, 0.05) 11.75em, rgba(0, 0, 0, 0) 11.75em), -webkit-linear-gradient(rgba(0, 0, 0, 0) 5.83em, rgba(74, 74, 74, 0.25) 5.88em), -webkit-linear-gradient(rgba(0, 0, 0, 0) 9.83em, rgba(74, 74, 74, 0.25) 9.88em), -webkit-linear-gradient(rgba(0, 0, 0, 0) 13.45em, rgba(74, 74, 74, 0.25) 13.5em), -webkit-linear-gradient(rgba(0, 0, 0, 0) 17.5em, rgba(74, 74, 74, 0.25) 17.6em), -webkit-linear-gradient(rgba(0, 0, 0, 0) 21.05em, rgba(74, 74, 74, 0.25) 21.15em), -webkit-linear-gradient(rgba(74, 74, 74, 0.25) 0%, rgba(0, 0, 0, 0) 0.05em), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.95em, rgba(74, 74, 74, 0.25) 2em), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 5.8em, rgba(74, 74, 74, 0.25) 5.9em), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 9.88em, rgba(74, 74, 74, 0.25) 9.95em), -webkit-linear-gradient(left, rgba(74, 74, 74, 0.25) 0%, rgba(0, 0, 0, 0) 0.05em);
        background-image: linear-gradient(rgba(0, 0, 0, 0) 1.95em, rgba(74, 74, 74, 0.25) 2em), linear-gradient(90deg, rgba(74, 74, 74, 0.05) 0%, rgba(74, 74, 74, 0.05) 11.75em, rgba(0, 0, 0, 0) 11.75em), linear-gradient(90deg, rgba(74, 74, 74, 0.05) 0%, rgba(74, 74, 74, 0.05) 11.75em, rgba(0, 0, 0, 0) 11.75em), linear-gradient(rgba(0, 0, 0, 0) 5.83em, rgba(74, 74, 74, 0.25) 5.88em), linear-gradient(rgba(0, 0, 0, 0) 9.83em, rgba(74, 74, 74, 0.25) 9.88em), linear-gradient(rgba(0, 0, 0, 0) 13.45em, rgba(74, 74, 74, 0.25) 13.5em), linear-gradient(rgba(0, 0, 0, 0) 17.5em, rgba(74, 74, 74, 0.25) 17.6em), linear-gradient(rgba(0, 0, 0, 0) 21.05em, rgba(74, 74, 74, 0.25) 21.15em), linear-gradient(rgba(74, 74, 74, 0.25) 0%, rgba(0, 0, 0, 0) 0.05em), linear-gradient(90deg, rgba(0, 0, 0, 0) 1.95em, rgba(74, 74, 74, 0.25) 2em), linear-gradient(90deg, rgba(0, 0, 0, 0) 5.8em, rgba(74, 74, 74, 0.25) 5.9em), linear-gradient(90deg, rgba(0, 0, 0, 0) 9.88em, rgba(74, 74, 74, 0.25) 9.95em), linear-gradient(90deg, rgba(74, 74, 74, 0.25) 0%, rgba(0, 0, 0, 0) 0.05em);
        background-size: 100% 2em, 100% 3.875em, 100% 11.3em, 100% 5.88em, 100% 9.88em, 100% 13.5em, 100% 17.6em, 100% 21.15em, 100% 2em, 2em 100%, 5.9em 100%, 9.95em 100%, 2em 100%;
        background-position: top center, 2em 2em, 2em 9.85em, top center, top center, top center, top center, top center, bottom center, center left, center left, center left, center right;
    }

.goldenbox__card {
    min-height: 25em;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    box-sizing: border-box;
    width: 25.75em;
    height: 100%;
    padding: 4em;
    -webkit-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    -webkit-perspective: 80em;
    perspective: 80em;
    -webkit-perspective-origin: 200% 200%;
    perspective-origin: 200% 200%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

    .goldenbox__card:nth-child(1) {
        border-radius: 2px 0 0 2px;
    }

    .goldenbox__card:nth-child(2) {
        position: absolute;
        z-index: 1;
        padding: 0;
        left: 25.75em;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        background-color: #fefefe;
        border-radius: 0 3px 3px 0;
    }

.goldenbox__carrousel {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.goldenbox__carrousel__close {
    position: absolute;
    z-index: 2;
    top: 1em;
    right: 1em;
    width: 2em;
    height: 2em;
    line-height: 1.8em;
    color: white;
}

    .goldenbox__carrousel__close svg {
        -webkit-transition: all 0.35s cubic-bezier(0.51, -0.3, 0.51, 1.32);
        transition: all 0.35s cubic-bezier(0.51, -0.3, 0.51, 1.32);
        stroke: #fefefe;
    }

    .goldenbox__carrousel__close:hover svg {
        cursor: pointer;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        stroke: rgba(0, 0, 0, 0.15);
    }

.goldenbox__carrousel__container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 900%;
    height: 100%;
    -webkit-transition: all 0.7s cubic-bezier(0.51, -0.3, 0.51, 1.32);
    transition: all 0.7s cubic-bezier(0.51, -0.3, 0.51, 1.32);
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.goldenbox__carrousel__container--item {
    height: 100%;
    width: 16.66667%;
    box-sizing: border-box;
    padding: 2em;
    border-radius: 0 2px 2px 0;
}

.goldenbox__carrousel__radio, .goldenbox__carrousel__check {
    display: none;
}

.goldenbox__carrousel__radio {
    display: none;
}

    .goldenbox__carrousel__radio:checked:nth-child(1) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(2) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-11.1%);
        transform: translateX(-11.1%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(3) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-22.2%);
        transform: translateX(-22.2%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(4) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-33.4%);
        transform: translateX(-33.4%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(5) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-44.5%);
        transform: translateX(-44.5%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(6) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-55.6%);
        transform: translateX(-55.6%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(7) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-66.7%);
        transform: translateX(-66.7%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(8) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-77.8%);
        transform: translateX(-77.8%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(9) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-88.9%);
        transform: translateX(-88.9%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:nth-child(10) ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .goldenbox__carrousel__radio:checked:last-of-type ~ .goldenbox .goldenbox__card:nth-child(2) {
        box-shadow: inset 0 0 0 8em rgba(18, 35, 56, 0.6);
    }

.goldenbox__carrousel__check:checked ~ .goldenbox {
    width: 25.75em;
}

    .goldenbox__carrousel__check:checked ~ .goldenbox .goldenbox__card:nth-child(1) {
        border-radius: 2px;
    }

    .goldenbox__carrousel__check:checked ~ .goldenbox .goldenbox__card:nth-child(2) {
        border-radius: 0 2px 2px 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

        .goldenbox__carrousel__check:checked ~ .goldenbox .goldenbox__card:nth-child(2):after {
            left: 0;
            opacity: 0;
        }

        .goldenbox__carrousel__check:checked ~ .goldenbox .goldenbox__card:nth-child(2) .goldenbox__carrousel .goldenbox__carrousel__container .goldenbox__carrousel__container--item .goldenbox__content .goldenbox__content__list .goldenbox__content__list__item .progress-bar[aria-valuenow] {
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
            background-size: 0 100%, 100% 100%;
        }

    .goldenbox__carrousel__check:checked ~ .goldenbox .goldenbox__card.shadow:after {
        width: 100%;
        right: 0;
    }

.goldenbox__header {
    height: 3.875em;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-bottom: 2em;
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
    transition: -webkit-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.goldenbox__header--spacer {
    border-bottom: 1px dashed #fefefe;
}

.goldenbox__header--title {
    line-height: 1.4em;
    text-transform: uppercase;
    font-family: 'ProximaNovaT-Thin', 'Helvetica', 'Arial', sans-serif;
    font-size: 20px;
    margin-bottom: .2em;
    font-weight: 100;
    letter-spacing: -0.02em;
}

    .goldenbox__header--title em {
        display: block;
        font-size: 1.143em;
    }

.goldenbox__content__list {
    height: 11.12em;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    color: #fefefe;
}

.goldenbox__content__list__item {
    height: 5.56em;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 15em;
    flex-basis: 15em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
}

    .goldenbox__content__list__item .value {
        text-transform: uppercase;
        font-family: 'ProximaNovaT-Thin', 'Helvetica', 'Arial', sans-serif;
        font-size: 1em;
        margin-bottom: .2em;
        font-weight: 100;
        letter-spacing: -0.02em;
    }

    .goldenbox__content__list__item .subject {
        font-size: 2.7em;
        font-weight: 100;
        text-transform: capitalize;
        color: #fff;
        margin-top: 6px;
    }

        .goldenbox__content__list__item .subject svg {
            display: inline-block;
            float: left;
            margin: 4px 15px 0 0;
        }

        .goldenbox__content__list__item .subject p {
            display: inline-block;
            float: left;
            width: 80%;
        }



    .goldenbox__content__list__item:nth-child(1), .goldenbox__content__list__item:nth-child(2) {
        margin-bottom: 4em;
    }

        .goldenbox__content__list__item:nth-child(1) .progress-bar {
            -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
        }

        .goldenbox__content__list__item:nth-child(2) .progress-bar {
            -webkit-transition-delay: 1.4s;
            transition-delay: 1.4s;
        }

    .goldenbox__content__list__item:nth-child(3) .progress-bar {
        -webkit-transition-delay: 2.1s;
        transition-delay: 2.1s;
    }

    .goldenbox__content__list__item:nth-child(4) .progress-bar {
        -webkit-transition-delay: 2.8s;
        transition-delay: 2.8s;
    }

.svg-chart {
    font-size: 10px;
    position: relative;
    margin: 120px;
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
    transition: -webkit-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.svg-chart_header {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4em;
}

.svg-chart_info {
    pointer-events: none;
    width: 24em;
    height: 24em;
    z-index: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -51%);
    transform: translate(-50%, -51%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    border-radius: 50%;
    background-color: #fefefe;
    box-shadow: 0 0 0 1px #fefefe, 0 0 1em 0 rgba(18, 35, 56, 0.2);
}

.svg-chart_info_marker {
    width: 1.6em;
    height: 100%;
    display: inline-block;
    box-sizing: content-box;
    position: relative;
    z-index: 12;
    pointer-events: none;
    padding: 2.8em 0;
    margin: -2.8em auto;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 70%);
    background-image: radial-gradient(rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0) 70%);
    background-size: 100% 1.6em;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-transition: all 0.7s cubic-bezier(0.51, -0.3, 0.51, 1.32);
    transition: all 0.7s cubic-bezier(0.51, -0.3, 0.51, 1.32);
}

    .svg-chart_info_marker[data-active='yapikredi'] {
        background-image: -webkit-radial-gradient(#263238 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#263238 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='halkbankasi'] {
        background-image: -webkit-radial-gradient(#37474F 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#37474F 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='sekerbank'] {
        background-image: -webkit-radial-gradient(#455A64 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#455A64 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='denizbank'] {
        background-image: -webkit-radial-gradient(#546E7A 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#546E7A 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='vakifbank'] {
        background-image: -webkit-radial-gradient(#607D8B 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#607D8B 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='ziraatbank'] {
        background-image: -webkit-radial-gradient(#78909C 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#78909C 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='isbank'] {
        background-image: -webkit-radial-gradient(#90A4AE 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#90A4AE 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='garantibank'] {
        background-image: -webkit-radial-gradient(#B0BEC5 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#B0BEC5 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

    .svg-chart_info_marker[data-active='akbank'] {
        background-image: -webkit-radial-gradient(#C7CDD0 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
        background-image: radial-gradient(#c7cdd0 38%, #ffffff 45%, #ffffff 64%, rgba(0, 0, 0, 0) 70%);
    }

.svg-chart_info_icon {
    width: 6.4em;
    height: 6.4em;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-70%, -50%);
    transform: translate(-70%, -50%);
}

    .svg-chart_info_icon svg {
        width: 140%;
    }

.svg-chart_info_title {
    font-size: 1.2em;
    height: 2.5em;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}

.svg-chart .svg-chart_pie {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 1;
}


    .svg-chart .svg-chart_pie > circle:hover {
        cursor: pointer;
    }


    .svg-chart .svg-chart_pie > circle[aria-valuenow="9"] {
        stroke-dashoffset: 46em;
    }

    .svg-chart .svg-chart_pie > circle[aria-valuenow="18"] {
        stroke-dashoffset: 41.82em;
    }

.credits {
    padding-top: 5em;
}

    .credits + p {
        padding-top: .5em;
    }

[class^="pie"] {
    stroke-width: 48;
    fill: none;
    transition: all ease 450ms;
}

.pie-1 {
    stroke-dasharray: 115 300;
    stroke: #263238;
    transition-delay: 25ms;
}

.pie-2 {
    stroke-dasharray: 115 415;
    stroke: #37474F;
    transition-delay: 50ms;
}

.pie-3 {
    stroke-dasharray: 57 630;
    stroke: #455A64;
    transition-delay: 75ms;
}

.pie-4 {
    stroke-dasharray: 57 687;
    stroke: #546E7A;
    transition-delay: 100ms;
}

.pie-5 {
    stroke-dasharray: 57 743;
    stroke: #607D8B;
    transition-delay: 125ms;
}

.pie-6 {
    stroke-dasharray: 57 800;
    stroke: #78909C;
    transition-delay: 150ms;
}

.pie-7 {
    stroke-dasharray: 57 857;
    stroke: #90A4AE;
    transition-delay: 200ms;
}

.pie-8 {
    stroke-dasharray: 57 914;
    stroke: #B0BEC5;
    transition-delay: 250ms;
}

.pie-9 {
    stroke-dasharray: 60,968;
    stroke: #c7cdd0;
    transition-delay: 250ms;
}


[class^="line-"] {
    transform: scale(1);
}


#wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-54%);
    -webkit-transform: translate(-50%,-53.5%);
    width: 500px;
    height: 450px;
}



@media all and (max-width: 480px) {

    .flex-pos {
        background: inherit !important;
        box-shadow: none;

    }
    #goldenbox {
        display:block
    }
    #goldenbox article {
        overflow:hidden
    }
    .goldenbox {
        margin-bottom: 310px;
        width: inherit !important;
    }

    .goldenbox__card:nth-child(2) {
        top: 357px;
        bottom: 390px;
        left: inherit !important
    }
}