@font-face {
    font-family: gameFont;
    src: url('fonts/complex bruja free promo___.ttf');
}
@font-face {
    font-family: gameFont2;
    src: url('fonts/Typo Oxin free promo.ttf');
}
.ddefs
{
	position:absolute;
	background:rgba(100, 120, 100, 0);
        width:90%;
	left:10%;
	top:0px;
	
}
.gamecontent
{
	width:inherit;
	height:inherit;
}
.gameoption
{
	width:200px;
	height:500px;
        display: none;
    z-index: 10;
	background:lightgray;
	position:absolute;
	top:0px;
	left:-170px;
	background-size:100% 50%;
	opacity:0.8;
	cursor:pointer;
	border-radius:10px;
	
	box-shadow:5px 5px 5px lightgray;
	-moz-transition-duration:500ms;
	-moz-transition-timing-function:else-if;
	-moz-transition-property:left;
	
	-webkit-transition-duration:500ms;
	-webkit-transition-timing-function:else-if;
	-webkit-transition-property:left;
	
	-o-transition-duration:500ms;
	-o-transition-timing-function:else-if;
	-o-transition-property:left;
	
	-ms-transition-duration:500ms;
	-ms-transition-timing-function:else-if;
	-ms-transition-property:left;
	
}
.gamecontent>p
{
	color:orange;
	background:black;
	opacity:0.5;
	cursor:pointer;
}
.gamecontent>p>a
{
	color:aqua;
}
.gamecontent>p:hover
{
	box-shadow:5px 5px 5px green;
}
.gameoption:hover
{
	left:0px;
	-moz-transition-duration:1s;
	-moz-transition-timing-function:else-if;
	-moz-transition-property:left;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:else-if;
	-webkit-transition-property:left;
	-o-transition-duration:1s;
	-o-transition-timing-function:else-if;
	-o-transition-property:left;
	-ms-transition-duration:1s;
	-ms-transition-timing-function:else-if;
	-ms-transition-property:left;
	
}
.gameoption>ul
{
	margin-left:-20%;
}
.gameoption>ul>li
{
	list-style:none;
	display:inline-block;
	background:graytext;
	border-radius:7px;
	box-shadow:5px 5px 5px black;
	border:1px solid white;
	color:white;
	cursor:pointer;
	font-size:18px;
	text-align:center;
	margin-left:10px;
}
.gameoption>ul>li:hover
{
	background:pink;
	font-size:20px;
}
.gameoption>ul>li:nth-child(3)
{
	width:170px;
}
.score
{
    position: absolute;
    top:0;
    right:0;
    background:rgba(0, 0, 0, 0.1);
    padding:2px;
    width:13%;
    text-align: center;
    font-size: 20px;
    color:white;
    box-shadow: 0px 0px 8px 0px #647C36;
    border-radius: 2px;
    
}
.score .bakriscore{
    font-size: 7vw;
}
.score>.time
{
	font-size:2rem;
}
.refresh{
    position: absolute;
    top:0px;
    left:0;
    text-align: right;
    box-shadow: 0px 0px 8px 0px #647C36;
    border-radius: 2px;
}
.refresh>img{
    width:35px;
    display:block;
    -webkit-transition-duration: 0.1s;
    -webkit-transform:scale(0.9);
}

.refresh>img:active{
    -webkit-transition-duration: 0.1s;
    -webkit-transform:scale(1);
}

body
{
	overflow:hidden;
        cursor:url(img/cursor.png), auto;
}
@-moz-keyframes ann
{
	100%
	{
		-moz-transform:rotate(-360deg);
	}
}
@-webkit-keyframes ann
{
	100%
	{
		-webkit-transform:rotate(-360deg);
	}
}
@-o-keyframes ann
{
	100%
	{
		-o-transform:rotate(-360deg);
	}
}
@-ms-keyframes ann
{
	100%
	{
		-ms-transform:rotate(-360deg);
	}
}

