/* ========================================================================== */
/* LAYOUT */
/* ========================================================================== */

#layout{

    width:100%;
    max-width:790px;

    margin:0 auto;

    text-align:left;

    position:relative;

    z-index:1;
}

/* Main atmosphere layer */

#layout::before{

    content:"";

    position:absolute;

    top:168px;

    right:-13px;

    width:541px;

    height:100%;

    pointer-events:none;

    z-index:0;

    opacity:.75;

    background-image:url('../img/bg/hex-overlay.png');

    background-repeat:repeat-y;

    background-position:top right;

    background-size:541px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,1) 8%,
            rgba(0,0,0,1) 70%,
            rgba(0,0,0,0) 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,1) 8%,
            rgba(0,0,0,1) 70%,
            rgba(0,0,0,0) 100%
        );
}

/* Secondary mirrored atmosphere layer */

#layout::after{

    content:"";

    position:absolute;

    top:420px;

    right:-40px;

    width:541px;

    height:100%;

    pointer-events:none;

    z-index:0;

    opacity:.18;

    transform:scaleY(-1);

    background-image:url('../img/bg/hex-overlay.png');

    background-repeat:repeat-y;

    background-position:top right;

    background-size:541px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,1) 20%,
            rgba(0,0,0,0) 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,1) 20%,
            rgba(0,0,0,0) 100%
        );
}

.content,
#panel-left,
#nav,
#footer,
#linky{

    position:relative;

    z-index:2;
}

#container{

    padding-top:12px;
}

/* ========================================================================== */
/* HEADER */
/* ========================================================================== */
#header { position:relative; padding-left: 7px;}
  
#logo {
  font-family: Impact, 'Techno CE', sans-serif;
  font-weight: normal;
  color: #fff;
  position: relative;

  overflow: visible;

  height: 190px;
  font-size:260%;
  margin: 0;
  line-height: 130px;
}
#logo a{
  color: #fff;
  text-decoration: none;
}

#logo .leaf {

    position:absolute;

    left:0;
    top:20px;

    z-index:1;

    width:790px;
    height:150px;

    background-image:url('../img/logo.png');

    background-position:0 0;

    background-repeat:no-repeat;

    background-size:790px 150px;

    image-rendering:auto;

    backface-visibility:hidden;

    transform:translateZ(0);

    cursor:pointer;
}

#logo .light {
  color: #3f576e;
}

/* ====================================================================== */
/* MOBILE MENU - DESKTOP RESET */
/* ====================================================================== */

#mobile-menu-toggle{

    display:none;
}

@media (min-width:801px){

    #main-menu{

        display:block !important;
    }
}
        
/* ========================================================================== */
/* NAVIGATION */
/* ========================================================================== */
#nav {position:relative; z-index:2; border: 1px solid #1a2735; border-right: none; border-left: none; padding: 7px 0;}
#nav ul {margin:0; padding:0; list-style:none;}
#nav ul li {float:left; display:inline; margin:0; padding:0;}
#nav ul li a {
font-family:'Rajdhani', sans-serif;
letter-spacing:0.5px;

transition:background 0.2s ease;

font-size:19px;
font-weight:bold;

display:block;

color:#fff;
text-decoration:none;

padding:7px 25px 7px 7px;

line-height:18px;
}

#nav ul li a span {

    display:block;

    margin-top:2px;

    font-size:11px;

    font-weight:normal;

    line-height:1.2;

    color:#67707a;
}

#nav ul li a:hover {
  background: #324455;
  border-radius: 4px;
}
#nav ul li#active a {
}
    
/* ========================================================================== */
/* CONTENT */
/* ========================================================================== */

/* ====================================================================== */
/* LEGACY FLOAT LAYOUT
/* Historický layout systému - zatím ponechat */
/* Budoucí kandidát pro flex/grid refactor */
/* ====================================================================== */  
.content {
  float: right; 
  padding: 0 0 0 0;
  width:570px;
  z-index: 10;
}
.content .in{
  padding: 10px 10px 10px 15px;
}
  
/* columns ----------------------------------------------------------------- */

/* ====================================================================== */
/* LEGACY FLOAT LAYOUT
/* Historický layout systému - zatím ponechat */
/* Budoucí kandidát pro flex/grid refactor */
/* ====================================================================== */ 

#panel-left { float:left; width:200px; }
.panel .in { padding: 10px; }

#panel-left span  { color: #515f6a; }

#panel-left p  { margin-top: 5px; }

/* ========================================================================== */
/* FOOTER */
/* ========================================================================== */

#footer,
#linky{
/* LEGACY clearfix utility */
    clear:both;

    margin-top:20px;

    border-top:1px solid #1a2735;

    padding:10px 3px;

    color:#a0a9b0;

    font-size:90%;
}

#footer a,
#linky a{

    color:#a0a9b0;

    text-decoration:none;
}

#linky .f-left a{

    margin-right:10px;
}

#footer p,
#linky p{
    margin:0;
    padding-top:10px;
}