/*------------------------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; } /*------------------------------------------------------*/ html, body, form {width: 100%; height: 100%;} body {background: white; font-family: 'Montserrat', sans-serif; overflow-x: hidden; overflow-y: auto; box-sizing: border-box;} @media screen and (min-width: 1801px) { body {font-size: 21px;} } @media screen and (max-width: 1800px) { body {font-size: 19px;} } @media screen and (max-width: 1600px) {) body {font-size: 17px;} } @media screen and (max-width: 1300px) { body {font-size: 16px;} } @media screen and (max-width: 960px) { body {font-size: 17px;} } @media screen and (max-width: 768px) { body {font-size: 16px;} } @media screen and (max-width: 540px) { body {font-size: 15px;} } :root { --color1: #e0aa2d; } .wrapper {display: flex; width: calc(100% - 4em); max-width: 1600px; justify-content: center; align-items: center; align-content: center; margin-left: auto; margin-right: auto; box-sizing: border-box; flex-wrap: wrap;} .header {display: block; width: 100%;} .header .navicon {display: block; width: 2em; height: 2em; position: fixed; top: 1em; left: 1em; z-index: 1000;} .header .navicon span {display: block; width: 100%; height: 100%; background: URL('../images/navicon.svg') no-repeat center top; background-size: 100% 400%; cursor: pointer;} .header .navicon span:hover {background-position: center 33.33%;} .header nav {display: block; width: 100%; height: 100%; padding: 4em 10% 4em; opacity: 0; box-sizing: border-box; background: rgba(15, 15, 15, 0.95); position: fixed; right: -9999px; top: 0; z-index: 999; transition: opacity 0.4s;} .header nav > span {display: block; width: 100%; text-align: left; margin-top: 1.4em;} .header nav > span a {display: inline-block; font-size: 1.4em; color: white; font-weight: 600; transition: 0.15s;} .header nav > span a:hover, .header nav > span a.sel {color: var(--color1);} .header.show nav {right: 0; opacity: 1;} .header.show .navicon span {background-position: center 66.66%;} .header.show .navicon span:hover {background-position: center bottom;} .header .tel {display: block; padding-left: 2.4em; position: absolute; top: 1em; right: 1em; z-index: 1000;} .header .tel:before {display: block; width: 1.8em; height: 1.8em; background: URL('../images/icon-phone.svg') no-repeat center center; background-size: 100% auto; position: absolute; left: 0; top: 0.2em; content: "";} .header .tel span {display: block; font-size: 0.7em; color: var(--color1); font-weight: 600;} .header .tel a {display: block; font-size: 1.1em; color: white; font-weight: 600; line-height: 1em; margin-top: 0.1em;} .margin-top-0 {margin-top: 0 !important;} .margin-bottom-0 {margin-bottom: 0 !important;} .padding-top-0 {padding-top: 0 !important;} .padding-bottom-0 {padding-bottom: 0 !important;} .button {display: flex; min-width: 8em; justify-content: center; align-items: center; flex-wrap: no-wrap; padding: 0.7em 1.4em; font-size: 0.8em; font-weight: 600; text-align: center; text-transform: uppercase; border: solid 1px transparent; outline: none; cursor: pointer; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .button.yellow {background: var(--color1); color: white; font-weight: 700 !important;} .button.yellow:hover {background: none; color: var(--color1); border-color: var(--color1);} .black .button.yellow {color: black;} .black .button.yellow:hover {color: var(--color1);} .top {display: block; width: 100%; padding: 0; position: relative; background: black;} .top .info {display: block; width: 100%; height: 100%; padding: 0; margin: 0; position: absolute; left: 0; top: 0; z-index: 2;} .top .info .wrapper {height: 100%; min-height: 500px; padding-top: 10%; position: relative; z-index: 2;} .top .info .wrapper > div {display: flex; width: 100%; flex-wrap: wrap; padding: 0 8%; box-sizing: border-box; text-shadow: 0px 0px 0.2em rgba(0,0,0,0.5);} .top .info h1 {display: block; width: 100%; font-size: 2.5em; color: white; font-weight: 700; line-height: 1.2em; margin-bottom: 0.2em;} .top .info ul {display: flex; width: 100%; align-items: center; flex-wrap: wrap;} .top .info ul li {display: flex; font-size: 1.1em; line-height: 1.1em; font-weight: 400; color: white; padding: 0 0.6em 0 0; margin: 0 0.7em 0.5em 0; border-right: solid 1px white; position: relative; box-sizing: border-box;} .top .info ul li:before {display: none;} .top .info ul li.location {padding-left: 1.1em; position: relative;} .top .info ul li.location:before {display: block; width: 0.8em; height: 1em; background: URL('../images/icon-marker.svg') no-repeat left top; background-size: auto 100%; position: absolute; left: 0; top: 0.05em; content: "";} .top .info ul li sup {font-size: 0.7em; vertical-align: top;} .top .info ul li:last-of-type {border: none;} .top .info ul li a {display: inline-block; color: white; text-decoration: underline;} .top .info ul li a:hover {color: #434343; text-decoration: none;} .top .info p {display: block; width: 100%; font-size: 1.5em; color: white; font-weight: 800; color: white; margin: 0.3em 0;} .top .info .button {display: block; min-width: auto; width: auto; font-size: 0.9em; color: black; letter-spacing: -0.03em; padding: 0.7em 1.3em; margin: 1em 0.2em; text-shadow: none;} .top .info .button:hover {color: var(--color1);} .top .info .button:nth-of-type(2) {color: var(--color1); background: none; border-color: var(--color1);} .top .info .button:nth-of-type(2):hover {color: black; background: var(--color1);} .top .image {display: block; width: 100%; height: 100vh; min-height: 500px; opacity: 0.75; overflow: hidden; position: relative; box-sizing: border-box; z-index: 1;} .top .image .img {display: flex; width: 100%; height: 100%; align-items: center; opacity: 0; position: absolute; left: 0; top: 0; z-index: 2; animation-name: image1; animation-duration: 24s; animation-iteration-count: infinite;} .top .image .img:nth-child(2) {animation-delay: 6s; z-index: 1;} .top .image .img:nth-child(3) {animation-delay: 12s; z-index: 0;} .top .image .img:nth-child(4) {animation-delay: 18s; z-index: 0;} .top .image .img span {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; animation-name: image2; animation-duration: 24s; animation-iteration-count: infinite;} .top .image .img:nth-child(1) span {background-image: URL('../images/gallery/large/1.jpg');} .top .image .img:nth-child(2) span {background-image: URL('../images/gallery/large/2.jpg');} .top .image .img:nth-child(3) span {background-image: URL('../images/gallery/large/1.jpg');} .top .image .img:nth-child(4) span {background-image: URL('../images/gallery/large/2.jpg');} .top .image video {display: block; width: 100%; height: 100%; object-fit: cover;} @media screen and (max-width: 768px) { .top .info .wrapper > div {font-size: 0.85em; padding: 0 5%;} } @media screen and (max-width: 480px) { .top .info ul li {font-size: 0.95em; padding: 0; margin: 0 0 0.5em 0; border-right: none;} .top .info ul li:after {display: inline-block; margin-right: 0.4em; content: ",";} } @keyframes image1 { 0% {opacity: 0;} 5% {opacity: 1;} 25% {opacity: 1;} 30% {opacity: 0;} 100% {opacity: 0;} } @keyframes image2 { 0% {left: 0; transform: scale(1,1);} 25% {left: 0; transform: scale(1.21,1.21);} 50% {left: 10%; transform: scale(1.21,1.21);} 75% {left: 0%; transform: scale(1.21,1.21);} 100% {left: 0%; transform: scale(1,1);} } section {display: block; width: 100%; padding: 2em 0;} #details {background: rgba(0,0,0,0.05);} .images {display: flex; width: 100%; flex-wrap: wrap; gap: 8px;} .images a {display: block; overflow: hidden; position: relative;} .images a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .35s ease-in-out;} .images a[href]:hover img {-ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);} @media screen and (min-width: 1601px) { .images.i4 a {width: calc(25% - 6px); height: 16rem;} .images.i3 a {width: calc(33.33% - 6px); height: 11rem;} /*.images.i2 a {width: calc(50% - 4px); height: 12rem;}*/ } @media screen and (min-width: 1080px) and (max-width: 1600px){ .images.i4 a {width: calc(25% - 6px); height: 16vw;} .images.i3 a {width: calc(33.33% - 6px); height: 10vw;} /*.images.i2 a {width: calc(50% - 4px); height: 12rem;}*/ } @media screen and (min-width: 640px) and (max-width: 1080px){ .images a {width: calc(33.33% - 6px); height: 20vw;} } @media screen and (max-width: 640px) { .images a {width: calc(50% - 4px); height: 30vw;} } .gallery {display: block; width: 100%; position: relative;} .gallery:before {display: block; width: 4em; height: 100%; opacity: 0; background: URL('../images/gallery-gradient-left.png') no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; top: 0; z-index: 3; content: ""; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .gallery:after {display: block; width: 4em; height: 100%; opacity: 0; background: URL('../images/gallery-gradient-right.png') no-repeat center center; background-size: 100% 100%; position: absolute; right: 0; top: 0; z-index: 3; content: ""; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .gallery .swiper-slide {display: block; width: 100%; height: auto; padding-top: 56%; overflow: hidden; background: white; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .gallery .swiper-slide a {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} .gallery .swiper-slide a img {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} .gallery .swiper-slide:hover a img {opacity: 0.8; transform: scale(1.05,1.05);} .gallery .swiper-button-prev, .gallery .swiper-button-next {display: block; width: 0.8em; height: 2em; z-index: 5; opacity: 0.7; position: absolute; top: calc(50% - 1em); z-index: 4; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .gallery .swiper-button-prev {left: -2em; background-image: URL('../images/arrow-white-left.svg');} .gallery .swiper-button-next {right: -2em; background-image: URL('../images/arrow-white-right.svg');} .gallery .swiper-button-prev:hover, .gallery .swiper-button-next:hover {opacity: 1;} .gallery .swiper-button-disabled {display: none;} .gallery .swiper-pagination {display: flex; width: 100%; height: 3em; justify-content: center; align-items: center; position: absolute; left: 0; bottom: 0; z-index: 4;} .gallery .swiper-pagination:before {display: block; width: 100%; height: 100%; opacity: 0.5; background: URL('../images/gradient2.png') no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: 0; z-index: -1; content: "";} .gallery .swiper-pagination-bullet {display: block; width: 0.45em; height: 0.45em; border-radius: 100%; opacity: 0.5; margin: 0 0.15em; border: solid 0.15em white; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .gallery .swiper-pagination-bullet:hover {opacity: 1;} .gallery .swiper-pagination-bullet-active {background: white; opacity: 1;} .gallery:hover:before, .gallery:hover::after {opacity: 1;} .gallery:hover .swiper-button-prev {left: 1em;} .gallery:hover .swiper-button-next {right: 1em;} .two-cols {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; position: relative; margin-bottom: 1.8em;} .two-cols:last-of-type {margin: 0;} .two-cols > div {display: block; order: 0;} @media screen and (min-width: 1080px) { .two-cols.v1-1 > div {width: 48.5%;} .two-cols.v1-2 > div:nth-child(1) {width: 36.5%;} .two-cols.v1-2 > div:nth-child(2) {width: 60.5%;} .two-cols.v2-1 > div:nth-child(1) {width: 60.5%;} .two-cols.v2-1 > div:nth-child(2) {width: 36.5%;} .two-cols > div.order-1 {order: 1;} } @media screen and (max-width: 1080px) { .two-cols > div {width: 100%; margin-bottom: 1.4em;} .two-cols > div:last-child {margin: 0;} } .black {background: URL("../images/black-pattern.jpg") repeat center center; background-size: 15px auto;} .article {display: block; width: 100%;} .divider {display: block; width: 100%; height: 1px; background: rgba(0,0,0,0.1); margin: 0.8em 0;} h2 {display: block; width: 100%; margin: 1em 0 0.8em; color: black; font-size: 1.9em; font-weight: 700; box-sizing: border-box; position: relative;} h3 {display: block; width: 100%; margin: 1em 0 0.7em; color: black; font-size: 1.5em; font-weight: 700; box-sizing: border-box; position: relative;} h4 {display: block; width: 100%; margin: 1em 0 0.6em; color: black; font-size: 1.1em; font-weight: 700; box-sizing: border-box; position: relative;} p, li, table {color: #252525; font-size: 1em;} p {display: block; width: 100%; line-height: 1.6em; font-weight: 400; text-align: justify;} p a, li a {color: #252525; text-decoration: underline;} p a:hover, li a:hover {color: black; text-decoration: none;} p strong, li strong, table strong {font-weight: 600;} p em, li em, table em {font-style: italic;} li {text-align: left; line-height: 1.4em; margin-bottom: 0.2em; padding-left: 0.8em; position: relative; box-sizing: border-box;} li:before {display: block; width: 0.8em; height: 0.9em; background: URL("../images/arrow-blue-right.svg") no-repeat left center; background-size: auto 100%; position: absolute; left: 0; top: 0.2em; content: "";} li:last-child {margin: 0;} sup {font-size: 0.7em; vertical-align: top; position: relative; top: -0.4em;} .graybox {padding: 2.5em; background: rgba(0,0,0,0.05); box-sizing: border-box;} .infographics {display: block; width: 100%;} .infographics li {padding-left: 1.7em; font-size: 0.95em; font-weight: 500; margin-bottom: 0.2em; padding: 0.95em 1em 0.95em 2.9em; background: rgba(0,0,0,0.05); border: solid 1px rgba(0,0,0,0.06); box-sizing: border-box; position: relative;} .infographics li:before {display: none;} .infographics li img {display: block; width: 1.3em; height: 1.3em; position: absolute; left: 1em; top: 1em;} .infographics li:last-child {font-size: 1.1em; color: white; background: var(--color1); border: none; padding: 0.9em 0.9em 0.9em 2.9em;} .infographics li:last-child img {top: 1em;} @media screen and (min-width: 768px) and (max-width: 1080px){ .infographics {display: flex; justify-content: space-between; flex-wrap: wrap;} .infographics li {width: calc(50% - 0.1em);} } .before-after {display: block; width: 100%;} .before-after .twentytwenty-overlay, .before-after .twentytwenty-before-label, .before-after .twentytwenty-after-label {display: none;} .scheme {display: block; width: 100%;} .scheme img {width: 100%; margin: 0 auto;} @media screen and (min-width: 1400px) { .scheme img:nth-child(1) {display: block;} } @media screen and (min-width: 1080px) and (max-width: 1400px){ .scheme img:nth-child(2) {display: block;} } @media screen and (min-width: 480px) and (max-width: 1080px){ .scheme img:nth-child(3) {display: block; max-width: 768px;} } @media screen and (max-width: 480px) { .scheme img:nth-child(4) {display: block; max-width: 380px;} } .virtual {display: block; width: 100%; padding-top: 56.25%; box-sizing: border-box; position: relative;} .virtual iframe {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .locality {display: flex; justify-content: space-between; flex-wrap: wrap;} .locality > li {display: block; width: 48.5%;} @media screen and (min-width: 768px) and (max-width: 1080px){ .locality > li {width: 32%;} } @media screen and (max-width: 380px) { .locality > li {width: 100%;} } .map {display: block; width: 100%; height: 20em; margin-top: 1.5em;} .map iframe {display: block; width: 100%; height: 100%;} #video .wrapper video {display: block; width: 100%;} .footer {display: block; width: 100%; height: auto; padding: 3em 0;} .footer .wrapper {display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;} .footer h2 {color: white;} .footer .contact {display: block; padding-left: 5em; box-sizing: border-box; position: relative;} .footer .contact img {display: block; width: 4em; height: 4em; border-radius: 100%; overflow: hidden; position: absolute; left: 0; top: 0.32em;} .footer .contact ul {display: block;} .footer .contact ul li {display: block; font-size: 1em; line-height: 1.3em; font-weight: 300; color: white; padding: 0; margin: 0.1em 0;} .footer .contact ul li:before {display: none;} .footer .contact ul li:first-child {font-size: 1.2em; font-weight: 600;} .footer .contact ul li a {color: white; text-decoration: none; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;} .footer .contact ul li a:hover {color: var(--color1);} .footer .form {display: flex; justify-content: space-between; flex-wrap: wrap;} .footer .form > div {display: block; box-sizing: border-box; position: relative;} .footer .form > div > div {display: block; width: 100%; margin-bottom: 0.1em;} .footer .form > div > div:last-of-type {margin-bottom: 0;} .footer .form input, .footer .form textarea {display: block; width: 100%; font-size: 0.8em; color: white; background: black; padding: 0 1em; border: solid 1px rgba(255,255,255,0.1); box-sizing: border-box; outline: none; font-family: 'Montserrat', sans-serif;} .footer .form input {height: 3.5em;} .footer .form textarea {height: calc(10.5em + 0.2em); padding: 1em;} .footer .form p {display: block; width: 100%; font-size: 0.8em; line-height: 1.3em; color: #666666; text-align: left;} .footer .form p a {color: #666666; text-decoration: underline;} .footer .form p a:hover {color: #797979; text-decoration: none;} .footer .wrapper > p {display: block; width: 100%; text-align: center; font-size: 0.8em; color: white; font-weight: 400; margin-top: 4em;} .footer .wrapper > p a {color: white; font-weight: 600; text-decoration: none;} .footer .wrapper > p a:hover {color: var(--color1);} @media screen and (min-width: 1080px) { .footer .form {width: calc(100% - 20em);} .footer .form > div:nth-of-type(1) {width: 22%;} .footer .form > div:nth-of-type(2) {width: 50%; padding-left: 0.1em;} .footer .form > div:nth-of-type(3) {width: calc(28% - 1em); margin-left: 1em;} .footer .form .button {width: 100%; position: absolute; right: 0; bottom: 0;} } @media screen and (max-width: 1080px) { .footer .form {width: 100%; margin-top: 2em;} } @media screen and (min-width: 640px) and (max-width: 1080px){ .footer .form > div:nth-of-type(1) {width: 35%;} .footer .form > div:nth-of-type(2) {width: 65%; padding-left: 0.1em;} .footer .form > div:nth-of-type(3) {display: flex; width: 100%; justify-content: space-between;; align-items: center; flex-wrap: wrap; margin-top: 1em;} .footer .form p {width: calc(100% - 15em); text-align: right;} .footer .form .button {width: 14em;} } @media screen and (max-width: 640px) { .footer .form > div:nth-of-type(1) {width: 100%;} .footer .form > div:nth-of-type(2) {width: 100%; padding-top: 0.1em;} .footer .form > div:nth-of-type(3) {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 1em;} .footer .form p {width: 100%; text-align: center;} .footer .form .button {width: 14em; margin-top: 1em;} } @media screen and (max-width: 724px) { } @media screen and (min-width: 960px) { .cookies-head tr td, .cookies tr td {padding: 1em 0.75em; border-bottom: solid 1px rgba(0,0,0,0.1);} .cookies-head tr td, .cookies tr:last-child td {padding-bottom: 0; border: none;} .cookies-head tr td:nth-child(1), .cookies tr td:nth-child(1) {width: 12em;} .cookies-head tr td:nth-child(2), .cookies tr td:nth-child(2) {width: 14em;} .cookies-head tr td:nth-child(3), .cookies tr td:nth-child(3) {width: 5em;} .cookies-head tr td:nth-child(4), .cookies tr td:nth-child(4) {width: 9em;} .cookies-head tr td:nth-child(5), .cookies tr td:nth-child(5) {width: calc(100% - 40em);} } @media screen and (max-width: 960px) { .cookies-head {display: block;} .cookies-head tbody {display: block;} .cookies-head tr {display: flex; flex-wrap: wrap;} .cookies-head tr td:after {display: inline-block; margin-right: 0.5em; content: ",";} .cookies-head tr td:last-child:after {display: none;} .cookies {display: block} .cookies tbody {display: flex; width: 100%; flex-wrap: wrap;} .cookies tr {display: block; width: 49%; background: rgba(0,0,0,0.05); padding: 1em 2em; margin: 0 2% 2% 0; box-sizing: border-box;} .cookies tr:nth-child(even) {margin-right: 0;} .cookies tr td {display: block; width: 100%; padding: 0.5em 0;} .cookies tr td:first-child {font-weight: bold;} .cookies tr td:before {display: block; font-size: 0.8em; font-weight: bold; content: "";} .cookies tr td:nth-child(1):before {content: "Název";} .cookies tr td:nth-child(2):before {content: "Doména";} .cookies tr td:nth-child(3):before {content: "Doba expirace dnů";} .cookies tr td:nth-child(4):before {content: "Typ cookie";} .cookies tr td:nth-child(5):before {content: "Popis";} } @media screen and (max-width: 768px) { .cookies tr {width: 100%; margin: 0 0 8px;} } /* cookie control */ .cookiesConfirm{ width: 100%; position: fixed; bottom: 0; background: #f2f2f2; color: #657888; padding: 0px; line-height: 25px; margin-bottom: 0px; text-align: center; z-index:9999999; font-size: 12px; } .cookiesConfirm p{ margin: 0; padding: 10px; text-align: center;} .cookiesConfirm a{ color: #657888; } .cookiesConfirm a.ok{ background: #4a8cf6; padding: 5px 20px; text-decoration: none; color: white; margin-left: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .slip-top { height: 85px; background: #141414; }