* {margin: 0; padding: 0;}
 img {border: 0;}
 a{text-decoration: none;}
 body {font-family:'Arial', sans-serif; font-size: 1em; color: #58585A; background: #000;}
h1,h2,h3,h4 {font-weight: 900;}
 
input {-webkit-appearance: none; -webkit-border-radius:0px;}
 
.clr {clear: both;}

#obal {display: block; position: absolute; top:0; left:0; width: 100%; height: 100%; overflow: hidden;}

#buttony {display: block; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; z-index: 4000;}
#buttony a {display: block; float: left; height: 100px; text-align: center; text-transform: uppercase; font-weight: bold; color: #000; background: rgba(256,256,256, 0.8); line-height: 100px; cursor: pointer; margin-right: 1px;}

#logo1 {display: block; position: absolute; top: 20px; left: 20px; z-index: 6000; background: url(../images/logo.jpg) top left no-repeat; width: 200px; height: 245px;}

.close {position: absolute; top: 30px; right: 30px; width: 40px; height: 40px; cursor: pointer;}

#obsah {position: relative; width: 100%; z-index: 5000;}
.obsah_box {position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(256,256,256, 1); z-index: 4000;}
#obsah h1 {color: #1C006C; padding: 50px 0 20px 50px; font-weight: 900 italic;}
#obsah img {width: 100%; max-width: 100%; height: auto;}
#obsah h2 {color: #0040FF; margin: 10px 0;}
#obsah h3 {color: #0040FF; margin: 5px 0;}
#obsah li {margin-left: 30px; line-height: 24px;}

.scroller {display: block; max-width: 960px !important; overflow: hidden; padding: 0 50px;}
.scroller p {line-height: 24px; margin:10px 0;}

#slider {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 500; overflow: hidden;}
#slider .slide {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.slide1 {background: url(../images/bg/bg1-1600.jpg) center center no-repeat; background-size: cover;}
.slide2 {background: url(../images/bg/bg2-1600.jpg) center center no-repeat; background-size: cover;}
#slider h1 {display: block; position: absolute; bottom: 60px; right: 20px; font-size: 1.4em; color: #fff000; width: 300px; text-align: right;}
#telefon {display: block; position: absolute; top: 30px; right: 20px; color: #1c006c; float: right; text-align: right; font-size: 0.6em;}
#telefon a {display: block; color: #fff000; font-size: 1.8em; font-weight: bold;}

#kontakt-informace {display: block; max-width: 960px; min-height: 150px;}
#kontakt h2, #kontakt h3 {text-transform: uppercase; font-size: 1em; font-weight: bold; margin-bottom: 10px; color: #0040FF;}
#kontakt-adresa {min-width: 200px;}
#kontakt-informace div {display: block; float: left; max-width: 480px; min-width: 200px; margin: 0 30px 10px 0;}
#kontakt-informace p {line-height: 20px; margin: 0 0 5px 0;}
#mainform {max-width: 500px; min-height: 470px; float: left;}
#mainform label {display: block; width: 110px; height: 35px; line-height: 35px; float: left; margin-bottom: 10px; color: #000;}
#mainform input {display: block; width: 290px; height: 35px; line-height: 35px; padding: 0 5px; float: left; background: #0040FF; color: #fff; border: none; margin-bottom: 10px;}
#mainform textarea {display: block; width: 380px; height: 200px; line-height: 20px; padding: 5px; float: left; background: #0040FF; color: #fff; border: none; margin-bottom: 10px;}
#mainform .button {float: right; width: 100%; text-align: center; background: #1C006C; cursor: pointer;}
#returnmessage {display: block; clear: both; margin-bottom: 20px; color: #1C006C;}

#vlajky {position: absolute; top: 90px; right: 20px; z-index: 5500; background: #fff; padding: 10px;}

#social {display: block; position: absolute; bottom: 50px; left: 50px; z-index: 3000; width: 48px;}
#social a{opacity: 0.8;}
#social a:hover{opacity: 1;}

#menu_box li {list-style-type: none; display: block; width: 100%; margin: 10px 0; padding-bottom: 10px; border-bottom: #f0f0f0 1px solid;}
#menu_box li span {float: right;}

#map {width: 100%; height: 300px; margin-bottom: 50px;}

@media only screen 
and (max-device-width : 640px) {

	#logo1 {background: url(../images/logo2.jpg) top left no-repeat; width: 150px; height: 97px; top: 20px; left: 20px;}

	#obsah h1 {padding: 45px 0 20px 20px !important; font-weight: bold;}
	#obsah {font-size: 0.8em;}
	#kontakt h2, #kontakt h3 {text-transform: uppercase; font-size: 1em; font-weight: bold; margin-bottom: 5px;}
	#kontakt-informace div {width: 100% !important; height: auto;}
	#mainform {width: 100%; float: left; padding: 0; margin: 0;}
	#mainform label{float: none; width: 100%; height: 30px; margin-bottom: 0px;}
	#mainform input,#mainform textarea,#mainform .button{float: none; width: 100%; margin-bottom: 5px;}
	#mainform textarea{padding: 5px;}
	.slide1 {background: url(../images/bg/bg1-320.jpg) center center no-repeat; background-size: cover;}
	.slide2 {background: url(../images/bg/bg2-320.jpg) center center no-repeat; background-size: cover;}
	#buttony {height: 40px;}
	#buttony a {height: 40px; line-height: 40px; font-size: 0.7em;}
	.scroller {padding: 0 20px;}

	#social {bottom: 10px; left: 10px;}
}

@media screen and (min-width: 1024px) {

#telefon {font-size: 1em;}
#slider h1 {bottom: 130px;}
#vlajky {top: 120px;}

}