body,
html {
    background-color: #000;
    margin: 0;
    color: #FBFCFC;
    font-size: 16px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0;
    height: 100%;

}

#main{
    margin: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#content {width: 800px; margin: 0; padding: 0;}

.margin {
    color: #FBFCFC;
    margin: 10px 15px;
    text-align: justify;
    font-size: 16px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.margin  A:link {color: #F7DC6F; text-decoration: none;
}
.margin  A:visited, A:active {
    color: #85C1E9;
    text-decoration: none;
}

.margin-left {
    color: #FBFCFC;
    margin: 10px 15px;
    text-align: left;
    font-size: 14px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.margin-left A:link {color: #F7DC6F; text-decoration: none;
}
.margin-left A:visited, A:active {
    color: #85C1E9;
    text-decoration: none;
}

.page-title {
    color: #F7DC6F;
    margin: 10px 15px;
    text-align: left;
    font-size: 22px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

.page-title A:link {color: #F7DC6F; text-decoration: none;
}
.page-title A:visited, A:active {
    color: #F7DC6F;
    text-decoration: none;
}

	/* HEADER */
	
#header-portrait{display: none;}

#header-landscape {
    width: 100%;
    height: 55px;
    background-color: #000;
    margin: 0;
}
.logo {
    float: left;
    position: relative;
    width: 250px;
}
.banner {
    color: #F7DC6F;
    font-size: 30px;
    font-family: Gill Sans, sans-serif;
    margin: 0px 0px 5px 20px;
    text-decoration: none;
}

.banner A:link, A:visited, A:active {
    color: #F7DC6F;
    text-decoration: none;
}

.banner2 {
    color: #85C1E9;
    font-size: 20px;
    font-family: Gill Sans, sans-serif;
    margin: -5px 0px 5px 20px;
}

.banner2 A:link, A:visited, A:active {
    color: #85C1E9;
    text-decoration: none;
}

.banner-menu {
    color: #FFF;
    font-size: 16px;
    font-family: Gill Sans, sans-serif;
    margin: -50px 50px 5px 20px;
    text-transform: uppercase;
    float: right;
}

.banner-menu A:link {color: #F7DC6F;}
.banner-menu A:visited {color: #F7DC6F;}
.banner-menu A:hover, A:active {color: #85C1E9;}

	/* MENU */
	
#menu-portrait{display: none;}

#menu-landscape{
    width: 100%;
    float: right;
    margin: -80px auto 5px auto;
}

#menu-landscape A:link, A:visited, A:active {
    color: #F7DC6F;
    text-decoration: none;
}

.hamburger {
    color: #F7DC6F;
    font: 32px arial;
    margin: 0px 10px;
    text-align: right;
    text-transform: uppercase;
}

.portrait {
    color: #000;
    font: 18px arial;
    margin: 10px 15px;
    text-align: justify;
    text-transform: uppercase;
}

.hamburger-menu {
    list-style-type: none;
    font-size: 20px;
    font-family: Gill Sans, sans-serif;
    margin: 5px 20px 0 -25px;
    background-color: #141D52;
    float: right;
    text-transform: lowercase;	}	

.hamburger-menu-r {
    list-style-type: none;
    font-size: 20px;
    font-family: Gill Sans, sans-serif;
    margin: 5px 20px 0 -25px;
    float: right;
    text-transform: lowercase;	}	

.logo-portrait {
    float:right;
    margin: 10px 10px 10px 0px;
    color: #000;
    font-size: 20px;
    font-family: Gill Sans, sans-serif;
    text-align: justify;
    text-transform: lowercase;
    }

    /* CSS for BOOKS PAGE from old site */

img.cover {
    width: 30%; 
    border: 1px solid #CCCCCC;
    float: left; 
    margin: 0 15px 5px 0;
}  

    /* CSS for FLEX MENU BUTTONS TRIAL */

ul.button {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none; 
    padding: 5px;
}

li.button {
  height: 200px;
  width: 23%;
  flex-grow: 1;
  padding: 4px;
  position: relative;
}

li.button-last {
  height: 200px;
  width: 200px;
  flex-grow: 1;
  padding: 4px;
  position: relative;
}

img.button {
  height: 100%;
  width: 100%;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #999    
}

img.button-last {
  height: 100%;
  width: 24%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #999    
}

div.button {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgb(33, 33, 33, 0.5) /* Dark Grey background with 40% opacity */;
  width: 99%;
  height: 50px;
}

div.button-last {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgb(33, 33, 33, 0.5) /* Dark Grey background with 40% opacity */;
  width: 24%;
  height: 50px;
}

p.button {
  color: white;
    text-align: center;
    font-family: Gill Sans, sans-serif;
 padding-left: 10px;
  padding-right: 10px;
    margin: 5px 0px 0px 0px;
  text-transform: uppercase;
}

    /* CSS for FLEX BOOK BUTTONS TRIAL */

ul.book-menu {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none; 
    padding: 5px;
}

li.book-menu {
  width: 23%;
  flex-grow: 1;
  padding: 4px;
  position: relative;
}

img.book-menu {
  height: 100%;
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #999    
}

div.book-menu-text {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgb(33, 33, 33, 0.5) /* Dark Grey background with 40% opacity */;
  width: 99%;
  height: 50px;
}

p.book-menu {
  color: white;
    text-align: center;
    font-family: Gill Sans, sans-serif;
 padding-left: 10px;
  padding-right: 10px;
    margin: 5px 0px 0px 0px;
  text-transform: uppercase;
}

.book-menu-last {
  height: 100%;
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #999    
}

li.book-menu:last-child {
  width: 23%; /* match the other items */
  flex-grow: 0; /* prevent it from growing to fill the row */
}

    /* CSS for FLEX GALLERY TRIAL */
    
ul.damme {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none; 
    padding: 5px;
}

li.damme {
  height: 30vh;
  flex-grow: 2;
    padding: 2px;
}

li.damme:last-child {
  flex-grow: 10;
}

img.damme {
  height: 100%;
  width: 100%;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #888    
}

img.damme-v {
  height: 100%;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
}


    /* CSS for BOTTOM MENU BUTTONS */

ul.bottom {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none; 
    padding: 5px;
}

li.bottom {
  height: 100px;
  width: 200px;
  flex-grow: 1;
  padding: 4px;
  position: relative;
}

img.bottom {
  height: 100%;
  width: 24%;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #999    
}

div.bottom {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgb(33, 33, 33, 0.7) /* Dark Grey background with 40% opacity */;
  width: 99%;
  height: 102px;
}

p.bottom {
  color: #F7DC6F;
    text-align: center;
    font-family: Gill Sans, sans-serif;
 padding-left: 10px;
  padding-right: 10px;
    margin: 30px 0px 0px 0px;
  text-transform: uppercase;
}