/* General */

*{
  margin: 0;
  padding: 0;
  gap:0;
}

*:hover{
  cursor:default;
}

.info-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

.info-video:not(:hover) {
  opacity: 1;
}

.video-container:hover video {
  opacity: 1;
}

body{
  background-color: rgb(219, 219, 219);
  font-family: Poppins ,Arial;
  color:black;
  font-size: 2vh;
}

/* Background */

.background-video{
  position: absolute; 
  right: 0; 
  top: 0;

  opacity:1;
  /* top: -5vh; */
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -100;
  background-size: cover;
  overflow: hidden;
}

.background-video:not(:hover) {
  opacity: 1;
}

.hidden {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.visible {
  opacity: 1;
}

.popEffect {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.visible.popEffect {
  opacity: 1;
  transform: translateY(0);
}

/* Header */

.header {
  margin: 5px 5px 5px 5px;
  border-radius: 10px;
  z-index: 100;
  display:flex;
  height: 50px;
  width:99%;
  position: fixed;
  top:0;
  transition: top 0.30s, background-color 2s;
  background-color: transparent;
  opacity:0.9;
  justify-content:space-between;
}

header.visible {
  background-color: #333; 
}

.header > * {
  display: flex;
  flex: 0 0 100px;
  
  margin-top: 5px;
  width: 50px;
  height: 75%;
  align-items: center;
  justify-content: center;

  color:white;
  font-weight: 700;
  
  transition: opacity 0.15s;
  transition: background-color 0.15s;
}

.header-right {
  margin-right: 10vw;
  border-radius: 25px;
}

.header-left {
  margin-left: 10vw;
  border-radius: 25px;
}

.header-center {
  border-radius: 25px;
}

.header-right:hover {
  background-color: rgb(83, 83, 83);
  opacity: 0.75;
  cursor: pointer;
}

.header-center:hover {
  background-color: rgb(83, 83, 83);
  opacity: 0.75;
  cursor: pointer;
}

.header-left:hover {
  background-color: rgb(83, 83, 83);
  opacity: 0.75;
  cursor: pointer;
}

/* Body */

.main-container {
  display:flex;
  flex-direction: column;
  justify-content:space-between;
}
.logo-container {
  height: 100vh;
  color:white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
}

.logo {
  height: 100px;
  width: 100px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  line-height: 70px;

  font-size: 10vw;
  margin-bottom: 50px;

  transition: 0.5s
}

.logo:hover{
  -webkit-text-stroke: 2px #fff;
  color:transparent;
  cursor: default;
}

.bottom-logo {
  height: 100px;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  line-height:120px;

  font-size: 6vw;
  margin-bottom: 20vh;

  transition: 0.5s
}

.bottom-logo:hover{
  -webkit-text-stroke: 2px #fff;
  color:transparent;
  cursor: default;
}

/* Promotion */

.self-promo {
  padding: 22px 0px 37px 0;
  height: 17vh;
  width: 100%;
  background-color: purple;
  
  color:white;

  place-items: center;
  
  display:grid;
  grid-template-rows: repeat(3); 
}

.promo-item1 {
  font-size: 4vh;
  font-weight: bold;
  margin-bottom: -3vh;
}

.promo-item2 {
  font-size: 2vh;
}

.promo-item3 {
  color:rgb(219, 219, 219);
  font-size: 1.5vh;
  margin-top: 10px;
  display:flex;
  align-items: center;
  flex-direction: row;
}

.promo-item3 div {
  margin-left: 5px;
}

.promo-item3 img {
  height:30px;
  width:100%;
  transition: opacity 0.15s;
}

.promo-item3 img:hover {
  cursor: pointer;
  opacity:0.8;
}

/* spacer */

.spacer {
  margin-top: 17vh;
  margin-bottom: 17vh;
  height: 0;
  width:100%;
}

/* Contents */

.title-content{
  font-size: 60px;
  line-gap-override: 10px;
}

.introduction-container {
  margin-top: 15px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.text-container {
  text-align: center;
  padding-left:35px;
  padding-right:22px;
  height:100%;
  flex:3;
}

.line-break {
  display: block;
  content: "";
  border-top: 1px solid #000; 
  margin: 10px auto; 
  width: 99%; 
}


.image-fuji {
  border-radius: 15px;
  height:100%;
  margin-left: -7vw;
  transition: margin-left 0.65s;
}

.image-fuji:hover {
  margin-left: -10vw;
}

.image-container-right {
  height:100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  overflow: hidden;
  flex:1;
  transition: flex 0.65s;

  background-color: black;
  
  display: flex;
  justify-content: center; /* to center image responsive */
}

.image-container-right:hover {
  flex:2; 
}

.image-container-left {
  margin-left:-14px;
  border-radius: 15px;
  overflow: hidden;
  height:100%;
  flex:1;
  background-color: black;
  transition: flex 0.65s;

  display: flex;
  justify-content: center;
}

.image-container-left:hover {
  height:100%;
  flex:2; 
}

.info {
  margin-top: 17vh;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.references {
  font-size: 1.5vh;
  height: 500px;
  margin-top: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.table {
  margin-top: 15px;
  color:rgb(0, 0, 0);
  max-width: 80%;
  width: 80%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}

table.references {
  overflow: hidden;
  resize: both;
}

th, td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: left;
  white-space: nowrap; 
  overflow: hidden;    
  text-overflow: ellipsis;
}

th {
  background-color: #818181;
}

.footer{
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.footer a {
  color: #fff;
  text-decoration: none;
}


@media (min-aspect-ratio: 16/9) {
  body {
    font-size: 3vh;
  }

  .title-content{
    font-size: 60px;
  }

  .background-video{
    width:100%;
    height:auto;
  }

  .logo {
    margin-bottom:6vh;
  }
  
}

@media (max-width: 600px) {
  
}

@media (max-aspect-ratio: 16/9) {

  body {
    font-size: 2vh;
  }

  .header-left {
    margin-left: 7vw;
  }

  .background-video{
    height:100%;
  }

  .title-content{
    font-size: 5.5vh;
  }

  .info {
    margin-top: 24vh;
  }

  .logo {
    margin-bottom:15;
    font-size: 15vw;
  }

  .bottom-logo {
    margin-top:1vh;
    font-size: 8vw;
  }

  .promo-item1 {
    font-size: 4vh;
  }
  
  .promo-item2 {
    font-size: 2vh;
  }
  
  .promo-item3 {
    font-size: 1.5vh;
  }

  .references {
    font-size:2vh;
  }
}