/*@media screen and (max-height:700px)
{
	.mainsvg, .ddefs
	{
		height:580px;
	}
        
}
@media screen and (max-height:500px)
{
	.mainsvg, .ddefs
	{
		height:340px;
	}
}
@media screen and (max-height:300px)
{
	.mainsvg, .ddefs
	{
		height:260px;
	}
}*/
.mainsvg
{
	width:100%;
        -moz-animation-name:ann1;
	-moz-animation-duration:3s;
	-webkit-animation-name:ann1;
	-webkit-animation-duration:3s;
	-o-animation-name:ann1;
	-o-animation-duration:3s;
	-ms-animation-name:ann1;
	-ms-animation-duration:3s;
	transform : scale(0.6, 0.85);
        -webkit-transform : scale(0.6, 0.85);
        -moz-transform : scale(0.6, 0.85);
        -ms-transform : scale(0.6, 0.85);
        -o-transform : scale(0.6, 0.85);
}
.bg-class1{
    background-image:url("img/background2.jpg");
}
.bg-class2{
    background-image:url("img/bg-2.jpg");
}
.bg-class3{
    background-image:url("img/bg-3.jpg");
}
.bg-class4{
    background-image:url("img/bg-4.jpg");
}
.bg-class5{
    background-image:url("img/bg-3.jpg");
}
.bg-class2>svg>.outerpoly{
    fill: rgba(16, 16, 16, 0.66)!important;
    stroke : rgba(16, 16, 13, 0.43)!important;
}
.bg-class3>svg{
    background: rgba(236, 0, 227, 0.38);
}

.bg-class3>svg>.outerpoly{
    fill: rgba(9, 170, 241, 0.49)!important;
}

.bg-class3>svg .game_title{
    stroke: #00FF34!important;
}

.outerpoly
{
        fill:rgba(128, 130, 56, 0.75);
	stroke:lightgreen;
	stroke-width:15px;
}
line
{
	stroke-width:5;
}
ellipse
{
	opacity:0.7;
}
ellipse:hover
{
	stroke:rgb(79, 167, 39);
	stroke-width:5px;
}

.lrresize_image
{
	cursor:e-resize;
}
.tdresize_image
{
	cursor:n-resize;
}

.animateClass1
{
	stroke-dasharray: 370, 10, 10;
        stroke:#000000;
        -webkit-transform: scale(0.4);
        -webkit-transform-origin: center;
        
        -moz-transform: scale(0.4);
        -moz-transform-origin: center;
        
        transform: scale(0.4) skewX(0deg);
        transform-origin: center;
        
        -moz-animation-delay: 0s;
        -moz-animation-duration: 500ms;
        -moz-animation-name: load_ani;
        -moz-animation-direction:alternate;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-iteration-count: infinite;
        
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 500ms;
        -webkit-animation-name: load_ani;
        -webkit-animation-direction:alternate;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        
        animation-delay: 0s;
        animation-duration: 500ms;
        animation-name: load_ani;
        animation-direction:alternate;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        
	-o-animation-delay: 0s;
        -o-animation-duration: 500ms;
        -o-animation-name: load_ani;
        -o-animation-direction:alternate;
        -o-animation-timing-function: ease-in-out;
        -o-animation-iteration-count: infinite;
        
	-ms-animation-delay: 0s;
        -ms-animation-duration: 500ms;
        -ms-animation-name: load_ani;
        -ms-animation-direction:alternate;
        -ms-animation-timing-function: ease-in-out;
        -ms-animation-iteration-count: infinite;
        
}

