@charset "utf-8";
/* CSS Document */

/*******************************************************************/
/*                                                           reset */
/*******************************************************************/
body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, address, a, strong, em, dl, dt, dd, table, thead, tbody, tfoot, tr, td, th, form, fieldset, legend, caption { padding: 0px; margin: 0px; outline: none; background-position: left top; background-repeat: no-repeat; }
body { font-family: tahoma, sans-serif; color: #000000; font-size: 12px; line-height: 18px; background-color: #2B2B2B; }
blockquote, address { font-style: normal; }
* { outline: none; }
img,a img { border: none; }
strong { font-weight: bold; }


/*******************************************************************/
/*                                                           basic */
/*******************************************************************/
html {
	height: 100%;
}

body {
    background-color: #fff;  
	padding-top: 1px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
}

.clear {
	clear: both;
    visibility: hidden;
    line-height: 1px;
    height: 1px;
    margin: 0px;
}

.center {
	text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}


a {
	color: #438dd5;
	text-decoration: none;
}

a:hover {
	color: #438dd5;
	text-decoration: underline;	
}

p {
	margin: 5px 0px 10px;
}

section { overflow: hidden; }

h2.tit 	{
	font-family: Georgia;
	font-weight: normal;
	font-size: 34px !important;
	line-height: 40px !important;
	margin: 40px 0px 20px !important;
}
/*******************************************************************/
/*                                                          layout */
/*******************************************************************/


/*******************************************************************/
/*                                                          header */
/*******************************************************************/
header {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	position: fixed;
	background-image: url(../images/bg_header.png);
	background-repeat: repeat;
	z-index: 1000;
}

.header-content {
	max-width: 1000px;
	margin: 0px auto;
	position: relative;
}

#logo {
	display: block;
	width: 193px;
	height: 23px;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1004;
	text-indent: -9999em;
	
}

nav {
	position: absolute;
	top: 6px;
}

nav ul {
	list-style: none;
	margin-top: 0px;
	padding: 0px
}

nav ul li {
	float: left;
	margin: 0px 20px;
	line-height: 40px;
	height: 40px;
	padding: 0px 10px;
}

nav ul li:hover, nav ul li.active {
	border-bottom: solid 4px #ff831f;
}

nav ul li a {
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}

nav ul li a:hover {
	color: #fff;
	text-decoration: none;
}

#showMenu {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1000;
	cursor: pointer;
	width: 30px;
	height: 30px;
	background-image: url(../images/menu.png);
	display: none;
}

#static-slider {
	position: relative;
	display: none;
}

#static-slider a {
	position: absolute;
	top: 0px;
	left: 0px;
}

#static-slider a img {
	display: none;
}

#static-slider a.show {
	width: 100%;
	height: 230px;
   	background-image: url("../gallery/img_1.jpg");
    background-size: 100% auto;
}

.gall-ico {
	position: absolute;
	top: 60px;
	right: 15px;
	z-index: 100;
}


#slider {
	width: 100%;
	margin: 0px auto;
	height: 600px;
	position: relative;
	background-color: #ffefd1;
}

.slides li {
	position: absolute;
	top: 0px;
	left: 0px;
	list-style: none;
	text-align: center;
}

.about {
	position: relative;
	max-width: 500px;
	padding: 10px 420px 70px 80px;
	margin: 0px auto;
	font-size: 15px;
	line-height: 22px;
}

.about h1 {
	font-family: Georgia;
	font-weight: normal;
	font-size: 34px;
	line-height: 40px;
}

.about h3 {
	font-size: 15px;
	font-weight: normal;
	line-height: 40px;
}

#about .symbol {
	position: absolute;
	top: 70px;
	left: 50%;
	z-index: 500;
	margin-left: -420px;
}

@media only screen and (max-width: 1000px) {
	#about .symbol {
		position: absolute;
		top: 70px;
		left: 30px;
		z-index: 500;
		margin: 0;
	}
}

.house {
	border: solid 1px #dbdbdb;
	position: absolute;
	top: 45px;
	right: 80px;
	width: 237px;
}

.house p {
	padding: 8px 10px;
	font-weight: 12px;
	border-bottom: solid 1px #dbdbdb;
	margin: 0px;
	font-size: 12px;
}

.house p.even {
	background-color: #f7f7f7;
}

.house p:last-child {
	border: none;
}

.house p b {
	float: right;
}

#where {
	border-top: solid 1px #e9d9b3;
	background-color: #fbf7ec;
}

#where h1 {
	font-family: Georgia;
	font-size: 34px;
	line-height: 40px;
	margin-bottom: 15px;
}

.where-content {
	position: relative;
	max-width: 840px;
	font-size: 14px;
	line-height: 22px;
	padding: 10px 80px 70px;
	margin: 0px auto 0px;
}
.where-content iframe {
	max-width: 840px;
	width: 100%;
}

.where-content .maparea {
	max-width: 840px;
	width: 100%;	
	overflow: hidden;
	margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {
	.where-content .maparea iframe {
		height: 220px;
	}
	.where-content .maparea {
		height: 280px;
	}
}

.where-content .map {
	position: relative;
	display: block;
	background-image: url(../images/mapinfo.png);
	width: 100%;
	height: 54px;
	line-height: 46px;
	padding-left: 230px;
	color: #000;
	font-weight: bold;
	margin-top: -5px;
}

.where-content .map span {
	color: #fff;
	position: absolute;
	top: 0px;
	left: 40px;
}

.where-content .column {
	width: 400px;
	float: left;
	margin: 20px 0px;
}

.where-content .column h2 {
	background-image: url(../images/icons.png);
	background-position: 0% 2px;
	background-repeat: no-repeat;
	padding: 5px 0px 5px 30px;
}

.where-content .column.bus h2 {
	background-position: 0% -80px;
}

.where-content .column.train h2 {
	background-position: 0% -37px;
}

.where-content .column.plane h2 {
	background-position: 0% -120px;
}

.where-content .column.car, .where-content .column.bus {
	margin-right: 40px;
}

#rules {
	border-top: solid 1px #abba7b;
	background-color: #dde6c3;
	background-image: url(../images/trip.jpg);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	min-height: 619px;
}

