/* ********* definice obecnych HTML znacek ********* */
html {scroll-behavior: smooth;}
body {
    padding: 0;
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1em;
    background-color: white;
    color: #444541;
}

img {border: none;}
form {padding: 0px;margin: 0px;}
a {color: #fa6761;text-decoration: none;}
a:hover {color:#21221f; text-decoration: none;}
a:focus { color:#fa6761;}

h1 {font-weight: normal; margin: 0 0 3vh 0; padding-top: 0px;font-size: 160%;}
h2 {font-weight: normal; margin: 0 0 3vh 0; padding-top: 0px;font-size: 140%;font-weight: 700;  }
h3 {margin: 15px 0 15px;font-size: 3em;font-weight: 500;display:block; color: #99784c; font-family: 'Lobster', cursive;}
h4 {font-size: 120%;font-weight:600;margin: 0px;display: inline-block;}
h5 {font-size: 130%;font-weight:500;margin: 0px;display: inline-block;text-transform: uppercase;color:rgb(145, 145, 145)}

textarea {font-family: sans-serif;font-size: 100%;}
.clear {clear: both;font-size: 1px;line-height: 1px;height: 1px;}

.ico {font-family: 'Material Icons'; font-size: 1.8em; display: inline-block; color: #81afbe;text-transform: none;}
small {font-size:80%;} 

button {background-color: #fa6761; border: none;color: white;text-transform: uppercase;padding: 10px 32px 8px;text-align: center;cursor: pointer;font-family: 'Barlow Condensed', sans-serif;font-weight: 600;text-decoration: none;display: block;font-size: 16px;border-radius: 20px;white-space: nowrap; box-sizing: border-box;}
button:hover {background-color: #fec600;color: #21221f;}
/***alternativni button**/
.button {background-color: #fa6761; border: none;color: white;text-transform: uppercase;padding: 10px 32px 8px;text-align: center;cursor: pointer;font-family: 'Barlow Condensed', sans-serif;font-weight: 600;text-decoration: none;font-size: 16px;border-radius: 20px;white-space: nowrap; box-sizing: border-box;display:inline-block;}
.button:hover {background-color: #fec600;color: #21221f;}



::-webkit-scrollbar{width:10px; height:4px;}::-webkit-scrollbar-track{background:#ffffff;border-radius:0px}::-webkit-scrollbar-thumb{background:#9c9c9c;border-radius:5px}

.noFlex { display:block!important;}
article  {box-sizing: border-box;}

/********************* header **********************/
#webTitle { display:block; position: absolute; left:0; top:0; z-index:0;}

header {position: fixed;width:100%;background-color:white;z-index: 100;height: 130px; top: 0;box-sizing: border-box; border-bottom: 1px solid rgb(207, 207, 207);transition: top 0.2s ease-in-out;}

#logo {position: absolute;display:block; z-index:300; padding: 0;display: block; left: 10vw;top: 20px;}

#webTitle { display:block; position: absolute; left:0;  z-index:0;}


/* ************ menu *********** */
#menu  { position:relative;  width: calc(80vw - 120px); text-align: right; margin: 25px 10vw 0 calc(10vw + 230px); padding: 0;}
.menu  li {list-style: none;display:inline-block;  padding: 0px;margin: 0; }
.menu  li a {font-size:1.1em;  font-weight: 500; text-decoration: none; display: block; color:#3d3732; padding: 0 1em; margin: 0;box-sizing: border-box;text-transform: uppercase;}
.menu  li a:hover { color: #fec600; }
.menu  li .active {color: #fec600;}

#socialLinks { margin-left: 5em;}
#socialLinks a { display: inline-block; padding: 0; margin:0 0 0 0.25em; width:30px; }
#socialLinks a img { width:100%; }


/* ************ menu mobile *********** */
#menuToggle {display: block;position: absolute; width:40px;top: 30px;left: 0; margin: 0; z-index: 400;-webkit-user-select: none;user-select: none;} 
#menuToggle input {display: none;width: 60px; height: 32px;position: absolute;top: 0; left: 0;cursor: pointer; opacity: 0; z-index: 2;}


/* ********** hamburger ************** */
#menuToggle span {display: none;width: 40px;height: 3px; margin-bottom: 5px;position: relative;background: #444541;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;}

#menuToggle input:checked ~ span {opacity: 1;transform: rotate(30deg) translate(-2px, -1px);background: white;}
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2) {transform: rotate(-30deg) translate(0, -1px);}

#menuToggle input:checked ~ ul {transform: none;}




/********************* main content **********************/
main { height: 100%; padding:0;top:130px; margin:0;position: relative;}
article  {margin:130px 6vw 0; text-align: left;line-height: 130%; font-size: 1.4em;}

.signArrow {display:block;font-size: 40px;color:white;margin: 15vh auto 0;text-align: center;}
.signArrow:hover {color: #21221f;}


#motto { display:block; padding:0; width: 30vw; margin: 0;position: absolute; top:28vh; left: 1em; font-size:4vw;font-weight: 500;line-height: 100%;text-align: left; color:white; z-index: 20; text-transform: inherit; font-family: 'Abril Fatface', cursive;}

#intro  {position:relative;z-index: 10;min-height: calc(100vh - 110px);box-sizing: border-box; background-color:#352f2b;display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-end;}
#intro  article  {margin:7vh 6vw 0 52vw; color:white;}
#intro img  {display:block;height:auto; width:60%;border-bottom: white solid 1em;}
#intro article h2  {color: #99784c; text-transform: uppercase;font-size:1.5em;font-weight: 700;margin: 0 0 0.5em;}

.homeArticle{ display:flex;background-color: #352f2b21;position:relative;border-top: 1em solid white;} 
.homeArticle .signArrow {padding-left: 0.5em;text-align: left;position: absolute;bottom: 20vh;margin:0;} 



/* CYCLE SLIDESHOW */
.cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow > div {  position: absolute; top: 0; left: 0; padding: 0;height: 100%; width: 100%; min-height: 100%; overflow: hidden;background-repeat: no-repeat; background-size: cover; background-position: bottom;}
/*#homeSlides { width: 100%;height: 100vh; position: fixed; top: 0; padding-top: 130px; box-sizing: border-box;z-index: 10; background-color: #444541;}
#homeSlides div h3 { display:block; position:absolute;font-size:10vw;font-family: 'Abril Fatface', cursive;color:white;top:20%; right:10%;line-height: 80%;text-shadow: 2px 2px 2px #0c0c0c81;}
#homeSlides div .low { top:60%; }
#homeSlides div .min { font-size:9.5vw; }
.cycle-slideshow div .myVideo { width:100%;min-width: 100%;min-height: 100%;position:relative;top: 0;}
*/



#introCarousel {position:fixed;left:0; right:0;z-index:10;}
#introCarousel h3 { display:block; position:absolute;font-size:10vw;font-family: 'Abril Fatface', cursive;color:white;top:20%; right:10%;line-height: 80%;text-shadow: 2px 2px 2px #0c0c0c81;}
#introCarousel .low { top:60%; }
#introCarousel .min { font-size:9.5vw; }
.dark h3 { color:#21221f!important;}
/* Carousel styling */
#introCarousel,
.carousel-inner,
.carousel-item,
.carousel-item.active {
  height: 100vh;
}

.carousel-item {position:relative; background-repeat: no-repeat;background-size: 100%;background-position: center center;}

.carousel-item img {object-position: bottom; width:100%; height:100%;    object-fit: cover;
  object-position: bottom;
}
.carousel-item video {min-height: 100%; min-width:100%;}
/*
.carousel-item:nth-child(3) {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}*/

.carousel-control-next, .carousel-control-prev {font-family: 'Material Icons'; font-size: 2em;}

/* Height for devices larger than 576px */
@media (min-width: 992px) { #introCarousel {margin-top: -58.59px;}
}


.homeSlideFrame{ width: 100%;height: 100vh; position: relative; top: 0; }


/********SECTION *******/
section {width:100%; height:100%; min-height: 100vh;padding:130px 0 5% 0;box-sizing: border-box;position:relative; z-index:50;}
section h2 {display:block; padding: 1em; margin: 0 10% 1em; border-bottom: 1px solid white;text-align:center;box-sizing: border-box;font-weight: 500; font-size: 3em;}
.text {padding: 0 10% 2em;box-sizing: border-box; font-size: 140%;}


/********NAŠE FLOTILA *******/
#nase-flotila {color:white; background-color:#444541f5;}
#nase-flotila .cont {padding: 0 10%; width:100%;box-sizing: border-box; display:flex;justify-content: space-between;}
#nase-flotila .cont .item {width:30%; display: block;}
#nase-flotila .cont .item img {width:100%; height: 26vh; object-fit: cover;object-position: center; margin-bottom: 7px;}
#nase-flotila .cont .item .description {text-align:left;}
#nase-flotila a {color:white; }
.reserv:hover, .detail:hover {color:white; }
.reserv,.detail {display:block;text-transform: uppercase;font-weight: 600;color: #fa6761;}
.detail {margin-top: 2vh;color: #fec600;}


.dobrodruh h3/*, .dobrodruh .ico*/ {color:#81afbe;}
.floutek h3 {color:#7eb40b;}
.vyletnik h3  {color:#af934b;}

/********O NÁS *******/
#o-nas {color:#444541;  background-color:#fec600f0;}
#o-nas h2 {border-color:#444541;}
#o-nas p {text-align:center;}
#o-nas p img {width:30vw;}

/********kontakty*******/
#kontakty {color:white;  background-color:#444541f5;}
#kontakty h2 {border-color:white;}
#kontakty .text {text-align: center;}
#kontakty a:hover{color:white;}

/********pridejte se*******/
#pridejte-se {color:#444541;  background-color:#fec600f0;}
#pridejte-se h2 {border-color:#444541;}
#pridejte-se .text {text-align:center;}
#pridejte-se a {font-size:120%;}



/****** DETAIL ****/
#detail {padding: 1.5em 2em!important; box-sizing: border-box;position: relative; }
.leftCol { float: left; width: 50%;position: relative; top: 10px; z-index: 20; }
.slidesCont { width: 100%; margin: 0 0 2vh; position: relative; }
#detailSlides { width: 100%;height: 100%; }
#detailSlides img {width:100%; height: 100%; object-fit: cover;object-position: center;}

#adv-custom-pager {display:flex;justify-content: space-between;gap: 0.7vw;flex-wrap: nowrap;overflow-x: scroll;overflow-y: hidden; padding-bottom:15px;}
#adv-custom-pager::-webkit-scrollbar-thumb { background: #fa6761;border-radius: 5px;}
#adv-custom-pager a img {width:100%; min-width: 60px; height:80%;object-fit: cover;padding-top: 2vh; }

#detail h2{margin: 15px 0 5px 55%;font-size: 2em;font-weight: 500;display:block; color: #81afbe;line-height: 90%;}
#detail h2 .perex {font-size: 80%;font-weight: 500;display:block; font-family: 'Barlow Condensed', sans-serif;}
#detail h4 {font-weight:normal; }
#detail .description {margin: 0 0 0 55%;}
#detail button {margin:1.0em 0 2vh;}


/****** equipment ****/
.equipment {padding:1em; margin: 1vh 0 4vh 0; box-sizing: border-box;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;border: 1px solid #edeaea;border-radius: 20px;}
.equipment li {list-style: none;padding: 1em;margin: 0;display: grid; grid-template-columns: 0fr 2fr;gap: 10px;border-radius: 10px;background-color: #f8f8f8;} 
.equipment li small {display: block;} 
.articleBox {display:flex; margin: 1vh 0 4vh 0; padding:1em;flex-wrap: wrap;align-items: center;border: 1px solid #edeaea;border-radius: 20px;line-height: 160%;}
.articleBox div {padding: 0 1em 0 0;} 
.articleBox strong {color:#81afbe;padding-right: 4px;font-size: 120%;} 


/********BOOKING *************/
#booking .cont {margin: 1vh 0 3vh 0; padding:1em;border: 1px solid #edeaea;border-radius: 20px; display: grid;grid-template-columns: repeat(2, 1fr);gap: 1em;align-items: center;}
#booking .cont div {text-align: center;border-radius: 10px;background-color: #f8f8f8;}
#booking .cont button {margin: 0 auto 2vh; min-width: 90%;}
#booking .dateCont { margin: 1vh 0 0 0; padding:1em;display: grid;grid-template-columns: repeat(2, 1fr);gap:0.5em;}
#booking .dateCont div {padding: 1em 1em 0.5em;text-align: left;background-color: white;} 
#booking .dateCont div .pickDate {text-align: left;padding:0;color: rgb(174 179 185);} 
#booking .cont .info {background-color: transparent;}
#booking .cont .info .ico {color:#fa6761;margin-top: 10px;}

/***********barvicky***************/
.floutek h2, .floutek  .ico, .floutek .articleBox strong {color:#94c136!important; }

/**********KALENDAR ************/
 .view-cap, .view-container-border, iframe html #calendarContainer1 {
  background-color: #f9f9f9!important;
}
#kalendar { }
/********************* footer ****************************/
footer {margin: 10px auto 20px auto; top:100px; color: rgb(76,84,92); text-align: center; font-size: 90%; position: relative;}
footer .copy { margin: 20px 0px;padding: 0px;}
footer a {color: rgb(76,84,92);}

/* css3 transition fade-in effect on page load */
main { animation: fadein 2.5s; -moz-animation: fadein 2.5s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
#menuToggle {  animation: 0.5s ease-in-out 0s 1 slideInFromRight;}
#logo {  animation: 0.9s ease-out 0s 1 slideInFromLeft;}

@keyframes fadein {from {opacity:0;transform: translateY(-20px);}to {opacity:1;}}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to { opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to { opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to { opacity:1;}
}
 


@keyframes slideInFromLeft {
    0% {transform: translateX(-50%);}
    100% { transform: translateX(0);}
  }
@-moz-keyframes slideInFromLeft {
    0% {transform: translateX(-50%);}
    100% { transform: translateX(0);}
  }
@-webkit-keyframes slideInFromLeft {
    0% {transform: translateX(-50%);}
    100% { transform: translateX(0);}
  }
@-o-keyframes slideInFromLeft {
    0% {transform: translateX(-50%);}
    100% { transform: translateX(0);}
  }
  
  @keyframes slideInFromRight {
    0% {transform: translateX(50%);}
    100% { transform: translateX(0);}
  }
  @-moz-keyframes slideInFromRight {
    0% {transform: translateX(10%);}
    100% { transform: translateX(0);}
  }
@-webkit-keyframes slideInFromRight {
    0% {transform: translateX(50%);}
    100% { transform: translateX(0);}
  }
@-o-keyframes slideInFromRight {
    0% {transform: translateX(50%);}
    100% { transform: translateX(0);}
  }



@media only screen and (max-width: 1300px) {
  #menuToggle {padding-right: 10vw;right: 0; left: auto;top: 45px;position:absolute;} 
  #menuToggle input, #menuToggle span {display: block;} 
  #menu {position: absolute;width: 120vw; height:100vh; right:-50vw;top: -45px; box-sizing: border-box;margin: 0; text-align: center; overflow: auto; padding: 30vh 2vw 80px 35vw;background: #fa6761;list-style-type: none; -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;transform: translate(150%, 0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);text-align: left; border-radius: 50%;}
  #menu li{width:auto; font-size: 140%;display:block;padding:5px;}
 .menu  li a {padding: 0; color:white;}
 .menu  li a:hover {color:black;}
 #socialLinks { text-align:left;margin:0;}
 #socialLinks a { padding:25px 0 0;margin:0 0.25em 0 0;} 
 #socialLinks a img {filter: brightness(5.5);} 
 #socialLinks a img:hover {filter: brightness(0);} 
 .homeArticle .leftCol h2 {font-size: 3.4vw;}
 .homeArticle .leftCol {padding: 130px 2em 0;}
 .signTree {margin: 2vh 0 0 5vw;}
 #homeSlides div h3 { font-size:12vw;}
 .cycle-slideshow div .myVideo { width:auto; height: 100%;position: relative;top: 0;left:-20%;}

 .nav-up {top: -130px!important;}


}
@media only screen and (max-width: 1100px) {
  .cycle-slideshow div .myVideo {left:-40%;}
}

@media only screen and (max-width: 990px) {
  section h3 {font-size: 2em;}
  #o-nas p img {width:60vw;}
  #introCarousel h3 {font-size: 17vw;}
  #introCarousel .small {font-size: 14vw;}
 
}

@media only screen and (max-width: 850px) {

  .leftCol {float: none;width: 100%; margin-bottom:4vh;}
  #detail h2 {margin: 15px 0 5px 0;}
  #detail .description {margin: 0;}
}

@media only screen and (max-width: 800px) {
  #motto {width: 30vw;} 
  #intro img {width: 70%;}
  #intro article {margin: 7vh 6vw 0 48vw;font-size: 1.2em;}
  #homeSlides div h3 { font-size:15vw;}
  .carousel-item .videoShora {position:relative; }

}




@media only screen and (max-width: 700px) {
  #menuToggle {padding-right: 1em;} 
  #menuToggle span {right: 1em;} 
  #logo  {left: 1em;}  
  #menu {width: 100vw;border-radius: 0; right: 0;padding: 10vh 2vw 80px 35vw;}
  #nase-flotila .cont {padding: 0 5%;}
  section h2 {font-size: 2em; margin: 0 5% 1em; }
  .text {padding: 0 5% 2em;}
  #homeSlides div h3 { font-size:17vw;top:12%; right:0;left:0;margin:auto;line-height: 100%;text-align:center;}
  #adv-custom-pager {gap: 1.5vw;}
  #detail {padding: 1.5em!important;}

}

@media only screen and (max-width: 600px) {
  #nase-flotila .cont {display:block}
  #nase-flotila .cont .item {width:100%; padding-bottom: 20px;}

  .carousel-item img {object-position: 35% bottom;}
  .moveLeft img { object-position: 50% bottom!important;}
}


@media only screen and (max-width: 500px) {
  .equipment {grid-template-columns: repeat(1, 1fr);}
  #booking .cont {grid-template-columns: repeat(1, 1fr);}
  #kalendar { width:100%;height:280px;}
}

@media only screen and (max-width: 400px) {
  #homeSlides div h3 { font-size:18vw;top:10%;}
}

@media only screen and (max-height: 780px) {
.carousel-item .videoShora {/*top: -50vh;*/ position: fixed; right: 0; bottom: 0;width: auto; height: auto;bottom: -40%;}
}
@media only screen and (max-height: 600px) {
  #menu {border-radius: 0;}

}