/*
  Color Palette
  #400060 - Violet
  #8000A0 - Light Violet
  #FFD700 - Gold
  #FFEB77 - Light Gold
  #FFFFFF - White
  #000000 - Black

  Fonts
  Libre Franklin 900 - Headings
  Libre Franklin 300 - Subheadings
  Quattrocento - Body Text
*/

.vsc-controller {
  display:none;
}

.blackout {
  z-index:-1;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
}

.blackout-shown {
  z-index:2;
  background-color:#000000;
  opacity:85%;
  display:block;
}

.popup {
  display:none;
}

.popup-visible {
  display:grid;
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:3;
  min-width:auto;
  min-height:auto;
  max-width:95%;
  max-height:95%;
  background-color:white;
  border: .25em solid #FFD700;
  padding:1em;
  grid-gap:1em;
}

.popup-logo {
  max-width:12.5em;
  justify-self:center;
}

.popup-header {
  font-family:'Libre Franklin',sans-serif;
  font-weight:900;
  font-size:1.75em;
  text-align:center;
  color:#400060;
  margin:0;
}

.popup-text {
  font-family:'Quattrocento',serif;
  font-size:14pt;
  margin:0 .75em;
}

.popup-text-link {
  color:#400060;
  text-decoration:none;
  font-weight:bold;
}

.popup-text-link:hover {
  color:#8000A0;
  text-decoration:underline;
}

#ides-popup {
  background-color:#000000;
  border: .25em #FF0000 solid;
}

#ides-popup>.popup-text {
  font-family:'Syne Mono', monospace;
}

.popup-text.caesar {
  color:#FFD700;
}

.popup-text.soothsayer {
  color:#FFFFFF;
}

.popup-text.cassius {
  color:#8000A0;
}

.popup-text.brutus {
  color:#8000A0;
}

.popup-button {
  border:none;
  padding:.75em;
  margin:0 10em;
  background-color:#FFD700;
  color:#400060;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:1em;
}

.popup-button:hover {
  cursor:pointer;
  background-color:#FFEB77;
}

#ides-popup>.popup-button {
  background-color:#FF0000;
  color:#000000;
  border:.1em #FF0000 solid;
  font-weight:700;
}

#ides-popup>.popup-button:hover {
  background-color:#000000;
  color:#FF0000;
  border:.1em #FF0000 solid;
}

#ides-popup>.popup-button:before {
  padding-bottom:.75em;
}

#ides-popup>.popup-button:after {
  padding-bottom:.75em;
}

.popup-disclaimer {
  font-family:'Quattrocento',serif;
  font-size:10pt;
  margin:0 .75em;
  color:#8000A0;
}

iframe {
  border:none;
}

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background-color: white;
  display:grid;
  grid-template-columns: auto 2fr auto;
  grid-template-rows: auto;
  align-items:center;
  box-shadow: 0 0 .5em #400060;
  z-index:1;
}

.header-logo-container {
  grid-column:1/2;
  margin-right:1.5em;
}

#header-logo {
  min-width:100%;
  max-width:25em;
  margin:.5em;
  padding:.35em;
}

.banner-announcement {
  grid-column:2/3;
  text-align:center;
  font-size:1.35em;
  font-family:"Libre Franklin", sans-serif;
  font-weight:700;
  background-color:#FFD700;
  padding:.5em;
  margin: .5em;
  max-width:75%;
  border-radius:.5em;
  display:none;
  justify-self:center;
}

.banner-announcement-visible {
  display:block;
}

.banner-ides {
  grid-column:2/3;
  text-align:center;
  font-size:1.35em;
  font-family:"Syne Mono", monospace;
  font-weight:700;
  background-color:black;
  color:#FFD700;
  margin: 0.5em;
  padding:0.5em;
  max-width:75%;
  border-radius:.5em;
  display:none;
  justify-self:center;
}

.banner-ides:before {
  padding-bottom:0.5em;
  color:white;
}

.banner-ides:after {
  padding-bottom:0.5em;
  color:red;
}

.banner-ides-visible {
  display:block;
}

.header-portal-container {
  grid-column:3/4;
}

.header-portal-link-container {
  margin:1em;
}

.header-portal-link {
  background-color:#400060;
  color:#FFD700;
  text-decoration:none;
  height:100%;
  padding:.75em;
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: "Libre Franklin", sans-serif;
  font-weight:900;
  font-size:15pt;
  font-variant: small-caps;
}

.header-portal-link:hover {
  background-color:#8000A0;
  text-decoration:underline;
  color:#FFD700;
}

.header-navigation-container {
  grid-row:2/3;
  grid-column:1/4;
  background-color:#400060;
}

.header-navigation {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  font-family: "Libre Franklin", sans-serif;
  font-weight:700;
}

.menu-button {
  display:none;
}

.dropdown-container {
  position:relative;
  display:inline-block;
  width:100%;
  height:100%;
  text-align:center;
}

.show-when-mini {
  display:none;
}

.header-nav-link {
  color:#FFD700;
  display:inline-block;
  width:100%;
  position:relative;
  top:50%;
  transform: translateY(-50%);
  padding:1em 0;
  text-decoration:none;
  font-size:1em;
}

