@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
	--green: #BEE900;
	--gray: #808080;
	--purple: #6743FF;
	--font: #ffffff;
	--root: var(--green);
}

.p-200 { padding-top:200px; padding-bottom:200px; }
.pt-200 { padding-top:200px; }
.pb-200 { padding-bottom:200px; }

.p-100 { padding-top:100px; padding-bottom:100px; }
.pt-100 { padding-top:100px; }
.pb-100 { padding-bottom:100px; }

.p-50 { padding-top:50px; padding-bottom:50px; }
.pt-50 { padding-top:50px; }
.pb-50 { padding-bottom:50px; }

@media screen and (max-width:991px) {
	.p-200 { padding-top:100px; padding-bottom:100px; }
	.pt-200 { padding-top:100px; }
	.pb-200 { padding-bottom:100px; }

	.p-100 { padding-top:50px; padding-bottom:50px; }
	.pt-100 { padding-top:50px; }
	.pb-100 { padding-bottom:50px; }

	.p-50 { padding-top:25px; padding-bottom:25px; }
	.pt-50 { padding-top:25px; }
	.pb-50 { padding-bottom:25px; }
}

.cl-green {
	color:var(--green);
}



body, html {
	width:100%;
	overflow:auto;
	margin:0px auto;
	font-family:manrope !important;
	background-color:black;
  color:white;
}

p {
  color:white;
  font-size:16px;
  line-height:26px;
			letter-spacing:.5px;
}

h1 {

  font-size:44px;
  line-height: 120%;
  text-transform: uppercase;
  margin:25px 0;
  font-weight:800;
  color:var(--green);
	letter-spacing:2px;
}

h2 {
  font-size:44px;
  font-weight:500;
	letter-spacing:2px;
}

h3 {
  font-size:32px;
	letter-spacing:2px;
	font-weight:500;
}

h4 {
  color:white;
  font-size:25px;
  font-weight:500;
	letter-spacing:2px;
}

  h4 + p {
    margin-top:25px;

  }

ul {
  padding-left:16px;
}
ul li {
  padding-bottom:20px;
}
  ul li::marker {
    color:var(--green);
  }


  .button {
    color:#ffffff !important;
    background-color:black;
    padding:0px 15px;
    text-align:center;
    height:50px !important;
    line-height:48.6px !important;
    margin:10px auto;
    cursor:pointer;
    border-radius:50px;
    border:1.7px solid var(--purple);
    text-transform:uppercase;
    font-weight:600;
    display:inline-block;
		background-color:transparent;
    background: linear-gradient(0deg,var(--purple) -30%, rgba(0,0,0,0) 100%);
    transition:.3s;

  }
    .button:active, .video.selected .button {

      background: linear-gradient(0deg,var(--purple) 0%, rgba(255,255,255,.1) 100%);
      box-shadow:0px 0px 30px 0px var(--purple);
    }

		.button:after {
			display:none;
		}


  .top-bar {
    position:fixed;
    top:0;
    left:0;
    height:100px;
    width:100%;
    overflow:hidden;
    padding:25px 0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    display:none;
  }
    .top-bar .logo {
      height:100%;
      pointer-events:auto;
    }
    .top-bar .logo img {
      margin:0px auto;
      display:block;
      height:100%;
    }


