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

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

/* Default style, feel free to remove if not needed. */
body, body * {
	vertical-align: baseline;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}

body {
	/*max-height: 250px;
	max-width: 500px;*/
	max-height: 568px;
	max-width: 320px;
	overflow: hidden;
}

button {
	cursor: pointer;
	-moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

*{box-sizing: border-box;}

/* Div layer for the entire banner. */
#container_dc {
	background-color: #FFFFFF;
	position: relative;
}

#collapse_content {
	position: absolute;
	/*width: 300px;
	height: 250px;*/
	/*width: 320px;
	height: 568px;*/
	width: 320px;
	height: 50px;
	top: 0px;
	left: 0px;
	z-index: 100;
	background-image: url(images/rio-launch.jpg);
	background-repeat:no-repeat;
	display: none;
  border: 1px solid #000;
}

#collapse_content img {
	width: 100%;
	height: 100%;
}

#fullscreen_btn {
	position: absolute;
	width: 320px;
	height: 50px;
	top: 0px;
	left: 0px;
	/*color: #000000;*/
	z-index: 100;
	background-color: transparent;
	/*background-image: url(images/start-stop-btn.png);*/
	display: none;
}

#unex-kia {
	position: absolute;
	top: 0;
	left: 106px;
}

#unex-uvo {
	position: absolute;
	top: 204px;
	left: 230px;
}

#unex-copy {
	display: block;
	top: 342px;
  left: 18px;
	opacity: 0;
	animation: unexraise 0.5s 0.5s normal ease-in-out forwards;
	/*margin: 0 auto;
	margin-top: 60px;*/
}

#collapse_exit {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 98;
	background-color: transparent;
}

#fullscreen_content {
	border: 1px solid #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 320px;
	height: 568px;
	z-index: 100;
	background-image: url(images/bg1.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position: center;
	background-color: #000;
	display:none;
	overflow: hidden;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
	-moz-transition: background 0.25s linear;
}

#fullscreen_content.pinkBG {
	background-image: url(images/bg2.jpg)!important;
	background-color: #D08DE6!important;
}

#fullscreen_content p { display: none; }


#fullscreen_exit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #000;
	z-index:999;
	background-color: transparent;
}

#close_button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 65px;
	height: 25px;
	background-image: url(images/close.png);
	background-repeat:no-repeat;
	background-position: center center;
	background-color: transparent;
}

#close_hotspot {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 65px;
	height: 25px;
	background-color: transparent;
	opacity: 0;
	z-index:999;
	background-repeat:no-repeat;
}

#fullscreen_content img { position: absolute; }

#kia {
	top: -60px;
	left: 112px;
	animation: kialower 0.25s 0.25s normal ease-in-out forwards;
}

#uvo {
	top: 110px;
	right: 10px;
	z-index: 10;
	opacity: 0;
	animation: unhide 0.16s 0.16s normal ease-in-out forwards;
}

#headlights {
	top: 231px;
	opacity: 0;
	transition: opacity .5s;
}

#rio {
	display: block;
	top: 192px;
	left: 0;
	opacity: 0;
	transition: opacity .5s;
}

#rio-uvo{
	display: none;
	top: 360px;
	left: 15px;
}

#temp-guage {
	position: absolute;
	bottom: 10px;
	left: 94px;
  width: 131px;
  height: 132px;
	background: url(images/start-stop-btn.png) center center no-repeat transparent;
	z-index: 100;
	opacity: 0;
	animation: guageraise 0.5s 0.5s normal ease-in-out forwards;
	transition: background 0.125s linear;
}

#temp-guage:hover {
	background-image: url(images/start-stop-btn-on.png);
}

#temp-reading {
	position: absolute;
	top: 83px;
	left: 116px;
	width: 120px;
	height: 90px;
	background: url(images/20.png) center center no-repeat transparent;
	z-index: 100;
	display: none;
}

.stop-showing {
	display: none!important;
}

#just-right {
	display: none;
	top: 75px;
	left: 39.5px;
	opacity: 0;
	animation: unhide 0.25s 0.5s normal ease-in-out forwards;
}

#just-right-2 {
	display: none;
	top: 131.5px;
	left: 34.5px;
	opacity: 0;
	animation: unhide 0.25s 1.5s normal ease-in-out forwards;
}

#just-right-3 {
	display: none;
	top: 477.5px;
	left: 12.5px;
	opacity: 0;
	animation: unhide 0.25s 4s normal ease-in-out forwards;
}

#point-1{
	display: none;
	top: 418px;
	left: 100px;
	opacity: 0;
	animation: unhide 0.25s 2.5s normal ease-in-out forwards;
}

#point-2{
	display: none;
	top: 437px;
	left: 59px;
	opacity: 0;
	animation: unhide 0.25s 3s normal ease-in-out forwards;
}

#point-3{
	display: none;
	top: 454px;
	left: 53px;
	opacity: 0;
	animation: unhide 0.25s 3.5s normal ease-in-out forwards;
}

#nameplate {
	top: 110px;
	left: 15px;
	opacity: 0;
	animation: unhide 0.16s 0.16s normal ease-in-out forwards;
}

#cell-phone {
	bottom: 75px;
  left: 55px;
	display: none;
}

#slide-to-adjust{
	bottom: 20px;
  left: 110px;
	display: none;
}

#final-frame {
	top: 78px;
	left: 15px;
	display: none;
}

