body{
  padding: 0px;
  margin: 0px;

  width: 100%;
  height: 100%;

  scroll-behavior: smooth;

  background: linear-gradient(#2184C3, #003050);
  background-attachment:fixed;
} 

/**
 * Font
 */
@font-face{
  font-family: 'perpetua';
  src: url('../images/asdfgh.eot') format('embedded-opentype'), 
       url('../images/asdfgh.ttf') format('truetype');
}

/**
 * Menu
 */
#zaf_menu{
  position: fixed;
  
  top: 0px;
  left: 0px;
  right: 0px;
  
  z-index: 2;
}

/**
 * These properties are only for non mobile displays
 */
@media (min-width: 800px){
  #zaf_menu{
    text-align: center;
  }
  
  #zaf_menu > img{
    position:absolute;
  
    width: 300px;
    
    display: inline-block;
    
    vertical-align: top;
    
    margin-right: 50px;
  }

  #zaf_menu_items{
    display: inline-block;
    
    padding-left: 350px;
    
    vertical-align: top;
    
    width: 100%;
    max-width: 800px;
  }

  #zaf_menu_items ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  
    list-style-type: none;
  
    margin: 0px;
    padding: 0px;
  }

#zaf_menu_items ul li{
  position: relative;

  display: inline-block;
  
  background: white;
  color: black;
  
  font-family: perpetua;
  font-size: 13pt;
  
  height: 20px;
  
  margin: 3px;
  margin-top: 0px;
  
  padding: 6px;
  padding-bottom: 0px;
}

#zaf_menu_items ul li:after{
  position: absolute;
  
  left: 0px;
  right: 0px;
  bottom: -6px;
  
  height: 6px;
  
  content: '';
  
  background: white;
}

#zaf_menu_items ul .current:after{
  background: #C9AA00 !important;
}

#zaf_menu_items ul li a{
  text-transform: uppercase;

  text-decoration: none;
  
  color: black;
  
  font-family: perpetua;
}
}

/**
 * Deep menu not supported
 */
#zaf_menu_items ul li ul{
  display: none;
}

/**
 * Menu mobile
 */
#menu_ham{
  position: relative;
}

#menu_ham > span{
  display: none,
}

#menu_ham > input{
  display: none;
}

/**
 * Content
 */
#zaf_content_container{
  position: relative;
  left: 175px;

  box-sizing: border-box;

  width: 900px;
  
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

.zaf_content{
    background: #BEDCF0;
    
    padding: 50px;
    padding-top: 30px;
}

.multicontent{
    margin-top: 35vh;
    padding-top: 15vh;
    
    min-height: 55vh;
}

/**
 * Small displays
 */
@media (max-width: 1300px){
    #zaf_menu > img{
      display: none;
    }
    
    #zaf_content_container{
      left: 0px;
    
      width: 100%;
      
      max-width: 900px;
    }
    
    #zaf_menu_items{
      padding-left: 0px;
    }
}

/**
 * Even smaller
 */
@media (max-width: 800px){
    #zaf_menu{
      background: white;
      
      height: 50px;
    }
    
    .zaf_content{
      padding-left: 5px;
      padding-right: 5px;
    }
    
    
    #menu_ham{
      display: block;
      position: relative;
      
      margin-top: 13px;
      margin-left: 13px;
  
      -webkit-user-select: none;
      user-select: none;
      
      z-index: 1;
    }

    #menu_ham span{
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      
      background: black;
      border-radius: 3px;
      
      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;
    }

    #menu_ham span:first-child{
      transform-origin: 0% 0%;
    }

    #menu_ham span:nth-last-child(2){
      transform-origin: 0% 100%;
    }

    #menu_ham input:checked ~ span{
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }

    #menu_ham input:checked ~ span:nth-last-child(3){
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }

    #menu_ham input:checked ~ span:nth-last-child(2){
      transform: rotate(-45deg) translate(0, -1px);
    }
    
    #menu_ham input{
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
  
      cursor: pointer;
      opacity: 0;
      z-index: 2;
    }
    
    #menu_ham input ~ ul{
      display: none;
    }
    
    #menu_ham input:checked ~ ul{
      display: block;
    }
    
    #menu_ham ul{
      position: fixed;
      
      list-style-type: none;
      
      margin: 0px;
      padding: 0px;
    
      background: white;
      
      display: flex;
      flex-direction: column;
      
      top: 50px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }
    
    #menu_ham ul li{
      padding-left: 15%;
      
      padding-top: 4%;
      padding-bottom: 4%;
      
      border-style: none;
      border-top-style: solid;
      border-color: black;
      border-width: 2px;
    }
    
    #menu_ham ul li a{
      text-decoration: none;
      
      font-size: 20pt;
      
      color: black;
      
      font-family: perpetua;
    }
}

