* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  background: white;
 /* background: #c3edfd url('img/bg.jpg') no-repeat center top; */
}




/* hlavicka */
#menu-logo { 
  overflow: hidden; 
  padding: 0.5% 1% 0.5% 1%;  margin:0;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 800;
	display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 0; grid-row-gap: 0;
  grid-auto-rows: minmax(20px,auto);    border:0px solid white;
  justify-items:center; align-items:center;  
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.7);                                            
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";

 }

#menu-logo > div{  padding: 0;width: 100%;  }

#menu-logo > div > a.linky{
  text-transform:uppercase; border:0px dotted blue;
	display: inline-block; width: 100%; text-align:center;
  padding: 6px 6px; border-left-width: 0; font-weight:normal; 
  font-size: 22px; font-weight:500; 
	text-decoration: none; text-align:center; color: black;   
  background: url('img/menu_v_linka.jpg') no-repeat center right;  
}

#menu-logo > div > a.posledni-link{ background: none;  }

#menu-logo > div img.flag { max-width: 45px; width: 100%; border:0 }

#menu-logo > div > a.linky:hover{ text-decoration:underline; }


#menu-logo > .prvni-logo img{      
    width: 100%; max-height:140px;  max-width:300px;  float:left; margin: 1% 0 1% 0; border:0; 
}

#menu-logo > .prvni-logo a:hover { opacity: 0.9 }


#dl-menu { display:none  } 
#logo-mobil { display:none  } 





  @media (max-width: 1750px) {    
    #menu-logo { grid-template-columns: 2fr 1fr 1.7fr 1fr 1fr 1fr 70px; }     
  }
  
  @media (max-width: 1500px) {    
    #menu-logo { grid-template-columns: 2fr 1.3fr 1.7fr 1fr 1fr 1fr 50px;  }   
    #menu-logo > div > a.linky{ padding: 6px 6px; font-size: 18px; }        
  }
  
  @media (max-width: 1300px) {
    #menu-logo > .prvni-logo img{  max-width:250px; }    
    #menu-logo { grid-template-columns: 2fr 1.3fr 1.7fr 1fr 1fr 1fr 50px; }   
    #menu-logo > div > a.linky{ padding: 6px 0px; font-size: 18px; }
    #menu-logo > div img.flag { max-width: 40px }        
  }
  
  
  @media (max-width: 1090px) {
    #menu-logo > .prvni-logo img{  max-width:220px; }    
    #menu-logo { grid-template-columns: 2fr 1.3fr 1.7fr 1fr 1fr 1fr 50px; border: 0px solid red }   
    #menu-logo > div > a.linky{ padding: 6px 0px; font-size: 17px; }
    #menu-logo > div img.flag { max-width: 40px }        
  }



#slider { width:1920px;height:1080px;margin:0 auto;border:0px solid green; position:relative; z-index:1; }





  @media (max-width: 960px) {

    #uvod{ left:0; max-width:45%}
    #menu-logo { display:grid; grid-template-columns: auto 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;   grid-auto-rows: minmax(50px,auto); }
    #menu-logo > div { border:0px solid red; width:99%; }
    #menu-logo > div > a.linky-k{ display:none  }
    #menu-logo > div > a.linky{ display:none  } 
    #dl-menu{ display:inline-block; width:100%; position:fixed; z-index: 900; margin: 5px 0 0 6px; top: 11px }      
    #menu-logo > .prvni-logo img{  max-width:230px; margin-left: 60px;  }
    #menu-logo > div img.flag { display:none }  
    #dl-menu img.flag-mob { max-width:40px } 
    #slider { width:1000px;height:560px;margin:0 auto;padding:45px 0 0 0; }
     
  }

  
  @media (max-width: 480px) {
 
      #uvod{ max-width:50%; } 
      #menu-logo > .prvni-logo img{  max-width:170px;  } 
     /* #dl-menu{ margin: 27px 0 0 210px }  */
      
  }
  
  @media (max-width: 360px) {
 
      #uvod{ max-width:50%; } 
      #menu-logo > .prvni-logo img{  max-width:170px; float: right  } 
     /* #dl-menu{ margin: 27px 0 0 27px }  */

      #menu-logo {   
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      	display: grid;
        grid-template-columns: 1fr;
       }
      #menu-logo .m-b{   display:none }
       
     
  }




