.modal-dialog {
    margin: 100px auto;
        -webkit-box-shadow:none !important;
        box-shadow:none !important;
	border-radius:0 !important;
	border:none !important;
	outline:none !important;
	background:rgba(170,130,72,1) !important;
	color:#fff !important;
	text-align:center !important;
}

.modal-content {
	background:transparent !important;
}

.modal-header {
    padding: 15px !important;
    border-bottom:none !important;
	text-align:center !important;
}

.modal-footer {
    padding: 15px 15px 30px 15px !important;
    text-align: center !important;
    border-top:none !important;
}

.btn {
	font-size:inherit !important;
	font-weight:bold !important;
	font-family:inherit !important;
}

.modal-dialog button {
	color: #aa8247 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    padding: 11px 15px 5px 15px !important;
    border: 2px solid #aa8247 !important;
}

.modal-dialog button:hover {
	color: #aa8247 !important;
	text-decoration: underline !important;
}

.modal-header h4 {
	font-family: 'Neucha', sans-serif;
    -webkit-text-stroke: 2px;
    text-stroke: 2px;
    font-size: 2.5em;
    line-height: 1.0;
    margin: 0;
    padding: .5em 0 .2em 0;
    font-weight: normal;
	color:#fff;
}


.memory-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	marign-right:-20px;
	margin-left:-20px;
}


/*
 * Styles for the deck of cards
 */

.memory-container .deck {
    width: 100%;
	max-width:1000px;
    min-height: 680px;
    background: transparent;
    padding: 32px 0;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 3em;
   
}

.memory-container .deck .card {
    height: 180px;
    width: 23%;
	margin-bottom:25px;
    background: #004794;
    font-size: 0;
    color: #fff;
    cursor: pointer;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.memory-container .deck .card.open {
    transform: rotateY(0) !important;
    background: #aa8247;
    cursor: default;
}

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

.memory-container .deck .card.match {
    cursor: default;
    background: #0F5DD1;
    font-size: 50px;
}

/*
 * Styles for the Score Panel
 */

.memory-container .score-panel {
    text-align: left;
    width: 345px;
    margin-bottom: 10px;
}

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

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

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

.memory-container .card {
	position:relative;
}

.memory-container .card .fa {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	display:none;
}

.memory-container .card.open .fa,
.memory-container .card.match .fa {
	display:block;
}

.memory-container .card .fa.fa-bicycle {
	background-image:url("../Image/memory-items/memory-item-cremy-01.png");
}

.memory-container .card .fa.fa-leaf {
	background-image:url("../Image/memory-items/memory-item-cremy-zimt-01.png");
}

.memory-container .card .fa.fa-cube {
	background-image:url("../Image/memory-items/memory-item-pinz-held-01.png");
}

.memory-container .card .fa.fa-anchor {
	background-image:url("../Image/memory-items/memory-item-pinz-herz-01.png");
}

.memory-container .card .fa.fa-paper-plane-o {
	background-image:url("../Image/memory-items/memory-item-prinzen-dose-01.png");
}

.memory-container .card .fa.fa-bolt {
	background-image:url("../Image/memory-items/memory-item-prinzen-keks-01.png");
}

.memory-container .card .fa.fa-bomb {
	background-image:url("../Image/memory-items/memory-item-prinzen-keks-schoko-01.png");
}

.memory-container .card .fa.fa-diamond {
	background-image:url("../Image/memory-items/memory-item-prinzen-rolle-01.png");
}

.memory-container .card .fa::before {
	display:none;
	
}

/*
 * Responsiveness
 */

@media only screen and (max-width: 800px){
    .memory-container .deck .card{
      width: 23%;
      height: 100px;
      line-height: 75px;
    }
  
    .memory-container .deck {
      max-width:800px;
		min-height:500px;
    }
	
	
	.modal-dialog {
    margin: 50px 20px;
}
	
}
  
@media only screen and (max-width: 450px){
    .memory-container .deck .card{
      height: 50px;
      line-height: 50px;
    }
  
    .memory-container .deck {
      max-width:100%;
		min-height:400px;
    }
}