* {margin: 0; padding: 0;}
body {font-size: 100%;   background:  #3c3c3c;  font-family: 'Raleway', sans-serif; color: #fff; text-align: center; margin: auto;}
a img {border: none;}
div#flexbox {background: #3c3c3c; display: flex; max-width: 1880px; width: 100%; margin: 0 auto;  margin-bottom: 0; flex-direction: column-reverse;  }
div#flexbox02 {background: #ffe582; }
div#mesluzby {background: #3c3c3c; margin: auto; padding-bottom: 2em; }
div#obal {width: 100%; background: #ffe582; max-width: 1880px; margin: auto; overflow: hidden;}
div#flex01 {padding: 2em; background: #3c3c3c;  text-transform: uppercase; color: #fff;  background: url(textura1u.png) #3c3c3c; background-position: top left; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
     }
div#flex01 h1,
div#kontakt h1,
div#omne h1 {font-size: 1em; 
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-family: 'Raleway', sans-serif; 
}
div#kontakt h1, div#kontakt h2 {color: #3c3c3c;}
div#kontakt h1,
div#omne h1 {margin-top: 1em; text-transform: uppercase;}
div#kontakt div {margin: 1em auto;}
div#flex01 h1 span,
div#kontakt h1 span,
div#omne h1 span {
  font-size: 1.4em;
  font-family: "Kalam", cursive;
  font-weight: 500;
  font-style: normal;
  color: #ffe582;
  
}
div#kontakt h1 span {
 
  color: #3c3c3c;
  
}
div#omne h2 {font-size: 3em; margin: 1em auto;}
div#omne img {width: 100%; max-width: 1880px; margin: auto; margin-bottom: -4px;}
div#text {background: #ffe582; margin: 0 auto; padding: 1.2em 0;}
div#text p {width: 90%; max-width: 1000px; margin: 1em auto; text-align: center; font-size: 1.6em; line-height: 1.8em; color:  #3c3c3c; }
div#text a.obdelnik {margin: 2em auto; background:  #3c3c3c; color:  #ffe582;}
div#text a {color:  #3c3c3c; font-weight: 600;}



div#flex01 h2,
div#flex08 h2  {margin-top: 1em; font-size: 3em; 
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
div#flex08 h2 {margin-bottom: 1em;}
div#flex08 h3 {font-weight: 400;}
div#flex08 {color: #3c3c3c;}
div#flex01 h2 span {color: #ffe582;}
h1.podpis {.mr-dafoe-regular {
  font-family: "Mr Dafoe", cursive;
  font-weight: 400;
  font-style: normal;
}}
div#flex02 img {width: 100%; max-width: 1159px; margin-bottom: 0;}
div#flex04 img {width: 90%; max-width: 500px; margin: 1em auto; }
div#flex07 img {margin-bottom: 0;}
  