.header-nav-link:hover {
  text-decoration:underline;
  cursor:pointer;
}

.dropdown-content {
  display:none;
  position:absolute;
  background-color:#FFD700;
  color:#400060;
  width:calc(100% - .75em);
  text-align:left;
  z-index:-1;
  box-shadow: 0 0 0.5em #400060;
  padding:0 0 .75em .75em;
}

.dropdown-container:hover {
  background-color:#FFD700;
  color:#400060;
}

.dropdown-container:hover .header-nav-link {
  color:#400060;
}

.dropdown-container:hover .dropdown-content {
  display: grid;
}

.dropdown-link-container {
  padding:0.25em;
  display:flex;
}

.header-submenu-link {
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:12pt;
  text-decoration:none;
  color:#400060;
}

.header-submenu-link:hover {
  text-decoration: underline;
  color:#8000A0;
}

/* FOOTER */
footer {
  position:absolute;
  display:grid;
  grid-template-columns: auto auto;
  left: 0;
  right: 0;
  margin: 0;
  max-width: 100%;
  padding: .75em;
  background-color:#400060;
  color:#FFD700;
}

.footer-link-container {
  grid-column:2/3;
  text-align: right;
}

.footer-link {
  color:#FFD700;
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  text-decoration:none;
  margin:0 0.5em;
  padding:0.5em;
}

.footer-link:hover {
  background-color:#8000A0;
  color:#FFD700;
  text-decoration:underline;
}

.ooc-link {
  color:#8000A0;
}

.spoiler-text {
  background-color:black;
}

.spoiler-text:hover {
  background-color:transparent;
}

.phone-link-container {
  grid-column:1/2;
  text-align:left;
}

.phone-link {
  font-family:'Libre Franklin', sans-serif;
  font-size:1.75em;
  text-decoration:none;
  margin:0;
  padding:0.5em;
  background-color:#AAAAAA;
  border-radius:5em;
  color:black;
  font-weight:700;
  position:fixed;
  left:.5em;
  bottom:.5em;
  z-index:1;
  border: 2px solid black;
  box-shadow:0 0 5px black;
  -webkit-text-stroke: 2px black;
}

.phone-link:hover {
  background-color:#8000A0;
  text-shadow:0 0 2px white;
}

@keyframes noise-anim {
  0% {clip-path: polygon(46% 5%, 25% 5%, 25% 98%, 46% 98%);} 5% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 10% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 15% {clip-path: polygon(6% 72%, 57% 72%, 57% 38%, 6% 38%);} 20% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 25% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 30% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 35% {clip-path: polygon(3% 63%, 49% 63%, 49% 83%, 3% 83%);} 40% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 45% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 50% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 55% {clip-path: polygon(68% 14%, 91% 14%, 91% 29%, 68% 29%);} 60% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 65% {clip-path: polygon(93% 42%, 97% 42%, 97% 89%, 93% 89%);} 70% {clip-path: polygon(97% 77%, 44% 77%, 44% 88%, 97% 88%);} 75% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 80% {clip-path: polygon(52% 8%, 38% 8%, 38% 43%, 52% 43%);} 85% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 90% {clip-path: polygon(70% 98%, 13% 98%, 13% 58%, 70% 58%);} 95% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);}

}

@keyframes noise-anim-2 {
  0% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 5% {clip-path: polygon(97% 54%, 48% 54%, 48% 12%, 97% 12%);} 10% {clip-path: polygon(71% 39%, 45% 39%, 45% 58%, 71% 58%);} 15% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 20% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 25% {clip-path: polygon(81% 86%, 92% 86%, 92% 10%, 81% 10%);} 30% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 35% {clip-path: polygon(70% 1%, 0% 1%, 0% 55%, 70% 55%);} 40% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 45% {clip-path: polygon(4% 94%, 51% 94%, 51% 35%, 4% 35%);} 50% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 55% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 60% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 65% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 70% {clip-path: polygon(30% 60%, 67% 60%, 67% 8%, 30% 8%);} 75% {clip-path: polygon(29% 74%, 42% 74%, 42% 53%, 29% 53%);} 80% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 85% {clip-path: polygon(99% 23%, 36% 23%, 36% 51%, 99% 51%);} 90% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 95% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} 100% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);}
}


/* HOMEPAGE STUFF */

body {
  background-color:#FFEB77;
  margin:0;
  margin-top:9em;
}

main.homepage {
  margin:0;
  padding:0 0 1em;
  background-color:white;
  border:none;
}

.home-image-slideshow {
  width:100%;
  margin-bottom:-1em;
}

.slideshow-image {
  width:100%;
  height:auto;
}

.slideshow-button {
  position:relative;
  top:-17.5vw;
  border:none;
  font-family:'Libre Franklin', sans-serif;
  font-weight:900;
  font-size:1.5em;
  background-color:transparent;
  color:white;
  opacity:50%;
  -webkit-text-stroke: 2px black;
}

.slideshow-button:hover {
  cursor:pointer;
  opacity:75%;
}

.left-button {
  left:1em;
}

.right-button {
  left:calc(100% - 3.5em);
}

