html, body {
	margin:0px;
	color:#fff;
	background-color:#182952;
	font-family: 'Barlow', sans-serif;
}

.jumbo {
	text-align:center;
	padding:70px 0px;
}

.jumbo h1 {
	font-size:50px;
	font-weight:400;
	margin-bottom:10px;
}

.big-btn {
	background-color:#e14594;
	color:#fff;
	font-size:22px;
	padding:14px 26px;
	display:inline-block;
	text-decoration:none;
	border-radius:4px;
	transition:.2s;
}

.big-btn:hover, #my-controls button:hover {
	box-shadow: 0px 0px 0px 3px #182952, 0px 0px 0px 6px #e14594;
}

.item {
	width:170px;
	height:170px;
	border-radius:50%;
	background-color:#fff;
	margin:100px;
	box-shadow: 0px 0px 225px -5px rgba(225,69,148,0.75), 37px 3px 125px -5px rgba(255,255,255,0.75);
}

nav .branding {
	font-size:24px;
	display:inline-block;
	padding:20px 0px;
}

nav .branding img {
	width:48px;
	height:48px;
	vertical-align:middle;
	margin-right:16px;
}

nav .branding span {
	display:inline-block;
	vertical-align: middle;
}

nav ul {
	display:inline-block;
	float:right;
	margin:0px;
	padding:0px;
	list-style: none;
}

nav ul li {
	display:inline-block;
	padding:24px 20px;
}

nav ul li a {
	padding:12px 0px;
	display:inline-block;
	color:#fff;
	text-decoration: none;
	border-radius:4px;
	cursor:pointer;
	position:relative;
}

nav ul li a:after {
	transition:.2s;
	bottom:4px;
	left:50%;
	width:0%;
	border-radius:4px;
	height:3px;
	background-color:#e14594;
	content:'';
	position:absolute;
}

nav ul li a.active:after, nav ul li a:hover:after {
	left:0;
	width:100%;
}

nav ul li:last-child {
	padding-right:0px;
}

nav ul li:last-child a {
	background-color:#e14594;
	color:#fff;
	margin-left:20px;
	padding:12px 20px;
}

.container .row {
	width:calc(100% + 32px);
}

.title {
	text-align:center;
	padding:30px 0px 50px;
}

.title.into-transition {
	padding-bottom:0px;
}

.title h1 {
	display:inline-block;
	position:relative;
}

.title h1:after {
	position:absolute;
	bottom:-4px;
	left:0;
	width:100%;
	border-radius:4px;
	height:3px;
	background-color:#e14594;
	content:'';
}

.speech-bubbles {
	height:322px;
	position:relative;
}

.speech-bubbles .speech-bubbles-int {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:16px 0px;
	box-sizing:border-box;
}

.speech-bubbles .bubble {
	display:block;
	padding-top:10px;
	box-sizing:border-box;
	position: relative;
	animation-name:bubbleIn;
	animation-fill-mode:forwards;
	animation-duration:.6s;
	transform:scale(0);
}

.bubble.grey {
	padding-right:16px;
	transform-origin:0% 100%;
	animation-delay:2s;
}

.bubble.pink {
	padding-left:16px;
	text-align:right;
	transform-origin:100% 100%;
}

@keyframes bubbleIn {
	0% {
		transform:scale(0);
	}
	100% {
		transform:scale(1);
	}
}

.bubble span {
	padding:8px 16px;
	display:block;
	font-size:18px;
}

.bubble.grey span {
	background-color:#2b3595;
	color:#fff;
	border-radius:12px 12px 12px 0px;
}

.bubble.pink span {
	background-color:#e14594;
	color:#fff;
	border-radius:12px 12px 0px 12px;
}

h2.fancy {
	margin:0px;
	color:#fff;
	font-size:29px;
	font-weight:400;
	display:block;
	position:relative;
}

h2.fancy:after {
	position:absolute;
	bottom:-4px;
	left:0;
	width:48px;
	border-radius:4px;
	height:3px;
	background-color:#e14594;
	content:'';
}

.about-row {
	padding-bottom:60px;
}

.about-row p {
	font-size:20px;
	font-weight:300;
	font-family:"Lato", sans-serif;
}

.about-row a {
	background-color:#e14594;
	color:#fff;
	border-radius:4px;
	text-decoration:none;
	padding:12px 20px;
	display:inline-block;
}

.model-row h2 {
	text-align:center;
	position:relative;
	margin-bottom:0px;
}

.model-row h2:after {
	position:absolute;
	bottom:-8px;
	left:calc(50% - 24px);
	width:48px;
	border-radius:4px;
	height:3px;
	background-color:#e14594;
	content:'';
}

.model-row h3 {
	text-align:center;
	font-size:18px;
	color:#fff;
	margin-top:10px;
	margin-bottom:40px;
}

.model-row ul {
	list-style:none;
	margin:0px;
	padding:0px;
	display:block;
	text-align:center;
}

.model-row ul li {
	font-size:18px;
	font-weight:300;
	margin-bottom:8px;
}

.model-row .btn-block {
	margin:30px auto;
	display:block;
	width:120px;
	text-align:center;
}

.gallery-row {
	margin-bottom:30px;
}

.order-row {
	padding:30px 0px;
	text-align:center;
}

.order-row .big-btn {
	display:block;
}

.order-row p {
	font-size:24px;
	font-weight:300;
}

.order-row i.fas {
	font-size:50px;
	margin-top:64px;
	display:inline-block;
}

.btn-block {
	padding:12px 18px;
	display:inline-block;
	color:#fff;
	background-color:#e14594;
	text-decoration: none;
	border-radius:4px;
	position:relative;
	font-size:16px;
	margin:0px auto;
}

