/*FONTS*/

@font-face {
    font-family: "Raleway-Regular";
    src: local(Raleway-Regular), url("../fonts/raleway/Raleway-Regular.woff2") format("woff2"), url("../fonts/raleway/Raleway-Regular.woff") format("woff");
}

@font-face {
    font-family: "Raleway-Bold";
    src: local(Raleway-Bold), url("../fonts/raleway/Raleway-Bold.woff2") format("woff2"), url("../fonts/raleway/Raleway-Bold.woff") format("woff");
}

@font-face {
    font-family: "MaterialIcons";
    font-style: normal;
    font-weight: 400;
    src: local(MaterialIcons), url("../fonts/Material Icons/MaterialIcons.woff2") format("woff2"), url("../fonts/MaterialIcons/MaterialIcons.woff") format("woff");
}



/*ALLGEMEIN*/

html{
    font-family: "Raleway-Regular";
}

.keyboard_arrow_down{
    background-image:url(../img/icon/keyboard_arrow_down.svg);
    background-size: contain;
    height: 15%;
    width: 15%;
    background-repeat:no-repeat;
    position: absolute;
    top: 0px;
    margin: 42.5% 42.5% 0% 42.5%;
    background-position: center;
    opacity: 0.6;
    cursor: pointer;
    z-index: 2;
}

h3.headline{
    font-family: "Raleway-Regular";
    text-transform: uppercase;
    padding-left: 10px;
}

h5.card-headline{
    font-family: "Raleway-Regular"
}

.padding10{
    padding: 0 10px !important;
}

.padding20{
    padding: 20px !important;
}

.no-margin{
    margin-top: -15px;
}

.material-icons {
  font-family: 'MaterialIcons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/*HEROIMAGE*/

.heroimage_headline {
    z-index: 2;
    height: 25%;
    width: 50%;
    position: absolute;
    top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 25% 25% 0% 25%;
    
}

.lightSpeedIn{
    animation-delay: 2s;
}

.heroimage_logo {
    background-image: url(../img/logo.png);
    background-size: contain;
    height: 90%;
    width: 25%;
    background-repeat: no-repeat;
    transform: rotate(-15deg);
    margin-top: -5%;
}

.heroimage_text{
    font-family: "Raleway-Bold";
    font-size: 3.5em;
    margin-top: -2.5%;
}

.slideshow_section {
    background: #000;
    width: 100%;
    height: 100vh;
    
}

.slideshow {
    width: 100%;
    height: 100%;
    z-index: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slideshow li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    animation: imageAnimation 30s linear infinite;
}



/*NAVIGATION*/

nav .brand-logo{
    margin-left: 8.66%;
    background-image:url(../img/logo.png);
    background-size: contain;
    background-repeat:no-repeat;
    width: 200px;
    height: 50px;
    margin-top: 8px;
}

#nav-mobile{
    margin-right: 8.66%;
}

nav{
    background-color: #fff;
    border-bottom: solid 1px #ccc;
    
}

nav ul a{
        color: #000;
}

/*SECTION: KADER*/

#kader_section{
    height: auto;
    background-color: white;
}

.kader-container{
    background-color: transparent;
    margin-top: 5%;
    padding: 0px !important; 
}

/*
.kader-container .row .col{
    padding: 0px !important;
}
*/

.kader-container .click{
    height: 25vh !important;
    background-color: transparent;
}

.kader-container .click_content{
    padding: 10px !important;
    height: 100%;
    cursor: pointer;
}

.kader_tabs{
    height: auto !important;
    margin-top: 20px;
    display: none;
}