.slideshow-dot-container {
  text-align:center;
  position:relative;
  top:-12.5vh;
  width:100%;
}

.slideshow-dot {
  padding:5px;
  border-radius:1em;
  border:2.5px solid #400060;
  background-color:#8000A0;
  text-align:center;
}

.slideshow-dot:hover {
  cursor:pointer;
  border:2.5px solid #FFD700;
}

.active-dot {
  background-color:#FFD700;
}

.half-and-half {
  display:grid;
  grid-template-columns: 1fr 1fr;
  margin: 1em 5em 3em;
  grid-gap:5em;
  justify-items:center;
  align-items:center;
  text-align:center;
}

.hfnhf-image {
  width:100%;
  box-shadow: 0 0 1em #400060;
}

.hfnhf-services {
  grid-gap:0;
  column-gap:5em;
}

.half-right {
  grid-column:2/3;
}

.half-left {
  grid-column:1/2;
}

.half-row-1 {
  grid-row:1/2;
}

.half-row-2 {
  grid-row:2/3;
}

.half-double-row {
  grid-row: 1/3;
}

#welcome-video {
  width:32vw;
  height:18vw;
}

/* EMPLOYEE PORTAL */

body.login-body {
  background-color:#400060;
  margin:0;
}

.login-container {
  background-color:white;
  display:grid;
  grid-template-columns:1fr 2fr;
  width:30em;
  margin: 25vh auto;
  padding:.75em;
}

.login-logo {
  margin:.75em;
  height:10em;
}

.login-form {
  margin:.75em;
  display:grid;
  padding:0 .75em;
  grid-template-rows: auto;
}

.login-form-field {
  display:grid;
  grid-template-columns: auto auto;
  align-items:center;
  margin-left:-.75em;
}

.form-title {
  grid-column:1/4;
  text-align:center;
  font-family:'Libre Franklin', sans-serif;
  font-weight:900;
  font-size:1.65em;
  font-variant:small-caps;
}

.form-label {
  font-family:'Libre Franklin', sans-serif;
  font-weight:700;
  font-size:1.15em;
  padding-right:.75em;
}

.login-form-field input {
  width:100%;
  padding:0;
  margin:0;
  height:1.35em;
  font-family:'Quattrocento', serif;
  font-size:1em;
  grid-column:2/4;
}

#input-password {
  grid-row:3/4;
  width: 100%;
}

#password-toggle {
  height:1em;
  width:1em;
  cursor:pointer;
  grid-column:3/4;
  grid-row:3/4;
  position:relative;
  left:0;
}

.login-forgot {
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:.625em;
  align-self:end;
  justify-self:right;
  grid-column:2/4;
  margin:-.25em;
}

.login-form-button {
  display:grid;
  margin-top:.35em;
  grid-column:1/4;
  align-items:center;
}

.login-form-button button {
  width:100%;
  font-family:'Libre Franklin', sans-serif;
  font-weight:700;
  font-size:.75em;
  border:none;
  background-color:#FFD700;
  padding:.5em;
}

.login-form-button button:hover {
  cursor:pointer;
  background-color:#FFEB77;
}

.login-error-message {
  margin:0 .75em;
  grid-column:1/3;
  text-align:center;
  justify-self:center;
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  color:red;
  font-size:.75em;
  font-style:italic;
  overflow-wrap:anywhere;
  max-width:36em;
}

.no-login-error {
  display:none;
}

.login-message-success {
  color:green;
  font-weight:bold;
}

.confession-container {
  height:100vh;
  align-content:center;
  text-align:center;
}

.confession-vid {
  width:60vw;
  height:33.75vw;
}

.confession-container a {
  text-decoration: none;
}

.confession-container p {
  color:#403000;
  font-size:.75em;
  margin-top:2em;
}

.confession-container p:hover {
  color:#FFD700;
}

/*
.login-glitch:after{
  overflow-wrap:anywhere;
  width:36em;
  left:calc(32em - 2px);
  top: calc(25vh + 15.5em);
  background-color:white;
  color:red;
  lanimation:noise-anim-2 2s infinite linear alternate-reverse;
  text-align:center;
  justify-self:center;
}

.login-glitch:before{
  overflow-wrap:anywhere;
  width:36em;
  left:calc(32em + 2px);
  background-color:white;
  color:red;
  lanimation:noise-anim 3s infinite linear alternate-reverse;
  text-align:center;
  justify-self:center;
}

*/

/* Standard Page */
main {
  margin:0 5em -1em;
  padding:2.5em;
  background-color:white;
  border-left: 1px solid #FFD700;
  border-right: 1px solid #FFD700;
}

h1 {
  text-align:center;
  font-family:'Libre Franklin',sans-serif;
  font-weight:900;
  font-size:3.5em;
  text-transform:uppercase;
  margin:.25em .15em;
}

.thue-morse-container {
  text-align:center;
  padding:.75em 0;
}

.thue-morse-button {
  padding:.65vw;
  margin:.25vw 1vw;
  border-radius:0;
  border:.25em solid #400060;
  background-color:white;
}

.gold-button {
  background-color:#FFD700;
}

