/* vlastni pisma */

@font-face {
    font-family: 'Bookerly Bold';
    src: url('fonty/bookerly_bold.eot');
    src: url('fonty/bookerly_bold.eot?#iefix') format('embedded-opentype'),
         url('fonty/bookerly_bold.woff') format('woff'),
         url('fonty/bookerly_bold.ttf') format('truetype'),
         url('fonty/bookerly_bold.svg#bookerlybold') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Bookerly';
    src: url('fonty/bookerly.eot');
    src: url('fonty/bookerly.eot?#iefix') format('embedded-opentype'),
         url('fonty/bookerly.woff') format('woff'),
         url('fonty/bookerly.ttf') format('truetype'),
         url('fonty/bookerly.svg#bookerlyregular') format('svg');
    font-weight: normal;
    font-style: normal;}
    
@font-face {
    font-family: 'Montserrat Bold';
    src: url('../karty/fonty/montserrat_bold.eot');
    src: url('../karty/fonty/montserrat_bold.eot?#iefix') format('embedded-opentype'),
         url('../karty/fonty/montserrat_bold.woff') format('woff'),
         url('../karty/fonty/montserrat_bold.ttf') format('truetype'),
         url('../karty/fonty/montserrat_bold.svg#Montserrat Bold') format('svg');
    font-weight: normal;
    font-style: normal;}    

/* CSS reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }       

*:focus, *:active {outline: 0;}     
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}

html, body {
      background: #fff;
      padding: 0;
      text-align: center;
      font-family: 'Bookerly', serif;
      position: relative;
      margin: 0;
      width: 100%;
      overflow-x: hidden;
      
      -webkit-font-smoothing: antialiased;}
    
a {text-decoration: none;}

b, strong {font-family: 'Bookerly Bold', serif; font-weight: normal;}

/* */  
      
.wrapper {overflow: hidden;}
          
.page {
      background: #232323;
      width: 100%;
      position: relative;
      text-align: center;}
      
.page_container {
      margin: 0 auto 100px auto;
      width: 100%;
      max-width: 870px;
      text-align: center;
      position: relative;
      z-index: 1;} 
      
.page1 {background: #232323 url(pix/bg.jpg) no-repeat center center; background-size: cover; height: 100vh;}          

a#pull {display: none;} 

#zahlavi {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 5;
  text-align: right;
  padding: 40px 40px 0 0;}

.page1 .nadpis {
    padding: 0;
    margin: 0 auto;
    width: 90%;
    height: 248px;
    position: absolute;
    top: 20vh;
    left: 5%;
    background: transparent url(pix/vodopad.svg) top center no-repeat;
    background-size: contain;
    display: block;}

.page1 .nadpis h1 {
      padding: 0;
      margin: 0 auto;
    line-height: 1;
    display: inline-block;
      color: #fff;
    text-indent: 9999px;
    overflow: hidden;
    text-align: center;}  
    
a.protilidskosti {
  position: absolute; left: 40px; top: 57px;
  color: #fff;
  font: 20px/1.5 'Montserrat Bold', sans-serif;
  opacity: 0.4; filter: alpha(opacity=40);
  z-index: 6;}  
  
a.protilidskosti:hover {opacity: 1; filter: alpha(opacity=100);}    
  
a.protilidskosti, a.koupit, a.facebook, a.kup, a.uvod {
-webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;}     

a.koupit, a.facebook, a.kup, a.uvod {
  text-indent: 9999px;
  width: 160px;
  line-height: 88px;
  overflow: hidden;
  margin: 0 0 0 0;
    display: inline-block;
    text-decoration: none;
    opacity: 0.6;
    filter: alpha(opacity=60);
  background: transparent url(pix/koupit.png) top center no-repeat;}    

a.facebook {width: 77px; margin: 0 0 0 40px; background: transparent url(pix/facebook.png) top center no-repeat; position: relative;}
a.kup {width: 77px; margin: 0 0 0 40px; background: transparent url(pix/kup.png) top center no-repeat;}   
a.uvod {width: 77px; margin: 0 0 0 40px; background: transparent url(pix/home.png) top center no-repeat;}   

#zahlavi span {position: absolute; top: 128px; right: 68px; content: ''; display: block; width: 149px; height: 99px; z-index: 5; background: transparent url(pix/handwriting.png) top center no-repeat;}   
  
a.koupit:hover, a.facebook:hover, a.kup:hover, a.uvod:hover {opacity: 1; filter: alpha(opacity=100);}   

