@font-face {
  font-family: iransans;
  src: url("fonts/IRANSANS(FANUM).TTF");
}
@font-face {
  font-family: sgkara;
  src: url("fonts/SGKARA-REGULAR.TTF");
}
body{
	padding: 0;
	margin: 0;
	direction: rtl;
}
.F-e{
	color: #E8614A;
}
.F-7{
	color: #79BC8C;
}
*{
	box-sizing: border-box;
	font-family: sgkara;
}
button{
	outline: none;
	border: unset;
}
.container{
	width: 80%;
	margin: auto;
}

.D-none{
	display: none!important;
}

a{
	text-decoration: none;
	color: #000000;
}

.btn{
	display: inline-flex;
	align-items: center;
	padding: 12px 36px;
	background: #FCE009;
	font-size: 24px;
	cursor: pointer;
	color: #000000;
        border-radius: 5px;
}
.btn:hover{

	background: #24ff88;

}
.btn-f{
	color: #FFFFFF;
	text-align: right;
	padding: 18px 12px;
	display: inline-flex;
	justify-content: right;
	font-size: 16px;
	height: 60px;
	border-radius: 5px;
}
.btn-f .icon{
	 margin-left: 8px;
}
.btn-f.gr-1{
	background: url(images/gr-1.png);
	background-size: 100% 100%;
}
.btn-f.gr-2{
	background: url(images/gr-2.png);
	background-size: 100% 100%;
}
.btn-f.gr-3{
	background: url(images/gr-3.png);
	background-size: 100% 100%;
}
.btn-s{
	align-items: center;
	background: #FFFFFF;
	border-radius: 4px;
	text-align: right;
	justify-content: right!important;
	border: 1px solid #D2D2D2;
	height: 52px;
	text-align: right;
	padding: 16px;
	font-size: 18px;
}
.btn-s .icon{
	margin-right: 0!important;
	margin-left: 8px;
}
.btn:disabled{
	background: #BEBEBE;
}
.btn .icon{
	height: 20px;
	margin-right: 12px;
	display: inline-flex;
	align-items: center;
}
.btn .icon img{
	height: 100%;
}
.btn .icon img{
}
.header-menu li{
	display: inline-block;
	padding: 0 16px;
}
.header-menu li a {
color: #737373;
    display: block;
    padding-bottom: 15px;
}
.first-section{
	width: 100%;
	height: 100vh;
	background: #feeb668c;
	position: relative;
	overflow: hidden;
}
.first-section .background-circle-holder{
	position: absolute;
	top: 0;
	right: 0;
	width: 100vw;
	height: 40vh;
}
.first-section .background-circle-holder .circle{
	position: absolute;
	border-radius: 50%;
	background: #FCE009;
	width: 50px;
	height: 50px;
	/*top: 17%;*/
	right: 1%;
	bottom: 12vh;
}
.first-section .background-circle-holder .left-circle{
	left: 0;
	right: unset;
	transform: translate(-50%,0);
	width: 140px;
	height: 140px;
	bottom: 0;
}
.first-section .inner-section{
	position: relative;
	height: 100vh;
}

.first-section .header{
	display: inline-flex;
	align-items: center;
	padding: 16px 0;
	justify-content: space-between;
	width: 100%;
}

.first-section .header .right-side{
	display: inline-flex;
	align-items: center;
	font-size: 18px;
}
section{
	margin-bottom: 60px;
}
section .title{
	position: relative;
	font-size: 52px;
}
section .title .shape{
	position: absolute;
	border-bottom: 30px solid #FCE009;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	height: 0;
	width: 16px;
	right: -10px;
	top: -10px;
	transform: rotate(35deg) translate(0,-50%);
}
section .title .shape:after,section .title .shape:before{
	content: '';
	box-sizing: border-box;
	position: absolute;
	border: inherit;
	height: inherit;
	width: inherit;
	right: -25px;
	transform: rotate(30deg) translate(10px,2px);
}
section .title .shape:after{
	transform: rotate(-30deg) translate(-8px,2px);
	right: 15px;
}
.first-section .title{
	font-size: 40px;
}
.description{
    font-size: 20px;
    margin: 30px 0;
    line-height: normal;
    text-align: justify;
}
.s-description{
	font-size: 20px;
}
.ss-description{
    font-family: iransans;
    font-size: 12px;
	line-height: normal;
	margin: 5px 0;
        padding-top: 5px;
}
.first-section .main-content{
	width: 60%;
	margin-top: 40px;
        position: relative;
    z-index: 9999999;
}
.first-section .section-img{
	position: absolute;
	border-radius: 50%;
width: 500px;
	left: 0;
	z-index: 0;
	bottom: 40px;
}
.first-section .section-img.img-holder{
	position: absolute;
	z-index: 10;
	background: unset;
}
.first-section .section-img.img-holder img{
	/*width: 115%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;*/
    display: block;
    width: 80%;
}
.first-section .section-img{
}
.first-section:after{
	content: '';
	position: absolute;
	display: inline-block;
	border-right: 80vW solid transparent;
	border-bottom: 20vh solid #FFFFFF;
	border-left: 20vw solid transparent;
	bottom: 0;
	left: 0;
}

