body{
    padding:0;
    margin:0;
    background:#34495e;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-family:Ubuntu;
    cursor:pointer;
}
a:link{
    text-decoration:none;
}
body::selection {
    background: transparent;
    color: inherit;
}
body::-moz-selection {
    background: transparent;
    color: inherit;
}
.error_404{
    font-size:50px;
    width:90%;
    margin-left:5%;
    color:white;
    text-align:center;
    margin-top:50px;
}
.back{
    margin:0px auto;
    background:#f1c40f;
    color:white;
    text-align:center;
    height:40px;
    width:200px;
    padding-left:20px;
    padding-right:20px;
    border-radius:16px;
    line-height:40px;
    cursor:pointer;
    transition:all 0.3s;
    margin-top:15px;
}
.center{
    float:left;
    width:90%;
    margin-left:5%;
}

nav{
    height:70px;
    width:100%;
    float:left;
    background:#2c3e50;
}

nav li{
    float:left;
    height:70px;
    line-height:70px;
    width:auto;
    margin-right:30px;
    color:#ecf0f1;
    list-style:none;
    cursor:pointer;
    transition:all 0.3s;
}
nav li i{
    float:left;
    font-size:14px;
    margin-right:8px;
    margin-top:27px;
}
nav li:hover{
    color:#f1c40f;
}

nav .login{
    float:right;
    background:#f1c40f;
    color:white;
    text-align:center;
    height:40px;
    width:auto;
    padding-left:20px;
    padding-right:20px;
    border-radius:16px;
    line-height:40px;
    cursor:pointer;
    transition:all 0.3s;
    margin-top:15px;
}
nav .info{
    float:right;
    width:auto;
    height:70px;
        margin-right:10px;
}
nav .avatar{
    float:right;
    width:50px;
    height:50px;
    border-radius:360px;
    background-position:-5px -15px;
    background-repeat:no-repeat;
    border:1px solid #f1c40f;
    margin-top:10px;
}
nav .info .name{
    color:#f1c40f;
    font-size:18px;
    margin-top:15px;
}
nav .info .money{
    color:white;
    font-size:13px;
    margin-top:1px;
}
nav .info .money i{
    margin-left:5px;
    color:#f1c40f;
}

h1{
    float:left;
    margin:0;
    padding:0;
    font-weight:300;
    color:white;
    font-size:19px;
}
.info{
    float:left;
    margin:0;
    padding:0;
    font-weight:300;
    color:white;
    font-size:14px;
}

#last_items{
    float:left;
    padding-top:2%;
    padding-bottom:2%;
    width:100%;
    background:#2c3e50;
    border-radius:3px;
    height:100px;
    margin-top:10px;
    overflow:hidden;
}
#last_items .item{
    list-style:none;
    float:left;
    width:10.2%;
    height:100px;
    background-position:center;
    background-repeat:no-repeat;
    margin-right:2%;
    margin-left:2%;
    overflow:hidden;
    margin-bottom:35px;
    cursor:pointer;
    transition:all 0.3s;
    border-radius:6px;
}
#last_items .item .name{
    width:100%;
    padding-top:2px;
    padding-bottom:2px;
    height:96px;
    float:left;
    text-align:center;
    font-size:12px;
    margin-top:98px;
    transition:all 0.3s;
    color:white;
}
#last_items .item .name .top{
    float:left;
    width:98%;
    margin-left:1%;
    margin-top:6px;
    height:70px;
    overflow:hidden;
}
#last_items .item:hover .name{
    margin-top:0px;
}

