@font-face {
font-family: 'MoristonRegular';
src: url('../webfonts/Moriston/MoristonPersonal-Regular.otf');
src: url('../webfonts/Moriston/MoristonPersonal-Regular.otf?#iefix') 
format('opentype'); }

@font-face {
font-family: 'MoristonLight';
src: url('../webfonts/Moriston/MoristonPersonal-Light.otf');
src: url('../webfonts/Moriston/MoristonPersonal-Light.otf?#iefix') 
format('opentype'); }

@font-face {
font-family: 'MoristonMedium';
src: url('../webfonts/Moriston/MoristonPersonal-Medium.otf');
src: url('../webfonts/Moriston/MoristonPersonal-Medium.otf?#iefix') 
format('opentype'); }

@font-face {
font-family: 'MoristonBlack';
src: url('../webfonts/Moriston/MoristonPersonal-Black.otf');
src: url('../webfonts/Moriston/MoristonPersonal-Black.otf?#iefix') 
format('opentype'); }

@font-face {
font-family: 'MoristonBold';
src: url('../webfonts/Moriston/MoristonPersonal-Bold.otf');
src: url('../webfonts/Moriston/MoristonPersonal-Bold.otf?#iefix') 
format('opentype'); }



body {
    font-family: "MoristonLight";
    font-size: 1.5em;
    color: white;
        background: saddlebrown;
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 0px; 
}


a {color: white; text-decoration: none;}


/* panely */
#section {
    background: saddlebrown;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
    }
#inner {
    position: relative;
}      
img.mainImage {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:93vh;
    }
#nav-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;

} 
/* link na home page */  
#nav-home {
    display: inline-block;
    text-align: left; 
}     
#nav-panely {
    font-size: 1.8vh;
    display: inline-block;
    width: calc(100% - 5vw);
    text-align: center;
}
#nav-wrapper span {color: wheat;}

#nav-panely span:hover,
#nav-home span:hover {
    color: white;
    cursor: pointer;
}

#nazev-wrapper {
   width: 100%;
    z-index: 10;
    background-color: transparent;
    color: #eee;
    font-size: 1.6vh;
    text-align: right;
    margin-top: -1vh;
}

#nazev { float: right; }
#popis { float: left; }

/* sipky pro posuv mezi panely ve skupine */
.sipka:hover {
    color: #fff;
    cursor: pointer;
}  
#sipky {
    position: absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    font-size: 4vh;
    color: #ddd;
    z-index: 10;
}
#sipka-vlevo { float: left; padding-left: 1em;}
#sipka-vpravo { float: right; padding-right: 1em;}



/* 'home stranka' s navigaci skupin */
#home {
    position:relative;
    height: 100vh;
}
#vrohu {
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
}
#vrohu img {
    margin-bottom: -5px;
    padding: 0px;
}
#fg {
    position: relative;
    top: 10vh;
    left: 42vw;
    width: 50vw;
 }
#foto {
    font-family: serif;
    font-size: 8vw;
    font-style: italic;
    width: auto;
    height: 8vw;
    
}
#galerie {
    font-family: "MoristonBold";
    font-size: 5vw;
    width: auto;
}
#nav-skupiny li:hover {
    cursor: pointer;
    color: #fff;
}
#nav-skupiny ul {
    list-style: square outside;
}
#nav-skupiny li {
    font-family: "MoristonRegular";
    font-size: 1.6vw;
    height: auto;
    color: #ddd;
}