/* Giving a background-color to the nav container. */
nav {margin: 10px 0;
     background-color: #C3CDBF;
     text-align: center;
     margin-left: auto;
     margin-right: auto;}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {padding:0;
        margin:0;
        list-style: none;
        position: relative;}

/* Positioning the navigation items inline */
nav ul li {margin: 0px -7px 0 0;
           display:inline-block;
           background-color: #C3CDBF;}

/* Styling the links */
nav a {display:block;
       padding:0 5px;
       color:#000000;
       font-size:25px;
       line-height: 60px;
       text-decoration:none;
       font-weight: bold;}

/* Background color change on Hover */
nav a:hover {background-color: #6E7F62;
             color: #FAFAF9;}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {display: none;
           position: absolute;
           top: 100%;
           z-index: 100;}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {display:inherit;}

/* Fisrt Tier Dropdown */
nav ul ul li {min-width:170px;
              display:list-item;
              position: relative;}

.nav1_li, .dropdown        {margin-left: 60px;}

.logo           {margin-bottom: 0px;
                 padding: 0px;
                 display: block;
                 margin-left: auto;
                 margin-right: auto;}

header, nav {background-color: #C3CDBF;
             width: 100%;}

.nav1_li    {font-size: 25px;}


.mail, .phone, .adress   {float: left;
                         width: 33%;
                         margin-left: auto;
                         margin-right: auto;
                         text-align: center;
                         background-color:  #C3CDBF;
                         color: #000000;
                         overflow: hidden;
                         height: 120px;}

.copyright      {text-align: center;
                 margin-left: auto;
                 margin-right: auto;
                 color: #6E7F62;
                 margin-bottom: 10px;
                 background-color: #FAFAF9;
                 margin-top: 15px;
                 padding-top: 10px;}

body          {background-color: #FAFAF9;}


.footer_div        {background-color: #C3CDBF;
                    margin-top: 10px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-around;}


footer {clear: both;
        display: block;
        background-color: #C3CDBF;
        margin-top: 50px;}



.clenoverodiny     {margin-bottom: 40px;
                    width: 20%;
                    border-left: 2px solid black;
                    padding-left: 10px;
                    background-color: #FAFAF9;
                    flex: 18%;
                    max-width: 18%;}


.clenove_h3     {font-size: 35px;}

.clenove_li         {font-size: 20px;
                     font-family: "Oswald";}

.clenove_h2         {font-size: 40px;
                     margin-left: 20px;
                     margin-bottom: 20px;
                     padding-bottom: 20px;}


p   {font-family: "Oswald";}

h1, h2, h3 {font-family: "Bebas Neue";}


.flex-container    {display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-around;}

.onas    {width: 1000px;
          margin-left: auto;
          margin-right: auto;}
          
.h2_onas, .kontakt_h2 {width: 1000px;
          margin-left: auto;
          margin-right: auto;
          font-size: 35px;
          margin-bottom: 40px;}
          
.p_onas, .kontakt_p     {font-family: "Oswald";
                        font-size: 20px;
                        margin-top: 0px;
                        padding-top: 0px;}      
             
             
.h3_onas, .kontakt_h3       {font-size: 25px;
                             margin-bottom: 0px;
                             padding-bottom: 0px;}
                
                
.container_kontakt  {width: 750px;
                     margin-left: auto;
                     margin-right: auto;
                     display: flex;
                     margin-bottom: 50px;
                     border: 5px #6E7F62 double;}
 
 .kontakt       {width: 30%;
                 float: left;
                 max-width: 30%;
                 margin-left: auto;
                 margin-right: auto;}
.kontakt2       {width: 30%;
                 float: left;
                 max-width: 30%;
                 margin-left: auto;
                 margin-right: auto;}                 

 
 .kontakt_mapa_velka, .kontakt_mapa_mala      {text-align: center;
                     margin-left: auto;
                     margin-right: auto;
                     overflow: hidden;}
                     
.kontakt_form       {text-align: center;
                     margin-left: auto;
                     margin-right: auto;
                     margin-top: 70px;
                     font-size: 25px;}
                     
                     
.dekujeme_h2        {text-align: center;
                     margin-top: 150px;
                     margin-left: auto;
                     margin-right: auto;}         
                     

/* For Desktop View */
@media screen and (min-width: 1024px) 
{.clenoverodiny  {flex: 20%;
                    max-width: 18%;}}
@media screen and (min-width: 1025px) 
 {.nav2 {display: none;}
 .kontakt_mapa_mala     {display: none;}    
 }


/* For Tablet View */
@media screen and (min-width: 768px)
and (max-width: 1025px) 
{.clenoverodiny {flex: 45%;  
                 max-width: 45%;}
.onas        {flex: 90%;
              max-width: 90%;}                 
 .nav1, .kontakt_mapa_mala {display: none;}
 main {margin-top: 15px;} 
  #menuToggle {margin-top: -100px;}
     header {height: 200px;}
    .foto         {flex: 48%;
                max-width: 48%;}
                
 .image-gallery {padding-left:30px;}
 
 .foto_h1    {font-size: 50px;
              margin-top:65px;
              margin-bottom:25px;
              text-align:center;
              margin-left: auto;
              margin-right: auto;}
 .foto_link {margin-top:100px; }          }
 
 
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-width: 640px) 
 {.clenoverodiny, .onas, .container_kontakt   {flex: 90%;
                           max-width: 90%;}   
 .kontakt_mapa_velka, .kontakt2  {display: none;}
 .kontakt {width: 150px;}
 .foto         {flex: 48%;
                max-width: 48%;}
                
 
 .foto_h1    {font-size: 50px;
              margin-top:25px;
              margin-bottom:25px;
              text-align:center;
              margin-left: auto;
              margin-right: auto;}
              
  .gallery2013  {margin-bottom: 100px;}
              
 .foto_link {margin-top:100px; }            
  .nav1 {display: none;}
   main {margin-top: 15px;} 
  #menuToggle {margin-top: -100px;}
     header {height: 200px;}
     .adress{display: none;}}




.image-gallery  {display: flex;
                 list-style-type: none;
                 margin-bottom: 100px;}

.image-gallery {display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;}

.image-gallery > li  {flex-basis: 350px; /* width: 350px; */}

.image-gallery li img {object-fit: cover;
                         max-width: 100%;
                        height: auto;
                        vertical-align: middle;
                        border-radius: 5px;}
.image-gallery > li {  /* ... */
                     position: relative;
                     cursor: pointer;}
  
 .image-gallery::after {content: "";
                        flex-basis: 350px;} 
  
  .overlay { position: absolute;
             width: 96%;
             height: 100%;
             background: rgba(57, 57, 57, 0.502);
             top: 0;
             left: 0;
             transform: scale(0);
             transition: all 0.2s 0.1s ease-in-out;
             color: #fff;
             border-radius: 5px;
              /* center overlay text */
             display: flex;
             align-items: center;
             justify-content: center;}

/* hover */
.image-gallery li:hover .overlay { transform: scale(1);}
  
 

.foto_h1    {font-size: 50px;
             margin-right: 54px;
             margin-left :60px;}

.fotogalerie_h1    {font-size: 50px;
             margin-right: 90px;
             margin-left :60px;}

.gallery2013  {display: flex;
                 list-style-type: none;
                 margin-bottom: 100px;}

.gallery2013 {display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;}

.gallery2013 > li  {flex-basis: 350px; /* width: 350px; */}

.gallery2013 li img {object-fit: cover;
                         max-width: 100%;
                        height: auto;
                        vertical-align: middle;
                        border-radius: 5px;}
.gallery2013 > li {  /* ... */
                     position: relative;
                     cursor: pointer;}
  
 .gallery2013::after {content: "";
                        flex-basis: 350px;} 
  
  .overlay { position: absolute;
             width: 96%;
             height: 100%;
             background: rgba(57, 57, 57, 0.502);
             top: 0;
             left: 0;
             transform: scale(0);
             transition: all 0.2s 0.1s ease-in-out;
             color: #fff;
             border-radius: 5px;
              /* center overlay text */
             display: flex;
             align-items: center;
             justify-content: center;}

/* hover */
.gallery2013 li:hover .overlay { transform: scale(1);}
  



a.foto_link:link          {color: black;}
a.foto_link:visited       {color: black;}
a.foto_link:hover         {color: #6E7F62;}
a.foto_link:active        {color: #C3CDBF;}

.foto_link      {font-size: 50px;
                 font-family: "Bebas Neue";
                 text-align: center;
                 margin-left: auto;
                 margin-right: auto;}

  

/* Hamburger menu */

#menuToggle
{ display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;}

#menuToggle a
{text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;}

#menuToggle a:hover
{background-color: #6E7F62;
             color: #FAFAF9;}


#menuToggle input
{ display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;}

/*Just a quick hamburger*/
#menuToggle span
{ display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #000000;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;}

#menuToggle span:first-child
{transform-origin: 0% 0%;}

#menuToggle span:nth-last-child(2)
{transform-origin: 0% 100%;}

/* Transform all the slices of hamburger into a crossmark.*/
#menuToggle input:checked ~ span
{ opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;}

/*But let's hide the middle one.*/
#menuToggle input:checked ~ span:nth-last-child(3)
{opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);}

/*Ohyeah and the last one should go the other direction*/
#menuToggle input:checked ~ span:nth-last-child(2)
{transform: rotate(-45deg) translate(0, -1px);}

/*Make this absolute positioned at the top left of the screen*/
#menu
{ position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
    
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}

#menu .li_menu
{padding: 20px 0px;
 font-size: 22px;}

/*And let's slide it in from the left */
#menuToggle input:checked ~ ul
{transform: none;}

.li_menu        {background-color: #ededed;
                 text-align: center;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;}