#try-it {
	position: absolute;
  bottom: 22px;
  left: 116px;
  background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid #fff;
	border-radius: 2px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 1px;
  padding: 3px 8px 3px;
  display: none;
	opacity: 0;
	z-index: 110;
	transition: all 0.125s linear;
	animation: unhide 0.25s 4.5s normal ease-in-out forwards;
}

#try-it:hover {
	background-color: rgba(255, 255, 255, 1);
	color: #a670b8;
}

#cta {
	display: none;
	position: absolute;
	bottom: 23px;
  left: 80px;
	padding: 1px 4px 1px;
	border: 1px solid #fff;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.3);
	/*background-color: #fff;*/
	cursor: pointer;
	opacity: 0;
	animation: unhide 0.16s 0.16s normal ease-in-out forwards;
	transition: all 0.125s linear;
}

#cta span {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 22px;
  color: #fff;
  letter-spacing: 1px;
}

#cta:hover { background-color: rgba(255, 255, 255, 1); }

#cta:hover span { color: #a670b8; }

#cta a { text-decoration: none; }

#gradient {
	display: none;
	top: -568px;
	animation: slideIn 0.25s 0.25s normal ease-in-out forwards;
}

#changingBG {
	display: none;
}

/*#gradient {
	width: 320px;
	height: 568px;
	background-image: url(images/gradient.png);
	background-repeat:no-repeat;
	background-position: center center;
	background-size: contain;
}*/

/*.copy {
	width: 90%;
	display: block;
	margin: 0 auto;
	line-height: 11px;
	margin-top: 60px;
}

.copy h1,
.copy p {
	color: #fff;
	font-family: arial;
	text-align: center;
	text-transform: uppercase;
}
.copy h1 { font-size: 25px; }
.copy p { font-size: 90%; }*/

:focus {outline:none;}
::-moz-focus-inner {border:0;}


/* portrait */
@media screen and (orientation:portrait) { /* portrait-specific styles */
}

/* landscape */
@media screen and (orientation:landscape) { /* landscape-specific styles */
}

/* slider styles */
#slider-container {
    width: 255px;
    height: 13px;
    position: relative;
    margin: 0 auto;
    top: 516px;
		display: none;
}

#slider-background {
    position: absolute;
    /*left: 24px;*/
    margin: 0 auto;
    height: 13px;
    width: 255px;
    background: url('images/slider-bg.png') no-repeat left top;
}

#slider-background .ui-slider-handle {
    width: 43px;
    height: 44px;
    background: url('images/slider-handle.png') no-repeat left top;
    position: absolute;
    margin-left: -15px;
    margin-top: -15px;
    cursor: pointer;
    outline: none;
}

/* Animations */

/** KIA Logo **/
@keyframes kialower {
  from {
    top: -60px;
  }
  to {
    top: 0px;
  }
}

@-webkit-keyframes kialower {
  from {
    top: -60px;
  }
  to {
    top: 0px;
  }
}

@keyframes kiaHide {
  from {
    top: 0px;
  }
  to {
    top: -60px;
  }
}

@-webkit-keyframes kiaHide {
  from {
    top: 0px;
  }
  to {
    top: -60px;
  }
}

/** Opacity **/
@keyframes unhide {
  from {
    opacity: 0;
  }
  to {
    opacity: 100;
  }
}

@-webkit-keyframes unhide {
  from {
    opacity: 0;
  }
  to {
    opacity: 100;
  }
}

@keyframes hide {
  from {
    opacity: 100;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes hide {
  from {
    opacity: 100;
  }
  to {
    opacity: 0;
  }
}

/** unex-copy **/
@keyframes unexraise {
  from {
    opacity: 0;
    top: 352px;
  }
  to {
    opacity: 1;
    top: 342px;
  }
}

@-webkit-keyframes unexraise {
  from {
    opacity: 0;
    top: 352px;
  }
  to {
    opacity: 1;
    top: 342px;
  }
}

@keyframes unexlower {
  from {
    opacity: 1;
    top: 342px;
  }
  to {
    opacity: 0;
    top: 352px;
  }
}

@-webkit-keyframes unexlower {
  from {
    opacity: 1;
    top: 342px;
  }
  to {
    opacity: 0;
    top: 352px;
  }
}

/** temp-guage **/
@keyframes guageraise {
  from {
    opacity: 0;
    bottom: 0px;
  }
  to {
    opacity: 1;
    bottom: 10px;
  }
}

@-webkit-keyframes guageraise {
  from {
    opacity: 0;
    bottom: 0px;
  }
  to {
    opacity: 1;
    bottom: 10px;
  }
}

@keyframes guagelower {
  from {
    opacity: 1;
    bottom: 10px;
  }
  to {
    opacity: 0;
    bottom: 0px;
  }
}

@-webkit-keyframes guagelower {
  from {
    opacity: 1;
    bottom: 10px;
  }
  to {
    opacity: 0;
    bottom: 0px;
  }
}

/** just-right **/
/*@keyframes justraise {
  from {
    opacity: 0;
    top: 85px;
  }
  to {
    opacity: 1;
    top: 75px;
  }
}

@-webkit-keyframes justraise {
  from {
    opacity: 0;
    top: 85px;
  }
  to {
    opacity: 1;
    top: 75px;
  }
}*/

/** gradient **/
@keyframes slideIn {
  from {
    top: -568px;
  }
  to {
    top: 0px;
  }
}

@keyframes slideOut {
	from {
		top: 0px;
	}

	to {
		top: -568px;
	}
}