/* apply a natural box layout model to all elements, but allowing components to change */
html                 { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

@font-face{
    font-family: 'Special Elite';
    src: url('/assets/fonts/SpecialElite-Regular.ttf') format('truetype');
}

body {
    font-family: Helvetica Neue, Helvetica, Arial, non-serif;
    display: flex;
    flex-direction: column;
    color:#666;
}

@media (min-width: 600px) {
    body {
        margin-left:70px;
    }
}

.responsive-image {
    width:100%;
    height:auto;
}

.gallery {
   column-count: 4;
   column-gap: 1em;
}

.row.gallery-headline {
    margin-bottom:0px;
}

/*@media (max-width: 768px) {
    .gallery {
       column-count: 3;
    }
}
*/
@media (max-width: 480px) {
    .gallery {
       column-count: 2;
    }
}

.gallery a {
    margin: 0 0 1em;
    padding:0;
    line-height:0;
    display:block;
    overflow: hidden;
    -webkit-column-break-inside: avoid;
                page-break-inside: avoid;
                    break-inside: avoid;
}

.gallery a figure {
    margin-bottom: 0px;
}


h1,h2,h3,h4,h5,h6 {
        color:#111;
        margin-top:0px;
}

h1 {
    font-family: Special Elite, Courier, Helvetica Neue, Helvetica, Arial, non-serif;
}

h2 {
    font-family: Special Elite, Courier, Helvetica Neue, Helvetica, Arial, non-serif;
}

blockquote {
    font-family: Special Elite, Courier, Helvetica Neue, Helvetica, Arial, non-serif;
    font-size:24px;
    color:black;
    line-height:1.4;
}



@media (min-width: 600px) {
blockquote.hero {
    font-size:32px;
}
}

cite {
    font-size:14px;
    font-family:Helvetica;
    display:block;
}
cite:before {
    content:'– ';
    margin-left:20px;
}

#mylightbox {
    display:none;
}

ul {
    margin:0;
    padding:0 0 0 15px;
}

ul li {
    padding-bottom:5px;
}

a {
    color:#c48375;
}

article {
    margin-bottom:50px;
}

article h2{
    margin-bottom:0px;
}

article div.source {
    border-bottom:1px dashed #111;
    margin-bottom:20px;
    display:inline-block;
}
article time {
    background:black;
    color:white;
    padding:0px 4px;
}

article.book {
    display:flex;
}

article.book figure {
    width:30%;
    margin-right:20px;
    min-width:200px;

}
article.book figure img {
        box-shadow: 0px 0px 5px #333;
    border-radius:3px;
    border:1px solid #666;
    max-width:100%;
}
.margin-animation {
    position: fixed;
    top:0; left:0;
    height:30px;
    background-image:url(/assets/img/mobile-margin.png);
    width:100%;
}

.col article p {
    margin-bottom:5px;
}

@media (min-width: 600px) {
.margin-animation {
    position: fixed;
    top:0; left:0; bottom:0px;
    width:30px;
    height:100%;
    background-image:url(/assets/img/animation-bg.png);
}
    .index-alt .margin-animation {
        width:100%;
        z-index:-9;
        left:40px;
    }

}





    p {
        margin-top:0px;
        color:#666;
        line-height:1.3em;
    }

header {
    padding:0px 10px 40px 10px;
}





.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom:40px;
    flex-direction: column;
    justify-content: flex-start;
}

.row .row {
    margin-left:-15px;
    margin-right:-15px;
}


@media (min-width: 768px) {
    .row {
        flex-direction:row;
    }
}
.col {
  flex: 0 1 100%;
    margin:0 15px;
  max-width: 100%;
      flex:1;

}

@media (min-width: 790px) {
  .col {
    flex: 1;
  }
}

@media (max-width: 480px) {
    article.book {
        flex-direction:column;
    }

    article.book figure {
        min-width:150px;
        width:25%;
        margin-bottom:20px;
    }
}



.col p {
    margin-bottom:40px;
}

hr {
    border:1px solid #b8c8d0;
    max-width:50%;
    margin:50px auto;
}

#Logo {
    font-family: Special Elite, Courier, Helvetica Neue, Helvetica, Arial, non-serif;
    color:#111;
        font-size:28px;

    text-decoration:none;
    display:block;
    margin-top:60px;


}

@media (min-width: 600px) {
#Logo {
    margin-left:18%;
    margin-bottom:50px;
    font-size:32px;

}
}

