html {
	background: #358922;
	min-height: 100%;
}

body {
	color: #000;
	background: #FFF;
	font-family: 'PT Sans', sans-serif;
	font-size: 11pt;
	font-weight: 300;
	margin: 0;
	width: 100%;
	animation: bodyAnim 1.5s ease-out 1 forwards;
}

@keyframes bodyAnim {
	0% {
		position: fixed;
	}
	70% {
		position: fixed;
	}
	100% {
		position: initial;
	}
}

h1 {
	color: #000;
	font-size: 20pt;
	font-weight: 700;
	margin: 0 0 10px 0;
}

h2 {
	color: #888;
	font-size: 16pt;
	font-weight: 300;
	margin: 20px 0 10px 0;
}

h3 {
	color: #000;
	font-size: 12pt;
	font-weight: 500;
	margin: 20px 0 10px 0;
}

h4 {
	color: #000;
	font-size: 11pt;
	font-weight: 500;
	margin: 20px 0 10px 0;
}

h5 {
	color: #000;
	font-size: 11pt;
	font-weight: 400;
	margin: 20px 0 10px 0;
}

h6 {
	color: #000;
	font-size: 11pt;
	font-weight: 300;
	margin: 20px 0 10px 0;
}

p {
	margin: 10px 0;
}

a {
	color: #358922;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

strong {
	font-weight: inherit;
}

img {
	border: none;
}

input, select, optgroup, option, button, textarea {
	font-family: inherit;
	font-size: 100%;
	font-weight: 400;
	font-style: normal;
}

input[type="text"], textarea {
	color: #000;
	background-color: #FFF;
	border-color: #358922;
	border-style: solid;
	font-weight: 500;
	padding: 2px;
	border-radius: 2px;
}

textarea {
	resize: vertical;
}

select {
	color: #000;
	background-color: #FFF;
	border-color: #358922;
	border-style: solid;
	font-weight: 400;
	padding: 1px;
	border-radius: 2px;
}

button {
	color: #ADA;
	background-color: #358922;
	border-color: #358922;
	border-style: solid;
	font-weight: 400;
	padding: 2px 5px;
	cursor: pointer;
	border-radius: 2px;
}

button::-moz-focus-inner {
	margin-top: -1px;
	margin-bottom: -1px;
}

button:hover {
	color: #FFF;
	background-color: #444;
	border-color: #444;
}

video {
	border: 5px solid #DDD;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

#header {
	text-align: center;
	padding: 20px 0;
}

#header .logo {
	display: inline-block;
	position: relative;
}

#header .logo img {
	vertical-align: middle;
}

#header .logo > .shine {
	background: url('images/shine.png') no-repeat;
	background-position: -100% center;
	background-size: contain;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: overlay;
	animation: logoShineAnim 3s ease-in 500ms 1 forwards;
}

@keyframes logoShineAnim {
	0% {
		background-position: -50% center;
		right: 0;
		bottom: 0;
	}
	99% {
		background-position: 150% center;
		right: 0;
		bottom: 0;
	}
	100% {
		background-position: 150% center;
		top: -100%;
		bottom: 100%;
	}
}

#logo_seceni, #logo_pujcovna {
	max-width: 100%;
}

#nav {
	color: #EEE;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	margin: 0 auto 30px auto;
	padding: 0 30px;
	max-width: 1124px;
}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 99;
}

#nav > ul {
//	text-align: right;
	text-align: center;
	margin-top: 5px;
	display: inline-block;
	min-width: 50%;
}

#nav > ul.rental {
	text-align: left;
	min-width: auto;
}

#nav > ul > li {
	display: inline-block;
}

#nav > ul > li.submenu {
	position: relative;
	top: 0;
	transition: top 250ms linear;
}

#nav > ul > li.submenu:hover {
	top: 5px;
}

#nav > ul > li.submenu:hover > a {
	border-bottom-left-radius: 0;
}

#nav > ul > li:hover > ul {
	display: block;
}

#nav > ul ul {
	text-align: left;
	display: none;
	position: absolute;
}

#nav > ul ul > li > a {
	min-width: 50%;
	border-top-left-radius: 0;
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
	border-bottom-left-radius: 0 !important;
}

#nav > ul ul > li:last-child > a {
	border-bottom-left-radius: 19px !important;
}

#nav > ul ul > li:first-child > a {
	border-bottom-left-radius: 0 !important;
}

#nav > ul ul li {
	margin-top: -5px;
}

#nav > ul ul li.submenu:hover > a {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#nav > ul ul ul {
	margin-top: 5px;
	margin-left: -5px;
}

