body,
html {
    background-color: #F3F2F3;
    margin: 0;
    color: #666;
    font-size: 15px;
		font-family: "Open Sans", sans-serif;
    padding: 0;
    height: 100%;
}

img,
object,
embed {max-width: 100%;}

	/* HEADER with IMAGE
	
#header-portrait {
    width: 100%;
    height: 65px;
  background-image: url("images/laser-purple-header.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  flex: 2;
}
*/
	/* HEADER */
	
#header-portrait {
    width: 100%;
    height: 65px;
  background-color: #cc3600;
}

#header-portrait A:link {
    color: #FFF;
    text-decoration: none;
}

.banner {
    color: #FFF;
    font-size: 26px;
    font-family: Nunito;
    margin: 0px 20px 20px 15px;
    text-decoration: none;
  line-height: 2.5;
  text-transform: lowercase;
}

	/* MENU */
	
#menu-landscape{display: none;}
#upcoming{display: none;}
#header-landscape{display: none;}
.button-placeholder{display: none;}
.book-placeholder{display: none;}

#menu-portrait{
    width: 100%;
    background:#cc3600;
    position: fixed;
    z-index: 100;
    bottom:0px;
    margin: 5px auto 5px auto;
}

#menu-portrait A:link {color: #FFFFFF;}

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

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

.hamburger-menu {
    list-style-type: none;
    font-size: 18px;
    font-family: Nunito;
    margin: 5px 20px 0 -25px;
    text-transform: lowercase;	}	

.hamburger-menu-r {
    list-style-type: none;
    font-size: 18px;
    font-family: Nunito;
    margin: 5px 20px 0 -25px;
    float: right;
    text-transform: lowercase;	}	

.hamburger-menu A:visited {color: #FFFFFF;}
.hamburger-menu-r A:visited {color: #FFFFFF;}

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


.logo-portrait A:visited {color: #FFFFFF;}

	/* MAIN */

#main{
    width: 100%;    
    background:#F3F2F3;   
    margin: 0;
}

#content3 {width: 100%; margin: 0; padding: 0;}

.margin {
    color: #666;
    margin: 10px 15px;
    text-align: justify;
}

.margin-left {
    color: #666;
    margin: 0px 10px 15px 15px;
    text-align: left;
}

.margin2 {margin: 0 25px 15px 0;}	

.margin3 {
    color: #26327A;
    margin: 10px 15px;
    text-align: left;
}

.page-title {
    color: #26327A;
    margin: 20px 15px 0px 15px;
    text-align: left;
    font-size: 20px;
		font-family: "Open Sans", sans-serif;
  text-transform: lowercase;
}

    /* this is to align the noxioussector css w/ my site: banner2 is the same as page-title */

.banner2 {
    color: #26327A;
    margin: 20px 15px 0px 15px;
    text-align: left;
    font-size: 20px;
		font-family: "Open Sans", sans-serif;
  text-transform: lowercase;
}


A:link {color: #26327A; text-decoration: none;}
A:hover, A:active {color: #999; text-decoration: none;}
A:visited {color: #26327A; text-decoration: none;}

.photo {width: 100%;}	

.book {
    max-width: 45%;
    float: left;	
    margin-right: 15px;
    border: 1px solid #CCCCCC;
}
.book2 {
    width: 45%;
    float: left;	
    margin-right: 15px;
    border: 1px solid #CCCCCC;
}

.response {
    width: 48%; 
    float: left;
    border: 1px solid #000000;
    margin: 2px 2px 2px 2px;
}

.responseM {
    width: 46%; 
    float: left;
    margin: 5px 5px 10px 5px;
}

.responseMimg {
    width: 100%; 
    float: left;
    border: 1px solid #000000;
    margin: 0px 0px 5px 10px;
}

.profile {
    border: 1px solid #CCCCCC;
    width: 100%;
    margin-top: 15px;
}
.profile2 {
    border: 1px solid #CCCCCC;
    width: 100%;
}

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

.book-title {
    color: #26327A;
    margin: 0px 15px 10px 10px;
    text-align: left;
    font-size: 18px;
    line-height: 1;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.video-cover {
    display: flex;
    flex-wrap: wrap;
  height: 200px;
  flex-grow: 2;
  min-height: 100%;
  width: 100%;
  object-fit: cover;
    border-radius: 10px;
    border: 1px solid #CCCCCC;
}

.profile-bio {
    display: flex;
    flex-wrap: wrap;
  height: 300px;
  flex-grow: 2;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
}

.profile-index {
    display: flex;
    flex-wrap: wrap;
  height: 300px;
  flex-grow: 2;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
}

    /* CSS for BAT VIDEOS */

video.float {
    width: 100%; 
    border: 1px solid #CCCCCC;
    float: left; 
    margin: 0 0px 15px 0px;
}  


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

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

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

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

iframe.damme {
  height: 100%;
  width: 100%;
  min-width: 100%;
  vertical-align: bottom;
    border-radius: 10px;
    border: 1px solid #ccc;
}

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

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


    /* CSS for FLEX MENU BUTTONS TRIAL */

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

li.button {
  height: 180px;
  width: 40%;
  flex-grow: 1;
  padding: 5px;
  position: relative;
}

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

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

div.button {
  position: absolute;
  bottom: 4px;
  left: 5px;
  background: rgb(0, 0, 0, 0.6) /* Black background with 50% opacity */;
  width: 96%;
  height: 50px;
    border-radius: 10px;
}

div.button-last {
  position: absolute;
  bottom: 4px;
  left: 5px;
  background: rgb(0, 0, 0, 0.6) /* Purple background with 50% opacity */;
  width: 48%;
  height: 50px;
    border-radius: 10px;
}

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;
  line-height: 1.2;
}

p.button2 {
  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;
  line-height: 2.5;
}

div.arrow {
  position: absolute;
  bottom: 4px;
  left: 5px;
  background: rgb(0, 0, 0, 0.4) /* Black background with 50% opacity */;
  width: 96%;
  height: 100px;
    border-radius: 10px;
}

li.arrow {
  height: 100px;
  width: 40%;
  flex-grow: 1;
  padding: 5px;
  position: relative;
}

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

p.arrow {
  color: white;
    text-align: center;
    font-family: Gill Sans, sans-serif;
     font-size: 60px;
padding-left: 10px;
  padding-right: 10px;
    margin: 5px 0px 0px 0px;
  line-height: 0.8;
}

    /* CSS for BIO IMAGE */
    
ul.bio {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none; 
    padding: 5px;
}

li.bio {
  height: 350px;
  flex-grow: 2;
    padding: 2px;
}

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

    /* CSS for FLEX BOOK BUTTONS TRIAL */

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

li.book-menu {
  width: 40%;
  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;
}

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