.case{
    float:left;
    width:251px;
    height:200px;
    margin-top:30px;
    margin-right:30px;
    background-position:center;
    overflow:hidden;
}
.case .cimg .sold{
    width:320px;
    height:20px;
    float:left;
    color:white;
    margin-left:-30px;
    margin-right:-30px;
    text-align:center;
    transform: rotate(30deg);
    margin-top:80px;
    margin-bottom:-100px;
    background:red;
}
.case .cimg{
    background-position:center;
    background-image: url(../../images/case1.png);
    width:100%;
    height:100%;
    float:left;
    background-repeat:no-repeat;
}
.case .name{
    text-align:center;
    width:100%;
    height:20px;
    float:left;
    color:#f1c40f;
    margin-top:135px;
}
.case .open{
    border:1px solid #f1c40f;
    border-radius:16px;
    text-align:center;
    height:30px;
    line-height:30px;
    float:left;
    color:#f1c40f;
    width:150px;
    margin-top:10px;
    margin-left:50px;
    transition:all 0.3s;
}
.case .open.grey{
    border:1px solid #95a5a6;
    color:#95a5a6;
    text-decoration:line-through;
}
.case:hover .open.grey{
    background:#95a5a6;
    color:white;
}
.case:hover .open{
    background:#f1c40f;
    color:white;
}
.case:hover .img{
    margin-top:0px;
}
.case .img{
    background-position: center;
    background-repeat: no-repeat;
    width:251px;
    height:130px;
    margin-bottom:-130px;
    margin-top:-130px;
    transition:all 0.4s;
}


.chest{
    width:251px;
    height:200px;
    margin:40px auto;
    background-position:center;
    overflow:hidden;
}

.lightblue{background:rgb(94, 152, 217);}
.blue{background:rgb(75, 105, 255);}
.purple{background:rgb(136, 71, 255);}
.pink{background:rgb(211, 44, 230);}
.red{background:rgb(235, 75, 75);}
/*.orange{background:rgb(94, 152, 217);}*/
.gold{background:rgb(228, 174, 57);}
.lightblue_img{background-image:url(../../images/shadow_lightblue.png);}
.blue_img{background-image:url(../../images/shadow_blue.png);}
.purple_img{background-image:url(../../images/shadow_purple.png);}
.pink_img{background-image:url(../../images/shadow_pink.png);}
.red_img{background-image:url(../../images/shadow_red.png);}
/**.orange_img{background-image:url(../images/shadow_orange.png);}*/
.gold_img{background-image:url(../../images/shadow_gold.png);}


.chest .cimg{
    background-position:center;
    background-image: url(../../images/case1.png);
    width:100%;
    height:100%;
    float:left;
    background-repeat:no-repeat;
}
.chest .open{
    border:1px solid #f1c40f;
    border-radius:16px;
    text-align:center;
    height:30px;
    line-height:30px;
    float:left;
    color:#f1c40f;
    width:220px;
    margin-top:155px;
    margin-left:15px;
    transition:all 0.3s;
}
.chest .open:hover{
    background:#f1c40f;
    color:white;
}
.chest:hover .img{
    margin-top:0px;
}
.chest .img{
    background-position: center;
    background-repeat: no-repeat;
    width:251px;
    height:150px;
    margin-bottom:-150px;
    margin-top:-150px;
    transition:all 0.4s;
}

.gewinne{
    float:left;
    width:160px;
    height:160px;
    border:1px solid #2c3e50;
    border-radius:3px;
    background-position:center;
    background-repeat:no-repeat;
    margin-top:10px;
    margin-right:10px;
    overflow: hidden;
}
.gewinne .img{
    float:left;
    width:100%;
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    margin-bottom:-30px;
}
.gewinne .name{
    float:left;
    width:160px;
    height:30px;
    line-height:30px;
    font-size:10px;
    color:white;
    text-align:center;
}

#game{
    width:100%;
    height:200px;
    float:left;
}
#game .middle{
    position:absolute;
    left:50%;
    margin-left:-1px;
    width:2px;
    background:black;
    height:170px;
    margin-top:-5px;
    z-index:9999999:
}
.game{
    width:800px;
    left:50%;
    margin-left:-400px;
    height:160px;
    overflow:hidden;
    position:absolute;
    background:#2c3e50;
}
.game .items{
    position:absolute;
    width:160px;
    height:160px;
    border-radius:3px;
    background-position:center;
    background-repeat:no-repeat;
    overflow: hidden;
}
.game .items .img{
    float:left;
    width:100%;
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    margin-bottom:-30px;
}
.game .items .name{
    float:left;
    width:160px;
    height:30px;
    line-height:30px;
    font-size:10px;
    color:white;
    text-align:center;
}

