@charset "utf-8";
/* CSS Document */

@keyframes overlay {
	0%{opacity: 0;}
	25%{opacity: 0;}
	50%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes fs-overlay {
	0%{opacity: 0;}
	20%{opacity: 0;}
	40%{opacity: 1;}
	60%{opacity: 1;}
	80%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes timer {
	0%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes phone-portrait{
	0%{opacity:0.5;}
	5%{opacity:1;}
	30%{opacity:0;}
	50%{opacity:0;}
	75%{opacity:1;}
	100%{opacity:0.5;}
}
@keyframes phone-landscape {
	0%{transform: rotateZ(0deg);opacity:0.5;}
	30%{transform: rotateZ(-90deg);opacity:1;}
	50%{transform: rotateZ(-90deg);opacity:1;}
	75%{transform: rotateZ(0deg);opacity:0;}
	100%{transform: rotateZ(0deg);opacity:0.5;}
}

#riv-00 {background-image: url('/images/rivian/Rivian_Storyboards-0.jpg');}
#riv-01 {background-image: url('/images/rivian/Rivian_Storyboards-1.jpg');}
#riv-02 {background-image: url('/images/rivian/Rivian_Storyboards-2.jpg');}
#riv-03 {background-image: url('/images/rivian/Rivian_Storyboards-3.jpg');}
#riv-04 {background-image: url('/images/rivian/Rivian_Storyboards-4.jpg');}
#riv-05 {background-image: url('/images/rivian/Rivian_Storyboards-5.jpg');}
#riv-06 {background-image: url('/images/rivian/Rivian_Storyboards-6.jpg');}
#riv-07_A {background-image: url('/images/rivian/Rivian_Storyboards-7-1.jpg');}
#riv-07_B {background-image: url('/images/rivian/Rivian_Storyboards-7-2.jpg');}
#riv-08 {background-image: url('/images/rivian/Rivian_Storyboards-9.jpg');}
#riv-09 {background-image: url('/images/rivian/Rivian_Storyboards-8.jpg');}
#riv-10 {background-image: url('/images/rivian/Rivian_Storyboards-10.jpg');}

#riv-07_A{
	z-index: 1;	
}
#riv-07_B{
	z-index: 2;
	animation: overlay 6s ease-in-out infinite running!important;
}


.swipe-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}

.riv_img {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 1;
}

@media (any-pointer: coarse) {

#enter-fs {display: none;}
#prev, #next {display: none;}
	
body {
  	overflow: hidden; /* Hide scrollbars */
  	margin: 0;
  	height: 100vh;
  	width: 100vw;
  	background: #F5F5F5;
}
body::-webkit-scrollbar {
		display: none;
}
	
#outer-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.container {
	width: 100vw;
	height: calc((100vw / 16) * 10);
}

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: calc((100vw / 16) * 10);
  cursor: url("/images/rivian/rivCur.png"), default;
}

.mobi-warning {opacity: 1;pointer-events: none;}
	
@media (min-aspect-ratio: 1/10) and (max-aspect-ratio: 1/1) {
	.mobi-warning {animation: timer 1.5s ease-out 8.5s forwards;}	
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 10/1) {
	.swipe-wrap > div img {height: 100%; width: 100%;}
	.mobi-warning {display: none!important;}
	#return h3 {display: none!important;}
}

#phone-msg-container{ 
	position: fixed;
	display: block;
	height: 100%;
	width:  100%;
	background: #f5f5f525;
	top: 0;
	z-index: 500;
}
#rotate-phone-msg{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	top: 80%;
	left: 6%;
	height:15%;
	width: 88%;
	border-radius: 10px;
	background-color:#f5f5f5;
	box-shadow: 0vh 0vh 1.5vh rgba(0,0,0,0.5);
}
#rotate-phone-txt {
	margin-left: 15%;
	height: 100%;
	width: 75%;
	text-align: left;
	color: #010b14;
}
#rotate-phone-txt h4 {
  top: 5%;
  position: absolute;
  font-family: 'Akzidenz-Grotesk-Nxt-Med', Arial, sans-serif;
  font-size: 3.75vw;
  line-height: 0vw;
  font-weight: 400;
}
#rotate-phone-txt h5 {
  top: 25%;
  position: absolute;
  font-family: 'Akzidenz-Grotesk-Nxt-Lte', Arial, sans-serif;
  font-size: 3.5vw;
  line-height: 4vw;
  font-weight: 300;
  transform: translateY(0%);
}

/* iphone 12 */
@media (min-aspect-ratio: 9/20) and (max-aspect-ratio: 9/17) {
  #rotate-phone-txt h4 {top: 20%;}
  #rotate-phone-txt h5 {top: 30%;}
}
/* iphone X */
@media (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/15) {
  #rotate-phone-txt h4 {top: 15%;}
  #rotate-phone-txt h5 {top: 25%;}
}
/* iphone 6-8 */
@media (min-aspect-ratio: 9/15) and (max-aspect-ratio: 9/13) {
  #rotate-phone-txt h4 {top: 10%;}
  #rotate-phone-txt h5 {top: 20%;}
}

