/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Questrial&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Bree+Serif&subset=latin-ext');

body{
font-family: 'Dosis', sans-serif;
font-size: 16pt;
overflow-x: hidden;
}



a{
  color: rgb(115,55,88);;
}

a:hover{
  color: rgb(255,0,0);
  transition:  0.5s ;
}

.blog{
  padding: 100px 0 ;
}

.blog p{
  padding: 10px ;
}

table tr:nth-child(2n+2) {
    background:rgb(243,243,243);
}

table.cenik{
  width: 100%;
}

table.cenik tr:hover {
    background:rgb(243,243,243);
}

table.cenik tr{
    background:transparent;
}


.sticky.is-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
}

ul.nav.menu_rozb{
  text-align: center;
}

ul.nav.menu_rozb li{
  width: 50%;
  display: block;
}

ul.nav.menu_rozb li a{
  display: block;
  color: #fff;
}

ul.nav.menu_rozb li a:hover{
  color: #342444;
  background: #fff;
  text-decoration: underline;
}

#slider{
  background: rgb(115,55,88);
}

#slider p{
  margin:0 !important;
  padding: 0 !important;
}

.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
  z-index: 9999;
}

.arrows path {
	stroke: #fff;
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}

.navbar{
  background: #fff;
  /*-webkit-box-shadow: 0px 10px 18px -11px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 18px -11px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 18px -11px rgba(0,0,0,0.75); */
}

.is-sticky{
   background: rgb(71,61,81);
  -webkit-box-shadow: 0px 10px 18px -11px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 18px -11px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 18px -11px rgba(0,0,0,0.75); 
}

#rezervace{
  position: relative;
}

#rezervace .container p{
  margin: 0 !important;
}

#rezervace .container{
  background: rgb(71,61,81);
  position: absolute;
  left: 0;
  right: 0; 
  bottom: 0;
  z-index: 985;
  padding: 20px 0 ;
  width: 50%;
-webkit-box-shadow: 0px -3px 23px -7px rgba(0,0,0,0.54);
-moz-box-shadow: 0px -3px 23px -7px rgba(0,0,0,0.54);
box-shadow: 0px -3px 23px -7px rgba(0,0,0,0.54);

/*background: rgba(25,28,34,1);
background: -moz-linear-gradient(top, rgba(25,28,34,1) 0%, rgba(31,35,43,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(25,28,34,1)), color-stop(100%, rgba(31,35,43,1)));
background: -webkit-linear-gradient(top, rgba(25,28,34,1) 0%, rgba(31,35,43,1) 100%);
background: -o-linear-gradient(top, rgba(25,28,34,1) 0%, rgba(31,35,43,1) 100%);
background: -ms-linear-gradient(top, rgba(25,28,34,1) 0%, rgba(31,35,43,1) 100%);
background: linear-gradient(to bottom, rgba(25,28,34,1) 0%, rgba(31,35,43,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191c22', endColorstr='#1f232b', GradientType=0 );
*/

}

#rezervace a.hranatetlacitko{
  color: #fff;
  border: 1px solid #fff; 
  margin: 0 15px; 
  font-family: 'Shadows Into Light Two', cursive;
}

img.avatar{
  border-radius: 50%;
}

#sluzby, #obsah, #proklikportfolio, #celytext, #onas, #onas2, #onas3{
  background: rgb(255,255,255);
}

#cela1{
padding: 110px 0;
background-image: url('../img/bckg.jpg');
background-attachment: fixed;
text-align: center;
}

#cela1 a{
  border: 2px solid #fff;
  color: #fff;
  font-size: 18pt;
  padding: 20px 50px ;
  transition: 0.5s;
}

#cela1 a:hover{
  border: 3px solid #fff;
  color: #fff;
  font-size: 18pt;
  padding: 30px 40px ;
  transition: 0.5s;
}

#obsah .item-page{
  padding: 150px 0;
}


#logo{
/*background: rgb(71,61,81);*/
}

#logo img{
  max-height: 70px;
  margin: 10px;
}
.cenaovr h3{
  position: absolute;
  z-index: 290;
  bottom: -10px;
  left: 0;
  height: 101%;
  width: 100%;
  text-align: center;
  padding: 15px 30px;
  background: rgba(0,0,0,0.01);
  color: rgba(255,255,255,0.01);
  font-family: 'Bree Serif', serif;
  transition:  0.2s ;
}

.odsazeni{
  padding: 90px 20px 0 20px ;
}


