/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
/* ---------------------------------- End reset css ----------------------------------------*/
/* ----------------------------------- START index.css -------------------------------------*/
/* ----------------------------------- body -------------------------------------*/
.white {color: #ffffff; }
.braun {color: #522f1e; }
.yellowDark {color: #fff347;}
/* ---------------------------------- color schema Still Growing ----------------------------------*/
.bg_yellowLight {background-color: #fff0ca; }
.bg_yellowDark {background-color: #FFF3B0; }
.bg_greenLight {background-color: #bdeb99; }
.bg_greenDark {background-color: #266a12; }
/* ------------------------------------------------- root -----------------------------*/
:root {
--bg-sahara: #f4efe6; /* bg- background */
--bg-beige: #fbcab9ff;
--bg-green:#276a12;
--bg-light-green:#d1fab1;
--bg-light-green-glass:#1eb30043;
--bg-yellow:#cedc00e6;
--bg-light-yellow:#fff3b0e1;
--bg-black:black;
--bg-white:#ffffff;
--bg-white-light-glass:#6485fd83;
/*--------- - logo ----------------------------*/
--logo-orange:#fbcab9ff;
--logo-beige:#fdf2dcff;
--logo-green:#c5d0b5ff;
--logo-blue:#aac7c6ff;
/* ---------------------text ------*/
--accent: #8c7ae6;
--text-main: #2f3640; /* text - lepší je uvádět v které sekci*/
--text-nav:#934903;
--text-h-braun:#772a00;
--text-red:#ff0000;
--text-white:#fdf2dcff;
--text-black:#000000;
/* -------------------icon --------------*/
--icon-green: #7afa02;
--icon-red:#ff0000;
--icon-nav:#934903;
/*----------------- navigační tečky-------------*/
--bg-dots:rgb(251, 255, 0);/* bg- navigační tečky */
--bg-dots-active: #f4efe6;
--bg-dots-hover:green;
}
/* ------------------------------------------------- root -----------------------------*/
:root {
--bg-sahara: #f4efe6; /* bg- background */
--bg-beige: #fff0ca;
--bg-green:#276a12;
--bg-light-green:#d1fab1;
--bg-light-green-glass:#1eb30043;
--bg-yellow:#cedc00e6;
--bg-light-yellow:#fff3b0e1;
--bg-black:black;
--bg-white:#ffffff;
--bg-white-light-glass:#f8f8f8b9;
/* ---------------------text ------*/
--accent: #8c7ae6;
--text-main: #2f3640; /* text - lepší je uvádět v které sekci*/
--text-nav:#934903;
--text-h-braun:#772a00;
--text-red:#ff0000;
--text-white:#cdcdcd;
--text-black:#000000;
/* -------------------icon --------------*/
--icon-green: #7afa02;
--icon-red:#ff0000;
--icon-nav:#934903;
/*----------------- navigační tečky-------------*/
--bg-dots:rgb(251, 255, 0);/* bg- navigační tečky */
--bg-dots-active: #f4efe6;
--bg-dots-hover:green;
}
/*-------------------------------- body ------------------------------------- */
body {
margin: 0em;
padding: 0em;
font-size: 1em;
font-family: 'Raleway', Verdana, Geneva, Arial, Helvetica, sans-serif;
color:var(--text-black);
cursor: context-menu;
overflow: hidden;
background-color:var(--bg-beige);
}
/* Sekce s obrázky na pozadí */
.section {
width: 100vw;
height: 100vh;
}
/* -----------------------------------container 1 -------------------------------------*/
.container_1 {
display: grid;
grid-template-areas:
'hamburger header header header header logo'
'motto motto motto motto motto motto'
'banner banner banner banner banner banner'
'navigation navigation navigation navigation navigation navigation'
'middle middle middle middle middle middle'
'middle1 middle1 middle1 middle1 middle1 middle1';
grid-row-gap: 0em; /* mezera mezi řádky */
grid-column-gap: 0em; /* mezera mezi column */
grid-template-rows: auto auto auto auto 1fr 1fr ;/* auto-nastavý výšku řádku dle obsahu, poslední řádek (1fr) vyplní zbytek obrazovky */
height: 100vh;
width: 100vw;
background-image: url(../../004_images/background/005.jpg) ;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: var(--text-white);
}
/* ---------------------------- Header ------------------------------ */
.header {grid-area: header;}
/* ---------logo------------------- */
.logo { grid-area: logo;}
/* ----------- banner -----------------------*/
.banner {grid-area: banner;}
/* -------------------------search ----------------*/
.navigation {grid-area: navigation;}
/* ----------------- motto---------------*/
.motto {grid-area: motto;}
/* ----------------- middle --------------- */
.middle{ grid-area: middle;width: 68vw;display:block;margin: 0 auto;}
.middle1 { grid-area: middle1;}
.middle1 .block{ width: 68vw;display:block;margin: 0 auto; padding: 0.25em 0.8em; }
/*.hamburger,.header,.logo,.motto,.banner{background-color: #bdeb99;}*/
/* ----------------------------------------- container_1 --------------------------*/
.container_1 article.glass{
padding: 0.2rem;
display: flex;
width: 25vw;
max-width: 25vw;
min-width: 25vw;
flex-direction: column; /* prvky pod sebe */
justify-content: center; /* vertikální zarovnání na střed */
align-items: center; /* horizontální zarovnání na střed */
padding: 0.5em;
border-radius: 15px;
box-shadow: 2px 4px 8px rgba(255, 255, 255, 0.4);
backdrop-filter: blur(0.2rem);
-webkit-backdrop-filter: blur(00.2rem);
border: 1px solid rgba(163, 163, 163, 0.564);
border-radius: 2.5em;
background-color: #bababa2d ;
box-shadow: #2f3640 2px 2px 5px;
padding: 2.5em;
color: #e8fbff;
font-family: Orbitron, sans-serif;
border: none;
}
.navigation {
display: flex;
justify-content: flex-end;
padding: 0.1em;
min-height: 2.65em;
align-self: center;
gap: 0.25em;
flex-direction: row;
}
.navigation nav{
display: flex;
padding: 0.1em;
align-self: center;
gap: 0.25em;
flex-direction: row;
}
.navigation nav a {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 6em;
text-align: center;
align-self: center;
gap: 0.25em;
padding: 0.1em 1em 0.2em 1.5em;
overflow: hidden;
z-index: 1;
padding: 0.15em;
text-decoration: none;
text-align: center;
color:var(--text-nav);
font-family: Orbitron, sans-serif;
border: 1px solid rgba(0, 0, 0, 0.028);
}
nav a:hover {
box-shadow: rgb(247, 236, 236) 0px 0px 15px;
border: 1px solid rgba(255, 255, 255, 0.582);
border-radius: 0.5em;
}
nav ion-icon {
font-size: 1.5rem;
padding: 0.25rem;
color: var(--icon-nav);
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
}
/* -----------------------------------container 2 -------------------------------------*/
/* (grid-template-rows) - šířka řádku je nastavena automaticky na auto, protože mám ale nastavenou rozložení conteineru na pevno je obrazovka rozdělena do stejně velkých řádků*/
.container_2 {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
'rectangle11 rectangle12 rectangle13 rectangle14'
'rectangle21 rectangle22 rectangle23 rectangle24'
'rectangle31 rectangle32 rectangle33 rectangle34';
background: url(../../004_images/background/007.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
grid-column-gap: 0em; /* mezera mezi column */
background-color: var(--bg-light-yellow);
grid-template-columns: 25vw 25vw 25vw 25vw;/* šířka sloupce */
grid-template-rows: 33vh 33vh 33vh; /* výška řádku */
}
.rectangle11 {grid-area:rectangle11 ;}
.rectangle12 {grid-area:rectangle12 ;}
.rectangle13 {grid-area:rectangle13 ;}
.rectangle14 {grid-area:rectangle14 ;}
.rectangle21 {grid-area:rectangle21 ;}
.rectangle22 {grid-area:rectangle22 ;}
.rectangle23 {grid-area:rectangle23 ;}
.rectangle24 {grid-area:rectangle24 ;}
.rectangle31 {grid-area:rectangle31 ;}
.rectangle32 {grid-area:rectangle32 ;}
.rectangle33 {grid-area:rectangle33 ;}
.rectangle34 {grid-area:rectangle34 ;}
.rectangle11,.rectangle12,.rectangle13,.rectangle14,.rectangle21,.rectangle22,.rectangle23,.rectangle24,.rectangle31,.rectangle32,.rectangle33,.rectangle34{ padding: 0dvb;
display: flex;
flex-direction: column; /* prvky pod sebe */
justify-content: center; /* vertikální zarovnání na střed */
align-items: center; /* horizontální zarovnání na střed */
padding: 0.5em;
margin: 1.5em;
border: 3px double rgba(95, 95, 95, 0.622); box-shadow: #4e4e4e 2px 2px 5px;border-radius: 0.25em;
color: #e8fbff;
font-family: Orbitron, sans-serif;
text-shadow: 2px 2px 4px #000000;
backdrop-filter: blur(0.3rem);
-webkit-backdrop-filter: blur(0.3rem);
background-color:rgba(71, 3, 208, 0.42) ;
border: #09006bb3 1px solid; box-shadow: #010052a8 0px 0px 5px;border-radius: 0.5em;}
/* --------------------------- i ------------------------------- */
.container_2 i{ font-size: 3em; margin-bottom: 0.25em; }
/* -----------------------------------container 3 -------------------------------------*/
.container_3 {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
'middle31 middle31 middle31 middle31 middle31 middle31'
'middle32 middle32 middle32 middle32 middle32 middle32'
'middle33 middle33 middle33 middle33 middle33 middle33';
grid-row-gap: 0em; /* mezera mezi řádky */
grid-column-gap: 0em; /* mezera mezi column */
background: url(../../004_images/background/004.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.glass{
background-color: #dee4ff43;
border: #d6d3ff 1px solid;
box-shadow: #f9fcffca 0px 0px 15px;
border-radius: 0.5em;
backdrop-filter: blur(0.2rem);
-webkit-backdrop-filter: blur(0.2rem);
padding: 2.5em;
color:var(--text-white);
font-family: Orbitron, sans-serif;
}
.middle31 { grid-area: middle31;display: flex;justify-content: space-evenly; align-items: center;}
.middle32 { grid-area: middle32;display: flex;justify-content: space-evenly; align-items: center;}
.middle33 { grid-area: middle33; display: flex;justify-content: space-evenly; align-items: center;}
.boxMiddle33{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0.25em; width: 15vw; height: 20vh; }
/* -----------------------------------container 4 -------------------------------------*/
.container_4 {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
'middle41 middle41 middle41 middle41 middle41 middle41'
'middle42 middle42 middle42 middle42 middle42 middle42'
'middle43 middle43 middle43 middle43 middle43 middle43'
'footer footer footer footer footer footer';
grid-column-gap: 0em; /* mezera mezi column */
background: url(../../004_images/background/009.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
grid-template-rows: 1fr auto auto auto ; /* auto-nastavý výšku řádku dle obsahu, poslední řádek (auto) se přizpůsobí obsahu */
}
.middle41 ion-icon {
font-size: 1.05rem;
padding-top: 0.12rem;
}
/* ------------------------------------- rozdělení barev dle name ----------------------------- */
.middle41 ion-icon[name="checkmark"] {color:var(--icon-green);}
.middle41 ion-icon[name="close"] { color:var(--icon-red);}
.middle41 { grid-area: middle41;display: flex;justify-content: space-evenly; align-items: center; color: var(--text-black);}
.boxMiddle41{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1em; width: 15vw; height: 50vh;
background: rgba(109, 131, 252, 0.3);
border-radius: 16px;
box-shadow: white 0px 0px 15px;
border: 1px solid rgba(255, 255, 255, 0.541);
padding: 20px;
}
.boxMiddle41 section{
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
text-align: left;
padding: 1em;
font-size: 1.05rem;
}
.middle42 { grid-area: middle42;display: flex;justify-content: space-evenly; align-items: center; background: rgba(109, 131, 252, 0.3);
border-radius: 16px;
box-shadow: white 0px 0px 10px;
border: 1px solid rgba(255, 255, 255, 0.302);}
.boxMiddle42{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1em; width: 68vw; height: 12vh;}
.middle43 { grid-area: middle43;display: flex;justify-content: space-evenly; align-items: center;}
.boxMiddle43{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1em; width: 15vw; height: 12vh;}
/* ----------------------------------- footer -------------------------------------*/
.footer {grid-area: footer; text-align: center; padding: 0.5em; background-color: #eae9e9ba; font-size: 0.9em;border-top: 1px solid #d3d3d3;}
.footer a{ color:var(--text-black); text-decoration: none;background-color:inherit;border: none;}
.footer a:hover{ text-decoration: underline;}
/*-------------------------------- container 6---------------------------*/
.container_6{
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: #ffffff;
}
.div_slider{
margin: 0rem;
height: 100vh;
width: 100vw;
background-size: 100% 100%;
animation:slider 45s ease infinite;
}
/* -----------------------------------container 5 (4x3)-------------------------------------*/
.container_5 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 0;
width: 100vw;
height: 100vh;
background: url('004.jpeg') center/cover no-repeat;
background-color: #000;
}
.radek{
flex: 1 1 min-max(10vw, 20vw);
padding: 1.2rem 1.5rem;
}
.box11,.box12,.box13,.box14,.box21,.box22,.box23,.box24,.box31,.box32,.box33,.box34{
width: min-max(10rem, 100%);
height: 20vh;
display: flex;
flex-direction: column; /* prvky pod sebe */
justify-content: center; /* vertikální zarovnání na střed */
align-items: center; /* horizontální zarovnání na střed */
padding: 0.25em;
border: #686868 1px solid;
border-radius: 12px;
box-shadow: #d6d6d6e3 2px 1px 2px;
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
font-weight: 500;
margin-top: 1.25em;
}
.box11:hover,.box12:hover,.box13:hover,.box14:hover,.box21:hover,.box22:hover,.box23:hover,.box24:hover,.box31:hover,.box32:hover,.box33:hover,.box34:hover{
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.container_5 h3{ text-align: center;}
/* --------------------------- individuální určení pozadí ------------------------------- */
.box11 {background-color: #030303;}
.box12{background-color: #72fc02;}
.box13 {background-color: rgb(0, 0, 0);}
.box14 {background-color: rgb(98, 255, 0);}
.box21 {background-color:rgb(246, 255, 0) ;}
.box22 {background-color: #030303;}
.box23 {background-color: rgb(242, 255, 0);}
.box24 {background-color: rgb(4, 4, 4);}
.box31 {background-color: rgb(0, 0, 0);}
.box32 {background-color: rgb(110, 250, 3);}
.box33 {background-color: rgb(8, 8, 8);}
.box34 {background-color: rgb(77, 255, 1);}
/* --------------------------------------------Navigační tečky --------------------------------------- */
.dots {
position: fixed;
right: 1.2em;
top: 50vh;
left: 1vw;
/*transform: translateY(-50%);*/
display: flex;
flex-direction: column;
gap: 0.35em;
z-index: 100;
}
.dot.active {
background-color:var(--bg-dots-active);
border: #000000 1px solid;
box-shadow: #3f3f3fe3 2px 1px 2px;
}
.dot {
width: 1.15em;
height: 1.15em;
border-radius: 50%;
background-color:var(--bg-dots);
cursor: pointer;
transition: background 0.3s, transform 0.3s; /* přidáme animaci */
border: #080808 1px solid;
box-shadow: #3f3f3fe3 2px 1px 2px;
}
.dot:hover {
transform: scale(1.25); /* zvětší tečku při hoveru */
background-color:var(--bg-dots-hover); /* volitelně změna barvy */
border: #080808 1px solid;
}
/* -----------------------------------------------vyskakovací okno na hamburger --------------------------------------*/
#overlayHamburger {
position: fixed;
display: none;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:var(--bg-beige);
z-index: 2;
cursor: pointer;
z-index: 1000;
}
#textHamburger{
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
.buttonHamburger{ border: none; background-color: rgba(119, 255, 0, 0);}
#textHamburger a{ color: var(--text-main); text-decoration: none; font-size: 1.25em;display: flex;align-self: start;align-items: center;padding: 0.12em 1.25em; }
#textHamburger a:hover{ color:var(--text-h-braun);font-weight: bold;border: #000 1px solid; box-shadow: black 2px 2px 5px;}
/*----------------------- logo---------------------*/
.logo{
display: flex;
flex-direction: row-reverse;/* reverzní řazení loga jej zarovná vpravo */
}
/*------------------------------------------- header nadpis ------------------------------*/
.nadpis{
font-size:3.5em ;
font-weight: normal;
font-family: 'Oooh Baby','Courier New', Courier, monospace;
letter-spacing: 0.05em;
text-align: center;
color:var(--text-white);
font-family: 'Emblema One', 'Arial Black', Gadget, sans-serif;
text-shadow: #9b9b9b 0px 0px 3px;
}
/* -------------------------------------------------- motto -------------------------------------------- */
.motto {
padding: 0.15em 0.1em;
text-align: center;
font-size: 1.5em;
font-weight: normal;
font-family: 'Carattere','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
letter-spacing: 0.05em;
color: #000000;
}
/* -------------------------------- carousel - horizontální pás obrázku v middle 1------------------------------*/
.image-strip {
position: relative;
max-width: 92vw; /* šířka pásu */
margin: auto;
display: flex;
align-items: center;
background-color: none;
}
.strip-container { overflow: hidden; flex: 1;}
.strip-track {
display: flex;
gap: 10px; /* mezera mezi obrázky */
transition: transform 0.3s ease;
}
.strip-track img {
width: 22vw; /* velikost obrázků */
height: 30vh; /* výška pásu */
flex-shrink: 0;
display: block; /* odstraní inline mezery */
cursor: pointer;
transition: transform 0.3s ease;
border: none;
filter: opacity(0.4);
box-shadow: none;
z-index: 1001;
}
.strip-track img:hover {
transform: scale(1.20); /* zvětšení obrázku při hoveru */
transition: transform 0.3s ease;
z-index: 10;
filter: opacity(1);
}
.strip-btn {
background-color: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
/* ----------------------------------------------------- style ------------------------------------------------ */
p{font-size: 1.0em;}
a{font-size: 1em; text-decoration: none;color: #000;}
a:hover{text-decoration: underline;}
h1{font-size:1.4em; font-weight: bold;}
h2{font-size:1.25em; font-weight: bold;}
h3{font-size:1em; font-weight: lighter;}
h4{font-size:1em;}
h5{font-size:0.8em;}
h6{font-size:0.8em;}
h1, h2, h3, h4, h5, h6 {
letter-spacing: 0.01em;
margin: 0.1em 0.1em;
padding: 0.1em 0.1em;
}
li{
margin: 0.1em 0.2em;
padding: 0.1em 0.2em;
list-style-type: none;}
em {
font-style: italic;
font-weight: bold;
color: #274F00;
}
span {
font-weight: bold;
color: #274F00;
}
.centred{text-align: center;}
/* ------------------------------------ odstavec po h3 odsadĂme------------------------------ */
h3 + p { text-indent: 0.5em; }
/* ------------------prvni linka v odstavci -----------------------------------------*/
p:first-line {text-indent: 0.25em; }
/* ------------------------prvni pismeno v odstavci-------------------- */
p:first-letter {font-size: 1.25em;}
/* ------------------------------- symboly předed nadpisy plánů ------------------ */
h2.peon:before {
content: ' \2659';
font-size: 2.5em;
margin: 0em 0.10em;
text-shadow: 0px 0px 6px rgb(107, 107, 107);
}
h2.vez:before {
content: ' \2656';
font-size: 2.5em;
margin: 0em 0.10em;
text-shadow: 0px 0px 6px rgb(123, 123, 123);
}
h2.kral::before{
content: ' \2654';
font-size: 2.5em;
margin: 0em 0.10em;
text-shadow: 0px 0px 6px rgb(113, 113, 113);
}
h2.dama:before {
content: ' \2655';
font-size: 2.5em;
margin: 0em 0.15em;
text-shadow: 0px 0px 6px rgb(127, 127, 127);
}
/* ------------------------------- symboly předed nadpisy sekcí ------------------ */
h3.home:before {
content: ' \2302';
font-size: 1.25em;
margin: 0em 0.10em;
}
h3.about:before {
content: ' \2139';
font-size: 1.25em;
margin: 0em 0.10em;
}
h3.services::before{
content: ' \2699';
font-size: 1.25em;
margin: 0em 0.10em;
}
h3.contact:before {
content: ' \2709';
font-size: 1.25em;
margin: 0em 0.10em;
}
/*-------------------------------------------------------- vyskakovací okno na DEMO ---- template W3scholls middle 1----------------------*/
#pokus{
cursor: pointer;
}
/* ------------------------------ img ---------------------------------------------- */
/* ---------------------------------------------------------IMG------------------------------------------------------------*/
.img_middleLeft{
width:25%;
height: auto;
margin: 0.5em;
float: left;
padding: 0.25em;
background-color: #8383837e ;
border: #818181a8 1px solid;
border-radius: 0.25em;
box-shadow: inset 2px 2px 5px;
}
.img_middleRight{
width: 25%;
height: auto;
margin: 0.5em;
float: right;
padding: 0.25em;
background-color: #8383837e ;
border: #818181a8 1px solid;
border-radius: 0.25em;
box-shadow: inset 2px 2px 5px;
}
.img_ukazka{
border: #ababab 1px solid;
border-radius: 0.25em;
box-shadow: #080808 2px 2px 5px;
}
.img_web{
width: 98%;
height: auto;
padding: 0.2em 0.25em;
}
.img_logo{ width: 6vw; height: 10.5vh;}
/* ----------------------------- Responsive layout 1700px -------------------------- */
@media (max-width: 1700px){
body{ font-size: 0.8em;}
.container_5{font-size: 0.6em;}
.middle41 { grid-area: middle41;display: flex;justify-content: space-evenly; align-items: center;flex-direction: column;}/*změníme rozložení na sloupec, aby se nám lépe přizpůsobilo menší obrazovce*/
section.cards_hidden{display: none; visibility: hidden;} /* skryjeme část karet, aby se nám lépe přizpůsobilo menší obrazovce*/
.boxMiddle41{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0.5em; width: 50vw; height: auto;}
}
/* ----------------------------- Responsive layout 1200px -------------------------- */
@media (max-width: 1200px){
body{ font-size: 0.8em;}
.container_5{font-size: 0.6em;}
.middle41 { grid-area: middle41;display: flex;justify-content: space-evenly; align-items: center;flex-direction: column;}/*změníme rozložení na sloupec, aby se nám lépe přizpůsobilo menší obrazovce*/
section.cards_hidden{display: none; visibility: hidden;} /* skryjeme část karet, aby se nám lépe přizpůsobilo menší obrazovce*/
.boxMiddle41{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0.5em; width: 50vw; height: auto;}
}
/* ----------------------------- Responsive layout 800px -------------------------- */
@media (max-width: 800px){
/* -----------------------------------container 1 -------------------------------------*/
.container_1 {
display: grid;
grid-template-areas:
'navigation navigation navigation navigation navigation navigation'
'header header header header header header'
'middle middle middle middle middle middle'
'middle1 middle1 middle1 middle1 middle1 middle1';
grid-row-gap: 0em; /* mezera mezi řádky */
grid-column-gap: 0em; /* mezera mezi column */
font-size: 0.8em;
}
/* ----------------------------------------- container_1 --------------------------*/
.container_1 article.glass{
padding: 0.2rem;
width: 98vw;
max-width: 98vw;
min-width: 80vw;
padding: 0.25em;
background: rgba(93, 93, 93, 0);
box-shadow: none;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
border:none;
padding: 0.25em;
text-align: center;
color: #fefefe;
font-family: Orbitron, sans-serif;
border: none;
}
.navigation nav{
display: flex;
justify-content: flex-end;
align-items: center;
width: 89vw;
padding: 0.1em;
min-height: 12vh;
align-self: center;
gap: 0.25em;
}
.navigation nav a{
display: flex;
justify-content: center;
align-items: center;
width: 15vw;
height: 12vh;
text-align: center;
align-self: center;
gap: 0.25em;
background: rgba(0, 0, 0, 0.3);
text-align: center;
color: #84b8c4;
font-family: Orbitron, sans-serif;
border: none;
padding: 0.1em 1em 0.2em 1.5em;
overflow: hidden;
z-index: 1;
}
.hamburger,.logo,.motto,.banner,.middle1 {display: none;visibility: hidden;width:0em ; height:0em;}
.container_2{font-size: 0.6em;}
.container_3{font-size: 0.6em;}
.container_4{font-size: 0.6em;}
.middle41 { grid-area: middle41;display: flex;justify-content: space-evenly; align-items: center;flex-direction: column;}
.boxMiddle41{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0.5em; width: 50vw; height: auto;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
margin-top: 0.25em;
}
/* -----------------------------------container 5 (4x3)-------------------------------------*/
.container_5 { width: 0;height: 0;display: none; visibility: hidden; grid-column-gap: 0em;background: none;grid-template-columns: 0 0 0 0;/* šířka sloupce */
grid-template-rows: 0 0 0
}
.box11,.box12,.box13,.box14,.box21,.box22,.box23,.box24,.box31,.box32,.box33,.box34{ padding: 0dvb;
display: none; visibility: hidden;
flex-direction: column; /* prvky pod sebe */
justify-content: center; /* vertikální zarovnání na střed */
align-items: center; /* horizontální zarovnání na střed */
padding: 0em;
}
}
/* ----------------------------------------------------- animace ------------------------------------------------ */
.tracking-in-expand {animation: tracking-in-expand 2s 1s alternate both;}/* animace trvá 2 sekundy, začne po 1 sekundě, přehraje se jednou a aplikuje se na oba směry (dopředu i dozadu) */
.tracking-in-expand_motto {animation: tracking-in-expand 5s 2s alternate both;}/* animace trvá 2 sekundy, začne po 2 sekundách, přehraje se jednou a aplikuje se na oba směry (dopředu i dozadu) */
@keyframes tracking-in-expand { 0% {letter-spacing: -0.5em;opacity: 0; } 40% {opacity: 0.6;} 100% {opacity: 1;} }
/* -------------------------------------------------------- animace slider 3 (container 6)------------------------------------*/
@keyframes slider{
0%{background-image: url(../../004_images/slider/015_white.svg);}
5%{ background-image: url(../../004_images/slider/001.svg);}
10%{background-image: url(../../004_images/slider/015_white.svg);}
15%{ background-image: url(../../004_images/slider/006.svg);}
20%{background-image: url(../../004_images/slider/015_white.svg);}
25%{background-image: url(../../004_images/slider/008.svg);}
30%{background-image: url(../../004_images/slider/015_white.svg);}
35%{background-image: url(../../004_images/slider/010.svg);}
40%{background-image: url(../../004_images/slider/015_white.svg);}
45%{background-image: url(../../004_images/slider/011.svg);}
50%{background-image: url(../../004_images/slider/015_white.svg);}
55%{background-image: url(../../004_images/slider/004.svg);}
60%{background-image: url(../../004_images/slider/015_white.svg);}
65%{background-image: url(../../004_images/slider/014.svg);}
70%{background-image: url(../../004_images/slider/015_white.svg);}
75%{background-image: url(../../004_images/slider/009.svg);}
80%{background-image: url(../../004_images/slider/015_white.svg);}
85%{background-image: url(../../004_images/slider/003.svg);}
90%{background-image: url(../../004_images/slider/017_black.svg);}
100%{background-image: url(../../004_images/slider/016_black.svg);}
}