.svg-wrapper{
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: middle;
    padding-bottom: 80%;
}

.svg-wrapper svg{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

svg .circle{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 10s linear infinite;
}

g .circle {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    stroke-linecap: butt;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
g:hover .circle {
    fill: rgba(	51,122,183,.3);
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 10;
    cursor: pointer;
}

.svg-text-center {
    fill: #bbbbbb;
    font-size: 20px;
}

.svgText tspan:first-child{
    fill: #337ab7;
    font-weight: bold;
    border-bottom: 1px solid #bbbbbb;
}

.svgText tspan a{
    fill: #337ab7;
    font-weight: bold;
}

.svgText:hover a text {
    fill: #337ab7;
}

@keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.bank-portrait .flex-row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
}

.depot-special-title{
    padding: 1em 15px;
    font-weight: 600;
    margin: .5em 0;
}

.dab-fonts{
    color: #8d8b70;
    font-weight: 600;
}

.comdirect-fonts{
    color: #999775;
    font-weight: 600;
}

.ebase-fonts{
    color: #978e73;
    font-weight: 600;
}

.hellobank-fonts{
    color: #8b8694;
    font-weight: 600;
}

.filfondsbank-fonts{
    color: #8a9094;
    font-weight: 600;
}

.smartbroker_plus-fonts{
    color: #78908b;
    font-weight: 600;
}

.edelmetall-fonts{
    color: #827966;
    font-weight: 600;
}

.edelmetall-light-bg{
    background: #eae0d0;
}

.smartbroker_plus-fonts{
    margin-right: -15px;
    padding: 2em 1em;
    background: #003737;
    min-height: 100%;
}

.smartbroker_plus-fonts{
    background: rgb(0,0,0);
    color: #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.mountain-40{
    background: #B3E5FC;
}
.mountain-60{
    background: #C5E1A5;
}
.mountain-80{
    background: #FFCC80;
}
.mountain-100{
    background: #F48FB1;
}

.btn-mountainfolio{
    display: block;
    width: 100%;
    background: rgba(0,0,0,.3);
    color: #FFF;
    font-weight: 600;
}


@media (min-device-width : 320px){

    .depot_header p{
        font-size: .9em;
        font-weight: 600;
    }

    .title-block .title{
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    .title-block .title,
    .title-block .title span {
        color: #FFFFFF;
        font-size: 1.5em;
        display: block;
        font-weight: 700;
    }

    form .form-group label{
        font-size: .9em;
    }

    .filter-slider{

    }

    .filter-slider input.form-control[type="range"] {
        -webkit-appearance: none;
        overflow: visible;
        height: 15px;
        padding: 0;
        border: none;
        background: transparent;
        transition: color .2s;
    }

    .filter-slider input[type="range"]::-ms-track {
        background: #337ab7;
        color: #337ab7;
    }

    .filter-slider input.form-control[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        position: relative;
        top: 0;
        z-index: 1;
        width: 14px;
        height: 14px;
        cursor: pointer;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;

    }

    .filter-slider input.form-control[type="range"]::ms-thumb {
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
    }

    .filter-slider input.form-control[type="range"]::-moz-range-thumb {
        -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
        box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);

        -webkit-transition: -webkit-box-shadow 0s ease-in-out;
        -khtml-transition:  -khtml-box-shadow 0s ease-in-out;
        -moz-transition:    -moz-box-shadow 0s ease-in-out;
        -o-transition:      -o-box-shadow 0s ease-in-out;
        transition:         box-shadow 0s ease-in-out;

        border-radius: 0;
        width: 6px;
        height: 15px;
        box-shadow: inset rgba(255,255,255,0.3) -5px -24px 6px,
        inset rgba(255,255,255,0.3) 0px 24px 6px,
        inset rgba(255,255,255,0.3) 0px 1px 1px,
        inset rgba(255,255,255,0.2) 0px -1px 1px,
        rgba(0,0,0,0.2) 0px 2px 6px;
        border: rgba(255,255,255,0.4) 1px solid;

        background-color: #727577;
        cursor: pointer
    }
    .filter-slider input.form-control[type="range"]:focus {
        outline:none;
    }

    .filter-slider label {
        user-select: none;
    }

    .filter-slider .form-control.bar {
        width: 100%;
        height: 5px;
        position: relative;
        background: #1d2e38;
        background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
        background: -webkit-linear-gradient(left, #828282 0%,#676767 50%,#6b6a6a 100%);
        background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
        background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
        background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        z-index: 0;
    }

    .filter-slider .slider-control{
        background: #FFFFFF;
        padding: .2em;
        border: none;
    }

    .filter-slider .slider-control .slider-input{
        margin: .2em;
        display: block;
        font-size: .8em;
    }

    .filter-slider .slider-control .slider-input label{
        display: block;
        text-align: center;
        color: #337ab7;
        min-height: 70px;
    }

    .filter-slider .slider-control .slider-input output{
        display: block;
        color: #a37e2b;
    }

    .filter-slider .slider-control .slider-input .bar{
        margin: 0;
        background: transparent;
        border: none;
    }

    .filter-slider .slider-control .fd-result{
        display: block;
        text-align: center;
        color: #337ab7;
        font-weight: bold;
        font-style: italic;
    }

    .filter-slider .slider-control .fd-result output{
        color: #a37e2b;
    }

    #gebuehren_uebersicht table td:first-child{
        color: #337ab7;
    }

    #gebuehren_uebersicht table thead th,
    #gebuehren_uebersicht table tbody td{
        font-size: .8em;
        text-align: right;
        font-style: italic;
    }

    #gebuehren_uebersicht table thead th,
    #gebuehren_uebersicht table tfoot td{
        font-weight: 700;
        text-align: right;
    }

}