.purple-button {
  background-color:#8000A0;
}

h2 {
  font-family:'Libre Franklin',sans-serif;
  font-weight:700;
  font-size:2em;
  margin:.75em 0 .35em;
  font-variant:small-caps;
}

h3 {
  font-family:'Libre Franklin',sans-serif;
  font-weight:700;
  font-size:1.5em;
  margin:.75em 0 -.25em;
}

h4 {
  font-family:'Quattrocento',serif;
  font-weight:bold;
  font-size:1.4em;
  margin:.75em 0 -.75em;
}

p {
  font-family: 'Quattrocento',serif;
  font-size:14pt;
  margin:.5em 0;
  line-height:1.25em;
}

a {
  color:#400060;
}

a:hover {
  color:#8000A0;
}

ol,ul {
  font-family: 'Quattrocento',serif;
  font-size:14pt;
}

ol > li::marker {
  font-weight:bold;
}

li, ol > p {
  margin-top:0;
  margin-bottom:.5em;
  line-height:1.15em;
}

/* BILLING PAGE */

.bill-search {
  margin: 2em auto 1em;
  width:max-content;
}

.bill-search label {
  font-size:1.5em;
  font-family:'Quattrocento',serif;
  font-weight:bold;
}

.bill-search input {
  font-size:1.25em;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  text-transform:uppercase;
}

.wrong-billing {
  background-color:#FFAAAA;
}

.right-billing {
  background-color:#AAFFAA;
}

.bill-search button {
  font-size:1.25em;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-variant:small-caps;
}

.bill-container {
  display:grid;
  grid-template-columns:fit-content(15vw) 15vw fit-content(15vw) 15vw;
  text-align:left;
  grid-gap:.5em;
  border: 2px solid #400060;
  width:min-content;
  margin: 0 auto;
  padding:1em;
  font-family:'Quattrocento',serif;
  color:#AAAAAA;
  background-color:#EEEEEE;
}

.active-bill {
  color:black;
  background-color:#FFEB77;
}

.bill-container label {
  width:max-content;
}

.bill-container input, .bill-container textarea {
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:10pt;
  color:#AAAAAA;
}

.active-bill input, .active-bill textarea {
  color:#666666;
}

.two-col {
  grid-column: span 2;
}

.three-col {
  grid-column: span 3;
}

.four-col {
  grid-column: span 4;
}

.money-col {
  text-align:right;
}

#bill-notes {
  min-height:5em;
  resize:none;
}

.bill-container .glitch:before, .bill-container .glitch:after {
  top:0;
}

/* HISTORY */
.timeline-thue-morse {
  margin-bottom:2em;
}

.timeline-container {
  grid-template-columns:1fr auto 1fr;
  grid-gap:1.5em;
  margin:0 auto 1.5em;
  align-items:start;
}

.timeline-bullet {
  height:2em;
  width:2em;
  margin:0;
  padding:2.75em 0 0;
  grid-column:2/3;
}

#first-timeline-bullet {
  padding: 1.5em 0 0;
}

.timeline-right {
  text-align:left;
  width:fit-content;
  grid-column:3/4;
  padding: 1em 0;
}

h2.timeline-right {
  justify-self:left;
}

.timeline-left {
  text-align:right;
  width:fit-content;
  grid-column:1/2;
  padding: 1em 0;
}

h2.timeline-left {
  justify-self:right;
}
  
.timeline-left h3, .timeline-right h3 {
  margin-top:0;
}

.timeline-row-1 {
  grid-row:1/2;
}

.timeline-row-2 {
  grid-row:2/3;
}

.big-date {
  font-size:6em;
  margin:0;
  padding:0;
}

.not-that-big {
  font-size:4em;
}

/* MEET OUR TEAM */
.profiles-container {
  display:grid;
  margin: 1em 5em 3em;
  align-items:start;
  justify-items:start;
  text-align:left;
  column-gap:1em;
  row-gap:0;
  grid-template-columns:auto auto;
}

.team-profile-pic {
  width:15em;
  /* height:21em; */
  margin:0 1em;
  grid-row: span 4;
}

.profile-name {
  margin:0;
  font-size:2.5em;
}

.profile-title {
  font-size:1.5em;
  margin:0;
  padding:.25em 0 .5em;
  font-weight:500;
  text-transform:uppercase;
}

.profile-bio {
  font-size:1.15em;
  margin:0;
  padding:0;
}

.profile-interjection {
  grid-column:1/3;
  margin-top:1em;
  font-size:1.25em;
  font-family:'Libre Franklin',sans-serif;
  font-weight:500;
  color:red;
  text-align:center;
}

.team-bullet {
  height:2em;
  width:2em;
  margin:2em auto;
  padding:0;
  grid-column:1/3;
}

#solutions-video {
  width:72vw;
  height:40.5vw;
  margin-top:-2em;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* NEWSROOM */

.newsroom-article-container {
  padding:.5em .5em;
  margin:.5em 0;
}

.newsroom-article-container:hover {
  background-color:#EFEFEF;
}

.newsroom-article-title {
  margin:0;
  font-variant:normal;
}