.row{
	display: inline-flex;
}
.row .img-side{
	flex-basis: 40%;
	display: inline-flex;
	align-items: center;
}
.row .img-side img{
	width: 90%;
	object-fit: contain;
}
.row .content-side{
	flex-basis: 60%;
        padding-top: 60px;
}
.Fd-r{
	flex-direction: row-reverse;
}
.J-left{
	justify-content: left;
}
.Ta-r{
	text-align: right;
}
.award-section .title{
	display: inline-block;
	text-align: center;
}
.award-section .title .shape{
	transform: unset;
	left: 50%;
	right: unset;
	top: -20px;
	transform: translate(0%,-50%);
}
.award-section .description{
	flex-basis: 100%;
	text-align: center;
}
.award-section .inner-section{
	width: 100%;
	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
}

.award-section .award-list{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 32px 0;
}
.award-section .award-list .award{
flex-basis: 30%;
    flex-basis: 312px;
    height: 312px;
    margin: 0 12px;
    align-items: center;
    display: inline-flex;
    background: #feeb66;
    overflow: hidden;
    padding: 30px;
    border-radius: 400%;
}
.award-section .award-list .award img{
	width: 100%;
}
footer{
	background: #feeb66;
}
footer .inner-footer{
	position: relative;
	display: inline-flex;
	justify-content: left;
	align-items: center;
	height: 90px;
	width: 100%;
}
footer .inner-footer .logo{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(0,-50%);
}
footer .inner-footer .social-holder{
	display: inline-flex;
}
footer .inner-footer .social-holder .social{
	display: inline-flex;
	margin: 0 4px;
	width: 42px;
	height: 42px;
	background: #FFFFFF;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
footer .inner-footer .social-holder .social:hover{

	background: #ffdf00;

}
footer .inner-footer .copyright{
	direction: ltr;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}


.game{

}
.signup-section{
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.signup-section .background{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}
.signup-section .background img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.game-page .sign-box{
	width: ;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 600px;
	padding: 30px;
	background: #FFFFFF;
	text-align: center;
	padding-top: 50px;
	border-radius: 8px;
	z-index: 1;
}
.game-page .sign-box.product-box{
	width: unset;
}
.sign-shape-holder{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	/*overflow-x: hidden;*/
	border-radius: inherit;
	z-index: -1;
}
.sign-shape-holder .shape{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0%;
	border-radius: inherit;
	/*overflow: hidden;*/
	z-index: -1;
}
.sign-shape-holder .shape:after,.sign-shape-holder .shape:before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	left: -5%;
	z-index: -2;
	/*border-radius: 6% 94% 94% 6% / 49% 47% 53% 51% ;*/
	border-radius: 3% 97% 97% 3% / 49% 47% 53% 51% ;
}
.sign-shape-holder .shape:before{
	transform: rotate(-180deg);
	right: -5%;
	left: unset;
}
.game-page .sign-box .logo{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
}
.game-page .sign-box .title{
    font-size: 24px;
    margin: 8px 0;
    margin-top: 0px;
    margin-bottom: 20px;
}

.game-page .sign-box .b-title{
	font-size: 24px;
	width: 100%;
	text-align: right;
}
.game-page .sign-box .input-holder{
	margin: 16px 0;
}
.input-holder{
	display: inline-flex;
	align-items: center;
	width: 100%;
	border: 2px solid #FDE00A;
	border-radius: 8px;
}
.input-holder input{
	border: unset;
	outline: unset;
	height: 100%;
	flex-basis: 60%;
	padding: 0 8px;
}
.input-holder .btn{
	flex-basis: 40%;
	justify-content: center;
}
.game-page .sign-box .product-list{
	display: inline-flex;
	width: 100%;
	margin: 16px 0;
}
.game-page .sign-box .product{
	display: inline-flex;
	align-items: center;
	border-radius: 50%;
	flex-basis: 180px;
	width: 180px;
	height: 180px;
	border: 1px solid #E6E6E6;
	transition: border .3s;
	justify-content: center;
	margin: 0 8px;
	cursor: pointer;
}
.game-page .sign-box .product.active{
	border: 1px solid #FFD045;
}

.game-section{
	display: inline-flex;
	height: 100vh;
	width: 100%;
	justify-content: space-between;
}
.game-section .right-side{
    flex-basis: 45%;
    height: 100%;
    background: #FFFAD6;
    position: relative;
    padding: 15px;
    padding-right: 5px;
    padding-left: 5px;
}
.game-section .right-side .logo{
	position: absolute;
	left: 0;
	top: 20px;
	transform: translate(-50%,0);
	z-index: 1;
}
.game-section .right-side .user-info{
	display: none;
}
.des-item{
	display: inline-flex;
	align-items: center;
	margin-top: 15px;
	width: 100%;
	justify-content: space-between;
}
.des-item div{
	display: inline-flex;
	align-items: center;
}
.des-item .btn{
	float: left;
	position: relative;
	display: none;
}
.des-item .btn:before{
	content: '100 امتیاز';
	position: absolute;
	color: #BFBFBF;
	top: 0;
	transform: translate(0,-100%);
	font-size: 12px;
}
.des-item .icon{
	display: inline-flex;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	background: #FDE00A;
	border-radius: 4px;
	margin-left: 10px;
}

.pass-prediction{
	width: 100%;
	margin: 20px 0;
}
.pass-prediction .header{
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 15px;
}
.pass-prediction .header .title{
	font-size: 24px;
}
.pass-prediction .header .point-holder{
	font-size: 16px;
	font-family: iransans;
}
.pass-input-holder{
	display: inline-flex;
	justify-content: space-between;
	height: 52px;
}
.pass-input-holder .input{
	flex-basis: 23%;
	display: inline-flex;
	height: 100%;
}
.pass-input-holder .input input{
	width: 100%;
	outline: none;
	border: none;
	background: #D9D9D9;
	text-align: center;
}
.pass-input-holder .btn{
	height: 100%;
}
.pass-input-holder .dice{
}

.right-side .btn-holder{
	text-align: center;
}
.game-section .left-side{
	background: #FFDF00;
	flex-basis: 60%;
	height: 100%;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.game-section .left-side .game-back{
    position: relative;
    /* width: 90%; */
    height: 80vh;
    width: fit-content;
    /* width: 80%; */
    /* max-width: 90%; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.game-section .left-side .game-back img{
	/*position: absolute;*/
	/*width: 100%;*/
	/*max-height: 100%;*/
	/*height: 100%;*/
	/*width: 100%;*/
	object-fit: cover;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.game-section .left-side .game-back .map-holder{
	position: absolute;
	width: 100%;
	height: fit-content;
	/*width: fit-content;*/
	/*height: fit-content;*/
}
.game-section .left-side .game-back .map-img{
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	/*height: 70vh;*/
	position: absolute;
	width: 90%;
}
.game-section .left-side .game-back .map-img:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline-block;
	width: 100px;
	height: 100px;
	background: #cccccc;
}
.game-section .left-side .game-back .product{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10%;
	height: 10%;
	transform: translate(40%,-40%);
	transition: left 1s,bottom 1s ease;
}
.game-section .left-side .game-back .product.a-n1{
	transition: left .2s,bottom .2s!important;
}
.startgame1{
	left: -8% !important;
}
.m-1{
	left: 0% !important;
}
.m-2 {
	left: 14.5% !important;
}
.m-3{
	left: 31%!important;
}
.m-4{
	left: 47.5%!important;
	bottom: 1%!important;
}
.m-5{
	left: 63.5%!important;
	bottom: 1%!important;
}
.m-6{
	left: 83%!important;
	bottom: 3%!important;
}
.m-7{
	left: 81%!important;
	bottom: 16%!important;
}
.m-8{
	left: 64%!important;
	bottom: 18%!important;
}
.m-9{
	left: 47.2%!important;
	bottom: 18%!important;
}
.m-10{
	left: 30.5%!important;
	bottom: 18%!important;
}
.m-11{
	left: 14.8%!important;
	bottom: 18%!important;
}
.m-12{
	left: .1%!important;
	bottom: 20%!important;
}
.m-13{
	left: 1.5%!important;
	bottom: 34%!important;
}
.m-14{
	left: 13.7%!important;
	bottom: 37%!important;
}
.m-15{
	left: 30.3%!important;
	bottom: 34%!important;
}
.m-16{
	left: 47.2%!important;
	bottom: 34%!important;
}
.m-17{
	left: 64.1%!important;
	bottom: 36%!important;
}
.m-18{
	left: 80.1%!important;
	bottom: 38%!important;
} 
.m-19{
	left: 78%!important;
	bottom: 49%!important;
}
.m-20{
	left: 63.8%!important;
	bottom: 51%!important;
}
.m-21{
	left: 47.5%!important;
	bottom: 51%!important;
}
.m-22{
	left: 30.8%!important;
	bottom: 52%!important;
}
.m-23{
	left: 14.8%!important;
	bottom: 53%!important;
}
.m-24{
	left: 0%!important;
	bottom: 53%!important;
}
.m-25{
	left: 2%!important;
	bottom: 66%!important;
}
.m-26{
	left: 14.5%!important;
	bottom: 69%!important;
}
.m-27{
	left: 30.8%!important;
	bottom: 69%!important;
}
.m-28{
	left: 47.5%!important;
	bottom: 69%!important;
}
.m-29{
	left: 64.2%!important;
	bottom: 69%!important;
}
.m-30{
	left: 79.9%!important;
	bottom: 70%!important;
}
.m-31{
	left: 79.9%!important;
	bottom: 83%!important;
}
.m-32{
	left: 63.5%!important;
	bottom: 84%!important;
}
.m-33{
	left: 47.5%!important;
	bottom: 84%!important;
}
.m-34{
	left: 30.5%!important;
	bottom: 84%!important;
}
.m-35{
	left: 15%!important;
	bottom: 84%!important;
}
.m-36{
	left: -.8%!important;
	bottom: 82%!important;
}
.game-section .left-side .game-back .product img{
	width: 100%;
}
.game-section .left-side{
	flex-wrap: wrap;
}
.game-section .left-side .pass-prediction{
	width: 100%;
	display: none;
}
.user-info{
	position: absolute;
	left: 0;
	height: 50px;
	top: 0;
	display: inline-flex;
	align-items: center;
	padding: 42px;
}

.user-info .img{
	width: 58px;
	height: 58px;
	background: #2F459C;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	position: relative;
	margin-left: 8px;
}
.user-info .img img{
	/*width: 80%;*/
	height: 80%;
	position: relative;
	z-index: 1;
}
.user-info .img:before{
	content: '';
	position: absolute;
	width: 50%;
	height: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: inline-block;
	/*background: #cccccc;*/
	box-shadow: 0px 14px 44px 2px #FFFFFFCC;
	z-index: 0;
}

.games{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	right: 0;
	z-index: 10;
	background: #FCE009;
}
.games .background{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.games .game-picker-holder{
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
	gap: 16px;
	margin: 16px 0;
}
.games .game-picker-holder .game-picker{
	position: relative;
	cursor: pointer;
	color: #FFFFFF;
	transform: translate(0,0);
	border-radius: 4px;
	overflow: hidden;
	transition: transform .3s, color .3s;
	width: 30%;
}
.games .game-picker-holder .game-picker:hover{
opacity:.7;
}
.games .game-picker-holder .game-picker img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.games .game-picker-holder .game-picker:hover{
	/*transform: translate(0,-10px);*/
}
.games .game-picker-holder .game-picker:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.9) 73.5%);
}
.games .game-picker-holder .game-picker .g-title{
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 1;
	font-size: 20px;
}
.games .game-picker-holder .game-picker.active{
	color: #FFDF00;
	transform: translate(0,-10px);
}
.games .sign-box .i-filter{
	display: none;
	min-width: 300px;
}
.games .sign-box.i-game-picker .i-game-picker,.games .sign-box.i-question-box .i-question-box,.games .sign-box.i-right-answer .i-right-answer,.games .sign-box.i-wrong-answer .i-wrong-answer,.games .sign-box.i-timeout .i-timeout,.games .sign-box.i-first-game .i-first-game,.games .sign-box.i-game-end .i-game-end,.games .sign-box.i-chance-box .i-chance-box{
	display: block;
}

