/* * * RESPONZIVITA * * */

@media only screen and (max-width: 1001px) { /* Pokud je šířka obrazovky menší než 1001px, tak */

  header.zahlavi section.hlavni-sekce {
    flex-direction: column;
    padding: 0 0 5px 0;
  }
  header.zahlavi section.hlavni-sekce section#s001 {
    background-color: var(--c-seda-tmava);
    flex-direction: row;
    justify-content: space-evenly;
    padding: 5px 0 5px 0;
  }
  header.zahlavi section.hlavni-sekce section#s001 p,
  header.zahlavi section.hlavni-sekce section#s001 a {
    color: var(--c-bila);
    font-size: 18px;
  }
  header.zahlavi section.hlavni-sekce section#s003 p {
    display: none;
  }
  header.zahlavi section.hlavni-sekce section#s003 div#d001 {
    width: 80%;
    justify-content: space-between;
  }
  header.zahlavi nav#m001 {
    justify-content: space-evenly;
  }
  header.zahlavi nav#m001 a {
    width: 100%;
  }
  #k001, #k002, #k003 {
    width: 100%;
  }
  #k003 p {
    font-size: 18px;
  }
}
@media only screen and (max-width: 701px) { /* Pokud je šířka obrazovky menší než 701px, tak */

  header.zahlavi section.hlavni-sekce {
    flex-direction: column;
    padding: 0 0 5px 0;
  }
  header.zahlavi section.hlavni-sekce section#s001 {
    background-color: var(--c-seda-tmava);
    flex-direction: row;
    justify-content: space-evenly;
    padding: 5px 0 5px 0;
  }
  header.zahlavi section.hlavni-sekce section#s001 p {
    color: var(--c-bila);
    font-size: 18px;
  }
  header.zahlavi section.hlavni-sekce section#s003 p {
    display: none;
  }
  header.zahlavi section.hlavni-sekce section#s003 div#d001 {
    width: 80%;
    justify-content: space-between;
  }
  header.zahlavi nav#m001 {
    justify-content: space-evenly;
  }
  header.zahlavi nav#m001 a {
    width: 100%;
  }
  section.sluzby .sluzba {
    width: auto;
    height: auto;
  }
  section.sluzby .sluzba h2 {
    font-size: 14px;
  }
  #k002 .kontakt {
    width: 100%;
  }
}
@media only screen and (max-width: 451px) { /* Pokud je šířka obrazovky menší než 451px, tak */

  header.zahlavi #m001 a {
    font-size: 14px;
  }
  section.obsah {
    display: flex;
    justify-content: center;
  }
  section.obsah1 {
    width: 100%;
  }
  div.karta#k002 {
    width: 100%;
  }
  div.kontakt {
    flex-direction: column;
  }
  div.kontakt img {
    width: 40px;
  }
  .obsah-karty .kontakt p, .obsah-karty .kontakt a {
    font-size: 22px;
  }
}
@media only screen and (max-width: 351px) { /* Pokud je šířka obrazovky menší než 351px, tak */

  header.zahlavi section.hlavni-sekce section#s001 p,
  header.zahlavi section.hlavni-sekce section#s001 a {
    font-size: 12px;
  }
  header.zahlavi section.hlavni-sekce section#s002 #i001 {
    width: 40%;
    min-width: 100px;
  }
  header.zahlavi #m001 a {
    font-size: 10px;
  }
}





/* * * PRIMÁRNÍ NASTAVENÍ * * */
/* * * Všeobecné, výchozí * * */

:root { /* Globální proměnné použitelné kdekoliv - barvy */
  --c-bila: #ffffff;
  --c-cerna: #000000;
  --c-seda-tmava: #212121;
  --c-connexum-zluta: #f4cf0b;
  /* tmavá šedá původní - #2e2d2d */
}
* { /* Globální styly, které se aplikují na všechno */
  color: var(--c-cerna); /* barva textu */
  font-family: 'Quicksand', Arial, sans-serif; /* font */
  font-size: 18px; /* velikost fontu */
  text-decoration: none; /* dekorace textu = žádná */
  padding: 0; /* vnitřní odsazení */
  margin: 0; /* vnější odsazení */
}
html, body { /* Tělo HTML dokumentu */
  background-color: var(--c-seda-tmava); /* barva pozadí */
  height: 100%; /* 100% výška */
  width: 100%; /* 100% šířka */
}
::selection { /* Výběr (například označený text) */
  background-color: var(--c-connexum-zluta); /* barva pozadí */
}

/* * Stránka * */

.stranka { /* Veškerý obsah stránky */
  height: 100%; /* 100% výška */
  width: 100%; /* 100% šířka */
}





/* * * ZÁHLAVÍ * * */

