@font-face {
  font-family: "RimouskiSb";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/RimouskiSb-Regular.woff"),
    url("./fonts/RimouskiSb-Regular.woff2") format("woff");
}
@font-face {
  font-family: "Maiandra GD";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/Maiandra GD V2.woff") format("woff"),
    url("./fonts/Maiandra GD V2.woff2") format("woff2");
}
body {
  font-family: "Calibri";
}

.main {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.imageDivClass {
  /* float: left; */
  width: 65%;
  padding: 0px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  /* margin-right: 5px; */
  overflow: hidden;
}
.imageClass {
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: #5d1152;
}
.imageDivClassFull {
  width: 100%;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.instText {
  align-items: center;
  align-content: center;
  align-self: center;
  color: #ff7f27;
}
#transcriptTextDiv > p {
  margin: 5px 5px 5px 0px;
}
.transcript {
  background-color: #5d1152; /*#b43c05;*/
  color: white;
  /* float: left;
  width: 30%; */
  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-style: solid;
  border-width: 1px;
  border-color: #5d1152;
  max-width: 33%;
  min-width: 33%;
}
.header {
  font-family: "RimouskiSb";
  background-color: #fffaff;
  padding: 5px;
  left: 0;
  top: 0;
  color: #5d1152;
  border-style: solid;
  border-width: 1px;
  border-color: #5d1152;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header > P {
  padding: 0px;
  margin: 5px 0px 5px 0px;
}
.lts_icon {
  width: 109px;
}
.pageHeadingText {
  font-size: 22px;
  font-weight: bold;
  padding: 2px;
  margin: 5px 5px 5px 0px;
  color: #5d1152;
}
.headingText {
  font-size: 18px;
  font-weight: bold;
  padding: 2px;
  margin: 5px 5px 5px 0px;
  color: white;
}
.glow {
  padding: 2px;
  margin: 5px 5px 5px 0px;
  color: #ff7f27;

  font-size: 14px;
  /* color: #fff; */
  /* text-align: center; */
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff7f27,
      0 0 40px #ff7f27, 0 0 50px #ff7f27, 0 0 60px #ff7f27, 0 0 70px #ff7f27;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff8838, 0 0 40px #ff8838,
      0 0 50px #ff8838, 0 0 60px #ff8838, 0 0 70px #ff8838, 0 0 80px #ff8838;
  }
}
.paraText {
  padding: 2px;
  margin: 5px 5px 5px 0px;
  color: #ff7f27;
}
.footer {
  font-family: "Maiandra GD";
  font-weight: normal;
  font-style: normal;
  text-align: center;
  /* padding: 3px; */
  background-color: #fffaff;
  width: 100%;
  margin-top: 5px;
  color: #5d1152;
  border-style: solid;
  border-width: 1px;
  border-color: #5d1152;
}
.footer > P {
  padding: 5px 5px 5px 5px;
  margin: 0px;
}
div.scrollmenu {
  background-color: #5d1152;
  overflow: auto;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
  border-color: #5d1152;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px 14px 10px 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #ff7f27;
}

.scrollmenuSelected {
  background-color: #ff7f27;
}

.makeInvisible {
  display: none;
}

@media only screen and (max-width: 800px) {
  /* For tablets: */
  .imageDivClass {
    width: 100%;
    padding: 5px 0px 0px 0px;
    margin-left: 0px;
  }
  .transcript {
    width: 100%;
    max-width: 100%;
    margin-right: 0px;
  }
  /* .header {
    display: none;
  }
  .footer {
    display: none;
  } */
  .content {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 500px) {
  /* For mobile phones: */
  .menu,
  .imageDivClass,
  .transcript {
    width: 100%;
    max-width: 100%;
    padding: 5px 0px 0px 0px;
    margin-right: 0px;
    margin-left: 0px;
  }
  p.glow {
    display: none;
  }
  div.img {
    display: none;
  }
  .pageHeadingText {
    font-size: 16px;
  }
  .lts_icon {
    content: url("../images/logo-small.png");
    width: 100%;
  }
  /* .footer {
    display: none;
  } */
}