/** * Swiper 12.0.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 18, 2025 */ :root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); /* @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400,800&display=swap&subset=latin-ext'); // Regular + Extra Bold @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300,700&display=swap&subset=latin-ext'); // Light + Bold @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400,700&display=swap&subset=latin-ext'); // Regular + Bold // : Use a unique and descriptive class name // : Use a value from 100 to 1000 .dm-sans-regular { font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .dm-sans-medium { font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } .geologica- { font-family: "Geologica", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-variation-settings: "slnt" 0, // Slant/sklon (slnt): Upraví styl ze svislého na šikmý, typografům známý také jako "šikmý" styl. Zřídka může šikmý styl fungovat i v opačném směru, což se nazývá "zpětný šikmý" nebo "obrácený šikmý" styl. "CRSV" 0, // Cursive/Kurzíva (CRSV) Ovládání nahrazování kurzivních tvarů podél šikmé osy. Hodnota "Off" (0) zachovává tvary římských písmen, jako je dvoupatrové a a g, hodnota "Auto" (0,5) umožňuje nahrazení kurzívy a hodnota "On" (1) potvrzuje kurzivní tvary i ve vzpřímeném textu se sklonem 0. "SHRP" 0; // Sharpness/Ostrost (SHRP): Upravuje tvary od hranatých nebo tupých výchozích tvarů (0 %) ke stále ostřejším tvarům (až do 100 %). } */ * { margin: 0 auto; padding: 0; border: none; box-sizing: border-box; position: relative; } :root { --area-width: 100%; --area-margin: 0px auto; /* Logo colors - RGB */ --color-black-hex: #000000; --color-black: rgba(0,0,0,1); --color-black-75: rgba(0,0,0,.75); --color-black-50: rgba(0,0,0,.5); --color-black-25: rgba(0,0,0,.25); --color-blueberry-hex: #433b48; --color-blueberry: rgba(67,59,72,1); --color-blueberry-75: rgba(67,59,72,.75); --color-blueberry-50: rgba(67,59,72,.5); --color-blueberry-25: rgba(67,59,72,.25); --color-blueberry-15: rgba(67,59,72,.15); --color-blueberry-05: rgba(67,59,72,.05); --color-vermilion-hex: #e73e1b; --color-vermilion: rgba(231,62,27,1); --color-vermilion-75: rgba(231,62,27,.75); --color-vermilion-50: rgba(231,62,27,.5); --color-vermilion-25: rgba(231,62,27,.25); --color-yellow-hex: #f2b708; --color-yellow: rgba(242,183,8,1); --color-yellow-75: rgba(242,183,8,.75); --color-yellow-50: rgba(242,183,8,.5); --color-yellow-25: rgba(242,183,8,.25); --color-white-hex: #ffffff; --color-white: rgba(255,255,255,1); --color-white-75: rgba(255,255,255,.75); --color-white-60: rgba(255,255,255,.6); --color-white-50: rgba(255,255,255,.5); --color-white-25: rgba(255,255,255,.25); --color-winered: #98234f; --color-darkblue: #140f2c; --color-violet: #98234F; --color-lightgray: #f3f3f4; --color-gray: #c6c5cc; --color-text: var(--color-darkblue); --color-link: #c40009; --content-width: 100%; --max-footer-width: 1500px; --cms-right-img-width: 450px; --text-area-max-width: 900px; --font-family: 'DM Sans', Arial, sans-seif; --map-height-ratio: calc(1200/800); --logos-animation-duration: 60s; // --data-hero-img-src: attr(data-hero-img-src); } html { overflow-x: hidden; overflow-y: scroll; } body { text-align: center; font-family: var(--font-family); font-optical-sizing: auto; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--color-text); } #area { width: var(--area-width); margin: var(--area-margin); } #go2top { position: fixed; bottom: 50px; right: 0px; width: 40px; height: 40px; background: var(--color-winered) url('/img/arrow-up-white.svg') no-repeat 50% 50%; background-size: 18px 18px; // border: solid #ffffff 5px; // border-right: none; // -moz-box-shadow: 3px 0px 6px 0px #888888; // box-shadow: 3px 0px 6px 0px #888888; // background-color: #d72233; border-radius: 20px 0px 0px 20px; cursor: pointer; z-index: 999999999999; display: none; } header, main, section, footer { position: relative; width: 100%; } main > div { width: var(--content-width); margin: 0 auto; } section > div { width: var(--content-width); margin: 0 auto; text-align: center; } #topline { text-align: left; padding: 30px 25px; min-height: calc(2 * 30px + 40px); } #topline > div { } .show-search { position: absolute; display: block; top: -5px; right: 140px; width: 50px; height: 50px; background: var(--color-lightgray) url('/img/magnifier.svg') no-repeat 43% 50%; background-size: 70%; border-radius: 50%; z-index: 99999; } #show-search { display: none; } #show-search:checked ~ .show-search { background: var(--color-lightgray) url('/img/close.svg') no-repeat 50% 50%; } #searchTop > form { display: none; position: absolute; width: 100vw; top: 70px; left: -25px; padding: 10px 25px 35px 25px; background-color: var(--color-white); z-index: 110; } #searchTop > form > input[type=search] { min-width: 300px; width: 100%; } #today_open_to { display: none; align-items: center; float: right; margin: 0 30px 0 0; padding: 12px 0; font-size: 18px; line-height: 26px; } #stores_map_icon { position: relative; display: inline-block; float: right; top: -5px; right: 70px; width: 50px; height: 50px; background: var(--color-blueberry) url(/img/centre-map-icon.svg) no-repeat 50% 50%; background-size: 75%; border-radius: 50%; } #stores_map_btn { display: none; float: right; top: -2px; } #languages-box { position: relative; display: none; float: left; margin: 3px 0 0 80px; width: 95px; height: 44px; font-weight: 600; font-size: 14px; line-height: 44px; } #languages-box > div:first-child { float: left; margin: 0 0 0 18px; font-weight: 600; } #languages-box > div:nth-child(2) { position: absolute; right: 18px; font-weight: 600; } #languages-box input { opacity: 0; width: 0; height: 0; } @media only screen and (min-width: 950px) { #languages-box { display: block; display: none; } } .slider { position: absolute; cursor: pointer; display: flex; align-items: center; font-size: 14px; line-height: 36px; top: 0; left: 0; right: 0; bottom: 0; border: solid #ccc 1px; border-radius: 44px; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; width: 44px; height: 36px; left: 4px; // right: 30px; // bottom: 3px; background-color: var(--color-blueberry); color: var(--color-white); border-radius: 36px; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { // background-color: red; } input:checked + .slider:before { content:"CZ"; } input:not(:checked) + .slider:before { content:"EN"; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:not(:checked) + .slider:before { -webkit-transform: translateX(41px); -ms-transform: translateX(41px); transform: translateX(41px); } .hero-image { // background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(var(--data-hero-img-src)); // background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(attr(data-hero-img-src url)); min-height: 480px; height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .hero-image > div { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .hero-image > div button { border: none; outline: 0; display: inline-block; padding: 10px 25px; color: black; background-color: #ddd; text-align: center; cursor: pointer; } .hero-image > div button:hover { background-color: #555; color: white; } #scrolldown { display: inline-block; position: absolute; left: calc(((100% - 1200px) / 2) + 40px); // left: 0px; bottom: 0px; width: 40px; height: 40px; background-color: var(--color-white); border-radius: 20px 20px 0px 0px; z-index: 20; cursor: pointer; } #scrolldown > div { position: relative; width: 36px; height: 36px; border-radius: 18px; top: 2px; background: var(--color-blueberry) url(/img/arrow-down-white.svg) no-repeat 50% 50%; } #bluebar { width: 100%; height: 75px; background-color: var(--color-darkblue); padding: 20px 0px; text-align: right; } #search-icon { position: absolute; display: block; top: 15px; left: 55px; width: 50px; height: 50px; background: transparent url('/img/icon-search.svg') no-repeat 50% 50%; background-size: 60%; z-index: 99999; } #logo { display: inline-block; width: 120px; height: 40px; background: transparent url('/img/santovka-logo-dark.svg') no-repeat 50% 50%; background-size: 100%; float: left; } #img-head { width: 100%; height: calc(100vw/(1920/250)*1.5); overflow: hidden; } #img-head > div, #img-head > a { display: block; width: 100%; height: 100%; background-size: cover; -webkit-animation: head-bg 20s ease-in-out infinite; -moz-animation: head-bg 20s ease-in-out infinite; -o-animation: head-bg 20s ease-in-out infinite; animation: head-bg 20s ease-in-out infinite; } @keyframes head-bg { 0% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } 100% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } } #content { padding: 20px 0; } #content > div { width: var(--content-width); padding: 0px 20px; text-align: left; } #content p { margin: 0 0 10px 0; } #border { display: none; } h1, .h1 { margin: 0 0 30px 0; font-size: 40px; line-height: 48px; font-weight: 500; text-align: center; } h2, .h2 { margin: 80px 0 30px 0; font-size: 32px; line-height: 40px; font-weight: 500; text-align: center; } h3, .h3 { margin: 10px 0 20px 0; font-size: 24px; font-weight: 500; line-height: 32px; } h4, .h4 { margin: 10px 0 20px 0; font-size: 24px; font-weight: 500; line-height: 32px; } ul, ol { margin: 0 0 15px 0; padding: 0 0 0 20px; } li { padding: 0 0 0 10px; } li::marker { display: inline-block; vertical-align: middle; height: 100%; } .pdf-list { list-style-type: none; padding: 0 0 0 0; } a { color: var(--color-text); text-decoration: underline; } a:hover { text-decoration: none; } a > span.fas.fa-phone { padding-left: 10px; } a > span.fas:not(span.fas.fa-phone) { padding-right: 10px; } sup { font-size: 75%; } .nobr { white-space: nowrap; } span.icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin-right: 10px; } span.icon.phone { background: transparent url('/img/icon-phone.svg') 50% 50%/100% no-repeat; } span.icon.map-marker { background: transparent url('/img/icon-map-marker.svg') 50% 50%/100% no-repeat; } span.icon.envelope { background: transparent url('/img/icon-envelope.svg') 50% 50%/100% no-repeat; } span.icon.download { background: transparent url('/img/icon-download-white.svg') 50% 50%/100% no-repeat; } input[type=text], input[type=email], input[type=search], textarea { padding: 12px 15px; background-color: var(--color-lightgray); height: 50px; border-radius: 50px; font-size: 18px; line-height: 26px; font-weight: 400; } ::placeholder { color: var(--color-gray); font-family: var(--font-family); } input[type=search] { min-width: 500px; height: 50px; background-image: url("/img/magnifier.svg"); background-repeat: no-repeat; background-position: 15px 50%; padding: 12px 15px 12px 50px; } input[type=search]::placeholder { // left: 50px; } .center { text-align: center; } .left { text-align: left; } .right { text-align: right; } .fleft { float: left; } .fright { float: right; } .underline { text-decoration: underline; } .width50 { width: 50%; } .h30px { height: 30px; } .ptop10 { padding-top: 10px!important; } .ptop20 { padding-top: 20px!important; } .ptop30 { padding-top: 30px!important; } .p30 { padding: 30px 0!important; } .p50 { padding: 50px 0!important; } .p60 { padding: 60px 0!important; } .mtop20 { margin-top: 20px!important; } .mtop30 { margin-top: 30px!important; } .mtop50 { margin-top: 50px!important; } .mtop60 { margin-top: 60px!important; } .mtop70 { margin-top: 70px!important; } .mtop150 { margin-top: 150px!important; } .mbot30 { margin-bottom: 30px!important; } .mbot60 { margin-bottom: 60px!important; } .m30px { margin: 15px 30px!important; } .lh150 { line-height: 150%; } .maxh30 { max-height: 30px; } .inline { display: inline-block; } .lower_roman { list-style-type: lower-roman; } .lower_alpha { list-style-type: lower-alpha; } .square { list-style-type: square; } .circle { list-style-type: circle; } .disc { list-style-type: disc; } .nowrap { white-space: nowrap; } .hidden { display: none; visibility: hidden; } .async-hide { opacity: 0 !important; } .back { display: block; text-align: right; top: -10px; } .button { display: inline-block; padding: 15px 24px; border-radius: 16px; font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s ease-out; } .button.blue { background-color: var(--color-blueberry); color: var(--color-white); } .button.winered { background-color: var(--color-winered)!important; color: var(--color-white)!important; } a[href$=".pdf"], .pdf { display: inline-block; background: transparent url(/img/pdf.svg) no-repeat; background-position: 0% 4px; padding: 1px 0px 1px 25px; text-decoration: none; } a[href$=".zip"], .zip { display: inline-block; background: transparent url(/img/zip.svg) no-repeat; background-position: 0% 4px; background-size: 18px; padding: 1px 0px 1px 25px; text-decoration: none; } a[href$=".eps"], .eps { display: inline-block; background: transparent url(/img/eps.svg) no-repeat; background-position: 0% 4px; background-size: 17px; padding: 1px 0px 1px 25px; text-decoration: none; } a[href$=".xls"], a[href$=".xlsx"], .xls, .xlsx { display: inline-block; background: transparent url(/img/xls.svg) no-repeat; background-position: 0% 4px; padding: 1px 0px 1px 25px; text-decoration: none; background-size: 6%; } a[href$=".doc"], a[href$=".docx"], .doc, .docx { display: inline-block; background: transparent url(/img/doc.svg) no-repeat; background-position: 0% 4px; padding: 1px 0px 1px 25px; text-decoration: none; background-size: 7%; } a.no-icon { background: none; padding: 0; text-decoration: underline; } a.no-icon:hover { text-decoration: none; } #for-download a { text-decoration: underline; } #for-download a:hover { text-decoration: none; } .bold { font-weight: 700; } .italic { font-style: italic; } .red { color: var(--color-logo-red)!important; } .violet { color: var(--color-violet)!important; } .winered { color: var(--color-winered)!important; } .note { font-size: 14px; line-height: 20px; opacity: 0.6; } /* .yellow { color: var(--color-logo-yellow); } .blue { color: var(--color-logo-blue); } .green { color: var(--color-logo-green); } .lightgreen { color: var(--color-logo-lightgreen); } .pink { color: var(--color-pink); } */ #program { padding: 40px 0 0 0; } .program-item { padding: 0 0 25px 0; border-bottom: dotted var(--color-border) 1px; } .programImg { font-size: 0px; line-height: 100%; float: right; margin: 0 0 10px 20px; z-index: 5; } .programImg:hover { box-shadow: 0px 2px 20px var(--color-lightgray); } .tickets { display: inline-block; padding: 10px 15px 8px 15px; line-height: 100%; letter-spacing: 1px; font-weight: bold; color: var(--color-white); background-color: var(--color-link); text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: background-color 0.3s; } .tickets:hover { background-color: var(--color-black); } #part-logo-yellow, #part-logo-red, #part-logo-green, #part-logo-orange-blue { display: none; } /***** Search - START *****/ #searchMain { // text-align: center; } #searchMain > form { max-width: 500px; margin: 0 auto; } #searchMain > form > input[type=search] { min-width: 200px; width: 100%; } #searchResults { max-width: 900px; // margin: 0 auto; } #searchResults > p { opacity: 0.5; } #searchResults > div { border-bottom: solid var(--color-blueberry-15) 1px; padding: 30px 10px; /* clear: both; margin: 0px -20px; padding: 20px 20px; background-color: transparent; border-radius: 2px; */ } #searchResults > div:first-of-type { margin-top: 30px; border-top: solid var(--color-blueberry-15) 1px; } #searchResults > div:hover { background-color: var(--color-blueberry-05); // box-shadow: 0 5px 6px -6px #333333; } #searchResults > div > div { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--color-winered); } #searchResults > div > a { font-size: 18px; line-height: 26px; } #searchResults > div > p { // font-size: 14px; margin: 15px 0 10px 0; opacity: 0.5; // color: #888888; } #searchResults > div span { display: block; line-height: 100%; letter-spacing: 0.1px; padding: 5px 5px; font-size: 11px; font-weight: 700; float: right; color: #ffffff; // text-shadow: 1px 1px 1px #727272; /*box-shadow: 0 5px 6px -6px #333333;*/ border-radius: 2px; } #searchResults > div span.obchody, .search_item span.stores { background-color: #74c043; } #searchResults > div span.akce, .search_item span.events { background-color: #fbad1e; } #searchResults > div span.web { background-color: #4f91cd; background-image: none; } /***** Search - END *****/ #magazine-offer > div { width: var(--content-width); margin: 0px auto -20px auto; padding: 40px 40px; height: 300px; overflow: hidden; background-color: #e7f8ff; text-align: center; } #magazine-offer > div > img:first-child { position: absolute; top: 40px; right: 60px; -ms-transform: rotate(6deg); /* IE 9 */ -webkit-transform: rotate(6deg); /* Safari 3-8 */ transform: rotate(6deg); } #magazine-offer > div > img { position: absolute; top: 0px; right: -20px; height: 100%; width: auto; } #magazine-offer > div > div { display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #magazine-offer > div > h2 { display: none; margin: 0; text-transform: uppercase; font-size: 1.4em; font-weight: 700; letter-spacing: 1px; } #magazine-offer > div > span { display: none; color: var(--color-pink); } #magazine-offer > div > p { display: none; margin-top: 20px; } #magazine-offer > div > a { position: relative; margin: 180px 0 0 0; background: var(--color-pink); color: var(--color-white); text-decoration: none; padding: 12px 30px 10px 30px; line-height: 140%; } #magazine-offer > div > a:hover { background-color: var(--color-black); } #magazine-offer > div > a > span { top: -3px; } #newsletter, #newsletter2 { // width: var(--content-width); padding: 0 20px; text-align: center; } #newsletter > form { width: var(--content-width); padding: 60px 30px; margin: 60px auto; background: #8a399e; background-image: linear-gradient(150deg, #8a399e, #4f1962); border-radius: 16px; color: var(--color-white); } /* #newsletter > form::before { position: absolute; content: ""; rotate: 25deg; opacity: 0.3; top: -25%; left: -25%; width: 150%; height: 150%; background-image: url("/img/palacpardubice-line-thin.svg"); background-repeat: no-repeat; background-size: 100%; background-position: 0% 80%; } */ #newsletter > form > h2, #newsletter2 > form > h2 { font-size: 28px; font-weight: 500; line-height: 36px; margin: 0 0 30px 0; } #newsletter > form > p, #newsletter2 > form > p { font-size: 18px; font-weight: 400; line-height: 26px; padding: 0 0 30px 0; } #newsletter > form > input[type|=email] { width: 100%; max-width: 350px; border-radius: 50px; background-color: var(--color-white-25); padding: 15px 30px; margin: 0 0 15px 0; } #newsletter2 > form > input[type|=email] { width: 100%; max-width: 350px; height: 50px; padding: 12px 15px 12px 15px; margin: 30px 0 15px 0; background-color: var(--color-lightgray); border-radius: 50px; font-size: 18px; line-height: 26px; font-weight: 400; text-align: center; } #newsletter2 > form > input[type|=email] { // width: 80%; } #newsletter > form > input[type|=email]::placeholder, #newsletter2 > form > input[type|=email]::placeholder { font-size: 16px; line-height: 24px; font-weight: 400; } #newsletter > form > input[type|=submit], #newsletter2 > form > input[type|=submit] { display: inline-block; width: 100%; max-width: 350px; padding: 15px 24px; border-radius: 50px; font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; cursor: pointer; background-color: var(--color-blueberry); color: var(--color-white); margin: 0 0 15px 0; transition: all 0.3s ease-out; } #newsletter > form > input[type|=submit]:hover, #newsletter2 > form > input[type|=submit]:hover { background-color: var(--color-black); } #newsletter_finish { margin: 0 0 50px 0; } #newsletter_finish input[type=email] { width: 80%; margin: 0 0 10px 0; } #newsletter_finish input[type=submit] { padding: 13px 35px; background-color: var(--color-pink); color: #ffffff; font-size: 14px; } #newsletter_finish div, .myEmail { padding: 15px 0; font-size: 20px; font-weight: 700; color: var(--color-winered); } #newsletter_finish #agreement { top: 2px; } #get-app, #get-voucher { margin: 80px 0 0 0; padding: 0 20px; } #get-app img, #get-voucher img { width: 100%; max-width: 330px; height: auto; border-radius: 16px; } b, strong, .bold { font-weight: 700; } .clear { clear: both; } .clearleft { clear: left; } .clearright { clear: right; } .upper { text-transform: uppercase; } .hide { display: none!important; } .hide-cat { display: none!important; } .vtop { vertical-align: top; } .top0 { top: 0px!important; } .top5 { top: 5px!important; } .top10 { top: 10px!important; } .mtop40 { margin-top: 40px; } .lpad20 { padding-left: 20px; } .part { height: 0px; border-bottom: dotted var(--color-border) 1px; padding: 0 0 50px 0; margin: 0 0 50px 0; } .red { color: var(--color-logo-red); } .underline { text-decoration: underline!important; } #cms { max-width: var(--text-area-max-width); margin: 0 auto; text-align: center; } @media only screen and (min-width: 800px) { #cms .slim { max-width: 700px; margin: 0 auto 50px auto; } } .hideblock { text-align: left; padding: 50px 0 35px 0; border-bottom: solid #e3dde8 1px; } .hideblock:first-of-type { border-top: solid #e3dde8 1px; } p[data-for^=p-], #cms table.except th[data-for^=tb-] { font-size: 20px; line-height: 28px; cursor: pointer; padding: 0 20px 0 0; } p[data-for^=p-].openp, #cms table.except th[data-for^=tb-].openp { color: var(--color-winered); } p[data-for^=p-]::before, #cms table.except th[data-for^=tb-]::before { content: ""; position: absolute; width: 22px; height: 22px; top: 0%; right: 0%; z-index: -1; background: transparent url(/img/arrow-winered.svg) no-repeat 50% 50%; background-size: cover; transform: rotate(0deg); transition: all 0.5s ease-out; } p[data-for^=p-].openp::before, #cms table.except th[data-for^=tb-].openp::before { background: transparent url(/img/close-winered.svg) no-repeat 50% 50%; background-size: cover; color: var(--color-winered); } #cms table.except tbody[id^=tb-] { display: none; } #cms table.except td[colspan=3] { padding: 0; } #cms > #opening-hours { display: flex; flex-flow: row wrap; align-content: flex-start; } #cms > #opening-hours > div { display: flex; flex-flow: column nowrap; align-content: center; justify-content: center; background-position: 50% 50%; background-size: cover; color: var(--color-white); -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; min-height: 150px; margin: 5px 0; border-radius: 16px; } #cms > #opening-hours > div#galerie { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/galerie.jpg"); } #cms > #opening-hours > div#obchody { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/obchody.jpg"); } #cms > #opening-hours > div#foodcourt { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/foodcourt.jpg"); } #cms > #opening-hours > div#cinemacity { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/cinemacity.jpg"); } #cms > #opening-hours > div#tesco { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/tesco.jpg"); } #cms > #opening-hours > div#svatky { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/palac-pardubice.jpg"); } #cms > #opening-hours > div h3, #cms > #departments > div h3 { font-size: 24px; line-height: 32px; margin: 0 0 10px 0; } #cms > #opening-hours > div a { color: var(--color-white); } .job p[data-for^=p-] { padding: 0 0 0 160px; } .job p[data-for^=p-] a { position: absolute; display: inline-block; top: -38px; left: 0; pointer-events: none; } .job p[data-for^=p-].openp a { pointer-events: auto; } div[id^=p-] { margin-top: 40px!important; display: none; } @media only screen and (min-width: 800px) { div[id^=p-] { margin-right: 15%; } } #cms ol, #cms ul { width: auto; text-align: left; } #cms-img, #cms-img-l, .sustain-img { display: inline-block; position: relative; width: 100%; max-width: calc(100vw - 20px); margin: 0 0 20px 0; float: none; z-index: 5; box-shadow: none; } #cms-img:hover, #cms-img-l:hover { // box-shadow: 0px 10px 30px grey; } #cms-img > img, #cms-img-l > img, .sustain-img > img { width: 100%; height: auto; } #cms img { border-radius: 16px; // margin: 5px; } #cms #lease img { border-radius: 0px; // margin: 5px; } #cms .dual-img img, #cms .dual-img iframe { width: 100%; max-width: 420px; margin: 10px 0 0 0; } @media only screen and (min-width: 900px) { #cms .dual-img img, #cms .dual-img iframe { margin: 10px 10px; } } #cms iframe { width: 100%; height: calc((100vw - 20px) / 16 * 9); } #cms table { width: 100%; } #cms table th { white-space: nowrap; display: block; } #cms table th + td { display: block; } #cms table.except { width: 100%; border-collapse: collapse; border: none; text-align: left; } #cms table.except tr th { font-size: 20px; padding: 0 0 10px 0; margin: 20px 0 0 0; display: table-cell; white-space: initial; vertical-align: top; } #cms table.except tr td { vertical-align: top; } #lease > a { display: block; text-align: center; margin: 0 0 15px 0; } #lease > h2 { font-size: 24px; } #lease > table, #lease > div > div > table { display: block; } #lease > table tr, #lease > div > div > table tr { display: block; } #lease > table th, #lease > div > div > table th { display: inline-block; } #lease > table td, #lease > div > div > table td { display: block; } #lease > table td:first-child { display: inline-block; } #lease th, #lease td { padding: 2px 5px; } .job { max-width: 900px; padding: 30px 0; border-top: dotted var(--color-border) 1px; } .job > p:first-child { padding: 30px 0; font-weight: 700; text-align: center; } .job > h2 { margin: 0 0 30px 0; } .job > a { display: block; text-align: center; margin: 0 0 30px 0; } .jobpromo { padding: 50px 0 0 0; text-align: center; border-top: dotted var(--color-border) 1px; } .jobpromo img { max-width: 100%; } #jobsAtMallContent { width: 100%; border: 0; } #magazin { width: var(--content-width); margin: 0px auto 20px auto; display: -webkit-flex; -webkit-flex-flow: row nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; } #magazin > a { display: inline-block; -webkit-flex: 0 0 100%; /* Safari 6.1+ */ -moz-flex: 0 0 100%; /* Firefox 18+ */ -ms-flex: 0 0 100%; /* IE 10 */ flex: 0 0 100%; text-decoration: none; box-shadow: none; text-align: center; background: none; padding: 20px; transition: all 0.3s ease-out; } #magazin > a:hover { // box-shadow: 0px 10px 30px grey; } #magazin > a > h2 { font-size: 24px; margin: 0px 0 20px 0; } #magazin > a > h2::first-letter { text-transform: uppercase; } #magazin > a > img { width: 100%; height: auto; border-radius: 16px; } #magazin > a > div { background-color: var(--color-violet); color: var(--color-white); padding: 10px; transition: all 0.3s ease-out; border-radius: 16px; } #magazin > a:hover > div { background-color: var(--color-black); } #magazin > a > div > span { top: -3px; } //#fe546e #press_menu > div { width: 100%; } #pressMsg { max-width: var(--text-area-max-width); margin: 0 auto; } #pressMsg a { text-decoration: underline; } #pressMsg a:hover { text-decoration: none; } #pressMsg a[href="javascript:history.back()"] { color: var(--color-violet); font-weight: 500; } #press > h2 { margin: 80px 0 50px 0; } #press > div { padding: 30px 30px 30px 0; border-bottom: solid #e3dde8 1px; } #press > div:first-of-type { border-top: solid #e3dde8 1px; } #press > div > a { text-decoration: none; font-size: 24px; line-height: 32px; font-weight: 500; } #press > div > a:hover { text-decoration: underline; } #press > div > span { float: right; font-weight: 500; } #press > div > span > a { color: var(--color-violet); } #contact { width: 100%; text-align: center; } #contact > p:nth-child(2) { text-align: center; margin: 30px 0 10px 0; } #contact > p:nth-child(2) > span { display: block; float: none; } #contact > p:nth-child(2) > span > a { color: var(--color-violet); font-weight: 500; } #contact > p:nth-child(2) > span:first-child { // float: left; } #contact > p:nth-child(2) > span:last-child { // float: right; } #contact > #gmapiframe { width: 100%; height: calc((100vw - 40px) / 3 * 2); max-height: 600px; margin: 5px 0 30px 0; border: none; border-radius: 16px; } #contact > #departments { display: flex; flex-flow: column wrap; align-content: flex-start; gap: 30px 0; margin: 90px 0 0 0; } #contact > #departments > div { display: flex; flex-flow: column wrap; align-content: flex-start; gap: 30px 0; margin: 0; padding: 0; width: 100%; } #contact > #departments > div > div { display: inline-block; text-align: left; padding: 0 15px 0 15px; border-left: solid #edebef 1px; -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; margin: 0; } #contact > #departments > div.break { flex-basis: 100%!important; height: 0; margin-top: -30px; } #contact > #departments > div > div h3 { // font-size: 32px; // line-height: 40px; } #contact > #departments > div > div strong { color: var(--color-violet); } /***** Contact-form - START *****/ #contactForm { padding: 0px 0px 25px 0px; margin: 0 auto; text-align: center; min-width: 300px; width: 100%; } #contactForm table { width: 100%; padding: 0px; margin: 20px auto 0px auto; text-align: left; } #contactForm table tr#antispam, #contactForm-nevyplnovat { display: none; } #contactForm table th { display: none; width: 15%; padding: 7px 10px 7px 0px; font-size: 13px; font-weight: 700; vertical-align: top; text-align: right; } #contactForm table td { padding: 3px 0px; } #contactForm div { padding: 0px; } #contactForm input[type="text"], #contactForm textarea { font-family: var(--font-family); border: solid #e3dde8 1px; border-radius: 20px; background: none; padding: 28px 32px; } #contactForm input[type="text"]::placeholder, #contactForm textarea::placeholder { font-family: var(--font-family); font-size: 18px; line-height: 26px; color: var(--color-darkblue); } #contactForm input[type="text"] { width: 100%; } #contactForm textarea { width: 100%; height: 200px; } #contactForm .errorCell label, #contactForm .errorCell span { color: #ffffff; background-color: #cc0000; font-weight: bold; padding: 3px 5px; margin-left: 20px; border-radius: 2px; cursor: pointer; } #contactForm .g-recaptcha { margin: 10px 0px 20px 0px; text-align: center; } #contactForm .g-recaptcha > div{ margin: 0px auto; } #contactForm-send { // padding: 13px 35px; // font-size: 14px; // background-color: var(--color-blueberry); // color: var(--color-white); } #contactForm-send:hover { background-color: var(--color-winered); } #contactForm table td.privacy { padding: 15px 5px; } #contactForm .privacy a { font-weight: 500; } #contactForm-privacy { margin: 5px 15px 60px 0; float: left; background-color: var(--color-blueberry); } /***** Contact-form - END *****/ /***** Info, Alerts - START *****/ .infoText { margin-bottom: 30px; text-align: center; z-index: 100; } .infoText > div > div.type { display: table-cell; height: 100%; vertical-align: middle; padding: 5px; } .infoText > div > div.msg { display: table-cell; height: 100%; vertical-align: middle; padding: 5px 10px; } .infoText > div > div.msg > span { position: absolute; top: 0px; right: 0px; width: 16px; height: 16px; cursor: pointer; // background: transparent url('/img/icon-checked.svg') 50% 50% no-repeat; } .state_alert { position: relative; display: inline-block; padding: 5px!important; border-radius: 3px; border: solid #cd0a0a 1px; background-color: #fde2d8; color: #cd0a0a; margin: 0px auto 20px auto; } .state_info, .state_notice { position: relative; display: inline-block; padding: 5px!important; border-radius: 3px; border: solid #f7d61b 1px; background-color: #f1e497; margin: 0px auto; } .alert_icon, .info_icon, .notice_icon, .confirm_icon { display: block; float: left; width: 16px; height: 16px; margin: 4px 5px auto 0px; overflow: hidden; } .alert_icon { background: transparent url('/img/icon-alert.svg') 50% 50% no-repeat; } .info_icon, .notice_icon { background: transparent url('/img/icon-notice.svg') 50% 50% no-repeat; } .confirm_icon { background: transparent url('/img/icon-checked.svg') 50% 50% no-repeat; } /***** Info, Alerts - END *****/ #tenant { position: fixed!important; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 99999; background-color: #fff; overflow: hidden; touch-action: none; } #tenantImg { display: none; float: left; width: 60%; height: 100vh; background-image: url('/img/palac-pardubice.jpg'); background-position: 50% 50%; background-size: cover; } #tenantLogin { width: 100%; text-align: center; margin: 50px 0px; padding: 30px; } #tenantLogin strong { display: inline-block; padding: 5px 10px; border-radius: 8px; background-color: var(--color-winered); color: var(--color-text); } #tenantForm { // margin: 50px auto; } #tenantForm > input[type=password] { width: 100%; max-width: 300px; height: 50px; padding: 12px 15px 12px 15px; margin: 30px 0 15px 0; background-color: var(--color-lightgray); border-radius: 50px; font-size: 18px; line-height: 26px; font-weight: 400; text-align: center; } @media only screen and (min-width: 600px) { #tenant { display: flex; flex-flow: row nowrap } #tenantImg { display: block; max-width: 60%; } #tenantLogin { // float: right; min-width: 330px; max-width: 40%; } } #importantInfo { background-color: var(--color-winered); color: var(--color-white); padding: 10px 50px; font-size: 12px; line-height: 16px; text-shadow: 1px 1px 1px var(--color-black-50); } #importantInfo.homepage { } #importantInfo .h2 { margin: 0 0 20px 0; font-weight: 700; } #importantInfo .h2:only-child { margin: 0; } #importantInfo a { color: var(--color-white); } #importantInfo ol, #importantInfo ul { padding: 10px 0 5px 0; list-style-position: inside; } #importantInfo .separator { display: inline-block; width: 85%; height: 0px; border-bottom: solid var(--color-white) 1px; margin: 20px 0px 10px 0px; } #importantInfo.homepage .separator { margin: 30px 0px 20px 0px; } a.no_icon { background: none; padding: 1px 0px 1px 0px; text-decoration: underline; } a.no_icon:hover { text-decoration: none; } #alzabox-logo { height: auto; max-height: 85px; margin: 0 0 15px 30px; float: right; } /***** Logos slider - START *****/ #logos { margin: 80px 0 0 0; padding: 0 20px; } #logos > div { overflow: hidden; } #logos > div:before, #logos > div:after { position: absolute; top: 0; width: 50px; height: 100%; content: ""; z-index: 10; } #logos > div:before { left: 0; background-image: linear-gradient(90deg, #ffffffff, #ffffff00); } #logos > div:after { right: 0; background-image: linear-gradient(90deg, #ffffff00, #ffffffff); } #logos > div > h2 { font-size: 14px; font-weight: 500; line-height: 22px; text-transform: uppercase; margin: 0 0 30px 0; } #logos > div > div { display: flex; animation: var(--logos-animation-duration) logoslide infinite linear; } #logos > div > div:hover { animation-play-state: paused; } #logos > div > div > a { flex: 0 0 auto; width: 150px; padding: 10px 20px; cursor: pointer; } #logos > div > div > a > img { filter: grayscale(100%); transition: all 0.3s ease-out; } #logos > div > div > a:hover > img { filter: grayscale(0%); } @keyframes logoslide { from { transform: translateX(0); } to { transform: translateX(-1550%); } } /***** Logos slider - END *****/ /***** Instagram feed - START *****/ #insta-feed { margin: 0 0 60px 0; overflow: hidden; } #insta-feed .swiper-wrapper { width: 320px; margin: 0 auto; } #insta-feed .swiper-slide { // width: 320px; height: 320px; } #insta-feed .swiper-slide > img, #insta-feed .swiper-slide > video { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } #insta-feed .swiper-button-prev, #insta-feed .swiper-button-next { all: unset; position: absolute; width: 50px; height: 50px; top: 65%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; text-align: center; // padding: 8px 10px 12px 10px; cursor: pointer; font-size: 24px; border-radius: 50%; z-index: 10; } #insta-feed .swiper-button-prev:after, #insta-feed .swiper-button-next:after { all: unset; } #insta-feed .swiper-button-prev:hover, #insta-feed .swiper-button-next:hover { background-color: rgba(0, 0, 0, 0.8); } #insta-feed .swiper-button-prev { left: 10px; } #insta-feed .swiper-button-next { right: 10px; } /***** Instagram feed - END *****/ /***** FreePrivacyPolicy.com - START *****/ .freeprivacypolicy-com---nb-simple { border-radius: 5px; margin: 10px; } .freeprivacypolicy-com---reset div, .freeprivacypolicy-com---palette-light .cc-pc-container { border-radius: 5px; } .freeprivacypolicy-com---palette-light .cc-pc-container { margin-bottom: 30px; } .freeprivacypolicy-com---pc-dialog .cc-pc-head-title { padding: 25px 25px 0 25px; } .freeprivacypolicy-com---palette-light .cc-pc-head-title-headline { text-align: center; } .freeprivacypolicy-com---palette-light .cc-pc-head-lang select { display: none; } .freeprivacypolicy-com---pc-dialog .cc-pc-head-close { margin-left: 0; } /***** FreePrivacyPolicy.com - END *****/ #chargebox { max-width: 650px; max-height: 250px; } #chargebox.big { max-height: 500px; } @media only screen and (min-width: 480px) { /* #logo { width: 215px; height: 35px; background: transparent url('/img/palacpardubice-logo.svg') no-repeat 50% 50%; background-size: 80%; } */ #magazin > a { -webkit-flex: 0 0 50%; /* Safari 6.1+ */ -moz-flex: 0 0 50%; /* Firefox 18+ */ -ms-flex: 0 0 50%; /* IE 10 */ flex: 0 0 50%; } #newsletter > form > input[type|=email] { } #newsletter > form > input[type|=submit] { } #newsletter_finish input[type=email] { width: 25%; } #cookies-text button { margin: 0 30% 20px 30%; } #cms > #opening-hours > div { -webkit-flex: 0 0 49%; -moz-flex: 0 0 49%; -ms-flex: 0 0 49%; flex: 0 0 49%; min-height: 180px; margin: calc(2% / 4); } } @media only screen and (min-width: 580px) { #cookies-text button { margin: 0 34% 20px 34%; } #for-download div { width: 50%; float: left; } #newsletter > form > input[type|=email], #newsletter > form > input[type|=submit] { margin: 0 15px 15px 15px; } #contact > #departments, #contact > #departments > div { flex-flow: row wrap; gap: 45px 0; } #contact > #departments > div > div { -webkit-flex: 0 0 48%; -moz-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; // margin: calc(4% / 4); } } @media only screen and (min-width: 600px) { :root { --logos-animation-duration: 120s; } /***** FreePrivacyPolicy.com - START *****/ .freeprivacypolicy-com---pc-dialog .cc-pc-head-title { padding: 25px; } /***** FreePrivacyPolicy.com - END *****/ #contactForm { max-width: 600px; } } @media only screen and (min-width: 640px) { #go2top { // display: none; right: -1px; bottom: 20px; } .show-search { top: 0px; } #stores_map_icon { top: 0px; } h1, .h1 { margin: 0 0 50px 0; font-size: 60px; line-height: 66px; } h2, .h2 { font-size: 40px; line-height: 48px; } h3, .h3 { font-size: 32px; line-height: 40px; } #img-head { height: 150px; } #img-head > div.morning { background-position: 70% 50%; } #content { padding: 50px 0; } #importantInfo { font-size: 14px; line-height: 18px; } #topline { display: block; min-height: calc(2* 30px + 50px); } #bluebar { height: 105px; text-align: center; } #languages-box { // display: flex; } #search-icon { display: none; } #logo { width: 150px; height: 50px; background-size: 100%; } #magazine-offer > div { text-align: left; } #magazine-offer > div > h2 { display: block; } #magazine-offer > div > span { display: block; } #magazine-offer > div > a { position: absolute; bottom: 40px; margin: 0; } #border { display: block; position: relative; width: calc(var(--content-width) * 0.65); height: 0; margin: 0 auto; border-top: solid var(--color-border) 1px; } #cms-img { float: right; width: var(--cms-right-img-width); margin: 0 0 15px 30px; } .sustain-img { float: right; width: 250px; margin: 0 0 15px 30px; } #cms-img-l { float: left; width: var(--cms-right-img-width); margin: 0 30px 15px 0; } #cms table { width: 80%; } #cms table th, #cms table td { padding: 0 10px 0 0; } #cms table th { white-space: nowrap; display: table-cell; } #cms table th + td { display: table-cell; } #lease > a, #lease > div > div > a { display: inline-block; float: right; margin: 0 0 15px 30px; } #lease > table, #lease > div > div > table { display: table; width: 75%; } #lease > table tr, #lease > div > div > table tr { display: table-row; } #lease > table th, #lease > div > div > table th { display: table-cell; } #lease > table td, #lease > div > div > table td { display: table-cell; } #lease > table td:first-child { display: table-cell; } .back { display: inline-block; float: right; top: -40px; } .job > a { display: inline-block; float: right; margin: 0 0 30px 30px; } #left { width: 49%; float: left; } #right { width: 49%; float: right; } #cookies-text button { margin: 0 36% 20px 36%; } } @media only screen and (min-width: 680px) { /***** FreePrivacyPolicy.com - START *****/ .freeprivacypolicy-com---nb-simple { // max-width: 30%; // bottom: 5px; // right: 5px; // border-radius: 5px; } .freeprivacypolicy-com---pc-dialog .cc-pc-head-title { padding: 25px; } /***** FreePrivacyPolicy.com - END *****/ #cms > #opening-hours > div { -webkit-flex: 0 0 32%; -moz-flex: 0 0 32%; -ms-flex: 0 0 32%; flex: 0 0 32%; margin: calc(3% / 6); } } @media only screen and (min-width: 720px) { .show-search { display: none; } #searchTop { display: inline-block; max-width: 60%; // margin: 0 auto; } #searchTop > form { display: inline-block; position: relative; width: 100%; top: 0; left: 0; padding: 0 0 0 25px; // padding: 0; } #searchTop > form > input[type=search] { min-width: auto; max-width: auto; width: 100%; } #get-app img { max-width: 1200px; } #get-voucher img { max-width: 1200px; } } @media only screen and (min-width: 780px) { #stores_map_icon { display: none; } #stores_map_btn { display: inline-block; right: 70px; } } @media only screen and (min-width: 820px) { #magazin > a { -webkit-flex: 0 0 33%; /* Safari 6.1+ */ -moz-flex: 0 0 33%; /* Firefox 18+ */ -ms-flex: 0 0 33%; /* IE 10 */ flex: 0 0 33%; } #magazine-offer > div > p { display: block; } #newsletter > form > input[type|=email] { // width: 30%; } #newsletter2 > form > input[type|=email] { // width: 35%; } #get-app img { width: 100%; max-width: 1200px; } } @media only screen and (min-width: 840px) { #topline { text-align: center; } #languages-box { // display: inline-block; margin: 3px 0 0 25px; } } @media only screen and (min-width: 900px) { :root { --logos-animation-duration: 180s; } #contact > #departments, #contact > #departments > div { gap: 60px 0; } #contact > #departments > div > div { -webkit-flex: 0 0 33%; -moz-flex: 0 0 33%; -ms-flex: 0 0 33%; flex: 0 0 33%; // margin: calc(4% / 6); } } @media only screen and (min-width: 1000px) { #languages-box { margin: 3px 0 0 80px; } } @media only screen and (min-width: 1200px) { :root { --content-width: 1200px; --logos-animation-duration: 240s; } #searchTop { width: 500px; } #img-head { height: 250px; } #img-head > div.floor { background-position: 50% 50%; } #img-head > div.info { background-position: 50% 50%; } #img-head > div.morning { background-position: 50% 50%; } #img-head > div.evening { background-position: 50% 50%; } #img-head > div.bowland { background-position: 50% 50%; } #content > div { padding: 0px 0px; } .mobwrap { display: none; } #magazine-offer { display: block; margin-top: 60px; } #cms iframe { height: calc(var(--content-width) / 16 * 9); } #contact > p:nth-child(2) > span { display: inline-block; } #contact > p:nth-child(2) > span:first-child { float: left; } #contact > p:nth-child(2) > span:last-child { float: right; } #contact > #departments, #contact > #departments > div { gap: 75px 0; } #contact > #departments > div > div { -webkit-flex: 0 0 25%; -moz-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; // margin: calc(4% / 8); } #slider1 video { width: var(--area-width); height: calc(var(--area-width)/(1920/500)); transform: translateX(0%); object-fit: cover; } #importantInfo { // padding: 20px 10% 20px 10%; } #importantInfo.homepage { // padding: 30px 10% 30px 10%; } #cookies-text { text-align: left; } #cookies-text button { float: right; margin: 5px 0 0 30px; } } @media only screen and (min-width: 1122px) { /***** FreePrivacyPolicy.com - START *****/ .freeprivacypolicy-com---nb-simple { max-width: 30%; bottom: 5px; right: 5px; border-radius: 5px; } .freeprivacypolicy-com---palette-light .cc-pc-head-title-headline { text-align: left; } .freeprivacypolicy-com---palette-light .cc-pc-head-lang select { display: none; } .freeprivacypolicy-com---pc-dialog .cc-pc-head-close { margin-left: 0; } /***** FreePrivacyPolicy.com - END *****/ } @media only screen and (min-width: 1200px) { #stores_map_btn { display: inline-block; right: 0; } } @media only screen and (min-width: 1330px) { #today_open_to { display: inline-block; } } @media only screen and (min-width: 1600px) { #part-logo-yellow { display: block; position: absolute; right: 0px; width: calc((1920px - var(--content-width))/2/2.5); // width: 100%; z-index: 2; } #part-logo-red, #part-logo-green { display: block; position: absolute; left: 0px; width: calc((1920px - var(--content-width))/2/3); z-index: 2; } #part-logo-orange-blue { display: block; position: absolute; right: 0px; width: calc((1920px - var(--content-width))/2/4); z-index: 2; } }.show-menu { position: absolute; display: block; top: -75px; right: 25px; width: 50px; height: 50px; background: var(--color-winered) url('/img/menu.svg') no-repeat 50% 50%; background-size: 40%; border-radius: 50%; z-index: 99999; } #show-menu { display: none; } #show-menu:checked ~ .show-menu { background: var(--color-winered) url('/img/close.svg') no-repeat 50% 50%; background-size: 30%; } /* #show-menu:checked ~ #menu { display: block; } */ #menu { position: absolute; display: none; width: 100%; min-height: calc(100vh - 75px); // text-align: center; background-color: var(--color-white); z-index: 110; // padding: 0 0 80px 0; // box-shadow: 0px 10px 30px grey; } #menu > menu { display: flex; position: relative; list-style-type: none; flex-flow: row wrap; align-content: flex-start; width: 100%; font-size: 18px; line-height: 26px; font-weight: 500; margin: 0px; padding: 0px; } #menu > menu > li { display: flex; flex-flow: column wrap; width: 100%; padding: 0; } #menu > menu > li > a { display: block; width: 100%; padding: 15px 25px; color: var(--color-text); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; } #menu > menu > li > a:hover, #menu > menu > li > a.hover, #menu > menu > li > a.active { font-weight: 700; color: var(--color-winered); } #menu > menu > li.sub > a { background: transparent url("/img/submenu-arrow.svg") no-repeat calc(100% - 25px) 50%; } #menu > menu > li.sub > a:hover, #menu > menu > li.sub > a.active { background: transparent url("/img/submenu-close.svg") no-repeat calc(100% - 25px) 50%; } #menu > menu > li > ul { display: none; position: relative; list-style-type: none; flex-flow: column nowrap; align-content: flex-start; width: 100%; font-size: 16px; line-height: 24px; font-weight: 500; margin: 0px; padding: 0px; } #menu > menu > li > ul.active { display: flex; } #menu > menu > li > ul > li { display: flex; width: 100%; padding: 0 0 0 30px; } #menu > menu > li > ul > li > a { display: block; width: 100%; padding: 10px 25px 10px 25px; color: var(--color-text); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; } #menu > menu > li > ul > li > a:hover, #menu > menu > li > ul > li > a.hover, #menu > menu > li > ul > li > a.active { font-weight: 700; color: var(--color-winered); } #menu > a { position: absolute; display: inline-block; width: 30px; height: 30px; bottom: 0px; } @media only screen and (min-width: 480px) { #menu { // text-align: right; // background-color: var(--color-white-75); } #menu > menu { width: 230px; margin-left: calc(100% - 230px); border-left: solid #edebef 1px; // background-color: var(--color-white); } } @media only screen and (min-width: 640px) { .show-menu { top: -80px; } } @media only screen and (min-width: 1200px) { .show-menu { display: none; } #menu { position: relative; display: block; // width: var(--content-width); min-height: auto; margin: 0px auto; z-index: 99997; padding: 0; box-shadow: none; } #menu > menu { display: flex; flex-flow: row wrap; justify-content: space-evenly; justify-content: space-around; align-content: flex-start; width: 100%; margin-left: 0; border-left: none; border-top: solid #edebef 1px; border-bottom: solid #edebef 1px; // width: calc(100% - 50px); } #menu > menu > li { display: inline-block; flex: 1 1 auto; font-size: 19px; background: #ffffff; width: auto; } #menu > menu > li > a { padding: 20px 20px 18px 20px; font-size: 18px; line-height: 26px; text-align: center; text-shadow: none; // background-color: transparent; background: none; -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } #menu > menu > li.sub > a, #menu > menu > li.sub > a:hover, #menu > menu > li.sub > a.active, #menu ul li a:hover, #menu ul li a.active { background: none; } #menu > menu > li.sub:hover { // background-color: #f9f7fe; } #menu > menu > li.sub > ul { position: absolute; display: block; min-width: 200px; max-height: 0px; list-style-type: none; padding: 0px; overflow: hidden; opacity: 0; text-align: center; background-color: #f9f7fe; border-top: solid #edebef 1px; border-radius: 0 0 16px 16px; box-shadow: 0px 10px 20px 0px #1A205129; transition: max-height 0.3s, opacity 0.3s; } #menu > menu > li.sub:hover > ul { max-height: 1000px; opacity: 1; z-index: 2; } #menu > menu > li > ul > li { position: relative; display: flex; padding: 0px; // border-top: solid #edebef 1px; text-align: left; } #menu > menu > li > ul > li:not(:last-child):after { content : ""; position: absolute; left: 15px; bottom: 0; width: calc(100% - 30px); height: 0px; border-top: solid #d9d1df 1px; } #menu > menu > li > ul > li > a { display: block; font-size: 18px; line-height: 26px; padding: 12px 25px; color: var(--color-text); -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; -o-transition: color 0.2s linear; -ms-transition: color 0.2s linear; transition: color 0.2s linear; } #menu > menu > li > ul > li > a { } #menu > menu > li > ul > li:hover > a { color: var(--color-winered); } #fb-menu { top: 11px; right: 110px; margin: 0; } #insta-menu { top: 11px; right: 60px; margin: 0; } #yt-menu { top: 11px; right: 10px; margin: 0; } } /* @media only screen and (min-width: 960px) { #menu > menu > li { font-size: 24px; } #menu > menu > li > ul { max-height: 0px; display: block; } #menu.fix { position: fixed; width: 960px; top: 0px; background-color: #ffffff; padding: 20px 0px 0px 0px; /*font-size: 22px;* / } #menu.fix > ul { position: relative; margin-left: 160px; } #menu.fix > ul > li { padding: 0px 7px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #menu.fix > ul > li > a { padding: 4px 0px 17px 0px; } #menu.fix > ul > li > ul { top: 49px; } } */ /* @media only screen and (min-width: 680px) and (orientation: landscape) {} * / *//* Preload images */ body:after { content: url(../img/lightbox2/close.png) url(../img/lightbox2/loading.gif) url(../img/lightbox2/prev.png) url(../img/lightbox2/next.png); display: none; } body.lb-disable-scrolling { overflow: hidden; } .lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 99999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; display: none; } .lightbox { position: absolute; left: 0; width: 100%; z-index: 100000; text-align: center; line-height: 0; font-weight: normal; } .lightbox .lb-image { display: block; height: auto; max-width: inherit; max-height: none; border-radius: 3px; /* Image border */ border: 4px solid white; } .lightbox a img { border: none; } .lb-outerContainer { position: relative; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; border-radius: 4px; /* Background color behind image. This is visible during transitions. */ background-color: white; } .lb-outerContainer:after { content: ""; display: table; clear: both; } .lb-container { position: static; } .lb-loader { position: absolute; top: 43%; left: 0; height: 25%; width: 100%; text-align: center; line-height: 0; } .lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto; background: url(../img/lightbox2/loading.gif) no-repeat; } .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } .lb-container > .nav { left: 0; } .lb-nav a { outline: none; background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); } .lb-prev, .lb-next { height: 100%; cursor: pointer; display: block; } .lb-nav a.lb-prev { width: 34%; left: 0; float: left; background: url(../img/lightbox2/prev.png) left 48% no-repeat; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; transition: opacity 0.6s; } .lb-nav a.lb-prev:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .lb-nav a.lb-next { width: 64%; right: 0; float: right; background: url(../img/lightbox2/next.png) right 48% no-repeat; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; transition: opacity 0.6s; } .lb-nav a.lb-next:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .lb-dataContainer:after { content: ""; display: table; clear: both; } .lb-data { padding: 0 4px; color: #ccc; } .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } .lb-data .lb-caption a { color: #4ae; } .lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999999; } .lb-data .lb-close { display: block; float: right; width: 30px; height: 30px; background: url(../img/lightbox2/close.png) top right no-repeat; text-align: right; outline: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .lb-data .lb-close:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } footer { background-color: var(--color-blueberry); color: var(--color-white); font-size: 16px; padding: 50px 0 10px 0; margin: 50px 0 0 0; } footer > div:nth-child(2) { display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; max-width: var(--max-footer-width); padding: 0 0 30px 0; margin: 0 auto; text-align: center; } footer address { font-style: normal; color: var(--color-white-60); white-space: nowrap; } footer > div:first-child { display: block; text-align: center; width: 100%!important; margin: 0; padding: 0 0 50px 0; /* border-bottom: solid rgba(255,255,255,0.1) 1px;*/ } footer > div:first-child > img { margin: auto; max-width: 235px; height: auto; } footer h2 { font-size: 14px; line-height: 22px; margin: 50px 0 30px 0; text-transform: uppercase; } footer h3 { font-size: 16px; line-height: 24px; margin: 0 0 10px 0; color: var(--color-white); // text-transform: uppercase; } footer #fb { background: transparent url("/img/footer-facebook.svg") no-repeat 0% 50%; padding: 2px 0 2px 30px; } footer #yt { background: transparent url("/img/footer-youtube.svg") no-repeat 0% 50%; padding: 2px 0 2px 30px; } footer #insta { background: transparent url("/img/footer-instagram.svg") no-repeat 0% 50%; padding: 2px 0 2px 30px; } footer a[href$=".pdf"] { background: none; padding: 0; } footer > div > div { flex: 1 1 100%; padding: 0; margin: 0 20px 15px 20px; border-bottom: solid var(--color-border) 1px; text-align: center; font-size: 16px; line-height: 24px; } footer > div > div > table { min-width: 250px; margin: 0 auto; } footer > div > div > table th { color: var(--color-white-60); white-space: nowrap; font-weight: normal; text-align: left; } footer > div > div > table td { color: var(--color-white-60); white-space: nowrap; text-align: right; } footer > div > div > table td[colspan="2"] { text-align: center; } footer > div > div > ul > li { padding: 0 0 10px 0; white-space: nowrap; } footer > div > div > a > span { padding-right: 0px; } footer > div > div > a > span.fa-phone { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari 3-8 */ transform: rotate(90deg); } footer span:not([class]) { float: right; text-align: right; margin: 0 35px 0 0; } footer a { color: var(--color-white-60); text-decoration: none; } footer a:hover, footer a.active { color: var(--color-winered); } footer ul { list-style-type: none; padding: 0; margin: 0; color: var(--color-white-60); } #maxReal { display: block; width: calc(100vw - 40px); padding: 0 20px 30px 20px; margin: 0 auto; text-align: center; font-size: 12px; line-height: 20px; color: var(--color-white-60); } #copyright { display: block; text-align: center; padding: 10px 0 30px 0; font-size: 16px; line-height: 24px; color: var(--color-white-60); } #copyright > div { width: 100%; margin: 0; padding: 0; text-align: center; } #copyright > div > span:first-child { margin: 0; padding: 0; float: none; } #copyright > div > span:nth-child(2) { display: block; margin: 30px 0 0 0; padding: 30px 20px 0 20px; border-top: solid rgba(255,255,255,0.1) 1px; float: none; text-align: center; } footer span.icon { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-right: 7px; top: -1px; } footer span.icon.rss { background: transparent url(/img/icon-rss.svg) 50% 50%/100% no-repeat; } footer span.icon.envelope { background: transparent url(/img/icon-envelope.svg) 50% 50%/100% no-repeat; } footer span.icon.phone { background: transparent url(/img/icon-phone.svg) 50% 50%/100% no-repeat; } footer span.icon.map-marker { background: transparent url(/img/icon-map-marker.svg) 50% 50%/100% no-repeat; } @media only screen and (min-width: 550px) { footer > div > div:nth-child(1), footer > div > div:nth-child(3) { // flex: 1 1 30%; text-align: left; flex: 1 1 calc(60% - 40px); } footer > div > div:nth-child(2), footer > div > div:nth-child(4) { // flex: 1 1 20%; text-align: left; flex: 1 1 calc(40% - 40px); } footer > div > div > ul > li { text-align: left; } footer > div > div > table { margin: 0; } footer > div > div > table td[colspan="2"] { text-align: left; } footer h2 { text-align: left; font-size: 16px; line-height: 24px; } } @media only screen and (min-width: 680px) { footer > div:nth-child(2) { // padding: 0 15px 30px 15px; } } @media only screen and (min-width: 750px) { footer > div > div:nth-child(1), footer > div > div:nth-child(3) { // flex: 1 1 30%; // flex: 1 1 calc(50% - 40px); // max-width: calc(360px - (4 * 20px)); } footer > div > div:nth-child(2), footer > div > div:nth-child(4) { // flex: 1 1 20%; // flex: 1 1 calc(50% - 40px); // max-width: calc(240px - (4 * 20px)); } } @media only screen and (min-width: 1000px) { footer { // padding: 50px 0 100px 0; } footer li { padding: 0 0 3px 0; } footer > div { padding: 0; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; text-align: left; } footer > div > div:nth-child(1) { flex: 1 1 calc(25% - 40px); } footer > div > div:nth-child(2) { flex: 1 1 calc(25% - 40px); } footer > div > div:nth-child(3) { flex: 1 1 calc(30% - 40px); } footer > div > div:nth-child(4) { flex: 1 1 calc(20% - 40px); } #maxReal { width: 100%; padding: 80px 0 30px 0; font-size: 14px; line-height: 22px; } #copyright { width: 100%; margin: 0; border-top: solid rgba(255,255,255,0.1) 1px; text-align: center; padding: 30px 0 10px 0; } #copyright > div { text-align: left; max-width: 1500px; height: 48px; margin: 0 auto; padding: 0 15px; } #copyright > div > span:first-child { float: left; text-align: left; } #copyright > div > span:nth-child(2) { border-top: none; float: right; text-align: right; margin: 0; padding: 0; } }:root { --action-img-width: calc(var(--content-width) - 20px); } /* #title-centre-actions { position: relative; width: var(--content-width); margin: 0px auto 20px auto; display: -webkit-flex; -webkit-flex-flow: row nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; } #title-centre-actions > a { display: inline-block; -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; text-decoration: none; margin: 0 0 20px 0; } #title-centre-actions > a > img { width: 100%; box-shadow: none; } #title-centre-actions > a > img:hover { box-shadow: 0px 10px 30px grey; } */ #actions, #title-centre-actions, #benefits { position: relative; width: var(--content-width); margin: 0px auto; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; display: flex; flex-flow: row wrap; justify-content: space-between; // align-content: flex-start; perspective: 1000px; } #actions > .events-title { margin: 50px auto; } #actions > p { width: 100%; margin: 0 0 60px 0; } #actions > a, #title-centre-actions > a, #benefits > a { display: inline-block; -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; text-align: left; text-decoration: none; color: var(--color-text); // line-height: 150%; background-color: #ffffff; margin: 0 0 50px 0; border-bottom: dotted var(--color-border) 1px; overflow: hidden; transition: all 0.3s ease-out; } #title-centre-actions > a { border-left: solid var(--color-winered-05) 1px; } #actions > a:last-child, #title-centre-actions > a:last-child, #benefits > a:last-child { margin: 0 0 0 0; } #title-centre-actions > a { border-left: solid var(--color-winered-05) 1px; } #title-centre-actions > a > div { width: 100%; height: 270px; // height: 120px; // max-height: 120px; padding: 0 30px 0 30px; } #title-centre-actions > a > div > span { text-decoration: underline; font-size: 16px; line-height: 24px; font-weight: 500; } .actionText { width: 100%; height: 100px; margin: 20px 0 20px 0; overflow: hidden; text-overflow: ellipsis; } #actions > a:hover, #title-centre-actions > a:hover, #benefits > a:hover { border-bottom: none; } #actions > a > img { width: 100%; height: auto; border-radius: 16px; // padding: 20px; } /* #actions > a[data-type] > img { filter: grayscale(100%); transition: filter 0.5s; } #actions > a[data-type]:hover > img { filter: grayscale(0%); } */ #benefits > a > img { width: 100%; height: auto; padding: 20px 60px 0px 60px; } #title-centre-actions > a > img { width: 100%; height: auto; padding: 20px 20px 0 20px; // border: solid #eee 1px; } #actions > a > div { width: 100%; padding: 10px 0 0 0; font-size: 14px; font-weight: 500; color: var(--color-winered); text-transform: uppercase; } #actions > a > strong { font-size: 18px; line-height: 26px; } div.h1.events-title { margin: 60px 0 30px 0; } #benefits > a > div { width: 100%; height: 240px; padding: 20px; } #actions > a > div > h2, #actions > a > div > h3, #title-centre-actions > a > div > h3, #benefits > a > div > h2, #benefits > a > div > h3 { margin: 0; font-size: 24px; // font-weight: normal; line-height: 32px; } #actions > a > div > img { position: absolute; bottom: 20px; left: 20px; max-width: 90px; max-height: 60px; } #actions > a > div > span, #benefits > a > div > span { /* display: inline-block; padding: 3px 20px; border-radius: 2px; border: solid 1px #161616; text-transform: uppercase; // float: right; position: absolute; bottom: 20px; right: 20px; transition: all 0.3s ease-out; */ float: right; color: var(--color-text); text-transform: none; } #actions > a:hover > div > span, #benefits > a:hover > div > span { // color: #ffffff; // background-color: #161616; } #actions > a > div > p, #benefits > a > div > p { color: var(--color-gray); margin: 10px 0 0 0; font-size: 13px; } /* .benefit-img { -moz-transform: scale(0.75)!important; -webkit-transform: scale(0.75)!important; -o-transform: scale(0.75)!important; -ms-transform: scale(0.75)!important; transform: scale(0.75)!important; } */ .cal { margin: 0 0 15px 0; // font-size: 15px; color: var(--color-winered); font-weight: 500; } .button-pink { position: relative; top: -50px; padding: 12px 30px 10px 30px; background: var(--color-pink); color: var(--color-white); border-radius: 2px; text-decoration: none; text-transform: uppercase; font-weight: 700; line-height: 140%; } .button-pink:hover { background: var(--color-black); } .home { margin: 40px auto 40px auto!important; padding: 0 20px; } #actionDetail { // max-width: 900px; } #actionDetail > h1 { margin: 0 0 20px 0; // float: right; } #actionDetail > .actionDetailLogo { display: block; margin: 0 0 20px 0; // float: right; } #actionDetail > .actionDetailImg { width: 100%; margin: 0; } #actionDetail > #action-img { width: 100%; max-width: var(--content-width); border-radius: 24px; } #actionDetail > div.date { width: 100%; margin: 30px 0; text-align: center; color: var(--color-winered); font-weight: 500; } #actionDetail > div.desc { padding: 0 20px; margin-top: 20px; text-align: left; } #actionDetail > div.desc p { margin: 0 0 10px 0; } #actionDetail > div.desc ul { margin: 5px 0 15px 0; } #actionDetail > div.desc iframe { margin-top: 30px; border-radius: 16px; } #actionGallery { margin: 30px 0 0 0; padding: 5px 0 0 0; border-top: dotted var(--color-border) 1px; } #actionGallery #show_gallery, #actionGallery #hide_gallery { position: relative; top: 0px; cursor: pointer; text-align: right; color: #727272; font-size: 12px; font-weight: bold; padding: 0px 25px 0px 0px; text-transform: lowercase; } #actionGallery #show_gallery { background: transparent url('/img/show.svg') no-repeat 100% 50%; display: none; } #actionGallery #hide_gallery { background: transparent url('/img/hide.svg') no-repeat 100% 50%; } #actionGallery > .gallery_desc { padding-top: 15px; } /* Slevy pro studenty - START */ #discountsTab { width: var(--content-width); display: block; } #discountsTab th { display: block; font-size: 20px; font-weight: 900; text-align: center; padding: 30px 30px 20px 0; background-color: var(--color-white); } #discountsTab td { display: block; padding: 30px; border-bottom: dotted var(--color-border) 1px; text-align: center; } #discountsTab td:first-child { text-align: center; padding: 30px 30px 0px 30px; border-bottom: none; } #discountsTab tr:hover { background-color: #efefef; } /* Slevy pro studenty - END */ #cats { margin: 0 0 30px 0; text-align: center; } #cats > .cat { display: inline-block; margin: 0 5px 7px 0; padding: 1px 7px; font-weight: 700; border-radius: 2px; white-space: nowrap; cursor: pointer; color: var(--color-white); } #cats > .cpink { background-color: var(--color-pink); } #cats > .ciblue { background-color: var(--color-logo-blue); } #cats > .cilightgreen { background-color: var(--color-logo-lightgreen); } #cats > .cired { background-color: var(--color-logo-red); } #cats > .cidarkgreen { background-color: var(--color-logo-green); } #cats > .ciyellow { background-color: var(--color-logo-yellow); } #cats > .ciorange { background-color: var(--color-logo-orange); } #cats > .active { background-color: var(--color-black); } @media only screen and (min-width: 530px) { #title-centre-actions { justify-content: space-between; align-content: flex-start; } #title-centre-actions > a:nth-child(3), #actions.home > a:nth-child(3) { display: none; } #title-centre-actions > a, #actions > a, #benefits > a { -webkit-flex: 0 0 49%; -moz-flex: 0 0 49%; -ms-flex: 0 0 49%; flex: 0 0 49%; } #title-centre-actions::after, #actions::after, #benefits::after { content: ""; flex: 0 0 49%; } } @media only screen and (min-width: 640px) { #actionDetail > .actionDetailImg { // margin: 0 50px 0 0; } #actionDetail > .actionDetailImg > img { max-width: 100%; } #actionDetail > div.desc { // padding: 20px 0 0 0; // clear: left; // float: right; // max-width: 600px; } div.h1.events-title { margin: 60px 0 50px 0; } /* Slevy pro studenty - START */ #discountsTab { display: table; border-collapse: collapse; } #discountsTab th { display: table-cell; } #discountsTab td { display: table-cell; text-align: right; } #discountsTab td:first-child { text-align: center; padding: 30px; border-bottom: dotted var(--color-border) 1px; } /* Slevy pro studenty - END */ } @media only screen and (min-width: 820px) { } @media only screen and (min-width: 1000px) { #title-centre-actions { justify-content: flex-start; } #title-centre-actions > a:nth-child(3), #actions.home > a:nth-child(3) { display: block; } #title-centre-actions::after, #actions::after, #benefits::after { content: ""; flex: 0 0 33%; } #actionDetail > div.desc { padding: 0; width: var(--text-area-max-width); margin: 40px auto 0 auto; } #title-centre-actions > a, #actions > a, #benefits > a { -webkit-flex: 0 0 32.5%; -moz-flex: 0 0 32.5%; -ms-flex: 0 0 32.5%; flex: 0 0 32.5%; } #actionDetail > div.desc > div#photogallery { padding-top: 30px; left: -400px; } }#photogalleries, #photogallery, .photogallery { width: var(--content-width); margin: 0px auto; display: flex; flex-flow: row wrap; justify-content: center; text-align: left; line-height: 100%; } #photogalleries > a { display: inline-block; -webkit-flex: 0 0 33%; /* Safari 6.1+ */ -moz-flex: 0 0 33%; /* Firefox 18+ */ -ms-flex: 0 0 33%; /* IE 10 */ flex: 0 0 33%; text-decoration: none; text-align: center; vertical-align: middle; box-shadow: none; padding: 18px 0 5px 0; margin: 5px 0; } #photogalleries > a > h2 { font-size: 24px; padding: 15px; margin: 0; } #photogallery > a, .photogallery > a { display: inline-block; /* -webkit-flex: 0 0 20%; /* Safari 6.1+ * / -moz-flex: 0 0 20%; /* Firefox 18+ * / -ms-flex: 0 0 20%; /* IE 10 * / flex: 0 0 20%; */ text-decoration: none; text-align: center; vertical-align: middle; box-shadow: none; // padding: 7.5px; margin: 7.5px; } #photogalleries > a:hover, #photogallery > a:hover, .photogallery > a:hover { // box-shadow: 0px 10px 30px grey; box-shadow: 0px 2px 20px var(--color-lightgray); } #photogallery > a > img, .photogallery > a > img { border-radius: 16px; min-width: 220px; max-width: 250px; } @media only screen and (min-width: 640px) { } @media only screen and (min-width: 1000px) { #photogalleries, #photogallery, .photogallery { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-justify-content: flex-start; display: flex; flex-flow: row wrap; align-content: flex-start; justify-content: flex-start; text-align: left; line-height: 100%; } }.store-hero-image { height: 480px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .store-hero-image > div { text-align: center; position: absolute; width: 80%; bottom: 90px; left: 50%; transform: translate(-50%, 0%); color: white; } .store-hero-image > div > h1 { margin: 0 0 10px 0; } .store-hero-image > div > p { font-size: 18px; line-height: 26px; font-weight: 500; } #search { display: inline-block; width: 100%; height: 50px; } #search > input[type="search"] { min-width: auto; width: 100%; height: 50px; background-image: url(/img/magnifier.svg); background-repeat: no-repeat; background-position: 15px 50%; padding: 12px 15px 12px 50px; background-color: var(--color-lightgray); border-radius: 50px; font-size: 18px; line-height: 26px; font-weight: 400; } #search > input[type="submit"] { width: 0px; height: 0px; } #storeListButts { width: 100%; padding: 6px 0 0 0; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; } #storeListButts > input { display: inline-block; -webkit-flex: 0 0 auto; /* Safari 6.1+ */ -moz-flex: 0 0 auto; /* Firefox 18+ */ -ms-flex: 0 0 auto; /* IE 10 */ flex: 0 0 auto; min-width: 23%; width: 48.7%; padding: 1px 15px; font-weight: 500; line-height: 150%; font-size: 18px; color: var(--color-white); background-color: var(--color-pink); border-radius: 2px; text-transform: lowercase; transition: all 0.3s ease-out; } #search > input[type="submit"]:hover, #storeListButts > input:hover, #storeListButts > input.active { background-color: var(--color-black); } #categories { display: flex; flex-flow: row wrap; justify-content: center; align-content: space-between; padding: 0; margin: 0 0 30px 0; } #categories > div { display: inline-block; flex: 0 0 auto; margin: 3px; padding: 8px 15px; text-align: center; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--color-blueberry); background-color: var(--color-blueberry-05); transition: all 0.3s ease-out; } #letters { display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; padding: 0; } #letters .letter { display: inline-block; flex: 0 0 auto; min-width: 58px; margin: 4px 0; padding: 8px 15px; text-align: center; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--color-blueberry); background-color: var(--color-blueberry-05); transition: all 0.3s ease-out; } #letters .letter:nth-child(1), #letters .letter:nth-child(2) { // width: 50px; } #categories > div:hover, #categories > div.active, #letters .letter:hover, #letters .letter.active { background-color: var(--color-blueberry); color: var(--color-white); } #stores_list, #special_stores { padding: 30px 0; font-size: 16px; } #special_stores { margin: 0 0 50px 0; } /* #stores_list ul, #special_stores ul { list-style-type: none; margin: 0; padding: 0; column-count: 1; } #stores_list > ul > li { } #stores_list > ul > li[class^="cat-"] { font-size: 24px; padding: 10px 0; font-weight: 900; } #stores_list > ul > li.end { height: 15px; } #stores_list > ul > li > a, #special_stores > ul > li > a { color: var(--color-text); text-decoration: none; } #stores_list > ul > li > a:hover, #special_stores > ul > li > a:hover { text-decoration: underline; } */ /***** InfoTable - START *****/ #infoTab, .infoTab { border-collapse: collapse; width: 100%; margin: 0px 0px 30px 0px; } #infoTab tr.extra { background-color: #eee; } #store #storeDesc { text-align: left; padding: 50px 0 0 0; } #store #storeDesc .logo { padding: 0 0 20px 0; } #store #storeDesc .logo a { display: inline-block; } #store .storeDescTab { width: auto; margin: 0; } #store .storeDescTab td { padding: 0 20px 0 0; } #store #storePics a { display: inline-block; } #store #storeInfo { // position: relative; padding: 50px 0 0 0; } #infoTab tr { display: flex; flex-flow: row wrap; justify-content: start; padding: 10px 0; } #infoTab th, .infoTab th { vertical-align: top!important; width: calc(100% - 25px - 5px); padding: 3px 5px; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--color-text); text-transform: uppercase; white-space: nowrap; text-align: left; } // #infoTab > tbody > tr:nth-child(1) > th #infoTab td, .infoTab td { vertical-align: top!important; width: calc(100% - 25px); left: 30px; padding: 3px 5px; /* color: #343a46; // word-wrap: break-word; word-break: break-all; // white-space: nowrap; line-height: 130%; */ } /* .infoTab td { // white-space: normal; } */ #infoTab tr td:first-child, .infoTab tr td:first-child { width: 25px; padding: 3px 0; margin: 0 5px 0 0; left: 0px; vertical-align: top; } #infoTab tr td:last-child, .infoTab tr td:last-child { width: 100%; padding: 3px 0; margin: 0 5px 0 0; left: 0px; } #infoTab td span { display: inline-block; text-transform: capitalize; /* font-family: var(--font-family); font-weight: 700; font-size: 14px; padding: 2px 6px 1px 6px; color: #ffffff; white-space: nowrap; border-radius: 2px; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; */ } /* #infoTab td span.yes { display: inline-block; font-family: var(--font-family); font-weight: 1000; font-size: 14px; text-transform: uppercase; color: #74c043; padding: 4px 0px 0px 0px; line-height: 100%; text-shadow: 1px 1px 1px #ffffff; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; } #infoTab td span.no { display: inline-block; font-family: var(--font-family); font-weight: 1000; font-size: 14px; text-transform: uppercase; color: #f26725; padding: 4px 0px 0px 0px; line-height: 100%; } #infoTab tr:last-child td, #infoTab tr:last-child th, .infoTab tr:last-child td, .infoTab tr:last-child th, #infoTab tr.extra td:first-child, #infoTab tr.extra td, #infoTab tr.extra th, #infoTab td:first-child.no-border { border: none; } */ .icon { width: 24px; height: 24px; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; } .icon16 { width: 16px; height: 16px; background-color: transparent; background-size: 16px 16px; background-repeat: no-repeat; background-position: 50% 50%; } .work { background-image: url('/img/door.svg'); } .info { background-image: url('/img/info.svg'); background-size: 90%; } .category { background-image: url('/img/tag.svg'); } .open { background-image: url('/img/opening-hours.svg'); } .chief { background-image: url('/img/chief.svg'); background-size: 90%; } .gift { background-image: url('/img/gift-card.svg'); } .holidays { background-image: url('/img/holidays.svg'); background-size: 90%; } .point { background-image: url('/img/map-point.svg'); } .phone { background-image: url('/img/phone.svg'); background-size: 80%; } .email { background-image: url('/img/email.svg'); } .support { background-image: url('/img/customer-care.svg'); } .web { background-image: url('/img/web.svg'); } .isic { background-image: url('/img/student.svg'); } .fb { background-image: url('/img/facebook.svg'); } .insta { background-image: url('/img/instagram.svg'); } .yt { background-image: url('/img/youtube.svg'); } .app { background-image: url('/img/mobile-app.svg'); } /***** InfoTable - END *****/ .streetview { width: 100%; height: calc(650px / 16 * 9); } .store-img { width: 100%; // max-width: 900px; margin: 30px auto 0 auto; border-radius: 16px; } #storeMap, #storeGallery, #storeActions, #storeJobs, #sameCategory { margin: 30px 0 0 0; // padding: 5px 0 0 0; // border-top: dotted var(--color-border) 1px; } #storeActions { position: relative; width: var(--content-width); margin: 0px auto; display: flex; flex-flow: row wrap; justify-content: space-between; perspective: 1000px; } #storeActions > h2 { width: 100%; } #storeActions > a { display: inline-block; text-align: left; text-decoration: none; color: var(--color-text); background-color: #ffffff; margin: 0 0 50px 0; border-bottom: dotted var(--color-border) 1px; overflow: hidden; transition: all 0.3s ease-out; } #storeActions > a > img { width: 100%; height: auto; border-radius: 16px; } #storeActions > a > div { width: 100%; padding: 10px 0 0 0; font-size: 14px; font-weight: 500; color: var(--color-violet); text-transform: uppercase; } #storeActions > a > div > span { float: right; color: var(--color-text); text-transform: none; } #storeActions > a > strong { font-size: 18px; line-height: 26px; } @media only screen and (min-width: 530px) { #storeActions > a { flex: 0 0 49%; } } @media only screen and (min-width: 1000px) { #storeActions > a { flex: 0 0 32%; } } #storeGallery { text-align: center; } #storeGallery .photogallery { margin: 0 auto; width: 250px; } #storeGallery .photogallery a { width: 250px; height: 250px; } #store #show_map, #store #hide_map, #store #show_gallery, #store #hide_gallery, #store #show_actions, #store #hide_actions, #store #show_jobs, #store #hide_jobs { position: relative; top: 0px; cursor: pointer; text-align: right; color: #727272; font-size: 12px; font-weight: bold; padding: 0px 25px 0px 0px; text-transform: lowercase; } #store #show_map, #store #show_gallery, #store #show_actions, #store #show_jobs { background: transparent url('/img/show.svg') no-repeat 100% 50%; display: none; } #store #hide_map, #store #hide_gallery, #store #hide_actions, #store #hide_jobs { background: transparent url('/img/hide.svg') no-repeat 100% 50%; } #storeJobs > div.job { padding: 20px 0 10px 0; border-top: none; } #storeJobs > div.job > h3 { font-size: 18px; font-weight: 900; } #store .store_map { position: relative; margin: 0px auto 20px auto; width: 100%; height: calc(95vw * 461 / 800); clear: both; } #store .store_map img { position: absolute; top: 0px; left: 0px; width: 100%; height: auto; } #store .store_map .level_desc { position: absolute; top: -20px; left: -10px; width: 150px; height: 40px; } #store .store_map .level_desc div { font-size: 24px; font-weight: 700; text-align: right; text-shadow: 1px 1px 1px #aaaaaa; } #store .store_map .level_desc div span{ font-size: 36px; } #store .store_map .level_desc #ld3 {color: #efe93a;} #store .store_map .level_desc #ld2 {color: #f36f24;} #store .store_map .level_desc #ld1 {color: #4eb859;} #store .store_map .level_desc #ld0 {color: #005a83;} #storeGallery #gallery_desc, #storeGallery .gallery_desc { padding-bottom: 30px; } #sameCategory ul { list-style-type: none; -webkit-columns: auto 2; /* Chrome, Safari, Opera */ -moz-columns: auto 2; /* Firefox */ columns: auto 2; } #stores-box { display: flex; flex-flow: row wrap; justify-content: flex-start; // align-content: flex-start; // align-content: stretch; // gap: 25px 25px; } #stores-box > a { display: flex; flex-flow: column nowrap; width: 100%; // border: solid transparent 7.5px; margin: 7.5px; text-align: center; border-radius: 16px; box-shadow: 0px 10px 20px 0px #1A205129; text-decoration: none; } #stores-box > a > h2 { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--color-text); margin: 20px 0 20px 0; padding: 0 10px; } #stores-box > a > div { display: block; width: 100%; padding: min(25px, 2%); border-bottom: solid var(--color-lightgray) 1px; } #stores-box > a > div > img { margin: 25px 0 20px 0; } #stores-box > a > span { display: block; font-size: 18px; line-height: 26px; font-weight: 400; color: var(--color-text); } #stores-box > a > span:nth-child(2), #stores-box > a > span:last-child { font-weight: 700; color: var(--color-violet); } #stores-box > a > span:last-child { padding: 0 0 20px 0; } /***** Externí mapa centra - START *****/ #iframemap { position: relative; margin: 0px auto 0px auto; width: 100%; max-width: 1200px; height: calc((100vw - 40px) / 3 * 2); max-height: 800px; border: solid #edebef 1px; border-radius: 28px; } @media only screen and (min-width: 540px) { #stores-box > a { -webkit-flex: 0 0 47%; -moz-flex: 0 0 47%; -ms-flex: 0 0 47%; flex: 0 0 47%; } } /***** Externí mapa centra - END *****/ /***** Mapa centra - START *****/ #centreMap { position: relative; margin: 0px 0px 0px 0px; width: 100%; height: calc((100vw - 20px) / var(--map-height-ratio)); background: none; /*overflow: hidden;*/ } #centreMap > div { position: absolute; top: 0px; left: 0px; margin: 0px; width: 100%; height: calc((100vw - 20px) / var(--map-height-ratio)); background-color: transparent;; background-position: 0px 0px; background-repeat: no-repeat; display: none; } /***** Mapa centra - END *****/ #infoTab td.apps { display: flex; justify-content: flex-start; column-gap: 20px; flex-wrap: wrap; } td.apps > a.app_btn > img { width: auto; height: auto; max-height: 33px; } @media only screen and (min-width: 540px) { #stores-box > a { -webkit-flex: 0 0 48%; -moz-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; margin: calc(4% / 4); } } @media only screen and (min-width: 570px) { #storeGallery .photogallery { justify-content: flex-start; width: 530px; } } @media only screen and (min-width: 640px) { #storeListButts { width: 48.7%; float: right; text-align: right; padding: 0; } #stores_list ul, #special_stores ul { column-count: 2; } #letters .letter { min-width: 12.6%; } /* #store #storePics { text-align: left; } #store #storePics > .logo { float: left; margin: 0 30px 30px 0; } #store #storePics > .store { // float: right; margin: 0 0 30px 0; } */ #store #storeDesc .h3 { font-size: 24px; line-height: 32px; } #store #storeDesc p { font-size: 18px; line-height: 26px; } #storeJobs > div.job > h3 { font-size: 24px; } #store .store_map .level_desc { top: -10px; left: -10px; } #basicInfo > a { width: 100px; height: 100px; } #basicInfo > h2 { display: block; } #basicInfo > table { display: initial; } #infoTab tr { display: table-row; } #infoTab th, .infoTab th { word-wrap: normal; word-break: normal; font-size: 16px; line-height: 24px; } #infoTab td, .infoTab td { word-wrap: normal; word-break: normal; font-size: 18px; line-height: 26px; } #infoTab tr td:first-child, .infoTab tr td:first-child { width: 25px; padding: 3px 10px 3px 0; left: 0px; } .mobwrap { display: none; } #sameCategory ul { -webkit-columns: auto 3; -moz-columns: auto 3; columns: auto 3; } #level_desc { top: 200px; } #result { position: absolute; width: 50%; z-index: 0; } } @media only screen and (min-width: 800px) { #stores-box > a { -webkit-flex: 0 0 32%; -moz-flex: 0 0 32%; -ms-flex: 0 0 32%; flex: 0 0 32%; margin: calc(4% / 6); } } @media only screen and (min-width: 840px) { /* #storeGallery .photogallery a { -webkit-flex: 0 0 32%; -moz-flex: 0 0 32%; -ms-flex: 0 0 32%; flex: 0 0 32%; margin: calc(4% / 6); } */ #storeGallery .photogallery { width: 795px; } } @media only screen and (min-width: 900px) { #search { max-width: 280px; margin: 0 20px 0 0; } #letters { padding: 10px 0 0 0; } } @media only screen and (min-width: 1000px) { #stores_list ul, #special_stores ul { column-count: 4; } #letters .letter { display: inline-block; -webkit-flex: 0 0 auto; /* Safari 6.1+ */ -moz-flex: 0 0 auto; /* Firefox 18+ */ -ms-flex: 0 0 auto; /* IE 10 */ flex: 0 0 auto; min-width: 30px; } #stores-box > a { -webkit-flex: 0 0 24%; -moz-flex: 0 0 24%; -ms-flex: 0 0 24%; flex: 0 0 24%; margin: calc(4% / 8); } #infoTab { margin: 0px 0px 50px 0px; } #infoTab th, .infoTab th { white-space: nowrap; } #store #storeDesc { // width: calc(50% - 50px); width: 50%; float: left; margin-left: -50px; } #store #storeInfo { // width: calc(50% - 50px); width: 50%; float: right; margin-right: -50px; } #store .store_map { width: 800px; height: 461px; } #store .store_map img { width: 800px; height: 461px; } #store .store_map .level_desc { top: 0px; left: 0px; } #sameCategory ul { -webkit-columns: auto 4; -moz-columns: auto 4; columns: auto 4; } /***** Mapa centra - START *****/ #result { position: absolute!important; width: 50%!important; top: 75px; } #centreMap { margin: 130px 0px 0px 0px; width: 800px; height: 461px; } #centreMap div { width: 800px; height: 461px; } #centreMap img[id^="map"], #centreMap img[id^="s"] { width: 800px; height: 461px; } #centreMap div[id^="sd"] img { top: 30px; } #level_desc { top: 180px; left: 250px; } #legend { /* position: absolute; top: 110px; right: 200px; width: 80px; height: 150px; background: transparent url('/img/legend.png') 0px 0px/cover no-repeat; */ display: block; } #basicInfo > a { width: 120px; height: 120px; } /***** Mapa centra - END *****/ } @media only screen and (min-width: 1080px) { /* #stores-box > a { -webkit-flex: 0 0 23.5%; -moz-flex: 0 0 23.5%; -ms-flex: 0 0 23.5%; flex: 0 0 23.5%; } #stores-box::after { content: ""; -webkit-flex: 0 0 23%; -moz-flex: 0 0 23%; -ms-flex: 0 0 23%; flex: 0 0 23%; } */ } @media only screen and (min-width: 1100px) { /* #storeGallery .photogallery a { -webkit-flex: 0 0 24%; -moz-flex: 0 0 24%; -ms-flex: 0 0 24%; flex: 0 0 24%; margin: calc(4% / 8); } */ #storeGallery .photogallery { width: 1100px; } } @media only screen and (min-width: 1200px) { #letters { width: 900px; margin: 0; padding: 0 0 0 0; float: right; } #stores-box > a { -webkit-flex: 0 0 19%; -moz-flex: 0 0 19%; -ms-flex: 0 0 19%; flex: 0 0 19%; margin: 0.5%; } } @media only screen and (min-width: 1400px) { .store-hero-image > div { text-align: left; width: 1320px; left: 50%; transform: translate(-50%, 0%); } .store-hero-image > div > h1 { text-align: left; // margin: 0 0 10px 0; } .store-hero-image > div > p { // text-align: left; } }