.wyszo{
    background-image: url(../img/kader/1_Wyszomirski.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.jones{
    background-image: url(../img/kader/16_Maier.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.anton{
    background-image: url(../img/kader/3_Mansson.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.andrej{
    background-image: url(../img/kader/5_Kogut.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.ionut{
    background-image: url(../img/kader/8_Ramba.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.bodo{
    background-image: url(../img/kader/9_Ebner.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.theuer{
    background-image: url(../img/kader/13_Theuerkauf.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.horni{
    background-image: url(../img/kader/17_Hornke.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.jonathan{
    background-image: url(../img/kader/19_Stenbaecken.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.rolf{
    background-image: url(../img/kader/20_Hermann.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.tom{
    background-image: url(../img/kader/22_Skroblien.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.tim{
    background-image: url(../img/kader/23_Suton.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.donat{
    background-image: url(../img/kader/37_Bartok.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: top center;
    border-radius:10px;
}

.azat{
    background-image: url(../img/kader/55_Valiullin.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.chris{
    background-image: url(../img/kader/69_Klimek.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.paddy{
    background-image: url(../img/kader/76_Zieker.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius:10px;
}

.wyszo_action{
    background-image:url(../img/action/Wyszo.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.jones_action{
    background-image:url(../img/action/Jones.jpg);
   height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.anton_action{
    background-image:url(../img/action/Anton.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.andrej_action{
    background-image:url(../img/action/Andrej.jpg);
   height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.ionut_action{
    background-image:url(../img/action/Ionut.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.bodo_action{
    background-image:url(../img/action/Bodo.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.theuer_action{
    background-image:url(../img/action/Theuer.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.horni_action{
    background-image:url(../img/action/Horni.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.jonathan_action{
    background-image:url(../img/action/Jonathan.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.rolf_action{
    background-image:url(../img/action/Rolf.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.tom_action{
    background-image:url(../img/action/Tom.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.tim_action{
    background-image:url(../img/action/Tim.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.donat_action{
    background-image:url(../img/action/Donat.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.azat_action{
    background-image:url(../img/action/Azat.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}

.chris_action{
    background-image:url(../img/action/Chris.jpg);
    height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: center;
}

.paddy_action{
    background-image:url(../img/action/Paddy.jpg);
   height: 50vh;
    width: calc(100% - 40px) !important;
    background-size: cover;
    margin: 20px !important;
    background-position: top;
}


/*SECTION: SPIELORTE*/

#spielorte_section{
    height: auto;
    background-color: #fefefe;
}

.spielorte-container{
    background-color: transparent;
    margin-top: 5%;
    padding: 0px !important; 
}

#spielorte_section .map{
    height: 600px;
    width: 450px;
    background-image: url(../img/karte/deutschland.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    margin-top: 5%;
}

.map .location{
    background-image: url(../img/karte/location.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 70px;
    width: 65px;
    cursor: pointer;
    transition-timing-function: ease-in-out;
    transition: 1s;
}

.location.minden{
    margin-left: 26.4%;
    margin-top: 32%;
}

.location.flensburg{
    margin-left: 34.6%;
    margin-top: -56.9%;
}

.location.kiel{
    margin-left: 40.9%;
    margin-top: -7.9%;
}

.location.hannover{
    margin-left: 36.9%;
    margin-top: 17.1%;
}

.location.lemgo{
    background-image: url(../img/logo.png);
    height: 40px;
    width: 40px; 
    background-size: contain;
    margin-left: 28.6%;
    margin-top: 1.1%;
    animation-duration: 5s !important
}

.location.magdeburg{
    margin-left: 55%;
    margin-top: -20.5%;
}

.location.berlin{
    margin-left: 71.7%;
    margin-top: -25.5%;
}

.location.leipzig{
    margin-left: 61.9%;
    margin-top: 7.3%;
}

.location.coburg{
    margin-left: 47.3%;
    margin-top: 2.3%;
}

.location.kassel{
    margin-left: 33%;
    margin-top: -33.7%;
}

.location.wuppertal{
    margin-left: 7.6%;
    margin-top: -16%;
}

.location.gummersbach{
    margin-left: 11.4%;
    margin-top: -12.1%;
}

.location.wetzlar{
    margin-left: 21.1%;
    margin-top: -8.4%;
}

.location.mannheim{
    margin-left: 20.4%;
    margin-top: 3.2%;
}

.location.erlangen{
    margin-left: 47.3%;
    margin-top: -15.6%
}

.location.stuttgart{
    margin-left: 28.8%;
    margin-top: -1.9%;
}

.location.goeppingen{
    margin-left: 33%;
    margin-top: -14.2%;
}

.location.balingen{
    margin-left: 24.6%;
    margin-top: -10.2%
}

.location.minden:hover, .location.flensburg:hover, .location.kiel:hover, .location.hannover:hover, .location.magdeburg:hover, .location.berlin:hover, .location.leipzig:hover, .location.coburg:hover, .location.kassel:hover, .location.wuppertal:hover, .location.gummersbach:hover, .location.wetzlar:hover, .location.mannheim:hover, .location.erlangen:hover, .location.stuttgart:hover, .location.goeppingen:hover, .location.balingen:hover{
    -webkit-transform: scale(1.1); 
    transform: scale(1.1);
    transition-timing-function: ease-in-out;
    transition: 1s;
}

.map_text.card{
    height:600px;
    margin-top: 5%;
}

.halle_foto{
    height: 10vh;
    margin-right: 25px;
}

.halle_text h5{
    margin-top: 0px;
    border-bottom: 1px dotted #000;
    line-height: 10vh;
    margin-bottom: 20px;
    margin-bottom: 20px;

}

.flensarena{
    background-image: url(../img/karte/sgflensburghandewitt.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.sparkassenarena_kiel{
    background-image: url(../img/karte/thwkiel.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.maxschmelinghalle{
    background-image: url(../img/karte/fuechseberlin.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.tuiarena{
    background-image: url(../img/karte/tsvhannoverburgdorf.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.kampahalle{
    background-image: url(../img/karte/gwdminden.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.getecarena{
    background-image: url(../img/karte/scmagdeburg.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.arenaleipzig{
    background-image: url(../img/karte/scdhfkleipzig.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.rothenbachhalle{
    background-image: url(../img/karte/mtmelsungen.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.hukcoburgarena{
    background-image: url(../img/karte/hsc2000coburg.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.unihalle{
    background-image: url(../img/karte/bergischerhc.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.schwalbearena{
    background-image: url(../img/karte/vflgummersbach.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.rittalarena{
    background-image: url(../img/karte/hsgwetzlar.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.saparena{
    background-image: url(../img/karte/rheinneckarloewen.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.arenanuernbergerversicherungen{
    background-image: url(../img/karte/hcerlangen.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.porschearena{
    background-image: url(../img/karte/tvbittenfeld.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.ewsarena{
    background-image: url(../img/karte/frischaufgoeppingen.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.sparkassenarena_balingen{
    background-image: url(../img/karte/hbwbalingenweilstetten.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.lipperlandhalle{
    background-image: url(../img/karte/tbvlemgo.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.halle_text{
    width: 100%;
    height: auto;
    padding: 25px;
}

.ergebnis_tabelle{
    overflow-y: auto;
    height: 35vh;
}

.chart-container{
    margin-top: 20px
}

.best{
    position: absolute;
    height: 75px;
    width: 75px;
    border-radius: 50px;
    background-size: cover;
    margin-top: 9.3%;
    margin-left: 9.3%
}

.best_kiel, .best_flensburg, .best_hannover, .best_minden, .best_erlangen, .best_balingen{
    background-image: url(../img/kader/17_Hornke.jpg);
}

.best_berlin{
    background-image: url(../img/kader/9_Ebner.jpg)
}

.best_magdeburg, .best_coburg, .best_gummersbach, .best_mannheim, .best_goeppingen{
    background-image: url(../img/kader/20_Hermann.jpg)
}

.best_leipzig, .best_wuppertal{
    background-image: url(../img/kader/23_Suton.jpg)
}

.best_melsungen{
    background-image: url(../img/kader/22_Skroblien.jpg)
}

.best_wetzlar{
    background-image: url(../img/kader/3_Mansson.jpg)
}

.best_stuttgart{
    background-image: url(../img/kader/76_Zieker.jpg)
}

.best_tw_kiel, .best_tw_berlin, .best_tw_minden, .best_tw_leipzig, .best_tw_coburg, .best_tw_wuppertal, .best_tw_mannheim, .best_tw_balingen{
    background-image: url(../img/kader/16_Maier.jpg); 
}

.best_tw_flensburg, .best_tw_hannover, .best_tw_magdeburg, .best_tw_melsungen, .best_tw_gummersbach, .best_tw_wetzlar, .best_tw_erlangen, .best_tw_stuttgart, .best_tw_goeppingen{
    background-image: url(../img/kader/1_Wyszomirski.jpg); 
}

.zuschauer_kiel{
    background-image: url(../img/karte/thwkiel.png);
}

.zuschauer_flensburg{
    background-image: url(../img/karte/sgflensburghandewitt.png);
}

.zuschauer_berlin{
    background-image: url(../img/karte/fuechseberlin.png)
}

.zuschauer_hannover{
    background-image: url(../img/karte/tsvhannoverburgdorf.png)
}

.zuschauer_minden{
    background-image: url(../img/karte/gwdminden.png)
}

.zuschauer_magdeburg{
    background-image: url(../img/karte/scmagdeburg.png)
}

.zuschauer_leipzig{
    background-image: url(../img/karte/scdhfkleipzig.png)
}

.zuschauer_melsungen{
    background-image: url(../img/karte/mtmelsungen.png)
}

.zuschauer_coburg{
    background-image: url(../img/karte/hsc2000coburg.png)
}

.zuschauer_wuppertal{
    background-image: url(../img/karte/bergischerhc.png)
}

.zuschauer_gummersbach{
    background-image: url(../img/karte/vflgummersbach.png)
}

.zuschauer_wetzlar{
    background-image: url(../img/karte/hsgwetzlar.png)
}

.zuschauer_mannheim{
    background-image: url(../img/karte/rheinneckarloewen.png)
}

.zuschauer_erlangen{
    background-image: url(../img/karte/hcerlangen.png)
}

.zuschauer_stuttgart{
    background-image: url(../img/karte/tvbittenfeld.png)
}

.zuschauer_goeppingen{
    background-image: url(../img/karte/frischaufgoeppingen.png)
}

.zuschauer_balingen{
    background-image: url(../img/karte/hbwbalingenweilstetten.png)
}




/*SECTION: SAISONSTATISTIK*/

#saisonstatistik_section{
    height: auto;
    background-color: #ffffff;
}

#saisonstatistik_section th, #saisonstatistik_section td{
    text-align: center;
}

.verein_logo{
    background-size: contain;
    height: 40px;
    background-repeat: no-repeat;
    margin-right: 0px;
    background-position: center
}

.sg, .recken, .scdhfk, .rnl, .vfl, .fuechse, .thw, .hsc, .gwd, .hsg, .tvb, .mt, .hbw, .bhc, .scm, .fag, .hce{
    opacity: 0.1;
}

.sg{
    background-image: url(../img/saisonstatistik/sg.png);
}

.recken{
    background-image: url(../img/saisonstatistik/tsv.png);
}

.scdhfk{
    background-image: url(../img/saisonstatistik/scdhfk.png);
}

.rnl{
    background-image: url(../img/saisonstatistik/rnl.png);
}

.vfl{
    background-image: url(../img/saisonstatistik/vfl.png);
}

.fuechse{
    background-image: url(../img/saisonstatistik/fuechse.png);
}

.thw{
    background-image: url(../img/saisonstatistik/thw.png);
}

.hsc{
    background-image: url(../img/saisonstatistik/hsc.png);
}

.gwd{
    background-image: url(../img/saisonstatistik/gwd.png);
}

.tbv{
    background-image: url(../img/saisonstatistik/logo.png);
    opacity: 0.5;
}

.tbv.active{
    background-image: url(../img/logo.png);
    opacity: 1;
}

.hsg{
    background-image: url(../img/saisonstatistik/hsg.png);
}

.tvb{
    background-image: url(../img/saisonstatistik/tvb.png);
}

.mt{
    background-image: url(../img/saisonstatistik/mt.png);
}

.hbw{
    background-image: url(../img/saisonstatistik/hbw.png);
}

.bhc{
    background-image: url(../img/saisonstatistik/bhc.png);
}

.scm{
    background-image: url(../img/saisonstatistik/scm.png);
}

.fag{
    background-image: url(../img/saisonstatistik/fag.png);
}

.hce{
    background-image: url(../img/saisonstatistik/hce.png);
}

#saisonstatistik_section td{
   width: 5%;
}

#saisonstatistik_section .btn{
   background-color: #00baff
}


/*SECTION: SAISONSTATISTIK*/

#vereinsstatistik_section{
    height: auto;
    background-color: #fefefe;
}

/*FOOTER*/

.page-footer {
    color: #000;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

.grey-text.text-lighten-4 {
    color: #000 !important;
}

.footer-copyright{
    color: #000 !important;
}

/*DIALOGE*/

.modal li{
    list-style-type: circle !important;
    margin-left: 50px
}

.modal h5{
    margin-top: 30px;
    border-bottom: 1px dotted #000;
}

/*MEDIA QUERIES*/

@media only screen and (max-width: 1020px) {
	.heroimage_headline {
        width: 80%;
        margin: 25% 10% 0% 10%;
    }
}

@media only screen and (max-width: 864px) {
	.heroimage_headline {
        width: 90%;
        margin: 25% 5% 0% 5%;
    }
}

@media only screen and (max-width: 760px) {
    div.keyboard_arrow_down.animated.infinite.pulse1{
        margin-top: 80%
    }
}

@media only screen and (max-width: 450px) {
    div.keyboard_arrow_down.animated.infinite.pulse1{
        margin-top: 130%
    }
}




/*ANIMATIONEN*/

    /*PULSIEREN ARROW*/
    
    div.keyboard_arrow_down.animated.infinite.pulse1{
        animation-duration: 3s !important;
    }   


    /*SLIDESHOW*/

    .slideshow li:nth-child(1) {
        background-image: url(../img/heroimage/hero_1.jpg);
        background-position: center;
    }

    .slideshow li:nth-child(2) {
        background-image: url(../img/heroimage/hero_2.jpg);
        background-position: center;
        animation-delay: 5s;
    }

    .slideshow li:nth-child(3) {
        background-image: url(../img/heroimage/hero_3.jpg);
        background-position: center;
        animation-delay: 10s;
    }

    .slideshow li:nth-child(4) {
        background-image: url(../img/heroimage/hero_4.jpg);
        background-position: center;
        animation-delay: 15s;
    }

    .slideshow li:nth-child(5) {
        background-image: url(../img/heroimage/hero_5.jpg);
        background-position: center;
        animation-delay: 20s;
    }

    .slideshow li:nth-child(6) {
        background-image: url(../img/heroimage/hero_6.jpg);
        background-position: center;
        animation-delay: 25s;
    }

    @keyframes imageAnimation {
        0% {
            opacity: 0;
            animation-timing-function: ease-in;
        }
        10% {
            opacity: 1;
            animation-timing-function: ease-out;
        }
        20% {
            opacity: 1
        }
        30% {
            opacity: 0
        }
    }

    /*SEMI-DONUT*/

    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    section {
        display: inline-block;
        width: 33.33%;
        margin: 50px 0;
        text-align: center;
        min-width: 320px;
        position: relative;
    }

    .tooltip {
        position: absolute;
        background: #eee;
        padding: 3px;
        font-weight: 100;
        font-size: 12px;
        border-radius: 2px;
        border: 1px solid  #ddd;
        bottom: 100%;
        left: 50%;
        opacity: 0;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }

    .tooltip:after {
        content: "" attr(tooltip) "";
        margin-left: 3px;
        color: #2DABD8;
    }

    .tooltip:before {
        content: '';
        width: 8px;
        height: 8px;
        background: #2DABD8;
        display: inline-block;
        margin-right: 5px;
    }

    .graph {
        width: 300px;
        height: 150px;
        position: relative;
        margin: auto;
        text-align: center;
        color: #fff;
        font-size: 22px;
        line-height: 280px;
        font-weight: 600;
        border-radius: 150px 150px 0 0;
        overflow: hidden;
        color: #0ff;
    }

    .graph:before, .graph:after {
        content: '';
        width: 300px;
        height: 150px;
        border: 50px solid #0ff;
        border-top: none;
        position: absolute;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        -webkit-transform-origin: 50% 0%;
                transform-origin: 50% 0%;
        border-radius: 0 0 300px 300px;
        -webkit-animation: demo 2s;
                animation: demo 2s;
        left: 0;
        top: 100%;
        z-index: 5;
    }

    .graph:after {
        z-index: 3;
        border-color: rgba(0, 0, 0, 0.15);
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }

    .graph:hover:before {
        opacity: .8;
        cursor: pointer;
    }

    .graph:hover + .tooltip {
        bottom: 105%;
        opacity: 1;
    }

    .multi-graph {
        width: 300px;
        height: 150px;
        position: relative;
        margin: auto;
        color: #000;
        font-size: 22px;
        line-height: 280px;
        font-weight: 600;
    }

    .multi-graph:before {
        content: '';
        width: 300px;
        height: 150px;
        border: 50px solid rgba(0, 0, 0, 0.15);
        border-bottom: none;
        position: absolute;
        -webkit-transform-origin: 50% 0%;
                transform-origin: 50% 0%;
        border-radius: 300px 300px 0 0;
        left: 0;
        top: 0;
    }

    .multi-graph .graph {
        position: absolute;
        top: 0;
        left: 0;
    }

    .multi-graph .graph:after, .model-1 .graph:after {
        background: #eee;
        border: medium none;
        border-radius: 2px;
        color: #333;
        font-weight: 200;
        content: "" attr(data-name) "";
        display: inline-block;
        font-size: 12px;
        height: 20px;
        left: 50%;
        line-height: 20px;
        padding: 0 5px;
        top: 50px;
        z-index: 0;
        -webkit-transform: rotate(0deg) translateX(-50%);
        transform: rotate(0deg) translateX(-50%);
        width: auto;
        opacity: 0;
    }

    .multi-graph .graph:hover:after {
        opacity: 1;
        top: 70px;
    }

    .model-1 .graph {
        color: #0669AD;
    }

    .model-1 .graph:before {
        -webkit-transform: rotate(164.12deg);
                transform: rotate(164.12deg);
        border-color: #0669AD;
    }

    section.model-2 .graph {
        color: #2DABD8;
    }

    section.model-2 .graph:before {
        -webkit-transform: rotate(15.88deg);
        transform: rotate(15.88deg);
        border-color: #2DABD8;
    }
    
    section.model-3.sun .unentschieden:before {
        -webkit-transform: rotate(68.82deg);
        transform: rotate(68.82deg);
        border-color: #FEDA3E;
    }
    
    section.model-3.sun .niederlagen:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-color: #E62A39;
    }
    
    section.model-3.sun .siege:before {
        -webkit-transform: rotate(52.94deg);
        transform: rotate(52.94deg);
        border-color: #0669AD ;
    }
    
    section.model-3.sun .graph {
        color: #2DABD8;
    }

    section.model-3.strafen .zweimin:before {
        -webkit-transform: rotate(177.63deg);
        transform: rotate(177.63deg);
        border-color: #0669AD ;
    }
    
    section.model-3.strafen .rk:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-color: #E62A39 ;
    }
    
    section.model-3.strafen .gk:before {
        -webkit-transform: rotate(77.37deg);
        transform: rotate(77.37deg);
        border-color: #FEDA3E;
    }
    
    section.model-3.strafen .graph {
        color: #2DABD8;
    }
    
    @-webkit-keyframes demo {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }
    
    @keyframes demo {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }