/* INIZIO MIXINS */

@-ms-viewport{
  width: device-width;
}

::selection {
	color: #ec008c;
	background-color: white;
}

body {
	background: white;
	overflow-x: hidden;
}

* {
	font-family: 'Rubik', sans-serif;
	box-sizing: border-box;

}

a {
	text-decoration: none;
}

.wrapper-s {
	max-width: 1280px;
	margin: 0 auto;
	padding:  0 25px;
}

.wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding:  0 25px;
}

.hero {
	overflow-y: hidden;
	overflow-x: hidden;
    height: 100vh;
    position: relative;
}

video {
	width: 100vw;
}

/* FINE MIXINS */

/* ANIMAZIONI */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  
  -webkit-animation:fadeIn ease-in 1; 
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards; 
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

@keyframes moveUp {
  0% {
      transform: translate(0px,-150px);
      opacity: 0;
  }
  100% {
      transform: translate(0px,0px);
      opacity: 1;
  }
}

.move-up {
  animation:moveUp ease-in 1;
  animation-fill-mode:forwards;
  animation-duration: 0.4s;
}

.fade {
	opacity: 0;
}
/* FINE ANIMAZIONI */


.scroll-downs {
  position: absolute;
  right: 0;
  bottom: 7vh;
  left: 0;
  margin: auto;
  width :34px;
  height: 55px;
  z-index: 999;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}



/* HOME */
.sub-header:after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #0000008a;
	z-index: 2;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
} 

