html {
  position: relative;  /* nutné pro patičku dole */
  min-height: 100%;
}

body {margin-top: 60px;
	  margin-bottom: 150px;
	  font-family: 'Jura', 'Verdana';
	  font-weight: 200;
	  color: #E5E5E5;
	  background-color: #212121}
	  
h1 {font-size: 3.3em}

h2 {font-size: 1.8em;
	margin-bottom: 0.5em}

h3 {font-size: 1.3em;
	margin-top: 0.7em}	  

p {
	font-size: 1.8em;
	margin: 0.8em 0 0.5em 0;
  }

li {margin-top: 0.6em}

img {
  max-width: 100% !IMPORTANT;
  height: auto !IMPORTANT;
  box-sizing: border-box !IMPORTANT
}


nav {position: fixed;
	top: 0px;
	background: #1A1A1A;
	display: block;
	width: 100%;
	z-index: 99;
	background-image: linear-gradient(#484848, #1A1A1A);
	border-bottom: 1px solid #E5E5E5;
	}


nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 20px;
  transition: background 1s;
  text-shadow: 1px 1px 1px #000;
}

nav a:hover {
  background-color: #FF0000;
  color: #FFFFFF;
}

nav a.active {
  background-color: #4CAF50;
  color: white;
}	

/************** sekce ******************************************************************************/

.headline {height: 75vh;
			background-image: url('../head-back.jpg');
			background-position: left bottom; 
			background-repeat: no-repeat; 
			background-size: cover;
			margin: auto;
			text-align: center;
			}

				
.headline p {position: relative;
			 top: 25%;
			 animation-duration: 2s;
				padding-right: 0.8em;
				padding-left: 0.8em;
				font-size: 2.8em;
				text-shadow: 1px 1px 1px #000;
			 }			
				 
section {
			margin: auto;
			box-sizing: border-box;
		}

article {box-sizing: border-box !IMPORTANT;
		 padding: 0px 15px 0px 15px;
		 }
		
article p {
			line-height: 140%}
			
article img {border-radius: 50%;
			 border: 5px solid #FFFFFF;
			 margin: 1em 0 1em 0}
			
.container-flex {display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-content: center;
				margin: auto;
				padding: 0px 30px 0px 50px;
				}
				
				   
.content {max-width: 1280px;
		  padding: 1.5em 0.8em 3.5em 0.8em;
		  margin: auto}



/************* Obecné class **********************************************************************/
.w2 {width: 20%}
.w3 {width: 30%}
.w4 {width: 40%}
.w5 {width: 50%}
.w7 {width: 70%}
.w8 {width: 80%}



.texture {background-image: url('../background/prism.png')}	


/********************************** Address ******************************************************/

address {
		 padding: 0.8em 1.2em 0.8em 1.2em;
		 background-color: #4D4D4D;
		 border-radius: 10px;
		 box-shadow: 1px 1px 8px #000000;
		 font-style: normal;
		 font-family: Arial;
		 margin: 0 1.2em;
		 flex: 1;
		 transition: box-shadow linear 1s
		 }

address p {font-size: 1.0em}		 

address a {color:#FF5959;
		   text-shadow: none !IMPORTANT}
		   
address:hover {box-shadow: 1px 1px 8px #FFFFFF;}


/********************************* Button *********************************************************/

button.big {
				font-size: 0.8em;
				padding: 0.3em 0.5em 0.3em 0.5em;
				}		 
	
/****** BUTTON VZHURU *****************************************************************************/
#topBtn {position: fixed; /* Fixed/sticky position */
	    bottom: 60px; /* Place the button at the bottom of the page */
	    right: 35px; /* Place the button 30px from the right */
	    z-index: 99; /* Make sure it does not overlap */
	    border: none; /* Remove borders */
	    outline: none; /* Remove outline */
	    background: #FF0000; /* Set a background color */ 
	    color: #FFFFFF; /* Text color */
	    cursor: pointer; /* Add a mouse pointer on hover */
	    padding: 12px; /* Some padding */
	    border-radius: 15%; /* Rounded corners */
	    font-size: 16px; /* Increase font size */
	    display: none;
	    }
	    
	    
.mapa {position: fixed;
	   width: 100%;
	   height: 70vh;
	   top: 0;
	   padding: 1.2em;
	   background: #E5E5E5;
	   z-index: 1000;
	   box-shadow: 5px 5px 5px #1A1A1A;
	   margin: auto;
	   text-align: center;
	   }
	   
#mapa1 {display: none}

#mapa2 {display: none}	    	

/************************ PATIČKA VŽDY DOLE	!!!! :-) ***********************************************/
footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  box-sizing: border-box;
  /* Set the fixed height of the footer here */
  height: 150px;
  background: #313131; /* For browsers that do not support gradients */
  background-image: url('../background/wall.png');
  color: #9A9A9A;
  padding-top: 25px;
  box-sizing: border-box;
  text-align: center !IMPORTANT;
}

footer p {font-size: 1.1em}

footer h3 {color: #FFFFFF;
			margin: 0px}
footer a { 
			color: #FFFFFF;
			text-decoration: none}
			
footer a:hover {text-decoration: underline;
				 }

		
/************************ break points *******************************************************/


@media only screen and (max-width: 992px) {
		
	   }
   
@media only screen and (max-width: 840px) {
		
		
	   }

@media only screen and (max-width: 768px) {
		
		.container-flex {flex-direction: column-reverse;}
		.col1 {text-align: center}	
		.w3,.w4,.w5,.w7,.w8 {width: 100%}
		address {margin-bottom: 1.2em;
				min-height: auto}
	   }

@media only screen and (max-width: 640px) {
		p {font-size: 1.3em}
		.headline p {font-size: 2.0em}	
	   }