.game .leiste{
    width:778px;
    height:40px;
    border:1px solid white;
    color:white;
    float:left;
    margin-left:9px;
    margin-top:9px;
    border-radius:3px;
    line-height:40px;
    overflow:hidden;
}
.game .leiste .prozent{
    float:left;
    width:0%;
    background:#f1c40f;
    height:40px;
}
.game .leiste .zahl{
    position:absolute;
    left:20px;
    font-size:13px;
}
.game .leiste .time{
    position:absolute;
    right:20px;
    font-size:13px;
}

.game .member{
    float:left;
    width:65px;
    margin-top:3px;
    margin-left:13px;
}
.game .member .avatar{
    float:left;
    width:65px;
    height:65px; 
    border-radius:360px;
    background-position:center;
    background-repeat:no-repeat;
    border:1px solid #f1c40f;
    line-height:60px;
    color:#f1c40f;
    font-size:44px;
    text-align:center;
    cursor:pointer;
    margin-top:14px;
    font-family:Ubuntu;
    font-weight:800;
}
.game .member .prozents{
    float:left;
    width:65px;
    text-align:center;
    font-size:13px;
    margin-top:3px;
    color:white;
}

.winner{
    position:absolute;
    width:290px;
    height:275px;
    left:50%;
    top:50%;
    margin-left:-145px;
    margin-top:-125px;
    background:rgba(0,0,0,0.7);
    z-index:9999999999999;
    display:none;
    border-radius:3px;
    overflow:hidden;
}
.winner .item{
    float:left;
    width:200px;
    height:160px;
    border:1px solid #2c3e50;
    border-radius:3px;
    background-position:center;
    background-repeat:no-repeat;
    overflow: hidden;
    background-color:#34495e;
    margin-top:44px;
    border-radius:3px;
}
.winner .item .img{
    float:left;
    width:100%;
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    margin-bottom:-30px;
}
.winner .item .sellprice{
    float:left;
    width:200px;
    height:30px;
    line-height:30px;
    margin-bottom:-30px;
    font-size:12px;
    color:white;
    text-align:center;
    position:relative;
    z-index:9999999;
}
.winner .item .name{
    float:left;
    width:200px;
    height:30px;
    line-height:30px;
    font-size:10px;
    color:white;
    text-align:center;
}
.winner .goback{
    float:left;
    height:20px;
    width:100%;
    margin-bottom:-20px;
    text-align:center;
    line-height:20px;
    font-size:14px;
    color:white;
    background:#f39c12;
}
.winner .sell{
    float:left;
    width:200px;
    margin-left:44px;
    margin-top:10px;
    background:#c0392b;
    color:white;
    text-align:center;
    height:30px;
    line-height:30px;
    border-radius:3px;
    font-size:13px;
}
.winner .sell .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.winner .sell:hover .tooltiptext {
    visibility: visible;
}