.timer{
	display: inline-flex;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #FFF7D2;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	color: #E8614A;
	position: relative;
}
.timer:after{
	content: 'ثانیه';
	position: absolute;
	font-size: 14px;
	color: #636363;
	left: 0;
	bottom: 0;
	transform: translate(-100%,0);
}
.timer .time{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;	
}
.games .sign-box .question-box{
    display: inline-flex;
    gap: 8px;
    margin: 15px;
    margin-right: 0px;
    margin-left: 0px;
}
.games .sign-box .question-box .question{
	background: #FFFAD6;
	border: 1px solid #FFC200;
	cursor: pointer;
	padding: 12px 0;
	width: 200px;
	transition: all .3s;
    font-size: 12px;
}
.games .sign-box .question-box .question:has(input:checked){
	background: #FFC200;
	font-weight: 900;
}
.games .sign-box .question-box .question input{
	display: none;
}

.i-right-answer .title,.i-wrong-answer .title{
	width: 500px;
}

.game-player{
	position: fixed;
	width: 100vw;
	top: 0;
	right: 0;
	height: 100vh;
	background: #FFFFFF;
	z-index: 10;
}

.game-player .first-game{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: inline-flex;
	width: 80%;
	height: 90%;
	background: #cccccc;
}

.i-first-game iframe{
	width: 800px;
	height: 400px;
}