@media (min-device-width : 768px){

    #gebuehren_uebersicht table td{
        font-size: 1em;
        font-weight: 700;
    }

}

@media (min-device-width : 1024px){

    .title-block .title{
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    .title-block .title,
    .title-block .title span {
        color: #FFFFFF;
        font-size: 2em;
        display: block;
        font-weight: 700;
    }

}

a.pdf-link{
    font-style: italic;
    font-weight: 600;
    font-size: .9em;
}

a.pdf-link:before{
    font-family: FontAwesome;
    content: '\f1c1';
    position: relative;
    width: 20px;
    padding: 0 .5em;
    color: #c00;
}

.dl-horizontal-downloads dt{
    background: #f5f5f5;
    padding: .5em;
}

.dl-horizontal-downloads dd{
    padding: .5em 0;
}

span.download-size{
    float: right;
    padding: 0 .5em;
}

#depot-offer-banks .bank-card{
    background: #ffffff url('../images/groovepaper.png') repeat;
    border: 4px solid #FFFFFF;
}

#depot-offer-banks .bank-card .image-header{
    padding: 1em 0;
}

#depot-offer-banks .bank-card .image-header img.img-thumbnail{
    height: 70px;
    width: 100%;
}

#depot-offer-banks .bank-card .caption h2{
    background: transparent;
    font-weight: 700;
    color: #337ab7;
    text-align: center;
    font-size: 1em;
}

#depot-offer-banks .bank-card ul{
    list-style-type: none;
    min-height: 200px;

}

#depot-offer-banks .bank-card ul li{
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #FFFFFF;
    font-weight: 600;
    text-align: -webkit-center;
}

#mein-passendes-depot{
    position: relative;
}

#junior-depots{
    position: relative;
    min-height: 300px;
    background: rgba(255,255,255,.75);
    margin-top: 2em;
    padding-bottom: 2em;
}

#junior-depots p{
    text-align: justify;
    font-weight: 700;
}

#junior-depots .bg-fluid{
    position: absolute;
    background: url('../images/depots/junior-depots.jpg') left no-repeat;
    top: 0;
    bottom: 0;
    left: -100%;
    right: -100%;
    z-index: -1;
}

.juniordepot-card{
    background: #ffffff url('../images/groovepaper.png') repeat;
    border: 1px solid #FFFFFF;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.juniordepot-card:hover{
    cursor: pointer;
    border: 1px solid #a37e2b;
}

.juniordepot-card .image-header{
    padding: 1em;
}

.juniordepot-card img.img-thumbnail{
    height: 50px;
    width: 100%;
}

.juniordepot-card h2{
    color: #3f3f3f;
    text-align: center;
    font-size: 1em;
}

@media (min-device-width: 320px) {

    #fonds-links-box .bg-fluid{
        position: absolute;
        background: url('../images/titelbilder/topseller.jpg') left no-repeat;
        background-size: cover;
        top: 0;
        bottom: 0;
        left: -100%;
        right: -100%;
        z-index: -1;
        /* Steuerung */
        opacity: 0;
        display: none;
    }

}

@media (min-device-width: 768px){

}

@media (min-device-width: 1024px) {
    #fonds-links-box .bg-fluid{
        opacity: 1;
        display: block;
    }
}




#fonds-links-box .fonds-links{
    position: relative;
    min-height: 300px;
    background: rgba(255,255,255,.75);
    padding: 2em 0;
}

.fonds-card{
    background: #ffffff url('../images/groovepaper.png') repeat;
    border: 1px solid #FFFFFF;
    margin: 0 -15px;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    min-height: 280px;
}

.fonds-card:hover{
    cursor: pointer;
    border: 1px solid #a37e2b;
}

.fonds-card .image-header{
    padding: 1em;
}

.fonds-card img.img-thumbnail{
    width: 100%;
}

.fonds-card h2{
    color: #337ab7;
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    border-bottom: 1px solid #f9f9f9;
    min-height: 30px;
    margin: 0.5em 0;
}

.fonds-card p{
    color: #818181;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

#online-depoteroeffnung ul.price{
    min-height: 300px;
}

#online-depoteroeffnung ul.price li{
    min-height: 55px;
}

#depot-wertpapierkredit .wertpapierkredit .card,
#online-depoteroeffnung .card
{
    background: #ffffff url('../images/groovepaper.png') repeat;
}

#depot-wertpapierkredit .wertpapierkredit .card,
#online-depoteroeffnung .card{
    border: 1px solid #FFFFFF;
    transition: 0.25s all;
    padding: 0;
}

#depot-wertpapierkredit .wertpapierkredit .card .price .intro-logo small{
    font-size: 3em;
}

#depot-wertpapierkredit .wertpapierkredit .card .price,
#online-depoteroeffnung .card .price{
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#depot-wertpapierkredit .wertpapierkredit .card .price .header,
#depot-wertpapierkredit .wertpapierkredit .card .price .footer,
#online-depoteroeffnung .card .header,
#online-depoteroeffnung .card .footer{
    text-align: center;
    padding: 1em 0;
}

