/*------------------------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; } /*------------------------------------------------------*/ .chyba { background-color:#c81816; display:block; color:#ffffff; text-align:center; font-size:18px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; } .IMGres { width: 100%; margin:30px auto; height:auto; display:block; } .triObrazky { width:100%; margin:10px 0px 40px 0px; } .triObrazky div { display: block; text-align:center; width: 33%; float:left; } html, body {width: 100%; font-size: 20px; overflow-y: auto; background: #181818; font-family: 'Teko', sans-serif; background: URL("images/pattern.png") repeat center top; background-size: 40px auto;} @media screen and (max-width: 1200px) {html, body {font-size: 19px;}} @media screen and (max-width: 1100px) {html, body {font-size: 18px;}} @media screen and (max-width: 1000px) {html, body {font-size: 17px;}} @media screen and (max-width: 900px) {html, body {font-size: 16px;}} @media screen and (max-width: 800px) {html, body {font-size: 15px;}} @media screen and (max-width: 700px) {html, body {font-size: 14px;}} @media screen and (max-width: 600px) {html, body {font-size: 13px;}} @media screen and (max-width: 500px) {html, body {font-size: 12px;}} @media screen and (max-width: 400px) {html, body {font-size: 11px;}} .wrapper {display: block; margin-left: auto; margin-right: auto; width: 1140px; box-sizing: border-box; position: relative;} .wrapper.flex {display: flex; align-items: center; flex-wrap: wrap;} @media screen and (max-width: 1260px) {.wrapper {margin: 0px 2rem; width: auto;}} @media screen and (max-width: 480px) {.wrapper {margin: 0px 1.5rem;}} .content {display: block; width: 100%; height: auto; padding: 3rem 0;} .page {background: URL("images/pattern3.jpg") repeat center top;} h1 {display: block; width: 100%; text-align: left; font-size: 3.6rem; line-height: 1.1em; text-transform: uppercase; margin: 0 0 1rem; color: #2b2b2b; font-family: 'Sarpanch', sans-serif; font-weight: 600;} h1 span {display: block; width: 100%; font-size: 1.4rem; line-height: 1.2em; color: #919191; margin: 0rem 0 1rem;} .PKWinImageBox_content > .info h1 { font-size:25px !important; } .PKWinImageBox_content > .info h2 { font-size:20px !important; } section.flex {display: flex; align-items: center; flex-wrap: wrap;} .wrapper.flex.ul {flex-wrap: wrap; align-items: flex-start;} ul.list {display: block; width: calc(33% - 40px); margin: 10px 40px 10px 0; align-self: flex-start;} ul.list li {display: block; padding-left: 10px; line-height: 1.1em; padding-bottom: 6px; font-size: 20px; letter-spacing: 0.2px;} ul.list li:before {content: "• "; margin-left: -10px;} ul.list li.nodisk:before { content: ""; } .section {display: block; width: 100%; height: auto; padding: 0 0 3rem;} .section h2 {display: block; width: 100%; text-align: left; font-size: 2rem; line-height: 1.2em; margin: 2rem 0px 1rem; text-transform: uppercase; color: #717c86; font-family: 'Sarpanch', sans-serif; font-weight: 600;} .hp .section {padding: 5rem 0;} .hp .section h2 {color: #e6e6e6;} .section p {display: block; width: 100%; color: #242424; line-height: 1.25em; text-align: justify; font-size: 22px; font-weight: 400; letter-spacing: 0.2px; padding-bottom: 0.7rem;} .section p a {color: #fe1818;} .section p a:hover {text-decoration: underline;} .section .img-border {display: block; max-width: 100%; width: auto; margin: 1.5rem 0; border: solid 10px white; box-sizing: border-box; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);} .section .button1, .section .button2 {display: block; color: white; font-size: 18px; text-align: center; font-weight: 600; letter-spacing: 0.2px; padding: 9px 16px 6px; margin: 2px; border-radius: 2px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .section .button1 {background: #fe1818; border: solid 1px #fe1818;} .section .button1:hover {background: none; color: #fe1818;} .section .button2 {background: #426686; border: solid 1px #426686;} .section .button2:hover {background: none; color: #426686;} .shadow {display: block; width: 100%; height: 16px; background: URL("images/shadow.png") repeat center top; background-size: 100% 16px;} .sublinks {display: block; width: 100%; height: auto; margin: -1rem 0 2rem; text-align: left; font-size: 24px; box-sizing: border-.box;} .sublinks .link, .sublinks p {display: inline-block; width: auto; margin: 0 5px; padding: 0; line-height: 1.1em; color: #fe1818; font-family: 'Teko', sans-serif; font-weight: 600; text-decoration: underline;} .sublinks .link:hover {text-decoration: none;} .sublinks p {margin: 0 10px 0 0; text-decoration: none; color: #b2b2b2; font-weight: 600;} .video {display: block; width: 100%; height: auto; background: black;} .video h2 { display: block; width: 560px; color:#FF9900; font-size:20px; padding-top:5px; margin:0px auto 5px auto; } .video iframe {display: block; width: 560px; max-height: 315px; margin: 0 auto;} .pagination {display: block;} .pagination a.button2 {display: inline-block; margin: 3px; width: 32px; height: auto; padding: 5px 0; text-align: center;} .pagination a.button2.active {background: #fe1818; border-color: #fe1818; color: white;} .tbCenik { border-collapse:collapse; border-spacing:0px; } .tbCenik tr.hlavicka td { background-color:#E0E0E0; } .tbCenik tr td { padding:3px 15px 3px 15px; } .tbCenik tr td h2 { font-size:20px !important; margin:10px 0px 10px 0px; padding:0px; border-bottom:1px solid #000000; } .ULseznam { float:left; width:49%; display:inline-block; } .ULseznam li { list-style-type:disc; margin-left:20px; } .ULseznam > li:first-child { list-style-type:none !important; font-size:22px; text-decoration:underline; text-indent:-20px; } @media screen and (max-width: 1000px) { ul.list {width: calc(50% - 40px);} } @media screen and (max-width: 700px) { ul.list {width: 100%; margin-right: 0;} ul.list li {font-size: 18px;} .section h2 {font-size: 26px;} .hp .section h2 {font-size: 30px;} .section p {font-size: 19px;} .section .button1, .section .button2 {font-size: 15px; padding: 7px 8px 4px; margin: 0 1px;} .sublinks .link, .sublinks:before {font-size: 18px;} } @media screen and (max-width: 640px) { .video h2 { display: block; width:100%; margin: 0 auto;} .video iframe {display: block; width: 100%; margin: 0 auto;} } .gallery {display: flex; width: 100%; height: auto; justify-content: space-between; flex-wrap: wrap;} .gallery .img {display: flex; width: 24%; height: 10rem; justify-content: center; align-items: center; position: relative; margin-bottom: 1rem; overflow: hidden; background: black;} .gallery .img.empty {height: 1px !important; background: none; opacity: 0; margin-bottom: 0;} .gallery .img img {display: block; height: 100%; width: auto;} .gallery .img .text {display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; background: rgba(0,0,0,0.8); position: absolute; bottom: -100%; left: 0; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .gallery .img .text .title {display: block; color: white; font-size: 19px; text-align: center; font-weight: 600; padding: 0 10px; box-sizing: border-box;} .gallery .img .text p {display: block; color: white; font-size: 17px; text-align: center; margin: 3px 0 7px; padding: 0 10px; line-height: 1.1em; letter-spacing: 0.3px; box-sizing: border-box;} .gallery .img .text a {display: block; color: white; font-size: 14px; text-align: center; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; padding: 4px 8px 3px; background: #fe1818; border: solid 1px #fe1818; border-radius: 2px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .gallery .img .text a:hover {background: none; color: #fe1818;} .gallery .img:hover .text {bottom: 0;} .gallery.no-hover .img {background: rgba(0,0,0,0.1);} .gallery.no-hover .img .text {bottom: 0; background: none;} .gallery.no-hover .img .text .title {font-size: 24px; color: black;} @media screen and (max-width: 1000px) { .gallery .img {width: 32.8%; margin-bottom: 0.5rem;} } @media screen and (max-width: 840px) { .gallery .img {width: 49.7%; height: 13rem; margin-bottom: 0.3rem;} } @media screen and (max-width: 540px) { .gallery .img {width: 100%; height: 22rem;} } .gallery-slider {display: block; width: 100%; height: auto;} .gallery-slider .wrapper {position: relative;} .swiper-container.s2 {display: flex; width: 100%; height: 20rem;} .swiper-container.s2 .swiper-slide {display: block; width: auto; height: 100%; background: black; position: relative;} .swiper-container.s2 .swiper-slide img {display: block; width: auto; height: 100%;} .swiper-container.s2 .swiper-slide .label {display: inline-block; max-width: 80%; width: auto; height: auto; position: absolute; bottom: 10px; left: 10px; z-index: 5; color: white; background: rgba(0,0,0,0.7); font-size: 18px; padding: 10px; box-sizing: border-box;} .gallery-slider .swiper-button-prev, .gallery-slider .swiper-button-next {display: block; position: absolute; top: calc(50% - 30px); width: 50px; height: 50px; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .gallery-slider .swiper-button-prev {opacity: 0.2; left: -50px; background: URL('images/arrow-l2.svg') no-repeat center center; background-size: auto 100%;} .gallery-slider .swiper-button-next {opacity: 0.2; right: -50px; background: URL('images/arrow-r2.svg') no-repeat center center; background-size: auto 100%;} .hp .gallery-slider .swiper-button-prev, .hp .gallery-slider .swiper-button-next {top: calc(50% - 15px);} .hp .gallery-slider .swiper-button-prev {opacity: 0.2; left: -50px; background: URL('images/arrow-l.svg') no-repeat center center; background-size: auto 100%;} .hp .gallery-slider .swiper-button-next {opacity: 0.2; right: -50px; background: URL('images/arrow-r.svg') no-repeat center center; background-size: auto 100%;} .gallery-slider .swiper-button-prev:hover, .gallery-slider .swiper-button-next:hover {opacity: 1; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} @media screen and (max-width: 1340px) { .gallery-slider .swiper-button-prev {opacity: 0.6; left: 4px;} .gallery-slider .swiper-button-next {opacity: 0.6; right:4px;} .hp .gallery-slider .swiper-button-prev {opacity: 0.6; left: 0px;} .hp .gallery-slider .swiper-button-next {opacity: 0.6; right: 0px;} } @media screen and (max-width: 800px) { .swiper-container.s2 {height: 16rem;} } .junction {display: flex; width: 100%; height: auto; justify-content: space-between; flex-wrap: wrap;} .junction .img {display: flex; width: 49.7%; height: 14rem; justify-content: center; align-items: center; position: relative; margin-bottom: 0.5rem; overflow: hidden; background: black; -webkit-box-shadow: 0px 0px 20px rgba(247, 247, 247, 1); -moz-box-shadow: 0px 0px 20px rgba(247, 247, 247, 1); box-shadow: 0px 0px 20px rgba(247, 247, 247, 1);} .junction .img .corner-top {display: block; width: 40px; height: 40px; position: absolute; top: 0; right: 0; z-index: 200; background: URL("images/junction-corner-top.png") no-repeat right top; background-size: cover;} .junction .img .corner-bottom {display: block; width: 40px; height: 40px; position: absolute; bottom: 0; left: 0; z-index: 200; background: URL("images/junction-corner-bottom.png") no-repeat left bottom; background-size: cover;} .junction .img img {display: block; height: auto; width: 100%;} .junction .img .hover {display: flex; height: 100%; width: 100%; padding: 1rem; box-sizing: border-box; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: absolute; top: 0; left: 0; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .junction .img .hover h2 {display: block; width: 100%; font-size: 1.6rem; line-height: 1.2em; margin-top: 0; color: white; text-align: center; background: URL("images/pattern4.png") repeat center top; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.65); padding: 1rem; box-sizing: border-box;} .junction .img .hover .button {display: none; color: white; font-size: 18px; text-align: center; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; padding: 10px 20px 8px; background: #fe1818; border: solid 1px #fe1818; border-radius: 2px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .junction .img .hover .button:hover {background: none; color: #fe1818;} .junction .img:hover .hover {background: rgba(0,0,0,0.8);} .junction .img:hover .hover h2 {background: none; margin-bottom: 15px;} .junction .img:hover .hover .button {display: block;} @media screen and (max-width: 800px) { .junction .img {width: 100%; height: 16rem;} .junction .img .button h2 {font-size: 26px;} .junction .img .button a {font-size: 13px; padding: 8px 16px;} } #header {display: block; width: 100%; height: 74px; background: URL("images/pattern.png") repeat center top; background-size: 40px auto; font-family: 'Sarpanch', sans-serif;} #header .wrapper {display: flex; height: 100%; position: relative;} #header .wrapper a.logo {display: flex; width: auto; overflow-x: hidden; height: 100%; align-items: center; padding: 7px 0px; position: absolute; left: 0; z-index: 1500; box-sizing: border-box;} #header .wrapper a.logo img {display: block; width: auto; height: 100%; background-size: auto 100%;} #header .wrapper ul {display: flex; justify-content: flex-end; flex-wrap: wrap; width: 100%; height: 100%;} #header .wrapper ul li #navicon a span, #header .wrapper ul li#services {display: none;} #header .wrapper ul li {display: flex; width: auto; height: 100%;} #header .wrapper ul li ul {display: flex; width: auto; height: 100%; align-items: center; flex-wrap: wrap;} #header .wrapper ul li ul li {display: flex; width: auto; height: 100%; align-items: center;} #header .wrapper ul li ul li a {display: block; width: auto; height: auto; color: #dfdffd; margin-left: 2.1rem; font-weight: 600; font-size: 17px; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #header .wrapper ul li ul li a:hover, #header .wrapper ul li ul li a.active {color: #fe1818;} @media screen and (max-width: 1100px) { #header {height: 66px;} #header .wrapper a.logo {padding: 12px 0px;} #header .wrapper ul li ul li a {margin-left: 1.6rem; font-size: 16px;} .triObrazky div { width: 100%; float:none; } } @media screen and (max-width: 1000px) { #header .wrapper a.logo {padding: 14px 0px;} #header .wrapper ul li #navicon {display: flex; width: 100%; height: 100%; align-items: center; flex-wrap: wrap;} #header .wrapper ul li#services {display: block;} #header .wrapper ul li#services:hover > a {color: #dfdffd;} #header .wrapper ul li#services li {;} #header .wrapper ul li#services li a {font-size: 14px; margin: 3px 0;;} #header .wrapper ul li #navicon a {display: block; width: 40px; height: 40px; background: URL('images/navicon.svg') no-repeat left top; background-size: 40px auto; box-sizing: border-box; -webkit-transition: tranform .25s ease-in-out; transition: transform .25s ease-in-out;} #header .wrapper ul li #navicon a:hover {background-position: left -40px; cursor: pointer; transform: rotate(180deg); -webkit-transition: tranform .25s ease-in-out; transition: transform .25s ease-in-out;} #header .wrapper ul li ul.MyDropdown {display: block; position: absolute; z-index: 1000; width: calc(100% + 4rem); right: -2rem; min-height: 100%; height: auto; padding: 75px 0px 15px 0px; top: -800px; box-sizing: border-box; background: rgba(0, 0, 0, 0.94); -webkit-transition: top 0.8s; -moz-transition: top 0.8s; transition: top 0.8s;} #header .wrapper ul li ul.show {top: 0px; -webkit-transition: top 0.4s; -moz-transition: top 0.5s; transition: top 0.5s;} #header .wrapper ul li ul li {display: block; width: 100%; margin: 0px auto; text-align: center; position: relative;} #header .wrapper ul li ul li.cross {display: block; position: absolute; top: 15px; right: 2rem; width: 40px; height: 40px;} #header .wrapper ul li ul li.cross i {display: block; width: 100%; height: 100%; background: URL('images/navicon.svg') no-repeat center -80px; background-size: 100% auto; -webkit-transition: tranform .25s ease-in-out; transition: transform .25s ease-in-out;} #header .wrapper ul li ul li.cross i:hover {background-position: center -120px; cursor: pointer; transform: rotate(180deg); -webkit-transition: tranform .25s ease-in-out; transition: transform .25s ease-in-out;} #header .wrapper ul li ul li a {display: inline-block; width: auto; height: auto; font-size: 16px; margin: 9px 0; box-sizing: border-box;} #header .wrapper ul li ul li a#booking {margin-top: 1rem;}} @media screen and (max-width: 480px) { #header {height: 46px;} #header .wrapper {padding 0; box-sizing: border-box;} #header .wrapper a.logo {padding: 10px 0px;} #header .wrapper ul li ul.MyDropdown {width: calc(100% + 3rem); right: -1.5rem; padding-top: 60px;} #header .wrapper ul li ul li.cross {right: 1.5rem; top: 3px;} #header .wrapper ul li ul li a {font-size: 14px; margin: 8px 0;} #header .wrapper ul li#services li a {font-size: 12px; margin: 3px 0;;} } #submenu {display: block; width: 100%; height: 46px; padding-bottom: 8px; box-sizing: border-box; position: relative; z-index: 500;} #submenu nav {display: block; width: 100%; height: 100%; background: URL('images/bg-submenu.png') no-repeat center bottom, #b1b1b1; position: relative; z-index: 502;} #submenu ul.wrapper {display: flex; justify-content: center; height: 100%;} #submenu ul.wrapper li {display: flex; align-items: center; width: auto; height: 100%; border-right: solid 1px #bcbcbc; box-sizing: border-box;} #submenu ul.wrapper li:last-child {border-right: none;} #submenu ul.wrapper li a {display: block; width: auto; height: auto; color: #595959; font-size: 20px; font-weight: 500; padding: 2px 1rem 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} #submenu ul.wrapper li:hover {background: rgba(0, 0, 0, 0.04);} #submenu ul.wrapper li:hover a {color: black;} #submenu ul.wrapper li.active {height: calc(100% + 8px); border-right: none; background: URL('images/bg-submenu-active.png') no-repeat center bottom;} #submenu ul.wrapper li.active a {color: white; padding-bottom: 8px;} #submenu .shadow1 {display: block; width: 100%; height: 4px; position: absolute; left: 0; bottom: 4px; z-index: 501; background: URL('images/shadow1.png') no-repeat center top;} @media screen and (max-width: 1000px) { #submenu {display: none;} } #footer {display: block; width: 100%; height: auto; padding-bottom: 0; background: URL("images/pattern.png") repeat center top; background-size: 40px auto; font-family: 'Teko', sans-serif; -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 1); box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);} .hp #footer {background: #212121;} #footer .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap; padding: 2rem 0; box-sizing: border-box;} #footer .info {display: flex; justify-content: space-between; width: 510px; height: auto; flex-wrap: wrap;} #footer #map {display: flex; width: calc(100% - 530px); height: 260px;} #footer .info ul {display: block; width: 49%; height: auto; margin-bottom: 9px;} #footer .info ul li, #footer .info ul li a {display: block; width: auto; height: auto; color: #e9e9e9; font-size: 20px; line-height: 1.2em; font-weight: 500;} #footer .info ul li:first-child {color: #fe1818; font-size: 17px; font-weight: 600; padding-bottom: 3px;} #footer .info ul li span {display: block; font-size: 15px; line-height: 1em;} #footer a:hover {text-decoration: underline;} @media screen and (max-width: 960px) { #footer .info, #footer #map {width: 100%;} #footer #map {margin-top: 20px;} #footer .info ul {width: 31%;} } @media screen and (max-width: 780px) { #footer .info ul {width: 48%;} } @media screen and (max-width: 520px) { #footer .info ul {width: 100%; text-align: center; margin-bottom: 12px;} } /*--HOMEPAGE-----------------------------------------------------------------------------------------------------------------------------------------------*/ /*--sekce #top vč. slideru platí i pro stránky s detailem služby (SERVICES)--*/ #top {display: block; width: 100%; height: auto; margin-top: -8px; position: relative;} #slider {display: block; width: 100%; height: auto; background: #b1b1b1; overflow-x: hidden; position: relative;} #slider .wrapper {height: 100%; padding: 0; position: relative; overflow-y: visible;} .swiper-container.s1 {display: block; width: 100%; height: 28rem; overflow: hidden;} .swiper-container.s1 .swiper-slide {display: block; width: 100%; height: 100%; overflow: hidden; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; position: relative; box-sizing: border-box;} .swiper-container.s1 .swiper-slide .text {display: block; width: 80%; height: auto; padding: 0 2rem; position: absolute; left: 0; bottom: 120px; box-sizing: border-box;} .swiper-container.s1 .swiper-slide .title, .swiper-container.s1 .swiper-slide li {display: block; width: 100%; height: auto; position: relative; z-index: 10; text-align: left; color: #012138; font-size: 20px; line-height: 1.2em; text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.35); font-weight: 600; box-sizing: border-box;} .swiper-container.s1 .swiper-slide li:before {display: inline-block; width: 10px; height: auto; content: "- "; margin-left: -10px;} .swiper-container.s1 .swiper-slide .title {color: white; font-size: 2.5rem; line-height: 1em; padding: 15px 4rem; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); font-family: 'Sarpanch', sans-serif; background: URL('images/gradient1.png') no-repeat center center; background-size: 100% 100%;} .swiper-container.s1 .swiper-slide ul {display: block; width: auto; margin-left: 12px; padding: 15px 10rem 15px 4rem; background: URL('images/gradient2.png') no-repeat center center; background-size: 100% 100%;} .swiper-container.s1 .swiper-slide#bg-img1 {background: URL('images/pictogram.png') no-repeat center center, URL('images/img1.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide#bg-img1c {background: URL('images/pictogram.png') no-repeat center center, URL('images/img1c.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide#bg-img2 {background: URL('images/pictogram.png') no-repeat center center, URL('images/img2.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide#bg-img3 {background: URL('images/pictogram.png') no-repeat center center, URL('images/img3.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide#bg-img4 {background: URL('images/pictogram.png') no-repeat center center, URL('images/img4.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide#bg-img5 {background: URL('images/pictogram.png') no-repeat center center, URL('images/img6_new.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide#bg-img6 {background: URL('images/pictogram.png') no-repeat center center, URL('images/img7.jpg') no-repeat center center; background-size: auto 94%, cover;} .swiper-container.s1 .swiper-slide li img {display: block; width: 100px; margin: 15px 0;} #slider .wrapper #concrete-l {display: block; position: absolute; z-index: 5; top: 0; left: calc(-570px + 14rem); width: 440px; height: 100%; background: URL('images/bg-slider-concrete-l.png') no-repeat right top; background-size: auto 100%; box-sizing: border-box;} #slider .wrapper #concrete-r {display: block; position: absolute; z-index: 5; top: 0; right: calc(-570px + 14rem); width: 440px; height: 100%; background: URL('images/bg-slider-concrete-r.png') no-repeat left top; background-size: auto 100%; box-sizing: border-box;} .swiper-container.s1 .swiper-slide li.buttons {display: flex; align-items: center; margin-left: 0;} .swiper-container.s1 .swiper-slide li.buttons a {display: block; width: auto; margin-right: 0px; position: relative;} .swiper-container.s1 .swiper-slide li.buttons a:first-child {margin-right: 30px;} .swiper-container.s1 .swiper-slide li.buttons a:first-child:after {display: block; width: 1px; height: 100%; background: rgba(0,0,0,0.2); content: ""; position: absolute; right: -15px; top: -2px;} .swiper-container.s1 .swiper-slide li.buttons a {display: inline-block; color: #012138; font-weight: 500; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} .swiper-container.s1 .swiper-slide li.buttons a:hover {color: #fe1818;} @media screen and (max-width: 1000px) { #top {margin-top: 0;} #slider .wrapper {width: 100%; margin: 0; padding: 0;} .swiper-container.s1 .swiper-slide .text {width: 90%;} .swiper-container.s1 .swiper-slide .title {font-size: 26px; padding: 15px 3rem 15px 4rem;} .swiper-container.s1 .swiper-slide li {font-size: 17px;} #slider .wrapper #concrete-l {left: calc(-520px + 14rem);} #slider .wrapper #concrete-r {right: calc(-520px + 14rem);} } @media screen and (max-width: 800px) { .swiper-container.s1 {height: 37rem;} } @media screen and (max-width: 600px) { .swiper-container.s1 {height: 40rem;} .swiper-container.s1 .swiper-slide {padding: 0 0 110px;} .swiper-container.s1 .swiper-slide .text {width: 100%; padding: 0 1rem; bottom: 100px;} .swiper-container.s1 .swiper-slide ul {background: URL('images/gradient2b.png') no-repeat center center; background-size: 100% 100%;} .swiper-container.s1 .swiper-slide li {font-size: 15px;} } @media screen and (max-width: 540px) { .swiper-container.s1 .swiper-slide.title {padding: 15px 35px;} .swiper-container.s1 .swiper-slide ul {padding: 15px 35px;} } #slider-switcher {display: block; width: 100%; height: auto; position: relative; margin-top: -60px; z-index: 500;} #slider-switcher .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;} #slider-switcher .switch {display: block; width: 24%; height: auto; margin: 12px 6px 0; position: relative; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} #slider-switcher .switch:first-child {margin-left: 0;} #slider-switcher .switch:last-child {margin-right: 0;} #slider-switcher .switch .img1 {display: block; width: 100%; height: 8rem;} #slider-switcher .switch .img2 {display: block; width: 100%; height: 8rem; opacity: 0; position: absolute; top: 0; left: 0} #slider-switcher .switch h2 {display: block; width: 100%; height: auto; color: white; padding: 8px 10px 10px; line-height: 1.1em; font-size: 20px; background: #ef0909; box-sizing: border-box; font-family: 'Sarpanch', sans-serif; font-weight: 600;} #slider-switcher .switch .links {display: flex; justify-content: flex-end; width: 100%; height: auto; padding: 13px 7px; box-sizing: border-box; background: URL('images/img-small-bottom-a.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch .links a {display: block; width: auto; height: auto; font-size: 15px; color: #494949; padding: 0 8px; border-left: solid 1px #b5b5b5; border-right: solid 1px #b5b5b5; font-family: 'Sarpanch', sans-serif; font-weight: 600;} #slider-switcher .switch .links a:first-child {color: #184062; border: none;} #slider-switcher .switch .links a:last-child {color: #e93903; border: none;} #slider-switcher .switch .links a:hover {text-decoration: underline;} #slider-switcher .switch#service1 .img1 {background: URL('images/img1-small-a.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service2 .img1 {background: URL('images/img2-small-a.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service3 .img1 {background: URL('images/img3-small-a.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service4 .img1 {background: URL('images/img8-small-a.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service1 .img2 {background: URL('images/img1-small-b.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service2 .img2 {background: URL('images/img2-small-b.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service3 .img2 {background: URL('images/img3-small-b.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch#service4 .img2 {/*background: URL('images/img4-small-b.png') no-repeat center top;*/background: URL('images/img8-small-b.png') no-repeat center top; background-size: 100% auto;} #slider-switcher .switch:hover, #slider-switcher .switch.active {margin-top: 0px; margin-bottom: 12px;} #slider-switcher .switch#service1:hover .img, #slider-switcher .switch#service1.active .img, #slider-switcher .switch#service2:hover .img, #slider-switcher .switch#service2.active .img, #slider-switcher .switch#service3:hover .img, #slider-switcher .switch#service3.active .img, #slider-switcher .switch#service4:hover .img, #slider-switcher .switch#service4.active .img {background-position: center 100%;} #slider-switcher .switch:hover .img2, #slider-switcher .switch.active .img2 {opacity: 1;} #slider-switcher .switch:hover .links, #slider-switcher .switch.active .links {background: URL('images/img-small-bottom-b.png') no-repeat center top; background-size: 100% auto;} @media screen and (min-width: 980px) and (max-width: 1124px) { #slider-switcher .switch .img1, #slider-switcher .switch .img2 {height: 7rem;} #slider-switcher .switch h2 {padding: 7px 8px 9px; font-size: 17px;} #slider-switcher .switch .links a {font-size: 13px; padding: 0 6px;} } @media screen and (max-width: 980px) { #slider-switcher .switch {width: 49%; margin: 12px 0 0;} #slider-switcher .switch:hover, #slider-switcher .switch.active {margin: 12px 0 0;} #slider-switcher .switch .img1, #slider-switcher .switch .img2 {height: 12rem;} } @media screen and (max-width: 580px) { #slider-switcher .switch {width: 100%; margin: 25px 0 0;} #slider-switcher .switch:hover, #slider-switcher .switch.active {margin: 25px 0 0;} #slider-switcher .switch .img1, #slider-switcher .switch .img2 {height: 20rem;} } @media screen and (max-width: 440px) { #slider-switcher .switch .img1, #slider-switcher .switch .img2 {height: 18rem;} } @media screen and (max-width: 380px) { #slider-switcher .switch .img1, #slider-switcher .switch .img2 {height: 15rem;} } .hp .gallery-slider {margin-top: -3rem;} /*--SERVICES-----------------------------------------------------------------------------------------------------------------------------------------------*/ .service #slider .bottom {display: block; width: 100%; height: 10px; background: URL('images/bg-submenu.png') no-repeat center bottom; position: absolute; bottom: 0; z-index: 499;} .service #slider .bottom .buttons {display: block; width: auto; height: 34px; position: absolute; top: -34px; right: 10%;} .service #slider .bottom .buttons a {display: inline-block; height: 100%; font-size: 26px; margin: 0;} .service #slider .bottom .buttons a:first-child {width: 140px; background: URL('images/button-reference.svg') no-repeat center top; background-size: 100% 200%; margin-right: -3px;} .service #slider .bottom .buttons a:last-child {width: 110px; background: URL('images/button-cenik.svg') no-repeat center top; background-size: 100% 200%;} .service #slider .bottom .buttons a:hover {background-position: center bottom;} .service #slider .text {bottom: 4rem;} .service #slider h1 {margin: 0;} .service .gallery {margin-top: 2rem;} .service .gallery .img {width: 19%; height: 8.5rem;} .service .swiper-container.s2 {height: 14rem;} .service .images {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .service .images .img {display: flex; width: 49.5%; height: 17rem; justify-content: center; align-items: center; overflow: hidden; background: black;} .service .images .img img {display: block; width: auto; height: 100%;} @media screen and (max-width: 1124px) { .service .gallery .img {width: 24%; height: 9rem;} } @media screen and (max-width: 900px) { .service #slider .text {bottom: 70px;} .service .gallery .img {width: 33%; height: 11rem;} } @media screen and (max-width: 700px) { .service .gallery .img {width: 49.5%; height: 15.5rem;} .service .images .img {width: 100%; height: 22rem; margin-bottom: 6px;} } @media screen and (max-width: 500px) { .service .gallery .img {width: 100%; height: 24rem;} } /* Zkopírováno z Bazar */ .service .swiper-container.s3 {display: flex; width: 500px; height: auto; padding: 0 calc(50% - 250px); position: relative;} .service .swiper-container.s3 .swiper-slide {display: flex; width: 100%; height: 100%; flex-direction: column; background: #121212; position: relative; box-sizing: border-box; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-box-shadow: 0px 0px 20px rgba(247, 247, 247, 1); -moz-box-shadow: 0px 0px 20px rgba(247, 247, 247, 1); box-shadow: 0px 0px 20px rgba(247, 247, 247, 1);} .service .swiper-container.s3 .swiper-slide-prev, .service .swiper-container.s3 .swiper-slide-next {opacity: 0.15;} .service .swiper-slide .img {display: flex; width: 100%; height: 350px; justify-content: center; align-items: center; overflow: hidden; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .service .swiper-slide .img img {display: block; width: auto; height: 100%;} .service .swiper-slide .info {display: block; width: 100%; height: auto; color: white; background: URL("images/pattern4.png") repeat center top, #232323; padding: 30px 60px 35px; box-sizing: border-box;} .service .swiper-slide .info h2 {color: #fe1818; font-size: 24px; line-height: 1.2em; text-align: left; padding: 0 0 5px; margin: 0; font-family: 'Teko', sans-serif;} .service .swiper-slide .info p {color: white; font-size: 18px; text-align: left; padding: 0 0 5px; margin: 0;} .service .swiper-slide .info a {display: block; width: auto; height: auto; font-size: 18px; line-height: 1em; color: white; letter-spacing: 0.2px; padding-left: 22px; margin-top: 5px; box-sizing: border-box; background: URL('images/icon-photo.svg') no-repeat left top; background-size: auto 200%;} .service .swiper-slide .info a:hover {background-position: left bottom; color: #cecece;} .service .swiper-slide .info p.price {color: #fe1818; font-size: 25px; text-align: right; padding: 0; margin-top: 20px; font-weight: 700;} .service .swiper-slide .info p.price.dph {font-size: 14px; margin-top: -3px;} .service .swiper-slide .info p.price.dph:after {content: " s dph";} .service .swiper-slide .corner-top {display: block; width: 40px; height: 40px; position: absolute; top: 0; right: 0; z-index: 200; background: URL("images/junction-corner-top.png") no-repeat right top; background-size: cover;} .service .swiper-slide .corner-bottom {display: block; width: 40px; height: 40px; position: absolute; bottom: 0; left: 0; z-index: 200; background: URL("images/junction-corner-bottom.png") no-repeat left bottom; background-size: cover;} .service .swiper-button-prev, .service .swiper-button-next {display: block; opacity: 0.6; position: absolute; top: calc(50% - 30px); width: 50px; height: 50px; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .service .swiper-button-prev {left: 20px; background: URL('images/arrow-l2.svg') no-repeat center center; background-size: auto 100%;} .service .swiper-button-next {right: 20px; background: URL('images/arrow-r2.svg') no-repeat center center; background-size: auto 100%;} .service .swiper-button-prev:hover, .service .swiper-button-next:hover {opacity: 1; cursor: pointer;} @media screen and (max-width: 720px) { .service .swiper-container.s3 {width: 80%; padding: 0 10%;} .service .swiper-slide .img {height: 20rem;} .service .swiper-slide .info {padding: 20px 15px;} .service .swiper-slide .info h2 {font-size: 22px;} .service .swiper-slide .info p {font-size: 16px;} .service .swiper-button-prev {left: 0px; background-size: auto 80%;} .service .swiper-button-next {right: 0px; background-size: auto 80%;} } @media screen and (max-width: 480px) { .service .swiper-container.s3 {width: 100%; padding: 0 30px; box-sizing: border-box;} .service .swiper-button-prev {left: -10px;} .service .swiper-button-next {right: -10px;} .service .swiper-container.s3 .swiper-slide-prev, .service .swiper-container.s3 .swiper-slide-next{opacity: 0;} } /*--REFERENCES-----------------------------------------------------------------------------------------------------------------------------------------------*/ .ref h2 {font-size: 1.6rem; text-align: left; margin: 3rem 0 0.4rem;} .ref h2 .date {display: inline-block; margin-right: 0.5em; color: #b9b9b9;} .ref .gallery {margin-top: 1rem;} /*--BAZAR & CENÍK-----------------------------------------------------------------------------------------------------------------------------------------------*/ .grid .items {display: flex; width: 100%; height: auto; justify-content: flex-start; flex-wrap: wrap;} .grid .item {display: block; width: calc(25% - 1rem); height: auto; position: relative; background: #151515; margin: 0 0.5rem 1rem;} .grid .item .img {display: flex; width: 100%; height: 10rem; justify-content: center; align-items: center; overflow: hidden; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .grid .item .img img {display: block; width: auto; height: 100%;} .grid .item .info {display: block; width: 100%; height: auto; color: white; padding: 1rem 1rem 80px; box-sizing: border-box;} .grid .item .info h2 {color: #fe1818; font-size: 24px; line-height: 1.2em; text-align: left; padding: 0 0 5px; margin: 0; font-family: 'Teko', sans-serif;} .grid .item .info h2:hover {text-decoration: underline;} .grid .item .info p {color: white; font-size: 18px; text-align: left; padding: 0 0 5px; margin: 0;} .grid .item .info .detail {display: block; width: auto; height: auto; font-size: 18px; line-height: 1em; color: white; letter-spacing: 0.2px; padding: 0 0 0 22px; margin-top: 5px; box-sizing: border-box; background: URL('images/icon-detail.svg') no-repeat left top; background-size: auto 200%;} .grid .item .info .detail:hover {background-position: left bottom; color: #cecece;} .grid .item .info .price {display: block; width: 100%; height: auto; margin-top: 20px; position: absolute; bottom: 1rem; right: 1rem;} .grid .item .info .price p {color: #fe1818; font-size: 24px; text-align: right; font-weight: 700; padding: 0;} .grid .item .info .price p.dph {font-size: 14px; margin-top: -3px;} .grid .item .info .price p.dph:after {content: " s dph";} .grid .item .corner-top {display: block; width: 40px; height: 40px; position: absolute; top: 0; right: 0; z-index: 200; background: URL("images/junction-corner-top.png") no-repeat right top; background-size: cover;} .grid .item .corner-bottom {display: block; width: 40px; height: 40px; position: absolute; bottom: 0; left: 0; z-index: 200; background: URL("images/junction-corner-bottom.png") no-repeat left bottom; background-size: cover;} @media screen and (max-width: 1080px) { .grid .item {width: calc(33.33% - 1rem);} .grid .item .img {height: 12rem;} .grid .item .info h2 {font-size: 18px;} .grid .item .info p {font-size: 16px;} .grid .item .info .price p {font-size: 23px;} .bazar .swiper-slide .info h2 {font-size: 22px;} .bazar .swiper-slide .info p {font-size: 16px;} } @media screen and (max-width: 800px) { .grid .item {width: calc(50% - 1rem);} .grid .item .img {height: 15rem;} .grid .item .info {padding: 2rem 2rem 80px;} } @media screen and (max-width: 540px) { .grid .item {width: 100%; margin: 0 0 1rem;} .grid .item .img {height: 20rem;} } /*--BAZAR - DETAIL---------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .shop.detail .section .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} .shop.detail h1, .shop.detail .title {font-size: 3rem; text-align: left; margin: 0; line-height: 1.1em; padding: 0;} .shop.detail .price {display: block; width: auto; height: auto; margin: 0px 0 20px; text-align: left; padding: 0;} .shop.detail .price p {color: #607686; font-size: 28px; text-align: left; font-weight: 700; padding: 0;} .shop.detail .price p.dph {font-size: 16px; margin-top: -8px;} .shop.detail .price p.dph:after {content: " s dph";} .shop.detail .left {display: block; width: 20rem; height: auto;} .shop.detail .left h1, .shop.detail .left .title, .shop.detail .price {display: none;} .shop.detail .left .image {display: block; width: 100%; height: auto; padding: 15px; box-sizing: border-box; background: black;position: relative;} .shop.detail .corner-top {display: block; width: 40px; height: 40px; position: absolute; top: 0; right: 0; z-index: 200; background: URL("images/junction-corner-top.png") no-repeat right top; background-size: cover;} .shop.detail .corner-bottom {display: block; width: 40px; height: 40px; position: absolute; bottom: 0; left: 0; z-index: 200; background: URL("images/junction-corner-bottom.png") no-repeat left bottom; background-size: cover;} .shop.detail .swiper-container.s2 {display: flex; width: 100%; height: 18rem;} .shop.detail .swiper-container.s2 .swiper-slide {display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .shop.detail .swiper-container.s2 .swiper-slide .img {display: flex; height: 100%; width: 100%; justify-content: center; overflow: hidden;} .shop.detail .swiper-container.s2 .swiper-slide .img img {display: block; height: 100%; width: auto; margin-left: -5rem;} .shop.detail .swiper-container.s3 {display: flex; width: 100%; height: 4rem; margin-top: 10px; box-sizing: border-box;} .shop.detail .swiper-container.s3 .swiper-slide {opacity: 0.3; display: block; width: auto; height: 100%; margin: 0; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .shop.detail .swiper-container.s3 .swiper-slide:hover, .shop.detail .swiper-container.s3 .swiper-slide-active {opacity: 1;} .shop.detail .swiper-container.s3 .swiper-slide img {height: 100%; width: auto; cursor: pointer;} .swiper-button-prev, .swiper-button-next {display: block; position: absolute; top: 50%; width: 25px; height: 40px; z-index: 500; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .swiper-button-prev {opacity: 0.65; left: 5px; background: URL('images/arrow-l.svg') no-repeat center center; background-size: auto 100%;} .swiper-button-next {opacity: 0.65; right: 5px; background: URL('images/arrow-r.svg') no-repeat center center; background-size: auto 100%;} .swiper-button-prev:hover, .swiper-button-next:hover {opacity: 1; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .swiper-button-disabled {opacity: 0.06;} .swiper-button-disabled:hover {opacity: 0.06; cursor: auto;} .shop.detail .info {display: block; width: calc(100% - 20rem); height: auto; padding-left: 2rem; box-sizing: border-box;} .shop.detail .info .price {display: block; width: auto; height: auto;} .shop.detail .info .text {width: 100%; height: auto; margin-bottom: 1rem; text-align: left; padding: 0;} .shop.detail .info .button1 {display: inline-block; margin-top: 35px;} @media screen and (max-width: 640px) { .shop.detail .left {width: 100%; margin-bottom: 25px;} .shop.detail .left h1, .shop.detail .left .title, .shop.detail .left .price {display: block;} .shop.detail .swiper-container.s2 {height: 30rem;} .shop.detail .swiper-container.s3 {height: 7rem;} .shop.detail .info {width: 100%; padding-left: 0;} .shop.detail .info h1, .shop.detail .info .title, .shop.detail .info .price {display: none;} .shop.detail .info .text {margin-top: 0;} } /*--CENIK-----------------------------------------------------------------------------------------------------------------------------------------------*/ .prices .link:before {content: "";} .prices .item .info .price {display: block; width: 100%; text-align: right; color: #fe1818; font-size: 24px; font-weight: 700; padding: 0;} /*--KONTAKT-----------------------------------------------------------------------------------------------------------------------------------------------*/ .contact .wrapper.flex {justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;} .contact .wrapper.flex ul {display: block; width: 30%; font-size: 22px; line-height: 1.1em; border-right: solid 1px #cfcfcf; padding-right: 5%; margin-right: 5%; margin-bottom: 2rem; box-sizing: border-box;} .contact .wrapper.flex ul:last-child {border-right: none; padding: 0; margin-right: 0;} .contact .wrapper.flex ul li.red {color: #fe1818;} .contact .wrapper p {text-align: center; width: 100%; color: #919191;} .contact #footer .info {justify-content: center; width: 100%;} .contact #form {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; height: auto; box-sizing: border-box;} .contact #form .field {display: block; font-size: 16px; margin-bottom: 0.2rem; font-weight: 400; width: 33%; height: auto; position: relative;} .contact #form .field label {color: white; line-height: 59px; position: absolute; left: 15px; width: auto;; font-size: 22px; height: auto;} .contact #form .field input {width: 100%; height: 56px; color: white; font-size: 15px; padding: 0px 15px 0px 75px; background: #2d2d2d; outline: none; box-sizing: border-box; border: none;} .contact #form .txt {display: block; width: 100%; height: auto; box-sizing: border-box;} .contact #form .txt textarea {display: block; color: white; width: 100%; height: 8rem; padding: 15px; font-size: 16px; background: #2d2d2d; outline: none; box-sizing: border-box;} .contact #form button {display: block; width: 130px; height: auto; margin: 15px 0; padding: 12px 0 11px; cursor: pointer; font-family: 'Teko', sans-serif;} .contact #map {width: 100%; height: 20rem;} .contact #footer #copyright {width: auto;} .contact #footer #copyright li, .contact #footer #copyright li a {display: inline-block; padding: 8px 0; font-family: 'Teko', sans-serif; font-size: 18px; font-weight: 500;} .contact #footer #copyright li:first-child {font-size: 18px; padding-bottom: 0; font-weight: 500;} @media screen and (max-width: 900px) { .contact .wrapper.flex ul {width: 46%; padding-right: 8%; margin-right: 8%; border-right: none; padding: 0; margin-right: 0;} } @media screen and (max-width: 800px) { .contact #form .field {width: 100%; margin-bottom: 0.3rem;} .contact #form textarea {height: 20rem;} } @media screen and (max-width: 580px) { .contact .wrapper.flex ul {width: 100%;} }