/* base styles */
* { box-sizing: border-box; padding: 0; margin: 0;}

body { overflow-y: scroll; margin: unset; background-color: white; font-family: sans-serif; font-size: 100%; }
html { scroll-behavior: smooth; }
hr { width: 85%; margin: 25px auto 25px auto; padding: 0; border-style: inset; border-width: .5vw; }

#FBI { padding: 10px; }
#home { z-index: 5; position: fixed; width: 100%; margin: auto; text-align:center;  }
#logo {width: 50%; transition: 1.2s ease-in-out; }
#logo:hover {width: 65%; }
#bandimages { display: block; margin: auto; padding: 0; width: 100%; }
#pics {margin: 70px auto 20px auto; }


#ham-menu {z-index: 6; padding: 0; margin: 0; position: fixed; height: 80px; width: 90px; top: 0; right: 15px; cursor: pointer; }
#ham-menu span { height: 10px; width: 80px; border-radius: 25px; position: absolute; right: 0; 
    transition: .3s ease-in-out; }
#ham-menu span:nth-child(1) { top: 14%; background: tan; }
#ham-menu span:nth-child(2) { top: 70%; background-color: tan; }
#ham-menu span:nth-child(3) { top: 28%; background-color: green; }
#ham-menu span:nth-child(4) { top: 42%; background-color: red; }
#ham-menu span:nth-child(5) { top: 56%; background-color: #654321; }

#ham-menu.active span { background-color: red; height: .3em; width: 3em; }
#ham-menu.active span:nth-child(1) { top: 38px; transform: translate(-50%, -50%) rotate(45deg); }
#ham-menu.active span:nth-child(2) { opacity: 0; }
#ham-menu.active span:nth-child(3) { opacity: 0; }
#ham-menu.active span:nth-child(4) { opacity: 0; }
#ham-menu.active span:nth-child(5) { top: 38px; transform: translate(-50%, -50%) rotate(-45deg); }

/*
@media(max-width: 830px) { .navbar .ham-menu {display: block; } .navbar .toggle-nav { display: none; } }
*/

/* off-screen-menu  */
.off-screen-menu {
    z-index: 7;
    position: fixed;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1em 0 0 1em;
    box-shadow: inset 12px 1px 12px 1px rgba(0, 0, 255, 0.2);
    padding: 15px;
    height: auto;
    max-height: calc(100vh - 90px);
    width: 150px;
    top: 70px;
    right: -150px;
    transition: right .8s ease-in-out;
}

.off-screen-menu ul { margin-top: 10px; right: 0; }
.off-screen-menu li { text-align: right; list-style: none; white-space: nowrap; }
.off-screen-menu a {font-size: clamp(18px, 1.5vw, 24px);  display: inline-block;
    text-decoration: none; white-space: nowrap; color: blue; transition: 0.2s ease-in-out; }
.off-screen-menu a img { width: 32px; }
.off-screen-menu a:hover{ color: red; transform: scale(1.05); transform-origin: right bottom;  }
.off-screen-menu.active { right: 0; }


.band { display: block; margin: auto; border: 2px solid gray; border-radius: 20%; width: 85%;}
.biohead { font-size: clamp(20px, 2.5vw, 30px); margin: auto; padding: 0; text-align: center; font-weight: bold; text-decoration: none; }
.bios { text-align: center; text-decoration: none; padding: 0; margin: auto; }
.blurb { font-size: clamp(18px, 2vw, 24px); padding: 1vw; width: 80%; margin: auto; text-align:justify; }
.bold { font-weight: bold; }
.booking { text-align: center; width: 70%; margin: auto; padding-top: 10px; font-size: clamp(18px, 2vw, 24px); text-decoration: none;}
.booking_past { opacity: 0.3; font-size: clamp(16px, 1.8vw, 22px); text-align: center; margin: auto; padding-top: 10px; text-decoration: none;}
.border_line { display: block; width: 90%; margin: 10px auto 10px auto; border-style: inset; border-width: .3.5vw; }
.credits { text-align: center; font-size: smaller; margin: 0; padding: 0; }
.heading { text-decoration: underline; text-align: center; margin: auto; padding-top: 25px; font-weight: bold; font-size: clamp(24px, 3vw, 36px); }
.subheading { width: 100%; text-decoration: none; text-align: center; margin: 10px auto 5px auto; padding: 0; font-size: clamp(18px, 2vw, 24px); }
.iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
.shows { display: block; width: 70%; margin: auto; border-style: inset; border-width: .3vw;}
table { width: 95%; margin: auto; text-decoration: none; font-size: clamp(16px, 1.8vw, 22px); } 
table tr { vertical-align: bottom; }
table td { border-color: silver; border-style: solid; border-width: thin;  }
.privacy 
{ text-align: justify; background-color: #ffffff; color: gray; font-size: 12px; margin-top: 5px; margin-bottom: 5px; margin-left: auto;  margin-right: auto; padding: 10px; border: 2px dotted; width: 80%; }
.stretch { margin: 0; padding: 0; }
.stretchIt { margin: auto; max-width: 80%; max-height: 80%; min-height: 10%; min-width: 10%; padding: 0; }
.stretchIt2 { max-width: 30%; max-height: 30%; margin: auto; padding: 0; }
.videos { width: 90%; margin: auto; }
.vidcontainer { position: relative; margin: auto; overflow: hidden; width: 80%; padding-top: 56.25%; }

/* 
box-shadow: 1px 1px 1px 1px #888888; background: rgba(255, 255, 255, 0.4); 
.navbar ul { position: relative; padding: unset; white-space: nowrap; list-style: none;  }
.navbar ul li { display: flex; justify-content: left; transition: .5s ease-in-out;  }
.navbar ul li a.home:hover {transform-origin: left top; transform: scale(1.4); }
.navbar a.home:hover {transform-origin: left top; transform: scale(1.4); }
nav { display: flex; position: fixed; padding: 0; margin: 0; height: 80px; width: 100%; justify-content: space-between; align-items: center; } 

.navbar {justify-content: space-between; width: 100%; background: rgba(255, 255, 255, 0.4); box-shadow: 1px 1px 1px 1px #888888;}
.navbar ul { display: flex; padding: unset; white-space: nowrap; list-style: none;  }
.navbar a { display: inline-block; color: inherit; text-decoration: none; }
.navbar a:hover { color: blue; text-decoration: underline; transform: scale(1.22); transition: .5s ease-out;}
.navbar a.home { padding: unset; align-items: center; margin: auto; }
.navbar a.home:hover {transform-origin: left top; transform: scale(1.5); }
.navbar .toggle-nav{ display: flex; justify-content: space-around; align-items: center; }
.navbar .toggle-nav li { margin: 8px; padding: unset; }
*/