.dice-container {
    position: relative;
    direction: ltr;
    width: 100px;
    margin: auto;
    transform: scale(0.6);
    box-shadow: 0px 0px 58px #fbdf0a;
}
.i-game-end{
	min-width: 600px;
}
.i-game-end .point{
	position: relative;
}
.i-game-end .point:after{
	content: '';
	display: inline-block;
	width: 100%;
	height: 30%;
	background: #FDE00A;
	position: absolute;
	bottom: 6px;
	right: 0;
	z-index: -1;
}
.i-game-end .btn-holder{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 8px 0;
        width: 100%;
}
.i-game-end .btn-holder .btn{
    margin: 10px 0;
    flex-basis: 100%;
}
.i-game-end .btn-holder .copy-btn{
	background: #E8614A1C;
	padding: 0;
	color: #000000;
	align-items: center;
        width: 100%;
    overflow: hidden;
}
.copy-btn:hover {
background:#fde00a6b !important;
}
.i-game-end .btn-holder .copy-btn span{
	display: inline-flex;
	align-items: center;
}
.i-game-end .btn-holder .copy-btn .icon{
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #E8614A;
	border-radius: 4px;
	margin: 0;
	margin-left: 8px;
}
.i-game-end .btn-holder .copy-btn .icon img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    padding: 4px;
}

