/**
 * @author Jan Reitter
 * @package U Tomana
 * @subpackage v1.1
 * @copyright Copyright (C) 2018 Jan Reitter. All rights reserved.
 */

 /* GLOBAL settings */
@charset "utf-8"; 


/* header */
#header, #footer {
background-color: #000;
}
.white {
background-color: #fff !important;
}


#header .brand {
font-weight: 600;
margin: 0;
letter-spacing: 0.2rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.language-switcher a {
color: #fff;
}
.white .language-switcher a {
color: #000;
}
li.lang-active a {
font-weight: 600;
}
.mod-languages{
text-align: right;
}
div.mod-languages li {
padding-right: 5px;
padding-left: 5px;
margin: 0!important;
}
/* docaska
.mod-languages li:first-child {
border-right: 2px solid #fff;
}
.white .mod-languages li:first-child {
border-right: 2px solid #000;
}         */
.mod-languages.beerhouse li:first-child {
border-right: 2px solid #000;
}
.mod-languages.beerhouse li>a {
color: #000;
}
.mod-languages.beerhouse.active li:first-child {
border-right: 2px solid #fff;
}
.mod-languages.beerhouse.active li>a {
color: #fff;
}

.nav {                    
display: none;
}
.nav.on {                    
display: block;
position: absolute;
    width: 250px;
    padding: 20px 0 20px 20px;
    margin-left: -15px;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.7);
} 

/*.navcross, .language-switcher {
width: 10%;
}    */

/* Footer */ 

/* navigace */