#share-svg{display:inline; height: 2.5vh;}
#add-svg{display:inline; height: 2.5vh;}

#phone-clip-anim{
	height: 100%;
	width: 25%;
	transform: scale(1);
}
.phone-clip-container{
	position:absolute;
	left: 70%;
	height: 100%;
	width: 25%;
	display:flex;
	background: #ff003700;
	flex-direction:column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
}

#portrait-phone{animation: phone-portrait 8s ease infinite;}
#landscape-phone{animation: phone-landscape 8s ease infinite;}

.phone-outline{
		width: 11vw;
		height: 20vw;
		border-radius: 1vh;
		background:#010b14; 
		display:flex;
		flex-direction:column;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
}
.phone-topbit{
		margin-top: 0.5vh;
		width: 3vw;
		height: 0.35vw;
		border-radius: 0.175vw;
		background:#f5f5f5;
}
.phone-screen{
		margin-top: 0.4vh;
		width: 9.5vw;
		height: 15vw;
		border-radius: 0.1vw;
		background:#f5f5f5;
}
.phone-button{
		width: 1.75vw;
		height: 1.75vw;
		border-radius: 0.875vw;
		background:#f5f5f5;
}

}

@media (any-pointer: fine) {
	
	#return{position:static; width:100%;margin-bottom: 5%;}
	.mobi-warning {display: none!important;}
	
	body {
		top:0;
  		margin: 0;
  		min-height: 100vh;
  		width: 100vw;
  		background: #F5F5F5;
		overflow-x: hidden;
		scrollbar-width: 0;
		scroll-behavior: smooth;
	}
	
	body::-webkit-scrollbar {
		display: none;
	}
	body::-moz-scrollbar {
		display: none;
	}
	body::-ms-scrollbar {
		display: none;
	}
	
	.info {display: flex;flex-flow: row; justify-content: center;}
	.info-container {flex-direction: row; align-items: flex-end; justify-content: space-between; margin: 0%;}
	
	#outer-container {
		position: static;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-around;
	}
	#outer-container:fullscreen {background: #f5f5f5;}
	
	#prev {margin-left: 1%;}
	#next {margin-right: 1%;}
	#prev, #next {opacity:0.25; cursor: pointer;flex-shrink:1;}
		#prev:hover, #next:hover {opacity:0.5;}
		#prev:active, #next:active {opacity:0.75;}
	
	#enter-fs {
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 30vw;
	height:5vw;
	border-radius: 10px;
	border: 1px solid #010b1450;
	background: rgba(245, 245, 245, 0.9);
	box-shadow: 0px 3px 5px #010b1450;
	z-index: 500;
	opacity:0;
	animation: fs-overlay 3.5s cubic-bezier(0.65, 0, 0.35, 1) 2s 3 running;
	}
	kbd {
	background: linear-gradient(180deg,#eee,#fff);
	background-color: #eee;
	border: 1px solid #cdd5d7;
	border-radius: 6px;
	box-shadow: 0 1px 2px 1px #010b1450;
	font-family: consolas,"Liberation Mono",courier,monospace;
	font-size: .9rem;
	font-weight: 700;
	margin: 10px;
	padding: 4px 6px;
	white-space: nowrap;
	}
	/*#enter-fs kbd {width: 5vw;height:2vw; font-size: 1vw; background: white;border-radius: 5px; box-shadow: 0px 3px 5px #010b1430;}*/
	.container {
		width: 100%;
		height: 100%;
	}
	
	.swipe {
		overflow: hidden;
		visibility: hidden;
		position:relative;
		width: 100%;
		height: calc((100vw / 16) * 10);
		cursor: url("/images/rivian/rivCur.png") 50 20, default;
	}
	
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 29/18) {
		
		#outer-container {width: 100%;}
		
		.container {
			width: 90%;
			height: calc((90vw / 16) * 10);
		}
		
		.swipe {
			width: 100%;
			height: calc((90vw / 16) * 10);
		}
	
	}
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
		
		#outer-container {width: 100%;}
		
		.container {
			width: 75%;
			height: calc((75vw / 16) * 10);
		}
		
		.swipe {
			width: 100%;
			height: calc((75vw / 16) * 10);
		}
		
	}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
		
		#return {}
		#outer-container {width: 100%;align-items: center;}
		
		.container {
			width: 66%;
			height: calc((66vw / 16) * 10);
		}
		
		.swipe {
			width: 100%;
			height: calc((66vw / 16) * 10);
		}
		
	}
}