/**
 * Copyright © 2015 Tano Incorporated. All rights reserved.
 *
 * Created by Daniel Han <daniel@tanodigital.com>
 *         at 4/4/2015 2:09 AM
 */
/**
 * Copyright © 2015 Tano Incorporated. All rights reserved.
 *
 * Created by Daniel Han <daniel@tanodigital.com>
 *         at 3/17/2015 2:04 PM
 */
/**
 * Copyright © 2015 Tano Incorporated. All rights reserved.
 *
 * Created by Daniel Han <daniel@tanodigital.com>
 *         at 3/20/2015 9:33 PM
 */
.green-button {
  position: relative;
  width: 960px;
  margin: 0 auto;
}
.green-button img {
  position: absolute;
  top: -14.5px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  width: 30px;
}
a {
  color: #58ba47;
  text-decoration: underline;
}
a:hover {
  cursor: pointer;
}
a[disabled] {
  pointer-events: none;
  cursor: default;
}
.btn {
  border: 0;
  padding: 10px 20px;
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-primary {
  color: white;
  background-color: #58ba47;
}
.btn-default {
  color: white;
  background-color: #696969;
}
.btn:hover {
  cursor: pointer;
}
.checkbox {
  width: 100%;
}
.checkbox label {
  display: block;
  text-align: left;
  margin: 0;
}
.checkbox input[type=checkbox] {
  background-color: #0000ff;
}
.col-1 {
  min-height: 1px;
  float: left;
  width: 8.333333%;
}
.col-2 {
  min-height: 1px;
  float: left;
  width: 16.666666%;
}
.col-3 {
  min-height: 1px;
  float: left;
  width: 25%;
}
.col-4 {
  min-height: 1px;
  float: left;
  width: 33.333333%;
}
.col-5 {
  min-height: 1px;
  float: left;
  width: 41.666666%;
}
.col-6 {
  min-height: 1px;
  float: left;
  width: 50%;
}
.col-7 {
  min-height: 1px;
  float: left;
  width: 58.333333%;
}
.col-8 {
  min-height: 1px;
  float: left;
  width: 66.666666%;
}
.col-9 {
  min-height: 1px;
  float: left;
  width: 75%;
}
.col-10 {
  min-height: 1px;
  float: left;
  width: 83.333333%;
}
.col-11 {
  min-height: 1px;
  float: left;
  width: 91.666666%;
}
.col-12 {
  min-height: 1px;
  float: left;
  width: 100%;
}
::-moz-placeholder {
  color: #b9b9b9;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #b9b9b9;
}
::-webkit-input-placeholder {
  color: #b9b9b9;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #b9b9b9;
  opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b9b9b9;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b9b9b9;
}
.btn-transparent {
  border: 2px solid #fff;
  letter-spacing: 1px;
  background: transparent;
  cursor: pointer;
  padding: 4px 54px;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: white;
  text-decoration: none;
  display: inline-block;
}
#main-marquee .wrapper {
  position: relative;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  height: 476px;
  margin: 0 auto;
}
#main-marquee #marquees {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#main-marquee .marquee {
  position: relative;
  width: 1280px;
  height: 476px;
}
#main-marquee .marquee.bg-1 {
  background-image: url("/images/bg_1.jpg");
}
#main-marquee .marquee.bg-2 {
  background-image: url("/images/bg_2.jpg");
}
#main-marquee .marquee.bg-3 {
  background-image: url("/images/bg_3.jpg");
}
#main-marquee .marquee.bg-4 {
  background-image: url("/images/bg_4.jpg");
}
#main-marquee .marquee .catch {
  position: absolute;
  top: 160px;
  width: 100%;
  text-align: center;
  font-size: 50px;
  color: #fff;
}
#main-marquee .marquee .catch2 {
  position: absolute;
  top: 268px;
  width: 100%;
  text-align: center;
}
#main-marquee .marquee .catch2 span {
  border: 1px solid #fff;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: white;
  line-height: 21px;
  padding: 2px 54px;
  letter-spacing: 1px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.42);
}
#main-marquee .marquee .catch2 span a {
  color: white;
  text-decoration: none;
}
#main-marquee .marquee .catch2 span:hover {
  background-color: #58ba47;
  border: 1px solid #58ba47;
}
#main-marquee .marquee .catch2 img {
  padding-bottom: 4px;
}
#main-marquee .marquee .catch2 img.left {
  position: absolute;
  top: 7px;
  left: 340px;
}
#main-marquee .marquee .catch2 img.right {
  position: absolute;
  top: 7px;
  left: 716px;
}
#main-marquee .marquee .catch3 {
  position: absolute;
  top: 220px;
  width: 100%;
  text-align: center;
}
#main-marquee .marquee .catch3 span {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #cccccc;
}
#main-marquee .marquee.natural .catch {
  font-size: 42px;
}
#main-marquee .marquee.natural .catch3 {
  top: 258px;
}
#main-marquee .marquee.experience .catch3 {
  top: 220px;
}
#main-marquee .slick-list {
  height: 476px;
}
#main-marquee button.slick-next,
#main-marquee button.slick-prev {
  top: 0;
  margin: 0 160px;
  width: 50px;
  height: 476px;
}
#main-marquee button.slick-prev {
  left: 0;
}
#main-marquee button.slick-next {
  right: 0;
}
#tts-demo {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  height: 150px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
}
#tts-demo img.line {
  position: absolute;
  top: 0;
  left: 375px;
}
#tts-demo p {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: white;
  margin-top: 27px;
  text-align: center;
}
#tts-demo .tts-demo-control {
  margin-top: 10px;
  display: inline-block;
}
#tts-demo .language-box,
#tts-demo .voice-box {
  width: 165px;
  display: inline-block;
  position: relative;
  float: left;
  margin-right: 5px;
}
#tts-demo #selected-language,
#tts-demo #selected-voice {
  width: 100%;
  position: relative;
}
#tts-demo #selected-language li,
#tts-demo #selected-voice li {
  width: 100%;
}
#tts-demo #selected-language li.selected,
#tts-demo #selected-voice li.selected {
  display: block;
}
#tts-demo #language-down,
#tts-demo #voice-down {
  position: absolute;
  top: 50%;
  right: 5%;
  cursor: pointer;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#tts-demo .languages,