/* -------------------------------------------- */





/* bannery */

#u-menu {  
  position:relative; z-index:250;   border: 0px solid red;
  margin-top: 0px; padding: 0 2%;
  width:100%;  clear:both;
	display: grid;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;  
  grid-auto-rows: minmax(20px,auto);
  justify-items:center;
  align-items:center
 }

#u-menu > div{ 
  position:relative; padding: 0; margin:0; width: 100%;
  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
  transition: all .2s ease-in-out;    
  }
  
#u-menu > div:hover{ opacity: 0.7; transform: scale(0.99);  }
  
  
  
  

#u-menu > div img{ 
  position:relative; z-index:1; width:100%; border:0; margin:0; padding:0;
  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;   
  }

#u-menu > div img:hover{ opacity: 0.9; /*transform: scale(0.95);*/  }

  
#u-menu > div img.ikonka{ 
  position:relative; z-index:10; max-width:60px; width:100%; border:0; margin:0; padding:0;
  float:left; margin-right: 20px;
  }









#u-menu > div h2 { 
  position:absolute; z-index:2; text-align:left; margin:0; width:100%;
  bottom: 0px;
  left: 0px;
  font-weight:normal; font-size: 22px; padding:1.6% 1.5% 1.2% 1.5%; 
  -webkit-border-bottom-right-radius: 9px;
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomright: 9px;
  -moz-border-radius-bottomleft: 9px;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;  
  background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
  background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
  background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );  
 }
 
#u-menu > div h2 em{ font-style:normal; font-size: 16px; }
 

#u-menu > div a{ text-decoration:none; color:black; font-size: 25px; display:inline-block; padding: 0;  }
#u-menu > div a:hover{ text-decoration:none; color:gray; }





  @media (max-width: 1600px) {    
    #u-menu > div h2 { font-size: 19px; padding:1.6% 1.5% 1.2% 1.5%; }
    #u-menu > div h2 em{ font-size: 14px; }      
  }
  
  @media (max-width: 1500px) {  
    #u-menu > div img.ikonka{ max-width:55px; margin-right: 1.5%; }   
    #u-menu > div h2 { font-size: 17px; padding:1.6% 1% 1.2% 1.5%; }
    #u-menu > div h2 em{ font-size: 14px; }      
  }
  @media (max-width: 1410px) {  
    #u-menu > div img.ikonka{ max-width:45px; margin-right: 1.5%; }   
    #u-menu > div h2 { font-size: 16px; padding:1.9% 0.2% 1.5% 1.5%; }
    #u-menu > div h2 em{ font-size: 14px; }     
  }
  @media (max-width: 1350px) {  
    #u-menu > div img.ikonka{ max-width:40px; margin-right: 1.9%; }   
    #u-menu > div a{ font-size: 22px; }
    #u-menu > div h2 { font-size: 13px; padding:2.2% 0.2% 1.9% 1.5%; line-height:1.3 }
    #u-menu > div h2 em{ font-size: 14px; }         
  } 
  
  @media (max-width: 1200px) {  
    #u-menu { grid-template-columns: 1fr 1fr; } 
  } 
  
  @media (max-width: 800px) {  
    #u-menu > div a{ font-size: 18px; }
  } 
  @media (max-width: 710px) {  
    #u-menu > div img.ikonka{ max-width:30px; margin-right: 1.5%; }
    #u-menu > div h2 { font-size: 12.5px; padding:2.2% 0% 1.9% 1.5%;  }
    #u-menu > div h2 em{ font-size: 12.5px; }        
  } 
  @media (max-width: 650px) {  
    #u-menu > div img.ikonka{ display:none; }      
  } 
  
  
  @media (max-width: 600px) {  
    #u-menu > div img.ikonka{ display:block; }  
    #u-menu { grid-template-columns: 1fr; }      
  }  
  
  @media (max-width: 325px) {
    #u-menu > div h2 { text-align:center }  
    #u-menu > div img.ikonka{ display:none; }        
  }  






/* o firme */

#o-nas {  
  width:100%; margin: 0; clear:both;  
  padding:0;
	display: grid;  
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  grid-auto-rows: minmax(120px,auto);
  justify-items:center;
  align-items:top
 }

