/*
Theme Name: Zajímavá.cz
Description: Šablona vytvořená na míru.
Author: Talmer
Author URI: https://talmer.cz
Version: 1.0
*/

/*
#0d4685 - tmavě modrá - silnice logo
#1a68a0 - středně modrá - VT logo
#4396d0 - světle modrá - nebe logo
*/

@media all {

::selection {background-color: #000; color: #fff;}
html, body {padding: 0; margin: 0; font-family: "Open Sans", sans-serif; font-size: 1em; background-color: #fff;}
img {max-width: 100%; height: auto; border: none;}
a {text-decoration: underline; color: #003469; border: none; outline: none;}
a:hover {text-decoration: none;}
p, ul, ol {padding: 10px 0; margin: 0;}
ul, ol {margin-left: 20px;}
ul {list-style: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQUlEQVQYV2NkIBIwgtTFbvjwH6Z+cYAAWAwdwBXKc/4Gyz38zgqm0TVgKISZhK4Bp0J0DZQrJGg1Qc8QFTzEhDkAp/QwAxjArf8AAAAASUVORK5CYII=);}
h1 {padding: 0; margin: 40px 0 20px 0; text-align: center; color: #0d4685;}
h2 {margin: 20px 0 10px 0; color: #0d4685;}
h3 {margin: 15px 0 0 0;}
hr {clear: both; visibility: hidden; height: 0; padding: 0; margin: 0;}
table {border-collapse: collapse; margin: 20px auto 20px auto; overflow: hidden; text-align: left; border: 1px solid #97c6ed; width: 100%;}
tr {background-color: #e8f2ff;}
tr:nth-of-type(odd) {background-color: #F5F9FF;}
td {padding: 5px 5px 5px 10px; border: 1px solid #D6E8FF;}
th {background-color: #4f94d0; color: #fff; font-weight: bold; padding: 5px 5px 5px 10px;}
iframe {max-width: 100%;}
input, select, textarea {margin: 10px 0; padding: 6px 10px; border: 1px solid #4396d0; outline: none; transition: 0.5s all; box-sizing: border-box; font-size: inherit; font-family: inherit;}
input[type="text"], input[type="email"], input[type="tel"], select {width: 100%;}
input[type="checkbox"] {margin-right: 10px;}
textarea {height: 100px; width: 100%; max-width: 100%;}
input:hover, select:hover, textarea:hover {border: 1px solid #999;}
input:focus, select:focus, textarea:focus {background-color: #f5f5f5;}
form {width: 100%; background-color: #0d4685; color: #fff; border-radius: 20px; padding: 30px; box-sizing: border-box; font-size: 15px;}
form a {color: #4396d0;}
figure {margin: 0; padding: 0;}
header {text-align: center; padding-top: 10px; position: relative; display: flex; align-items: center; justify-content: space-between;}
header #logo img {height: 60px; padding: 5px 10px 10px 0;}
nav {text-transform: uppercase;}
nav ul {margin: 0 10px; padding: 0; display: flex;}
nav ul li {list-style: none; display: inline-block; padding: 0;}    
nav a {text-decoration: none; padding: 10px 20px; display: block;}

article {background-color: #fff;}
footer {text-align: center; background-color: #4396d0;}
footer p {padding: 30px 0; color: #0d4685;}

#social {top: 40%; height: 100px; position: fixed; left: 0; opacity: 0.7; transition: 0.5s; z-index: 2000;}
#social:hover {opacity: 1;}
#social div {border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 30px; transition: 0.5s; margin-top: 5px;}
#social img {height: 22px; padding: 12px 10px 10px 2px; transition: 0.5s;}
#social .fb {background-color: #3e5b98;}
#social .p {background-color: #e60023;}
#social .i {background-color: #eee;}
#social div:hover {width: 50px;}
#social div:hover img {padding-left: 22px;}

#language-switcher {display: inline-block; background-color: #F5F9FF; box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3); border-radius: 5px; padding: 0 5px; position:relative;}
#language-switcher #lang-button {border: none; background: none; display: flex; align-items: center; cursor: pointer; z-index: 7;}

#language-switcher .lang-text {display: inline-block; font-size: inherit; text-transform: uppercase;}
#language-switcher img {height: 20px; margin: 10px 5px;}
#language-switcher .lang-arrow {padding-left: 5px;}
#language-switcher #lang-menu {position: absolute; top: 100%; left: 0; margin: 4px 0 0 0; padding: 0; list-style: none; background-color: #F5F9FF; box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3); border-radius: 5px; min-width: 100%; display: none; z-index: 9999;}
#language-switcher #lang-menu a {display: flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none;}

#cookie-consent {background: linear-gradient(to bottom, #e8f2ff 0%,#97c6ed 100%); color: #666; padding: 2em; position: fixed; max-width: 600px; left: 0; bottom: 0; z-index: 9999; display: none; box-shadow: 10px 10px 5px rgba(0,0,0,0.25); border-top-right-radius: 10px;}
#cookie-consent h2, #cookies-consent h3 {color: #000;}
#cookie-consent p {font-size: 80%; text-align: left;}
#cookie-consent #cookie-choices {display: none;}
#cookie-consent #cookie-choices > div {display: inline-block; text-align: left;}
#cookie-consent #cookie-choices label {margin: 0 5px 0 5px;}
#cookie-consent span {cursor: pointer; color: #0066bb;}
#cookie-consent label {cursor: pointer;}
#cookie-consent button, #show-cookie-consent {background-color:  #1f7f0a; background: linear-gradient(to bottom, #23ad0d 0%, #1f7f0a 100%); border-radius: 6px; border: 1px solid #1b7209; cursor: pointer; color: #ffffff; font-weight: bold; padding: 10px 30px; text-decoration: none; margin: 20px 0 30px 20px; font-size: inherit;}
#cookie-consent button:hover, #show-cookie-consent:hover {background-color:#1f7f0a; background: linear-gradient(to bottom, #1f7f0a 0%, #23ad0d 100%);}
#cookie-consent #save-cookie-choices {background: none; color: #000;}

.center, .has-text-align-center {text-align: center;}
.left, .has-text-align-left {text-align: left;}
.right, .has-text-align-right {text-align: right;}
.has-small-font-size {font-size: 80%;}

.wp-block-columns {display: flex; width: 100%; justify-content: space-between; box-sizing: border-box; padding: 20px 0; gap: 40px;}
.wp-block-column {box-sizing: border-box; width: 100%;}
.wp-block-column p {padding: 0;}

.wp-block-cover {position: relative; z-index: 1; background: #1a68a0; width: 100%; background-image: url('img/bg.png'); background-size: cover; background-position: center bottom; z-index: 1; margin-bottom: 50px;}
.wp-block-cover::after {background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.25) 100%); content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;}
.wp-block-cover img {position: absolute; z-index: 3;}
.wp-block-cover .wp-block-cover__inner-container {display: flex; color: #fff; justify-content: center; align-items: center; flex-direction: column; position: relative; z-index: 4;}
.wp-block-cover h3 {color: #fff; font-size: 182%;}
.wp-block-cover h2 {text-shadow: #333 2px 0 2px; margin-bottom: 20px; color: #ffd500; font-size: 310%;}
.wp-block-cover p {color: #fff; font-weight: 900; padding: 50px 0 20px 0; text-shadow: rgba(0,0,0,0.95) 0px 0px 15px;}

input[type="submit"],.wp-block-button__link {background-color: #1f7f0a; background: linear-gradient(to bottom, #23ad0d 0%, #1f7f0a 100%); border-radius: 6px; border: 1px solid #1b7209; display: table; cursor: pointer; font-weight: bold; color: #fff; padding: 10px 32px; text-decoration: none; text-shadow: 0px 1px 0px #092603; margin: 10px auto 10px auto; font-size: 110%;}
input[type="submit"]:hover,.wp-block-button__link:hover {background-color:#1f7f0a; background: linear-gradient(to bottom, #1f7f0a 0%, #23ad0d 100%);}

.wp-block-gallery {margin: 40px 0 0 0; display: flex; flex-wrap: wrap; justify-content: center; columns: 6; gap: 0 !important;}
.wp-block-gallery figure {display: flex; align-items: flex-end; justify-content: flex-start; margin: 0; padding: 0; width: 16.6666%;}
.wp-block-gallery img, .wp-block-gallery a {object-fit: cover; width: 100%; height: 100%;}

.pricelist {margin-bottom: 50px; margin-top: 50px;}
.pricelist .wp-block-column {background-color: #d9eaf5; padding-bottom: 15px; border-radius: 10px; overflow: hidden;}

.pricelist h2 {color: #fff; text-align: center; background-color: #1d5088; margin: 0; padding: 10px; text-shadow: rgba(0,0,0,0.95) 0px 0px 2px;}
.pricelist .price {color: #fff; text-align: center; background-color: #1d5088; margin: 0; padding: 10px 10px 20px 10px; font-weight: 900; font-size: 130%;}
.pricelist .sale {background-color: #1d5088; text-align: center; text-transform: uppercase; color: #fff;}
.pricelist .amount {color: #ffd500;}
.pricelist .lenght {color: #4396d0;}
.pricelist .wp-block-column ul {list-style: none; margin-left: 0; padding: 0;}
.pricelist .wp-block-column li {padding: 5px 10px;}
.pricelist .wp-block-column li:nth-of-type(odd) {background-color: #ecf4fa;}

.advantages .wp-block-image {max-width: 96px; margin: 0 auto 10px auto; transition: 0.5s;}
.advantages .wp-block-column:hover .wp-block-image {transform: scale(0.9);}
.advantages .wp-block-column:hover p {transform: scale(1.2);}
.advantages p {font-weight: 900; font-size: 100%; text-align: center; transition: 0.5s;}

.process .wp-block-column {background-color: rgba(236,244,250,1); padding: 20px; border-radius: 10px;}
.process .wp-block-column:hover .number {color: #ffd500; background-color: #0d4685;}
.process h3 {display: flex; align-items: center; }
.process .number {font-size: 400%; color: #0d4685; background-color: #97c6ed; border-radius: 50%; width: 102px; height: 102px; display: inline-block; text-align: center; box-sizing: border-box; min-width: 102px; margin-right: 10px; margin-bottom: 10px; transition: 0.5s;}

.cta {background-color: #0d4685; padding: 50px 10px; margin-bottom: 50px;}
.cta p {color: #fff; text-transform: uppercase;}
.cta #timer {display: flex; justify-content: center; align-items: flex-start; color: #ffd500; font-size: 200%; padding: 10px 0px 5px 0px; background-color: #0b3f77; width: 250px; margin: 0 auto; border-radius: 10px; border: 1px solid #0a386a;}
.cta #timer div {display: flex; flex-direction: column; background-color: #0a386a; padding: 5px; border-radius: 10px; margin: -5px 5px 0 5px;}
.cta #timer span {font-weight: 700;}
.cta #timer small {font-size: 40%; color: #000;}

.faq {background-image: url('img/vozovy-park.jpg'); background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; position: relative; margin-top: 50px; padding: 30px 0;}
.faq:after {content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.60);}
.faq h2, .faq .wp-block-columns {position: relative; z-index: 3;}
.faq-list {list-style: none; margin: 0; padding: 0;}
.faq-list > li {background-color: rgba(255,255,255,0.80); color: #0d4685; margin: 0 10px 40px 10px; padding: 15px; font-size: 120%; border-radius: 10px; font-weight: 700; position: relative; cursor: pointer;}
.faq-list > li:after {content: '▼'; background-color: rgb(151, 198, 237); color: #fff; position: absolute; right: 10px; top: 15px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: 0.5s;}
.faq-list > li:hover:after {background-color: #0d4685;}
.faq-list > li ul {display: none; list-style: none; margin: 0; padding: 0;}
.faq-list > li ul li {font-weight: 400; font-size: 80%; color: #000; padding: 15px 0;}

.contact {background-color: #0d4685; color: #fff; margin-top: 50px;}
.contact .wp-block-columns {display: flex; align-items: center; justify-content: center;}
.contact li {padding: 5px 0 5px 10px;}
.contact .column a {color: #fff; font-size: 160%; margin: 15px 0; display: flex; justify-content: flex-start; align-items: center; text-decoration: none;}
.contact .column .tel {color: #ffd500; font-size: 250%; font-weight: 700;}
.contact .column svg {padding-right: 10px;}
}



@media (max-width: 767px) {

    .wp-block-cover {background-image: none;}
    .wp-block-cover .wp-block-column {flex-basis: 100% !important; padding-left: 10px; padding-right: 10px;}
    .wp-block-cover img {width: 100%; bottom: 406px; right: 0; opacity: 20%;}
    .wp-block-cover h3 {font-size: 130%; text-align: center;}
    .wp-block-cover h2 {font-size: 200%; text-align: center; margin: 0;}
    .wp-block-cover p {margin-right: 0; text-align: center; font-size: 100%; line-height: 140%; padding: 20px 10px 0 10px; font-weight: normal;}
    form {padding: 20px;}
    
    .pricelist {padding-left: 10px; padding-right: 10px; gap: 10px; margin-top: 20px; margin-bottom: 20px;}
    
    .wp-block-gallery figure {width: 33.3333%;}
    
    .process {padding: 0 10px; gap: 10px;}
    
    .faq .wp-block-columns {gap: 0;}
    .faq-list li {padding-right: 40px;}
    
    .wp-block-columns {flex-wrap: wrap;}
    .wp-block-column {width: 100%; box-sizing: border-box; margin-top: 10px; margin-bottom: 10px;}

}

@media (max-width: 1260px) and (min-width: 768px) {
    
    .wp-block-columns {flex-wrap: wrap; gap: 0;}
    .wp-block-column {width: 100%;}
    .wp-block-column:first-child:nth-last-child(2), .wp-block-column:first-child:nth-last-child(2) ~ .wp-block-column {width: 49%;}
    .wp-block-column:first-child:nth-last-child(3), .wp-block-column:first-child:nth-last-child(3) ~ .wp-block-column {width: 100%;}
    .wp-block-column:first-child:nth-last-child(4), .wp-block-column:first-child:nth-last-child(4) ~ .wp-block-column {width: 24%;} 
    .wp-block-column:first-child:nth-last-child(6), .wp-block-column:first-child:nth-last-child(6) ~ .wp-block-column {width: 33.333333%;}
    
    
    .wp-block-cover .wp-block-columns {flex-wrap: nowrap;}
    .wp-block-cover .wp-block-cover__inner-container {position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%;}
    .wp-block-cover {height: 600px;}
    .wp-block-cover img {width: 405px; bottom: 1%; left: 8%;}
    .wp-block-cover h3 {font-size: 150%; text-align: center;}
    .wp-block-cover h2 {font-size: 235%; text-align: center;}
    .wp-block-cover p {font-size: 120%; text-align: center; line-height: 160%; padding: 20px 10px 0 10px;}

    header, h1, h2, .wp-block-columns {max-width: 100%; margin-left: auto; margin-right: auto;}
    
    .pricelist {padding-left: 10px; padding-right: 10px;}
    .pricelist .wp-block-column:nth-child(2) {margin-top: -30px; margin-bottom: -30px;}
    
    
    .wp-block-gallery figure {width: 25%;}
 
    .process {padding: 0 10px; gap: 10px;}
    
    .faq .wp-block-columns {gap: 0;}
  
}

@media (max-width: 1260px) {
    header {padding-left: 5px; padding-right: 5px; height: 100px; flex-wrap: wrap; position: relative;}
    header #logo {width: calc(100% - 120px); position: absolute; left: 5px;}
    
    #mobilemenu {display: inline-block; cursor: pointer; padding: 12px 0; color: #fff; text-align: center; width: 98px; background-color: #0d4685; border: none; border-radius: 5px; box-sizing: border-box; position: absolute; right: 5px; bottom: 10px;}
    #mobilemenu span {border-bottom: 6px double #fff; border-top: 2px solid #fff; height: 2px; width: 20px; display: inline-block; margin-right: 5px;}
    #language-switcher {position: absolute; right: 5px; top: 10px;}
    .menu {display: none; position: absolute; top: 115px; right: 0; background-color: #fff; color: #0d4685; font-size: 120%; z-index: 8; margin: 0 5px;}
    .menu li {display: block; padding: 10px;}
    
    #social {top: initial; bottom: 10%; zoom: 0.75;}
    
    #contact h2 {padding-left: 10px; padding-right: 10px;}
    .contact .wp-block-columns {gap: 0px;}
    .contact .wp-block-column {padding-left: 30px; padding-right: 10px;}
    .contact .wp-block-button__link {margin-left: 0; margin-right: 0;}
}

@media (min-width: 1261px) {
    #mobilemenu {display: none;}

    .wp-block-column:first-child:nth-last-child(2), .wp-block-column:first-child:nth-last-child(2) ~ .wp-block-column {width: 50%;}
    .wp-block-column:first-child:nth-last-child(3), .wp-block-column:first-child:nth-last-child(3) ~ .wp-block-column {width: 33.333333%;}
    .wp-block-column:first-child:nth-last-child(4), .wp-block-column:first-child:nth-last-child(4) ~ .wp-block-column {width: 25%;}
    .wp-block-column:first-child:nth-last-child(5), .wp-block-column:first-child:nth-last-child(5) ~ .wp-block-column {width: 20%;}
    .wp-block-column:first-child:nth-last-child(6), .wp-block-column:first-child:nth-last-child(6) ~ .wp-block-column {width: 16.666666%;}
    
    
    .wp-block-cover .wp-block-cover__inner-container {position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%;}
    .wp-block-cover {height: 600px;}
    .wp-block-cover img {width: 475px; bottom: 1%; left: 38%;}
    .wp-block-cover p {font-size: 130%; margin-right: 40%; line-height: 180%;}

    header, h1, h2, .wp-block-columns {max-width: 1200px; margin-left: auto; margin-right: auto;}
    
    .pricelist .wp-block-column:nth-child(2) {margin-top: -30px; margin-bottom: -30px;}
    
}