* {
  font-family: 'Lexend', 'Century Gothic', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-decoration: none;
  font-size: 100%;
  hyphens: none;
  line-height: 1.5;
  
}

a {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: inherit;
}

a:hover {
  color: #191919;
  cursor: pointer;
}

p{
  font-weight: 300;
}

#body {
  width: 100%;
  font-family: 'Lexend', 'Century Gothic';
  font-weight: 300;
  display: block;
  margin: 2vh 2vw 2vh 2vw;
  overflow-x: hidden;
  hyphens: none;
  background-color: #ebebeb;
}

.bold{
   font-weight: 600;
}



.split{
  height: 100%;
  width: 85vw;
  margin-left: 15vw;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  background-color: transparent;
float: right; 
}

.LL{
  right: 0;
}
.RR{
  left: 0;
}

td {
  cursor: pointer;
  padding: 0vh 1vw 0vh 0vw;

}

.divFix{
  display: flex;
  flex-wrap: wrap;
  width: 14vh; 
  max-width: 14vw; 
  color: #888;
  text-wrap: nowrap;
}

@media screen and (max-width: 1920px) {
  .divFix{
    font-size: 90%;
  }
}

@media screen and (max-width: 1500px) {
  .divFix{
    font-size: 80%;
  }
}

  @media screen and (max-width: 1080px) {
    .divFix{
      font-size: 70%;
    }
  
}

@media screen and (max-width: 800px) {
  .divFix{
    font-size: 60%;
  }
  .divL{
    float: none;
  }
  .divR{
    float: none;
  }

}

@media screen and (max-width: 400px) {
  .divFix{
    font-size: 40%;
  }

}

.divFix div{
  width: 13vh;
  max-width: 13vw;
}

object {
  position: fixed;
  height: 93%;
  width: 100%;
  margin: 2vh 0vw 2vh 0vw;
  float: left;
  justify-content: stretch;
  color: #888;
}

.divLogo{
  position: fixed;
  bottom: 1vh;
  width: 13vh;
  max-width: 13vw;
  cursor: pointer;
}

#wrapper {

  /*border: 1px solid orange;*/
  display: table;
  width: 65vw;
  margin: 0vw 20vw 0vw 20vw;
height: fit-content;

}

.divL {
  position: relative;
  text-align: right;
  width: 30vw;
  color: #888;
  scroll-behavior: smooth;
  overflow: hidden;
  display: table-cell;
  padding: 1vw;
}

.divR { 
  position: relative;
  text-align: left;
  width: 30vw;
  color: #191919;
  scroll-behavior: smooth;
  display: table-cell;
  padding: 1vw;


  /*border: 1px solid rebeccapurple;*/
}

.divR div{
  position: absolute;
  padding-right: 8vw;
} 

.divLflex {
  position: absolute;
  right: 50vw;
  top: 0vh;
  flex-direction: row-reverse;
  scroll-behavior: smooth;
  display: flex;
  width: 28vw;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;
  overflow: hidden;
 
}

.divLflex>div {
  width: 130px;
  margin: 1vw;
  text-align: center;
  cursor: pointer;
}

.divRflex {
  
  right: 50vw;
  top: 0vh;
  scroll-behavior: smooth;
  display: flex;
  width: 30vw;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;
  overflow: hidden;
  
}

.divRflex>div {
  
  text-align: left;
  cursor: pointer;
  padding: 1vh;
}

.divBflex {
  position: absolute;
  right: 50vw;
  top: 6vh;
  flex-direction: column;
  flex-direction: row-reverse;
  scroll-behavior: smooth;
  display: flex;
  width: 33vw;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;
  color: #888;
  overflow: hidden;
  margin-right: 1vw;


}

.divBflex>div {

  width: 600px;
  height: 400px;
  margin: 1vw;
  text-align: right;
  cursor: pointer;
}

.divBflex>div:hover {
  opacity: 0.93;
}

.divCflex {
  position: absolute;
  left: 50vw;
  top: 6vh;

  flex-direction: column;
  scroll-behavior: smooth;
  display: flex;
  width: 33vw;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;
  color: #191919;
  
  overflow: hidden;
  margin-left: 1vw;
}

.divCflex>div {
  
  width: 600px;
  height: 400px;
  margin: 1vw;
  text-align: left;

}


/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1200px;
  
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1200px;
  text-align: center;
  color: #ebebeb;
  padding: 13px 0;
  height: 150px;
  
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 6vh;
  right: 4vw;
  color: #888;
  font-size: 60px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover{
  color: #f3f3f3;
  text-decoration: none;
  cursor: pointer;
}

.close:focus {
  color: #ebebeb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 1199px) {
  .modal-content {
    width: 100%;
  }
  .divRflex{
    width: 40vw;
  }

  .divRflex div{
    padding: 0vw 13vw 0vw 8vw;
    
    text-align: center;
  }

  .divR{
    width: 40vw;
  }

  
}



.show {
  display: block;
}