#depot-wertpapierkredit .wertpapierkredit .card .price .header img,
#online-depoteroeffnung .card .header img{
    position: absolute;
    top: .5em;
    right: .5em;
    background: transparent;
}

#depot-wertpapierkredit .wertpapierkredit .cards .price li,
#online-depoteroeffnung .card .price li{
    border-top: 1px solid #ececec;
}

#depot-wertpapierkredit .wertpapierkredit .card .price li:first-child,
#online-depoteroeffnung .card .price li:first-child{
    border-top: none;
}

#depot-wertpapierkredit .wertpapierkredit .card .price li small,
#depot-wertpapierkredit .wertpapierkredit .card .price li span,
#depot-wertpapierkredit .wertpapierkredit .card .price li label,
#online-depoteroeffnung .card .price li small,
#online-depoteroeffnung .card .price li span,
#online-depoteroeffnung .card .price li label
{
    display: block;
    text-align: center;
    padding: 0.5em 0;
    margin: 0;
}

#depot-wertpapierkredit .wertpapierkredit .card .price li.footer,
#online-depoteroeffnung .card .price li.footer{
    position: absolute;
    bottom: 0;
    left: 1em;
    right: 1em;
}

.depotvergleich-results-wrapper .bank-cards .card-header h4{
    font-size: 1.2em;
    font-weight: 700;
}
.depotvergleich-results-wrapper .bank-cards .card-header img{
    display: block;
    margin: 0 auto;
    padding: 0.5em 0;
    border-bottom: 1px solid #FFFFFF;
}

.depotvergleich-results-wrapper .bank-cards .price li{
    overflow: hidden;
}
.depotvergleich-results-wrapper .bank-cards .price li small{
    padding: 0.5em 0 1.5em 0;
}

.depotvergleich-results-wrapper .bank-cards .price li span{
    float: left;
    position: relative;
    font-weight: 700;
}

.depotvergleich-results-wrapper .bank-cards .price.col-1 li span{
    width: 100%;
}

.depotvergleich-results-wrapper .bank-cards .price.col-2 li span{
    width: 50%;
}

.depotvergleich-results-wrapper .bank-cards .price.col-3 li span{
    width: 33.33%;
}

.depotvergleich-results-wrapper .bank-cards .price.col-1 li span,
.depotvergleich-results-wrapper .bank-cards .price.col-2 li span:nth-child(3),
.depotvergleich-results-wrapper .bank-cards .price.col-3 li span:nth-child(3),
.depotvergleich-results-wrapper .bank-cards .price.col-3 li span:nth-child(4) {
    background: rgba(145,199,139,.1);
    color: #48A43F;
}

.depotvergleich-results-wrapper .bank-cards .price li span:before{
    content: 'Bank';
    position: absolute;
    color: #3f3f3f;
    top: -14px;
    left: 0;
    right: 0;
    font-size: 10px;
    font-style: italic;
}

.depotvergleich-results-wrapper .bank-cards .price li > span.fd:before{
    content: 'über uns';
}
.depotvergleich-results-wrapper .bank-cards .price li span.smarttarif:before{
    content: 'Smart-Tarif';
}

.depotvergleich-results-wrapper .bank-cards .price li span.flatfeetarif:before{
    content: 'Flatfee-Tarif';
}

.depotvergleich-results-wrapper .bank-cards .price li.footer small{
    background: #3F3F3F;
    color: #FFFFFF;
}

.depotvergleich-results-wrapper .bank-cards .price.col-1 li.footer span,
.depotvergleich-results-wrapper .bank-cards .price.col-2 li.footer span:nth-child(3),
.depotvergleich-results-wrapper .bank-cards .price.col-3 li.footer span:nth-child(3),
.depotvergleich-results-wrapper .bank-cards .price.col-3 li.footer span:nth-child(4) {
    background: rgb(145,199,139);
    color: #ffffff;
}

/** ================================================================================================================ **/
/** ================================               DEPOTS             ============================================== **/
/** ================================================================================================================ **/

#depot .depot{
    display: flex;
}

.depotvergleich{
    margin: 0 -15px 1em -15px;
    display: flex;
}

.depotvergleich .panel-box,
.depot .panel-box{
    background: url('../images/groovepaper.png') repeat center center;
}

.depotvergleich .panel-box .title-image,
.depot .panel-box .title-image{
    background: url('../images/depots/depotvergleich.jpg') no-repeat center center;
    background-size: contain;
    max-width: 100%;
    padding: 1em 0;
}

.online-vermittlerwechsel{
    padding: 1em 0;
    margin: 0 -15px 1em -15px;
}

.online-vermittlerwechsel{
    background: url('../images/depots/depoteroeffnung/rawpixel-com-558596-unsplash.jpg') no-repeat center center;
    background-size: cover;
}

.online-vermittlerwechsel .panel-box .card__svg{
    opacity: 1;
}

.online-vermittlerwechsel .panel--styled{
    margin: 0 auto;
}

.online-vermittlerwechsel .panel-box .panel-body{
    background: rgba(255,255,255,.95);
}

.online-vermittlerwechsel .panel--styled .panel-content{
    min-height: 170px;
}

#download-section .bank-download-section{
    overflow: hidden;
    padding: 1em 0;
}