.dice-container *{
    direction: ltr;
}
/* Dice Element */

.dice{
    position: relative;
    width:100px;
    height:100px;
    transform-style: preserve-3d;
    transition: transform 1s;
    
}
/* Dice Faces */
.dice-face{
    position: absolute;
    width:100px;
    height:100px;
    padding: 5px;
    border: 1px solid #838383;
    border-radius: 5px;
    background-color: #e3e3e3;
    backface-visibility: hidden;
}
/* Dice Dots */
.dot{
    /* position: absolute; */
    height: 10px;
    width: 10px;
    background-color: #000000;
    border-radius: 50% 50%;
    box-shadow: 0px 0px 5px #00000094;
}

/* Organizing Dice Faces Dots */

.dice-face[data-face="1"]{
    display: flex;
    align-items: center;
    justify-content: center;
}
.dice-face[data-face="2"]{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="3"]{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="3"] .dot:nth-child(1){
    transform: translateX(-25px);
}
.dice-face[data-face="3"] .dot:nth-child(3){
    transform: translateX(25px);
}
.dice-face[data-face="4"]{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="4"] .dot:nth-child(1){
    transform: translate(7px, -17px);
}
.dice-face[data-face="4"] .dot:nth-child(2){
    transform: translate(36px, -16px)
}
.dice-face[data-face="4"] .dot:nth-child(3){
    transform: translate(-32px, 22px)
}
.dice-face[data-face="4"] .dot:nth-child(4){
    transform: translate(-3px, 22px)
}

