html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;scroll-behavior:smooth;}
*, *:before, *:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;}
*,*:focus,*:hover{outline:none}
body{font-family:'Albert Sans',Sora,Arial;font-weight:400;font-size:1.25em;line-height:1.9rem;background-size:contain;color:#6e6e6e;margin:0px;padding:0px}
input[type=text],input[type=date],input[type=password], select, textarea{font-family:'Albert Sans',Sora,Arial;color:#2b3540;box-sizing:border-box;width:100%;padding:0.5em 1em 0.4em 1em;font-weight:400;font-size:0.85em;border-radius:2px;border:1px solid #cccccc;-webkit-appearance:none;}
input[type=text],input[type=date],input[type=password], select{height:3.3em}
input[type=submit],button{height:4.55em}
input[type=submit], .button, button{cursor:pointer;padding:15px 35px 14px 35px;display:block;border-radius:3px;width:100%;border:0px;font-family:Sora,Poppins,Arial;font-size:0.65em;font-weight:700;background:#2a62bf;color:#ffffff;transition: all 0.3s ease}
input[type=submit]:hover, .button:hover, button:hover{background-color:#12469c;color:#ffffff;transition: all 0.3s ease}

.select{background-image:url(https://rosastyle.pl/gfx/dropdown.svg);background-repeat:no-repeat;background-size:1em 1em;background-position:right 10px bottom 50%}




input[type="date"] {
        position: relative;
    }

    /* create a new arrow, because we are going to mess up the native one
    see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
    input[type="date"]:after {
        content: "\1F4C5"; 
        color: #aaaaaa;
        padding:0px 0px 0px 0px;margin-top:-3px;
    }

    /* change color of symbol on hover */
    input[type="date"]:hover:after {
        color: #304d7e;
    }

    /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
    input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        color: transparent;
        background: transparent;
    }

    /* adjust increase/decrease button */
    input[type="date"]::-webkit-inner-spin-button {
        z-index: 1;
    }

    /* adjust clear button */
    input[type="date"]::-webkit-clear-button {
        z-index: 1;
    }

a{text-decoration:none;color:#5b5b5b}
a:hover{text-decoration:none;color:#304d7e}
.all{width:90%;margin:0px auto;text-align:center}
.w5{width:5%;display:block;float:left}
.w10{width:10%;display:block;float:left}
.w15{width:15%;display:block;float:left}
.w20{width:20%;display:block;float:left}
.w25{width:25%;display:block;float:left}
.w30{width:30%;display:block;float:left}
.w33{width:33.33%;display:block;float:left}
.w35{width:35%;display:block;float:left}
.w40{width:40%;display:block;float:left}
.w50{width:50%;display:block;float:left}
.w60{width:60%;display:block;float:left}
.w70{width:30%;display:block;float:left}
.left{text-align:left;padding:0px 25px 0px 0px}
.right{text-align:right;padding:0px 25px 0px 0px}
.center{text-align:center}
.clear{clear:both}
.red{color:#ff0000}
.darken{filter: brightness(85%);}
.box2{background:#cdaf85;width:20vh;height:4vh;bottom:-4vh;position:absolute;right:0px;z-index:5}
.frame{border:1px solid #cdaf85;padding:10px;display:inline-block}
.link{background:#cdaf85;font-size:0.65em;font-weight:600;letter-spacing:1px;color:#ffffff;text-transform:uppercase;padding:10px 20px 10px 20px;fon-family:Poppins,Arial;transition:all 0.2s ease}
.link:hover{background:#a48457;transition:all 0.2s ease;color:#ffffff}
.line2{width:15%;height:5px;position:relative;top:-15px;margin:0 auto;background:#cdaf85}
.line3{width:25%;height:1px;position:relative;margin:0 auto;margin-top:10px;margin-bottom:10px;background:#cdaf85}

h1,h2,h3,h4{margin:0px;padding:0px;font-family:'Albert Sans',Poppins,Sora,Arial;font-weight:500}
h1, h1sub{font-weight:400;font-size:4.6em;margin:0.2em 0px 15px 0px;display:block;position:relative;transition: all 0.7s ease;right:0px}
h2{font-size:2.9em;font-weight:500;margin:0.6em 0px 0.7em 0px}
h2 span{font-family:Sora,Arial;position:relative;top:-0.5em;font-weight:600;font-size:0.40em;letter-spacing:0.08em;padding:1.1em 0px 1.5em 20px;border-left:1px solid #cccccc;margin:0px 0px 0px 20px}
h3{font-size:2.4em}
h4{font-size:2.2em}
h2 img,h3 img,h4 img,h5 img{width:3em;height:3em;padding:20px;filter: invert(75%) sepia(44%) saturate(250%) hue-rotate(355deg) brightness(88%) contrast(90%);}

sup{padding:0px;margin:0px;vertical-align: baseline;vertical-align:baseline;position:relative;top:-0.4em}
.navbar{display:block;width:100%;right:7%;text-align:right}


#top{height:100vh;padding:42vh 0px 0vh 0px;position:relative;z-index:1}
#topsub{height:100vh;color:#ffffff;position:relative;z-index:1;background-color:#cccccc;text-align:center;text-shadow: 0px 5px 38px rgba(0, 0, 0, 0.85);overflow:hidden}
#topsub img{width:100%;z-index:1}
#topsub .block{padding:0vh 0px 18vh 0px;position:absolute;bottom:0px;z-index:5;width:100%}

#topsub p{padding:0px 15% 0px 15%;font-size:1.1em}
#topsub h1{font-size:5rem;padding:10px 0px 20px 0px}
#topsub h1 span{font-family:Sora,Arial;position:relative;top:-0.8em;font-weight:700;font-size:0.35em;letter-spacing:0em;padding:1em 0px 1.5em 20px;border-left:1px solid #cccccc;margin:0px 0px 0px 20px}

#menu{line-height:2.3rem;font-family:'Albert Sans',Sora,Arial;font-size:0.6em;letter-spacing:0.1em;position:fixed;display:block;width:100%;z-index:9;top:0px;left:0px;transition: all 0.3s ease-in;padding:14px 20px 5px 20px;background:rgba(0,0,0,0.2)}
#menu a{padding:10px 18px 10px 18px;font-weight:900;border-bottom:3px transparent;text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2)}
#menu a:hover{border-bottom:1px solid #ffffff}

.logo{position:fixed;top:0px;padding:10px 5px 0px 5px;left:5%;background:rgba(255,255,255,0.9)}
.logo a{position:relative;z-index:9999;padding:50px 15px 10px 15px}
.logo img{width:60px;height:auto;transition: all 0.3s ease}
.logolink{display:block;padding:30px 10px 0px 10px;border:none}
.logolink:hover{border:none}

#rezerwacja {background:rgba(0,0,0,0.5);border-radius:1px;transition: all 0.3s}
#rezerwacja a{border:none}
#rezerwacja img{width:1.3em;height:1.3em;vertical-align:middle;position:relative;top:-0.1em;opacity:0.7;margin:0px 10px 0px 0px;filter: invert(99%) sepia(3%) saturate(0%) hue-rotate(236deg) brightness(112%) contrast(100%);}

#sub{position:relative;display:block;padding:190px 0px 100px 0px;margin-bottom:0px;text-align:center}
#sub2{position:relative;display:block;padding:0px;margin-bottom:0px;text-align:center}
#sub2 h2{font-size:1.5rem}
.center h2{padding:5px;font-size:3rem}

#address{font-size:0.95em;text-align:right;color:#ffffff;padding:0px 20px 10px 0px;opacity:0.9;text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);}
#address img{vertical-align:middle;width:1.7em;height:1.7em;margin:0px 10px 0px 20px;opacity:1;filter: invert(96%) sepia(4%) saturate(16%) hue-rotate(152deg) brightness(104%) contrast(104%);}
#address a{font-size:1.5em;color:#ffffff;padding:0px;margin:0px;border:none}
#address a:hover{opacity:1;text-decoration:underline;background:none;border:none}

#home{color:#ffffff;text-shadow: 0px 15px 42px rgba(0, 0, 0, 0.85);}
#home p{font-size:1.3em;font-weight:500;text-shadow: 0px 5px 22px rgba(0, 0, 0, 0.7);}

.homeleft{margin:2em 0px 0px 0px;width:60%;display:block;float:left;padding:40px 20px 40px 0px;text-align:right;color:#ffffff;text-shadow: 0px 15px 42px rgba(0, 0, 0, 1);}
.homeright{width:40%;display:block;float:left;color:#ffffff;text-align:left;font-size:1.6em;letter-spacing:0.06em;text-shadow: 0px 4px 18px rgba(0, 0, 0, 0.5);font-weight:700;overflow:hidden;transition:all 1s ease}

#homeright{border-left:1px solid rgba(255,255,255,0.6);padding:2.85em 0px 2em 20px;position:relative;left:0px;display:block;transition: all 1s ease}
#homedesc{transition: all 0.5s ease}

#homemiddle{padding:10px 10vh 10px 10vh}
#homemiddle span{display:block;width:100%;text-align:center;padding:1em;font-size:2em}

.homeimage{display:block;float:left;width:60%;background:#cccccc;height:60vh;background-size:cover;background-repeat:no-repeat;background-position:center center}
.homedesc{display:block;float:left;width:40%;position:relative;left:-12vh;padding:3vh;margin:5vh 0px 0px 0px;background:rgba(255,255,255,0.9)}
.homedesc img{width:75%;position:relative;left:-3vh}

.homeimage2{display:block;float:left;width:60%;background:#cccccc;height:60vh;background-size:cover;background-repeat:no-repeat;background-position:center center}
.homedesc2{display:block;float:left;width:40%;text-align:right;position:relative;right:-12vh;padding:3vh;margin:5vh 0px 0px 0px;background:rgba(255,255,255,0.9)}
.homedesc2 img{width:75%;position:relative;right:-3vh}

.homeimage3{position:relative;z-index:2;width:34.8vh;height:25vh;left:0vh;top:35vh;background:url(../gfx/home2-rosa-style-basen-3.jpg) no-repeat;background-size:cover;}


.homeimage4{display:block;float:left;width:55%;background:#cccccc;height:60vh;background-size:cover;background-repeat:no-repeat;background-position:center center}
.homedesc4{display:block;float:left;width:40%;position:relative;left:-12vh;padding:3vh;margin:5vh 0px 0px 0px;background:rgba(255,255,255,0.9)}

#homemiddle h2, #homemiddle h3{line-height:1.2em;font-weight:500;font-size:2.3em}
#homemiddle .a{background-image:url(../gfx/home-rosa-style.jpg)}
#homemiddle .b{background-image:url(../gfx/home-rosa-style-apartamenty.jpg)}
#homemiddle .c{background-image:url(../gfx/home-rosa-style-basen.jpg)}

#reservation{transition: all 0.8s ease}
#reservation input,#reservation select{border:none}
#reservation{position:relative;width:80%;margin:0px auto;background:rgba(255,255,255,0.65);padding:1px 22px 7px 22px;border-radius:1px;border-bottom:0px solid #2a62bf;border-radius:2px}
#reservation label{padding:7px;color:#2b3540;display:block;font-size:0.75em;text-align:left}
#reservation .w10, #reservation .w15, #reservation .w20, #reservation .w25, #reservation .w35, #reservation .w30, #reservation .w40{padding:5px}

#reservationtop{padding:7px 12px 6px 4px;background:rgba(205,175,135,1);width:40%;position:fixed;right:0px;opacity:0;top:-3em;z-index:99;display:block;transition: all 0.3s ease;border-bottom-left-radius:1px}
#reservationtop input, #reservationtop select{height:2.3em;font-size:0.85em;width:96%;display:inline-block;border:0px;border-radius:1px}
#reservationtop button{height:3em;padding:0px;border-radius:1px}
#reservationtop img{width:100%;height:100%;padding:0.35em;display:block;filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(113deg) brightness(107%) contrast(100%);}
#reservationtop .w5{padding:0px 0px 0px 0px}

#reservationsub{display:inline-block;position:relative;margin:0 auto;margin-top:2em;border-radius:1px;border:1px solid #cdaf85;transition:all 0.3s ease}
#reservationsub div{background:rgba(0,0,0,0.2);padding:11px 10px 10px 20px;font-size:0.75em;white-space:nowrap}
#reservationsub span{position:relative;top:2px}
#reservationsub a{padding:10px 20px 10px 20px;background:#cdaf85;color:#ffffff;margin:0px 0px 0px 10px;font-size:0.95em;text-transform:uppercase;letter-spacing:2px;font-weight:600;;transition:all 0.2s ease}
#reservationsub a:hover{background:#a48457;transition:all 0.2s ease}

#reservationsub2{display:inline-block;text-align:center;margin:0 auto;margin-top:0.6rem;border-radius:1px;border:1px solid #cdaf85}
#reservationsub2 div{background:rgba(0,0,0,0);padding:11px 10px 10px 10px;font-size:0.75em;white-space:nowrap}
#reservationsub2 span{position:relative;top:2px}
#reservationsub2 a{display:block;padding:10px 20px 10px 20px;background:#cdaf85;color:#ffffff;font-size:0.95em;text-transform:uppercase;letter-spacing:2px;font-weight:600;transition:all 0.2s ease}
#reservationsub2 a:hover{background:#a48457;transition:all 0.2s ease}

#apartment{display:block;text-align:center;padding:35px 0px 0px 0px;position:relative;z-index:1}
#apartments{display:block;text-align:center;padding:35px 0px 0px 0px;position:relative;z-index:1}
#apartments .image{position:relative;width:25%;float:left;padding:0px 0px 0px 0px;line-height:0em}
#apartments img{width:100%;transition: all  ease 0.3s}

#gallery .image{position:relative;width:25%;float:left;padding:0px 0px 0px 0px;line-height:0em;overflow:hidden;transition: all  ease 0.3s}
#gallery img{width:100%;overflow:hidden;position:relative;bottom:0vh;transition: all  ease 0.4s}

#gallery .image a{display:block}
#gallery .image span{display:block;position:absolute;;top:5vh;overflow:hidden;text-align:left;font-size:1.1em;font-weight:600;padding:30px;transition: all  ease 0.3s}
#gallery .image span img{width:4.5em;height:4.5em;position:relative;left:-1.1em;opacity:0.3;padding:0px 0px 40px 0px}
#gallery .image > a:hover > img{bottom:-30vh;filter:contrast(140%);transition: all  ease 0.4s}
#gallery a:hover span{opacity:1;top:12vh;transition: all  ease 0.3s;}
#gallery a:hover{color:#5b5b5b}

#apartments .gdesc, #gallery .gdesc{text-align:center;position:absolute;line-height:1.1em;bottom:-0.5vh;left: 50%;transform: translate(-50%, -50%);z-index:5;color:#ffffff;padding:1px 15px 1px 15px;display:block;font-size:0.6em;border-radius:1px;white-space:nowrap}
#apartments .details:hover .darken{filter: brightness(60%);}

##apartments .details a:hover img{filter:contrast(140%);transition: all ease 0.3s}
#apartments .details .description{padding:15px}


#apartments .box{background:#cdaf85;width:20%;height:5%;margin-top:-2%;position:absolute}
.box{background:#cdaf85;width:20%;height:55vh;margin-top:-0.9rem;position:absolute}

#apartments .next:hover, #apartments .prev:hover, #other .next:hover, #other .prev:hover{border-color:#ffffff;transition:all 0.3s ease}
#apartments .next:hover img, #apartments .prev:hover img, #other .next:hover svg, #other .prev:hover svg{filter: invert(100%) sepia(0%) saturate(3276%) hue-rotate(14deg) brightness(117%) contrast(100%);transition:all 0.3s ease}

#middleimage{width:50%;float:left;padding:0px 25% 0px 25px;}
#middleimage img{width:100%}

#middlecontent{font-size:1.1rem;font-weight:300;width:100%;text-align:left;padding:15px 20rem 20px 20rem}
#middlecontent h2{font-size:1.5rem;line-height:1.3em;padding:1rem 0px 0.5rem 0px;font-weight:500}
#middlecontent p{padding:0px 10% 0px 0px}

#equipment{background:#efefef;display:block;padding:15px 20rem 1em 20rem}
#equipment strong{display:block;text-align:center;padding:25px;font-size:1.5rem;font-weight:500;opacity:0.9}
#equipment span{font-size:1rem;float:left;display:block;width:25%;padding:1.5em 10px 1.5em 0px;font-weight:300;text-align:left}
#equipment span img{width:2.3em;height:2.3em;vertical-align:middle;opacity:1;margin:-1px 15px 0px 0px;display:inline-block;filter: invert(73%) sepia(33%) saturate(336%) hue-rotate(356deg) brightness(83%) contrast(87%);}

#gallery2{width:100%;padding:0px 0px 0px}
#gallery2 img{}

#otherrooms{text-align:center;padding:15px;line-height:1em;border-top:1px solid #f1f1f1}
#otherrooms a{display:inline-block;font-size:0.7em;padding:6px 5px 4px 5px;margin:5px;;border:1px solid rgba(255,255,255,0.4);border-radius:3px;}
#otherrooms a:hover{background:#ffffff;color:#cdaf85}
#otherrooms span{display:inline-block;padding:8px;opacity:0.9;font-size:0.7em}

#apartments .gdesc a, #gallery .gdesc a{color:#ffffff}

#price{display:block;text-align:center;padding:90px 0px 40px 0px;position:relative;border-bottom:3px solid #dfe6f3}
#prices{width:100%;margin:0px auto;line-height:1.3em}

#localization{display:block;padding:2rem 0px 0px 0px;position:relative;margin-bottom:-15px}
#localization iframe{filter: grayscale(50%);}

#info{position:relative;display:block;padding:190px 0px 100px 0px;margin-bottom:0px}
#info .content{background:rgba(255,255,255,0.9);padding:35px 15% 35px 15%;border-radius:1px;text-align:left;font-size:0.8em;line-height:1.9em}
#info .content #reservation{width:100%}
#info .error{display:block;padding:15px;margin:40px 0px 0px 0px;font-weight:400;border:1px solid #ff0000;border-radius:3px;color:#ff0000;background:#ffffff}

#content2{padding:0px 0px 20px 0px}
#content2 img{width:2em;height:2em;vertical-align:middle;margin:0px 10px 0px 0px;position:relative;top:-1px}

#infopage{text-align:left;font-size:0.9em;padding:0px 0px 0px 15%}

.line{width:15%;margin:0 auto;background:#cccccc;height:1px}
.description{font-size:1em;line-height:1.8em;padding:5px 15% 5px 15%}
.description br{height:15px;display:block}
.descriptionsmall{font-size:0.85rem;line-height:1.4em;padding:15px 12% 5px 12%}
.small{font-size:0.9rem;line-height:1.1em;display:block;padding:15px 7% 0px 7%}
.small2{font-size:0.80em;line-height:1.1em;display:block;padding:5px 0px 5px 0px}

#details{display:block;text-align:center;padding:10px;position:relative;transition:all 0.6s ease}
#details span{font-size:0.8em;line-height:1em;display:inline-block;padding:8px 10px 6px 10px;border-radius:3px;color:#ffffff;margin:3px}
#details span img{width:1.8em;height:1.8em;vertical-align:middle;position:relative;top:-1px;margin:0px 7px 0px 0px;filter: invert(73%) sepia(33%) saturate(336%) hue-rotate(356deg) brightness(93%) contrast(87%)}

#inside{padding:1rem 0px 5rem 0px;font-weight:300}
#inside .box{height:25rem}
#inside .iimage{text-align:right;width:55%;margin:0px 0px 0px 5%;display:block;position:relative;z-index:2;float:left;font-size:2.8rem;font-weight:300}
#inside .iimage span{position:relative;z-index:3;top:4rem;height:4rem;padding:1.5rem;background:rgba(255,255,255,1)}
#inside .iimage img{width:100%;height:auto;position:relative}

#inside .idesc{width:40%;display:block;float:left;padding:20rem 10% 3rem 3rem;font-size:1rem;text-align:left}
#inside .idesc .imore{padding:0px;margin:2.5rem 0px 0px 0px;font-size:0.75rem;line-height:0.9rem;opacity:0.8}
#inside .idesc .ilink{padding:0px;margin:0px}
#inside .idesc img{max-width:110px;max-height:75px;padding:0px 0px 2rem 0px;clear:both;filter: saturate(0);opacity:0.8}
#inside .row{padding:0px 0px 1rem 0px}
#inside .row:nth-child(odd) .box{left:0px;}
#inside .row:nth-child(even) .box{right:0px}
#inside .row:nth-child(even) .iimage{float:right;text-align:left;margin:0px 5% 0px 0px}
#inside .row:nth-child(even) .idesc{text-align:right;padding:20rem 3rem 3rem 10%;}

@media (max-width:1680px) {
#inside .idesc{padding:12rem 8% 3rem 3rem}
#inside .row:nth-child(even) .idesc{text-align:right;padding:12rem 3rem 3rem 8%;}
}

@media (max-width:768px) {
#inside .box{height:12rem;margin-top:0px;width:30%}
#inside .iimage{width:95%;margin:0px 0px 0px 5%;font-size:1.5rem}
#inside .iimage span{height:2.8rem;padding:1rem;top:2.8rem}
#inside .idesc{width:100%;padding:0rem 5% 0px 5%;font-size:0.9rem}
#inside .row:nth-child(even) .idesc{text-align:left;padding:0rem 5% 0rem 5%;}
}

#faq{width:75%;text-align:left;position:relative}
#faq span{font-size:0.9rem;display:block;padding:15px 10px 10px 30px;font-weight:300}
#faq button{font-size:1.1rem;color:#6e6e6e;background-color:#ffffff}

.question{cursor:pointer;padding:1rem 0px 0.8rem 2rem;width:100%;border:none;border-top:1px solid #eaeaea;text-align:left;outline:none;transition: 0.4s;}

.question img{width:1.5rem;height:1.6rem;position:relative;top:-2px;opacity:0.4;float:right;transition:all 0.3s ease}
.question:hover img{opacity:1;transition:all 0.3s ease}

.question b{font-weight:400}
.question:hover{}


#faq button .active{background:#f1f1f1}
#faq button .active img{opacity:1}

#faq .answer {font-size:1.05rem;line-height:1.6rem;padding:1px 0px 0px 1rem;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out}
#faq .answer p{margin:0px 0px 1.5rem 0px;padding:1rem 10% 1rem 1rem}
#faq .answer a{text-decoration:underline}

@media (max-width:768px) {
#faq{width:88%}
#faq button{font-size:1rem}
#faq .answer{padding:1px 0px 0px 0px;font-size:0.9rem}
#faq .answer p{margin:0px 0px 0rem 0px;padding:1rem 0px 1rem 0rem}
.question{cursor:pointer;padding:1rem 0px 0.8rem 0rem}
.question b{display:block;float:left;width:80%}
.question img{vertical-align:top;display:block;float:right}
}

#contact{font-size:0.9em;color:#5c5c5c;position:relative;padding:70px 0px 70px 0px;background:url(../gfx/footer.jpg) no-repeat center top #d0d0d0;background-size:cover;border-bottom:30px solid #cdaf85}
#contact a{color:#5c5c5c;padding:10px 0px 10px 0px}
#contact a:hover{text-decoration:none;border-bottom:2px solid rgba(205,175,135,1)}
#contact strong{font-size:1.6em}
#contact strong img, #sub2 strong img{width:160px;height:160px;opacity:0.3;padding:20px;}
#contact .address{padding:0px}
#contact .address img, #sub2 .address img{opacity:1;width:2em;height:3em;padding:0px 10px 0px 0px;vertical-align:middle;margin-top:-2px}
#contact .phone{width:55%;display:block;float:left;text-align:right;padding:17px 20px 0px 20px;font-size:1.1em;font-weight:bold}
#contact .phone img, #sub2 .phone img{opacity:1;width:2em;height:2em;padding:0px 10px 0px 0px;vertical-align:middle}
#contact .phone p, #contact .mail p{padding:0px;margin:0px 0px 1rem 0px}
#contact .mail{width:45%;display:block;float:left;text-align:left;padding:15px 20px 0px 20px;font-size:1.1em;font-weight:bold}
#contact .mail img, #sub2 .mail img{opacity:1;width:2em;height:2em;padding:0px 10px 0px 0px;vertical-align:middle;position:relative;top:0em}

#sub2 .social img{opacity:1;width:2em;height:2em;padding:0px 10px 0px 0px;vertical-align:middle;position:relative;top:0em}

#contact strong img,#contact .address img, #contact .phone img, #contact .mail img{filter: invert(75%) sepia(44%) saturate(250%) hue-rotate(355deg) brightness(78%) contrast(90%);}


#footer{padding:25px;text-align:center}
#bottom{font-size:0.75em}
#bottom img{opacity:0.7;max-width:90px;padding:40px 0px 0px 0px}
.nonomedia{font-size:0.75rem}

#social{position:fixed;z-index:5;top:150px;right:0px;padding:0px;text-align:right}
#social a{display:block;float:right;background:rgba(255,255,255,0.7);margin:2px 0px 2px 0px;border-radius:1px;padding:15px 15px 15px 15px;transition: all 0.3s ease;}
#social a:hover{padding:15px 35px 15px 15px;background:rgba(255,255,255,1);} 
#social a img{border:0px;display:block}
#route a, #charger a, #facebook a, #instagram a{}
#route img, #charger img, #restaurant img, #facebook img,#instagram img{width:31px;height:30px}

@media (max-width:768px) {
#social{top:72px}
#social a{padding:10px}
#social a:hover{padding:10px 40px 10px 10px}
}





.crossfade > div {
  animation: imageAnimation 16s linear infinite;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  color: transparent;
  height: 100%;
  left: 0;top:0px;
  position: absolute;z-index:0;
  top:0;
  width: 100%;
}
.crossfade {

}
@keyframes imageAnimation {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.crossfade div:nth-of-type(1) {
  background-image: url(../gfx/bg-d4.jpg);
  animation-delay: 12s;
}
.crossfade div:nth-of-type(2) {
  background-image: url(../gfx/bg-d3.jpg);
  animation-delay: 8s;
}

.crossfade div:nth-of-type(3) {
  background-image: url(../gfx/bg-d1.jpg);
  animation-delay: 4s;
}
.crossfade div:nth-of-type(4) {
  background-image: url(../gfx/bg-d2.jpg);
  animation-delay:0;
}

@media (max-width:600px) {
.crossfade div:nth-of-type(1) { background-image: url(../gfx/bg-d4-small.jpg) }
.crossfade div:nth-of-type(2) { background-image: url(../gfx/bg-d2-small.jpg) }
.crossfade div:nth-of-type(3) { background-image: url(../gfx/bg-d1-small.jpg) }
.crossfade div:nth-of-type(4) { background-image: url(../gfx/bg-d3-small.jpg) }
}

@media (max-width:1680px) {
##apartments .gdesc, #gallery .gdesc{bottom:-8h}
#reservation{width:90%}
#middlecontent, #equipment{padding:10px 12rem 30px 12rem}

}


@media (max-width:1540px) {
h1{font-size:3.8em}
}


@media (max-width:1440px) {
.homeleft{padding:40px 20px 10px 20px;margin:0px}
.homeright{font-size:1.4em;padding:0.5em 0px 0.5em 20px;}
#homeright{padding:1.2em 0px 1em 20px}
#home{padding:10vh 0px 0px 0px}
#home p{padding:0px;margin:0px 0px 20px 0px;font-size:1em}
#homemiddle{padding:10px 0px 10px 10vh}
#homemiddle h2, #homemiddle h3{margin:0px;font-size:1.5em}
.homedesc{}
.homedesc img{width:100%}
.homedesc2 img{width:100%}

#top{padding:32vh 0px 0vh 0px;}
#reservation{width:100%}
#topsub h1{font-size:3.4em}
#topsub p{font-size:0.9em}

##sub2 h2{font-size:1.5em}


#middlecontent{padding:10px 6% 10px 10%}
#middlecontent h2{padding: 0.1rem 0px 0.1rem 0px;font-size:2em}
#middlecontent h2 span{font-weight:400}
#equipment{padding:10px 2% 10px 10%}


#gallery .image span{top:5vh;font-size:1em}
#gallery .image span img{width:4em;height:4em;position:relative;left:-1.1em;padding:0px 0px 40px 0px}
#gallery .image > a:hover > img{bottom:-30vh;filter:contrast(140%);transition: all  ease 0.4s}
#gallery a:hover span{opacity:1;top:10vh;transition: all  ease 0.3s;}

}




@media (max-width:1366px) {
#topsub h1{font-size:3.1em}
h1{font-size:3.5em}
}

@media (max-width:1280px) {
.all{width:96%}
input[type=date], select{padding:0.3em 0.7em}
.homeleft{margin:0px}
.homeright{font-size:1.1em;padding:2.4em 0px 1.7em 20px}
#home p{font-size:1.2em;padding:0px;margin:0px 0px 10px 0px}
#topsub{padding:44vh 0px 3vh 0px}
#topsub p{padding:0px}

#reservation{width:96%;padding:1px 5px 7px 5px}

#middlecontent, #equipment{padding:10px 8rem 30px 8rem}
#equipment span{width:33.33%}
}


@media (max-width:1190px) {
h1{font-size:3.2em}
}

@media (max-width:1090px) {
h1{font-size:3em}
}

@media (max-width:1024px) {
.all{width:98%}
h1{font-size:2.8em;line-height:1.1em}
#top{padding:36vh 0px 0vh 0px}
.homeright{font-size:0.90em;padding:3em 0px 1.7em 20px}
#home p{font-size:1em}
.w15{width:50%}
.w25{width:50%} .w35{width:75%}
.w40{width:75%}
.w10{width:25%}
.w50{width:100%}
.right, .left{text-align:center;padding:0px}
.left{padding:20px 0px 0px 0px}
#reservation{padding:0px 15px 10px 15px;background:rgba(255,255,255,0.7)}
#reservation label{font-size:0.6em;padding:0px 3px 0px 3px}
input[type=text], input[type=date], select{padding:10px;font-size:0.75em;height:3em;background:#ffffff}
#reservation div:nth-child(4){width:25%}
#reservation div:nth-child(5){width:100%}
#reservation .bt{height:0px}
#reservation button{width:100%}
#equipment{padding:10px}
#equipment span{font-size:0.7em}
}

@media (max-width:910px) {
h1{font-size:2.3em}
}

@media (max-width:768px) {
body{background-size:200%;font-size:1em}
h1{font-size:2.3em;line-height:1.1em}
h2, h3, h4{font-size:2em;line-height:1em;margin:0px}
h2{font-size:1.6em;line-height:1.2em}

h2 span{display:block;border:none;margin:5px 0px 0px 0px;padding:10px 0px 0px 0px;font-size:0.5em;letter-spacing:0.1em}
.all{width:100%;padding:0px 15px 0px 15px}
.box{width:35%;margin-top:-0.3rem}
#homeright{border:none;padding:0.4rem 0px 0.4rem 0px}
#address{display:none}
#menu{background:transparent}
#menu a{padding:8px 20px 8px 20px;text-shadow:none;font-size:0.7rem}
.logo{padding:30px 10px 10px 10px}
.logo img{max-width:40px;height:auto}
#top{height:100vh;padding: 33vh 0px 0vh 0px;}

#topsub{padding:0vh 0px 3vh 0px}
#topsub .block{padding:0vh 0px 14vh 0px}
#topsub h1{font-size:2.6em;margin:0px;padding:20px 15px 0px 15px;line-height:1em}
#topsub h1 span{display:block;border-left:none;font-size:0.4em;padding:0px;margin:10px 0px 0px 0px}
#topsub p{padding:0px 15px 10px 15px;font-size:0.9em;line-height:1em;margin:0px;position:relative;top:-5px}
#topsub img{overflow:hidden;width:330%;position:relative;left:-50%}

#homemiddle{padding:0px;text-align:center}

.homeimage, .homeimage2{width:100%}
.homedesc, .homedesc2{width:94%;left:0vh;margin:0px 3% 0px 3%;margin-top:-4.4rem;position:relative;text-align:center}
.homedesc2 img{right:0px}
.homedesc img{left:0px}

#details{padding:10px 10px 10px 10px}
#details span{font-size:0.75em;width:60%;float:left;display:block;margin:0px;text-align:left;padding:8px 8px 8px 8%}
#details span:nth-child(even){text-align:left;padding:8px 8px 8px 5%;width:40%;}
#details span img{left:0px}

#reservationsub div{padding:10px}
#reservationsub span{display:none}
#reservationsub a{margin:0px}

#sub2{font-size:0.9em;line-height:1.4em}
#sub2 h2{font-size:1.3rem}
.homeleft, .homeright{width:100%;text-align:center}
.homeleft{padding:10px 0px 0px 0px;line-height:1.6em;margin:0px}
.homeleft h1{margin:0px}
.homeright{padding:5px;font-size:1.0em}
#home p{display:none}



#apartments{padding:0px}
#apartments h2{padding:15px 0px 0px 0px}
##apartments .gallery{padding:0px}
#apartments .image{width:100%;margin:0px 0px 30px 0px}
#apartments .gdesc{font-size:0.65em}

#apartments .image, #gallery .image{width:100%;padding:0px 0px 0px 0px;}

#apartments .details{width:100%;padding:0px 0px 10px 0px}
#apartments .details .info, #other .details .info{bottom:9rem}
#apartments .details .info p, #other .details .info p{font-size:1.1rem;padding:15px 0px 15px 0px;margin:0px}
#apartments .details .info span, #other .details .info span{font-size:0.7rem}
#apartments .details .info .more, #other .details .info .more{line-height:1rem;font-size:0.6rem}
#apartments .prev, #apartments .next{display:none}

##apartments .next,#other .next{right:26%;bottom:3.5rem;padding:0.4rem 1.2rem 0.4rem 1.2rem}
##apartments .prev, #other .prev{left:26%;bottom:3.5rem;padding:0.4rem 1.2rem 0.4rem 1.2rem}
##other .next{right:25%}
##other .prev{left:25%}

#otherrooms{display:none}

#gallery .image a{line-height:0em;padding:0px;margin:0px;display:block;border:0px}

.description{padding:5px 15px 5px 15px;font-size:0.85em}
.descriptionsmall{padding:0px;font-size:1em;line-height:1.6em}
.small{padding:15px 0px 0px 0px}

#contact{font-size:0.8em;padding:20px 0px 0px 0px}
#contact .address{font-size:1.2em}
#contact .phone{width:100%;padding:5px;text-align:center}
#contact .mail{width:100%;padding:5px;text-align:center;font-size:1.2em}
#info .content{padding:30px}

#footer{padding:0px 10px}

#bottom img{width:50px;padding:5px}

.frame{margin:0.7rem}

#middlecontent{padding:1rem 20px 0px 25px;line-height:1.7em;font-size:1rem}
#middlecontent p{padding:0px}
#middlecontent h2{padding: 0.1rem 0px 0.1rem 0px;font-size:1.3em}

#equipment strong{font-size:1.8em}
#equipment span{width:50%;font-size:1.1em;padding:15px 5px 15px 5px;text-align:center;line-height:1.2em}
#equipment span img{width:3em;height:3em;margin:-1px 0px 10px 0px;display:block;position:relative;left:40%;clear:both}
#equipment span:nth-child(odd){clear:both}
}









/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}






#mouse-scroll {position:fixed;
    margin: auto;
    left: 50%;
    bottom:2em;
    -webkit-transform: translateX(-50%);
    z-index: 9999;transition: all  ease 0.3s

}
#mouse-scroll .mouse {height:30px;top:40px;width:19px;border:2px solid #ffffff;border-radius: 10px;-webkit-transform: none;-ms-transform:none;transform:none;}
#mouse-scroll .mouse-in {
    height: 5px;
    width: 3px;
    display: block;
    margin: 1px auto;
    background: #ffffff;
    position: relative;top:15;
    -webkit-animation: animated-mouse 1.2s ease infinite;
}
#mouse-scroll .down-arrow-1, 
#mouse-scroll .down-arrow-2, 
#mouse-scroll .down-arrow-3 {
     -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite:;
}
#mouse-scroll .down-arrow-1 {
    margin-top: 6px;
}
#mouse-scroll .down-arrow-2 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
}
#mouse-scroll .down-arrow-3 {
    -webkit-animation-delay: .3s;
    -moz-animation-dekay: .3s;
    -webkit-animation-direction: alternate;
}
#mouse-scroll span {
    display: block;
    width: 5px;
    height: 5px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    margin: 0 0 3px 7px;
}

.hidden {opacity:0;transition: all  ease 0.3s}

@-webkit-keyframes animated-mouse {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
         opacity: 0;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@-webkit-keyframes mouse-scroll {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    } 
}
@keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width:768px) {
#mouse-scroll{display:none}
}



/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}









/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZVYFeCGg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/albertsans/v1/i7dOIFdwYjGaAMFtZd_QA1ZbYFc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
















/* parent of book-container & container (slider) */
main {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

/* wraps entire slider */
.slider-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.slider-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 1%;
  background: rgba(0,0,0,0.6);
  color: #fff;
}

/* slider controls*/
.control {position:absolute;bottom:2rem;width:2rem;height:2rem;
  color: #fff;
  font-size: 3rem;
  padding: 0;
  margin: 0;
  line-height: 5px;
}

.prev,
.next {
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;
  background: rgba(0,0,0,0.3);
  padding: 1rem;
}

##.prev{left:1rem;}
##.next{left:2rem;}

##.prev:hover,.next:hover {transform: scale(1.5,1.5);}

.slider-container {
  /* 
  n variable holds number of images to make .container wide enough 
  to hold all its image children 
  that still have the same width as its parent
  */
  display: flex;
  align-items: center;
  overflow-y: hidden;
  width: 75%; /* fallback */
  width: calc(var(--n)*75%);
  height: 35vw; 
  max-height: 100vh;
  transform: translate(calc(var(--i, 0)/var(--n)*-100% + var(--tx, 0px)));
}

/* transition animation for the slider */
.smooth { 
  /* f computes actual animation duration via JS */
  transition: transform calc(var(--f, 1)*.5s) ease-out; 
}

/* images for the slider */
img {
  width: 100%; /* can't take this out either as it breaks Chrome */
  width: calc(100%/var(--n));
  pointer-events: none;
}


@import "css/menu.css";












#prices table{width:80%;margin:0px auto;line-height:1.3rem}
#prices strong{font-size:1.6rem;padding:20px;display:block}
#prices img{width:5em;height:5em;padding:5px 0px 30px 0px;opacity:1;filter: invert(75%) sepia(44%) saturate(250%) hue-rotate(355deg) brightness(88%) contrast(90%);}

#prices .header th{font-size:0.85rem;text-align:left;line-height:1rem;letter-spacing:0px;vertical-align:top;font-weight:normal;padding:14px}

##prices td{padding:10px;}
#prices .title{display:block;font-size:0.8rem;padding:1rem;text-align:right;border-top:1px solid #dfe6f3;color:#6e6e6e;letter-spacing:0px}
#prices .title b{font-size:0.9rem}
#prices .title2{padding:11px 11px 11px 11px;font-size:0.75rem;font-weight:bold;position:relative;display:block}

#prices .price{border-top:1px solid #dfe6f3;width:16.66%;padding:0px 10px 0px 0px;font-size:1.7rem;font-weight:600;text-align:left}

#prices .price span{display:block;font-size:0.75rem;line-height:1.3rem;font-weight:300}
#prices .price div{display:inline-block;padding:11px}
#prices .price div:nth-child(odd) {border-right: 1px solid #d6d7d9}



#prices tr:nth-child(odd) {border-bottom: 1px solid #d6d7d9}

@media only screen  and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
#prices{width:100%}
#prices strong{font-size:1.2em;padding:15px}
#prices table{width:100%}
#prices .header th{font-size:1em}
#prices tr:nth-child(odd) {border-bottom:1px solid #d6d7d9;}
#prices .price{padding:7px 7px 7px 50%;font-size:1.2rem;width:100%}
#prices .title{text-align:center}



		/* Force table to not be like tables anymore */
#prices table, #prices thead, #prices tbody, #prices th, #prices td, #prices tr {display: block;}

		/* Hide table headers (but not display: none;, for accessibility) */
#prices thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

#prices tr {
      margin: 0 0 1rem 0;
    }
      
#prices tr:nth-child(odd) {
##background: #edeff3;
    }
    
#prices td {
			/* Behave  like a "row" */
			border: none;
			##border-bottom: 1px solid #d6d7d9;
			position: relative;font-size:0.9em
	
		}

#prices td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding:7px 7px 7px 10px;text-align:right;
			white-space: nowrap
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/



#prices td:nth-of-type(2):before {font-size:0.7rem;font-weight:400;padding-top:15px;white-space: pre-wrap;content: "26.04-05.05\A 29.05-03.06"; }
#prices td:nth-of-type(3):before {font-size:0.7rem;font-weight:400;padding-top:15px;content: "05.05-29.05"; }
#prices td:nth-of-type(4):before {font-size:0.7rem;font-weight:400;padding-top:15px;content: "03.06-22.06"; }
#prices td:nth-of-type(5):before {font-size:0.7rem;font-weight:400;padding-top:15px;;white-space: pre-wrap;content: "22.06-13.07\A 17.08-31.08"; }
#prices td:nth-of-type(6):before {font-size:0.7rem;font-weight:400;padding-top:15px;content: "13.07-17.08"; }
#prices td:nth-of-type(7):before {font-size:0.7rem;font-weight:400;padding-top:15px;content: ""; }



}