table.dataTable tbody tr.smartbroker_plus-light-bg,
.smartbroker_plus-light-bg{
    background: #c9f1e8;
}

table.dataTable tbody tr.comdirect-light-bg,
.comdirect-light-bg{
    background: #fffdc4;
}

table.dataTable tbody tr.fd-light-bg,
.fd-light-bg{
    background: #d9e7f1;
}

table.dataTable tbody tr.dabsmart-light-bg,
.dab-light-bg,
.dabsmart-light-bg{
    background: #ECE8BC;
}

table.dataTable tbody tr.dabflat-light-bg,
.dabflat-light-bg{
    background: #ECE8BC;
}

table.dataTable tbody tr.ebase-light-bg,
.ebase-light-bg{
    background: #fdedc1;
}

table.dataTable tbody tr.filfondsbank-light-bg,
.filfondsbank-light-bg{
    background: #E6F0F7;
}

table.dataTable tbody tr.hellobank-light-bg,
.hellobank-light-bg{
    background: #E8E0F8;
}

#download-section .bank-download-section h3{
    font-size: 1.3em;
    font-weight: 700;
}

.bank-downloads-wrapper img{
    vertical-align: middle;
}

.bank-downloads-wrapper dl dt{
    border-bottom: 1px dashed #F2F2F2;
    font-size: .8em;
}

.bank-downloads-wrapper dl dd{
    font-size: .85em;
    padding: 0.2em 0 0.5em 0;
}

.bank-downloads-wrapper .description p{
    text-align: left;
    display: block;
    font-weight: 700;
    font-style: italic;
}

.bank-downloads-wrapper .description p:before{
    font-family: FontAwesome;
    content: '\f0da';
    padding: 0 1em;
}

.modal-documents{
    z-index: 2000;
}

.modal-documents .modal-body{
    background: url('../images/groovepaper.png') repeat center center;
}

.modal-documents .modal-body img{
    margin: 1em 0;
}

.modal-documents dl dt{
    border-bottom: 1px dashed #F2F2F2;
    font-size: .8em;
}

.modal-documents dl dt,
.modal-documents dl dd{
    background: transparent;
    padding: 0.5em 0;
    margin: 0;
    font-size: .9em;
}

#bank-handelbarkeit td,
#bank-hundertaa td,
#bank-gebuehren td{
    font-size: .8em;
    font-weight: 600;
    font-style: italic;
    vertical-align: middle;
}

#bank-hundertaa span.label-success{
    display: block;
    padding: .5em 0;
}

#bank-hundertaa span.label-success a{
    font-size: 1em;
    font-weight: 600;
    color: #ffffff;
}

table td.price{
    text-align: right;
    color: #337AB7;
    font-weight: 700;
}

.btn-flatfeetarif{
    background-color: #5784B0; color:white
}
.btn-smarttarif{
    background-color: #76a9dc; color:white;
}

.lead-action{
    padding: 0.5em 0;
    border: solid #f5f5f5;
    border-width: 1px 0;
}

table#table-depotvergleich thead>tr>th{
    background: transparent;
    border: none;
}

table#table-depotvergleich tr td:first-child {
    color: #337ab7;
    font-weight: 700;
    border: solid #337ab7;
    border-width: 0 2px;
}

table#table-depotvergleich .dl-horizontal dt,
table#table-depotvergleich .dl-horizontal dd{
    background: transparent;
    padding: 0.5em 0;
    margin: 0;
    float: left;
    width: 50%;
    font-size: .9em;
}

table#table-depotvergleich .dl-horizontal dd{
    color: #337ab7;
}