/* Login */
.place{
    float:left;
    width:25%;
    margin-right:2%;
}
.i_top{
    color:white;
    float:left;
    margin-top:10px;
    margin-bottom:5px;
}
.select{
    float:left;
    width:95%;
    background:#2c3e50;
    border:1px solid #f1c40f;
    border-radius:4px;
    height:40px;
    padding:10px;
    outline:0;
    font-family:Ubuntu;
    color:white;
}
.input{
    float:left;
    width:95%;
    background:#2c3e50;
    border:1px solid #f1c40f;
    border-radius:4px;
    height:20px;
    padding:10px;
    outline:0;
    font-family:Ubuntu;
    color:white;
}
.input::placeholder{
    color:white;
}
.submit{
    float:left;
    background:#f1c40f;
    color:white;
    text-align:center;
    height:40px;
    width:auto;
    width:140px;
    border:0;
    outline:0;
    border-radius:16px;
    line-height:40px;
    cursor:pointer;
    transition:all 0.3s;
    margin-top:34px;
    font-family:Ubuntu;
}
.error{
    float:left;
    width:88%;
    margin-left:5%;
    margin-top:20px;
    padding:1%;
    background:red;
    color:white;
    border-radius:4px;
}
.erfolg{
    float:left;
    width:88%;
    margin-left:5%;
    margin-top:20px;
    padding:1%;
    background:green;
    color:white;
    border-radius:4px;
}
footer{
    height:200px;
    width:100%;
    float:left;
    margin-top:50px;
    background:#2c3e50;
}
footer .name{
    float:left;
    color:white;
    width:auto;
    font-size:21px;
    margin-top:75px;
}
footer .right{
    float:right;
    color:white;
    width:auto;
    font-size:17px;
    margin-left:40px;
    margin-top:90px;
    transition:all 0.3s;
}
footer .right:hover{
    color:#f1c40f;
}

/** Coinflip */
.circle{
    width:200px;
    height:200px;
    margin:40px auto;
}
.circle #time{
    float:left;
    width:200px;
    height:200x;
    border-radius:360px;
    background:white;
    text-align:center;
    color:black;
    line-height:200px;
    font-size:30px;
}
.lobbyinfo .player{
    width:39%;
    height:60px;
    float:left;
    border-radius:4px;
    margin-right:1%;
}
.lobbyinfo .player.win{
    background:rgba(0,0,0,0.2);
}
.lobbyinfo .text{
    float:left;
    width:33%;
    font-size:14px;
    color:white;
    margin-bottom:5px;
}
.lobbyinfo .player .avatar{
    float:left;
    width:50px;
    height:50px; 
    border-radius:360px;
    background-position:-5px -15px;
    background-repeat:no-repeat;
    border:1px solid #f1c40f;
    margin-top:5px;
}
.lobbyinfo .player .circle{
    float:left;
    width:20px;
    height:20px;
    border-radius:360px;
    margin-left:15px;
    margin-top:20px;
}
.lobbyinfo .player .name{
    float:left;
    width:auto;
    height:50px;
    color:#f1c40f;
    margin-top:21px;
    margin-left:15px;
}
.coinlobby.dark{
    background:rgba(0,0,0,0.2);
}
.coinlobby{
    float:left;
    width:96%;
    padding-left:2%;
    padding-right:2%;
    height:auto;
}
.coinlobby .avatar{
    float:left;
    width:50px;
    height:50px;
    border-radius:360px;
    background-position:-5px -15px;
    background-repeat:no-repeat;
    border:1px solid #f1c40f;
    margin-top:5px;
    margin-left:15px;
}
.coinlobby .join{
    float:right;
    width:130px;
    height:40px;
    line-height:40px;
    text-align:center;
    background:#27ae60;
    margin-top:10px;
    border-radius:3px;
    color:white;
    font-size:13px;
}

.close{
    float:right;
    width:auto;
    height:40px;
    line-height:40px;
    background:#c0392b;
    color:white;
    border-radius:3px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    font-size:13px;
    margin-top:50px;
}

#rate{
    width:100%;
    float:left;
    margin-top:60px;
    height:40px;
    border-radius:3px;
    overflow:hidden;
}
#rate .wins{
    float:left;
    background:#27ae60;
    color:white;
    width:0px;
    height:40px;
}
#rate .looses{
    float:left;
    background:#c0392b;
    color:white;
    width:0px;
    height:40px;
}

#rate .win{
    float:left;
    color:white;
    margin-left:15px;
    line-height:40px;
    font-size:14px;
    margin-top:-40px;
}
#rate .loose{
    float:right;
    margin-right:15px;
    color:white;
    line-height:40px;
    font-size:14px;
    margin-top:-40px;
}

#coin-flip-cont {
width: 200px;
height: 200px;
float:left;
}

