(obal uvodnich odstavcu) dedi
padding 70px 0 od stejnojmenne sekce => nad textem i pod nim byla mezera
navic. Vnorenemu ji rusime, vnejsi sekce si svou drzi. */
.nase_nabidka_home .nase_nabidka_home{
padding: 0px;
margin-bottom: 26px;
}
/* Uvodni dva odstavce sekce "Nase nabidka" — pod sebou a na stred (bylo vedle
sebe ve dvou sloupcich 40 % + 40 %). Omezena sirka drzi radky citelne dlouhe. */
.nase_nabidka_home_in{
float: none;
display: block;
width: auto;
max-width: 900px;
margin: 0px auto 18px auto;
font-size: 20px;
line-height: 30px;
text-align: center;
}
.nase_nabidka_home_in:last-of-type{
margin-bottom: 0px;
}
/* Panely "Naše nabídka" — 6 úzkých černých panelů dle návrhu (VSP Bílina 1920/1.jpg):
ikona vlevo, text vpravo, šipka v pravém dolním rohu. Dřív to byly velké
fotografické dlaždice (fotka na pozadí + nadpis 46 px). */
.polozka_nabidka_home_1{
position: relative;
display: inline-flex; /* zvenku jako inline-block, uvnitr flex (ikona + text) */
align-items: center;
vertical-align: top;
width: 31.333%;
min-height: 172px;
margin: 11px 1% 11px 1%;
padding: 24px 70px 24px 26px; /* vpravo misto pro sipku (38 + odsazeni) */
box-sizing: border-box;
background-color: #000000;
text-align: left;
transition: background-color 0.25s;
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_nabidka_home_1_ikona{
flex: 0 0 auto;
display: block;
width: 80px;
margin-right: 22px;
}
.polozka_nabidka_home_1_ikona img,
.polozka_nabidka_home_1_ikona svg{ /* svg = inline Lucide tam, kde nemame dodanou PNG ikonu */
display: block;
width: 80px;
height: 80px;
transition: transform 0.25s;
}
/* Lucide je vektor s rovnomernou linkou — proti kreslenym PNG ikonam autiicek
pusobi tezsi a vetsi, proto o kus mensi box (stroke resi SVG samo). */
.polozka_nabidka_home_1_ikona svg.ikona_lucide{
width: 68px;
height: 68px;
}
.polozka_nabidka_home_1:hover .polozka_nabidka_home_1_ikona img,
.polozka_nabidka_home_1:hover .polozka_nabidka_home_1_ikona svg{
transform: scale(1.06);
}
.polozka_nabidka_home_1_nazev{
display: block;
}
.polozka_nabidka_home_1_nazev_in{
position: relative;
display: block;
font-size: 23px;
line-height: 31px;
color: #FFFFFF;
text-align: left;
font-family: "Corporate A";
font-weight: 500;
}
.polozka_nabidka_home_1_sipka{
/* Stejne jako vsp-autopraha, jen mensi box (48 px bylo delano pro velke
fotodlazdice 486x460; tenhle panel je 172 px vysoky). */
position: absolute;
right: 16px;
bottom: 16px;
width: 38px;
height: 38px;
border: 1px solid #FFFFFF;
z-index: 20;
background-position: center center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_prava_bila.png");
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}
.polozka_nabidka_home_1:hover .polozka_nabidka_home_1_sipka{
background-color: #FFFFFF;
background-image: url("../../img/sipka_prava.png");
}
.polozka_nabidka_home_2{
display: inline-block;
vertical-align: top;
width: 48%;
margin: 16px 1% 16px 1%;
padding: 30px 30px 30px 30px;
box-sizing: border-box;
background-color: #F3F3F3;
text-align: center;
vertical-align: top;
font-size: 0; /*skrze inline-block potomky*/
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_nabidka_home_2_obr{
display: inline-block;
vertical-align: top;
width: 48%;
height: 260px;
line-height: 260px;
margin-right: 2%;
}
.polozka_nabidka_home_2 img{
max-width: 100%;
}
.polozka_nabidka_home_2_nazev{
display: inline-block;
vertical-align: top;
width: 48%;
padding: 40px 0px 0px 0px;
text-align: center;
vertical-align: top;
}
.polozka_nabidka_home_2_nazev_in{
display: block;
font-size: 46px;
line-height: 58px;
margin: 0px 0px 14px 0px;
font-family: "Corporate A";
font-weight: 500;
}
.polozka_nabidka_home_2_popis_in{
display: block;
font-size: 16px;
line-height: 26px;
margin-bottom: 20px;
}
.polozka_nabidka_home_1_tl{
display: inline-block;
vertical-align: top;
padding: 10px 50px 10px 30px;
font-size: 18px;
line-height: 24px;
background-color: transparent;
border: 1px solid #000000;
color: #000000;
font-weight: normal;
background-position: right 30px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_prava.png");
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}
.polozka_nabidka_home_1_tl:hover{
background-color: #000000;
color: #FFFFFF;
background-image: url("../../img/sipka_prava_bila.png");
}
.polozka_clanek_cik_cak{
display: block;
padding: 26px 0px 26px 0px;
}
.polozka_clanek_cik_cak img{
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_clanek_cik_cak_table{
display: table;
width: 100%;
}
.polozka_clanek_cik_cak_tr{
display: table-row;
width: 100%;
}
.polozka_clanek_cik_cak_td{
display: table-cell;
width: 50%;
vertical-align: middle;
}
.clanek_cik_cak_td_obr{
}
.clanek_cik_cak_td_text{
padding: 40px 10% 40px 0px;
}
.cik_cak_obr_leva .clanek_cik_cak_td_text{
text-align: left;
}
.cik_cak_obr_prava .clanek_cik_cak_td_text{
text-align: right;
}
.clanek_cik_cak_td_obr_in{
position: relative;
display: block;
margin-right: 18%;
}
.polozka_clanek_cik_cak_nazev{
position: relative;
display: block;
font-size: 60px;
line-height: normal;
font-weight: 500;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 40px;
padding-bottom: 16px;
font-family: "Corporate A";
}
.linka_clanek_cik_cak_nazev{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
width: 40px;
height: 2px;
background-color: #FFFFFF;
}
.cik_cak_obr_leva .linka_clanek_cik_cak_nazev{
right: auto;
}
.cik_cak_obr_prava .linka_clanek_cik_cak_nazev{
left: auto;
}
.clanek_cik_cak_td_obr_resp{
display: none;
}
.polozka_clanek_cik_cak_text{
display: block;
font-size: 20px;
line-height: 30px;
color: #FFFFFF;
}
.polozka_clanek_cik_cak_text p{
margin: 0px;
}
.tl_cik_cak{
display: inline-block;
vertical-align: top;
padding: 10px 54px 10px 30px;
margin-top: 20px;
font-size: 18px;
line-height: 36px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
color: #000000;
font-weight: bold;
background-position: right 36px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_prava.png");
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}
.tl_cik_cak:hover{
background-color: #000000;
border: 1px solid #FFFFFF;
color: #FFFFFF;
background-image: url("../../img/sipka_prava_bila.png");
}
.polozka_kontakt_home{
float: left;
width: 48%;
margin: 0px 1% 0px 1%;
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_kontakt_home iframe{
max-width: 100%;
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_kontakt_home_text{
box-sizing: border-box;
background-color: #F3F3F3;
padding: 70px 20px 50px 20px;
text-align: center;
vertical-align: top;
}
.nadpis_kontakt_home{
position: relative;
display: block;
font-size: 40px;
line-height: normal;
font-weight: 500;
margin-bottom: 30px;
padding-bottom: 16px;
font-family: "Corporate A";
}
.linka_nadpis_kontakt_home{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
width: 40px;
height: 2px;
background-color: #000000;
}
.polozka_kontakt_home_adresa{
display: block;
font-size: 20px;
line-height: 30px;
margin-bottom: 20px;
}
.polozka_kontakt_home_in{
display: block;
}
.kontakt_home{
display: inline-block;
vertical-align: top;
padding-left: 60px;
font-size: 20px;
line-height: 42px;
font-weight: bold;
margin: 0px 10px 0px 10px;
background-position: left center;
background-repeat: no-repeat;
}
.kontakt_home:hover{
text-decoration: underline;
}
.mail_kontakt_home{
background-image: url("../../img/ikona_mail_okraj.png");
}
.tel_kontakt_home{
background-image: url("../../img/ikona_tel_okraj.png");
}
.blok_pobocky_home{
display: block;
clear: both;
padding: 90px 0px 50px 0px;
background-color: #F3F3F3;
}
.blok_pobocky_home_in{
/* Flex misto bloku s inline-block potomky — jen kvuli srovnani vysek: nadpis na dva
radky ("VSP Auto Praha Servis, a.s.") nebo dlouhy e-mail jinak natahne jen svuj panel
a rada je nezarovnana (Martin 29. 7.). Stretch drzi vsechny tri stejne vysoke. */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
clear: both;
text-align: center;
vertical-align: top;
font-size: 0; /*skrze inline-block potomky*/
}
.polozka_pobocky_home{
position: relative;
/* Flex column, aby spodni blok („_in") vyplnil zbytek vysky panelu — jinak se
absolutne pozicovane tlacitko „Vice" vaze na vysku textu a u panelu s delsim
e-mailem sedi niz nez u sousedu (Martin 29. 7.). */
display: flex;
flex-direction: column;
vertical-align: top;
width: 31.333%;
margin: 10px 1% 10px 1%;
background-color: #000000;
color: #FFFFFF;
overflow: hidden;
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_pobocky_home a:link, .polozka_pobocky_home a:visited{
color: #FFFFFF;
}
.polozka_pobocky_home a:hover{
color: #FFFFFF;
text-decoration: underline;
}
.obal_pobocky_home{
position: relative;
display: block; /* souvisi s hodnotou v tride "pomer_fotek_pobocky_home" */
overflow: hidden;
}
.obal_pobocky_home_in{
display: block;
height: 270px; /* souvisi s hodnotou v tride "pomer_fotek_pobocky_home" */
line-height: 270px;
background-color: #000000;
text-align: center;
overflow: hidden;
font-size: 0; /*tim se odstrani bug s 1px mezerou nad obrazkem*/
}
.obal_pobocky_home img{
/*max-width: 100%;
max-height: 270px;*/
width: 100%;
height: 100%;
object-fit: cover;
}
.pomer_fotek_pobocky_home{ /*pomocna trida pro pomerove zmensovani galerie v responsivite pomoci Javascriptu*/
display: none;
width: 480px; /* to je tech 20% z ".obal_pobocky_home" v zakladu (= full hd) */
height: 270px; /* to je height z ".obal_pobocky_home_in" v zakladu (= full hd) */
}
.stin_pobocky_home{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 2;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+50 */
background: linear-gradient(to bottom, transparent 0%,#000000 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.polozka_pobocky_home > a{
flex: 0 0 auto; /* fotka si drzi pomerovou vysku ze skriptu, nesmi se smrsknout */
}
.polozka_pobocky_home_in{
position: relative;
display: block;
flex: 1 1 auto; /* dotahne panel az dolu → tlacitko „Vice" sedi u vsech stejne */
padding: 0px 30px 30px 30px;
margin-top: -60px;
text-align: left;
z-index: 10;
}
.polozka_pobocky_home_nadpis{
display: block;
clear: both;
font-size: 30px;
line-height: 48px;
font-family: "Corporate A";
font-weight: 500;
margin: 0px 0px 20px 0px;
}
.polozka_pobocky_home_kontakty{
float: left;
}
.polozka_pobocky_home_tl{
float: right;
height: 46px;
line-height: 46px;
padding: 0px 48px 0px 30px;
background-color: transparent;
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 18px;
font-weight: 500;
background-position: right 26px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_bila.png");
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}
.polozka_pobocky_home_tl:hover{
background-color: #FFFFFF;
color: #000000;
background-image: url("../../img/sipka_cerna.png");
}
.polozka_kontakt_pobocky_home{
display: block;
font-size: 18px;
line-height: 24px;
padding-left: 30px;
margin: 0px 0px 8px 0px;
background-size: 16px auto;
background-position: left center;
background-repeat: no-repeat;
}
.polozka_kontakt_pobocky_home:hover{
text-decoration: underline;
}
.tel_pobocky_home{
background-image: url("../../img/ikony/ikona_tel_bila.png?v=1.0");
}
.mail_pobocky_home{
background-image: url("../../img/ikony/ikona_mail_bila.png?v=1.0");
}
.h2_nadpis_home{
position: relative;
display: block;
padding-bottom: 20px;
margin: 0px 0px 30px 0px;
font-size: 60px;
line-height: 70px;
text-transform: uppercase;
text-align: center;
vertical-align: top;
font-family: "Corporate A";
font-weight: 500;
}
.linka_h2_nadpis_home{
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
width: 40px;
height: 2px;
background-color: #000000;
}
/*--- Home (KONEC) ---*/
/*--- Vypis (START) ---*/
.obsah_vypis{
display: block;
clear: both;
padding: 80px 0px 80px 0px;
background-color: #FFFFFF;
}
.obsah_vypis_horni{
display: block;
margin-bottom: 50px;
text-align: center;
vertical-align: top;
}
.h1_vypis{
position: relative;
display: block;
padding-bottom: 20px;
margin: 0px 0px 30px 0px;
font-size: 70px;
line-height: 80px;
text-transform: uppercase;
font-family: "Corporate A";
font-weight: 500;
}
.linka_h1_vypis{
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
width: 40px;
height: 2px;
background-color: #000000;
}
.blok_text_nad_clanky{
display: block;
clear: both;
}
.obal_polozek_vypis{
display: block;
text-align: center;
vertical-align: top;
font-size: 0; /*skrze inline-block potomky*/
}
.blok_vypis_hlasky{ /* dodat font-size pokud se vypis podmenu/ vypis clanku stredi k cemuz se pouzije "font-size: 0;" tudiz bezna hlasna nejde videt */
display: block;
font-size: 16px;
line-height: normal;
text-align: center;
padding: 20px 0px 20px 0px;
}
.polozka_vypis{
position: relative;
display: inline-block;
vertical-align: top;
width: 31.333%;
margin: 10px 1% 10px 1%;
background-color: #F3F3F3;
color: #000000;
overflow: hidden;
-webkit-border-radius: var(--vsp-radius, 16px);
-moz-border-radius: var(--vsp-radius, 16px);
border-radius: var(--vsp-radius, 16px);
}
.polozka_vypis a:link, .polozka_vypis a:visited{
color: #000000;
}
.polozka_vypis a:hover{
color: #0077DF;
}
.obal_obr_vypis{
position: relative;
display: block; /* souvisi s hodnotou v tride "pomer_fotek_vypis" */
overflow: hidden;
}
.obal_obr_vypis_in{
display: block;
height: 270px; /* souvisi s hodnotou v tride "pomer_fotek_vypis" */
line-height: 270px;
background-color: #F3F3F3;
text-align: center;
overflow: hidden;
font-size: 0; /*tim se odstrani bug s 1px mezerou nad obrazkem*/
}
.obal_obr_vypis img{
/*max-width: 100%;
max-height: 270px;*/
width: 100%;
height: 100%;
object-fit: cover;
}
.pomer_fotek_vypis{ /*pomocna trida pro pomerove zmensovani galerie v responsivite pomoci Javascriptu*/
display: none;
width: 480px; /* to je tech 20% z ".obal_obr_vypis" v zakladu (= full hd) */
height: 270px; /* to je height z ".obal_obr_vypis_in" v zakladu (= full hd) */
}
.stin_vypis{
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 2;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+50 */
background: linear-gradient(to bottom, transparent 0%,#F3F3F3 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.polozka_vypis_in{
position: relative;
display: block;
padding: 30px 30px 30px 30px;
text-align: center;
z-index: 10;
}
.obal_h2_h3_vypis{
display: block;
/*height: 72px;
line-height: 36px;*/
margin-bottom: 20px;
}
.obal_h2_h3_vypis a{
color: #000000;
}
.h2_vypis{
display: block;
margin: 0px;
color: #000000;
font-size: 26px;
line-height: 36px;
height: 72px;
font-weight: bold;
overflow: hidden;
}
.h3_vypis{
display: block;
margin: 0px;
font-weight: bold;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.obal_p_vypis{
display: block;
height: 84px;
line-height: 21px;
overflow: hidden;
}
.obal_p_vypis p, .obal_p_vypis h1, .obal_p_vypis h2, .obal_p_vypis h3, .obal_p_vypis h4, .obal_p_vypis ul{
margin: 0px;
padding: 0px;
font-size: 14px;
}
.obal_p_vypis img{
display: none;
}
.tl_vypis{
display: inline-block;
vertical-align: top;
height: 46px;
line-height: 46px;
padding: 0px 48px 0px 30px;
background-color: #FFFFFF;
border: 1px solid #000000;
color: #000000;
font-size: 18px;
background-position: right 26px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_prava.png");
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}
.tl_vypis:hover{
background-color: #000000;
color: #FFFFFF;
background-image: url("../../img/sipka_prava_bila.png");
}
.kontakty_nahradni_dily{
display: block;
padding: 50px 0px 50px 0px;
margin-bottom: 50px;
text-align: center;
vertical-align: top;
background-color: #F3F3F3;
}
.polozka_kontakty_nahradni_dily{
display: inline-block;
vertical-align: top;
margin: 10px 60px 10px 60px;
text-align: left;
}
.kontakt_nahradni_dily_jmeno{
display: block;
font-size: 20px;
line-height: 34px;
height: 34px;
font-weight: bold;
margin-bottom: 5px;
}
.kontakt_nahradni_dily_pozice{
display: block;
font-size: 18px;
line-height: 26px;
height: 26px;
margin-bottom: 5px;
}
.kontakt_nahradni_dily_udaj{
display: block;
font-size: 20px;
line-height: 34px;
height: 34px;
padding-left: 34px;
margin-bottom: 5px;
background-position: left center;
background-repeat: no-repeat;
}
.nahradni_dily_tel{
background-image: url("../../img/ikona_tel.png");
}
.nahradni_dily_mail{
background-image: url("../../img/ikona_mail.png");
}
.stred_dalsi{
display: block;
text-align: center;
margin: 40px 0px 0px 0px;
}
.tl_dalsi{
display: inline-block;
font-size: 18px;
line-height: 22px;
color: #000000;
font-weight: bold;
cursor: pointer;
}
.tl_dalsi:hover{
text-decoration: underline;
}
/*--- Vypis (KONEC) ---*/
/*--- Detail/clanek (START) ---*/
.obsah_clanek_uvod{
display: block;
clear: both;
text-align: center;
vertical-align: top;
padding: 90px 0px 50px 0px;
}
/* Hlavicka podstranky s fotkou (.obsah_clanek_uvod_art) je v template/css/podstranky.css
(sekce 3) — vrstva se nacita az za timhle souborem, aby prebijela legacy. */
/* Hero CTA na podstrankach (clanek.php) — vyzva k akci dane sekce, skok na kontakty
te stranky (#kotva_vsechny_kontakty). Bile tlacitko na tmavem hero. */
.tl_hero_cta{
display: inline-block;
vertical-align: top;
margin-top: 24px;
padding: 10px 60px 10px 36px;
font-size: 18px;
line-height: 40px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
background-position: right 34px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_prava.png");
border-radius: 8px;
}
.tl_hero_cta:hover{
background-color: #000000;
color: #FFFFFF;
border: 1px solid #FFFFFF;
background-image: url("../../img/sipka_prava_bila.png");
}
/* Bez fotky je hlavicka bila => bile tlacitko by bylo neviditelne. Otacime barvy. */
.obsah_clanek_uvod:not(.obsah_clanek_uvod_art) .tl_hero_cta{
background-color: #000000;
color: #FFFFFF;
border: 1px solid #000000;
background-image: url("../../img/sipka_prava_bila.png");
}
.obsah_clanek_uvod:not(.obsah_clanek_uvod_art) .tl_hero_cta:hover{
background-color: #FFFFFF;
color: #000000;
border: 1px solid #000000;
background-image: url("../../img/sipka_prava.png");
}
/* scroll-behavior ZAMERNE neni "smooth": rolovani k patce i nahoru resi
jQuery .animate() ve funkce/skripty.js. Kdyz bezel nativni smooth scroll
soucasne s JS animaci, obe se skladaly => pohyb zacal pomalu a v pulce
zrychlil, pokazde jinak podle prohlizece. Kotvy na webu jsou jen ty dve
skriptovane, takze se timto nic neplynuleho neztrati. */
html{ scroll-behavior: auto; }
#kotva_vsechny_kontakty{ scroll-margin-top: 150px; }
.obal_h1_h2_clanek{ /* Tato trida je pouzita i u error_404 v template - tam jen zkontrolovat zda ok pripadne tam tridu zmenit */
position: relative;
display: block;
padding-bottom: 26px;
}
.linka_h1_h2_clanek{
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
width: 40px;
height: 2px;
background-color: #000000;
}
.h1_clanek{ /* Tato trida je pouzita i u error_404 v template - tam jen zkontrolovat zda ok pripadne tam tridu zmenit */
display: block;
margin: 0px;
text-transform: uppercase;
color: #000000;
font-size: 80px;
line-height: 90px;
font-weight: 500;
font-family: "Corporate A";
}
.h2_clanek{
display: block;
color: #000000;
font-size: 36px;
line-height: 46px;
font-weight: 500;
font-family: "Corporate A";
}
.obal_obr_clanek{
display: block;
clear: both;
text-align: center;
padding-bottom: 40px;
}
.obr_s_zkraceny_vypis{
margin-bottom: -140px;
}
.obal_obr_clanek img{
max-width: 100%;
/*max-width: 480px;
_width: expression(this.height < this.width && this.width > 480 ? 480 : true);*/
max-height: 750px;
}
.zkraceny_vypis{
display: block;
font-weight: 500;
padding: 60px 0px 60px 0px;
background-color: #F3F3F3;
}
.zkraceny_vypis_s_obr{
padding-top: 150px;
}
.text_detail{
display: block;
padding: 60px 0px 60px 0px;
}
.obal_fotogalerie_pomerove{
display: block;
padding: 60px 0px 60px 0px;
text-align: center;
vertical-align: top;
font-size: 0;
}
.obsah_clanek_vozy_obsah .obal_fotogalerie_pomerove{
padding: 20px 0px 20px 0px;
}
.polozka_fotogalerie_pomerove{
position: relative;
display: inline-block;
vertical-align: top;
width: 23%; /* souvisi s hodnotou v tride "pomer_fotek_v_galerii" */
margin: 1% 1% 1% 1%;
overflow: hidden;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
.galerie_sirka{
width: 48%;
}
.galerie_vyska{
float: right;
}
.polozka_fotogalerie_pomerove_in{
display: block;
height: 270px; /* souvisi s hodnotou v tride "pomer_fotek_v_galerii" */
line-height: 270px;
background-color: #DADADA;
text-align: center;
overflow: hidden;
font-size: 0; /*tim se odstrani bug s 1px mezerou nad obrazkem*/
}
.polozka_fotogalerie_pomerove img{
max-width: 100%;
/*max-width: 140px;
_width: expression(this.height < this.width && this.width > 140 ? 140 : true);*/
max-height: 270px;
}
.pomer_fotek_v_galerii{ /*pomocna trida pro pomerove zmensovani galerie v responsivite pomoci Javascriptu*/
display: none;
width: 360px; /* to je tech 20% z ".polozka_fotogalerie_pomerove" v zakladu (= full hd) */
height: 270px; /* to je height z ".polozka_fotogalerie_pomerove_in" v zakladu (= full hd) */
}
.vypln_obal_obrazkem_css{
position: relative;
text-align: center;
}
.vypln_obal_obrazkem_css img{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height: auto;
max-width: 100%;
max-height: none !important; /* skrze pripadne spojeni se skriptem na pomerove zmensovani bloku */
}
.blok_video{
display: block;
padding: 40px 0px 40px 0px;
overflow:hidden;
text-align: center;
vertical-align: top;
}
.obsah_clanek_vozy_obsah .blok_video{
text-align: left;
}
.obsah_clanek_vozy_obsah .blok_video{
padding: 20px 0px 20px 0px;
}
.obal_video iframe{
vertical-align: top;
max-width: 100%;
}
.obal_video{
display: block;
margin-top: 10px;
}
.popisek_video{
display: none;
color: #000000;
background-color: #DADADA;
padding: 10px 0px 10px 0px;
}
.nadpis_v_detail{
display: block;
margin: 0px;
padding-bottom: 16px;
color: #000000;
font-size: 36px;
line-height: 46px;
font-weight: 500;
font-family: "Corporate A";
text-align: center;
}
.blok_soubory{
display: block;
padding: 50px 0px 50px 0px;
background-color: #F3F3F3;
}
.obsah_clanek_vozy_obsah .blok_soubory{
background-color: transparent;
}
.obsah_clanek_vozy_obsah .blok_soubory{
padding: 20px 0px 20px 0px;
}
.polozka_soubor{
float: left;
width: 49%;
margin: 10px 2% 10px 0px;
background-color: #FFFFFF;
overflow: hidden;
-webkit-border-radius: 46px 46px 46px 46px;
-moz-border-radius: 46px 46px 46px 46px;
border-radius: 46px 46px 46px 46px;
}
.obsah_clanek_vozy_obsah .polozka_soubor{
width: 100%;
margin-right: 0px;
background-color: #F3F3F3;
}
.polozka_soubor_ikona{
float: left;
width: 100px;
height: 90px;
text-align: center;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-image: url("../../img/ic_download.png");
}
.polozka_soubor_in{
display: block;
padding: 15px 20px 15px 20px;
margin-left: 100px;
}
.polozka_soubor_nazev{
display: block;
font-size: 20px;
line-height: 30px;
font-weight: 500;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.polozka_soubor_typ{
display: block;
font-size: 16px;
line-height: 30px;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.polozka_soubor:hover{
opacity: 0.8;
}
/*--- Detail/clanek (KONEC) ---*/
/*--- Detail kontakty (START) ---*/
.nadpis_kontakt_detail{
margin: 50px 0px 0px 0px;
}
.polozka_kontakt_detail{
display: block;
padding-left: 36px;
height: 26px;
line-height: 26px;
margin-bottom: 10px;
font-weight: 500;
/*background-size: 16px auto;*/
background-position: left center;
background-repeat: no-repeat;
}
.tel_kontakt_detail{
background-image: url("../../img/ikony/phone.png");
}
.mail_kontakt_detail{
background-image: url("../../img/ikony/mail.png");
}
.polozka_vypis_kontakt a:link, .polozka_vypis_kontakt a:visited{
color: #000000;
text-decoration: none;
}
.polozka_vypis_kontakt a:hover{
color: #000000;
text-decoration: underline;
}
.obal_polozek_vypis_kontakt{
display: block;
text-align: left;
vertical-align: top;
font-size: 0; /*skrze inline-block potomky*/
}
.polozka_vypis_kontakt{
display: inline-block;
vertical-align: top;
width: 23%;
margin: 10px 2% 10px 0px;
}
.polozka_vypis_kontakt_in{
position: relative;
display: block;
padding: 10px 0px 10px 0px;
overflow: hidden;
}
.obal_h2_h3_vypis_kontakt{
display: block;
height: 58px;
margin-bottom: 10px;
overflow: hidden;
}
.obal_h2_h3_vypis_kontakt a{
color: #000000;
}
.h2_vypis_kontakt{
display: block;
margin: 0px;
color: #000000;
font-size: 20px;
line-height: 32px;
max-height: 32px;
font-weight: 500;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.h3_vypis_kontakt{
display: block;
margin: 0px 0px 0px 0px;
font-size: 18px;
line-height: 26px;
height: 26px;
font-weight: normal;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.obal_vypis_kontakt_hodnoty{
display: block;
height: 120px;
overflow: hidden;
}
.vypis_kontakt_mail{
display: block;
color: #000000;
font-size: 20px;
line-height: 32px;
height: 32px;
font-weight: normal;
margin-bottom: 8px;
padding-left: 30px;
background-position: left center;
background-repeat: no-repeat;
background-image: url("../../img/ikona_mail.png");
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.vypis_kontakt_tel{
display: block;
font-size: 20px;
line-height: 32px;
height: 32px;
font-weight: normal;
margin-bottom: 8px;
padding-left: 30px;
background-position: left center;
background-repeat: no-repeat;
background-image: url("../../img/ikona_tel.png");
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.vypis_kontakt_bez_obsahu{ /*kdyby kontakty mely obrazek*/
padding-left: 0px;
background-image: none;
}
/*--- Detail kontakty (KONEC) ---*/
/*--- Detail/clanek kontakt (START) ---*/
.obsah_clanek_kontakt_uvod{
display: block;
clear: both;
padding: 60px 0px 60px 0px;
background-color: #000000;
background-position: right top;
background-repeat: no-repeat;
background-image: url("../../img/obr_kontakt.png");
}
.obal_h1_h2_clanek_kontakt{ /* Tato trida je pouzita i u error_404 v template - tam jen zkontrolovat zda ok pripadne tam tridu zmenit */
position: relative;
display: block;
padding-bottom: 16px;
margin-bottom: 40px;
}
.linka_h1_h2_clanek_kontakt{
position: absolute;
left: 0px;
bottom: 0px;
width: 40px;
height: 2px;
background-color: #FFFFFF;
}
.h1_clanek_kontakt{ /* Tato trida je pouzita i u error_404 v template - tam jen zkontrolovat zda ok pripadne tam tridu zmenit */
display: block;
margin: 0px;
text-transform: uppercase;
color: #FFFFFF;
font-size: 80px;
line-height: 90px;
font-weight: 500;
font-family: "Corporate A";
}
.h2_clanek_kontakt{
display: block;
color: #FFFFFF;
font-size: 36px;
line-height: 46px;
font-weight: 500;
font-family: "Corporate A";
}
.obsah_clanek_kontakt_uvod_in{
display: block;
clear: both;
}
.polozka_hl_kontakt{
display: block;
color: #FFFFFF;
font-size: 24px;
line-height: 50px;
font-weight: 500;
padding-left: 70px;
font-weight: 500;
box-sizing: border-box;
margin: 5px 0px 5px 0px;
background-position: left center;
background-repeat: no-repeat;
}
.tel_hl_kontakt{
background-image: url("../../img/ikona_tel_okraj_bila.png");
}
.mail_hl_kontakt{
background-image: url("../../img/ikona_mail_okraj_bila.png");
}
.polozka_hl_kontakt:hover{
text-decoration: underline;
}
.obal_obr_clanek_kontakt{
display: block;
clear: both;
text-align: center;
padding: 40px 0px 40px 0px;
}
.obal_obr_clanek_kontakt img{
max-width: 100%;
/*max-width: 480px;
_width: expression(this.height < this.width && this.width > 480 ? 480 : true);*/
max-height: 750px;
}
.text_vypis_kontakt{
display: block;
clear: both;
padding: 60px 0px 60px 0px;
background-color: #F3F3F3;
}
.obal_kontakty_mapy{
display: block;
clear: both;
padding: 60px 0px 60px 0px;
}
.obal_kontakty_detail{
display: block;
padding: 60px 0px 60px 0px;
}
.zkraceny_vypis_kontakt{
float: left;
width: 34%;
margin-right: 2%;
}
.text_kontakt{
float: left;
width: 64%;
}
.blok_kontakt_mapa{
float: left;
width: 49%;
margin-right: 2%;
}
.blok_kontakt_prohlidka{
float: left;
width: 49%;
}
.blok_kontakt_mapa iframe, .blok_kontakt_prohlidka iframe{
width: 100%;
}
.h2_text_vypis_kontakt, .text_vypis_kontakt h2, .nadpis_kontakt_detail{
display: block;
margin-bottom: 16px;
font-size: 36px;
line-height: 46px;
font-family: "Corporate A";
font-weight: 500;
}
.text_vypis_kontakt table{
width: 100%;
}
.text_vypis_kontakt tr{
width: 100%;
}
.text_vypis_kontakt td{
width: 42%;
padding: 10px 8% 10px 0px;
font-size: 20px;
line-height: 32px;
vertical-align: top;
}
.tl_kotva_kontakty{
display: inline-block;
vertical-align: top;
height: 46px;
line-height: 46px;
padding: 0px 48px 0px 30px;
background-color: #FFFFFF;
border: 1px solid #000000;
color: #000000;
font-size: 18px;
font-weight: 500;
cursor: pointer;
margin-top: 20px;
background-position: right 26px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_cerna.png");
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
}
.tl_kotva_kontakty:hover{
background-color: #000000;
color: #FFFFFF;
background-image: url("../../img/sipka_bila.png");
}
.velky_nadpis_kontakt{
position: relative;
display: block;
padding-bottom: 20px;
margin-bottom: 60px;
font-size: 60px;
line-height: 70px;
font-family: "Corporate A";
font-weight: 500;
}
.linka_velky_nadpis_kontakt{
position: absolute;
left: 0px;
bottom: 0px;
width: 40px;
height: 2px;
background-color: #000000;
}
/*--- Detail/clanek kontakt (KONEC) ---*/
/*--- Formular (START) ---*/
.blok_form_home{
display: block;
clear: both;
padding: 90px 0px 90px 0px;
background-color: #000000;
background-size: 50% auto;
background-position: left top;
background-repeat: no-repeat;
background-image: url("../../img/obr_formular_stin.png");
}
.blok_form_home_in_leva{
float: left;
width: 620px;
padding-top: 140px;
}
.blok_form_home_in_prava{
float: right;
width: 620px;
}
.h2_nadpis_form{
position: relative;
display: block;
padding-bottom: 20px;
margin-bottom: 30px;
font-size: 60px;
line-height: 70px;
text-transform: uppercase;
vertical-align: top;
font-family: "Corporate A";
color: #FFFFFF;
font-weight: 500;
}
.linka_h2_nadpis_form{
position: absolute;
left: 0px;
bottom: 0px;
width: 40px;
height: 2px;
background-color: #FFFFFF;
}
.blok_form_home_text{
display: block;
font-size: 20px;
color: #FFFFFF;
line-height: 30px;
margin-bottom: 30px;
}
/*--- Formular (KONEC) ---*/
/*--- News (START) ---*/
.obal_news{
position: relative;
display: block;
}
.news_input{
float: left;
width: 100%;
height: 68px;
line-height: 60px;
padding: 4px 210px 4px 30px;
background-color: #FFFFFF;
color: #A4A4A4;
border: 0px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.news_tl{
position: absolute;
right: 4px;
top: 4px;
height: 60px;
padding: 0px 60px 0px 30px;
background-color: #000000;
color: #FFFFFF;
font-weight: 500;
border: 0px;
cursor: pointer;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
background-position: right 28px center;
background-repeat: no-repeat;
background-image: url("../../img/sipka_prava_bila.png");
}
.news_tl:hover{
opacity: 0.8;
}
.news_check{
margin-right: 6px;
}
.obal_check_news{
display: block;
clear: both;
color: #FFFFFF;
margin-top: 10px;
}
.obal_check_news a:link, .obal_check_news a:visited{
color: #FFFFFF;
text-decoration: underline;
}
.obal_check_news a:hover{
color: #FFFFFF;
text-decoration: none;
}
/*--- News (KONEC) ---*/
/*--- Efekt prechodu rozbalovaciho menu z "hamburgeru" na "krizek" a zpet (START) ---*/
.efekt_resp_menu_ikona{
float: left;
width: 40px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona span, .efekt_resp_menu_2 .efekt_resp_menu_ikona span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #FFFFFF;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona span:nth-child(1) {
top: 0px;
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona span:nth-child(2) {
top: 12px;
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona span:nth-child(3) {
top: 24px;
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona span:nth-child(4) {
display: none;
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona.open span:nth-child(1) {
top: 14px; /*o neco mene nez je polovina vysky ikony*/
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona.open span:nth-child(2) {
opacity: 0;
left: -40px; /*o sirku ikony*/
}
.efekt_resp_menu_1 .efekt_resp_menu_ikona.open span:nth-child(3) {
top: 14px; /*o neco mene nez je polovina vysky ikony*/
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona span:nth-child(1) {
top: 0px;
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona span:nth-child(2),.efekt_resp_menu_2 .efekt_resp_menu_ikona span:nth-child(3) {
top: 12px;
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona span:nth-child(4) {
top: 24px;
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona.open span:nth-child(1) {
top: 14px; /*o neco mene nez je polovina vysky ikony*/
width: 0%;
left: 50%;
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.efekt_resp_menu_2 .efekt_resp_menu_ikona.open span:nth-child(4) {
top: 14px; /*o neco mene nez je polovina vysky ikony*/
width: 0%;
left: 50%;
}
/*--- Efekt prechodu rozbalovaciho menu z "hamburgeru" na "krizek" a zpet (KONEC) ---*/
/*--- Cookies - souhlas s jejich pouzivanim (START) ---*/
.cc_container{
opacity: 0.9;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.cc_container a, .cc_container a:visited{
color: #88bf3d !important; /*barva textu "vice informaci"*/
}
.cc_container .cc_btn, .cc_container .cc_btn:visited{
color: #000000 !important; /*barva textu tlacitka "rozumim"*/
}
.cc_banner-wrapper{
z-index: 10000001 !important; /*skrze stret cookies panelu a chatu smartsupp, ktery ma z-index "z-index: 10000000"*/
}
/*--- Cookies - souhlas s jejich pouzivanim (KONEC) ---*/
/*--- Pomocne ---*/
.mr_ne{
margin-right: 0px;
}
.bb_ne{
border-bottom: 0px;
}
.vypln_obal_obrazkem{
position: relative;
}
.vypln_obal_obrazkem img{
opacity: 0;
}
.loader {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #FFFFFF;
opacity: 0.8;
background-image: url("../../img/loader_obr/loader_modra.gif");
background-position: center center;
background-repeat: no-repeat;
}
/*--- Pomocne resp ---*/
.resp_menu, .resp_plusko{
display: none;
}
/*--- Responsive design ---*/
@media only screen and (min-width: 1922px) {
.blok_sirky_webu_full_hd{
width: 1920px;
}
.uvodni_blok_home_text{
left: calc((1920px - 1520px) / 2); /* zarovnani s ostatnim obsahem webu */;
}
}
@media only screen and (max-width: 1550px) { /* 1440 - velky notebook - jedna z beznych velikosti */
.blok_sirky_webu{
width: 88%;
padding-left: 6%; /*neopomenout pro mobily jit na 8% protoze 4% jsou malo*/
padding-right: 6%; /*neopomenout pro mobily jit na 8% protoze 4% jsou malo*/
}
.logo{
font-size: 24px;
}
.polozka_menu{
padding: 10px 14px 10px 14px;
font-size: 18px;
}
.uvodni_blok_home_text{
left: 6%; /* zarovnani s ostatnim obsahem webu */;
bottom: 6%; /* stejne odsazeni zdola jako zleva */
}
.h1_home{
font-size: 50px;
line-height: 60px;
}
.polozka_nabidka_home_2_nazev_in{
font-size: 36px;
line-height: 46px;
}
.blok_form_home_in_leva{
width: 450px;
}
.h2_nadpis_form{
font-size: 40px;
line-height: 50px;
}
.polozka_pobocky_home_in{
padding: 0px 70px 30px 30px;
}
.polozka_pobocky_home_tl{
float: none;
position: absolute;
right: 10px;
bottom: 10px;
text-indent: -9999px;
padding: 0px;
background-position: center center;
width: 46px;
}
}
@media only screen and (max-width: 1400px) {
.nadpis_sloupec_paticka{
font-size: 28px;
line-height: 38px;
}
/* Pod 1400 px byl font panelu 30/40 — vetsi nez zakladnich 23/31. Legacy z dob
velkych fotodlazdic; v uzkych panelech text pretekal a rozbijel vizual (Martin 29. 7.).
Nove se s uzsim panelem font zmensuje, ne zvetsuje. */
.polozka_nabidka_home_1_nazev_in{
font-size: 22px;
line-height: 30px;
}
.polozka_kontakt_home{
float: none;
display: block;
width: auto;
}
.polozka_kontakt_home iframe{
width: 100%;
}
.polozka_kontakt_home_text{
padding: 20px 30px 20px 30px;
}
.blok_form_home_in_prava{
width: 560px;
}
.h1_clanek_kontakt{
font-size: 44px;
line-height: 54px;
}
.polozka_vypis_kontakt{
width: 31.333%;
}
/* 48 % (= 2 vedle sebe + 1 osamele pod nimi) zruseno — Martin 29. 7.: panely maji
zustat 3 v rade dokud se vejdou a pak rovnou pod sebe, nikdy 2+1. */
.logo_pata{
font-size: 20px;
line-height: 30px;
height: auto;
}
}
@media only screen and (max-width: 1310px) {
.hlavicka_in{
padding: 16px 0px 16px 0px;
}
.tl_servis_hlava, .tl_servis_hlava_resp{
height: 36px;
line-height: 36px;
padding: 0px 20px 0px 20px;
font-size: 16px;
}
/* tlacitko "Objednat na servis" v hlavicce (kdyz je zaroven hamburger) — na linku s logem */
.hlavicka_in .tl_servis_hlava{
margin-top: 7px;
}
.obsah{
margin-top: 84px; /* = vyska hlavicky (16 + logo 52 + 16); bylo 70 pro textove logo */
}
.logo{
font-size: 18px;
height: auto;
line-height: 38px;
}
.resp_menu{
display: block;
float: right;
height: 30px;
line-height: 30px;
font-weight: bold;
margin-left: 20px;
margin-top: 11px; /* burger nize proti logu v 84px hlavicce */
padding: 0px;
cursor: pointer;
}
.resp_menu_text{
display: none;
}
.resp_menu .efekt_resp_menu_ikona{
}
.horni_menu{
display: none;
float: none;
position: absolute;
right: 0px;
/* Vyska hlavicky: .hlavicka_in padding 16px + logo 52px + 16px = 84px. */
top: 84px;
width: 380px;
background-color: #000000;
overflow: auto;
z-index: 20;
text-align: center;
vertical-align: top;
}
.odsazeni_horni_menu_h{
display: block;
height: 20px;
}
.odsazeni_horni_menu_d{
display: block;
height: 20px;
}
.obal_polozky_menu{
float: none;
display: block;
padding-bottom: 0px;
}
.polozka_menu{
float: none;
display: block;
background-image: none;
padding: 5px 10px 5px 10px;
text-align: center;
vertical-align: top;
line-height: normal;
}
.obal_polozky_menu:hover .polozka_menu, .polozka_menu:hover {
color: #FFFFFF;
}
.aktivni_menu, .aktivni_menu:hover {
color: #FFFFFF;
}
}
@media only screen and (max-width: 1230px) { /*full HD tablet - vetsinou do 1280*/
/* Panely „Nase nabidka" maji zustat 3 v rade co nejdele — proto se od 1230 px
zmensi ikona a odsazeni, aby na text zbylo dost mista (nejdelsi slovo
„Mercedes-Benz" potrebuje 115 px). Pod 1010 px uz to nevychazi → pod sebe. */
.polozka_nabidka_home_1{
min-height: 150px;
padding: 20px 58px 20px 20px;
}
.polozka_nabidka_home_1_ikona{
width: 56px;
margin-right: 16px;
}
.polozka_nabidka_home_1_ikona img,
.polozka_nabidka_home_1_ikona svg{
width: 56px;
height: 56px;
}
.polozka_nabidka_home_1_ikona svg.ikona_lucide{
width: 48px;
height: 48px;
}
.blok_pobocky_home{
padding: 40px 0px 40px 0px;
}
.nase_nabidka_home, .blok_clanky_home, .blok_kontakt_home, .paticka_in_h, .obsah_vypis, .kontakty_nahradni_dily, .text_detail, .blok_soubory, .obal_kontakty_detail, .obal_kontakty_mapy, .text_vypis_kontakt, .blok_news_home{
padding: 40px 0px 40px 0px;
}
.obsah_clanek_uvod{
padding: 60px 0px 40px 0px;
}
.h2_home{
font-size: 40px;
line-height: 50px;
}
.sloupec_paticka{
width: 46%;
margin: 10px 2% 10px 0px;
}
.spacer_sloupec_pata_po_2{
display: block;
clear: both;
}
.polozka_nabidka_home_2_nazev{
padding-top: 0px;
}
.polozka_nabidka_home_2_obr{
height: 180px;
line-height: 180px;
}
.polozka_nabidka_home_2_obr img{
max-height: 180px;
}
.polozka_clanek_cik_cak_nazev{
font-size: 36px;
}
.clanek_cik_cak_td_text{
padding: 20px 10% 20px 0px;
}
.h1_clanek{
font-size: 50px;
line-height: 60px;
}
.h2_clanek, .nadpis_v_detail{
font-size: 30px;
line-height: 40px;
}
.blok_form_home_in_prava{
float: none;
width: auto;
display: block;
}
.h2_text_vypis_kontakt, .text_vypis_kontakt h2, .nadpis_kontakt_detail{
font-size: 24px;
line-height: 34px;
}
.velky_nadpis_kontakt{
font-size: 36px;
line-height: 46px;
}
.h2_nadpis_home{
font-size: 40px;
line-height: 50px;
padding-bottom: 12px;
}
}
@media only screen and (max-width: 1160px) { /*tablet - vetsinou do 1024*/
.polozka_nabidka_home_2{
display: block;
margin-right: 0px;
width: auto;
}
.polozka_vypis{
width: 48%;
}
.obsah_clanek_kontakt_uvod{
background-size: cover;
}
.zkraceny_vypis_kontakt{
width: 48%;
}
.text_kontakt{
width: 50%;
}
.text_kontakt table{
display: block;
}
.text_kontakt tr, .text_kontakt td{
display: block;
width: 100%;
}
.blok_news_home_in{
float: none;
display: block;
clear: both;
padding-right: 0px;
padding-top: 60px;
width: auto;
}
.polozka_pobocky_home_nadpis{
font-size: 28px;
line-height: 42px;
min-height: 84px;
}
}
@media only screen and (max-width: 1010px) {
td img{ /* v zakladu to rusim, ale pro mensi zarizeni je potreba tech 100% jinak i na mobilu ma tabulka klidne 800px sirku a jd eji videt jen pulka a nejde se k ni posunout */
max-width: 100%;
}
.blok_sirky_webu_uzky{
width: 88%;
padding-left: 6%; /*neopomenout pro mobily jit na 8% protoze 4% jsou malo*/
padding-right: 6%; /*neopomenout pro mobily jit na 8% protoze 4% jsou malo*/
}
.uvodni_blok_home_text{
bottom: 40px;
}
.h1_home{
font-size: 32px;
line-height: 42px;
}
.polozka_nabidka_home_1_nazev_in{
font-size: 22px;
line-height: 32px;
}
/* Panely pod sebou uz od 1010 px (drive az od 860). Ve trech v rade zbyva pod 1010 px
na text jen ~46 px — dlouhe slovo ("Mercedes-Benz") pak vytece z panelu ven.
Prahovou hodnotu drzi sirka ikony (80 px) + misto na sipku vpravo. */
.polozka_nabidka_home_1{
width: 100%;
min-height: 0px;
margin: 8px 0px 8px 0px;
padding: 18px 66px 18px 22px;
}
.polozka_nabidka_home_1_sipka{
top: 50%;
bottom: auto;
margin-top: -19px;
}
/* Panely „dalsi spolecnosti": pod 1010 px se tri v rade uz nevejdou (nadpis se lame
pres fotku, telefon se trha) → rovnou pod sebe na celou sirku, nikdy 2+1.
Aby pruh nebyl robustni, fotka dostane nizsi pomer — JS si ho cte z
„.pomer_fotek_pobocky_home" (480x270 = 16:9 → 480x170) — a nadpis mensi stupen. */
.polozka_pobocky_home{
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.pomer_fotek_pobocky_home{
width: 480px;
height: 140px;
}
.polozka_pobocky_home_nadpis{
font-size: 26px;
line-height: 38px;
min-height: 0px;
margin-bottom: 14px;
}
.polozka_pobocky_home_in{
padding: 0px 24px 24px 24px;
margin-top: -50px;
}
.h1_vypis{
font-size: 40px;
line-height: 50px;
}
.polozka_soubor{
width: 100%;
margin-right: 0px;
}
.polozka_vypis_kontakt{
width: 48%;
}
.nase_nabidka_home_in{
display: block;
float: none;
width: auto;
max-width: none;
margin-right: 0;
font-size: 18px;
line-height: 26px;
}
.polozka_kontakt_pobocky_home{
font-size: 16px;
}
}
@media only screen and (max-width: 860px) {
/* Panely na uzkem displeji pod sebou, na celou sirku. Ikona zustava —
u fotografickych dlazdic se skryvala, tady nese vyznam. */
.polozka_nabidka_home_1{
width: 100%;
min-height: 0px;
margin: 8px 0px 8px 0px;
padding: 18px 56px 18px 18px;
}
.polozka_nabidka_home_1_ikona{
width: 56px;
margin-right: 16px;
}
.polozka_nabidka_home_1_ikona img,
.polozka_nabidka_home_1_ikona svg{
width: 56px;
height: 56px;
}
.polozka_nabidka_home_1_ikona svg.ikona_lucide{
width: 48px;
height: 48px;
}
.polozka_nabidka_home_1_sipka{
top: 50%;
bottom: auto;
margin-top: -19px;
}
.polozka_clanek_cik_cak{
padding: 10px 0px 10px 0px;
}
.polozka_clanek_cik_cak_table, .polozka_clanek_cik_cak_tr{
display: block;
}
.polozka_clanek_cik_cak_tr{
display: block;
width: auto;
}
.clanek_cik_cak_td_obr{
display: none;
}
.clanek_cik_cak_td_obr_resp{
display: block;
margin-bottom: 20px;
}
.clanek_cik_cak_td_obr_resp img{
max-height: 300px;
}
.cik_cak_obr_prava .clanek_cik_cak_td_text{
text-align: left;
}
.cik_cak_obr_prava .linka_clanek_cik_cak_nazev{
left: 0px;
right: auto;
}
.nadpis_kontakt_home{
font-size: 30px;
}
.polozka_kontakt_home iframe{
height: 180px;
}
.kontakt_home{
margin: 10px 10px 10px 10px;
font-size: 16px;
}
.h1_clanek{
font-size: 36px;
line-height: 46px;
}
.h2_clanek, .nadpis_v_detail{
font-size: 24px;
line-height: 34px;
}
.polozka_fotogalerie_pomerove{
width: 31.333%;
}
.obsah_clanek_kontakt_uvod{
padding: 40px 0px 40px 0px;
}
.zkraceny_vypis_kontakt, .text_kontakt, .blok_kontakt_mapa, .blok_kontakt_prohlidka{
float: none;
width: 100%;
margin: 10px 0px 10px 0px;
}
.blok_kontakt_mapa iframe, .blok_kontakt_prohlidka iframe{
width: 100%;
height: 200px;
}
.polozka_vypis_kontakt{
width: 100%;
margin-right: 0px;
}
.polozka_pobocky_home {
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.polozka_pobocky_home_nadpis{
min-height: 1px;
}
.h2_nadpis_home{
font-size: 26px;
line-height: 36px;
}
}
@media only screen and (max-width: 650px) { /*mobil - na sirku*/
.horni_menu{
width: 100%;
}
/* Hero HP na mobilu — vlastni fotka na vysku (941x1672) pres
v home.php. Zobrazuje se v prirozenem pomeru, jen s omezenim vysky,
aby hero nezabral cely displej. (Prevzato z vsp-autopraha.) */
.uvodni_blok_home img{
width: 100%;
height: auto;
max-height: 72vh;
object-fit: cover;
object-position: center 42%;
}
.uvodni_blok_home picture{
display: block;
font-size: 0;
}
.uvodni_blok_home::after{
display: none; /* gradient je jen pro text pres fotku, na mobilu je text pod ni */
}
.zlom_h1_home{
display: none; /* tvrde zlomy nadpisu jsou jen pro sirokou fotku */
}
.tl_servis_hlava{
display: none;
}
.tl_servis_hlava_resp{
display: inline-block;
float: none;
margin-top: 10px;
margin-left: 0px;
}
.uvodni_blok_home_text{
position: relative;
left: auto;
bottom: auto;
background-color: #000000;
padding: 40px 6% 40px 6%;
text-align: center;
vertical-align: top;
width: auto;
}
.polozka_nabidka_home_2_popis_in, .polozka_nabidka_home_1_tl{
display: none;
}
.polozka_nabidka_home_2_obr{
display: block;
float: left;
width: 100px;
height: 60px;
line-height: 60px;
margin-right: 0px;
}
.polozka_nabidka_home_2_obr img{
max-height: 60px;
}
.polozka_nabidka_home_2_nazev_in{
line-height: 60px;
margin-bottom: 0px;
font-size: 26px;
}
.polozka_nabidka_home_2_nazev{
display: block;
width: auto;
margin-left: 140px;
text-align: left;
}
.polozka_kontakty_nahradni_dily{
text-align: center;
display: block;
margin: 10px 0px 10px 0px;
}
.kontakt_nahradni_dily_pozice{
height: auto;
}
.kontakt_nahradni_dily_udaj{
display: inline-block;
height: auto;
vertical-align: top;
margin: 4px 10px 4px 10px;
font-size: 16px;
}
.h1_vypis{
font-size: 32px;
line-height: 42px;
}
.polozka_vypis{
width: 100%;
margin: 10px 0px 10px 0px;
}
.h2_vypis{
height: auto;
font-size: 20px;
line-height: 32px;
}
.polozka_soubor_ikona{
width: 70px;
height: 80px;
background-size: auto 40px;
}
.polozka_soubor_in{
margin-left: 70px;
padding: 10px 16px 10px 16px;
}
.polozka_soubor_nazev{
font-size: 16px;
}
.news_input{
padding-right: 30px;
}
.news_tl{
position: relative;
right: auto;
top: auto;
display: block;
width: 100%;
border: 1px solid #FFFFFF;
}
}
@media only screen and (max-width: 550px) { /*mobil - na vysku*/
.h1_home {
font-size: 26px;
line-height: 36px;
}
.sloupec_paticka{
width: 100%;
margin-right: 0px;
text-align: center;
vertical-align: top;
}
.paticka_in_d{
text-align: center;
vertical-align: top;
}
.copyright_pata{
float: none;
display: block;
text-align: center;
vertical-align: top;
}
.mcrai_pata{
float: none;
display: inline-block;
vertical-align: top;
margin-top: 10px;
}
.linka_sloupec_paticka{
right: 0px;
left: 0px;
margin: auto;
}
.soc_site_pata{
text-align: center;
}
.polozka_sloupec_pata{
padding-left: 0px;
background-image: none;
}
.logo_pata{
text-align: center;
}
.polozka_clanek_cik_cak_nazev{
font-size: 28px;
}
.kontakt_home{
display: block;
margin: 10px 0px 10px 0px;
font-size: 14px;
padding-left: 48px;
}
.polozka_fotogalerie_pomerove{
width: 48%;
}
.blok_form_home_in_leva{
padding-top: 20px;
width: auto;
float: none;
display: block;
}
.form_blok{
width: 100%;
margin-right: 0px;
}
.obal_tlacitka_formulare{
float: none;
display: block;
clear: both;
text-align: left;
margin-bottom: 16px;
}
}
@media only screen and (max-width: 460px) {
.polozka_nabidka_home_2{
padding: 16px 16px 16px 16px;
}
.polozka_nabidka_home_2_nazev{
margin-left: 110px;
}
.polozka_nabidka_home_2_nazev_in{
font-size: 20px;
}
}
/*--- Responsive design - help z Stackoverflow ---*/
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
@media print {
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
} /*tiskni i obrazky v pozadi + barvy pozadi*/
.no-print, .hlavicka, .paticka{
display: none !important;
}
.blok_sirky_webu{
width: 100%;
}
.pagebreak{ /* toto pred danym blokem to ukonci stranku */
page-break-before: always;
}
}