.dice-face[data-face="5"]{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="5"] .dot:nth-child(1){
    transform: translate(7px, -17px);
}
.dice-face[data-face="5"] .dot:nth-child(2){
    transform: translate(44px, -15px)
}
.dice-face[data-face="5"] .dot:nth-child(3){
    transform: translate(1px, 4px)
}
.dice-face[data-face="5"] .dot:nth-child(4){
    transform: translate(-42px, 24px)
}

.dice-face[data-face="5"] .dot:nth-child(5){
    transform: translate(-4px, 25px)
}
.dice-face[data-face="6"] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 15px;
}
.dice-face[data-face="6"] .dot {
    transform: translate(14px, 7px);
}


/* Dice Face to show if Face value is set */

.dice-face[data-face="1"] {
    transform: translateZ(3.1em); 
}
  
.dice-face[data-face="6"] {
transform: rotateY(90deg) translateZ(3.1em); 
}

.dice-face[data-face="3"] {
transform: rotateY(-90deg) translateZ(3.1em); 
}

.dice-face[data-face="4"] {
transform: rotateX(90deg) translateZ(3.1em); 
}

.dice-face[data-face="5"] {
transform: rotateX(-90deg) translateZ(3.1em); 
}

.dice-face[data-face="2"] {
transform: rotateY(-180deg) translateZ(3.1em); 
}

.dice.rolling{
    animation:roll .6s ease-in-out infinite
}
@keyframes roll{
    0%{
        transform: rotateX(0deg) rotateZ(0deg);
    }
    25%{
        transform: rotateX(90deg) rotateZ(90deg);
    }
    50%{
        transform: rotateX(180deg) rotateZ(180deg);
    }
    75%{
        transform: rotateX(360deg) rotateZ(360deg);
    }
    100%{
        transform: rotateX(180deg) rotateZ(180deg);
    }
}
.dice[data-face="1"]{
    transform: rotateX(0deg) rotateZ(0deg);
}
.dice[data-face="2"]{
    transform: rotateX(180deg) rotateZ(0deg);
}
.dice[data-face="3"]{
    transform: rotateY(90deg) rotateZ(0deg);
}
.dice[data-face="4"]{
    transform: rotateX(270deg) rotateZ(0deg);
}
.dice[data-face="5"]{
    transform: rotateX(90deg) rotateZ(0deg);
}
.dice[data-face="6"]{
    transform: rotateY(270deg) rotateZ(0deg);

}