.newsroom-article-title.glitch {
  word-break:break-all;
}

.newsroom-article-date {
  font-weight:300;
  margin:0;
  font-size:1.35em;
}

.newsroom-article-lead {
  margin:.5em 0 0;
  font-size:1.15em;
}

.newsroom-article-lead.glitch {
  word-break:break-all;
}

.newsroom-bullet {
  height:1.5em;
  width:1.5em;
  margin:0 auto;
  display:block;
}

/* NEWS ARTICLES */
.article-main {
}

.article-title {
  text-transform:none;
  margin:0 0 0;
  font-size:2.75em;
}

.article-lead {
  margin:0;
  font-weight:300;
  font-size:1.65em;
  text-align:center;
  font-variant:none;
  font-style:italic;
}

.article-byline {
  margin:.25em 0;
  font-size:1.15em;
  font-family: 'Libre Franklin', sans-serif;
  font-weight:500;
  text-align:center;
}

.article-date {
  margin:.25em 0 1em;
  font-size:1.15em;
  font-family: 'Libre Franklin', sans-serif;
  font-weight:300;
  text-align:center;
}

.article-main p {
  text-align:justify;
}

/* EMPLOYEE PAGES */

.employee-body {
  background-color:white;
  margin-top:3em;
  height:100%;
}

.employee-header {
  background-color: #400060;
  display:grid;
  grid-template-columns: 1fr 3fr 2fr;
  grid-template-rows: auto auto;
  align-items:center;
  box-shadow: 0 0 .5em #400060;
  z-index:1;
}

.employee-header-logo-container {
  grid-column:1/2;
  margin-right:1.5em;
}

#employee-logo {
  height:2em;
  margin: .35em .75em;
  filter: invert(1);
}

.header-name-container {
  grid-column:3/4;
  text-align:right;
  display:flex;
  justify-content:end;
}

.employee-header-name {
  font-family: 'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:1em;
  color:white;
  margin: .5em 1em;
}

.employee-header-image {
  height:2em;
  clip-path: circle(1em);
  margin-right:1em;
}

.employee-page {
  background-color:white;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:auto 2fr 3fr;
  border:none;
  height:100%;
}

.employee-icons-container {
  height:100%;
  margin-right:.75em;
  border-right:1px solid #BBBBBB;
  overflow-x:hidden;
  overflow-y:auto;
  overflow:scroll;
}

.employee-icon {
  font-size:1.35em;
  display:block;
  overflow-wrap:normal;
  width:100%;
  padding:.5em;
  font-family:'Libre Franklin',sans-serif;
  font-weight:500;
  cursor:pointer;
  background-color:white;
  border:none;
}

.employee-icon:hover {
  background-color:#EEEEEE;
}

.employee-icon:active {
  background-color:#DDDDDD;
}

.icon-emoji {
  font-size:4vw;
}

.employee-list-container {
  background-color:white;
  overflow-x:hidden;
  overflow-y:auto;
  overflow:scroll;
  height:calc(100vh - 3em);
  display:none;
}

.visible-list-container {
  display:block;
}

.employee-list-title {
  font-weight:700;
  text-align:left;
  font-size:1.75em;
  text-transform:none;
  margin:0;
  margin-top:.5em;
}

.employee-list-item {
  display:grid;
  width:calc(100% - .75em);
  background-color:white;
  margin:.75em 0;
  border:1px solid #EEEEEE;
  border-radius:0.5em;
  cursor:pointer;
  grid-template-columns:auto auto;
}

