* { margin:0px; padding:0px; color:#fff; font-family:Arial;} body { width:200%; background:#000 url('../img/bg.png') 0px 0px repeat-x; } body { width:100%; overflow-x: hidden; overflow-y: auto; } #all { overflow:hidden; min-height:660px; background-color:rgba(0,0,0,0.2); background: url('../img/bg-podhursky.jpg') 50% 0px no-repeat;} #all > div { width:50%; float:left; background-color:rgba(0,0,0,0.3);} #all > div > br { clear:both; } #all > div > ul.menu { display:block; margin:10px 0px 20px 0px ; width:100%; height: 30px; } #all > div > ul.menu li { display:inline-block; margin:0px 0px; display:block; min-width:20px; background-color:rgba(0,0,0,0.4); height:55px;} #all > div > ul.menu li a { display:block; color:#999; font-size:13px; text-transform:uppercase; text-decoration:none; padding: 20px 10px; height:15px;} #all > div > ul.menu li.selected a { color:#fff; } /* #all > div > div.obsah h3 { background-color:rgba(0,0,0,0.3); } #all > div > div.obsah p { background-color:rgba(0,0,0,0.2); margin-bottom:10px; } */ #all { position:relative; } #all #home { display:block; font-family:Verdana; color:#fff; position:absolute; left:50%; margin-left:-75px; top:0px; background: url('../img/button-top.png') 0px 0px no-repeat; width: 150px; height:100px; text-align:center; text-decoration:none; transition:margin-left 0.5s; } #all #home h3 { font-size:24px; font-weight:normal; margin-top:16px;} #all #home h2 { font-size:12px; font-weight:normal; } #all #podhursky ul.menu { position:absolute; top:0; left:50%; margin-left:70px; white-space:nowrap; transition:margin-left 0.5s; } #all #podhursky ul.menu li { display:inline-block; background: url('../img/cara.png') 0px 0px no-repeat;} #all #podhursky ul.menu li:first-child { background: url('') 0px 0px no-repeat;} #all #podhursky ul.menu li.contact { float:right; } #all #podhursky > h2 { width:100%; height:120px; margin-top:70px; background: url('../img/h1-zdenek-podhursky6.png') 70% 20px no-repeat; overflow:hidden; text-indent:-1000px; pointer-events:none; } #all #podhursky div.obsah { float:right; margin-left:0px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; } #all #underhill ul.menu { position:absolute; top:0; right:50%; margin-right:70px; text-align:right; white-space:nowrap; transition:margin-left 0.5s; } #all #underhill ul.menu li { display:inline-block; background: url('../img/cara.png') 100% 0px no-repeat;} #all #underhill ul.menu li:last-child { background: url('') 0px 0px no-repeat;} #all #underhill ul.menu li.contact { float:left; } #all #underhill > h2 { width:100%; height:120px; margin-top:70px; background: url('../img/h1-underhill6.png') 30% 5px no-repeat; overflow:hidden; text-indent: -1000px; pointer-events:none; } #all #underhill div.obsah { float:left; position:relative; margin-right:0px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; } #con_u { font-size:14px; color:#666; text-decoration:none; position:absolute; top:30px; left:20%; margin-left:-390px;} #con_p { font-size:14px; color:#666; text-decoration:none; position:absolute; top:30px; right:20%; margin-right:-390px;} /* #all > div > ul li { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } */ #all > div > div.obsah { width:calc(50vw - 320px); min-width:300px; /*background-color:rgba(0,0,0,0.5);*/ padding: 0px 20px 20px 20px; min-height:420px; transition:width 0.5s; } #all[data-part="podhursky"] #podhursky .menu { margin-left:145px; } #all[data-part="underhill"] #underhill .menu { margin-right:145px; } #all[data-part="podhursky"] #home { margin-left: 0px; } #all[data-part="underhill"] #home { margin-left:-150px; } #all[data-part="podhursky"] > div > div.obsah, #all[data-part="underhill"] > div > div.obsah { width:calc(100vw - 320px); } #all > div > div.obsah h1 { clear:both; font-weight:normal; text-transform:uppercase; color:#999; font-size:18px; margin-top:20px;} #all > div > div.obsah h2 { clear:both; font-weight:normal; text-transform:uppercase; color:#999; font-size:16px; margin-top:20px;} #all > div > div.obsah h3 { clear:both; font-weight:normal; text-transform:uppercase; color:#999; font-size:13px; margin-top:20px;} #all > div > div.obsah h4 { font-weight:normal; color:#666; font-size:12px; } #all > div > div.obsah h5 { font-weight:normal; color:#555; font-size:12px; } #all > div > div.obsah h6 { font-weight:normal; color:#444; font-size:12px; } #all > div > div.obsah p { color:#aaa; font-size:12px; margin:5px 0px; } #all > div > div.obsah strong { } #all > div > div.obsah a { } #all > div > div.obsah > a { display:block; float:left; margin:5px;} #all > div > div.obsah > a img { border:2px solid #000;} #all > div > div.obsah > img { display:block; float:right; margin:5px; border:2px solid #000; max-width:calc(100% - 14px); } #all > div > div.obsah > iframe { width:calc(100vw - 320px); height:calc(56.25vw - 180px); } #all > div > div.obsah ul { } #all > div > div.obsah ul li { font-size:12px; color:#aaa; } #all > div > div.obsah table { } #all > div > div.obsah table tr th { padding:2px 5px; font-size:12px; color:#fff; } #all > div > div.obsah table tr td { padding:2px 5px; font-size:12px; color:#aaa; vertical-align: top;} #all > div > div.obsah div { float:left; width:calc(33.33% - 20px); margin-right:20px; } #all > div > div.obsah p.dual { column-count:2; column-gap: 2em; column-rule: 1px solid #333; } #all > div > div.obsah p.multi { column-count:3; column-gap: 1em; column-rule: 1px solid #333;} #all > div > div.obsah .prd { width:100%; background-color:#090909; margin-top:10px; } #all > div > div.obsah .prd img { float:left; max-height:90px; margin-right:10px; border:1px solid #999;} #all > div > div.obsah .prd h3 { clear:none; margin-top:0px; padding-left:10px; } #all > div > div.obsah .prd p { margin-left:20px; } #footer { position:absolute; width:100%; text-align:center; color:#666; font-size:10px; height:10px; padding:10px 0px; background: url('../img/hr-pata.png') 50% 0px no-repeat; } #footer a { color:#666; text-decoration:none; } #footer a:hover { text-decoration:underline; } #footer strong a { color:#fff; text-decoration:none; } #all > div > div.obsah div.mp3 { float:left; display:block; width:20px; height:20px; background-color:#fff; padding:0px; margin-left:10px; margin-top:15px;} #all > div > div.obsah ul.audio_list { margin:20px 0 50px 20px; } #all > div > div.obsah ul.audio_list > li { display:block; position:relative; padding-left:15px; font-size:12px; margin-top:5px; cursor:pointer; transition:color 0.3s; width:max-content; } #all > div > div.obsah ul.audio_list > li:before { content:'⏵'; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:15px; transition:font-size 0.3s; } #all > div > div.obsah ul.audio_list > li:hover { color:#fff; } #all > div > div.obsah ul.audio_list > li:hover:before { font-size:20px; } #all > div > div.obsah ul.audio_list + audio { position:absolute; bottom:0; left:0; right:0; } #all > div > div.obsah table.slozeni { } #all > div > div.obsah table.slozeni td { vertical-align:top; width:32%; } #all > div > div.obsah table.slozeni h3 { float:left; margin:0px 10px 0px 0px; } #all > div > div.obsah .l { float:left; } #all > div > div.obsah div.galery { height:180px; overflow:hidden; min-width:200px; } #all > div > div.obsah div.galery p { margin:0px; padding:5px; position:absolute; background-color:rgba(0,0,0,0.5);} #all > div > div.obsah div.galery { height:auto; margin-bottom:20px; } #all > div > div.obsah div.galery > a:not(:empty){ display:block; width:100%; height:0; padding:0 0 75% 0; position:relative; } #all > div > div.obsah div.galery > a > img { display:block; width:100%; position:absolute; left:0; top:0; height:100%; object-fit:cover; } @media(min-width:1025px){ #all > div > div.obsah h1 { font-size:32px; } #all > div > div.obsah h2 { font-size:24px; } #all > div > div.obsah h3 { font-size:20px; } #all > div > div.obsah h4 { font-size:16px; } #all > div > div.obsah p { font-size:16px; line-height:1.5em; } #all > div > div.obsah p + h4 { margin-top:1em; } #all > div > ul.menu li a { font-size:15px; } } @media(max-width:1024px){ #all > #podhursky > ul.menu, #all > #underhill > ul.menu { top:76px; height:auto; margin:0; padding:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(5px); z-index:3; } #all > #podhursky > ul.menu { margin-left:70px !important; } #all > #underhill > ul.menu { margin-right:70px !important; } #all > #podhursky > ul.menu > li, #all > #underhill > ul.menu > li { display:block; background:none; height:auto; overflow:hidden; max-height:0; transition:max-height 0.3s; } #all > #podhursky > ul.menu > li { border-left:1px solid #272727; } #all > #underhill > ul.menu > li { border-right:1px solid #272727; } #all > #podhursky > ul.menu > li > a, #all > #underhill > ul.menu > li > a { padding-top:12px; padding-bottom:12px; } #all > #podhursky > ul.menu > li:first-child > a, #all > #underhill > ul.menu > li:first-child > a { padding-top:20px; } #all > #podhursky > ul.menu > li:last-child > a, #all > #underhill > ul.menu > li:last-child > a { padding-bottom:20px; } #all > #podhursky > h2.show + ul.menu > li, #all > #underhill > h2.show + ul.menu > li { max-height:47px; } #all > #podhursky > h2.show + ul.menu > li:last-child, #all > #underhill > h2.show + ul.menu > li:last-child { border-bottom:1px solid #272727; } #all #podhursky > h2, #all #underhill > h2 { position:absolute; width:calc(50% - 70px); left:50%; margin:0 0 0 70px; top:0; height:75px; background-position:0% 50%; background-size:auto 90%; z-index:2; pointer-events:all; } #all #underhill > h2 { left:auto; right:50%; margin:0 70px 0 0; background-position:100% 50%; } #all #podhursky div.obsah, #all #underhill div.obsah { margin-top:250px; } #all[data-part="podhursky"] > #podhursky > ul.menu, #all[data-part="podhursky"] #podhursky > h2 { margin-left:145px !important; } } @media(max-width:768px){ /* #all { background-size:125% auto; background-position:50% -50px; } */