/* LESS VARIABLES */
.rounded-corners (@radius: 5px) {
	border-radius: @radius;
  	-webkit-border-radius: @radius;
  	-moz-border-radius: @radius;
}
/* ############## */
* {
	margin: 0;
	padding: 0;
}
td {
	vertical-align: top;
}
html {

}
body {
	font-family: CharterOSCRegular;
	background: #fff;
	font-size: 16px;
	line-height: 26px;
}
#header {
	font-family: FFDINBold;
	
}
#wrapper {
	width: 1200px;
	margin: 0px auto;
	
}

#menu {
	position: fixed;
	width: 110px;
	z-index: 100;
	
	ul {
		list-style: none;
		font-family: NonameGroteskHanddrawnv4Rg;
		font-size: 12px;
		line-height: 14px;
		color: #000;
		background-color: rgb(255, 255, 122);
		
		li {
			text-decoration: underline;
			cursor: pointer;
			margin-bottom: 20px;
			padding: 3px;
		}
		.active {
			background: #fff;
			color: #000;
			padding: 3px;
			.rounded-corners(2px);
		}
	}
}

.h1 {
	font: 83px/100px 'NonameGroteskHanddrawnv4Rg';
	padding-top: 50px;
}

h2 {
	font: 30px/40px 'CharterOSCRegular';
}

h3 {
	font: 50px/60px 'NonameGroteskHanddrawnv4Rg';
	margin: 20px 0 20px 0;
}

.h3 {
	font: 55px/66px 'NonameGroteskHanddrawnv4Rg';
}

.block {
	padding-left: 150px;
	position: relative;
	
}

.lead {
	background-color: rgb(179, 253, 195);
	background-image: url(../images/1.jpg);
	background-repeat: no-repeat;
	background-position: 180px 50px;
	height: 600px;
}

.theory {
	background-color: rgb(179, 253, 195);
	padding-bottom: 140px;
}

.final {
	background-color: rgb(227, 86, 91);
	padding-bottom: 140px;
	
	.italic {
		font-family: 'CharterOSCItalic';
		width: 650px;
		text-align: center;
		margin: 25px 0 80px 150px;
	}
	
	table {
		margin-left: 50px;
		
		td {
			width: 397px;
			padding-right: 75px;
			
			iframe {
				margin-bottom: 10px;
			}
			
			.film {
				font: 38px/40px 'CharterOSCRegular';
				color: #fff;
				border-bottom: 3px solid #fff;
			}
			.caption {
				margin: 20px 0 55px 0;
			}
			
			.where {
				border: 10px solid #fff;
				font: 20px/40px 'NonameGroteskHanddrawnv4Rg';
				color: #fff;
				text-transform: uppercase;
				text-align: center;
			}
			
			a {
				color: #fff;
				font: 38px/40px 'CharterOSCRegular';
			}
		}
	}
}

.border {
	font: 55px/66px 'NonameGroteskHanddrawnv4Rg';
	border: 10px solid #000;
	letter-spacing: 30px;
	width: 1130px;
	text-align: center;
	margin-left: -125px;
}

.credits {
	width: 135px;
	position: absolute;
	top: 50px;
	right: 100px;
	font: 11px/16px 'CirceRegular';
	
	i {
		font-family: 'CharterOSCItalic';
	}
	span {
		border-top: 1px solid #fff;
		padding-top: 15px;
	}
}

.description {
	width: 660px;
	margin: 145px 0 0 350px;
}

.about {
	margin: 30px 0 0 -50px;
	
	td {
		width: 270px;
		padding: 0 25px;
	}
}

.italic {
	font-family: 'CharterOSCItalic';
	width: 650px;
	text-align: center;
	margin: 85px 0 110px 150px;
}

.film-wrap {
	h3 {
		font: 55px/66px 'NonameGroteskHanddrawnv4Rg';
		color: rgb(93, 218, 223);
		margin: 0 0 35px 0;
	}
}

.img {
	position: relative;
	/*width: 877px;
	height: 924px;
	border: 1px solid #333;*/
	
	.point {
		position: absolute;
		background: rgba(255,0,0, 0);
		width: 59px; height: 58px;
		border-radius: 100px;
		cursor: default;
		
		/*&.p1 {background: url(../images/numbers/1.png);}
		&.p2 {background: url(../images/numbers/2.png);}
		&.p3 {background: url(../images/numbers/3.png);}
		&.p4 {background: url(../images/numbers/4.png);}*/
	}
	.popup {
		display: none;
		top: 0px;
		left: 0px;
		position: absolute;
		background: rgb(93, 218, 223);
		width: 430px;
		padding: 10px 25px 35px;
		cursor: default;
		z-index: 10;
		
		span{
			border-bottom: 3px solid #fff;
			color: #fff;
			font: 40px/55px 'CharterOSCRegular';
		}
		i {
			font-family: 'CharterOSCItalic';
			color: #fff;
		}
	}	
}

.sinopsis {
	font: 32px 'NonameGroteskHanddrawnv4Rg';
	color: rgb(93, 218, 223);
	margin: 70px 0 30px 0;
}

.sinopsis-head {
	font: 30px 'CharterOSCRegular';
	margin-bottom: 30px;
}

.sin-wrap {
	margin-bottom: 210px;
	
	td{
		padding-right: 35px;
		
	}
}

.fantastic {
	.p1 {background: url(../images/numbers/1a.png);}
	.p2 {background: url(../images/numbers/2a.png);}
	.p3 {background: url(../images/numbers/3a.png);}
	.p4 {background: url(../images/numbers/4a.png);}
}

.action {
	h3,.sinopsis {
		color:rgb(253, 19, 41);
	}
	.popup {
		background-color: rgb(253, 19, 41);
	}
	.p1 {background: url(../images/numbers/1b.png);}
	.p2 {background: url(../images/numbers/2b.png);}
	.p3 {background: url(../images/numbers/3b.png);}
	.p4 {background: url(../images/numbers/4b.png);}
}

.horror {
	h3,.sinopsis {
		color: #6d6d6d;
	}
	.popup {
		background-color:  #6d6d6d;
	}
	.p1 {background: url(../images/numbers/1c.png);}
	.p2 {background: url(../images/numbers/2c.png);}
	.p3 {background: url(../images/numbers/3c.png);}
	.p4 {background: url(../images/numbers/4c.png);}
}

.comedy {
	h3,.sinopsis {
		color:#ed9595;
	}
	.popup {
		background-color: #ed9595;
	}
	.p1 {background: url(../images/numbers/1d.png);}
	.p2 {background: url(../images/numbers/2d.png);}
	.p3 {background: url(../images/numbers/3d.png);}
	.p4 {background: url(../images/numbers/4d.png);}
}

.western {
	h3,.sinopsis {
		color:#de9829;
	}
	.popup {
		background-color: #de9829;
	}
	.p1 {background: url(../images/numbers/1e.png);}
	.p2 {background: url(../images/numbers/2e.png);}
	.p3 {background: url(../images/numbers/3e.png);}
	.p4 {background: url(../images/numbers/4e.png);}
}