.zahlavi { /* Styly pro celou sekci */
  z-index: 100; /* do popředí = důležitost +100 */
  background-color: var(--c-bila); /* barva pozadí */
  position: sticky; /* připnout, vždy zobrazovat i při scrollování */
  top: 0px; /* vzdálenost od horního okraje = žádná, připnout */
  height: fit-content; /* přizpůsobit výšku podle obsahu */
  box-shadow: 0 4px 0 var(--c-connexum-zluta); /* žlutá dělící čára dole (spodní hrana) */
}
.zahlavi p { /* Styly pro všechny texty (paragrafy)  */
  font-size: 28px; /* velikost fontu */
}

/* * Hlavní sekce * */

.zahlavi .hlavni-sekce { /* Styly pro celou hlavní sekci */
  display: flex; /* flex kontejner */
  flex-direction: row; /* obsah zarovnat do řádku */
  justify-content: space-evenly; /* rozmístit obsah rovnoměrně */
  padding: 15px 0 15px 0; /* vnitřní odsazení */
}
.zahlavi .hlavni-sekce .cast-sekce { /* Styly pro všechny části hlavní sekce */
  display: flex; /* flex kontejner */
  flex-direction: column; /* obsah zarovnat do sloupce */
  align-items: center; /* vystředit obsah horizontálně */
  justify-content: center; /* vystředit obsah vertikálně */
}
.zahlavi .hlavni-sekce #s001 a {
  font-size: 28px; /* velikost fontu */
  transition: 0.1s;
}
.zahlavi .hlavni-sekce #s001 a:hover {
  color: var(--c-connexum-zluta); /* změna barvy na Connexum žlutou */
}
.zahlavi .hlavni-sekce #s002 #i001 { /* Logo Connexum */
  width: 20vw; /* šířka = 20% šířky stránky */
  min-width: 225px; /* minimální šířka */
}
.zahlavi .hlavni-sekce #s003 #p001 { /* Text u odkazů na soc. sítě */
  user-select: none; /* zakázat výběr textu */
}
.zahlavi .hlavni-sekce #s003 #d001 { /* Kontejner s odkazy na soc. sítě */
  display: flex; /* flex kontejner */
  flex-direction: row; /* obsah zarovnat do řádku */
  width: 100%; /* šířka = 100% šířky sekce */
  justify-content: space-evenly; /* rozmístit obsah rovnoměrně */
}
.zahlavi .hlavni-sekce #s003 #d001 a { /* Styly pro všechny odkazy na soc. sítě */
  max-height: 35.2px; /* maximální výška = výška ikony */
}
.zahlavi .hlavni-sekce #s003 #d001 #a001 #i001, 
.zahlavi .hlavni-sekce #s003 #d001 #a002 #i002 { /* Ikony soc. sítí */
  width: 35.2px; /* šířka */
  transition: 0.1s; /* rychlost změny */
  cursor: pointer; /* změnit kurzor myši při přejetí */
}
.zahlavi .hlavni-sekce #s003 #d001 #a001 #i001:hover, 
.zahlavi .hlavni-sekce #s003 #d001 #a002 #i002:hover { /* Ikony soc. sítí - při přejetí kurzorem */
  filter: invert(81%) sepia(44%) saturate(1588%) hue-rotate(0deg) brightness(104%) contrast(92%); /* změna barvy na Connexum žlutou */
}

/* * Menu * */

#m001 a { /* Styly pro všechny odkazy */
  min-width: 10vw; /* minimální šířka = 10% ze šířky stránky */
  text-align: center; /* zarovnání textu doprostřed */
  padding: 5px 0px 5px 0px; /* vnitřní odsazení */
  margin: 0 0 0 0; /* vnější odsazení */
  transition: 0.1s; /* rychlost změny */
}
#m001 a:hover { /* Styly pro všechny odkazy - při přejetí kurzorem */
  background-color: var(--c-connexum-zluta); /* barva pozadí */
  font-weight: 600; /* tloušťka fontu */
}
#m001 #a001, #m001 #a002, #m001 #a003 { /* Styly pro odkazy podle ID */
  box-shadow: 1px 0 0 var(--c-connexum-zluta); /* žlutá dělící čára napravo (od textu) */
}





/* * * OBSAH * * */

/* * Služby * */