@media (min-device-width : 320px){

    .bank-intro{
        position: relative;
        overflow: hidden;
        background: #ffffff url(../images/groovepaper.png) repeat;
    }

    .bank-intro .bank-title .page-title{
        font-size: 1em;
        line-height: 1.5em;
        color: #76a9dc;
        font-weight: 700;
    }

    .bank-intro .bank-title .page-title small{
        display: block;
        font-style: italic;
        color: #3F3F3F;
        line-height: 1.2em;
        padding: 1em;
    }

    .bank-intro .bank-title h2{
        font-size: .8em;
    }

    .bank-intro .bank-ribbon{
        position: relative;
        padding: 1em;
        background: rgba(163,126,43,1);
        z-index: 2;
        color: #FFFFFF;
        border: solid #FFFFFF;
        border-width: 0 0 0 2px;
    }

    .bank-intro .bank-ribbon.fd-special{
        background-color: #3f3f3f;
        background-image: -webkit-linear-gradient(top, #696969 0%,#3f3f3f 100%);
        background-image: -moz-linear-gradient(top, #696969 0%,#3f3f3f 100%);
        background-image: -o-linear-gradient(top, #696969 0%,#3f3f3f 100%);
        background-image: linear-gradient(top, #696969 0%,#3f3f3f 100%);
    }

    .bank-intro .bank-ribbon .ribbon .ribbon-image{
        text-align: center;
    }

    .bank-intro .bank-ribbon .ribbon .ribbon-image img{
        width: 80px;
        margin: 0 auto;
        padding: .5em 0;
        border-bottom: 1px solid #FFFFFF;
    }

    .bank-intro .bank-ribbon.fd-special .ribbon .ribbon-image img{
        width: 200px;
        margin: 0 auto;
        padding: .5em 0;
        border-bottom: 1px solid #FFFFFF;
    }

    .bank-intro .bank-ribbon .ribbon .ribbon-image span{
        font-size: .8em;
        display: block;
        text-align: center;
        font-weight: 600;
    }

    .bank-content{
        margin: 1em -15px;
    }

    .bank-description  p{
        text-align: center;
    }

    .bank-action .rectangle-list p:before{
        background: #FFFFFF;
        border: 1px solid #76a9dc;
        color: #76a9dc;
        left: 0;
    }

    .bank-description .bank-image img{
        height: 280px;
        display: block;
        width: 100%;
    }

    .ribbon .ribbon-list{
        position: relative;
        padding: 0;
        z-index: 1;
    }

    .ribbon .ribbon-list ul{
        list-style: none;
        text-align: center;
        float: right;
    }

    .ribbon .ribbon-list ul li{
        position: relative;
        background: rgba(163,126,43,.75);
        padding: 1em;
        color: #FFFFFF;
        border-bottom: 1px solid #a37e2b;
    }

    .ribbon .ribbon-list ul li::before{
        position: absolute;
        top: 0;
        left: -25px;
        content: '';
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 25px solid rgba(163,126,43,.75);
    }

    /* Bankenportraits - Button Section */

    .phone-badge{
        position: relative;
        text-align: center;
    }

    .lead-buttons .btn-group{
        display: block;
        width: 100%;
        float: none;
        clear: both;
    }

    .lead-buttons .btn.btn-primary,
    .lead-buttons .btn.btn-secondary{
        padding: 1em 0;
        margin: 0 0 1em 0;
        background: #336699;
        border: solid #76a9dc;
        border-width: 1px 0;
        color: #FFFFFF;
        font-weight: 700;
        -webkit-transition: background-position 2s cubic-bezier(0, 1, 0, 1), border-color 800ms, background-color 800ms;
        transition: background-position 2s cubic-bezier(0, 1, 0, 1), border-color 800ms, background-color 800ms;
        position: relative;
        background-attachment: fixed, scroll;
        background-size: 100vw 100vh, cover;
        background-position: center center, 0 0;
        background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.075) 10%, rgba(255, 255, 255, 0.075) 14%, rgba(255, 255, 255, 0.15) 14%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.075) 17%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.075) 40%, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.075) 60%, rgba(255, 255, 255, 0.075) 66%, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0.075) 70%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse farthest-corner, transparent, rgba(0, 0, 0, 0.2) 110%);
    }

    .lead-buttons .btn.btn-primary:hover{
        background-position: -100vw 0, 0 0;
    }

    .lead-buttons .btn.btn-primary:active{
        background-position: -75vw 0, 0 0;
    }

    .lead-buttons .btn.btn-secondary{
        font-size: small;
        text-align: center;
        font-weight: 400;
        border-left: 1px solid #FFFFFF;
        color: #FFFFFF;
    }

    .lead-buttons .btn.btn-secondary:hover{
        background-position: -100vw 0, 0 0;
    }

    .lead-buttons .btn.btn-secondary:active{
        background-position: -75vw 0, 0 0;
    }

    .bank-cards .card-header{
        padding: 0.2em 0;
    }

    .bank-cards .card-header .card-header-logo{
        background: transparent;
    }

    .bank-cards .card-header .card-header-title{
        position: relative;
        display: block;
        color: #fff;
        background: #3F3F3F;
        padding: 5px 10px;
    }

    .bank-offers .bank-cards ul.price{
        position: relative;
        list-style-type: none;
        margin: 0;
        padding: 0;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .bank-cards .price li small,
    .bank-offers .bank-cards .price li span{
        font-weight: 700;
    }

    .bank-cards .price li small,
    .bank-cards .price li span,
    .bank-cards .price li label {
        display: block;
        text-align: center;
        padding: 0.2em 0;
        margin: 0;
        font-weight: 600;
    }

    .bank-cards .price li small{
        background: rgba(255,255,255,.3);
        font-style: italic;
        color: #2e2e2e;
    }

    .bank-offers .bank-cards ul.price .footer small{
        color: #FFFFFF;
    }

    .bank-offers .bank-cards ul.price .footer{
        background: #2e2e2e;
        background: rgba(0,0,0,.3);
        color: #FFFFFF;
    }

    .bank-offers .bank-cards ul.price .footer .progress{
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;
        right: 0%;
    }


    .progress-bar-vertical {
        width: 20px;
        min-height: 100px;
        margin-right: 2.8em;
        float: right;
        display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
        display: -ms-flexbox;  /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
        display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
        align-items: flex-end;
        -webkit-align-items: flex-end; /* Safari 7.0+ */
    }

    .progress-bar-vertical .progress-bar {
        width: 100%;
        height: 0;
        -webkit-transition: height 0.6s ease;
        -o-transition: height 0.6s ease;
        transition: height 0.6s ease;
    }

    .bank-offers .bank-cards ul.price .footer .progress-bar{
        background-image: -webkit-linear-gradient(top,#76a9dc 0,#336699 100%);
        background-image: -o-linear-gradient(top,#76a9dc 0,#336699 100%);
        background-image: -webkit-gradient(linear,left top,left bottom,from(#76a9dc),to(#336699));
        background-image: linear-gradient(to bottom,#76a9dc 0,#336699 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76a9dc', endColorstr='#336699', GradientType=0);
        background-repeat: repeat-x;
    }
}

@media (min-device-width : 480px){

    .lead-buttons .phone-badge{
        text-align: center;
    }

}

@media (min-device-width : 768px){

    .bank-intro .bank-title .page-title{
        font-size: 1.2em;
        line-height: 1.5em;
        padding: .5em;
        color: #337ab7;
        font-weight: 700;
    }

    .bank-intro .bank-title .page-title small{
        display: block;
        font-weight: 600;
        line-height: 1.2em;
        font-style: italic;
        color: #3F3F3F;
        padding: 1em;
    }

    .bank-title h2{
        font-weight: 700;
        padding: 0;
        margin: 0;
    }

    .ribbon .ribbon-list{
        position: absolute;
    }

    .lead-buttons p{
        text-align: justify;
    }

    .lead-buttons .btn-group{
        display: table-cell;
        float: none;
    }

    .filter-slider .range-slider{
        overflow: hidden;
    }

    .filter-slider .slider-control .slider-input label{
        display: inline-block;
        min-height: 0;
    }

    .filter-slider .slider-control .slider-input output{
        display: inline-block;
    }

    .filter-slider .slider-control .fd-result{
        margin: 0;
        border: none;
    }

}

@media (min-device-width : 1024px){

    .bank-intro .bank-title .page-title{
        font-size: 1.8em;
    }

}

/* allgemein */
.sub-title{
    color: #337ab7;
    font-weight: 700;
}

.google-news-sub-title {
    display: block;
    color: #337ab7;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
    width: 100%;
    font-size: 0.7em !important;
    font-weight: 700;
}

.star-ribbon-wrapper{
    position: absolute;
    top: 2px;
    right: 0em;
    z-index: 10;
}

.star-ribbon {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 100px;
    height: 50px;
    position: relative;
    border: none;
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: #fff;
    -o-text-overflow: clip;
    text-overflow: clip;
    background: #337ab7;
    text-align: center;
}

.star-ribbon::before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: -20px;
    left: 0;
    border: 50px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 20px solid #337ab7;
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0,0,0,1);
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: none;
}

.star-ribbon::after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    bottom: -20px;
    left: 0;
    border: 50px solid rgba(0,0,0,0);
    border-top: 20px solid #337ab7;
    border-bottom: 0 solid;
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0,0,0,1);
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: none;
}

.star-ribbon span{
    display  : block;
    color    : #FFFFFF;
    font-size: 1.5em;
}

.depot .ribbon a{
    line-height: 2em;
    color: #ffffff;
}


/* ================================================ DOWNLOAD BUTTONS =================================================*/
/***  MANAGED DEPOTS**/

.managed-depot .cards .bank-cards{
    margin: 100px 0 0 0;
    border-left: 1px solid #f5f5f5;
}

.managed-depot .cards .bank-cards:first-child{
    border-left: none;
}

.managed-depot .star-ribbon-wrapper {
    position: absolute;
    right:50%;
    margin: -50px -50px 0 0;
}

.managed-depot .bank-cards .price li span{
    font-weight: 700;
    color: #337ab7;
}

.managed-depot .star-ribbon{
    background: #337ab7;
    height: 25px;
    position: relative;
    font-size: 1.3em;
}

.managed-depot .star-ribbon::before{
    border-bottom: 20px solid #337ab7;
}

.managed-depot .star-ribbon::after{
    border: 50px solid rgba(0,0,0,0);
    border-top: 20px solid #337ab7;
    border-bottom: 0 solid;
}


/* ================================================================================================================== */
#taurus .price-box{
    padding: 1em;
    border: 1px solid #ffffff;
}

