﻿* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}


::-webkit-scrollbar { width: 2px; height: 2px; }

::-webkit-scrollbar-button { width: 2px; height: 2px; }

body { height: 100vh; font-family: 'Kanit', sans-serif; font-size: 14pt; font-weight: 300;
       color: #000; line-height: 1.3; margin: 0px; overflow: hidden; }

h1 { display:none; position:relative; float:right; font-family:Stalemate; font-size:15vh; font-weight:normal; 
     color:green; line-height: 0.9; z-index:100; margin-top:14vh; margin-right:15vw; text-align:center; }

h2 { display:none; font-size: 28pt; font-weight: normal; text-align: left; padding: 2% 5%; }

b {font-weight:500;}

.tooltiptext { visibility: hidden; background-color: white;
               color: #251a06; text-align: center; border-radius: 6px; padding: 4px 8px; 
               /* Position the tooltip */ position: absolute; z-index: 1; }

.menu { width:100%; position:fixed; text-align:right; background-image:url(../images/opacity_2.png); background-repeat:repeat;
        display: table-cell; padding: 15px 35px; opacity:0;}

    .menu .logo { display:block; margin:35px auto; }
    .menu .logo:hover .tooltiptext { visibility: visible; top:150px; left:200px;}

    .menu nav { display: inline-block; vertical-align: middle; padding-top: 10px; }
        .menu nav a { color:#fff; text-decoration:none; font-size: 16pt;
                      font-weight:600; display: inline-block ; margin:0px 25px;}
            .menu nav a:hover {
                color: #F19A08;
            }

            .menu nav a .wide{ margin: 20px; display: inline-block;}
    .menu .selected {
        font-weight: normal;
        color: #F19A08;
    }
        
        .menu .contact { font-size:10pt; font-weight:normal; text-decoration:none; color:#856846; text-align:center; }
        .menu .contact span {margin-bottom: 15px; display:block;}

        .r_button { display:inline-block; padding:10px; text-decoration:none;
                    border:1px solid transparent; cursor:pointer; line-height:0; }
            .menu .l-selected { border:1px solid #fff; }
        .menu .r_button:hover { border:1px solid #fff;}
        .r_button:hover .tooltiptext { visibility: visible; }
        #lang-menu-mobile{ display:none; }
        #lang-menu-full{ display:inline-block; }

/*HAMBURGER*/
.hamburger {font-size: 22pt; display:none; width: 1em; height: 1em; position:absolute; /*position:fixed; */
            top:1em; right:1em; cursor: pointer; transition: transform .2s ease-in-out;
            vertical-align: middle; border: 0 none; background: transparent; }

/*  Button height fix for Firefox */
.hamburger::-moz-focus-inner { padding: 0; border: 0 none; }

/* Focus fix for Chrome */
.hamburger:focus { outline: 0; }
.hamburger:before,
.hamburger:after { content: ""; }

.hamburger:before,
.hamburger .icon,
.hamburger:after { display: block; width: 100%; height: .2em; margin: 0 0 .2em; transition: transform .2s ease-in-out;
                   border-radius: .05em; background: #dddf4b; }

/* Styles for the active `.hamburger` icon */
.hamburger.active:before,
.hamburger.active .icon,
.hamburger.active:after { background: #dddf4b; }
.hamburger.active:after .menu { position: fixed; }

/* CLOSE/CANCEL/CROSS */
.hamburger.hamburger-cancel.active .icon { transform: scale(0); }
.hamburger.hamburger-cancel.active:before { transform: translateY(.40em) rotate(135deg); }
.hamburger.hamburger-cancel.active:after { transform: translateY(-.40em) rotate(-135deg); }
    .hamburger.hamburger-cancel.active:after .menu { position: relative; }


.home { display:none; height:100vh; text-align:center; margin:0px; 
        background-image:url("../images/home/home_foto.jpg"); background-size: cover;
        background-repeat: no-repeat; background-position: top center; }
    .home b { font-weight: 600; }
    .home .nadpis { padding-top: 7%; }    
    .home .piktogramy { position:absolute; bottom:0px; right:0px; width:45%; margin:1% 5%; }
    .home .pict { display: inline-block; text-decoration:none; margin:2vh 2vw; opacity:0; }
        .home .pict img { max-width:15vh; }
        .home .pict .txt {display: block; font-size:18pt; color:white; text-align:center; text-decoration:none; }
        .home .pict:hover .tooltiptext { visibility: visible; }
    .home .piktogramy-mobile { display:none; width:100%; height:30vh; position:absolute; bottom:0px; overflow:hidden;}
          .piktogramy-mobile .pict { position:absolute; text-decoration:none; padding:0px; margin:15px 30px; opacity:0; }
              .piktogramy-mobile .pict img { max-width:20vh; }
              .piktogramy-mobile .pict .txt { font-size:18pt; color:white; text-align:center; text-decoration:none; }
/*
.pict1{ left:50%; top:5% }
.pict2{ left:21%; top:13%; }
.pict3{ left:5%; top:32%; }
.pict4{ left:21%; top:51%; }
.pict5{ left:62%; top:58%; }
*/
.this-page { display:none; min-height:100vh; text-align:center; background-size:cover; padding: 55px 0px 0px 0px; }

    .this-page .nadpis { padding-top: 2.5%; }
    .this-page h2 { display:none; font-size:24pt; font-weight:bold; margin:0px; }
    .this-page .text { display:none; width: 60%; font-size: 16pt; text-align: left; padding: 0px 8%; }
    .this-page .describe { min-width:440px; width:60%; padding-top:35px; margin:0px auto; }
        

.fotogalerie {padding:2%; margin:0px auto; }
    .fotogalerie .galeryItem { width:250px; position:relative; display:inline-block; padding:25px; vertical-align:top; text-decoration:none; }
        .fotogalerie .galeryItem .item { position: relative; width:200px; height:200px; overflow: hidden; }
            .fotogalerie .galeryItem .item img{ max-width:200px; width:200px; height:200px; display:block;
                                                -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
        .fotogalerie .galeryItem:hover img{ -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3);}
        .fotogalerie .galeryItem .galeryName{ font-size:16pt; color:#000; padding:25px 0px 5px 0px; }

.showGalery { position: absolute; display: block; width: 90vw; max-height: 170px; left: 5vw;
              bottom: 3vw; padding: 5px 25px; margin: 0; background-image: url(../images/opacity.png); 
              background-repeat: repeat; overflow-y: hidden; overflow-x: hidden; opacity:0; }

    .showGalery div { position: relative; white-space:nowrap; }

    .showGalery a { height: 120px; width: 150px; display: inline-block;
                    margin: 5px 10px; overflow: hidden; border: 2px solid #ccc; }
    .showGalery a:first-child { margin-left: 0px; }
    .showGalery a:last-child { margin-right: 0px; }
    .showGalery a img {  }
    
    
.video { display:none; height:100vh; text-align:center; margin:0px; 
        background-image:url("../images/video/video_foto.jpg"); background-size: cover;
        background-repeat: no-repeat; background-position: top center; }
    .video iframe {width:70%; height: 690px; margin-top:100px;}

.textNormal{ font-family:Kanit; font-size:14pt; font-weight:lighter }
.textLink { text-decoration:underline; font-weight:500; color:#000; }
    
.clear { clear: both; }

.notVisible{ display:none; }

.cc-grower { position: fixed; top: 0px; left:50%; margin-left:180px; cursor:pointer; z-index: 1000; }
.cc-window { display:none; position:relative; left:-50%; background-color: #dbde59; text-align: center;
             font-size: 18px; padding: 15px 35px; font-weight: 400; border-bottom-left-radius: 15px;
             border-bottom-right-radius: 15px; }
.cc-compliance { margin:15px 0px; }
.cc-btn {padding: 5px 20px; border:1px solid black;}
.cc-btn:hover { font-weight:500; background-color: #dbde59; border:2px solid black; }
.cc-btn:focus { background-color: #dbde59; }
 
.cookie-container { position: absolute; top: 0px; left:50%; margin-left:180px; cursor:pointer; z-index: 1000; }
.cookie-box { position:relative; left:-50%; background-color: #dbde59; text-align: center;
              font-size: 18px; padding: 15px 35px; font-weight: 400; border-bottom-left-radius: 15px;
              border-bottom-right-radius: 15px;}

.show-on-startup { opacity:0; }

.grayscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    /*-ms-filter: grayscale(100%);*/
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

@media all and (max-width: 1100px) {
    .home .pict{ margin:0px; }
    .home .pict .txt { font-size: 16pt; line-height: 1; }
    .home .cameraContent { width:55%; height:50% }
}

@media all and (max-width: 799px) { 
    body { min-width: 320px; font-size:12pt; line-height:1.3;   
           font-weight:normal; }
    h1 { position:relative; font-size: 50px; margin-top: 105px; margin-left: 0px; margin-right:5vw }

    .menu { width:100%; min-height:85px; float:none; position:fixed; top:0px; text-align:center; background-image:url(../images/opacity.png); z-index:150; }
        .menu nav { display:none; height: 100vh; padding-top:80px; }
            .menu nav a { margin:10px auto; display:block; color:white }
            .menu nav a:hover { color:#dddf4b; }
            .menu nav .r_button{ display:inline-block; margin:5px 15px; border:1px solid #fff; }
            .menu nav .r_button:hover { border:1px solid #dddf4b; }
        .menu .contact { display:none; }
        .menu .rezervace { padding:10px 35px; margin:0px auto; }
    .hamburger { display: inline-block; }

    #lang-menu-full { display:none; }
    #lang-menu-mobile { display:block; }
    
    .home { position:fixed; width:100%; top:0px; left:0px; min-height:100%; background-image:url(../images/home/home_foto_mobile.jpg); text-align:center; margin-left:0px; overflow:hidden; }
        .home .pict .txt { font-size:1.2em; line-height:1; color:white; text-align:center; }

    .home .piktogramy-mobile { display:block; }

    .this-page{ padding-top:75px; }
    
    .this-page .nadpis { padding-top: 5%; }
    .this-page h2 { font-size:1.5em; font-weight:700; }
    .this-page .describe { min-width:0px; width:100%; font-weight:normal;
                         padding:15px; margin:0px auto; } 
    
    .video { position:fixed; width:100%; top:0px; left:0px; min-height:100%; background-image:url(../images/video/video_foto_mobile.jpg); text-align:center; margin-left:0px; overflow:hidden; }
        .video iframe {width:90%; height: 250px;}
    .showGalery{ width:90%; }
        .showGalery a{ width:125px; height:125px; margin:8px; }

    .menu nav a.wide{ margin:10px 20px; display: inline-block; }
}