#nav {
	position:fixed;
	top:50%;
	left:20px;
	transform:translateY(-50%);
	z-index:1000;
}
	#nav:after {
		content:" ";
		aspect-ratio:1;
		height:150%;

		position:absolute;
		top:-25%;
		left:-100%;
		z-index:-1;
		pointer-events:none;
		display:block;

		background: radial-gradient(circle,rgba(255,255,255, 0.1) 0%, rgba(255,255,255, 0) 66%);
	}
	#nav .item {
		display:block;
		color:rgba(255,255,255,.5);
		text-decoration:none;
		transition:.3s;
		padding-left:25px;
		position:relative;
		overflow:visible;
		font-size:14px;
		height:50px;
		line-height:50px;
		text-shadow:-10px 0px 10px rgba(0,0,0,.3);
		outline:none;
	}
	#nav .item:hover {
		color:white;
	}
	#nav .item.selected {
		color:var(--green);
		transform:scale(1);
		font-size:16px;
	}

		#nav .item:before {
			content:" ";
			width:6px;
			height:6px;
			border-radius:50%;
			background-color:var(--green);
			box-shadow:0px 0px 0px 1px black;
			display:block;
			position:absolute;
			left:5px;
			top:calc(50% - 3px);
			transition:.3s;
		}

		#nav .item.selected:before {
			box-shadow:0px 0px 0px 1px var(--green);
			background-color:transparent;
		}

		#nav .item:after {
			content:" ";
			width:1px;
			height:calc(100% - 6px);
			left:7.5px;
			top:calc(50% + 3px);
			position:absolute;
			display:block;
			background: rgba(255,255,255,.4);
			z-index:-1;
		}
		#nav .item:last-of-type:after {
			display:none;
		}
@media screen and (max-width:1199px) {
	#nav {
		display:none;
	}
}
  header {
    background-image:url('../../img/powernapvr/Header_LP_PowernapVR.png');
    background-size:cover;
    background-position:center;
    box-shadow:inset 0px -150px 100px -50px black;
    padding-bottom:100px;

  }
    header .logo {
      aspect-ratio:1;
      height:150px;
      background-image:url('../../img/powernapvr/powernap_logo_title.png');
      background-size:contain;
      background-position:center;
      background-repeat:no-repeat;
      margin:100px auto 100px auto;
    }

    header .payoff {
      width:150px;
      aspect-ratio:1;
      border-radius:50%;
      background-image:url('../../img/powernapvr/powernap_payoff.png');
      background-size:contain;
      background-position:center;
      background-repeat:no-repeat;
      margin-top:100px;
      animation:rotate 16s linear infinite;
    }

    @keyframes rotate {
      0% { transform:rotate(0deg); }
      100% { transform:rotate(360deg); }
    }



    .quote {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:50px;
    }
      .quote .img {
        width:300px;
        aspect-ratio:1;
        border-radius:50%;
        background-image:url('../../img/powernapvr/portret_paul.png');
        background-size:cover;
        background-position:center bottom;
        background-color:white;
      }

      .quote .text p {
        font-size:22px;
      }


.icon-block {
    color:#ffffff !important;
    background-color:black;
    padding:25px;
    text-align:center;
    cursor:pointer;
    border-radius:50px;
    display:inline-flex;
		gap:20px;
    transition:.5s;
			 border:2px solid transparent;
		flex-wrap:wrap;
		width:calc(100% - 50px);
		margin:25px auto;


  }
    .icon-block.active {
			 border:2px solid var(--purple);
			 cursor:default;
    	background: linear-gradient(0deg,var(--purple) -40%, rgba(0,0,0,0) 100%);
    }

		.icon-block .icon {
			width:100px;
			height:100px;
			border-radius:50%;
			background-color:var(--green);
			background-size:100% auto;
			background-position:50% 0;
			background-repeat:no-repeat;
			transition:.5s;
		}
			.icon-block.active .icon {
				background-color:var(--purple);
				background-position:50% 100%;
			}
		.icon-block .text {
			flex:1;
		}
			.icon-block .text h4 {
				margin-top:30px;
			}
			.icon-block .text p {

				transform:translateY(-50%);
				opacity:0;
				transition:.5s;
			}
			.icon-block.active .text p {
				*animation:dropDown .5s 1;
				opacity:1;
				transform:translateY(0%);
			}

@keyframes dropDown {
	0% { margin-top:-30px; opacity:0; }
	100% { margin-top:0; opacity:1; }
}

.usp .img {
  width:80%;
  overflow:visible;
  position:relative;
  aspect-ratio:1/1.2;
  display:flex;
  align-items:flex-end;
  margin:20px auto;
}
  .usp .nr {
    border:2px solid var(--purple);
    width:60px;
    aspect-ratio:1;
    border-radius:50%;
    text-align:center;
    line-height:56px;
    color:white;
    font-size:25px;
    font-weight:700;
    margin:25px auto;
    padding:0;
    z-index:2;
    position:relative;
    background:black;
  }