#taurus .price-box .box-image img{
    display: block;
    margin-left: auto;
    margin-right: auto
}

#taurus .price-box .box-values dt{
    color: #a37e2b;
}

#taurus .price-box .box-values dt,
#taurus .price-box .box-values dd{
    text-align: center;
    padding: .5em 0;
    font-weight: 700;
}

/* ================================================================================================================== */

.opening-cards{
    background: #ffffff url('../images/groovepaper.png') repeat;
}

/* ============================================ FUNDAMENTAL CAPITAL ================================================== */

#fundamental-capital .lp-intro .page-title{
    font-size: 1.5em;
    text-align: left;
}

#fundamental-capital .lp-intro h2{
    font-size: 1.3em;
}

#fundamental-capital .lp-intro h3{
    font-size: 1em;
}

.headline-with-logo{
    overflow: hidden;
    padding: 1em 0;
}

.headline-with-logo a{
    float: left;
}

.headline-with-logo img{
    float: right;
}

.strategie-image img{
    padding: 1em;
    margin: 0 0 1em 0;
}

#fundamental-capital .benefit-box{
    min-height: 300px;
}

#fundamental-capital .benefit-box .thumbnail{
    border: none;
    box-shadow: none;
}

#fundamental-capital .benefit-box .thumbnail .caption{
    text-align: center;
}

#fundamental-capital .benefit-box .thumbnail .caption p{
    color: #3F3F3F;
}

#fundamental-capital .benefit-box img{
    padding: 1em 0;
    min-height: 100px;
}

#fundamental-capital .benefit-box p{

}

#partner-wrapper ul{
    padding: 0;
}

