:root{
    --white: #f9f9f9;
    --black: #36383F;
    --grey: #85888C;
    --greylight: #d9d9d9;
    --font-sourceseriflight: 'source_serif_prolight', Georgia, Serif;
    --font-sourceserifregular: 'source_serif_proregular', Georgia, Serif;
    --font-sourcecoderegular: 'source_code_proregular', Courier, monospace;
    --orangelight: #e7b26b;
    --orangedark: #d16530;
}

/* Fonts */
@font-face {
    font-family: 'bebit';
    src: url('font/Bebit.woff2') format('woff2'),
         url('font/Bebit.woff') format('woff');
}

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

a{
    text-decoration: none;
    color: var(--orangedark);
}

a:hover {
    opacity:0.75;
}

ul{
    list-style: none;
}

/* Page */
body{
font-family: "Helvetica Neue", sans-serif;
background-color: var(--white);
}

@media screen and (min-width: 1000px) {
    .viewcontainer {
      margin:auto;
      max-width:1000px;
    };
}  

p {
    line-height:1.2rem;
    margin-bottom:1.2rem;
}

p.spaceaftercollapse {
    margin-bottom:0;
}

/* Print styles */
@media print {
    body {
      background-color: #fff !important;
      color: black !important;
    }
    div.name p {
      font-size: 10pt !important;
    }
  
    div.ContainerLeft div.content p, div.ContainerRight div.content p {
        font-size: 12pt !important;
        line-height: 14pt !important;
    }
  
    div.ContainerRight, div.ContainerLeft {
        page-break-inside: avoid;
  }
  
    .footer {
    display:none !important;
  }

  }


/* Footer */
.footer {
    bottom: 0;
    width: 100%;
    background-color: var(--black);
    left: 0;
    display:inline-block;
    color: white;
}


/* Header */
.header{
    top: 0;
    width: 100%;
    height: 75px;
    background-color:var(--greylight);
    left: 0;
}

.logo{
    font-size: 40px;
    margin-top: 10px;
    margin-left: 20px;
    font-family: bebit;
    color: var(--grey);
    float:left;
    display:inherit;
}

a.logo:hover, a.button:hover {
    background: -webkit-linear-gradient(right, var(--orangelight), var(--orangedark));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--orangelight);
    opacity:1;   
}

.button {
    font-size: 40px;
    margin-top:10px;
    margin-right: 20px;
    font-family: bebit;
    color: var(--grey);
    float: right;
}


/* Home Page */
div.logoband {
    width: 500px;
    padding:20px;
    float:left;
    clear:both;
}

img.hometitle {
    width:100%;
    max-width:400px;
}

h1 {
    font-size: 30px;
    text-transform:uppercase;
    color:var(--orangedark)
}

h2 {
    font-size: 20px;
    text-transform:uppercase;
    padding-bottom:10px;
}

h2.pill {
    font-size: 20px;
    text-transform:none;
    padding-bottom:0;
}

h3 {
    font-size: 18px;
}

div.ContainerHomeLeft {
    float: left;
    width: 41.5%;
    clear: both;
    padding: 20px;
}

div.ContainerHomeRight {
    float: right;
    width: 58.5%;
    clear:right;
    padding:20px;
}

section.spacer {
    float:left;
    height:2rem;
    width:100%;
}


/* Lustre Pill Code */
.lustrepill {
    border-radius: 3em;
    display: flex;
    justify-content: left;
    align-items: center;
    gap:10px;
    padding:12.5px;
    background: linear-gradient(to left, var(--greylight), var(--grey));
    -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1);
    -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1);
    box-shadow:0px 0px 15px rgba(100, 100, 100, .1);
    margin-bottom: 0.5em;
}

a.lustrepilllink {
    text-decoration: none;
    color: inherit;
}

a.lustrepilllink :hover {
    opacity:0.75 !important;
}

.lustrepillimage, .lustrepillimageplaceholder {
    height:3em;
    flex-shrink:0;
}

.lustrepillimageplaceholder {
    height:4em;
    width:4em;
    background: linear-gradient(to right, var(--greylight), var(--grey));
    -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1);
    -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1);
    box-shadow:0px 0px 15px rgba(100, 100, 100, .1);
    border-radius:50%;
}

.lustrepilltext span {
    font-weight:300;
}

/* About Page */

h1.title {
    font-size:60px;
}

div.LustreAboutPeople {
    padding-bottom:1rem;
}

div.LustreAboutPeople img {
    float:left;
    width:120px;
    padding-right:20px;
}

div.LustreAboutPeople p {
    overflow:hidden;
}

section.AboutQuestions ul {
    list-style-type: disc;
    margin-left:20px;
  }

section.AboutQuestions ul li p {
    margin-bottom:0.5rem;
  }



/* Transcript */
div.timecode {
    display:none;
}

div.ContainerFullWidth {
    width:100%;
    float:left;
    clear:both;
    padding:20px;
}

div.ContainerLeft, div.ContainerFlex{
    float: left;
    width: 41.5%;
    clear: both;
    padding: 20px;
}

