:root{
    --main-black:#16181a;
    --main-black-RGBA:22,25,30,.5;
}

html {
    scroll-behavior: smooth;
  }

body {
    background-color:var(--main-black, #111315);;
    margin: 0;
    font-family: Segoe UI,Arial, Helvetica, sans-serif;
  }

a:hover {
    text-decoration: underline;
  }


#AR{
    position: relative;
    top: -250px;
}

#Live{
    position: relative;
    top: -250px;
}

#Graphic{
    position: relative;
    top: -100px;
}

#Short-Video{
    position: relative;
    top: -250px;
}

#logonav{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2.5vh;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.Clickable{
    cursor: pointer;
}

.TOP{
    position: relative;
    z-index: 100;
}

.OP{
    opacity: .3;
}

.navmain{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 80px;
    overflow: hidden;
    justify-content: space-between;
    z-index: 1000;

    /*background-color: var(--main-black, #111315);;*/

    box-shadow: 0px 0px 0px 0px #000;
    transition: 900ms;
  }

.nav-left {
    padding-left: 80px;
    float: left;
    position: relative;
    height: auto;
    width: 25%;
    margin-top: 28px;
    
    }

.nav-right {
    padding-right: 80px;
    float: right;
    position: relative;
    height: auto;
    margin-top: 28px;
    }