.cenaovr h3:hover{
  padding: 30% 30px 0 30px;
  background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.99);
  transition:  0.2s ;
}

header{
  position: absolute;
  z-index: 9999;
  width: 100%;
}

.nadheader{
background: rgb(115,55,88);
color: #fff;
font-size: small;
}

.rozbocovac{
background: #342444;
color: #fff;
font-size: medium;
padding: 5px 0 ;
}

.nadheader a, .nadheader a:hover{
color: #fff;
font-size: small;  
}

.nadheader p{
  margin: 0 !important;
  padding: 5px ;
}


.cenaovr{
  position: relative;
}

/*#logo a, #logo a:hover, #logo a:focus{
  text-decoration: none;
  color: transparent;
  }
*/
footer{
  padding: 50px 0;
  /*background: #1f232b;*/
  background: rgb(71,61,81);
  color: #fff;
  font-size: 14pt;
  border-top: 3px solid #2e2521;
}

#copy{
  /*background: rgb(0,16,32);*/
  background: #2e2521;
  font-size: small;
  margin-bottom: 300px;
  padding: 20px 0 0 0;
  color: #fff;
}

#copy a, #copy a:hover{
  color: #fff;
  text-decoration: none;
  font-size: medium;
}

#celafooter{
  position: fixed;
  bottom: 0px;
  z-index: -10;
  width: 100%;
}

.overlay{
  position: fixed;
  width: 98%;
  height: 300px;
  min-height: 300px;
  left: 0px;
  bottom: 0px;
  background: rgba(255,255,255,0.01);
  z-index: -5;
}

#galerka{
  padding: 100px ;
  background: #fff;
  text-align: center;
  }
  
#galerka h3{
   font-family: 'Shadows Into Light Two', cursive;
   margin-bottom: 30px;
   font-size: 24pt;
}  


  
.customcitat{
  padding: 0 100px ;
}  

img{
  max-width: 100%;
}
  
#celytext{
  background: #fff;
  background-attachment: fixed;
  color: #292b2c;
  padding: 120px 0  80px 0;
  }  
  
#proklikportfolio{
  background-attachment: fixed;
  color: #fff;
  text-align: center;
}  

#proklikportfolio h2{
  font-family: 'Abril Fatface', cursive;
  padding: 50px 0 50px 0;
  font-size: 32pt;
  color: #fff;
  border-bottom: 5px solid #ee2024;
  background: rgba(255,255,255,0.1);
}

#proklikportfolio h3.mimodoleva{
  background: url('../img/textura.png') center;
  font-family: 'Abril Fatface', cursive;
  color: #000;
  padding: 20px;
  min-width: 350px;
  font-size: 26pt;
  position: absolute;
  top:30px;
  left: -20px;
  text-align: center;
  transition:  0.5s; 
}

#proklikportfolio h3.mimodoprava{
  background: url('../img/textura.png') center;
  font-family: 'Abril Fatface', cursive;
  color: #000;
  font-size: 26pt;
  position: absolute;
  top:30px;
  right: -20px;
  text-align: center;
  transition:  0.5s;  
}

#proklikportfolio h3 a{
color: #000;
text-decoration: none;
}

#proklikportfolio h3 a:hover{
color: #ee2024;
text-decoration: none;

}

#proklikportfolio h3.mimodoprava:hover{
  right: 0px;
} 

#proklikportfolio h3.mimodoleva:hover{
  left: 0px;
} 
    

h2.mimodoleva{
  position: relative;
  margin: 30px 40px 10px -50px; 
  background: rgb(255,102,102);
}

h2.mimodoprava{
  position: relative;
  margin: 30px -50px 10px 40px; 
  background: rgb(0,255,255);
}

#uvodnitext hr{
background: #ee2024;
border: none;
height: 5px;
margin-left: 0;
margin-right: 0;
text-align: left;
width: 25%;
}


.nabizimesluzby{
  /*background: #1f232b;*/
  background: rgb(71,61,81);
  padding: 100px 0 70px 0;
  text-align: left;
  color: #fff;
}

#onas{
  padding: 70px 0 50px 0;
}

#onas2{
  padding: 50px 0 50px 0;
  text-align: right;
}

#onas3{
  padding: 50px 0 100px 0;
  text-align: left;
}

.nabizimesluzby a.hranatetlacitko{
  border: 1px solid #fff;
  color: #fff;
  padding: 5px 20px ;
  transition:  0.5s;
}

.nabizimesluzby a:hover.hranatetlacitko{
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  transition:  0.5s;
  padding: 0 10px ;
}