.sluzby { /* Styly pro celou sekci */
  display: flex; /* flex kontejner */
  flex-direction: row; /* zarovnat obsah do řádku */
  flex-wrap: wrap; /* automaticky zalamovat řádek */
  justify-content: center; /* zarovnat obsah na střed */
  padding-top: 13.5px; /* vnitřní odsazení nahoře */
}
.sluzba { /* Styly pro všechny karty */
  background-size: 100%; /* roztáhnout obrázek na pozadí */
  width: 225px; /* šířka */
  min-width: 135px; /* minimální šířka */
  height: 225px; /* výška */
  min-height: 135px; /* minimální výška */
  margin: 20px 20px 20px 20px; /* vnější odsazení */
  outline-style: solid; /* styl ohraničení plnou čarou */
  outline-color: var(--c-connexum-zluta); /* barva ohraničení */
  outline-width: 3.5px; /* tloušťka ohraničení */
  transition: 0.1s; /* rychlost změn */
}
.sluzba:hover { /* Styly pro všechny karty - při přejetí kurzorem */
  outline-style: solid; /* styl ohraničení plnou čarou */
  outline-color: var(--c-connexum-zluta); /* barva ohraničení */
  outline-width: 8px; /* tloušťka ohraničení */
  cursor: pointer; /* změnit ukazatel myši */
}
.sluzby h2 { /* Text karty */
  display: flex; /* flex kontejner */
  justify-content: center; /* zarovnat obsah na střed */
  align-items: center; /* zarovnat obsah na střed */
  color: var(--c-bila); /* barva písma */
  user-select: none; /* zakázat výběr */
  font-weight: 600; /* tloušťka písma */
  font-size: 22px; /* velikost fontu */
  text-align: center; /* zarovnat text na střed */
  width: 100%; /* šířka */
  height: 100%; /* výška */
  transition: 0.1s; /* rychlost změn */
}
.sluzba h2:hover { /* Text karty - při přejetí kurzorem (stačí na kartu) */
  font-size: 23px; /* velikost fontu */
}
.sluzba#a001 { /* Služba: Internetové připojení */
  background-image: url(../img/i001.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a002 { /* Služba: Počítačové sítě */
  background-image: url(../img/i002.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a003 { /* Služba: Radiové sítě */
  background-image: url(../img/i003.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a004 { /* Služba: VoIP - Telefonní ústředny */
  background-image: url(../img/i004.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a005 { /* Služba: Digital Signage - Propagační obrazovky */
  background-image: url(../img/i005.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a006 { /* Služba: Kamerové systémy */
  background-image: url(../img/i006.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a007 { /* Služba: Zabezpečovací systémy */
  background-image: url(../img/i007.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a008 { /* Služba: Elektroinstalace a kabeláž */
  background-image: url(../img/i008.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a009 { /* Služba: Servis a poradenství */
  background-image: url(../img/i009.jpg); /* cesta k obrázku na pozadí */
}
.sluzba#a010 { /* Připravujeme ... */
  background-color: var(--c-seda-tmava); /* barva pozadí */
  cursor: default; /* kurzor myši - výchozí (šipka) */
}
.sluzba#a010 h2 { /* Připravujeme ... (Text) */
  color: var(--c-connexum-zluta); /* barva textu */
  font-weight: 400; /* tloušťka písma */
}

/* * Obsah 1 = Vzhled jiných stránek než je úvodní * */

.obsah1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 20px 5vw 0 5vw;
}
.karta {
  background-color: var(--c-bila);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: auto;
  border-radius: 25px;
  padding: 20px;
  margin: 20px 20px 30px 20px;
  transition: 0.1s;
}
.karta:hover {
  -webkit-box-shadow: 0px 0px 25px 3px rgba(244,207,11,0.75);
  -moz-box-shadow: 0px 0px 25px 3px rgba(244,207,11,0.75);
  box-shadow: 0px 0px 25px 3px rgba(244,207,11,0.75);
}
.karta h2 {
  font-size: 30px;
  text-align: center;
  user-select: none;
  margin-bottom: 20px;
}
.karta .obsah-karty {
  height: 100%;
}
.karta p {
  text-align: left;
  font-size: 26px;
  padding-left: 10px;
  padding-right: 10px;
}
.karta p.info {
  background-color: var(--c-connexum-zluta);
  user-select: none;
}
.karta a {
  font-size: 26px;
  font-weight: 600;
}
.karta a:hover {
  color: var(--c-connexum-zluta); /* změna barvy na Connexum žlutou */
}

/* * Kontakty * */

.kontakt {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 350px;
}
.kontakt img {
  width: 75px;
  margin: 10px;
}
.kontakt p, .kontakt a {
  display: flex;
  align-items: center;
  height: fit-content;
  text-align: left;
  font-size: 26px;
  padding-left: 10px;
  transition: 0.1s;
}
.kontakt a:hover {
  font-weight: 600;
  color: var(--c-connexum-zluta); /* změna barvy na Connexum žlutou */
}






/* * * MENU * * */

.menu { /* Styly pro všechna menu */
  display: flex; /* flex kontejner */
  flex-direction: row; /* obsah zarovnat do řádku */
  justify-content: center; /* obsah zarovnat na střed */
}