div#flex03 {background: #3c3c3c;  padding: 1em; text-transform: uppercase; color: #fff; text-align: left;  background: url(textura1obracene.png) #3c3c3c; background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */}
div#flex 04, div#flex05 {background: #ffe582; }
div#flex05 h2 {font-size: 1.4em; color: #3c3c3c; max-width: 80%; margin: auto;}
a.obdelnik {margin: 3em auto 2em auto; display: block; padding: 0.5em 1em; background: #ffe582; color: #3c3c3c; text-decoration: none; font-weight: 600; text-align: center; border-radius: 0.5em; width: 150px; }
div#flex05 a.obdelnik {background: #3c3c3c; color: #fff; text-decoration: none; font-weight: 600; text-align: center; border-radius: 0.5em; width: 150px; }

div#konzultace {display: none;}
p {text-align: justify; } 

div#flex06 {display: flex; color: #3c3c3c;}

/*---------menu---------*/
div.menu {width: 100%; max-width: 100%; margin: auto; z-index: 100; }
.menu button {
    background: #3c3c3c;
    border: none;
    color: #ffe582;
    font-size: 4em;
    cursor: pointer;
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: auto;
}
.menu menu {display: none;}
.menu.zobrazit menu {display: block;}
div.menu menu {margin-top: 0.1em;}
div.menu li {list-style: none; text-align: center;}
div.menu a {display: block; color: #ffe582; font-size: 1.4em; width: 50%; max-width: 300px; padding: 0.5em 0; border-bottom: 1px solid #ffe582; text-decoration: none; margin: auto; text-align: center;}
div.menu a#last  {border-bottom: none;}
div.menu a:hover {background: #ffe582; color: #3c3c3c; }
div.menu a.desktoponly {display: none;}

div.menu span {display: none;}
/*---------end menu---------*/

div.paralax {
position: relative;
min-height: 500px;
padding: 2em 0;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
div.jedna {background-image: url(bg1.jpg);}
div.paralax img {width: 300px; margin: auto; height: 300px;}
div.paralax h2 {font-size: 3em; color: #ffe582; text-transform: uppercase; font-weight: 400; padding: 1em 0;}
div.paralax h3 {font-size: 2em; color: #000; text-transform: uppercase; margin: 1em 0;}
div.paralax h3 span {width: 90%; color: #ffe582; font-weight: 800; vertical-align: text-top}
div.paralax p {width: 90%; font-size: 1.6em; margin: auto; text-align: center; line-height: 1.6em;}

div.paralax div.obalbutton  {position: relative; overflow: hidden; }
div.paralax div.obalbutton img:href   {transform: scale(1.2); transition: transform 0.3s ease; }

div.cena {width: 90%; margin: 1em auto;}
div.paralax div.cena img {width: 80px; height: 55px; margin: 1em auto;}
div.cena h4 {font-size: 1.4em; font-weight: 400;}
div.cena p {font-size: 1.8em; font-weight: 600;}
div#mesluzby h3 {font-size: 2em; padding: 1em 0;}
div#mesluzby h4 {font-size: 1.5em; text-transform: uppercase; margin: 1em 0 0 0;}


div#flexbox03 div {position: relative;}
div#flexbox03 div p {position: absolute; font-size: 1.5em; font-weight: 800; text-align: center; width: 300px;  top: 40%; left: 50%; margin-left: -150px; color: #3c3c3c;}

div#flexbox04 div.nabidka {max-width: 600px; margin: 1em auto 2em auto;}
div#flexbox04 div p {width: 90%; max-width: 400px; margin: 1em auto 2em auto; line-height: 1.8em; text-align: center;}
div#flexbox04 div img {width: 150px; margin: auto; margin-top: 2em;}
div#flexbox05 {width: 100%; margin: auto; color: #3c3c3c; text-align: center; }
div#flexbox05 p h1,
div#flexbox05 h2,
div#flexbox05 p {text-align: center; color: #3c3c3c;}
 
div#kontakt img {width: 40px; margin: 0.2em;} 
div#kontakt img#zoubky {width: 90%; max-width: 400px; border-radius: 50%; margin: 1em auto}   

div#kontakt {max-width: 1880px; width: 100%; margin: 0 auto;  margin-bottom: 0; }
div#paticka {width: 100%; margin: -0.2em auto 0 auto; background: #3c3c3c; padding: 1em 0; }
div#copy {max-width: 1880px; margin: auto; color: #ccc;}
div#copy p { text-align: center; margin: 1em auto; }
div#copy a {color: #ffe582;}
table {margin: auto;}
table td {padding: 0 2em; border: 1px solid #ccc; }
table p {margin: 0 auto;}
table tr.bold {font-size: 1.6em; font-weight: 800;}










@media screen and (min-width: 1170px) {

/*---------top menu---------*/
div#flexbox02 {padding-bottom: 2em;}
div#flex02 img {width: 650px;}
div#flex04 img {width: 100%; max-width: 600px; margin: 3em 0 0 2em;}

div.menu {display: block; margin: 4em 0 0 4em; width: 100%;  text-align: left;}
.menu li {float: left; }
.menu li.notop {display: none;}
.menu button {display: none;}
.menu menu {display: block;  }
div.menu a { font-size: 1.2em; width: 100%;  text-align: left; max-width: 100%;  border-bottom: none; text-decoration: none;  transition: all .5s;}
div.menu a:hover {background: none; color: #fff; }
div.menu span {display: inline;}

div#flexbox {flex-direction: row;}

div#flexbox02,
div#flexbox03 {display: flex; margin: auto;  margin-bottom: 0;}
div#flexbox03 {max-width: 900px;}
div#flexbox04 {display: flex; max-width: 1800px; margin: auto;}
div#flexbox04 div.nabidka {max-width: 450px; width: 20%; }
div#flexbox04 a.obdelnik {display: inline-block; vertical-align: bottom;}
div#flexbox04 div p {width: 90%; max-width: 450px; min-height: 250px;  margin: 1em auto; line-height: 1.6em;}
div#flexbox04 div img {width: 80px; margin: auto;}
div#flexbox04 div a.obdelnik {margin: auto;}
div#flexbox05 {display: flex; max-width: 900px; }
div#tel {width: 33.3%;}
dev#mail  {width: 33.3%;}
div#site {width: 33.3%;} 


div.paralax h3 {font-size: 4em;}
div#mesluzby h3 {font-size: 5em;}
div#konzultace {display: block; position: absolute; width: 300px;  height: 300px; top: 32%; left: 65%; z-index: 10;}
div#konzultace p {position: absolute; font-size: 1.6em; font-weight: 600; text-align: center; width: 300px;  top: 40%; left: 50%; margin-left: -150px; color: #3c3c3c;}
div#konzultace img {width: 300px; margin: auto; height: 300px;} 
div#flex01, div#flex06 {text-align: left;}
a.obdelnik {margin: 3em 0 2em 0;} 
div#flex01 {width: 30%;}
div#flex02 {width: 45%;}
div#flex03 {width: 25%;}
div#flex04 {width: 30%; margin: 2em 0 2em 5%;  }
div#flex05 {width: 55%; margin-left: 10%; }
div#flex05 h2 {font-size: 1.8em;} 
div#flex06 {width: 10%; margin-left: 5%;}
div#flex06 h1 {margin-top: 4em;}
div#flex07 {width: 25%}
div#flex08 {width: 60%}
div#kontakt h1 {display: inline-block; text-transform: uppercase;}

div#flex05 h2 {margin: 1em 1em 0 2em; text-align: left;}
div#flex05 a.obdelnik  {margin: 3em 0 0 6em;} 

table td h2 {margin: 0 1em;}

div#kontakt {flex-direction: row;}
div#kontakt h2 {font-size: 5em;}
div#kontakt h3 {font-size: 1.6em; font-weight: 400;}
div#kontakt p {font-size: 1.8em; font-weight: 800;}
}
                                            

@media screen and (min-width: 1370px) {
div#flex04 {width: 30%; margin: 3em 0 3em 5%;  }
div#flex04 img {max-width: 600px; margin: 4em 0 0 4em;}
div#flex05 {width: 50%; margin-left: 15%; margin-top: 2em; }
}

@media screen and (min-width: 1370px) {
div#flex04 img {max-width: 600px; margin: 4em 0 0 5em;}

}