.claim {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 3vw;
    color: white;
    z-index: 3;
    /* vertical-align: middle; */
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

.claim > h1 {
	width: max-content;
	font-size: 8vw;
	letter-spacing: 8px;
	/*transform: scaleX(1.2);*/
	text-transform: uppercase;
	color: #f2f2f22b;
	 -webkit-text-stroke-width: 3px;
  	-webkit-text-stroke-color: white;
  	margin: 0 auto;
}

.hero-btn {
    width: max-content;
    display: inline-block;
    top: 70%;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 17px 49px;
    z-index: 999;
		position: absolute;
    text-align: center;
    background: transparent;
    border-radius: 6px;
    border: 2px solid white;
    transition: .4s;
}

.hero-btn > .hero-btn_link {
	letter-spacing: 2px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
}

.hero-btn:hover  {
	background-color: #ec008c;
	border: 2px solid #ec008c;
	color: white;
}

.hero-btn:hover > .hero-btn_link  {
	
	color: white;
}


.limo-impact {
	height: 100vh;
	margin: 100px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.limo-impact_img > img {
	box-shadow: 0px 0px 4px #000000ad;
}

.limo-impact_text {
	width: 48%;
}

.limo-impact_text > h2 {
	font-size: 3vw;
	margin: 0;
}

.limo-impact_users {
	margin: 300px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}


.navigation-user {
    position: fixed;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.single-user {
    height: 100vh;
    margin:  100px 0;
    opacity: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.single-user_text {
	width: 50%;
}

.single-user_img {
		width: 40%;
}

.single-user_img > img {
	box-shadow: 0px 0px 4px #000000ad;
}


.user {
	text-align: center;
}

.video-user {
	height: 450px;
    width: 100vw;
    margin: 100px 0;
    overflow-y: hidden;
}

.video-user > video {
    width: 100vw;
    transform: translateY(-150px);
}



.impact-limo {
	padding: 50px 25px;
	background-color: #3F3F3F;
	position: relative;
}

.impact-limo_title {
	font-size: 4vw;
    font-weight: 700;
    color: #CDCDCD;
    position: sticky;
    top: 80vh;
    left: 80px;
    transform: rotate(-90deg);
	/* Safari */
	-webkit-transform: rotate(-90deg);

	/* Firefox */
	-moz-transform: rotate(-90deg);

	/* IE */
	-ms-transform: rotate(-90deg);

	/* Opera */
	-o-transform: rotate(-90deg);
	transform-origin: left;
    width: max-content;
    will-change: unset;
}

.impact-limo_table {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.impact-limo_cell-head {
	width: 50%;
	padding: 40px;
	/*border: 1px solid white;*/
	color: #CDCDCD;
	font-size: 3.2vw;
	text-align: center;
	font-weight: 600;
	max-height: 150px;
}

.impact-limo_cell {
	width: 50%;
	padding: 40px;
	/*border: 1px solid white; */
	color: #CDCDCD;
	/*font-size: 3.2vw;*/
	text-align: center;
	font-weight: 600;

}


.impact-date_number {
	font-size: 7vw;
	text-align: center;
	-webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
  color: transparent;
}

.box {
	
    padding: 25px;
    font-size: 14px;
    width: 50%;
    border-radius: 8px;
    box-shadow: black 0px 0px 3px 0px;
    background-color: rgba(230, 0, 126, 0.27);
}

.point-box_1 {
	opacity: 0;
	position: absolute;
    top: 25%;
    left: 0px;
}

.point-box_2 {
	opacity: 0;
    position: absolute;
    top: 35%;
    left: 0px;

}

.point-box_3 {
	opacity: 0;
    position: absolute;
    top: 585px;
    top: 45%;
    left: 0px;
}


.point-box_4 {
	opacity: 0;
    position: absolute;
    left: 630px;
    top: 55%;
    left: 0px;
}

.point-box_5 {
	opacity: 0;
    position: absolute;
    
    top: 75%;
    right: 0px;
}

.point-box_ff1 {
	opacity: 0;
	position: absolute;
    right: 0px;
    top: 0%;
}


.point-box_ff2 {
	opacity: 0;
	position: absolute;
    right: 0px;
    top: 13%;
}


.point-box_ff3 {
	opacity: 0;
	position: absolute;
    right: 0px;
    top: 23%;
}


.point-box_ff4 {
	opacity: 0;
	position: absolute;
    right: 0px;
    top: 49%;
}


.point-box_lv1 {
	opacity: 0;
	position: absolute;
    left: 0px;
    top: 7%;
}

.point-box_lv2 {
	opacity: 0;
	position: absolute;
    right: 0px;
    top: 39%;
}

.point-box_lv3 {
	opacity: 0;
	position: absolute;
  right: 0;
  top: 60%;
}

.point-box_lv4 {
	opacity: 0;
	position: absolute;
   right: 0px;
    top: 76%;
}

.navigation-user {
	opacity: 0;
	transition: .1s; 
	z-index: 999;
	text-align: center;
}

.navigation-user_active {
	opacity: 1; 
	z-index: 999;
}

.navigation-user_single {

	transition: .3s;

}

.navigation-user_single > img {
	width: 50px;
		border-radius: 50%;

}

.active-nav {
	font-size: 28px;
	color: orange;
}


.active-nav > img {
	transition: .3s;
	width: 80px;
    border: 3px solid #e6007e;
}


@media screen and (min-width: 992px) and (max-width:  1280px) {
	.limo-impact {
		height: auto;
	}
	.navigation-user {
		display: none;
	}
}


@media screen and (max-width: 492px) {
	.desktop-available > img {
    position: relative;
		top: 50%;
    transform: translateY(-50%);
	}
	.desktop-available > h2 {
		font-size: 7vw;
	}

	video {
		width: auto;
	}
}


@media screen and (max-width: 1279px) {
	.desktop-available {
		display: block;
		background-color: #3F3F3F;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		text-align: center;
		z-index: 1000;
		padding: 25px;

	}

	.desktop-available > h2 {
		font-size: 5vw;
		color: white;
	}

	
}


@media screen and (min-width: 1279px) {
	.desktop-available {
	/*	display: none;
		overflow-x: scroll;
		overflow-y: scroll;*/
	}

}


@media screen and (min-width: 992px) {
	.box-sm {
		display: none;
	}
}


@media screen and (min-width: 492px) and (max-width: 678px) {
	.limo-impact {
		height: auto;
		flex-direction: column;
	}

	.limo-impact_users {
		flex-direction: column;
	}

	.limo-impact_text {
		width: 75%;
		margin-bottom:  50px;
	}

	.single-user {
		display: block;
	}

	.single-user_img {
		width: 100%;
	}

	.single-user_img > img {
	    max-width: 500px;
	}

	.impact-limo_title {
			width: auto;
			text-align: center;
			position: initial;
			font-size:  8vw;
			-webkit-transform: none;

			/* Firefox */
			-moz-transform: none;

			/* IE */
			-ms-transform: none;

			/* Opera */
			-o-transform: none;
		}

		.user {
			margin:  50px 0;
		}

		.single-user_text {
			width: 75%;
		}

		#trigger-pin {
	    max-width: 600px;
	    margin: 0 auto;
		}

		.point-box-sm_1 {
			position: absolute;
	    top: 23%;
	    right: 44%;
		}

		.point-box-sm_2 {
			position: absolute;
			top: 48%;
    	left: 30%;
		}

		.point-box-sm_3 {
	    position: absolute;
		 	bottom: 42%;
	    right: 20%;
		}
		

		.point-box-sm_4 {
	    position: absolute;
	    bottom: 25%;
    	right: 28%;
		}

		.point-box_ff1-sm_1 {
			position: absolute;
	    top: 7%;
    	left: 5%;
		}

		.point-box_ff1-sm_2 {
			position: absolute;
	    top: 4%;
    	left: 49%;
		}

		.point-box_ff1-sm_3 {
			position: absolute;
	    top: 15%;
    	right: 23%;
		}

		.point-box_ff1-sm_4 {
			position: absolute;
	    bottom: 47%;
    	left: 23%;
		}

		.point-box_lv-sm_1 {
			position: absolute;
      top: 9%;
    	left: 35%;
		}

		.point-box_lv-sm_2 {
	    position: absolute;
      top: 40%;
    	right: 32%;
		}

		.point-box_lv-sm_3 {
	    position: absolute;
	    bottom: 29%;
	    right: 22%;
		}

		.point-box_lv-sm_4 {
			position: absolute;
	    bottom: 21%;
    	left: 40%;
		}

		.single-user {
			margin:  50px 0;
		}

		.video-user {
			height: 290px;
			margin: 75px 0;
		}

		#trigger1  {
			margin-top:  180px!important;
		}

		#trigger2  {
			margin-top:  180px!important;
		}

		#trigger3  {
			margin-top:  180px!important;
		}

		.impact-limo_cell-head  {
			width: 100%;
			padding: 20px;
		}

		.impact-limo_cell  {
			width: 100%;
			padding: 20px;
		}

		.impact-limo_cell:nth-child(even) {
			padding-bottom:  50px;
			border-bottom:  1px solid white;
		}

		.impact-limo_cell:nth-child(odd) {
			padding-top:  50px;
		}

}




@media screen and (min-width: 678px) and (max-width: 992px) {
	.limo-impact {
		height: auto;
		flex-direction: column;
	}

	.limo-impact_users {
		flex-direction: column;
	}

	.limo-impact_text {
		width: 75%;
		margin-bottom:  50px;
	}

	.single-user {
		display: block;
	}

	.impact-limo_title {
			width: auto;
			text-align: center;
			position: initial;
			font-size:  8vw;
			-webkit-transform: none;

			/* Firefox */
			-moz-transform: none;

			/* IE */
			-ms-transform: none;

			/* Opera */
			-o-transform: none;
		}

		.user {
			margin:  50px 0;
		}

		.single-user_text {
			width: 75%;
		}

		#trigger-pin {
	    max-width: 600px;
	    margin: 0 auto;
		}

		.point-box-sm_1 {
			position: absolute;
	    top: 23%;
	    right: 44%;
		}

		.point-box-sm_2 {
			position: absolute;
			top: 48%;
    	left: 30%;
		}

		.point-box-sm_3 {
	    position: absolute;
		 	bottom: 42%;
	    right: 20%;
		}
		

		.point-box-sm_4 {
	    position: absolute;
	    bottom: 25%;
    	right: 28%;
		}

		.point-box_ff1-sm_1 {
			position: absolute;
	    top: 7%;
    	left: 5%;
		}

		.point-box_ff1-sm_2 {
			position: absolute;
	    top: 4%;
    	left: 49%;
		}

		.point-box_ff1-sm_3 {
			position: absolute;
	    top: 15%;
    	right: 23%;
		}

		.point-box_ff1-sm_4 {
			position: absolute;
	    bottom: 47%;
    	left: 23%;
		}

		.point-box_lv-sm_1 {
			position: absolute;
      top: 9%;
    	left: 35%;
		}

		.point-box_lv-sm_2 {
	    position: absolute;
      top: 40%;
    	right: 32%;
		}

		.point-box_lv-sm_3 {
	    position: absolute;
	    bottom: 29%;
	    right: 22%;
		}

		.point-box_lv-sm_4 {
			position: absolute;
	    bottom: 21%;
    	left: 40%;
		}

		.single-user {
			margin:  50px 0;
		}

		.video-user {
			height: 290px;
			margin: 75px 0;
		}

		#trigger1  {
			margin-top:  180px!important;
		}

		#trigger2  {
			margin-top:  180px!important;
		}

		#trigger3  {
			margin-top:  180px!important;
		}
}




