html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	
}


body {
    background-color:#000;
    font-family: 微軟正黑體, Microsoft JhengHei; 
	color:#FFFFFF;
}

/* for bootstrap */
.container {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    flex-direction: column;
	width: 600px;
	padding-left: 0px;
	padding-right: 0px;
	    background-color: #1e201f;
}

.row{margin-left: 0px; margin-right: 0px;}

col-4{padding-left: 0px; padding-right: 0px;}
.col-6{padding-left: 0px; padding-right: 0px;}
.col-12{padding-left: 0px; padding-right: 0px;}
.col-lg-3{padding-left: 7px !important;}

/* end for bootstrap */

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 1000;
}

.underline{text-decoration:underline;}
.df_height{height: 10px;}
.clear{clear:both;}

.coda_font{font-family: 'Coda', cursive;}

.size_40{font-size: 40px;}

.shoes_110011{background-image:url(../images/shoes/shoes_1.jpg) !important; background-size:136px 136px !important;}
.shoes_11OO11{background-image:url(../images/shoes/shoes_2.jpg) !important; background-size:136px 136px !important;}
.shoes_001100{background-image:url(../images/shoes/shoes_3.jpg) !important; background-size:136px 136px !important;}
.shoes_OO11OO{background-image:url(../images/shoes/shoes_4.jpg) !important; background-size:136px 136px !important;}
.shoes_ll00ll{background-image:url(../images/shoes/shoes_5.jpg) !important; background-size:136px 136px !important;}
.shoes_llOOll{background-image:url(../images/shoes/shoes_6.jpg) !important; background-size:136px 136px !important;}
.shoes_OOllOO{background-image:url(../images/shoes/shoes_7.jpg) !important; background-size:136px 136px !important;}
.shoes_IIOOII{background-image:url(../images/shoes/shoes_8.jpg) !important; background-size:136px 136px !important;}

.shoe_btn{cursor:pointer; height:300px;}

.play_btn{width: 500px;
    height: 95px;
    font-size: 50px;}

/*
 * Styles for the deck of cards
 */

.deck {
    width: 600px;
    min-height: 620px;
   /* background: linear-gradient(160deg, #cacaca 0%, #aa7ecd 100%);*/
    padding: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #FFF;
    border-radius: 0px;
    /*box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);*/
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 3em;
	background:url(../images/card/bg.png);
    background-repeat: no-repeat;
    background-size: 584px 604px;
    background-position-x: 6px;
    background-position-y: 6px;	
}

.deck .card {
    height: 136px;
    width: 136px;
	/* background: #2e3d49; */
    font-size: 0;
    color: #ff00c8;
    border-radius: 8px;
    cursor: pointer;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);;
}

.card_bg{    /*background-image: url(../img/card.png) !important; background-size:145px 145px !important;*/}
.bg_0{    background-image: url(../images/card/card_1.png) !important; background-size:136px 136px !important;}
.bg_1{    background-image: url(../images/card/card_2.png) !important; background-size:136px 136px !important;}
.bg_2{    background-image: url(../images/card/card_3.png) !important; background-size:136px 136px !important;}
.bg_3{    background-image: url(../images/card/card_4.png) !important; background-size:136px 136px !important;}
.bg_4{    background-image: url(../images/card/card_5.png) !important; background-size:136px 136px !important;}
.bg_5{    background-image: url(../images/card/card_6.png) !important; background-size:136px 136px !important;}
.bg_6{    background-image: url(../images/card/card_7.png) !important; background-size:136px 136px !important;}
.bg_7{    background-image: url(../images/card/card_8.png) !important; background-size:136px 136px !important;}
.bg_8{    background-image: url(../images/card/card_9.png) !important; background-size:136px 136px !important;}
.bg_9{    background-image: url(../images/card/card_10.png) !important; background-size:136px 136px !important;}
.bg_10{    background-image: url(../images/card/card_11.png) !important; background-size:136px 136px !important;}
.bg_11{    background-image: url(../images/card/card_12.png) !important; background-size:136px 136px !important;}
.bg_12{    background-image: url(../images/card/card_13.png) !important; background-size:136px 136px !important;}
.bg_13{    background-image: url(../images/card/card_14.png) !important; background-size:136px 136px !important;}
.bg_14{    background-image: url(../images/card/card_15.png) !important; background-size:136px 136px !important;}
.bg_15{    background-image: url(../images/card/card_16.png) !important; background-size:136px 136px !important;}


.deck .card.open {
    transform: rotateY(0) !important;
    /*background: #4e754e;
	background-image:url(../img/shoes/shoes_1.jpg); background-size:125px 125px; width:125px; height:125px;
	*/
    cursor: default;
}

.deck .card.show {
    font-size: 50px;
}

.deck .card.match {
    cursor: default;
   /* background: #02ccba;*/
    font-size: 50px;
}

/*
 * Styles for the Score Panel
 */

.score-panel {
    text-align: left;
    width: 600px;
	font-size: 40px;
    margin-bottom: 10px;
}

