/* GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #080808;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

/* HEADER */
header {
    position: fixed;
    top: 25px;
    height: 5%;
    width: 100%;
    font-size: 1.5vh;
    transform: translateY(-50%);
    z-index: 999;
}

.divHeader {
    height: 100%;
    width: 100%;
}

header:hover {
    cursor: pointer;
}

.contentH {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80%;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.Title {
    color: #727272;
    transition: color 1s ease;
}

.active {
    color: #E0E0E0;
}

/* MAIN CONTAINER */
main {
    display: flex;
    flex-direction: row;
    width: 500vw;
    height: 100vh;
    position: relative;
    top: 40px;
}

/* PAGE */
.page {
    height: 100vh;
    width: 100vw;
    position: relative;
}

/* VIDEO CONTAINER */
.containVid {
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100%;
}

.vid {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 80%;
    width: 69%;
}

.vidVanmoof {
    height: 100%;
    width: 100%;
}

/* DESCRIPTION */
.descVanmoof {
    width: 70%;
    position: relative;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    color: #727272;
    text-align: center;
    font-weight: lighter;
    font-size: 1.267vh;
    line-height: 20px;
}

.parVan {
    margin-top: 1%;
}

/* VIDEO BOX GRID */
.boxQ {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 68%;
	/* height: 81%; */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.box {
	width: 49.5%;
	height: 40%;
	position: relative;
}

.vidd {
    width: 100%;
    height: 100%;
}

/* SNAPSHOTS */
.snapshots {
    position: absolute;
    bottom: -117%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#snapshotsT {
	text-align: center;
	color: #727272;
	font-weight: lighter;
	text-transform: uppercase;
	font-size: 15px;
	position: relative;
	bottom: 10px;
}

.containSnap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
}

.snap {
    width: 31%;
    height: 80%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#snap1, #snap2, #snap3 {
    object-fit: contain;
    height: 100%;
    transform: translateX(-25px);
}

.boxQ{pointer-events: none;}

/* -----------------------------------
   MEDIA QUERIES — MOBILE RESPONSIVE
----------------------------------- */

@media (max-width: 768px) {
  /* Layout switches from horizontal to vertical */
  
  main {
    position: relative;
    top: 40px;
    flex-direction: column;
    width: 500vw;
    height: 150vh;
    max-height: 2532px;


  }
  body{
    height: 150vh;
    max-height: 150vh;
  
  }

  .contentH{
    width: 100vw;
    height: 5vh;
    font-size: 1vh;
    display: flex;
    left: 50vw;
    transform: translate(-50%,-50%);

  }

  .page {
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 40px;
    position: relative;
  }

  #page1{
    position: absolute;
    top: 0;
    transform: translateX(100%);
  }

  #page2{
    position: absolute;
    top: 0;
    transform: translateX(200%);

  }

  #page3{
     position: absolute;
    top: 0;
    transform: translateX(300%);

  }

  #page4{
    position: absolute;
    top: 0;
    transform: translateX(400%);

  }

  

  /* Video container and description */
  .containVid,
  .vid,
  .descVanmoof {
    width: 100vw;
    margin: 0 auto;
    left: auto;
    transform: none;
  }

  .vid {
    height: auto;
    max-width: 100%;
  }

  .descVanmoof {
    font-size: 1.2vh;
    line-height: 1.5;
    text-align: center;
    width: 90vw;
  }

  /* Video grid layout fix */
  .boxQ {
    position: relative !important;
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    top: 45%;

  }

  /* Each box containing a video */
  .box,
  .box1, .box2, .box3, .box4 {
    position: relative !important;
    width: 90vw !important;
    max-width: 100%;
    height: auto !important;
    bottom: 800px;
    left: 0px;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    padding: 0;
  }

 

  /* Video itself */


  /* Snapshots section */
  .snapshots {
    position: fixed !important;
    z-index: -5;
    width: 0px;
    height: 0px;
    margin: 0px auto 0;
  }

  .containSnap {
    height: 0px;
    width: auto;
    align-items: center;
    gap: 15px;
  }

  .snap {
    width: 0%;
    height: auto;
  }

  /* Header and navigation */
  header {
    font-size: 2vh;
    position: fixed;
    z-index: 99999;
  }
.vidd{
  pointer-events: none;
}

}



.box {
    position: static !important;


}