#nav li a {
	color: #ADA;
	background: #358922;
	background-clip: padding-box;
	border: 5px transparent solid;
	text-decoration: none;
	white-space: nowrap;
	padding: 5px 14px 5px 12px;
	display: inline-block;
	border-top-left-radius: 19px;
	border-bottom-right-radius: 19px;
}

#nav ul.rental li a {
	color: #FFFAF2;
	background-color: #FF8200;
}

#nav ul.gray li a {
	color: #FFF;
	background-color: #BBB;
}

#nav ul.rental.gray li a {
	color: #FFF;
	background-color: #BBB;
}

#nav li:first-child a {
	border-bottom-left-radius: 19px;
}

#nav li:last-child a {
	margin-left: 0;
	border-top-right-radius: 19px;
}

#nav ul li a:hover {
	color: #FFF;
	background: #444;
	text-shadow: 0 0 3px #A2A2A2;
}

#nav ul.rental li a:hover {
	color: #FFF;
	background: #444;
}

#nav li:hover > ul {
	display: inline-block;
}

#nav li:hover ul > li > a {
	background-clip: padding-box;
	border-color: rgba(217,217,217,0.9);
}

#nav li:hover > a {
	color: #FFF;
	background: #444;
	border-color: rgba(217,217,217,0.9);
	text-shadow: 0 0 3px #A2A2A2;
}

#subnav {
	display: none;
}

#subnav li {
	display: inline-block;
}

#section {
	text-align: center;
}

#section.rental {
	direction: rtl;
}

#section.rental > .column {
	direction: ltr;
}

#section .column {
	vertical-align: top;
	display: inline-block;
	width: 50%;
	min-width: 296px;
	max-width: 592px;
}

#section .column.wide {
	width: 100%;
	max-width: 1171px;
}

#section .column > img {
	margin-bottom: -10px;
	max-width: 100%;
	position: relative;
	top: -10px;
}

#section .content {
	text-align: left;
	padding: 0 15px 30px 30px;
}

#section .content p {
	line-height: 15pt;
	margin: 20px 0 0 0;
}

#section .content img {
	vertical-align: top;
}

#section .content a.hover img {
	transition: transform 500ms;
}

#section .content a.hover:hover img {
	transform: scale(1.075);
	transition: transform 250ms;
}

div.logo-text {
	text-align: center;
	margin: 0 30px 30px 0;
	overflow: hidden;
	display: inline-block;
	width: 20%;
	min-height: 259px;
	min-width: 186px;
	max-width: 259px;
}

div.logo-text p {
	margin: 10px 0;
}

#section div.hidden-more {
	background: #358922;
	background-image: linear-gradient(to right, #DDD 50%, #358922 90%);
	text-align: right;
	margin: 20px 14px 0 0;
	height: 5px;
}

#section div.hidden-more a {
	color: #ADA;
	background: #358922 url('images/s-down.gif') no-repeat 9px 12px;
	text-align: center;
	text-decoration: none;
	margin-right: -14px;
	padding: 5px 10px 5px 25px;
	display: inline-block;
	min-width: 35px;
	cursor: pointer;
	border-top-right-radius: 14px;
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 3px;
}

#section.rental div.hidden-more {
	background: #FF8200;
	background-image: linear-gradient(to right, #DDD 50%, #FF8200 90%);
}

#section.rental div.hidden-more a {
	color: #FFFAF2;
	background: #FF8200 url('images/s-down.gif') no-repeat 9px 12px;
}

#section .column.wide div.hidden-more {
	margin-right: 44px;
}

#gallery {
	padding: 0 0 20px 15px;
}

#gallery .container {
	overflow: hidden;
	display: inline-block;
	width: 50%;
}

#section .column.wide #gallery .container {
	width: 25%;
}

#gallery .container.one {
	width: 100% !important;
}

#gallery .container .frame {
	border: 5px #DDD solid;
	margin: 0 30px 22px 0;
	overflow: hidden;
	position: relative;
}

#gallery .container .title {
	color: #555;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 30px 1px 5px;
}

#gallery .container .frame .title {
	color: #FFF;
	background: rgba(0,0,0,0.25);
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 0 1px 3px;
	width: 100%;
	position: absolute;
	z-index: 1;
	text-shadow: 0 1px 1px #000;
	transition: 3s;
}

#gallery .container .frame img {
	vertical-align: top;
	width: 100%;
	position: relative;
	filter: grayscale(100%) brightness(120%) contrast(90%);
	transition: 1s;
}

#section .column.wide #gallery .container .frame img {
	filter: none;
}

