@-ms-viewport { 
  width: device-width; 
}

/* HLAVNI MENU */
.slicknav_menu { display: none; }


/* letajici horni menu */
header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  
  z-index: 99999;
  -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.35);
     -moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.35);
          box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.35);    

  max-width: initial; 
  margin-top: 0; 
  padding-left: 0;  
  background: white;
  padding-top: 5px;
  padding-bottom: 5px;
}
header.fixed h1 { margin-left: 20px; margin-top: 5px; margin-left: auto; margin-right: auto;   }
header.fixed h1 a span { display: none; }
header.fixed h1 a img  { width: 70%; margin-bottom: 5px; margin-left: auto; margin-right: auto;   }
header.fixed nav ul#hlavni-navigace { margin-top: 10px; }


/* vetsi nez 1100px */
@media only screen and (min-width : 1100px) {
  header {	float: left; }
  .centerBox {	float: left; }
  div.reference-seznam { float: left;  }
  div.reference-seznam h2 { margin-left: 40px; }
}

/* vetsi nez 1400px */                                                      
@media only screen and (min-width : 1400px) {
  header nav { padding-right: 0;    }
  div.reference-siroky-sloupec div#reference-grafika p.nahled-webdesignu {	width: 900px; }
  div.reference-siroky-sloupec div#reference-popis article { padding-left: 980px; }
  div.reference-siroky-sloupec div#reference-popis article div.article-content {  max-width: 750px;  }
  div.box-textovy-seznam-referenci ul {	-moz-column-count: 5; column-count: 5; -webkit-column-count: 5; }
  div#box-uvod p.hp-slogan { background: transparent url(../design/_spec-uvodni/hp-2500.jpg) no-repeat center top; background-size: 100% auto;    min-height: 400px;    padding-top: 140px;    font-size: 300%;       line-height: 1.2em;    padding-left: 5%;  }
}
@media only screen and (min-width : 1600px) { div#box-uvod p.hp-slogan { min-height: 450px; padding-top: 150px; }   h2 { text-align: left; } }
@media only screen and (min-width : 1700px) { div#box-uvod p.hp-slogan { padding-top: 170px; }  }
@media only screen and (min-width : 1900px) { div#box-uvod p.hp-slogan { min-height: 550px; padding-top: 190px; font-size: 320%; }}
@media only screen and (min-width : 2100px) { div#box-uvod p.hp-slogan { padding-top: 220px; } }
@media only screen and (min-width : 2200px) { div#box-uvod p.hp-slogan { min-height: 600px; padding-top: 240px; } }


/* mensi nez 1200px */
@media only screen and (max-width : 1200px) {  form#formular-zeptejtese { display: none; } }

/* mensi nez 1080px */
@media only screen and (max-width : 1080px) {
  
  header h1 {	width: 28%; }
     
  
  /* uvod */  
  div#box-uvod p.hp-slogan { font-size: 280%; }
    

  /* reference */
  div.box-textovy-seznam-referenci ul,
  div.box-textovy-seznam-referenci ul {	-moz-column-count: 3; column-count: 3; -webkit-column-count: 3; }
  div.reference-siroky-sloupec div#reference-grafika { width: 100%; }
  div.box-dlazdicovy-seznam-referenci ul li {	width: 48%; margin-top: 40px; margin-left: 1%; margin-right: 1%; }


  div.reference-siroky-sloupec div#reference-grafika {  width: 100%; position: relative; clear: both; }
  div.reference-siroky-sloupec div#reference-grafika p.nahled-webdesignu { max-height: 2700px; 	padding: 0px;	margin: 0px;	width: auto; position: relative; left: 0; }
  div.reference-siroky-sloupec div#reference-detaily { padding-left: 0px; }

  
  div.reference-siroky-sloupec div#reference-popis article.nazev h2 { font-size: 260%; margin-top: 0.4em; margin-bottom: 0.4em; text-align: center; }
  div.reference-siroky-sloupec div#reference-popis article.nazev h3 { text-align: center; }
  
  div.reference-siroky-sloupec div#reference-popis article.popis div.hodnoceni-klienta {	margin-top: 1em; margin-bottom: 1em; }
  
  
  div.reference-siroky-sloupec div#reference-popis { min-height: 0px; }
  div.reference-siroky-sloupec div#reference-popis article { padding-left: 30px; padding-right: 30px; }
  div.reference-siroky-sloupec div#reference-popis article div.article-content {  max-width: 100%;  }
  div.reference-siroky-sloupec div#reference-popis article.logo img {  position: relative; margin-left: auto; margin-right: auto; float: none; display: block; }

  div.reference-siroky-sloupec p.odkaz-dalsi-reference {	margin: 0; margin-bottom: 2em; padding-top: 1em; float: none; text-align: center;	}
  div.reference-siroky-sloupec div#reference-popis article.ostatni p.odkaz-dalsi-reference { float: right;	}

  /* kontakt */
  div#box-kontakt { margin-top: 0px; }
  /* mapa webu */
  body#mapa-webu div.centerBox div.obsah { width: 80%;  }
}

/* mensi nez 950px */
@media only screen and (max-width : 950px) {

  header h1 a:link, header h1 a:visited {	font-size: 45%; }


  

  /* HP */
  div#box-uvod p.hp-slogan { min-height: 500px; }
  div#box-uvod article.hp-popis p.odkaz-poptavka { margin: 0; float: none; display: block; margin-left: auto; margin-right: auto; margin-bottom: 2em; margin-top: 3em; text-align: center; clear: both; }

  div.clanek-styl14 { width: 100%; min-height: auto; margin-right: 0; }


  /* reference */
  div.reference-siroky-sloupec {	margin-top: 0; }
  div.box-textovy-seznam-referenci ul,
  div.box-textovy-seznam-referenci ul {	-moz-column-count: 2; column-count: 2; -webkit-column-count: 2; font-size: 110%; }
  /* blog */
  p.odkaz-na-dalsi-clanek {	margin-top: 3em;	margin-bottom: 2em;		max-width: 100%;	}
  p.odkaz-na-dalsi-clanek a {	text-decoration: underline;	margin-left: 1em;	padding: 0em;	background: transparent;	}
  /* kontakt */
  
  

  footer article div.width-limiter p { font-size: 90%; padding-top: 1em;	text-align: left;	color: white; clear: both; width: 100%; }
}

@media only screen and (max-width : 800px) {
  header h1 {	width: 32%; }
}

@media only screen and (max-width : 700px) {
  body { background: white; }
  h2 { font-size: 240%;  }

  header { width: 70%; margin-top: 0px; padding: 0; }
  header h1 { position: relative; margin-left: auto; margin-right: auto; display: block; width: 80%; max-width: 270px; float: none; margin-top: 1em; }

  header nav,
  header nav ul#hlavni-navigace,
  header nav ul#hlavni-navigace li,
  header nav ul#hlavni-navigace li a { margin: 0; padding: 0; float: none; }

  header nav { display: table; width: 100%; margin-top: 20px; }
  header nav ul#hlavni-navigace { display: table-row; }
  header nav ul#hlavni-navigace li { display: table-cell; text-align: center; }
  header nav ul#hlavni-navigace li a {   font-size: 100%; height: auto; line-height: 1.6em;  font-weight: 500; }
  header nav ul#hlavni-navigace li a.hp { padding-left: 2px; padding-right: 2px; }




  /* uvod */  
  div#box-uvod p.hp-slogan {     font-size: 220%;    line-height: 1.3em;     text-shadow: none;    
    background: transparent url(../design/_spec-uvodni/hp-700.png) no-repeat center top;    
    background-size: contain;
    min-height: 150px;    padding:  0;    padding-top: 270px;    padding-left: 5%;    padding-right: 5%;      color: #444;
    text-align: center;  
  }

  div#box-uvod article.hp-popis h2 {  font-size: 190%; line-height: 1.2em; margin-top: 1em;  }
  div#box-uvod article.hp-popis h3 {  font-size: 140%; font-weight: 600; margin-top: 2em; }
  div#box-uvod article.hp-popis p  { font-size: 110%; line-height: 1.7em; }
  div#box-uvod article.hp-popis li { font-size: 110%; line-height: 1.4em; }

  /* sluzby */
  body#sluzby div.text-clanku h3 { font-size: 150%; }
  body#vytvoreni-webovych-stranek div.box-popis-sloupec-levy { width: 92%; }  
  body#vytvoreni-webovych-stranek div.box-popis-sloupec-pravy { width: 92%; }  
  body#vytvoreni-e-shopu div.box-popis-sloupec-levy { width: 92%; }  
  body#vytvoreni-e-shopu div.box-popis-sloupec-pravy { width: 92%; }  
  /* kontakt */
  form#kontaktni-formular div.inputy { width: 100%; }
  form#kontaktni-formular div.vzkaz { width: 100%; float: left; }
  form#kontaktni-formular div.vzkaz textarea { float: left; width: 96%; }
  p.dokument-pro-zadani-zakazky { background: transparent; line-height: 1.3em; text-align: center; padding: 0; margin-top: 3em; border: none; }
  /* klienti */
  div.klienti-seznam ul li { width: 48%; margin-left: 1%; margin-right: 1%; margin-bottom: 1em;	}

  div.ohlasy-klientu p span.foto { width: 100%; }
  div.ohlasy-klientu p span.foto img { width: 100%; max-width: 150px; }
  div.ohlasy-klientu p span.description { font-size: 90%;   width: 100%; }
  div.ohlasy-klientu p em.reviewer { font-size: 100%; font-weight: 600; width: 100%; }

  div.box-dlazdicovy-seznam-referenci ul {	float: none; }
  div.box-dlazdicovy-seznam-referenci ul li {	width: 100%; position: relative; float: none; margin-left: auto; margin-right: auto; }
  div.box-textovy-seznam-referenci ul,
  div.box-textovy-seznam-referenci ul {	-moz-column-count: 1; column-count: 1; -webkit-column-count: 1; font-size: 110%; }

  /* blog */
  body#blog h2 { font-size: 200%; }
  body#blog h3 { font-size: 150%; }
  body#blog h4 { font-size: 120%; }
  body#blog p.obrazek1 { width: 100%; }
  body#blog div.clanek-stylperex div.text-clanku { width: 100%; }
  body#blog div.clanek-stylperex h2 { font-size: 160%; }
  body#blog div.clanek-stylperex p.obrazek1 { display: none; }
}

@media only screen and (max-width : 600px) {
  header { width: 80%; }
  div#box-uvod p.hp-slogan { min-height: 150px;    padding-top: 220px;  }
}

/* mensi nez 450px */
@media only screen and (max-width : 450px) {

  header { width: 92%; }
  header h1 a span { height: auto; margin-top: 0.5em;  }
  header nav ul#hlavni-navigace li a { font-size: 90%; }

  article.clanky { margin-left: 5%;  width: 90%; max-width: 1200px; } 

  h2 { font-weight: 600; margin-top: 1em; margin-bottom: 1em; }

  body#vytvoreni-webovych-stranek div.text-clanku h2 { font-size: 200%; }
  body#vytvoreni-webovych-stranek div.text-clanku h3 { font-size: 150%; }
  body#vytvoreni-e-shopu div.text-clanku h2 { font-size: 200%; }
  body#vytvoreni-e-shopu div.text-clanku h3 { font-size: 150%; }
  body#sluzby div.text-clanku div.w45procent { width: 100%; }
  body#vytvoreni-webovych-stranek div.text-clanku div.w50procent { width: 100%; }
  body#vytvoreni-e-shopu div.text-clanku div.w50procent { width: 100%; }

  /* HP */
  div#box-uvod p.hp-slogan { padding-top: 180px; font-size: 190%; }
  div#box-uvod article.hp-popis h2 {  text-align: center; }
  div#box-uvod article.hp-popis h3 {  text-align: center; }

  /* reference */  
  div.box-dlazdicovy-seznam-referenci ul {	margin-bottom: 0px; }
  div.reference-seznam {	margin-top: 0;	}  

  div.reference-siroky-sloupec div#reference-popis article.nazev h2,
  div.reference-siroky-sloupec div#reference-detaily article h2  { font-size: 170%; margin-top: 1em; margin-bottom: 0.5em;  }
  div.reference-siroky-sloupec div#reference-detaily article h3  { font-size: 150%;  }

  div.reference-siroky-sloupec div#reference-popis article.popis h3  { font-size: 150%;  }
  
  div.reference-siroky-sloupec div#reference-popis article.ostatni div.navigace-nahoru-dalsi { border-bottom: 1px solid #dedede; border-top: 1px solid #dedede; padding-top: 2em; padding-bottom: 2em;  margin-top: 2em; margin-bottom: 2em; 	}
  
  div.reference-siroky-sloupec div#reference-popis article.ostatni p.odkaz-zobrazit-vsechny-reference,
  div.reference-siroky-sloupec div#reference-popis article.ostatni p.odkaz-dalsi-reference {	margin: 0; float: none; margin-left: auto; margin-right: auto; text-align: center; clear: both; font-size: 140%; }
  
  div.reference-siroky-sloupec div#reference-popis article.ostatni p.odkaz-zobrazit-vsechny-reference { }
  div.reference-siroky-sloupec div#reference-popis article.ostatni p.odkaz-dalsi-reference { margin-top: 2em; 	}

  

  /* klienti */
  div.klienti-seznam ul li { width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 1em;	}


  div.ohlasy-klientu p em { text-align: center; float: none; }
  div.ohlasy-klientu p img.foto { float: none; margin: 0; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; position: relative; display: block; }

}





/* ipad s RETINA displejem, ktere jsou max 767px siroke*/
@media
only screen and (min-width : 768px) and (max-width : 1537px) and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-width : 768px) and (max-width : 1537px) and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-width : 768px) and (max-width : 1537px) and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-width : 768px) and (max-width : 1537px) and (min-device-pixel-ratio: 1.5)  {
  div.box-textovy-seznam-referenci ul,
  div.box-textovy-seznam-referenci ul {	-moz-column-count: 2; column-count: 2; -webkit-column-count: 2; width: 100%; }
}