.darker {
	background-color:#091638;
}

.darker.pad-top {
	padding-top:50px;
}

.dark-transition {
	display:block;
	content:'';
	width:100%;
	padding-bottom:6%;
	background-size:cover;
	background-image:url(../img/division.svg);
	background-position:center center;
}

footer {
	padding-bottom:30px;
	text-align:center;
}

footer ul {
	display:inline-block;
	margin:0px auto;
	padding:0px;
	list-style: none;
}

footer ul li {
	display:inline-block;
	padding:24px 20px;
}

footer ul li a {
	padding:12px 0px;
	display:inline-block;
	color:#fff;
	text-decoration: none;
	border-radius:4px;
	position:relative;
}

footer ul li a:hover {
	text-decoration:underline;
}

footer ul li a:after {
	content:'';
	position:absolute;
	width:4px;
	height:4px;
	display:block;
	background-color:#e14594;
	border-radius:50%;
	top:21px;
	right:-24px;
}

footer ul li:last-child a:after {
	opacity:0;
}

img.responsive {
	width:100%;
	height:auto;
}

.annotations {
	position:relative;
	width:100%;
	padding-bottom:56.25%;
}

.annotations video {
	display:block;
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	top:0;
}

.annotation {
	position:absolute;
	background:rgba(0,0,0,0);
	border:3px SOLID #fff;
	border-radius:6px;
	box-sizing:border-box;
	transition:.1s;

	text-align:center;
	font-size:16px;
	line-height:40px;
	color:#fff;
	text-decoration:none;

	animation-name: annotation;
	animation-fill-mode:forwards;
	animation-timing-function: ease-in-out;
	animation-duration:1.4s;
	animation-iteration-count: infinite;
}

.annotation:hover {
	background-color:rgba(255,255,255,.3);
	color:#000;
}

@keyframes annotation {
	0% {
		transform:scale(1);
	}
	50% {
		transform:scale(1.06);
	}
	100% {
		transform:scale(1);
	}
}

#vrview iframe {
	width:100%;
	min-height:600px;
}


.animation {
	position:relative;
	background-color:#fff;
	width:100%;
	height:600px;
	border-radius:6px;
	overflow:hidden;
	perspective: 600px;
	border-radius:10px 10px 0px 0px;
}

.animation .header {
	position:absolute;
	top:calc(50% - 30px);
	width:100%;
	text-align:center;
	font-size:50px;
	line-height:60px;
	color:#333;
	margin:0px;
	transform:scale(0);

	animation-name:header;
	animation-fill-mode: forward;
	animation-duration:3s;
}

.animation .title {
	position:absolute;
	top:10%;
	width:100%;
	text-align:center;
	font-size:40px;
	font-weight:700;
	color:#333;
	margin:0px;
	transform:scale(0);

	animation-name:header;
	animation-fill-mode: forward;
	animation-duration:6s;
	animation-delay:3s;
}

.animation .title small {
	display:block;
	color:#666;
	margin:0px;
	font-size:20px;
	line-height:20px;
}

.animation .circle {
	position:absolute;
	display:inline-block;
	transform:scale(0);
	top:50%;
	left:20%;
	text-align:center;
	width:200px;
	height:200px;
	border-radius:50%;
	border: 4px DASHED #bbb;
	color:#555;
	line-height:200px;
	font-size:23px;
	animation-name:header;
	animation-fill-mode: forward;
	animation-duration:6s;

}

.animation .circle.voice-amazon, .animation .circle.amazon {
	animation-delay:3s;
}

.animation .circle.amazon {
	left:auto;
	right:20%;
	border-color:#f90;
	background-color:#f90;
	color:#fff;
}
.animation .circle.aura {
	left:auto;
	right:calc(50% - 100px);
	border-color:#e14594;
	background-color:#e14594;
	color:#fff;
}

.animation .circle.voice-aura, .animation .circle.aura, .animation .data-bit.aura, .animation .circle.light {
	animation-delay:9s;
}
.animation .circle.voice-aura {
	left:10%;
}
.animation .circle.light {
	left:auto;
	right:10%;
}

.animation .data-bit {
	position:absolute;
	top:65%;
	left:40%;
	width:28px;
	height:28px;
	background-color:#555;
	border-radius:50%;
	animation-name:dataBitAmazon;
	animation-fill-mode: forward;
	animation-duration:2s;
	animation-iteration-count: 3;
	animation-delay:3s;
	opacity:0;
}

.animation .data-bit.aura {
	animation-name:dataBitAura;
}

.animation .data-bit.light {
	animation-name:dataBitLight;
	animation-delay:11s;
	animation-iteration-count:1;
}

#how-aura-works {
	animation-delay:9s;
}

.animation .header.end {
	animation-delay:15s;
}

.models img {
	border-radius:10px;
}

#my-controls {
	background-color:rgba(0,0,0,.2);
	padding:16px;
	border-radius:0px 0px 10px 10px;
	box-sizing:border-box;
}

#my-controls button {
	width:50px;
	height:50px;
	border-radius:50%;
	background-color:#e14594;
	border:0px;
	color:#fff;
	font-size:26px;
	transition:.2s;
	margin-right:10px;
	outline:0;
}

#my-controls .group {
	padding:8px;
	border:2px DASHED #fff;
	border-radius:10px;
	margin-right:10px;
	display:inline-block;
}

#my-controls .group i {
	display:inline-block;
	margin-right:5px;
}

#video {
	border-radius:10px 10px 0px 0px;
}

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  display:inline-block;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transform:translateY(-4px);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #e14594;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #e14594;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #e14594;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #fff;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #fff;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #fff;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}