html { 
  background: url("../img/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
font-family: 'Exo 2', monospace;
}
@supports (-ms-accelerator:true) {
  body {
  font-family:  sans-serif;
  }
}
#logo {padding: 2px}
#panel {
background: #040404;  
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
  position: relative;
  z-index: 10;
  text-align: right;
  padding: 6px 0 0 0;
  border-bottom: 1px #040404 groove;  
}
#panel a.flag {
display: inline-block;
width: 50px;
height: 32px;
opacity: 0.5;   
transition: 0.6s ease;
margin: 0 2px;
}
#panel a.cz {
background: url("../img/l-cz.png") no-repeat center center;
}
#panel a.en {
background: url("../img/l-en.png") no-repeat center center;
}
#panel a.de {
background: url("../img/l-de.png") no-repeat center center;
}
#panel a.ru {
background: url("../img/l-ru.png") no-repeat center center;
}
#panel a.chosen {
opacity: 1;
}
#panel a.flag:hover {
opacity: 1;  
}
#header {
background: #f08908 url("../img/bg-pattern.jpg") repeat left top;
border-bottom: 1px #f08908 groove;  
text-align: right;
padding: 10px;
}
#menu ul {
list-style-type: none;
margin: 4% 0 4% 0;
padding: 0;
}
#menu ul li {
display: inline-block; 
background: transparent;
padding-left: 0;
}
#menu ul li a {
font-size: 200%;
color: #231f20;
padding: 0 10px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: 0.6s;
}
#menu ul li a:hover {
padding: 15px 15px;
background: transparent url("../img/a.png") repeat left top;
color: #fff;
}



#menu2 ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-align: center;                               
}
#menu2 ul li {  
background: transparent;
padding-left: 0;
}
#menu2 ul li a {
font-size: 120%;
color: #ee8400;
text-decoration: none;
font-weight: bold;
transition: 0.6s; 
display: block;
border-radius: 4px;
}
#menu2 ul li a:hover {
background: #ee8400;
color: #060606;
}



#footer {
border-top: 1px #f08908 groove;
padding: 2% 2%;
background: #f08908 url("../img/bg-pattern.jpg") repeat left top;
clear:both;
}
.container {
-webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.7);
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.7); 
}
.website {
background: #fff;
} 
.row {
} 
.column,
.columns {
padding: 10px 0 0 0;
}
.u-in-center {
text-align: center;
}
#text {
padding: 10px 20px;
}
.google-maps {
 position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
address {
font-style: normal;
margin: 10px 0;
}  












  
#categories .columns {
padding: 4px;
border-right: 2px solid #040404;
transition : border 0.2s ease, background 1s ease; 
} 
#categories .columns:hover, #categories .selected {
border-left: 2px solid #040404; 
border-right: 0;  
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}   
#categories {
padding: 0 10px;
margin: 10px 0;
}    
#categories a.cat {
display:block;
text-align: right;
margin: 10px 4px 0 0;
font-size: 2.2rem;
color: #000;
text-decoration: none;
transition: color 0.6s ease; 
} 
#categories a.cat:hover {
color: #fff;
}          
#categories img {
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   box-shadow: 0px 0px 5px #aaa;
}       
        
        
/* CSS3 STYLE GENERIC */
.view {
   width: 200px;
   height: 133px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 200px;
   height: 133px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;               
   text-indent:-9999px;
   width:200px;
   height:133px;
}

/* THIRD EFFECTS */

.effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.effect a.info {
   position:relative;
   top:-100px;
   left:-100px;
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out;
}
.effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.effect:hover a.info {
	opacity:1;
	-moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}








.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
 
.wrapper.open-sidebar {
    left: 240px;
}
 
#sidebar {
    position: absolute;
    left: -240px;
    background: #f08908 url("../img/bg-pattern.jpg") repeat left top;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;  
    background: transparent;
    padding-left: 0;
}
#sidebar ul li a {
    padding: 10px;
    font-size: 2rem;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #040404;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a, #sidebar ul li a.checked {
    background: transparent url("../img/a.png") repeat left top;
    color: #fff;
}
.main-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
display: none;
position: relative;
float: left;
width: 50px;
height: 32px;
opacity: 0.5;   
line-height: 32px;
padding: 0 0 0 36px;
font-weight: bold;
text-decoration: none;
color: #ee8300;
transition: 0.6s ease;
margin: 0 3px;   
background: url("../img/menu.png") no-repeat left center; 
}
.main-content #sidebar-toggle:hover {
opacity: 1;   
}
  .xnadpis {
    display: none; }
    
@media all and (max-width: 800px) {
  #sidebar-toggle {
    display: inline-block !important; }
    
  .xnadpis {
    display: block; }

  .xmenu {
    display: none; }
    
.scrollToTop{
	width:63px; 
	height:63px;
	position:fixed;
	bottom:20px;
	right:20px;
	display:none;
	background: url("../img/arrow-top.png") no-repeat left top;
  opacity: 0.7;
}
.scrollToTop:hover{
	text-decoration:none;
  opacity: 1;
}
  
}








a.link,a.link:visited,a.link:hover,a.link:active{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
	position:relative;
  transition:0.5s color ease;
	text-decoration:none;
	color:#ee8400;
}
a.link:hover{
	color:#d73444;
}
a.link:after{
  content: "";
  transition:0.5s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
  bottom:-0.25em;
  height:5px;
  height:0.15rem;
  width:0;
  background:#d73444;
    left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}
a.link:hover:after{
  width:100%;
}

.kontakt tr td, .kontakt tr th {
   text-align: center;
}


h1, h2, h4 {
padding-bottom: 5px;
border-bottom: 3px solid;
}   





#galerie {
padding: 10px 20px;
} 
#galerie h3 {
transition: color 1s ease, background 1s ease;
padding: 10px;
text-align: center;
font-weight:bold;
border: 1px solid #555;
border-radius: 2px;
cursor:pointer;
font-size: 2rem;
} 
#galerie h3:hover {
border-right: 0;  
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}  
.galerie {
display: none;
}