/**
 * Footer
 */
#zaf_footer{
    height: 100px;
}

/**
 * Login
 */
.login{
    
}

.login fieldset, .reset fieldset, .remind fieldset{
    border-style: none;
}

.login, .reset, .remind{
    padding: 10px;
    
    background: #BEDCF0;
}

.login form, .reset form, .remind form{
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.reset form, .remind form{
    width: 600px !important;
}

.login form fieldset div, .reset form fieldset div, .remind form fieldset div{
    margin: 5px;
}

.login input, .reset input, .remind input{
    box-sizing: border-box;
    
    border-style: solid;
    border-width: 1px;
    border-color: white;
    
    padding: 10px;
    
    background: white;
    color: black;
    
    width: 100%;
}

.login .invalid, .reset .invalid, .remind .invalid{
    border-color: red !important;
}

.login .controls button{
    width: 100%;
}

.login + div{
    background: #BEDCF0;
}

.login + div ul{
    text-decoration: none;
    list-style-type: none;
    
    text-align: center;
}

.login + div ul li{
    display: inline-block;
    
    padding: 10px;
}

.item-page .icons, .items-leading .icons, .blog .icons{
    display: none;
}

/**
 * Internal
 */
.blog{
    background: #BEDCF0;
    
    padding: 20px;
}

.items-leading > div{
    position: relative;
    
    box-sizing: border-box;
    
    border-style: solid;
    border-width: 1px;
    border-color: black;
    
    padding: 10px;
    
    height: 200px;
    
    overflow: hidden;
    
    margin-top: 20px;
}

.items-leading .page-header{
    margin-left: 210px;
}

.items-leading .item-image{
    position: absolute;
    
    top: 0px;
    left: 0px;
    
    width: 200px;
    height: 200px;
    
    overflow: hidden;
}

.items-leading .item-image img{
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.item-page{
    background: #BEDCF0;
    padding: 30px;
}

.item-page-clean{
    background: transparent !important;
    padding: 0px !important;
}

.items-leading > div h2{
    padding: 0px;
    margin: 0px;
}

.items-leading > div h2 a{
    text-decoration: none;
    color: black;
}

.items-leading > div p{
    padding: 0px;
    margin: 5px;
    margin-left: 210px;
}

.items-leading > div:nth-child(2n + 1){
    background: #98C0DB;
}

.items-leading > div:nth-child(2n + 2){
    background: #BEDCF0;
}

/*
 * No image in mobile view
 */
@media (max-width: 800px){
    .items-leading .item-image{
        display: none;
    }
    
    .items-leading > div p{
        margin-left: 5px !important;
    }
    
    .items-leading .page-header{
        margin-left: 0px !important;
    }
}

/**
 * Homepage, misc
 */
#intro{
    font-family: perpetua;
    color: white;
}

#intro > div{
    text-align: center;
    margin-top: 15px;
}

#intro > div:nth-child(4n+1){
    font-size: 36pt;
    letter-spacing: 3px;
}

#intro > div:nth-child(4n+2){
    font-size: 34pt;
    letter-spacing: 3px;
}

#intro > div:nth-child(4n+3){
    font-size: 29pt;
    letter-spacing: 2px;
}

#intro > div:nth-child(4n+4){
    font-size: 20pt;
}

@media (max-width: 800px){
    #intro > div:nth-child(4n+1){
        font-size: 30pt;
        letter-spacing: 3px;
    }
    
    #intro > div:nth-child(4n+2){
        font-size: 30pt;
        letter-spacing: 3px;
    }
}