#Logo span {
    font-size:0.5em;
    padding-bottom:20px;
    position: absolute;
    padding-left:10px;
}
.subtitle span {
    font-size:0.5em;
    padding-bottom:20px;
    position: absolute;
    margin-left:-10px;
}

.subtitle {
    font-family: Special Elite, Courier, Helvetica Neue, Helvetica, Arial, non-serif;
    color:#111;
    font-size:14px;
    padding-left:10px;
    width: 100px;
    display: block;
}

@media (min-width: 600px) {
    .subtitle {
        width:auto;
        display:inline;
    }
}

.content-wrapper {
    display:flex;
    height:100%;
    flex-direction: column;
}

@media (min-width: 769px) {
    .content-wrapper {
        flex-direction: row;
    }
}

nav {
    flex:1;
    margin-left:15px;
    position: relative;
    margin-bottom:30px;
    z-index: 999;
}


.menu-items {
    padding:20px 200px 20px 0px;

    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.menu-items::-webkit-scrollbar {
  display: none; }

.menu-items a{
    margin-right:20px;
}

main {
    flex:4;
    max-width:800px;
}

footer {
    background:#EEE;
}


@media (min-width: 769px) {
    nav {
        max-width:250px;
        min-width:180px;
    }
    nav#Menu {
        height:unset;
        width:unset;
        position: unset;

        display:flex;
        flex-direction: column;
    }

    nav#Menu a{
        color:#2b334d;
        display:block;
        text-decoration:none;

    }
    .menu-items {
        height:auto;
        position: fixed;
        top: 200px;
        bottom: 10px;
        display: flex;
        flex-direction: column;
    }
}


.col figure {
    margin:0;
    margin-bottom:40px;
}

.col figure img {
        max-width:100%;
}


@media (min-width: 600px) {
    .menu-items > li.meta-menu {
        margin-top: auto;
    }

    .menu-items > li.meta-menu ~ li.meta-menu {
        margin-top: 0;
    }
}

.col ul {
    margin-bottom:40px;
}

.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {

}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}


/* right nav */

@media screen and (min-width: 769px) {
    nav#Menu .menu-items a {
        margin-bottom:10px;
    }
}

nav#Menu .menu-items li.active a {
    font-weight:bold;
    text-decoration:underline ;
    text-decoration-style: dotted;
}

@media screen and (max-width: 768px) {
    .nav {
        position: relative;
        min-height: 40px;

    }

    .hamburger {
        position: relative;
        float:left;
        padding:5px 0px 0px 7px;
    }
    
    .nav .hamburger span
    {
      display: block;
      width: 22px;
      height: 3px;
      margin-bottom: 3px;
      position: relative;
    
      background: #cdcdcd;
      border-radius: 3px;
    
      z-index: 1;
    
      transform-origin: 4px 0px;
    
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
    
    .nav .hamburger span:first-child
    {
      transform-origin: 0% 0%;
    }
    
    .nav .hamburger span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }

    .nav ul {
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        background:#FFF;
        border: dotted 1px #111;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
        overflow: hidden;
    }
    .nav li {
        visibility: hidden;
        margin: 0;
        padding:0;
        height: 0px;
    }
    .nav .active {
        display: block; /* show only current <li> item */
        visibility: visible;
        height: unset;
    }
    .nav a {
        display: block;
        padding: 3px 5px 5px 38px;
        text-align: left;
    }
    .nav .active a {
        background: none;
        color: #666;
    }

    /* on nav hover */
    .nav ul:hover {
        background-image: none;
    }
    .nav ul:hover li,
    .nav ul.active li{
        display: block;
        margin: 0 0 5px;
        visibility: visible;
        height: unset;
    }
    .nav ul:hover .active {
        background: url(images/icon-check.png) no-repeat 10px 7px;
    }

    /* right nav */
    .nav.right ul {
        left: auto;
        right: 15px;
        text-align:right;
    }

    /* center nav */
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }

}


#guest-login {
  width:300px;
  border:2px dashed #000;
  padding:0 10px 10px 10px;
  box-sizing: border-box;
}

#guest-login div label {
  width:80px;
  display: inline-block;
}
#guest-login div {
  clear:both;
  padding-top:10px

}

#guest-login div input.text-field {
  width:190px;

}

#guest-login .submit-field {
  text-align:right;
}
#guest-login .submit-button {
}