.emp-item-title {
  margin:1.5em 0.35em 0.35em 1.5em;
  font-family:'Libre Franklin', sans-serif;
  font-weight:500;
  font-size:1.1em;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.emp-item-date {
  margin:1.5em 2em .35em .35em;
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:1.1em;
  text-align:right;
  color:#666666;
}

.emp-item-subtitle {
  margin:0 2.35em 1.5em;
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:1em;
  color:#666666;
  grid-column:1/3;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.employee-list-item:hover {
  background-color:#EEEEEE;
  border:1px solid #DDDDDD;
}

.employee-viewport-container {
  background-color:white;
  border-left:1px solid #BBBBBB;
  padding:1em;
  overflow-x:hidden;
  overflow-y:auto;
  overflow:scroll;
  height:max(100vh - 5em);
}

.employee-email {
  display:none;
}

.visible-email {
  display:block;
}

.email-metadata {
  padding:0 0 .5em;
  border-bottom: 1px solid gray;
}

.email-subject {
  font-size:1.25em;
  text-transform:none;
  font-weight:700;
  text-align:left;
  margin:0 0 .25em;
}

.email-sender, .email-recipients, .email-date {
  font-size:1em;
  font-variant:normal;
  font-weight:500;
  text-align:left;
  margin:0;
}

.email-date {
  font-weight:300;
  padding-top:.1em;
  color:#444444;
  font-size:.9em;
}

.email-content p, .email-reply-content p, .email-content ul {
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:1em;
}

.email-attachments {
  margin:1.5em 0 1em;
}

.attachment-link {
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:.75em;
  background-color:#DEDEDE;
  color:black;
  padding:.75em 1.25em;
  border-radius:3em;
  text-decoration:none;
}

.attachment-link:hover {
  background-color:#CCCCCC;
}

.email-reply-metadata {
  padding:.5em 0 .5em;
  border-top: 2px solid gray;
  border-bottom: 1px solid gray;
}

.file-container {
  height:100%;
  text-align:center;
  display:none;
}

.visible-file {
  display:block;
}

.file-name {
  font-size:1.5em;
  text-transform:none;
  font-weight:700;
  margin:0 0 .25em;
}

.file-date {
  font-size:1em;
  font-variant:normal;
  font-weight:500;
  margin:0 0 1em;
}

.file-description {
  font-family:'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:1em;
}

.file-container video {
  max-width:80%;
  max-height:80%;
}

.file-container iframe {
  max-width:80%;
  max-height:80%;
}

.file-container img {
  max-width:100%;
  max-height:100%;
}

#cass-popup {
  border:.25vw solid red;
  color:red;
}

.popup-glitch:after {
  left:2vw;
}

.portal-popup-button {
  border:none;
  padding:.5vw;
  margin:0 10vw;
  background-color:red;
  color:white;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:1vw;
}

.portal-popup-button:hover {
  cursor:pointer;
  background-color:green;
  color:white;
}

/* SECURITY QUESTIONS */
.security-body {
  background-color:black;
  margin:0;
}

.security-question-container {
  background-color:#400060;
  margin: 5vh auto;
  display:grid;
  grid-template-columns:auto;
  width:min-content;
  padding:0 1em;
}

.security-question-title {
  font-family:'Libre Franklin',sans-serif;
  font-weight:700;
  font-size:1.25em;
  padding:.5em 0 0;
  color:white;
  text-align:center;
}

.security-question {
  font-family:'Libre Franklin',sans-serif;
  font-weight:500;
  padding:1em 0 .25em;
  color:white;
}

.security-answer {
  width:25em;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  background-color:#200030;
  color:white;
  border:1px solid black;
  padding:.25em;
}

.security-submit {
  width:min-content;
  margin:1em auto;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  padding:.75em;
  background-color:black;
  color:white;
  border:none;
  cursor:pointer;
}

.security-submit:hover {
  background-color:#111111;
}

.red-security-answer {
  background-color:#FFCDCD;
  color:#330000;
}

.green-security-answer {
  background-color:#CDFFCD;
  color:#003300;
}

/* TFA */

.tfa-container {
  background-color:#400060;
  margin: 5vh auto;
  display:grid;
  grid-template-columns:auto;
  width:min-content;
  padding:0 1em;
}

.tfa-instructions {
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:1.5em;
  padding:.5em 0 0;
  color:white;
  text-align:center;
  text-transform:none;
  width:25em;
}

.tfa-phone-number {
  color:white;
  font-weight:400;
  font-size:3em;
  margin:.5em;
  text-align:center;
}

.tfa-submit {
  width:min-content;
  margin:1em auto;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  padding:.75em;
  background-color:black;
  color:white;
  border:none;
  cursor:pointer;
}

.tfa-submit:hover {
  background-color:#111111;
}

#tfa-number {
  padding-bottom:.2em;
}

.green-proceed, .green-proceed:hover {
  background-color:green;
}

.red-proceed, .red-proceed:hover {
  background-color:darkred;
}

/* PHONE PAGE */

body.phone-body {
  background-color:#400060;
  background-image:url("/corestone/assets/phone%20desk%20background.jpg?v=1717124654332");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-attachment: fixed;
  height:calc(100vh - 2em);
  margin:0;
}

.phone-container {
  background-color:black;
  margin: 2em auto;
  border: .5em darkgray outset;
  border-radius:1.25em;
  width:fit-content;
  box-shadow: 0 0 2em black;
}

.notification-bar {
  display:grid;
  grid-template-columns: auto auto;
  padding:0;
  margin:0;
  background-color:black;
  border-radius: 1.25em 1.25em 0 0;
}

.notification-bar p {
  margin: 0;
  padding:5px;
  font-family: 'Libre Franklin', sans-serif;
  font-weight:300;
  font-size:.8em;
  color:white;
}

.phone-time {
  text-align:right;
}

.dialed-number-container {
  background-color:black;
  align-content:center;
  text-align:center;
}

.dialed-number {
  margin:0;
  font-size:24pt;
  padding:1.5em 0 1em;
  color:white;
  font-family:'Libre Franklin',sans-serif;
  font-weight:500;
}

.red-number {
  color:red;
}

.green-number {
  color:#00FF00;
}

.hidden-phone-number {
  display:none;
}

.phone-audio {
  width:16em;
  height:2em;
  margin: 36pt auto 11pt;
  display:none;
}

.transcript-link {
  bottom:2em;
  color:#8000A0;
  padding:.25em;
  width:fit-content;
  margin: 0 auto;
  text-decoration:none;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:.9em;
  border-radius:.5em;
  display:none;
}

.transcript-link:hover {
  color:#FFD700;
  text-decoration:underline;
}

.phone-secret-shown {
  display:block;
}

.phone-keypad {
  border-collapse: collapse;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:.25em;
  padding:1em;
}