#o-nas > div{  padding: 2% 4%; width:100%; color:black; font-size: 20px; line-height:1.7; }

#o-nas > div:first-child{ 
  grid-column:1/3;  padding: 2% 2% 2% 2%; position:relative; z-index:500; width:100%;   border:0px dotted red;
  grid-row:1/3;

 }


#o-nas > div .bublina{  padding: 2% 2% 2% 2%; background-color:white; -webkit-border-radius: 9px;
-moz-border-radius: 9px; 
border-radius: 9px;}


#o-nas > div .bublina h1{ padding-top: 0; margin-top: 0; font-weight: normal }

#o-nas > div div.bublina p{  padding: 0; margin:0 0 1% 0;}
#o-nas > div div.bublina p strong{ color:#007bbb; text-decoration:underline;font-weight:normal}

    /*
#o-nas  div.fotka img { width: 100%;	border:0px solid red ;  float:center; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
*/

#o-nas  div.fotka img { width: 48%;	margin-right:2%; border:0px solid red ;  float:center; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }

#o-nas  div.fotka img.bez-obsazeni { margin-right:0; }


  @media (max-width: 1300px) {  
      #o-nas  div.fotka img { width: 100%;	margin:2% 0 0 0;  float:left; clear:both  }
      #o-nas  div.fotka img.bez-obsazeni { display:none; }         
  }



  @media (max-width: 1024px) {  
      #o-nas {   padding-top:7vw;}         
  }
  
  @media (max-width: 800px) {  
      #o-nas {   padding-top:9.9vw;  }         

      #o-nas  {   grid-template-columns: 1fr; }
      #o-nas > div:first-child{  grid-column:1/2; grid-row:1/1; }
  }
  


  @media (max-width: 480px) {      
      #o-nas  {   grid-template-columns: 1fr; }
      #o-nas > div:first-child{  grid-column:1/2; grid-row:1/1; }
  }


/*



  @media (max-height: 800px) {  
      #o-nas {   padding-top:22%;}         
  }
  @media (max-width: 700px) {  
      #o-nas {   padding-top:15%;}         
  }



  @media (max-width: 720px) {  
      #o-nas {   
      clear:both; padding-top:22%;
      grid-template-columns: 1fr;
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      grid-auto-rows: minmax(120px,auto);
      }   
      
      #o-nas > div .bublina{  padding: 0 2%;}
       
  } 
  */








/* obsah */

#obsah {  
  width:100%; margin: 0; clear:both;  
  padding:0 2%;
	display: grid;  
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-auto-rows: minmax(120px,auto);
  justify-items:center;
  align-items:top
 }

#obsah > div{  padding: 1% 1%; width:100%; color:black; font-size: 20px; line-height:1.7; }

#obsah > div:first-child{ 
  grid-column:1/5;  padding: 0; position:relative; z-index:500; width:100%; 
  grid-row:1/2;
 }
 
#obsah > div:first-child div.bublina p{  padding: 0 0 0 0; margin:0;}



#obsah > div .bublina{  padding: 1% 1% 1% 1%; background-color:white; -webkit-border-radius: 9px; height:97%;
-moz-border-radius: 9px; 
border-radius: 9px;}


#obsah > div .bg-prechod-1{