@media screen and (min-width: 992px) and (max-width: 1280px) {
	.limo-impact {
		height: auto;
		flex-direction: column;
	}

	.limo-impact_users {
		flex-direction: row;
	}

	.limo-impact_text {
		width: 75%;
		margin-bottom:  50px;
	}

	.single-user {
		display: block;
	}

	.impact-limo_title {
			width: auto;
			text-align: center;
			position: initial;
			font-size:  8vw;
			-webkit-transform: none;

			/* Firefox */
			-moz-transform: none;

			/* IE */
			-ms-transform: none;

			/* Opera */
			-o-transform: none;
		}

		.user {
			margin:  50px 0;
		}

		.single-user_text {
			width: 75%;
		}

		#trigger-pin {
	    max-width: 600px;
	    margin: 0 auto;
		}

		.box {
			display: none;
		}

		.box-sm {
			display: block;
		}

		.point-box-sm_1 {
			position: absolute;
	    top: 166px;
	    right: 270px;
		}

		.point-box-sm_2 {
			position: absolute;
	    top: 340px;
	    left: 175px;
		}

		.point-box-sm_3 {
	    position: absolute;
	    bottom: 310px;
	    right: 140px;
		}
		

		.point-box-sm_4 {
	    position: absolute;
	    bottom: 180px;
	    right: 185px;
		}

		.point-box_ff1-sm_1 {
			position: absolute;
	    top: 45px;
	    left: 80px;
		}

		.point-box_ff1-sm_2 {
			position: absolute;
	    top: 35px;
	    right: 255px;
		}

		.point-box_ff1-sm_3 {
			position: absolute;
	    top: 100px;
	    right: 235px;
		}

		.point-box_ff1-sm_4 {
			position: absolute;
	    bottom: 335px;
	    left: 40px;
		}

		.point-box_lv-sm_1 {
			position: absolute;
	    top: 65px;
	    left: 305px;
		}

		.point-box_lv-sm_2 {
	    position: absolute;
	    top: 285px;
	    right: 275px;
		}

		.point-box_lv-sm_3 {
	    position: absolute;
	    bottom: 225px;
	    right: 230px;
		}

		.point-box_lv-sm_4 {
			position: absolute;
	    bottom: 145px;
	    left: 130px;
		}

		.single-user {
			margin:  50px 0;
		}

		.video-user {
			height: 290px;
			margin: 75px 0;
		}

		#trigger1  {
			margin-top:  180px!important;
		}

		#trigger2  {
			margin-top:  180px!important;
		}

		#trigger3  {
			margin-top:  180px!important;
		}
}





