/* ############## */
* {
	margin: 0;
	padding: 0;
}
html {

}
body {
	font: 16px/21px 'OctavaOSCRegular';
	color: #000;
	background-color: #fff;
}

a {
	color: inherit;
}

.clr {
	clear: both;
}

td {
	vertical-align: top;
}

#wrapper {
	width: 1100px;
	margin: 35px auto;
	padding-left: 100px;
	
	.heading {
		position: fixed;
		p {
			font: 17px/21px 'OctavaOSCRegular';
			margin: 40px 0 0 -30px;
		}
		.counter {
			font: 24px/28px Futura;
		}
	}
	h1 {
		width: 450px;
		text-align: center;
		font: 17px/27px 'OctavaOSCRegular';
		margin-left: 488px;
		padding-top: 60px;
	}
	.instr {
		width: 450px;
		text-align: center;
		font: bold 24px/28px Futura;
		margin-left: 448px;
		margin-top: 30px;
		padding: 30px;
		border: 5px solid #000;
	}
	
}

#container {
	margin-top: 50px;
	margin-left: 10px;
	background: rgba(255, 255, 255, .85)
}

.s-block {
	width: 156px;
	height: 157px;
	float: left;
	position: relative;
	cursor: pointer;
	background: url(../images/a1.png) no-repeat;
	padding-top: 20px;
	
	p {
		font: 12px/14px Futura;
		text-transform: uppercase;
	}
	p,img {
		margin-left: -3px;
	}
	
	&.active {
		background: url(../images/a2.png) no-repeat;
	}
}

.popup {
	position: fixed;
	width: 385px;
	height: 510px;
	top: 50%;
	left: 50%;
	margin: -255px 0 0 -200px;
	/*display: none;*/
	z-index: 40;
	
	.small {
		margin: 20px;
	}
	h2 {
		color: #fff;
		font: bold 24px/28px Futura;
		text-transform: uppercase;
		margin-top: 20px;
	}
	.continue {
		height: 35px;
		padding-top: 5px;
		width: 385px;
		color: #fff;
		background-color: blue;
		font: bold 24px/28px Futura;
		text-transform: uppercase;
		position: absolute;
		bottom: 0;
		cursor: pointer;
	}
}

.black {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(255, 255, 255, .75);
	top: 0;
	left: 0;
	display: none;
	z-index: 20;
}

.right {
	display: none;
	background-color: #8ECA8D;
	
	.imgs {
		img {
			margin: 15px 5px;
			
		}
	}
	.names {
		font: bold 20px/24px Futura;
		text-transform: uppercase;
		width: 280px;
		margin-left: 52px;
	}
	.films {
		width: 290px;
		margin-left: 45px;
		margin-top: 20px;
		height: 40px;
		border: 10px solid #fff;
		padding-top: 20px;
		color: #fff;
		font: bold 20px/24px Futura;
		text-transform: uppercase;
	}
	.best {
		width: 290px;
		margin-left: 45px;
		font: bold 20px/24px Futura;
		text-transform: uppercase;
		margin-top: 45px;
	}
}

.wrong {
	display: none;
	background-color: #D2795E;
	
	.imgs {
		img {
			margin: 70px 0 0;
			
		}
	}
	.hint {
		width: 290px;
		margin-left: 45px;
		font: bold 20px/24px Futura;
		text-transform: uppercase;
		margin-top: 70px;
	}
}


#finish {
	position: fixed;
	display: none;
	width: 360px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -120px;
	background: #fffbed;
	box-shadow: 0px 3px 8px rgba(0,0,0,0.5);
	z-index: 1000;
	padding: 20px;
	
	p {
		text-align:  center;
		font-size: 25px;
		margin-top: 50px;
		line-height: 32px;
	}
}