.nav-left-cross {
height: 50px;
    width: 50px;
    pointer-events: all;
    position: relative;
    /*position: fixed; 
    left: 40px;
    top: 40px;
    z-index: 5;  */
    cursor: pointer;
    margin-left: 5px;
    border: 0;
    background: none;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
}
.nav-left-cross > .firstline, .nav-left-cross > .secondline  {
    position: absolute;
    left: 0;
    width: 100%;
    height: 8px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
.nav-left-cross > .firstline, .nav-left-cross > .secondline  {
    background-color: #fff;
}
.white .nav-left-cross > .firstline, .white .nav-left-cross > .secondline  {
    background-color: #000;
}

.nav-left-cross div.firstline {
    top: 10px;
}
.nav-left-cross div.secondline {
    bottom: 10px;
}

.nav-left-cross.on div.firstline {
-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 22px;
}
.nav-left-cross.on div.secondline {
-webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 20px;
}
.nav-left-cross.on div.firstline {
    background-color: #fff;
}
.nav-left-cross.on div.secondline {
    background-color: #fff;
}
.white .nav-left-cross.on div.firstline {
    background-color: #000;
}
.white .nav-left-cross.on div.secondline {
    background-color: #000;
}

.link-pages {
text-align: center;
margin-bottom: 1rem; 
}
.link-pages a {
font-size: 1.5rem;
color: #000;
font-weight: 600;
}

.section .home-content-inner {
background-color: transparent;
-webkit-transition: all 5s;
    -moz-transition: all 5s;
    -ms-transition: all 5s;
    -o-transition: all 5s;
    transition: all 5s;
}
.section.active .home-content-inner {
background-color: rgba(255, 255, 255, 0.7);
-webkit-transition: all 10s;
    -moz-transition: all 10s;
    -ms-transition: all 10s;
    -o-transition: all 10s;
    transition: all 10s;
}
.brand {
color: #fff;
}
.white .brand {
color: #000;
}

/* uvodni strana */
.half-black {
background-color: #000;
position: relative;
height: calc(100vh);
}
.half-white {
background-color: #fff;
position: relative;
height: calc(100vh);
}
.left-active, .right-active {
position: absolute;
/*background-color: #000;
    width: 100%;  */
    text-align: center;
   /* color: #fff; 
    display: none;  */
    height: 100%;
}
.left-active {
background-color: #000;
color: #fff; 
}
.right-active {
background-color: #fff;
color: #000; 
}
.half-black img, .half-white img {
max-width: 80%;
}
/*.startpage-text {
height: 100%;
}   */
.left-active-inner, .right-active-inner {
height: 100%;
} 

.startpage-text h1 {
    border-top: 3px solid;
    border-bottom: 3px solid;
    font-weight: 600;
    
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.right-active .startpage-text h1 {
color: #000; 
}
/* spolecne */
.tittle h1 {
margin: 0;
text-transform: uppercase;
    text-align: center;
    border-top: 3px solid;
    border-bottom: 3px solid;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
    font-size: 2.8rem;
}
.restaurant p, .story p, .menu p, .beerstory p, .onas p, .aktuality p, .gallery p {
font-size: 0.9rem;
    font-weight: 100;
    line-height: 1.4;
  /*  text-transform: uppercase;   */
    text-align: justify;
text-align-last: center;
-moz-text-align-last: center;
margin-bottom: 0;
padding-bottom: 2rem;
}
.grandprix p, .funkcional p, .umelecky p, .vezensky p, .lazensky p {
font-size: 0.9rem;
    font-weight: 100;
    line-height: 1.4;
  /*  text-transform: uppercase;   */
    text-align: justify;
text-align-last: center;
-moz-text-align-last: center;
margin-bottom: 0;
padding-bottom: 2rem;
}
.kontakt p {
font-size: 0.9rem;
    font-weight: 100;
    line-height: 1.4;
  /*  text-transform: uppercase;   */
    text-align: left;

margin-bottom: 0;
padding-bottom: 2rem;
}
/*.story .bg-opacity-page, .menu .bg-opacity-page, .beerstory .bg-opacity-page, .aktuality .bg-opacity-page, .onas .bg-opacity-page, .kontakt .bg-opacity-page {
background-color: #ffffffcc;
}   */
.grandprix .bg-opacity-page, .funkcional .bg-opacity-page, .umelecky .bg-opacity-page, .vezensky .bg-opacity-page, .lazensky .bg-opacity-page {
background-color: #ffffffcc;
}  
/*.bg-apartmany .bg-opacity {
background-color: #ffffffcc;
}           */
.main-left-nav>li {
text-transform: uppercase;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.main-left-nav>li>a {
color: #000;
}

/* restaurace */
.restaurant h1 {
display: none;
}
.bg-restaurant, .bg-rezervace {
background: url(../images/bg/1.jpg) bottom center no-repeat;
background-size: cover;
background-color: #000;
/*height: calc(100vh);  */
}
.bg-apartmany {
background: url(../images/hotelbg/uvodhotel.jpg) bottom center no-repeat;
background-size: cover;
}
.logo-restaurace {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
    max-width: 160px;
}
/*.bg-opacity {
background-color: #0000008a;
}    */


/* nas pribeh */
.story .bg-page {
background: url(../images/bg/2.jpg) bottom center no-repeat;
background-size: cover;
}
/*.story .bg-page-inner {
background: url(../images/bg/2z.jpg) bottom center no-repeat;
background-size: cover;
}   */
/* menu */
.menu .bg-page {
background: url(../images/bg/3.jpg) bottom center no-repeat;
background-size: cover;
}
/*.menu .bg-page-inner {
background: url(../images/bg/3z.jpg) bottom center no-repeat;
background-size: cover;
}    */
.food-menu-link, .drink-menu-link, .story-link, .beer-link, .event-link, .galerie-link, .rezervace-link {
text-align: center;
}
.food-menu-link>a, .drink-menu-link>a, .story-link>a, .beer-link>a, .event-link>a, .galerie-link>a, .rezervace-link>a {
color: #000;
text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
}
.food-menu-link, .story-link, .beer-link, .event-link, .galerie-link, .rezervace-link {
padding-bottom: 1rem;
    padding-top: 1rem;
}
/* beerstory */
.beerstory .bg-page {
background: url(../images/bg/4.jpg) bottom center no-repeat;
background-size: cover;
}
/*.beerstory .bg-page-inner {
background: url(../images/bg/4z.jpg) bottom center no-repeat;
background-size: cover; */
}
/* aktuality */
.aktuality .bg-page {
background: url(../images/bg/5.jpg) bottom center no-repeat;
background-size: cover;
}
/*.aktuality .bg-page-inner {
background: url(../images/bg/5z.jpg) bottom center no-repeat;
background-size: cover;
}          */
/* o nas */
.onas .bg-page {
background: url(../images/bg/6.jpg) bottom center no-repeat;    
background-size: cover;
}
/*.onas .bg-page-inner {
background: url(../images/bg/6z.jpg) bottom center no-repeat;
background-size: cover;
}    */
/* Galerie */
.gallery .bg-page {
background: url(../images/bg/gallery.jpg) bottom center no-repeat;
background-size: cover;
}


/* apartmany */
.grandprix .bg-page {
background: url(../images/hotelbg/grandprix.jpg) bottom center no-repeat;
background-size: cover;
}
.funkcional .bg-page {
background: url(../images/hotelbg/funkcional.jpg) bottom center no-repeat;
background-size: cover;
}
.umelecky .bg-page {
background: url(../images/hotelbg/umelecky.jpg) bottom center no-repeat;
background-size: cover;
}
.vezensky .bg-page {
background: url(../images/hotelbg/vezensky.jpg) bottom center no-repeat;
background-size: cover;
}
.lazensky .bg-page {
background: url(../images/hotelbg/lazensky.jpg) bottom center no-repeat;
background-size: cover;
}
/* footer */
.icons, .social-links {
display: inline-block;
}
.icons>.img-fluid {
height: 30px;
padding-left: 5px;
padding-right: 5px;
}
.social-links {
margin-right: 20px;
}


.rezervace-home {
    padding: 0.375rem 0.75rem !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#header .brand {
    font-size: 3.5vw;
    word-spacing: 0.8rem;
    letter-spacing: 0.2rem;
}
  }

/* Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) {
#header .brand {
    font-size: 4.5vw;
    word-spacing: 0.8rem;
    letter-spacing: 0.2rem;
}
.nav-child {
position: absolute;
    top: 0;
    left: 250px;
    width: 100%;
    padding: 20px;
    list-style: none;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.7);
}
.nav-child>li {
    text-transform: uppercase;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.nav-child>li>a {
    color: #000;
}
.parent .nav-header:hover {
 text-decoration: underline;
 cursor: pointer;
}
.apatmans {
display: none;
}
.apatmans.on {
display: block;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#header .brand {
    font-size: 3rem;
    word-spacing: 1rem;
    letter-spacing: 0.2rem;
}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#header .brand {
    font-size: 3.5rem;
    word-spacing: 2rem;
    letter-spacing: 0.2rem;
}
}




@media (max-width: 576px) {
.nav.on {                    
    width: 100%;
   background-color: #000; 
   padding: 20px;
}
.main-left-nav>li>a {
    color: #fff;
    
} 
.main-left-nav>li {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    border-bottom: 1px solid;
    border-color: #ffffff73;
}
.main-left-nav>li:last-child {
    border-bottom: none;
   
}
.main-left-nav>li.active>a {
    color: #ffffff73;
}
.kontakt p, .kontakt h6  {
    text-align: center;
   
}
}