/* ========== Base Layout ========== */
/*#region BaseLayout*/
body {
  background-color: var(--background-lighter);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

table.layout-table{
  /*border: none;*/
  /*border: black 1px solid;*/
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  padding: 0;
}

.layout-table tr{
  border: none;
  /*border: black 1px solid;*/
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0;
}

.layout-table td{
  border: none;
  padding: 0;
  /*border: black 1px solid;*/
}


.layout-table tr.withbg{
  background-color: var(--secondary);
}

.layout-table tr.nobg{
  background-color: var(--background-lighter);
}

.layout-table tr.full{

}

.layout-table tr.split{

}


.layout-table td.full{
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0;
}

.layout-table td.mid{
  width: 80%;
  min-width: 80%;
  max-width: 80%;
  padding: 0;
}

.layout-table td.side{
  width: 10%;
  min-width: 10%;
  max-width: 10%;
  padding: 0;
}

.layout-table td.side.left{

}

.layout-table td.side.right{

}
/*#endregion BaseLayout*/

/* ========== Background Text ========== */
.background-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.001);
  z-index: -1;
  pointer-events: none;
}


/* ========== Body Text Styling ========== */
.body-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.body-text table,
.body-text .bordered-table {
  margin: 20px;
  padding: 20px;
  max-width: 90%;
  text-align: justify;
  line-height: normal;
  border-collapse: collapse;
}

.body-text .bordered-table {
  border: 2px solid var(--secondary-dark);
}

.body-text td,
.body-text th,
.body-text tr {
  padding: 2px;
  text-align: justify;
  line-height: normal;
}

.body-text .bordered-table td,
.body-text .bordered-table th,
.body-text .bordered-table tr {
  border: 2px solid var(--secondary-dark);
}

.body-text th,
.body-text .bordered-table th {
  text-align: center;
}

.body-text table a {
  color: var(--secondary);
  text-decoration: none;
}

/* ========== Paragraphs, Images, Lists, and Divs ========== */
.body-text div,
.body-text section,
.body-text p {
  display: flex;
  max-width: 80%;
  color: var(--secondary);
  text-align: right;
  margin: 10px 0;
}

.body-text p {
  max-width: 100%;
}

.body-text p.justp {
  max-width: 80%;
  text-align: justify;
}


.body-text.r{
  background-color: var(--secondary);
}

.body-text.r,
.body-text.r ul,
.body-text.r li,
.body-text.r p {
  color: var(--background-light);
}

.body-text.r h2{
  color: var(--background-lighter);
}

.body-text ul{
  max-width: 80%;
  color: var(--secondary);
  text-align: left;
  margin-left: 15%;
  align-self: normal;
}

.body-text img {
  display: flex;
  max-width: 100%;
  margin: 10px 0;
  text-align: right;
  border-radius: 11.575552%;
}

/* ========== Half Layouts ========== */
.body-text .half div,
.body-text .half p,
.body-text .half ul,
.body-text .half h1,
.body-text .half h2,
.body-text .half img {
  display: flex;
  max-width: 80%;
  margin: 25px;
  flex: 1;
  text-align: justify;
}

.body-text h1,
.body-text h2 {
  font-weight: 600;
  display: flex;
  text-align: center;
  color: var(--background-lighter);
}

.body-text h1 {
  font-size: 55px;
  max-width: 90%;
}

.body-text h2 {
  font-size: 40px;
  font-weight: 500;
  max-width: 90%;
  color: var(--secondary-dark);
  text-align: left;
}

.body-text .half h1,
.body-text .half h2 {
  max-width: 60%;
}

.body-text .half2 {
  display: flex;
  max-width: 50%;
  margin: 25px;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.body-text .half2 h2 {
  margin-left: 5%;
  text-align: left;
}

.body-text .half2 p {
  text-align: justify;
}


/* ========== Marquee ========== */

.marquee-wrapper{
  text-align:center;
}
.marquee-wrapper .container{
  overflow:hidden;
}
.marquee-inner span{
  float:left;
  width:50%;
}
.marquee-wrapper .marquee-block{
  --total-marquee-items:7;
  height: 150px;
  width: calc(250px * (var(--total-marquee-items)));
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto;
  padding: 30px 0;
}
.marquee-inner{
  display: block;
  width: 200%;
  position: absolute;
}
.marquee-inner p{
  font-weight: 800;
  font-size: 30px;
  font-family: cursive;
}
.marquee-inner.to-left{
  animation: marqueeLeft 25s linear infinite;
}
.marquee-inner.to-right{
  animation: marqueeRight 25s linear infinite;
}
.marquee-item{
  width: 230px;
  height: 100px;
  display: inline-block;
  margin: 0 10px;
  float: left;
  transition: all .2s ease-out;
  object-fit: contain;
  /*background: var(--secondary)*/;
}

.marquee-item img{
  max-width: 230px;
  max-height: 100px;
  object-fit: contain;
}

@keyframes marqueeLeft{
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes marqueeRight{
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}