/* Text Markierung deaktivieren */
body{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
    overflow: hidden;
}
#loading{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100px;
    text-align: center;
    zIndex: 1050;
    font-family: 'kaushan_scriptregular';
    font-size: 2em;
}
#background{
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#test{
    position: absolute;
    top: 100;
    left: 100;
    z-index: 4000;
    color: white;
}
#startscreen{
    height:     100%;
    width:      100%;
    z-index:    1000;
    position:   absolute;
    top:        0;
    left:       0;
}
#logo{   
    margin-left:    auto;
    margin-right:   auto;
}
#stampText{
    color: #505050;
}
#d1,#d2,#d3,#d4{
    background: rgb(207,231,250); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(207,231,250,1) 0%, rgba(133,163,191,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(207,231,250,1) 0%,rgba(133,163,191,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(207,231,250,1) 0%,rgba(133,163,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#85a3bf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
h1{
    zIndex: 2000;
    font-family:"kaushan_scriptregular";
}
#c1,#c2,#c3,#c4{
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}
#startLernText{    
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1.5s;
    font-family:"kaushan_scriptregular";
}
@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}

#transitionBlack{
    opacity: 0;
}
#background{
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
}
.lessonCards{
    position: absolute;
    top: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    box-shadow: none;
}
.playerCards{
    position: absolute;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 3px 10px 0 rgba(0, 0, 0, 0.4);
    opacity: 0;
}
#blackboard{
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#boardText{
    font-family: 'kaushan_scriptregular';
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#p1,#p2,#p3,#p4{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
}
/*
#mark{
    z-index: 1000;
    width: 85%;
    height: 90%;
    margin-left: 8%;
    margin-right: 5%;
    margin-top: 8%;
    margin-bottom: 5%;
    background-color: rgba(255,255,0,1);
    box-shadow: 0 0 40px rgba(255, 255, 0, 0.7);
}
*/
#mark{
    z-index: 1000;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-shadow: 0 0 40px rgb(255, 255, 0);
}
.backSide{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.test{
    position: relative;
    border-style: solid;
    border-color: orangered;
    visibility: visible;
    display: block;
    float: left;
    padding: 5px;
    margin: 5px;
    z-index: 3000;
    color: grey;
}
#jassMat{
    position: absolute;
    top: -1000px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.glow{
    box-shadow: 0 0 60px rgb(255, 255, 0);
}
/*
text-shadow: 2px 2px 4px #505050;
*/
.circle{
    background-color: #FFFFFF;
    border-radius: 50%;
    color: #505050;
    font-family: 'kaushan_scriptregular';
    border-style: solid;
    border-color: #505050;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.symbol{
    opacity: 0;
    z-index: 3;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.leanMoreLeft{
    -webkit-transform : rotate(-11deg);
    -moz-transform : rotate(-11deg);
    -ms-transform : rotate(-11deg);
    -o-transform : rotate(-11deg);
    transform : rotate(-11deg);
}
.leanLeft{
    -webkit-transform : rotate(-6deg);
    -moz-transform : rotate(-6deg);
    -ms-transform : rotate(-6deg);
    -o-transform : rotate(-6deg);
    transform : rotate(-6deg);
}
.leanRight{
    -webkit-transform : rotate(8deg);
    -moz-transform : rotate(8deg);
    -ms-transform : rotate(8deg);
    -o-transform : rotate(8deg);
    transform : rotate(8deg);
}
#loading{
    opacity: 1;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#mat{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.gradiant{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff00+0,ffffff+100&1+0,0+68 */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,0,1) 0%, rgba(255,255,173,0) 68%, rgba(255,255,255,0) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,0,1) 0%,rgba(255,255,173,0) 68%,rgba(255,255,255,0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(255,255,0,1) 0%,rgba(255,255,173,0) 68%,rgba(255,255,255,0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#00ffffff',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
}
#trumpfIcons{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
}
#sponge{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
    z-index: 1200;
}
#hamburgerG{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}








/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 4, 2016 */
@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('../fonts/kaushanscript-regular-webfont.eot');
    src: url('../fonts/kaushanscript-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kaushanscript-regular-webfont.woff2') format('woff2'),
         url('../fonts/kaushanscript-regular-webfont.woff') format('woff'),
         url('../fonts/kaushanscript-regular-webfont.ttf') format('truetype'),
         url('../fonts/kaushanscript-regular-webfont.svg#kaushan_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}