/*  INCLUDES  */

@import "../../styles/normalize.css";
@font-face {
    font-family: 'TT Norms';
    src:url('../../fonts/TTNorms-Medium.woff2') format('woff2'),
        url('../../fonts/TTNorms-Medium.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: 'TT Norms';
    src:url('../../fonts/TTNorms-ExtraBold.woff2') format('woff2'),
        url('../../fonts/TTNorms-ExtraBold.woff') format('woff');
	font-weight:bold;
	font-style:normal;
}


/*  GLOBAL  */

*,
*:after,
*:before {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
:focus{
	outline:none;
}
HTML, BODY {
	height:100%;
	margin:0;
	padding:0;
}
BODY {
	background:#000000;
	color:#ffffff;
	font-family:'TT Norms';
	font-weight:normal;
	font-style:normal;
	text-rendering:optimizeLegibility;
	font-size:21px;
	line-height:1.2em;
	background:#000000 url(../images/background.jpg) 50% 50% no-repeat;
	background-size:cover;
	background-attachment:fixed;
}

@media (max-width:700px) {
	BODY {
		font-size:3vw;
		line-height:1.2em;
	}
}



HEADER {
	padding:3vw 0 0 0;
	text-align:center;
}
FOOTER {
	padding:0 0 3vw 0;
	text-align:center;
}
HEADER IMG,
FOOTER IMG {
	width:1200px;
	height:auto;	
	max-width:90%;
}

H1 {
	padding:0;
	margin:4vw 0;
	overflow:hidden;
	text-align:center;
}
	H1 IMG {
		width:600px;
		height:auto;
		max-width:60%;
	}
	H1 SPAN {
		display:none;
	}

	A {
		color:#fbcb77;
		text-decoration:underline;
		transition:all .2s;
	}
	A:hover {
		color:#cd2027;
	}

MAIN P {
	width:1200px;
	margin:1em auto;
	max-width:80%;
}
MAIN UL#cities {
	width:1200px;
	max-width:80%;
	padding:0;
	margin:2vw auto;
	list-style:none;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
	align-content:flex-start;
}
MAIN UL#cities LI {
	flex:1 1 33%;
	text-align:center;
	font-size:1.15em;
	line-height:1.25em;
	margin:.6em 0;
}
	MAIN UL#cities LI.gray {
		opacity:.5;
	}
@media (max-width:1200px) {
	MAIN UL#cities LI {
		font-size:1em;
		line-height:1.25em;
	}
}
@media (max-width:1000px) {
	MAIN UL#cities {
		flex-wrap:nowrap;
		flex-direction:column;
		justify-content:center;
		align-items:flex-start;
		align-content:flex-start;
	}
	MAIN UL#cities LI {
		flex:1 1 100%;
		width:100%;
		text-align:center;
		font-size:1.15em;
		line-height:1.25em;
		margin:1em 0;
	}
}
	MAIN UL#cities STRONG {
		text-transform:uppercase;
	}
	MAIN UL#cities A {
		color:#fbcb77;
		text-transform:uppercase;
		font-size:.75em;
		font-weight:bold;
		text-decoration:underline;
		margin:.35em 0 0 0;
		display:inline-block;
		transition:all .2s;
	}
	MAIN UL#cities A:hover {
		color:#cc0000;
	}
	MAIN UL#cities IMG {
		width:8em;
		display:block;
		margin:0 auto .8em auto;
	}

SECTION.movie {
	width:1200px;
	margin:5vw auto 5vw auto;
	max-width:80%;
	font-size:.85em;
	line-height:1.2em;
}
	SECTION.movie H2 {
		font-size:1.3em;
		line-height:1.2em;
		margin:0 0 .1em 0;
		text-transform:uppercase;
	}
		SECTION.movie H2 SPAN {
			font-weight:normal;
			opacity:.75;
			white-space:nowrap;
		}
	SECTION.movie H3 {
		font-size:1.0em;
		line-height:1.2em;
		margin:.3em 0 .4em 0;
		font-weight:normal;
		opacity:.9;
	}
	SECTION.movie P {
		margin:.5em 0 .5em 225px;
	}
	SECTION.movie P.info {
		margin:.8em 0;
		font-size:.9em;
		line-height:1.2em;
	}
	SECTION.movie DIV.poster {
		width:200px;
		height:auto;
		float:left;
		margin:0 25px 0 0;
		text-align:center;
	}
	SECTION.movie IMG {
		width:200px;
		height:auto;
		margin:8px 0 2px 0;
	}
@media (max-width:700px) {
	SECTION.movie DIV.poster {
		width:120px;
	}
	SECTION.movie IMG {
		width:120px;
	}
	SECTION.movie P {
		margin:.5em 0 .5em 145px;
	}
}

SECTION.trailer {
	width:750px;
	max-width:80%;
	margin:3vw auto;
}


SECTION.staff {
	width:1200px;
	margin:5vw auto 2vw auto;
	max-width:80%;
	font-size:.85em;
	line-height:1.3em;
}
	SECTION.staff P {
		text-align:center;
		margin:.3em 0;
		opacity:.75;
	}

SECTION.social {
	text-align:center;
	margin:2vw auto 2vw auto;
}

SECTION.festivals {
	text-align:center;
	margin:2vw auto 3vw auto;
}
SECTION.social A {
	font-size:1.75em;
	line-height:1em;
	margin:0 .5em;
	color:#ffffff;
}
SECTION.social A.vk {
	color:#0077FF;
}
SECTION.social A.telegram {
	color:#3dabe9;
}
SECTION.social A:hover {
	color:#ffffff;
}