#partner-wrapper li{
    width: 20%;
}

#partner-wrapper img.img-partner{
    height: 70px;
}


.online-steps .step-content-height{
    min-height: 100%;
}

.online-steps .step.image-title .step-content{
    background: url('../images/depots/depoteroeffnung/rawpixel-com-558596-unsplash.jpg') no-repeat center center;
    display: block;

}

.online-steps h3{
    text-align: center;
    padding: 1em 0;
    margin: 0;
}

.online-steps .step-list li{
    position: relative;
    overflow: hidden;
    padding-left: 0;
    margin-bottom: 1px; /*hack */
    background-image: url('../images/groovepaper.png');
    border-bottom: 1px solid #FFFFFF;
}


.online-steps .step-list li p{
    padding-left: 3em;
    font-weight: 500;
}

.online-steps .step-list .step-count{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    font-size: 1.5em;
    color: #FFFFFF;
    background: #3F3F3F;
    padding: .5em;
}

#bet_neu header{
    flex-basis: 50px;
    background: transparent;
    border: none;
    padding: 1em;
}

#bet_neu header .title{
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

#bet_topseller_list .cat-info{
    padding: 1em;
    background: #ffffff url(../images/groovepaper.png) repeat;
    border: 2px solid #fff;
}

#bet_topseller_list .cat-info .caption .title{
    color: #FFFFFF;
}

#bet_topseller_list header.caption,
#bet_direkt_investment header.caption,
#bet_news header.caption
{
    padding: 1em;
}

#bet_topseller_list .description,
#bet_direkt_investment .description,
#bet_news .description{
    padding: 1em;
}

.field--items-container .field--item i{
    position: absolute;
    bottom: -22px;
    right: -10px;
    color: #76a9dc;
    font-size: 7em;
}

.field--items-container{
    margin: 0;
}

.field--items-container .field--item.flipcard-front,
.field--items-container .field--item.flipcard-back{
    padding: 0;
    background: #efefef;
    overflow: hidden;
}

.field--items-container .field--item.flipcard-front .bank-logo,
.field--items-container .field--item.flipcard-back .bank-logo{
    margin: 2em auto;
}

.field--items-container .field--item.flipcard-back .bank-logo{
    margin: 2em 30%;
}

.field--items-container .field--item.flipcard-front .bank-logo-title{
    text-align: center;
    font-size: 2em;
    padding: 0 10%;
    color: #76a9dc;
    text-shadow: 0px 2px 3px #ffffff;
}

.field--items-container .field--item.flipcard-back .list-group .list-group-item{
    color: #3F3F3F;
    font-style: italic;
    font-weight: 600;
    font-size: .9em;
    z-index: 10;
}

/* ======================================================= DIMENSIONAL ============================================== */
#dimensional .page-intro {
    border-bottom: solid #FFFFFF;
    border-top: none;
    border-width: 2px 0;
    overflow: hidden;
    background: #f5f5f5;
    margin-top: 0;
    padding: 1em;
}
.strategie-table .pricing-table-sign-up a,
.downloads-table .pricing-table-sign-up a{
    color: #337ab7;
    padding: .5em 0;
    font-weight: 600;
}
.strategie-table .price-table .pricing-table-sign-up .fa,
.downloads-table .price-table .pricing-table-sign-up .fa {
    color: #818181;
}

.pricing-table-sign-up p{
    font-weight: 600;
}

/* ===================================================== DEPOTVERGLEICH ============================================= */

.bank-intro .bank-title{
    padding: 1em 0;
}

.bank-cards{
    border: 1px solid #FFFFFF;
    transition: 0.25s all;
    padding: 0;
}

.bank-cards .price .intro-logo small{
    font-size: 3em;
}

.bank-cards.fd{
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
    text-shadow: 0px 2px 3px #336699;
}

.bank-cards:not(.fd){
    background: transparent;
}

.bank-cards:not(.fd):hover{
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}

