/* Same typeface as the redesigned main site (self-hosted Inter variable font, weights 400-800 in one file per unicode range) - replaces the old licensed Niveau Grotesk so the configurator reads as part of the same site instead of a bolted-on tool. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("./fonts/inter/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("./fonts/inter/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus {outline: 0;} /* remember to define focus styles! */ body {line-height: 1; color: black; background: white;} ol {list-style: none;} table {border-collapse: separate; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */ caption, th, td {text-align: left;font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} * { box-sizing: border-box;} /* reset end */ html {min-height:100%;} body {font-family: Inter, Helvetica, sans-serif; font-size: 0.75em; position: relative; background: #f6f8fb; padding-bottom:80px;} /* 75.3% puvodni font size; padding-bottom leaves room for the fixed price bar so it never covers the footer */ a {text-decoration: none;} a:hover {text-decoration: none;} p, ol, dl, address, blockquote {margin-bottom: 0.5em;} dl, ol {margin-top: 0.5em} dl, ol {margin-top: 0.5em} ol {list-style-type: decimal;margin-left:20px;} .hidden {position: absolute; top: -1024px;} strong {font-weight: bold;} /* clear */ .clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear {display: inline-block;} /* Hide from IE Mac \*/ .clear {display: block;} * html .clear {height: 1px;} /* End hide from IE Mac */ @media screen and (prefers-color-scheme: light) { body { background-color: #f6f8fb; color: black; } } /* Konfigurator elements */ .hlx { padding: 4px; background: #FFFFFF; border-bottom: #DDDDFF 1px solid;} #usrnnm_log_lbl { position:absolute; left:30px; width:100px; color:#123a8a; padding:6px; font-size:16px; font-weight:bold; text-align:right; } #usrnnm_log { position:absolute; left:150px; width:190px; color:#123a8a; padding:6px; font-size:15px; font-weight:bold; text-align:left; border:0px;} #hslk_log_lbl { position:absolute; left:30px; width:100px; color:#123a8a; ; padding:6px; font-size:16px; font-weight:bold; text-align:right; } #hslk_log { position:absolute; left:150px; width:190px; color:#123a8a; ; padding:6px;font-size:15px; font-weight:bold; text-align:left; border:0px;} #login2_log { position:absolute; left:200px; left:220px; width:120px; color:#444444; padding:6px;font-size:13px; font-weight:bold; border:0px; } .cont { position:relative; border:0px solid; height:30px;} /* stiny */ .stin0 {-moz-box-shadow: 0px 0px 1px 0px rgba(44,44,44,0.85); -webkit-box-shadow: 0px 0px 1px 0px rgba(44,44,44,0.85); box-shadow: 0px 0px 1px 0px rgba(44,44,44,0.85);} .stin1 {-moz-box-shadow: 0px 0px 2px 0px rgba(44,44,44,0.85); -webkit-box-shadow: 0px 0px 2px 0px rgba(44,44,44,0.85); box-shadow: 0px 0px 2px 0px rgba(44,44,44,0.85);} .stin2 {-moz-box-shadow: 0px 0px 3px 0px rgba(44,44,44,0.85); -webkit-box-shadow: 0px 0px 3px 0px rgba(44,44,44,0.85); box-shadow: 0px 0px 3px 0px rgba(44,44,44,0.85);} .stin3 {-moz-box-shadow: 0px 0px 4px 0px rgba(44,44,44,0.85); -webkit-box-shadow: 0px 0px 4px 0px rgba(44,44,44,0.85); box-shadow: 0px 0px 4px 0px rgba(44,44,44,0.85);} .stin4 {-moz-box-shadow: 0px 0px 5px 0px rgba(44,44,44,0.85); -webkit-box-shadow: 0px 0px 5px 0px rgba(44,44,44,0.85); box-shadow: 0px 0px 5px 0px rgba(44,44,44,0.85);} .stin5 {-moz-box-shadow: 0px 0px 6px 0px rgba(44,44,44,0.85); -webkit-box-shadow: 0px 0px 6px 0px rgba(44,44,44,0.85); box-shadow: 0px 0px 6px 0px rgba(44,44,44,0.85);} .gstin0 {-moz-box-shadow: 0px 0px 1px 0px rgba(0,106,38,1); -webkit-box-shadow: 0px 0px 1px 0px rgba(0,106,38,1); box-shadow: 0px 0px 1px 0px rgba(0,106,38,1); } /*background: rgba(255,255,255,1) url('../grafika/success.svg') no-repeat !important; background-position: top 0px right 5px !important; background-size: 20px 100% !important; */ .gstin1 {-moz-box-shadow: 0px 0px 2px 0px rgba(0,106,38,1); -webkit-box-shadow: 0px 0px 2px 0px rgba(0,106,38,1); box-shadow: 0px 0px 2px 0px rgba(0,106,38,1); } /*background: rgba(255,255,255,1) url('../grafika/success.svg') no-repeat !important; background-position: top 0px right 5px !important; background-size: 20px 100% !important; */ .gstin2 {-moz-box-shadow: 0px 0px 3px 0px rgba(0,106,38,1); -webkit-box-shadow: 0px 0px 3px 0px rgba(0,106,38,1); box-shadow: 0px 0px 3px 0px rgba(0,106,38,1); } /*background: rgba(255,255,255,1) url('../grafika/success.svg') no-repeat !important; background-position: top 0px right 5px !important; background-size: 20px 100% !important; */ .gstin3 {-moz-box-shadow: 0px 0px 4px 0px rgba(0,106,38,1); -webkit-box-shadow: 0px 0px 4px 0px rgba(0,106,38,1); box-shadow: 0px 0px 4px 0px rgba(0,106,38,1); } /*background: rgba(255,255,255,1) url('../grafika/success.svg') no-repeat !important; background-position: top 0px right 5px !important; background-size: 20px 100% !important; */ .gstin4 {-moz-box-shadow: 0px 0px 5px 0px rgba(0,106,38,1); -webkit-box-shadow: 0px 0px 5px 0px rgba(0,106,38,1); box-shadow: 0px 0px 5px 0px rgba(0,106,38,1); } /*background: rgba(255,255,255,1) url('../grafika/success.svg') no-repeat !important; background-position: top 0px right 5px !important; background-size: 20px 100% !important; */ .gstin5 {-moz-box-shadow: 0px 0px 6px 0px rgba(0,106,38,1); -webkit-box-shadow: 0px 0px 6px 0px rgba(0,106,38,1); box-shadow: 0px 0px 6px 0px rgba(0,106,38,1); } /*background: rgba(255,255,255,1) url('../grafika/success.svg') no-repeat !important; background-position: top 0px right 5px !important; background-size: 20px 100% !important; */ .rstin0 {-moz-box-shadow: 0px 0px 1px 0px rgba(200,0,0,1); -webkit-box-shadow: 0px 0px 1px 0px rgba(200,0,0,1); box-shadow: 0px 0px 1px 0px rgba(200,0,0,1);} .rstin1 {-moz-box-shadow: 0px 0px 2px 0px rgba(200,0,0,1); -webkit-box-shadow: 0px 0px 2px 0px rgba(200,0,0,1); box-shadow: 0px 0px 2px 0px rgba(200,0,0,1);} .rstin2 {-moz-box-shadow: 0px 0px 3px 0px rgba(200,0,0,1); -webkit-box-shadow: 0px 0px 3px 0px rgba(200,0,0,1); box-shadow: 0px 0px 3px 0px rgba(200,0,0,1);} .rstin3 {-moz-box-shadow: 0px 0px 4px 0px rgba(200,0,0,1); -webkit-box-shadow: 0px 0px 4px 0px rgba(200,0,0,1); box-shadow: 0px 0px 4px 0px rgba(200,0,0,1);} .rstin4 {-moz-box-shadow: 0px 0px 5px 0px rgba(200,0,0,1); -webkit-box-shadow: 0px 0px 5px 0px rgba(200,0,0,1); box-shadow: 0px 0px 5px 0px rgba(200,0,0,1);} .rstin5 {-moz-box-shadow: 0px 0px 6px 0px rgba(200,0,0,1); -webkit-box-shadow: 0px 0px 6px 0px rgba(200,0,0,1); box-shadow: 0px 0px 6px 0px rgba(200,0,0,1);} /* zakulaceni */ .zakulaceni1 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px; } .zakulaceni2 { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius:6px; } .zakulaceni3 { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; } .zakulaceni4 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px; } .zakulaceni5 { -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius:14px; } .chybka { background: rgba(255,242,242,0.4) ; } .errcpt { flex:0; position:unset !important; color:#AA0000 ; font-size:11px; font-weight:bold; line-height:12px; vertical-align:middle; text-overflow: ellipsis; padding:5px 2px; overflow:hidden; } /* fade-in used by anything that only appears once conditions are met (selected-product card, price bar) so it doesn't just snap into place */ @keyframes konffadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } /* uvodni hero */ .konfhero { text-align:center; padding:36px 20px 8px; } .konfheroeyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:#ff6a00; margin-bottom:10px; } .konfherotitle { font-size:clamp(22px,3.2vw,32px); font-weight:800; color:#0d1b2e; line-height:1.25; letter-spacing:-0.01em; margin-bottom:10px; } .konfherotext { font-size:14px; font-weight:400; color:#3c4759; line-height:1.6; max-width:560px; margin:0 auto; } /* krokovnik (stepper) */ .konfsteps { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; margin:20px 10px 14px; flex-wrap:wrap; } .konfstep { display:flex; flex-direction:row; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:#FFFFFF; box-shadow:0 1px 2px rgba(13,27,46,0.06); opacity:0.55; transition:opacity .2s ease; } .konfstep.is-active { opacity:1; } .konfstepnum { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#e3e7ee; color:#3c4759; font-size:12px; font-weight:700; } .konfstep.is-active .konfstepnum { background:#1e56c9; color:#FFFFFF; } .konfstep.is-done .konfstepnum { background:#ff6a00; color:#FFFFFF; } .konfsteplabel { font-size:12.5px; font-weight:600; color:#3c4759; letter-spacing:0.2px; } .konfstep.is-active .konfsteplabel { color:#0d1b2e; } /* hlavicka */ .hlavicka { position:relative; display:grid; gap:30px; grid-template-columns: 1fr 1fr ; border:0px solid; box-shadow:0 1px 2px rgba(13,27,46,0.06), 0 4px 12px rgba(13,27,46,0.05); border-radius:14px; background:#FFFFFF; margin:10px; padding:30px 20px; } .hlavicka .leftlogo { height:70px; width:auto; background:url('../grafika/lamplastlogo.png') no-repeat; background-position:10% 50%; background-size:contain; border:0px solid; margin:0px; } .hlavicka .rightcontact { display:flex; flex-direction:row; color:#1e56c9; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: flex-start; width:100%; border:0px solid; } .rightcontact .rightcontacticotel { flex:0; margin-right:20px; color:#1e56c9; } .hlavicka .rightsideinfo {flex:1; display:flex; flex-direction:column; flex-wrap: nowrap; align-content: flex-start; justify-content: center; align-items: center; text-align: left; } .rightsideinfo .nadpisitem { flex:0; width:100%; line-height:22px; font-weight:bold; font-size:16px; } .rightsideinfo .valueitem { flex:0; width:100%; line-height:20px; font-weight:bold; font-size:12px; } .telo { background:transparent; position:relative; border-left:#EEEEEE 0px solid; border-right:#EEEEEE 0px solid; min-height:400px;} @media only screen and (min-width: 480px) { } @media only screen and (min-width: 780px) { .hlavicka { position:relative; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr ; gap:2px; } } @media only screen and (min-width: 1024px) { .hlavicka { position:relative; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr ; } } @media only screen and (min-width: 1200px) { } /* paticka */ /* Solid ink background instead of the old photo backdrop (which tiled/ cropped oddly at different widths) - same dark footer treatment as the main site, so this reads as the same site rather than a bolted-on tool. */ .paticka { position:relative; display:grid; gap:30px; grid-template-columns: 1fr 1fr ; margin-bottom:0px; padding:56px 20px 32px; background:#0d1b2e; letter-spacing:0.3px; border-radius:14px 14px 0 0; } .pataitemcont { width:100%; display:flex; flex-direction:column; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: flex-start; } .pataitemnadpis { flex: 0; width: 100%; text-align: left; padding: 0px; color: #FFFFFF; font-size: 13px; font-weight: 700; text-transform:uppercase; letter-spacing:0.11em; margin-bottom: 14px;} .pataitempol { flex:0; width:100%; text-align:left; padding:0px; margin-bottom:10px; color:rgba(255,255,255,0.72); font-size:13.5px; font-weight:400; line-height:1.6; } .pipb { font-size:15px; font-weight:600; color:#FFFFFF; margin-bottom:12px; } .pataitemodk { text-decoration:none; color:rgba(255,255,255,0.72); transition:color .15s ease; } .pataitemodk:hover { color:#FFFFFF; text-decoration:underline; } .pataitemlogo { width:50%; height:auto; margin-top:20px; opacity:0.9; } .pcopyright { position:relative; padding: 18px 20px; background:#0d1b2e; border-top:1px solid rgba(255,255,255,0.12); } .pcopyrightodk { text-decoration:none; color:rgba(255,255,255,0.55); font-size:13px; } .pcopyrightodk:hover { color:rgba(255,255,255,0.85); } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 780px) { .paticka {grid-template-columns: 1fr 1fr 1fr 1fr ; } } @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 1200px) { } /* vyber produktu */ .vybercont , .sumarcont, .specifikacecont, .kontaktcont { display:flex; position:relative; border:0px solid; background:#FFFFFF; box-shadow:0 1px 2px rgba(13,27,46,0.06), 0 4px 12px rgba(13,27,46,0.05); border-radius:14px; margin:10px 10px 20px 10px; padding: 24px 20px; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: stretch;} /* sumarcont only exists in the DOM once there's something to price, so it never needs to transition out - just a gentle entrance. */ .sumarcont { animation:konffadein .25s ease-out; } .radek { flex:0; border:0px solid; text-align:left; } .nadpis { font-size:18px; border-radius:10px; line-height:24px; letter-spacing:1px; padding:10px 10px 10px 15px; margin:0px 10px; font-weight:bold; color: #FFFFFF; background: #1e56c9; } .vyberproduktu { display:grid; gap:30px; grid-template-columns: 1fr ; padding:20px; background:#FFFFFF ; } .produktcont { width:100%; min-height:100px; position:relative; height:100%; background:#FFFFFF; border: #1e56c9 2px solid; padding:0px; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(13,27,46,0.06); transition:transform .15s ease, box-shadow .15s ease;} .produktcont:hover { border: #1e56c9 3px solid; background:#FEFEFE; transform:translateY(-3px); box-shadow:0 8px 20px rgba(13,27,46,0.12); } .produktselected { border: #ff6a00 2px solid !important; background:#fff4ec !important; } .produktselected:hover { border: #ff6a00 3px solid !important; } .produktodk { text-decoration:none; } .produktitem { display:flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; margin:0px; padding:0px; width:100%; height:100%; } /* Uniform light backdrop behind every product photo - the source photos have different crops/backgrounds, this makes them read as one consistent set. The 1:1 ratio now lives on the picture area only, since the card itself grew taller to fit the description and "Vybrat" button below it. */ .produktpictcont { flex:0 0 auto; aspect-ratio:1/1; width:100%; display:flex; flex-direction:column; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; background:#f6f8fb; padding:12px; } .produktnazev { flex: 0; width:100%; font-size: 16px; letter-spacing:1px; line-height: 20px; font-weight: bold; text-align: center; text-decoration:none; transition: .3s ease-out; color: #FFFFFF; background: #1e56c9; padding:15px 10px;} .produktpict { flex: 0; max-width:90%; max-height:90%; width:auto; height:auto; object-fit:contain; transition: .3s ease-out; } .produktstitek { flex:0 0 auto; width:calc(100% - 24px); box-sizing:border-box; margin:14px 12px 14px 12px; padding:9px 10px; border-radius:8px; text-align:center; font-size:13px; font-weight:700; letter-spacing:0.3px; color:#1e56c9; background:#e8f0fd; transition:.15s ease; } .produktodk:hover .produktstitek { background:#1e56c9; color:#FFFFFF; } .produktstitek-vybrano { color:#FFFFFF; background:#ff6a00; } .produktselected .produktnazev { background:#ff6a00; } /* Pinned to the top of the viewport once it appears (right after a product is picked), so the choice stays visible while scrolling on into the specification and contact steps below. */ .vybranyprodukt { display:flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; border:0px solid; border-left:#ff6a00 5px solid; background:#FFFFFF; box-shadow:0 4px 16px rgba(13,27,46,0.12); border-radius:12px; margin:10px 10px 20px 10px; position:sticky; top:10px; z-index:40; animation:konffadein .25s ease-out; } .vybranyprodukttitle { flex:0 0 auto; text-align:left; line-height:16px; font-size:11px; padding:16px 0px 16px 16px; color:#8a94a6; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; } .vybranyproduktpopis { flex:1; width:100%; display:flex; flex-direction: column; background: transparent; color:#0d1b2e; padding:10px 16px; } .vybranyproduktpopisnazev { flex:1; font-weight:700; text-align:left; line-height:22px; font-size:16px; letter-spacing:0.2px; padding:2px 0px;} .vybranyproduktpopistext { flex:1; text-align:left; font-weight:400; line-height: 18px; letter-spacing:0.2px; font-size:12.5px; color:#3c4759; padding:2px 0px; } .clearallbox { display:flex; flex-direction:row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center; margin:40px 10px 20px 10px; } .clearall { padding:15px 30px; background:#ff6a00; font-size:18px; font-weight:bold; color:#FFFFFF; border-radius:10px; } .cenaks { color:#FFFFFF; background:#ff6a00;; padding:3px 5px; font-family:verdana;} /* Compact bar pinned to the bottom of the screen once a price exists, so the running total stays visible while filling in the contact form further down - same figure the full breakdown below already shows, just always in view. */ .konfpricebar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; background:#0d1b2e; color:#FFFFFF; padding:14px 20px; box-shadow:0 -4px 16px rgba(13,27,46,0.18); animation:konffadein .25s ease-out; } .konfpricebarlabel { font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.65); } .konfpricebarval { font-size:19px; font-weight:800; color:#ff6a00; white-space:nowrap; } .konfpricebardph { font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.6); } .sumar { display:grid; gap:3px; grid-template-columns: 1fr 1fr 1fr ; text-align:right; font-size:18px; font-weight:700; margin-bottom:50px;} .sumarpopis { color:#1e56c9; padding:10px;} .sumarcenabezdph, .sumarcenavcetnedph { color:#123a8a; padding:10px 5px; vertical-align:middle; white-space:nowrap; display: flex ; flex-direction: column; justify-content: center; } .htxt { border-bottom:#123a8a 1px solid; padding: 10px 5px; color:#666666; white-space:nowrap; } .sumarcelkpopis { color:#ff6a00; padding: 5px ; } .sumarcelkcenabezdph, .sumarcelkcenavcetnedph { background:#ff6a00;color:#FFFFFF; padding: 5px ; white-space:nowrap; display: flex ; flex-direction: column; justify-content: center; } .gridmezera { height:5px; border-top:#123a8a 1px solid; } @media only screen and (min-width: 480px) { .vyberproduktu {grid-template-columns: 1fr 1fr ;} } @media only screen and (min-width: 780px) { .vybercont , .sumarcont, .specifikacecont { padding: 20px 10px; } .vyberproduktu {grid-template-columns: 1fr 1fr 1fr 1fr ;} } @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 1200px) { } /* specifikace*/ .obsahsekce { flex:1; display:flex; flex-direction:column; margin:10px; padding:10px;} .obsahsl1 { flex:1; border-bottom: #1e56c9 1px solid; display:flex; flex-direction:column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: flex-start; padding:10px; } .obsahsl1 form { flex:0; display:flex; flex-direction:column; border:0px solid; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; padding:10px; margin-bottom:20px;} .obsahsl1 form label { flex:0; font-size:14px; font-weight:500; letter-spacing:1px; color:#1e56c9; margin:5px 2px; } .obsahsl1 form select { flex:0; border: #1e56c9 1px solid; padding:8px 10px; color:#1e56c9; font-weight:700; font-size:18px; letter-spacing:1px; width: 100%; border-radius:8px; } .obsahsl1 form select option { background:#FFFFFF; } .obsahsl1one { border:0px solid !important; align-items: center !important;} .bgrndg { background:rgba(0,106,38,0.05) !important; } .svetlost, .kopuletext3, .kopuletext, .presklenitext { flex:0; padding:7px 0px; font-size:15px; line-height:20px; font-weight:500; letter-spacing:1px; color:#1e56c9; } .obsahsl2 { flex:1; min-width:250px; display:flex; flex-direction:column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; padding:10px;} .obsahpictcont { flex:0; aspect-ratio:1/1; width:90%; padding:10px; display:flex; flex-direction:column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; padding:10px; border:0px solid;} .obsahpict { flex:0; width: 100%; height:auto;} .obsahfotogcont { flex:0; width:90%; margin:10px 0px; padding:10px 5px; display:flex; flex-direction:row; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: center; background:#f6f8fb} .obsahfoto { flex:0; margin:6px; width:65px; max-height:54px; height:auto; cursor:pointer;} .obsahcenacont { flex:0; width:100%; margin:30px 10px 10px 10px; padding:10px; letter-spacing:1px; display:flex; flex-direction:column; flex-wrap: nowrap; justify-content: center; align-items: center; border-top: #1e56c9 1px solid; } .cenatit { flex:0; width:100%; padding:10px; text-align:left; font-size:16px; color:#1e56c9; } .cenaval { flex:0; width:100%; padding:20px; text-align:center; color:#ff6a00 ; font-size:30px; font-weight:900;} .cenabezdph { flex:0; width:100%; padding:0px; font-weight:300; text-align:center; color:#1e56c9 ;} @media only screen and (min-width: 480px) { } @media only screen and (min-width: 600px) { .obsahsekce { flex-direction:row; } .obsahsl1 { flex:1; border-bottom:0px solid; border-right: #1e56c9 1px solid;} .obsahsl2 { flex:0.5; } .obsahsl1 form select { min-width:280px;} } @media only screen and (min-width: 1024px) { .obsahsl1 form select { min-width:360px;} } @media only screen and (min-width: 1200px) { } /* prislusenstvi */ .obsahnoticka {flex:0; width:100%; line-height:15px; color:#0d1b2e; background:#f6f8fb; font-weight:300; font-size:15px; padding:8px 20px; letter-spacing:1px; margin-bottom:30px; } .prislusenstvicont { flex:0; width:100%; display:grid; margin-right:10px; grid-template-columns: 7fr 2fr 2fr ; } .prislusenstvipopis { padding:5px; text-align:left; border-bottom:#e3e7ee 1px dotted; font-size:15px; line-height:20px; color:#1e56c9;} .prislusenstvicena { padding:5px; text-align:right; border-bottom:#e3e7ee 1px dotted; font-size:15px; font-weight:bold; line-height:20px; color:#123a8a; white-space: nowrap;} .prislusenstvivyber { padding:5px; text-align:right; border-bottom:#e3e7ee 1px dotted; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: flex-end;} .butvyber { text-decoration:none; background:#123a8a; color:#FFFFFF; font-weight:500; letter-spacing:1px; font-size:12px; padding:5px 10px; margin-right:5px; border-radius:8px; } .butodeber { text-decoration:none; background:#FFD700; color:#880000; font-weight:500; letter-spacing:1px; font-size:12px; padding:5px 10px; margin-right:5px; border-radius:8px; } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 780px) { } @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 1200px) { } /* kontakt */ .kontaktcont { background:#e8f0fd;} .obsahslkontakt,.hlaseni { display:flex; flex-direction:column; border-radius:14px; border:0px solid; background:#FFFFFF; box-shadow:0 1px 2px rgba(13,27,46,0.06), 0 4px 12px rgba(13,27,46,0.05); flex-wrap: nowrap; align-content: center; justify-content: center; align-items: flex-start; margin:10px; padding:40px; letter-spacing:1px; } .obsahslkontakt form { flex:0; width: 100%; display:flex; flex-direction:column; border:0px solid; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; padding:0px; margin-bottom:20px;} .obsahslkontakt form label { flex:0; font-size:14px; font-weight:500; letter-spacing:1px; color:#1e56c9; margin:20px 2px 5px 2px; } .obsahslkontakt form label:first-child {margin-top:0px;} .obsahslkontakt form input, .obsahslkontakt form textarea { flex:0; border: #e3e7ee 2px solid; background:#f6f8fb; transition:border-color .15s ease; padding:9px 12px; color:#222222; font-weight:500; font-size:16px; letter-spacing:0.3px; width: 100%; border-radius:8px; } .obsahslkontakt form input:focus, .obsahslkontakt form textarea:focus { border-color:#1e56c9; background:#FFFFFF; } .obsahslkontakt form textarea { min-height:200px; } .obsahslkontaktsubmit { flex:0; padding:10px 30px !important; margin:30px 0px 0px 0px !important; font-weight:bold !important; font-size:18px !important; color:#FFFFFF !important; background:#2e8b57 !important; border:0px !important; cursor:pointer !important; text-align:right !important; width:auto !important; border-radius:10px !important; } .formsekce { flex:0; width:100%; margin:40px 0px 0px 0px; text-align:center; border-top:#e3e7ee 2px solid; } .formsekcecaptcha {flex:0; width:100%; padding:40px 0px; text-align:left; } .mensipole { } .malepole { width:50% !important; } .hlaseni { border:#4caf50 2px solid !important; background:#4caf50 !important; margin:20px; } .pryc { flex:0; color:#FFFFFF; width:100%; text-align:right; padding:0px; cursor:pointer; } .hlasenimsg, .hlasenimsg2 { flex:0; width:100%; padding:20px ; font-size:16px; font-weight:500; line-height:25px; color:#FFFFFF; } .hlasenimsg2 { font-size:25px; padding:0px 20px ; line-height:35px; font-weight:700; } .cptchlab { line-height:30px; color:#1e56c9; font-size:11px; } .cptchpict { position:relative; margin:5px 0px;} .cptchnew { background:#1e56c9; color:#FFFFFF; font-size:11px; font-weight:bold; line-height:30px; padding:5px 20px; border-radius:8px; } @media only screen and (min-width: 480px) { .mensipole { width:70% !important; } .malepole { width:30% !important; } } @media only screen and (min-width: 780px) { .mensipole { width:60% !important; } .malepole { width:25% !important; } .kontaktcont {padding: 20px 10px;} } @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 1200px) { }