@media screen and (min-aspect-ratio: 16/9) {.page1 .nadpis {top: 22vh;}}
@media screen and (min-aspect-ratio: 16/9) and (max-width: 1600px){.page1 .nadpis {top: 12vh;}}
@media screen and (min-aspect-ratio: 16/8) {.page1 .nadpis {top: 15vh;}}
@media screen and (min-aspect-ratio: 16/8) and (max-width: 1600px){.page1 .nadpis {top: 10vh;}}
@media screen and (min-aspect-ratio: 16/6) {.page1 .nadpis {top: 10vh;}}
@media screen and (max-aspect-ratio: 3/2) {.page1 .nadpis {top: 18vh;}}
@media screen and (max-aspect-ratio: 1/1) {.page1 .nadpis {top: 22vh;}}
@media screen and (max-aspect-ratio: 3/4) {.page1 .nadpis {top: 30vh;}}
@media screen and (max-aspect-ratio: 3/6) {.page1 .nadpis {top: 32vh;}}

@media screen and (max-width: 650px) {
#zahlavi {
  position: relative;
  right: auto;
  top: auto;
    margin: 40px auto 0 auto;
  z-index: 5;
  text-align: center;
    width: auto;
  padding: 0;}   
a.protilidskosti {position: absolute; width: 100%; text-align: center; left: 0; top: 25px; font-size: 20px;} 
}
@media screen and (min-aspect-ratio: 2/3) and (max-width: 650px){.page1 .nadpis {top: 32vh;}}