.Logo {
    height: 25px;
    width: auto;
    
}
.nav-text {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

.nav-contact {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 40px;
    margin-left: 20px;
    background-color: var(--main-black, #111315);;
    border-radius: 20px;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-right: 25px;
    padding-left: 25px;
    box-shadow: 0px 0px 10px 1px #b2d1ff;
    font-weight: bold;
    transition: background-color 80ms ease-in 20ms;
}
.nav-contact:hover {
    background-color: #b2d1ff;
    box-shadow: 0px 0px 0px 0px #b2d1ff;
}

.page-container {
    position: relative;
}

.divider {
    width: 60vw;
    height: 2px;
    background: rgba(255,255,255,0.2);
    margin-left: 20vw;
    margin-right: 20vw;
}

.landing {
    z-index: 5;
    height: 90vh;
    width: 100%;
    background-color: var(--main-black, #111315);;
    box-shadow: 0px 0px 40px 0px #000;
    overflow: hidden;
    position: relative;

}

.landing-text {
    z-index: 10;
    max-width: 550px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.vv-placeholder-landing1{
    aspect-ratio: 9/16;
    width: 18%;
    margin: 0px;
    background-color: #1e242d;
    border-radius: 15px;
    z-index: 2;
    position: absolute;
    top: 200px;
    left: 10%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation: LUD1 60s infinite ease-out;
    background-image: url(Assets/Videos/Pilsharken.png);
    background-position: center;
    background-size: cover;
}

@keyframes LUD1 {
    0% {
        top: 200px;
    }
    50% {
        top: 800px;
    }
    100%{
        top: 200px;
    }
}


.vv-placeholder-landing2{
    aspect-ratio: 9/16;
    width: 18%;
    margin: 0px;
    background-color: #1e242d;
    border-radius: 15px;
    z-index: 2;
    position: absolute;
    top: 570px;
    left: 30%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation: LUD2 60s infinite ease-out;
    background-image: url(Assets/Videos/Bashnuntingyou.png);
    background-position: center;
    background-size: cover;
}

@keyframes LUD2 {
    0% {
        top: 570px;
    }
    50% {
        top: -100px;
    }
    100%{
        top: 570px;
    }
}

.vv-placeholder-landing3{
    aspect-ratio: 9/16;
    width: 18%;
    margin: 0px;
    background-color: #1e242d;
    border-radius: 15px;
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation: LUD3 60s infinite ease-out;
    background-image: url(Assets/Videos/OOTD.png);
    background-position: center;
    background-size: cover;
}

@keyframes LUD3 {
    0% {
        top: 0px;
    }
    50% {
        top: 600px;
    }
    100%{
        top: 0px;
    }
}

.vv-placeholder-landing4{
    aspect-ratio: 9/16;
    width: 18%;
    margin: 0px;
    background-color: #1e242d;
    border-radius: 15px;
    z-index: 2;
    position: absolute;
    top: 350px;
    left: 70%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation: LUD4 60s infinite ease-out;
    background-image: url(Assets/Videos/HEMAtaarttopper.png);
    background-position: center;
    background-size: cover;
}

@keyframes LUD4 {
    0% {
        top: 350px;
    }
    50% {
        top: 800px;
    }
    100%{
        top: 350px;
    }
}

.vv-placeholder-landing5{
    aspect-ratio: 9/16;
    width: 18%;
    margin: 0px;
    background-color: #1e242d;
    border-radius: 15px;
    z-index: 2;
    position: absolute;
    top: 700px;
    left: 90%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation: LUD5 60s infinite ease-out;
    background-image: url(Assets/Videos/salsa.png);
    background-position: center;
    background-size: cover;
}

@keyframes LUD5 {
    0% {
        top: 700px;
    }
    50% {
        top: 0px;
    }
    100%{
        top: 700px;
    }
}

.short-video {

    height: 90vh;
    width: 100%;
    z-index: 1;

}

.wrapper-title {
    display: grid;
    place-content: center;
}

.short_video-text {
    padding-top: 50px;
    padding-bottom: 20px;
    width: 100%;
}

.wrapper-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 20px;
}

.filter-button {
    background-color: var(--main-black, #111315); ;
    border-style: solid;
    color: #f2f2f2;
    border-color: #a2a2a2;
    border-width: 1px;
    padding: 5px 35px;
    padding-bottom: 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    font-family: Segoe UI,Arial, Helvetica, sans-serif;
    margin: 10px;
    border-radius: 20px;
    transition: background-color 150ms ease-out 20ms;
    cursor: pointer;
}

.filter-button:hover {
    background-color: #b2d1ff;
    border-color: #b2d1ff;
    transition: background-color 0ms ease-out 20ms;
    cursor: pointer;
}

.filter-button-On {
    background-color: var(--main-black, #111315); ;
    border-style: solid;
    color: #f2f2f2;
    border-color: #a2a2a2;
    border-width: 1px;
    padding: 5px 35px;
    padding-bottom: 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    font-family: Segoe UI,Arial, Helvetica, sans-serif;
    margin: 10px;
    border-radius: 20px;
    transition: background-color 150ms ease-out 20ms;
    background-color: #b2d1ff;
    border-color: #b2d1ff;
    transition: background-color 0ms ease-out 20ms;
}

.wrapper-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 20px;
}

.vv-placeholder{
    aspect-ratio: 9/16;
    width: 230px;
    margin: 10px;
    background-color: #1e242d;
    border-radius: 15px;
    background-position: center;
    transition-duration: 150ms;
    background-size: 101%;
}

.vv-placeholder:hover{
    background-size: 105%;
}

.Clientlogo{
    margin: 20px;
    background-image: url("Assets/RutgerDragt-Text.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 30px;
    width: auto;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 10px #111);
    filter: drop-shadow(0px 0px 10px #111);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

}

.vv-placeholder:hover .Clientlogo{
    opacity: 1;
    height: 40px;
}

/* -------------------------------------------------------------------------------------------------- */
.fullscreen{
    height: 20px;
    width: 20px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    opacity: 0;
    margin: 15px;
    background-image: url(Assets/fullscreen.svg);
    background-position: center;
    background-size: cover;
    transition: 100ms;
    pointer-events: none;
  }
  
  .GRimg:hover ~ .fullscreen{
    opacity: 1;
  }


.VideoPlayer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.GRimg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: 1s;
}

.graphic {
    height: 70vh;
    width: 100%;
    background-color: var(--main-black, #111315);;
    z-index: 1;
}

.graphic-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

}
.graphic-split {
    width: 50%;
    height: 100%;
    /* overflow: hidden; */
    flex: 1 0 100px;
}

.GraphicHolder1 {
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    aspect-ratio: 9/16;
    background-color: #1e242d99;
    border-radius: 15px;
    top: 17vh;
    height: 35vh;
    transform: translate(12px, 0);
    
}

.GraphicHolder2 {
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    aspect-ratio: 9/16;
    background-color: #1e242d;
    border-radius: 15px;
    top: 10vh;
    height: 50vh;
    transform: translate(125px, 0);
}

.GraphicHolder3 {
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    aspect-ratio: 9/16;
    background-color: #1e242d99;
    border-radius: 15px;
    top: 17vh;
    height: 35vh;
    transform: translate(310px, 0);
}

.Back{
    z-index: 100;
    -ms-transform: translate(-50%, -50%);
    top: 17vh;
    height: 35vh;
    transform: translate(12px, 0);
}

.Forward{
    z-index: 100;
    -ms-transform: translate(-50%, -50%);
    top: 17vh;
    height: 35vh;
    transform: translate(310px, 0);
    background-color:rgba(0, 0, 0, 1);
}

.GraphicHolder {
    position: absolute;
    aspect-ratio: 9/16;
    /* background-color: #1e242d99; */
    border-radius: 15px;
    transition: 1s;
}

.GraphicHolder2 {
    position: absolute;
    aspect-ratio: 9/16;
    border-radius: 15px;
    transition: 100ms;
    opacity: 0;
}

.Key1{
    -ms-transform: translate(-50%, -50%);
    top: 17vh;
    height: 35vh;
    transform: translate(12px, 0);
    background-color: #1e242d99;
    z-index: 2;
    opacity: 0.7;
    transition: 1s;
}

.Forward:hover ~ .Key3{
    opacity: 1;
    scale: 103%;

}

.Back:hover ~ .Key1{
    opacity: 1;
    scale: 103%;

}

.Key2{
    -ms-transform: translate(-50%, -50%);
    top: 10vh;
    height: 50vh;
    transform: translate(125px, 0);
    background-color: #1e242d;
    z-index: 100;
    z-index: 3;
    
}

.Key3{
    -ms-transform: translate(-50%, -50%);
    top: 17vh;
    height: 35vh;
    transform: translate(310px, 0);
    background-color: #1e242d99;
    z-index: 2;
    opacity: 0.7;
    scale: 100%;
}

.Key4{
    -ms-transform: translate(-50%, -50%);
    top: 22vh;
    height: 25vh;
    transform: translate(184px, 0);
    background-color: #1e242d;
    opacity: 0;
    z-index: 0;
    
}

.graphic-wrapper-title{
    z-index: 1;
    height: 100px;
    width: auto;
    margin: 0;
    position: relative;
    top: 50%;
    left: 80%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.graphic-text {
    position: relative;
    height: 100px;
    z-index: 100;
}

/* .GR-Modal-Content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
} */
#Modal-GR-img,
#Modal-GR-video {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  object-fit: contain;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#Modal-GR-video{
    aspect-ratio:9/16;
}

#Modal2{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

#Modal3{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

/* ------------------- */

.AR-text {
    padding-top: 50px;
    padding-bottom: 20px;
}

.live {
    height: 90vh;
    width: 100%;
    background-color: var(--main-black, #111315);;
    z-index: 1;
}

.hv-placeholder{
    width: 818px;
    height: 460px;
    margin: 10px;
    background-color: #1e242d;
    border-radius: 15px;
}
.hv-placeholder video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.AR {
    height: 90vh;
    width: 100%;
    background-color: var(--main-black, #111315);;
    z-index: 1;
}



.footer {
    height: 30vh;
    width: 100%;
    background-color: var(--main-black, #111315);;
    box-shadow: 0px 0px 40px 1px #000;
    z-index: 10;
}

.Footerside1{
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Footerside2{
    width: 23vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Footerright{
    width: 50vw;
    position: relative;
    float: right;
}

.footercode{
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 30vw;
    top: 45%;
    left: 50%;
}

.footercode2{
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 2vw;
    object-fit: cover;
    top: 46%;
    left: 50%;
    overflow: hidden;
}

.footerimg{
    width: 30vw;
    transform: translate(0, -1.2vw);
    animation: code1 10s infinite ease;
}

@keyframes code1 {
    0% {
        transform: translate(0, -1.2vw);
    }
    25% {
        transform: translate(0, -3.4vw);
    }
    50%{
        transform: translate(0, -5.6vw);
    }
    75%{
        transform: translate(0, -3.4vw);
    }
    100%{
        transform: translate(0, -1.2vw);
    }
}

.TITLE{
    width: 100%;
}

.crosss{
    position: absolute;
    top: 10px;
    right: 50px;
    margin: 5px;
    width: 50px;
    height: 50px;
    z-index: 3000;
    background-image: url(Assets/Cross.svg);
    opacity: .5;
    scale: 100%;
    transition: 80ms;
    pointer-events: none;
}


.crosss:hover{
    opacity: 1;
    scale: 105%;
}

.lets{
    position: absolute;
    top: 75%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
}
.lets p {
    text-align: center;
    font-weight: bold;
    font-size: 10px;
}

/* Cloud above pointer */
.hover-element {
    position: relative;
  }
  
  .text-cloud {
    position: absolute;
    -ms-transform: translate(-25%, -390%);
    transform: translate(-25%, -390%);
    background-color:var(--main-black);
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, .5);
    white-space: nowrap;
    opacity: 0;
    z-index: 2000;
    border-radius: 10px;
    color: #f2f2f2;
    transition: 250ms;
  }
  
  .hover-element:hover .text-cloud {
    opacity: 1;
    -ms-transform: translate(-25%, -400%);
    transform: translate(-25%, -400%);
  }

  /* Cloud above pointer */