@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?nw649x');
  src:  url('../fonts/icomoon.eot?nw649x#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff2?nw649x') format('woff2'),
    url('../fonts/icomoon.ttf?nw649x') format('truetype'),
    url('../fonts/icomoon.woff?nw649x') format('woff'),
    url('../fonts/icomoon.svg?nw649x#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="iconi-"], [class*=" iconi-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconi-send:before {
  content: "\e902";
}

.iconi-close-x:before {
  content: "\e900";
  padding-right: 2%!important;
}

.iconi-chat_bubble_outline:before {
    xdisplay:block;
    xcontent: "";
    xwidth: 32px;
    xheight: 32px;
    xcontent: "\e901";
    content:"\e96c";
    xbackground: transparent url('white_chat.png') no-repeat;
}

/*HYUNDAI SANS FONT*/
@font-face {
  font-family: 'HyundaiSansHead-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/HyundaiSansHead-Regular.eot);
  src: url(../fonts/HyundaiSansHead-Regular.eot?#iefix) format('embedded-opentype'),
     url(../fonts/HyundaiSansHead-Regular.woff2) format('woff2'),
     url(../fonts/HyundaiSansHead-Regular.woff) format('woff'),
     url(../fonts/HyundaiSansHead-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'HyundaiSansHead-Medium';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/HyundaiSansHead-Medium.eot);
  src: url(../fonts/HyundaiSansHead-Medium.eot?#iefix) format('embedded-opentype'),
     url(../fonts/HyundaiSansHead-Medium.woff2) format('woff2'),
     url(../fonts/HyundaiSansHead-Medium.woff) format('woff'),
     url(../fonts/HyundaiSansHead-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'HyundaiSansHead-Bold';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/HyundaiSansHead-Bold.eot);
  src: url(../fonts/HyundaiSansHead-Bold.eot?#iefix) format('embedded-opentype'),
     url(../fonts/HyundaiSansHead-Bold.woff2) format('woff2'),
     url(../fonts/HyundaiSansHead-Bold.woff) format('woff'),
     url(../fonts/HyundaiSansHead-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'HyundaiSansText-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/HyundaiSansText-Regular.eot);
  src: url(../fonts/HyundaiSansText-Regular.eot?#iefix) format('embedded-opentype'),
     url(../fonts/HyundaiSansText-Regular.woff2) format('woff2'),
     url(../fonts/HyundaiSansText-Regular.woff) format('woff'),
     url(../fonts/HyundaiSansText-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'HyundaiSansText-Medium';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/HyundaiSansText-Medium.eot);
  src: url(../fonts/HyundaiSansText-Medium.eot?#iefix) format('embedded-opentype'),
     url(../fonts/HyundaiSansText-Medium.woff2) format('woff2'),
     url(../fonts/HyundaiSansText-Medium.woff) format('woff'),
     url(../fonts/HyundaiSansText-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'HyundaiSansText-Bold';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/HyundaiSansText-Bold.eot);
  src: url(../fonts/HyundaiSansText-Bold.eot?#iefix) format('embedded-opentype'),
     url(../fonts/HyundaiSansText-Bold.woff2) format('woff2'),
     url(../fonts/HyundaiSansText-Bold.woff) format('woff'),
     url(../fonts/HyundaiSansText-Bold.ttf) format('truetype');
}

.kona-bot {
	position: relative;
    bottom: -80px!important;
    width: 100%!important;
    max-width: 400px!important;
    height: 100%;
    max-height: 500px;
    font-family: 'HyundaiSansText', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif';
    box-shadow: none!important;
	-webkit-transition: all 0.50s ease-in-out;
    -moz-transition: all 0.50s ease-in-out;
    -o-transition: all 0.50s ease-in-out;
    transition: all 0.50s ease-in-out;
}

.kona-bot > * {
	-webkit-box-shadow: 2px 3px 3px 0px rgba(0,0,0,0.25)!important;
  	-moz-box-shadow: 2px 3px 3px 0px rgba(0,0,0,0.25)!important;
  	box-shadow: 2px 3px 3px 0px rgba(0,0,0,0.25)!important;
}

.kona-bot > div {
	color: #fff!important;
	padding: 0!important;
	border-radius: 50%!important;
	float:right;
	height: 60px!important;
	width: 60px!important;
	line-height: 60px!important;
	position: relative;
	bottom: -435px!important;
	font-size: 2rem;
	background-color: #083665!important;
	z-index: 10;
	padding: 0!important;
	text-align: center!important;
	-webkit-transition: all 0.25s ease-out, background .5s ease;
    -moz-transition: all 0.25s ease-out, background .5s ease;
    -o-transition: all 0.25s ease-out, background .5s ease;
    transition: all 0.25s ease-out, background .5s ease;
}

.kona-bot > div:hover {
	transform: scale(1.05);
}

.kona-bot.open > div:hover {
	transform: scale(1);
}

.kona-bot > div.iconi-close-x {
	height: 40px!important;
	width: 40px!important;
	line-height: 40px!important;
	text-align: right!important;
}

.kona-bot > div > span {
	display: block;
	position: absolute;
	font-family: 'HyundaiSansText-Bold', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif';
	font-size: 1rem;
	height: 25px;
	width: 25px;
	top: 4px;
	right: 4px;
	line-height: 25px;
	background-color: #2AAED0;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	top: -6px;
	right: -6px;
	text-align: center;
	opacity: 0;
}

.kona-bot .label {
	position: absolute;
	display: block;
	opacity: 0;
	color: #fff!important;
    top: 0px;
    line-height: 40px;
    left: 10px;
    font-family: 'HyundaiSansHead-Regular', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif';
	font-size: 1rem!important;
	-webkit-transition: opacity 0.25s ease-out;
    -moz-transition: opacity 0.25s ease-out;
    -o-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.kona-bot .label > p {
	color: #fff!important;
    margin:0;
    font-family: 'HyundaiSansHead-Regular', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif';
	font-size: 1rem!important;
}
.kona-bot > iframe {
	position: relative;
	display: block!important;
	background-color: rgba(255,255,255,.9)!important;
	bottom: -460px!important;
	width: 100%!important;
	height: 100%!important;
	/*height: 100%!important;*/
	/*border-radius: 6px;*/
	-webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}


.kona-bot.build {
	bottom: -10px!important;
    right: 20px!important;
}

.kona-bot.build > div {
	bottom: -405px!important;
    right: 10px!important;
}

.kona-bot.build > iframe {
}

.kona-bot.stretch > div {
    	background-color: #1AB5DB!important;
        width:300px!important;
        border-radius:30px!important;
        text-align: right!important;
        padding-right:14px!important;
}
.kona-bot.stretch > .iconi-chat_bubble_outline:before {
    content:"\e96c";
}

.kona-bot.stretch .label {
    opacity:1;
    top:10px;
    left:14px;
    width:250px;
    font-size:1.1rem;
}

.kona-bot.stretch .label #bottitle {
    display:none;
}

.kona-bot.stretch .label #typewriter {
    display:inherit;
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    xanimation: type 3s ease-in-out;
    text-align:center;
}
.kona-bot.stretch.stretch2 .label #typewriter {
    display:none;
}
.kona-bot.stretch.stretch2 .label #typewriter2 {
    display:inherit;
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    xanimation: type 3s ease-in-out;
    text-align:center;
}

.kona-bot .label #typewriter {
    display:none;
}

.kona-bot .label #typewriter2 {
    display:none;
}

@keyframes type{ 
  from { width: 0; } 
}

.kona-bot.open {
	bottom: 0px!important;
    right: 20px!important;
}

.kona-bot.open > div {
	height: 40px!important;
	width: 100%!important;
	line-height: 40px!important;
	bottom: 40px!important;
	font-size: 1.5rem;
	-webkit-border-radius: 6px 6px 0 0!important;
	border-radius: 6px 6px 0 0!important;
    right: 0px!important;
}

.kona-bot.open .label{
	opacity: 1;
	-webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    -o-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.kona-bot.open > iframe {
	bottom: 40px!important;
}

.kona-bot .modal-content {
	overflow: hidden;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  /*animation-duration: .75s;*/
  animation-duration: 1s;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
	animation-duration: .75s;
  	animation-name: bounceOut;
}

@media(max-width: 600px) {
	.kona-bot {
		right: 0!important;
	}
	.kona-bot > div {
	}
	.kona-bot.build > div {
	}

	.kona-bot.open {
		right: 0!important;
		height: 100%!important;
		max-height: 92%!important;
    	max-height: initial;
	}

	.kona-bot.open > div {
	}
}