#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}

#coin .front, #coin .back2 {
position: absolute;
width: 200px;
height: 200px;
}

#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: #3498db;
background-position:center;
background-repeat:no-repeat;
}

#coin .back2 {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
background-position:center;
background-repeat:no-repeat;
}

#joingame{
    position:absolute;
    width:600px;
    padding:15px;
    height:450px;
    border-radius:4px;
    background:rgba(0,0,0,0.95);
    top:50%;
    left:50%;
    margin-top:-240px;
    margin-left:-315px;
    z-index:99999999999;
}
#joingame .headline{
    float:left;
    color:white;
    font-size:20px;
    width:100%;
}
#joingame .headline2{
    float:left;
    color:white;
    font-size:14px;
    width:100%;
    margin-top:10px;
    margin-bottom:5px;
}
#joingame .items{
    width:600px;
    height:280px;
    float:left;
    overflow-x:hidden;
    overflow-y:scroll;
}
#joingame .items .it{
    float:left;
    width:65px;
    height:65px;
    border-radius:360px;
    background-position:-5px -15px;
    background-repeat:no-repeat;
    border:1px solid #f1c40f;
    margin-top:10px;
    margin-left:10px;
    color:#2980b9;
    font-size:30px;
    background-image: url(http://liveempire.de//libs/web/images/Rares/654279795.png);
    background-position:center;
}
#joingame .items .it i{
    display:none;
    line-height:65px;
}
#joingame .items .it.do{
    background:#27ae60;
    text-align:center;
}
#joingame .items .it.do i{
    display:block;
}
#joingame .items::-webkit-scrollbar {
    width:5px;
}

#joingame .items::-webkit-scrollbar-track {
    background-color:#dbdbdb;
}

#joingame .items::-webkit-scrollbar-thumb {
    background-color: rgb(140,140,140);
}

.useronline{
    float:left;
    width:auto;
    height:30px;
    margin-right:10px;
    margin-top:10px;
    border-radius:4px;
    overflow:hidden;
    border:1px solid #f1c40f;
    transition:all 0.4s;
}
.useronline:hover{
    background:#f1c40f;
}
.useronline:hover .name{
    color:white;
}
.useronline .avatar{
    width:30px;
    height:30px;
    background-position:center;
    background-repeat:no-repeat;
    float:left;
    margin-right:5px;
    background-position-y:-4px;
}
.useronline .name{
    float:left;
    width:auto;
    margin-right:15px;
    line-height:30px;
    font-size:12px;
    color:#f1c40f;
}



.mitarbeiter{
    width:calc(25% - 70px);
    height:60px;
    float:left;
    border-radius:4px;
    margin-right:70px;
    margin-bottom:7.5px;
    margin-top:7.5px;
}
.mitarbeiter .avatar{
    float:left;
    width:50px;
    height:50px; 
    border-radius:360px;
    background-position:-5px -15px;
    background-repeat:no-repeat;
    border:1px solid #f1c40f;
    margin-top:5px;
}
.mitarbeiter .name{
    float:left;
    width:auto;
    height:60px;
    color:#f1c40f;
    margin-left:15px;
}



#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards; 
animation: rotate900 3s linear forwards;
}

#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards; 
animation: rotate1080 3s linear forwards;
}

#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards; 
animation: rotate1260 3s linear forwards;
}

#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards; 
animation: rotate1440 3s linear forwards;
}

#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards; 
animation: rotate1620 3s linear forwards;
}

#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards; 
animation: rotate1800 3s linear forwards;
}

#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards; 
animation: rotate1980 3s linear forwards;
}

#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards; 
animation: rotate2160 3s linear forwards;
}

@-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}

@keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}

@-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}

@keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}

@-webkit-keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}

@keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}

@-webkit-keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}

@keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}

@-webkit-keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}

@keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}

@-webkit-keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}

@keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}

@-webkit-keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}

@keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}

@-webkit-keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}

@keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}