body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }
.bg-black{ background-color: #000000 !important; }
.bg-gold{ background-color: #efa62c !important; }
.bg-footer{background-color: #975e00 !important;}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

.bg-slide{
  position: relative;
  background-size: contain;
  background-position: center;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 0px;
  display:flex;
  flex-direction:column;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 1.777;
}

.bg-section {
  position: relative;
  background-size: cover;
  background-position: center;
 
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 0px;
  display:flex;
  flex-direction:column;
  background-repeat: no-repeat;
}

.section-content {
  background-color: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  margin: 50px;
  padding: 60px;
  border-radius: 5px;
  
}
.no-side-padding {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.five-left-padding{
  padding-left: 5%;
}

.text-shadow {
  text-shadow: 2px 2px #efa62c;
}

.s-rt{
  font-size: 1.5vw;
}
.m-rt {
  font-size: 3vw;
}
.l-rt{
  font-size: 5vw;
  font-weight: bold;
}
.xl-rt {
  font-size: 8vw;
  font-weight: bold;
}

.text-box-left {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding-left: 5%;
  padding-right: 65%;
}

.text-box-right {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px;
  padding-left: 65%;
  padding-right: 5%;
}

/*testing highlight animation from here*/

.item {
  font-size: 30px;
  width: fit-content;
  height: 40px;
  line-height: 6vw;
}

.highlight {
  display: inline-block;
  position: absolute;
  z-index: 0;
  background-color: #efa62c;
  height: 6vw; 
  width: fit-content;
  max-width: 0px;
  transition: max-width 1s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item:hover .highlight{
  /* hardcoded */
  max-width: 35%; 
}

.item span{
  z-index: 1;
}

/* end highlight animation testing*/

/* Teams Table */
.team_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 3vw 0px !important;
  margin-top: 30px;
  margin-bottom: 30px;
}

.team_pic {
  display:block;
  width: 100%;
  height: 100%;
}

.pic_row {  
  height: auto;
  aspect-ratio: 0.8;
}
.name_row {
  height: 70px;
  padding: 20px;
  text-align: center;
  font-size: 1.5vw;
}
tr.name_row th{
  background-color: #efa62c;;
}

.blank_cell{
  background-color: transparent !important;
}
/* sponsor table*/

.sponsor_table{
  width: 100%;
}

table.sponsor_table tr{
  height: 100px;
  width: 25%;
}

table.sponsor_table tr th img{
  display: block;
  max-height: 100px;
  max-width: 95%;
}

/* flip card test*/
.flip-card {
    background-color: transparent;
    width: 100%;
    height: auto;
    aspect-ratio: 0.8;
    border: 0px solid #f1f1f1;
    /*perspective: 1000px;*/ /* Remove this if you don't want the 3D effect */
  }
  
/* 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.8s;
  transform-style: preserve-3d;
  ;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}*/
.container .card:hover .contentBox-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; /* Safari */
  backface-visibility: hidden;
  ;
}

.flip-card-back{
  padding: 8px;
}

/* 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: #efa62c;
  color: white;
  transform: rotateY(180deg);
}
/*end flip card test*/

.slide-card {
  background-color: transparent;
  width: 100%;
  height: auto;
  aspect-ratio: 0.8;
  border: 0px solid #f1f1f1;
  overflow: hidden;
}

.slide-card-back{
  background-color: #efa72cc0;
  color: white;
  text-align: center;
  transform: translate(0%,0%);
  transition: transform 0.5s;
  padding: 1vw;
  height: 100%;
  width: 100%;
  font-size: 1.2vw;
}

.slide-card:hover .slide-card-back {
  transform: translate(0%,-100%);
}

/* description page formatting*/
.page-body {
  margin: 10px auto;
  width: 90%;
  box-shadow: 0px 0px 10px #999999;
  padding: 30px 30px;
}

.black-text-bg{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

div.bg-section div div div.black-text-bg{
  background-color: rgba(0, 0, 0, 0.5);
}

div.bg-section div div div p{
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.notebook-img-div {
  margin-left: 15px;
  float: right;
  width: 300px;
  margin-bottom: 1vh;
  clear: right;
}
.notebook-img-div img{
  width: 100%;
}

.eng_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 6vw 0px !important;
  margin-top: 30px;
  margin-bottom: 30px;
}
table.eng_table tr{  
  height: 150px;
  width: 33%;
  overflow: hidden;
}

table.eng_table tr th div.slide-card{
  background-color: #000000 !important;
  color: #e9ecef;
}

table.eng_table tr th div{height: 100%;}

table.eng_table tr th div h4{padding: 5px;}
table.eng_table tr th div p{padding-left: 5px;padding-right: 5px;}
table.eng_table tr th div ul{padding-left: 5px;padding-right: 5px;}
table.eng_table tr th{position: relative;overflow: hidden;}
table.eng_table tr th div.slide-card-back{position: absolute;height: 100%;transform: translate(0%,100%);width: 100%;z-index: 2;}
table.eng_table tr th:hover .slide-card-back {transform: translate(0%,0%);}