background: #ffffff;
background: -moz-linear-gradient(-45deg,  #ffffff 41%, #f0f0f0 100%);
background: -webkit-linear-gradient(-45deg,  #ffffff 41%,#f0f0f0 100%);
background: linear-gradient(135deg,  #ffffff 41%,#f0f0f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=1 );

 }





#obsah > div .bublina h1{ padding-top: 0; margin-top: 0; font-weight: normal }
#obsah > div .bublina h2{ padding-left: 2%; margin-top: 0; font-weight: normal }
#obsah > div .bublina h2 a{ color: black }


#obsah > div div.bublina p{  padding: 0 0 0 2%; margin:0 0 10px 0;}
#obsah > div div.bublina p strong{ color:#007bbb; text-decoration:underline;font-weight:normal}
#obsah > div div.bublina a{ color:black } 

#obsah > div div.bublina ul { list-style: none; }
#obsah > div div.bublina ul li{ padding-bottom: 1.8%; }
#obsah > div div.bublina ul li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  color:#33bce6;
  display: inline-block;
  margin-left: -1.4em;
  width: 1.4em;
}













     















#obsah  div.fotka img { width: 100%;	margin-right:0%; border:0px solid red ;  float:center; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }

#obsah  div.fotka img.bez-obsazeni { margin-right:0; }


  @media (max-width: 1700px) {  
    #obsah  div.fotka img { height: 100% }
  }



  @media (max-width: 1300px) {  
    #obsah { grid-template-columns: 1fr 1fr; } 
    #obsah > div:first-child{  grid-column:1/3; grid-row:1/1; }    
  }
  
  @media (max-width: 820px) {  
    #obsah { grid-template-columns: 1fr; }
    #obsah > div:first-child{  grid-column:auto; grid-row:auto; }
  }
  


  @media (max-width: 480px) {      
      #obsah  {   grid-template-columns: 1fr; }
      #obsah > div:first-child{  grid-column:1/2; grid-row:1/1; }
  }



/* .. */





























/* FOTOGALERIE */

#fotogalerie-line { 
  min-height: 50px;
  background-image: url(/img/bg_line2.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  
}


#fotogalerie {  border:0px dotted white; width:100%; margin: 0; padding:2% 2%;



 

/* background-color:black;   */

  background: #000000;
  
  background: -moz-linear-gradient(top,  #000000 0%, #6f4802 75%);
  background: -webkit-linear-gradient(top,  #000000 0%,#6f4802 75%);
  background: linear-gradient(to bottom,  #000000 0%,#6f4802 75%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#6f4802',GradientType=0 );
   
                  


	display: grid;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1.1em;
  grid-row-gap: 1em;
  grid-auto-rows: minmax(40px,auto);
  justify-items:center;
  align-items:center
 }





#fotogalerie > div{  padding: 1%; width: 100%;  min-height:220px; text-align:center;
/*
background: #5d3c00;
background: -moz-linear-gradient(top, #5d3c00 0%, #3f2900 100%);
background: -webkit-linear-gradient(top, #5d3c00 0%,#3f2900 100%);
background: linear-gradient(to bottom, #5d3c00 0%,#3f2900 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d3c00', endColorstr='#3f2900',GradientType=0 );
 */
  }


#fotogalerie > div:first-child{ 
  grid-column:1/4; min-height:20px; text-align:left; color:white; background: none; border:0px solid white;
  grid-row:1/1;     padding:0; margin:0;
 }
#fotogalerie > div:first-child h2{ 
  padding:0; margin:0;
 }
 

  
  
#fotogalerie  div img.fotka { width: 100%; 	border:0;  float:center;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }

#fotogalerie a { text-decoration:none; 	border:0; color: white }  
#fotogalerie a:hover { opacity:0.9 }   
 


  @media (max-width: 800px) {      
      #fotogalerie {   grid-template-columns: 1fr 1fr; }
      #fotogalerie > div:first-child{  grid-column:1/3; grid-row:1/1; }
  }
  
  @media (max-width: 480px) {      
      #fotogalerie {   grid-template-columns: 1fr; }
      #fotogalerie > div:first-child{  grid-column:1/2; grid-row:1/1; }
  }









  @media (max-width: 960px) {
    h1 { font-size: 27px;}
    h2 { font-size: 25px; margin-bottom:0}
    p { font-size: 16px;}
     
  }















/* PAT */

#paticka {  

  border:0px dotted white; width:100%; padding:1.5% 2%; margin-top:0%;
  background: #737373;

 }
 
#paticka p {  color:white; text-align:center; line-height: 1.3 }

 


/* KONTAKT */



#kontakt {  
  border:0px dotted white; width:100%; padding:2% 2%;
  background: #a7a6a6;
  background: -moz-linear-gradient(top,  #a7a6a6 0%, #ffffff 81%);
  background: -webkit-linear-gradient(top,  #a7a6a6 0%,#ffffff 81%);
  background: linear-gradient(to bottom,  #a7a6a6 0%,#ffffff 81%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7a6a6', endColorstr='#ffffff',GradientType=0 );  
	display: grid;  
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  grid-auto-rows: minmax(20px,auto);
  justify-items:center;
  align-items:top
 }

#kontakt > div:first-child{ 
  grid-column:1/3; min-height:20px; text-align:left; color:white; 
  background: none; grid-row:1/1;     padding:0; margin:0;
 }
#kontakt > div:first-child h1{ 
  padding:80px 0 0 0; color:black; margin:0; font-weight:normal
 }