#gallery .container .frame:hover img {
	filter: none;
	transform: scale(1.15);
	transition: 250ms;
}

#image {
	border: 5px #DDD solid;
	vertical-align: middle;
	margin: 30px auto;
	max-width: 100%;
	display: block;
}

#contact {
	margin-top: 35px;
	max-width: 562px;
}

#contact form div {
	margin-top: 10px;
	padding-right: 8px;
}

#contact form div:last-child {
	text-align: center;
}

#contact input, #contact textarea {
	border-color: #CCC;
	width: 100%;
}

#contact input:focus, #contact textarea:focus {
	border-color: #358922;
}

#contact button {
	padding: 3px 10px;
	border-radius: 14px;
}

#grass {
	background: url('images/grass.png') repeat-x center bottom;
	margin-top: 4px;
	height: 88px;
}

#mower {
	background: url('images/mower.png') no-repeat -1000px bottom;
	height: 89px;
}

#footer {
	color: #ADA;
	background: #358922;
	font-style: italic;
	font-weight: 600;
	text-shadow: 0 1px 1px #1A4411;
}

#footer > div {
	margin: 0 auto;
	padding: 0 15px 15px 15px;
	max-width: 1140px;
}

#footer .column {
	line-height: 15pt;
	vertical-align: top;
	margin-top: 15px;
	padding-right: 15px;
	display: inline-block;
	min-width: 50%;
	box-sizing: border-box;
}

#footer .subcolumn {
	vertical-align: top;
	white-space: nowrap;
	margin-top: 10px;
	padding-right: 15px;
	display: inline-block;
	min-width: 50%;
	box-sizing: border-box;
}

#footer a {
	color: inherit;
}

#footer a i[class^=icon-] {
	font-size: 280%;
	display: inline-block;
	transition: transform 500ms;
}

#footer a:hover i[class^=icon-] {
	transform: scale(1.25);
	transition: transform 250ms;
}

.gray {
	color: #888;
}

.small {
	font-size: 10pt;
}

.normal {
	font-weight: 300;
}

.bold {
	font-weight: 500;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.hidden {
	display: none;
}

#intro {
	text-align: center;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	animation: introAnim 1.5s ease-out 1 forwards;
}

@keyframes introAnim {
	0% {
		background-color: #FFF;
		bottom: 0%;
	}
	70% {
		background-color: #FFF;
	}
	99% {
		background-color: transparent;
		bottom: 0%;
	}
	100% {
		bottom: 100%;
	}
}

#intro > .logo {
	padding: 20px 0;
	display: inline-block;
	position: relative;
	animation: introLogoAnim 1.5s ease-out 1 forwards;
}

#intro > .logo img {
	vertical-align: middle;
}

@keyframes introLogoAnim {
	0% {
		top: -100%;
	}
	70% {
		top: 0;
	}
	100% {
		top: 0;
	}
}


@media (max-width: 705px) {

	#nav > ul,
	#nav > ul.rental {
		text-align: center;
	}

	#gallery {
		padding-right: 30px;
	}

	#gallery .container {
		display: block;
		margin: 0 auto;
		min-width: 259px;
	}

	#section div.hidden-more {
		background-image: linear-gradient(to right, #DDD 40%, #358922 80%);
	}

	#section.rental div.hidden-more {
		background-image: linear-gradient(to right, #DDD 40%, #FF8200 80%);
	}

	#section .column.wide #gallery .container {
		display: inline-block;
		width: 50%;
	}

	#gallery .container .frame {
		margin-right: 0;
	}

	#section .column.wide #gallery .container .frame {
		margin-right: 30px;
	}
}

@media (max-width: 637px) {

	#logo_pujcovna {
		margin-bottom: -15px;
	}

	#nav > ul {
		width: 100%;
	}

	#nav li:hover > ul {
		display: none !important;
	}

	#nav > ul > li.submenu:hover {
		top: 0;
	}

	#nav.subnav > ul li a {
		color: #FFF;
		background-color: #BBB;
	}

	#subnav {
		text-align: center;
		display: block;
	}

	#section .column {
		width: 100%;
	}

	#section .content {
		padding-left: 15px;
		padding-bottom: 15px;
	}

	#gallery {
		margin-top: 25px;
	}

	#section .column.wide #gallery .container {
		display: block;
		margin: 0 auto;
		width: auto;
		min-width: 259px;
	}

	#gallery .container .frame {
		margin-bottom: 15px;
	}

	#section .column.wide #gallery .container .frame {
		margin-right: 0;
	}

	#gallery .container .frame img.color {
		opacity: 1;
	}

}