/* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; font-family: 'Space Mono', monospace; font-weight:400; font-size:16px; line-height:26px; background-color:#f9f7f3; color:#55422d; -webkit-text-size-adjust:100%; font-variant-ligatures: no-common-ligatures; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { color:#55422d; text-decoration: none;} a:hover { } .clearboth { clear: both; } .floatleft { float: left; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .black { color:black } img { border: none; } p { clear:both; } ul { margin:0; } b { font-weight:700; } strong { font-weight:700; } hr { height:1px; border:0; background-color: black; } .tisic { margin-left: 0.3em; } .nonselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;} .nopadding { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input,textarea { border:none; outline:none; resize:none; padding:10px 2% 10px 2%; margin-top:5px; font-family: 'Space Mono', monospace; font-size:20px; border:solid 1px #404040; -webkit-appearance: none; -webkit-border-radius:0px; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #ebebeb inset !important; } .ramecek5 { -webkit-border-radius:5x; -moz-border-radius:5px; border-radius:5px; behavior: url(PIE.htc); } .ramecek10 { -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; behavior: url(PIE.htc); } .ramecek-kulaty { -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; behavior: url(PIE.htc);} .table-cell { display: table-cell; vertical-align: middle; } li { list-style-position:inside; } hr { padding:0; margin:0; background-color:#404040; } .pom-cara { position:absolute; background-color:#a3e4ff; width:1px; height:2000px; z-index:10000 } #pom-cara0 { left:0; } #pom-cara1 { left:calc(100%/6);} #pom-cara2 { left:calc((100%/6)*2);} #pom-cara3 { left:calc((100%/6)*3);} #pom-cara4 { left:calc((100%/6)*4);} #pom-cara5 { left:calc((100%/6)*5);} #pom-cara6 { left:calc(100% - 1px);} .line { position:fixed; background:#6f5646; } #line-horizontal1 { position:relative; width:100%; height:40px; top:0; left:0; background:#f9f7f3; border-bottom:solid 1px #6f5646; z-index:1000; } #line-horizontal2 { position:absolute; width:100%; height:40px; left:0; background:#f9f7f3; border-top:solid 1px #6f5646; z-index:1000; } #line-vertical1 { width:1px; height:100%; top:0; left:40px; z-index:10000; } #line-vertical2 { width:1px; height:100%; top:0; right:40px; z-index:10000; } .line-horizontal { position:absolute; left:0; width:100%; height:1px; background:#6f5646; } .main { position:relative; float:left; display:block; width:100%; height:100%; padding:0 40px 40px 40px; box-sizing: border-box; } .prostor { position:relative; width:100%; max-width:1920px; margin:auto; } .section { position:relative; float:right; width:calc((100%/3) * 2); min-height:100vh; } #logo { position:relative; margin:auto; margin-top:80px; width:50%; max-width:350px;} #logo img { float:left; width:100%; } nav { position:relative;} nav h2 { color:#414042; font-size:14px; line-height:20px; text-align:center; margin-top:30px; text-transform: uppercase; letter-spacing:0.45em; } #social { position:absolute; right:50px; top:0; width:110px; } #social a { float:left; width:35px; height:35px; margin-right:20px } #social #fb { width:35px; height:35px; fill:#ad672a; } #social #ig { width:35px; height:35px; fill:#ad672a } #fake-menu { display:none; float:left; width:100%; height:65px; } #menu { position:relative; float:left; width:calc(100% - 80px); margin-top:0; margin-left:40px; background:#ad672a; padding:22px 5% 0 5%; height:65px; z-index:100 } #menu.fixed { position:fixed; left:0; top:0; margin-top:20px; } #menu a { padding-left:5px; float:left; margin-right:calc((100% - (90px + 260px + 105px + 208px + 157px + 155px + 120px))/6); color:#f9f7f3; font-size:17px; line-height:22px; letter-spacing:0.38em; text-transform:uppercase; border-bottom:2px solid transparent } #menu a:hover, #menu a.active { border-bottom:2px solid #f9f7f3} #menu a#menu0 { width:90px; } #menu a#menu1 { width:260px; } #menu a#menu2 { width:105px; } #menu a#menu3 { width:208px; } #menu a#menu4 { width:157px; } #menu a#menu5 { width:155px; } #menu a#menu6 { width:120px; margin:0 } #menu-mobile { display:none; position:absolute; left:5%; top:0; width:30px; height:25px; margin-top:1px; cursor:pointer;} #menu-mobile span { position:absolute; display:block; width:100%; height:3px; border:1px solid #55422d; background-color: #55422d; -webkit-border-radius:5x; -moz-border-radius:5px; border-radius:5px; behavior: url(PIE.htc); } #menu-mobile span:nth-child(1) { top:0; } #menu-mobile span:nth-child(2) { top:10px } #menu-mobile span:nth-child(3) { bottom:0; } .menu-hide { display:none } .section1 { position:relative; } .left50 { float:left; width:50%; padding:8vh 5%; letter-spacing:0.015em; } .left50 .nadpis { margin-bottom:4vh; font-size:32px; line-height:42px; font-weight:700 } .left50 p { font-size:20px; line-height:35px; } #video { position:relative; float:left; width:50%; height:550px; } #video-filtr { position:relative; float:left; width:100%; height:100%; background:url(../images/video.jpg); background-size:cover; background-position:center; z-index:5 } #video-filtr2 { position:absolute; width:100%; height:100%; cursor:pointer; z-index:10 } #video img { float:left; width:100%; height:100%; object-fit:cover; font-family: 'object-fit: cover;';} #video-text { position:absolute; bottom:6%; left:6%; font-size:44px; line-height:60px; font-style:italic; } #video-play { position:absolute; top:calc(50% - 55px); left:0; right:0; margin:auto; background:url(../images/play.png); width:111px; height:111px; } #video-url { position:absolute; top:0; left:0 } #video iframe { width:calc(100% - 1px); height:100%; border:0} .zluta { background:#dfc167; letter-spacing:0.015em; padding:6vh 5% 12vh 5%; text-align: center; } .zluta-nadpis { font-size:32px; line-height:35px; font-weight:700; margin-bottom:2vh } .zluta p { max-width:850px; margin:auto; } .slovnik { float:left; width:22%; margin:10vh 4% 0 0; color:#f9f7f3; font-size:32px; line-height:42px; letter-spacing:0.015em; text-transform:uppercase; } .slovnik-container { display:inline-block; cursor:pointer; max-width:300px; } .slovnik-posledni { margin-right:0 } .slovnik h3 { position:relative; margin:auto; width:80px; padding-bottom:10px; border-bottom:solid 1px #f9f7f3; text-transform: uppercase; } .slovnik span { position:relative; margin:auto; } .slovnik p { margin-top:3vh; font-weight:700; } .slovnik a { border-bottom: solid 1px #55422d; display:inline-block; line-height:20px; } .objednavka { float:left; width:100%; letter-spacing:0.015em; background:url(../images/book.jpg); background-size:cover; background-position:center; } .objednavka a { float:left; width:100%; font-size:43px; line-height:53px; font-style:italic; color:#ad672a; padding:8vh 0 8vh 5%; } .objednavka-container { position:relative; float:left; width:42%; } .objednavka-left { float:left; width:75%; } .objednavka-sipka { position:absolute; bottom:3px; right:0; background:url(../images/sipky_prava.svg); width:46px; height:46px; background-size:46px 46px; } .left33 { float:left; width:calc(100%/3); font-size:32px; line-height:42px; font-weight:700; } .left33 a { float:left; width:100%; color:white; padding:0 10%; height:210px; text-align:center; display:table } #left33-1 { background:#5a7c4a } #left33-2 { background:#cc6a61 } #left33-3 { background:#4792a7 } #firmy { float:left; width:100%; margin:12vh 0 12vh 0; text-align: center; } #firmy-container { width:90%; margin:auto; } #firmy a { float:left; width:21%; margin:6vh 2% 2vh 2%; text-align: center;} #firmy img { height:3.5vw } #firmy img.vetsi { height:6vw; margin-top:-1vw } /* Detail */ .obsah { margin-top:10vh; } .obsah a { border-bottom:1px solid #55422d } .page-left { float:left; width:calc((100%/6)*2); padding-left:5%; padding-right:5%; margin-bottom:8vh } .submenu { display:inline; font-size:20px; line-height:32px; font-weight:700; border-bottom:solid 2px transparent; letter-spacing:0.015em; cursor:pointer } .submenu.active { border-bottom: solid 2px #55422d; } .submenu-mezera { clear:both; margin-bottom:8px; } .page-right { float:left; width:calc((100%/6)*3); padding-right:5%; padding-bottom:8vh } .page-right h3 { text-transform: uppercase; color:#ad672a; font-size:16px; line-height:26px; font-weight:700; } .page-right b { color:#ad672a; } .page-right a { font-weight:700; } .page-right .text { display:none; } .page-right .text0 { display:inline} .page-right2 { float:right; width:calc((100%/6)*3); padding-right:5%; margin-right:calc((100%/6));} .page-right2 h2 { text-transform:uppercase; color:#ad672a; font-size:30px; line-height:40px; font-weight:700; } .page-right-kniha { width:calc((100%/6)*3.5); padding-right:0; margin-top:10vh;} .kniha { display:inline-block; vertical-align:top; width:19%; margin-right:4%; color:#ad672a; margin-bottom:50px; cursor:pointer; } .kniha-ram { position:relative; float:left; width:100%; height:230px; text-align:center;} .kniha-ram img { width:100%; height:100%; object-fit:contain; font-family: 'object-fit: contain;'; } .kniha-filtr { display:none; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(71,146,167,0.7); text-align:center; } .kniha-filtr-text { display:table; width:100%; height:100%; color:white; text-transform:uppercase; font-size:20px; line-height:40px; letter-spacing:0.05em; font-weight:700; } .kniha:hover .kniha-filtr { display:block; } /* .kniha-ram-zluta-vert { position:absolute; right:0; top:0; width:7px; height:100%; background:#dfc167; } .kniha-ram-zluta-hor { position:absolute; left:0; bottom:0; height:7px; width:100%; background:#dfc167; } */ .kniha-nazev { float:left; font-size:18px; line-height:24px; font-weight:700; margin:20px 0 5px 0} .kniha-autor { clear:both; float:left; font-size:12px; line-height:18px; } .autor { font-size:18px; line-height:24px; font-weight:700; color:#ad672a; margin-bottom:30px } .autor img { max-width:300px; margin-top:20px } .neprodejne { display:none; } .vprodeji { display:inline-block; } .vyhledavani-hide { display:none; } .vyhledavani { display:inline-block; } .page-left-vyhledavani { position:relative; margin-top:20px; width:80%; height:4vh} #lupa { float:left; width:20px; height:20px; background:url(../images/lupa.png); cursor:pointer } .page-left-kniha input { position:absolute; background:transparent; width:calc(100% - 40px); border-top:none; border-left:none; border-right:none; height:18px; font-size:14px; line-height:18px; padding:5px 0; margin:-9px 0 0 20px; letter-spacing:0.01em; display:none } .page-left-kniha input::placeholder { font-size:12px; letter-spacing:0.1em;} .page-left-filtr { float:left; margin:3vh 0 20px 0; font-size:16px; line-height:26px; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; color:#ad672a; width:100%; } .page-left input[type="radio"] { display:none; position:absolute; width:13px; height:13px; cursor:pointer; border:0; } .page-left input[type="radio"] + label { float:left; width:13px; height:13px; margin-top:7px; background:url(../images/checkbox.png); cursor:pointer; } .page-left input[type="radio"]:checked + label { background:url(../images/checkbox.png) -13px; width:13px; cursor:pointer; } .filtr-text { float:left; margin:0 25px 0 15px; } /* Aktuality */ .aktuality a { float:left; width:100%; border-bottom:1px solid #ad672a; padding:4vh 0; font-weight:400;} .aktuality-left { float:left; width:calc(100% - 160px) } .aktuality-right { float:right; width:130px } .aktuality-right img { float:right; max-width:100%; max-height:100px } .aktuality-titulek { width:100%; font-size:20px; line-height:32px; font-weight:700; color:#ad672a; margin-bottom:10px } .aktuality-autor { text-transform:uppercase; } .aktuality-lomitko { margin:0 30px } .aktuality-text { margin-top:30px; } .aktuality-text b, .aktuality-text strong { color:#55422d; } .aktuality-text .aktuality-odkaz { float:right; width:200px; border:0; margin:0 30px; color:#ad672a; font-weight:400; font-style:italic; text-align:center;} .aktuality-text img { float:left; width:100%} .aktuality-odkaz-text { display:inline-block; } .aktuality-sipka { position:relative; top:8px; display:inline-block; background:url(../images/sipka.svg); width:28px; height:28px; background-size:28px 28px; margin-left:5px; cursor:pointer; } .aktuality-text a:hover .aktuality-sipka { background:url(../images/sipky_prava.svg); } /* Overlay */ .overlay { display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(85,66,45,0.7); z-index:100000 } .overlay-container { position:relative; width:calc(100% - 82px); height:100%; margin:auto; display:table; } .overlay-content { float:left; position:relative; width:100%; height:80vh; } .overlay-menu { position:relative; float:left; width:calc(100%/3); padding:5% 4%; height:100%; background:#dfc167; overflow-x:hidden; overflow-y:auto; } .overlay-menu-nadpis { font-size:32px; line-height:38px; letter-spacing:0.015em; font-weight:700; text-transform:uppercase; margin-bottom:6vh } .overlay-menu-nadpis-cislo { float:left; width:60px } .overlay-menu-nadpis-text { float:left; width:calc(100% - 60px) } .overlay-menu-polozka { display:inline; font-size:20px; line-height:32px; font-weight:700; letter-spacing:0.015em; cursor:pointer; border-bottom:2px solid transparent } .overlay-menu-polozka:hover, .overlay-menu-polozka.active { border-bottom:2px solid #55422d } .overlay-menu-container { display:none } .overlay-obsah { float:left; width:calc((100%/6)*4); height:100%; background:#f9f7f3; overflow-y:auto; padding:5% 8% 5% 4%; } .overlay-obsah-nadpis { color:#ad672a; text-transform:uppercase; font-size:16px; line-height:26px; font-weight:700; margin-bottom:3vh } .overlay-obsah-polozky { display:none; margin-top:12px; } .overlay-obsah-polozka { float:left; width:100%; margin-bottom:15px; } .overlay-obsah-nadpis-cislo { float:left; width:40px } .overlay-obsah-nadpis-text { float:left; width:calc(100% - 40px) } .overlay-obsah-kniha { padding:calc(15vh + 10px) 8% 10vh 4%; } .overlay-container-kniha { width:80%; } .overlay-kniha { position:relative; float:left; width:calc(100%/3); padding:15vh 8% 5vh 8%; height:100%; background:#f9f7f3; overflow-x:hidden; overflow-y:auto; } .overlay-kniha-container { display:none; } .overlay-kniha-foto { margin:auto; width:100%; max-width:300px; margin-bottom:15px; } .overlay-kniha-ram { position:relative; float:left; width:100%; height:100%; max-height:400px; margin-bottom:20px;} .overlay-kniha-ram img { float:left; width:100%; height:100%; max-height:400px; object-fit:contain; font-family: 'object-fit: contain;'; } /* .overlay-kniha-ram-zluta-vert { position:absolute; right:0; top:10px; width:10px; height:calc(100% - 10px); background:#dfc167; } .overlay-kniha-ram-zluta-hor { position:absolute; left:10px; bottom:-10px; height:10px; width:calc(100% - 10px); background:#dfc167; } */ .overlay-kniha-koupit { width:150px; margin:auto; } .overlay-kniha-koupit a { float:left; width:100%; margin-top:15px; } .overlay-kniha-koupit-text { float:left; font-size:22px; line-height:35px; color:#ad672a; font-style:italic; } .overlay-kniha-sipka { float:left; background:url(../images/sipky_prava.svg); width:40px; height:40px; background-size:40px 40px; margin-left:25px; } .overlay-kniha-nelze { clear:both; width:100%; text-align: center; } .overlay-kniha-head { float:left; } .overlay-kniha-nazev { color:#ad672a; font-size:25px; line-height:30px; font-weight:700; margin-bottom:5px;} .overlay-kniha-hodnoceni { float:right; color:#ad672a; font-size:16px; line-height:30px; font-weight:700;} .overlay-kniha-autor { color:#ad672a; font-size:12px; line-height:18px; } .overlay-kniha-popis { margin-top:20px; } .overlay-kniha-ukazka { margin-top:30px; } .overlay-kniha-ukazka a { color:#ad672a; font-weight:700; } .overlay-kniha-ukazka a:hover { border-bottom:1px solid #ad672a; } .overlay-o-knize { float:left; cursor:pointer; color:#ad672a; margin-top:20px; font-weight:700; line-height:18px } .overlay-o-knize.active { border-bottom:2px solid #ad672a; } .overlay-o-autorovi { float:left; cursor:pointer; color:#ad672a; margin-top:20px; margin-left:50px; font-weight:700; line-height:18px } .overlay-o-autorovi.active { border-bottom:2px solid #ad672a; } .overlay-o-autorovi-text { display:none } .zavrit { position:absolute; top:2vw; right:2vw; width:20px; height:22px; cursor:pointer; } .zavrit span { position:absolute; display:block; width:3px; height:24px; background-color:#55422d; left:8px } .zavrit span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);-o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} .zavrit span:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Reference */ .reference { border-bottom:1px solid #ad672a; padding:4vh 0; } .reference h3 { float:left; position:relative; width:100%; padding-right:100px; } .reference-text { display:none; margin-top:30px; } .reference-sipka { position:absolute; top:0; right:0; background:url(../images/sipka.svg); width:35px; height:35px; background-size:35px 35px; cursor:pointer; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);-o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .reference-sipka.active { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);-o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .reference-datum { clear:both; } .reference i { font-style:normal; color:#ad672a } /* Ceny */ .ceny b { color:#55422d; } .ceny-poptavka a { position:relative; float:right; margin-top:50px; font-size:20px; line-height:30px; color:#ad672a; border:0; font-weight:400; padding-right:100px; } .ceny-poptavka-text { float:left;} #sipka-poptavka { position:absolute; right:0; bottom:0; background:url(../images/sipka.svg); width:35px; height:35px; background-size:35px 35px; cursor:pointer; } .ceny-poptavka a:hover #sipka-poptavka { background:url(../images/sipky_prava.svg); } /* Zpět */ .zpet { line-height:30px; font-size:14px; text-transform:uppercase; letter-spacing:0.15em; } .zpet a { float:left; border:0 } #sipka-zpet { float:left; background:url(../images/sipka.svg); width:30px; height:30px; background-size:30px 30px; cursor:pointer; margin-right:15px; margin-bottom:30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);-o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .zpet a:hover #sipka-zpet { background:url(../images/sipky_prava.svg); } /* Kontakt */ #social-kontakt { margin-top:30px; } #social-kontakt a { float:left; width:35px; height:35px; margin-right:20px; border:0 } #social-kontakt #fb2 { width:35px; height:35px; fill:#ad672a; } #social-kontakt #ig2 { width:35px; height:35px; fill:#ad672a } /* Formulář */ #formular { float:left; max-width:650px; } .formular-left { clear:both; float:left; width:45px; } .formular-right { float:left; width:calc(100% - 45px); } .formular-right50 { float:left; width:320px; margin-bottom:25px;} #formular .navod { font-size:12px } #formular .navod a { font-weight: 400 } #formular input, #formular textarea { background:#ebebeb; border:0; font-size:16px; line-height:26px; width:calc(100% - 40px); height:46px; margin:15px 0 0 0; padding-left:10px; padding-right:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #formular input { width:120px; height:40px; margin-bottom:30px; } #formular textarea.textarea-hide { display:none; } #formular input#ukazka-file { display:none; } #formular input[type="file"] { background:transparent; height:auto; width:auto; margin:0; margin-left:-10px; } #formular input[type="file"]::-webkit-file-upload-button { -webkit-box-align: center; text-align: center; color: #55422d; padding:10px; cursor:pointer; border-image: initial; background-color: #ebebeb; box-sizing: border-box;outline: 0; } #odeslat { float:right; cursor:pointer; margin-top:80px; margin-bottom:50px } #odeslat-text { float:left; font-size:24px; line-height:30px; color:#ad672a; font-style:italic; } #sipka-odeslat { float:left; background:url(../images/sipka.svg); width:30px; height:30px; margin-left:20px } #formular input[type="radio"] { position:absolute; opacity:0; cursor:pointer; border:0; %position:relative; %opacity: 1; %float:left; width:auto;} #formular input[type="radio"] + label { position:relative; display:inline-block; background:url(../images/checkbox1.png); background-repeat:no-repeat; vertical-align:top; height:13px; margin-top:20px; margin-bottom:15px; cursor:pointer; %display: none; } #formular input[type="radio"]:checked + label { background:url(../images/checkbox2.png); background-repeat:no-repeat; cursor:pointer; %display: none; } #formular label { padding-left:30px; margin-right:40px;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .radio-top { margin-top:-6px;} #formular label .navod { position:relative; top:-8px; } #formular input[type="checkbox"] { position:absolute; opacity:0; cursor:pointer; border:0; %position:relative; %opacity: 1; %float:left; width:auto;} #formular input[type="checkbox"] + label { position:relative; display:inline-block; background:url(../images/checkbox1.png); background-repeat:no-repeat; vertical-align:top; height:13px; margin-top:20px; margin-bottom:15px; cursor:pointer; %display: none; } #formular input[type="checkbox"]:checked + label { background:url(../images/checkbox2.png); background-repeat:no-repeat; cursor:pointer; %display: none; } #formular a { font-weight:400 } .formular-inicialy { clear:both; float:left; width:100px; margin-top:25px} #formular .formular-informace input { float:left; width:100%; max-width:300px; margin-top:20px; margin-bottom:0; } .error { color:red } #hlaska { display:none; text-align:center;max-width:650px; } /* Footer */ #kontakt { float:left; width:calc(100%/3); letter-spacing:0.015em; margin:12vh 0 16vh 0; padding:0 40px;} #kontakt-nadpis { font-size:32px; line-height:42px; font-weight:700; color:#ad672a; margin-bottom:30px; } #kontakt a { font-weight:700; } #kontakt a.formular { display:inline-block; border-bottom:solid 1px #55422d; line-height:20px; }