div.ContainerRight {
    float: right;
    width: 58.5%;
    clear:both;
    padding:20px;
}

div.ContainerDividedLeft {
    float: left;
    width:41.5%;
    clear: both;
    padding:20px;
}

div.ContainerDividedRight {
    float: right;
    width:58.5%;
    clear: both;
    padding:20px;
}

@media only screen and (max-width: 750px) {

   div.ContainerFlex {
        width:100%;
    }
    
    div.ContainerLeft, div.ContainerRight {
        width:50%
    }

    div.timecode {
        margin:auto;
    }

    div.question p, div.transcriptsection p {
        text-align:left !important;
    } 

    div.ContainerDividedLeft {
        width: 100%;
        padding:20px;
    }
    
    div.ContainerDividedRight {
        width:100%;
        padding:20px;
    }

    div.ContainerHomeLeft, div.ContainerHomeRight {
        float:none;
        width:100%;
    }
}

/* Make the titlecard above each transcript */ 
div.LustreTitleCard {
    background-color:var(--greylight);
    border-radius: 50px;
    padding: 30px;
    box-shadow:0px 0px 15px rgba(100, 100, 100, .1);
    
}

ul.transcriptcontents, ul.transcriptversionhistory {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:hidden
}

ul.transcriptcontents li, ul.transcriptversionhistory li {
    text-align: left;
    text-indent: -90px;
    margin-left:90px
}

ul.transcriptcontents li a.transcriptquestion {
    font-weight:bolder
}

ul.transcriptcontents li a.transcriptquestion::after {
    content: "?"
}

ul.transcriptcontents span.timecode {
    display:none;
}

ul.transcriptcontents span.timecode, ul.transcriptversionhistory span.datecode {
    color: var(--grey);
    padding-right:5px
}

ul.transcriptcontents span.timecode::after, ul.transcriptversionhistory span.datecode::after {
    content: ")"
}

ul.transcriptcontents span.timecode::before, ul.transcriptversionhistory span.datecode::before {
    content: " ("
}

#transcript a[href^="http"] {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px dashed var(--black);
}

#transcript a[href^="http"]:hover {
    border-bottom: 1px solid var(--black);
}

#transcript a[href^="/"] {
    color: var(--orangedark) !important;
    font-weight: bolder;
    border-bottom: 1px dashed var(--orangedark);
    text-decoration: none
}

#transcript a[href^="/"]:hover {
    border-bottom:1px solid var(--orangedark);
}

mark {
    background-color: var(--orangelight);
    padding:2px;
    border-radius:5px;
}

span.quote1, span.quote2 {
    font-style: italic;
    background-color: var(--greylight);
    padding:2px;
    border-radius:5px;
}

span.quote2 {
    background-color: var(--grey);
    padding:2px;
    border-radius:5px;
}


/* Format name */
div.name p {
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 4px;
    color: var(--black);
}

div.ContainerLeft div.name p {
    text-align: right;
    font-weight:600
}

div.ContainerRight div.name p {
    text-align: left;
    font-weight:600
}

/* Format Body Text */
div.ContainerLeft div.content p {
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height:1.5em
}

div.ContainerRight div.content p {
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height:1.5em
}


/* Section and Question Dividers */
div.ContainerFlex div.question {
    background: linear-gradient(to right, var(--orangelight), var(--orangedark));
    border-radius: 50px;
    -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1) !important;
    box-shadow: 0px 0px 15px rgba(100, 100, 100, .1) !important;
    z-index:10000
}

div.ContainerFlex div.transcriptsection {
    background: linear-gradient(to right, var(--greylight), var(--grey));
    border-radius: 50px;
    -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, .1) !important;
    box-shadow: 0px 0px 15px rgba(100, 100, 100, .1) !important;
    z-index:10000
}

div.ContainerFlex div.question p, div.ContainerFlex div.transcriptsection p {
    text-align: right;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding:25px
}

div.question a, div.transcriptsection a {
    color: var(--grey);
    float: right;
    text-decoration: none;
    font-size:1.5em
}

div.question a:hover::before, div.transcriptsection a:hover::before {
    color: var(--black)
}

div.question a:hover, div.transcriptsection a:hover {
    color:var(--black)
}

div.transcriptquestion:target {
    content: "   ";
    padding-top: 100px;
    border-top:100px solid rgba(255, 255, 255, 0)
}

ul.transcriptcontents {
    padding-top:10px;
}
/* END Section and Question Dividers*/


/* Image Avatars */
img.avatars {
    height: 100px;
    display: block;
    position: relative;
    padding-bottom:10px
}

.ContainerLeft img.avatars {
    float: right;
    padding-left: 100%;
    margin-right: -70px;
}

.ContainerRight img.avatars {
    float: left;
    padding-right: 100%;
    margin-left: -70px
}
/* END Image Avatars */

/* Profile Page */
img.profilepage {
    padding:10px;
    height:200px;
    margin:auto;
}