#rules h1, #neighborhood h1 {
	font-size: 34px;
	line-height: 40px;
	margin-bottom: 15px;
	font-family: Georgia;
}

.neighborhood-content h2 {
	font-size: 16px;
	line-height: 20px;
	margin: 10px 0px;
}

.rules-content {
	position: relative;
	max-width: 840px;
	font-size: 14px;
	line-height: 22px;
	padding: 10px 80px 230px;
	margin: 0px auto;
}

.neighborhood-content {
	position: relative;
	max-width: 840px;
	font-size: 14px;
	line-height: 22px;
	padding: 10px 80px 70px;
	margin: 0px auto;
}

.rules-content .column, .neighborhood-content .column {
	float: left;
	width: 45%;
}

.neighborhood-content .column.last  {
	float: right;	
	margin-top: 35px;
}

.rules-content .column.last  {
	float: right;	
}


#contact {
	border-top: solid 1px #e9d9b3;
	background-color: #fbf7ec;
}

.contact-content {
	position: relative;
	max-width: 540px;
	min-height: 450px;
	font-size: 14px;
	line-height: 22px;
	padding: 10px 380px 170px 80px;
	margin: 0px auto 0px;
}
address p {
	background-image: url(../images/contact-icons.png);
	background-position: 0% 0%;
	background-repeat: 0px;
	font-weight: bold;
	padding-left: 25px;
}

address p:nth-child(2) {
	background-position: 0% -28px;
}

address p:nth-child(3) {
	background-position: 0% -56px;
}

address p:nth-child(4) {
	background-position: 0% -82px;
}

address a {
	color: #000;
}

#family {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 230px;
	padding: 330px 20px 0px;
	background-image: url(../images/erb.png);
}

footer {
	background-color: #ff831f;
	padding: 10px;
}

.footer-content {
	max-width: 1000px;
	margin: 0px auto;

}

footer p {
	margin: 0px;
	color: #fff;
	text-align: center;
}

@media only screen and (max-width: 365px) {
	#static-slider {
		height: 220px !important;
	}
}
@media only screen and (max-width: 765px) {
	#showMenu { display: block; }
	nav { 
		display: none;
		background-color: #fff;
		position: absolute;
		right: 0px;
		top: 45px;
		width: 100%;
		box-shadow: 0px 2px 2px #aaa;
	}

	nav ul li {
		float: none;
		margin: 0px;
		padding: 0px;
		border-bottom: solid 1px #eee;
		line-height: 60px;
		height: 60px;
	}
	nav ul li a {
		display: block;
		color: #333;
		padding: 0px 15px;
	}
	nav ul li:hover, nav ul li.active {
		border-bottom: solid 1px #eee;
		background-color: #ff831f;
		color: #fff;
	}
	nav ul li.active a {
		color: #fff;
	}

	#slider {
		display: none;
	}

	#static-slider {
		display: block;
		height: 230px;
	}

	.slides, .flex-direction-nav, .flex-control-nav {
		display: none;
	}

	.where-content, .rules-content, .neighborhood-content, .contact-content {
		padding: 10px 20px;
		max-width: 100%;
	}

	.about {
		padding: 20px;
		max-width: 100%;
	}

	.house {
		position: static;
		width: 100%;
	}

	.house img {
		display: block;
		margin: 10px auto;
		text-align: center;
	}


	.where-content .map {
		position: static;
		padding: 0px;
		background-image: none;
		line-height: 36px;
		padding: 0 10px;
		margin: 0px;
		height: 36px;
		width: 100%;
		background-color: #ff831f;
	}
	.where-content .map span {
		position: static;
		color: #000;
		font-weight: bold;
		margin-right: 10px;
	}
	.where-content .column.car {
		margin-top: -20px;
	}
	.rules-content .column, .neighborhood-content .column ,.where-content .column { width: 100%; }
	.rules-content .column.last, .neighborhood-content .column.last {
		float: none;
		margin-left: 0px;
	}
	#rules {
		min-height: 200px;
		padding-bottom: 230px;
	}
	#family {
		position: static;
		background-image: none;
		width: 100%;
		padding: 0px;
	}
}

#puvod {
	font-size: 14px;
	line-height: 22px;
}

@media only screen and (max-width: 468px) {
	#rules {
		background-image: url(../images/trip2.jpg);
	}

	#about .symbol {
		width: 80px !important;
	}
}
@media only screen and (max-width: 800px) {
	.where-content .map { font-weight: normal !important; }
}
@media only screen and (max-width: 1000px) {
	.rules-content .last {
		margin-left: 0px !important;
	}
}
@media only screen and (min-width: 768px) {
	nav {
		left: 220px;
	}

	nav ul li {
		margin: 0px 5px;
	}

	nav ul li a {
		font-size: 16px;
	}

}
@media only screen and (min-width: 980px) {
	nav {
		left: 250px;			
	}
	nav ul li {
		margin: 0px 20px;
	}
}