html {
	font-size: 100.01%;
	width: 100%
}
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-family: pt_sans_regular, "Trebuchet MS", Helvetica, Arial, sans-serif
}
body {
	background: #fff;
	color: #000;
	font-size: 16px
}
@font-face {
	font-family: "pt_sans_regular";
	src: url("http://afisha.shymkent.gov.kz/fonts/pt_sans_bold.eot");
	src: local("nothing"), url("http://afisha.shymkent.gov.kz/fonts/pt_sans_bold.woff") format("woff"), url("http://afisha.shymkent.gov.kz/fonts/pt_sans_bold.ttf") format("truetype"), url("http://afisha.shymkent.gov.kz/fonts/pt_sans_bold.svg#pt_sans_bold2") format("svg");
	font-weight: bold;
	font-style: normal
}
#page {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden
}
#page .logo {
	display: block;
	width: 300px;
	height: 100px;
	margin: 0px auto;
	position: relative;
	z-index: 3
}
#page .half {
	position: absolute;
	top: 0px;
	width: 50%;
	height: 100%
}
#page .half .wrap {
	background: #000;
	position: absolute;
	left: 0px;
	right: 0px;
	height: 100%;
	overflow: hidden;
	-moz-transition: all 1s ease-in-out 0s;
	-webkit-transition: all 1s ease-in-out 0s;
	-o-transition: all 1s ease-in-out 0s;
	transition: all 1s ease-in-out 0s
}
#page .half .wrap .image {
	position: absolute;
	left: 0px;
	right: 0px;
	height: 100%;
	-moz-transition: all 1s ease-in-out 0s;
	-webkit-transition: all 1s ease-in-out 0s;
	-o-transition: all 1s ease-in-out 0s;
	transition: all 1s ease-in-out 0s
}
#page .half .wrap .image .back {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	-moz-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s
}
#page .half.left {
	left: 0px
}
#page .half.left .wrap {
	left: -50px
}
#page .half.left .wrap .image {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .half.right {
	right: 0px
}
#page .half.right .wrap {
	right: -50px
}
#page .half.right .wrap .image {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover {
	position: absolute;
	z-index: 2;
	top: 0px;
	width: 50%;
	height: 100%;
	text-align: center
}
#page .hover:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	width: 1px;
	margin-right: -1px
}
#page .hover.left {
	left: 0px
}
#page .hover.right {
	right: 0px
}
#page .hover.left:hover+.hover+.hover+.half.left .wrap {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover.left:hover+.hover+.hover+.half.left .wrap .image {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover.left:hover+.hover+.hover+.half.left .wrap .image .back {
	filter: alpha(opactiy=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4
}
#page .hover.right:hover+.half+.half+.half.right .wrap {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover.right:hover+.half+.half+.half.right .wrap .image {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover.right:hover+.half+.half+.half.right .wrap .image .back {
	filter: alpha(opactiy=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4
}

#page .hover.center:hover+.hover+.half+.half.center .wrap {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover.center:hover+.hover+.half+.half.center .wrap .image {
	-moz-transform: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}
#page .hover.center:hover+.hover+.half+.half.center .wrap .image .back {
	filter: alpha(opactiy=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4
}
#page .hover span {
	background: #0f0f0f;
	display: inline-block;
	vertical-align: middle;
	height: 50px;
	line-height: 50px;
	padding: 0px 10px;
	font-weight: bold;
	font-size: 36px;
	color: #fff;
	position: relative;
	z-index: 1
}
#page .hover:hover span {
	background: #e4a90a;
	border: 2px dashed #fff;
	font-size: 40px;
}