.phone-key {
  background-color:#333333;
  cursor:pointer;
  height:5em;
  width:5em;
  border-radius:2.5em;
  color:white;
  align-content:center;
}

.phone-key:active {
  background-color:#888888;
}

.inactive-phone-key {
  background-color:#171717;
  cursor:default;
  color:#777777;
  filter:grayscale(100%);
}

.inactive-phone-key:active {
  background-color:#171717;
}

.phone-key-number {
  font-size:2em;
  font-weight:500;
  margin:0;
}

.phone-key-letters {
  margin:0;
  font-size:1em;
  text-align:center;
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
}

/* MISCELLANY */
.theorist-message-container {
  display:none;
  margin:.75em 0;
  padding:.75em;
  background-color:gold;
  border:0.2em solid #400060;
  font-family: 'Quattrocento', serif;
}

.theorist-message-container h3 {
  margin: 0 0 .35em;
}

.visible-theorist-message {
  display:block;
}

/* 404 PAGES */

.fillpage-body {
  height:calc(100% - 14vw - 5px - 4.5em);
}

.fillpage-main {
  display:flex;
  min-height:100%;
  flex-flow:column;
}

.fillpage-title {
  margin-top:0;
  flex: 0 1 auto;
}

.fillpage-container {
  display:grid;
  max-width:50vw;
  margin:1em auto;
  grid-template-columns:1fr 1fr 1fr;
  column-gap:2.5vw;
  flex: 0 1 auto;
}

.fillpage-four {
  width:100%;
}

.fillpage-zero {
  width:100%;
}

.fillpage-explanation {
  font-size:18pt;
  margin:3em auto 2em;
  text-align:center;
  flex: 0 1 auto;
}

.fillpage-filler {
  flex: 1 1 auto;
}

/* GOTTA COME AT THE END APPARENTLY */
.glitch {
  position:relative;
  font-family:'Syne Mono', monospace;
}

.glitch:before{
  content:attr(data-text);
  overflow:hidden;
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  opacity:100%;
  text-shadow:-.1em 0 blue;
  clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%); 
  animation:noise-anim 1.3s infinite linear alternate-reverse;
}

.glitch:after{
  content:attr(data-text);
  overflow:hidden;
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  opacity:100%;
  text-shadow:.1em 0 red;
  clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%); 
  animation:noise-anim-2 2.7s infinite linear alternate-reverse;
}

.transcript-container {
  background-color:white;
  box-shadow:0 0 10px black;
  margin: 5vh auto;
  width:min-content;
  padding:1em 2.5em 2.5em;
  display:grid;
  grid-template-columns:auto 45vw;
  column-gap:1em;
  text-align:justify;
}

.transcript-title {
  font-family:'Libre Franklin',sans-serif;
  font-weight:700;
  font-size:1.25em;
  grid-column:span 2;
  text-align:center;
  color:black;
  padding:.5em 0;
}

.transcript-name {
  font-family:'Libre Franklin',sans-serif;
  font-weight:500;
  font-size:1em;
  color:black;
}

.transcript-dialogue {
  font-family:'Libre Franklin',sans-serif;
  font-weight:300;
  font-size:1em;
  color:black;
}