@media screen and (max-width: 420px) {
.page1 {background: #232323 url(pix/bg.jpg) no-repeat center center; background-size: cover; height: auto; min-height: 100vh;}          
.page1 .nadpis {position: relative; margin: 0 auto 0px auto; top: auto; left: auto;}
   
a.koupit, a.facebook, a.kup, a.uvod {
  width: 120px;
  line-height: 63px;
  background-size: 100% auto;}
a.facebook, a.kup, a.uvod {width: 51px; margin: 0 0 0 20px;}       
}   
   
@media screen and (max-width: 1300px) {
#zahlavi span {display: none;}
}
      
.page2 {background: #fff;}

.page2 .page_container {max-width: 970px;}

.page2 h1 {
    margin: 100px auto 0 auto;
    display: block;
    text-align: center;
    width: auto;
    max-width: 352px;
    position: relative;
    clear: left;}

.page2 h1 img {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: inline-block;}

.page2 h2 {
      color: #555;
      font: normal 36px/1.3 'Bookerly Bold', serif;
      margin: 60px 0 60px 0;}
      
.page2 .sloupec {
      width: 30%;
      margin: 0 5% 0 0;
      float: left;}
      
.page2 .sloupec:nth-of-type(3) {margin: 0 0 0 0;}

.page2 .ikona {
    background: url(pix/ikona_1.png) no-repeat center center;
    width: 160px;
    display: block;
    margin: 0 auto 20px auto;
    height: 160px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.2);}
.page2 .ikona.ikona2 {background: url(pix/ikona_2.png) no-repeat center center;}
.page2 .ikona.ikona3 {background: url(pix/ikona_3.png) no-repeat center center;}

.page2 .ikona.svetla {background: url(pix/ikona_1_svetla.png) no-repeat center center;-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.page2 .ikona.svetla.ikona2 {background: url(pix/ikona_2_svetla.png) no-repeat center center;}
.page2 .ikona.svetla.ikona3 {background: url(pix/ikona_3_svetla.png) no-repeat center center;}

.page2 h3 {font: normal 30px/1.3 'Bookerly Bold', serif; margin: 0 auto 10px auto;}
      
.page2 p {
      color: #555;
      font: normal 20px/1.45 'Bookerly', serif;
      margin: 0;}         

.page3 {background: #19181e url(pix/bg3.jpg) no-repeat center right; background-size: auto 100%;}

.page3 h1 {
    margin: 100px auto 0 auto;
    display: block;
    text-align: center;
    width: auto;
    max-width: 329px;
    position: relative;
    clear: left;}

.page3 h1 img {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: inline-block;}
      
.page3 .sloupec {
      width: 30%;
      margin: 60px 1% 0 0;
      float: left;}

.page3 .sloupec:nth-of-type(2) {
    margin: 140px 1% 0 0;}
      
.page3 .sloupec:nth-of-type(3) {
      margin: 220px 0 60px 0;}

.page3 h3 {
      color: #dfdbdb;
      font: normal 96px/1 'Bookerly', serif;
      margin: 0;
    padding: 0 0 0 24px;}
      
.page3 p {
      color: #dfdbdb;
      font: normal 20px/1.45 'Bookerly', serif;
      margin: 25px 0 0 0;} 

.page4 {background: #fff;}

.page4 h1 {
    margin: 100px auto 60px auto;
    display: block;
    text-align: center;
    width: auto;
    max-width: 322px;
    position: relative;
    clear: left;}

.page4 h1:nth-of-type(2), .page4 h1:nth-of-type(3) {margin: 80px auto 60px auto;}
.page4 h1:nth-of-type(2) {max-width: 404px;}
.page4 h1:nth-of-type(3) {max-width: 753px;}

.page4 h1 img {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: inline-block;}
      
.page4 .sloupec {width: 100%; margin: 0 0 60px 0;}

.page4 .sloupec .popis h3 {font: normal 30px/1.3 'Bookerly Bold', serif; margin: 0 auto 10px auto;}

.page4 .sloupec .karta {width: 50%;float: left;}

.page4 .sloupec .karta img {
    -webkit-box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.4);
    float: right;
    width: 100%; 
    height: auto;
    max-width: 300px;}

.page4 .sloupec:nth-of-type(5) .karta img {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    float: left;
    width: 100%; 
    max-width: 286px;}

.page4 .sloupec:nth-of-type(2n) .karta {float: right;}
.page4 .sloupec:nth-of-type(2) .karta img {float: left; max-width: 420px;}
.page4 .sloupec:nth-of-type(4) .karta img {float: left;}
.page4 .sloupec:nth-of-type(5) .karta {width: 35%;}

.page4 .sloupec .popis {width: 50%; float: left; text-align: left; padding: 120px 0 0 40px; display: block;} 
.page4 .sloupec:nth-of-type(2) .popis {padding: 70px 40px 0 0; text-align: right; float: right;} 
.page4 .sloupec:nth-of-type(3) .popis {padding: 60px 0 0 40px; } 
.page4 .sloupec:nth-of-type(4) .popis {padding: 110px 40px 0 0; text-align: right; float: right;} 

.page4 .sloupec .popis p {width: auto; max-width: 300px; color: #424242; font: normal 20px/1.45 'Bookerly', serif;} 
.page4 .sloupec:nth-of-type(2) .popis p {text-align: right; float: right; max-width: 100%; } 
.page4 .sloupec:nth-of-type(4) .popis p {text-align: right; float: right;} 

.page4 .sloupec .popis_siroky {width: 65%; float: left; text-align: left; padding: 0 0 0 40px; display: block;} 
.page4 .sloupec .popis_siroky p {width: auto; color: #424242; font: normal 20px/1.45 'Bookerly', serif; text-align: left; margin: 0 0 10px 0;} 

.page4 .sloupec:last-of-type {margin: 0 auto 0 auto;}

.page5 {background: #111;}

.page5 h1 {
    margin: 100px auto 60px auto;
    display: block;
    text-align: center;
    width: auto;
    max-width: 236px;
    position: relative;
    clear: left;}

.page5 h1 img {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: inline-block;}

.page5 p {
    font: normal 22px/1.45 'Bookerly', serif;
    color: #DFDBDB;}

.page6 {background: #fff;}

.page6 h1 {
    margin: 100px auto 60px auto;
    display: block;
    text-align: center;
    width: auto;
    max-width: 704px;
    position: relative;
    clear: left;}

.page6 h1 img {
    margin: 0 auto;
    width: 100%;
    padding: 0;
    display: inline-block;}

.page6 .zabava {margin: -40px auto 0 auto;} 

.page6 .zabava img {float: left; width: 179px;} 

.page6 .popis {float: left; text-align: left; color: #424242; font: normal 18px/1.25 'Bookerly', serif; margin: 50px 0 0 40px;} 

.page6 .popis span {display: block; font: normal 48px/1.25 'Bookerly', serif;} 

.page6 .zabava:nth-of-type(1) {margin: 0 auto;} 
.page6 .zabava:nth-of-type(2) img {float: right;} 
.page6 .zabava:nth-of-type(2) .popis {float: right; text-align: right; margin: 50px 40px 0 0;} 

.page7 {background: #111;}

.page7 .page_container {margin: 0 auto 60px auto;}

.page7 h1 {
    margin: 100px auto 60px auto;
    display: block;
    text-align: center;
    width: auto;
    max-width: 122px;
    position: relative;
    clear: left;}

.page7 h1 img {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: inline-block;}

.page7 .sloupec {
    width: 48%;
    margin: 0 2% 0 0;
    float: left;
    text-align: left;}

.page7 .sloupec:nth-of-type(2) {margin: 0 0 0 2%;}
      
.scroll {
  width: 114px;
  height: 140px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin: 0 0 0 -57px;
  padding: 0;
  display: block;
  background: transparent url(pix/sipka.png) bottom center no-repeat;
  animation: skrolling 1s linear infinite;
	-moz-animation: skrolling 1s linear infinite;
	-webkit-animation: skrolling 1s linear infinite;
	-ms-animation: skrolling 1s linear infinite;
	-o-animation: skrolling 1s linear infinite;}

.scroll a {
  width: 100%;
  height: 100%;
  display: block;}
  
@keyframes skrolling {
	0% { background-position: bottom center; }
	50% { background-position: top center; }
  100% { background-position: bottom center; }
}
@-moz-keyframes skrolling {
	0% { background-position: bottom center; }
	50% { background-position: top center; }
  100% { background-position: bottom center; }
}
@-webkit-keyframes skrolling {
	0% { background-position: bottom center; }
	50% { background-position: top center; }
  100% { background-position: bottom center; }
}
@-ms-keyframes skrolling {
	0% { background-position: bottom center; }
	50% { background-position: top center; }
  100% { background-position: bottom center; }
}
@-o-keyframes skrolling {
	0% { background-position: bottom center; }
	50% { background-position: top center; }
  100% { background-position: bottom center; }
}

.zapati {
    width: auto;
    background: #111;
    color: #999;
    font: normal 18px/1.45 'Bookerly', serif;
    padding: 20px;}

.zapati a {color: #aaa;}  
.zapati a:hover {color: #DFDBDB;} 
      
/*akordeon efekt */

#accordion {
  list-style: none;
  padding: 0 0 0 0;
  width: auto;}
    
#accordion h3 {
  margin: 0px auto 30px auto;
  background: transparent url(pix/rozbalit.svg) no-repeat 0px 9px;
  background-size: 12px 8px;
  padding: 0 0 0 24px;
  color: #fff;
  font: normal 20px/1.45 'Bookerly Bold', serif;
  display: block;
  cursor: pointer;
    opacity: 0.6; filter: alpha(opacity=60);}
  
#accordion h3:hover {opacity: 1; filter: alpha(opacity=100);}
    
#accordion div.rozbalit {list-style: none; padding: 0 0 30px 0; display: none; color: #DFDBDB; font: normal 18px/1.45 'Bookerly', serif;}  

#accordion div.rozbalit a {color: #fff; text-decoration: underline;}
#accordion div.rozbalit a:hover {color: #fff; text-decoration: none;}

.page5 #accordion {text-align: left;}
    
.page5 #accordion h3 {
  margin: 0 0 0 40%;
  color: #fff;
  background-position: 0px 6px;
  font: normal 18px/1.35 'Bookerly Bold', serif;
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;} 

.page5 #accordion h3:hover {border-bottom: 1px solid rgba(255,255,255,0);} 
.page5 #accordion div.rozbalit {padding: 10px 0 0 0; display: none;}  

img.krabicka {margin: -20px auto 0 auto; width: 100%; max-width: 423px; z-index: 0; display: block; position: relative;}

body, html {
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;}

#element-to-animate {background: #aaa; width: 500px; padding: 50px; margin: 0 auto;}

/* formulare */

.formular {width: 100%; margin: -50px auto 0 auto; max-width: 640px; display: block; z-index: 1; position: relative;}
.formular .predobjednavky {width: 100%; z-index: 1; color: #fff; margin: 0 auto 40px auto;} 
.formular form {width: 100%; z-index: 1;} 
.formradek {padding: 0; margin: 0 0 20px 0; width: 100%; z-index: 1;} 
.formradektextarea {padding: 0; margin: 0 0 20px 0; width: 100%;} 

label {
	color: #DFDBDB;
	font: normal 18px/44px 'Bookerly Bold', serif;
  width: 40%;
  display: block;
    text-align: left;
  float: left;}

label span {color: #f73f77; font: normal 24px/44px 'Bookerly', serif; position: relative; top : .25em;}
  
.formprvek.formprveksamotny {margin: 0 0 0 40%;}    

.error {background: #F73F77; color: #fff; display: block; padding: 15px 30px; text-align: left; margin: 0 auto 20px auto; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.error:after {
  background: #F73F77;
  position: absolute;
  bottom: -4px; 
  left: 15px;
  width: 10px;
  height: 10px;
  content: '';
  -moz-transform:rotate(45deg);  
  -webkit-transform:rotate(45deg);  
  -o-transform:rotate(45deg);  
  -ms-transform:rotate(45deg);
  transform: rotate(45deg);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;}
  
.page5 p.uspech {color: #fff; font: normal 36px/1.3 'Bookerly Bold', serif; padding: 20px 40px; margin: 0 auto;}  

.formprvek input {
	border: none;
	background: #515158;
  outline: none;
  color: #fff;
    display: block;
  float: left;
  position: relative;
  width: 60%;
	padding: 0px 15px;
	font: normal 18px/44px 'Bookerly', serif;
    height: 44px;
  -webkit-box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.1); 
  -moz-box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.1); 
  box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.1);}  

.formprvek input:focus, .formprveknumber input:focus {background: #6a6a71;}

.formular em {display: block; width: 60%; float: left; color: #fff; text-align: left; font: normal 27px/44px 'Bookerly Bold', serif; text-shadow: 0px 1px 10px rgba(155, 107, 214, 1);}    

.formprvekcena input {
	border: none;
	background: transparent;
  outline: none;
  position: relative;
  display: block; width: 60%; float: left; color: #fff; text-align: left; font: normal 27px/44px 'Bookerly Bold', serif; text-shadow: 0px 1px 10px rgba(155, 107, 214, 1);
    height: 44px;}  

input[type='number'] {-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}

.spinner {
    text-align: center;
    display: inline-block;
    float: left;
    cursor: pointer;
    width: 44px;
    height: 44px;
    font: normal 18px/44px 'Bookerly Bold', serif;
    background: #303036;
    outline: none;
    z-index: 1;
    color: #fff;}
    
.formprveknumber {z-index: 1;}    

.formprveknumber input {
	border: none;
	background: #515158;
    outline: none;
    color: #fff;
    display: block;
    float: left;
    position: relative;
    text-align: center;
    width: calc(60% - 88px);
	padding: 0px 15px;
	font: normal 18px/44px 'Bookerly', serif;
    height: 44px;
    z-index: 1;
    -webkit-box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.1); 
    -moz-box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.1); 
    box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.1);}

.formprvek input#mesto, .formprvek input#mesto2 {width: calc(60% - 110px);} 
.formprvek input#psc, .formprvek input#psc2 {margin: 0 0 0 10px; width: 100px;} 

.tlacitko {
  background: #9d7f5a;
  color: #fff;
  padding: 0 80px;
  margin: 0 0 0 40%;
  height: 70px;
  font: normal 24px/70px 'Bookerly Bold', serif;
  float: left;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.2); 
  -moz-box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.2); 
  box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.2);}
     
.tlacitko:hover {background-color: #fff; color: #000;}  

.formradekcely {padding: 0; margin: 0 0 20px 0; width: 100%;}

.formradekcely label {width: 40%;}

.formradiobox {border: none; outline: none; display: block; text-align: left;}
.formradiobox label {padding: 0 15px 0 5px; width: auto; font: normal 18px/44px 'Bookerly', serif; display: inline-block; float: none;}    

.formradekcely p {font: normal 16px/24px 'Bookerly', serif; margin: 0 0 20px 40%; text-align: left;}
.formradekcely a {color: #fff; text-decoration: underline;}
.formradekcely a:hover {color: #fff; text-decoration: none;}

.upozorneni {color: #fff; text-align: left; margin: 30px auto 0; font: normal 18px/25px 'Bookerly', serif; border-top: 1px solid rgba(255,255,255,0.2); padding: 30px 0 0 0;}

.podminky {width: 100%; max-width: 970px; padding: 60px; display: none; text-align: left;}
.podminky h2 {font: normal 30px/1.3 'Bookerly Bold', serif; margin: 0 auto 10px auto;}
.podminky h3 {font: normal 21px/1.3 'Bookerly Bold', serif; margin: 0 auto 10px auto;}
.podminky p {margin: 0 auto 10px auto;}
.podminky p:last-child {margin: 30px auto 0 auto;}

.infobox {
width: auto; 
margin: 60px auto 0;
padding: 30px;
border-radius: 5px;
background: rgba(255,255,255,0.15);
}

/* responsivni design */

@media screen and (max-width: 1440px) {
.page3 .sloupec {width: 25%; margin: 60px 0 0 0; float: left;}
}

@media screen and (max-width: 1170px) {
.page3 .sloupec {width: 60%; margin: 20px 0 0 0; float: none; text-align: left;}
.page3 .sloupec:nth-of-type(2) {margin: 20px 0 0 0;}  
.page3 .sloupec:nth-of-type(3) {margin: 20px 0 40px 0;}
.page3 h3 {padding: 0; float: left; margin: 0 10px 0 0;}  
.page3 p {margin: 0; overflow: hidden;}     
}

@media screen and (max-width: 950px) {
.page_container, .page2 .page_container  {margin: 0 40px 80px 40px; width: auto;} 
.page7 .page_container  {margin: 0 40px 20px 40px; width: auto;} 
}

@media screen and (max-width: 760px) {
.page7 .sloupec, .page7 .sloupec:nth-of-type(2) {
    width: 100%;
    margin: 0 0 0 0;
    float: none;}  
.page4 .sloupec .popis {padding: 0px 0 0 40px;} 
.page4 .sloupec:nth-of-type(2) .popis {padding: 0 40px 0 0;} 
.page4 .sloupec:nth-of-type(3) .popis {padding: 0 0 0 40px;} 
.page4 .sloupec:nth-of-type(4) .popis {padding: 0px 40px 0 0;} 
.page2 h2 {margin: 40px auto;}    
.page2 .sloupec {width: 100%; margin: 0 auto 40px auto; float: none;}  
.page2 .sloupec:nth-of-type(3) {margin: 0 auto;}  
.page3 {background-position: 80% 0;}
}

@media screen and (max-width: 640px) {
.page6 .zabava, .page6 .zabava:nth-of-type(1) {margin: 0 auto 40px auto;} 
.page6 .zabava:last-of-type {margin: 0 auto;} 
.page6 .zabava img, .page6 .zabava:nth-of-type(2) img {float: none; margin: 0 auto; width: 179px;} 
.page6 .popis, .page6 .zabava:nth-of-type(2) .popis {float: none; text-align: center;margin: 40px auto 0 auto;} 
  
.page4 .sloupec .popis_siroky {width: 100%; float: none; padding: 0 0 0 0;}   
.page4 .sloupec:nth-of-type(5) .karta {width: 100%; float: none;}    
.page4 .sloupec:nth-of-type(5) .karta img {float: none; max-width: 200px; margin: 0 auto 30px auto;}        
}

@media screen and (max-width: 540px) {
label {width: 100%;float: none;}
.formprvek.formprveksamotny {margin: 0 0 0 0;}    
.formprvek input, .formular em  {float: none; width: 100%;} 
.formprveknumber input {width: calc(100% - 88px);}  
.formprvek input#mesto, .formprvek input#mesto2 {float: left; width: calc(100% - 110px);} 
.formprvek input#psc, .formprvek input#psc2 {float: left; margin: 0 0 0 10px; width: 100px;} 
.tlacitko {margin: 0;float: none;padding: 0 0; width: 100%;}
.formradekcely p {margin: 0 0 20px 0;}  
.formradekcely label:first-child {width: 100%;} 
.page5 #accordion h3 {margin: 0;}     
.podminky {padding: 30px;}  
.page4 .sloupec {margin: 0 0 40px 0;}
.page4 .sloupec .karta {width: 100%; float: none;}
.page4 .sloupec .karta img {float: none; margin: 0 auto 30px auto;}
.page4 .sloupec:nth-of-type(5) .karta img {float: none;}
.page4 .sloupec:nth-of-type(2n) .karta {float: none;}
.page4 .sloupec:nth-of-type(2) .karta img {float: none; max-width: 100%;}
.page4 .sloupec:nth-of-type(4) .karta img {float: none;}
.page4 .sloupec:nth-of-type(5) .karta {width: 100%;} 
.page4 .sloupec .popis {width: 100%; float: none; text-align: left; padding: 0;} 
.page4 .sloupec:nth-of-type(3) .popis {padding: 0;}     
.page4 .sloupec:nth-of-type(2) .popis {text-align: left; float: none;padding: 0;} 
.page4 .sloupec:nth-of-type(4) .popis {text-align: left; float: none; padding: 0;} 
.page4 .sloupec:nth-of-type(2) .popis p {text-align: left; float: none;} 
.page4 .sloupec:nth-of-type(4) .popis p {text-align: left; float: none;}     
.page4 .sloupec .popis p { max-width: 100%;}     
.page3 .sloupec {width: 100%;}    
.page3 h3 {float: none; margin: 0 auto; text-align: center;}     
.page3 p {text-align: center;}    
.page3 {background-position: center center;}    
}