.purple-banner {
  background-color:var(--purple);
	background-size:cover;
	background-position:center;
}
	.purple-banner#quote {
		background-image:url('../../img/powernapvr/Powernap BG 02.jpg')
	}
	.purple-banner#benc {
		padding:100px 0px 150px 0px;
	  margin-bottom:-125px;
		background-image:url('../../img/powernapvr/Powernap BG 03.png')
	}
  .purple-banner .logo-wit {
    width:100%;
    max-width:350px;
  }




  /* formulier */

  .p-form {

  	height:auto;

  }
  	.p-form h2 {
  		color:white;
  		padding:0;

  	}
  	.p-form p {
  		color:white;
  	}


  .p-form label {
  	color:#aaa;

    margin-top:0px;
  	font-weight:normal;
    width:100%;
    position:relative;
    display:inline-block;
  }

  .p-form .form-control {
  	width: 100% !important;
  	height:50px !important;
  	line-height:47px;
  	border:0;
  	margin:0;
  	display:block;
  	box-shadow:none;
  	padding: 0px 25px;
  	border-radius:0;
  	-webkit-appearance:none;
  	font-size:16px;
  	color:white;
  	background-color:transparent;
  	border:1.7px solid var(--gray);
  	border-radius:50px;
  	margin:10px 0;
  	font-weight:600;

  	transition:.5s;
  }
  .p-form .form-control.hidden {
  	display:none;
  }


  .form-control::placeholder, .form-control:invalid {
    color: var(--gray);
  }

  	.form-control:focus {
  		border-color:var(--green);
  		box-shadow:0px 0px 30px -10px var(--green), inset 0px 0px 20px -10px var(--green);
  	}

  .p-form input[type="submit"]{

  	font-size:16px;
  	padding:0px 35px;

  }

  .p-form #message {
  	color:#000000;
  	text-align:center;
  	padding-bottom:20px;
  }

  .p-form .error {
  	border:2px solid #ff0000;
  	box-shadow:0px 0px 30px -3px #ff0000, inset 0px 0px 20px -3px #ff0000;

  }
  .wpcf7-response-output {
      background:transparent;
      color:white;
      text-align:center;
  }
  form[data-status="sent"] .p-form {
    display:none;
  }



footer {
  min-height:200px;
  height:auto;
  border-bottom:70px solid var(--green);
}
  footer h2 {
    font-weight:800;
  }




  .plyr {
	  --plyr-color-main:var(--green);
	}

	.plyr > button.plyr__control:hover {
	  transform:translate(-50%, -50%);
	}
	.plyr input[type=range] {
	  background:transparent !important;
	}
	.plyr .plyr__poster {
	  background-size:cover;
	}
	.plyr .plyr__menu__container .plyr__control>span {
	  color:var(--text_color);
	}
	.plyr .plyr__controls__item.plyr__menu {
	  display:none !important;
	}





@media screen and (max-width:991px) {
  header .payoff {
    margin-top:30px;
  }

  .usp .img {
    max-width:150px;
  }
    .usp .nr {
      margin-top:-50px;
    }

  .purple-banner#benc {
    margin-bottom:0;
    padding:50px 0px;
  }
}




/* Demo */
.demo {
	width:100%;
	aspect-ratio:1 / 56;
	max-height:700px;

	display:flex;
	align-items:center;
	justify-content: center;
	position:relative;
	overflow:hidden;
	z-index:1;
}
	.demo .buttons {
		width:100%;
		display:flex;
		gap:30px;
	}
		.demo .buttons .button {
			width:150px;
			pointer-events:none;
		}
		.demo .buttons.left .button:last-of-type,
		.demo .buttons.right .button:first-of-type {
			transform:scale(.8);
			opacity:.5;
		}

		.demo .buttons.left .button:first-of-type,
		.demo .buttons.right .button:last-of-type {
			background: linear-gradient(0deg,var(--purple) 0%, rgba(255,255,255,.1) 100%);
      box-shadow:0px 0px 30px 0px var(--purple);
			transform:scale(1.1);
		}