.bank-cards .price {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.bank-cards .price .header,
.bank-cards .price .footer{
    text-align: center;
    padding: 1em 0;
}

.bank-cards .price .header img{
    position: absolute;
    top: .5em;
    right: .5em;
    background: transparent;
}

.bank-cards .price li{
    border-top: 1px solid #ececec;
}

.bank-cards .price li.performance{

}

.bank-cards .price li.performance.green{
    background: rgba(145,199,139,.5);
}

.bank-cards .price li.performance.yellow{
    background: rgba(199,177,127,.5);
}

.bank-cards .price li:first-child{
    border-top: none;
}

.bank-cards .price li small,
.bank-cards .price li span,
.bank-cards .price li label
{
    display: block;
    text-align: center;
    padding: 0.5em 0;
    margin: 0;
}

.bank-cards .award-box{
    background: url(../images/award-symbol.svg) no-repeat 50% 50%;
    background-position: center;
    background-size: contain;
    padding: 1em;
}
.bank-cards .award-box .award-number
{
    font-style: italic;
    font-size: 2em;
    color: #FFFFFF;
}
.bank-cards .award-box .award-pos{
    color: #FFFFFF;
}

.depot-partner .thumbnail{
    min-height: 300px;
}

span.special{
    font-weight: 600;
    border-bottom: 2px solid #dd4b39;
}

.bank-box{
    margin: 1em 0;
}

/*.bank-box{
    box-shadow: none;
    padding: 1em;
    background: #f9f9f9;
    border: 2px solid #FFFFFF;
}*/

.bank-box-content{
    padding: 1em;
    min-height: 100%;
    overflow: hidden;
    background: #3E5151;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #DECBA4, #3E5151);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #DECBA4, #3E5151); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.awesome-list {
    /* Create a new instance of a counter called "my-awesome-list" and set the counter to 0. */
    counter-reset: my-awesome-list;
    display: block;
    vertical-align: middle;
    position: relative;
}

.awesome-list.comdirect{
    background: url('../images/logo/comdirect.svg') no-repeat 100% 100%;
    background-size: 40%;
}
.awesome-list.ebase{
    background: url('../images/logo/fnz-logo.svg') no-repeat 100% 100%;
    background-size: 40%;
}
.awesome-list.dab{
    background: url('../images/logo/dab-bank.svg') no-repeat 100% 100%;
    background-size: 40%;
}
.awesome-list.hello{
    background: url('../images/logo/hellobank_transparent.png') no-repeat 100% 100%;
    background-size: 40%;
}
.awesome-list.ffb{
    background: url('../images/logo/fil-fondsbank.svg') no-repeat 100% 100%;
    background-size: 40%;
}

.awesome-list-item {
    /* Increment the "my-awesome-list" counter for every list item. */
    counter-increment: my-awesome-list;
    margin: 1em 0;
    position: relative;
    width: 100%;
}

/*
.awesome-list-item::before {
    content: counter(my-awesome-list,decimal-leading-zero);
    background: #FFF;
    border: 10px solid #2C3E50;
    border-radius: 50%;
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    font-size: 1.8em;
    line-height: 2.6em;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 2.6em;
    z-index: 2;
}
*/

.awesome-list-item > span {
    background: transparent;
    border-radius: 4px;
    color: #FFF;
    display: inline-block;
    position: relative;
    line-height: 2em;
    margin: 0;
    padding: 1em 2em 1em 3em;
    vertical-align: middle;
}

.awesome-list-item > span::after {
    background: transparent;
    content: "";
    position: absolute;
    top: 24%;
    right: 2%;
    width: 50%;
    height: 50%;
    max-width: 300px;
    z-index: -1;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
    transform: rotate(3deg);
}


.awesome-list-item:nth-child(1)::before {
    background: #0098ca;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #8E44AD;
}

.awesome-list-item:nth-child(1) > span {
    background: #0098ca;
}

.awesome-list-item:nth-child(2)::before {
    background: #2980B9;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #2980B9;
}

.awesome-list-item:nth-child(2) > span {
    background: #2980B9;
}

.awesome-list-item:nth-child(3)::before {
    background: #e42229;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #27AE60;
}

.awesome-list-item:nth-child(3) > span {
    background: #e42229;
}

form .form-group.has-feedback.tooltip_ebase {
    overflow: visible;
}

/* SOLIT */

#solit .head{
    margin-bottom: 1em;
}

#solit .head h1,
#solit .head h2{
    font-weight: bold;
    margin: 10px 0;
}

#solit .phone .phone-number{
    border: solid #2980B9;
    border-width: 1px 0;
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;
}

.panel--styled{
    position: relative;
    border: 1px solid #fff;
    z-index: auto;
    margin: 0 -15px;
}

.panel--styled .card__svg{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
}

.panel--styled .card__line {
    opacity: 0;
    animation: LineFadeIn .8s .8s forwards ease-in;
}

.panel--styled .title{
    font-weight: 700;
}

.panel--styled img{
    height: 50px;
    width: 150px;
}

.panel--styled .panel-content{
    margin: 1em 0;
}

.panel--styled .panel-content p{
    font-size: .9em;
    font-weight: 600;
}

.panel--styled .panel-content p::before{
    font-family: FontAwesome;
    content: '\f0da';
    padding: 0 1em;
}


@keyframes LineFadeIn {
    0% {
        opacity: 0;
        d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
        stroke: #fff;
    }
    50% {
        opacity: .7;
        d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
        stroke: #eaf1f7;
    }
    100% {
        opacity: 1;
        d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
        stroke: #F2F2F2;
    }
}

@keyframes ContentFadeIn {
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ImageFadeIn {
    0% {
        transform: translate(-0.5rem, -0.5rem) scale(1.05);
        opacity: 0;
        filter: blur(2px);
    }
    50% {
        opacity: 1;
        filter: blur(2px);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}


#form_depot .form-group img{
    margin: .5em 0;
}

#form_depot .form-group .depot-label{
    position: relative;
    margin: .5em 1em .5em 0;
}

#form_depot .form-group .depot-label:hover{
    cursor: pointer;
}

#form_depot .form-group .depot-label span{
    color: #337AB7;
    font-weight: 600;
    font-style: italic;
}

#form_depot .form-group .depot-label small{
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid #337AB7;
    margin: .5em .5em 0 0 ;
    vertical-align: text-bottom;
}

#form_depot .form-group .depot-label input{
    opacity: 0;
    position: absolute;
}

#form_depot .form-group .depot-label input:checked ~ small:after{
    font-family: 'FontAwesome';
    content: '\f00c';
    position: absolute;
    left: 0;
    top: -5px;
    height: 20px;
    width: 20px;
    color: #337AB7;
    font-size: 20px;
    text-align: center;
}