/***** RESET *****/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } /***** COLORS *****/ @cerna: #222222; @tmaveSeda: #555555; @seda: #999999; @svetleSeda: #cccccc; @nasedla: #eeeeee; @bila: #ffffff; @ruda: #A00000; @cervena: #FF0000; @zluta: #FCD636; @modra: #446FBD; //#3D6199 @tmaveModra: darken(@modra, 20%); @font: @cerna; @border: @svetleSeda; @shadow: @seda; .tooltipColor { background:@cerna; color:@bila; } .popup { background:@bila; color:@cerna; } .checkRadioSeda { background:@nasedla; color:@cerna; border:1px solid @svetleSeda; } .checkRadioModra { background:@modra; color:@bila; border:1px solid @tmaveModra; } .asButton, .button { background:@modra; color:@bila; border:1px solid @tmaveModra; cursor:pointer; text-decoration:none; } /***** TYPO *****/ // font-family: 'Quicksand', Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; // font-family: 'EB Garamond', Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif; @fontSize: 0.75rem; // 0.75rem = 12px, 0.875rem = 14px, 1rem = 16px; @smallFontSize: @fontSize * 0.8; @lineHeight: @fontSize * 2.1; .fontSize(@x: 1) { font-size:@fontSize * @x; } .lineHeight(@x: 1) { line-height:@lineHeight * @x; } .fontFamily { font-family:Tahoma, Verdana, Segoe, sans-serif; } .fontFamilyQuicksand { font-family:'Quicksand', Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; } .fontFamilyGaramond { font-family:'EB Garamond', Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif; } .fontFull(@x: 1) { .fontFamilyQuicksand; .fontSize(@x); .lineHeight(@x); color:@font; } .textOverflow { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .bold { font-weight:bold; } body { .fontFull; } h1 { .fontFull(2); .fontFamilyGaramond; } h2 { .fontFull(1.8); .fontFamilyGaramond; } h3 { .fontFull(1.5); .fontFamilyGaramond; } h4 { .fontFull(1.4); .fontFamilyGaramond; } h5 { .fontFull(1.2); .fontFamilyGaramond; } h6 { .fontFull(1.1); .fontFamilyGaramond; } a, .link { text-decoration:underline; color:@modra; &:hover { text-decoration:none; } &:visited { color:@tmaveModra; } &:active { } } a.icon, .link.icon { text-decoration:none; &:hover { text-decoration:none; } &:visited { color:@tmaveModra; } &:active { } } input, textarea, select, button, option { .fontFamily; .fontSize; .lineHeight; padding:4px 5px; width:100%; box-sizing:border-box; } input, textarea, select { display:block; .border; } input, select { /*height:@lineHeight * 1.3;*/ padding:1px 5px; } button, input[type='submit'] { cursor:pointer; .trans; } button:hover, input[type='submit']:hover { } input[type='checkbox'], input[type='radio'] { width:auto; height:auto; } label { display:flex; align-items:baseline; } /***** COMPONENT *****/ @areaWidth: 960px; @panelBar: 330px; .trans { transition:300ms; } .row { .flex; width:100%; position:relative; } .area { width:@areaWidth; margin:0 auto; .boxSizing; } .area.marginTran { margin-right:@panelBar; } .padding(@x:5px) { padding:@x; } .paddingHorizontal(@x:5px) { padding-left:@x; padding-right:@x; } .paddingVertical(@x:5px) { padding-top:@x; padding-bottom:@x; } .margin { margin:5px; } .title { text-align:center; } .block { .padding; display:block; } .boxSizing { box-sizing:border-box; } .flex { display:block; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; /*-webkit-box-flex:1; -webkit-flex:1; -moz-box-flex:1; -ms-flex:1; flex:1; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center;*/ flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:stretch; align-content:flex-start; } /*.row.vertical { -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } */ .col { .boxSizing; flex:1; .padding; } .col > .col { padding:0; } .hiddenSeparator { clear:both; width:100%; height:0; border:none; margin:0; } .separator { clear:both; width:100%; border:none; .borderDotted; } .calc(@x:10px) { width:calc(~"100% - @x"); } .vertical { } .borderRadius(@x:5px) { border-radius:@x; } .textShadow(@x:2px) { text-shadow:@x @x @x @tmaveSeda; } .boxShadow(@x:2px) { box-shadow:@x @x @x @svetleSeda; } .boxShadowFlow(@x:2px) { box-shadow:0px 0px @x @svetleSeda; } .boxFlow(@x:2px) { box-shadow:0 0 @x @svetleSeda; } .animace { transition:300ms; } .border { border:@svetleSeda solid 1px; } .borderDotted { border-top:@seda dotted 1px; } .icon.fa { color:@tmaveSeda; .fontSize(1.8); .lineHeight(0.6); } .link { cursor:pointer; } .empty { display:none; } .dot3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } // tooltip .linkTooltip { cursor:pointer; position:relative; } .tooltip { position:absolute; z-index:1000000; display:flex; min-width:100px; width:auto; max-width:600px; .boxShadowFlow; .borderRadius; padding:3px 5px; .fontFull; .tooltipColor; .lineHeight(0.8) } .icon .tooltip { width:@panelBar * 0.8; left:0px; top:25px; } .popup { border:@seda solid 1px; left:calc(~"50% - 300px"); top:30vh; position:fixed; z-index:1000000; display:flex; min-width:100px; width:600px; .boxShadow; .borderRadius; padding:3px 5px; .fontFull; .popup; .lineHeight(0.8); } .close { right:10px; top:10px; position:absolute; cursor:pointer; display:block; } // form .radioBlock { justify-content:flex-start; } .radioBlock > .col { flex-basis:50px; } .checkInputBlock { .checkRadioSeda; cursor:pointer; padding:3px 5px; display:flex; align-items:flex-start; } .checkInputBlock.active, .checkInputBlock.hover { .checkRadioModra; } .checkInputBlock { } .checkInputBlock input[type='checkbox'], .checkInputBlock input[type='radio'] { flex:none; margin:6px 6px 0 0; } .checkInputBlock .countSearched { text-align:right; flex:1 1 auto; } .fieldsetBlock { .padding; } .searchInputBlock { display:block; display:flex; align-items:flex-end; max-width:300px; margin:0 auto; } .searchInputBlock:last-child { align-items:center; } .searchButtonDiv { flex:none; } .listItemForm { padding:2px; } .label { width:5rem; } .searchBlock, .inputBlock { display:block; display:flex; align-items:flex-end; width:100%; } .inputForm { flex:auto; } .searchInputBlock .inputForm { border-right:none; .fontFamilyQuicksand; } .checkInputBlock { width:auto; margin-bottom:2px; } .ui-checkboxradio-icon { width:15px; margin-right:5px; flex:none; } .title.leftAlign { text-align:left; border-bottom:@tmaveSeda solid 3px; display:inline-block; .lineHeight(1.5) } .refresh { width:100%; height:100%; background:@bila url(../images/status.gif) center center no-repeat; opacity:0.6; position:fixed; top:0; left:0; } .titleRadio { .fontFull(1.2); cursor:help; display:block; padding:5px 5px 0; } .titleRadio .icon.fa { .fontSize(1.3); } /***** BODY *****/ html { height:100%; } body { height:100%; position:relative; } .site { display:flex; min-height:100vh; flex-direction:column; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } .site.textLayout.showPanelBar .content { max-width:100vw; } // header .header { height:auto; background:@nasedla; .fontFamilyQuicksand; padding:5px; } .header .headerContent { justify-content:space-between; } .header .col { flex:0 1 auto; } .header .titleMV { .fontSize(2.2); .lineHeight(0.6); color:@font; /*.fontFamilyQuicksand; font-weight:bold;*/ .fontFamilyGaramond; text-decoration:none; padding:0 15px; } .header .titleMV img { } .langMenu { justify-content:flex-end; width:auto; } .langMenu .langList { flex-basis:20px; padding:0 5px; } .langMenu .langLink { display:block; text-align:center; } .langMenu .langList.active .langLink { text-decoration:none; cursor:normal; color:@cerna; font-weight:bold; } .headerSearch { .row; justify-content:center; max-width:600px; margin:0 auto; } .headerSearch .searchInputBlock { display:block; display:flex; align-items:stretch; max-width:600px; margin:0 auto; width:100%; } .headerSearch .navBar { cursor:pointer; flex:none; margin-right:10px; padding:6px 4px; } .headerSearch .headerSearchInput { flex:1 1 200px; letter-spacing:1px; } .headerSearch .button { flex:none; } .headerSearch .button .icon { padding:5px; color:@bila; } .headerSearch .button.hidden { display:none; } .headerSearch .resetButtonIcon { margin-left:10px; } .headerSearch.hide { display:none; } nav.menu { } .mainMenu { display:flex; background:@nasedla; .fontFamilyQuicksand; } .mainMenu .menuItem { margin-left:1px; position:relative; } /*.mainMenu .menuItem.menuItemActiv { background:@bila; } .mainMenu .menuItem:hover, .mainMenu .menuItem.menuItemActiv:hover { background:@svetleSeda; }*/ .mainMenu .menuItem .link { text-decoration:none; padding:5px 10px; display:block; } .mainMenu .menuItem.menuItemActiv .link { background:@bila; } .mainMenu .menuItem:hover .link, .mainMenu .menuItem.menuItemActiv:hover .link { background:@svetleSeda; } .mainMenu .menuItem:first-child { margin-left:1px; } //.mainMenu .closeTab { padding:0 0 0 5px; } //.mainMenu .closeTab .icon { .fontSize(1.1); } .menuTextDisabled { } .favoritBar {} .navAdvance.text { position:relative; margin:0 auto; padding:3px 10px; display:table; } // section .main { flex:1 0 auto; display:flex; align-items:flex-start; align-content:flex-start; } .main .row > .col { flex-basis:200px; } .main .row > .aricle { flex-basis:300px; } .selectedIndexes { display:flex; flex-wrap:wrap; align-items:baseline; } .selectedIndexes strong { .fontFull(0.8); padding:0 10px; font-weight:bold; } .selectedIndexes ul { } .selectedIndexes .list { .checkRadioSeda; padding:0 3px; .fontFull(0.8); } // navBar .panelBar { background:@bila; width:0; height:0; max-height:100%; display:block; border-left:@cerna solid 1px; position:relative; visibility:hidden; opacity:0; transition:visibility 0s 200ms, opacity 200ms ease, width 200ms ease; } .showPanelBar .panelBar { width:@panelBar; visibility:visible; opacity:1; transition:opacity 200ms ease, width 200ms ease; height:auto; } .panelBar .close { position:absolute; right:10px; top:10px; } .panelBar .title { padding:0 10px; .fontFull(1.4); } .panelBar .mainSearchInputBlock { display:none; } .panelBar .mainSearchArea { display:none; } .panelBar .refresh { width:100%; height:100%; background:@bila url(../images/status.gif) center center no-repeat; opacity:0.6; position:absolute; top:0; left:0; } .accordion { } .accordion hr { } .accordion .fieldsetBlock { } .accordion .fieldsetBlock .titleRadio { .borderRadius; cursor:pointer; .checkRadioSeda; padding:0 5px; width:calc(~"100% - 10px"); } .accordion .fieldsetBlock .titleRadio:before { font-family:FontAwesome; content:"\f078"; float:right; } .accordion .fieldsetBlock.show .titleRadio { background:@seda; } .accordion .fieldsetBlock.show .titleRadio:before { font-family:FontAwesome; content:"\f077"; float:right; } .accordion .fieldsetBlock .fieldsetBlockList { visibility:hidden; opacity:0; transition: visibility 0s 300ms, opacity 300ms ease, height 300ms ease; height:0; } .accordion .fieldsetBlock.show .fieldsetBlockList { visibility:visible; opacity:1; transition:opacity 300ms ease, height 300ms ease ; height:auto; padding-left:10px; } .accordion .fieldsetBlock.require .titleRadio:after { font-family:FontAwesome; content:"\f069"; .fontSize(0.7); color:@cervena; } .accordion .fieldsetBlock { display:none; } .showPanelBar .accordion .fieldsetBlock { display:block; } .barInfo { .padding; } .barInfo li { .fontFull(0.9); .padding; display:flex; .lineHeight(0.7); font-family:Tahoma, Verdana, Segoe, sans-serif; } .barInfo li .smallInfo { .fontSize(0.8); color:@cervena; flex:none; margin:0 10px 0 0; .lineHeight(0.8); } // content .main > .content { flex:1 1 auto; width:calc(~"99% - 20px"); padding:0 10px; } .content { width:auto; margin:20px 0; } .showPanelBar .content { max-width:calc(~"100vw - 370px"); } .listArticle { .flex; align-items:baseline; } .list .listArticle { width:100%; .paddingVertical(4px); } .list .listArticle:nth-child(even) { background:@nasedla; } .list .listArticle.active { background:@zluta; } .list .listArticle .item { .flex; .paddingHorizontal; } .list .listArticle .link { order:1; } .list .listArticle .link.button { background:none; border:none; } .list .listArticle .link.button.inBasket .icon { color:@cerna; } .list .listArticle .type { order:2; align-self:flex-end; } .list .listArticle .closeBlock { order:3; .paddingHorizontal; } .content.mosaic { .row; justify-content:space-around; align-content:space-around; } .mosaic .listArticle { .flex; flex-basis:20%; .padding; .boxFlow(5px); margin-bottom:20px; position:relative; } .mosaic .listArticle.active { background:@zluta; } .mosaic .listArticle:hover { background:@nasedla; } .mosaic .listArticle .link { text-decoration:none; margin:0 auto; } .mosaic .listArticle .img { .fontFull(1.6); min-height:80px; text-align:center; display:block; margin:0 auto; } .mosaic .listArticle .mosaicTitle { text-align:center; color:@font; border-top:@svetleSeda dotted 1px; } .mosaic .listArticle .typeMosaic { display:block; text-align:center; } .mosaic .listArticle .noMosaic { display:block; text-align:center; .paddingVertical(15px); } .mosaic .listArticle .noMosaic .icon { text-align:center; display:block; } .mosaic .listArticle .basket { position:absolute; top:5px; right:5px; } .mosaic .listArticle .link.close.linkIco, .mosaic .listArticle .basket.itemIcon .linkIco { background:@bila; .borderRadius(30px); opacity:0.8; border:none; } .mosaic .listArticle .link.close.linkIco .icon, .mosaic .listArticle .basket.itemIcon .linkIco .icon { color:@cerna; .fontSize(1.8); .lineHeight(1.25); width:22px; text-align:center; } // pagination .paginationBlock { } .paginationBlock .icon { .padding(5px); .fontSize(1.2); .lineHeight(0.8); } .paginationBlock .paginIco {} .paginationBlock .paginNum { .paddingHorizontal; width:40px; } .paginationBlock .nolink .icon { color:@svetleSeda; } .paginationBlock .detail { } .paginationBlock.center { margin:0 auto; } .paginationBlock.center .paginationBlock { margin:0 auto; } .viewControl { } .viewControl option { } .viewControl .viewControlCountLine { .paddingHorizontal; } .viewControl .viewControlNav { .lineHeight(1.2); margin-left:15px; } .viewControl .viewControlNav select { .paddingHorizontal; } .viewControl.detail { } // ikony kosik, prilohy, permalink .fullAttachments { flex:none; order:2; } .itemIcon { .flex; display:inline-flex; } .link.close.linkIco, .itemIcon .linkIco { display:block; .paddingHorizontal(5px); } .itemIcon .linkIco .icon { .fontSize(1.4); .lineHeight(1); } .itemIcon .linkIco.inBasket .icon { color:@seda; } //detail .fullContentBlock.detail { width:100vw; max-width:100%; } .itemRow { .row; justify-content:flex-start; } .itemRow .item { .flex; } .itemRow .tabularLabel { text-transform:uppercase; flex-basis:130px; } .itemRow .tabularValue { text-align:left; } .detail.area { .paddingVertical(15px); } .detail.area .article { .paddingVertical(30px); column-count:2; } .itemRow .tabularValue { width:calc(~"100% - 130px"); } .tabularLabel { font-weight:bold; } .titleRecord h1 { .fontFamilyGaramond; } .titleRecord h2 { .fontFull(1.2); font-style:italic; text-transform:uppercase; .fontFamilyGaramond; } // detail img .allThumbsBlocWrap { width:100vw; max-width:100%; height:calc(~"100vh - 60px"); display:block; background:@cerna; max-width:100%; position:relative; } .allThumbsBloc { width:100vw; max-width:100%; height:100%; display:block; } .allThumbsBloc .imgDetail { display:block; margin:0 auto; width:auto; height:auto; max-width:100%; max-height:100%; } .detail .inDetailImg { z-index:1000; position:absolute; bottom:5px; left:5px; overflow:hidden; clear:both; display:inline-block; background:@bila; } .detail .inDetailImg .icon { .fontSize(2); .lineHeight(1.5); float:left; .paddingHorizontal(15px); background:@svetleSeda; cursor:pointer; } .detail .h1Detail { .fontFull(1.5); .fontFamilyQuicksand; color:@cerna; .paddingHorizontal(20px); float:left; } .viewControl.detail { position:absolute; top:5px; left:5px; } .viewControl.detail .link { background:@tmaveSeda; display:block; .paddingHorizontal(10px); } .viewControl.detail .icon { color:@bila; .fontSize(2); .lineHeight(1.6); } .viewControl.detail .arrow { padding-right:5px; .fontSize(1); } .paginIco.detail { position:absolute; top:40vh; z-index:5000; } .paginIco.detail .link, .paginIco.detail .noLink { display:block; } .paginIco.detail .icon { padding:5px 15px; background:@tmaveSeda; color:@bila; .fontSize(3); .lineHeight(2); } .paginIco.detail.forward { right:10px; } .paginIco.detail.backward { left:10px; } .paginIco.detail .nolink { display:none; } .linksGallery { position:absolute; bottom:10px; right:10px; } .linksGallery .link { position:relative; color:@bila; } .linksGallery .numInIcon { .fontFull(1); position:absolute; bottom:2px; right:2px; .borderRadius(10px); background:@zluta; font-weight:bold; .lineHeight(0.5); padding:1px 5px; color:@cerna; } .linksGallery .asButton, .linksGallery .button { .button; border:none; .paddingHorizontal(8px); .paddingVertical(1px); } .linksGallery .asButton .icon, .linksGallery .button .icon { color:@bila; .fontSize(1.8); .lineHeight(1.3); } .itemIcon .linkIco.inBasket .icon { color:@bila; } .linksGallery.noImage { top:10px; } //selectedInputs .selectedInputs { overflow:hidden; } .tagBlock { padding:5px 10px; .border; position:relative; float:left; margin:5px; } .tagBlock .close { top:0px; } .tagBlock .icon { font-size:16px; } .tagBlock { cursor:pointer; } //basket .basketLayout.showPanelBar .content { max-width:100vw; .calc(10px); } .emptyBasket.button { .padding; text-decoration:none; } .basketRow { } .basketRow .col { max-width:200px; margin:1px; text-align:center; } .basketRow .col.asButton { color:@bila; } .ui-widget-content .sendPopup { padding:10px; width:100%; max-width:200px; text-decoration:none; display:block; text-align:center; color:@bila; } .basketRow.row { justify-content:center; } //basket - reserve #openerBasketReservePopup { margin:5px; } #basketReservePopup { } #basketReservePopup input, #basketReservePopup textarea, #basketReservePopup select { border:1px solid #aaa; } #basketReservePopup textarea { height:150px; } //basket - to friend #basketToFriendPopup { } #basketToFriendPopup input, #basketToFriendPopup textarea, #basketToFriendPopup select { border:1px solid #aaa; } #basketToFriendPopup textarea { height:150px; } .itemRowBasket { text-align:right; } .itemRowBasket .icon { margin-right:5px; font-size:16px; display:none; } .ui-dialog { background:@bila; .padding; } .relatedBLock {} .relatedBLock a { display:block; } .button.searchButtonDiv.popup { text-align:center; } .button.searchButtonDiv.popup a { text-decoration:none; line-height:30px; color:#fff; } // footer .footer { .fontFull(0.9); padding:15px 5px; } .footerRow { padding-bottom:10px; .borderDotted; } .footerBlock { flex-basis:220px; .paddingHorizontal(20px); } .footerBlock p, .footerBlock li { .fontFamilyQuicksand; .fontSize(1); } .footerBlock p strong { font-weight:bold; } .footerBlock img { display:block; margin:5px 0 20px; } .contactBlock { order:2; } .footerNewsBlock { order:3; padding-right:0; } .copyrightVadeBlock { order:1; padding-left:0; } .footerNewsBlock strong { font-weight:bold; } .copyrightBlock { .paddingVertical(10px); .borderDotted; } .copyrightBlock p { text-align:center; .fontFamilyQuicksand; } // .nicNenalezeno { width:100%;margin:100px 0px 0px 0;text-align:center; .fontFull(1.8);} // debug .debugBox { border:@ruda dotted 2px; position:relative; } .debugTemplate { background:@ruda; position:absolute; top:0; left:0; color:@bila; font-size:12px; line-height:12px; padding:2px 5px; display:block; } /****************************************** Zoomify On Page ************************************************/ .allThumbsBlocWrap { height:calc(~"100% - 115px"); } #zoomifyContent { width:calc(~"100% - 19px"); height:100%; border:@cerna solid 10px; background:@cerna; display:flex; flex-direction:column; justify-content:center; align-items:center; } #showZoomify { width:100%; height:calc(~"100vh - 240px"); } #zoomSliderTrack { display:none; } .detail .inDetailImg { top:2px; left:2px; bottom:auto; } .viewControl.detail { top:42px; left:2px; } .viewControl .viewControlNav { margin-left:0; } .viewControl.detail .link { padding:0 8px; margin-bottom:2px; } .detail .inDetailImg .icon { padding:0 16px; } .detail .h1Detail { text-decoration:underline; cursor:pointer; } .detail .h1Detail:hover { text-decoration:none; } .imageMenu { height:100px; overflow-x:auto; width:100%; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding:10px; } .imageMenu li { width:100px; padding:0 2px; display:block; } .imageMenu a { width:100px; display:block; } .imageMenu a img { width:100%; display:block; max-height:100px; } .itemIcons { position:absolute; bottom:2px; left:2px; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; } .itemIcons .itemIcon { margin:1px; } .itemIcons .itemIcon .link { display:block; text-decoration:none; padding:0; } .itemIcons .itemIcon .icon { color:@bila; width:30px; height:30px; line-height:30px; background:@tmaveSeda; display:block; text-align:center; font-size:22px; } .itemIcons .tooltip { right:10px; } .detail .h1Detail { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:calc(~"100% - 140px"); } .detail .inDetailImg { max-width:calc(~"100vw - 40px"); } /***** MEDIA *****/ /** < 1200px **/ @media (max-width:1220px) { .area { width:100%; } } /** < 980px **/ @media (max-width:980px) { .area { width:100%; } } /** < 800px **/ @media (max-width:800px) { .searchInputBlock { width:100%; float:none; } } /** < 600px **/ @media (max-width:640px) { .contactBlock { order:1; } .footerNewsBlock { order:2; .paddingHorizontal(20px); text-align:left; } .copyrightVadeBlock { order:3; .paddingHorizontal(20px); } .showPanelBar .panelBar { margin:0 0 20px 0; width:100%; max-width:100%; } .showPanelBar .content { margin:0 0 20px 0; width:100%; max-width:100% !important; } #zoomifyContent { flex-direction:row; } } /** < 480px **/ @media (max-width:480px) { }