@import url('https://fonts.googleapis.com/css?family=Lobster&subset=latin-ext');

@import url(https://fonts.googleapis.com/css?family=Palanquin:400,600&subset=latin-ext,latin);



@import url('https://fonts.googleapis.com/css?family=Caveat+Brush');



/* ==== GENERAL ==== */



html, body, img {

  margin: 0px;

  padding: 0px;

  border: none;

}



body    { 

  margin:0 auto;

  font-size: 17px;

  font-family: 'Palanquin', Helvetica, sans-serif;

  font-weight: 400;

  color: #343639; 

  background-color: rgb(248,248,248);     

}



#obal { 

  max-width: 1400px; 

  width: 100%;

  margin: 0 auto;  

  background-color: #FFFFFF;    

}



p  {

  margin-top: 0px;          

}



a   {

  color: #343639;

  text-decoration: none;          

}



hr   {

  background-color: rgb(227,227,227);

  border: 0px;

  height: 1px;

  margin: 0px;

  clear: both;   

}



ul    { 

  margin-top: 15px;

  list-style-type: square;

  -webkit-padding-start: 30px;

}



h1    { 

  font-size: 1.7em;

  font-weight: 400;

  margin: -7px;

  padding: 0px;

  font-family: 'Caveat Brush', cursive;

  color: rgb(139,69,19);

}  





h2    { 

  margin: 0px;

  padding: 0px;

  font-size: 1.8em;

  text-align: center;

  font-family: 'Caveat Brush', cursive;

  line-height: 1.4em;

  color: rgb(70,70,70,); 

}



h3    { 

  font-size: 2.2em;

  font-weight: 400;

  text-align: center;

  margin: 0px;

  padding: 60px 0px 50px 0px;

  box-sizing: border-box;

  font-family: 'Caveat Brush', cursive;

  color: rgb(238,185,0);

}  



h4    { 

  font-size: 1.2em;

  font-weight: 600; 

  margin-top: 20px;

  margin-bottom: 15px;

  padding: 0px;

}



.uvod    {

  font-size: 1.1em;

  font-weight: 600; 

}



.container    {

  text-align: center;

  padding-bottom: 60px;

}



table tr    {

  text-align: left;

}



#banner { 

  width: 100%;

  height: auto;

  min-height: 700px;

  margin-top: 0px; 

  padding-top: 145px;   

  background-image: url("../../img/banner.jpg"); 

  background-size: cover;

  background-position: top right; 

}



#slogan {  

  position: absolute;

  top: 110px;

  right: 150px;

  width: 280px;

  height: auto;

  padding: 30px 10px;

  box-sizing: border-box;

  background-color: rgba(255,255,255,0.6);

  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 

}



#tlacitko{  

  width: 220px;

  height: auto;

  margin: 0 auto; 

  padding: 5px;

  margin-top: 20px;

  font-size: 1.7em;

  text-align: center;

  font-family: 'Caveat Brush', cursive;

  color: rgb(255,255,255);

  background-color: rgb(238,185,0);

}  



#tlacitko a{

  color: rgb(255,255,255);

} 



#apartman1 {                      

  width: 100%;

  background-color: rgb(240,240,240);

}  



#cenik {                      

  width: 100%;

  background-color: rgba(253,244,225,0.7);

}



#rezervace { 

  width: 100%;

  height: 700px;               

  background-image: url("../../img/rezervace.jpg"); 

  background-size: cover;

  background-position: top center; 

}      



#kontakt {                      

  width: 100%;

  background-color: #ffffff;

  background-image: url("../../img/soft-kill.png");   

} 



.nadpis    { 

  font-size: 1.1em;

  font-weight: 400; 

  margin-top: 0px;

  margin-bottom: 15px;

  padding: 0px;

}



.popis {

  font-size:0.9em;   

} 



#nadpis_ubytovani    { 

  font-size: 1.1em;

  font-weight: 600; 

  margin-top: 0px;

  margin-bottom: 15px;

  padding: 0px;

  cursor: pointer; 

}



#popis_ubytovani {

  font-size:0.9em; 

  text-align: left;

  display: none;  

}



#nadpis_platebni    { 

  font-size: 1.1em;

  font-weight: 600; 

  margin-top: 0px;

  margin-bottom: 15px;

  padding: 0px;

  cursor: pointer; 

}



#popis_platebni  {

  font-size:0.9em; 

  text-align: left;

  display: none;  

}



#nadpis_storno    { 

  font-size: 1.1em;

  font-weight: 600; 

  margin-top: 0px;

  margin-bottom: 15px;

  padding: 0px;

  cursor: pointer; 

}



#popis_storno {

  font-size:0.9em; 

  text-align: left;

  display: none;  

}





