@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600&display=swap");
@import url("https: //use.typekit.net/pbk0kua.css");
@import url("https://use.typekit.net/wcg8icl.css");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap");

.pages.show .page-title {
  display: none;
}

.titleshadow {
  text-shadow: 2px 2px 2px #d3d3d3;
}

.ecrfont {
  font-family: Lexend;
  font-weight: 400;
  font-style: normal;
}

.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.canvasfont {
  font-family: myriad-pro;
  font-weight: 400;
  font-style: normal;
}

.canvasfontbold {
  font-family: myriad-pro;
  font-weight: 700;
  font-style: normal;
}

.instructions {
  font-family: Lexend;
  font-weight: 300;
  font-size: 12pt;
  font-style: normal;
  color: #505050;
}

.instructions strong {
  font-weight: 400;
  color: black;
}

.ecrfont strong {
  font-weight: 500;
  color: black;
}

.confetti {
  position: absolute;
  top: 13%;
  left: 20%;
  width: 50%;
  height: 20vh;
}

.shadow-rounded {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Drop shadow */
  border-radius: 5px; /* Border radius */
}

.bluedot {
  height: 20px;
  width: 20px;
  background-color: #1897a5;
  border-radius: 50%;
  display: inline-block;
}

div.coursecardscontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 40px;
  grid-template-areas:
    ". ."
    ". ."
    ". ."
    ". .";
}

div.coursecards {
  min-width: 200px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

div.coursecards:hover {
  box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2),
    0 0px 8px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2),
    0 0px 8px 0 rgba(0, 0, 0, 0.3);
}

div.coursecardimage {
  background-color: white;
  display: inline-block;
}

div.coursecardtime {
  background-color: #f4f4f4;
  color: black;
  padding-left: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: Lexend;
  color: gray;
  font-size: 9pt;
  text-align: left;
  vertical-align: top;
}

img.noSpace {
  display: block;
  vertical-align: top;
}

div.coursecardsummary {
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-family: Lexend;
  font-size: 10pt;
}

/*
*
* ==========================================
* MENU LINK BAR
* ==========================================
*
*/

ul.menubar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1b75bc;
  border-radius: 25px;
  font-family: grenadine-mvb, sans-serif;
  font-size: 16pt;
}

li.menubar {
  float: left;
}

li a.menubar {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a.menubar:hover {
  background-color: #3cc3dd;
}

/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-cards {
  display: grid;
  grid-gap: 0.5rem;
  padding: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.flip-card {
  background-color: transparent;
  width: 175px;
  height: 125px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

.hoverTable {
  width: 100%;
  border-collapse: collapse;
}

.hoverTable td {
  padding: 7px;
  border: #bfbfbf 1px solid;
}

/* Define the default color for all the table rows */
.hoverTable tr:nth-child(odd) {
  background: #f5f5f5;
}

/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
  background-color: #e4f2f8;
}

/* Create four equal columns that floats next to each other */
.modulecontainer {
  display: flex;
  justify-content: space-between;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.abutton {
  display: inline-block;
  border-radius: 10px;
  background-color: #1b75bc;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  vertical-align: center;
  padding: 5px;
  width: 300px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.abutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.abutton span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.abutton:hover span {
  padding-right: 25px;
}

.abutton:hover span:after {
  opacity: 1;
  right: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 5px;
}

.flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(3) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(4) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-items:nth-child(5) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}