#kontakt > div{  padding: 2% 0% 2% 0%; width:100%; color:black; font-size: 20px; line-height:1.7; border:0px dotted red; }

#kontakt > div img{ width:100%; max-width:600px }



#kontakt > div:last-child{ 
  grid-column:1/3;  padding: 0;  border:0px dotted white;
  grid-row:3/3;

 }
   
#kontakt > div  p{  text-align:center;padding: 0; margin:0 0 0.7% 0;}


#kontakt-box {
  width:100%; margin: 0; clear:both;  
  padding:0 2% 1% 0;
	display: grid;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-auto-rows: minmax(120px,auto);
  justify-items:center;
  align-items:top
	}
  
#kontakt-box > div{
  padding-bottom:1%; line-height:1.5; font-size:17px
	}

  
#kontakt-box em{
  color:gray;
	}
  


  @media (max-width: 1200px) {      
    #kontakt {  grid-template-columns: 1fr 0.5fr; }
  }



  @media (max-width: 720px) {      
      #kontakt {   grid-template-columns: 1fr; }
      #kontakt > div:first-child{  grid-column:1/2; grid-row:1/1; }
      #kontakt > div:last-child{  grid-column:1/2; grid-row:3/3; }
      #kontakt-box {grid-template-columns: 1fr 1fr;}
  }
  
  @media (max-width: 540px) {      
      #kontakt-box {grid-template-columns: 1fr;}
  }






/* FORM */


form {
  display: grid; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
  padding: 2em 2em 1em 1em;
  background: #402a00;
  border: 1px solid black;
  margin: 2rem auto 0 auto;
  max-width: 600px;

}
form input {
  background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
  border: 1px solid #9c9c9c;
}
form button {
  background: lightgrey; margin: auto; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
  padding: 0.7em;  font-size:105%;
  width: 70%;
  border: 0;
}
form button:hover {
  background: gold; cursor:pointer;
}

label {
  padding: 0.5em 0.5em 0.5em 0; color:white;  font-size:105%;
}

input {
  padding: 0.7em; font-size:105%;
  margin-bottom: 0.5rem;
}
input:focus {
  outline: 3px solid gold;
}

@media (min-width: 400px) {
  form {
    grid-template-columns: 190px 1fr;
    grid-gap: 16px;
  }

  label {
    text-align: right;
    grid-column: 1 / 2;
  }

  input,
  button {
    grid-column: 2 / 3;
  }
}





p{ font-size:18px 	}


#realizace-nadpis {
        width:100%; padding:2% 2%; margin-top:80px;
}

#realizace-nadpis h1{
        font-weight:normal;
} 


#realizace {  
  border:0px dotted white; width:100%; padding:0% 2% 0 2%;
	display: grid;  
  grid-template-columns: 1fr;
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  grid-auto-rows: minmax(20px,auto);
  justify-items:center;
  align-items:top
 }
   /*
#realizace > div:first-child{ 
  grid-column:1/3; min-height:20px; text-align:left; color:white; 
  background: none; grid-row:1/1;     padding:0; margin:0;
 }
*/
#realizace > div h2{ 
  padding:1% 0; color:black; margin:0; font-weight:normal; text-align:center
 }
 
#realizace > div p{ 
  padding:2%; color:black; background:#fffac0; margin:0; font-weight:normal
 }



#realizace > div{  padding: 2% 0% 2% 0%; width:100%; color:black; font-size: 20px; line-height:1.7; border:0px dotted red; }

#realizace > div img{ width:100%; max-width:600px }






#realizace div.realizace-galerie{  
  border:0px dotted white; width:100%; padding:0% 0%;
	display: grid;  
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-auto-rows: minmax(20px,auto);
  justify-items:center;
  align-items:top
 }
 
 
 
 
  @media (max-width: 720px) {      
      #realizace div.realizace-galerie {   grid-template-columns: 1fr 1fr; }

  }