.popup{
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background: #000000B2;
	z-index: 10;
}
.popup .box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #FFFFFF;
	display: inline-flex;
	/*width: 100px;*/
	/*height: 100px;*/
	padding: 16px;
	flex-wrap: wrap;
}
.popup .box .header{
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}
.popup .box .header .exit{
	border: 2px solid #E8614A;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.popup .box .pass-input-holder{
	margin: 20px 0;
}
.popup .box .pass-input-holder .input{
	flex-basis: 32%;
}
.popup .box .btn{
	width: 100%;
	justify-content: center;
}
.share-popup .btn-holder{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.share-popup .btn-holder .btn{
	flex-basis: 48%;
	margin: 16px 0;
}
.share-popup .share-link{
	display: inline-flex;
	color: #868686;
	justify-content: space-between;
	width: 100%;
}
.share-popup .share-link .text-holder{
	flex-basis: 70%;
	width: 70%;
	direction: ltr;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-popup .share-link .text-holder .text{
	width: 100%;
	overflow: hidden;
	  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-popup .share-link .btn{
	flex-basis: 28%;
	width: 28%;
	white-space: nowrap;
}
@media screen and (max-width: 1200px) {
	.first-section .section-img{
	        width: auto;
        bottom: 0px;
	}
	.btn{
		font-size: 20px;
	}
	.btn-f{
		font-size: 14px;
	}
	.first-section .title{
		font-size: 36px;
	}
	section .title{
		font-size: 48px;
	}
	.award-section .award-list .award{
		flex-basis: 200px;
		height: 200px;
	}
	.game-page .sign-box .product{
		flex-basis: 140px;
		width: 140px;
		height: 140px;
	}
	.game-page .sign-box .product img{
		height: 80%;
	}	
}
@media screen and (max-width: 1000px) {
	.first-section .section-img{
        width: auto;
        bottom: 0px;
	}	
	.first-section .main-content{
		width: 100%;
		text-align: center;
	}
	.first-section:after{
		content: '';
		position: absolute;
		display: inline-block;
		border-right: 80vW solid transparent;
		border-bottom: 15vh solid #FFFFFF;
		border-left: 15vw solid transparent;
		bottom: 0;
		left: 0;
	}
	.header .right-side .header-menu{
		padding: 0;
	}
	.description,.first-section .header .right-side{
		font-size: 18px;
		line-height: 32px;
	}
	.header-menu li{
		padding: 0 8px;
	}
	.game-section .left-side .game-back{
		width: 400px;		
		height: 400px;		
	}
	.logo{
		width: 150px;
	}
	.logo img{
		width: 90%;
	}
	.btn{
		font-size: 18px;
	}
	.btn-f{
		font-size: 16px;
	}

	section .title{
		font-size: 36px;
	}
	footer .inner-footer{
		padding-top: 40px;
		text-align: center;
		flex-wrap: wrap;
		justify-content: center;
		display: block;
		height: unset;
	}
	footer .inner-footer .copyright{
		position: static;
		display: block;
		text-align: center;
		transform: unset;
		padding: 20px 0;
	}
	footer .inner-footer .logo{
		left: 50%;
		transform: translate(-50%,-50%);
		right: unset;
	}
	.games .sign-box .question-box{
		flex-wrap: wrap;	
		justify-content: center;
	}
	.games .sign-box .question-box .question{
		flex-basis: 46%;
	}
	.game-page .sign-box .product-list{
		flex-wrap: wrap;
		width: 500px;
		justify-content: center;
		margin: 8px 0;
	}
	.game-page .sign-box.product-box{
		padding: 10px ;
		padding-top: 50px;
	}
	.game-page .sign-box.product-box .description{
		margin: 12px 0;
	}
	.game-page .sign-box .product{
		width: 130px;
		height: 130px;
	}
}

@media screen and (max-width: 800px) {
	.game-section{
		flex-wrap: wrap;
	}
	.game-section .right-side{
		flex-basis: 100%;
		height: unset;
                padding-top: 0px;
	}
	.game-section .right-side .title{
		display: none;
	}
	.game-section .right-side .logo{
        position: static;
        transform: unset;
        margin: 0 auto;
	}
	.game-section .left-side{
		flex-basis: 100%;
		height: unset;
		padding: 20px 0;
	}
	.game-section{
		overflow: unset;
	}
	.game-section .right-side .header{
        padding: 30px 0;
        padding-top: 10px;
        text-align: center;
                padding-bottom: 15px;
	}
	.game-section .right-side .user-info{
		display: inline-flex;
                font-size: 14px;
                display:none;
	}
	.game-section .right-side .pass-prediction{
		display: none;
	}
	.des-item{
		margin-top: 4px;
                font-size: 12px;
	}
	.game-section .left-side .user-info{
		display: none;
	}
	.dice-holder{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80px;
		overflow: hidden;
	}
	.dice-holder .dice-container{
		display: inline-flex;
		flex-basis: 100px;
		display: inline-block;
		width: 100px;
		margin: unset;
	}
	.left-side .btn{
		background: #FFFAD6;
	}
	.left-side .ss-description{
		display: block;
		text-align: center;
	}
	.game-section .left-side .pass-prediction{
		display: block;
	}
	.games .game-picker-holder{
		flex-wrap: wrap;
		justify-content: center;
		margin: 8px 0;
	}
	.games .game-picker-holder .game-picker{
		/*width: 170px;*/
		height: 120px;
	}
	.games .game-picker-holder .game-picker .g-title{
		font-size: 20px;
	}
	.game-page .sign-box.product-box{
		width: 70%;
	}
	.game-page .sign-box .title{
		font-size: 24px;
		margin: 0;
	}
	.game-page .sign-box .description{
		margin: 0;
        text-align: center;
	}
	.des-item .btn{
		display: block;
                font-size: 12px;
                        padding: 10px;
	}
}
@media screen and (max-width: 700px) {
	.game-section .left-side .game-back{
		width: 300px;		
		height: 300px;		
	}
	.description,.first-section .header .right-side{
		        font-size: 14px;
        padding: 15px;
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: normal !important;
	}
	.btn{
		padding: 12px 24px;
	}
	.btn-s,.btn-f{
		padding: 12px;
		font-size: 16px;
	}
	.first-section .title{
		font-size: 22px;
	}
	.row{
		flex-wrap: wrap;
		justify-content: center;
	}
	.row .content-side{
		flex-basis: 100%;
	}
	.row .content-side{
	}
	.award-section .award-list{
		flex-wrap: wrap;
	}
	.award-section .award-list .award{
		flex-basis: 200px;
		height: 200px;
		margin: 10px 0;
	}
	.game-page .sign-box.product-box{
		width: 80%;
		padding: 8px;
		padding-top: 30px;
	}
	.game-page .sign-box .title{
		width: unset;
		font-size: 24px;
	}
	.popup .box{
		width: 80%;
	}
	.i-game-end{
		min-width: unset;
	}
	.game-page .sign-box .product-list{
		width: 100%;
	}
	.game-page .sign-box .product{
		flex-basis: 120px;
		width: 120px;
		height: 120px;
	}
}
@media screen and (max-width: 600px) {
    .game-page .sign-box {
    width: 90%;
    
}
    .first-section .section-img.img-holder img{
	/*width: 115%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;*/
    display: block;
    width: 100%;
}
    .container{
        width: 100%;
        margin: auto;
        padding-right: 20px;
        padding-left: 20px;
}

	.first-section .header{
		justify-content: center;
	}
	.first-section .header .btn{
		display: none;
	}
	.first-section .header .header-menu{
		display: none;
	}
	.first-section .background-circle-holder{
		height: 70vh;
	}
	.first-section .background-circle-holder .circle{
		bottom: unset;
		top: 13vh;
	}
	.first-section .background-circle-holder .left-circle{
		top: unset;
	        top: 200px;
		width: 100px;
		height: 100px;
	}
	.row .img-side{
		flex-basis: 50%;
	}
	.row .content-side{
		text-align: center;
	}
	.row .content-side .title{
		display: inline-block;
	}
	.games .game-picker-holder{
		gap: 2px;
	}
	.games .game-picker-holder .game-picker{
	        flex-basis: 30%;
        margin: 15px 0;
	}
	.games .game-picker-holder .game-picker .g-title{
		        font-size: 12px;
	}
	.popup .box{
		width: 90%;
	}
	.share-popup .share-link .text-holder{
		width: 60%;
		flex-basis: 60%;
	}
	.share-popup .share-link .btn{
		width: 38%;
		flex-basis: 38%;
	}
	.game-page .sign-box .product{
		flex-basis: 100px;
		width: 100px;
		height: 100px;
	}
}
@media screen and (max-width: 500px) {
	.first-section .main-content{
		margin: 0;
	}
	.first-section .background-circle-holder .circle:not(.left-circle){
		width: 30px;
		height: 30px;
	}
	.first-section .section-img{
	        width: auto;
        bottom: 0px;
	}
	.description{
		line-height: 24px;
	}
	.row .img-side{
		flex-basis: 80%;
        padding-top: 15px;
	}
	.games .sign-box .question-box{
		width: 100%;
	}
	.games .sign-box .question-box .question{
		width: unset;
	}
	.game-page .sign-box .title{
		font-size: 20px;
	}
	.games .sign-box .i-filter{
		min-width: unset;
	}
	.games .game-picker-holder .game-picker{
		height: 100px;
	}
	.btn-s, .btn-f{
		/*padding: 12px;*/
		font-size: 14px;
	}
	.game-page .sign-box.product-box{
		width: 85%;
		padding: 8px 0;
		padding-top: 30px;
	}
}
@media screen and (max-width: 450px) {
	.game-page .sign-box .product{
		flex-basis: 90px;
		width: 90px;
		height: 90px;
	}
}
@media screen and (max-width: 350px) {
	.first-section .section-img{
	        width: auto;
        bottom: 0px;
	}
}
.background img {
        width: 100%;
    height: 100vh;
    object-fit: cover;
}
.ss2-description {
        color: red;
    font-family: iransans;
    font-size: 12px;
    line-height: 24px;
    margin: 5px 0;
    padding: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    font-weight: bold;
}
.pp-span {
        color: red;
    font-size: 14px;
    margin-right: 5px;
}
.p0 {
        padding-top: 0px !important;
}
.tcenter { 
        text-align: center;
}
.tfree {
        text-align: center;
    color: #4CAF50;
    padding: 0px;
    margin: 0px;
    margin-bottom: 15px;
}
.tass {
        color: #575757;
    background: #e5e5e5;
    padding: 10px;
    display: inline-block;
    border-radius: 400px;
    width: 40px;
    height: 40px;
}
.tip-errorBox {
        position: absolute;
    color: red;
    font-size: 8px;
    margin-top: 41px;
    margin-right: 10px;
}