@media screen and (max-width:810px) {
  body {
    margin-top:calc(14vw + 3px);
  }
  
  .popup-disclaimer {
    font-size:8pt;
  }
  
  .header-logo-container {
    grid-column:span 2;
    margin:0;
    height:min-content;
  }
  
  .banner-announcement {
    grid-column:1/4;
    grid-row:2/3;
    font-size:1em;
    margin:0em 2.5em .5em;
    z-index:-1;
  }
  
  .banner-ides {
    grid-column:1/4;
    grid-row:2/3;
    font-size:1em;
    margin:0em 2.5em .5em;
    z-index:-1;
  }
  
  #header-logo {
    min-width:0;
    height:10vw;
    text-align:left;
    margin:1vw;
    padding:1vw;
  }
  
  .header-logo-link {
    display:inline-block;
    height:0;
  }
  
  .menu-button {
    display:block;
    border-radius:100%;
    background-color:#8000A0;
    border:none;
    padding:.45em;
    margin-right:1em;
    cursor:pointer;
    grid-column:3/4;
    grid-row:1/2;
  }
  
  .hamburger-menu-image {
    width:1.5em;
    margin:0 0 -3px;
  }
  
  .header-portal-container {
    display:none;
  }
  
  .header-navigation {
    grid-template-columns:1fr 1fr 1fr;
    display:none;
  }
  
  .show-header-nav {
    display:grid;
  }
  
  .hide-when-mini {
    display:none;
  }
  
  .show-when-mini {
    display:block;
  }
  
  .menu-portal-link {
    grid-column:span 3;
    font-variant:small-caps;
  }
  
  .header-nav-link {
    padding:.5em 0;
  }
  
  .half-and-half {
    display: block;
  }
  
  #welcome-video {
    width:64vw;
    height:36vw;
    margin-top:1em;
  }
  
  main {
    margin:0 2.5vw;
    padding:2em 1em;
  }
  
  .bill-search label {
    font-size:1em;
  }
  
  .bill-search input {
    font-size:1em;
    max-width:35vw;
  }
  
  .bill-search button {
    font-size:1em;
  }
  
  .bill-container {
    grid-template-columns:auto auto;
  }
  
  .two-col, .three-col, .four-col {
    grid-column: span 1;
  }
  
  .hfnhf-image {
    margin: 2em 0;
  }
  
  .team-profile-pic {
    width:22.5vw;
    /* height:31.5vw; */
  }
  
  .timeline-container h2 {
    text-align:center;
    width:100%;
    font-size:3em;
  }
  
  .timeline-container div {
    text-align: center;
    margin: 0 5em;
  }
  
  .timeline-left h3, .timeline-right h3 {
    margin-top:0;
  }
  
  .timeline-bullet {
    margin:.75em auto;
    height:3.5vw;
    width:3.5vw;
  }
  
  .employee-header {
    grid-template-columns:1fr 2fr;
  }
  
  .employee-page {
    grid-template-columns:2fr 3fr;
    row-gap:1px;
  }
  
  .employee-icons-container {
    grid-column:span 2;
    display:flex;
    border-right:none;
    border-bottom: 1px solid #BBBBBB;
    margin-right:0;
  }
  
  .icon-emoji {
    font-size:inherit;
    padding:.25em;
  }
  
  .employee-icon br {
    display:none;
  }
  
  .employee-list-container {
    padding-left:1em;
    height:calc(100vh - 8.25em);
  }
  
  .employee-list-item {
    display:block;
  }
  
  .emp-item-title {
    margin:.5em .5em .175em;
  }
  
  .emp-item-date {
    margin:.235em .675em;
    text-align:left;
    font-size:.75em;
    font-style:italic;
  }
  
  .emp-item-subtitle {
    margin:.175em .5em .5em;
  }
  
  .employee-viewport-container {
    height:calc(100vh - 8.25em);
  }
  
  .transcript-container {
    display:block;
    padding-bottom:4em;
    width:auto;
    margin: 5vh;
  }
  
  .transcript-name {
    padding-top: 1em;
  }
}

@media screen and (max-width:450px) {
  .popup-text {
    font-size:10pt;
  }
  
  .popup-button {
    margin: 0 5em;
  }
  
  .banner-announcement {
    font-size:.75em;
  }
  
  .banner-ides {
    font-size:.75em;
  }
  
  .slideshow-button {
    display:none;
  }
  
  .slideshow-dot-container {
    top:0;
    margin-bottom:2em;
  }
  
  .slideshow-dot {
    padding:1.5vw;
    border: .5vw solid #400060;
  }
  
  .slideshow-dot:hover {
    border:.5vw solid #FFD700;
  }
  
  main {
    padding: 1em;
  }
  
  h1 {
    font-size:2em;
  }
  
  .thue-morse-container {
    padding:.75vw 0;
  }
  
  .thue-morse-button {
    padding: 1vw;
    margin:0 .5vw;
    border: .5vw solid #400060;
  }
  
  h2 {
    font-size:1.5em;
  }
  
  .half-and-half  {
    margin: 1em 1.5em 2.5em;
  }
  
  p, li, ul {
    font-size:10pt;
  }
  
  h3 {
    font-size:1.25em;
  }
  
  h4 {
    font-size:1.15em;
    margin-bottom:1vw;
  }
  
  .footer-link {
    font-size:10pt;
  }
  
  .bill-search {
    margin:1em auto;
    display:grid;
  }
  
  .bill-container {
    font-size: 10pt;
  }
  
  .bill-container input, .bill-container textarea {
    width:25vw;
  }
  
  .profiles-container {
    display:block;
    margin:1em 1em 3em;
  }
  
  .team-profile-pic {
    display:block;
    margin: 0 auto 1em;
    width:50vw;
    /* height:75vw; */
  }
  
  .profile-name {
    font-size:1.75em;
  }
  
  .profile-title {
    font-size:1.25em;
  }
  
  .profile-bio {
    font-size:10pt;
  }
  
  .team-bullet {
    display:block;
    margin:1em auto;
  }
  
  .timeline-container {
    margin:0 auto;
  }
  
  .timeline-container div {
    margin:0;
  }
  
  .timeline-bullet {
    padding:0;
    margin-top:0;
  }
  
  #first-timeline-bullet {
    padding:0;
  }
  
  #last-timeline-bullet {
    display:none;
  }
  
  .article-title {
    font-size:1.75em;
  }
  
  .article-lead {
    font-size:1.15em;
  }
  
  .article-byline, .article-date {
    font-size:10pt;
  }
  
  .tfa-container {
    padding:0;
    width:calc(100% - 10vh);
    margin:5vh;
  }
  
  .tfa-instructions {
    width:calc(100% - 3em);
    margin:.25em auto;
  }
  
  .tfa-phone-number {
    font-size:2em;
  }
  
  html {
    height:100%;
  }

  .errorpage-body {
    height:calc(100% - 14vw - 5px - 4.5em);
  }

  .errorpage-main {
    display:flex;
    height:100%;
    flex-flow:column;
  }


}