@-moz-keyframes load_ani
{
    to
    {
        stroke-dasharray: 25, 20, 35;
        stroke:#000000;
    }
}
@-webkit-keyframes load_ani
{
    to
    {
        stroke-dasharray: 25, 20, 35;
        stroke:#000000;
        transform: scale(0.4) skewX(20deg);
    }
}
-webkit-keyframes load_ani
{
    to
    {
        stroke-dasharray: 25, 20, 35;
        stroke:rgba(12, 228, 238, 0.5);
    }
}
@-o-keyframes load_ani
{
    to
    {
        stroke-dasharray: 25, 20, 35;
        stroke:rgba(12, 228, 238, 0.5);
    }
}

@-ms-keyframes load_ani
{
    to
    {
        stroke-dasharray: 25, 20, 35;
        stroke:rgba(12, 228, 238, 0.5);
    }
}


.restart
{
    position:absolute;
	
	background-size:100% 100%;
    border-radius: 40px 40px 20px 20px;
    width:10%;
	height:50px;
	left:60%;
}
.restart:hover
{
	width:10.2%;
	height:52px;
}


.star
{
    top:5%;
    left:20%;
    position:absolute;
    z-index:101;
    -moz-animation-delay:0s;
    -moz-animation-duration: 1500ms;
    -moz-animation-name: star_ani;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
	
    -webkit-animation-delay:0s;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-name: star_ani;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: infinite;
	
    -o-animation-delay:0s;
    -o-animation-duration: 1500ms;
    -o-animation-name: star_ani;
    -o-animation-timing-function: ease-in;
    -o-animation-iteration-count: infinite;
	
    -ms-animation-delay:0s;
    -ms-animation-duration: 1500ms;
    -ms-animation-name: star_ani;
    -ms-animation-timing-function: ease-in;
    -ms-animation-iteration-count: infinite;
	
}

@-moz-keyframes star_ani
{
    to{
        -moz-transform:rotate(1turn);
        
    }
}
@-webkit-keyframes star_ani
{
    to{
        -webkit-transform:rotate(1turn);
        
    }
}
@-o-keyframes star_ani
{
    to{
        -o-transform:rotate(1turn);
        
    }
}
@-ms-keyframes star_ani
{
    to{
        -ms-transform:rotate(1turn);
        
    }
}

.first_div, .second_div{
    
    height:100%;
    background: rgba(100, 120, 140, 0.8);
    z-index:100;
    /*position:absolute;*/
}
.first_div>div{
    
    float:left;
    height:100px;
    width:30%;
    background:rgba(150, 200, 120, 0.8);
    color:white;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0px 5px 5px lightgray;
    cursor:pointer;
    font-size:4rem;
}

.first_div>div:hover
{
    box-shadow: 0px 5px 5px wheat;
}
.first_div>div>span
{
    position:absolute;
    top:30%;
    left:25%;
}
.first_div>div>span>sup
{
    font-size:1rem;
    color:black;
}

.second_div>p{
    background:rgba(160, 80, 40, 0.5);
    color:white;
    font-weight: bold;
    line-height: 50px;
    cursor:pointer;
}
.second_div>p:hover{
    background:rgba(200, 80, 40, 0.5);
    line-height: 50px;
}

.video_div
{
	position:absolute;
	z-index:1000;
}

.play, .back
{
	width:10%;
	height:100px;
	background-size:100% 100%;
	display:inline-block;
	margin:2px;
	cursor:pointer;
	color:white;
	text-align:center;
}
.play:active, .back:active
{
	width:9%;
	height:95px;
}
.play:hover, .back:hover
{
	width:11%;
	height:105px;
}

.game_at_first
{
    position:absolute;
    z-index:11;
    height:100%;
    width:100%;
}

.multimodeon_username, .vs_div, .vs_div1
{
    background:gray;
    box-shadow: 1px 4px 5px lightgray;
    height:50%;
    top:10%;
    border-radius: 100px 20px 100px 20px;
    padding-top: 10%;
    padding-left: 10%;
}
.multimodeon_username label
{
    color:white;
    font-weight: bolder;
    font-size :18px;
}
input[type=text]
{
    box-shadow: 1px 2px 2px cyan;
}
.multimodeon
{
    position:absolute;
    height:100%;
    width:100%;
    z-index:12;
    background:blueviolet;
}