#tts-demo .voices {
  width: 175%;
  position: absolute;
  top: 25px;
  left: 0;
  z-index: 1;
}
#tts-demo .languages li,
#tts-demo .voices li {
  width: 50%;
}
#tts-demo ul {
  float: left;
}
#tts-demo ul li {
  float: left;
  height: 25px;
  background: white;
  cursor: pointer;
  text-align: left;
}
#tts-demo ul li img {
  margin: 7px 3px 0 7px;
}
#tts-demo ul li:hover {
  background: #ccc;
}
#tts-demo ul li.selected {
  display: none;
}
#tts-demo .tts-text-box {
  float: left;
}
#tts-demo .tts-text-box #tts-text {
  padding: 4px 6px;
  font-size: 13px;
  width: 494px;
  height: 25px;
  border: none;
  display: inline-block;
  float: left;
  margin-right: 5px;
}
#tts-demo .tts-text-box #tts-text-icon {
  background: url("/images/pen.png") no-repeat scroll 8px 7px #ffffff;
  width: 21px;
  height: 25px;
  float: left;
}
#tts-demo #tts-play {
  border: 1px solid #fff;
  letter-spacing: 1px;
  background: transparent;
  cursor: pointer;
  height: 25px;
  line-height: 21px;
  width: 100px;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: white;
}
#tts-demo #tts-play:hover {
  color: white;
  background: #58ba47;
  border: 1px solid #58ba47;
}
#tts-demo #tts-play.disabled {
  cursor: wait;
  border-color: #999;
  color: #999;
}
.main-catch {
  float: left;
  margin: 30px 0;
  text-align: center;
  width: 100%;
}
.main-catch h1 {
  margin: 40px 0 30px;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: black;
}
.main-catch p {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #696969;
  line-height: 1.5;
}
.main-catch .text {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #696969;
  margin: 0 auto;
  padding: 5px 0;
  width: 750px;
  line-height: 1.5;
}
.main-catch .sub-title {
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #696969;
  padding: 20px 0;
}
.keys-block {
  float: left;
  margin: 30px 0;
}
.keys-block li {
  float: left;
  width: 480px;
}
.keys-block li:hover {
  background: #e5e5e5;
}
.keys-block li img {
  float: left;
  margin: 40px 0 0 40px;
}
.keys-block li p.title {
  margin: 50px 0 0 130px;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #58ba47;
}
.keys-block li p.desc {
  margin: 20px 40px 50px 130px;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #696969;
  line-height: 1.5;
}
#main .wrapper {
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}
#get-a-free-trial .wrapper {
  position: relative;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  height: 223px;
  margin: 0 auto;
}
#get-a-free-trial .marquee {
  position: absolute;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  background: url("/images/bg_trial.jpg") no-repeat center;
  height: 100%;
  margin: 0 auto;
}
#get-a-free-trial .marquee h1 {
  position: absolute;
  top: 60px;
  width: 100%;
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
}
#get-a-free-trial .marquee p {
  position: absolute;
  top: 100px;
  width: 100%;
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #bdbdbd;
}
#get-a-free-trial .marquee .btn {
  position: absolute;
  top: 135px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#get-a-free-trial .marquee .btn button {
  border: 1px solid white;
}
#get-a-free-trial .marquee .btn button:hover {
  background-color: #58ba47;
  border: 1px solid #58ba47;
}
#latest-news .wrapper {
  position: relative;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  height: 337px;
  margin: 0 auto;
}
#latest-news .wrapper > img {
  position: absolute;
  left: 50%;
  top: 50px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#latest-news .marquee {
  position: absolute;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  background: url("/images/bg_news.jpg") no-repeat center;
  height: 100%;
  margin: 0 auto;
}
#latest-news .marquee a {
  color: white;
  text-decoration: none;
}
#latest-news .marquee a:hover {
  text-decoration: underline;
}
#latest-news h1 {
  position: absolute;
  top: 140px;
  width: 100%;
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
}
#latest-news p {
  position: absolute;
  top: 180px;
  width: 100%;
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #bdbdbd;
}
#latest-news .cards-container {
  position: absolute;
  width: 100%;
  top: 210px;
}
#latest-news .cards-container .cards {
  margin: 0 auto;
  width: 960px;
  color: white;
}
#latest-news .cards-container .cards .card {
  position: relative;
  float: left;
  width: 310px;
  height: 100px;
  min-height: 1px;
  padding: 10px 20px;
  margin: 5px;
}
#latest-news .cards-container .cards .card-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
}
#latest-news .cards-container .cards .card-screen img {
  position: absolute;
  display: none;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#latest-news .cards-container .cards .card-screen p {
  position: relative;
  top: 60px;
  color: transparent;
}
#latest-news .cards-container .cards .card-screen:hover {
  display: inherit;
  background-color: rgba(88, 186, 71, 0.9);
}
#latest-news .cards-container .cards .card-screen:hover img {
  display: inherit;
}
#latest-news .cards-container .cards .card-screen:hover p {
  color: white;
}
#latest-news .cards-container .cards .card .date-box {
  position: absolute;
  width: 40px;
}
#latest-news .cards-container .cards .card .date-box .mon {
  position: absolute;
  width: 100%;
  text-align: center;
}
#latest-news .cards-container .cards .card .date-box .day-box {
  position: absolute;
  border: 1px solid white;
  width: 100%;
  height: 50px;
  top: 20px;
}
#latest-news .cards-container .cards .card .date-box .day-box .day {
  position: absolute;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#latest-news .cards-container .cards .card .date-box .year {
  position: absolute;
  width: 100%;
  top: 75px;
  text-align: center;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: white;
}
#latest-news .cards-container .cards .card .text {
  padding: 20px 0 0 60px;
}
#latest-news .cards-container .cards .card .text a {
  color: white;
  text-decoration: none;
}
#vtml-commands .wrapper {
  position: relative;
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}
#vtml-commands .video-container {
  position: relative;
  margin: 20px auto 100px;
  width: 394px;
}
#vtml-commands .video-container .video {
  position: relative;
}
#vtml-commands .video-container .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
}
#sample-audio .wrapper {
  position: relative;
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}
#sample-audio .buttons {
  margin-top: 60px;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: white;
}
#sample-audio .buttons button {
  padding: 10px 20px 7px;
  margin: 10px;
}
#sample-audio .buttons button img {
  vertical-align: middle;
  padding-right: 10px;
}
#sample-audio .buttons button.new {
  background: #0e5aa6 url('/images/new.png') no-repeat;
}
#sample-audio .buttons button:hover {
  background-color: #696969;
}
#sample-audio .buttons button:hover.new {
  background-color: #696969;
}