#kamila img {

  width: 200px; 

  height: auto;

  border-radius:50%; 

}



.pozadi {

  width: 100%; 

  height: auto;

  padding: 10px 10px;

  box-sizing: border-box;

  text-align: center;

  background-color: rgb(255,255,255);  

    -webkit-transition: all 0.2s ease-out;

		 -moz-transition: all 0.2s ease-out;

			 -o-transition: all 0.2s ease-out;

					transition: all 0.2s ease-out;       

} 



.pozadi:hover {

  background-color: rgb(240,240,240);

} 



.pozadi1 {

  width: 100%; 

  height: auto;

  padding-top: 20px;

  box-sizing: border-box;

  text-align: center;

  background-color: rgba(240,240,240,0.9);       

} 



.pozadi2 {

  width: 100%; 

  height: auto;

  padding: 10px;

  box-sizing: border-box;

  background-color: rgb(255,255,255);       

} 



.pozadi3 {

  width: 100%; 

  height: auto;

  background-color: rgb(255,255,255); 

  padding: 0px 10px;      

}



.ikona img {

  width: 50px;

  height: auto; 

  margin-bottom: 20px;

    -webkit-transition: all 0.3s linear;

		 -moz-transition: all 0.3s linear;

			 -o-transition: all 0.3s linear;

					transition: all 0.3s linear;     

}  



.ikona img:hover {

	-webkit-transform: scale(1.1);

		 -moz-transform: scale(1.1);

			-ms-transform: scale(1.1);

			 -o-transform: scale(1.1);

					transform: scale(1.1);	

} 



#foto_reference{                      

  width: 80%;

  height: auto;

  text-align: center;

  margin: 0 auto;

  padding: 30px 20px;

  box-sizing: border-box;

}



#foto_reference img{                        

  width: 24%;

  height: auto;

  margin: 2px 1px;

}  



#foto_reference a{                      

  text-decoration: none;

}    



#web  {  

  float: left;

  margin: 10px;

  font-size: 0.8em;

}



#zdroje   {  

  float: right;

  margin: 10px;

  font-size: 0.8em;

}



#paticka   {   

  clear: both;

  width: 100%;

  height: 40px;

  background-color: rgb(240,240,240);

}



#paticka a  {  

  text-decoration: underline; 

} 



@media all and (max-width:1440px) {



#banner { 

  min-height: 650px; 

}

}



@media all and (max-width:1090px) {

#foto_reference{                      

  width: 100%;

}



#banner { 

  min-height: 600px;            

  background-position: top right; 

}



h2    { 

  font-size: 1.7em;

}



#tlacitko{  

  width: 200px;

  font-size: 1.6em;

}



#slogan {  

  width: 260px;

} 



#kamila img {

  width: 160px; 

}

}



@media all and (max-width:900px) {



#banner { 

  min-height: 520px;            

  background-position: top right; 

}



}



@media all and (max-width:840px) {

body    { 

  font-size: 16px;

} 



h1    { 

  font-size: 1.6em;

  margin: -6px;

}  



}



@media all and (max-width:780px) {



#foto_reference{                      

  padding: 20px 0px;

}



#banner { 

  height: 500px;             

}



h2    { 

  font-size: 1.6em;

}



#tlacitko{  

  width: 180px;

  font-size: 1.5em;

}



#slogan {  

  width: 240px;

  padding: 20px 10px;

  top: 100px;

  right: 30px;

} 



.pozadi3 { 

  padding: 0px 0px;      

}



#rezervace { 

  height: auto;               

}  

}





@media all and (max-width:540px) { 



#foto_reference img{                        

  width: 48%;

}



#banner { 

  min-height: 450px;    

  background-position: top center;         

}



h2    { 

  font-size: 1.5em;

}



#tlacitko{  

  width: 160px;

  font-size: 1.4em;

}



#slogan {  

  width: 220px;

  padding: 20px 10px;

  background-color: rgba(255,255,255,0.9);

  top: 130px;

  right: 30px;

} 



h3    {

  padding: 50px 0px 30px 0px;

}

}



@media all and (max-width:400px) {

body    { 

  font-size: 15px;

} 



h1    { 

  font-size: 1.5em;

  margin: -5px;   

}  



.ikona img {

  width: 45px;    

}   



.container    {

  text-align: center;

  padding: 0px 10px 30px 10px;

}



#banner { 

  min-height: 400px;             

}



}



@media all and (max-width:340px) {     

body    { 

  font-size: 14px;

}



h1    { 

  font-size: 1.4em;

  margin: -4px;   

}   



#slogan {  

  width: 190px;

} 



#kamila img {

  width: 140px; 

}



}



@media all and (max-width:300px) {     

body    { 

  font-size: 13px;

}



}