a.hranatetlacitko{
  border: 1px solid #733758;
  color: #733758;
  padding: 5px 20px ;
  transition:  0.5s;
}

a.hranatetlacitko:hover{
  text-decoration: none;
  transition:  0.5s;
  padding: 0 10px ;
  border: 1px solid rgb(153,0,0);
  color: rgb(153,0,0);
}

.popisprojektu{
 position:absolute;
 top:-54px;
 left:10%;
 z-index: 999;
 width:250px;
 background: url('../img/texturabl.png');
 border: 1px solid #000;
 -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.3);
  box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.3);
  transition:  1s;  
}

.popisprojektu:hover{
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.8);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.8);
  box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.8);
  transition:  1s;  

}

.popisprojektu h2{
font-family: 'Questrial', sans-serif;
font-size: 20pt;
line-height: 18pt;
color: #fff;
background: rgba(0,0,0,0.1);
padding: 20px 25px 10px 25px;
border-bottom: 1px dashed rgb(104,104,104);

}

.popisprojektu p{
color: #fff;
font-size: 10pt;
line-height: 12pt;
text-align: justify;
padding: 10px 25px;
}

.popisprojektu a#oprojektu{
  background: #ee2024;  
  transition: 1s;
  display: block;
  text-align: center;
  padding: 15px 0 ;
  font-weight: bold;
  color: #fff; 
  font-size: 14pt;
  text-decoration: none;  
}

.popisprojektu a:hover#oprojektu{
  background: rgb(0,0,0);  
  transition:  1s;
  color: #ee2024;            
}

.span3{
  flex: 0 0 25%;
  max-width: 25%;
  width: 25%;
  float: left;
}


.span4{
  flex: 0 0 33%;
  max-width: 33%;
  width: 33%;
  float: left;
}


.span6{
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
  float: left;
}


 /* --------------------- menu ------------------------------------- */
 
 
 
/*nav{
  position: fixed;
  z-index: 890;
  width: 100%;
} */

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
 
.moduletable_mm{
  /*background: rgba(0,0,0,0.7);*/
  background: rgb(71,61,81);
} 
 
ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-left: auto; 
    margin-right:auto;
}

/* Float the list items side by side */
ul.menu li {float: left;}

ul.menu li.item-109{padding-left: 130px;}

/* Style the links inside the list items */
ul.menu li a {
    display: inline-block;
    color: rgb(0,0,0);
    text-align: center;
    padding: 20px 25px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

.is-sticky ul.menu li a {
    display: inline-block;
    color: rgb(255,255,255);
    text-align: center;
    padding: 8px 25px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.menu li a:hover {
background: rgb(255,255,255);
color: rgb(64,16,0);}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
nav a.icon {display: none;}




 .section {
  position: relative;
}




.absolute {
  position: absolute;
  width: 100%;
  height: auto;
  margin-top: 100px;
}
.absolute.above {
  z-index: 2;
}


.lg-green {
  width: 360px;
  height: 360px;
  background: #00F1C9;
  border-radius: 12px;
  margin-left: -480px;
  margin-top: 200px;
}
.sm-green {
  width: 60px;
  height: 60px;
  background: #00F1C9;
  border-radius: 12px;
  margin-left: -30px;
  margin-top: 400px;
}
.sm-purple {
  width: 60px;
  height: 60px;
  background: #5000F1;
  border-radius: 12px;
  margin-left: -30px;
  margin-top: 400px;
}
.xs-green {
  width: 60px;
  height: 60px;
  background: #00F1C9;
  border-radius: 12px;
  margin-left: -30px;
  margin-top: 400px;
}
.md-green {
  width: 120px;
  height: 120px;
  background: #00F1C9;
  border-radius: 12px;
  margin-left: -60px;
  margin-top: 10px;
}
.lg-purple {
  width: 80px;
  height: 80px;
  background: #5000F1;
  border-radius: 12px;
  margin-left: 57px;
  margin-top: 60px;
}
  


 /* --------------------  mobily ------------------------------------------------------------ */
@media screen and (max-width:680px) {
  ul.menu li:not(:first-child) {display: none;}
  nav a.icon {
    float: right;
    display: inline-block;
    font-size: 24pt;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    padding: 0 10px ;
      }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.menu.responsive {position: relative;}
  nav a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.menu.responsive li {
    float: none;
    display: inline;
  }
  ul.menu.responsive li a {
    display: block;
    text-align: left;
  }
}


@media only screen and (max-device-width: 1440px) {

ul.menu{
  width:75%;
}
	}