/* CSS Document */
body {background: url('/graphics/body-background.png') #eee; text-align: center; margin: 0px; padding: 0px; font-family: Arial, sans-serif; font-size: 0.8em}
h1 {font-family: Dosis, sans-serif; font-size: 1.8em; margin: 28px 28px 8px 28px}
h2 {font-family: Dosis, sans-serif; font-size: 1.4em; margin: 8px 8px 8px 0px}
h3 {font-family: Dosis, sans-serif; font-size: 1.2em; margin: 8px 8px 8px 0px}
p {font-size: 1em; text-indent: 20px; margin: 8px 8px 8px 8px}
img {border: none; vertical-align: bottom}
a {color: #000}

#page-shadow {background: url('graphics/page-shadow.png') repeat-y; background-size: 100% 100%; margin: 0px auto; width: 100%; max-width: 848px}

#page {background: #fff; margin: 0px auto; width: 100%; max-width: 808px; text-align: left; overflow: hidden; padding-bottom: 12px}

#logo {margin: 20px 2px 20px 20px; width: calc(100% - 40px); max-width: 768px; max-height: 253px}

.menu {background: url('graphics/menu.png'); width: 100%; max-width: 808px; padding: 0px 0px 0px 0px; font-size: 1em; margin: 0px 0px 0px 0px}
.menu li {display: inline}
.menu a {display: inline-block; line-height: 50px; text-decoration: none; padding: 0px 20px 0px 20px; margin: 8px 0px 8px 0px; color: #000}
.menu li:first-child {margin-left: 18px}
.menu li:nth-last-child(2) {margin-right: 18px}
.menu a:hover, #menu a:focus {background: url('/graphics/menu-hover.png') repeat-x #000; color: #fff}
.menu li.icon {display: none}

@media (max-width: 499px) {

  .menu li:not(:first-child) {display: none}
  .menu li.icon {float: right; display: inline-block; margin-right: 18px}
  .menu.responsive {position: relative; padding: 8px 0px 0px 0px}
  .menu.responsive li.icon {position: absolute; right: 0; top: 8px}
  .menu.responsive li {display: block; margin: 0px 18px 16px 18px}
  .menu.responsive li a {display: block; text-align: left; margin: 0px 0px 0px 0px}
  .menu.responsive li:nth-last-child(2) {padding-bottom: 8px}
}


.left {margin: 20px 20px 20px 20px; width: calc(100% - 40px); max-width: 768px}
.right {margin: 20px 20px 20px 20px; width: calc(100% - 40px); max-width: 768px}
.both {margin: 20px 20px 20px 20px; max-width: 768px; clear: both}
  
@media (min-width: 500px) {  
.left {width: calc(50% - 30px); max-width: 374px; float: left}
.right {margin-left: 0px; width: calc(50% - 30px); max-width: 374px; float: right}
}

.poster {width: 100%}

.pics img {width: 100%; margin: 0px 0px 10px 0px}

.right-box-top {background: url('/graphics/right-box-top.png') no-repeat; background-size: 100% 100%; width: 100%; height: 8px}
.right-box {background: url('/graphics/right-box.png') repeat-y; background-size: 100% 100%; width: 96%; padding: 0% 2% 0% 2%; font-size: 0px; margin: 0px; text-align: left}
.right-box-bottom {background: url('/graphics/right-box-bottom.png') no-repeat; background-size: 100% 100%; width: 100%; height: 8px}

.right-box iframe {margin: 0px 8px 0px 8px}

.sticky-top {clear: both; background: url('/graphics/sticky-top.png') repeat-x; width: 100%; height: 4px}
.sticky {background: #ff0; border-top: 3px solid #fff; border-bottom: 3px solid #fff; padding: 20px 20px 0px 20px; overflow: hidden}
.sticky-bottom {clear: both; background: url('/graphics/sticky-bottom.png') repeat-x; width: 100%; height: 4px}

.sticky img {float: left; margin: 0px 20px 20px 0px}
.sticky p {text-indent: 0px; margin: 8px 0px 20px 0px}

#menu-bottom {padding: 0px; margin: 20px 20px 20px 20px}
#menu-bottom li {display: inline; padding-left: 8px}
#menu-bottom a:hover, #menu-bottom a:focus {background: #ff0}

.date {font-style: italic}

.reklama-siroka {margin: 20px 48px 0px 32px} 
.reklama-velka {width: 100%; max-width: 970px; height: 250px; margin: 0px auto} 

.buy {margin-bottom: 20px; max-width: 111px; max-height: 43px}
.package {margin-bottom: 20px; margin-right: -133px; width: 150px; height: 200px}

.velky img{width:768px; height: 497px}
/*.civilizationleft {margin: 8px; width: 376px; height: 212px}
.civilizationright {margin: 8px; width: 340px; height: 212px}     
.civilizationright2 {margin: 8px; width: 340px; height: 191px}
*/
.video {position: relative; padding-bottom: 50%; padding-top: 25px; height: 0; overflow: hidden}
.video iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%}
.video {position: relative; padding-bottom: 50%; padding-top: 25px; height: 0; overflow: hidden}
.video iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%}