@media screen and (max-width: 492px) {
/*	.desktop-available > img {
	    position: relative;
			top: 50%;
	    transform: translateY(-50%); 
		}
    */
	.desktop-available > h2 {
		font-size: 15vw;
	}



	.claim > h1 {
		width: auto;
		font-size: 12vw;
		letter-spacing:  4px;
	}

	body {
		overflow-x: scroll;
		overflow-y: scroll;
	}

	.hero-btn {
		display: block;
		width: auto;
		max-width:  300px;
	}

	.sub-header > video {
		transform: translateX(-40%);
	}

	.limo-impact {
		height: auto;
		flex-direction: column;
	}

	.limo-impact_text {
		width: 100%;
		margin-bottom:  50px;
	}

	.limo-impact_text > h2 {
		font-size:  8vw;
	}

	.limo-impact_users {
		flex-direction: column;
	}

	.single-user {
		flex-direction: column;
	}

	.single-user_text {
		width: 100%;
	}

	.single-user_img {
	    max-width: 350px;
	    width: auto;
	}

	.single-user_img > img {
	    max-width: 350px;
	}

	.navigation-user {
		display: none;
	}

	.box {
		display: none;
	}

	.video-user {
  	height: auto;
	}

	.video-user > video {
			transform: none;
		}

		.fade {
			
		}

		.fade-impact {
			
		}

		.impact-limo_cell-head  {
			width: 100%;
			padding: 20px;
		}

		.impact-limo_cell  {
			width: 100%;
			padding: 20px;
		}

		.impact-limo_title {
			width: auto;
			text-align: center;
			position: initial;
			font-size:  8vw;
			-webkit-transform: none;

			/* Firefox */
			-moz-transform: none;

			/* IE */
			-ms-transform: none;

			/* Opera */
			-o-transform: none;
		}

		.impact-limo_cell:nth-child(even) {
			padding-bottom:  50px;
			border-bottom:  1px solid white;
		}

		.impact-limo_cell:nth-child(odd) {
			padding-top:  50px;
		}

		.impact-date_number {
			font-size:  10vw;
			-webkit-text-stroke-width: 1px;
		}

		#trigger-pin {
			width:  360px;
			margin: 0 auto;
		}

		.box-sm {
		position: absolute;
    font-size: 14px;
		}

		.point-box-sm_1 {
			top: 100px;
	    left: 100px;
		}

		.point-box-sm_2 {
			top: 211px;
  		left: 95px;
		}

		.point-box-sm_3 {
	    bottom: 185px;
  		right: 55px;
		}

		.point-box-sm_4 {
      bottom: 110px;
    	right: 85px;
		}

		.point-box_ff1-sm_1 {
		    top: 35px;
    		right: 35px;
		}

		.point-box_ff1-sm_2 {
			top: 15px;
    	right: 70px;
		}

		.point-box_ff1-sm_3 {
      top: 80px;
    	right: 50px;
		}

		.point-box_ff1-sm_4 {
	    bottom: 210px;
  		left: 95px;
		}

		.point-box_lv-sm_1 {
			top: 35px;
    	left: 100px;
		}

		.point-box_lv-sm_2 {
			top: 175px;
	    right: 105px;
		}

		.point-box_lv-sm_3 {
			bottom: 125px;
    	right: 42px;
		}

		.point-box_lv-sm_4 {
			bottom: 88px;
    	left: 155px;
		}
		
		.limo-impact_img > img {
			max-width: 350px;
		}
		
		

		    
}