.fs_logo{
	 width: 10vh;
    float: left;
}

.fs_center{
	width: 10vh;
    margin: 3vh auto 0vh;
}

.fz_logo{
	width: 10vh;
    float: right;
}

.jd_logo{
	    width: 37vh;
    display: block;
    margin: 11vh auto 1vh;
}



.playbtn{
	width: 41vh;
    margin: -4vh auto 0;
    display: block;
}

.playbtnred{
	width: 41vh;
    margin: -7vh auto 0;
    display: block;
}

    

.loading-jd{
	    width: 34vh;
    display: block;
    margin: 0 auto 3vh;
}

.rot{
	width:8vh;
}

.carousel{
	margin-top: 2vh;
}

.jd-inner{
	width: 25vh;
    display: block;
    margin: 0vh auto 1vh;
}

.jd-inner-ingame{
	    width: 20vh;
    display: block;
    margin: 8vh auto 1vh;
    float: none;
}
#timer{
   top: 12vh;
    position: absolute;
    left: 3vh;
    color: white;
    font-size: 4vh;
}
.score{
	font-size: 6vh;
    position: fixed;
    bottom: 1vh;
    left: 1vh;
}



.nicework{
	    width: 35vh;
    display: block;
    margin: 12vh auto 2vh;
}

.scorecard{
	    background-image: url(../images/scorecard.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 19vh;
    height: 14vh;
    margin: 0 auto;
}

.scorecard2{
	    background-image: url(../images/scorecard2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 39vh;
    height: 13vh;
    margin: 0 auto;
}


.scorecard p{
	font-size: 8vh;
}

.scorecard2 p{
	font-size: 4.5vh;
    padding-top: 2vh
}

.carousel-indicators .active{
	width: 14px;
    height: 14px;
  
}

.carousel-indicators li{
	width: 12px;
    height: 12px;
    border: 1px solid #0a436b;
}  

.pagain{
	width: 18vh;
    display: inline-block;
    margin: 3vh auto 1vh;
    margin-right: 1vh;
}

.hm{
	width: 18vh;
    display: inline-block;
    margin: 3vh auto 1vh;
}

.infotext{
        color: #ffffff;
    text-shadow: -1px 1px 2px rgb(80, 0, 100);
    font-size: 3.5vh!important;
    -webkit-text-stroke-width: .1vh;
    -webkit-text-stroke-color: rgba(131, 54, 146, 1);
    line-height: 5vh;
}

.holdercircle{
	    position: relative;
    margin: 3vh auto 0;
    width: 41vh;
    height: 41vh;
    left: 9px;
}


.match{
	z-index: 100;
    width: 40vh;
   
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%,100%);
    display: none;
    pointer-events: none;
}


.circle{
	    z-index: -1;
    left: -8px;
    right: 0px;
    top: 2px;
    bottom: 0;
    position: absolute;
    margin: -2vh auto 0;
    width: 41vh;
}

.jd{
	width: 18vh;
    top: 0;
    margin: auto 0;
    position: relative;
    left: 0;
    cursor: pointer;
}

.fm{
	width: 18vh;
    bottom: -3px;
    right: 0;
    margin: auto 0;
    position: relative;
    cursor: pointer;
}

.wf{
	width: 18vh;
    bottom:-3px;
    left: 0;
    margin: auto 0;
    position: relative;
    cursor: pointer;
}

.sf{
	    width: 18vh;
    top: 0;
    right: 0;
    margin: auto 0;
    position: relative;
    cursor: pointer;
}

.banner{
	width: 36vh;
    margin: auto 0;
}

.jd_logo_mainmenu{
	    width: 29vh;
    display: block;
    margin: 1vh auto 1vh;
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.choose{
	    width: 10vh;
    position: absolute;
    top: -2vh;
    left: -2px;
}

.top-area-landing-red{

  position: fixed;
    background-image: url(../images/backred.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 100;
    background-color: #d0cec1;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;


}

.top-area-landing-purple{

  position: fixed;
    background-image: url(../images/backpurple.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 100;
    background-color: #d0cec1;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;


}

.card .back {
  background: url('#');
  background-size: contain;
  background-position: center;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  background-repeat: no-repeat;
         background-size: contain;
    width: 100%;
    height: 12vh;
}

.card .front {
  background: url('../images/back.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
        background-size: contain;
    width: 100%;
    height: 12vh;
}

.card {

      margin-bottom: 2vh;

        width: 100%;
 height: 12vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;

}

.card.flipped {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.card div {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}



.fm_logo{
	    width: 20vh;
    display: block;
    margin: 11vh auto 3vh;
}

.timerpopup{
	    display: inline-block;
    text-align: left;
    vertical-align: middle;
    background-color: transparent!important;
    border-radius: 5px;
    padding: 0px!important;
    background-image: url(../images/timerpopup.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 68vh;
        padding-top: 4vh!important;
}

.timerpopup-nocolor{
	
    background-color: transparent!important;
   
}


.timerbtns{
	width: 15vh;
    margin: 0 auto;
}

.timerbtns-selected{
	background-color: #4a1655;
}

.timeseg{
	 display: inline-grid;
    text-align: center;
    width: 15vh;
    margin: 1vh;
}

.timerpopup .modal-body p, .timerpopup .modal-body h3{
	color: white!important;
}


.timer_h{
	display: none;
}


#timesup img{
	width: 40vh;
    display: block;
    margin: 1vh auto;
   
}

.purple{
	color: #8c479a;
}


.jdplay{
	    width: 40vh;
    margin: -11vh auto 0;
    display: block;
}

.scoret{
	    font-family: 'BurbankBigRegular'!important;
    color: #823791;
    text-shadow: 0px 4px 2px rgb(211, 211, 211);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

.upb{
	    width: 8vh;
    margin-left: 0vh;
}

.leftb{
	width: 8vh;
    margin-right: 0vh;
    margin-top: 5vh;
}

.rightb{
	width: 8vh;
    margin-left: 0vh;
    margin-top: 5vh;
}

.landingtext{
   width: 80vw;
   margin: 1vh auto 0;
   display: block;
}


.android_controls{
      position: absolute;
    top:40vh;
    left: 0;
    right: 0;
    z-index: 5000;
}

.left_side{
	width: min-content;
    float: left;
    height: min-content;
    margin-left: 1vh;
}

.right_side{
	width: min-content;
	height: min-content;
    float: right;
    margin-right: 1vh;
}


@media only screen and (min-width: 768px) {
.landingtext{
	    width: 41vh;
    margin: 1vh auto 0;
    display: block;
}
}