/* CSS Document */
* {
	padding:0;
	margin:0;
	outline:0;
	border:0;
}

.clear {
	clear:both;
}

body {
	text-align:center;
	font-family:'hurme_geometric_3';
	background:url('../img/game_bg.jpg') center center no-repeat;
	background-size:cover;
	min-height:100vh;
	overflow:hidden;
}

.start {
	width:100%;
	height:100vh;
	background:url('../img/start_bg.jpg') center right no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	text-align:right;
	z-index:10;
}

.start h1 {
	font-weight:normal;
	transform:rotate(-4deg);
	font-size:16vh;
	text-align:right;
	margin-right:10vw;
	padding-top:32vh;
}

.start h1 .orange {
	color:#e54611;
}

.start h1 .red {
	color:#bc1b1b;
}

.start h1 .green {
	color:#007156;
}

.start .start_button {
	display:inline-block;
	position:relative;
	margin-right:10vw;
}

.start .start_button img {
	height:12vh;
}

.start .start_button span {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-transform: uppercase;
	color:#007156;
	text-decoration: none;
	font-size:2.5vh;
	line-height:12vh;
	text-align:center;
	transform:rotate(-4deg);
}

.end {
	width:100%;
	height:100vh;
	background-image:url('../img/pechackova.png'), url('../img/buresova.png'), url('../img/game_bg.jpg');
	background-position:left bottom, right bottom, center center;
	background-repeat:no-repeat, no-repeat, no-repeat;
	background-size:auto, auto, cover;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	display:none;
}

.end h1 {
	color:#007156;
	font-size:5vh;
	padding-top:5vh;
}

.end .logo_link {
	display:inline-block;
	margin-top:7vh;
	
	-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.75);
}

.end .logo_link img {
	width:220px;
	display:block;
}

.end .replay {
	display:inline-block;
	margin-top:5vh;
}

.end .replay img {
	width:85px;
	display:block;
}

.logo {
	position:absolute;
	top:0;
	left:0;
	display:block;
}

.logo img {
	display:block;
	width:150px;
}

.reload {
	display:block;
	color:#007156;
	position:absolute;
	top:25px;
	right:50px;
	transform:rotate(-4deg);
	text-transform: uppercase;
	text-decoration: none;
	font-size:26px;
}

.for_game {
	min-width:360px;
	min-height:360px;
	max-width:800px;
	max-height:800px;	
	margin:auto;
	padding-top:90px;
}

.for_game .card {
	float:left;
	position:relative;
	width:23%;
	height:23%;
	margin:1%;
	transition: all .3s;
}

.for_game .card.done {
	animation: zoom-in-zoom-out .3s ease 1;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.for_game .card .inner {
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	
	-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 2px 5px 0px rgba(50, 50, 50, 0.75);
}

.for_game .card .inner.front {
	background-image:url('../img/card_back.png');
	
}

.for_game .card .inner.back#img_1 {background-image:url('../img/cards/card_1.png');}
.for_game .card .inner.back#img_2 {background-image:url('../img/cards/card_2.png');}
.for_game .card .inner.back#img_3 {background-image:url('../img/cards/card_3.png');}
.for_game .card .inner.back#img_4 {background-image:url('../img/cards/card_4.png');}
.for_game .card .inner.back#img_5 {background-image:url('../img/cards/card_5.png');}
.for_game .card .inner.back#img_6 {background-image:url('../img/cards/card_6.png');}
.for_game .card .inner.back#img_7 {background-image:url('../img/cards/card_7.png');}
.for_game .card .inner.back#img_8 {background-image:url('../img/cards/card_8.png');}

.icons {
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:15;
}

.icons .icon {
	display:block;
	width:60px;
	height:60px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:50px auto;
	margin-top:10px;
}

.icons .fullscreen {
	background-image:url('../img/icons/fullscreen_on.png');
}

.icons .fullscreen.off {
	background-image:url('../img/icons/fullscreen_off.png');
}
	
.icons .sound_switch#off {
	background-image:url('../img/icons/sound_off.png');
}

.icons .sound_switch#on {
	background-image:url('../img/icons/sound_on.png');
}