.score-panel .stars {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

.score-panel .stars li {
    list-style: none;
    display: inline-block;
}

.score-panel .restart {
    float: right;
    cursor: pointer;
}

.black_font{color:#000;}
.red_font{color:#FF0000;}
/*
 * Responsiveness
 */

.zoom_icon{z-index: 1000;
                        left: 0;
                        right: 0;
                        top: 37%;
                        width: 60px;
                        margin-left: auto;
                        margin-right: auto;}
.absolute{position:absolute;}
.relative{position:relative;}



@media only screen and (max-width: 800px){
	.container{width: 100%;}
	
    .deck .card{
      width: 115px;
      height: 115px;
      line-height: 75px;
	  
    }
  
    .deck {
      width: 500px;
	  min-height: 536px;
	  margin-left:auto;
	  margin-right:auto;	  
	  
	   background-size: 486px 519px;	
    }
	
	 
	 .shoe_btn{cursor:pointer; height:250px;}
	 
	.shoes_110011{background-size:115px 115px!important;}
	.shoes_11OO11{background-size:115px 115px!important;}
	.shoes_001100{ background-size:115px 115px!important;}
	.shoes_OO11OO{ background-size:115px 115px!important;}
	.shoes_ll00ll{ background-size:115px 115px!important;}
	.shoes_llOOll{ background-size:115px 115px!important;}
	.shoes_OOllOO{ background-size:115px 115px!important;}
	.shoes_IIOOII{ background-size:115px 115px !important;}

	.card_bg{    /*background-image: url(../img/card.png) !important;*/ background-size:115px 115px !important;}
	.bg_0{    background-image: url(../images/card/card_1.png) !important; background-size:115px 115px !important;}
	.bg_1{    background-image: url(../images/card/card_2.png) !important; background-size:115px 115px !important;}
	.bg_2{    background-image: url(../images/card/card_3.png) !important; background-size:115px 115px !important;}
	.bg_3{    background-image: url(../images/card/card_4.png) !important; background-size:115px 115px !important;}
	.bg_4{    background-image: url(../images/card/card_5.png) !important; background-size:115px 115px !important;}
	.bg_5{    background-image: url(../images/card/card_6.png) !important; background-size:115px 115px !important;}
	.bg_6{    background-image: url(../images/card/card_7.png) !important; background-size:115px 115px !important;}
	.bg_7{    background-image: url(../images/card/card_8.png) !important; background-size:115px 115px !important;}
	.bg_8{    background-image: url(../images/card/card_9.png) !important; background-size:115px 115px !important;}
	.bg_9{    background-image: url(../images/card/card_10.png) !important; background-size:115px 115px !important;}
	.bg_10{    background-image: url(../images/card/card_11.png) !important; background-size:115px 115px !important;}
	.bg_11{    background-image: url(../images/card/card_12.png) !important; background-size:115px 115px !important;}
	.bg_12{    background-image: url(../images/card/card_13.png) !important; background-size:115px 115px !important;}
	.bg_13{    background-image: url(../images/card/card_14.png) !important; background-size:115px 115px !important;}
	.bg_14{    background-image: url(../images/card/card_15.png) !important; background-size:115px 115px !important;}
	.bg_15{    background-image: url(../images/card/card_16.png) !important; background-size:115px 115px !important;}
			
}


 
@media only screen and (max-width: 450px){
	 .container{width: 100%;}
	 
	 html{ overflow-x: hidden; } 
	 
	  .shoe_btn{cursor:pointer; height:150px;}
	 .deck{
		    background-size: 284px 322px;		 
	 }
	 
    .deck .card{
		width: 65px;
		height: 65px;
      line-height: 50px;
	  margin-left:auto;
	  margin-right:auto;
    }
 
	.score-panel {
		width: 100%;
		text-align:center;
	} 
	 
	.shoes_110011{background-size:65px 65px!important;}
	.shoes_11OO11{background-size:65px 65px!important;}
	.shoes_001100{ background-size:65px 65px!important;}
	.shoes_OO11OO{ background-size:65px 65px!important;}
	.shoes_ll00ll{ background-size:65px 65px!important;}
	.shoes_llOOll{ background-size:65px 65px!important;}
	.shoes_OOllOO{ background-size:65px 65px!important;}
	.shoes_IIOOII{ background-size:65px 65px !important;}
  
	.play_btn {
		width: 253px;
		height: 78px;
		font-size: 29px;
	}  
  
    .deck {
      width: 300px;
	  min-height: 336px;
    }
	
	.card_bg{    /*background-image: url(../img/card.png) !important;*/ background-size:65px 65px !important;}
	.bg_0{    background-image: url(../images/card/card_1.png) !important; background-size:65px 65px !important;}
	.bg_1{    background-image: url(../images/card/card_2.png) !important; background-size:65px 65px !important;}
	.bg_2{    background-image: url(../images/card/card_3.png) !important; background-size:65px 65px !important;}
	.bg_3{    background-image: url(../images/card/card_4.png) !important; background-size:65px 65px !important;}
	.bg_4{    background-image: url(../images/card/card_5.png) !important; background-size:65px 65px !important;}
	.bg_5{    background-image: url(../images/card/card_6.png) !important; background-size:65px 65px !important;}
	.bg_6{    background-image: url(../images/card/card_7.png) !important; background-size:65px 65px !important;}
	.bg_7{    background-image: url(../images/card/card_8.png) !important; background-size:65px 65px !important;}
	.bg_8{    background-image: url(../images/card/card_9.png) !important; background-size:65px 65px !important;}
	.bg_9{    background-image: url(../images/card/card_10.png) !important; background-size:65px 65px !important;}
	.bg_10{    background-image: url(../images/card/card_11.png) !important; background-size:65px 65px !important;}
	.bg_11{    background-image: url(../images/card/card_12.png) !important; background-size:65px 65px !important;}
	.bg_12{    background-image: url(../images/card/card_13.png) !important; background-size:65px 65px !important;}
	.bg_13{    background-image: url(../images/card/card_14.png) !important; background-size:65px 65px !important;}
	.bg_14{    background-image: url(../images/card/card_15.png) !important; background-size:65px 65px !important;}
	.bg_15{    background-image: url(../images/card/card_16.png) !important; background-size:65px 65px !important;}
}