/*------------------------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, ul,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-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ .pobockyNaseptavani { display:block; width:calc(100% - 40px); margin-left:22px !important; margin-top:10px !important; line-height:50px; text-indent:10px; } .filter-inputs { display:none !important; } .filters > .selected { display:none !important; } .summary .chk2:checked + label { background-color:transparent !important; } #pn_darek { display:block; background-color:#E6FFCC; padding:20px; text-align:center; } #pn_darek > .nadpis { width:100%; display:block; font-size:22px; text-align:center; margin-bottom:20px; } #pn_darek > .polozka { width:200px; text-align:center; cursor:pointer; display:inline-block; position:relative; overflow:hidden; } #pn_darek > .polozka label { font-size:18px; cursor:pointer; display:block; padding:10px; border:1px solid #E6FFCC; } #pn_darek > .polozka label img { display:block; margin:0px auto 10px auto; } #pn_darek > .polozka input { display:block; margin:0px auto 10px auto; position:absolute; top:-20px; } #pn_darek > .polozka input[type="radio"]:checked+label { border:1px solid #006600; background-color:#006600; color:White; } #cph_obsah_pn_kosik { padding-top:30px; } #zvetsenyNahled { position:absolute; width:auto; max-height:300px; z-index:9999; background-color:#DB1B1B; padding:7px; top:25px; left:2%; } #zvetsenyNahled img { width:auto; max-height:300px; } #cph_obsah_pn_pruvodce .submenu a { cursor:default; } #cph_obsah_pn_kosik_krok2_a_doplnkoveSluzby .choices .item .desc { display:none; } #cph_obsah_pn_kosik_krok2_a_doplnkoveSluzby .choices .item label { cursor:pointer; } .bt_zaplatitUver { background-color:#db1b1b; padding:10px 0px 10px 0px; text-align:center; color:White; margin:20px 0px 20px 0px; display:block; } select { display: block; width: 160px; height: 46px; background: white; border: solid 1px #e0e0e0; padding: 0 16px; font-size: 20px; font-weight: bold; box-sizing: border-box; outline: none; max-width: 300px; width: 100%; margin-bottom: 10px; font-size: 16px; font-weight: 400; background-color: #f7f7f7;} .pn_detailObjednavky_info { font-size:18px; } #bt_nacistDalsi { /*background: #cb1010;*/background: #1e4480; display: flex; margin:40px 20px 20px auto; height:50px; color:White; justify-content: center; align-items: center; font-size: 15px; font-weight: 700; padding: 0 25px; border-radius: 3px; border: none; outline: none; text-align: center; font-family: 'Montserrat', sans-serif; box-sizing: border-box; cursor: pointer; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; } #bt_nacistDalsi:hover { /*background: #cb1010;*/background: #001d4a; } #bt_nacistVse { display: flex; height:50px; margin:40px auto 20px 30px; color:White; background: #1e4480; justify-content: center; align-items: center; font-size: 15px; font-weight: 700; padding: 0 25px; border-radius: 3px; border: none; outline: none; text-align: center; font-family: 'Montserrat', sans-serif; box-sizing: border-box; cursor: pointer; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; } #bt_nacistVse:hover { background: #001d4a; } #PKWin_form_loader { width:250px; height:150px; position:fixed; bottom:10px; z-index:99999; left:50%; margin:0px 0px 0px -125px; } #PKWin_form_loader div { width:250px; height:150px; background-color:#0C1116; position:absolute; z-index:99998; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); -moz-opacity: 0.85; -khtml-opacity: 0.85; opacity: 0.85;} #PKWin_form_loader div:before { width:250px; height:150px; content: ''; display:block; background-image:url('/themes/default/ajaxLoader.svg'); background-position:center center; background-repeat:no-repeat; } html, body {width: 100%; max-width: 100%; height: 100%; font-size: 46px;} body {box-sizing: border-box; min-height: 100%; height: auto; padding: 0 !important; box-sizing: border-box; font-family: 'Montserrat', sans-serif; overflow-x: hidden; position: relative; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} body.hidden, body.overflow {overflow: hidden; height: 100%;} body.hidden #footer {position: relative !important;} body.hidden:after {display: block; width: 100%; height: 100%; background: white; opacity: 0.85; content: ""; position: absolute; left: 0; top: 0;} form {display: flex; width: 100%; height: 100%; flex-wrap: wrap; padding-left: 320px; box-sizing: border-box; } @media screen and (max-width: 1200px) {html, body {font-size: 44px;}} @media screen and (max-width: 1150px) {html, body {font-size: 42px;}} @media screen and (max-width: 1100px) {html, body {font-size: 40px;}} @media screen and (max-width: 1050px) {html, body {font-size: 38px;}} @media screen and (max-width: 1000px) {html, body {font-size: 36px;}} @media screen and (max-width: 950px) {html, body {font-size: 34px;}} @media screen and (max-width: 900px) {html, body {font-size: 32px;}} @media screen and (max-width: 850px) {html, body {font-size: 30px;}} @media screen and (max-width: 800px) {html, body {font-size: 28px;}} @media screen and (max-width: 750px) {html, body {font-size: 26px;}} @media screen and (max-width: 700px) {html, body {font-size: 24px;}} @media screen and (max-width: 650px) {html, body {font-size: 22px;}} @media screen and (max-width: 600px) {html, body {font-size: 20px;}} @media screen and (max-width: 550px) {html, body {font-size: 18px;}} @media screen and (max-width: 500px) {html, body {font-size: 16px;}} @media screen and (max-width: 450px) {html, body {font-size: 14px;}} @media screen and (max-width: 400px) {html, body {font-size: 12px;}} .wrapper {display: block; width: 100%; padding: 5%; box-sizing: border-box;} .content {display: block; width: 100%; height: 100%; background: white; position: relative; padding-top: 90px; box-sizing: border-box;} .content .wrapper {width: calc(100% - 2rem); padding: 0; margin: 0 1rem;} .page .content .wrapper {padding-top: 40px;} @media screen and (max-width: 768px) { .page .content .wrapper {padding-top: 30px;} } @media screen and (max-width: 480px) { .page .content .wrapper {padding-top: 24px;} } /* TOP-BAR - HEADER */ #topbar {display: flex; width: calc(100% - 320px); height: 90px; background: URL("images/topbar.jpg") repeat-x center center; background-size: auto 100%; position: fixed; top: 0; z-index: 1001; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} #topbar.up {top: -92px;} #topbar.down {top: 0px;} #topbar .wrapper {display: flex; width: calc(100% - 200px); height: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px;} #topbar .navicon, #topbar .logo-mobile, #topbar .bt-search-mobile {display: none;} #topbar .searchfield {display: flex; width: calc(100% - 180px); height: 100%; align-items: center;} #topbar .searchfield p, #topbar .searchfield .cross2 {display: none;} #topbar .searchfield input {display: block; width: 100%; height: 100%; padding: 0 140px 0 50px; background: URL("/themes/default/images/icon-search.png") no-repeat left 15px center, white; background-size: 20px 20px, cover; border: none; outline: none; border-radius: 4px; box-sizing: border-box; font-weight: 600; font-family: 'Montserrat', sans-serif} #topbar .searchfield .button {width: 120px; height: calc(100% - 10px); margin-left: -125px; font-size: 13px;} #topbar .bt-login {display: flex; align-items: center; color: white; font-size: 15px; font-weight: 700; margin-right: 30px;} #topbar .bt-login:before {display: block; width: 18px; height: 18px; margin-right: 8px; background: URL("/themes/default/images/icon-login.png") no-repeat center center; background-size: auto 100%; content: "";} #topbar .bt-login:hover {text-decoration: underline;} #topbar .bt-cart {display: flex; width: 200px; height: 100%; align-items: center; font-size: 15px; font-weight: 700; color: white; background: #db1b1b; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} #topbar .bt-cart:before {display: block; width: 48px; height: 48px; margin-left: -24px; background: URL("/themes/default/images/icon-cart.png") no-repeat center center, #db1b1b; background-size: auto 100%; border-radius: 100%; content: ""; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} #topbar .bt-cart:hover {background: #cb1010;} #topbar .bt-cart:hover:before {background-color: #cb1010;} #topbar .bt-cart .total {display: inline-block; color: #ff9999; margin-left: 8px;} #headerMenu {display: block; width: 320px; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 1000; padding-left: 15px; padding-bottom: 200px; box-sizing: border-box; background: URL("/themes/default/images/menu.jpg?r=1") repeat-y center top; background-size: 100% auto;} #headerMenu .top {display: block; width: 100%; position: relative; z-index: 1;} #headerMenu .logo {display: block; width: 100%; height: 90px; padding: 5px 15px; box-sizing: border-box;} #headerMenu .logo img {display: block; width: auto; height: 100%;} #headerMenu ul {display: block; width: 100%;} #headerMenu ul li {display: block; width: 100%; position: relative; text-align: left; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #headerMenu ul li .arrow1 {display: block; width: 28px; height: auto; position: absolute; z-index: 1002; right: 0; top: 23px; opacity: 0.4;} #headerMenu ul li .arrow2 {display: none; width: 33px; height: auto; position: absolute; z-index: 1002; right: 0; top: 24px; opacity: 0.4;} #headerMenu ul li .arrow1:hover, #headerMenu ul li .arrow2:hover {opacity: 1; cursor: pointer} #headerMenu ul li.sel .arrow1 {display: none;} #headerMenu ul li.sel .arrow2 {display: block;} #headerMenu .top > ul > li > a {display: block; width: 100%; font-size: 16px; color: #2a2929; font-weight: 700; letter-spacing: -0.02em; padding: 25px 25px 25px 60px; border-top: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; position: relative; z-index: 1; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #headerMenu .top > ul > li:first-child > a {border-top: none;} #headerMenu .top > ul > li.sel, #headerMenu .top > ul > li:hover {background-color: rgba(0,0,0,0.015);} #headerMenu .top > ul > li:hover:after {display: block; width: 100%; height: 100%; background: URL("/themes/default/images/menu-gradient.png") repeat-y right top; background-size: 100% auto; position: absolute; right: 0; top: 0; content: "";} #headerMenu .top > ul > li.sel > a, #headerMenu .top > ul > li a:hover {color: #db1b1b;} #headerMenu .top > ul > li.cat1 > a {background: URL("/themes/default/images/menu-icon1.png") no-repeat left 20px top 19px; background-size: 28px auto;} #headerMenu .top > ul > li.cat2 > a {background: URL("/themes/default/images/menu-icon2.png") no-repeat left 20px top 19px; background-size: 28px auto;} #headerMenu .top > ul > li.cat3 > a {background: URL("/themes/default/images/menu-icon3.png") no-repeat left 20px top 19px; background-size: 28px auto;} #headerMenu .top > ul > li.cat4 > a {background: URL("/themes/default/images/menu-icon4.png") no-repeat left 20px top 19px; background-size: 28px auto;} #headerMenu ul li ul {display: none; flex-wrap: wrap; background: white; padding: 40px 50px; border: solid 1px rgba(0,0,0,0.2); border-left: none; box-sizing: border-box; position: absolute; left: 100%; top: 0;} #headerMenu ul li:hover ul {display: flex;} #headerMenu ul li ul li {display: block; width: calc(25% - 10px); margin: 5px;} #headerMenu ul li ul li a {display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 13px; color: #2a2929; font-weight: 700;} #headerMenu ul li ul li a img {display: block; width: 50px; height: 50px;} #headerMenu ul li ul li a span {display: block; width: calc(100% - 60px);} #headerMenu ul li.sel ul {display: block; background: none; border: none; position: relative; width: 100% !important; left: auto; top: auto; padding: 0 0 10px;} #headerMenu ul li.sel ul:before, #headerMenu ul li.sel ul:after {display: none;} #headerMenu ul li.sel ul li {display: block; width: 100%; margin: 0 0 10px; padding: 0 25px 0 60px; box-sizing: border-box;} #headerMenu .top > ul > li.sel:hover:after {display: none;} #headerMenu ul li.sel ul li a {width: 100%; height: auto; padding-left: 12px; box-sizing: border-box; position: relative;} #headerMenu ul li.sel ul li a:before {display: block; content: "\f105"; font-family: fontawesome; position: absolute; left: 0; top: 1px;} #headerMenu ul li.sel ul li a span {width: 100%;} #headerMenu ul li.sel ul li a img {display: none;} #headerMenu .contacts {display: block; width: 100%; padding: 35px 20px 20px 35px; box-sizing: border-box; position: absolute; left: 0;} #headerMenu .contacts a {display: block; width: 100%; font-size: 16px; color: #2a2929; font-weight: 700; letter-spacing: -0.02em; padding: 5px 0 5px 40px; margin-bottom: 8px; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #headerMenu .contacts a:hover {color: #db1b1b;} #headerMenu .contacts a.tel {background: URL("/themes/default/images/menu-icon-tel.png") no-repeat left top; background-size: 28px auto;} #headerMenu .contacts a.mail {background: URL("/themes/default/images/menu-icon-mail.png") no-repeat left top; background-size: 28px auto;} #headerMenu .contacts a.fb {background: URL("/themes/default/images/menu-icon-fb.png") no-repeat left top; background-size: 28px auto;} #headerMenu .contacts a.doprava {background: URL("/themes/default/images/detail-delivery.png") no-repeat left top; background-size: 28px auto;} #headerMenu .copyright {display: -block; color: #797979; font-size: 13px; font-weight: 700; margin-top: 20px;} @media screen and (max-width: 1300px) { form {padding-left: 280px;} .content {padding-top: 80px;} #topbar {width: calc(100% - 280px); height: 80px;} #topbar .wrapper {width: calc(100% - 170px); padding: 15px;} #topbar .searchfield {width: calc(100% - 160px);} #topbar .searchfield input {padding: 0 140px 0 50px; border-radius: 3px;} #topbar .searchfield .button {width: 90px; margin-left: -95px; font-size: 12px;} #topbar .bt-login {font-size: 14px; margin-right: 25px;} #topbar .bt-login:before {width: 16px; height: 16px; margin-right: 7px;} #topbar .bt-cart {width: 170px; font-size: 14px;} #topbar .bt-cart:before {width: 44px; height: 44px; margin-left: -22px;} #topbar .bt-cart .total {margin-left: 6px;} #headerMenu {width: 280px; padding-left: 12px; padding-bottom: 180px;} #headerMenu .logo {height: 80px; padding: 5px 15px;} #headerMenu ul li .arrow1 {width: 24px; top: 21px;} #headerMenu ul li .arrow2 {width: 26px; top: 21px;} #headerMenu .top > ul > li > a {font-size: 15px; padding: 20px 20px 20px 47px;} #headerMenu .top > ul > li.cat1 > a, #headerMenu .top > ul > li.cat2 > a, #headerMenu .top > ul > li.cat3 > a, #headerMenu .top > ul > li.cat4 > a {background-position: left 15px top 17px; background-size: 22px auto;} #headerMenu ul li ul {padding: 25px 35px;} #headerMenu ul li ul li {width: calc(33.33% - 6px); margin: 3px;} #headerMenu ul li ul li a {font-size: 12px;} #headerMenu ul li ul li a img {width: 44px; height: 44px;} #headerMenu ul li ul li a span {width: calc(100% - 50px);} #headerMenu ul li.sel ul li {margin: 0 0 6px; padding: 0 20px 0 48px;} #headerMenu ul li.sel ul li a {padding-left: 9px;} #headerMenu .contacts {padding: 30px 15px 16px 30px;} #headerMenu .contacts a {font-size: 15px; padding: 4px 0 4px 36px; margin-bottom: 7px;} #headerMenu .contacts a.tel, #headerMenu .contacts a.mail, #headerMenu .contacts a.fb {background-size: 24px auto;} #headerMenu .copyright {font-size: 12px; margin-top: 18px;} } @media screen and (max-width: 1080px) { form {padding-left: 260px;} .content {padding-top: 70px;} #topbar {width: calc(100% - 260px); height: 70px;} #topbar .wrapper {width: calc(100% - 150px); padding: 10px;} #topbar .searchfield {width: calc(100% - 150px);} #topbar .searchfield input {padding: 0 130px 0 45px; border-radius: 2px;} #topbar .searchfield .button {width: 80px; margin-left: -85px; font-size: 11px;} #topbar .bt-login {font-size: 13px; margin-right: 25px;} #topbar .bt-login:before {width: 14px; height: 14px; margin-right: 6px;} #topbar .bt-cart {width: 150px; font-size: 13px;} #topbar .bt-cart:before {width: 40px; height: 40px; margin-left: -20px;} #topbar .bt-cart .total {margin-left: 5px;} #headerMenu {width: 260px; padding-left: 10px; padding-bottom: 160px;} #headerMenu .logo {height: 70px; padding: 4px 10px;} #headerMenu ul li .arrow1 {top: 17px;} #headerMenu ul li .arrow2 {top: 16px;} #headerMenu .top > ul > li > a {font-size: 14px; padding: 16px 16px 16px 42px;} #headerMenu .top > ul > li.cat1 > a, #headerMenu .top > ul > li.cat2 > a, #headerMenu .top > ul > li.cat3 > a, #headerMenu .top > ul > li.cat4 > a {background-position: left 12px top 13px; background-size: 20px auto;} #headerMenu ul li ul {padding: 30px;} #headerMenu ul li.sel ul li {margin: 0 0 5px; padding: 0 20px 0 43px;} #headerMenu .contacts {padding: 30px 10px 16px 22px;} #headerMenu .contacts a {font-size: 13px; padding: 4px 0 4px 27px; margin-bottom: 6px;} #headerMenu .contacts a.tel, #headerMenu .contacts a.mail, #headerMenu .contacts a.fb {background-position: left top 2px; background-size: 20px auto;} #headerMenu .copyright {font-size: 11px; margin-top: 15px;} } @media screen and (max-width: 960px) { form {padding-left: 0px;} #topbar {width: 100%; border-bottom: solid 1px rgba(0,0,0,0.12);} #topbar .wrapper {width: calc(100% - 130px); justify-content: flex-end; padding: 0;} #topbar .navicon {display: flex; width: 54px; height: 100%; align-items: center; position: absolute; left: 0; top: 0; background: white;} #topbar .navicon img {display: block; width: 46px; height: 46px; opacity: 0.4; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #topbar .navicon img:last-child {display: none;} #topbar .navicon.close img:first-child {display: none;} #topbar .navicon.close img:last-child {display: block;} #topbar .navicon:hover img {opacity: 1;} #topbar .logo-mobile {display: flex; height: 100%; width: 200px; align-items: center; padding-right: 15px; box-sizing: border-box; background: white; position: absolute; left: 54px; top: 0;} #topbar .logo-mobile img {display: block; width: 100%;} #topbar .bt-search-mobile {display: block; width: 16px; height: 16px; margin-right: 14px; cursor: pointer;} #topbar .bt-search-mobile img {display: block; width: 100%; height: 100%;} #topbar .searchfield {display: flex; width: 100%; height: 100%; opacity: 0; justify-content: center; align-items: flex-start; position: fixed; top: 0; left: -100%; overflow-y: auto; padding-top: 80px; background: rgba(245,245,245,0.97); -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;} #topbar .searchfield.show {left: 0; opacity: 1;} #topbar .searchfield p {display: block; font-size: 30px; font-weight: 600; color: #4f4f4f; position: absolute; left: 5%; top: 18px;} #topbar .searchfield .cross2 {display: block; width: 22px; height: 22px; opacity: 0.3; position: absolute; right: 5%; top: 24px; cursor: pointer} #topbar .searchfield .cross2:hover {opacity: 1;} #topbar .searchfield input {width: 90%; height: 50px; padding: 0 120px 0 50px; border: solid 1px #cfcfcf;} #topbar .searchfield .button {width: 100px; height: 40px; margin-left: -105px; margin-top: 5px;} #topbar .bt-login {margin-right: 36px;} #topbar .bt-login:before {width: 16px; height: 16px;} body.hidden {margin-left: 260px;} #headerMenu {height: 100%; position: fixed; left: -100%; overflow-y: auto; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} #headerMenu.show {left: 0; z-index:99999;} #headerMenu .logo {display: none;} #headerMenu .top > ul > li:hover:after {display: none;} #headerMenu ul li:hover ul {display: none;} #headerMenu ul li.sel:hover ul {display: block;} } @media screen and (max-width: 768px) { .content {padding-top: 60px;} #topbar {height: 60px;} #topbar .wrapper {width: calc(100% - 110px);} #topbar .bt-search-mobile {width: 20px; height: 20px;} #topbar .bt-login:before {width: 20px; height: 20px; margin-right: 2px;} #topbar .bt-login span {display: none;} #topbar .bt-cart {width: 145px; font-size: 12px;} } @media screen and (max-width: 640px) { .content {padding-top: 54px;} #topbar {height: 54px;} #topbar .logo-mobile {width: 180px; padding-right: 12px;} #topbar .wrapper {width: calc(100% - 110px);} #topbar .bt-search-mobile {width: 20px; height: 20px;} #topbar .searchfield input {padding: 0 90px 0 50px;} #topbar .searchfield .button {width: 70px; margin-left: -75px;} #topbar .bt-login:before {width: 20px; height: 20px; margin-right: 2px;} #topbar .bt-login span {display: none;} #topbar .bt-cart {width: 145px; font-size: 12px;} } @media screen and (max-width: 540px) { #topbar .wrapper {width: calc(100% - 26px);} #topbar .navicon {width: 50px;} #topbar .navicon img {width: 42px; height: 42px;} #topbar .logo-mobile {left: 50px;} #topbar .bt-login {margin-right: 40px;} #topbar .bt-cart {width: 26px;} #topbar .bt-cart:before {width: 54px; height: 54px; margin-left: -27px; border-radius: 0;} #topbar .bt-cart span {display: none;} } @media screen and (max-width: 420px) { .content {padding-top: 46px;} #topbar {height: 46px;} #topbar .wrapper {width: calc(100% - 23px);} #topbar .navicon {width: 40px;} #topbar .navicon img {width: 36px; height: 36px;} #topbar .logo-mobile {width: 140px; padding-right: 8px; left: 40px;} #topbar .wrapper {;} #topbar .bt-search-mobile {width: 20px; height: 20px;} #topbar .bt-login {margin-right: 33px;} #topbar .bt-login:before {width: 20px; height: 20px; margin-right: 2px;} #topbar .bt-login span {display: none;} #topbar .bt-cart {width: 23px;} #topbar .bt-cart:before {width: 46px; height: 46px; margin-left: -23px;} } /* FOOTER */ #footer {display: flex; width: 100%; height: auto; position: absolute; right: 0; bottom: 0; background: URL('/themes/default/images/footer-map.png') no-repeat center center, URL('/themes/default/images/footer.jpg') repeat-x center top; background-size: auto 130%, auto 100%;} #footer .wrapper {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; padding-top: 1.4rem; padding-bottom: 1.4rem; box-sizing: border-box;} #footer ul {display: block; width: calc(25% - 20px); margin-bottom: 25px;} #footer ul li {display: block; font-size: 16px; font-weight: 600; color: white; position: relative; margin: 4px 0;} #footer ul li:first-child {padding-bottom: 12px; margin-bottom: 5px;} #footer ul li a {display: inline-block; color: white;} #footer ul li a:hover {text-decoration: underline;;} #footer p {display: block; width: 100%; margin-top: 5px; font-size: 14px; font-style: italic; color: #aacbff;} @media screen and (max-width: 1400px) { #footer ul li {font-size: 15px;} } @media screen and (max-width: 1280px) { #footer ul { width: calc(33% - 10px);} #footer ul:last-of-type {display: none;} } @media screen and (max-width: 960px) { #footer ul {width: auto;} #footer ul:last-of-type {display: block;} #footer ul li {font-size: 14px;} } @media screen and (min-width: 724px) and (max-width: 840px){ #footer ul li {font-size: 13px;} } @media screen and (max-width: 724px) { #footer ul {width: calc(50% - 15px);} #footer p {margin-top: 0px; font-size: 13px;} } @media screen and (max-width: 540px) { #footer .wrapper {display: block; padding-top: 50px; padding-bottom: 50px;} #footer ul {width: 100%; text-align: center; margin-bottom: 40px;} #footer ul li {width: 100%; font-size: 13px;} #footer ul li:first-child {padding-bottom: 2px; margin-bottom: 5px; font-size: 18px;} #footer p {text-align: center;} } /* SUBMENU ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .submenu {display: flex; width: 100%; position: relative; margin-bottom: 40px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .submenu:after {display: block; width: 100%; height: 1px; background: #b5b5b5; position: absolute; left: 0; bottom: 0; content: "";} .submenu .responsive {display: none;} .submenu a {display: block; cursor:pointer; color: #b5b5b5; font-weight: 600; font-size: 22px; line-height: 1em; font-family: 'Oswald', sans-serif; margin-right: 30px; padding-bottom: 7px; border-bottom: solid 3px transparent; position: relative; bottom: -1px; z-index: 1; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} /*.submenu a:hover {color: #db1b1b; cursor: pointer;}*/ .submenu a.sel {color: #db1b1b; border-color: #db1b1b;} @media screen and (max-width: 1280px) { .submenu a {font-size: 20px; margin-right: 18px; padding-bottom: 6px;} } /* DALŠÍ BREAKPOINTY U JEDNOTLIVÝCH STRÁNEK*/ /* GENERAL */ strong {font-weight: 600; color: black;} em {font-style: italic;} .hline {display: block; width: 100%; height: 1px; background: #dadada; margin-bottom: 30px;} .txt-message {display: block; width: 100%; padding: 15px; background: #ededed; color: #686868; font-size: 13px; font-weight: 600; margin-bottom: 30px; box-sizing: border-box;} .txt-red {color: #db1b1b;} .heading1 {display: block; width: 100%; font-size: 56px; line-height: 1.15em; color: #363636; margin-bottom: 35px; font-family: 'Oswald', sans-serif;} .heading2 {display: block; width: 100%; font-size: 36px; line-height: 1.15em; color: #363636; margin-bottom: 20px; padding-right: 200px; box-sizing: border-box; position: relative; z-index: 1; font-family: 'Oswald', sansserif;} .heading2 span {color: #173e7c;} .button {display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 700; padding: 0 25px; border-radius: 3px; border: none; outline: none; text-align: center; font-family: 'Montserrat', sans-serif; box-sizing: border-box; cursor: pointer; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} .button.red {color: white; background: #db1b1b;} .button.red:hover {background: #cb1010;} .button.blue {color: white; background: #1e4480;} .button.blue:hover {background: #001d4a;} .button.green {color: white; background: #5cc400;} .button.green:hover {background: #4a9d00;} .button.grey {color: white; background: #8c8c8c;} .button.grey:hover {background: #6f6f6f;} .button.grey-text {display: flex; font-size: 24px; line-height: 1em; color: #363636; padding: 0 20px 0 0; opacity: 0.4; position: relative; z-index: 2; background: none; font-family: 'Oswald', sansserif;} .button.grey-text:after {display: block; margin-top: 1px; width: 9px; height: 14px; background: URL('/themes/default/images/button-grey-text.png') no-repeat center center; background-size: 100% 100%; content: ""; position: absolute; right: 0; top: calc(50% - 7px);} .button.grey-text:hover {opacity: 1;} .message {display: block; width: 100%; margin-bottom:20px; padding: 12px 45px 12px 12px; font-size: 16px; line-height: 1.3em; font-weight: 600; color: #564900; background: #ffd927; box-sizing: border-box; position: relative; font-family: 'Oswald', sansserif;} .message.closed {display: none;} .message .cross {display: block; width: 15px; height: 15px; position: absolute; right: 12px; top: 14px; opacity: 0.5; cursor: pointer;} .message .cross:hover {opacity: 1;} #body.hp .message { margin-bottom:0px !important; } .infographics {display: block; width: 100%; margin-top: 80px;} .infographics .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;} .page .content .infographics .wrapper {padding: 0 !important; width: 100%; margin: 0;} .infographics .box {display: block; width: calc(33% - 8px); min-height: 100%; padding: 8px; background: URL('/themes/default/images/trikolora-pattern.jpg') repeat left top; background-size: 50px 50px; box-sizing: border-box;} .infographics .box > div {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; background: #fafafa; padding: 50px 12px; box-sizing: border-box; border: solid 1px rgba(0,0,0,0.3);} .infographics .box > div img {display: block; height: 56px; margin-bottom: 5px;} .infographics .box > div p {display: block; width: 100%; text-align: center; font-size: 30px; line-height: 1.1em; color: #363636; font-family: 'Oswald', sansserif;} .infographics .box > div p span {display: block; font-size: 0.6em; line-height: 1.1em;} .stamps {display: block; width: 100%; margin-top: 40px;} .stamps .wrapper {display: flex; justify-content: center; flex-wrap: wrap;} .page .content .stamps .wrapper {padding: 0 !important; width: 100%; margin: 0;} .stamps img {display: block; width: auto; height: 140px; margin: 30px;} .logos {display: block; width: 100%; margin-top: 40px;} .logos .wrapper {display: flex; justify-content: center; flex-wrap: wrap;} .page .content .logos .wrapper {padding: 0 !important; width: 100%; margin: 0;} .logos img {display: block; width: auto; height: 60px; margin: 15px;} .text1 {display: block; width: 100%; margin-top: 40px;} .text1 p {display: block; width: 100%; text-align: justify; font-size: 16px; line-height: 1.4em; color: #2a2a2a;} .tiny-nav {display: flex; width: 100%; flex-wrap: wrap; margin-bottom: 30px; box-sizing: border-box;} .tiny-nav a {display: block; font-size: 17px; color: #898989; margin-right: 14px; font-family: 'Oswald', serif; font-weight: 500; line-height: 1.3em; letter-spacing: 0.02em;} .tiny-nav a:last-child {color: #db1b1b;} .tiny-nav a:hover {color: #db1b1b; text-decoration: underline;} .tiny-nav a:before {display: inline-block; margin-right: 14px; content: "\f105"; font-family: fontawesome; } .tiny-nav a:hover:before {color: #b6b6b6;} .tiny-nav a:first-child:before {display: none;} .form {display: flex; width: 100%; max-width: 320px; flex-wrap: wrap; padding-bottom: 30px;} .form .checkbox { display:block; width:100%; } .form .checkbox input[type="checkbox"] { display:inline-block; width:auto; width:20px; height:20px; } .form .checkbox label { display:inline-block; width:auto; position:relative; top:-3px; left:2px; } .form .pn_udaj { display:block; width:100%; } .form .inline label { display:inline-block; width:auto; position:relative; top:-3px; left:2px; } .form input[type="radio"] { height: 20px; display:inline-block; width:auto; } .form label, .form .label1 {display: block; width: 100%; font-size: 18px; color: #363636; margin-top: 10px; font-family: 'Oswald', serif; font-weight: 600; line-height: 1.3em;} .form .input { display:block; width:100%; } .form input, .form select, .form textarea {display: block; width: 100%; height: 42px; background: #f2f2f2; border: solid 1px #d5d5d5; padding: 0 16px; font-size: 14px; margin-top: 5px; font-family: 'Montserrat', sans-serif; font-weight: 500; box-sizing: border-box; outline: none;} .form button[type="submit"] { margin-top:15px; } .form select {padding-right: 40px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; position: relative; background: URL('/themes/default/images/arrow-down.png') no-repeat center right 12px; background-size: 10px auto;} .form select::-ms-expand {display: none;} .form .input-link {display: inline-block; font-size: 13px; font-weight: 600; color: #8d8d8d; margin: 5px 0 15px; cursor: pointer} .form .input-link:hover {text-decoration: underline;} .form input:focus, .form select:focus, .form textarea:focus, .form textarea:focus, .form input:hover, .form select:hover {border-color: #7b7b7b;} .form .buttons {display: flex; width: 100%;} .form .buttons .button {width: auto; height: 42px;} .pagination {display: flex; width: 100%; flex-wrap: wrap;} .pagination a {display: block; min-width: 34px; color: #4b4b4b; font-size: 15px; font-weight: 600; text-align: center; padding: 7px; margin: 0 1px; background: #f7f7f7; border: solid 1px #d6d6d6; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .pagination a.first:before {display: inline-block; content: "\f100"; font-family: 'fontawesome'; font-weight: 300;} .pagination a.prev:before {display: inline-block; content: "\f104"; font-family: 'fontawesome'; font-weight: 300;} .pagination a.next:after {display: inline-block; content: "\f105"; font-family: 'fontawesome'; font-weight: 300;} .pagination a.last:after {display: inline-block; content: "\f101"; font-family: 'fontawesome'; font-weight: 300;} .pagination a:hover {color: black; background: white; border-color: #8d8d8d;} .pagination a.active {background: #173e7c; color: white; border: none;} .pagination a.disabled {display: none;} @media screen and (max-width: 1280px) { .infographics .box {width: calc(33% - 6px); padding: 7px; background-size: 46px 46px;} .infographics .box > div {padding: 44px 12px;} .infographics .box > div img {height: 50px;} .infographics .box > div p {font-size: 26px;} .tiny-nav {margin-bottom: 26px;} .tiny-nav a {font-size: 14px; margin-right: 10px;} .tiny-nav a:before {margin-right: 10px;} } @media screen and (max-width: 1080px) { .hline {margin-bottom: 25px;} .infographics .box {width: calc(33% - 5px); padding: 6px; background-size: 46px 46px;} .infographics .box > div {padding: 36px 12px;} .infographics .box > div img {height: 50px;} .infographics .box > div p {font-size: 22px;} } @media screen and (max-width: 960px) { .message {font-size: 15px;} .stamps img {height: 110px; margin: 20px;} .logos img {height: 50px; margin: 10px;} .text1 p {font-size: 15px;} } @media screen and (max-width: 768px) { .hline {margin-bottom: 20px;} .heading1 {font-size: 50px; margin-bottom: 30px;} .heading2 {font-size: 32px; margin-bottom: 18px; padding-right: 160px;} .button.grey-text {font-size: 21px; padding: 0 17px 0 0;} .button.grey-text:after {margin-top: 1px; width: 8px; height: 12px; top: calc(50% - 6px);} .infographics .box {width: calc(33% - 4px); padding: 5px;} .infographics .box > div {padding: 30px 10px;} .infographics .box > div img {height: 46px;} .infographics .box > div p {font-size: 20px;} .tiny-nav {margin-bottom: 25px;} .pagination a {min-width: 30px; font-size: 14px; padding: 6px;} } @media screen and (max-width: 640px) { .heading1 {font-size: 44px; margin-bottom: 20px;} .heading2 {padding-right: 0px;} .message {font-size: 14px;} .infographics .wrapper {display: block !important;} .infographics .box {width: 100%; margin: 7px auto;} .infographics .box > div {padding: 30px 10px;} .infographics .box > div img {height: 52px;} .infographics .box > div p {font-size: 24px;} .stamps img {height: 90px; margin: 15px;} .logos img {height: 44px; margin: 8px;} } @media screen and (max-width: 540px) { .form {max-width: 100%;} } @media screen and (max-width: 480px) { .heading1 {font-size: 40px;} .form {padding-bottom: 40px;} } .oom {display: flex; width: 100%; height: 100%; justify-content: center; align-content: center; align-items: center; flex-wrap: wrap; padding: 50px 15px; box-sizing: border-box; background: rgba(255, 255, 255, 0.96); opacity: 0; position: fixed; left: -120%; top: 0; z-index: 50000; -webkit-transition: opacity .35s ease-in-out; transition: opacity .35s ease-in-out;} .oom.show {opacity: 1; left: 0;} .oom .cross {display: block; width: 46px; height: 46px; opacity: 0.3; position: absolute; right: 30px; top: 30px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .oom .cross img {display: block; width: 100%; height: 100%;} .oom .cross:hover {opacity: 0.6; cursor: pointer;} .oom .oow {display: flex; max-width: 640px; justify-content: center; align-items: flex-start; flex-wrap: wrap;} .oom .oow p.title {font-size: 40px; line-height: 1.15em; font-family: 'Oswald', serif; font-weight: 600; margin-bottom: 16px;} .oom .oow p {display: block; width: 100%; font-size: 16px; color: #363636; text-align: center; line-height: 1.15em; font-weight: 500; margin-bottom: 10px;} .oom .oow .form {padding-bottom: 10px;} .oom .oow .buttons {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;} .oom .oow .buttons .button {width: auto; height: 42px; margin: 2px;} @media screen and (max-width: 1080px) { .oom {padding: 80px 15px;} .oom .cross {right: 25px; top: 25px;} .oom .oow p.title {font-size: 36px; margin-bottom: 15px;} .oom .oow p {font-size: 15px; margin-bottom: 8px;} .oom .oow .form {padding-bottom: 8px;} } @media screen and (max-width: 768px) { .oom {padding: 60px 15px;} .oom .cross {right: 22px; top: 22px;} .oom .oow p.title {font-size: 32px; margin-bottom: 12px;} .oom .oow p {font-size: 14px; margin-bottom: 7px;} .oom .oow .form {padding-bottom: 7px;} } @media screen and (max-width: 540px) { .oom {padding: 50px 15px;} .oom .cross {right: 15px; top: 15px;} } /*--PRODUCTS---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .products {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; margin-top: 60px;} .products .heading2 {width: calc(100% - 140px); margin-bottom: 20px; z-index: 50; padding-right: 0px;} .products .swiper-container { width:100%; padding-top: 70px; margin-top: -70px; position: relative;} .products .product {display: block; width: 33.33%; height: 100%; padding: 0.3rem 1rem 0; border-right: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .products .product:last-child {border: none;;} .products .product .info-icons {display: flex; align-items: center; position: absolute; top: 0; right: 0.7rem; z-index: 1;} .products .product .info-icons p {display: flex; width: 46px; height: 46px; justify-content: center; align-items: center; background: URL("images/info-icon-bg-red.png") no-repeat center center; background-size: 100% 100%; font-family: 'Oswald', sansserif;} .products .product .info-icons p.discount {font-size: 14px; color: #6f4700; background-image: URL("/themes/default/images/discount.png");} .products .product .info-icons p img {display: block; width: 65%; height: auto;} .products .product .info-icons p i { font-family: FontAwesome; font-size:22px; color:White; } .products .product .discount {display: flex; width: 56px; height: 56px; justify-content: center; align-items: center; font-size: 17px; color: #6f4700; position: absolute; top: 0; right: 0.7rem; z-index: 1; background: URL("/themes/default/images/discount.png") no-repeat center center; background-size: 100% 100%; font-family: 'Oswald', sansserif;} .products .product .img {display: block; width: 100%; margin-bottom: 15px; overflow: hidden;} .products .product .img img {display: block; width: 100%; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .products .product:hover .img img {-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);} .products .product h3 {display: block; width: 100%; font-size: 24px; line-height: 1.3em; color: #2a2a2a; margin-bottom: 8px; font-family: 'Oswald', sansserif;} .products .product h3 a {display: inline-block; color: #2a2a2a;} .products .product h3 a:hover {text-decoration: underline;} .products .product p.tag {display: flex; width: auto;} .products .product p.tag span {display: flex; width: auto; padding: 4px 8px; font-size: 12px; background: #db1b1b; color: white; text-transform: uppercase; font-weight: bold; } .products .product p.tag .novinka { background: #203e92; } .products .product p.tag .vyprodej { background: #db1b1b; } .products .product p.tag .doporucene { background: #f9bf24; } .products .product p.tag .akce { background: #f9bf24; } .products .product p.tag .sleva { background: #db1b1b; } .products .product p.tag .pripravujeme { background: #f9bf24; } .products .product p {display: block; width: 100%; text-align: justify; font-size: 15px; color: #2a2a2a;} .products .product .bottom {display: flex; width: 100%; align-items: center; flex-wrap: wrap; position: absolute; left: 1rem; bottom: 0;} .products .product .bottom .price1 {display: block; width: 100%; font-size: 13px; font-weight: 500; color: #6c6c6c; margin-bottom: 7px;} .products .product .bottom .price1 span {font-weight: 700; text-decoration: line-through;} .products .product .bottom .price2 {display: block; width: 100%; font-size: 24px; color: #173e7c; font-weight: 700; margin-bottom: 5px;} .products .product .bottom .price2 span {font-size: 0.5em;} .products .product .bottom .button {width: 120px; font-size: 13px; padding: 13px 0; margin-right: 13px;} .products .product .bottom .status {display: block; width: auto; font-size: 13px; font-weight: 600; color: #6c6c6c;} .products .swiper-pagination {width: 120px; position: absolute; top: 0; right: 1rem; z-index: 2; left: auto; text-align: right; z-index: 51;} .products .swiper-pagination-bullet {display: inline-block; width: 18px; height: 18px; margin: 0 3px !important; border-radius: 100%; background: #dfdfdf; cursor: pointer;} .products .swiper-pagination-bullet:hover, .products .swiper-pagination-bullet-active {background: #173e7c;} .products .items {display: flex; width: calc(100% + 2rem); flex-wrap: wrap; /*margin-left: -1rem;*/} .products .items .product {height: auto; margin-bottom: 30px;} .products .items .product .bottom {left: 1rem;} @media screen and (min-width: 1280px) { .products .items .product:nth-child(3n) {border-right: none;;} } @media screen and (max-width: 1280px) { .products .product {width: 50%;} .products .product .discount {width: 52px; height: 52px; font-size: 16px;} .products .product .img {margin-bottom: 13px;} .products .product .info-icons p {width: 42px; height: 42px;} .products .product .info-icons p.discount {font-size: 13px;} .products .product h3 {font-size: 21px; margin-bottom: 7px;} .products .product p {font-size: 14px;} .products .product .bottom .price1 {font-size: 12px; margin-bottom: 6px;} .products .product .bottom .price2 {font-size: 22px; margin-bottom: 4px;} .products .product .bottom .button {width: 110px; font-size: 12px; padding: 11px 0; margin-right: 11px;} .products .product .bottom .status {font-size: 12px;} .products .swiper-pagination-bullet {width: 16px; height: 16px; margin: 0 2px !important;} .products .items .product:nth-child(even) {border-right: none;} } @media screen and (max-width: 960px) { .products .swiper-container {padding-top: 60px; margin-top: -60px;} } @media screen and (max-width: 768px) { .products .heading2 {width: 100%;} .products .swiper-container {padding-top: 50px; margin-top: 0px;} .products .swiper-pagination {left: 1rem; right: auto; text-align: left;} .products .product p.tag span {padding: 3px 7px; font-size: 11px; margin: -3px 5px 7px 0px;} } @media screen and (max-width: 680px) { .products .product h3 {font-size: 20px;} .products .product p {font-size: 13px;} .products .product .bottom .price1 {font-size: 11px;} .products .product .bottom .price2 {font-size: 21px;} } @media screen and (max-width: 580px) { .products .product {width: 100%; height: auto; padding-bottom: 0 !important;} .products .product h3 {font-size: 21px;} .products .product p {font-size: 14px;} .products .product .bottom {position: relative; left: auto; bottom: auto; margin-top: 25px;} .products .product .bottom .price1 {font-size: 12px;} .products .product .bottom .price2 {font-size: 24px;} .products .items .product {border-right: none;} } /* HOMEPAGE ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .hp-slider {display: block; width: 100%; margin-bottom: 30px;} .hp-slider .slides {display: block; width: 100%; height: auto;} .hp-slider .swiper-slide {display: block; width: 100%; height: auto; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .hp-slider .slides img {display: block; width: 100%; height: auto;} .hp-slider .thumbs {display: flex; width: 100%; height: auto; background: URL("/themes/default/images/slider-thumbs.jpg") repeat-x right center; background-size: auto 100%;} .hp-slider .thumbs .swiper-slide {display: flex; width: 25%; height: auto; justify-content: center; align-items: center; padding: 16px; font-size: 17px; line-height: 1.2em; color: #868686; text-align: center; box-sizing: border-box; border-right: solid 1px rgba(0,0,0,0.1); font-family: 'Oswald', sansserif; overflow: visible; cursor: pointer; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .hp-slider .thumbs .swiper-slide:last-child {border: none;} .hp-slider .thumbs .swiper-slide:hover {color: #5b5b5b; background: rgba(0,0,0,0.06);} .hp-slider .thumbs .swiper-slide-active:hover, .hp-slider .thumbs .swiper-slide-active {color: white; background: #15386f;} @media screen and (max-width: 1280px) { .hp-slider .thumbs .swiper-slide {padding: 14px; font-size: 15px;} } @media screen and (max-width: 960px) { .hp-slider .thumbs .swiper-slide {padding: 14px; font-size: 14px;} } @media screen and (max-width: 480px) { .hp-slider .thumbs .swiper-slide {display: block; padding: 0; height: 40px;} .hp-slider .thumbs .swiper-slide span {display: none;} .hp-slider .thumbs .swiper-slide:before {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; content: "";} .hp-slider .thumbs .swiper-slide:nth-child(1):before {content: "1";} .hp-slider .thumbs .swiper-slide:nth-child(2):before {content: "2";} .hp-slider .thumbs .swiper-slide:nth-child(3):before {content: "3";} .hp-slider .thumbs .swiper-slide:nth-child(4):before {content: "4";} } @media screen and (max-width: 400px) { .hp-slider .thumbs .swiper-slide {height: 32px;} } .hp-news {display: block; width: 100%; margin: 60px 0;} .hp-news .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} .hp-news article {display: block; width: calc(50% - 15px);} .hp-news article .img {display: block; width: 100%; margin-bottom: 15px;} .hp-news article .img img {display: block; width: 100%;} .hp-news article h3 {display: block; width: 100%; font-size: 24px; line-height: 1.2em; margin-bottom: 10px; font-family: 'Oswald', sansserif;} .hp-news article h3 a {display: inline-block; color: #000000;} .hp-news article h3 a:hover {text-decoration: underline;} .hp-news article p {display: block; font-size: 16px; line-height: 1.4em; color: #000000; text-align: justify;} .hp-news .button.grey-text {position: absolute; right: 0; top: 18px;} @media screen and (max-width: 768px) { .hp-news article {width: calc(50% - 12px);} .hp-news article .img {margin-bottom: 12px;} .hp-news article h3 {font-size: 21px; margin-bottom: 8px;} .hp-news article p {font-size: 15px;} } @media screen and (max-width: 640px) { .hp-news .wrapper {display: block; padding-bottom: 50px;} .hp-news article {width: 100%; margin-bottom: 30px;} .hp-news article:last-of-type {margin-bottom: 0;} .hp-news .button.grey-text {bottom: 0; top: auto; left: 0; right: auto;} } /*-- SIMPLE-TEXT -----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .simple-text {display: block; color: #595959; font-size: 16px; font-weight: 500; line-height: 1.4em; text-align: justify;} .simple-text table { font-size:16px; } .simple-text table td { padding:5px; } .simple-text h2 {display: block; width: 100%; font-family: 'Oswald', sansserif; color: #2f2f2f; font-size: 30px; line-height: 1.25em; font-weight: 600; margin-bottom: 10px;} .simple-text h2 span {color: #173e7c;} .simple-text h2.icon {padding-left: 50px; box-sizing: border-box; position: relative;} .simple-text h2.icon img {display: block; height: 40px; position: absolute; left: 0; top: 0;} .simple-text h3 {display: block; width: 100%; font-family: 'Oswald', sansserif; color: #173e7c; font-size: 24px; font-weight: 600; line-height: 1.25em; margin-bottom: 8px;} .simple-text p {display: block; width: 100%; color: #595959; font-size: 16px; font-weight: 500; line-height: 1.4em; text-align: justify; margin-bottom: 25px;} .simple-text p a, .simple-text ul a {color: #db1b1b; text-decoration: underline;} .simple-text p a:hover, .simple-text ul a:hover {text-decoration: none;} .simple-text ul {display: block; width: 100%; margin-bottom: 25px; padding-left: 25px; box-sizing: border-box;} .simple-text ul li {display: block; color: #595959; font-size: 16px; font-weight: 500; line-height: 1.4em; position: relative; padding-left: 12px; margin-bottom: 5px; box-sizing: border-box;} .simple-text ul li:before {display: block; width: 6px; height: 6px; background: #173e7c; border-radius: 100%; position: absolute; left: 0; top: 8px; content: "";} .simple-text .img {display: flex; width: 100%; flex-wrap: wrap; margin-bottom: 30px;} .simple-text .img img {display: block; height: 180px; margin: 0 3px 3px 0;} @media screen and (min-width: 960px) and (max-width: 1080px){ .simple-text h2 {font-size: 26px; margin-bottom: 8px;} .simple-text h2.icon {padding-left: 44px;} .simple-text h2.icon img {height: 34px; } .simple-text h3 {font-size: 22px; margin-bottom: 6px;} .simple-text p {font-size: 15px; margin-bottom: 21px;} .simple-text ul {margin-bottom: 21px; padding-left: 20px;} .simple-text ul li {font-size: 15px; padding-left: 10px; margin-bottom: 4px;} .simple-text .img {margin-bottom: 25px;} .simple-text .img img {height: 150px;} } @media screen and (max-width: 768px) { .simple-text h2 {font-size: 26px; margin-bottom: 8px;} .simple-text h2.icon {padding-left: 44px;} .simple-text h2.icon img {height: 34px;} .simple-text h3 {font-size: 22px; margin-bottom: 6px;} .simple-text p {font-size: 15px; margin-bottom: 21px;} .simple-text ul {margin-bottom: 21px; padding-left: 20px;} .simple-text ul li {font-size: 15px; padding-left: 10px; margin-bottom: 4px;} .simple-text .img {margin-bottom: 25px;} .simple-text .img img {height: 150px;} } @media screen and (max-width: 480px) { .simple-text h2.icon {padding-left: 36px;} .simple-text h2.icon img {height: 30px; top: 1px;} .simple-text p {font-size: 14px; margin-bottom: 19px;} .simple-text ul {margin-bottom: 19px;} .simple-text ul li {font-size: 14px;} .simple-text .img {margin-bottom: 20px;} .simple-text .img img {width: 100%; margin: 0 0 2px;} } /* SUMMARY -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .summary {display: block; width: 100%;} .summary .item {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 20px 0; border-top: solid 1px #dddddd;} .summary .item:first-child {padding-top: 0; border-top: none;} .summary .item .img {display: block; width: 70px;} .summary .item .img img {display: block; width: 100%;} .summary .item .text {display: flex; width: calc(100% - 350px); flex-wrap: wrap;} .summary .item .text > a {display: inline-block; color: black; font-weight: 600; font-size: 18px; line-height: 1.1em; font-family: 'Oswald', sans-serif;} .summary .item .text > a:hover {text-decoration: underline;} .summary .item .text p {display: block; width: 100%; font-size: 13px; color: #606060; font-weight: 500; margin-top: 5px; text-align: left;} .summary .item .text p .status {display: inline-block; color: #173e7c; font-weight: 700; margin-right: 4px;} .summary .item .text p a {display: inline-block; color: #db1b1b; text-decoration: underline; font-weight: 700; cursor: pointer;} .summary .item .text p a:hover {text-decoration: none;} .summary .item .chk {display: block; width: auto; box-sizing: border-box; position: relative; margin: 15px 25px 0 0;} .summary .item .chk.with-info {padding-right: 22px;} .summary .item .chk label {display: block; font-weight: 700; font-size: 11px; line-height: 1.3em; color: #525252; position: relative;} .summary .chk2:not(:checked), .summary .chk2:checked {position: absolute; left: -9999px;} .summary .chk2:not(:checked) + label, .summary .chk2:checked + label {padding-left: 22px; cursor: pointer;} .summary .chk2:not(:checked) + label:before, .summary .chk2:checked + label:before {content: ""; display: block; width: 17px; height: 17px; position: absolute; left: 0; top: calc(50% - 8px); background-image: URL('/themes/default/images/checkbox2.png'); background-size: auto 300%; background-repeat: no-repeat;} .summary .chk2:not(:checked) + label:before {background-position: left top;} .summary .chk2:not(:checked) + label:hover:before {background-position: left center;} .summary .chk2:checked + label:before {background-position: left bottom;} .summary .item .chk .info {display: block; width: 14px; height: 14px; position: absolute; right: 0; top: calc(50% - 7px); cursor: pointer; margin: 0;} .summary .item .chk .info img {display: block; width: 100%; height: 100%;} .summary .item .chk .info span {display: none; width: 200px; padding: 10px; z-index:9999; font-size: 11px; font-weight: 700; color: white; background: #db1b1b; border-radius: 2px;} .summary .item .chk .info.show span, .summary .item .chk .info:hover span {display: block; position: absolute; right: 7px; top: 10px;} .summary .item .quantity {display: flex; width: 80px; height: 30px; background: #ececec; border-radius: 2px; margin-top: 10px;} .summary .item .quantity a {display: flex; width: 25px; height: 100%; opacity: 0.4; justify-content: center; align-items: center; font-size: 14px; font-weight: 700; cursor: pointer;} .summary .item .quantity a:hover {opacity: 1;} .summary .item .quantity input {display: block; width: 30px; height: 100%; font-size: 12px; font-weight: 700; text-align: center; background: none; border: none; outline: none; font-family: 'Montserrat', sans-serif;} .summary .item .price {display: block; width: 110px; text-align: right; font-weight: 600; font-size: 22px; line-height: 1.1em; color: #2f2f2f; margin-top: 10px; font-family: 'Oswald', sans-serif;} .summary .item .trash {display: flex; width: 24px; height: 24px; align-items: center; padding: 5px; background: #db1b1b; border: none; outline: none; border-radius: 2px; margin-top: 10px; box-sizing: border-box; cursor: pointer;} .summary .item .trash img {display: block; width: 100%; height: 100%;} .summary .item .trash:hover {background: #900606;} .summary .code {display: flex; align-items: center; flex-wrap: wrap; margin: 30px 0 15px;} .summary .code p {display: block; font-size: 22px; color: #2f2f2f; font-weight: 700; margin-right: 20px;} .summary .code input {display: block; width: 200px; height: 40px; background: #f2f2f2; border: solid 1px #d5d5d5; padding: 0 16px; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; box-sizing: border-box; outline: none;} .summary .code input:focus, .summary .code input:hover {border-color: #7b7b7b;} .summary .total {display: flex; width: 100%; justify-content: space-between; align-items: center; align-content: center; margin-bottom: 30px; padding-top: 20px; border-top: solid 1px #dddddd;} .summary .total p {display: block; font-size: 26px; font-weight: 700; color: #2f2f2f;} .summary .total .price {text-align: right; margin-left: 15px; font-family: 'Oswald', sans-serif;} .summary .total .price span {display: block; font-size: 0.5em; color: #7d7d7d;} .summary .total .price span:after {display: inline-block; content: " bez dph"; margin-left: 4px;} .summary .item .recommended {display: none; width: 100%; padding-left: 90px; box-sizing: border-box; margin-top: 20px;} .summary .item .recommended.show {display: block;} .summary .item .recommended .item2 {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 10px 0;} .summary .item .recommended .item2 .img2 {display: block; width: 60px;} .summary .item .recommended .item2 .img2 img {display: block; width: 100%;} .summary .item .recommended .item2 .text2 {display: flex; width: calc(100% - 160px); flex-wrap: wrap;} .summary .item .recommended .item2 .text2 a {display: inline-block; color: black; font-weight: 600; font-size: 18px; line-height: 1.1em; font-family: 'Oswald', sans-serif;} .summary .item .recommended .item2 .text2 a:hover {text-decoration: underline;} .summary .item .recommended .item2 .text2 p {display: block; width: 100%; font-size: 13px; color: #606060; font-weight: 600; margin-top: 5px; text-align: left;} .summary .item .recommended .item2 .button {width: 70px; font-size: 11px; padding: 8px 0;} .summary .item .recommended .hide {display: inline-block; font-size: 12px; text-decoration: underline; color: #9b9b9b; font-weight: 700; cursor: pointer;} .summary .item .recommended .hide:hover {text-decoration: none; color: #717171;} @media screen and (max-width: 1400px) { .summary .item {justify-content: flex-end;} .summary .item .text {width: calc(100% - 80px); margin: 0 0 10px 10px;} .summary .item .quantity, .summary .item .price, .summary .item .trash {margin-left: 10px;} .summary .item .recommended {padding-left: 80px;} .summary .item .recommended .item2 {padding: 8px 0;} .summary .item .recommended .item2 .img2 {width: 50px;} .summary .item .recommended .item2 .text2 {width: calc(100% - 142px);} .summary .item .recommended .item2 .text2 a {font-size: 17px;} .summary .item .recommended .item2 .text2 p {font-size: 12px; margin-top: 4px;} .summary .item .recommended .item2 .button {width: 64px; font-size: 10px; padding: 7px 0;} .summary .item .recommended .hide {font-size: 11px;} } @media screen and (max-width: 768px) { .summary .item .img {width: 60px;} .summary .item .text {width: calc(100% - 70px);} .summary .item .text > a {font-size: 17px;} .summary .item .text p {font-size: 12px; margin-top: 4px;} .summary .total p {font-size: 22px;} .summary .code p {font-size: 20px; margin-bottom: 8px;} .summary .code input {width: 160px; height: 38px; padding: 0 13px; font-size: 13px; margin-bottom: 8px;} .summary .item .recommended {padding-left: 70px;} .summary .item .recommended .item2 {padding: 7px 0;} .summary .item .recommended .item2 .text2 {width: calc(100% - 132px);} .summary .item .recommended .item2 .text2 a {font-size: 16px;} } @media screen and (max-width: 540px) { .summary .item {display: block; padding-left: 70px; box-sizing: border-box; position: relative;} .summary .item .img {position: absolute; left: 0; top: 20px;} .summary .item:first-child .img {top: 0;} .summary .item .text {width: 100%; margin-left: 0;} .summary .item .quantity, .summary .item .chk, .summary .item .price, .summary .item .trash {margin-left: 0;} .summary .item .price {text-align: left; margin-top: 15px;} .summary .item .trash {position: relative; overflow: visible;} .summary .item .trash:after {display: inline-block; margin-left: 12px; content: "ODSTRANIT"; font-size: 12px; font-weight: 700; color: #9d9d9d; position: absolute; left: 20px; top: 6px;} .summary .item .recommended {padding-left: 0px;} .summary .item .recommended .item2 .text2 {width: calc(100% - 60px);} .summary .item .recommended .item2 .button {margin: 5px 0 0 60px;} } /*-- LOGIN ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .login .form {padding-bottom: 2rem;} /*-- REGISTRATION ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .register .content .forms {display: flex; width: 100%; flex-wrap: wrap;} .register .col {display: block; width: calc(50% - 30px); margin-right: 30px;} .register .form h2, .summary h2 {display: block; width: 100%; font-size: 30px; font-weight: 600; color: #173e7c; font-family: 'Oswald', sansserif; margin-bottom: 12px;} .register .button {height: 46px;} @media screen and (max-width: 768px) { .register .col {width: 100%; margin: 0;} .register .form h2 {font-size: 26px;} } /*-- PROFILE ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .profile .heading1 {padding-right: 180px; box-sizing: border-box; margin-bottom: 0;} .profile .logout {width: 150px; height: 46px; font-size: 14px; padding: 0; position: relative; float: right; top: -50px;} .orders table {width: 100%; margin-bottom: 30px;} .orders table th, .orders table td {padding: 4px 20px 4px 0; font-size: 16px; text-align: left;} .orders table th {color: #2f2f2f; font-weight: 600; font-family: 'Oswald', sans-serif;} .orders table td {color: #6a6a6a; font-weight: 500;} .orders table td a {color: #db1b1b; text-decoration: underline; font-weight: 600;} .orders table td a:hover {text-decoration: none;} .orders table td:last-child a {width: 80px; padding: 5px 0; font-size: 12px; text-decoration: none; float: right;} @media screen and (max-width: 768px) { .profile .heading1 {padding-right: 140px;} .profile .logout {width: 130px; font-size: 12px; top: -44px;} .orders table th, .orders table td {padding: 3px 15px 3px 0; font-size: 15px;} } @media screen and (max-width: 640px) { .orders table th, .orders table td {padding: 3px 12px 3px 0; font-size: 14px;} } @media screen and (max-width: 540px) { .profile .heading1 {padding-right: 115px;} .profile .logout {width: 110px; height: 42px; font-size: 11px; top: -41px;} .profile .submenu {flex-wrap: wrap; height: 50px; overflow: hidden;} .profile .submenu:after {display: none;} .profile .submenu.show {height: 100px;} .profile .submenu .responsive {display: block; width: 100%; height: 50px; position: absolute; top: 0; left: 0; z-index: 2; background: URL('/themes/default/images/arrow-down2.png') no-repeat right 16px center; background-size: 16px auto;} .profile .submenu.show .responsive {background-image: URL('/themes/default/images/arrow-up2.png')} .profile .submenu .responsive:hover {cursor: pointer;} .profile .submenu a {display: flex; order: 1; width: 100%; height: 50px; color: #989898; align-items: center; margin-right: 0px; padding: 8px 30px 8px 12px; background: #f2f2f2; border: solid 1px #e0e0e0; bottom: 0; box-sizing: border-box;} .profile .submenu a:hover {color: #db1b1b;} .profile .submenu a.sel {background: #db1b1b; color: white; order: 0;} .orders table {display: block;} .orders table thead {display: none;} .orders table tbody {display: block; width: 100%;} .orders table tr {display: block; width: 100%; padding: 25px; margin-bottom: 5px; background: #f2f2f2; border: solid 1px #e0e0e0; box-sizing: border-box;} .orders table td {display: block; width: 100%; padding: 4px 0px;} .orders table td:first-child {font-size: 17px;} .orders table td:last-child a {float: none; padding: 11px 0;} } .orders .summary .text {width: calc(100% - 430px);} .orders .summary .quantity {width: 35px; text-align: center; background: none; font-size: 16px; font-weight: 600; margin: 15px 5px 0;} .orders .summary .chk {width: 150px; font-size: 12px; font-weight: 600; margin: 10px 5px 0;} @media screen and (max-width: 1400px) { .orders .summary .item {justify-content: space-between;} .orders .summary .item .text {width: calc(100% - 410px);} } @media screen and (max-width: 768px) { .orders .summary .item {justify-content: flex-end;} .orders .summary .item .text {width: calc(100% - 70px); margin-left: 10px;} } @media screen and (max-width: 540px) { .orders .summary .item .text {margin-left: 0px;} .orders .summary .quantity {text-align: left; margin: 5px 0;} .orders .summary .chk {margin: 5px 0;} } /*-- FLASHNEWS ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .flashnews .year {display: block; font-size: 36px; color: #bfbfbf; font-weight: 600; font-family: 'Oswald', sansserif; margin: 30px 0 12px;} .flashnews .year:first-of-type {margin-top: 0;} .flashnews article {display: flex; margin-bottom: 12px; padding-bottom: 15px; border-bottom: solid 1px #dedede;} .flashnews article .date {display: block; margin-right: 20px; font-size: 12px; color: #183f7d; font-weight: 700; text-align: center;} .flashnews article .date span {display: block; width: 32px; padding: 7px 0; margin-bottom: 3px; background: #183f7d; color: white; font-size: 16px;} .flashnews article .text {display: block; color: #2f2f2f; font-size: 16px; font-weight: 500; line-height: 1.35em; margin-top: -2px;} @media screen and (max-width: 768px) { .flashnews article .text {font-size: 15px;} } @media screen and (max-width: 480px) { .flashnews article .text {font-size: 14px;} } /*-- ADVICES------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .advices .content .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;} .advices article {display: flex; width: calc(50% - 20px); justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px;} .advices article .img {display: block; width: 33%;} .advices article .img img {display: block; width: 100%;} .advices article .text {display: block; width: calc(67% - 12px);} .advices article h2 {display: block; width: 100%; font-size: 22px; line-height: 1.2em; margin-bottom: 10px; font-family: 'Oswald', sansserif;} .advices article h2 a {display: inline-block; color: #2f2f2f;} .advices article h2 a:hover {text-decoration: underline;} .advices article p {display: block; font-size: 15px; line-height: 1.3em; color: #2f2f2f; text-align: left;} @media screen (max-width: 1280px) { .advices article {width: calc(50% - 12px); margin-bottom: 24px;} .advices article h2 {font-size: 20px; margin-bottom: 7px;} .advices article p {font-size: 14px; line-height: 1.25em;} } @media screen and (min-width: 960px) and (max-width: 1124px){ .advices article {width: 100%; margin-bottom: 24px;} .advices article .img {width: 160px;} .advices article .text {width: calc(100% - 180px);} .advices article h2 {font-size: 24px; margin-bottom: 9px;} .advices article p {font-size: 15px; line-height: 1.3em;} } @media screen and (max-width: 960px) { .advices article {width: calc(50% - 10px); margin-bottom: 20px;} .advices article h2 {font-size: 18px; margin-bottom: 6px;} .advices article p {font-size: 14px; line-height: 1.25em;} } @media screen and (max-width: 768px) { .advices article {width: 100%; margin-bottom: 20px;} .advices article .img {width: 160px;} .advices article .text {width: calc(100% - 180px);} .advices article h2 {font-size: 24px; margin-bottom: 9px;} .advices article p {font-size: 15px; line-height: 1.3em;} } @media screen and (max-width: 640px) { .advices article .img {width: 120px;} .advices article .text {width: calc(100% - 135px);} .advices article h2 {font-size: 21px; margin-bottom: 7px;} .advices article p {font-size: 14px;} } @media screen and (max-width: 540px) { .advices article {margin-bottom: 30px;} .advices article .img {width: 100%; margin-bottom: 12px;} .advices article .text {width: 100%;} } /*-- TRANPAY -----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pg-tranpay ul {margin: 20px 0 30px; padding: 0;} .pg-tranpay .transport {display: flex; width: 100%; flex-wrap: nowrap; margin: 20px 0 30px;} .pg-tranpay .transport .item {display: flex; align-items: center; padding-right: 50px; box-sizing: border-box;} .pg-tranpay .transport .item:last-child {padding-right: 0;} .pg-tranpay .transport .item img {display: block; height: 80px; margin-right: 15px;} .pg-tranpay .transport .item p {display: block; font-size: 13px; font-weight: 600; color: #2f2f2f; line-height: 1.2em; margin: 0; text-align: left;} .pg-tranpay .transport2 {padding: 0;} .pg-tranpay .transport2 li {display: block; padding-left: 150px; box-sizing: border-box;} .pg-tranpay .transport2 li span {display: inline-block; width: 150px; margin-left: -150px; padding-left: 10px; box-sizing: border-box;} .pg-tranpay .transport2 li:last-child {margin-top: 5px; padding-top: 5px; border-top: solid 1px #dadada;} .pg-tranpay .transport3 {margin: 20px 0 30px;} .pg-tranpay .transport3 li {display: block; padding-left: 260px; margin-bottom: 30px; box-sizing: border-box;} .pg-tranpay .transport3 li:before {display: none;} .pg-tranpay .transport3 li img {display: inline-block; width: 230px; margin-left: -260px; float: left;} .pg-tranpay .transport3 li span {display: block; width: 100%; font-size: 0.7em; line-height: 1.45em;} .pg-tranpay .transport3 li .title {font-size: 24px; font-weight: 600; margin-bottom: 10px; line-height: 1.15em; font-family: 'Oswald', sans-serif;} .pg-tranpay .payment {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin: 20px 0 30px;} .pg-tranpay .payment .item {display: flex; width: calc(33.33% - 20px); align-items: center; box-sizing: border-box;} .pg-tranpay .payment .item img {display: block; height: 80px; margin-right: 15px;} .pg-tranpay .payment .item p {display: block; font-size: 15px; font-weight: 600; color: #2f2f2f; line-height: 1.2em; margin: 0; text-align: left;} .pg-tranpay .payment .item p span {display: block; font-size: 13px; font-weight: 500; margin-top: 3px;} @media screen and (min-width: 768px) and (max-width: 1280px){ .pg-tranpay .transport .item {justify-content: center; flex-wrap: wrap; padding-right: 40px;} .pg-tranpay .transport .item img {height: 60px; margin: 0;} .pg-tranpay .transport .item p {width: 100%; text-align: center;} .pg-tranpay .payment .item {width: calc(50% - 15px);} } @media screen and (max-width: 768px) { .pg-tranpay .transport {display: block;} .pg-tranpay .transport .item {justify-content: space-between; padding: 0;} .pg-tranpay .transport .item p {width: calc(100% - 100px);} .pg-tranpay .transport2 li {padding-left: 130px;} .pg-tranpay .transport2 li span {width: 130px; margin-left: -130px;} .pg-tranpay .payment .item {width: 100%; justify-content: space-between;} .pg-tranpay .payment .item p {width: calc(100% - 80px);} } @media screen and (max-width: 640px) { .pg-tranpay .transport3 li {padding-left: 0px;} .pg-tranpay .transport3 li img {display: block; width: 200px; margin-left: 0px; margin-bottom: 15px; float: none;} .pg-tranpay .transport3 li span {font-size: 0.8em;} .pg-tranpay .transport3 li .title {font-size: 20px; margin-bottom: 8px; } } /*-- CONTACT -----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .contact .content .wrapper {display: flex; flex-wrap: wrap;} .contact .col {display: block; width: calc(50% - 50px); margin-right: 50px;} .contact p {text-align: left;} .contact ul {padding: 0;} .contact ul li {padding-left: 0;} .contact ul li:before {display: none;} .contact iframe {width: 100%; height: 300px; margin-bottom: 30px;} @media screen and (max-width: 640px) { .contact .col {width: 100%; margin-right: 0px;} } /* E-SHOP -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .eshop .description {display: block; width: 100%; font-size: 16px; line-height: 1.5em; margin-bottom: 30px;} .eshop .categories {display: flex; flex-wrap: wrap; overflow: hidden; margin-bottom: 40px;} .eshop .categories li {display: block; width: 25%; /*border-bottom: solid 1px #dddddd;*/ margin-bottom: -1px; } .eshop .categories li a {display: flex; width: calc(100% - 8px); height: calc(100% - 8px); border:2px solid black; margin:2px; /*border-right: solid 1px #dddddd;*/ justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 13px; color: #2a2929; font-weight: 700;padding: 10px; box-sizing: border-box;} .eshop .categories li a:hover {color: #db1b1b;} .eshop .categories li a img {display: block; width: 50px; height: 50px;} .eshop .categories li a span {display: block; width: calc(100% - 60px);} @media screen and (min-width: 1300px) { .eshop .categories li:nth-child(4n-0) a {/*border-right: none;*/} } @media screen and (min-width: 768px) and (max-width: 1300px){ .eshop .categories li {width: 33.33%;} .eshop .categories li a {padding: 8px;} .eshop .categories li:nth-child(3n-0) a {/*border-right: none;*/} .eshop .categories li.empty {display: none;} } @media screen and (min-width: 540px) and (max-width: 768px){ .eshop .description {font-size: 15px; margin-bottom: 26px;} .eshop .categories li {width: 50%;} .eshop .categories li a {padding: 7px;} .eshop .categories li:nth-child(even) a {/*border-right: none;*/} } @media screen and (max-width: 540px) { .eshop .description {font-size: 14px; margin-bottom: 23px;} .eshop .categories li {width: 100%;} .eshop .categories li a {font-size: 15px; padding: 6px; /*border-right: none;*/} } @media screen and (max-width: 480px) { .eshop .categories li a {font-size: 14px; padding: 5px;} } .eshop .bestsellers {display: block; width: 100%; margin-bottom: 30px;} .eshop .bestsellers .item {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: solid 1px #dddddd;} .eshop .bestsellers .item:first-child {padding-top: 0; border-top: none;} .eshop .bestsellers .item .img {display: block; width: 80px; margin-right: 12px;} .eshop .bestsellers .item .img img {display: block; width: 100%;} .eshop .bestsellers .item .text {display: flex; width: calc(100% - 242px); flex-wrap: wrap;} .eshop .bestsellers .item .text a {display: inline-block; color: black; font-weight: 600; font-size: 20px; line-height: 1.1em; font-family: 'Oswald', sans-serif;} .eshop .bestsellers .item .text a:hover {text-decoration: underline;} .eshop .bestsellers .item .text p {display: block; width: 100%; font-size: 13px; color: #606060; font-weight: 500; margin-top: 5px; text-align: left;} .eshop .bestsellers .item .price {display: block; width: 130px; margin-left: 20px; text-align: right; font-weight: 600; font-size: 22px; line-height: 1.1em; color: #db1b1b; font-family: 'Oswald', sans-serif;} @media screen and (max-width: 1280px) { .eshop .bestsellers .item .img {width: 70px; margin-right: 10px;} .eshop .bestsellers .item .text {width: calc(100% - 195px);} .eshop .bestsellers .item .text a {font-size: 17px;} .eshop .bestsellers .item .text p {font-size: 12px; margin-top: 4px;} .eshop .bestsellers .item .price {width: 100px; margin-left: 15px; font-size: 19px;} } @media screen and (max-width: 640px) { .eshop .bestsellers .item {align-items: flex-start;} .eshop .bestsellers .item .img {width: 70px; margin-right: 10px;} .eshop .bestsellers .item .text {width: calc(100% - 80px);} .eshop .bestsellers .item .price {width: 100%; margin-left: 0px; text-align: left; padding-left: 80px; box-sizing: border-box; margin-top: 5px;} } .eshop .price-filter {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 30px;} .eshop .price-filter .price-slider {display: block; width: calc(100% - 330px); height: 12px; background: #dedede;} .eshop .price-filter .price-slider .ui-slider-handle { width:20px; height:30px; margin-left: -2px !important; margin-top:4px !important; } .eshop .price-filter .inputs {display: flex; width: 300px; justify-content: space-between; align-items: center; flex-wrap: wrap;} .eshop .price-filter .inputs input {display: block; width: 120px; height: 38px; text-align: right; background: #fafafa; border: solid 1px #d5d5d5; padding: 0 16px; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; box-sizing: border-box; outline: none;} .eshop .price-filter .inputs input:focus, .eshop .price-filter .inputs input:hover {border-color: #7b7b7b;} .eshop .price-filter .inputs p {display: block; font-size: 16px; font-weight: 600; color: #565656;} @media screen and (max-width: 1280px) { .eshop .price-filter .price-slider {width: calc(100% - 265px);} .eshop .price-filter .inputs {width: 240px;} .eshop .price-filter .inputs input {width: 90px;} .eshop .price-filter .inputs p {font-size: 15px;} } @media screen and (max-width: 640px) { .eshop .price-filter .price-slider {width: 100%; margin-bottom: 15px;} .eshop .price-filter .inputs {width: 100%;} .eshop .price-filter .inputs input {width: calc(50% - 35px);} .eshop .price-filter .inputs p {font-size: 15px;} } .eshop .ordering {display: flex; width: 100%; height: 50px; flex-wrap: wrap; position: relative; background: #f1f1f1;} .eshop .ordering .responsive {display: none;} .eshop .ordering .items {display: flex; width: 100%; height: 100%; flex-wrap: wrap;} .eshop .ordering .items span {display: flex; height: 100%; justify-content: center; align-items: center; color: #505050; font-weight: 600; font-size: 13px; padding: 0 15px; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out; cursor: pointer;} .eshop .ordering .items span:hover {background: rgba(0,0,0,0.05); color: #1e1e1e;} .eshop .ordering .items span.sel {background: #173e7c; color: white;} .eshop .ordering .cross {display: none;} .eshop .ordering .chk {display: flex; height: 100%; align-items: center; padding: 0 15px; background: #db1b1b; position: absolute; right: 0; top: 0; z-index: 5;} .eshop .ordering label {font-weight: 600; font-size: 15px; line-height: 1em; color: white; margin-top: -1px; font-family: 'Oswald', sans-serif; position: relative;} .chk1:not(:checked), .chk1:checked {position: absolute; left: -9999px;} .chk1:not(:checked) + label, .chk1:checked + label {padding-left: 22px; cursor: pointer;} .chk1:not(:checked) + label:before, .chk1:checked + label:before {content: ""; display: block; width: 17px; height: 17px; position: absolute; left: 0; top: 0; background-image: URL('/themes/default/images/checkbox.png'); background-size: auto 300%; background-repeat: no-repeat;} .chk1:not(:checked) + label:before {background-position: left top;} .chk1:not(:checked) + label:hover:before {background-position: left center;} .chk1:checked + label:before {background-position: left bottom;} .icon-filters {display: flex; width: 100%; flex-wrap: wrap; position: relative; margin: 10px 0;} .icon-filters label {display: flex; height: 46px; align-items: center; font-weight: 600; font-size: 15px; line-height: 1em; color: #6e6e6e; padding: 0px 18px 2px 18px; margin: 0 3px 3px 5px; border: solid 1px rgba(0,0,0,0.1); position: relative; font-family: 'Oswald', sans-serif;} .icon-filters label i { /*font-family:FontAwesome;*/ margin:0px 10px 0px 0px; font-size:20px; } .chk2:not(:checked), .chk2:checked {position: absolute; left: -9999px;} #cph_obsah_pn_kosik_krok2_a_doplnkoveSluzby .chk2:not(:checked), #cph_obsah_pn_kosik_krok2_a_doplnkoveSluzby .chk2:checked { position: static !important; } .chk2:not(:checked) + label, .chk2:checked + label {cursor: pointer;} .chk2:not(:checked) + label:hover {border-color: #db1b1b; color: #db1b1b;} .chk2:checked + label {background: #db1b1b; color: white;} /*.chk2:not(:checked) + label:before, .chk2:checked + label:before {content: ""; display: block; width: 26px; height: 26px; position: absolute; left: 11px; top: 10px; background-image: URL('../images/info-icon-gift2.png'); background-size: auto 300%; background-repeat: no-repeat;} .chk2:not(:checked) + label:before {background-position: left top;} .chk2:not(:checked) + label:hover:before {background-position: left center;} .chk2:checked + label:before {background-position: left bottom;} .chk2 + label.gift:before {background-image: URL('../images/info-icon-gift2.png');} .chk2 + label.kids:before {background-image: URL('../images/info-icon-kids2.png');}*/ @media screen and (max-width: 1280px) { .eshop .ordering {height: 46px;} .eshop .ordering .items a {font-size: 12px; padding: 0 12px;} .eshop .ordering .chk {padding: 0 12px;} .eshop .ordering label {font-size: 14px; padding-left: 20px;} .eshop .ordering label:before {width: 16px; height: 16px;} .icon-filters label {height: 42px; font-size: 14px; padding: 0px 16px 2px 35px; margin: 0 2px 2px 0;} .chk2:not(:checked) + label:before, .chk2:checked + label:before {width: 24px; height: 24px; left: 9px; top: 9px;} } @media screen and (max-width: 1124px) { .eshop .ordering .items a {font-size: 11px;} .eshop .ordering label {font-size: 13px; padding-left: 19px;} .eshop .ordering label:before {width: 15px; height: 15px;} .icon-filters label {height: 40px; font-size: 13px; padding: 0px 14px 2px 33px;} .chk2:not(:checked) + label:before, .chk2:checked + label:before {width: 22px; height: 22px;} } @media screen and (max-width: 640px) { .eshop .ordering .responsive {display: block; width: 100%; height: 46px; position: absolute; top: 0; left: 0; z-index: 2; background: URL('/themes/default/images/arrow-down.png') no-repeat left 16px center; background-size: 11px auto;} .eshop .ordering.show .responsive {display: none;} .eshop .ordering .responsive:hover {cursor: pointer; background-color: rgba(0,0,0,0.02);} .eshop .ordering .items {width: 200px; overflow: hidden;} .eshop .ordering .items a {order: 1; display: block; line-height: 46px; font-size: 13px; padding-left: 40px; box-sizing: border-box; -webkit-transition: none; transition: none;} .eshop .ordering .items a.sel {order: 0; background: none; color: #505050;} .eshop .ordering .items .cross {display: none;} .eshop .ordering .items.show {display: flex; width: 100%; height: 100%; text-align: center; justify-content: center; align-content: center; align-items: center; flex-wrap: wrap; padding: 50px 15px; box-sizing: border-box; background: rgba(255, 255, 255, 0.96); position: fixed; left: 0; top: 0; z-index: 50000;} .eshop .ordering .items.show .cross {display: block; width: 46px; height: 46px; min-width: auto; opacity: 0.3; position: absolute; right: 15px; top: 15px; padding: 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .eshop .ordering .items.show .cross img {display: block; width: 100%;} .eshop .ordering .items.show .cross:hover {opacity: 0.6; cursor: pointer; background-color: transparent;} .eshop .ordering .items.show a {order: 0; display: flex; width: 50.1%; min-width: 300px; height: 40px; padding: 0;} .eshop .ordering .items.show a.sel {background: #173e7c; color: white;} } @media screen and (max-width: 480px) { .eshop .ordering .responsive {top: 46px;} .eshop .ordering {padding-top: 46px;} .eshop .ordering .chk {width: 100%; height: 46px; box-sizing: border-box;} } /*--CART---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1280px) { .cart .submenu a {font-size: 19px;} } @media screen and (min-width: 960px) and (max-width: 1124px){ .cart .submenu {flex-wrap: wrap; height: 50px; overflow: hidden;} .cart .submenu:after {display: none;} .cart .submenu.show {height: 250px;} .cart .submenu .responsive {display: block; width: 100%; height: 50px; position: absolute; top: 0; left: 0; z-index: 2; background: URL('/themes/default/images/arrow-down2.png') no-repeat right 16px center; background-size: 16px auto;} .cart .submenu.show .responsive {background-image: URL('/themes/default/images/arrow-up2.png')} .cart .submenu .responsive:hover {cursor: pointer;} .cart .submenu a {display: flex; order: 1; width: 100%; height: 50px; color: #989898; align-items: center; margin-right: 0px; padding: 8px 30px 8px 12px; background: #f2f2f2; border: solid 1px #e0e0e0; bottom: 0; box-sizing: border-box;} .cart .submenu a:hover {color: #db1b1b;} .cart .submenu a.sel {background: #db1b1b; color: white; order: 0;} } @media screen and (max-width: 960px) { .cart .submenu a {font-size: 19px;} } @media screen and (max-width: 768px) { .cart .submenu {flex-wrap: wrap; height: 50px; overflow: hidden;} .cart .submenu:after {display: none;} .cart .submenu.show {height: 250px;} .cart .submenu .responsive {display: block; width: 100%; height: 50px; position: absolute; top: 0; left: 0; z-index: 2; background: URL('/themes/default/images/arrow-down2.png') no-repeat right 16px center; background-size: 16px auto;} .cart .submenu.show .responsive {background-image: URL('/themes/default/images/arrow-up2.png')} .cart .submenu .responsive:hover {cursor: pointer;} .cart .submenu a {display: flex; order: 1; width: 100%; height: 50px; color: #989898; align-items: center; margin-right: 0px; padding: 8px 30px 8px 12px; background: #f2f2f2; border: solid 1px #e0e0e0; bottom: 0; box-sizing: border-box;} .cart .submenu a:hover {color: #db1b1b;} .cart .submenu a.sel {background: #db1b1b; color: white; order: 0;} } .cart .summary .message2 {display: block; width: 100%; padding: 15px; color: #815c0e; font-size: 14px; font-weight: 500; background: #ffdf9a; text-align: center; margin-bottom: 30px; box-sizing: border-box;} .cart .summary .message2 strong {color: #3c2900; font-weight: 700;} .cart .buttons {display: flex; width: 100%; justify-content: space-between; margin: 30px 0;} .cart.step1 .buttons {justify-content: space-between;} .cart .buttons .button {height: auto; font-size: 14px; padding: 15px 30px;} .cart .buttons .button.arrow-right:after {display: inline-block; margin-left: 7px; content: " \f105 \f105"; font-family: fontawesome; font-size: 1.1em; margin-top: -1px;} .cart .buttons .button.arrow-left:before {display: inline-block; margin-right: 7px; content: " \f104 \f104"; font-family: fontawesome; font-size: 1.1em; margin-top: -1px;} @media screen and (min-width: 960px) and (max-width: 1280px){ .cart .buttons .button {padding: 13px 26px; font-size: 13px;} } @media screen and (max-width: 768px) { .cart .buttons .button {padding: 13px 26px; font-size: 13px;} } @media screen and (max-width: 640px) { .cart .buttons .button {padding: 13px 20px; font-size: 12px;} } @media screen and (max-width: 480px) { .cart .buttons {flex-wrap: wrap;;} .cart .buttons .button {width: 100%; margin-top: 1px; font-size: 14px; padding: 16px 20px; order: 0;} .cart .buttons .button:first-child {order: 1;} } .cart .choices {display: block; width: 100%;} .cart .choices .item {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; padding: 20px 0;} .cart .choices .item:first-of-type {padding-top: 0;} .cart .choices .item input {margin-right: 5px; margin-top: 4px;} .cart .choices .item .title {display: block; cursor:pointer; width: calc(100% - 150px); font-size: 17px; font-weight: 700;} .cart .choices .item .title input {display: inline-block; cursor:pointer; font-size: 17px; font-weight: 700;} .cart .choices .item .title span {display: block; font-size: 0.8em; margin-top: 2px; color: #989898;} .cart .choices .item .title ul li {display: block; font-size: 0.8em; color: #707070; position: relative; padding-left: 9px; box-sizing: border-box; margin-top: 2px;} .cart .choices .item .title ul li:before {display: block; width: 4px; height: 4px; background: #989898; border-radius: 100%; position: absolute; left: 0; top: 5px; content: "";} .cart .choices .item .title p {font-size: 0.8em; margin: 10px 0 5px;} .cart .choices .item .title textarea {display: block; width: 100%; max-width: 480px; height: 80px; background: #f2f2f2; border: solid 1px #d5d5d5; padding: 10px; font-size: 14px;font-family: 'Montserrat', sans-serif; font-weight: 500; box-sizing: border-box; outline: none;} .cart .choices .item .price {display: block; width: 110px; text-align: right; font-weight: 600; font-size: 20px; line-height: 1.1em; color: #2f2f2f; margin-top: -2px; font-family: 'Oswald', sans-serif;} @media screen and (max-width: 768px) { .cart .choices .item .title {width: calc(100% - 130px); font-size: 16px;} .cart .choices .item .title textarea {height: 120px;} .cart .choices .item .price {width: 90px; font-size: 16px;} } @media screen and (max-width: 640px) { .cart .choices .item .title {width: calc(100% - 100px); font-size: 15px;} .cart .choices .item .price {width: 80px; font-size: 15px;} } @media screen and (max-width: 480px) { .cart .choices .item .title {width: calc(100% - 90px); font-size: 14px;} .cart .choices .item .title textarea {height: 150px;} .cart .choices .item .price {width: 75px; font-size: 14px;} } .cart.step2 .choices .item {border-top: solid 1px #dadada;} .cart.step2 .choices .item:first-child {border-top: none;} .cart.step2 .note {display: block; width: 100%; margin-top: 50px; padding: 15px 0; border-top: solid 1px #d2d2d2; box-sizing: border-box;} .cart.step2 .note p {display: block; width: 100%; font-size: 13px; line-height: 1.45em; font-weight: 600;} .cart.step2 .note p a {color: #db1b1b; text-decoration: underline;} .cart.step2 .note p a:hover {text-decoration: none;} .cart.step2 .note label {display: block; font-weight: 700; font-size: 14px; padding-top: 1px; line-height: 1.3em; color: #525252; position: relative; margin-top: 15px;} .cart.step2 .chk3:not(:checked), .cart.step2 .chk3:checked {position: absolute; left: -9999px;} .cart.step2 .chk3:not(:checked) + label, .cart.step2 .chk3:checked + label {padding-left: 22px; cursor: pointer;} .cart.step2 .chk3:not(:checked) + label:before, .cart.step2 .chk3:checked + label:before {content: ""; display: block; width: 17px; height: 17px; position: absolute; left: 0; top: calc(50% - 8px); background-image: URL('/themes/default/images/checkbox2.png'); background-size: auto 300%; background-repeat: no-repeat;} .cart.step2 .chk3:not(:checked) + label:before {background-position: left top;} .cart.step2 .chk3:not(:checked) + label:hover:before {background-position: left center;} .cart.step2 .chk3:checked + label:before {background-position: left bottom;} .cart.step2 .important {margin-top: 15px; font-weight: 800; color: #db1b1b; font-size: 20px !important;} @media screen and (max-width: 768px) { .detail p.tag span {padding: 5px 10px; font-size: 13px; margin: -10px 5px 20px 0px;} .cart.step2 .note p {font-size: 12px;} .cart.step2 .note label {font-size: 13px;} .cart.step2 .important {margin-top: 12px; font-size: 18px !important;} } @media screen and (max-width: 540px) { .detail p.tag span {padding: 4px 8px; font-size: 12px;} .cart.step2 .important {font-size: 16px !important;} } .cart.step4 textarea {height: 190px;} .cart.step4 .chk2:not(:checked), .cart.step4 .chk2:checked {position: absolute; left: -9999px;} .cart.step4 .chk2:not(:checked) + label, .cart.step4 .chk2:checked + label {padding-left: 22px; cursor: pointer;} .cart.step4 .chk2:not(:checked) + label:before, .cart.step4 .chk2:checked + label:before {content: ""; display: block; width: 17px; height: 17px; position: absolute; left: 0; top: calc(50% - 8px); background-image: URL('/themes/default/images/checkbox2.png'); background-size: auto 300%; background-repeat: no-repeat;} .cart.step4 .chk2:not(:checked) + label:before {background-position: left top;} .cart.step4 .chk2:not(:checked) + label:hover:before {background-position: left center;} .cart.step4 .chk2:checked + label:before {background-position: left bottom;} .cart.step4 .label2 {display: block; font-weight: 700; font-size: 14px; padding-top: 1px; line-height: 1.3em; color: #525252; position: relative; margin: 15px 0 30px;} .cart.step4 .form.hidden {display: none;} .cart.step5 .summary .text {width: calc(100% - 270px);} .cart.step5 .summary .chk {width: auto; font-size: 12px; font-weight: 600; margin-top: 10px; color: #1e4480; font-weight: 700;} .cart.step5 .summary .quantity {width: 35px; text-align: center; background: none; font-size: 16px; font-weight: 600; margin: 15px 10px 0;} .cart.step5 .choices .item {border: none;} .cart.step5 .code {width: 100%; position: relative;} .cart.step5 .code span {display: block; font-weight: 600; font-size: 20px; line-height: 1.1em; color: #2f2f2f; font-family: 'Oswald', sans-serif; color: #1e4480; position: absolute; right: 0; top: 0;} @media screen and (max-width: 1400px) { .cart.step5 .summary .item {justify-content: space-between;} } @media screen and (max-width: 768px) { .cart.step5 .summary .item {justify-content: flex-end;} .cart.step5 .summary .item .text {width: calc(100% - 70px); margin-left: 10px;} .cart.step5 .choices .item {justify-content: space-between;} } @media screen and (max-width: 540px) { .cart.step5 .summary .item .text {width: 100%; margin-left: 0px;} .cart.step5 .summary .quantity {text-align: left; margin: 5px 0;} .cart.step5 .choices .item .title {width: calc(100% - 80px);} } /* DETAIL */ .detail p.tag {display: flex; width: auto;} .detail p.tag span {display: flex; width: auto; padding: 6px 12px; font-size: 14px; color: white; text-transform: uppercase; font-weight: bold; margin: -20px 10px 25px 0px;} .detail p.tag span i { font-family:FontAwesome; margin-right:10px; } .detail p.tag .parametr { background: #db1b1b; } .detail p.tag .novinka { background: #203e92; } .detail p.tag .vyprodej { background: #db1b1b; } .detail p.tag .doporucene { background: #f9bf24; } .detail p.tag .akce { background: #f9bf24; } .detail p.tag .sleva { background: #db1b1b; } .detail p.tag .pripravujeme { background: #f9bf24; } .detail .upper {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px;} .detail .upper .left {display: block; width: calc(100% - 500px);} .detail .image {display: block; width: 100%; position: relative;} .detail .image .discount {display: flex; width: 70px; height: 70px; justify-content: center; align-items: center; font-size: 17px; color: #6f4700; position: absolute; top: -10px; right: -10px; z-index: 5; background: URL("/themes/default/images/discount.png") no-repeat center center; background-size: 100% 100%; font-family: 'Oswald', sansserif;} .detail .image .cover {display: flex; width: 100%; margin-bottom: 10px;} .detail .image .cover .swiper-slide {display: block; width: 100%; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .detail .image .cover .swiper-slide img {display: block; max-width: 100%; margin:0px auto 0px auto; } .detail .image .thumbs {display: flex; width: 100%; height: 60px; box-sizing: border-box;} .detail .image .thumbs .swiper-slide {opacity: 0.8; display: block; height: 60px; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .image .thumbs .swiper-slide:hover, .detail .image .thumbs .swiper-slide-active {opacity: 1;} .detail .image .thumbs .swiper-slide img {height: 60px; cursor: pointer;} .detail .image .swiper-button-prev, .detail .image .swiper-button-next {display: block; opacity: 0.75; position: absolute; width: 16px; height: 100%; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .detail .image .swiper-button-prev {left: 0; background: URL('/themes/default/images/arrow-l.svg') no-repeat center center, #e8e8e8; background-size: 50% auto;} .detail .image .swiper-button-next {right: 0; background: URL('/themes/default/images/arrow-r.svg') no-repeat center center, #e8e8e8; background-size: 50% auto;} .detail .image .swiper-button-prev:hover, .detail .image .swiper-button-next:hover {opacity: 1; cursor: pointer;} .detail .upper .right {display: flex; width: 460px; flex-wrap: wrap; align-items: flex-start;} .detail .upper .right .row {display: flex; width: 100%; flex-wrap: wrap;} .detail .upper .right .status {display: inline-block; font-size: 16px; color: #815c0e; font-weight: 500; padding: 13px 15px 13px 58px; background: URL('/themes/default/images/detail-delivery.png') no-repeat left 15px center, #ffe6af; background-size: auto 45%; margin-bottom: 16px;} .detail .upper .right .status img {display: block; height: 20px; margin-right: 10px;} .detail .upper .right .status strong {color: #452f01; font-weight: 700;} .detail .upper .right .code {display: block; margin: 0 16px 10px 0; font-size: 14px; color: #888888; font-weight: 500;} .detail .upper .right .warranty {display: block; margin: 0 16px 10px 0; font-size: 14px; color: #1e4f9e; font-weight: 700; padding-left: 25px; position: relative;} .detail .upper .right .warranty:before {display: bock; width: 20px; height: 20px; background: URL('/themes/default/images/detail-warranty.png') no-repeat left center; background-size: auto 100%; content: ""; position: absolute; left: 0; top: -3px;} .detail .upper .right .description {display: block; width: 100%; font-size: 16px; font-weight: 500; line-height: 1.4em; margin-bottom: 10px;} .detail .upper .right .infographics2 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin: 20px 0 30px;} .detail .upper .right .infographics2 .item {display: block; width: calc(33.33% - 10px); } .detail .upper .right .infographics2 .item img {display: block; width: 40px; margin: 0 auto 10px;} .detail .upper .right .infographics2 .item p {display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 700; color: #2f2f2f;} .detail .upper .right .buttons {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;} .detail .upper .right .buttons a {display: block; width: calc(50% - 2px); padding: 15px; font-size: 15px; text-align: center; box-sizing: border-box; border-radius: 2px; border: solid 2px transparent; font-family: 'Oswald', sans-serif; font-weight: 600; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} .detail .upper .right .buttons a:nth-child(1) {border-color: #1e4f9e; color: #1e4f9e;} .detail .upper .right .buttons a:nth-child(2) {border-color: #db1b1b; color: #db1b1b;} .detail .upper .right .buttons a:nth-child(1):hover {color: white; background: #1e4f9e;} .detail .upper .right .buttons a:nth-child(2):hover {color: white; background: #db1b1b;} .detail .upper .right .contact {display: block; width: 100%; padding-left: 55px; box-sizing: border-box; position: relative; margin-bottom: 30px;} .detail .upper .right .contact img {display: block; width: 40px; position: absolute; left: 0; top: 0;} .detail .upper .right .contact p {display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700;} .detail .upper .right .contact p.p2 {font-size: 13px;} .detail .upper .right .contact p.p3 {font-size: 13px; color: #8e8e8e; margin-top: 5px;} .detail .upper .right .contact p a {color: #db1b1b; text-decoration: underline;} .detail .upper .right .contact p a:hover {text-decoration: none;} .detail .upper .right .filters {display: flex; width: 100%; flex-wrap: wrap; margin-bottom: 30px;} .detail .upper .right .filters .filter {display: flex; width: 100%; align-items: center; padding: 20px 40px 20px 0; border-top: solid 1px #dedede; box-sizing: border-box; background: URL('/themes/default/images/arrow-r.svg') no-repeat right center; background-size: 8px auto;} .detail .upper .right .filters .filter:last-child {border-bottom: solid 1px #dedede;} .detail .upper .right .filters .filter img {display: block; width: 65px; margin-right: 20px;} .detail .upper .right .filters .filter p {display: block; font-size: 17px; color: #2f2f2f; font-family: 'Oswald', sans-serif; font-weight: 600;} .detail .upper .right .filters .filter p span {display: block; font-size: 13px; color: #838383; font-family: 'Montserrat', sans-serif;} .detail .upper .right .filters .filter:hover {cursor: pointer; background-image: URL('/themes/default/images/arrow-r-red.svg');} .detail .upper .right .filters .filter:hover p {color: #db1b1b;} .detail .upper .right .price {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; margin-top: 20px;} .detail .upper .right .price p:first-child {display: block; width: 100%; color: #210321; font-size: 44px; font-weight: bold; line-height: 1em; margin-bottom: -5px;} .detail .upper .right .price p:first-child:after {display: inline-block; margin-left: 5px; font-size: 16px; content: "s DPH"; font-weight: 400;} .detail .upper .right .price p:last-child {display: block; font-size: 20px; font-weight: bold; text-decoration: line-through; line-height: 1em;} .detail .upper .right .price p.discount {display: block; padding: 2px 6px; background: #fabc00; color: white; font-size: 13px; letter-spacing: 0.02em; font-weight: bold; margin-right: 8px;} .detail .upper .right .buy {display: flex; width: 100%; align-items: center; flex-wrap: wrap; box-sizing: border-box; margin-top: 10px;} .detail .upper .right .buy .quantity {display: flex; width: 80px; height: 50px; background: #ececec; border-radius: 2px; margin-right: 4px;} .detail .upper .right .buy .quantity span {display: flex; width: 25px; height: 100%; opacity: 0.4; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; cursor: pointer;} .detail .upper .right .buy .quantity span:hover {opacity: 1;} .detail .upper .right .buy .quantity input {display: block; width: 30px; height: 100%; font-size: 13px; font-weight: 700; text-align: center; background: none; border: none; outline: none; font-family: 'Montserrat', sans-serif;} .detail .upper .right .buy button {font-size: 17px; height: 50px; padding: 0px 60px; margin-right: 15px;} .detail .upper .right .buy p.calc {display: block; font-size: 13px; font-weight: bold; line-height: 1.2em;} .detail .upper .right .buy p.calc span {cursor:pointer; color: #db1b1b; text-decoration: underline; cursor:pointer;} .detail .upper .right .buy p.calc span:hover {text-decoration: none;} .detail .bottom {display: block; width: 100%;} .detail .bottom .submenu {padding-top: 50px;} .detail .bottom .products .swiper-container {width: calc(100% + 2rem); flex-wrap: wrap; margin-left: -1rem;} .detail .bottom .products .swiper-pagination {right: 0;} @media screen and (max-width: 1400px) { .detail .upper .left {width: calc(100% - 460px);} .detail .upper .right {width: 420px;} .detail .upper .right .status {font-size: 15px; padding: 11px 14px 11px 56px;} .detail .upper .right .status img {height: 18px; margin-right: 8px;} .detail .upper .right .description {font-size: 15px;} .detail .upper .right .buttons a {padding: 13px 15px;} .detail .upper .right .filters .filter {padding: 16px 35px 16px 0;} .detail .upper .right .filters .filter img {width: 55px; margin-right: 17px;} .detail .upper .right .filters .filter p {font-size: 16px;} .detail .upper .right .filters .filter p span {font-size: 12px;} .detail .upper .right .price p:first-child {font-size: 40px;} .detail .upper .right .price p:first-child:after {font-size: 15px;} .detail .upper .right .price p:last-child {font-size: 18px;} .detail .upper .right .buy .quantity {width: 74px; height: 46px;} .detail .upper .right .buy .quantity span {width: 23px;} .detail .upper .right .buy .quantity input {width: 28px; font-size: 12px;} .detail .upper .right .buy button {font-size: 16px; height: 46px; padding: 0px 55px; margin-right: 12px;} } @media screen and (max-width: 1280px) { .detail .upper .left {width: calc(100% - 390px);} .detail .upper .right {width: 360px;} .detail .upper .right .status {font-size: 14px; padding: 10px 12px 10px 50px;} .detail .upper .right .status img {height: 17px; margin-right: 6px;} .detail .upper .right .description {font-size: 14px;} .detail .upper .right .buttons a {padding: 12px 14px;} .detail .upper .right .filters .filter {padding: 15px 32px 15px 0;} .detail .upper .right .filters .filter img {width: 50px; margin-right: 15px;} .detail .upper .right .filters .filter p {font-size: 15px;} .detail .upper .right .filters .filter p span {font-size: 11px;} .detail .upper .right .price p:first-child {font-size: 36px;} .detail .upper .right .price p:first-child:after {font-size: 14px;} .detail .upper .right .price p:last-child {font-size: 17px;} .detail .upper .right .buy button {padding: 0px 30px; margin-right: 11px;} .detail .upper .right .buy p.calc {font-size: 12px;} } @media screen and (min-width: 960px) and (max-width: 1124px){ .detail .upper .left {width: 100%; margin-bottom: 30px;} .detail .upper .right {width: 100%;} } @media screen and (max-width: 768px) { .detail .upper .left {width: 100%; margin-bottom: 30px;} .detail .upper .right {width: 100%;} .detail .submenu a {font-size: 22px; margin-right: 20px;;} } @media screen and (max-width: 520px) { .detail .submenu a {font-size: 20px;} } @media screen and (max-width: 420px) { .detail .submenu a {font-size: 17px;} } .detail .filter-opt {align-items: flex-start; align-content: flex-start; padding-top: 100px; overflow: auto;} .detail .filter-opt .oow {max-width: 1200px;} .detail .filter-opt .searchfield {display: flex; width: 100%; height: 40px; justify-content: center; margin: 15px 0;} .detail .filter-opt .searchfield input {display: block; max-width: 360px; height: 100%; padding: 0 10px 0 40px; background: URL("images/icon-search.png") no-repeat left 10px center, white; background-size: 16px 16px, cover; border: solid 1px rgba(0,0,0,0.1); outline: none; border-radius: 4px; box-sizing: border-box; font-weight: 600; font-family: 'Montserrat', sans-serif} /*.detail .filter-opt .choices {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; margin-bottom: 15px;} .detail .filter-opt .choices a {display: block; width: 220px; text-align: center; font-size: 12px; color: #969696; font-weight: 600; padding: 18px; margin: 2px; border-radius: 3px; overflow: hidden; border: solid 1px transparent; box-sizing: border-box; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} .detail .filter-opt .choices a:hover, .detail .filter-opt .choices a.sel {background: white; border-color: #cfcfcf; color: black; cursor: pointer; } .detail .filter-opt .choices a img {display: block; width: 180px; margin: 0 auto 15px; border-radius: 3px; overflow: hidden;} .detail .filter-opt .choices a span {display: block; width: 100%; text-align: center; margin-top: 8px; color: #1e4480;}*/ .detail .filter-opt .choices {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; margin-bottom: 15px;} .detail .filter-opt .choices a {display: flex; width: 220px; align-items: center; align-content: center; flex-wrap: wrap; text-align: center; font-size: 12px; color: #969696; font-weight: 600; padding: 18px; margin: 2px; border-radius: 3px; overflow: hidden; border: solid 1px transparent; box-sizing: border-box; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} .detail .filter-opt .choices a:hover, .detail .filter-opt .choices a.sel {background: white; border-color: #cfcfcf; color: black; cursor: pointer; } .detail .filter-opt .choices a img {display: block; width: 180px; margin: 0 auto 15px; border-radius: 3px; overflow: hidden;} .detail .filter-opt .choices a span {display: block; width: 100%; text-align: center; margin-top: 8px; color: #1e4480;} .detail .filter-opt .choices a i {display: block; width: 100%; text-align: center; } @media screen and (max-width: 960px) { .detail .filter-opt .choices a {display: block; width: 220px; font-size: 12px; padding: 15px; border-radius: 1px;} .detail .filter-opt .choices a img {width: 180px; margin: 0 auto 12px; border-radius: 2px;} } .detail .link {position: absolute; left: -9999px} .detail .link.show {position: relative; left: auto;} .detail #link2 {display: none; width: 100%; flex-wrap: wrap;} .detail #link2.show {display: flex;} .detail #link2 .col {display: block; width: 400px; margin-right: 30px;} .detail #link2 p {padding: 0; color: #363636; font-weight: 500; font-size: 16px; line-height: 1.2em; margin-bottom: 20px;} .detail #link2 p strong {font-weight: 600; font-size: 22px; font-family: 'Oswald', sans-serif; } .detail #link2 textarea {height: 200px} .detail #link2 .button {padding: 12px 30px;} .detail .forum {display: block; width: 100%; padding: 25px; background: #ededed; box-sizing: border-box;} .detail .forum .topic {display: block; width: 100%; padding: 20px 20px 25px; background: white; box-sizing: border-box; border: solid 1px #dfdfdf;} .detail .forum .topic .title {display: block; width: 100%; font-weight: bold; font-size: 22px !important; margin-bottom: 4px !important; font-family: 'Oswald', sans-serif;} .detail .forum .topic .infos {display: block; width: 100%; font-size: 14px !important; color: #848484; margin-bottom: 8px !important; } .detail .forum .topic .infos span {font-weight: bold; color: black;} .detail .forum .topic .question {font-size: 14px !important;} .detail .forum .topic .response {display: block; padding-left: 80px !important; font-size: 14px !important; font-style: italic; box-sizing: border-box; position: relative;} .detail .forum .topic .response span {display: block; width: 70px; text-align: right; font-size: 12px !important; line-height: 1.2em; font-weight: bold; font-style: italic; position: absolute; left: 0; top: 0;} @media screen and (max-width: 960px) { .detail #link2 p {font-size: 14px;} .detail .forum {padding: 15px;} .detail .forum .topic {padding: 15px 15px 20px;} .detail .forum .topic .title {font-size: 22px !important; margin-bottom: 4px !important;} .detail .forum .topic .infos {font-size: 13px !important; margin-bottom: 6px !important; } .detail .forum .topic .question {font-size: 13px !important;} .detail .forum .topic .response {padding-left: 70px !important; font-size: 13px !important;} .detail .forum .topic .response span {width: 62px; font-size: 11px !important;} } @media screen and (max-width: 640px) { .detail #link2 .col {width: 100% !important; margin-right: 0px;} } .cookiesInfo { border-top:1px solid black; position:fixed; font-size:20px; display:table; width:100%; table-layout:fixed; bottom:0px; left:0px; right:0px; min-height:60px; background-color:#d0a43a; z-index:9999; } .cookiesInfo .cookiesCnt { display:table-cell; height:60px; min-height:60px; padding:0px 30px 0px 30px; vertical-align:middle; } .cookiesInfo .cookiesCnt .cookiesText { display:inline-block; color:#000000; max-width:80%; } .cookiesInfo .cookiesCnt .cookiesText a { color:#ffffff; text-decoration:underline; } .cookiesInfo .cookiesCnt .bt_cookiesOK { display:inline-block; width:140px; margin-top:5px; float:right; width:110px; height:25px; line-height:25px; text-align:center; color: white; padding: 6px 0px 6px; background: rgba(33,33,33,1); border: solid 1px rgba(33,33,33,1);} .cookiesInfo .cookiesCnt .bt_cookiesOK:hover { background-color: #ffffff; color: #000000;} .zelene { background-color:#75C875; padding:20px; color:#ffffff; } .zelene strong { color:#ffffff; } .krok5 { font-size:18px; color:#363636; font-weight:600; } .rychlaRegistrace { margin-top:30px; } .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .pn_produkty_nicNenalezeno { font-size:20px; margin:80px 0px 80px 0px; border:0px solid black; text-align:center; display:block; width:100%; } .mceContentBody { padding:10px !important; }