.multimodeon_online
{
    z-index: 10;
    height:100%;
    position: absolute;
    background:black;
}
.receive_notification, .online_player, .my_name, .send_notification
{
    border-left:2px solid gray;
    background: rgba(150,150,170,0.5);
}
.my_name
{
    height:20%;
    border-bottom:2px solid gray;
    background:lightblue;
}
.receive_notification, .online_player, .send_notification
{
    height:80%;
}

.multimodeon_online>.my_name
{
    text-align: center;
    color:lightblue;
}

.onlineplayer
{
    cursor:pointer;
}
.onlineplayer>h2
{
	color:white;
}
.onlineplayer:nth-child(odd)
{
    background:gray;
}
.onlineplayer:nth-child(even)
{
    background:darkgray;
}

.waitForReplay
{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(200, 200, 255, 0.5);
	z-index:1000;
}
.waitForReplay>div>div
{
	font-size:35px;
	color:white;
	width:20px;
	height:20px;
	margin:10px;
	-moz-transform:rotate(0deg);
	-moz-animation-name:waitAni;
	-moz-animation-duration:3s;
	display:inline-block;
	position:absolute;
	-moz-animation-delay:0s;
	-moz-animation-timing-function:linear;
	-moz-animation-iteration-count:infinite;
		
}
@-moz-keyframes waitAni
{
		to{
		-moz-transform:rotate(1turn);
		}
}

.kill_bakri_count_ani{
    -webkit-animation-duration: 0.3s;
    -webkit-animation-name:bakri_count_ani;
    -moz-animation-duration: 0.3s;
    -moz-animation-name:bakri_count_ani;
    animation-duration: 0.3s;
    animation-name:bakri_count_ani;
}


@-webkit-keyframes bakri_count_ani
{
	0%
	{
		font-size:40px;
	}
        100%
	{
		font-size:20px;
	}
}
@-moz-keyframes bakri_count_ani
{
	0%
	{
		font-size:40px;
	}
        100%
	{
		font-size:20px;
	}
}
@keyframes bakri_count_ani
{
	0%
	{
		font-size:40px;
	}
        100%
	{
		font-size:20px;
	}
}


.win_star img{
    width:20px;
    margin:5px 10px;
    transform:scale(0);
    transition-duration: 1s; 
}

.win_star img:nth-child(odd){
    transform:translateY(8px) scale(0);
    transition-duration: 1s; 
}
.win_star_ani img{
    transform:scale(1);
    transition-duration: 1s; 
}

.win_star_ani img:nth-child(odd){
    transform:translateY(8px) scale(1);
    transition-duration: 1s; 
}

.winner_pic{
    width:50px;
    position: absolute;
    top: 0px;
}
.winner_pic_left{
    transform: rotate(-30deg);
    left: 0px;
}
.winner_pic_right{
    transform: rotate(30deg);
    right: 0px;
}

/*********** Game Demo Style*********/
.message-box-hidden{
    transition-duration: 0.5s;
    transform-origin: center;
    transform: translateX(500px) scale(0);
}
.message-box-show{
    transition-duration: 0.5s;
    transform-origin: center;
    transform: translateX(0px) scale(1);
}

.demo_bakri_marker{
    transform:translateY(100px) scale(1);
    animation-name : markerAni;
    animation-duration: 0.2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function:easy-out;
    transform-origin: center;
}

@keyframes markerAni
{
	100%
	{
		transform:translateY(90px) scale(0.9);
	}
}

.marker-hidden{
    transition-duration: 1s;
    opacity:0;
    visibility: hidden;
}

.demo_play_btn{
    transform: rotateY(180deg);
    transform-origin: center;
    -webkit-transform: rotateY(180deg);
    -webkit-transform-origin: center;
}