@font-face{font-family:HelveticaNeueLTArabic-Bold;src:url(../fonts/HelveticaNeueLTArabic-Bold.ttf);font-weight:bold}



body{
    font-family: 'HelveticaNeueLTArabic-Bold';

        background: #0097DB;

}
.swal-wide{
    width:800px !important;
    height:600px !important;

}
.borderd {
    height: 120px;
    width: 180px;
    border: solid 1px #0a53be;

    animation: border-dance 1s infinite linear;
}
@keyframes border-dance {
    0% {
        border: solid 5px #fd7e14;
    }
    100% {
        border: solid 5px #000000;
    }
}
*{
        /*box-shadow: inset 0px 0px 3px red;*/

}
.Ture {
    height: 120px;
    width: 180px;
    border: solid 5px #28a745 !important;}
.False {
    height: 120px;
    width: 180px;
    border: solid 5px #dc3545 !important;}
@keyframes fly-in {
    0% {
        transform: rotateY(540deg) rotateX(1080deg) translateZ(400px) translateX(80px) translateY(0);
    }
    40% {
        transform: rotateY(0deg) rotateX(0) translateZ(0) translateX(0) translateY(0);
    }
    60% {
        transform: rotateY(90deg) rotateX(0) translateZ(0) translateX(100px) translateY(1000px);
    }
    80% {
        transform: rotateY(180deg) rotateX(0) translateZ(0) translateX(0) translateY(0);
    }
    100% {
        transform: rotateY(0) rotateX(0) translateZ(0) translateX(0) translateY(0);
    }
}

@keyframes fly-out {
    0% {
        transform: rotateY(540deg);
    }
    40% {
        transform: rotateY(0deg);
    }
    60% {
        transform: rotateY(90deg) ;
    }
    80% {
        transform: rotateY(180deg) ;
    }
    100% {
        transform: rotateY(90deg) ;
    }
}
.card-holderd{
    animation-name:fly-in;
    animation-duration:7s;
    animation-direction:alternate;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
}
.card-holderd.div1{
    animation-delay:.5s;
}
.card-holderd.div2{
    animation-delay:1s;
}
.card-holderd.div3{
    animation-delay:1.5s;
}
.card-holderd.div4{
    animation-delay:2s;
}
.card-holderd.div5{
    animation-delay:2.5s;
}
.card-holderd.div6{
    animation-delay:3s;
}
.card-holdedr.div7{
    animation-delay:3.5s;
}



.card-holder{
    transform-style: preserve-3d;
    backface-visibility: hidden;
    position:relative;
    width:300px;
    height:300px;
    display:inline-block;
    box-shadow:1px 2px 2px rgba(0,0,0,.8);
    margin:2px;
}
.card-holder:hover {
    box-shadow:0px 3px 6px rgba(0,0,0,.7);
}
.clickable:active{
    transform:scale(.9);
}
.card{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    backface-visibility: hidden;
    transform: rotateY( 180deg );
    background:url(../img/back.jpg);
    /*background:
    linear-gradient(135deg, #f26c32 0%,#c146a1 50%,#a80077 51%,#f9703e 100%);*/
    background-size:cover;
    border-radius:2%;
    box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #fff;
    display:block;
    border:1px solid black;
}
.back {
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #fff;
    transform-style: preserve-3d;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    backface-visibility: hidden;
    background: url(../img/back.jpg);

    background-size:cover;
    border-radius:2%;
    display:block;
    width:100%;
    height:100%;
    border:1px solid black;


}
.back:after {
    backface-visibility: hidden;
    position:absolute;
    dispay:block;
    content:'';
    background-repeat:no-repeat;
    background-position:
            bottom center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center;
    width:14%;
    height:27%;
    top:4%;
    left:4%;
}
.back:before {
    backface-visibility: hidden;
    position:absolute;
    dispay:block;
    content:'';
    background-repeat:no-repeat;
    background-position:
            bottom center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center,
            top center;
    width:14%;
    height:27%;
    bottom:4%;
    right:4%;
    transform: rotate( 180deg );

}



.card-holderg{
    animation-name:fly-out;
    animation-duration:2s;
    animation-direction:alternate;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
}
.card-holderg.div1{
    animation-delay:.5s;
}
.card-holderg.div2{
    animation-delay:1s;
}
.card-holderg.div3{
    animation-delay:1.5s;
}
.card-holderg.div4{
    animation-delay:2s;
}
.card-holderg.div5{
    animation-delay:2.5s;
}
.card-holderg.div6{
    animation-delay:3s;
}
.card-holderg.div7{
    animation-delay:3.5s;
}
.flip-card-inner {
    transform: rotateY(180deg);
}
#defaultCountdown { width: 100%; height: 100px;color:white ; font-size: 30px;border: 0px;}


@keyframes color-change {
    0% { color: white ; }
    25% { color: red ; }
    75% { color: white ; }
    100% { color: white ; }

}
.radio-inline {
    display: inline;
    padding-left: 0;
    padding-right: 20px;
}
.radio-inline input {
    margin-left: 0;
    margin-right: -20px;
}
input[type=radio] {
    transform: scale(5.5);
    margin-left: 30px;
    margin-right: 30px;
}
.mid-center {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
}
:root {
    --font--1: 100px !important;
    --font--2: 50px !important;
    --font--3: 400px !important;
    --font--6: 600px !important;
    --font--4: 300px !important;
    --font--5: 200px !important;

}
.result2
{
    font-size: var(--font--5);
    color: green;
}
.result{
    font-size: var(--font--4);
}
.result3{
    font-size: var(--font--1);
}
.result4{
    font-size: var(--font--2);
}
.countdown-period {
    display: block;
    font-size: var(--font--1);
}
.countdown-descr {
    display: block;
    font-size: var(--font--1);
}
#Notes{
    font-size: var(--font--1);

}
#iPlay,#iPlay2{
    font-size: var(--font--1);
}
.Qfirst{
    font-size: var(--font--2);
margin-bottom: 50px !important;
}
.labelspan{
    font-size: var(--font--2);

}
.Qsecond {
    font-size: var(--font--2);
 color: white;
    animation-name:  color-change;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 1s;}

.Qlabel1{ color: white;direction: ltr!important;}
.Qlabel2{ color: white;direction: ltr!important;}
.Qlabel3{ color: white;direction: ltr!important;}
.Qlabel4{ color: white;direction: ltr!important;}



.swal-wide{
    width: 1000px  !important;
    height: 800px  !important;
    font-size: var(--font--2);

}