.card-cont {
  position: relative;
	display:block;
}


.card-cont .card:after {
	content:" ";
	width:70px;
	height:70px;
	position:absolute;
	top:calc(50% - 35px);
	left:calc(50% - 35px);
	*margin:30px auto;
	z-index:7;
	background-color:var(--green);
	border-radius:35px;
	display:block;
	background-image:url('../../img/powernapvr/swipe-icon-black.png');
	background-size:40%;
	background-position:center;
	background-repeat:no-repeat;
	animation: swipe 1s infinite;
	transition:.5s;
	cursor:grab;


}

.card {
  z-index: 2;
  position: relative;
  left: 0;
  top: 0;
  width: 260px;
  height: 140px;
  transform-origin: 50% 100%;
  border-radius:50%;
  overflow:hidden;
	border:0;
	margin:0px auto;
	background:transparent;
}
.card.reset {
  transition: transform 0.3s;
  transform: translateX(0) !important;
}
.card.reset .card__choice {
  transition: opacity 0.3s;
  opacity: 0 !important;
}
.card.inactive {
  transition: opacity 0.3s;
	opacity:0 !important;

}
.card.to-left {
  transform: translateX(-30rem) rotate(-30deg) !important;
}
.card.to-right {
  transform: translate(30rem) rotate(30deg) !important;
}
.card.below {
  z-index: 1;
}
.card__top {
  height: 20.5rem;
  padding-top: 4rem;
}
.card__img {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;


}

.card__img img {
	width:50%;
	height:100%;
	position:absolute;
	object-fit:cover;
	object-position:center;
	top:0;
	left:0;
}
	.card__img img:first-of-type {
		object-position:center left;
		*clip-path:polygon(0 0, 80% 0, 20% 100% ,0 100%);
	}
	.card__img img:nth-of-type(2) {
		left:50%;
		object-position:center right;
		*clip-path:polygon(80% 0%, 100% 0, 100% 100%, 20% 100%);
	}


.card__name {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}
.card__btm {
  height: 11.5rem;
  background: #FFFFFF;
}
.card__we {
  text-align: center;
  font-size: 2.2rem;
  line-height: 11.5rem;
}
.card__choice {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
	pointer-events:none;
	z-index:-1;

}

.card__choice  {
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center;
}
	.card__choice.m--reject  {
		background-image:url('../../img/powernapvr/Image_relax.jpg')
	}
	.card__choice.m--like  {
		background-image:url('../../img/powernapvr/Image_Activeren.jpg')
	}
/*
.card__choice:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  color: #fff;
  border-radius: 50%;
  box-shadow: -2rem -3rem #fff, 2rem -3rem #fff;
}
.card__choice:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 1.5rem;
  margin-left: -2rem;
  border: 0.6rem solid #fff;
  border-bottom: none;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}*/

.card__choice.m--like:after {
  transform: scaleY(-1);
}
.card__drag {
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: -webkit-grab;
  cursor: grab;
}
.tip {
  text-align: center;
  font-size: 2.2rem;
}

@keyframes swipe {
    0% { background-position:50% 50%; }
		25% { background-position:40% 50%;  }
		75% { background-position:60% 50%; }
		100% { background-position:50% 50%;  }
}

@keyframes dash {
    0% {
      transform: skew(-30deg,0deg) translateX(300%) scale(.8);
      opacity: 1;
    }

    40% {
      transform: skew(10deg,0deg) translateX(100%) scale(.9);
    }

    60% {
      transform: skew(10deg,0deg) translateX(-10px) scale(1.2);
    }

    70% {
      transform: skew(0,0deg) translateX(0) scale(1.3);
    }

    75% {
      transform: skew(0,0deg) translateX(0) scale(1.3);
    }

    90% {
      transform: skew(0,0deg) translateX(0) scale(.85);
    }

    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }


  @keyframes done-animating {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(2);
    }

    100% {
      transform: scale(1);
    }
  }



.no-select {

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}