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

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

.banner A:link {color: #FFF;}
.banner A:visited {color: #FFF;}
.banner A:hover, A:active {color: #CCC;}

.banner-menu {
    color: #FFF;
    font-size: 18px;
    font-family: Nunito;
    text-decoration: none;
    float:right;
    margin: -55px 30px 0px 0px;
    text-transform: lowercase;
    line-height: 2;
    }

.banner-menu A:link {color: #FFF;}
.banner-menu A:visited {color: #FFF;}
.banner-menu A:hover, A:active {color: #CCC;}



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

#main {
    background-color: #F3F2F3;
    margin: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 90%;
}

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

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

    /* HEADER with IMAGE

#header-landscape {
    width: 100%;
    height: 65px;
    margin: 0;
  background-image: url("images/laser-purple-header.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  flex: 2;
}

 */
#header-landscape {
    width: 100%;
    height: 65px;
    margin: 0;
  background-color: #cc3600;
  flex: 2;
}

#menu-portrait {display:none;}
#header-portrait {display:none;}

#content3 {
    background-color: #F3F2F3;
    width: 800px;
}

.margin {
    color: #666666;
    margin: 10px 15px;
    text-align: justify;
    font-size: 15px;
	font-family: "Open Sans", sans-serif;
    line-height: 1.5;
}

.margin-left {
    color: #666666;
    margin: 10px 15px;
    text-align: left;
    font-size: 15px;
	font-family: "Open Sans", sans-serif;
    line-height: 1.5;
}

.margin A:link {color: #26327A;}
.margin A:active {color: #26327A; text-decoration: none;}
.margin A:visited {color: #26327A; text-decoration: none;}

.page-title {
    color: #26327A;
    margin: 10px 15px;
    text-align: left;
    font-size: 18px;
	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: 10px 15px;
    text-align: left;
    font-size: 18px;
		font-family: "Open Sans", sans-serif;
    text-transform: lowercase;
}

hr {
    color: #CCCCCC;
    height: 0;
    padding: 0;
    width: 80%;
}

.profile-bio {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #CCCCCC;
    width: 50%;
  height: 400px;
  object-fit: cover;
    float: left;
	margin-right: 15px;
    border-radius: 10px;
	margin-bottom: 20px;
}

.profile-index {
    display: flex;
    flex-wrap: wrap;
  height: 400px;
  width: 350px;
  flex-grow: 2;
      float: left;
  object-fit: cover;
 	margin-right: 15px;
 vertical-align: bottom;
    border-radius: 10px;
}

.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: "Open Sans", sans-serif;
}

    /* 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: 30vh;
  flex-grow: 1;
    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 #CCCCCC;
}

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

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


    /* 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-placeholder {
  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: 100%;
  object-fit: cover;
  vertical-align: bottom;
    border-radius: 10px;
border: 1px solid #999    
}

div.button {
  position: absolute;
  bottom: 2px;
  left: 4px;
  background: rgb(33, 33, 33, 0.5) /* Dark Grey background with 40% opacity */;
  width: 97%;
  height: 50px;
    border-radius: 10px;
border: 0px solid #999    
}

div.button-last {
  position: absolute;
  bottom: 2px;
  left: 4px;
  background: rgb(33, 33, 33, 0.5) /* Dark Grey background with 40% opacity */;
  width: 97%;
  height: 50px;
    border-radius: 10px;
border: 0px solid #999    
}

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

p.button2 {
  color: white;
    text-align: center;
    font-family: Nunito;
 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: 98%;
  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: Nunito;
     font-size: 60px;
padding-left: 10px;
  padding-right: 10px;
    margin: 5px 0px 0px 0px;
  line-height: 0.8;
}


    /* CSS for FLEX BOOK BUTTONS TRIAL */

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

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

li.book-placeholder {
  width: 22%;
  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: Nunito;
 padding-left: 10px;
  padding-right: 10px;
    margin: 5px 0px 0px 0px;
  text-transform: uppercase;
}

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