@charset "UTF-8";
/*------------------------------------*		# primary Sass file

		## doc scss
		http://github.com/paranoida/sass-mediaqueries
		http://bourbon.io/docs/
\*------------------------------------*/
/*------------------------------------*		All helpers
		|– helpers/ 
		|   |– _variables.scss   # Sass Variables 
		|   |– _functions.scss   # Sass Functions 
		|   |– _mixins.scss      # Sass Mixins 
		|   |– _helpers.scss     # Class & placeholders helpers 
		|   ...                  # Etc… 
		Helpers
		
		The helpers/ folder (sometimes called utils/) gathers all Sass tools and helpers we’ll use across the project. Got a function? A mixin? Put it in there. This folder also contains a _variables.scss file (sometimes _config.scss) which holds all global variables for the project (for typography, color schemes, and so on).

\*------------------------------------*/
/*------------------------------------*		# Scss Mixins
\*------------------------------------*/
.no-gutter {
  margin-left: 0;
  margin-right: 0; }

.no-gutter > * {
  padding-left: 0;
  padding-right: 0; }

.show {
  display: block !important; }

.hidden {
  display: none !important;
  visibility: hidden !important; }

.invisible {
  visibility: hidden; }

.non-bg {
  background: none !important;
  background-color: transparent !important;
  border: none !important; }

.non-padding {
  padding: 0 !important; }

.non-margin {
  margin: 0 !important; }

.no-padding__r {
  padding-right: 0; }

.no-padding__l {
  padding-left: 0; }

.text-nowrap {
  white-space: nowrap; }

.text-uppercase {
  text-transform: uppercase; }

.display--table {
  display: table;
  width: 100%; }

.display--table-cell {
  display: table-cell; }

.verticel--middle {
  vertical-align: middle; }

.insert-dotdotdot {
  display: block;
  overflow: visible;
  text-overflow: ellipsis; }

html.touch .no-scroll {
  position: fixed; }

@media only screen and (max-width: 543px) {
  .col-ss-full {
    width: 100%;
    display: block; } }

.visible-ss {
  display: none; }
  @media only screen and (max-width: 543px) {
    .visible-ss {
      display: block; } }

@media only screen and (min-width: 768px) {
  .font-size-20 {
    font-size: 20px;
    font-size: 2rem; } }

.font-size-20 > p {
  line-height: 1.8; }

.view.thumb {
  position: relative; }
  .view.thumb .img-photo {
    max-width: 100%;
    transition: all 0.3s linear; }
    .view.thumb .img-photo.photo-service-fix {
      background-size: 100px;
      background-color: #f3f5e7; }
  .view.thumb:hover .img-photo {
    -webkit-transform: scale(1.06);
            transform: scale(1.06); }

.view .mask {
  opacity: 0;
  overflow: visible;
  background-color: rgba(255, 255, 255, 0.2);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
  display: none; }
  .view .mask.non-bg {
    background-color: transparent; }

.view:hover .mask, .view:focus .mask, .view:active .mask {
  opacity: 1; }

.parent {
  position: absolute;
  height: 100%;
  width: 100%; }
  .parent span.img-photo {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.3s linear;
    display: block; }
  .parent:hover span.img-photo, .parent:focus span.img-photo {
    -webkit-transform: scale(1.06);
    transform: scale(1.06); }

html.desktop .visible-touch {
  display: none !important; }

html.touch .visible-touch {
  display: block; }

html.touch .visible-touch.link-email,
html.desktop .hidden-touch.link-email {
  display: table !important; }

html.desktop .hidden-touch {
  display: block; }

html.touch .hidden-touch {
  display: none !important; }

a.no-hand {
  pointer-events: none; }

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
  width: 100% !important; }
  .fb-page body.plugin,
  .fb-page span body.plugin,
  .fb-page span iframe[style] body.plugin {
    width: 100% !important; }

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
  font-family: "thaisans";
  text-rendering: optimizelegibility;
  line-height: 1; }
  html.desktop.mac h1, html.desktop.mac
  h2, html.desktop.mac
  h3, html.desktop.mac
  h4, html.desktop.mac
  h5, html.desktop.mac
  h6, html.desktop.mac
  .h1, html.desktop.mac
  .h2, html.desktop.mac
  .h3, html.desktop.mac
  .h4, html.desktop.mac
  .h5, html.desktop.mac
  .h6 {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    line-height: 1.3; }

h1 small,
h2 small {
  font-weight: normal;
  color: #bfbfbf; }

h1,
.h1 {
  margin-bottom: 0.71429;
  font-size: 70px;
  font-size: 7rem; }
  html.desktop.mac h1, html.desktop.mac
  .h1 {
    font-size: 52px;
    font-size: 5.2rem; }
  @media only screen and (max-width: 991px) {
    h1,
    .h1 {
      font-size: 62px;
      font-size: 6.2rem; }
      html.desktop.mac h1, html.desktop.mac
      .h1 {
        font-size: 45px;
        font-size: 4.5rem; } }
  @media only screen and (max-width: 767px) {
    h1,
    .h1 {
      font-size: 55px;
      font-size: 5.5rem; }
      html.desktop.mac h1, html.desktop.mac
      .h1 {
        font-size: 40px;
        font-size: 4rem; } }

h2,
.h2 {
  margin-bottom: 0.71429;
  font-size: 46px;
  font-size: 4.6rem; }
  html.desktop.mac h2, html.desktop.mac
  .h2 {
    font-size: 35px;
    font-size: 3.5rem; }
  @media only screen and (max-width: 767px) {
    h2,
    .h2 {
      font-size: 32px;
      font-size: 3.2rem; }
      html.desktop.mac h2, html.desktop.mac
      .h2 {
        font-size: 24px;
        font-size: 2.4rem; } }

h3,
.h3 {
  margin-bottom: 0.95238;
  font-size: 38px;
  font-size: 3.8rem; }
  html.desktop.mac h3, html.desktop.mac
  .h3 {
    font-size: 27px;
    font-size: 2.7rem; }
  @media only screen and (max-width: 767px) {
    h3,
    .h3 {
      font-size: 32px;
      font-size: 3.2rem; }
      html.desktop.mac h3, html.desktop.mac
      .h3 {
        font-size: 24px;
        font-size: 2.4rem; } }

h4,
.h4 {
  margin-bottom: 1.42857;
  font-size: 27px;
  font-size: 2.7rem; }
  html.desktop.mac h4, html.desktop.mac
  .h4 {
    font-size: 21px;
    font-size: 2.1rem; }
  @media only screen and (max-width: 767px) {
    h4,
    .h4 {
      font-size: 28px;
      font-size: 2.8rem; }
      html.desktop.mac h4, html.desktop.mac
      .h4 {
        font-size: 20px;
        font-size: 2rem; } }

h5,
.h5 {
  margin-bottom: 1.42857; }

h6,
.h6 {
  margin-bottom: 1.42857; }

p,
ol,
ul,
dl,
address {
  margin-bottom: 1.42857; }

small {
  font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
  font-weight: lighter; }

ul,
ol {
  margin: 0;
  padding: 0 0 0 30px; }

li ul,
li ol {
  margin: 0; }

blockquote {
  margin: 0;
  padding-left: 30px;
  font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
  font-style: normal; }

q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

cite {
  font-style: normal; }

dl,
dd {
  margin-bottom: 1.42857; }

dt {
  font-weight: bold; }

.dl-horizontal dt {
  float: left;
  clear: left;
  width: 20.25%;
  text-align: right; }

.dl-horizontal dd {
  margin-left: 22.78%; }

abbr[title] {
  border-bottom: 1px dotted #cccccc;
  cursor: help; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

ins {
  background-color: white;
  color: #555555;
  text-decoration: none; }

mark {
  background-color: white;
  color: #555555;
  font-style: italic;
  font-weight: bold; }

pre,
code,
kbd,
samp {
  font-family: Monaco, Courier New, monospace;
  line-height: 1.42857; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

sub,
sup {
  position: relative;
  line-height: 0;
  vertical-align: 1.42857; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

p {
  margin-bottom: 0;
  line-height: 1.8; }
  p + p {
    margin-top: 1.42857em; }

a {
  text-decoration: none;
  color: #222222; }
  a:visited {
    color: #222222; }
  a:hover {
    color: #34A93E; }
  a:focus {
    outline: thin dotted;
    color: #222222;
    text-decoration: none; }
  a:hover, a:active {
    outline: 0; }

::-moz-selection {
  background-color: #AAD8FF;
  color: #555555;
  text-shadow: none; }

::selection {
  background-color: #AAD8FF;
  color: #555555;
  text-shadow: none; }

.color-brand {
  color: #34A93E; }

.color-black {
  color: #222222; }

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

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'fontello';
		src: url('../font/fontello.svg?#fontello') format('svg');
	}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-email:before {
  content: '\5d'; }

/* ']' */
.icon-dot:before {
  content: '\e78b'; }

/* '' */
.icon-down-open-big:before {
  content: '\e800'; }

/* '' */
.icon-right-open-big:before {
  content: '\e801'; }

/* '' */
.icon-left-open-big:before {
  content: '\e802'; }

/* '' */
.icon-up-open-big:before {
  content: '\e803'; }

/* '' */
.icon-twitter:before {
  content: '\e804'; }

/* '' */
.icon-youtube-play:before {
  content: '\e805'; }

/* '' */
.icon-pinterest:before {
  content: '\e806'; }

/* '' */
.icon-facebook-1:before {
  content: '\f09a'; }

/* '' */
.icon-facebook:before {
  content: '\f300'; }

/* '' */
.icon-twitter-bird:before {
  content: '\f303'; }

/* '' */
.icon-search-1:before {
  content: '🔍'; }

/* '\1f50d' */
/*!
 * Bootstrap-select v1.8.0 (http://silviomoreto.github.io/bootstrap-select)
 *
 * Copyright 2013-2015 bootstrap-select
 * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
 */
.bootstrap-select {
  width: 100% \0;
  /*IE9 and below*/ }
  .bootstrap-select > .dropdown-toggle {
    width: 100%;
    padding-right: 25px;
    z-index: 1; }
  .bootstrap-select > select {
    position: absolute !important;
    bottom: 0;
    left: 50%;
    width: 0.11px !important;
    height: 100% !important;
    padding: 0 !important;
    opacity: 0 !important;
    border: none; }
    .bootstrap-select > select.mobile-device {
      top: 0;
      left: 0;
      display: block !important;
      width: 100% !important;
      z-index: 2; }
  .has-error .bootstrap-select .dropdown-toggle,
  .error .bootstrap-select .dropdown-toggle {
    border-color: #ff0000 !important; }
  .bootstrap-select.fit-width {
    width: auto !important; }
  .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%; }
  .bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px; }

.bootstrap-select.form-control {
  margin-bottom: 0;
  padding: 0;
  border: none; }
  .bootstrap-select.form-control:not([class*="col-"]) {
    width: 100%; }
  .bootstrap-select.form-control.input-group-btn {
    z-index: auto; }

.bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] {
  float: none;
  display: inline-block;
  margin-left: 0; }

.bootstrap-select.btn-group.dropdown-menu-right, .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right,
.row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right {
  float: right; }

.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group,
.form-group .bootstrap-select.btn-group {
  margin-bottom: 0; }

.form-group-lg .bootstrap-select.btn-group.form-control,
.form-group-sm .bootstrap-select.btn-group.form-control {
  padding: 0; }

.form-inline .bootstrap-select.btn-group .form-control {
  width: 100%; }

.bootstrap-select.btn-group.disabled,
.bootstrap-select.btn-group > .disabled {
  cursor: not-allowed; }
  .bootstrap-select.btn-group.disabled:focus,
  .bootstrap-select.btn-group > .disabled:focus {
    outline: none !important; }

.bootstrap-select.btn-group.bs-container {
  position: absolute; }
  .bootstrap-select.btn-group.bs-container .dropdown-menu {
    z-index: 1060; }

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline-block;
  width: 100%;
  text-align: left;
  padding-right: 45px; }

.bootstrap-select.btn-group .dropdown-toggle .caret {
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -10px;
  vertical-align: middle;
  border: none;
  background-image: url("../img/icon/select/arrow-down%402x.png");
  background-repeat: no-repeat;
  background-size: 35px 20px;
  width: 35px;
  height: 20px; }
  html .filter-procurement .bootstrap-select.btn-group .dropdown-toggle .caret {
    background-size: 21px 12px;
    width: 21px;
    height: 12px;
    right: 15px;
    margin-top: -8px; }
  html .-procurement .bootstrap-select.btn-group .dropdown-toggle .caret {
    background-size: 21px 12px;
    width: 21px;
    height: 12px;
    right: inherit;
    margin-top: -6px; }
  @media only screen and (max-width: 767px) {
    .bootstrap-select.btn-group .dropdown-toggle .caret {
      background-size: 21px 12px;
      width: 21px;
      height: 12px;
      background-position: center;
      margin-top: 0; } }
  .no-svg .bootstrap-select.btn-group .dropdown-toggle .caret {
    background-image: url("../img/icon/select/arrow-down%402x.png"); }

.bootstrap-select.btn-group.dropup .caret, .bootstrap-select.btn-group.open .caret {
  border: none;
  background-image: url("../img/icon/select/arrow-up%402x.png");
  background-repeat: no-repeat;
  background-size: 35px 20px;
  width: 35px;
  height: 20px; }
  @media only screen and (max-width: 767px) {
    .bootstrap-select.btn-group.dropup .caret, .bootstrap-select.btn-group.open .caret {
      background-size: 21px 12px;
      width: 21px;
      height: 12px;
      background-position: center; } }
  .no-svg .bootstrap-select.btn-group.dropup .caret, .no-svg .bootstrap-select.btn-group.open .caret {
    background-image: url("../img/icon/select/arrow-up%402x.png"); }

.bootstrap-select.btn-group[class*="col-"] .dropdown-toggle {
  width: 100%; }

.bootstrap-select.btn-group .dropdown-menu {
  min-width: 100%;
  box-sizing: border-box; }
  .bootstrap-select.btn-group .dropdown-menu.inner {
    position: static;
    float: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none; }
  .bootstrap-select.btn-group .dropdown-menu li {
    position: relative; }
    .bootstrap-select.btn-group .dropdown-menu li.active small {
      color: #fff; }
    .bootstrap-select.btn-group .dropdown-menu li.disabled a {
      cursor: not-allowed; }
    .bootstrap-select.btn-group .dropdown-menu li a {
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .bootstrap-select.btn-group .dropdown-menu li a.opt {
        position: relative;
        padding-left: 2.25em; }
      .bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
        display: none; }
      .bootstrap-select.btn-group .dropdown-menu li a span.text {
        display: inline-block; }
    .bootstrap-select.btn-group .dropdown-menu li small {
      padding-left: 0.5em; }
  .bootstrap-select.btn-group .dropdown-menu .notify {
    position: absolute;
    bottom: 5px;
    width: 96%;
    margin: 0 2%;
    min-height: 26px;
    padding: 3px 5px;
    background: whitesmoke;
    border: 1px solid #e3e3e3;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    opacity: 0.9;
    box-sizing: border-box; }

.bootstrap-select.btn-group .no-results {
  padding: 3px;
  background: #f5f5f5;
  margin: 0 5px;
  white-space: nowrap; }

.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {
  position: static; }

.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {
  position: static;
  top: auto;
  margin-top: -1px; }

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  margin-top: 5px; }

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
  margin-right: 34px; }

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {
  z-index: 1061; }

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(204, 204, 204, 0.2);
  position: absolute;
  bottom: -4px;
  left: 9px;
  display: none; }

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  position: absolute;
  bottom: -4px;
  left: 10px;
  display: none; }

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
  bottom: auto;
  top: -3px;
  border-top: 7px solid rgba(204, 204, 204, 0.2);
  border-bottom: 0; }

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
  bottom: auto;
  top: -3px;
  border-top: 6px solid white;
  border-bottom: 0; }

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
  right: 12px;
  left: auto; }

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
  right: 13px;
  left: auto; }

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
  display: block; }

.bs-searchbox,
.bs-actionsbox,
.bs-donebutton {
  padding: 4px 8px; }

.bs-actionsbox {
  width: 100%;
  box-sizing: border-box; }
  .bs-actionsbox .btn-group button {
    width: 50%; }

.bs-donebutton {
  float: left;
  width: 100%;
  box-sizing: border-box; }
  .bs-donebutton .btn-group button {
    width: 100%; }

.bs-searchbox + .bs-actionsbox {
  padding: 0 8px 4px; }

.bs-searchbox .form-control {
  margin-bottom: 0;
  width: 100%;
  float: none; }

.bootstrap-select {
  position: relative; }
  .bootstrap-select .btn {
    border: none;
    background-color: #ffffff;
    padding: 15px 0px;
    color: #222222;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 0px 0px;
    border-bottom: 1px solid #34A93E;
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 38px;
    font-size: 3.8rem; }
    html.desktop.mac .bootstrap-select .btn {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 27px;
      font-size: 2.7rem;
      font-weight: 200; }
    @media only screen and (max-width: 767px) {
      .bootstrap-select .btn {
        font-size: 32px;
        font-size: 3.2rem; }
        html.desktop.mac .bootstrap-select .btn {
          font-size: 24px;
          font-size: 2.4rem; } }
    html .filter-procurement .bootstrap-select .btn {
      border: 1px solid #dddddd;
      font-family: "THSarabunNew", Arial, Thonburi !important;
      font-size: 15px !important;
      border-radius: 5px;
      color: #222222;
      font-weight: bold !important;
      padding: 15px 30px 15px 15px; }
      html .filter-procurement .bootstrap-select .btn .filter-option {
        padding: 0; }
    html .-procurement .bootstrap-select .btn {
      border: none;
      font-family: "THSarabunNew", Arial, Thonburi !important;
      background-color: transparent !important;
      font-size: 15px !important;
      border-radius: 5px;
      color: white;
      font-weight: bold !important;
      padding: 15px 0;
      width: auto; }
      html .-procurement .bootstrap-select .btn:hover, html .-procurement .bootstrap-select .btn:active {
        color: white; }
      html .-procurement .bootstrap-select .btn .filter-option {
        padding: 0;
        width: auto; }
    .bootstrap-select .btn:after {
      background: none; }
    .bootstrap-select .btn:hover, .bootstrap-select .btn:active {
      box-shadow: none;
      background-color: #ffffff; }
  .bootstrap-select.open > .btn-default.dropdown-toggle,
  .bootstrap-select.open > .btn-default.dropdown-toggle:hover,
  .bootstrap-select.open > .btn-default.dropdown-toggle:focus,
  .bootstrap-select.open > .btn-default.dropdown-toggle.focus {
    background-color: #ffffff;
    box-shadow: none;
    border-bottom-color: #34A93E; }
    html .filter-procurement .bootstrap-select.open > .btn-default.dropdown-toggle, html .filter-procurement
    .bootstrap-select.open > .btn-default.dropdown-toggle:hover, html .filter-procurement
    .bootstrap-select.open > .btn-default.dropdown-toggle:focus, html .filter-procurement
    .bootstrap-select.open > .btn-default.dropdown-toggle.focus {
      border-color: #34A93E; }
  .bootstrap-select .dropdown-menu {
    padding: 0;
    background-color: white;
    box-shadow: none;
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 27px;
    font-size: 2.7rem;
    margin-top: 10px; }
    html.desktop.mac .bootstrap-select .dropdown-menu {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 21px;
      font-size: 2.1rem;
      font-weight: 200; }
    html .filter-procurement .bootstrap-select .dropdown-menu, html .-procurement .bootstrap-select .dropdown-menu {
      font-family: "THSarabunNew", Arial, Thonburi !important;
      font-size: 15px !important; }
    @media only screen and (max-width: 767px) {
      .bootstrap-select .dropdown-menu {
        font-size: 28px;
        font-size: 2.8rem; }
        html.desktop.mac .bootstrap-select .dropdown-menu {
          font-size: 20px;
          font-size: 2rem; } }
    .bootstrap-select .dropdown-menu > li > a {
      padding: 5px 15px; }
      .bootstrap-select .dropdown-menu > li > a:hover {
        background-color: #34A93E;
        color: white; }
    .bootstrap-select .dropdown-menu li.selected a {
      background-color: #F9F9F9; }
    .bootstrap-select .dropdown-menu li.selected:hover a {
      background-color: #34A93E;
      color: white; }

.dropdown-menu > li > a {
  color: #222222; }

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #34A93E;
  color: white; }

/*!
 * Datepicker for Bootstrap v1.7.1 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */
.datepicker {
  border-radius: 4px;
  direction: ltr; }

.datepicker-inline {
  width: 220px; }

.datepicker-rtl {
  direction: rtl; }

.datepicker-rtl.dropdown-menu {
  left: auto; }

.datepicker-rtl table tr td span {
  float: right; }

.datepicker-dropdown {
  top: 0;
  left: 0;
  padding: 4px;
  background-color: white; }

.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(0, 0, 0, 0.15);
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute; }

.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
  position: absolute; }

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px; }

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px; }

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px; }

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px; }

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px; }

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px; }

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid rgba(0, 0, 0, 0.15); }

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff; }

.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.datepicker table tr td,
.datepicker table tr th {
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none; }

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent; }

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #777777; }

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: #eeeeee;
  cursor: pointer; }

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #777777;
  cursor: default; }

.datepicker table tr td.highlighted {
  color: #000;
  background-color: #d9edf7;
  border-color: #85c5e5;
  border-radius: 0; }

.datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.focus {
  color: #000;
  background-color: #afd9ee;
  border-color: #298fc2; }

.datepicker table tr td.highlighted:hover {
  color: #000;
  background-color: #afd9ee;
  border-color: #52addb; }

.datepicker table tr td.highlighted:active,
.datepicker table tr td.highlighted.active {
  color: #000;
  background-color: #afd9ee;
  border-color: #52addb; }

.datepicker table tr td.highlighted:active:hover,
.datepicker table tr td.highlighted.active:hover,
.datepicker table tr td.highlighted:active:focus,
.datepicker table tr td.highlighted.active:focus,
.datepicker table tr td.highlighted:active.focus,
.datepicker table tr td.highlighted.active.focus {
  color: #000;
  background-color: #91cbe8;
  border-color: #298fc2; }

.datepicker table tr td.highlighted.disabled:hover,
.datepicker table tr td.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted.disabled:focus,
.datepicker table tr td.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.disabled.focus,
.datepicker table tr td.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.highlighted.focus {
  background-color: #d9edf7;
  border-color: #85c5e5; }

.datepicker table tr td.highlighted.focused {
  background: #afd9ee; }

.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
  background: #d9edf7;
  color: #777777; }

.datepicker table tr td.today {
  color: #000;
  background-color: #ffdb99;
  border-color: #ffb733; }

.datepicker table tr td.today:focus,
.datepicker table tr td.today.focus {
  color: #000;
  background-color: #ffc966;
  border-color: #b37400; }

.datepicker table tr td.today:hover {
  color: #000;
  background-color: #ffc966;
  border-color: #f59e00; }

.datepicker table tr td.today:active,
.datepicker table tr td.today.active {
  color: #000;
  background-color: #ffc966;
  border-color: #f59e00; }

.datepicker table tr td.today:active:hover,
.datepicker table tr td.today.active:hover,
.datepicker table tr td.today:active:focus,
.datepicker table tr td.today.active:focus,
.datepicker table tr td.today:active.focus,
.datepicker table tr td.today.active.focus {
  color: #000;
  background-color: #ffbc42;
  border-color: #b37400; }

.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.today:focus,
.datepicker table tr td.today.disabled.focus,
.datepicker table tr td.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.today.focus {
  background-color: #ffdb99;
  border-color: #ffb733; }

.datepicker table tr td.today.focused {
  background: #ffc966; }

.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:active {
  background: #ffdb99;
  color: #777777; }

.datepicker table tr td.range {
  color: #000;
  background-color: #eeeeee;
  border-color: #bbbbbb;
  border-radius: 0; }

.datepicker table tr td.range:focus,
.datepicker table tr td.range.focus {
  color: #000;
  background-color: #d5d5d5;
  border-color: #7c7c7c; }

.datepicker table tr td.range:hover {
  color: #000;
  background-color: #d5d5d5;
  border-color: #9d9d9d; }

.datepicker table tr td.range:active,
.datepicker table tr td.range.active {
  color: #000;
  background-color: #d5d5d5;
  border-color: #9d9d9d; }

.datepicker table tr td.range:active:hover,
.datepicker table tr td.range.active:hover,
.datepicker table tr td.range:active:focus,
.datepicker table tr td.range.active:focus,
.datepicker table tr td.range:active.focus,
.datepicker table tr td.range.active.focus {
  color: #000;
  background-color: #c3c3c3;
  border-color: #7c7c7c; }

.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled:focus,
.datepicker table tr td.range[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range:focus,
.datepicker table tr td.range.disabled.focus,
.datepicker table tr td.range[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.focus {
  background-color: #eeeeee;
  border-color: #bbbbbb; }

.datepicker table tr td.range.focused {
  background: #d5d5d5; }

.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:active {
  background: #eeeeee;
  color: #777777; }

.datepicker table tr td.range.highlighted {
  color: #000;
  background-color: #e4eef3;
  border-color: #9dc1d3; }

.datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.focus {
  color: #000;
  background-color: #c1d7e3;
  border-color: #4b88a6; }

.datepicker table tr td.range.highlighted:hover {
  color: #000;
  background-color: #c1d7e3;
  border-color: #73a6c0; }

.datepicker table tr td.range.highlighted:active,
.datepicker table tr td.range.highlighted.active {
  color: #000;
  background-color: #c1d7e3;
  border-color: #73a6c0; }

.datepicker table tr td.range.highlighted:active:hover,
.datepicker table tr td.range.highlighted.active:hover,
.datepicker table tr td.range.highlighted:active:focus,
.datepicker table tr td.range.highlighted.active:focus,
.datepicker table tr td.range.highlighted:active.focus,
.datepicker table tr td.range.highlighted.active.focus {
  color: #000;
  background-color: #a8c8d8;
  border-color: #4b88a6; }

.datepicker table tr td.range.highlighted.disabled:hover,
.datepicker table tr td.range.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.highlighted:hover,
.datepicker table tr td.range.highlighted.disabled:focus,
.datepicker table tr td.range.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.disabled.focus,
.datepicker table tr td.range.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
  background-color: #e4eef3;
  border-color: #9dc1d3; }

.datepicker table tr td.range.highlighted.focused {
  background: #c1d7e3; }

.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.highlighted.disabled:active {
  background: #e4eef3;
  color: #777777; }

.datepicker table tr td.range.today {
  color: #000;
  background-color: #f7ca77;
  border-color: #f1a417; }

.datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.focus {
  color: #000;
  background-color: #f4b747;
  border-color: #815608; }

.datepicker table tr td.range.today:hover {
  color: #000;
  background-color: #f4b747;
  border-color: #bf800c; }

.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today.active {
  color: #000;
  background-color: #f4b747;
  border-color: #bf800c; }

.datepicker table tr td.range.today:active:hover,
.datepicker table tr td.range.today.active:hover,
.datepicker table tr td.range.today:active:focus,
.datepicker table tr td.range.today.active:focus,
.datepicker table tr td.range.today:active.focus,
.datepicker table tr td.range.today.active.focus {
  color: #000;
  background-color: #f2aa25;
  border-color: #815608; }

.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled:focus,
.datepicker table tr td.range.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.disabled.focus,
.datepicker table tr td.range.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.today.focus {
  background-color: #f7ca77;
  border-color: #f1a417; }

.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:active {
  background: #f7ca77;
  color: #777777; }

.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
  color: #fff;
  background-color: #777777;
  border-color: #555555;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }

.datepicker table tr td.selected:focus,
.datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.focus,
.datepicker table tr td.selected.highlighted.focus {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #161616; }

.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.highlighted:hover {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #373737; }

.datepicker table tr td.selected:active,
.datepicker table tr td.selected.highlighted:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected.highlighted.active {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #373737; }

.datepicker table tr td.selected:active:hover,
.datepicker table tr td.selected.highlighted:active:hover,
.datepicker table tr td.selected.active:hover,
.datepicker table tr td.selected.highlighted.active:hover,
.datepicker table tr td.selected:active:focus,
.datepicker table tr td.selected.highlighted:active:focus,
.datepicker table tr td.selected.active:focus,
.datepicker table tr td.selected.highlighted.active:focus,
.datepicker table tr td.selected:active.focus,
.datepicker table tr td.selected.highlighted:active.focus,
.datepicker table tr td.selected.active.focus,
.datepicker table tr td.selected.highlighted.active.focus {
  color: #fff;
  background-color: #4c4c4c;
  border-color: #161616; }

.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.highlighted.disabled:hover,
.datepicker table tr td.selected[disabled]:hover,
.datepicker table tr td.selected.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected.highlighted:hover,
.datepicker table tr td.selected.disabled:focus,
.datepicker table tr td.selected.highlighted.disabled:focus,
.datepicker table tr td.selected[disabled]:focus,
.datepicker table tr td.selected.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.selected:focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.disabled.focus,
.datepicker table tr td.selected.highlighted.disabled.focus,
.datepicker table tr td.selected[disabled].focus,
.datepicker table tr td.selected.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.selected.focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
  background-color: #777777;
  border-color: #555555; }

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }

.datepicker table tr td.active:focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.focus,
.datepicker table tr td.active.highlighted.focus {
  color: #fff;
  background-color: #34A93E;
  border-color: #122b40; }

.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover {
  color: #fff;
  background-color: #34A93E;
  border-color: #204d74; }

.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
  color: #fff;
  background-color: #34A93E;
  border-color: #204d74; }

.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus {
  color: #fff;
  background-color: #34A93E;
  border-color: #122b40; }

.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.highlighted.disabled:hover,
.datepicker table tr td.active[disabled]:hover,
.datepicker table tr td.active.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.highlighted.disabled:focus,
.datepicker table tr td.active[disabled]:focus,
.datepicker table tr td.active.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.disabled.focus,
.datepicker table tr td.active.highlighted.disabled.focus,
.datepicker table tr td.active[disabled].focus,
.datepicker table tr td.active.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.active.focus,
fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
  background-color: #337ab7;
  border-color: #2e6da4; }

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  border-radius: 4px; }

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  background: #eeeeee; }

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #777777;
  cursor: default; }

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }

.datepicker table tr td span.active:focus,
.datepicker table tr td span.active:hover:focus,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.focus,
.datepicker table tr td span.active:hover.focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active.disabled:hover.focus {
  color: #fff;
  background-color: #34A93E;
  border-color: #122b40; }

.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover {
  color: #fff;
  background-color: #34A93E;
  border-color: #204d74; }

.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  color: #fff;
  background-color: #34A93E;
  border-color: #204d74; }

.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover:active:hover,
.datepicker table tr td span.active.disabled:active:hover,
.datepicker table tr td span.active.disabled:hover:active:hover,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover,
.datepicker table tr td span.active.disabled.active:hover,
.datepicker table tr td span.active.disabled:hover.active:hover,
.datepicker table tr td span.active:active:focus,
.datepicker table tr td span.active:hover:active:focus,
.datepicker table tr td span.active.disabled:active:focus,
.datepicker table tr td span.active.disabled:hover:active:focus,
.datepicker table tr td span.active.active:focus,
.datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active.disabled.active:focus,
.datepicker table tr td span.active.disabled:hover.active:focus,
.datepicker table tr td span.active:active.focus,
.datepicker table tr td span.active:hover:active.focus,
.datepicker table tr td span.active.disabled:active.focus,
.datepicker table tr td span.active.disabled:hover:active.focus,
.datepicker table tr td span.active.active.focus,
.datepicker table tr td span.active:hover.active.focus,
.datepicker table tr td span.active.disabled.active.focus,
.datepicker table tr td span.active.disabled:hover.active.focus {
  color: #fff;
  background-color: #34A93E;
  border-color: #122b40; }

.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover.disabled:hover,
.datepicker table tr td span.active.disabled.disabled:hover,
.datepicker table tr td span.active.disabled:hover.disabled:hover,
.datepicker table tr td span.active[disabled]:hover,
.datepicker table tr td span.active:hover[disabled]:hover,
.datepicker table tr td span.active.disabled[disabled]:hover,
.datepicker table tr td span.active.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active:hover.disabled:focus,
.datepicker table tr td span.active.disabled.disabled:focus,
.datepicker table tr td span.active.disabled:hover.disabled:focus,
.datepicker table tr td span.active[disabled]:focus,
.datepicker table tr td span.active:hover[disabled]:focus,
.datepicker table tr td span.active.disabled[disabled]:focus,
.datepicker table tr td span.active.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active:hover.disabled.focus,
.datepicker table tr td span.active.disabled.disabled.focus,
.datepicker table tr td span.active.disabled:hover.disabled.focus,
.datepicker table tr td span.active[disabled].focus,
.datepicker table tr td span.active:hover[disabled].focus,
.datepicker table tr td span.active.disabled[disabled].focus,
.datepicker table tr td span.active.disabled:hover[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active.focus,
fieldset[disabled] .datepicker table tr td span.active:hover.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
  background-color: #337ab7;
  border-color: #2e6da4; }

.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #777777; }

.datepicker .datepicker-switch {
  width: 145px; }

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  cursor: pointer; }

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
  background: #eeeeee; }

.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: hidden; }

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle; }

.input-group.date .input-group-addon {
  cursor: pointer;
  background-color: white; }

.input-daterange {
  width: 100%; }

.input-daterange input {
  text-align: center; }

.input-daterange input:first-child {
  border-radius: 3px 0 0 3px; }

.input-daterange input:last-child {
  border-radius: 0 3px 3px 0; }

.input-daterange .input-group-addon {
  width: auto;
  min-width: 16px;
  padding: 4px 5px;
  line-height: 1.42857143;
  text-shadow: 0 1px 0 #fff;
  border-width: 1px 0;
  margin-left: -5px;
  margin-right: -5px; }

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

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

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom; }

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg); }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg); }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg); }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg); }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg); }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg); }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg); }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg); }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center; }

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

@keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn; }

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown; }

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft; }

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight; }

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp; }

@-webkit-keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut; }

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown; }

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft; }

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight; }

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp; }

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp; }

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown; }

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden; }
  .embed-responsive-16by9 {
    padding-bottom: 56.25%; }
  .embed-responsive-4by3 {
    padding-bottom: 75%; }
  .embed-responsive-1by1 {
    padding-bottom: 100%; }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.video-wrapper {
  max-width: 100%;
  height: 100%;
  position: relative;
  z-index: 9; }

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 100%;
  background-color: black; }
  .video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute; }

#nav-icon {
  width: 55px;
  height: 55px;
  cursor: pointer;
  border: none;
  padding: 0;
  border-radius: 500px 500px;
  margin-right: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: 0.5s ease-in-out; }
  #nav-icon .group {
    position: relative;
    width: 23px;
    height: 14px;
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle; }
  #nav-icon .border-bar {
    display: block;
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background: #222222;
    border-radius: 100px;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: 0.25s ease-in-out; }
    #nav-icon .border-bar:nth-child(1), #nav-icon .border-bar:nth-child(2), #nav-icon .border-bar:nth-child(3) {
      -webkit-transform-origin: left center;
      transform-origin: left center; }
    #nav-icon .border-bar:nth-child(1) {
      top: 0px; }
    #nav-icon .border-bar:nth-child(2) {
      top: 6px; }
    #nav-icon .border-bar:nth-child(3) {
      top: 12px; }
  #nav-icon.open {
    border-color: white;
    z-index: 999; }
    #nav-icon.open span.border-bar {
      background-color: white; }
      #nav-icon.open span.border-bar:nth-child(1) {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
        left: 2px; }
      #nav-icon.open span.border-bar:nth-child(2) {
        width: 0%;
        opacity: 0; }
      #nav-icon.open span.border-bar:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 16px;
        left: 2px; }

/* ***********************************************************
   ******************** CODETABS CORE ************************
   *********************************************************** */
/* BASIC STYLE
     * class ready --> element already loaded
     * Pagination co tinh nang tuong tu nhu viewport --> style giong nhau
    ---------------------------------------------------------- */
.ct {
  position: relative; }

.ct-viewport, .ct-pag {
  overflow: hidden; }

.ct-ie7 .ct-viewport,
.ct-ie7 .ct-pag {
  position: relative; }

.ct-hide {
  display: none !important; }

.ct-noclip {
  overflow: visible !important; }

.ct-ghost {
  visibility: hidden !important; }

.ct-wfit > * {
  width: 100% !important; }

.ct-hfit > * {
  height: 100% !important; }

.ct-canvas, .ct-paginner {
  overflow: visible !important;
  position: relative; }

.ct.ct-ready .ct-canvas {
  height: 100%; }

/* Awake setup */
.ct-slide {
  width: 100%; }

.ct-slide.ct-sleep {
  height: 100%; }

.ct-slide.ct-sleep > * {
  display: none; }

/* CODE INITIALIZE + READY
    ---------------------------------------------------------- */
.ct-init {
  visibility: hidden;
  height: 0; }

/* Not use display: none --> slider will get width-slide = 0 */
.ct-ready {
  visibility: visible; }

.ct.ct-ready {
  height: auto; }

.ct-ready .ct-slide, .ct-ready .ct-pagitem, .ct-outside .ct-pagitem {
  display: block;
  position: absolute;
  left: 0;
  top: 0; }

/* BOOTSTRAP FIXED
    ---------------------------------------------------------- */
.ct-viewport, .ct-canvas, .ct-slide, .ct-pagitem {
  box-sizing: content-box; }

/* HEIGHT TYPE
    ---------------------------------------------------------- */
/* Slide in height-fixed always == hCode */
.ct-height-fixed .ct-slide {
  height: 100%; }

/* Image background: smooth move when have top value */
.ct-height-fixed .ct-slide > .ct-imgback {
  transition: top .2s; }

/* NAVIGATION
    ---------------------------------------------------------- */
.ct-next, .ct-prev, .ct-playpause {
  cursor: pointer;
  z-index: 3; }

.ct-prev.ct-inactived, .ct-next.ct-inactived {
  opacity: .25; }

.ct-prev, .ct-next {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  top: 50%;
  margin-top: -25px;
  opacity: .2;
  background: url("../img/tab/icon_nav.png") no-repeat;
  text-indent: -9999px;
  cursor: pointer; }

.ct-prev {
  left: 10px;
  background-position: 0 0; }

.ct-next {
  right: 10px;
  background-position: -50px 0; }

.ct-prev:hover, .ct-next:hover {
  opacity: 1; }

/* Auto hide when small screen */
@media only screen and (min-width: 1px) and (max-width: 320px) {
  .ct-nav {
    display: none; } }

/* PAGINATION
     * Dat lai thuoc tinh width cho tung loai --> tab khong can width = 100%
    ---------------------------------------------------------- */
.ct-pag {
  z-index: 3; }

.ct-pagitem {
  cursor: pointer; }

/* PAGINATION TAB */
.ct-tab .ct-pagitem {
  padding-bottom: 5px;
  color: #bbb;
  white-space: nowrap; }

.ct-tab .ct-pagitem.ct-cur {
  color: #111; }

/* Tabs horizontal */
.ct-tab.ct-pag-hor.ct-pag-top {
  border-bottom: 1px solid #E6E6E6; }

.ct-tab.ct-pag-hor.ct-pag-bottom {
  border-top: 1px solid #E6E6E6; }

.ct-pag-hor > .ct-viewport {
  padding-top: 20px;
  padding-bottom: 10px; }

.ct-tab.ct-pag-hor .ct-pagitem {
  padding: 10px 15px;
  text-align: center; }

/* Tabs Vertical */
.ct-tab.ct-pag-ver.ct-pag-top {
  float: left; }

.ct.ct-pag-ver.ct-pag-bottom {
  position: relative; }

.ct-tab.ct-pag-ver.ct-pag-bottom {
  position: absolute;
  right: 0;
  top: 0; }

.ct-pag-ver.ct-pag-top > .ct-viewport {
  padding-left: 30px;
  border-left: 1px solid #E6E6E6; }

.ct-pag-ver.ct-pag-bottom > .ct-viewport {
  padding-right: 30px;
  border-right: 1px solid #E6E6E6; }

.ct-tab.ct-pag-ver .ct-pagitem {
  padding: 10px 20px 10px 0; }

/* Tabs Outside
        + Chua update trong code */
.ct-tab.ct-pag-ver.ct-pag-bottom.ct-outside {
  position: static; }

/* PAGINATION LIST */
.ct-list .ct-pagitem {
  position: static;
  display: inline; }

/* PAGINATION THUMBNAIL */
.ct-thumb .ct-pagitem {
  width: 75px;
  height: 75px; }

.ct-thumbitem {
  overflow: hidden;
  width: 100%;
  height: 100%; }

.ct-thumbitem > img {
  position: relative;
  -webkit-transform: translateZ(0);
  /* Chrome image fix */ }

/* CAPTION
    ---------------------------------------------------------- */
.ct-capinner {
  position: relative; }

.ct-cap-last {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden; }

/* Clearfix for caption --> Lay kich thuoc chinh xac */
.ct-cap-last:after, .ct-cap-cur:after {
  content: " ";
  display: table;
  clear: both; }

.ct-cap-last, .ct-cap-cur {
  *zoom: 1; }

/* ICON LOADER
    ---------------------------------------------------------- */
.ct-slide.loading {
  position: relative;
  width: 100%;
  height: 100%; }

.ct-loader {
  position: absolute;
  width: 54px;
  height: 54px;
  left: 50%;
  top: 50%;
  margin-left: -27px;
  margin-top: -27px;
  text-indent: -999999px;
  background: #fff url("../img/tab/loader.gif") no-repeat;
  border-radius: 50%; }

/* TIMER
    ---------------------------------------------------------- */
/* TIMER BAR */
.ct-timer-bar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.08); }

.ct-timer-bar > .ct-timeritem {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #999;
  background-color: rgba(0, 0, 0, 0.3); }

/* TIMER ARC */
.ct-timer-arc {
  width: 40px;
  height: 40px; }

/* TIMER NUMBER */
.ct-timer-number {
  font-size: 11px;
  text-align: center; }

/* GRAB CURSOR
    ---------------------------------------------------------- */
.ct-grab,
.slide-as-pag .ct-grab .ct-cur {
  cursor: url("../img/tab/grab2.html"), move;
  /* For IE9-10. if css & html not in same folder -> setup parent folder */
  cursor: url("../img/tab/grab2.png") 12 10, url("../img/tab/grab2.html"), move;
  /* IE7-8 & Modern browser */ }

.ct-grabbing, .ct-grabbing .ct-pagitem,
.slide-as-pag .ct-grabbing .ct-cur {
  cursor: url("../img/tab/grabbing2.html"), move;
  /* For IE9-10. if css & html not in same folder -> setup parent folder */
  cursor: url("../img/tab/grabbing2.png") 12 10, url("../img/tab/grabbing2.html"), move;
  /* IE7-8 & Modern browser */ }

/* IMAGE
        + Remove attribute max-width on image
    ---------------------------------------------------------- */
.ct-imgback > img {
  display: block;
  max-width: none !important; }

/* LAYOUT LINE & DOT
    ---------------------------------------------------------- */
.ct-line .ct-slide, .ct-dot .ct-slide {
  overflow: hidden; }

/* Center imageBack */
.ct-line .ct-imgback, .ct-dot .ct-imgback {
  position: relative;
  overflow: hidden; }

.ct-line .ct-imgback > img, .ct-dot .ct-imgback > img {
  position: relative;
  left: 0;
  top: 0; }

/* Layout dot only */
.ct-dot > .ct-viewport > .ct-canvas {
  overflow: hidden; }

.ct-dot > .ct-viewport > .ct-canvas > .ct-slide {
  visibility: hidden; }

.ct-dot > .ct-viewport > .ct-canvas > .ct-slide.ct-cur {
  visibility: visible;
  z-index: 2; }

/* HEIGHT NATIVE */
.ct-line > .ct-viewport.ct-hNative,
.ct-dot > .ct-viewport.ct-hNative {
  height: auto !important; }

.ct-line > .ct-viewport.ct-hNative > .ct-canvas > .ct-slide.ct-cur,
.ct-dot > .ct-viewport.ct-hNative > .ct-canvas > .ct-slide.ct-cur {
  position: relative; }

/* CODE NESTED -> hide/show nested
    ---------------------------------------------------------- */
.ct .ct,
.ct .ct .ct-cur {
  visibility: hidden; }

.ct-slide.ct-cur .ct,
.ct-slide.ct-cur .ct .ct-cur {
  visibility: visible; }

/* Nested level 2 */
.ct .ct-slide .ct .ct,
.ct .ct-slide .ct .ct .ct-cur {
  visibility: hidden; }

.ct-slide.ct-cur .ct .ct,
.ct-slide.ct-cur .ct .ct .ct-cur {
  visibility: visible; }

/* Fix layout line & dot khi fxRun van hien nested code */
.ct-line.ct-fxRun .ct,
.ct-line.ct-fxRun .ct .ct-cur,
.code-animated .ct,
.code-animated .ct .ct-cur {
  visibility: visible; }

/* EFFECT - CORE
    ---------------------------------------------------------- */
.fx-overlay {
  position: absolute;
  left: 50%; }

.fx-inner {
  position: relative;
  left: -50%; }

.ct-dot .fx-front {
  overflow: hidden;
  position: absolute; }

.fx-front .ct-imgback {
  overflow: hidden;
  position: absolute;
  left: 0; }

.fx-front .ct-imgback > img {
  left: 0; }

.fx-back {
  position: absolute;
  overflow: hidden;
  width: 100%; }

.fx-back .ct-imgback,
.fx-back .ct-imgback > img {
  left: 0; }

/* additional height-fixed */
.ct-height-fixed .fx-back {
  height: 100%; }

/* SHADOW
    ---------------------------------------------------------- */
.ct-shadow {
  position: absolute;
  left: 0;
  top: 100%; }

.ct-shadow > img {
  display: block;
  width: 100%;
  height: auto; }

/* OTHERS
    ---------------------------------------------------------- */
/* tablist outside */
.ct-outside.ct-tab.ct-pag-ver.ct-pag-top {
  float: none; }

/* Android native --> fixed imageBack khong chiu overflow:hidden */
.ct-androidNative.ct-line .ct-imgback {
  -webkit-transform: translateZ(0); }

/* Firefox: Fixed smooth edge, checked in version 30 */
.ct-firefox .code-animated {
  outline: 1px solid transparent; }

/* Fixed font ugly in safari 5.1 window */
.ct, .ct-pag, .ct-cap {
  -webkit-font-smoothing: antialiased; }

/* Fixed IE mobile khong swipe duoc do xung dot voi scroll page */
.ct-swipe-on {
  -ms-touch-action: pan-y;
  touch-action: pan-y; }

/* Fixed 'Tap-highlight' tren mobile -- IE chua giai quyet */
.ct-viewport, .ct-pag {
  -webkit-tap-highlight-color: transparent; }

/* ***********************************************************
   ******************** CODETABS STYLES **********************
   *********************************************************** */
/*  TABS STYLE
============================================================== */
/* STYLE FLAT & FLATBOX
    ---------------------------------------------------------- */
.ct-flatbox > .ct-tab {
  margin-bottom: 0; }

.ct-flat > .ct-tab .ct-pagitem.ct-cur,
.ct-flatbox > .ct-tab .ct-pagitem.ct-cur {
  background-color: #705090;
  color: #fff; }

/* FLAT HORIZONTAL */
.ct-flat > .ct-tab.ct-pag-hor.ct-pag-top,
.ct-flatbox > .ct-tab.ct-pag-hor.ct-pag-top {
  border-bottom: 2px solid #705090; }

.ct-flat > .ct-tab.ct-pag-hor.ct-pag-bottom,
.ct-flatbox > .ct-tab.ct-pag-hor.ct-pag-bottom {
  border-top: 2px solid #705090; }

.ct-flatbox.ct-pag-hor > .ct-viewport {
  padding: 20px;
  border: solid #E6E6E6; }

.ct-flatbox.ct-pag-hor.ct-pag-top > .ct-viewport {
  border-width: 0 1px 1px 1px; }

.ct-flatbox.ct-pag-hor.ct-pag-bottom > .ct-viewport {
  border-width: 1px 1px 0 1px; }

/* FLAT VERTICAL */
.ct-flat > .ct-tab.ct-pag-ver .ct-pagitem,
.ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 11px 20px 9px 20px;
  border-bottom: 1px dotted #ddd; }

.ct-flat > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur,
.ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur {
  margin-top: -1px;
  border-bottom-color: #705090; }

.ct-flatbox.ct-pag-ver > .ct-viewport {
  padding: 25px;
  border: solid #E6E6E6; }

.ct-flatbox.ct-pag-ver.ct-pag-top > .ct-viewport {
  border-width: 1px 1px 1px 0; }

.ct-flatbox.ct-pag-ver.ct-pag-bottom > .ct-viewport {
  border-width: 1px 0 1px 1px; }

.ct-flat.ct-pag-ver.ct-pag-top > .ct-viewport,
.ct-flatbox.ct-pag-ver.ct-pag-top > .ct-viewport {
  border-left: 2px solid #705090; }

.ct-flat.ct-pag-ver.ct-pag-bottom > .ct-viewport,
.ct-flatbox.ct-pag-ver.ct-pag-bottom > .ct-viewport {
  border-right: 2px solid #705090; }

/* FLAT VERTICAL OUTSIDE */
.ct-flat.ct-pag-ver.ct-outside.ct-pag-top > .ct-viewport {
  padding-left: 0;
  border-left: none; }

.ct-flat .ct-tab.ct-pag-ver.ct-outside.ct-pag-top {
  border-right: 2px solid #705090; }

.ct-flat.ct-pag-ver.ct-outside.ct-pag-bottom > .ct-viewport {
  padding-right: 0;
  border-right: none; }

.ct-flat .ct-tab.ct-pag-ver.ct-outside.ct-pag-bottom {
  border-left: 2px solid #705090; }

/* STYLE PILL
    ---------------------------------------------------------- */
.ct-pill > .ct-tab .ct-pagitem {
  background-color: #f0f0f0; }

.ct-pill > .ct-tab .ct-pagitem.ct-cur {
  background-color: #705090;
  color: #fff; }

/* PILL HORIZONTAL */
.ct-pill > .ct-tab.ct-pag-hor.ct-pag-top {
  border-bottom: none; }

.ct-pill > .ct-tab.ct-pag-hor.ct-pag-bottom {
  border-top: none; }

.ct-pill > .ct-pag-hor .ct-pagitem:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.ct-pill > .ct-pag-hor .ct-pagitem:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.ct-pill.ct-pag-hor > .ct-tab .ct-pagitem {
  margin-right: 0; }

/* PILL VERTICAL */
.ct-pill.ct-pag-ver.ct-pag-top > .ct-viewport {
  border-left: none; }

.ct-pill.ct-pag-ver.ct-pag-bottom > .ct-viewport {
  border-right: none; }

.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 10px 20px; }

.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }

.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

/* PILL VERTICAL OUTSIDE */
.ct-pill.ct-pag-ver.ct-outside.ct-pag-top > .ct-viewport {
  padding-left: 0; }

.ct-pill.ct-pag-ver.ct-outside.ct-pag-bottom > .ct-viewport {
  padding-right: 0; }

/* STYLE CLASSIC
    ---------------------------------------------------------- */
.ct-classic > .ct-tab .ct-pagitem.ct-cur:before,
.ct-classic > .ct-tab .ct-pagitem.ct-cur:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #705090; }

.ct-classic > .ct-tab .ct-pagitem.ct-cur {
  border-color: #705090 !important;
  z-index: 2; }

/* CLASSIC HORIZONTAL */
.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top {
  border-bottom: none; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom {
  border-top: none; }

.ct-classic > .ct-tab.ct-pag-hor .ct-pagitem {
  margin-left: 5px;
  margin-right: 5px;
  border: solid #E6E6E6; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-top: 7px; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-bottom: 7px; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem {
  border-width: 1px 1px 0 1px; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem {
  border-width: 0 1px 1px 1px; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  border-top-width: 4px; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  border-bottom-width: 4px; }

.ct-classic > .ct-tab.ct-pag-hor .ct-pagitem.ct-cur:before,
.ct-classic > .ct-tab.ct-pag-hor .ct-pagitem.ct-cur:after {
  width: 20000px;
  height: 1px; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur:before {
  bottom: 0;
  right: 100%; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur:after {
  bottom: 0;
  left: 100%; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur:before {
  top: 0;
  right: 100%; }

.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur:after {
  top: 0;
  left: 100%; }

/* CLASSIC VERTICAL */
.ct-classic.ct-pag-ver.ct-pag-top > .ct-viewport {
  border-left: none; }

.ct-classic.ct-pag-ver.ct-pag-bottom > .ct-viewport {
  border-right: none; }

.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 10px 20px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: solid #E6E6E6; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur {
  padding-left: 17px; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-right: 17px; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem {
  border-width: 1px 0 1px 1px; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem {
  border-width: 1px 1px 1px 0; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur {
  border-left-width: 4px; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur {
  border-right-width: 4px; }

.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur:before,
.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur:after {
  width: 1px;
  height: 20000px; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur:before {
  right: 0;
  bottom: 100%; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur:after {
  right: 0;
  top: 100%; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur:before {
  left: 0;
  bottom: 100%; }

.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur:after {
  left: 0;
  top: 100%; }

/* CLASSIC VERTICAL OUTSIDE */
.ct-classic.ct-pag-ver.ct-outside.ct-pag-top > .ct-viewport {
  padding-left: 0; }

.ct-classic.ct-pag-ver.ct-outside.ct-pag-bottom > .ct-viewport {
  padding-right: 0; }

/* STYLE UNDERLINE
    ---------------------------------------------------------- */
/* UNDERLINE HORIZONTAL */
.ct-underline > .ct-tab.ct-pag-hor {
  overflow: visible; }

.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-paginner {
  top: 1px; }

.ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-paginner {
  bottom: 1px; }

.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 12px 0;
  margin: 0 15px; }

.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-bottom: 8px;
  border-bottom: 4px solid #705090; }

.ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-top: 8px;
  border-top: 4px solid #705090; }

/* UNDERLINE VERTICAL */
.ct-underline.ct-pag-ver.ct-pag-top > .ct-viewport {
  padding-left: 0;
  border-left: none; }

/* min-width > 0 --> width khi switch to hor = 0 */
.ct-underline.ct-pag-ver.ct-pag-bottom > .ct-viewport {
  padding-right: 0;
  border-right-color: transparent; }

.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 12px 0;
  border-bottom: 1px dotted #ddd; }

.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur {
  padding-bottom: 8px;
  border-bottom: 4px solid #705090; }

.ct-underline > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem {
  margin-right: 50px; }

.ct-underline > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem {
  margin-left: 50px; }

/* UNDERLINE VERTICAL OUTSIDE */
.ct-underline > .ct-tab.ct-pag-ver.ct-outside.ct-pag-top .ct-pagitem {
  margin-right: 0; }

.ct-underline > .ct-tab.ct-pag-ver.ct-outside.ct-pag-bottom .ct-pagitem {
  margin-left: 0; }

/*  TABLIST SIZE
============================================================== */
/* SIZE DEFAULT - Xem tham chieu
    ---------------------------------------------------------- */
/* Basic */
/*.ct-tab.ct-pag-hor .ct-pagitem                                                      { padding: 10px 15px; }
    .ct-tab.ct-pag-ver .ct-pagitem                                                      { padding: 10px 20px 10px 0; }*/
/* FLAT */
/*.ct-flat    > .ct-tab.ct-pag-ver .ct-pagitem,
    .ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem                                        { padding: 11px 20px 9px 20px; }*/
/* Pill */
/*.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem                                           { padding: 10px 20px; }*/
/* Classic */
/*.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top    .ct-pagitem.ct-cur                   { padding-top: 7px; }
    .ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur                   { padding-bottom: 7px; }

    .ct-classic > .ct-tab.ct-pag-ver .ct-pagitem                                        { padding: 10px 20px; }
    .ct-classic > .ct-tab.ct-pag-ver.ct-pag-top    .ct-pagitem.ct-cur                   { padding-left: 17px; }
    .ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur                   { padding-right: 17px; }*/
/* Underline */
/*.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem                                      { padding: 12px 0; }
    .ct-underline > .ct-tab.ct-pag-hor.ct-pag-top    .ct-pagitem.ct-cur                 { padding-bottom: 8px; }
    .ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur                 { padding-top: 8px; }

    .ct-underline > .ct-tab.ct-pag-ver .ct-pagitem                                      { padding: 12px 0; }
    .ct-underline > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur                               { padding-bottom: 8px; }*/
/* SIZE XLARGE
    ---------------------------------------------------------- */
/* Basic */
.ct-size-xlarge > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 20px 32px; }

.ct-size-xlarge > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 20px 36px 20px 0; }

/* FLAT */
.ct-size-xlarge.ct-flat > .ct-tab.ct-pag-ver .ct-pagitem,
.ct-size-xlarge.ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 21px 36px 19px 36px; }

/* Pill */
.ct-size-xlarge.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 20px 36px; }

/* Classic */
.ct-size-xlarge.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-top: 17px; }

.ct-size-xlarge.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-bottom: 17px; }

.ct-size-xlarge.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 20px 36px; }

.ct-size-xlarge.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur {
  padding-left: 33px; }

.ct-size-xlarge.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-right: 33px; }

/* Underline */
.ct-size-xlarge.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 22px 0; }

.ct-size-xlarge.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-bottom: 18px; }

.ct-size-xlarge.ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-top: 18px; }

.ct-size-xlarge.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 22px 0; }

.ct-size-xlarge.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur {
  padding-bottom: 18px; }

/* SIZE LARGE
    ---------------------------------------------------------- */
/* Basic */
.ct-size-large > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 15px 22px; }

.ct-size-large > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 15px 26px 15px 0; }

/* FLAT */
.ct-size-large.ct-flat > .ct-tab.ct-pag-ver .ct-pagitem,
.ct-size-large.ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 16px 26px 14px 26px; }

/* Pill */
.ct-size-large.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 15px 26px; }

/* Classic */
.ct-size-large.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-top: 12px; }

.ct-size-large.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-bottom: 12px; }

.ct-size-large.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 15px 26px; }

.ct-size-large.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur {
  padding-left: 23px; }

.ct-size-large.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-right: 23px; }

/* Underline */
.ct-size-large.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 16px 0; }

.ct-size-large.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-bottom: 12px; }

.ct-size-large.ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-top: 12px; }

.ct-size-large.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 16px 0; }

.ct-size-large.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur {
  padding-bottom: 14px; }

/* SIZE SMALL
    ---------------------------------------------------------- */
/* Basic */
.ct-size-small > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 8px 12px; }

.ct-size-small > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 8px 15px 8px 0; }

/* FLAT */
.ct-size-small.ct-flat > .ct-tab.ct-pag-ver .ct-pagitem,
.ct-size-small.ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 9px 15px 7px 15px; }

/* Pill */
.ct-size-small.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 8px 15px; }

/* Classic */
.ct-size-small.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-top: 5px; }

.ct-size-small.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-bottom: 5px; }

.ct-size-small.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 8px 15px; }

.ct-size-small.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur {
  padding-left: 12px; }

.ct-size-small.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-right: 12px; }

/* Underline */
.ct-size-small.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 10px 0; }

.ct-size-small.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-bottom: 6px; }

.ct-size-small.ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-top: 6px; }

.ct-size-small.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 10px 0; }

.ct-size-small.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur {
  padding-bottom: 6px; }

/* SIZE MINI
    ---------------------------------------------------------- */
/* Basic */
.ct-size-mini > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 5px 8px; }

.ct-size-mini > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 5px 8px 5px 0; }

/* FLAT */
.ct-size-mini.ct-flat > .ct-tab.ct-pag-ver .ct-pagitem,
.ct-size-mini.ct-flatbox > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 6px 8px 4px 8px; }

/* Pill */
.ct-size-mini.ct-pill > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 5px 10px; }

/* Classic */
.ct-size-mini.ct-classic > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-top: 2px; }

.ct-size-mini.ct-classic > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-bottom: 2px; }

.ct-size-mini.ct-classic > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 5px 10px; }

.ct-size-mini.ct-classic > .ct-tab.ct-pag-ver.ct-pag-top .ct-pagitem.ct-cur {
  padding-left: 7px; }

.ct-size-mini.ct-classic > .ct-tab.ct-pag-ver.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-right: 7px; }

/* Underline */
.ct-size-mini.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 6px 0; }

.ct-size-mini.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  padding-bottom: 2px; }

.ct-size-mini.ct-underline > .ct-tab.ct-pag-hor.ct-pag-bottom .ct-pagitem.ct-cur {
  padding-top: 2px; }

.ct-size-mini.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem {
  padding: 6px 0; }

.ct-size-mini.ct-underline > .ct-tab.ct-pag-ver .ct-pagitem.ct-cur {
  padding-bottom: 4px; }

/*  TABLIST COLOR
============================================================== */
/*  TIMER STYLE
============================================================== */
/* BASIC */
.ct-media {
  position: absolute;
  z-index: 3; }

/* PLAYPAUSE BUTTON
    ---------------------------------------------------------- */
.ct-playpause {
  position: absolute;
  width: 26px;
  height: 26px;
  background: transparent url("../img/tab/icon_playpause.png") no-repeat -12px -12px;
  text-indent: -99999px; }

.ct-playpause.ct-actived {
  background-position: -60px -12px; }

/* ARC LINE
    ---------------------------------------------------------- */
.ct-arcline .ct-media {
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px; }

.ct-arcline .ct-playpause {
  left: 7px;
  top: 7px;
  border-radius: 50%; }

.ct-arcline .ct-timer {
  position: absolute; }

/* Fallback for old browser */
.ct-arcline.ct-old .ct-timer.ct-timer-bar {
  background-color: #E6E6E6; }

/* TIMER BAR LESS
    ---------------------------------------------------------- */
.ct-barless .ct-media {
  position: relative; }

.ct-barless .ct-playpause {
  right: 4px;
  bottom: 4px; }

.ct-barless .ct-timer-bar {
  margin-top: -1px;
  background-color: #E6E6E6; }

/* TIMER BAR SHORT
    ---------------------------------------------------------- */
.ct-barshort .ct-media {
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px; }

.ct-barshort .ct-playpause {
  left: 7px;
  top: 7px; }

.ct-barshort .ct-timer {
  position: absolute; }

/* TIMER NUMBER LESS
    ---------------------------------------------------------- */
.ct-numless .ct-media {
  right: 5px;
  top: 5px;
  width: 60px;
  height: 30px; }

.ct-numless .ct-timer-number {
  position: absolute;
  width: 30px;
  height: 30px;
  color: #999;
  line-height: 30px;
  border-right: 1px dotted rgba(0, 0, 0, 0.15); }

.ct-numless .ct-playpause {
  left: 32px;
  top: 2px; }

/*  BULLET STYLE
============================================================== */
/* BULLET CORE
    ---------------------------------------------------------- */
.ct-bullet, .ct-hover {
  padding-top: 10px;
  padding-bottom: 10px; }

.ct-bullet .ct-pagitem, .ct-hover .ct-pagitem {
  display: block;
  float: left;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  margin-right: 6px;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  text-indent: -99999px; }

.ct-bullet .ct-pagitem:hover, .ct-bullet .ct-pagitem.ct-cur,
.ct-hover .ct-pagitem:hover, .ct-hover .ct-pagitem.ct-cur {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }

/* BULLET FLAT
    ---------------------------------------------------------- */
.ct-bulletflat .ct-pag {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #705090; }

.ct-bulletflat .ct-viewport {
  padding: 20px;
  background-color: #fff;
  border: solid #E6E6E6;
  border-width: 0 1px 1px 1px; }

.ct-flatbox > .ct-tab.ct-pag-hor.ct-pag-top {
  border-bottom: 1px solid #E6E6E6; }

.ct-flatbox.ct-pag-hor.ct-pag-top > .ct-viewport {
  border: none; }

.ct-flatbox.ct-pag-hor > .ct-viewport {
  padding: 20px 0px; }

.ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
  padding: 12px 40px;
  margin: 0; }
  @media only screen and (max-width: 767px) {
    .ct-underline > .ct-tab.ct-pag-hor .ct-pagitem {
      padding: 12px 10px; } }

.ct-underline > .ct-tab.ct-pag-hor.ct-pag-top .ct-pagitem.ct-cur {
  border-bottom: 5px solid #34A93E; }

.ct {
  visibility: hidden; }

.ct.ct-ready {
  visibility: visible; }

.ct .ct-viewport {
  padding-top: 35px; }
  @media only screen and (min-width: 768px) {
    .ct .ct-viewport {
      padding-top: 50px; } }
  @media only screen and (min-width: 992px) {
    .ct .ct-viewport {
      padding-top: 70px; } }

.ct .ct-pagitem {
  color: #222222;
  font-family: "thaisans";
  font-weight: lighter;
  font-size: 24px;
  font-size: 2.4rem; }
  html.desktop.mac .ct .ct-pagitem {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 200; }
  .ct .ct-pagitem.ct-cur, .ct .ct-pagitem:hover {
    color: #34A93E; }
  .ct .ct-pagitem.ct-cur {
    font-family: "thaisans";
    font-weight: normal; }
    html.desktop.mac .ct .ct-pagitem.ct-cur {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 500; }
  @media only screen and (max-width: 767px) {
    .ct .ct-pagitem {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 27px;
      font-size: 2.7rem; }
      html.desktop.mac .ct .ct-pagitem {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 21px;
        font-size: 2.1rem;
        font-weight: 500; } }

/* Note:
    Thay doi ten:
        + scaleUpIn --> pullIn
        + scaleDownIn --> pushIn
        + scaleUpOut --> pushOut
        + scaleDownOut --> pullOut

        + slideUp --> slideOneUpOut
        + slideDown --> slideOneDownOut
        + slideLeft --> slideOneLeftOut
        + slideRight --> slideOneRightOut
        + slideUpReturn --> slideOneUpIn
        + slideDownReturn --> slideOneDownIn
        + slideLeftReturn --> slideOneLeftIn
        + slideRightReturn --> slideOneRightIn

        + slideInDown --> slideUpIn
        + slideInLeft --> slideLeftIn
        + slideInRight --> slideRightIn
        + slideOutLeft --> slideLeftOut
        + slideOutRight --> slideRightOut
        + slideOutUp --> slideUpOut

    Prefix support: -webkit-
    Browser support: chrome 1+, firefox 16+, IE 10+, safari 4+, ios safari 3.2+, opera 15+.
*/
/* Table of Effect issue-1 (62 effects)
    + bounce
    + flash
    + pulse
    + rubberBand
    + swing
    + tada
    + wobble
    
    
    + bounceIn
    + slideBounceDownIn
    + slideBounceLeftIn
    + slideBounceRightIn
    + slideBounceUpIn

    + bounceOut
    + slideBounceDownOut
    + slideBounceLeftOut
    + slideBounceRightOut
    + slideBounceUpOut

    + fadeIn
    + slideShortDownIn
    + slideFadeDownIn
    + slideShortLeftIn
    + slideFadeLeftIn
    + slideShortRightIn
    + slideFadeRightIn
    + slideShortUpIn
    + slideFadeUpIn

    + fadeOut
    + slideShortDownOut
    + slideFadeDownOut
    + slideShortLeftOut
    + slideFadeLeftOut
    + slideShortRightOut
    + slideFadeRightOut
    + slideShortUpOut
    + slideFadeUpOut

    + flip
    + flipXIn
    + flipYIn
    + flipXOut
    + flipYOut

    + lightSpeedIn
    + lightSpeedOut

    + rotateIn
    + roDownLeftIn
    + roDownRightIn
    + roUpLeftIn
    + roUpRightIn

    + rotateOut
    + roDownLeftOut
    + roDownRightOut
    + roUpLeftOut
    + roUpRightOut

    + slideLeftIn
    + slideRightIn
    + slideUpIn
    + slideDownIn
    + slideLeftOut
    + slideRightOut
    + slideUpOut
    + slideDownOut

    + hinge
    + rollIn
    + rollOut
============================================================== */
.code-animated {
  visibility: visible !important;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important; }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px); } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale(1); }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75); }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25); }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
            transform: scaleX(1.25) scaleY(0.75); }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
            transform: scaleX(0.75) scaleY(1.25); }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
            transform: scaleX(1.15) scaleY(0.85); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0); } }

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
            transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0); } }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0); } }

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
            transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
            transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
            transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
            transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
            transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

/* SLIDE BOUNCE effect
---------------------------------------------------------- */
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
            transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.slideBounceDownIn {
  -webkit-animation-name: slideBounceDownIn;
  animation-name: slideBounceDownIn; }

@-webkit-keyframes slideBounceDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0); } }

@keyframes slideBounceDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.slideBounceLeftIn {
  -webkit-animation-name: slideBounceLeftIn;
  animation-name: slideBounceLeftIn; }

@-webkit-keyframes slideBounceLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0); } }

@keyframes slideBounceLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
            transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.slideBounceRightIn {
  -webkit-animation-name: slideBounceRightIn;
  animation-name: slideBounceRightIn; }

@-webkit-keyframes slideBounceRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0); } }

@keyframes slideBounceRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
            transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.slideBounceUpIn {
  -webkit-animation-name: slideBounceUpIn;
  animation-name: slideBounceUpIn; }

@-webkit-keyframes slideBounceUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0); } }

@keyframes slideBounceUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
            transform: scale(0.3); } }

.slideBounceDownOut {
  -webkit-animation-name: slideBounceDownOut;
  animation-name: slideBounceDownOut; }

@-webkit-keyframes slideBounceDownOut {
  0% {
    -webkit-transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px); } }

@keyframes slideBounceDownOut {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px); } }

.slideBounceLeftOut {
  -webkit-animation-name: slideBounceLeftOut;
  animation-name: slideBounceLeftOut; }

@-webkit-keyframes slideBounceLeftOut {
  0% {
    -webkit-transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); } }

@keyframes slideBounceLeftOut {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
            transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px); } }

.slideBounceRightOut {
  -webkit-animation-name: slideBounceRightOut;
  animation-name: slideBounceRightOut; }

@-webkit-keyframes slideBounceRightOut {
  0% {
    -webkit-transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px); } }

@keyframes slideBounceRightOut {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
            transform: translateX(2000px); } }

.slideBounceUpOut {
  -webkit-animation-name: slideBounceUpOut;
  animation-name: slideBounceUpOut; }

@-webkit-keyframes slideBounceUpOut {
  0% {
    -webkit-transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); } }

@keyframes slideBounceUpOut {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px); } }

/* SLIDE SHORT effect
---------------------------------------------------------- */
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; } }

@keyframes fadeIn {
  from {
    opacity: 0; } }

.slideShortDownIn {
  -webkit-animation-name: slideShortDownIn;
  animation-name: slideShortDownIn; }

@-webkit-keyframes slideShortDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes slideShortDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.slideFadeDownIn {
  -webkit-animation-name: slideFadeDownIn;
  animation-name: slideFadeDownIn; }

@-webkit-keyframes slideFadeDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes slideFadeDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.slideShortLeftIn {
  -webkit-animation-name: slideShortLeftIn;
  animation-name: slideShortLeftIn; }

@-webkit-keyframes slideShortLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes slideShortLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.slideFadeLeftIn {
  -webkit-animation-name: slideFadeLeftIn;
  animation-name: slideFadeLeftIn; }

@-webkit-keyframes slideFadeLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes slideFadeLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.slideShortRightIn {
  -webkit-animation-name: slideShortRightIn;
  animation-name: slideShortRightIn; }

@-webkit-keyframes slideShortRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes slideShortRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.slideFadeRightIn {
  -webkit-animation-name: slideFadeRightIn;
  animation-name: slideFadeRightIn; }

@-webkit-keyframes slideFadeRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes slideFadeRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
            transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.slideShortUpIn {
  -webkit-animation-name: slideShortUpIn;
  animation-name: slideShortUpIn; }

@-webkit-keyframes slideShortUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes slideShortUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.slideFadeUpIn {
  -webkit-animation-name: slideFadeUpIn;
  animation-name: slideFadeUpIn; }

@-webkit-keyframes slideFadeUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes slideFadeUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOut {
  to {
    opacity: 0; } }

@keyframes fadeOut {
  to {
    opacity: 0; } }

.slideShortDownOut {
  -webkit-animation-name: slideShortDownOut;
  animation-name: slideShortDownOut; }

@-webkit-keyframes slideShortDownOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px); } }

@keyframes slideShortDownOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); } }

.slideFadeDownOut {
  -webkit-animation-name: slideFadeDownOut;
  animation-name: slideFadeDownOut; }

@-webkit-keyframes slideFadeDownOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px); } }

@keyframes slideFadeDownOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px); } }

.slideShortLeftOut {
  -webkit-animation-name: slideShortLeftOut;
  animation-name: slideShortLeftOut; }

@-webkit-keyframes slideShortLeftOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px); } }

@keyframes slideShortLeftOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px); } }

.slideFadeLeftOut {
  -webkit-animation-name: slideFadeLeftOut;
  animation-name: slideFadeLeftOut; }

@-webkit-keyframes slideFadeLeftOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); } }

@keyframes slideFadeLeftOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px); } }

.slideShortRightOut {
  -webkit-animation-name: slideShortRightOut;
  animation-name: slideShortRightOut; }

@-webkit-keyframes slideShortRightOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px); } }

@keyframes slideShortRightOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px); } }

.slideFadeRightOut {
  -webkit-animation-name: slideFadeRightOut;
  animation-name: slideFadeRightOut; }

@-webkit-keyframes slideFadeRightOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px); } }

@keyframes slideFadeRightOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
            transform: translateX(2000px); } }

.slideShortUpOut {
  -webkit-animation-name: slideShortUpOut;
  animation-name: slideShortUpOut; }

@-webkit-keyframes slideShortUpOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px); } }

@keyframes slideShortUpOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); } }

.slideFadeUpOut {
  -webkit-animation-name: slideFadeUpOut;
  animation-name: slideFadeUpOut; }

@-webkit-keyframes slideFadeUpOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); } }

@keyframes slideFadeUpOut {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px); } }

/* FLIP effect
---------------------------------------------------------- */
.code-animated.flip {
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
            transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
            transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
            transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
            transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
            transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; } }

.flipXIn {
  -webkit-animation-name: flipXIn;
  animation-name: flipXIn; }

@-webkit-keyframes flipXIn {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0);
    opacity: 1; } }

@keyframes flipXIn {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
            transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
            transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
            transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0);
            transform: perspective(400px) rotateX(0);
    opacity: 1; } }

.flipYIn {
  -webkit-animation-name: flipYIn;
  animation-name: flipYIn; }

@-webkit-keyframes flipYIn {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0);
    opacity: 1; } }

@keyframes flipYIn {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
            transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
            transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
            transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0);
            transform: perspective(400px) rotateY(0);
    opacity: 1; } }

.flipXOut {
  -webkit-animation-name: flipXOut;
  animation-name: flipXOut; }

@-webkit-keyframes flipXOut {
  0% {
    -webkit-transform: perspective(400px) rotateX(0);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipXOut {
  0% {
    -webkit-transform: perspective(400px) rotateX(0);
            transform: perspective(400px) rotateX(0);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
            transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipYOut {
  -webkit-animation-name: flipYOut;
  animation-name: flipYOut; }

@-webkit-keyframes flipYOut {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipYOut {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
            transform: perspective(400px) rotateY(0);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
            transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

/* LIGHTSPEED effect
---------------------------------------------------------- */
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  40% {
    /*-webkit-transform: translateX(-20%) skewX(30deg);*/
    -webkit-transform: translateX(0) skewX(30deg);
    opacity: 1; }
  70% {
    -webkit-transform-origin: 0 100%;
    -webkit-transform: skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform-origin: 0 100%;
    -webkit-transform: skewX(0);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
            transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  40% {
    /*transform: translateX(-20%) skewX(30deg);*/
    -webkit-transform: translateX(0) skewX(30deg);
            transform: translateX(0) skewX(30deg);
    opacity: 1; }
  70% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: skewX(-15deg);
            transform: skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: skewX(0);
            transform: skewX(0);
    opacity: 1; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0) skewX(0);
    opacity: 1; }
  40% {
    -webkit-transform: translateX(100%) skewX(-30deg); }
  70% {
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: translateX(100%) skewX(15deg); }
  100% {
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0) skewX(0);
            transform: translateX(0) skewX(0);
    opacity: 1; }
  40% {
    -webkit-transform: translateX(100%) skewX(-30deg);
            transform: translateX(100%) skewX(-30deg); }
  70% {
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: translateX(100%) skewX(15deg);
            transform: translateX(100%) skewX(15deg); }
  100% {
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: translateX(100%) skewX(-30deg);
            transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

/* ROTATE effect
---------------------------------------------------------- */
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate(-200deg);
    opacity: 0; } }

@keyframes rotateIn {
  from {
    -webkit-transform: rotate(-200deg);
            transform: rotate(-200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOut {
  to {
    -webkit-transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  to {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
    opacity: 0; } }

.roDownLeftIn {
  -webkit-animation-name: roDownLeftIn;
  animation-name: roDownLeftIn; }

@-webkit-keyframes roDownLeftIn {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes roDownLeftIn {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; } }

.roDownRightIn {
  -webkit-animation-name: roDownRightIn;
  animation-name: roDownRightIn; }

@-webkit-keyframes roDownRightIn {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes roDownRightIn {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; } }

.roUpLeftIn {
  -webkit-animation-name: roUpLeftIn;
  animation-name: roUpLeftIn; }

@-webkit-keyframes roUpLeftIn {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes roUpLeftIn {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; } }

.roUpRightIn {
  -webkit-animation-name: roUpRightIn;
  animation-name: roUpRightIn; }

@-webkit-keyframes roUpRightIn {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes roUpRightIn {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; } }

.roDownLeftOut {
  -webkit-animation-name: roDownLeftOut;
  animation-name: roDownLeftOut; }

@-webkit-keyframes roDownLeftOut {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; } }

@keyframes roDownLeftOut {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0; } }

.roDownRightOut {
  -webkit-animation-name: roDownRightOut;
  animation-name: roDownRightOut; }

@-webkit-keyframes roDownRightOut {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; } }

@keyframes roDownRightOut {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0; } }

.roUpLeftOut {
  -webkit-animation-name: roUpLeftOut;
  animation-name: roUpLeftOut; }

@-webkit-keyframes roUpLeftOut {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; } }

@keyframes roUpLeftOut {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    opacity: 0; } }

.roUpRightOut {
  -webkit-animation-name: roUpRightOut;
  animation-name: roUpRightOut; }

@-webkit-keyframes roUpRightOut {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; } }

@keyframes roUpRightOut {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    opacity: 0; } }

/* SLIDE effect
---------------------------------------------------------- */
/* SLIDE */
.slideLeftIn {
  -webkit-animation-name: slideLeftIn;
  animation-name: slideLeftIn; }

@-webkit-keyframes slideLeftIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-2000px); } }

@keyframes slideLeftIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px); } }

.slideRightIn {
  -webkit-animation-name: slideRightIn;
  animation-name: slideRightIn; }

@-webkit-keyframes slideRightIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(2000px); } }

@keyframes slideRightIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(2000px);
            transform: translateX(2000px); } }

.slideDownIn {
  -webkit-animation-name: slideDownIn;
  animation-name: slideDownIn; }

@-webkit-keyframes slideDownIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(2000px); } }

@keyframes slideDownIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px); } }

.slideUpIn {
  -webkit-animation-name: slideUpIn;
  animation-name: slideUpIn; }

@-webkit-keyframes slideUpIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-2000px); } }

@keyframes slideUpIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px); } }

.slideLeftOut {
  -webkit-animation-name: slideLeftOut;
  animation-name: slideLeftOut; }

@-webkit-keyframes slideLeftOut {
  to {
    opacity: 0;
    -webkit-transform: translateX(-2000px); } }

@keyframes slideLeftOut {
  to {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px); } }

.slideRightOut {
  -webkit-animation-name: slideRightOut;
  animation-name: slideRightOut; }

@-webkit-keyframes slideRightOut {
  to {
    opacity: 0;
    -webkit-transform: translateX(2000px); } }

@keyframes slideRightOut {
  to {
    opacity: 0;
    -webkit-transform: translateX(2000px);
            transform: translateX(2000px); } }

.slideUpOut {
  -webkit-animation-name: slideUpOut;
  animation-name: slideUpOut; }

@-webkit-keyframes slideUpOut {
  to {
    opacity: 0;
    -webkit-transform: translateY(-2000px); } }

@keyframes slideUpOut {
  to {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px); } }

.slideDownOut {
  -webkit-animation-name: slideDownOut;
  animation-name: slideDownOut; }

@-webkit-keyframes slideDownOut {
  to {
    opacity: 0;
    -webkit-transform: translateY(2000px); } }

@keyframes slideDownOut {
  to {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px); } }

/* SLIDE SHAKE */
.slideShakeLeftOut {
  -webkit-animation-name: slideShakeLeftOut;
  animation-name: slideShakeLeftOut; }

@-webkit-keyframes slideShakeLeftOut {
  25% {
    -webkit-transform: translateX(-50%) rotate(-7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateX(-100%) rotate(7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-200%) rotate(0deg); } }

@keyframes slideShakeLeftOut {
  25% {
    -webkit-transform: translateX(-50%) rotate(-7deg);
            transform: translateX(-50%) rotate(-7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateX(-100%) rotate(7deg);
            transform: translateX(-100%) rotate(7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-200%) rotate(0deg);
            transform: translateX(-200%) rotate(0deg); } }

.slideShakeRightOut {
  -webkit-animation-name: slideShakeRightOut;
  animation-name: slideShakeRightOut; }

@-webkit-keyframes slideShakeRightOut {
  25% {
    -webkit-transform: translateX(50%) rotate(7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateX(100%) rotate(-7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(200%) rotate(0deg); } }

@keyframes slideShakeRightOut {
  25% {
    -webkit-transform: translateX(50%) rotate(7deg);
            transform: translateX(50%) rotate(7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateX(100%) rotate(-7deg);
            transform: translateX(100%) rotate(-7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(200%) rotate(0deg);
            transform: translateX(200%) rotate(0deg); } }

.slideShakeUpOut {
  -webkit-animation-name: slideShakeUpOut;
  animation-name: slideShakeUpOut; }

@-webkit-keyframes slideShakeUpOut {
  25% {
    -webkit-transform: translateY(-50%) rotate(-7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateY(-100%) rotate(7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-200%) rotate(0deg); } }

@keyframes slideShakeUpOut {
  25% {
    -webkit-transform: translateY(-50%) rotate(-7deg);
            transform: translateY(-50%) rotate(-7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateY(-100%) rotate(7deg);
            transform: translateY(-100%) rotate(7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-200%) rotate(0deg);
            transform: translateY(-200%) rotate(0deg); } }

.slideShakeDownOut {
  -webkit-animation-name: slideShakeDownOut;
  animation-name: slideShakeDownOut; }

@-webkit-keyframes slideShakeDownOut {
  25% {
    -webkit-transform: translateY(50%) rotate(7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateY(100%) rotate(-7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(200%) rotate(0deg); } }

@keyframes slideShakeDownOut {
  25% {
    -webkit-transform: translateY(50%) rotate(7deg);
            transform: translateY(50%) rotate(7deg); }
  50% {
    opacity: .7;
    -webkit-transform: translateY(100%) rotate(-7deg);
            transform: translateY(100%) rotate(-7deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(200%) rotate(0deg);
            transform: translateY(200%) rotate(0deg); } }

.slideShakeLeftIn {
  -webkit-animation-name: slideShakeLeftIn;
  animation-name: slideShakeLeftIn; }

@-webkit-keyframes slideShakeLeftIn {
  0% {
    -webkit-transform: translateX(-200%); }
  50% {
    opacity: .7;
    -webkit-transform: translateX(-100%) rotate(7deg); }
  75% {
    -webkit-transform: translateX(-50%) rotate(-7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg); } }

@keyframes slideShakeLeftIn {
  0% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%); }
  50% {
    opacity: .7;
    -webkit-transform: translateX(-100%) rotate(7deg);
            transform: translateX(-100%) rotate(7deg); }
  75% {
    -webkit-transform: translateX(-50%) rotate(-7deg);
            transform: translateX(-50%) rotate(-7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg); } }

.slideShakeRightIn {
  -webkit-animation-name: slideShakeRightIn;
  animation-name: slideShakeRightIn; }

@-webkit-keyframes slideShakeRightIn {
  0% {
    -webkit-transform: translateX(200%); }
  50% {
    opacity: 0.7;
    -webkit-transform: translateX(100%) rotate(-7deg); }
  75% {
    -webkit-transform: translateX(50%) rotate(7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg); } }

@keyframes slideShakeRightIn {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%); }
  50% {
    opacity: 0.7;
    -webkit-transform: translateX(100%) rotate(-7deg);
            transform: translateX(100%) rotate(-7deg); }
  75% {
    -webkit-transform: translateX(50%) rotate(7deg);
            transform: translateX(50%) rotate(7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg); } }

.slideShakeUpIn {
  -webkit-animation-name: slideShakeUpIn;
  animation-name: slideShakeUpIn; }

@-webkit-keyframes slideShakeUpIn {
  0% {
    -webkit-transform: translateY(-200%); }
  50% {
    opacity: .7;
    -webkit-transform: translateY(-100%) rotate(7deg); }
  75% {
    -webkit-transform: translateY(-50%) rotate(-7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) rotate(0deg); } }

@keyframes slideShakeUpIn {
  0% {
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%); }
  50% {
    opacity: .7;
    -webkit-transform: translateY(-100%) rotate(7deg);
            transform: translateY(-100%) rotate(7deg); }
  75% {
    -webkit-transform: translateY(-50%) rotate(-7deg);
            transform: translateY(-50%) rotate(-7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); } }

.slideShakeDownIn {
  -webkit-animation-name: slideShakeDownIn;
  animation-name: slideShakeDownIn; }

@-webkit-keyframes slideShakeDownIn {
  0% {
    -webkit-transform: translateY(200%); }
  50% {
    opacity: 0.7;
    -webkit-transform: translateY(100%) rotate(-7deg); }
  75% {
    -webkit-transform: translateY(50%) rotate(7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) rotate(0deg); } }

@keyframes slideShakeDownIn {
  0% {
    -webkit-transform: translateY(200%);
            transform: translateY(200%); }
  50% {
    opacity: 0.7;
    -webkit-transform: translateY(100%) rotate(-7deg);
            transform: translateY(100%) rotate(-7deg); }
  75% {
    -webkit-transform: translateY(50%) rotate(7deg);
            transform: translateY(50%) rotate(7deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg); } }

/* SLIDE SCALE IN */
.slideScaleLeftIn {
  -webkit-animation-name: slideScaleLeftIn;
  animation-name: slideScaleLeftIn; }

@-webkit-keyframes slideScaleLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8); } }

@keyframes slideScaleLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px) scale(0.1);
            transform: translateX(-2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

.slideScaleRightIn {
  -webkit-animation-name: slideScaleRightIn;
  animation-name: slideScaleRightIn; }

@-webkit-keyframes slideScaleRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8); } }

@keyframes slideScaleRightIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px) scale(0.1);
            transform: translateX(2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

.slideScaleUpIn {
  -webkit-animation-name: slideScaleUpIn;
  animation-name: slideScaleUpIn; }

@-webkit-keyframes slideScaleUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8); } }

@keyframes slideScaleUpIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px) scale(0.1);
            transform: translateY(-2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

.slideScaleDownIn {
  -webkit-animation-name: slideScaleDownIn;
  animation-name: slideScaleDownIn; }

@-webkit-keyframes slideScaleDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8); } }

@keyframes slideScaleDownIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px) scale(0.1);
            transform: translateY(2000px) scale(0.1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

/* SLIDE SCALE OUT */
.slideScaleLeftOut {
  -webkit-animation-name: slideScaleLeftOut;
  animation-name: slideScaleLeftOut; }

@-webkit-keyframes slideScaleLeftOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px) scale(0.1); } }

@keyframes slideScaleLeftOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px) scale(0.1);
            transform: translateX(-2000px) scale(0.1); } }

.slideScaleRightOut {
  -webkit-animation-name: slideScaleRightOut;
  animation-name: slideScaleRightOut; }

@-webkit-keyframes slideScaleRightOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px) scale(0.1); } }

@keyframes slideScaleRightOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px) scale(0.1);
            transform: translateX(2000px) scale(0.1); } }

.slideScaleUpOut {
  -webkit-animation-name: slideScaleUpOut;
  animation-name: slideScaleUpOut; }

@-webkit-keyframes slideScaleUpOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px) scale(0.1); } }

@keyframes slideScaleUpOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px) scale(0.1);
            transform: translateY(-2000px) scale(0.1); } }

.slideScaleDownOut {
  -webkit-animation-name: slideScaleDownOut;
  animation-name: slideScaleDownOut; }

@-webkit-keyframes slideScaleDownOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px) scale(0.1); } }

@keyframes slideScaleDownOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px) scale(0.1);
            transform: translateY(2000px) scale(0.1); } }

/* SPECIAL effect
---------------------------------------------------------- */
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
            transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
            transform: translateY(700px);
    opacity: 0; } }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0); } }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
            transform: translateX(100%) rotate(120deg); } }

/* Table of Effect issue-2 (55 effects)
    + magic
    + swap
    + twistDownIn
    + twistUpIn

    + openDownLeft
    + openDownRight
    + openUpLeft
    + openUpRight

    + openDownLeftReturn
    + openDownRightReturn
    + openUpLeftReturn
    + openUpRightReturn

    + openDownLeftOut
    + openDownRightOut
    + openUpLeftOut
    + openUpRightOut

    + perspectiveDownOut
    + perspectiveLeftOut
    + perspectiveRightOut
    + perspectiveUpOut
    + perspectiveDownIn
    + perspectiveLeftIn
    + perspectiveRightIn
    + perspectiveUpIn

    + puffIn
    + puffOut
    + vanishIn
    + vanishOut
    
    + roLeftOut
    + roRightOut
    + roUpOut
    + roDownOut

    + roLeftIn      --> New Adding
    + roRightIn
    + roUpIn
    + roDownIn
    
    + slideOneLeftOut
    + slideOneRightOut
    + slideOneUpOut
    + slideOneDownOut
    + slideOneLeftIn
    + slideOneRightIn
    + slideOneUpIn
    + slideOneDownIn

    + swashOut
    + swashIn
    + foolishOut
    + foolishIn
    + holeOut

    + slideTinRightOut
    + slideTinLeftOut
    + slideTinUpOut
    + slideTinDownOut

    + slideTinRightIn
    + slideTinLeftIn
    + slideTinUpIn
    + slideTinDownIn

    + bombRightOut
    + bombLeftOut
============================================================== */
.magic {
  -webkit-animation-name: magic;
  animation-name: magic; }

.swap {
  -webkit-animation-name: swap;
  animation-name: swap; }

.twistDownIn {
  -webkit-animation-name: twistDownIn;
  animation-name: twistDownIn; }

.twistUpIn {
  -webkit-animation-name: twistUpIn;
  animation-name: twistUpIn; }

/* PERSPECTIVE effect
---------------------------------------------------------- */
.perspectiveDownOut {
  -webkit-animation-name: perspectiveDownOut;
  animation-name: perspectiveDownOut; }

.perspectiveLeftOut {
  -webkit-animation-name: perspectiveLeftOut;
  animation-name: perspectiveLeftOut; }

.perspectiveRightOut {
  -webkit-animation-name: perspectiveRightOut;
  animation-name: perspectiveRightOut; }

.perspectiveUpOut {
  -webkit-animation-name: perspectiveUpOut;
  animation-name: perspectiveUpOut; }

.perspectiveDownIn {
  -webkit-animation-name: perspectiveDownIn;
  animation-name: perspectiveDownIn; }

.perspectiveLeftIn {
  -webkit-animation-name: perspectiveLeftIn;
  animation-name: perspectiveLeftIn; }

.perspectiveRightIn {
  -webkit-animation-name: perspectiveRightIn;
  animation-name: perspectiveRightIn; }

.perspectiveUpIn {
  -webkit-animation-name: perspectiveUpIn;
  animation-name: perspectiveUpIn; }

/* PUFF effect
---------------------------------------------------------- */
.puffIn {
  -webkit-animation-name: puffIn;
  animation-name: puffIn; }

.puffOut {
  -webkit-animation-name: puffOut;
  animation-name: puffOut; }

/* ROTATE effect
---------------------------------------------------------- */
.roLeftOut {
  -webkit-animation-name: roLeftOut;
  animation-name: roLeftOut; }

.roRightOut {
  -webkit-animation-name: roRightOut;
  animation-name: roRightOut; }

.roUpOut {
  -webkit-animation-name: roUpOut;
  animation-name: roUpOut; }

.roDownOut {
  -webkit-animation-name: roDownOut;
  animation-name: roDownOut; }

.roLeftIn {
  -webkit-animation-name: roLeftIn;
  animation-name: roLeftIn; }

.roRightIn {
  -webkit-animation-name: roRightIn;
  animation-name: roRightIn; }

.roUpIn {
  -webkit-animation-name: roUpIn;
  animation-name: roUpIn; }

.roDownIn {
  -webkit-animation-name: roDownIn;
  animation-name: roDownIn; }

/* SLIDE ONE effect
---------------------------------------------------------- */
.slideOneLeftOut {
  -webkit-animation-name: slideOneLeftOut;
  animation-name: slideOneLeftOut; }

.slideOneRightOut {
  -webkit-animation-name: slideOneRightOut;
  animation-name: slideOneRightOut; }

.slideOneUpOut {
  -webkit-animation-name: slideOneUpOut;
  animation-name: slideOneUpOut; }

.slideOneDownOut {
  -webkit-animation-name: slideOneDownOut;
  animation-name: slideDown; }

.slideOneLeftIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.slideOneRightIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.slideOneUpIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.slideOneDownIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

/* SPECIAL effect
---------------------------------------------------------- */
.vanishIn {
  -webkit-animation-name: vanishIn;
  animation-name: vanishIn; }

.vanishOut {
  -webkit-animation-name: vanishOut;
  animation-name: vanishOut; }

.swashOut {
  -webkit-animation-name: swashOut;
  animation-name: swashOut; }

.swashIn {
  -webkit-animation-name: swashIn;
  animation-name: swashIn; }

.foolishOut {
  -webkit-animation-name: foolishOut;
  animation-name: foolishOut; }

.foolishIn {
  -webkit-animation-name: foolishIn;
  animation-name: foolishIn; }

.holeOut {
  -webkit-animation-name: holeOut;
  animation-name: holeOut; }

/* SLIDE TIN effect
---------------------------------------------------------- */
.slideTinRightOut {
  -webkit-animation-name: slideTinRightOut;
  animation-name: slideTinRightOut; }

.slideTinLeftOut {
  -webkit-animation-name: slideTinLeftOut;
  animation-name: slideTinLeftOut; }

.slideTinUpOut {
  -webkit-animation-name: slideTinUpOut;
  animation-name: slideTinUpOut; }

.slideTinDownOut {
  -webkit-animation-name: slideTinDownOut;
  animation-name: slideTinDownOut; }

.slideTinRightIn {
  -webkit-animation-name: slideTinRightIn;
  animation-name: slideTinRightIn; }

.slideTinLeftIn {
  -webkit-animation-name: slideTinLeftIn;
  animation-name: slideTinLeftIn; }

.slideTinUpIn {
  -webkit-animation-name: slideTinUpIn;
  animation-name: slideTinUpIn; }

.slideTinDownIn {
  -webkit-animation-name: slideTinDownIn;
  animation-name: slideTinDownIn; }

/* BOMB effect
---------------------------------------------------------- */
.bombRightOut {
  -webkit-animation-name: bombRightOut;
  animation-name: bombRightOut; }

.bombLeftOut {
  -webkit-animation-name: bombLeftOut;
  animation-name: bombLeftOut; }

@-webkit-keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
    -webkit-transform: scale(1) rotate(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
    -webkit-transform: scale(0) rotate(270deg); } }

@keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
            transform-origin: 100% 200%;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
            transform-origin: 200% 500%;
    -webkit-transform: scale(0) rotate(270deg);
            transform: scale(0) rotate(270deg); } }

@-webkit-keyframes perspectiveDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg); } }

@keyframes perspectiveDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(0);
            transform: perspective(800px) rotateX(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg); } }

@-webkit-keyframes perspectiveLeftOut {
  0% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(-180deg); } }

@keyframes perspectiveLeftOut {
  0% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(0);
            transform: perspective(800px) rotateY(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg); } }

@-webkit-keyframes perspectiveRightOut {
  0% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(180deg); } }

@keyframes perspectiveRightOut {
  0% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(0);
            transform: perspective(800px) rotateY(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg); } }

@-webkit-keyframes perspectiveUpOut {
  0% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg); } }

@keyframes perspectiveUpOut {
  0% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(0);
            transform: perspective(800px) rotateX(0); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg); } }

@-webkit-keyframes perspectiveDownIn {
  0% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg); }
  100% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(0); } }

@keyframes perspectiveDownIn {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg); }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(0);
            transform: perspective(800px) rotateX(0); } }

@-webkit-keyframes perspectiveLeftIn {
  0% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(-180deg); }
  100% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(0); } }

@keyframes perspectiveLeftIn {
  0% {
    /*transform-origin: 0 0;  --> // defalut*/
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg); }
  100% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(0);
            transform: perspective(800px) rotateY(0); } }

@-webkit-keyframes perspectiveRightIn {
  0% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(180deg); }
  100% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(0); } }

@keyframes perspectiveRightIn {
  0% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg); }
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(0);
            transform: perspective(800px) rotateY(0); } }

@-webkit-keyframes perspectiveUpIn {
  0% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg); }
  100% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(0); } }

@keyframes perspectiveUpIn {
  0% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg); }
  100% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(0);
            transform: perspective(800px) rotateX(0); } }

@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2);
    /*-webkit-filter: blur(2px);*/ }
  100% {
    opacity: 1;
    -webkit-transform: scale(1); } }

@keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    /*-webkit-filter: blur(2px);*/ } }

@keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }

/* Rotate Out */
@-webkit-keyframes roLeftOut {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg); } }

@keyframes roLeftOut {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
            transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg);
            transform: perspective(800px) translateZ(-200px) rotateY(-180deg); } }

@-webkit-keyframes roRightOut {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg); } }

@keyframes roRightOut {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
            transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg);
            transform: perspective(800px) translateZ(-200px) rotateY(180deg); } }

@-webkit-keyframes roUpOut {
  0% {
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg); } }

@keyframes roUpOut {
  0% {
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
            transform: perspective(800px) translateZ(-150px) rotateX(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg);
            transform: perspective(800px) translateZ(-150px) rotateX(180deg); } }

@-webkit-keyframes roDownOut {
  0% {
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg); } }

@keyframes roDownOut {
  0% {
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
            transform: perspective(800px) translateZ(-150px) rotateX(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg);
            transform: perspective(800px) translateZ(-150px) rotateX(-180deg); } }

/* Rotate IN */
@-webkit-keyframes roLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0); } }

@keyframes roLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg);
            transform: perspective(800px) translateZ(-200px) rotateY(-180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
            transform: perspective(800px) translateZ(-200px) rotateY(0); } }

@-webkit-keyframes roRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0); } }

@keyframes roRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg);
            transform: perspective(800px) translateZ(-200px) rotateY(180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
            transform: perspective(800px) translateZ(-200px) rotateY(0); } }

@-webkit-keyframes roUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0); } }

@keyframes roUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg);
            transform: perspective(800px) translateZ(-150px) rotateX(180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
            transform: perspective(800px) translateZ(-150px) rotateX(0); } }

@-webkit-keyframes roDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0); } }

@keyframes roDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg);
            transform: perspective(800px) translateZ(-150px) rotateX(-180deg); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -150px;
            transform-origin: 50% 50% -150px;
    -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
            transform: perspective(800px) translateZ(-150px) rotateX(0); } }

/* Notes: phai them from(0) hoac to(0) de fix loi easing trong chrome */
@-webkit-keyframes slideOneLeftOut {
  from {
    -webkit-transform: translateX(0); }
  to {
    -webkit-transform: translateX(-100%); } }

@keyframes slideOneLeftOut {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); } }

@-webkit-keyframes slideOneRightOut {
  from {
    -webkit-transform: translateX(0); }
  to {
    -webkit-transform: translateX(100%); } }

@keyframes slideOneRightOut {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); } }

@-webkit-keyframes slideOneUpOut {
  from {
    -webkit-transform: translateY(0); }
  to {
    -webkit-transform: translateY(-100%); } }

@keyframes slideOneUpOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); } }

@-webkit-keyframes slideOneDownOut {
  from {
    -webkit-transform: translateY(0); }
  to {
    -webkit-transform: translateY(100%); } }

@keyframes slideOneDownOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%); } }

@-webkit-keyframes slideOneLeftIn {
  from {
    -webkit-transform: translateX(-100%); }
  to {
    -webkit-transform: translateX(0); } }

@keyframes slideOneLeftIn {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@-webkit-keyframes slideOneRightIn {
  from {
    -webkit-transform: translateX(100%); }
  to {
    -webkit-transform: translateX(0); } }

@keyframes slideOneRightIn {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@-webkit-keyframes slideOneUpIn {
  from {
    -webkit-transform: translateY(-100%); }
  to {
    -webkit-transform: translateY(0); } }

@keyframes slideOneUpIn {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes slideOneDownIn {
  from {
    -webkit-transform: translateY(100%); }
  to {
    -webkit-transform: translateY(0); } }

@keyframes slideOneDownIn {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%); }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    /*-webkit-transform: scale(0) translate(-700px, 0);*/
    -webkit-transform: scale(0) translate(-200%, 0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scale(1) translate(0, 0); } }

@keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    /*transform: scale(0) translate(-700px, 0);*/
    -webkit-transform: scale(0) translate(-200%, 0);
            transform: scale(0) translate(-200%, 0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0); } }

@-webkit-keyframes twistDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    -webkit-transform: scale(0) rotate(360deg) translateY(-100%); }
  30% {
    -webkit-transform-origin: 0 100%;
    -webkit-transform: scale(0) rotate(360deg) translateY(-100%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scale(1) rotate(0) translateY(0); } }

@keyframes twistDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0) rotate(360deg) translateY(-100%);
            transform: scale(0) rotate(360deg) translateY(-100%); }
  30% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0) rotate(360deg) translateY(-100%);
            transform: scale(0) rotate(360deg) translateY(-100%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1) rotate(0) translateY(0);
            transform: scale(1) rotate(0) translateY(0); } }

@-webkit-keyframes twistUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
    -webkit-transform: scale(0) rotate(360deg) translateY(100%); }
  30% {
    -webkit-transform-origin: 100% 0;
    -webkit-transform: scale(0) rotate(360deg) translateY(100%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1) rotate(0) translateY(0); } }

@keyframes twistUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0) rotate(360deg) translateY(100%);
            transform: scale(0) rotate(360deg) translateY(100%); }
  30% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0) rotate(360deg) translateY(100%);
            transform: scale(0) rotate(360deg) translateY(100%); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(1) rotate(0) translateY(0);
            transform: scale(1) rotate(0) translateY(0); } }

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2);
    -webkit-filter: blur(90px); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -webkit-filter: blur(0); } }

@keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -webkit-filter: blur(20px); } }

@keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }

@-webkit-keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.9); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0); } }

@keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); } }

@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  90% {
    opacity: 1;
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1) rotate(360deg); }
  20% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(0.5) rotate(0); }
  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: scale(0.5) rotate(0); }
  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
    -webkit-transform: scale(0.5) rotate(0); }
  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: scale(0.5) rotate(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0) rotate(0); } }

@keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg); }
  20% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0) rotate(0);
            transform: scale(0) rotate(0); } }

@-webkit-keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0) rotate(360deg); }
  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: scale(0.5) rotate(0); }
  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: scale(0.5) rotate(0); }
  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
    -webkit-transform: scale(0.5) rotate(0); }
  80% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(0.5) rotate(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1) rotate(0); } }

@keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0) rotate(360deg);
            transform: scale(0) rotate(360deg); }
  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  80% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0); } }

@-webkit-keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) rotateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0) rotateY(180deg); } }

@keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) rotateY(0);
            transform: scale(1) rotateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0) rotateY(180deg);
            transform: scale(0) rotateY(180deg); } }

@-webkit-keyframes slideTinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(900%); } }

@keyframes slideTinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0);
            transform: scale(1.1) translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(900%);
            transform: scale(1) translateX(900%); } }

@-webkit-keyframes slideTinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(-900%); } }

@keyframes slideTinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0);
            transform: scale(1.1) translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(-900%);
            transform: scale(1) translateX(-900%); } }

@-webkit-keyframes slideTinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(-900%); } }

@keyframes slideTinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0);
            transform: scale(1.1) translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(-900%);
            transform: scale(1) translateY(-900%); } }

@-webkit-keyframes slideTinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(900%); } }

@keyframes slideTinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0);
            transform: scale(1.1) translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(900%);
            transform: scale(1) translateY(900%); } }

@-webkit-keyframes slideTinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0); } }

@keyframes slideTinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(900%);
            transform: scale(1) translateX(900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0);
            transform: scale(1.1) translateX(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0); } }

@-webkit-keyframes slideTinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(-900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0); } }

@keyframes slideTinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateX(-900%);
            transform: scale(1) translateX(-900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateX(0);
            transform: scale(1.1) translateX(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0); } }

@-webkit-keyframes slideTinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(-900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0); } }

@keyframes slideTinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(-900%);
            transform: scale(1) translateY(-900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0);
            transform: scale(1.1) translateY(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); } }

@-webkit-keyframes slideTinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0); } }

@keyframes slideTinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) translateY(900%);
            transform: scale(1) translateY(900%); }
  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1) translateY(0);
            transform: scale(1.1) translateY(0); }
  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); } }

@-webkit-keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform: rotate(0); }
  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
    -webkit-filter: blur(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
    -webkit-filter: blur(20px); } }

@keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg); } }

@-webkit-keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(0); }
  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
    -webkit-filter: blur(0); }
  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
    -webkit-filter: blur(20px); } }

@keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg); }
  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg); } }

/* Table of Effect issue-3 (4 effects)
    + pullIn
    + pullOut
    + pushIn
    + pushOut
============================================================== */
/* PULL PUSH */
.pullIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

@-webkit-keyframes pullIn {
  from {
    -webkit-transform: scale(0);
    opacity: 0; } }

@keyframes pullIn {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; } }

.pullOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

@-webkit-keyframes pullOut {
  to {
    -webkit-transform: scale(0);
    opacity: 0; } }

@keyframes pullOut {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; } }

.pushIn {
  -webkit-animation-name: pushIn;
  animation-name: pushIn; }

@-webkit-keyframes pushIn {
  from {
    -webkit-transform: scale(2);
    opacity: 0; } }

@keyframes pushIn {
  from {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0; } }

.pushOut {
  -webkit-animation-name: pushOut;
  animation-name: pushOut; }

@-webkit-keyframes pushOut {
  to {
    -webkit-transform: scale(2);
    opacity: 0; } }

@keyframes pushOut {
  to {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0; } }

/* PULL BOUNCE */
.pullBounceIn {
  -webkit-animation-name: pullBounceIn;
  animation-name: pullBounceIn; }

@-webkit-keyframes pullBounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0); }
  70% {
    opacity: 1;
    -webkit-transform: scale(1.2); } }

@keyframes pullBounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  70% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); } }

.pullBounceOut {
  -webkit-animation-name: pullBounceOut;
  animation-name: pullBounceOut; }

@-webkit-keyframes pullBounceOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0); } }

@keyframes pullBounceOut {
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); } }

.pushBounceIn {
  -webkit-animation-name: pushBounceIn;
  animation-name: pushBounceIn; }

@-webkit-keyframes pushBounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2); }
  70% {
    opacity: 1;
    -webkit-transform: scale(0.8); } }

@keyframes pushBounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); }
  70% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

.pushBounceOut {
  -webkit-animation-name: pushBounceOut;
  animation-name: pushBounceOut; }

@-webkit-keyframes pushBounceOut {
  30% {
    -webkit-transform: scale(0.8); }
  100% {
    opacity: 0;
    -webkit-transform: scale(2); } }

@keyframes pushBounceOut {
  30% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2); } }

/* PULL SOFT */
.pullSoftIn {
  -webkit-animation-name: pullSoftIn;
  animation-name: pullSoftIn; }

@-webkit-keyframes pullSoftIn {
  from {
    -webkit-transform: scale(0.9);
    opacity: 0; } }

@keyframes pullSoftIn {
  from {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0; } }

.pullSoftOut {
  -webkit-animation-name: pullSoftOut;
  animation-name: pullSoftOut; }

@-webkit-keyframes pullSoftOut {
  to {
    -webkit-transform: scale(0.9);
    opacity: 0; } }

@keyframes pullSoftOut {
  to {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0; } }

.pushSoftIn {
  -webkit-animation-name: pushSoftIn;
  animation-name: pushSoftIn; }

@-webkit-keyframes pushSoftIn {
  from {
    -webkit-transform: scale(1.1);
    opacity: 0; } }

@keyframes pushSoftIn {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0; } }

.pushSoftOut {
  -webkit-animation-name: pushSoftOut;
  animation-name: pushSoftOut; }

@-webkit-keyframes pushSoftOut {
  to {
    -webkit-transform: scale(1.1);
    opacity: 0; } }

@keyframes pushSoftOut {
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0; } }

/* WAVE EFFECT */
.wave {
  -webkit-animation-name: wave;
  animation-name: wave; }

.waveLoop {
  -webkit-animation-name: wave;
  animation-name: wave;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes wave {
  0%, 100% {
    -webkit-transform: perspective(800px) translateZ(0); }
  25%, 75% {
    -webkit-transform: perspective(800px) translateZ(-100px); }
  50% {
    -webkit-transform: perspective(800px) translateZ(100px); } }

@keyframes wave {
  0%, 100% {
    -webkit-transform: perspective(800px) translateZ(0);
            transform: perspective(800px) translateZ(0); }
  25%, 75% {
    -webkit-transform: perspective(800px) translateZ(-100px);
            transform: perspective(800px) translateZ(-100px); }
  50% {
    -webkit-transform: perspective(800px) translateZ(100px);
            transform: perspective(800px) translateZ(100px); } }

/* BOB EFFECT */
.bobUp {
  -webkit-animation-name: bobUp;
  animation-name: bobUp;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0; }

@-webkit-keyframes bobUp {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateX(0); }
  25% {
    -webkit-transform: perspective(800px) rotateX(45deg); }
  50% {
    -webkit-transform: perspective(800px) rotateX(-30deg); }
  75% {
    -webkit-transform: perspective(800px) rotateX(30deg); } }

@keyframes bobUp {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateX(0);
            transform: perspective(800px) rotateX(0); }
  25% {
    -webkit-transform: perspective(800px) rotateX(45deg);
            transform: perspective(800px) rotateX(45deg); }
  50% {
    -webkit-transform: perspective(800px) rotateX(-30deg);
            transform: perspective(800px) rotateX(-30deg); }
  75% {
    -webkit-transform: perspective(800px) rotateX(30deg);
            transform: perspective(800px) rotateX(30deg); } }

.bobDown {
  -webkit-animation-name: bobDown;
  animation-name: bobDown;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%; }

@-webkit-keyframes bobDown {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateX(0); }
  25% {
    -webkit-transform: perspective(800px) rotateX(-45deg); }
  50% {
    -webkit-transform: perspective(800px) rotateX(30deg); }
  75% {
    -webkit-transform: perspective(800px) rotateX(-30deg); } }

@keyframes bobDown {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateX(0);
            transform: perspective(800px) rotateX(0); }
  25% {
    -webkit-transform: perspective(800px) rotateX(-45deg);
            transform: perspective(800px) rotateX(-45deg); }
  50% {
    -webkit-transform: perspective(800px) rotateX(30deg);
            transform: perspective(800px) rotateX(30deg); }
  75% {
    -webkit-transform: perspective(800px) rotateX(-30deg);
            transform: perspective(800px) rotateX(-30deg); } }

.bobLeft {
  -webkit-animation-name: bobLeft;
  animation-name: bobLeft;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%; }

@-webkit-keyframes bobLeft {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateY(0); }
  25% {
    -webkit-transform: perspective(800px) rotateY(-30deg); }
  50% {
    -webkit-transform: perspective(800px) rotateY(15deg); }
  75% {
    -webkit-transform: perspective(800px) rotateY(-15deg); } }

@keyframes bobLeft {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateY(0);
            transform: perspective(800px) rotateY(0); }
  25% {
    -webkit-transform: perspective(800px) rotateY(-30deg);
            transform: perspective(800px) rotateY(-30deg); }
  50% {
    -webkit-transform: perspective(800px) rotateY(15deg);
            transform: perspective(800px) rotateY(15deg); }
  75% {
    -webkit-transform: perspective(800px) rotateY(-15deg);
            transform: perspective(800px) rotateY(-15deg); } }

.bobRight {
  -webkit-animation-name: bobRight;
  animation-name: bobRight;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%; }

@-webkit-keyframes bobRight {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateY(0); }
  25% {
    -webkit-transform: perspective(800px) rotateY(30deg); }
  50% {
    -webkit-transform: perspective(800px) rotateY(-15deg); }
  75% {
    -webkit-transform: perspective(800px) rotateY(15deg); } }

@keyframes bobRight {
  0%, 100% {
    -webkit-transform: perspective(800px) rotateY(0);
            transform: perspective(800px) rotateY(0); }
  25% {
    -webkit-transform: perspective(800px) rotateY(30deg);
            transform: perspective(800px) rotateY(30deg); }
  50% {
    -webkit-transform: perspective(800px) rotateY(-15deg);
            transform: perspective(800px) rotateY(-15deg); }
  75% {
    -webkit-transform: perspective(800px) rotateY(15deg);
            transform: perspective(800px) rotateY(15deg); } }

/* JUGGLE EFFECT */
.juggle {
  -webkit-animation-name: juggle;
  animation-name: juggle; }

@-webkit-keyframes juggle {
  0%, 100% {
    -webkit-transform: perspective(800px) translateZ(0) rotateY(0); }
  65% {
    -webkit-transform: perspective(800px) translateZ(400px) rotateY(420deg); } }

@keyframes juggle {
  0%, 100% {
    -webkit-transform: perspective(800px) translateZ(0) rotateY(0);
            transform: perspective(800px) translateZ(0) rotateY(0); }
  65% {
    -webkit-transform: perspective(800px) translateZ(400px) rotateY(420deg);
            transform: perspective(800px) translateZ(400px) rotateY(420deg); } }

/* Loai bo vi khong hoat dong duoc */
/*.rollRight {
    -webkit-animation-name: rollRight;
}
@-webkit-keyframes rollRight {
    0% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(0);
    }
    25% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: translateY(100%) rotate(180deg);
    }
    100% {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: translateX(100%) rotate(270deg);
    }
}*/
.flatten {
  -webkit-animation-name: flatten;
  animation-name: flatten; }

@-webkit-keyframes flatten {
  0% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scaleX(1) skewX(0); }
  25% {
    -webkit-transform: scaleX(0.8) skewX(45deg); }
  50% {
    -webkit-transform: scaleX(0.5) skewX(-30deg); }
  75% {
    -webkit-transform: scaleX(0.3) skewX(30deg); }
  100% {
    -webkit-transform: scaleX(0) skewX(0); } }

@keyframes flatten {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scaleX(1) skewX(0);
            transform: scaleX(1) skewX(0); }
  25% {
    -webkit-transform: scaleX(0.8) skewX(45deg);
            transform: scaleX(0.8) skewX(45deg); }
  50% {
    -webkit-transform: scaleX(0.5) skewX(-30deg);
            transform: scaleX(0.5) skewX(-30deg); }
  75% {
    -webkit-transform: scaleX(0.3) skewX(30deg);
            transform: scaleX(0.3) skewX(30deg); }
  100% {
    -webkit-transform: scaleX(0) skewX(0);
            transform: scaleX(0) skewX(0); } }

/* RING */
.ringLeft {
  -webkit-animation-name: ringLeft;
  animation-name: ringLeft; }

@-webkit-keyframes ringLeft {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-360deg); } }

@keyframes ringLeft {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
            transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-360deg);
            transform: perspective(800px) translateZ(-200px) rotateY(-360deg); } }

.ringRight {
  -webkit-animation-name: ringRight;
  animation-name: ringRight; }

@-webkit-keyframes ringRight {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(360deg); } }

@keyframes ringRight {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
            transform: perspective(800px) translateZ(-200px) rotateY(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateY(360deg);
            transform: perspective(800px) translateZ(-200px) rotateY(360deg); } }

.ringUp {
  -webkit-animation-name: ringUp;
  animation-name: ringUp; }

@-webkit-keyframes ringUp {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(360deg); } }

@keyframes ringUp {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0);
            transform: perspective(800px) translateZ(-200px) rotateX(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(360deg);
            transform: perspective(800px) translateZ(-200px) rotateX(360deg); } }

.ringDown {
  -webkit-animation-name: ringDown;
  animation-name: ringDown; }

@-webkit-keyframes ringDown {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(-360deg); } }

@keyframes ringDown {
  0% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0);
            transform: perspective(800px) translateZ(-200px) rotateX(0); }
  100% {
    -webkit-transform-origin: 50% 50% -200px;
            transform-origin: 50% 50% -200px;
    -webkit-transform: perspective(800px) translateZ(-200px) rotateX(-360deg);
            transform: perspective(800px) translateZ(-200px) rotateX(-360deg); } }

/* ROTATE EDGE IN */
.roEdgeUpIn {
  -webkit-animation-name: roEdgeUpIn;
  animation-name: roEdgeUpIn; }

@-webkit-keyframes roEdgeUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) rotateX(-90deg); }
  100% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px); } }

@keyframes roEdgeUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) rotateX(-90deg);
            transform: perspective(1200px) rotateX(-90deg); }
  100% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

.roEdgeDownIn {
  -webkit-animation-name: roEdgeDownIn;
  animation-name: roEdgeDownIn; }

@-webkit-keyframes roEdgeDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) rotateX(90deg); }
  100% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px); } }

@keyframes roEdgeDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) rotateX(90deg);
            transform: perspective(1200px) rotateX(90deg); }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

.roEdgeLeftIn {
  -webkit-animation-name: roEdgeLeftIn;
  animation-name: roEdgeLeftIn; }

@-webkit-keyframes roEdgeLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) rotateY(90deg); }
  100% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px); } }

@keyframes roEdgeLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) rotateY(90deg);
            transform: perspective(1200px) rotateY(90deg); }
  100% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

.roEdgeRightIn {
  -webkit-animation-name: roEdgeRightIn;
  animation-name: roEdgeRightIn; }

@-webkit-keyframes roEdgeRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) rotateY(-90deg); }
  100% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px); } }

@keyframes roEdgeRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) rotateY(-90deg);
            transform: perspective(1200px) rotateY(-90deg); }
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

/* ROTATE EDGE OUT */
.roEdgeUpOut {
  -webkit-animation-name: roEdgeUpOut;
  animation-name: roEdgeUpOut; }

@-webkit-keyframes roEdgeUpOut {
  0% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) rotateX(-90deg); } }

@keyframes roEdgeUpOut {
  0% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) rotateX(-90deg);
            transform: perspective(1200px) rotateX(-90deg); } }

.roEdgeDownOut {
  -webkit-animation-name: roEdgeDownOut;
  animation-name: roEdgeDownOut; }

@-webkit-keyframes roEdgeDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) rotateX(90deg); } }

@keyframes roEdgeDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) rotateX(90deg);
            transform: perspective(1200px) rotateX(90deg); } }

.roEdgeLeftOut {
  -webkit-animation-name: roEdgeLeftOut;
  animation-name: roEdgeLeftOut; }

@-webkit-keyframes roEdgeLeftOut {
  0% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) rotateY(90deg); } }

@keyframes roEdgeLeftOut {
  0% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) rotateY(90deg);
            transform: perspective(1200px) rotateY(90deg); } }

.roEdgeRightOut {
  -webkit-animation-name: roEdgeRightOut;
  animation-name: roEdgeRightOut; }

@-webkit-keyframes roEdgeRightOut {
  0% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) rotateY(-90deg); } }

@keyframes roEdgeRightOut {
  0% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) rotateY(-90deg);
            transform: perspective(1200px) rotateY(-90deg); } }

/* ROTATE EDGE SOFT OUT */
.roEdgeSoftUpOut {
  -webkit-animation-name: roEdgeSoftUpOut;
  animation-name: roEdgeSoftUpOut; }

@-webkit-keyframes roEdgeSoftUpOut {
  0% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) rotateX(-20deg); } }

@keyframes roEdgeSoftUpOut {
  0% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) rotateX(-20deg);
            transform: perspective(1200px) rotateX(-20deg); } }

.roEdgeSoftDownOut {
  -webkit-animation-name: roEdgeSoftDownOut;
  animation-name: roEdgeSoftDownOut; }

@-webkit-keyframes roEdgeSoftDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) rotateX(20deg); } }

@keyframes roEdgeSoftDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) rotateX(20deg);
            transform: perspective(1200px) rotateX(20deg); } }

.roEdgeSoftLeftOut {
  -webkit-animation-name: roEdgeSoftLeftOut;
  animation-name: roEdgeSoftLeftOut; }

@-webkit-keyframes roEdgeSoftLeftOut {
  0% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) rotateY(20deg); } }

@keyframes roEdgeSoftLeftOut {
  0% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) rotateY(20deg);
            transform: perspective(1200px) rotateY(20deg); } }

.roEdgeSoftRightOut {
  -webkit-animation-name: roEdgeSoftRightOut;
  animation-name: roEdgeSoftRightOut; }

@-webkit-keyframes roEdgeSoftRightOut {
  0% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) rotateY(-20deg); } }

@keyframes roEdgeSoftRightOut {
  0% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) rotateY(-20deg);
            transform: perspective(1200px) rotateY(-20deg); } }

/* ROTATE TWIST OUT */
.roTwistLeftOut {
  -webkit-animation-name: roTwistLeftOut;
  animation-name: roTwistLeftOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes roTwistLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0); } }

@keyframes roTwistLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0);
            transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0); } }

.roTwistRightOut {
  -webkit-animation-name: roTwistRightOut;
  animation-name: roTwistRightOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes roTwistRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0); } }

@keyframes roTwistRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0);
            transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0); } }

.roTwistUpOut {
  -webkit-animation-name: roTwistUpOut;
  animation-name: roTwistUpOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes roTwistUpOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0); } }

@keyframes roTwistUpOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
            transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0); } }

.roTwistDownOut {
  -webkit-animation-name: roTwistDownOut;
  animation-name: roTwistDownOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes roTwistDownOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0); } }

@keyframes roTwistDownOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0);
            transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0); } }

/* ROTATE TWIST IN */
.roTwistLeftIn {
  -webkit-animation-name: roTwistLeftIn;
  animation-name: roTwistLeftIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes roTwistLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); } }

@keyframes roTwistLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
            transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); } }

.roTwistRightIn {
  -webkit-animation-name: roTwistRightIn;
  animation-name: roTwistRightIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes roTwistRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); } }

@keyframes roTwistRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0);
            transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -400px;
            transform-origin: 50% 50% -400px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1); } }

.roTwistUpIn {
  -webkit-animation-name: roTwistUpIn;
  animation-name: roTwistUpIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes roTwistUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); } }

@keyframes roTwistUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0);
            transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); } }

.roTwistDownIn {
  -webkit-animation-name: roTwistDownIn;
  animation-name: roTwistDownIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes roTwistDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); } }

@keyframes roTwistDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0);
            transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0); }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50% -800px;
            transform-origin: 50% 50% -800px;
    -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
            transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1); } }

/* ROTATE SOFT OUT */
.roSoftLeftOut {
  -webkit-animation-name: roSoftLeftOut;
  animation-name: roSoftLeftOut; }

@-webkit-keyframes roSoftLeftOut {
  to {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px); } }

@keyframes roSoftLeftOut {
  to {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px);
            transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px); } }

.roSoftRightOut {
  -webkit-animation-name: roSoftRightOut;
  animation-name: roSoftRightOut; }

@-webkit-keyframes roSoftRightOut {
  to {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px); } }

@keyframes roSoftRightOut {
  to {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px);
            transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px); } }

/* ROTATE SOFT IN */
.roSoftLeftIn {
  -webkit-animation-name: roSoftLeftIn;
  animation-name: roSoftLeftIn; }

@-webkit-keyframes roSoftLeftIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px); }
  to {
    -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0); } }

@keyframes roSoftLeftIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px);
            transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px); }
  to {
    -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0);
            transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0); } }

.roSoftRightIn {
  -webkit-animation-name: roSoftRightIn;
  animation-name: roSoftRightIn; }

@-webkit-keyframes roSoftRightIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px); }
  to {
    -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0); } }

@keyframes roSoftRightIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px);
            transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px); }
  to {
    -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0);
            transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0); } }

/* ROTATE SHORT PUSH OUT */
.roShortPushRightOut {
  -webkit-animation-name: roShortPushRightOut;
  animation-name: roShortPushRightOut; }

@-webkit-keyframes roShortPushRightOut {
  30% {
    opacity: .8;
    -webkit-transform: scale(0.8); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(45deg); } }

@keyframes roShortPushRightOut {
  30% {
    opacity: .8;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(45deg);
            transform: scale(1.8) rotate(45deg); } }

.roShortPushLeftOut {
  -webkit-animation-name: roShortPushLeftOut;
  animation-name: roShortPushLeftOut; }

@-webkit-keyframes roShortPushLeftOut {
  30% {
    opacity: .8;
    -webkit-transform: scale(0.8); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(-45deg); } }

@keyframes roShortPushLeftOut {
  30% {
    opacity: .8;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(-45deg);
            transform: scale(1.8) rotate(-45deg); } }

/* ROTATE SHORT PUSH IN */
.roShortPushRightIn {
  -webkit-animation-name: roShortPushRightIn;
  animation-name: roShortPushRightIn; }

@-webkit-keyframes roShortPushRightIn {
  from {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(-45deg); } }

@keyframes roShortPushRightIn {
  from {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(-45deg);
            transform: scale(1.8) rotate(-45deg); } }

.roShortPushLeftIn {
  -webkit-animation-name: roShortPushLeftIn;
  animation-name: roShortPushLeftIn; }

@-webkit-keyframes roShortPushLeftIn {
  from {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(45deg); } }

@keyframes roShortPushLeftIn {
  from {
    opacity: 0;
    -webkit-transform: scale(1.8) rotate(45deg);
            transform: scale(1.8) rotate(45deg); } }

/* ROTATE SHORT PULL IN */
.roShortPullRightIn {
  -webkit-animation-name: roShortPullRightIn;
  animation-name: roShortPullRightIn; }

@-webkit-keyframes roShortPullRightIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-45deg); } }

@keyframes roShortPullRightIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-45deg);
            transform: scale(0) rotate(-45deg); } }

.roShortPullLeftIn {
  -webkit-animation-name: roShortPullLeftIn;
  animation-name: roShortPullLeftIn; }

@-webkit-keyframes roShortPullLeftIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg); } }

@keyframes roShortPullLeftIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg); } }

/* ROTATE SHORT PULL OUT */
.roShortPullRightOut {
  -webkit-animation-name: roShortPullRightOut;
  animation-name: roShortPullRightOut; }

@-webkit-keyframes roShortPullRightOut {
  to {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg); } }

@keyframes roShortPullRightOut {
  to {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg); } }

.roShortPullLeftOut {
  -webkit-animation-name: roShortPullLeftOut;
  animation-name: roShortPullLeftOut; }

@-webkit-keyframes roShortPullLeftOut {
  to {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-45deg); } }

@keyframes roShortPullLeftOut {
  to {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-45deg);
            transform: scale(0) rotate(-45deg); } }

/* ROTATE WHEEL OUT */
.roWheelUpOut {
  -webkit-animation-name: roWheelUpOut;
  animation-name: roWheelUpOut; }

@-webkit-keyframes roWheelUpOut {
  from {
    -webkit-transform-origin: 300% 50%; }
  to {
    opacity: 0;
    -webkit-transform-origin: 300% 50%;
    -webkit-transform: rotate(30deg); } }

@keyframes roWheelUpOut {
  from {
    -webkit-transform-origin: 300% 50%;
            transform-origin: 300% 50%; }
  to {
    opacity: 0;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg); } }

.roWheelDownOut {
  -webkit-animation-name: roWheelDownOut;
  animation-name: roWheelDownOut; }

@-webkit-keyframes roWheelDownOut {
  from {
    -webkit-transform-origin: -300% 50%; }
  to {
    opacity: 0;
    -webkit-transform-origin: -300% 50%;
    -webkit-transform: rotate(30deg); } }

@keyframes roWheelDownOut {
  from {
    -webkit-transform-origin: -300% 50%;
            transform-origin: -300% 50%; }
  to {
    opacity: 0;
    -webkit-transform-origin: -300% 50%;
            transform-origin: -300% 50%;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg); } }

.roWheelLeftOut {
  -webkit-animation-name: roWheelLeftOut;
  animation-name: roWheelLeftOut; }

@-webkit-keyframes roWheelLeftOut {
  from {
    -webkit-transform-origin: 50% -800%; }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% -800%;
    -webkit-transform: rotate(30deg); } }

@keyframes roWheelLeftOut {
  from {
    -webkit-transform-origin: 50% -800%;
            transform-origin: 50% -800%; }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% -800%;
            transform-origin: 50% -800%;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg); } }

.roWheelRightOut {
  -webkit-animation-name: roWheelRightOut;
  animation-name: roWheelRightOut; }

@-webkit-keyframes roWheelRightOut {
  from {
    -webkit-transform-origin: 50% 800%; }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 800%;
    -webkit-transform: rotate(30deg); } }

@keyframes roWheelRightOut {
  from {
    -webkit-transform-origin: 50% 800%;
            transform-origin: 50% 800%; }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 800%;
            transform-origin: 50% 800%;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg); } }

/* ROTATE WHEEL IN */
.roWheelUpIn {
  -webkit-animation-name: roWheelUpIn;
  animation-name: roWheelUpIn; }

@-webkit-keyframes roWheelUpIn {
  from {
    opacity: 0;
    -webkit-transform-origin: -300% 50%;
    -webkit-transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: -300% 50%; } }

@keyframes roWheelUpIn {
  from {
    opacity: 0;
    -webkit-transform-origin: -300% 50%;
            transform-origin: -300% 50%;
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: -300% 50%;
            transform-origin: -300% 50%; } }

.roWheelDownIn {
  -webkit-animation-name: roWheelDownIn;
  animation-name: roWheelDownIn; }

@-webkit-keyframes roWheelDownIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 300% 50%;
    -webkit-transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: 300% 50%; } }

@keyframes roWheelDownIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 300% 50%;
            transform-origin: 300% 50%;
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: 300% 50%;
            transform-origin: 300% 50%; } }

.roWheelLeftIn {
  -webkit-animation-name: roWheelLeftIn;
  animation-name: roWheelLeftIn; }

@-webkit-keyframes roWheelLeftIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 800%;
    -webkit-transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: 50% 800%; } }

@keyframes roWheelLeftIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 800%;
            transform-origin: 50% 800%;
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: 50% 800%;
            transform-origin: 50% 800%; } }

.roWheelRightIn {
  -webkit-animation-name: roWheelRightIn;
  animation-name: roWheelRightIn; }

@-webkit-keyframes roWheelRightIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 50% -800%;
    -webkit-transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: 50% -800%; } }

@keyframes roWheelRightIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 50% -800%;
            transform-origin: 50% -800%;
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg); }
  to {
    -webkit-transform-origin: 50% -800%;
            transform-origin: 50% -800%; } }

/* ROTATE FLIT OUT */
.roFlitLeftOut {
  -webkit-animation-name: roFlitLeftOut;
  animation-name: roFlitLeftOut; }

@-webkit-keyframes roFlitLeftOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg); } }

@keyframes roFlitLeftOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg);
            transform: perspective(800px) translateZ(-1000px) rotateY(-90deg); } }

.roFlitRightOut {
  -webkit-animation-name: roFlitRightOut;
  animation-name: roFlitRightOut; }

@-webkit-keyframes roFlitRightOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg); } }

@keyframes roFlitRightOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg);
            transform: perspective(800px) translateZ(-1000px) rotateY(90deg); } }

.roFlitUpOut {
  -webkit-animation-name: roFlitUpOut;
  animation-name: roFlitUpOut; }

@-webkit-keyframes roFlitUpOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg); } }

@keyframes roFlitUpOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg);
            transform: perspective(800px) translateZ(-1000px) rotateX(90deg); } }

.roFlitDownOut {
  -webkit-animation-name: roFlitDownOut;
  animation-name: roFlitDownOut; }

@-webkit-keyframes roFlitDownOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg); } }

@keyframes roFlitDownOut {
  50%, 100% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg);
            transform: perspective(800px) translateZ(-1000px) rotateX(-90deg); } }

/* ROTATE FLIT IN */
.roFlitLeftIn {
  -webkit-animation-name: roFlitLeftIn;
  animation-name: roFlitLeftIn; }

@-webkit-keyframes roFlitLeftIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg); } }

@keyframes roFlitLeftIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg);
            transform: perspective(800px) translateZ(-1000px) rotateY(-90deg); } }

.roFlitRightIn {
  -webkit-animation-name: roFlitRightIn;
  animation-name: roFlitRightIn; }

@-webkit-keyframes roFlitRightIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg); } }

@keyframes roFlitRightIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg);
            transform: perspective(800px) translateZ(-1000px) rotateY(90deg); } }

.roFlitUpIn {
  -webkit-animation-name: roFlitUpIn;
  animation-name: roFlitUpIn; }

@-webkit-keyframes roFlitUpIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg); } }

@keyframes roFlitUpIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg);
            transform: perspective(800px) translateZ(-1000px) rotateX(90deg); } }

.roFlitDownIn {
  -webkit-animation-name: roFlitDownIn;
  animation-name: roFlitDownIn; }

@-webkit-keyframes roFlitDownIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg); } }

@keyframes roFlitDownIn {
  0%, 50% {
    opacity: .2;
    -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg);
            transform: perspective(800px) translateZ(-1000px) rotateX(-90deg); } }

/* ROTATE FOLD OUT */
.roFoldLeftOut {
  -webkit-animation-name: roFoldLeftOut;
  animation-name: roFoldLeftOut; }

@-webkit-keyframes roFoldLeftOut {
  from {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg); } }

@keyframes roFoldLeftOut {
  from {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg);
            transform: perspective(1600px) translateX(-100%) rotateY(-90deg); } }

.roFoldRightOut {
  -webkit-animation-name: roFoldRightOut;
  animation-name: roFoldRightOut; }

@-webkit-keyframes roFoldRightOut {
  from {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg); } }

@keyframes roFoldRightOut {
  from {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg);
            transform: perspective(1600px) translateX(100%) rotateY(90deg); } }

.roFoldUpOut {
  -webkit-animation-name: roFoldUpOut;
  animation-name: roFoldUpOut; }

@-webkit-keyframes roFoldUpOut {
  from {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg); } }

@keyframes roFoldUpOut {
  from {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg);
            transform: perspective(1600px) translateY(-100%) rotateX(90deg); } }

.roFoldDownOut {
  -webkit-animation-name: roFoldDownOut;
  animation-name: roFoldDownOut; }

@-webkit-keyframes roFoldDownOut {
  from {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg); } }

@keyframes roFoldDownOut {
  from {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg);
            transform: perspective(1600px) translateY(100%) rotateX(-90deg); } }

/* ROTATE FOLD IN */
.roFoldLeftIn {
  -webkit-animation-name: roFoldLeftIn;
  animation-name: roFoldLeftIn; }

@-webkit-keyframes roFoldLeftIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg); }
  to {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px); } }

@keyframes roFoldLeftIn {
  from {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg);
            transform: perspective(1600px) translateX(-100%) rotateY(-90deg); }
  to {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); } }

.roFoldRightIn {
  -webkit-animation-name: roFoldRightIn;
  animation-name: roFoldRightIn; }

@-webkit-keyframes roFoldRightIn {
  to {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1600px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg); } }

@keyframes roFoldRightIn {
  to {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg);
            transform: perspective(1600px) translateX(100%) rotateY(90deg); } }

.roFoldUpIn {
  -webkit-animation-name: roFoldUpIn;
  animation-name: roFoldUpIn; }

@-webkit-keyframes roFoldUpIn {
  to {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg); } }

@keyframes roFoldUpIn {
  to {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg);
            transform: perspective(1600px) translateY(-100%) rotateX(90deg); } }

.roFoldDownIn {
  -webkit-animation-name: roFoldDownIn;
  animation-name: roFoldDownIn; }

@-webkit-keyframes roFoldDownIn {
  to {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1600px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg); } }

@keyframes roFoldDownIn {
  to {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1600px);
            transform: perspective(1600px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg);
            transform: perspective(1600px) translateY(100%) rotateX(-90deg); } }

/* ROTATE ROOM OUT */
.roRoomLeftOut {
  -webkit-animation-name: roRoomLeftOut;
  animation-name: roRoomLeftOut; }

@-webkit-keyframes roRoomLeftOut {
  from {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg); } }

@keyframes roRoomLeftOut {
  from {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg);
            transform: perspective(1200px) translateX(-100%) rotateY(90deg); } }

.roRoomRightOut {
  -webkit-animation-name: roRoomRightOut;
  animation-name: roRoomRightOut; }

@-webkit-keyframes roRoomRightOut {
  from {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg); } }

@keyframes roRoomRightOut {
  from {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg);
            transform: perspective(1200px) translateX(100%) rotateY(-90deg); } }

.roRoomUpOut {
  -webkit-animation-name: roRoomUpOut;
  animation-name: roRoomUpOut; }

@-webkit-keyframes roRoomUpOut {
  from {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg); } }

@keyframes roRoomUpOut {
  from {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg);
            transform: perspective(1200px) translateY(-100%) rotateX(-90deg); } }

.roRoomDownOut {
  -webkit-animation-name: roRoomDownOut;
  animation-name: roRoomDownOut; }

@-webkit-keyframes roRoomDownOut {
  from {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg); } }

@keyframes roRoomDownOut {
  from {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  to {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg);
            transform: perspective(1200px) translateY(100%) rotateX(90deg); } }

/* ROTATE ROOM IN */
.roRoomLeftIn {
  -webkit-animation-name: roRoomLeftIn;
  animation-name: roRoomLeftIn; }

@-webkit-keyframes roRoomLeftIn {
  to {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg); } }

@keyframes roRoomLeftIn {
  to {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg);
            transform: perspective(1200px) translateX(-100%) rotateY(90deg); } }

.roRoomRightIn {
  -webkit-animation-name: roRoomRightIn;
  animation-name: roRoomRightIn; }

@-webkit-keyframes roRoomRightIn {
  to {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg); } }

@keyframes roRoomRightIn {
  to {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg);
            transform: perspective(1200px) translateX(100%) rotateY(-90deg); } }

.roRoomUpIn {
  -webkit-animation-name: roRoomUpIn;
  animation-name: roRoomUpIn; }

@-webkit-keyframes roRoomUpIn {
  to {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg); } }

@keyframes roRoomUpIn {
  to {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg);
            transform: perspective(1200px) translateY(-100%) rotateX(-90deg); } }

.roRoomDownIn {
  -webkit-animation-name: roRoomDownIn;
  animation-name: roRoomDownIn; }

@-webkit-keyframes roRoomDownIn {
  to {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg); } }

@keyframes roRoomDownIn {
  to {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); }
  from {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg);
            transform: perspective(1200px) translateY(100%) rotateX(90deg); } }

/* SLIDE PULL OUT */
.slidePullLeftOut {
  -webkit-animation-name: slidePullLeftOut;
  animation-name: slidePullLeftOut; }

@-webkit-keyframes slidePullLeftOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%); } }

@-keyframes slidePullLeftOut {
  25% {
    opacity: .5;
    -transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -transform: perspective(1200px) translateZ(-500px) translateX(-200%); }
  100% {
    opacity: 0;
    -transform: perspective(1200px) translateZ(-500px) translateX(-200%); } }

.slidePullRightOut {
  -webkit-animation-name: slidePullRightOut;
  animation-name: slidePullRightOut; }

@-webkit-keyframes slidePullRightOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%); } }

@keyframes slidePullRightOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px);
            transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%);
            transform: perspective(1200px) translateZ(-500px) translateX(200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%);
            transform: perspective(1200px) translateZ(-500px) translateX(200%); } }

.slidePullUpOut {
  -webkit-animation-name: slidePullUpOut;
  animation-name: slidePullUpOut; }

@-webkit-keyframes slidePullUpOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%); } }

@keyframes slidePullUpOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px);
            transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
            transform: perspective(1200px) translateZ(-500px) translateY(-200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
            transform: perspective(1200px) translateZ(-500px) translateY(-200%); } }

.slidePullDownOut {
  -webkit-animation-name: slidePullDownOut;
  animation-name: slidePullDownOut; }

@-webkit-keyframes slidePullDownOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%); } }

@keyframes slidePullDownOut {
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px);
            transform: perspective(1200px) translateZ(-500px); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
            transform: perspective(1200px) translateZ(-500px) translateY(200%); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
            transform: perspective(1200px) translateZ(-500px) translateY(200%); } }

/* SLIDE PULL IN */
.slidePullLeftIn {
  -webkit-animation-name: slidePullLeftIn;
  animation-name: slidePullLeftIn; }

@-webkit-keyframes slidePullLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px); } }

@keyframes slidePullLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%);
            transform: perspective(1200px) translateZ(-500px) translateX(-200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%);
            transform: perspective(1200px) translateZ(-500px) translateX(-200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px);
            transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

.slidePullRightIn {
  -webkit-animation-name: slidePullRightIn;
  animation-name: slidePullRightIn; }

@-webkit-keyframes slidePullRightIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px); } }

.slidePullUpIn {
  -webkit-animation-name: slidePullUpIn;
  animation-name: slidePullUpIn; }

@-webkit-keyframes slidePullUpIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px); } }

@keyframes slidePullUpIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
            transform: perspective(1200px) translateZ(-500px) translateY(-200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
            transform: perspective(1200px) translateZ(-500px) translateY(-200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px);
            transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

.slidePullDownIn {
  -webkit-animation-name: slidePullDownIn;
  animation-name: slidePullDownIn; }

@-webkit-keyframes slidePullDownIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px); } }

@keyframes slidePullDownIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
            transform: perspective(1200px) translateZ(-500px) translateY(200%); }
  25% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
            transform: perspective(1200px) translateZ(-500px) translateY(200%); }
  75% {
    opacity: .5;
    -webkit-transform: perspective(1200px) translateZ(-500px);
            transform: perspective(1200px) translateZ(-500px); }
  100% {
    -webkit-transform: perspective(1200px);
            transform: perspective(1200px); } }

/* SCALE EDGE IN */
.soEdgeUpIn {
  -webkit-animation-name: soEdgeUpIn;
  animation-name: soEdgeUpIn; }

@-webkit-keyframes soEdgeUpIn {
  from {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: scale(0); }
  to {
    -webkit-transform-origin: 50% 0; } }

@keyframes soEdgeUpIn {
  from {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  to {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0; } }

.soEdgeDownIn {
  -webkit-animation-name: soEdgeDownIn;
  animation-name: soEdgeDownIn; }

@-webkit-keyframes soEdgeDownIn {
  from {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(0); }
  to {
    -webkit-transform-origin: 50% 100%; } }

@keyframes soEdgeDownIn {
  from {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(0);
            transform: scale(0); }
  to {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; } }

.soEdgeLeftIn {
  -webkit-animation-name: soEdgeLeftIn;
  animation-name: soEdgeLeftIn; }

@-webkit-keyframes soEdgeLeftIn {
  from {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: scale(0); }
  to {
    -webkit-transform-origin: 0 50%; } }

@keyframes soEdgeLeftIn {
  from {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scale(0);
            transform: scale(0); }
  to {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%; } }

.soEdgeRightIn {
  -webkit-animation-name: soEdgeRightIn;
  animation-name: soEdgeRightIn; }

@-webkit-keyframes soEdgeRightIn {
  from {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(0); }
  to {
    -webkit-transform-origin: 100% 50%; } }

@keyframes soEdgeRightIn {
  from {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(0);
            transform: scale(0); }
  to {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%; } }

/* SCALE EDGE OUT */
.soEdgeUpOut {
  -webkit-animation-name: soEdgeUpOut;
  animation-name: soEdgeUpOut; }

@-webkit-keyframes soEdgeUpOut {
  from {
    -webkit-transform-origin: 50% 0; }
  to {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: scale(0); } }

@keyframes soEdgeUpOut {
  from {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0; }
  to {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0);
            transform: scale(0); } }

.soEdgeDownOut {
  -webkit-animation-name: soEdgeDownOut;
  animation-name: soEdgeDownOut; }

@-webkit-keyframes soEdgeDownOut {
  from {
    -webkit-transform-origin: 50% 100%; }
  to {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(0); } }

@keyframes soEdgeDownOut {
  from {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%; }
  to {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(0);
            transform: scale(0); } }

.soEdgeLeftOut {
  -webkit-animation-name: soEdgeLeftOut;
  animation-name: soEdgeLeftOut; }

@-webkit-keyframes soEdgeLeftOut {
  from {
    -webkit-transform-origin: 0 50%; }
  to {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: scale(0); } }

@keyframes soEdgeLeftOut {
  from {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%; }
  to {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scale(0);
            transform: scale(0); } }

.soEdgeRightOut {
  -webkit-animation-name: soEdgeRightOut;
  animation-name: soEdgeRightOut; }

@-webkit-keyframes soEdgeRightOut {
  from {
    -webkit-transform-origin: 100% 50%; }
  to {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scale(0); } }

@keyframes soEdgeRightOut {
  from {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%; }
  to {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(0);
            transform: scale(0); } }

/* OTHERS EFFECT */
/* SLIT EFFECT */
.roSlit {
  -webkit-animation-name: roSlit;
  animation-name: roSlit;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes roSlit {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-3000px) rotateY(90deg); }
  50% {
    -webkit-transform: perspective(800px) translateZ(-250px) rotateY(89deg); } }

@keyframes roSlit {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-3000px) rotateY(90deg);
            transform: perspective(800px) translateZ(-3000px) rotateY(90deg); }
  50% {
    -webkit-transform: perspective(800px) translateZ(-250px) rotateY(89deg);
            transform: perspective(800px) translateZ(-250px) rotateY(89deg); } }

/* NEWSPAPER EFFECT */
.newspaperIn {
  -webkit-animation-name: newspaperIn;
  animation-name: newspaperIn; }

@-webkit-keyframes newspaperIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-3000px) rotate(720deg); } }

@keyframes newspaperIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-3000px) rotate(720deg);
            transform: perspective(800px) translateZ(-3000px) rotate(720deg); } }

.newspaperOut {
  -webkit-animation-name: newspaperOut;
  animation-name: newspaperOut; }

@-webkit-keyframes newspaperOut {
  to {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-3000px) rotate(-720deg); } }

@keyframes newspaperOut {
  to {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-3000px) rotate(-720deg);
            transform: perspective(800px) translateZ(-3000px) rotate(-720deg); } }

/* GLUE EFFECT OUT */
.glueLeftOut {
  -webkit-animation: glueLeftOut ease-in;
  animation: glueLeftOut ease-in; }

@-webkit-keyframes glueLeftOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 0 50%;
    /* Fix khong hoat dong trong tab --> */
    -webkit-transform: perspective(800px) rotateY(15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 20% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); } }

@keyframes glueLeftOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(15deg);
            transform: perspective(800px) rotateY(15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 20% 50%;
            transform-origin: 20% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); } }

.glueRightOut {
  -webkit-animation: glueRightOut ease-in;
  animation: glueRightOut ease-in; }

@-webkit-keyframes glueRightOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(-15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 80% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); } }

@keyframes glueRightOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(-15deg);
            transform: perspective(800px) rotateY(-15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 80% 50%;
            transform-origin: 80% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); } }

.glueUpOut {
  -webkit-animation: glueUpOut ease-in;
  animation: glueUpOut ease-in; }

@-webkit-keyframes glueUpOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(-15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 20%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); } }

@keyframes glueUpOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(-15deg);
            transform: perspective(800px) rotateX(-15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 20%;
            transform-origin: 50% 20%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); } }

.glueDownOut {
  -webkit-animation: glueDownOut ease-in;
  animation: glueDownOut ease-in; }

@-webkit-keyframes glueDownOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 80%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); } }

@keyframes glueDownOut {
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(15deg);
            transform: perspective(800px) rotateX(15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 80%;
            transform-origin: 50% 80%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); } }

/* GLUE EFFECT IN */
.glueLeftIn {
  -webkit-animation: glueLeftIn ease-in;
  animation: glueLeftIn ease-in; }

@-webkit-keyframes glueLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 20% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: perspective(800px); } }

@keyframes glueLeftIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 20% 50%;
            transform-origin: 20% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px) rotateY(15deg);
            transform: perspective(800px) rotateY(15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

.glueRightIn {
  -webkit-animation: glueRightIn ease-in;
  animation: glueRightIn ease-in;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%; }

@-webkit-keyframes glueRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 80% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(-15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: perspective(800px); } }

@keyframes glueRightIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 80% 50%;
            transform-origin: 80% 50%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px) rotateY(-15deg);
            transform: perspective(800px) rotateY(-15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

.glueUpIn {
  -webkit-animation: glueUpIn ease-in;
  animation: glueUpIn ease-in; }

@-webkit-keyframes glueUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 20%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(-15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px); } }

@keyframes glueUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 20%;
            transform-origin: 50% 20%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(-15deg);
            transform: perspective(800px) rotateX(-15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

.glueDownIn {
  -webkit-animation: glueDownIn ease-in;
  animation: glueDownIn ease-in; }

@-webkit-keyframes glueDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 80%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(15deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(800px); } }

@keyframes glueDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 80%;
            transform-origin: 50% 80%;
    -webkit-transform: perspective(800px) scale(0.8) translateZ(-500px);
            transform: perspective(800px) scale(0.8) translateZ(-500px); }
  40% {
    opacity: .8;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(15deg);
            transform: perspective(800px) rotateX(15deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

/* SHAKE EFFECTS ALTERNATIVE
    + originally authored by Lionel - https://github.com/elrumordelaluz
    + size gzip: 3.18KB begin --> reduce only 0.8KB;
*/
.code-animated[class*="shake"] {
  -webkit-animation-duration: .1s !important;
  animation-duration: .1s !important;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(2px, -2px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(2px, -1px) rotate(1deg); }
  30% {
    -webkit-transform: translate(-1px, -1px) rotate(-2deg); }
  40% {
    -webkit-transform: translate(-3px, 2px) rotate(-1deg); }
  50% {
    -webkit-transform: translate(2px, 2px) rotate(-2deg); }
  60% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  70% {
    -webkit-transform: translate(1px, -3px) rotate(-2deg); }
  80% {
    -webkit-transform: translate(-3px, -3px) rotate(1deg); }
  90% {
    -webkit-transform: translate(2px, -3px) rotate(-2deg); } }

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(2px, -2px) rotate(-1deg);
            transform: translate(2px, -2px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(2px, -1px) rotate(1deg);
            transform: translate(2px, -1px) rotate(1deg); }
  30% {
    -webkit-transform: translate(-1px, -1px) rotate(-2deg);
            transform: translate(-1px, -1px) rotate(-2deg); }
  40% {
    -webkit-transform: translate(-3px, 2px) rotate(-1deg);
            transform: translate(-3px, 2px) rotate(-1deg); }
  50% {
    -webkit-transform: translate(2px, 2px) rotate(-2deg);
            transform: translate(2px, 2px) rotate(-2deg); }
  60% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg); }
  70% {
    -webkit-transform: translate(1px, -3px) rotate(-2deg);
            transform: translate(1px, -3px) rotate(-2deg); }
  80% {
    -webkit-transform: translate(-3px, -3px) rotate(1deg);
            transform: translate(-3px, -3px) rotate(1deg); }
  90% {
    -webkit-transform: translate(2px, -3px) rotate(-2deg);
            transform: translate(2px, -3px) rotate(-2deg); } }

.code-animated.shakeSlow {
  -webkit-animation-name: shakeSlow;
  animation-name: shakeSlow;
  -webkit-animation-duration: 1s !important;
  animation-duration: 1s !important; }

@-webkit-keyframes shakeSlow {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(-7px, -9px) rotate(1deg); }
  20% {
    -webkit-transform: translate(-2px, 7px) rotate(-3deg); }
  30% {
    -webkit-transform: translate(-3px, 6px) rotate(3deg); }
  40% {
    -webkit-transform: translate(1px, -3px) rotate(-4deg); }
  50% {
    -webkit-transform: translate(2px, -6px) rotate(2deg); }
  60% {
    -webkit-transform: translate(-9px, 6px) rotate(-4deg); }
  70% {
    -webkit-transform: translate(9px, 8px) rotate(-4deg); }
  80% {
    -webkit-transform: translate(-7px, -8px) rotate(3deg); }
  90% {
    -webkit-transform: translate(-6px, -4px) rotate(-2deg); } }

@keyframes shakeSlow {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(-7px, -9px) rotate(1deg);
            transform: translate(-7px, -9px) rotate(1deg); }
  20% {
    -webkit-transform: translate(-2px, 7px) rotate(-3deg);
            transform: translate(-2px, 7px) rotate(-3deg); }
  30% {
    -webkit-transform: translate(-3px, 6px) rotate(3deg);
            transform: translate(-3px, 6px) rotate(3deg); }
  40% {
    -webkit-transform: translate(1px, -3px) rotate(-4deg);
            transform: translate(1px, -3px) rotate(-4deg); }
  50% {
    -webkit-transform: translate(2px, -6px) rotate(2deg);
            transform: translate(2px, -6px) rotate(2deg); }
  60% {
    -webkit-transform: translate(-9px, 6px) rotate(-4deg);
            transform: translate(-9px, 6px) rotate(-4deg); }
  70% {
    -webkit-transform: translate(9px, 8px) rotate(-4deg);
            transform: translate(9px, 8px) rotate(-4deg); }
  80% {
    -webkit-transform: translate(-7px, -8px) rotate(3deg);
            transform: translate(-7px, -8px) rotate(3deg); }
  90% {
    -webkit-transform: translate(-6px, -4px) rotate(-2deg);
            transform: translate(-6px, -4px) rotate(-2deg); } }

.shakeLittle {
  -webkit-animation-name: shakeLittle;
  animation-name: shakeLittle; }

@-webkit-keyframes shakeLittle {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(-1px, -1px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(0, -1px) rotate(-1deg); }
  30% {
    -webkit-transform: translate(-1px, -1px) rotate(0); }
  40% {
    -webkit-transform: translate(0, 0) rotate(0); }
  50% {
    -webkit-transform: translate(0, -1px) rotate(-1deg); }
  60% {
    -webkit-transform: translate(-1px, 0) rotate(-1deg); }
  70% {
    -webkit-transform: translate(0, 0) rotate(-1deg); }
  80% {
    -webkit-transform: translate(-1px, 0) rotate(0); }
  90% {
    -webkit-transform: translate(0, -1px) rotate(-1deg); } }

@keyframes shakeLittle {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(-1px, -1px) rotate(-1deg);
            transform: translate(-1px, -1px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(0, -1px) rotate(-1deg);
            transform: translate(0, -1px) rotate(-1deg); }
  30% {
    -webkit-transform: translate(-1px, -1px) rotate(0);
            transform: translate(-1px, -1px) rotate(0); }
  40% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  50% {
    -webkit-transform: translate(0, -1px) rotate(-1deg);
            transform: translate(0, -1px) rotate(-1deg); }
  60% {
    -webkit-transform: translate(-1px, 0) rotate(-1deg);
            transform: translate(-1px, 0) rotate(-1deg); }
  70% {
    -webkit-transform: translate(0, 0) rotate(-1deg);
            transform: translate(0, 0) rotate(-1deg); }
  80% {
    -webkit-transform: translate(-1px, 0) rotate(0);
            transform: translate(-1px, 0) rotate(0); }
  90% {
    -webkit-transform: translate(0, -1px) rotate(-1deg);
            transform: translate(0, -1px) rotate(-1deg); } }

.shakeHard {
  -webkit-animation-name: shakeHard;
  animation-name: shakeHard; }

@-webkit-keyframes shakeHard {
  0% {
    -webkit-transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(-7px, 6px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(7px, -8px) rotate(1deg); }
  30% {
    -webkit-transform: translate(-3px, 7px) rotate(2deg); }
  40% {
    -webkit-transform: translate(-3px, -7px) rotate(1deg); }
  50% {
    -webkit-transform: translate(9px, -2px) rotate(3deg); }
  60% {
    -webkit-transform: translate(5px, -1px) rotate(-2deg); }
  70% {
    -webkit-transform: translate(0, 6px) rotate(-4deg); }
  80% {
    -webkit-transform: translate(7px, 9px) rotate(-1deg); }
  90% {
    -webkit-transform: translate(-10px, 9px) rotate(2deg); } }

@keyframes shakeHard {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  10% {
    -webkit-transform: translate(-7px, 6px) rotate(-1deg);
            transform: translate(-7px, 6px) rotate(-1deg); }
  20% {
    -webkit-transform: translate(7px, -8px) rotate(1deg);
            transform: translate(7px, -8px) rotate(1deg); }
  30% {
    -webkit-transform: translate(-3px, 7px) rotate(2deg);
            transform: translate(-3px, 7px) rotate(2deg); }
  40% {
    -webkit-transform: translate(-3px, -7px) rotate(1deg);
            transform: translate(-3px, -7px) rotate(1deg); }
  50% {
    -webkit-transform: translate(9px, -2px) rotate(3deg);
            transform: translate(9px, -2px) rotate(3deg); }
  60% {
    -webkit-transform: translate(5px, -1px) rotate(-2deg);
            transform: translate(5px, -1px) rotate(-2deg); }
  70% {
    -webkit-transform: translate(0, 6px) rotate(-4deg);
            transform: translate(0, 6px) rotate(-4deg); }
  80% {
    -webkit-transform: translate(7px, 9px) rotate(-1deg);
            transform: translate(7px, 9px) rotate(-1deg); }
  90% {
    -webkit-transform: translate(-10px, 9px) rotate(2deg);
            transform: translate(-10px, 9px) rotate(2deg); } }

.shakeHor {
  -webkit-animation-name: shakeHor;
  animation-name: shakeHor; }

@-webkit-keyframes shakeHor {
  0%, 100% {
    -webkit-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-8px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(8px); } }

@keyframes shakeHor {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px); } }

.shakeVer {
  -webkit-animation-name: shakeVer;
  animation-name: shakeVer; }

@-webkit-keyframes shakeVer {
  0%, 100% {
    -webkit-transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(-8px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateY(8px); } }

@keyframes shakeVer {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px); } }

.shakeRotate {
  -webkit-animation-name: shakeRotate;
  animation-name: shakeRotate; }

@-webkit-keyframes shakeRotate {
  0%, 100% {
    -webkit-transform: rotate(0); }
  15%, 45%, 75% {
    -webkit-transform: rotate(-5deg); }
  30%, 60%, 90% {
    -webkit-transform: rotate(5deg); } }

@keyframes shakeRotate {
  0%, 100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  15%, 45%, 75% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  30%, 60%, 90% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); } }

.code-animated.shakeOpacity {
  -webkit-animation-name: shakeOpacity;
  animation-name: shakeOpacity;
  -webkit-animation-duration: .2s !important;
  animation-duration: .2s !important; }

@-webkit-keyframes shakeOpacity {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
    opacity: .2; }
  20% {
    -webkit-transform: translate(-5px, -2px) rotate(2deg);
    opacity: .9; }
  40% {
    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
    opacity: .4; }
  60% {
    -webkit-transform: translate(-5px, -4px) rotate(-1deg);
    opacity: 0; }
  80% {
    -webkit-transform: translate(-5px, 2px) rotate(1deg);
    opacity: .6; } }

@keyframes shakeOpacity {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
    opacity: .2; }
  20% {
    -webkit-transform: translate(-5px, -2px) rotate(2deg);
            transform: translate(-5px, -2px) rotate(2deg);
    opacity: .9; }
  40% {
    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
            transform: translate(-1px, 2px) rotate(-3deg);
    opacity: .4; }
  60% {
    -webkit-transform: translate(-5px, -4px) rotate(-1deg);
            transform: translate(-5px, -4px) rotate(-1deg);
    opacity: 0; }
  80% {
    -webkit-transform: translate(-5px, 2px) rotate(1deg);
            transform: translate(-5px, 2px) rotate(1deg);
    opacity: .6; } }

.shakeCrazy {
  -webkit-animation-name: shakeCrazy;
  animation-name: shakeCrazy; }

@-webkit-keyframes shakeCrazy {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
    opacity: .1; }
  20% {
    -webkit-transform: translate(-19px, -15px) rotate(-8deg);
    opacity: .5; }
  40% {
    -webkit-transform: translate(15px, 5px) rotate(6deg);
    opacity: .4; }
  60% {
    -webkit-transform: translate(-12px, 11px) rotate(-7deg);
    opacity: 0; }
  80% {
    -webkit-transform: translate(-10px, -13px) rotate(5deg);
    opacity: .6; } }

@keyframes shakeCrazy {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
    opacity: .1; }
  20% {
    -webkit-transform: translate(-19px, -15px) rotate(-8deg);
            transform: translate(-19px, -15px) rotate(-8deg);
    opacity: .5; }
  40% {
    -webkit-transform: translate(15px, 5px) rotate(6deg);
            transform: translate(15px, 5px) rotate(6deg);
    opacity: .4; }
  60% {
    -webkit-transform: translate(-12px, 11px) rotate(-7deg);
            transform: translate(-12px, 11px) rotate(-7deg);
    opacity: 0; }
  80% {
    -webkit-transform: translate(-10px, -13px) rotate(5deg);
            transform: translate(-10px, -13px) rotate(5deg);
    opacity: .6; } }

/* FAN EFFECT */
.fanBehindDown {
  -webkit-animation-name: fanBehindDown;
  animation-name: fanBehindDown; }

@-webkit-keyframes fanBehindDown {
  0%, 49%, 51%, 99% {
    -webkit-transform-origin: -50% -50%; }
  50% {
    z-index: 9999;
    opacity: .8;
    -webkit-transform: rotate(30deg); }
  100% {
    opacity: 0;
    -webkit-transform: rotate(0deg); } }

@keyframes fanBehindDown {
  0%, 49%, 51%, 99% {
    -webkit-transform-origin: -50% -50%;
            transform-origin: -50% -50%; }
  50% {
    z-index: 9999;
    opacity: .8;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg); }
  100% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

.fanBehindUp {
  -webkit-animation-name: fanBehindUp;
  animation-name: fanBehindUp; }

@-webkit-keyframes fanBehindUp {
  0%, 49%, 51%, 99% {
    -webkit-transform-origin: -50% -50%; }
  50% {
    z-index: 9999;
    opacity: .8;
    -webkit-transform: rotate(-20deg); }
  100% {
    opacity: 0;
    -webkit-transform: rotate(0deg); } }

@keyframes fanBehindUp {
  0%, 49%, 51%, 99% {
    -webkit-transform-origin: -50% -50%;
            transform-origin: -50% -50%; }
  50% {
    z-index: 9999;
    opacity: .8;
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg); }
  100% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

.fanFrontUp {
  -webkit-animation-name: fanFrontUp;
  animation-name: fanFrontUp; }

@-webkit-keyframes fanFrontUp {
  0%, 49%, 52%, 99% {
    -webkit-transform-origin: -50% -50%; }
  50% {
    -webkit-transform: rotate(-20deg); }
  51% {
    -webkit-transform: rotate(-20deg);
    z-index: 9999; }
  100% {
    -webkit-transform: rotate(0deg);
    z-index: 9999; } }

@keyframes fanFrontUp {
  0%, 49%, 52%, 99% {
    -webkit-transform-origin: -50% -50%;
            transform-origin: -50% -50%; }
  50% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg); }
  51% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
    z-index: 9999; }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    z-index: 9999; } }

.fanFrontDown {
  -webkit-animation-name: fanFrontDown;
  animation-name: fanFrontDown; }

@-webkit-keyframes fanFrontDown {
  0%, 49%, 52%, 99% {
    -webkit-transform-origin: -50% -50%; }
  50% {
    -webkit-transform: rotate(30deg); }
  51% {
    -webkit-transform: rotate(30deg);
    z-index: 9999; }
  100% {
    -webkit-transform: rotate(0deg);
    z-index: 9999; } }

@keyframes fanFrontDown {
  0%, 49%, 52%, 99% {
    -webkit-transform-origin: -50% -50%;
            transform-origin: -50% -50%; }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg); }
  51% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    z-index: 9999; }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    z-index: 9999; } }

/* MOVE BEHIND */
.moveLeftBehind {
  -webkit-animation-name: moveLeftBehind;
  animation-name: moveLeftBehind; }

@-webkit-keyframes moveLeftBehind {
  0% {
    -webkit-transform: perspective(800px); }
  50% {
    z-index: 9999;
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-10px); } }

@keyframes moveLeftBehind {
  0% {
    -webkit-transform: perspective(800px);
            transform: perspective(800px); }
  50% {
    z-index: 9999;
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg);
            transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-10px);
            transform: perspective(800px) translateZ(-10px); } }

.moveRightBehind {
  -webkit-animation-name: moveRightBehind;
  animation-name: moveRightBehind; }

@-webkit-keyframes moveRightBehind {
  0% {
    -webkit-transform: perspective(800px); }
  50% {
    z-index: 9999;
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-10px); } }

@keyframes moveRightBehind {
  0% {
    -webkit-transform: perspective(800px);
            transform: perspective(800px); }
  50% {
    z-index: 9999;
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg);
            transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-10px);
            transform: perspective(800px) translateZ(-10px); } }

.moveLeftFront {
  -webkit-animation-name: moveLeftFront;
  animation-name: moveLeftFront; }

@-webkit-keyframes moveLeftFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px); }
  50% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg); }
  51% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px); } }

@keyframes moveLeftFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); }
  50% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg);
            transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg); }
  51% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg);
            transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

.moveRightFront {
  -webkit-animation-name: moveRightFront;
  animation-name: moveRightFront; }

@-webkit-keyframes moveRightFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px); }
  50% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg); }
  51% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px); } }

@keyframes moveRightFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); }
  50% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg);
            transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg); }
  51% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg);
            transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

/* MOVE SHORT BEHIND */
.moveShortLeftBehind {
  -webkit-animation-name: moveShortLeftBehind;
  animation-name: moveShortLeftBehind; }

@-webkit-keyframes moveShortLeftBehind {
  0% {
    -webkit-transform: perspective(800px); }
  40% {
    opacity: 1;
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px); } }

@keyframes moveShortLeftBehind {
  0% {
    -webkit-transform: perspective(800px);
            transform: perspective(800px); }
  40% {
    opacity: 1;
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg);
            transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px);
            transform: perspective(800px) translateZ(-400px); } }

.moveShortRightBehind {
  -webkit-animation-name: moveShortRightBehind;
  animation-name: moveShortRightBehind; }

@-webkit-keyframes moveShortRightBehind {
  0% {
    -webkit-transform: perspective(800px); }
  40% {
    opacity: 1;
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px); } }

@keyframes moveShortRightBehind {
  0% {
    -webkit-transform: perspective(800px);
            transform: perspective(800px); }
  40% {
    opacity: 1;
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg);
            transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg); }
  100% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px);
            transform: perspective(800px) translateZ(-400px); } }

.moveShortLeftFront {
  -webkit-animation-name: moveShortLeftFront;
  animation-name: moveShortLeftFront; }

@-webkit-keyframes moveShortLeftFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px); }
  40% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg); }
  41% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px); } }

@keyframes moveShortLeftFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px);
            transform: perspective(800px) translateZ(-400px); }
  40% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg);
            transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg); }
  41% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg);
            transform: perspective(800px) translateX(-40%) scale(0.8) rotateY(20deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

.moveShortRightFront {
  -webkit-animation-name: moveShortRightFront;
  animation-name: moveShortRightFront; }

@-webkit-keyframes moveShortRightFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px); }
  40% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg); }
  41% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px); } }

@keyframes moveShortRightFront {
  0% {
    opacity: 0;
    -webkit-transform: perspective(800px) translateZ(-400px);
            transform: perspective(800px) translateZ(-400px); }
  40% {
    opacity: 1;
    -webkit-transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg);
            transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg); }
  41% {
    z-index: 9999;
    -webkit-transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg);
            transform: perspective(800px) translateX(40%) scale(0.8) rotateY(-20deg); }
  100% {
    z-index: 9999;
    -webkit-transform: perspective(800px);
            transform: perspective(800px); } }

/* Table of effect combination - ISSUE 1
============================================================== */
/* MOVE EFFECTS
-------------------------------------------------------------- */
/* MOVE HOR EFFECTS */
.codefx-moveHor.code-viewport {
  overflow: hidden !important; }

.codefx-moveHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.codefx-moveHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideOneLeftOut;
  animation-name: slideOneLeftOut; }

.codefx-moveHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.codefx-moveHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideOneRightOut;
  animation-name: slideOneRightOut; }

/* MOVE VER EFFECTS */
.codefx-moveVer.code-viewport {
  overflow: hidden !important; }

.codefx-moveVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

.codefx-moveVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideOneUpOut;
  animation-name: slideOneUpOut; }

.codefx-moveVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.codefx-moveVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideOneDownOut;
  animation-name: slideOneDownOut; }

/* FADE EFFECTS
-------------------------------------------------------------- */
/* FADE BASIC EFFECT */
.codefx-fade .code-slideIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

.codefx-fade .code-slideOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

/* FADE HOR EFFECT */
.codefx-fadeHor.code-viewport {
  overflow: hidden !important; }

.codefx-fadeHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.codefx-fadeHor.code-slideNext .code-slideOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

.codefx-fadeHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.codefx-fadeHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

/* FADE VER EFFECT */
.codefx-fadeVer.code-viewport {
  overflow: hidden !important; }

.codefx-fadeVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

.codefx-fadeVer.code-slideNext .code-slideOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

.codefx-fadeVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.codefx-fadeVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

/* SCALE EFFECTS
-------------------------------------------------------------- */
/* SCALE OUT HOR EFFECT */
.codefx-scaleOutHor.code-viewport {
  overflow: hidden !important; }

.codefx-scaleOutHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.codefx-scaleOutHor.code-slideNext .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

.codefx-scaleOutHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.codefx-scaleOutHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* SCALE OUT VER EFFECT */
.codefx-scaleOutVer.code-viewport {
  overflow: hidden !important; }

.codefx-scaleOutVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

.codefx-scaleOutVer.code-slideNext .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

.codefx-scaleOutVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.codefx-scaleOutVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* SCALE IN HOR EFFECT */
.codefx-scaleInHor.code-viewport {
  overflow: hidden !important; }

.codefx-scaleInHor.code-slideNext .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-scaleInHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideOneLeftOut;
  animation-name: slideOneLeftOut; }

.codefx-scaleInHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-scaleInHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideOneRightOut;
  animation-name: slideOneRightOut; }

/* SCALE IN VER EFFECT */
.codefx-scaleInVer.code-viewport {
  overflow: hidden !important; }

.codefx-scaleInVer.code-slideNext .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-scaleInVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideOneUpOut;
  animation-name: slideOneUpOut; }

.codefx-scaleInVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-scaleInVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideOneDownOut;
  animation-name: slideOneDownOut; }

/* SCALE PULSE EFFECT */
.codefx-scalePulse.code-slideNext .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-scalePulse.code-slideNext .code-slideOut {
  -webkit-animation-name: pushOut;
  animation-name: pushOut; }

.codefx-scalePulse.code-slidePrev .code-slideIn {
  -webkit-animation-name: pushIn;
  animation-name: pushIn; }

.codefx-scalePulse.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* SCALE WAVE EFFECT */
.codefx-scaleWave .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-scaleWave .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* ROTATE EFFECTS
-------------------------------------------------------------- */
/* GLUE OUT HOR EFFECT */
.codefx-glueHor {
  overflow: hidden !important; }

.codefx-glueHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.codefx-glueHor.code-slideNext .code-slideOut {
  -webkit-animation-name: glueLeftOut;
  animation-name: glueLeftOut; }

.codefx-glueHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.codefx-glueHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: glueRightOut;
  animation-name: glueRightOut; }

/* GLUE OUT VER EFFECT */
.codefx-glueVer {
  overflow: hidden !important; }

.codefx-glueVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

.codefx-glueVer.code-slideNext .code-slideOut {
  -webkit-animation-name: glueUpOut;
  animation-name: glueUpOut; }

.codefx-glueVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.codefx-glueVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: glueDownOut;
  animation-name: glueDownOut; }

/* FLIT HOR EFFECT */
.codefx-flitHor.code-slideNext .code-slideIn {
  -webkit-animation-name: roFlitLeftIn;
  animation-name: roFlitLeftIn; }

.codefx-flitHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roFlitRightOut;
  animation-name: roFlitRightOut; }

.codefx-flitHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: roFlitRightIn;
  animation-name: roFlitRightIn; }

.codefx-flitHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roFlitLeftOut;
  animation-name: roFlitLeftOut; }

/* FLIT VER EFFECT */
.codefx-flitVer.code-slideNext .code-slideIn {
  -webkit-animation-name: roFlitDownIn;
  animation-name: roFlitDownIn; }

.codefx-flitVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roFlitUpOut;
  animation-name: roFlitUpOut; }

.codefx-flitVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: roFlitUpIn;
  animation-name: roFlitUpIn; }

.codefx-flitVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roFlitDownOut;
  animation-name: roFlitDownOut; }

/* HINGE EFFECT */
.codefx-hinge.code-slideNext .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-hinge.code-slideNext .code-slideOut {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

.codefx-hinge.code-slidePrev .code-slideIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

.codefx-hinge.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* ROLL EFFECT */
.codefx-roll.code-slideNext .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-roll.code-slideNext .code-slideOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

.codefx-roll.code-slidePrev .code-slideIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

.codefx-roll.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* NEWSPAPER EFFECT */
.codefx-newspaper.code-slideNext .code-slideIn {
  -webkit-animation-name: newspaperIn;
  animation-name: newspaperIn; }

.codefx-newspaper.code-slideNext .code-slideOut {
  -webkit-animation-name: pushOut;
  animation-name: pushOut; }

.codefx-newspaper.code-slidePrev .code-slideIn {
  -webkit-animation-name: pushIn;
  animation-name: pushIn; }

.codefx-newspaper.code-slidePrev .code-slideOut {
  -webkit-animation-name: newspaperOut;
  animation-name: newspaperOut; }

/* PUSHFROM HOR EFFECT */
.codefx-pushFromHor.code-viewport {
  overflow: hidden !important; }

.codefx-pushFromHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.codefx-pushFromHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roEdgeLeftOut;
  animation-name: roEdgeLeftOut; }

.codefx-pushFromHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.codefx-pushFromHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roEdgeRightOut;
  animation-name: roEdgeRightOut; }

/* PUSHFROM VER EFFECT */
.codefx-pushFromVer.code-viewport {
  overflow: hidden !important; }

.codefx-pushFromVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

.codefx-pushFromVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roEdgeUpOut;
  animation-name: roEdgeUpOut; }

.codefx-pushFromVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.codefx-pushFromVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roEdgeDownOut;
  animation-name: roEdgeDownOut; }

/* ROTATE EDGE HOR EFFECT */
.codefx-roEdgeHor.code-slideNext .code-slideIn {
  -webkit-animation-name: roEdgeRightIn;
  animation-name: roEdgeRightIn; }

.codefx-roEdgeHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roEdgeLeftOut;
  animation-name: roEdgeLeftOut; }

.codefx-roEdgeHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: roEdgeLeftIn;
  animation-name: roEdgeLeftIn; }

.codefx-roEdgeHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roEdgeRightOut;
  animation-name: roEdgeRightOut; }

/* ROTATE EDGE VER EFFECT */
.codefx-roEdgeVer.code-slideNext .code-slideIn {
  -webkit-animation-name: roEdgeDownIn;
  animation-name: roEdgeDownIn; }

.codefx-roEdgeVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roEdgeUpOut;
  animation-name: roEdgeUpOut; }

.codefx-roEdgeVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: roEdgeUpIn;
  animation-name: roEdgeUpIn; }

.codefx-roEdgeVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roEdgeDownOut;
  animation-name: roEdgeDownOut; }

/* FOLDFROM HOR EFFECT */
.codefx-foldFromHor.code-viewport {
  overflow: hidden !important; }

.codefx-foldFromHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneRightIn;
  animation-name: slideOneRightIn; }

.codefx-foldFromHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roFoldLeftOut;
  animation-name: roFoldLeftOut; }

.codefx-foldFromHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneLeftIn;
  animation-name: slideOneLeftIn; }

.codefx-foldFromHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roFoldRightOut;
  animation-name: roFoldRightOut; }

/* FOLDFROM VER EFFECT */
.codefx-foldFromVer.code-viewport {
  overflow: hidden !important; }

.codefx-foldFromVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideOneDownIn;
  animation-name: slideOneDownIn; }

.codefx-foldFromVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roFoldUpOut;
  animation-name: roFoldUpOut; }

.codefx-foldFromVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideOneUpIn;
  animation-name: slideOneUpIn; }

.codefx-foldFromVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roFoldDownOut;
  animation-name: roFoldDownOut; }

/* FOLD HOR EFFECT */
.codefx-foldHor.code-slideNext .code-slideIn {
  -webkit-animation-name: roFoldRightIn;
  animation-name: roFoldRightIn; }

.codefx-foldHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roFoldLeftOut;
  animation-name: roFoldLeftOut; }

.codefx-foldHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: roFoldLeftIn;
  animation-name: roFoldLeftIn; }

.codefx-foldHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roFoldRightOut;
  animation-name: roFoldRightOut; }

/* FOLD VER EFFECT */
.codefx-foldVer.code-slideNext .code-slideIn {
  -webkit-animation-name: roFoldDownIn;
  animation-name: roFoldDownIn; }

.codefx-foldVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roFoldUpOut;
  animation-name: roFoldUpOut; }

.codefx-foldVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: roFoldUpIn;
  animation-name: roFoldUpIn; }

.codefx-foldVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roFoldDownOut;
  animation-name: roFoldDownOut; }

/* ROOM HOR EFFECT */
.codefx-roomHor.code-viewport {
  overflow: hidden !important; }

.codefx-roomHor.code-slideNext .code-slideIn {
  -webkit-animation-name: roRoomRightIn;
  animation-name: roRoomRightIn; }

.codefx-roomHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roRoomLeftOut;
  animation-name: roRoomLeftOut; }

.codefx-roomHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: roRoomLeftIn;
  animation-name: roRoomLeftIn; }

.codefx-roomHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roRoomRightOut;
  animation-name: roRoomRightOut; }

/* ROOM VER EFFECT */
.codefx-roomVer.code-viewport {
  overflow: hidden !important; }

.codefx-roomVer.code-slideNext .code-slideIn {
  -webkit-animation-name: roRoomDownIn;
  animation-name: roRoomDownIn; }

.codefx-roomVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roRoomUpOut;
  animation-name: roRoomUpOut; }

.codefx-roomVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: roRoomUpIn;
  animation-name: roRoomUpIn; }

.codefx-roomVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roRoomDownOut;
  animation-name: roRoomDownOut; }

/* SLIDE EFFECTS
-------------------------------------------------------------- */
.codefx-slide.code-slideNext .code-slideIn {
  -webkit-animation-name: slidePullRightIn;
  animation-name: slidePullRightIn; }

.codefx-slide.code-slideNext .code-slideOut {
  -webkit-animation-name: slidePullLeftOut;
  animation-name: slidePullLeftOut; }

.codefx-slide.code-slidePrev .code-slideIn {
  -webkit-animation-name: slidePullLeftIn;
  animation-name: slidePullLeftIn; }

.codefx-slide.code-slidePrev .code-slideOut {
  -webkit-animation-name: slidePullRightOut;
  animation-name: slidePullRightOut; }

/* Table of effect combination - ISSUE 2
============================================================== */
/* FALL EFFECT */
.codefx-fall.code-slideNext .code-slideIn {
  -webkit-animation-name: pullIn;
  animation-name: pullIn; }

.codefx-fall.code-slideNext .code-slideOut {
  -webkit-animation-name: slideFadeDownOut;
  animation-name: slideFadeDownOut; }

.codefx-fall.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideFadeUpIn;
  animation-name: slideFadeUpIn; }

.codefx-fall.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* PULSE SHORT */
.codefx-pulseShort.code-slideNext .code-slideIn {
  -webkit-animation-name: roShortPullRightIn;
  animation-name: roShortPullRightIn; }

.codefx-pulseShort.code-slideNext .code-slideOut {
  -webkit-animation-name: roShortPushRightOut;
  animation-name: roShortPushRightOut; }

.codefx-pulseShort.code-slidePrev .code-slideIn {
  -webkit-animation-name: roShortPushLeftIn;
  animation-name: roShortPushLeftIn; }

.codefx-pulseShort.code-slidePrev .code-slideOut {
  -webkit-animation-name: roShortPullLeftOut;
  animation-name: roShortPullLeftOut; }

/* ROTATE SOFT */
.codefx-roSoft.code-slideNext .code-slideIn {
  -webkit-animation-name: slideLeftIn;
  animation-name: slideLeftIn; }

.codefx-roSoft.code-slideNext .code-slideOut {
  -webkit-animation-name: roSoftRightOut;
  animation-name: roSoftRightOut; }

.codefx-roSoft.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideRightIn;
  animation-name: slideRightIn; }

.codefx-roSoft.code-slidePrev .code-slideOut {
  -webkit-animation-name: roSoftLeftOut;
  animation-name: roSoftLeftOut; }

/* ROTATE DEAL */
.codefx-roDeal.code-slideNext .code-slideIn {
  -webkit-animation-name: roSoftLeftIn;
  animation-name: roSoftLeftIn; }

.codefx-roDeal.code-slideNext .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

.codefx-roDeal.code-slidePrev .code-slideIn {
  -webkit-animation-name: roSoftRightIn;
  animation-name: roSoftRightIn; }

.codefx-roDeal.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullOut;
  animation-name: pullOut; }

/* WHEEL HOR */
.codefx-wheelHor.code-slideNext .code-slideIn {
  -webkit-animation-name: roWheelLeftIn;
  animation-name: roWheelLeftIn; }

.codefx-wheelHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roWheelRightOut;
  animation-name: roWheelRightOut; }

.codefx-wheelHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: roWheelRightIn;
  animation-name: roWheelRightIn; }

.codefx-wheelHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roWheelLeftOut;
  animation-name: roWheelLeftOut; }

/* WHEEL VER */
.codefx-wheelVer.code-slideNext .code-slideIn {
  -webkit-animation-name: roWheelUpIn;
  animation-name: roWheelUpIn; }

.codefx-wheelVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roWheelDownOut;
  animation-name: roWheelDownOut; }

.codefx-wheelVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: roWheelDownIn;
  animation-name: roWheelDownIn; }

.codefx-wheelVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roWheelUpOut;
  animation-name: roWheelUpOut; }

/* SNAKE HOR */
.codefx-snakeHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideShakeLeftIn;
  animation-name: slideShakeLeftIn; }

.codefx-snakeHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideShakeRightOut;
  animation-name: slideShakeRightOut; }

.codefx-snakeHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideShakeRightIn;
  animation-name: slideShakeRightIn; }

.codefx-snakeHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideShakeLeftOut;
  animation-name: slideShakeLeftOut; }

/* SNAKE VER */
.codefx-snakeVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideShakeUpIn;
  animation-name: slideShakeUpIn; }

.codefx-snakeVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideShakeDownOut;
  animation-name: slideShakeDownOut; }

.codefx-snakeVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideShakeDownIn;
  animation-name: slideShakeDownIn; }

.codefx-snakeVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideShakeUpOut;
  animation-name: slideShakeUpOut; }

/* SHUFFLE */
.codefx-shuffle.code-slideNext .code-slideIn {
  -webkit-animation-name: fanFrontUp;
  animation-name: fanFrontUp; }

.codefx-shuffle.code-slideNext .code-slideOut {
  -webkit-animation-name: fanBehindDown;
  animation-name: fanBehindDown; }

.codefx-shuffle.code-slidePrev .code-slideIn {
  -webkit-animation-name: fanFrontDown;
  animation-name: fanFrontDown; }

.codefx-shuffle.code-slidePrev .code-slideOut {
  -webkit-animation-name: fanBehindUp;
  animation-name: fanBehindUp; }

/* BROWSE LEFT */
.codefx-browseLeft.code-slideNext .code-slideIn {
  -webkit-animation-name: pullBounceIn;
  animation-name: pullBounceIn; }

.codefx-browseLeft.code-slideNext .code-slideOut {
  -webkit-animation-name: moveLeftBehind;
  animation-name: moveLeftBehind; }

.codefx-browseLeft.code-slidePrev .code-slideIn {
  -webkit-animation-name: moveLeftFront;
  animation-name: moveLeftFront; }

.codefx-browseLeft.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullBounceOut;
  animation-name: pullBounceOut; }

/* BROWSE RIGHT */
.codefx-browseRight.code-slideNext .code-slideIn {
  -webkit-animation-name: pullBounceIn;
  animation-name: pullBounceIn; }

.codefx-browseRight.code-slideNext .code-slideOut {
  -webkit-animation-name: moveRightBehind;
  animation-name: moveRightBehind; }

.codefx-browseRight.code-slidePrev .code-slideIn {
  -webkit-animation-name: moveRightFront;
  animation-name: moveRightFront; }

.codefx-browseRight.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullBounceOut;
  animation-name: pullBounceOut; }

/* SLIDE BEHIND */
.codefx-slideBehind.code-slideNext .code-slideIn {
  -webkit-animation-name: moveShortRightFront;
  animation-name: moveShortRightFront; }

.codefx-slideBehind.code-slideNext .code-slideOut {
  -webkit-animation-name: moveShortLeftBehind;
  animation-name: moveShortLeftBehind; }

.codefx-slideBehind.code-slidePrev .code-slideIn {
  -webkit-animation-name: moveShortLeftFront;
  animation-name: moveShortLeftFront; }

.codefx-slideBehind.code-slidePrev .code-slideOut {
  -webkit-animation-name: moveShortRightBehind;
  animation-name: moveShortRightBehind; }

/* VACUUM HOR */
.codefx-vacuumHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideScaleRightIn;
  animation-name: slideScaleRightIn; }

.codefx-vacuumHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideScaleLeftOut;
  animation-name: slideScaleLeftOut; }

.codefx-vacuumHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideScaleLeftIn;
  animation-name: slideScaleLeftIn; }

.codefx-vacuumHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideScaleRightOut;
  animation-name: slideScaleRightOut; }

/* VACUUM VER */
.codefx-vacuumVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideScaleDownIn;
  animation-name: slideScaleDownIn; }

.codefx-vacuumVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideScaleUpOut;
  animation-name: slideScaleUpOut; }

.codefx-vacuumVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideScaleUpIn;
  animation-name: slideScaleUpIn; }

.codefx-vacuumVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideScaleDownOut;
  animation-name: slideScaleDownOut; }

/* Table of effect combination - ISSUE 3
============================================================== */
/* SCALE SOFT */
.codefx-scaleSoft.code-slideNext .code-slideIn {
  -webkit-animation-name: pullSoftIn;
  animation-name: pullSoftIn; }

.codefx-scaleSoft.code-slideNext .code-slideOut {
  -webkit-animation-name: pushSoftOut;
  animation-name: pushSoftOut; }

.codefx-scaleSoft.code-slidePrev .code-slideIn {
  -webkit-animation-name: pushSoftIn;
  animation-name: pushSoftIn; }

.codefx-scaleSoft.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullSoftOut;
  animation-name: pullSoftOut; }

/* SNAP HOR */
.codefx-snapHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideRightIn;
  animation-name: slideRightIn; }

.codefx-snapHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideShortLeftOut;
  animation-name: slideShortLeftOut; }

.codefx-snapHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideLeftIn;
  animation-name: slideLeftIn; }

.codefx-snapHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideShortRightOut;
  animation-name: slideShortRightOut; }

/* SNAP VER */
.codefx-snapVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideDownIn;
  animation-name: slideDownIn; }

.codefx-snapVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideShortUpOut;
  animation-name: slideShortUpOut; }

.codefx-snapVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideUpIn;
  animation-name: slideUpIn; }

.codefx-snapVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideShortDownOut;
  animation-name: slideShortDownOut; }

/* LET IN HOR */
.codefx-letInHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideRightIn;
  animation-name: slideRightIn; }

.codefx-letInHor.code-slideNext .code-slideOut {
  -webkit-animation-name: roEdgeSoftLeftOut;
  animation-name: roEdgeSoftLeftOut; }

.codefx-letInHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideLeftIn;
  animation-name: slideLeftIn; }

.codefx-letInHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: roEdgeSoftRightOut;
  animation-name: roEdgeSoftRightOut; }

/* LET IN VER */
.codefx-letInVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideDownIn;
  animation-name: slideDownIn; }

.codefx-letInVer.code-slideNext .code-slideOut {
  -webkit-animation-name: roEdgeSoftUpOut;
  animation-name: roEdgeSoftUpOut; }

.codefx-letInVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideUpIn;
  animation-name: slideUpIn; }

.codefx-letInVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: roEdgeSoftDownOut;
  animation-name: roEdgeSoftDownOut; }

/* STICK HOR */
.codefx-stickHor.code-slideNext .code-slideIn {
  -webkit-animation-name: glueLeftIn;
  animation-name: glueLeftIn; }

.codefx-stickHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideRightOut;
  animation-name: slideRightOut; }

.codefx-stickHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: glueRightIn;
  animation-name: glueRightIn; }

.codefx-stickHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideLeftOut;
  animation-name: slideLeftOut; }

/* STICK VER */
.codefx-stickVer.code-slideNext .code-slideIn {
  -webkit-animation-name: glueUpIn;
  animation-name: glueUpIn; }

.codefx-stickVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideDownOut;
  animation-name: slideDownOut; }

.codefx-stickVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: glueDownIn;
  animation-name: glueDownIn; }

.codefx-stickVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideUpOut;
  animation-name: slideUpOut; }

/* GROWTH HOR */
.codefx-growthHor.code-slideNext .code-slideIn {
  -webkit-animation-name: soEdgeRightIn;
  animation-name: soEdgeRightIn; }

.codefx-growthHor.code-slideNext .code-slideOut {
  -webkit-animation-name: pullSoftOut;
  animation-name: pullSoftOut; }

.codefx-growthHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: soEdgeLeftIn;
  animation-name: soEdgeLeftIn; }

.codefx-growthHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullSoftOut;
  animation-name: pullSoftOut; }

/* GROWTH VER */
.codefx-growthVer.code-slideNext .code-slideIn {
  -webkit-animation-name: soEdgeDownIn;
  animation-name: soEdgeDownIn; }

.codefx-growthVer.code-slideNext .code-slideOut {
  -webkit-animation-name: pullSoftOut;
  animation-name: pullSoftOut; }

.codefx-growthVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: soEdgeUpIn;
  animation-name: soEdgeUpIn; }

.codefx-growthVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: pullSoftOut;
  animation-name: pullSoftOut; }

/* SCALE EDGE HOR */
.codefx-soEdgeHor.code-slideNext .code-slideIn {
  -webkit-animation-name: soEdgeRightIn;
  animation-name: soEdgeRightIn; }

.codefx-soEdgeHor.code-slideNext .code-slideOut {
  -webkit-animation-name: soEdgeLeftOut;
  animation-name: soEdgeLeftOut; }

.codefx-soEdgeHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: soEdgeLeftIn;
  animation-name: soEdgeLeftIn; }

.codefx-soEdgeHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: soEdgeRightOut;
  animation-name: soEdgeRightOut; }

/* SCALE EDGE VER */
.codefx-soEdgeVer.code-slideNext .code-slideIn {
  -webkit-animation-name: soEdgeDownIn;
  animation-name: soEdgeDownIn; }

.codefx-soEdgeVer.code-slideNext .code-slideOut {
  -webkit-animation-name: soEdgeUpOut;
  animation-name: soEdgeUpOut; }

.codefx-soEdgeVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: soEdgeUpIn;
  animation-name: soEdgeUpIn; }

.codefx-soEdgeVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: soEdgeDownOut;
  animation-name: soEdgeDownOut; }

/* SHAKE */
.codefx-shake .code-slideIn {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: .1s !important;
  animation-duration: .1s !important;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.codefx-shake .code-slideOut {
  -webkit-animation-name: slideDownOut;
  animation-name: slideDownOut; }

/* TIN HOR */
.codefx-tinHor.code-slideNext .code-slideIn {
  -webkit-animation-name: slideTinRightIn;
  animation-name: slideTinRightIn; }

.codefx-tinHor.code-slideNext .code-slideOut {
  -webkit-animation-name: slideLeftOut;
  animation-name: slideLeftOut; }

.codefx-tinHor.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideTinLeftIn;
  animation-name: slideTinLeftIn; }

.codefx-tinHor.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideRightOut;
  animation-name: slideRightOut; }

/* TIN VER */
.codefx-tinVer.code-slideNext .code-slideIn {
  -webkit-animation-name: slideTinUpIn;
  animation-name: slideTinUpIn; }

.codefx-tinVer.code-slideNext .code-slideOut {
  -webkit-animation-name: slideDownOut;
  animation-name: slideDownOut; }

.codefx-tinVer.code-slidePrev .code-slideIn {
  -webkit-animation-name: slideTinDownIn;
  animation-name: slideTinDownIn; }

.codefx-tinVer.code-slidePrev .code-slideOut {
  -webkit-animation-name: slideUpOut;
  animation-name: slideUpOut; }

/**
 * Swiper 3.4.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * 
 * http://www.idangero.us/swiper/
 * 
 * Copyright 2017, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 * 
 * Licensed under MIT
 * 
 * Released on: March 10, 2017
 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-container-no-flexbox .swiper-slide {
  float: left; }

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box; }

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0); }

.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative; }

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform; }

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000; }

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y; }

.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x; }

/* Arrows */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat; }

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none; }

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto; }

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto; }

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

/* Pagination Styles */
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10; }

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0; }

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%; }

/* Bullets */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2; }

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none; }

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer; }

.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff; }

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff; }

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff; }

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000; }

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0); }

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 5px 0;
  display: block; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px; }

/* Progress */
.swiper-pagination-progress {
  background: rgba(0, 0, 0, 0.25);
  position: absolute; }

.swiper-pagination-progress .swiper-pagination-progressbar {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  transform-origin: left top; }

.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  -webkit-transform-origin: right top;
  transform-origin: right top; }

.swiper-container-horizontal > .swiper-pagination-progress {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0; }

.swiper-container-vertical > .swiper-pagination-progress {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0; }

.swiper-pagination-progress.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.5); }

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  background: #fff; }

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  background: #000; }

/* 3D Container */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px; }

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; }

.swiper-container-3d .swiper-slide-shadow-left {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
  /* Firefox 16+, IE10, Opera 12.50+ */ }

.swiper-container-3d .swiper-slide-shadow-right {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
  /* Firefox 16+, IE10, Opera 12.50+ */ }

.swiper-container-3d .swiper-slide-shadow-top {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  /* Firefox 16+, IE10, Opera 12.50+ */ }

.swiper-container-3d .swiper-slide-shadow-bottom {
  /* Safari 4+, Chrome */
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  /* Firefox 16+, IE10, Opera 12.50+ */ }

/* Coverflow */
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px; }

/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
  overflow: visible; }

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1; }

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/* Cube */
.swiper-container-cube .swiper-slide {
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%; }

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0; }

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible; }

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0; }

/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out; }

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity; }

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none; }

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto; }

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center; }

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain; }

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1); }

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%; }

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%; }

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0; }

.swiper-scrollbar-cursor-drag {
  cursor: move; }

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite; }

.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat; }

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.swiper-container {
  width: 100%;
  height: 100%; }

.swiper-button-prev,
.swiper-button-next {
  width: 80px;
  height: 80px; }
  @media only screen and (max-width: 991px) {
    .swiper-button-prev,
    .swiper-button-next {
      width: 60px;
      height: 60px; } }

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0; }

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.swiper-event {
  position: relative; }
  .swiper-event .swiper-button-prev,
  .swiper-event .swiper-button-next {
    top: 105px;
    margin-top: 0; }
    @media only screen and (max-width: 1199px) {
      .swiper-event .swiper-button-prev,
      .swiper-event .swiper-button-next {
        top: 138px; } }
    @media only screen and (max-width: 991px) {
      .swiper-event .swiper-button-prev,
      .swiper-event .swiper-button-next {
        top: 102px; } }
  .swiper-event .swiper-button-next {
    right: 0; }
    @media only screen and (max-width: 991px) {
      .swiper-event .swiper-button-next {
        margin-right: -20px; } }
    @media only screen and (min-width: 992px) {
      .swiper-event .swiper-button-next {
        margin-right: -40px; } }
    @media only screen and (min-width: 1200px) {
      .swiper-event .swiper-button-next {
        margin-right: 210px; } }
  .swiper-event .swiper-button-prev {
    margin-left: -40px;
    left: 0; }
    @media only screen and (max-width: 991px) {
      .swiper-event .swiper-button-prev {
        margin-left: -20px; } }
  @media only screen and (min-width: 1200px) {
    .swiper-event.swiper-last .swiper-button-prev {
      margin-left: 200px; } }
  @media only screen and (min-width: 992px) {
    .swiper-event .swiper-button-prev,
    .swiper-event .swiper-button-next,
    .swiper-event [rel="border-circle"] {
      width: 70px;
      height: 70px; } }

.swiper-gallery {
  max-width: 700px;
  margin: 0 auto;
  position: relative; }
  .swiper-gallery .card {
    width: 100%; }
    .swiper-gallery .card .thumb {
      margin-bottom: 0; }
  .swiper-gallery .swiper-slide {
    width: 100%; }
    @media only screen and (max-width: 767px) {
      .swiper-gallery .swiper-slide {
        width: calc(100% - 60px); } }
  .swiper-gallery [class*="swiper-button"] {
    margin-top: -40px; }
  .swiper-gallery .swiper-button-prev {
    left: 0;
    margin-left: -40px; }
  .swiper-gallery .swiper-button-next {
    right: 0;
    margin-right: -40px; }
  @media only screen and (min-width: 768px) {
    .swiper-gallery .swiper-slide-prev,
    .swiper-gallery .swiper-slide-next {
      opacity: 0.2; } }

.swiper-knowledge .card {
  width: 100%; }

#at4-share, #at4-soc {
  top: 50%; }

@media only screen and (max-width: 1199px) {
  .addthis-smartlayers-desktop {
    display: none; } }

@media only screen and (max-width: 767px) {
  .atss {
    position: relative !important; } }

.section--share {
  margin: 40px 0px; }
  .section--share .addthis_inline_share_toolbox {
    padding: 0px 15px; }
  .section--share .at-share-btn-elements {
    text-align: center; }
    .section--share .at-share-btn-elements .at-share-btn {
      width: 100%;
      max-width: 200px;
      border-radius: 5px 5px !important;
      min-height: 50px;
      margin-bottom: 0;
      padding: 8px;
      margin-left: 10px;
      margin-right: 10px; }
      @media only screen and (max-width: 767px) {
        .section--share .at-share-btn-elements .at-share-btn {
          display: block;
          margin: 0px auto;
          max-width: 300px; }
          .section--share .at-share-btn-elements .at-share-btn + .at-share-btn {
            margin-top: 10px; } }
      .section--share .at-share-btn-elements .at-share-btn:hover {
        -webkit-transform: none;
                transform: none; }
      .section--share .at-share-btn-elements .at-share-btn .at-icon-wrapper {
        display: inline-block;
        float: none;
        vertical-align: middle; }
      .section--share .at-share-btn-elements .at-share-btn .at-label {
        vertical-align: middle; }

/*!
 * Float Labels
 *
 * @version: 3.2.1
 * @author: Paul Ryley (http://geminilabs.io)
 * @url: https://geminilabs.github.io/float-labels.js
 * @license: MIT
 */
.fl-form .fl-wrap {
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.fl-form input.fl-input,
.fl-form select.fl-select,
.fl-form textarea.fl-textarea {
  width: 100%;
  outline: 0;
  font-size: 15px;
  line-height: 2;
  border-radius: 5px;
  border: 1px solid #dddddd;
  background-color: #fff;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0px; }
  .fl-form input.fl-input:-moz-placeholder,
  .fl-form select.fl-select:-moz-placeholder,
  .fl-form textarea.fl-textarea:-moz-placeholder {
    color: #888888; }
  .fl-form input.fl-input::-moz-placeholder,
  .fl-form select.fl-select::-moz-placeholder,
  .fl-form textarea.fl-textarea::-moz-placeholder {
    color: #888888; }
  .fl-form input.fl-input:-ms-input-placeholder,
  .fl-form select.fl-select:-ms-input-placeholder,
  .fl-form textarea.fl-textarea:-ms-input-placeholder {
    color: #888888; }
  .fl-form input.fl-input::-webkit-input-placeholder,
  .fl-form select.fl-select::-webkit-input-placeholder,
  .fl-form textarea.fl-textarea::-webkit-input-placeholder {
    color: #888888; }

.fl-form select.fl-select {
  position: relative;
  color: #888888;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none; }

.fl-form .fl-is-active input.fl-input,
.fl-form .fl-is-active select.fl-select,
.fl-form .fl-is-active textarea.fl-textarea {
  color: #222222;
  background-color: #fff;
  border-color: #dddddd; }

.fl-form .fl-has-focus input.fl-input,
.fl-form .fl-has-focus select.fl-select,
.fl-form .fl-has-focus textarea.fl-textarea {
  background-color: #fff;
  border-color: #dddddd; }

.fl-form label.fl-label {
  opacity: 0;
  visibility: hidden;
  display: block;
  position: absolute;
  top: -12px;
  left: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #888888;
  border-radius-top-left: 5px;
  transition: all 0.3s ease-in-out;
  z-index: 1; }

.fl-form .fl-is-active label.fl-label {
  opacity: 1;
  visibility: visible;
  color: #888888; }

.fl-form .fl-has-focus label.fl-label {
  color: #888888; }

.fl-form .fl-is-required:before {
  opacity: 1;
  display: block;
  position: absolute;
  top: 1px;
  right: 15px;
  font-size: 15px;
  line-height: 1.75;
  color: #FF0000;
  transition: all 0.3s ease-in-out;
  padding: 6px 0 0;
  z-index: 1; }

.fl-form .fl-is-required.fl-is-active:before {
  opacity: 0; }

.fl-form.fl-style-1 input.fl-input,
.fl-form.fl-style-1 select.fl-select,
.fl-form.fl-style-1 textarea.fl-textarea {
  padding: 6px 12px; }

.fl-form.fl-style-1 select.fl-select {
  height: 38px; }

.fl-form.fl-style-1 .fl-is-active input.fl-input,
.fl-form.fl-style-1 .fl-is-active select.fl-select,
.fl-form.fl-style-1 .fl-is-active textarea.fl-textarea {
  padding: 6px 12px; }

.fl-form.fl-style-1 label.fl-label {
  top: 1px;
  left: 10px;
  background-color: transparent;
  padding: 12px 3px; }

.fl-form.fl-style-1 label.fl-label:before {
  content: '';
  display: block;
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #fff;
  z-index: -1; }

.fl-form.fl-style-1 .fl-is-active label.fl-label {
  top: -9px;
  padding: 3px; }

.fl-form.fl-style-1 .fl-is-active label.fl-label:before {
  top: 9px; }

.fl-form.fl-style-2 input.fl-input,
.fl-form.fl-style-2 select.fl-select,
.fl-form.fl-style-2 textarea.fl-textarea {
  padding: 12px; }

.fl-form.fl-style-2 select.fl-select {
  height: 50px; }

.fl-form.fl-style-2 .fl-is-active input.fl-input,
.fl-form.fl-style-2 .fl-is-active select.fl-select,
.fl-form.fl-style-2 .fl-is-active textarea.fl-textarea {
  padding: 18px 12px 6px; }

.fl-form.fl-style-2 label.fl-label {
  top: 1px;
  left: 10px;
  background-color: #fff;
  padding: 6px 3px 3px; }

.fl-form.fl-style-2 .fl-has-focus label.fl-label {
  background-color: #fff; }

.fl-form.fl-style-2 .fl-is-active label.fl-label {
  background-color: #fff; }

.fl-form.fl-style-2 .fl-is-required:before {
  padding-top: 12px; }

.fl-form .fl-wrap-select:after {
  content: '';
  position: absolute;
  display: block;
  top: 1px;
  right: 6px;
  height: calc(100% - 2px);
  width: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='#888888' d='M 4 0 L 0 6.5 L 8 6.5 L 4 0 z M 0 9.5 L 4 16 L 4 16 L 8 9.5 z'/></svg>") no-repeat;
  background-position: 100% 50%;
  background-size: 7px 14px;
  z-index: 2; }

/**
 * RubyTabs Main Styles
 * @package         RubyTabs
 * @author          HaiBach
 * @link            http://haibach.net/rubytabs
 * @version         1.5
 */
/**
 * BASIC STYLE
 *  + Class ready -> element already loaded
 *  + Pagination like Viewport : similar CSS
 */
.rt01,
.rt01ie7 .rt01pag {
  position: relative; }

.rt01viewport {
  position: relative; }

.rt01none {
  display: none !important; }

.rt01noclip {
  overflow: visible !important; }

.rt01ghost, .rt01hide {
  visibility: hidden !important; }

.rt01wfit > * {
  width: 100% !important; }

.rt01hfit > * {
  height: 100% !important; }

.rt01mask {
  overflow: hidden; }

.rt01init .rt01slide.rt01sleep {
  display: none; }

.rt01canvas {
  /* Version 1.4 - 15/09/2016 : Fixed size of the slide in layout Carousel */
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

.rt01no-transform .rt01canvas {
  position: relative; }

.rt01slide {
  overflow: hidden;
  width: 100%; }

.rt01slide.rt01sleep {
  /* Ver 1.4 - 16/09/2016 : propertity unnecessary */
  /*height: 100%;*/ }

.rt01slide.rt01no-loaded {
  min-height: 150px; }

.rt01no-transform .rt01slide.rt01cur {
  position: relative; }

.rt01slide.rt01deactived, .rt01pagitem, .rt01outside .rt01pagitem {
  display: block;
  position: absolute;
  left: 0;
  top: 0; }

/**
 * BOX-SIZING
 */
.rt01viewport, .rt01canvas, .rt01pagitem, .rt01pagmark-item {
  box-sizing: content-box; }

.rt01slide {
  box-sizing: border-box; }

/**
 * OVERLAY GHOST : SUPPORT SWIPE GESTURES WHEN PREVENT BY ELEMENT OTHERS
 *  + Support prevent Video iframe + Map iframe are active
 */
.rt01overlay-ghost {
  display: none; }

.rt01grabbing .rt01overlay-ghost {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999; }

/**
 * HEIGHT TYPE
 */
/* Slide in Height Fixed always == hCode */
.rt01height-fixed > .rt01viewport > .rt01canvas,
.rt01height-fixed > .rt01viewport > .rt01canvas > .rt01slide,
.rt01height-fixed > .rt01viewport > .rt01canvas > .rt01slide > .rt01imgback-wrap {
  height: 100%; }

/* Image background: smooth move when have top value */
.rt01height-fixed .rt01slide > .rt01imgback-wrap {
  transition: top .2s; }

/**
 * NAVIGATION
 */
.rt01nav-next, .rt01nav-prev, .rt01playpause {
  cursor: pointer;
  z-index: 99999; }

.rt01nav-prev, .rt01nav-next {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  top: 50%;
  margin-top: -25px;
  opacity: .5;
  background-image: url("../img/rubytab/icon-nav.svg");
  background-repeat: no-repeat;
  text-indent: -9999px;
  cursor: pointer; }

.rt01no-transform .rt01nav-prev, .rt01no-transform .rt01nav-next {
  background-image: url("../img/rubytab/icon-nav.png"); }

.rt01nav-prev {
  left: 0;
  background-position: 0 0; }

.rt01nav-next {
  right: 0;
  background-position: -50px 0; }

.rt01nav-prev:hover, .rt01nav-next:hover {
  opacity: 1; }

.rt01nav-prev.rt01deactived, .rt01nav-next.rt01deactived {
  visibility: hidden;
  cursor: inherit; }

/* NAVIGATION STYLE DARK */
.rt01nav-dark .rt01nav-prev, .rt01nav-dark .rt01nav-next {
  background-image: url("../img/rubytab/icon-nav-dark.svg"); }

.rt01nav-dark.rt01no-transform .rt01nav-prev, .rt01nav-dark.rt01no-transform .rt01nav-next {
  background-image: url("../img/rubytab/icon-nav-dark.png"); }

/**
 * PAGINATION
 *  + Resetup 'width' property for each type : Tabs no need width = 100%
 */
/**
 * PAGINATION CORE
 */
.rt01pag {
  overflow: hidden;
  z-index: 3; }

.rt01paginner {
  position: relative; }

.rt01pagitem {
  cursor: pointer; }

/* Tabs Horizontal */
.rt01pag.rt01pag-hor.rt01pag-begin {
  margin-bottom: 20px; }

.rt01pag.rt01pag-hor.rt01pag-end {
  margin-top: 20px; }

/* Tabs Vertical */
.rt01pag.rt01pag-ver.rt01pag-begin {
  float: left; }

.rt01pag.rt01pag-ver.rt01pag-end {
  position: absolute;
  right: 0;
  top: 0; }

.rt01pag.rt01pag-ver.rt01pag-begin {
  margin-right: 30px; }

.rt01pag.rt01pag-ver.rt01pag-end {
  margin-left: 30px; }

/**
 * PAGINATION TYPE : TABS
 */
.rt01tabs .rt01pagitem {
  padding-bottom: 5px;
  color: #bbb;
  white-space: nowrap; }

.rt01tabs .rt01pagitem.rt01cur {
  color: #111; }

/* Tabs Horizontal */
.rt01tabs.rt01pag-hor .rt01pagitem {
  padding: 15px 22px;
  text-align: center; }

/* Tabs Vertical */
.rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 15px 20px; }

/* Pagination Tabs Outside */
.rt01tabs.rt01pag-ver.rt01pag-end.rt01outside {
  position: static; }

/**
 * PAGINATION TYPE : LIST
 */
.rt01list .rt01pagitem {
  position: static;
  display: inline-block; }

/**
 * PAGINATION TYPE : THUMBNAIL
 */
.rt01thumbnail .rt01pagitem {
  width: 100px;
  height: 70px;
  border: 1px solid #e5e5e5;
  border-radius: 3px; }

.rt01thumbnail.rt01pag-hor .rt01pagitem {
  margin-left: 8px;
  margin-right: 8px; }

.rt01thumbnail.rt01pag-hor .rt01pagitem.rt01first {
  margin-left: 0; }

.rt01thumbnail.rt01pag-hor .rt01pagitem.rt01last {
  margin-right: 0; }

.rt01thumbnail.rt01pag-ver .rt01pagitem {
  margin-top: 5px;
  margin-bottom: 5px; }

.rt01thumbnail.rt01pag-ver .rt01pagitem.rt01first {
  margin-top: 0; }

.rt01thumbnail.rt01pag-ver .rt01pagitem.rt01last {
  margin-bottom: 0; }

.rt01thumbwrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 4px solid #fff;
  border-radius: 3px;
  box-sizing: border-box; }

.rt01thumbwrap img {
  position: relative;
  max-width: none !important;
  -webkit-transform: translateZ(0);
  /* chrome image fix */ }

.rt01pagitem .rt01thumbwrap img {
  opacity: 1;
  transition: opacity .15s, -webkit-transform .15s;
  transition: transform .15s, opacity .15s;
  transition: transform .15s, opacity .15s, -webkit-transform .15s; }

/* Thumbnail Item actived */
.rt01pagitem.rt01cur {
  border-color: rgba(0, 0, 0, 0.75); }

.rt01pagitem.rt01cur .rt01thumbwrap {
  background-color: #333; }

.rt01pagitem.rt01cur .rt01thumbwrap img {
  opacity: .2;
  -webkit-transform: perspective(400px) translateZ(200px);
  transform: perspective(400px) translateZ(200px); }

.rt01no-opacity .rt01pagitem.rt01cur {
  border-color: #000; }

@media only screen and (max-width: 767px) {
  .rt01thumbnail .rt01pagitem {
    width: 60px;
    height: 40px;
    margin-left: 3px;
    margin-right: 3px; }
  .rt01thumbnail.rt01pag-hor .rt01pagitem {
    margin-left: 3px;
    margin-right: 3px; }
  .rt01thumbnail.rt01pag-ver .rt01pagitem {
    margin-top: 3px;
    margin-bottom: 3px; }
  .rt01thumbwrap {
    border-width: 2px; } }

/**
 * PAGINATION ARROW
 */
.rt01pag {
  position: relative; }

.rt01pagarrow-item {
  position: absolute;
  background-color: rgba(255, 255, 255, 0);
  /* Fixed IE khong tap dc tren item */
  cursor: pointer;
  opacity: 0;
  z-index: -1;
  transition: opacity .2s; }

.rt01pagarrow-item.rt01actived {
  opacity: 1;
  z-index: 99999; }

.rt01pag-hor .rt01pagarrow-item {
  top: 0;
  width: 25px;
  height: 100%; }

.rt01pag-hor .rt01pagarrow-left {
  left: 0; }

.rt01pag-hor .rt01pagarrow-right {
  right: 0; }

.rt01pag-ver .rt01pagarrow-item {
  left: 0;
  width: 100%;
  height: 15px; }

.rt01pag-ver .rt01pagarrow-left {
  top: 0; }

.rt01pag-ver .rt01pagarrow-right {
  bottom: 0; }

.rt01pagarrow-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  opacity: .7; }

.rt01pagarrow-item:hover .rt01pagarrow-icon {
  opacity: 1; }

.rt01pag-hor .rt01pagarrow-left .rt01pagarrow-icon {
  margin-left: -3px;
  border-left-width: 0;
  border-right-color: #000; }

.rt01pag-hor .rt01pagarrow-right .rt01pagarrow-icon {
  margin-left: -1px;
  border-right-width: 0;
  border-left-color: #000; }

.rt01pag-ver .rt01pagarrow-left .rt01pagarrow-icon {
  margin-top: -3px;
  border-top-width: 0;
  border-bottom-color: #000; }

.rt01pag-ver .rt01pagarrow-right .rt01pagarrow-icon {
  margin-top: -1px;
  border-bottom-width: 0;
  border-top-color: #000; }

/* FIXED OLD BROWSER */
.rt01no-opacity .rt01pagarrow-icon {
  display: none; }

.rt01no-opacity .rt01pagarrow-item.rt01actived {
  display: block; }

/**
 * PAGINATION MARK
 */
.rt01pagmark-item {
  position: absolute;
  background-color: #cc0055;
  transition: width .2s, height .2s, -webkit-transform .2s;
  transition: transform .2s, width .2s, height .2s;
  transition: transform .2s, width .2s, height .2s, -webkit-transform .2s; }

.rt01pag-hor > .rt01pagmark > .rt01pagmark-item {
  height: 4px; }

.rt01pag-ver > .rt01pagmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%; }

.rt01pag-ver > .rt01pagmark > .rt01pagmark-item {
  width: 4px; }

/**
 * CAPTION
 */
.rt01capinner {
  position: relative; }

.rt01cap-last {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0; }

/* Clearfix for caption : Get correct size */
.rt01cap-last:after, .rt01cap-cur:after {
  content: " ";
  display: table;
  clear: both; }

.rt01cap-last, .rt01cap-cur {
  *zoom: 1; }

/**
 * ICON LOADER
 */
/**
 * LOADER DEFAULT
 */
.rt01loader {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 50%;
  top: 50%;
  margin-left: -24px;
  margin-top: -24px; }

.rt01loader:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid #fff;
  box-sizing: border-box; }

.rt01loader-circular {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: rt01LoaderRotate 2s linear infinite;
  animation: rt01LoaderRotate 2s linear infinite; }

.rt01loader-path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: rt01loaderDash 1s ease-in-out infinite, rt01loaderColor 4s ease-in-out infinite;
  animation: rt01loaderDash 1s ease-in-out infinite, rt01loaderColor 4s ease-in-out infinite; }

@-webkit-keyframes rt01LoaderRotate {
  0% {
    -webkit-transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes rt01LoaderRotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes rt01loaderDash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35; }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124; } }

@keyframes rt01loaderDash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35; }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124; } }

@-webkit-keyframes rt01loaderColor {
  0%, 100% {
    stroke: #cc0055; }
  15% {
    stroke: #ffaa00; }
  30% {
    stroke: #c9c900; }
  45% {
    stroke: #00cc00; }
  60% {
    stroke: #00ccff; }
  75% {
    stroke: #9900ff; }
  90% {
    stroke: #ff00cc; } }

@keyframes rt01loaderColor {
  0%, 100% {
    stroke: #cc0055; }
  15% {
    stroke: #ffaa00; }
  30% {
    stroke: #c9c900; }
  45% {
    stroke: #00cc00; }
  60% {
    stroke: #00ccff; }
  75% {
    stroke: #9900ff; }
  90% {
    stroke: #ff00cc; } }

/**
 * LOADER SIZE SMALL
 */
.rt01loader-small {
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px; }

.rt01loader-small:before {
  border-width: 7px; }

/**
 * LOADER FALLBACK
 */
.rt01loader-old {
  width: 70px;
  height: 32px;
  margin-left: -35px;
  margin-top: -16px;
  background-color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 32px; }

/**
 * TIMER
 */
/* Timer Line */
.rt01timer-line {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.1); }

.rt01timer-line > .rt01timeritem {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #999;
  background-color: rgba(0, 0, 0, 0.5); }

/* Timer Arc */
.rt01timer-arc {
  width: 40px;
  height: 40px; }

/**
 * GRAB CURSOR
 */
.rt01grab, .slide-as-pag .rt01grab .rt01cur {
  cursor: url("../img/rubytab/grab.html"), auto;
  /* Browser IE9-11 - url included folder css */
  cursor: url("../img/rubytab/grab.html") 8 6, auto;
  /* Browser Modern + Old */ }

.rt01grabbing, .rt01grabbing .rt01pagitem,
.slide-as-pag .rt01grabbing .rt01cur {
  cursor: url("../img/rubytab/grabbing.html"), auto;
  /* Browser IE9-11 */
  cursor: url("../img/rubytab/grabbing.html") 8 6, auto;
  /* Browser Modern + Old */ }

/**
 * IMAGE
 *  + Remove attribute max-width on image
 */
.rt01imgback {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  max-width: none !important;
  box-sizing: border-box;
  /* Ver 1.4 - 22/09/2016 : fixed in line effect, Video iframe, browser Chrome update wrong position */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); }

/* Clone image in type position 'tile' */
.rt01imgclone {
  position: absolute !important; }

/**
 * VIDEO BACKGROUND
 */
.rt01videoback {
  display: block;
  position: relative; }

.rt01videoposter {
  overflow: hidden;
  display: block;
  position: absolute;
  left: 0;
  top: 0; }

.rt01slide.rt01cur > .rt01videoback-wrap > .rt01videoposter {
  visibility: hidden; }

/* Setup for Math effect */
.rt01fx-back .rt01videoposter,
.rt01fx-front .rt01videoposter {
  position: relative; }

/**
 * LAYOUT
 */
/* LAYOUT DOT */
.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01deactived {
  visibility: hidden; }

.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01slide.rt01cur {
  z-index: 2; }

/* Setup 'z-index' property for fixed grabbing + fxRun */
.rt01slide.rt01cur.rt01css-prev,
.rt01slide.rt01cur.rt01css-next {
  position: relative; }

.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01slide.rt01css-prev {
  visibility: visible;
  z-index: 1; }

.rt01layout-dot > .rt01viewport > .rt01canvas > .rt01slide.rt01css-next {
  visibility: visible;
  z-index: 2; }

/**
 * EFFECT - CORE
 */
/* CSS EFFECT */
.rt01css-mask {
  overflow: hidden; }

/* MATH EFFECT */
.rt01fx-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99999; }

.rt01fx-front-wrap {
  position: relative; }

.rt01math-mask > .rt01fx-front {
  overflow: hidden; }

.rt01layout-dot .rt01fx-front {
  position: absolute; }

.rt01fx-front .rt01imgback-wrap {
  overflow: hidden;
  position: absolute;
  left: 0; }

.rt01fx-front .rt01imgback-wrap > img {
  left: 0; }

.rt01fx-back {
  position: absolute;
  overflow: hidden;
  width: 100%; }

.rt01fx-back .rt01imgback-wrap,
.rt01fx-back .rt01imgback-wrap > img {
  left: 0; }

/* Fixed in height-fixed */
.rt01height-fixed .rt01fx-back,
.rt01height-fixed .rt01imgback-wrap {
  height: 100%; }

/* Remove button open video when running effect */
.rt01fx-overlay .rt01btn-play {
  display: none; }

/* 3D EFFECT */
.rt01fx-3d > .rt01viewport > .rt01canvas {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

/**
 * VIDEO IFRAME
 */
.rt01video {
  position: relative;
  display: inline-block; }

.rt01video.rt01imgback-wrap {
  display: block; }

.rt01video > .rt01video-item {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0; }

.rt01video img {
  display: block; }

.rt01video .rt01loader {
  visibility: hidden; }

/* Button play */
.rt01btn-play {
  display: block;
  position: absolute;
  width: 70px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -25px;
  background-image: url("../img/rubytab/icon-video-play.svg");
  background-repeat: no-repeat;
  cursor: pointer !important;
  opacity: 1;
  transition: opacity .15s; }

.rt01no-transform .rt01btn-play {
  background-image: url("../img/rubytab/icon-video-play.png"); }

.rt01btn-play:hover {
  opacity: .5; }

.rt01youtube .rt01btn-play {
  background-position: 0 0; }

.rt01vimeo .rt01btn-play {
  background-position: -70px 0; }

/* Button close */
.rt01btn-close {
  display: none;
  position: absolute;
  visibility: hidden;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
  opacity: 0; }

.rt01video:hover > .rt01btn-close,
.rt01video-ready > .rt01btn-close.rt01hover {
  opacity: 1; }

.rt01btn-close:hover {
  background-color: #fff; }

/* Video init */
.rt01video-init {
  background-color: #000; }

.rt01video-init > img,
.rt01video-init > .rt01btn-play,
.rt01video-init > .rt01video-item {
  visibility: hidden; }

.rt01video-init > .rt01loader {
  visibility: visible; }

/* Video ready */
.rt01video-ready > img,
.rt01video-ready > .rt01btn-play {
  visibility: hidden; }

.rt01video-ready > .rt01btn-close {
  visibility: visible; }

/* Video khong co Image preview */
.rt01no-preview .rt01video-item {
  position: relative; }

/* Fixed trong Browser cu */
.rt01no-transform .rt01deactived .rt01video-ready > img {
  visibility: visible; }

.rt01no-transform .rt01deactived .rt01video-ready > .rt01video-item {
  visibility: hidden; }

/**
 * HOTSPOT BASIC
 *  + Hidden hotspot at begin
 */
.rt01hotspot {
  position: relative; }

.rt01hspoint {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 6px solid rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  cursor: pointer;
  -webkit-animation: rt01wave 2s ease infinite;
  animation: rt01wave 2s ease infinite; }

@-webkit-keyframes rt01wave {
  0%, 100% {
    -webkit-transform: perspective(800px) translateZ(0); }
  25%, 75% {
    -webkit-transform: perspective(800px) translateZ(-100px); }
  50% {
    -webkit-transform: perspective(800px) translateZ(100px); } }

@keyframes rt01wave {
  0%, 100% {
    -webkit-transform: perspective(800px) translateZ(0);
            transform: perspective(800px) translateZ(0); }
  25%, 75% {
    -webkit-transform: perspective(800px) translateZ(-100px);
            transform: perspective(800px) translateZ(-100px); }
  50% {
    -webkit-transform: perspective(800px) translateZ(100px);
            transform: perspective(800px) translateZ(100px); } }

/* Style Hotspot Item */
.rt01hsitem {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #444;
  border-radius: 4px; }

.rt01hsitem.rt01widthfixed {
  white-space: normal; }

.rt01hotspot.rt01actived .rt01hsitem {
  visibility: visible; }

.rt01slide.rt01deactived .rt01hotspot,
.rt01slide.rt01deactived .rt01hsitem {
  visibility: hidden; }

/* Style Arrow of Item */
.rt01hsitem:after {
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border: 1px solid #444;
  border-radius: 50%; }

.rt01hs-top .rt01hsitem:after {
  bottom: -6px; }

.rt01hs-bottom .rt01hsitem:after {
  top: -6px; }

.rt01hs-left .rt01hsitem:after {
  right: -5px; }

.rt01hs-right .rt01hsitem:after {
  left: -6px; }

.rt01hs-top .rt01hsitem:after,
.rt01hs-bottom .rt01hsitem:after {
  left: 50%;
  margin-left: -5px; }

.rt01hs-left .rt01hsitem:after,
.rt01hs-right .rt01hsitem:after {
  top: 50%;
  margin-top: -5px; }

/**
 * LAYER BASIC
 */
.rt01layer {
  position: absolute;
  left: 0;
  top: 0; }

.rt01layeritem {
  display: block;
  margin: 0 !important;
  white-space: nowrap; }

[data-layer-animate],
.rt01slide.rt01deactived > .rt01layer {
  visibility: hidden; }

.rt01layerghost {
  visibility: hidden; }

/* Layer nested */
.rt01layeritem .rt01layer {
  position: relative;
  display: inline-block; }

/**
 * SHADOW
 */
.rt01shadow {
  position: absolute;
  left: 0;
  top: 100%; }

.rt01shadow > img {
  display: block;
  width: 100%;
  height: auto; }

/**
 * OHTERS
 */
/* Tablist outside */
.rt01outside.rt01tabs.rt01pag-ver.rt01pag-begin {
  float: none; }

/* Android native --> fixed imageback not active overflow:hidden */
.rt01androidnative.rt01layout-line .rt01imgback-wrap {
  -webkit-transform: translatez(0); }

/* Firefox: fixed smooth edge, checked in version 30 */
.rt01firefox .ruby-animated {
  outline: 1px solid transparent; }

/* Fixed font ugly in safari 5.1 window */
.rt01, .rt01pag, .rt01cap {
  -webkit-font-smoothing: antialiased; }

/* Fixed ie mobile not swipe by conflict with scroll page */
/*.rt01mobile .rt01swipe-on  { -ms-touch-action: pan-y; }*/
/* Fixed 'tap-highlight' on mobile -- IE not resolved */
.rt01viewport, .rt01pag {
  -webkit-tap-highlight-color: transparent; }

/* Style cursor on class Swipe Prevent */
.rt01swipe-prevent {
  cursor: auto; }

/* API Remote */
.rt01api {
  cursor: pointer; }

/**
 * RUBYTABS CUSTOM STYLES
 */
/**
 * TABS STYLE
============================================================================= */
/**
 * STYLE FLAT & FLATBOX
----------------------------------------------------------------------------- */
.rt01flatbox > .rt01tabs {
  margin-bottom: 0; }

.rt01flat > .rt01tabs .rt01pagitem.rt01cur,
.rt01flatbox > .rt01tabs .rt01pagitem.rt01cur {
  background-color: #cc0055;
  color: #fff; }

/* FLAT HORIZONTAL */
.rt01flat > .rt01tabs.rt01pag-hor.rt01pag-begin,
.rt01flatbox > .rt01tabs.rt01pag-hor.rt01pag-begin {
  border-bottom: 2px solid #cc0055; }

.rt01flat > .rt01tabs.rt01pag-hor.rt01pag-end,
.rt01flatbox > .rt01tabs.rt01pag-hor.rt01pag-end {
  border-top: 2px solid #cc0055; }

.rt01flatbox > .rt01tabs.rt01pag-hor {
  margin-top: 0;
  margin-bottom: 0; }

.rt01flatbox.rt01pag-hor > .rt01viewport {
  padding: 20px;
  border: solid #e5e5e5;
  background-color: #fff; }

.rt01flatbox.rt01pag-hor.rt01pag-begin > .rt01viewport {
  border-width: 0 1px 1px 1px; }

.rt01flatbox.rt01pag-hor.rt01pag-end > .rt01viewport {
  border-width: 1px 1px 0 1px; }

/* FLAT VERTICAL */
.rt01flat > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 16px 20px 14px 20px;
  border-bottom: 1px dotted #ddd; }

.rt01flat > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur,
.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
  margin-top: -1px;
  border-bottom-color: #cc0055; }

.rt01flatbox > .rt01tabs.rt01pag-ver {
  margin-left: 0;
  margin-right: 0; }

.rt01flatbox.rt01pag-ver > .rt01viewport {
  padding: 25px;
  border: solid #e5e5e5; }

.rt01flatbox.rt01pag-ver.rt01pag-begin > .rt01viewport {
  border-width: 1px 1px 1px 0; }

.rt01flatbox.rt01pag-ver.rt01pag-end > .rt01viewport {
  border-width: 1px 0 1px 1px; }

.rt01flat > .rt01pag-ver.rt01pag-begin {
  border-right: 2px solid #cc0055; }

.rt01flat > .rt01pag-ver.rt01pag-end {
  border-left: 2px solid #cc0055; }

.rt01flatbox.rt01pag-ver.rt01pag-begin > .rt01viewport {
  border-left: 2px solid #cc0055; }

.rt01flatbox.rt01pag-ver.rt01pag-end > .rt01viewport {
  border-right: 2px solid #cc0055; }

/**
 * STYLE ROUND
----------------------------------------------------------------------------- */
.rt01round > .rt01tabs .rt01pagitem {
  background-color: #f0f0f0; }

.rt01round > .rt01tabs .rt01pagitem.rt01cur {
  background-color: #cc0055;
  color: #fff; }

/* ROUND HORIZONTAL */
.rt01round > .rt01pag-hor .rt01pagitem:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.rt01round > .rt01pag-hor .rt01pagitem:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.rt01round.rt01pag-hor > .rt01tabs .rt01pagitem {
  margin-right: 0; }

/* ROUND VERTICAL */
.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }

.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

/* ROUND VERTICAL OUTSIDE */
.rt01round.rt01pag-ver.rt01outside.rt01pag-begin > .rt01viewport {
  padding-left: 0; }

.rt01round.rt01pag-ver.rt01outside.rt01pag-end > .rt01viewport {
  padding-right: 0; }

/**
 * STYLE OUTLINE
----------------------------------------------------------------------------- */
.rt01outline > .rt01tabs .rt01pagitem.rt01cur:before,
.rt01outline > .rt01tabs .rt01pagitem.rt01cur:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #cc0055; }

.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem.rt01cur,
.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
  border-color: #cc0055;
  z-index: 2; }

/* OUTLINE HORIZONTAL */
.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem {
  margin-left: 5px;
  margin-right: 5px;
  border: solid #e5e5e5; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  padding-top: 12px; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  padding-bottom: 12px; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem {
  border-width: 1px 1px 0 1px; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem {
  border-width: 0 1px 1px 1px; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  border-top-width: 4px; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  border-bottom-width: 4px; }

.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem.rt01cur:before,
.rt01outline > .rt01tabs.rt01pag-hor .rt01pagitem.rt01cur:after {
  width: 20000px;
  height: 1px; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur:before {
  bottom: 0;
  right: 100%; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur:after {
  bottom: 0;
  left: 100%; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur:before {
  top: 0;
  right: 100%; }

.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur:after {
  top: 0;
  left: 100%; }

/* OUTLINE VERTICAL */
.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem {
  margin-top: 3px;
  margin-bottom: 3px;
  border: solid #e5e5e5; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur {
  padding-left: 17px; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur {
  padding-right: 17px; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem {
  border-width: 1px 0 1px 1px; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem {
  border-width: 1px 1px 1px 0; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur {
  border-left-width: 4px; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur {
  border-right-width: 4px; }

.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur:before,
.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur:after {
  width: 1px;
  height: 20000px; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur:before {
  right: 0;
  bottom: 100%; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur:after {
  right: 0;
  top: 100%; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur:before {
  left: 0;
  bottom: 100%; }

.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur:after {
  left: 0;
  top: 100%; }

/* OUTLINE VERTICAL OUTSIDE */
.rt01outline.rt01pag-ver.rt01outside.rt01pag-begin > .rt01viewport {
  padding-left: 0; }

.rt01outline.rt01pag-ver.rt01outside.rt01pag-end > .rt01viewport {
  padding-right: 0; }

/**
 * STYLE UNDERLINE
----------------------------------------------------------------------------- */
.rt01underline > .rt01tabs .rt01pagitem {
  padding: 18px 0; }

/* UNDERLINE HORIZONTAL */
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin {
  border-bottom: 1px solid #e5e5e5; }

.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01paginner {
  top: 1px; }

.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end {
  border-top: 1px solid #e5e5e5; }

.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01paginner {
  bottom: 1px; }

.rt01underline > .rt01tabs.rt01pag-hor .rt01pagitem {
  margin: 0 15px; }

.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  padding-bottom: 14px;
  border-bottom: 5px solid #34A93E; }

.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  padding-top: 14px;
  border-top: 5px solid #34A93E; }

/* UNDERLINE VERTICAL */
.rt01underline > .rt01tabs.rt01pag-ver.rt01pag-begin {
  margin-right: 50px; }

.rt01underline > .rt01tabs.rt01pag-ver.rt01pag-end {
  margin-left: 50px; }

.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem {
  border-bottom: 1px dotted #ddd; }

.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
  padding-bottom: 14px;
  border-bottom: 4px solid #34A93E; }

/**
 * TABLIST SIZE
============================================================================= */
/**
 * SIZE DEFAULT - view reference
----------------------------------------------------------------------------- */
/* Basic */
/*.rt01tabs.rt01pag-hor .rt01pagitem                                                     { padding: 10px 15px; }
.rt01tabs.rt01pag-ver .rt01pagitem                                                     { padding: 10px 20px 10px 0; }*/
/* FLAT */
/*.rt01flat    > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem                                       { padding: 11px 20px 9px 20px; }*/
/* Round */
/*.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem                                          { padding: 10px 20px; }*/
/* Outline */
/*.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin    .rt01pagitem.rt01cur                  { padding-top: 7px; }
.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur                  { padding-bottom: 7px; }

.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem                                       { padding: 10px 20px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin    .rt01pagitem.rt01cur                  { padding-left: 17px; }
.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur                  { padding-right: 17px; }*/
/* Underline */
/*.rt01underline > .rt01tabs.rt01pag-hor .rt01pagitem                                     { padding: 12px 0; }
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin    .rt01pagitem.rt01cur                { padding-bottom: 8px; }
.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur                { padding-top: 8px; }

.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem                                     { padding: 12px 0; }
.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur                              { padding-bottom: 8px; }*/
/**
 * SIZE LARGE
----------------------------------------------------------------------------- */
/* Basic */
.rt01size-l > .rt01tabs.rt01pag-hor .rt01pagitem {
  padding: 20px 32px; }

.rt01size-l > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 20px 36px 20px 0; }

/* FLAT */
.rt01size-l.rt01flat > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01size-l.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 21px 36px 19px 36px; }

/* Round */
.rt01size-l.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 20px 36px; }

/* Outline */
.rt01size-l.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  padding-top: 17px; }

.rt01size-l.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  padding-bottom: 17px; }

.rt01size-l.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 20px 36px; }

.rt01size-l.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur {
  padding-left: 33px; }

.rt01size-l.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur {
  padding-right: 33px; }

/* Underline */
.rt01size-l.rt01underline > .rt01tabs .rt01pagitem {
  padding: 22px 0; }

.rt01size-l.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  padding-bottom: 18px; }

.rt01size-l.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  padding-top: 18px; }

.rt01size-l.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
  padding-bottom: 18px; }

/**
 * SIZE SMALL
----------------------------------------------------------------------------- */
/* Basic */
.rt01size-s > .rt01tabs.rt01pag-hor .rt01pagitem {
  padding: 8px 12px; }

.rt01size-s > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 8px 15px 8px 0; }

/* FLAT */
.rt01size-s.rt01flat > .rt01tabs.rt01pag-ver .rt01pagitem,
.rt01size-s.rt01flatbox > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 9px 15px 7px 15px; }

/* Round */
.rt01size-s.rt01round > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 8px 15px; }

/* Outline */
.rt01size-s.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  padding-top: 5px; }

.rt01size-s.rt01outline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  padding-bottom: 5px; }

.rt01size-s.rt01outline > .rt01tabs.rt01pag-ver .rt01pagitem {
  padding: 8px 15px; }

.rt01size-s.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-begin .rt01pagitem.rt01cur {
  padding-left: 12px; }

.rt01size-s.rt01outline > .rt01tabs.rt01pag-ver.rt01pag-end .rt01pagitem.rt01cur {
  padding-right: 12px; }

/* Underline */
.rt01size-s.rt01underline > .rt01tabs .rt01pagitem {
  padding: 10px 0; }

.rt01size-s.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
  padding-bottom: 6px; }

.rt01size-s.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-end .rt01pagitem.rt01cur {
  padding-top: 6px; }

.rt01size-s.rt01underline > .rt01tabs.rt01pag-ver .rt01pagitem.rt01cur {
  padding-bottom: 6px; }

/**
 * TIMER STYLE
============================================================================= */
/* BASIC */
.rt01ss-control {
  position: absolute;
  z-index: 99999; }

/**
 * PLAYPAUSE BUTTON
----------------------------------------------------------------------------- */
.rt01playpause {
  position: absolute;
  width: 26px;
  height: 26px;
  background: transparent url("../img/rubytab/icon-playpause.svg") no-repeat -12px -12px;
  text-indent: -99999px; }

.rt01no-transform .rt01playpause {
  background-image: url("../img/rubytab/icon-playpause.png"); }

.rt01playpause.rt01actived {
  background-position: -60px -12px; }

/**
 * TIMER ARC TOP
----------------------------------------------------------------------------- */
.rt01timer-arcTop .rt01ss-control {
  top: 0;
  right: 0;
  width: 40px;
  height: 40px; }

.rt01timer-arcTop .rt01playpause {
  left: 7px;
  top: 7px; }

.rt01timer-arcTop .rt01timer {
  position: absolute; }

/* Fallback for old browser */
.rt01timer-arcTop.rt01no-transform .rt01timer.rt01timer-line {
  background-color: #e5e5e5; }

/**
 * TIMER BAR TOP
----------------------------------------------------------------------------- */
.rt01timer-lineTop .rt01ss-control {
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px; }

.rt01timer-lineTop .rt01playpause {
  left: 7px;
  top: 7px; }

.rt01timer-lineTop .rt01timer {
  position: absolute; }

/**
 * TIMER LINE BOTTOM
----------------------------------------------------------------------------- */
.rt01timer-lineBottom .rt01ss-control {
  position: relative; }

.rt01timer-lineBottom .rt01playpause {
  right: 4px;
  bottom: 4px; }

/**
 * FLICKR
============================================================================= */
.rt01flickr-info {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: #999; }

a.rt01flickr-photo-title {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 18px; }

a.rt01flickr-album-title, a.rt01flickr-author {
  display: inline-block;
  opacity: 0.5;
  color: #fff;
  font-size: 12px; }

a.rt01flickr-album-title:hover, a.rt01flickr-author:hover {
  opacity: 1; }

/**
 * BULLET STYLE
============================================================================= */
/**
 * BULLET CORE
----------------------------------------------------------------------------- */
.rt01pag-bullet > .rt01pag.rt01bullet {
  margin: 0; }

.rt01bullet {
  padding-top: 10px;
  padding-bottom: 10px; }

.rt01bullet .rt01pagitem {
  display: block;
  float: left;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  margin-right: 6px;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  text-indent: -99999px; }

.rt01bullet .rt01pagitem:hover, .rt01bullet .rt01pagitem.rt01cur {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }

/**
 * BULLET FLAT
----------------------------------------------------------------------------- */
.rt01bulletflat .rt01pag {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #cc0055; }

.rt01bulletflat .rt01viewport {
  padding: 20px;
  background-color: #fff;
  border: solid #e5e5e5;
  border-width: 0 1px 1px 1px; }

.rt01 {
  opacity: 0; }
  .rt01.rt01ready {
    opacity: 1; }
  .rt01 .rt01pagitem {
    color: #222222;
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 24px;
    font-size: 2.4rem; }
    html.desktop.mac .rt01 .rt01pagitem {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 200; }
    .rt01 .rt01pagitem.rt01cur, .rt01 .rt01pagitem:hover {
      color: #34A93E; }
    .rt01 .rt01pagitem.rt01cur {
      font-family: "thaisans";
      font-weight: normal; }
      html.desktop.mac .rt01 .rt01pagitem.rt01cur {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-weight: 500; }
    @media only screen and (max-width: 767px) {
      .rt01 .rt01pagitem {
        font-family: "thaisans";
        font-weight: normal;
        font-size: 27px;
        font-size: 2.7rem; }
        html.desktop.mac .rt01 .rt01pagitem {
          font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
          font-size: 21px;
          font-size: 2.1rem;
          font-weight: 500; } }
  .rt01.rt01underline > .rt01tabs.rt01pag-hor .rt01pagitem {
    margin: 0px 0px; }
  .rt01.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin {
    border-bottom: none;
    margin-bottom: 0; }
    .rt01.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
      border-bottom: 3px solid #34A93E; }
      @media only screen and (min-width: 768px) {
        .rt01.rt01underline > .rt01tabs.rt01pag-hor.rt01pag-begin .rt01pagitem.rt01cur {
          border-bottom: none; } }
  .rt01.rt01underline > .rt01tabs .rt01pagitem {
    padding-top: 20px;
    padding-bottom: 0px;
    padding-left: 25px;
    padding-right: 25px;
    height: 36px !important; }
    @media only screen and (min-width: 1200px) {
      html.desktop.mac .rt01.rt01underline > .rt01tabs .rt01pagitem {
        padding-top: 25px; } }
    @media only screen and (max-width: 1199px) {
      .rt01.rt01underline > .rt01tabs .rt01pagitem {
        padding-top: 15px; } }
    @media only screen and (max-width: 767px) {
      .rt01.rt01underline > .rt01tabs .rt01pagitem {
        padding-top: 10px;
        padding-bottom: 5px !important;
        height: 40px !important; } }
  .rt01 .rt01pag {
    height: 80px; }
    @media only screen and (max-width: 1199px) {
      .rt01 .rt01pag {
        height: 70px; } }
    @media only screen and (max-width: 767px) {
      .rt01 .rt01pag {
        height: 60px; } }
    .rt01 .rt01pag:before {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      background-color: #e6e6e6; }
    .rt01 .rt01pag .rt01paginner {
      height: 80px !important; }
      @media only screen and (max-width: 1199px) {
        .rt01 .rt01pag .rt01paginner {
          height: 70px !important; } }
      @media only screen and (max-width: 767px) {
        .rt01 .rt01pag .rt01paginner {
          height: 60px !important; } }
  .rt01 .rt01pagarrow-item {
    height: calc(100% - 2px); }
    @media only screen and (max-width: 767px) {
      .rt01 .rt01pagarrow-item {
        width: 30px;
        background-color: white;
        height: calc(100% - 1px); } }
    .rt01 .rt01pagarrow-item.rt01actived {
      z-index: 1; }
  .rt01 .rt01pagarrow-icon {
    border: none;
    opacity: 0;
    margin-top: -16px;
    left: 0;
    top: 50%;
    display: inline-block; }
    @media only screen and (max-width: 767px) {
      .rt01 .rt01pagarrow-icon {
        margin-top: -12px; } }
  .rt01 .rt01pagarrow-item:hover .rt01pagarrow-icon {
    opacity: 0; }
  .rt01 .rt01pagarrow-item.rt01actived .rt01pagarrow-icon {
    opacity: 1;
    pointer-events: auto; }
  .rt01 .rt01pag-hor .rt01pagarrow-left .rt01pagarrow-icon {
    margin-left: 6px; }
  .rt01 .rt01pag-hor .rt01pagarrow-right .rt01pagarrow-icon {
    margin-left: 10px; }
  .rt01 .rt01pagarrow-left {
    top: 0;
    left: 0; }
    .rt01 .rt01pagarrow-left .rt01pagarrow-icon {
      background-image: url("../img/arrow/arrow-prev.svg");
      width: 19px;
      height: 33px;
      background-size: cover; }
      @media only screen and (max-width: 767px) {
        .rt01 .rt01pagarrow-left .rt01pagarrow-icon {
          width: 15px;
          height: 26px; } }
  .rt01 .rt01pagarrow-right {
    top: 0;
    right: 0; }
    .rt01 .rt01pagarrow-right .rt01pagarrow-icon {
      background-image: url("../img/arrow/arrow-next.svg");
      width: 19px;
      height: 33px;
      background-size: cover; }
      @media only screen and (max-width: 767px) {
        .rt01 .rt01pagarrow-right .rt01pagarrow-icon {
          width: 15px;
          height: 26px; } }

/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   @include retina(/images/mypic.jpg, 2);
 *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
/*!
 * bootstrap-fileinput v4.4.6
 * http://plugins.krajee.com/file-input
 *
 * Krajee default styling for bootstrap-fileinput.
 *
 * Author: Kartik Visweswaran
 * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
 *
 * Licensed under the BSD 3-Clause
 * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
 */
.file-loading input[type=file], input[type=file].file-loading {
  width: 0;
  height: 0; }

.kv-hidden, .file-caption-icon, .file-zoom-dialog .modal-header:before, .file-zoom-dialog .modal-header:after, .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .no-browse .input-group-btn, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .hide-content .kv-file-content {
  display: none; }

.btn-file input[type=file], .file-caption-icon, .file-preview .fileinput-remove, .krajee-default .file-thumb-progress, .file-zoom-dialog .btn-navigate, .file-zoom-dialog .floating-buttons {
  position: absolute; }

.file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
  position: relative; }

.file-error-message pre, .file-error-message ul, .krajee-default .file-actions, .krajee-default .file-other-error {
  text-align: left; }

.file-error-message pre, .file-error-message ul {
  margin: 0; }

.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
  float: left;
  margin: 5px 0 -5px;
  width: 16px;
  height: 16px; }

.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
  height: 11px;
  font-size: 9px;
  line-height: 10px; }

.krajee-default .file-caption-info, .krajee-default .file-size-info {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 160px;
  height: 15px;
  margin: auto; }

.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash, .file-zoom-content > .file-object.type-image {
  max-width: 100%;
  max-height: 100%;
  width: auto; }

.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash {
  height: 100%; }

.file-zoom-content > .file-object.type-pdf, .file-zoom-content > .file-object.type-html, .file-zoom-content > .file-object.type-text, .file-zoom-content > .file-object.type-default {
  width: 100%; }

.rotate-2 {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

.rotate-3 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.rotate-4 {
  -webkit-transform: rotate(180deg) rotateY(180deg);
          transform: rotate(180deg) rotateY(180deg); }

.rotate-5 {
  -webkit-transform: rotate(270deg) rotateY(180deg);
          transform: rotate(270deg) rotateY(180deg); }

.rotate-6 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.rotate-7 {
  -webkit-transform: rotate(90deg) rotateY(180deg);
          transform: rotate(90deg) rotateY(180deg); }

.rotate-8 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg); }

.file-loading:before {
  content: " Loading...";
  display: inline-block;
  padding-left: 20px;
  line-height: 16px;
  font-size: 13px;
  font-variant: small-caps;
  color: #999;
  background: transparent url(../img/loading.html) top left no-repeat; }

.file-object {
  margin: 0 0 -5px 0;
  padding: 0; }

.btn-file {
  overflow: hidden; }

.btn-file input[type=file] {
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  text-align: right;
  opacity: 0;
  background: none repeat scroll 0 0 transparent;
  cursor: inherit;
  display: block; }

.btn-file ::-ms-browse {
  font-size: 10000px;
  width: 100%;
  height: 100%; }

.file-caption .file-caption-name {
  width: 100%;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  background: none;
  outline: none; }
  html.safari .file-caption .file-caption-name {
    margin-top: -4px; }

.file-caption.icon-visible .file-caption-icon {
  display: inline-block; }

.file-caption.icon-visible .file-caption-name {
  padding-left: 15px; }

.file-caption-icon {
  line-height: 1;
  left: 8px; }

.file-error-message {
  color: #a94442;
  background-color: #f2dede;
  margin: 5px;
  border: 1px solid #ebccd1;
  border-radius: 4px;
  padding: 15px; }

.file-error-message pre {
  margin: 5px 0; }

.file-caption-disabled {
  background-color: #eee;
  cursor: not-allowed;
  opacity: 1; }

.file-preview {
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 8px;
  width: 100%;
  margin-bottom: 5px; }

.file-preview .btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

.file-preview .fileinput-remove {
  top: 1px;
  right: 1px;
  line-height: 10px; }

.file-preview .clickable {
  cursor: pointer; }

.file-preview-image {
  font: 40px Impact, Charcoal, sans-serif;
  color: #008000; }

.krajee-default.file-preview-frame {
  margin: 8px;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 5px 0 #a2958a;
  padding: 6px;
  float: left;
  text-align: center; }

.krajee-default.file-preview-frame .kv-file-content {
  width: 213px;
  height: 160px; }

.krajee-default.file-preview-frame .file-thumbnail-footer {
  height: 70px; }

.krajee-default.file-preview-frame:not(.file-preview-error):hover {
  box-shadow: 3px 3px 5px 0 #333; }

.krajee-default .file-preview-text {
  display: block;
  color: #428bca;
  border: 1px solid #ddd;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  outline: none;
  padding: 8px;
  resize: none; }

.krajee-default .file-preview-html {
  border: 1px solid #ddd;
  padding: 8px;
  overflow: auto; }

.krajee-default .file-other-icon {
  font-size: 6em; }

.krajee-default .file-footer-buttons {
  float: right; }

.krajee-default .file-footer-caption {
  display: block;
  text-align: center;
  padding-top: 4px;
  font-size: 11px;
  color: #777;
  margin-bottom: 15px; }

.krajee-default .file-preview-error {
  opacity: 0.65;
  box-shadow: none; }

.krajee-default .file-thumb-progress {
  height: 11px;
  top: 37px;
  left: 0;
  right: 0; }

.krajee-default.kvsortable-ghost {
  background: #e1edf7;
  border: 2px solid #a1abff; }

.krajee-default .file-preview-other:hover {
  opacity: 0.8; }

.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
  color: #000; }

.kv-upload-progress .progress {
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
  overflow: hidden; }

.kv-upload-progress .progress-bar {
  height: 20px;
  line-height: 20px; }

/*noinspection CssOverwrittenProperties*/
.file-zoom-dialog .file-other-icon {
  font-size: 22em;
  font-size: 50vmin; }

.file-zoom-dialog .modal-dialog {
  width: auto; }

.file-zoom-dialog .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.file-zoom-dialog .btn-navigate {
  padding: 0;
  margin: 0;
  background: transparent;
  text-decoration: none;
  outline: none;
  opacity: 0.7;
  top: 45%;
  font-size: 4em;
  color: #1c94c4; }

.file-zoom-dialog .btn-navigate:not([disabled]):hover {
  outline: none;
  box-shadow: none;
  opacity: 0.6; }

.file-zoom-dialog .floating-buttons {
  top: 5px;
  right: 10px; }

.file-zoom-dialog .btn-navigate[disabled] {
  opacity: 0.3; }

.file-zoom-dialog .btn-prev {
  left: 1px; }

.file-zoom-dialog .btn-next {
  right: 1px; }

.file-zoom-dialog .kv-zoom-title {
  font-weight: 300;
  color: #999;
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.file-input-new .no-browse .form-control {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.file-input-ajax-new .no-browse .form-control {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.file-caption-main {
  width: 100%; }

.file-thumb-loading {
  background: transparent url(../img/loading.html) no-repeat scroll center center content-box !important; }

.file-drop-zone {
  border: 1px dashed #aaa;
  border-radius: 4px;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  margin: 12px 15px 12px 12px;
  padding: 5px; }

.file-drop-zone.clickable:hover {
  border: 2px dashed #999; }

.file-drop-zone.clickable:focus {
  border: 2px solid #5acde2; }

.file-drop-zone .file-preview-thumbnails {
  cursor: default; }

.file-drop-zone-title {
  color: #aaa;
  font-size: 1.6em;
  padding: 85px 10px;
  cursor: default; }

.file-highlighted {
  border: 2px dashed #999 !important;
  background-color: #eee; }

.file-uploading {
  background: url(../img/loading-sm.html) no-repeat center bottom 10px;
  opacity: 0.65; }

@media (min-width: 576px) {
  .file-zoom-dialog .modal-dialog {
    max-width: 500px; } }

@media (min-width: 992px) {
  .file-zoom-dialog .modal-lg {
    max-width: 800px; } }

.file-zoom-fullscreen.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.file-zoom-fullscreen .modal-dialog {
  position: fixed;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%; }

.file-zoom-fullscreen .modal-content {
  border-radius: 0;
  box-shadow: none; }

.file-zoom-fullscreen .modal-body {
  overflow-y: auto; }

.btn-kv {
  display: inline-block;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  font-size: 0.875rem;
  border-radius: 0.2rem; }

.floating-buttons {
  z-index: 3000; }

.floating-buttons .btn-kv {
  margin-left: 3px;
  z-index: 3000; }

.file-zoom-content {
  height: 480px;
  text-align: center; }

.file-zoom-content .file-preview-image {
  max-height: 100%; }

.file-zoom-content .file-preview-video {
  max-height: 100%; }

.file-zoom-content .is-portrait-gt4 {
  margin-top: 60px; }

.file-zoom-content > .file-object.type-image {
  height: auto;
  min-height: inherit; }

.file-zoom-content > .file-object.type-audio {
  width: auto;
  height: 30px; }

@media screen and (max-width: 767px) {
  .file-preview-thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .file-zoom-dialog .modal-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; } }

@media screen and (max-width: 350px) {
  .krajee-default.file-preview-frame .kv-file-content {
    width: 160px; } }

.file-loading[dir=rtl]:before {
  background: transparent url(../img/loading.html) top right no-repeat;
  padding-left: 0;
  padding-right: 20px; }

.file-sortable .file-drag-handle {
  cursor: move;
  opacity: 1; }

.file-sortable .file-drag-handle:hover {
  opacity: 0.7; }

.clickable .file-drop-zone-title {
  cursor: pointer; }

.kv-zoom-actions .btn-kv {
  margin-left: 3px; }

.file-preview-initial.sortable-chosen {
  background-color: #d9edf7; }

/**
 * pretty-checkbox.css
 *
 * A pure CSS library to beautify checkbox and radio buttons
 *
 * Source: https://github.com/lokesh-coder/pretty-checkbox
 * Demo: https://lokesh-coder.github.io/pretty-checkbox
 *
 * Copyright (c) 2017 Lokesh rajendran
 */
.pretty * {
  box-sizing: border-box; }

.pretty input:not([type='checkbox']):not([type='radio']) {
  display: none; }

.pretty {
  position: relative;
  display: inline-block;
  margin-right: 1em;
  white-space: nowrap;
  line-height: 1; }

.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer; }

.pretty .state label {
  position: initial;
  display: inline-block;
  font-weight: normal;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px); }

.pretty .state label:before,
.pretty .state label:after {
  content: '';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: calc((0% - (100% - 1em)) - 8%);
  background-color: transparent; }

.pretty .state label:before {
  border-color: #bdc3c7; }

.pretty .state.p-is-hover,
.pretty .state.p-is-indeterminate {
  display: none; }

@-webkit-keyframes zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); } }

@keyframes zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); } }

@-webkit-keyframes tada {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    -webkit-transform: scale(7);
    transform: scale(7); }
  38% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  55% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1.5);
    transform: scale(1.5); }
  72% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1); }
  81% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1.24);
    transform: scale(1.24); }
  89% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1); }
  95% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1.04);
    transform: scale(1.04); }
  100% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes tada {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    -webkit-transform: scale(7);
    transform: scale(7); }
  38% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  55% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1.5);
    transform: scale(1.5); }
  72% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1); }
  81% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1.24);
    transform: scale(1.24); }
  89% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1); }
  95% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(1.04);
    transform: scale(1.04); }
  100% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes jelly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1); }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes jelly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1); }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes rotate {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-200px) rotate(-45deg);
    transform: translateZ(-200px) rotate(-45deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0) rotate(0);
    transform: translateZ(0) rotate(0); } }

@keyframes rotate {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-200px) rotate(-45deg);
    transform: translateZ(-200px) rotate(-45deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0) rotate(0);
    transform: translateZ(0) rotate(0); } }

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 0px #bdc3c7; }
  100% {
    box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); } }

@keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 0px #bdc3c7; }
  100% {
    box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); } }

.pretty.p-default.p-fill .state label:after {
  -webkit-transform: scale(1);
  transform: scale(1); }

.pretty.p-default .state label:after {
  -webkit-transform: scale(0.6);
  transform: scale(0.6); }

.pretty.p-default input:checked ~ .state label:after {
  background-color: #bdc3c7 !important; }

.pretty.p-default.p-thick .state label:before,
.pretty.p-default.p-thick .state label:after {
  border-width: calc(1em / 7); }

.pretty.p-default.p-thick .state label:after {
  -webkit-transform: scale(0.4) !important;
  transform: scale(0.4) !important; }

.pretty.p-icon .state .icon {
  position: absolute;
  font-size: 1em;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  left: 0;
  z-index: 1;
  text-align: center;
  line-height: normal;
  top: calc((0% - (100% - 1em)) - 8%);
  border: 1px solid transparent;
  opacity: 0; }

.pretty.p-icon .state .icon:before {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1; }

.pretty.p-icon input:checked ~ .state .icon {
  opacity: 1; }

.pretty.p-icon input:checked ~ .state label:before {
  border-color: #5a656b; }

.pretty.p-svg .state .svg {
  position: absolute;
  font-size: 1em;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  left: 0;
  z-index: 1;
  text-align: center;
  line-height: normal;
  top: calc((0% - (100% - 1em)) - 8%);
  border: 1px solid transparent;
  opacity: 0; }

.pretty.p-svg .state svg {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1; }

.pretty.p-svg input:checked ~ .state .svg {
  opacity: 1; }

.pretty.p-image .state img {
  opacity: 0;
  position: absolute;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  top: 0;
  top: calc((0% - (100% - 1em)) - 8%);
  left: 0;
  z-index: 0;
  text-align: center;
  line-height: normal;
  -webkit-transform: scale(0.8);
  transform: scale(0.8); }

.pretty.p-image input:checked ~ .state img {
  opacity: 1; }

.pretty.p-switch input {
  min-width: 2em; }

.pretty.p-switch .state {
  position: relative; }

.pretty.p-switch .state:before {
  content: '';
  border: 1px solid #bdc3c7;
  border-radius: 60px;
  width: 2em;
  box-sizing: unset;
  height: calc(1em + 2px);
  position: absolute;
  top: 0;
  top: calc((0% - (100% - 1em)) - 16%);
  z-index: 0;
  transition: all 0.5s ease; }

.pretty.p-switch .state label {
  text-indent: 2.5em; }

.pretty.p-switch .state label:before,
.pretty.p-switch .state label:after {
  transition: all 0.5s ease;
  border-radius: 100%;
  left: 0;
  border-color: transparent;
  -webkit-transform: scale(0.8);
  transform: scale(0.8); }

.pretty.p-switch .state label:after {
  background-color: #bdc3c7 !important; }

.pretty.p-switch input:checked ~ .state:before {
  border-color: #5a656b; }

.pretty.p-switch input:checked ~ .state label:before {
  opacity: 0; }

.pretty.p-switch input:checked ~ .state label:after {
  background-color: #5a656b !important;
  left: 1em; }

.pretty.p-switch.p-fill input:checked ~ .state:before {
  border-color: #5a656b;
  background-color: #5a656b !important; }

.pretty.p-switch.p-fill input:checked ~ .state label:before {
  opacity: 0; }

.pretty.p-switch.p-fill input:checked ~ .state label:after {
  background-color: #fff !important;
  left: 1em; }

.pretty.p-switch.p-slim .state:before {
  height: 0.1em;
  background: #bdc3c7 !important;
  top: calc(50% - 0.1em); }

.pretty.p-switch.p-slim input:checked ~ .state:before {
  border-color: #5a656b;
  background-color: #5a656b !important; }

.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {
  display: none; }

.pretty.p-has-hover input:hover ~ .state.p-is-hover {
  display: block; }

.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {
  display: block; }

.pretty.p-has-focus input:focus ~ .state label:before {
  box-shadow: 0px 0px 3px 0px #bdc3c7; }

.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {
  display: none; }

.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {
  display: block; }

.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {
  display: block;
  opacity: 1; }

.pretty.p-toggle .state.p-on {
  opacity: 0;
  display: none; }

.pretty.p-toggle .state.p-off,
.pretty.p-toggle .state .icon,
.pretty.p-toggle .state .svg,
.pretty.p-toggle .state img {
  opacity: 1;
  display: inherit; }

.pretty.p-toggle .state.p-off .icon {
  color: #bdc3c7; }

.pretty.p-toggle input:checked ~ .state.p-on {
  opacity: 1;
  display: inherit; }

.pretty.p-toggle input:checked ~ .state.p-off {
  opacity: 0;
  display: none; }

.pretty.p-plain input:checked ~ .state label:before,
.pretty.p-plain.p-toggle .state label:before {
  content: none; }

.pretty.p-plain.p-plain .icon {
  -webkit-transform: scale(1.1);
  transform: scale(1.1); }

.pretty.p-round .state label:before,
.pretty.p-round .state label:after {
  border-radius: 100%; }

.pretty.p-round.p-icon .state .icon {
  border-radius: 100%;
  overflow: hidden; }

.pretty.p-round.p-icon .state .icon:before {
  -webkit-transform: scale(0.8);
  transform: scale(0.8); }

.pretty.p-curve .state label:before,
.pretty.p-curve .state label:after {
  border-radius: 20%; }

.pretty.p-smooth label:before,
.pretty.p-smooth label:after,
.pretty.p-smooth .icon,
.pretty.p-smooth .svg {
  transition: all 0.5s ease; }

.pretty.p-smooth input:checked + .state label:after {
  transition: all 0.3s ease; }

.pretty.p-smooth input:checked + .state .icon,
.pretty.p-smooth input:checked + .state .svg,
.pretty.p-smooth input:checked + .state img {
  -webkit-animation: zoom 0.2s ease;
  animation: zoom 0.2s ease; }

.pretty.p-smooth.p-default input:checked + .state label:after {
  -webkit-animation: zoom 0.2s ease;
  animation: zoom 0.2s ease; }

.pretty.p-smooth.p-plain input:checked + .state label:before {
  content: '';
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: all 0.5s ease; }

.pretty.p-tada:not(.p-default) input:checked + .state .icon,
.pretty.p-tada:not(.p-default) input:checked + .state .svg,
.pretty.p-tada:not(.p-default) input:checked + .state img,
.pretty.p-tada:not(.p-default) input:checked + .state label:before,
.pretty.p-tada:not(.p-default) input:checked + .state label:after {
  -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  opacity: 1; }

.pretty.p-jelly:not(.p-default) input:checked + .state .icon,
.pretty.p-jelly:not(.p-default) input:checked + .state .svg,
.pretty.p-jelly:not(.p-default) input:checked + .state img,
.pretty.p-jelly:not(.p-default) input:checked + .state label:before,
.pretty.p-jelly:not(.p-default) input:checked + .state label:after {
  -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1; }

.pretty.p-jelly:not(.p-default) input:checked + .state label:before {
  border-color: transparent; }

.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,
.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,
.pretty.p-rotate:not(.p-default) input:checked ~ .state img,
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {
  -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1; }

.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {
  border-color: transparent; }

.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {
  -webkit-animation: pulse 1s;
  animation: pulse 1s; }

.pretty input[disabled] {
  cursor: not-allowed;
  display: none; }

.pretty input[disabled] ~ * {
  opacity: .5; }

.pretty.p-locked input {
  display: none;
  cursor: not-allowed; }

.pretty input:checked ~ .state.p-primary label:after,
.pretty.p-toggle .state.p-primary label:after {
  background-color: #428bca !important; }

.pretty input:checked ~ .state.p-primary .icon,
.pretty input:checked ~ .state.p-primary .svg,
.pretty.p-toggle .state.p-primary .icon,
.pretty.p-toggle .state.p-primary .svg {
  color: #fff;
  stroke: #fff; }

.pretty input:checked ~ .state.p-primary-o label:before,
.pretty.p-toggle .state.p-primary-o label:before {
  border-color: #428bca; }

.pretty input:checked ~ .state.p-primary-o label:after,
.pretty.p-toggle .state.p-primary-o label:after {
  background-color: transparent; }

.pretty input:checked ~ .state.p-primary-o .icon,
.pretty input:checked ~ .state.p-primary-o .svg,
.pretty input:checked ~ .state.p-primary-o svg,
.pretty.p-toggle .state.p-primary-o .icon,
.pretty.p-toggle .state.p-primary-o .svg,
.pretty.p-toggle .state.p-primary-o svg {
  color: #428bca;
  stroke: #428bca; }

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {
  background-color: #428bca !important; }

.pretty.p-switch input:checked ~ .state.p-primary:before {
  border-color: #428bca; }

.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {
  background-color: #428bca !important; }

.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {
  border-color: #245682;
  background-color: #245682 !important; }

.pretty input:checked ~ .state.p-info label:after,
.pretty.p-toggle .state.p-info label:after {
  background-color: #5bc0de !important; }

.pretty input:checked ~ .state.p-info .icon,
.pretty input:checked ~ .state.p-info .svg,
.pretty.p-toggle .state.p-info .icon,
.pretty.p-toggle .state.p-info .svg {
  color: #fff;
  stroke: #fff; }

.pretty input:checked ~ .state.p-info-o label:before,
.pretty.p-toggle .state.p-info-o label:before {
  border-color: #5bc0de; }

.pretty input:checked ~ .state.p-info-o label:after,
.pretty.p-toggle .state.p-info-o label:after {
  background-color: transparent; }

.pretty input:checked ~ .state.p-info-o .icon,
.pretty input:checked ~ .state.p-info-o .svg,
.pretty input:checked ~ .state.p-info-o svg,
.pretty.p-toggle .state.p-info-o .icon,
.pretty.p-toggle .state.p-info-o .svg,
.pretty.p-toggle .state.p-info-o svg {
  color: #5bc0de;
  stroke: #5bc0de; }

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {
  background-color: #5bc0de !important; }

.pretty.p-switch input:checked ~ .state.p-info:before {
  border-color: #5bc0de; }

.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {
  background-color: #5bc0de !important; }

.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {
  border-color: #2390b0;
  background-color: #2390b0 !important; }

.pretty input:checked ~ .state.p-success label:after,
.pretty.p-toggle .state.p-success label:after {
  background-color: #5cb85c !important; }

.pretty input:checked ~ .state.p-success .icon,
.pretty input:checked ~ .state.p-success .svg,
.pretty.p-toggle .state.p-success .icon,
.pretty.p-toggle .state.p-success .svg {
  color: #fff;
  stroke: #fff; }

.pretty input:checked ~ .state.p-success-o label:before,
.pretty.p-toggle .state.p-success-o label:before {
  border-color: #5cb85c; }

.pretty input:checked ~ .state.p-success-o label:after,
.pretty.p-toggle .state.p-success-o label:after {
  background-color: transparent; }

.pretty input:checked ~ .state.p-success-o .icon,
.pretty input:checked ~ .state.p-success-o .svg,
.pretty input:checked ~ .state.p-success-o svg,
.pretty.p-toggle .state.p-success-o .icon,
.pretty.p-toggle .state.p-success-o .svg,
.pretty.p-toggle .state.p-success-o svg {
  color: #5cb85c;
  stroke: #5cb85c; }

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {
  background-color: #5cb85c !important; }

.pretty.p-switch input:checked ~ .state.p-success:before {
  border-color: #5cb85c; }

.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {
  background-color: #5cb85c !important; }

.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {
  border-color: #357935;
  background-color: #357935 !important; }

.pretty input:checked ~ .state.p-warning label:after,
.pretty.p-toggle .state.p-warning label:after {
  background-color: #f0ad4e !important; }

.pretty input:checked ~ .state.p-warning .icon,
.pretty input:checked ~ .state.p-warning .svg,
.pretty.p-toggle .state.p-warning .icon,
.pretty.p-toggle .state.p-warning .svg {
  color: #fff;
  stroke: #fff; }

.pretty input:checked ~ .state.p-warning-o label:before,
.pretty.p-toggle .state.p-warning-o label:before {
  border-color: #f0ad4e; }

.pretty input:checked ~ .state.p-warning-o label:after,
.pretty.p-toggle .state.p-warning-o label:after {
  background-color: transparent; }

.pretty input:checked ~ .state.p-warning-o .icon,
.pretty input:checked ~ .state.p-warning-o .svg,
.pretty input:checked ~ .state.p-warning-o svg,
.pretty.p-toggle .state.p-warning-o .icon,
.pretty.p-toggle .state.p-warning-o .svg,
.pretty.p-toggle .state.p-warning-o svg {
  color: #f0ad4e;
  stroke: #f0ad4e; }

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {
  background-color: #f0ad4e !important; }

.pretty.p-switch input:checked ~ .state.p-warning:before {
  border-color: #f0ad4e; }

.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {
  background-color: #f0ad4e !important; }

.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {
  border-color: #c77c11;
  background-color: #c77c11 !important; }

.pretty input:checked ~ .state.p-danger label:after,
.pretty.p-toggle .state.p-danger label:after {
  background-color: #d9534f !important; }

.pretty input:checked ~ .state.p-danger .icon,
.pretty input:checked ~ .state.p-danger .svg,
.pretty.p-toggle .state.p-danger .icon,
.pretty.p-toggle .state.p-danger .svg {
  color: #fff;
  stroke: #fff; }

.pretty input:checked ~ .state.p-danger-o label:before,
.pretty.p-toggle .state.p-danger-o label:before {
  border-color: #d9534f; }

.pretty input:checked ~ .state.p-danger-o label:after,
.pretty.p-toggle .state.p-danger-o label:after {
  background-color: transparent; }

.pretty input:checked ~ .state.p-danger-o .icon,
.pretty input:checked ~ .state.p-danger-o .svg,
.pretty input:checked ~ .state.p-danger-o svg,
.pretty.p-toggle .state.p-danger-o .icon,
.pretty.p-toggle .state.p-danger-o .svg,
.pretty.p-toggle .state.p-danger-o svg {
  color: #d9534f;
  stroke: #d9534f; }

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {
  background-color: #d9534f !important; }

.pretty.p-switch input:checked ~ .state.p-danger:before {
  border-color: #d9534f; }

.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {
  background-color: #d9534f !important; }

.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {
  border-color: #a02622;
  background-color: #a02622 !important; }

.pretty.p-bigger label:before,
.pretty.p-bigger label:after,
.pretty.p-bigger .icon,
.pretty.p-bigger .svg,
.pretty.p-bigger .img {
  font-size: 1.2em !important;
  top: calc((0% - (100% - 1em)) - 35%) !important; }

.pretty.p-bigger label {
  text-indent: 1.7em; }

@media print {
  .pretty .state:before,
  .pretty .state label:before,
  .pretty .state label:after,
  .pretty .state .icon {
    color-adjust: exact;
    /* stylelint-disable */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; } }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a:active, a:selected, a:visited {
  outline: none; }

a:hover {
  text-decoration: none; }

a:focus,
.btn:focus,
.bootstrap-select .btn:focus {
  outline: none !important; }

*:focus,
:root input:focus {
  /*remove dot for ie8-9*/
  outline: none;
  border: none; }

textarea {
  resize: none; }

blockquote {
  border: none; }

blockquote small:before {
  content: none; }

label, input, button, select, textarea, input {
  font-family: "THSarabunNew", Arial, Thonburi;
  font-weight: bold; }

input[type="date"]::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; }

/*Hide Spinner in Input Number*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

address {
  margin-bottom: 10px; }

body:before,
body:after {
  display: table;
  content: ""; }

body:after {
  clear: both; }

ul {
  margin-bottom: 0; }

li.clearfix:after {
  display: inline; }

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  /* mobile firefox too! */ }

input::-ms-clear {
  width: 0;
  height: 0; }

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

@font-face {
  font-family: 'THSarabunNew';
  src: url("../fonts/font-face/thsarabunnew_bolditalic-webfont.eot");
  src: url("../fonts/font-face/thsarabunnew_bolditalic-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/font-face/thsarabunnew_bolditalic-webfont.woff") format("woff"), url("../fonts/font-face/thsarabunnew_bolditalic-webfont.ttf") format("truetype"), url("../fonts/font-face/thsarabunnew_bolditalic-webfont.svg#THSarabunNew") format("svg");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'THSarabunNew';
  src: url("../fonts/font-face/thsarabunnew_italic-webfont.eot");
  src: url("../fonts/font-face/thsarabunnew_italic-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/font-face/thsarabunnew_italic-webfont.woff") format("woff"), url("../fonts/font-face/thsarabunnew_italic-webfont.ttf") format("truetype"), url("../fonts/font-face/thsarabunnew_italic-webfont.svg#THSarabunNew") format("svg");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'THSarabunNew';
  src: url("../fonts/font-face/thsarabunnew_bold-webfont.eot");
  src: url("../fonts/font-face/thsarabunnew_bold-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/font-face/thsarabunnew_bold-webfont.woff") format("woff"), url("../fonts/font-face/thsarabunnew_bold-webfont.ttf") format("truetype"), url("../fonts/font-face/thsarabunnew_bold-webfont.svg#THSarabunNew") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'thaisans';
  src: url("../fonts/font-face/thaisansneue-extralight-webfont.eot");
  src: url("../fonts/font-face/thaisansneue-extralight-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/font-face/thaisansneue-extralight-webfont.html") format("woff2"), url("../fonts/font-face/thaisansneue-extralight-webfont.woff") format("woff"), url("../fonts/font-face/thaisansneue-extralight-webfont.ttf") format("truetype"), url("../fonts/font-face/thaisansneue-extralight-webfont.svg#thaisans") format("svg");
  font-weight: lighter;
  font-style: normal; }

@font-face {
  font-family: 'thaisans';
  src: url("../fonts/font-face/thaisansneue-regular-webfont.eot");
  src: url("../fonts/font-face/thaisansneue-regular-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/font-face/thaisansneue-regular-webfont.html") format("woff2"), url("../fonts/font-face/thaisansneue-regular-webfont.woff") format("woff"), url("../fonts/font-face/thaisansneue-regular-webfont.ttf") format("truetype"), url("../fonts/font-face/thaisansneue-regular-webfont.svg#thaisans") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'thaisans';
  src: url("../fonts/font-face/thaisansneue-bold-webfont.eot");
  src: url("../fonts/font-face/thaisansneue-bold-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/font-face/thaisansneue-bold-webfont.html") format("woff2"), url("../fonts/font-face/thaisansneue-bold-webfont.woff") format("woff"), url("../fonts/font-face/thaisansneue-bold-webfont.ttf") format("truetype"), url("../fonts/font-face/thaisansneue-bold-webfont.svg#thaisans") format("svg");
  font-weight: bold;
  font-style: normal; }

html {
  min-width: 320px;
  font-size: 62.5%;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden !important; }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #ffffff;
  color: #555555;
  font-family: "THSarabunNew", Arial, Thonburi;
  font-weight: bold;
  font-size: 15px;
  font-size: 1.5rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

html {
  position: relative;
  min-height: 100%; }

body {
  padding-top: 70px; }
  @media only screen and (min-width: 768px) {
    body {
      margin-bottom: 950px; }
      html.desktop.mac body {
        margin-bottom: 750px; } }
  @media only screen and (min-width: 992px) {
    body {
      margin-bottom: 740px; }
      html.desktop.mac body {
        margin-bottom: 705px; } }
  @media only screen and (min-width: 1200px) {
    body {
      padding-top: 80px; } }

#main {
  overflow-x: hidden !important; }

#footer {
  position: relative;
  z-index: 10; }
  @media only screen and (min-width: 768px) {
    #footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200px; }
      html.desktop.mac #footer {
        height: 200px; } }
  @media only screen and (min-width: 992px) {
    #footer {
      height: 200px;
      overflow: hidden; }
      html.desktop.mac #footer {
        height: 200px; } }

html.chrome.ios.mobile,
html.chrome.ios.mobile body {
  height: 100%; }

.disable-hover,
.disable-hover * {
  pointer-events: none !important; }

html.touch .disable-focus:hover {
  pointer-events: none !important; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  background-color: #FFFFFF !important;
  color: #555 !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #555555 !important; }

#header {
  position: absolute;
  z-index: 999;
  left: 0;
  width: 100%;
  top: 0; }
  @media only screen and (min-width: 1200px) {
    #header {
      height: 80px; }
      #header.headroom--pinned {
        -webkit-transform: translateY(0);
                transform: translateY(0); }
      #header.headroom--unpinned {
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        height: inherit; }
      #header.headroom {
        transition: -webkit-transform .25s ease-in-out;
        transition: transform .25s ease-in-out;
        transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
        will-change: transform; }
      #header.have-submenu {
        height: 160px;
        background-color: #222222;
        transition: height 0.5s;
        overflow: hidden; } }
  #header.header--fixed {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999 !important; }
    @media only screen and (min-width: 1200px) {
      #header.header--fixed {
        z-index: 10;
        box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1); } }
  #header.expand-menu {
    height: 100%; }
  @media only screen and (max-width: 1199px) {
    #header {
      height: 70px; } }
  @media only screen and (max-width: 1199px) {
    #header a.btn-search.-mobile {
      position: absolute;
      right: 0;
      top: 0;
      margin-top: 17px;
      margin-right: 90px; } }
  @media only screen and (max-width: 767px) {
    #header a.btn-search.-mobile {
      margin-right: 70px; } }

#menu {
  background-color: #ffffff;
  font-family: "thaisans";
  font-weight: normal;
  font-size: 21px;
  font-size: 2.1rem;
  height: 80px;
  margin-bottom: 0; }
  html.desktop.mac #menu {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500; }
  @media only screen and (max-width: 1199px) {
    #menu {
      height: 70px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
      font-size: 27px;
      font-size: 2.7rem; }
      html.desktop.mac #menu {
        font-size: 21px;
        font-size: 2.1rem; } }
  @media only screen and (min-width: 1200px) {
    #menu .container-full {
      width: 100% !important;
      padding-left: 40px;
      padding-right: 40px; }
      #menu .container-full .navbar-collapse {
        padding: 0; } }
  #menu a {
    color: #222222; }
  #menu .container > .navbar-collapse {
    margin: 0; }
    @media only screen and (min-width: 1200px) {
      #menu .container > .navbar-collapse {
        padding: 0; } }
  #menu.navbar-default {
    border: none;
    border-radius: 0px 0px; }
    #menu.navbar-default .navbar-nav {
      z-index: 10; }
      #menu.navbar-default .navbar-nav .icon {
        float: right; }
        @media only screen and (min-width: 1200px) {
          #menu.navbar-default .navbar-nav .icon {
            display: none !important; } }
      #menu.navbar-default .navbar-nav .sub-menu {
        display: none;
        padding: 0;
        font-size: 23px;
        font-size: 2.3rem; }
        html.desktop.mac #menu.navbar-default .navbar-nav .sub-menu {
          font-size: 17px;
          font-size: 1.7rem; }
        @media only screen and (min-width: 1200px) {
          #menu.navbar-default .navbar-nav .sub-menu {
            list-style: none;
            position: absolute;
            z-index: 999;
            left: 0;
            height: 80px;
            white-space: nowrap;
            font-size: 21px;
            font-size: 2.1rem; }
            html.desktop.mac #menu.navbar-default .navbar-nav .sub-menu {
              font-size: 16px;
              font-size: 1.6rem; } }
        #menu.navbar-default .navbar-nav .sub-menu li {
          padding: 10px 0px;
          list-style: none; }
          @media only screen and (max-width: 1199px) {
            #menu.navbar-default .navbar-nav .sub-menu li.current a {
              color: #34A93E; } }
          @media only screen and (min-width: 1200px) {
            #menu.navbar-default .navbar-nav .sub-menu li.current a {
              position: relative;
              color: #34A93E; }
              #menu.navbar-default .navbar-nav .sub-menu li.current a:after {
                content: " ";
                position: absolute;
                z-index: 1;
                bottom: 0;
                height: 5px;
                background-color: #34A93E;
                left: 0;
                width: 100%; } }
          @media only screen and (min-width: 1200px) {
            #menu.navbar-default .navbar-nav .sub-menu li {
              display: table-cell;
              vertical-align: middle;
              height: 100%;
              padding: 0;
              display: -webkit-inline-box;
              display: -ms-inline-flexbox;
              display: inline-flex;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center; }
              #menu.navbar-default .navbar-nav .sub-menu li > a {
                color: white;
                padding: 10px 0px;
                margin-left: 15px;
                margin-right: 15px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                height: 100%;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center; }
                #menu.navbar-default .navbar-nav .sub-menu li > a:hover {
                  color: #34A93E; }
              #menu.navbar-default .navbar-nav .sub-menu li.active > a {
                color: #34A93E; } }
          @media only screen and (max-width: 1199px) {
            #menu.navbar-default .navbar-nav .sub-menu li {
              padding: 5px 0px; }
              #menu.navbar-default .navbar-nav .sub-menu li:first-child {
                padding-top: 0; }
              #menu.navbar-default .navbar-nav .sub-menu li:last-child {
                padding-bottom: 0; } }
        #menu.navbar-default .navbar-nav .sub-menu a:hover {
          color: #34A93E; }
      @media only screen and (min-width: 1200px) {
        body.th #menu.navbar-default .navbar-nav li.menu-aboutus.active .sub-menu {
          margin-left: -145px;
          display: inline-block !important; }
        body.en #menu.navbar-default .navbar-nav li.menu-aboutus.active .sub-menu {
          margin-left: -108px;
          display: inline-block !important; }
        body.th #menu.navbar-default .navbar-nav li.menu-service.active .sub-menu {
          margin-left: -168px;
          display: inline-block !important; }
        body.en #menu.navbar-default .navbar-nav li.menu-service.active .sub-menu {
          margin-left: -158px;
          display: inline-block !important; }
        body.th #menu.navbar-default .navbar-nav li.menu-article.active .sub-menu {
          margin-left: -88px;
          display: inline-block !important; }
        body.en #menu.navbar-default .navbar-nav li.menu-article.active .sub-menu {
          margin-left: -52px;
          display: inline-block !important; } }
      @media only screen and (max-width: 1199px) {
        #menu.navbar-default .navbar-nav > li {
          border-bottom: 1px solid #333333; } }
      @media only screen and (min-width: 1200px) {
        #menu.navbar-default .navbar-nav > li.active {
          position: relative; } }
      #menu.navbar-default .navbar-nav > li.active .sub-menu {
        display: table;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        @media only screen and (max-width: 1199px) {
          #menu.navbar-default .navbar-nav > li.active .sub-menu {
            display: block;
            padding: 20px 20px;
            border-top: 1px solid #333333; } }
      #menu.navbar-default .navbar-nav > li > a {
        margin: 10px 15px;
        padding: 0; }
        @media only screen and (max-width: 1199px) {
          #menu.navbar-default .navbar-nav > li > a {
            margin: 0;
            padding: 15px 0px; } }
        #menu.navbar-default .navbar-nav > li > a:hover {
          color: #34A93E; }
      #menu.navbar-default .navbar-nav > .active > a {
        color: #34A93E;
        background-color: transparent;
        background-color: transparent; }
    @media only screen and (min-width: 1200px) {
      #menu.navbar-default .nav-tool > li {
        margin-left: 10px;
        float: left; } }
    #menu.navbar-default .nav-tool > li > a {
      margin: 0;
      background-color: transparent;
      background-color: transparent; }
    #menu.navbar-default a.btn-search {
      margin: 0;
      background-color: #666666 !important;
      transition: all 0.3s; }
      #menu.navbar-default a.btn-search:hover {
        background-color: #34A93E !important; }
  #menu .navbar-brand {
    padding: 12px 0px;
    height: 100%;
    max-width: 85px;
    position: relative;
    z-index: 99;
    margin-left: 0;
    margin-top: 5px; }
    @media only screen and (max-width: 1199px) {
      #menu .navbar-brand {
        padding: 7px 0px;
        max-width: 74px;
        margin-top: 8px; } }
  #menu .group-nav {
    margin-top: 18px;
    position: relative;
    z-index: 9999999;
    margin-right: 0; }
    @media only screen and (min-width: 1200px) {
      #menu .group-nav {
        margin-top: 20px;
        padding-right: 230px; }
        body.en #menu .group-nav {
          padding-right: 243px; } }
  @media only screen and (min-width: 1200px) {
    #menu .navbar-header {
      height: 70px; } }
  @media only screen and (max-width: 1199px) {
    #menu .navbar-header {
      width: 50%;
      margin-left: 0px; } }
  #menu .navbar-toggle {
    z-index: 999;
    margin-top: 7px;
    position: absolute;
    right: 0px; }

@media only screen and (max-width: 1199px) {
  #navbar {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    border: none;
    padding: 0px 35px;
    box-shadow: none; }
    #navbar a {
      color: white;
      position: relative;
      z-index: 10; }
    #navbar:before {
      content: " ";
      position: fixed;
      left: 0;
      top: 0;
      z-index: -1;
      display: block;
      background-image: url("../img/mock-pc.jpg");
      background-size: cover;
      background-position: center center;
      width: 100%;
      height: 100%; }
    #navbar:after {
      content: " ";
      display: block;
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      background-color: rgba(17, 17, 17, 0.85); } }

@media only screen and (max-width: 991px) {
  #navbar:before {
    background-image: url("../img/mock-mobile.jpg"); } }

@media only screen and (max-width: 543px) {
  #navbar {
    padding: 0px 25px;
    overflow: hidden; } }

#header #sticky-wrapper .button-mobile {
  height: 70px !important;
  width: 100%;
  position: absolute; }
  @media only screen and (max-width: 1199px) {
    #header #sticky-wrapper .button-mobile {
      right: 24px !important;
      width: 55px !important; }
      #header #sticky-wrapper .button-mobile .container {
        width: 100%;
        padding: 0; } }
  @media only screen and (max-width: 767px) {
    #header #sticky-wrapper .button-mobile {
      right: 10px !important; } }

.is-sticky .button-mobile {
  z-index: 999999 !important; }

.is-sticky #nav-icon {
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.1);
  background-color: white;
  width: 55px !important;
  height: 55px !important; }
  .is-sticky #nav-icon.open {
    background-color: transparent;
    background-color: transparent;
    box-shadow: none; }

#nav-icon.search-open {
  z-index: 99; }
  #nav-icon.search-open .border-bar {
    background: white; }

#nav-search.search-open {
  z-index: 99; }
  #nav-search.search-open .icon-search {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-close-white.png") center center no-repeat;
    background-size: 17px 16px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 17px;
    height: 16px;
    vertical-align: middle; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      #nav-search.search-open .icon-search {
        background: url("../img/icon/icon-close-white%402x.png") center center no-repeat;
        background-size: 17px 16px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      #nav-search.search-open .icon-search {
        background: url("../img/icon/icon-close-white%402x.png") center center no-repeat;
        background-size: 17px 16px; } }

@media only screen and (min-width: 1200px) {
  .nav-wrap {
    display: inline-block;
    float: left; } }

.nav-wrap .group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

*:first-child + html .nav-wrap .group {
  zoom: 1; }

/* IE7 */
@media only screen and (max-width: 1199px) {
  #magic-line {
    display: none !important; } }

#menu-indicator {
  position: relative;
  margin: 0; }
  #menu-indicator .current_page_item > a {
    color: #34A93E; }
  @media only screen and (max-width: 1199px) {
    #menu-indicator > li {
      display: block; } }
  #menu-indicator > li > a {
    display: block; }
    @media only screen and (min-width: 1200px) {
      #menu-indicator > li > a {
        height: 40px; } }

#magic-line {
  position: absolute;
  z-index: -1;
  bottom: 0px;
  left: 0;
  width: 100px;
  height: 5px;
  background: #34A93E; }
  @media only screen and (max-width: 1199px) {
    #magic-line {
      display: none; } }

@media only screen and (min-width: 1200px) {
  .nav-tool {
    right: 0;
    position: absolute; } }

@media only screen and (max-width: 1199px) {
  .nav-tool {
    margin-top: 30px;
    margin-bottom: 30px;
    white-space: nowrap; } }

.nav-tool > li {
  display: inline-block;
  vertical-align: top;
  height: 50px;
  border: 1px solid white;
  position: relative;
  z-index: 10; }
  @media only screen and (max-width: 1199px) {
    .nav-tool > li.open > a {
      color: #34A93E !important; } }
  @media only screen and (min-width: 1200px) {
    .nav-tool > li {
      background-color: white;
      border: 1px solid #CCCCCC;
      height: 38px; }
      .nav-tool > li a.btn-tool:hover {
        color: #34A93E !important; } }
  @media only screen and (max-width: 1199px) {
    .nav-tool > li + li {
      margin-left: 16px; } }

.nav-tool.-language {
  margin-top: 0px;
  margin-bottom: 25px;
  overflow: hidden;
  max-width: calc(100% - 55px); }
  @media only screen and (min-width: 992px) {
    .nav-tool.-language {
      max-width: calc(100% - 80px); } }
  .nav-tool.-language > li {
    height: 40px;
    float: left; }
  .nav-tool.-language a {
    padding-top: 5px !important;
    padding-bottom: 5px;
    vertical-align: top;
    line-height: 1; }
  html.desktop.mac .nav-tool.-language > a {
    padding-top: 0px !important;
    height: 100%; }

.nav-tool .dropdown {
  border-radius: 50px 50px;
  background-color: transparent;
  background-color: transparent;
  transition: width 0.3s; }
  @media only screen and (min-width: 1200px) {
    .nav-tool .dropdown {
      width: 72px; } }
  @media only screen and (max-width: 1199px) {
    .nav-tool .dropdown {
      width: 115px;
      text-align: center; } }
  .nav-tool .dropdown .arrow {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/arrow-down.png") center center no-repeat;
    background-size: 15px 7px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 15px;
    height: 7px;
    background-position: center center;
    display: inline-block; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .nav-tool .dropdown .arrow {
        background: url("../img/icon/arrow-down%402x.png") center center no-repeat;
        background-size: 15px 7px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .nav-tool .dropdown .arrow {
        background: url("../img/icon/arrow-down%402x.png") center center no-repeat;
        background-size: 15px 7px; } }
    @media only screen and (max-width: 1199px) {
      .nav-tool .dropdown .arrow {
        margin-top: 5px;
        margin-left: 7px;
        background-image: url("../img/menu/arrow-down%402x.png");
        width: 17px;
        height: 10px;
        background-size: cover; } }
  .nav-tool .dropdown.open {
    border-radius: 100px 100px; }
    @media only screen and (max-width: 1199px) {
      .nav-tool .dropdown.open {
        width: 134px; } }
    @media only screen and (max-width: 1199px) {
      .nav-tool .dropdown.open .arrow {
        margin-top: 5px;
        margin-left: 4px;
        background-image: url("../img/menu/arrow-right%402x.png");
        width: 10px;
        height: 17px;
        background-size: cover; }
        html.desktop.mac .nav-tool .dropdown.open .arrow {
          margin-right: 1px; } }
    .nav-tool .dropdown.open .dropdown-menu {
      opacity: 1 !important;
      transition: opacity 2s;
      display: block !important; }
      @media only screen and (max-width: 1199px) {
        .nav-tool .dropdown.open .dropdown-menu {
          display: inline-block !important; } }
  .nav-tool .dropdown a {
    white-space: nowrap; }
    @media only screen and (min-width: 1200px) {
      .nav-tool .dropdown a {
        padding: 3px 20px; }
        html.desktop.mac .nav-tool .dropdown a {
          padding: 8px 20px; } }
    @media only screen and (max-width: 1199px) {
      .nav-tool .dropdown a {
        display: inline-block;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        padding-top: 4px; } }
  @media only screen and (max-width: 1199px) {
    html.desktop.mac .nav-tool .dropdown > a {
      padding-top: 10px !important; }
    html.desktop.mac .nav-tool .dropdown.open a {
      padding-top: 4px !important; }
    html.desktop.mac .nav-tool .dropdown.open .dropdown-menu {
      padding-top: 5px !important; } }

.nav-tool .dropdown-menu {
  box-shadow: none;
  background-color: transparent;
  background-color: transparent;
  opacity: 0;
  font-family: "thaisans";
  font-weight: normal;
  font-size: 21px;
  font-size: 2.1rem;
  border: none;
  border-radius: 0 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0; }
  html.desktop.mac .nav-tool .dropdown-menu {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500; }
  @media only screen and (min-width: 1200px) {
    .nav-tool .dropdown-menu {
      min-width: 0px;
      width: 100%;
      position: relative;
      background-color: white;
      top: 2px;
      border: 1px solid #CCCCCC;
      border-radius: 5px;
      overflow: hidden; }
      html.desktop.mac .nav-tool .dropdown-menu {
        top: inherit; }
      .headroom--unpinned .nav-tool .dropdown-menu {
        display: none; }
      .nav-tool .dropdown-menu li.selected:hover a {
        background-color: #34A93E;
        color: white !important; }
      .nav-tool .dropdown-menu li.selected a {
        background-color: #F9F9F9; } }
  @media only screen and (max-width: 1199px) {
    .nav-tool .dropdown-menu {
      position: absolute;
      right: 0px;
      top: 0px;
      min-width: auto;
      float: none;
      margin: 0 !important;
      padding: 0 !important;
      position: relative;
      font-size: 28px;
      font-size: 2.8rem; }
      html.desktop.mac .nav-tool .dropdown-menu {
        font-size: 20px;
        font-size: 2rem; }
      html.desktop.mac .nav-tool .dropdown-menu {
        height: 100%; } }
  .nav-tool .dropdown-menu a:hover, .nav-tool .dropdown-menu a:focus {
    color: #34A93E !important; }
    @media only screen and (min-width: 1200px) {
      .nav-tool .dropdown-menu a:hover, .nav-tool .dropdown-menu a:focus {
        background-color: #34A93E;
        color: white !important; } }

@media only screen and (min-width: 1200px) {
  .nav-tool .btn-tool:after {
    content: " ";
    display: block;
    height: 5px; } }

.nav-tool li.btn-click {
  border-radius: 50px 50px;
  transition: all 0.3s; }
  .nav-tool li.btn-click a {
    padding: 3px 20px; }
    html.desktop.mac .nav-tool li.btn-click a {
      padding: 8px 20px; }
  @media only screen and (max-width: 1199px) {
    .nav-tool li.btn-click {
      max-width: 414px;
      width: 100%;
      text-align: center; }
      .nav-tool li.btn-click a {
        padding-top: 4px; }
        html.desktop.mac .nav-tool li.btn-click a {
          padding-top: 10px;
          padding-bottom: 10px; } }
  .nav-tool li.btn-click:hover {
    background-color: #34A93E !important;
    border: 1px solid #34A93E; }
    .nav-tool li.btn-click:hover a {
      color: white !important; }

#footer {
  background-color: #000000; }
  @media only screen and (max-width: 767px) {
    #footer {
      padding: 30px 0px; } }
  @media only screen and (min-width: 768px) {
    #footer {
      background-repeat: no-repeat;
      background-position: right bottom;
      padding-top: 25px;
      background-size: cover; } }
  @media only screen and (min-width: 992px) {
    #footer {
      padding-top: 40px; } }
  @media only screen and (min-width: 1200px) {
    #footer {
      background-size: contain; } }
  #footer .list-logo li {
    padding-bottom: 0px; }
  #footer .breadcrumb {
    background-color: transparent;
    background-color: transparent;
    padding: 0;
    margin-bottom: 40px;
    overflow: hidden;
    font-family: "thaisans";
    font-weight: normal;
    font-size: 21px;
    font-size: 2.1rem; }
    html.desktop.mac #footer .breadcrumb {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 500; }
    html.desktop.mac #footer .breadcrumb {
      font-size: 16px;
      font-size: 1.6rem; }
    @media only screen and (max-width: 991px) {
      #footer .breadcrumb {
        margin-bottom: 25px; } }
    @media only screen and (max-width: 767px) {
      #footer .breadcrumb {
        margin-bottom: 20px; } }
    #footer .breadcrumb .insert-dotdotdot {
      max-height: 27px; }
      @media only screen and (max-width: 767px) {
        #footer .breadcrumb .insert-dotdotdot {
          max-height: 60px; } }
    #footer .breadcrumb a, #footer .breadcrumb .active {
      color: white; }
    #footer .breadcrumb li {
      padding: 2px 0px; }
    #footer .breadcrumb > li + li::before {
      content: "> ";
      color: #888888; }
  #footer .container {
    position: relative; }
  #footer .primary {
    font-family: "thaisans";
    font-weight: normal; }
    html.desktop.mac #footer .primary {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 500; }
    @media only screen and (min-width: 768px) {
      #footer .primary {
        margin-bottom: 30px; } }
    @media only screen and (min-width: 992px) {
      #footer .primary {
        margin-bottom: 30px; } }
  @media only screen and (max-width: 991px) {
    #footer .site-map {
      padding-bottom: 25px;
      margin-bottom: 35px;
      border-bottom: 1px solid #333; } }
  @media only screen and (min-width: 768px) {
    #footer .site-map .list {
      margin-top: 10px; }
      #footer .site-map .list li {
        padding: 6px 0px; } }
  @media only screen and (min-width: 992px) {
    #footer .site-map .list {
      margin-top: 20px; }
      #footer .site-map .list li {
        padding: 6px 0px; } }
  #footer .site-map .list a {
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 1.1; }
    html.desktop.mac #footer .site-map .list a {
      font-size: 16px;
      font-size: 1.6rem; }
  #footer .site-map a {
    color: white; }
    #footer .site-map a:hover, #footer .site-map a:focus {
      color: rgba(255, 255, 255, 0.7); }
  #footer .secodary {
    text-align: center;
    margin-top: 30px; }
    @media only screen and (min-width: 992px) {
      #footer .secodary {
        text-align: left;
        padding-bottom: 20px; } }
    @media only screen and (max-width: 991px) {
      #footer .secodary {
        margin-top: 40px; } }
    #footer .secodary .list {
      display: block; }
      @media only screen and (min-width: 992px) {
        #footer .secodary .list {
          display: inline;
          margin-left: 10px; } }
      #footer .secodary .list a {
        font-size: 13px;
        font-size: 1.3rem; }
        @media only screen and (max-width: 543px) {
          #footer .secodary .list a {
            font-size: 10px;
            font-size: 1rem; } }
    #footer .secodary .logo {
      margin-bottom: 35px; }
  #footer .title {
    color: white; }
    @media only screen and (max-width: 767px) {
      #footer .title {
        border-bottom: 1px solid #333333; } }
  #footer .copy {
    display: inline;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bold;
    color: white; }
    @media only screen and (max-width: 543px) {
      #footer .copy {
        font-size: 10px;
        font-size: 1rem; } }
  #footer .connect {
    text-align: center;
    max-width: 250px;
    margin: 0 auto;
    float: right; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      #footer .connect {
        max-width: 220px; } }
    @media only screen and (max-width: 991px) {
      #footer .connect {
        max-width: 280px;
        float: none; } }
    @media only screen and (max-width: 767px) {
      #footer .connect {
        margin-top: 40px; } }
    #footer .connect .newsletter {
      margin-bottom: 30px; }
      #footer .connect .newsletter .btn {
        min-width: 230px; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          #footer .connect .newsletter .btn {
            min-width: 220px; } }
    #footer .connect .btn {
      width: 100%; }
    #footer .connect .social {
      overflow: hidden; }
  #footer .list-term a {
    color: white; }
    #footer .list-term a:hover, #footer .list-term a:focus {
      color: rgba(255, 255, 255, 0.7); }
  #footer .list-social-footer {
    overflow: visible;
    white-space: nowrap;
    margin: 0;
    display: table;
    width: 100%; }
    #footer .list-social-footer li {
      vertical-align: top;
      display: table-cell;
      padding: 0px !important; }
      #footer .list-social-footer li:first-child {
        padding-left: 0 !important; }
        #footer .list-social-footer li:first-child a {
          float: left; }
      #footer .list-social-footer li:last-child {
        padding-right: 0 !important; }
        #footer .list-social-footer li:last-child a {
          float: right; }
      #footer .list-social-footer li a {
        color: white; }

#accordion-footer .panel,
#accordion-footer .panel-heading {
  background-color: transparent;
  background-color: transparent; }

#accordion-footer .panel-heading {
  padding: 15px 0px; }

#accordion-footer .panel-body {
  padding: 15px 0px; }

#accordion-footer .panel {
  border-radius: 0px 0px;
  border: none;
  border-bottom: 1px solid #333333; }
  #accordion-footer .panel + .panel {
    margin-top: 0; }

#accordion-footer .panel-title {
  font-family: "thaisans";
  font-weight: normal;
  font-size: 28px;
  font-size: 2.8rem; }
  html.desktop.mac #accordion-footer .panel-title {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 20px;
    font-size: 2rem;
    font-weight: 500; }
  #accordion-footer .panel-title > a {
    color: rgba(255, 255, 255, 0.9);
    display: block; }
  #accordion-footer .panel-title .icon-collapse {
    float: right; }

#accordion-footer .panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-color: #333333; }

#accordion-footer .list {
  padding: 0; }
  #accordion-footer .list a {
    color: white;
    padding: 10px 0px;
    display: inline-block;
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 1.1; }
    html.desktop.mac #accordion-footer .list a {
      font-size: 16px;
      font-size: 1.6rem; }

#accordion-footer .col-ss-full {
  line-height: 0; }

.icon-collapse-open .icon-down-open-big:before {
  content: '\e803'; }

.list {
  overflow: hidden;
  padding-top: 5px; }
  .list-bullet li {
    list-style: none;
    position: relative; }
    .list-bullet li:before {
      content: ' ';
      width: 4px;
      height: 4px;
      border-radius: 500px 500px;
      background-color: #555555;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px; }
  .list-bullet.-absolute li:before {
    position: absolute;
    left: -15px;
    top: 8px; }
  .list-bullet.-padding-15 {
    padding-left: 15px; }
  .list-dash {
    padding-left: 15px; }
    .list-dash li {
      position: relative; }
      .list-dash li:before {
        content: '- ';
        position: absolute;
        left: -15px;
        top: 0px; }
      .list-dash li + li {
        margin-top: 5px; }
  .list-term li {
    position: relative; }
    .list-term li:before {
      content: ' ';
      position: absolute;
      left: -3px;
      top: 3px;
      border-right: 1px solid white;
      height: 18px; }
    .list-term li:first-child:before {
      display: none; }
  .list-social-footer .icon {
    font-size: 35px;
    margin-top: 6px; }
  .list-social-footer .icon-youtube {
    margin-top: 0; }
  .list-social-footer [rel="border-circle"] {
    width: 60px;
    height: 60px;
    background-color: transparent;
    background-color: transparent;
    border-color: white; }
    @media only screen and (max-width: 991px) {
      .list-social-footer [rel="border-circle"] {
        width: 70px;
        height: 70px; } }
    .list-social-footer [rel="border-circle"]:hover {
      border: none;
      opacity: 1; }
      .list-social-footer [rel="border-circle"]:hover .icon {
        color: white; }
  .list-social-footer .-youtube:hover {
    background-color: #cd201f; }
    .list-social-footer .-youtube:hover .icon {
      color: white; }
  .list-social-footer .-twitter:hover {
    background-color: #1da1f2; }
  .list-social-footer .-facebook:hover {
    background-color: #3b5998; }
  .list-tab {
    text-align: center; }
    .list-tab li a {
      padding: 22px 25px;
      min-height: 80px;
      display: block;
      vertical-align: middle;
      color: #222222;
      position: relative;
      font-family: "thaisans";
      font-weight: lighter;
      font-size: 27px;
      font-size: 2.7rem; }
      html.desktop.mac .list-tab li a {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 21px;
        font-size: 2.1rem;
        font-weight: 200; }
      .list-tab li a.active {
        font-family: "thaisans";
        font-weight: normal;
        color: #34A93E; }
        html.desktop.mac .list-tab li a.active {
          font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
          font-weight: 500; }
      .list-tab li a:hover {
        color: #34A93E; }
      .list-tab li a.active:before {
        content: " ";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #34A93E; }
      @media only screen and (max-width: 767px) {
        .list-tab li a {
          font-size: 28px;
          font-size: 2.8rem; }
          html.desktop.mac .list-tab li a {
            font-size: 20px;
            font-size: 2rem; } }
  .list-logo li {
    vertical-align: middle;
    padding-bottom: 8px; }
    .list-logo li:first-child {
      margin-left: 0; }
    .list-logo li:last-child {
      padding-bottom: 0; }
    .list-logo li + li {
      margin-left: 25px; }
      @media only screen and (max-width: 543px) {
        .list-logo li + li {
          margin-left: 10px; } }
    .list-logo li a:hover img {
      opacity: 0.8; }
  .list-number .number {
    width: 60px;
    height: 60px;
    border-radius: 500px 500px;
    border: 1px solid #34A93E;
    color: #34A93E;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: "thaisans";
    font-weight: normal;
    font-size: 38px;
    font-size: 3.8rem;
    font-style: normal; }
    html.desktop.mac .list-number .number {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 27px;
      font-size: 2.7rem;
      font-weight: 500; }
    .page__member .list-number .number {
      border: 1px solid #555555;
      color: #555555; }
    @media only screen and (max-width: 767px) {
      .list-number .number {
        font-size: 32px;
        font-size: 3.2rem;
        width: 50px;
        height: 50px; }
        html.desktop.mac .list-number .number {
          font-size: 24px;
          font-size: 2.4rem; } }
  .list-link li > a {
    text-decoration: underline; }
  .list-link li + li {
    margin-top: 10px; }
  .list-semicolon .title {
    display: inline-block; }
    .list-semicolon .title:after {
      content: ":";
      float: right;
      padding-right: 5px; }
  .list-table li {
    display: table;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px; }
    .list-table li span {
      display: table-cell; }
  .list-table .title {
    position: relative;
    width: 20%;
    padding-right: 10px; }
    @media only screen and (max-width: 991px) {
      .list-table .title {
        width: 28%; } }
    @media only screen and (max-width: 767px) {
      .list-table .title {
        width: 40%; } }
    .list-table .title:after {
      content: ":";
      display: inline-block;
      position: absolute;
      right: 5px;
      top: 0;
      vertical-align: middle; }

.-have-margin > li + li {
  margin-top: 10px; }

.icon {
  display: inline-block;
  background-repeat: no-repeat; }
  .icon-plus {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-plus.png") center center no-repeat;
    background-size: 33px 32px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 33px;
    height: 32px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-plus {
        background: url("../img/icon/icon-plus%402x.png") center center no-repeat;
        background-size: 33px 32px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-plus {
        background: url("../img/icon/icon-plus%402x.png") center center no-repeat;
        background-size: 33px 32px; } }
    a:hover .icon-plus,
    a:focus .icon-plus,
    a:focus:hover .icon-plus {
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: url("../img/icon/icon-plus-white.png") center center no-repeat;
      background-size: 33px 32px;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
      width: 33px;
      height: 32px; }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        a:hover .icon-plus,
        a:focus .icon-plus,
        a:focus:hover .icon-plus {
          background: url("../img/icon/icon-plus-white%402x.png") center center no-repeat;
          background-size: 33px 32px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        a:hover .icon-plus,
        a:focus .icon-plus,
        a:focus:hover .icon-plus {
          background: url("../img/icon/icon-plus-white%402x.png") center center no-repeat;
          background-size: 33px 32px; } }
    a:focus .icon-plus,
    a.focus .icon-plus {
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: url("../img/icon/icon-plus.png") center center no-repeat;
      background-size: 33px 32px;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
      width: 33px;
      height: 32px; }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        a:focus .icon-plus,
        a.focus .icon-plus {
          background: url("../img/icon/icon-plus%402x.png") center center no-repeat;
          background-size: 33px 32px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        a:focus .icon-plus,
        a.focus .icon-plus {
          background: url("../img/icon/icon-plus%402x.png") center center no-repeat;
          background-size: 33px 32px; } }
  .icon-view {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-view.png") center center no-repeat;
    background-size: 20px 12px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 20px;
    height: 12px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-view {
        background: url("../img/icon/icon-view%402x.png") center center no-repeat;
        background-size: 20px 12px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-view {
        background: url("../img/icon/icon-view%402x.png") center center no-repeat;
        background-size: 20px 12px; } }
  .icon-date {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-date.png") center center no-repeat;
    background-size: 15px 12px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 15px;
    height: 12px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-date {
        background: url("../img/icon/icon-date%402x.png") center center no-repeat;
        background-size: 15px 12px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-date {
        background: url("../img/icon/icon-date%402x.png") center center no-repeat;
        background-size: 15px 12px; } }
  .icon-date-s-green {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-date-green.png") center center no-repeat;
    background-size: 21px 17px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 21px;
    height: 17px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-date-s-green {
        background: url("../img/icon/icon-date-green%402x.png") center center no-repeat;
        background-size: 21px 17px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-date-s-green {
        background: url("../img/icon/icon-date-green%402x.png") center center no-repeat;
        background-size: 21px 17px; } }
  .icon-date-green {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-date-green.png") center center no-repeat;
    background-size: 38px 30px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 38px;
    height: 30px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-date-green {
        background: url("../img/icon/icon-date-green%402x.png") center center no-repeat;
        background-size: 38px 30px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-date-green {
        background: url("../img/icon/icon-date-green%402x.png") center center no-repeat;
        background-size: 38px 30px; } }
    @media only screen and (max-width: 543px) {
      .icon-date-green {
        background-size: 15px auto;
        width: 15px;
        height: 12px; } }
  .icon-pin {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-pin.png") center center no-repeat;
    background-size: 11px 15px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 11px;
    height: 15px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-pin {
        background: url("../img/icon/icon-pin%402x.png") center center no-repeat;
        background-size: 11px 15px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-pin {
        background: url("../img/icon/icon-pin%402x.png") center center no-repeat;
        background-size: 11px 15px; } }
  .icon-pin-green {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-pin-green.png") center center no-repeat;
    background-size: 23px 31px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 23px;
    height: 31px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-pin-green {
        background: url("../img/icon/icon-pin-green%402x.png") center center no-repeat;
        background-size: 23px 31px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-pin-green {
        background: url("../img/icon/icon-pin-green%402x.png") center center no-repeat;
        background-size: 23px 31px; } }
    @media only screen and (max-width: 543px) {
      .icon-pin-green {
        background-size: 11px auto;
        width: 11px;
        height: 15px; } }
  .icon-download {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-download.png") center center no-repeat;
    background-size: 26px 24px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 26px;
    height: 24px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-download {
        background: url("../img/icon/icon-download%402x.png") center center no-repeat;
        background-size: 26px 24px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-download {
        background: url("../img/icon/icon-download%402x.png") center center no-repeat;
        background-size: 26px 24px; } }
    @media only screen and (max-width: 767px) {
      .icon-download {
        width: 30px; } }
  .icon-download-v {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-download-v.png") center center no-repeat;
    background-size: 15px 14px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 15px;
    height: 14px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-download-v {
        background: url("../img/icon/icon-download-v%402x.png") center center no-repeat;
        background-size: 15px 14px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-download-v {
        background: url("../img/icon/icon-download-v%402x.png") center center no-repeat;
        background-size: 15px 14px; } }
  .icon-download-green {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-download-green.png") center center no-repeat;
    background-size: 22px 20px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 22px;
    height: 20px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-download-green {
        background: url("../img/icon/icon-download-green%402x.png") center center no-repeat;
        background-size: 22px 20px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-download-green {
        background: url("../img/icon/icon-download-green%402x.png") center center no-repeat;
        background-size: 22px 20px; } }
    a:focus:hover .icon-download-green,
    a.focus:hover .icon-download-green,
    a:hover .icon-download-green {
      background-image: url("../img/icon/icon-download%402x.png");
      width: 22px;
      height: 20px;
      background-size: 22px 20px; }
    a:focus .icon-download-green,
    a:active .icon-download-green {
      background-image: url("../img/icon/icon-download-green%402x.png"); }
  .icon-youtube {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-youtube.png") center center no-repeat;
    background-size: 36px 27px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 36px;
    height: 27px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-youtube {
        background: url("../img/icon/icon-youtube%402x.png") center center no-repeat;
        background-size: 36px 27px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-youtube {
        background: url("../img/icon/icon-youtube%402x.png") center center no-repeat;
        background-size: 36px 27px; } }
    a:hover .icon-youtube {
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: url("../img/icon/icon-youtube-white.png") center center no-repeat;
      background-size: 36px 27px;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
      width: 36px;
      height: 27px; }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        a:hover .icon-youtube {
          background: url("../img/icon/icon-youtube-white%402x.png") center center no-repeat;
          background-size: 36px 27px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        a:hover .icon-youtube {
          background: url("../img/icon/icon-youtube-white%402x.png") center center no-repeat;
          background-size: 36px 27px; } }
  .icon-check {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-check.png") center center no-repeat;
    background-size: 104px 74px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 104px;
    height: 74px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-check {
        background: url("../img/icon/icon-check%402x.png") center center no-repeat;
        background-size: 104px 74px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-check {
        background: url("../img/icon/icon-check%402x.png") center center no-repeat;
        background-size: 104px 74px; } }
    @media only screen and (max-width: 767px) {
      .icon-check {
        width: 80px;
        height: 58px;
        background-size: 80px 58px; } }
  .icon-world {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-world.png") center center no-repeat;
    background-size: 23px 23px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 23px;
    height: 23px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-world {
        background: url("../img/icon/icon-world%402x.png") center center no-repeat;
        background-size: 23px 23px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-world {
        background: url("../img/icon/icon-world%402x.png") center center no-repeat;
        background-size: 23px 23px; } }
    a:hover .icon-world,
    a:focus .icon-world {
      background-image: url("../img/icon/icon-world-white%402x.png");
      width: 23px;
      height: 23px;
      background-size: 23px 23px; }
  .icon-pagi-left {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/pagi-left.png") center center no-repeat;
    background-size: 12px 21px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 12px;
    height: 21px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-pagi-left {
        background: url("../img/icon/pagi-left%402x.png") center center no-repeat;
        background-size: 12px 21px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-pagi-left {
        background: url("../img/icon/pagi-left%402x.png") center center no-repeat;
        background-size: 12px 21px; } }
    a:hover .icon-pagi-left,
    a:focus .icon-pagi-left,
    a:focus:hover .icon-pagi-left {
      background-image: url("../img/icon/pagi-left-white%402x.png");
      width: 12px;
      height: 21px;
      background-size: 12px, 21px; }
    a:focus .icon-pagi-left,
    a.focus .icon-pagi-left {
      background-image: url("../img/icon/pagi-left%402x.png");
      width: 12px;
      height: 21px;
      background-size: 12px, 21px; }
    .icon-pagi-left.-brand {
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: url("../img/icon/pagi-left-brand.png") center center no-repeat;
      background-size: 12px 21px;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        .icon-pagi-left.-brand {
          background: url("../img/icon/pagi-left-brand%402x.png") center center no-repeat;
          background-size: 12px 21px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .icon-pagi-left.-brand {
          background: url("../img/icon/pagi-left-brand%402x.png") center center no-repeat;
          background-size: 12px 21px; } }
      a:focus .icon-pagi-left.-brand,
      a.focus .icon-pagi-left.-brand {
        background-image: url("../img/icon/pagi-left-brand%402x.png"); }
  .icon-pagi-right {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/pagi-right.png") center center no-repeat;
    background-size: 12px 21px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 12px;
    height: 21px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-pagi-right {
        background: url("../img/icon/pagi-right%402x.png") center center no-repeat;
        background-size: 12px 21px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-pagi-right {
        background: url("../img/icon/pagi-right%402x.png") center center no-repeat;
        background-size: 12px 21px; } }
    a:hover .icon-pagi-right,
    a:focus .icon-pagi-right,
    a:focus:hover .icon-pagi-right {
      background-image: url("../img/icon/pagi-right-white%402x.png");
      width: 12px;
      height: 21px;
      background-size: 12px, 21px; }
    a:focus .icon-pagi-right,
    a.focus .icon-pagi-right {
      background-image: url("../img/icon/pagi-right%402x.png");
      width: 12px;
      height: 21px;
      background-size: 12px, 21px; }
  .icon-down-medium {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/arrow/arrow-down-medium_.png") center center no-repeat;
    background-size: 19px 11px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 19px;
    height: 11px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-down-medium {
        background: url("../img/arrow/arrow-down-medium_%402x.png") center center no-repeat;
        background-size: 19px 11px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-down-medium {
        background: url("../img/arrow/arrow-down-medium_%402x.png") center center no-repeat;
        background-size: 19px 11px; } }
    .open .icon-down-medium, .icon-down-medium.open {
      -webkit-transform: rotate(-180deg);
              transform: rotate(-180deg); }
  .icon-search {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-search.png") center center no-repeat;
    background-size: 16px 16px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 16px;
    height: 16px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-search {
        background: url("../img/icon/icon-search%402x.png") center center no-repeat;
        background-size: 16px 16px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-search {
        background: url("../img/icon/icon-search%402x.png") center center no-repeat;
        background-size: 16px 16px; } }
  .icon-search-black {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-search-black.png") center center no-repeat;
    background-size: 20px 20px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 20px;
    height: 20px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-search-black {
        background: url("../img/icon/icon-search-black%402x.png") center center no-repeat;
        background-size: 20px 20px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-search-black {
        background: url("../img/icon/icon-search-black%402x.png") center center no-repeat;
        background-size: 20px 20px; } }
  .icon-search-white {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-search-w.png") center center no-repeat;
    background-size: 43px 43px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 43px;
    height: 43px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-search-white {
        background: url("../img/icon/icon-search-w%402x.png") center center no-repeat;
        background-size: 43px 43px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-search-white {
        background: url("../img/icon/icon-search-w%402x.png") center center no-repeat;
        background-size: 43px 43px; } }
    @media only screen and (max-width: 767px) {
      .icon-search-white {
        background-size: 24px 24px;
        width: 24px;
        height: 24px; } }
  .icon-play {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-play.png") center center no-repeat;
    background-size: 31px 84px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 31px;
    height: 42px;
    background-position: 0 0; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-play {
        background: url("../img/icon/icon-play%402x.png") center center no-repeat;
        background-size: 31px 84px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-play {
        background: url("../img/icon/icon-play%402x.png") center center no-repeat;
        background-size: 31px 84px; } }
    a:hover .icon-play {
      background-position: 0px -42px; }
    @media only screen and (max-width: 767px) {
      .icon-play {
        background-image: url("../img/icon/icon-play-xs%402x.png");
        width: 16px;
        height: 21px;
        background-size: 16px 42px;
        background-position: 0 0; }
        a:hover .icon-play {
          background-position: 0px -21px; } }
  .icon-menu {
    display: inline-block;
    width: 17px;
    height: 10px; }
    .icon-menu.-down {
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: url("../img/menu/arrow-down.png") center center no-repeat;
      background-size: 17px 10px;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        .icon-menu.-down {
          background: url("../img/menu/arrow-down%402x.png") center center no-repeat;
          background-size: 17px 10px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .icon-menu.-down {
          background: url("../img/menu/arrow-down%402x.png") center center no-repeat;
          background-size: 17px 10px; } }
    .icon-menu.-up {
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: url("../img/menu/arrow-up.png") center center no-repeat;
      background-size: 17px 10px;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        .icon-menu.-up {
          background: url("../img/menu/arrow-up%402x.png") center center no-repeat;
          background-size: 17px 10px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .icon-menu.-up {
          background: url("../img/menu/arrow-up%402x.png") center center no-repeat;
          background-size: 17px 10px; } }
  .icon-close {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-close-white.png") center center no-repeat;
    background-size: 17px 16px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 17px;
    height: 16px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-close {
        background: url("../img/icon/icon-close-white%402x.png") center center no-repeat;
        background-size: 17px 16px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-close {
        background: url("../img/icon/icon-close-white%402x.png") center center no-repeat;
        background-size: 17px 16px; } }
  .icon-close-brand {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-close-green.png") center center no-repeat;
    background-size: 17px 16px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 17px;
    height: 16px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .icon-close-brand {
        background: url("../img/icon/icon-close-green%402x.png") center center no-repeat;
        background-size: 17px 16px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .icon-close-brand {
        background: url("../img/icon/icon-close-green%402x.png") center center no-repeat;
        background-size: 17px 16px; } }

.arrow-next {
  background-image: url("../img/arrow/arrow-next.svg");
  width: 19px;
  height: 33px;
  display: inline-block; }
  .swiper-button-next:hover .arrow-next {
    background-image: url("../img/arrow/arrow-next-white.svg"); }

.arrow-prev {
  background-image: url("../img/arrow/arrow-prev.svg");
  width: 19px;
  height: 33px;
  display: inline-block; }
  .swiper-button-prev:hover .arrow-prev {
    background-image: url("../img/arrow/arrow-prev-white.svg"); }

.arrow-right {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: url("../img/icon/arrow-right.png") center center no-repeat;
  background-size: 8px 14px;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  width: 8px;
  height: 14px;
  display: inline-block; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .arrow-right {
      background: url("../img/icon/arrow-right%402x.png") center center no-repeat;
      background-size: 8px 14px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .arrow-right {
      background: url("../img/icon/arrow-right%402x.png") center center no-repeat;
      background-size: 8px 14px; } }

.arrow-down {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: url("../img/icon/arrow-down.png") center center no-repeat;
  background-size: 15px 7px;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  width: 15px;
  height: 7px;
  display: inline-block; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .arrow-down {
      background: url("../img/icon/arrow-down%402x.png") center center no-repeat;
      background-size: 15px 7px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .arrow-down {
      background: url("../img/icon/arrow-down%402x.png") center center no-repeat;
      background-size: 15px 7px; } }

.arrow-up {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: url("../img/arrow/arrow-up.png") center center no-repeat;
  background-size: 25px 15px;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  width: 25px;
  height: 15px;
  display: inline-block; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .arrow-up {
      background: url("../img/arrow/arrow-up%402x.png") center center no-repeat;
      background-size: 25px 15px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .arrow-up {
      background: url("../img/arrow/arrow-up%402x.png") center center no-repeat;
      background-size: 25px 15px; } }

.arrow-down-small {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: url("../img/arrow/arrow-down-small.png") center center no-repeat;
  background-size: 15px 7px;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  width: 15px;
  height: 7px;
  display: inline-block; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .arrow-down-small {
      background: url("../img/arrow/arrow-down-small%402x.png") center center no-repeat;
      background-size: 15px 7px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .arrow-down-small {
      background: url("../img/arrow/arrow-down-small%402x.png") center center no-repeat;
      background-size: 15px 7px; } }
  .open .arrow-down-small {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/arrow/arrow-down-small_.png") center center no-repeat;
    background-size: 15px 7px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 15px;
    height: 7px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .open .arrow-down-small {
        background: url("../img/arrow/arrow-down-small_%402x.png") center center no-repeat;
        background-size: 15px 7px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .open .arrow-down-small {
        background: url("../img/arrow/arrow-down-small_%402x.png") center center no-repeat;
        background-size: 15px 7px; } }

.arrow-back {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: url("../img/arrow/arrow-back.png") center center no-repeat;
  background-size: 12px 21px;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  width: 12px;
  height: 21px;
  display: inline-block; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .arrow-back {
      background: url("../img/arrow/arrow-back%402x.png") center center no-repeat;
      background-size: 12px 21px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .arrow-back {
      background: url("../img/arrow/arrow-back%402x.png") center center no-repeat;
      background-size: 12px 21px; } }
  .btn:hover .arrow-back,
  .btn:focus:hover .arrow-back {
    background-image: url("../img/arrow/arrow-back-white%402x.png");
    width: 12px;
    height: 21px;
    background-size: cover; }
  .btn:focus .arrow-back {
    background-image: url("../img/arrow/arrow-back%402x.png");
    width: 12px;
    height: 21px;
    background-size: cover; }

.select-down {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: url("../img/icon/select/arrow-down.png") center center no-repeat;
  background-size: 21px 12px;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  width: 21px;
  height: 12px;
  display: inline-block; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .select-down {
      background: url("../img/icon/select/arrow-down%402x.png") center center no-repeat;
      background-size: 21px 12px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .select-down {
      background: url("../img/icon/select/arrow-down%402x.png") center center no-repeat;
      background-size: 21px 12px; } }
  .select-down.open {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/select/arrow-up.png") center center no-repeat;
    background-size: 21px 12px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 21px;
    height: 12px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .select-down.open {
        background: url("../img/icon/select/arrow-up%402x.png") center center no-repeat;
        background-size: 21px 12px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .select-down.open {
        background: url("../img/icon/select/arrow-up%402x.png") center center no-repeat;
        background-size: 21px 12px; } }

.btn-primary,
a.btn-primary {
  border-radius: 500px 500px;
  border: 1px solid #34A93E;
  font-family: "thaisans";
  font-weight: normal;
  font-size: 27px;
  font-size: 2.7rem;
  background-color: transparent;
  background-color: transparent;
  color: #222222;
  min-width: 280px;
  min-height: 50px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  box-shadow: none;
  text-align: center;
  transition: all 0.3s; }
  html.desktop.mac .btn-primary, html.desktop.mac
  a.btn-primary {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: 500; }
  html .filter-procurement .btn-primary, html .filter-procurement
  a.btn-primary {
    min-width: auto;
    max-width: 100%;
    width: 100%; }
  @media only screen and (min-width: 768px) {
    .btn-primary,
    a.btn-primary {
      min-width: 260px;
      font-size: 24px;
      font-size: 2.4rem; }
      html.desktop.mac .btn-primary, html.desktop.mac
      a.btn-primary {
        font-size: 18px;
        font-size: 1.8rem; } }
  .btn-primary [class*="icon-download"],
  a.btn-primary [class*="icon-download"] {
    margin-right: 10px; }
  .btn-primary .text-center,
  a.btn-primary .text-center {
    display: inline-block;
    text-align: center; }
    html.safari .btn-primary .text-center, html.safari
    a.btn-primary .text-center {
      margin: 0 auto; }
  .btn-primary.-white,
  a.btn-primary.-white {
    border-color: white;
    color: #222222; }
    .btn-primary.-white:focus, .btn-primary.-white.focus,
    a.btn-primary.-white:focus,
    a.btn-primary.-white.focus {
      border-color: white; }
      .btn-primary.-white:focus:hover, .btn-primary.-white.focus:hover,
      a.btn-primary.-white:focus:hover,
      a.btn-primary.-white.focus:hover {
        border-color: #34A93E; }
  .btn-primary.-road-more,
  a.btn-primary.-road-more {
    border-color: white;
    color: white; }
    .btn-primary.-road-more:focus, .btn-primary.-road-more.focus,
    a.btn-primary.-road-more:focus,
    a.btn-primary.-road-more.focus {
      border-color: white;
      color: white;
      background-color: transparent;
      background-color: transparent; }
      .btn-primary.-road-more:focus:hover, .btn-primary.-road-more.focus:hover,
      a.btn-primary.-road-more:focus:hover,
      a.btn-primary.-road-more.focus:hover {
        border-color: #34A93E; }
    .btn-primary.-road-more:active, .btn-primary.-road-more.active,
    a.btn-primary.-road-more:active,
    a.btn-primary.-road-more.active {
      color: white; }
      .btn-primary.-road-more:active:focus, .btn-primary.-road-more:active.focus, .btn-primary.-road-more:active:hover, .btn-primary.-road-more.active:focus, .btn-primary.-road-more.active.focus, .btn-primary.-road-more.active:hover,
      a.btn-primary.-road-more:active:focus,
      a.btn-primary.-road-more:active.focus,
      a.btn-primary.-road-more:active:hover,
      a.btn-primary.-road-more.active:focus,
      a.btn-primary.-road-more.active.focus,
      a.btn-primary.-road-more.active:hover {
        color: white; }
  .btn-primary.-bg-white,
  a.btn-primary.-bg-white {
    background-color: white; }
    .btn-primary.-bg-white:hover,
    a.btn-primary.-bg-white:hover {
      background-color: #34A93E; }
  .btn-primary:hover,
  a.btn-primary:hover {
    background-color: #34A93E;
    border: 1px solid #34A93E;
    color: white; }
  .btn-primary:focus, .btn-primary.focus,
  a.btn-primary:focus,
  a.btn-primary.focus {
    background-color: white;
    border: 1px solid #34A93E;
    color: #222222; }
    .btn-primary:focus:hover, .btn-primary.focus:hover,
    a.btn-primary:focus:hover,
    a.btn-primary.focus:hover {
      background-color: #34A93E;
      border: 1px solid #34A93E;
      color: white; }
  .btn-primary:active, .btn-primary.active,
  a.btn-primary:active,
  a.btn-primary.active {
    background-color: #34A93E;
    border: 1px solid #34A93E;
    box-shadow: none; }
    .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .btn-primary.active:hover,
    a.btn-primary:active:focus,
    a.btn-primary:active.focus,
    a.btn-primary:active:hover,
    a.btn-primary.active:focus,
    a.btn-primary.active.focus,
    a.btn-primary.active:hover {
      background-color: #34A93E;
      border: 1px solid #34A93E; }
  .btn-primary.-download, .btn-primary.-brand,
  a.btn-primary.-download,
  a.btn-primary.-brand {
    background-color: #34A93E;
    color: white; }
    @media only screen and (max-width: 767px) {
      .btn-primary.-download, .btn-primary.-brand,
      a.btn-primary.-download,
      a.btn-primary.-brand {
        white-space: normal; } }
    .btn-primary.-download:hover, .btn-primary.-brand:hover,
    a.btn-primary.-download:hover,
    a.btn-primary.-brand:hover {
      background-color: #288230; }
    .btn-primary.-download:focus, .btn-primary.-download.focus, .btn-primary.-brand:focus, .btn-primary.-brand.focus,
    a.btn-primary.-download:focus,
    a.btn-primary.-download.focus,
    a.btn-primary.-brand:focus,
    a.btn-primary.-brand.focus {
      background-color: #34A93E;
      color: white; }
      .btn-primary.-download:focus:hover, .btn-primary.-download.focus:hover, .btn-primary.-brand:focus:hover, .btn-primary.-brand.focus:hover,
      a.btn-primary.-download:focus:hover,
      a.btn-primary.-download.focus:hover,
      a.btn-primary.-brand:focus:hover,
      a.btn-primary.-brand.focus:hover {
        background-color: #288230; }
    .btn-primary.-download .icon, .btn-primary.-brand .icon,
    a.btn-primary.-download .icon,
    a.btn-primary.-brand .icon {
      margin-right: 10px; }
    @media only screen and (min-width: 768px) {
      .btn-primary.-download, .btn-primary.-brand,
      a.btn-primary.-download,
      a.btn-primary.-brand {
        height: 60px;
        font-size: 27px;
        font-size: 2.7rem;
        padding-left: 30px;
        padding-right: 30px; }
        html.desktop.mac .btn-primary.-download, html.desktop.mac .btn-primary.-brand, html.desktop.mac
        a.btn-primary.-download, html.desktop.mac
        a.btn-primary.-brand {
          font-size: 21px;
          font-size: 2.1rem; } }

[rel="border-circle"] {
  width: 80px;
  height: 80px;
  border-radius: 500px 500px;
  border: 1px solid #34A93E;
  display: inline-block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  background-color: white;
  transition: all 0.3s; }
  @media only screen and (max-width: 991px) {
    [rel="border-circle"] {
      width: 60px;
      height: 60px; } }
  .swiper-button-prev:hover [rel="border-circle"],
  .swiper-button-next:hover [rel="border-circle"],
  a:hover [rel="border-circle"] {
    background-color: #34A93E; }

.btn-shadow {
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5);
  border: none; }

.btn-search {
  width: 38px;
  height: 38px;
  background-color: #666666;
  border-radius: 500px 500px;
  text-align: center;
  padding: 8px 10px !important; }
  .btn-search .icon {
    width: 100%;
    height: 100%;
    background-position: center; }
  .btn-search:hover, .btn-search:focus {
    background-color: #666666; }

.btn-register {
  background-color: #ef5360 !important;
  color: white !important;
  border: none !important; }
  .btn-register:hover, .btn-register:focus {
    background-color: white !important;
    border: 1px solid #ef5360 !important;
    color: #ef5360 !important; }

.btn-live {
  border-radius: 500px 500px;
  border: 1px solid white;
  display: block;
  height: 50px;
  padding: 0px 20px;
  font-size: 30px;
  font-size: 3rem;
  font-family: "thaisans";
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  transition: all 0.3s; }
  html.desktop.mac .btn-live {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-weight: 700; }
  html.desktop.mac .btn-live {
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 42px; }
  @media only screen and (max-width: 543px) {
    .btn-live {
      padding: 0px 15px; } }
  .btn-live:hover {
    background-color: #34A93E;
    border: 1px solid #34A93E; }
  .btn-live .icon {
    margin-right: 8px; }
  .btn-live .icon,
  .btn-live span {
    vertical-align: middle; }

.card {
  position: relative; }
  .card .thumb {
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box; }
    .card .thumb.zoom {
      padding-bottom: 57.5%;
      width: 100%; }
  .card .post {
    font-weight: bold;
    color: #888888;
    margin-bottom: 10px; }
    @media only screen and (min-width: 992px) {
      .highlight .card .post {
        margin-bottom: 30px; } }
    .card .post time {
      padding-right: 10px;
      vertical-align: top; }
    .card .post .cat {
      padding-right: 10px;
      vertical-align: top; }
      .card .post .cat + time {
        vertical-align: top; }
        .card .post .cat + time:before {
          content: " ";
          border-left: 1px solid #888888;
          height: 18px;
          display: inline-block;
          vertical-align: top;
          padding-left: 10px;
          margin-left: -4px; }
    .card .post .view {
      vertical-align: top; }
      .card .post .view:before {
        content: " ";
        border-left: 1px solid #888888;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        padding-left: 10px;
        margin-left: -4px; }
      .card .post .view .icon {
        margin-right: 5px; }
        .card .post .view .icon.icon-download-v {
          margin-right: 8px; }
  .card header {
    margin-bottom: 10px; }
    @media only screen and (min-width: 992px) {
      .highlight .card header {
        margin-bottom: 30px; } }
    .card header .topic-title {
      max-height: 85px; }
      @media only screen and (max-width: 767px) {
        .card header .topic-title {
          font-size: 32px;
          font-size: 3.2rem; }
          html.desktop.mac .card header .topic-title {
            font-size: 24px;
            font-size: 2.4rem; } }
  .card .cat {
    color: #888888;
    margin-bottom: 10px; }
  .card .detail {
    color: #888888;
    font-weight: bold; }
    .card .detail .text-content {
      line-height: 1.8;
      max-height: 60px; }
  .card.-book .thumb {
    background-color: #eeeeee; }
    .card.-book .thumb.zoom {
      padding-bottom: 60%; }
    .card.-book .thumb .parent {
      display: block;
      width: 100%;
      height: calc(100% - 40px);
      margin: 20px auto; }
      @media only screen and (max-width: 1199px) {
        .card.-book .thumb .parent {
          height: calc(100% - 30px);
          margin: 15px auto; } }
      @media only screen and (min-width: 768px) {
        .highlight .card.-book .thumb .parent {
          height: calc(100% - 60px);
          margin: 30px auto; } }
    .card.-book .thumb .img-photo {
      display: block;
      background-position: center center;
      background-repeat: no-repeat;
      position: relative;
      box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
      width: 100%;
      margin: 0 auto; }
      @media only screen and (max-width: 767px) {
        .card.-book .thumb .img-photo {
          max-width: 38%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          background-image: none !important; }
          .card.-book .thumb .img-photo img {
            width: 100%; } }
      @media only screen and (min-width: 768px) {
        .card.-book .thumb .img-photo {
          padding-bottom: 46.5%;
          background-size: cover;
          max-width: 130px;
          background-color: black; }
          .highlight .card.-book .thumb .img-photo {
            max-width: 270px; } }
      @media only screen and (min-width: 992px) {
        .col-sm-6.col-md-4 .card.-book .thumb .img-photo {
          max-width: 110px; }
        .col-sm-6 .card.-book .thumb .img-photo {
          max-width: 170px; }
        .highlight .card.-book .thumb .img-photo {
          max-width: 230px; } }
      @media only screen and (min-width: 1200px) {
        .col-sm-6.col-md-4 .card.-book .thumb .img-photo {
          max-width: 120px; }
        .col-sm-6 .card.-book .thumb .img-photo {
          max-width: 190px; }
        .highlight .card.-book .thumb .img-photo {
          max-width: 250px; } }
  .card.-career .msg {
    background: #F7F7F7;
    border-radius: 5px;
    padding: 40px 45px;
    position: relative;
    margin-bottom: 30px; }
    @media only screen and (max-width: 767px) {
      .card.-career .msg {
        padding: 20px; } }
    .card.-career .msg p {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 46px;
      font-size: 4.6rem;
      color: #34A93E;
      line-height: 1; }
      html.desktop.mac .card.-career .msg p {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 35px;
        font-size: 3.5rem;
        font-weight: 500; }
      html.desktop.mac .card.-career .msg p {
        line-height: 1.3; }
      @media only screen and (max-width: 767px) {
        .card.-career .msg p {
          font-size: 32px;
          font-size: 3.2rem; }
          html.desktop.mac .card.-career .msg p {
            font-size: 24px;
            font-size: 2.4rem; } }
    .card.-career .msg:after {
      content: " ";
      display: inline-block;
      bottom: -30px;
      position: absolute;
      left: 66px;
      border-width: 15px;
      border-style: solid;
      border-right: 15px solid transparent;
      border-color: #F7F7F7 transparent transparent; }
      @media only screen and (max-width: 767px) {
        .card.-career .msg:after {
          left: 36px; } }
      @media only screen and (max-width: 543px) {
        .card.-career .msg:after {
          left: 50%;
          margin-left: -10px; } }
  .card.-career .thumb {
    min-width: 80px;
    height: 80px; }
  .card.-career .photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    background-color: #F7F7F7;
    overflow: hidden; }
    @media only screen and (max-width: 543px) {
      .card.-career .photo {
        margin: 0 auto;
        display: block;
        position: relative; } }
  .card.-career .user {
    display: table;
    margin-left: 40px; }
    @media only screen and (max-width: 767px) {
      .card.-career .user {
        margin-left: 10px; } }
    @media only screen and (max-width: 543px) {
      .card.-career .user {
        display: block; } }
    .card.-career .user .thumb,
    .card.-career .user .text {
      display: table-cell;
      vertical-align: middle; }
      @media only screen and (max-width: 543px) {
        .card.-career .user .thumb,
        .card.-career .user .text {
          display: block; } }
    .card.-career .user .thumb {
      margin-right: 10px; }
      @media only screen and (max-width: 543px) {
        .card.-career .user .thumb {
          margin-bottom: 10px;
          margin-right: 0; } }
    .card.-career .user .text {
      text-align: center; }
      @media only screen and (min-width: 544px) {
        .card.-career .user .text {
          padding-left: 20px;
          text-align: left; } }
      .card.-career .user .text span {
        display: block; }
  .card.-calendar {
    text-align: center; }
    .card.-calendar > a {
      display: inline-block; }
    .card.-calendar [rel="border-circle"] {
      width: 150px;
      height: 150px;
      margin: 0 auto 15px;
      font-family: "thaisans";
      font-weight: lighter;
      font-size: 94px;
      font-size: 9.4rem;
      border-color: #cccccc; }
      html.desktop.mac .card.-calendar [rel="border-circle"] {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 70px;
        font-size: 7rem;
        font-weight: 200; }
      @media only screen and (max-width: 767px) {
        .card.-calendar [rel="border-circle"] {
          width: 140px;
          height: 140px;
          font-size: 70px;
          font-size: 7rem; }
          html.desktop.mac .card.-calendar [rel="border-circle"] {
            font-size: 52px;
            font-size: 5.2rem; } }
      .card.-calendar [rel="border-circle"] span {
        color: #34A93E;
        display: block;
        line-height: 1;
        text-align: center;
        transition: all .25s ease-in-out; }
      .card.-calendar [rel="border-circle"] .date {
        line-height: 0.7; }
        html.desktop.mac .card.-calendar [rel="border-circle"] .date {
          line-height: 1; }
      .card.-calendar [rel="border-circle"] .month {
        font-family: "thaisans";
        font-weight: normal;
        font-size: 38px;
        font-size: 3.8rem; }
        html.desktop.mac .card.-calendar [rel="border-circle"] .month {
          font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
          font-size: 27px;
          font-size: 2.7rem;
          font-weight: 500; }
    .card.-calendar .detail {
      margin-top: 10px; }
      .card.-calendar .detail .icon {
        margin-right: 10px; }
      .card.-calendar .detail .list li + li {
        margin-top: 5px; }
    .card.-calendar .ball:hover [rel="border-circle"] {
      background-color: white;
      color: #34A93E; }
    .card.-calendar .ball.active [rel="border-circle"] {
      background-color: #34A93E;
      border-color: #34A93E; }
      .card.-calendar .ball.active [rel="border-circle"]:hover {
        background-color: #34A93E; }
      .card.-calendar .ball.active [rel="border-circle"] span {
        color: white; }

.widget--banner {
  border-radius: 5px;
  width: 100%;
  display: table;
  text-align: center;
  margin: 10px 0px;
  padding-top: 100%;
  /* 1:1 Aspect Ratio */
  position: relative;
  /* If you want text inside of it */ }
  .half .widget--banner {
    padding-top: 74.5%; }
  .widget--banner .logo {
    padding: 0px 10px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
    .widget--banner .logo img {
      max-width: 100%; }
  .widget--banner .logo {
    display: table-cell;
    vertical-align: middle; }
  .widget--banner .middle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    margin-left: -10px;
    margin-right: -10px; }
    .section--partner .widget--banner .middle {
      margin-left: 0;
      margin-right: 0; }

.widget .-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .widget .-heading p {
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 76px;
    font-size: 7.6rem;
    color: #34A93E;
    line-height: 0.6; }
    html.desktop.mac .widget .-heading p {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 58px;
      font-size: 5.8rem;
      font-weight: 200; }
    html.desktop.mac .widget .-heading p {
      line-height: 0.8; }
  .widget .-heading em {
    font-style: normal;
    font-size: 46px;
    font-size: 4.6rem; }
    html.desktop.mac .widget .-heading em {
      font-size: 35px;
      font-size: 3.5rem; }
  @media only screen and (max-width: 991px) {
    .widget .-heading p {
      font-size: 55px;
      font-size: 5.5rem; }
      html.desktop.mac .widget .-heading p {
        font-size: 40px;
        font-size: 4rem; }
    .widget .-heading em {
      font-size: 32px;
      font-size: 3.2rem;
      letter-spacing: -0.1px;
      display: block;
      margin-top: 10px; }
      html.desktop.mac .widget .-heading em {
        font-size: 24px;
        font-size: 2.4rem; } }

.widget .-viewmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .widget .-viewmore .middle {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .widget .-viewmore .text {
    display: block;
    margin-top: 10px;
    font-family: "thaisans";
    font-weight: normal;
    font-size: 24px;
    font-size: 2.4rem; }
    html.desktop.mac .widget .-viewmore .text {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 500; }
    @media only screen and (min-width: 992px) {
      .widget .-viewmore .text {
        margin-top: 20px; } }

.widget .-bg-white {
  background-color: white !important;
  border: 1px solid #cccccc;
  overflow: hidden; }

.widget--slide {
  width: 100%; }
  .widget--slide header {
    margin-bottom: 10px; }
    @media only screen and (min-width: 992px) {
      .widget--slide header {
        margin-bottom: 30px; } }
  .widget--slide .group-info {
    position: relative; }
  @media only screen and (max-width: 991px) {
    .widget--slide .photo {
      margin-bottom: 20px; } }
  .widget--slide .info {
    background-color: white; }
    .widget--slide .info .detail {
      color: #888888;
      font-weight: bold; }
      .widget--slide .info .detail .text-content {
        line-height: 1.8;
        max-height: 100px; }
        @media only screen and (max-width: 767px) {
          .widget--slide .info .detail .text-content {
            max-height: 80px; } }
      @media only screen and (min-width: 768px) {
        .widget--slide .info .detail {
          margin-bottom: 20px; } }
      @media only screen and (min-width: 992px) {
        .widget--slide .info .detail {
          margin-bottom: 30px; } }
  .widget--slide footer .btn {
    min-width: 200px; }

.widget .-viewmore {
  background-color: white !important; }

.widget:nth-child(2) .widget--banner {
  background-color: #BFE351; }
  @media only screen and (max-width: 767px) {
    .widget:nth-child(2) .widget--banner {
      background-color: #E3F3B2; } }

.widget:nth-child(3) .widget--banner {
  background-color: #48B151; }
  @media only screen and (max-width: 767px) {
    .widget:nth-child(3) .widget--banner {
      background-color: #BFE351; } }

.widget:nth-child(4) .widget--banner {
  background-color: #E3F3B2; }
  @media only screen and (max-width: 767px) {
    .widget:nth-child(4) .widget--banner {
      background-color: #48B151; } }

.widget:nth-child(5) .widget--banner {
  background-color: #E3F3B2; }
  @media only screen and (max-width: 767px) {
    .widget:nth-child(5) .widget--banner {
      background-color: #48B151; } }

.widget:nth-child(6) .widget--banner {
  background-color: #48B151; }
  @media only screen and (max-width: 767px) {
    .widget:nth-child(6) .widget--banner {
      background-color: #BFE351; } }

.widget:nth-child(7) .widget--banner {
  background-color: #BFE351; }
  @media only screen and (max-width: 767px) {
    .widget:nth-child(7) .widget--banner {
      background-color: #E3F3B2; } }

@media only screen and (max-width: 767px) {
  .widget:nth-child(8) .widget--banner {
    background-color: #48B151; } }

.widget .green-first {
  background-color: #BFE351; }

.widget .green-secondary {
  background-color: #48B151; }

.widget .green-three {
  background-color: #E3F3B2; }

.section--panels {
  padding-bottom: 30px;
  position: relative; }
  @media only screen and (min-width: 768px) {
    .section--panels {
      padding-bottom: 60px; } }
  @media only screen and (min-width: 1200px) {
    .section--panels {
      padding-bottom: 100px; } }
  .section--panels .timeline {
    margin-bottom: 0; }
  .section--panels .collapse.in .panel-body {
    border-top: 1px solid #34A93E; }
  .section--panels .up-plus {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-plus-green.png") center center no-repeat;
    background-size: 20px 20px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .section--panels .up-plus {
        background: url("../img/icon/icon-plus-green%402x.png") center center no-repeat;
        background-size: 20px 20px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .section--panels .up-plus {
        background: url("../img/icon/icon-plus-green%402x.png") center center no-repeat;
        background-size: 20px 20px; } }
  .section--panels .icon-collapse {
    position: absolute;
    top: 18px;
    right: 0px;
    padding: 0px; }
    @media only screen and (min-width: 768px) {
      .section--panels .icon-collapse {
        top: 22px;
        right: 20px; } }
  .section--panels .panel {
    border: none;
    box-shadow: none; }
  .section--panels .panel-title > a {
    display: block;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 30px;
    color: #222222; }
    .section--panels .panel-title > a:hover {
      color: #34A93E; }
    @media only screen and (min-width: 768px) {
      .section--panels .panel-title > a {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 60px; } }
  .section--panels .panel-padding {
    margin: 0px 15px; }
    @media only screen and (min-width: 768px) {
      .section--panels .panel-padding {
        margin: 0px 20px; } }
  .section--panels .panel-group {
    margin-bottom: 0; }
    .section--panels .panel-group .panel {
      border-radius: 0;
      border-bottom: 1px solid #e6e6e6; }
      .section--panels .panel-group .panel + .panel {
        margin-top: 0; }
  .section--panels .panel-heading {
    padding: 0;
    border-radius: 0; }
  .section--panels .panel-body {
    padding: 15px 0px; }
    @media only screen and (min-width: 768px) {
      .section--panels .panel-body {
        padding: 30px 0px; } }
  .section--panels .icon-collapse-open .up-plus {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/icon/icon-minus-green.png") center center no-repeat;
    background-size: 20px 20px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 20px;
    height: 20px; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .section--panels .icon-collapse-open .up-plus {
        background: url("../img/icon/icon-minus-green%402x.png") center center no-repeat;
        background-size: 20px 20px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .section--panels .icon-collapse-open .up-plus {
        background: url("../img/icon/icon-minus-green%402x.png") center center no-repeat;
        background-size: 20px 20px; } }

.table.table--tcdc {
  border-radius: 5px 5px 0px 0px;
  border-bottom: 3px solid #333333;
  margin-bottom: 0; }
  .table.table--tcdc p {
    margin-bottom: 10px; }
  .table.table--tcdc thead {
    background-color: #333333; }
    .table.table--tcdc thead > tr > th {
      text-align: center;
      vertical-align: middle;
      color: white;
      border: 1px solid white;
      height: 60px;
      word-wrap: break-word; }
      @media only screen and (min-width: 768px) {
        .table.table--tcdc thead > tr > th {
          font-size: 20px;
          font-size: 2rem; }
          body.en .table.table--tcdc thead > tr > th {
            font-size: 16px;
            font-size: 1.6rem; } }
  .table.table--tcdc tbody {
    background-color: #FAFAFA;
    overflow: hidden; }
    .table.table--tcdc tbody tr td, .table.table--tcdc tbody tr th {
      border: 1px solid white;
      white-space: normal;
      line-height: 1.8;
      color: #222222; }
    .table.table--tcdc tbody + tbody {
      border-top: 40px solid white; }
      @media only screen and (min-width: 992px) {
        .table.table--tcdc tbody + tbody {
          border-top: 1px solid #AAAAAA; } }
      @media only screen and (min-width: 992px) {
        .table.table--tcdc tbody + tbody:before {
          content: " ";
          display: block;
          width: 100%;
          background-color: #AAAAAA;
          height: 1px;
          position: absolute;
          right: 0; } }
  .table.table--tcdc [data-col="tcdc-column-0"],
  .table.table--tcdc [data-col="tcdc-column-1"],
  .table.table--tcdc [data-col="tcdc-column-2"] {
    text-align: center; }
  .table.table--tcdc [data-col="tcdc-column-3"] {
    background-color: #F8ECF2; }
  .table.table--tcdc [data-col="tcdc-column-4"] {
    background-color: #F6F9F0; }
  .table.table--tcdc [data-col="tcdc-column-5"] {
    background-color: #FAF9EB; }
  .table.table--tcdc .line {
    position: relative;
    display: block;
    margin: -8px; }
    body.en .table.table--tcdc .line {
      height: 100%;
      line-height: 1.1; }
    .table.table--tcdc .line:after {
      content: " ";
      height: 6px;
      width: 100%;
      background-color: #FAFAFA;
      display: block;
      position: absolute;
      bottom: -16px;
      left: 0; }
      body.en .table.table--tcdc .line:after {
        bottom: -8px; }
    .table.table--tcdc .line.pink:after {
      background-color: #D8127D; }
    .table.table--tcdc .line.green:after {
      background-color: #BFE351; }
    .table.table--tcdc .line.yellow:after {
      background-color: #FFF100; }
  .table.table--tcdc .text-left {
    text-align: left; }
  .table.table--tcdc .text-right {
    text-align: right; }
  .table.table--tcdc .list-bullet {
    padding-left: 0px; }
  @media only screen and (min-width: 768px) {
    .table.table--tcdc .list-number {
      padding-left: 20px; } }

.table.-procurement {
  border-bottom: 2px solid #eeeeee; }
  .table.-procurement .click-sort {
    color: white; }
  @media only screen and (max-width: 767px) {
    .table.-procurement thead {
      display: none; } }
  .table.-procurement thead tr th {
    font-size: 15px;
    font-size: 1.5rem;
    vertical-align: middle;
    border: 0;
    padding: 6px 14px; }
    .table.-procurement thead tr th:first-child {
      border-radius: 7px 0 0 0; }
    .table.-procurement thead tr th:last-child {
      border-radius: 0 7px 0 0; }
    @media only screen and (max-width: 991px) {
      .table.-procurement thead tr th {
        font-size: 14px;
        font-size: 1.4rem;
        white-space: nowrap; } }
  .table.-procurement tbody {
    background-color: transparent;
    background-color: transparent; }
    @media only screen and (max-width: 767px) {
      .table.-procurement tbody {
        border-top: 1px solid #eeeeee !important;
        padding: 15px 0 0px;
        display: table;
        width: 100%; } }
    .table.-procurement tbody tr td {
      padding: 14px;
      color: #555555;
      text-align: center;
      border-left: none !important;
      border-right: none !important; }
      @media only screen and (min-width: 768px) {
        .table.-procurement tbody tr td:last-child {
          white-space: nowrap; } }
      @media only screen and (max-width: 767px) {
        .table.-procurement tbody tr td {
          width: 100%;
          display: block;
          position: relative;
          text-align: left !important;
          padding: 5px 0 5px 5%;
          padding-left: 150px; }
          .table.-procurement tbody tr td:first-child {
            padding-top: 20px; }
          .table.-procurement tbody tr td[data-title]:first-child:before {
            top: 14px; }
          .table.-procurement tbody tr td[data-title]:before {
            content: attr(data-title);
            position: absolute;
            top: 0;
            left: 0;
            white-space: nowrap;
            padding: 5px 0; }
          .table.-procurement tbody tr td.readmore {
            padding-left: 0; }
          .table.-procurement tbody tr td:last-child {
            padding-bottom: 20px; } }
      @media only screen and (min-width: 768px) {
        .table.-procurement tbody tr td .baht {
          display: none; } }
    @media only screen and (min-width: 768px) {
      .table.-procurement tbody tr + tr td {
        border-top: 2px solid #eeeeee; } }
    @media only screen and (max-width: 767px) {
      .table.-procurement tbody tr + tr {
        border-top: 1px solid #eeeeee; } }
  @media only screen and (max-width: 767px) {
    .table.-procurement .row {
      margin-left: 0;
      margin-right: 0; }
    .table.-procurement.table-hover tbody tr:hover {
      background-color: transparent;
      background-color: transparent; } }
  .table.-procurement + footer {
    margin-top: 40px; }
    @media only screen and (min-width: 768px) {
      .table.-procurement + footer {
        margin-top: 70px; } }

.table.-procurement_desc {
  border-bottom: none; }
  .table.-procurement_desc .link-email {
    display: table; }
    @media only screen and (max-width: 767px) {
      .table.-procurement_desc .link-email {
        margin-left: 10px; } }
  @media only screen and (max-width: 767px) {
    .table.-procurement_desc thead {
      display: none; } }
  .table.-procurement_desc thead tr th {
    font-size: 15px;
    font-size: 1.5rem;
    vertical-align: middle; }
    .table.-procurement_desc thead tr th:first-child {
      border-radius: 7px 0 0 0; }
    .table.-procurement_desc thead tr th:last-child {
      border-radius: 0 7px 0 0; }
    .table.-procurement_desc thead tr th.last-td {
      border-radius: 0 7px 0 0; }
  @media only screen and (max-width: 767px) {
    .table.-procurement_desc tbody {
      background-color: transparent;
      background-color: transparent; } }
  @media only screen and (min-width: 768px) {
    .table.-procurement_desc tbody tr td {
      text-align: center;
      padding: 14px; } }
  @media only screen and (max-width: 767px) {
    .table.-procurement_desc tbody tr td {
      width: 100%;
      display: block;
      position: relative;
      text-align: left !important;
      padding: 5px 0 15px 0px;
      background-color: transparent !important; }
      .table.-procurement_desc tbody tr td[data-title]:before {
        content: attr(data-title);
        position: relative;
        top: inherit;
        left: inherit;
        display: block;
        width: 100%;
        white-space: nowrap;
        padding: 0; } }
  @media only screen and (max-width: 543px) {
    .table.-procurement_desc tbody tr td {
      padding-left: 0; }
      .table.-procurement_desc tbody tr td[data-title]:before {
        content: attr(data-title);
        position: relative;
        top: inherit;
        left: inherit;
        display: block;
        width: 100%;
        white-space: nowrap;
        padding: 0; } }
  @media only screen and (max-width: 767px) {
    .table.-procurement_desc tbody tr td.visible-xs {
      display: block !important; } }
  @media only screen and (max-width: 767px) {
    .table.-procurement_desc tbody tr td.desc-file {
      width: 100%;
      display: block;
      position: relative;
      text-align: left !important;
      padding: 5px 0 15px;
      background-color: #FAFAFA !important; }
      .table.-procurement_desc tbody tr td.desc-file[data-title]:before {
        content: attr(data-title);
        position: relative;
        text-align: center;
        top: inherit;
        left: inherit;
        display: block;
        width: 100%;
        white-space: nowrap;
        padding: 14px 0;
        background-color: #333333;
        color: white;
        border-radius: 5px 5px 0 0;
        margin-bottom: 10px; } }
  .table.-procurement_desc tbody tr td .list-file {
    display: inline-block;
    text-align: left;
    color: #34A93E;
    text-decoration: underline;
    padding-bottom: 10px; }
    .table.-procurement_desc tbody tr td .list-file:last-child {
      padding-bottom: 0; }
    @media only screen and (max-width: 767px) {
      .table.-procurement_desc tbody tr td .list-file {
        padding: 5px 14px;
        display: block; } }
    .table.-procurement_desc tbody tr td .list-file:hover {
      opacity: 0.8; }
  .table.-procurement_desc .line:after {
    content: " ";
    height: 4px;
    width: 100%;
    background-color: #FAFAFA;
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0; }

@media only screen and (max-width: 991px) {
  .table.-rate-member.-mobile tr th {
    width: 50%; } }

.table.-rate-member [data-col="tcdc-column-0"] {
  text-align: left; }

.table.-rate-member [data-col="tcdc-column-1"] {
  background-color: #F8ECF2; }

.table.-rate-member [data-col="tcdc-column-2"] {
  background-color: #F6F9F0; }

.table.-mobile tbody {
  width: 100%; }
  @media only screen and (max-width: 991px) {
    .table.-mobile tbody:after {
      content: " ";
      display: block;
      width: 100%;
      background-color: #333333;
      height: 3px;
      position: absolute;
      right: 0; } }
  .table.-mobile tbody tr th {
    width: 20%;
    white-space: word-wrap; }
    @media only screen and (min-width: 768px) {
      .table.-mobile tbody tr th {
        width: 25%; } }
  .table.-mobile tbody tr th, .table.-mobile tbody tr td {
    line-height: 1.5; }
  .table.-mobile tbody tr [colspan],
  .table.-mobile tbody tr.highlight * {
    background-color: #333333;
    color: white; }
  .table.-mobile tbody tr [colspan] {
    padding-top: 12px;
    padding-bottom: 12px;
    width: 100%; }
  .table.-mobile tbody tr.highlight td {
    vertical-align: middle; }
  .table.-mobile tbody tr.highlight ul.list-bullet li:before {
    background-color: white; }

.table.-mobile .list-bullet {
  padding-left: 5px; }

.table.-mobile .list-number {
  padding-left: 20px; }

.table .bg-tb-pink * {
  background-color: #F8ECF2; }

.table .bg-tb-green * {
  background-color: #F6F9F0; }

.table .bg-tb-yellow * {
  background-color: #FAF9EB; }

/*
 *  Remodal - v1.0.7
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */
/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */
/* Hide scroll bar */
html.remodal-is-locked {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none; }

/* Anti FOUC */
.remodal,
[data-remodal-id] {
  display: none; }

/* Necessary styles of the overlay */
.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  display: none; }

/* Necessary styles of the wrapper */
.remodal-wrapper {
  position: fixed;
  z-index: 100000000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch; }

.remodal-wrapper:after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  content: ""; }

/* Fix iPad, iPhone glitches */
.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/* Necessary styles of the modal dialog */
.remodal {
  position: relative;
  outline: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  /* display: inline-block;*/ }

/*
 *  Remodal - v1.0.7
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */
/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px); }

/* Default theme styles of the overlay */
.remodal-overlay {
  background: rgba(43, 46, 56, 0.9); }

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes; }

.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes; }

/* Default theme styles of the wrapper */
.remodal-wrapper {
  padding: 10px 10px 0; }

/* Default theme styles of the modal dialog */
.remodal {
  box-sizing: border-box;
  width: 100%;
  /*margin-bottom: 10px;*/
  padding: 35px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #2b2e38;
  background: #fff; }

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes; }

.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes; }

/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
  vertical-align: middle; }

/* Close button */
.remodal-close {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent; }

.remodal-close:hover,
.remodal-close:focus {
  color: #2b2e38; }

.remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 25px;
  line-height: 35px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 35px;
  content: "\00d7";
  text-align: center; }

/* Dialog buttons */
.remodal-confirm,
.remodal-cancel {
  font: inherit;
  display: inline-block;
  overflow: visible;
  min-width: 110px;
  margin: 0;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: 0;
  outline: 0; }

.remodal-confirm {
  color: #fff;
  background: #81c784; }

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #66bb6a; }

.remodal-cancel {
  color: #fff;
  background: #e57373; }

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #ef5350; }

/* Remove inner padding and border in Firefox 4+ for the button tag. */
.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;
  border: 0; }

/* Keyframes
   ========================================================================== */
@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0; } }

@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0; } }

@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Media queries
   ========================================================================== */
@media only screen and (min-width: 641px) {
  .remodal {
    /*max-width: 700px;*/ } }

/* IE8
   ========================================================================== */
.lt-ie9 .remodal-overlay {
  background: #2b2e38; }

.lt-ie9 .remodal {
  /*width: 700px;*/ }

.remodal-wrapper,
.remodal-overlay {
  width: 100%; }

.remodal-wrapper {
  padding: 0; }

.remodal {
  background-color: transparent;
  background-color: transparent; }
  .remodal .group-middle {
    display: table-cell;
    vertical-align: middle;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    max-width: 720px; }
  .remodal .container {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0; }

.remodal-close {
  position: absolute;
  left: initial;
  right: 40px;
  top: 20px;
  margin-right: -19px; }
  html.ie .remodal-close {
    left: 100%;
    margin-left: -100px; }
  .remodal-close:before {
    content: none; }
  .remodal-close[rel*="border-circle"] {
    width: 38px;
    height: 38px;
    background-color: #666666; }
    .remodal-close[rel*="border-circle"]:hover, .remodal-close[rel*="border-circle"]:focus {
      background-color: #34A93E;
      transition: all 0.3s; }
  .remodal-close .icon {
    vertical-align: middle; }

.remodal-wrapper.remodal-is-opened .remodal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: table;
  height: 100%;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.remodal-wrapper.remodal-is-opened:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  display: block;
  background-image: url("../img/mock-pc.jpg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%; }

.remodal-wrapper.remodal-is-opened:after {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 17, 17, 0.85); }

.remodal-is-closed {
  position: relative;
  z-index: -1;
  display: none;
  overflow: hidden; }
  .remodal-is-closed.remodal {
    position: relative;
    z-index: -1; }

.tag-checkbox {
  margin: 5px;
  /* Base for label styling */
  /* checkbox aspect */
  /* checked mark aspect */
  /* checked mark aspect changes */
  /* disabled checkbox */
  /* accessibility */
  /* hover style just for information */ }
  .tag-checkbox label span {
    padding: 0;
    position: relative;
    z-index: 10;
    vertical-align: middle;
    line-height: 1.1; }
  .tag-checkbox [type="checkbox"]:not(:checked),
  .tag-checkbox [type="checkbox"]:checked {
    position: absolute;
    left: -9999px; }
  .tag-checkbox [type="checkbox"]:not(:checked) + label,
  .tag-checkbox [type="checkbox"]:checked + label {
    position: relative;
    cursor: pointer;
    padding: 10px 18px;
    margin: 0;
    color: white;
    border: 1px solid #288230;
    border-radius: 500px 500px;
    overflow: hidden; }
    @media only screen and (max-width: 767px) {
      .tag-checkbox [type="checkbox"]:not(:checked) + label,
      .tag-checkbox [type="checkbox"]:checked + label {
        padding-top: 12px;
        padding-bottom: 12px; } }
  .tag-checkbox [type="checkbox"]:not(:checked) + label {
    color: #222222;
    border: 1px solid #34A93E; }
  .tag-checkbox [type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }
  .tag-checkbox [type="checkbox"]:not(:checked) + label:after,
  .tag-checkbox [type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .5s;
    width: 100%;
    height: 100%; }
  .tag-checkbox [type="checkbox"]:checked + label:after {
    background-color: #288230;
    border-radius: 500px 500px; }
  .tag-checkbox [type="checkbox"]:checked + label {
    background-color: #288230; }
  .tag-checkbox [type="checkbox"]:not(:checked):focus:hover + label:before {
    background-color: #34A93E; }
  .tag-checkbox [type="checkbox"] + label:hover,
  .tag-checkbox [type="checkbox"] + label:hover:before {
    background-color: #34A93E;
    transition: all .3s; }
  .tag-checkbox [type="checkbox"] + label:hover span {
    color: white; }
  .tag-checkbox [type="checkbox"]:not(:checked) + label:after {
    opacity: 0; }
  .tag-checkbox [type="checkbox"]:checked + label:after {
    opacity: 1; }
  .tag-checkbox [type="checkbox"]:disabled:not(:checked) + label:before,
  .tag-checkbox [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd; }
  .tag-checkbox [type="checkbox"]:disabled:checked + label:after {
    color: #999; }
  .tag-checkbox [type="checkbox"]:disabled + label {
    color: #aaa; }

.bg-black {
  background-color: #222222; }

.section-title {
  font-weight: lighter;
  color: #34A93E;
  line-height: 1; }
  html.desktop.mac .section-title {
    font-weight: 200; }

.topic-title {
  font-weight: normal;
  color: #222222;
  line-height: 1; }
  html.desktop.mac .topic-title {
    font-weight: 500; }

body.th .show-en {
  display: none !important; }

body.en .show-th {
  display: none !important; }

.quote:before {
  content: '“'; }

.quote:after {
  content: '”'; }

a.link {
  text-decoration: underline;
  color: #34A93E; }
  a.link:hover {
    color: #288230; }

a.text-link {
  color: #34A93E; }
  a.text-link:hover {
    color: #288230; }

a.link-email {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  color: #34A93E; }
  a.link-email:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 1px;
    background-color: #34A93E; }
    a.link-email:before:hover {
      background-color: #288230; }
  a.link-email:hover {
    color: #288230; }

a.no-transition {
  transition: none; }

a.non-pointer:hover, a.non-pointer:focus {
  cursor: default; }

.section--tab,
.section--tab-menu {
  background-color: white;
  z-index: 99 !important; }
  .section--tab .ct-viewport,
  .section--tab-menu .ct-viewport {
    padding: 0; }
  @media only screen and (max-width: 767px) {
    .section--tab .ct-pagitem,
    .section--tab-menu .ct-pagitem {
      padding-left: 0px !important;
      padding-right: 0px !important;
      margin-left: 5px !important;
      margin-right: 5px !important; } }
  @media only screen and (min-width: 768px) {
    .section--tab .ct-pagitem.ct-cur,
    .section--tab-menu .ct-pagitem.ct-cur {
      border: none !important; } }
  @media only screen and (max-width: 767px) {
    .section--tab .ct-pagitem.ct-cur,
    .section--tab-menu .ct-pagitem.ct-cur {
      border-bottom: 5px solid #34A93E; } }
  .section--tab .btn-prev,
  .section--tab .btn-next,
  .section--tab-menu .btn-prev,
  .section--tab-menu .btn-next {
    position: absolute;
    top: 0; }
    .section--tab .btn-prev:hover,
    .section--tab .btn-next:hover,
    .section--tab-menu .btn-prev:hover,
    .section--tab-menu .btn-next:hover {
      cursor: pointer; }
  .section--tab .btn-prev,
  .section--tab-menu .btn-prev {
    left: 0;
    margin-top: -58px;
    margin-left: -50px; }
  .section--tab .btn-next,
  .section--tab-menu .btn-next {
    right: 0;
    margin-top: -58px;
    margin-right: -50px; }

@media only screen and (min-width: 544px) {
  .visible-xss {
    display: none; } }

@media only screen and (max-width: 543px) {
  .hidden-xss {
    display: none; } }

.magic-line-tab,
.magic-line-travel,
.magic-line-menu {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100px;
  height: 5px !important;
  background: #34A93E; }
  @media only screen and (max-width: 767px) {
    .magic-line-tab,
    .magic-line-travel,
    .magic-line-menu {
      display: none !important; } }

.page__inner {
  padding-bottom: 30px; }
  @media only screen and (min-width: 768px) {
    .page__inner {
      padding-bottom: 60px; } }
  @media only screen and (min-width: 1200px) {
    .page__inner {
      padding-bottom: 100px; } }

.page__have-tab .section--page_name {
  padding-bottom: 20px; }

.section--tab-menu {
  background-color: white; }
  .section--tab-menu [rel="btn-dropdown"] {
    padding: 0;
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 27px;
    font-size: 2.7rem; }
    html.desktop.mac .section--tab-menu [rel="btn-dropdown"] {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 21px;
      font-size: 2.1rem;
      font-weight: 200; }
    .section--tab-menu [rel="btn-dropdown"] .arrow-down-small {
      display: inline-block; }
    @media only screen and (max-width: 767px) {
      .section--tab-menu [rel="btn-dropdown"] {
        font-size: 28px;
        font-size: 2.8rem; }
        html.desktop.mac .section--tab-menu [rel="btn-dropdown"] {
          font-size: 20px;
          font-size: 2rem; } }
  .section--tab-menu ul.dropdown-menu {
    background-color: white;
    border-radius: 5px;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    overflow: hidden; }
    .section--tab-menu ul.dropdown-menu a {
      padding: 5px 15px; }
      .section--tab-menu ul.dropdown-menu a:hover {
        background-color: #34A93E;
        color: white; }
    .section--tab-menu ul.dropdown-menu > .active > a {
      background-color: white;
      color: #222222; }
      .section--tab-menu ul.dropdown-menu > .active > a:hover {
        background-color: #34A93E;
        color: white; }

.section--tab.sub-navbar,
.section--tab-menu.sub-navbar {
  transition: all .25s ease-in-out;
  will-change: transform; }
  .section--tab.sub-navbar.pinned,
  .section--tab-menu.sub-navbar.pinned {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  .section--tab.sub-navbar.unpinned,
  .section--tab-menu.sub-navbar.unpinned {
    position: relative;
    top: 0 !important; }

.section--page_name {
  padding-top: 70px;
  padding-bottom: 70px; }
  @media only screen and (max-width: 1199px) {
    .section--page_name {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media only screen and (max-width: 991px) {
    .section--page_name {
      padding-top: 40px;
      padding-bottom: 40px; } }
  @media only screen and (max-width: 767px) {
    .section--page_name {
      padding-top: 20px;
      padding-bottom: 20px; } }
  .section--page_name .text-title {
    width: 100%;
    margin: 0 auto; }
    @media only screen and (min-width: 992px) {
      .section--page_name .text-title {
        max-width: 710px; } }
    .section--page_name .text-title .section-title {
      padding: 30px 0 15px 0;
      font-weight: 500 !important; }

.section--page_name {
  padding-top: 70px;
  padding-bottom: 70px; }
  @media only screen and (max-width: 1199px) {
    .section--page_name {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media only screen and (max-width: 991px) {
    .section--page_name {
      padding-top: 40px;
      padding-bottom: 40px; } }
  @media only screen and (max-width: 767px) {
    .section--page_name {
      padding-top: 20px;
      padding-bottom: 20px; } }
  .section--page_name .text-title {
    width: 100%;
    margin: 0 auto; }
    @media only screen and (min-width: 992px) {
      .section--page_name .text-title {
        max-width: 710px; } }
    .section--page_name .text-title .section-title {
      padding: 30px 0 15px 0;
      font-weight: 500 !important; }

.section--listing {
  padding-bottom: 30px; }
  @media only screen and (max-width: 767px) {
    .section--listing .pagination-page {
      margin-bottom: 10px; } }
  @media only screen and (min-width: 768px) {
    .section--listing {
      padding-bottom: 60px; } }
  @media only screen and (min-width: 1200px) {
    .section--listing {
      padding-bottom: 80px; } }
  .section--listing .highlight {
    margin-bottom: 30px; }
    @media only screen and (min-width: 768px) {
      .section--listing .highlight {
        margin-bottom: 50px; } }
    @media only screen and (min-width: 992px) {
      .section--listing .highlight {
        margin-bottom: 80px; } }
    .section--listing .highlight .card .row {
      margin: 0; }
      .page__projects .section--listing .highlight .card .row {
        margin-left: -10px;
        margin-right: -10px; }
    .section--listing .highlight .card [rel*="block-col"] {
      padding-left: 0;
      padding-right: 0; }
    @media only screen and (min-width: 992px) {
      .section--listing .highlight .card .thumb {
        margin-bottom: 0; } }
    @media only screen and (min-width: 992px) {
      .section--listing .highlight .card .info {
        padding: 20px 30px 20px;
        background-color: #F9F9F9;
        height: 100%; }
        .page__news .section--listing .highlight .card .info {
          padding-top: 40px; } }
    @media only screen and (min-width: 1200px) {
      .section--listing .highlight .card .info {
        padding: 30px 40px 20px; }
        .page__news .section--listing .highlight .card .info {
          padding-top: 50px; } }
    @media only screen and (min-width: 992px) {
      .section--listing .highlight .card header {
        margin-bottom: 20px; } }
    @media only screen and (min-width: 1200px) {
      .section--listing .highlight .card header .topic-title {
        max-height: 100px;
        font-size: 46px;
        font-size: 4.6rem; }
        html.desktop.mac .section--listing .highlight .card header .topic-title {
          font-size: 35px;
          font-size: 3.5rem; } }
  .section--listing .card {
    margin-bottom: 50px; }
    @media only screen and (min-width: 768px) {
      .section--listing .card {
        margin-bottom: 50px; } }
    @media only screen and (min-width: 992px) {
      .section--listing .card {
        margin-bottom: 80px; } }
    .section--listing .card .post .cat {
      padding-right: 10px; }
      .section--listing .card .post .cat + .time:before {
        content: " ";
        border-left: 1px solid #888888;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
        padding-left: 10px;
        margin-left: -4px; }
    .section--listing .card .detail .location {
      margin-top: 10px;
      position: relative;
      padding-left: 20px; }
      .section--listing .card .detail .location .icon {
        position: absolute;
        left: 0;
        top: 0; }

.section--gallery {
  margin-bottom: 40px;
  overflow: hidden; }
  @media only screen and (min-width: 768px) {
    .section--gallery {
      margin-bottom: 50px; } }
  @media only screen and (min-width: 992px) {
    .section--gallery {
      margin-bottom: 80px; } }

.pagination-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .pagination-page .page {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
    white-space: nowrap;
    padding: 0px 50px; }
    html.ie .pagination-page .page {
      width: 100%;
      display: inline; }
    @media only screen and (max-width: 991px) {
      .pagination-page .page {
        padding: 0px 18px; } }
    .pagination-page .page input {
      width: 66px;
      height: 50px;
      padding: 0px 5px;
      border: 1px solid #CCCCCC;
      border-radius: 5px;
      font-family: "thaisans";
      font-weight: normal;
      font-size: 21px;
      font-size: 2.1rem;
      font-weight: 200;
      text-align: center;
      margin-right: 20px;
      color: #222222; }
      html.desktop.mac .pagination-page .page input {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-weight: 500; }
      html.desktop.mac .pagination-page .page input {
        font-size: 16px;
        font-size: 1.6rem; }
      html.ie .pagination-page .page input {
        height: 60px; }
      @media only screen and (min-width: 768px) {
        .pagination-page .page input {
          font-size: 24px;
          font-size: 2.4rem; }
          html.desktop.mac .pagination-page .page input {
            font-size: 18px;
            font-size: 1.8rem; } }
    .pagination-page .page .text {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 21px;
      font-size: 2.1rem; }
      html.desktop.mac .pagination-page .page .text {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-weight: 500; }
      html.desktop.mac .pagination-page .page .text {
        font-size: 16px;
        font-size: 1.6rem; }
      @media only screen and (min-width: 768px) {
        .pagination-page .page .text {
          font-size: 24px;
          font-size: 2.4rem; }
          html.desktop.mac .pagination-page .page .text {
            font-size: 18px;
            font-size: 1.8rem; } }
  @media only screen and (max-width: 767px) {
    .pagination-page .btn {
      min-width: 50px; } }
  .pagination-page .btn .icon {
    vertical-align: middle; }
  .pagination-page .next .icon {
    margin: 0; }
    @media only screen and (min-width: 768px) {
      .pagination-page .next .icon {
        margin-left: 10px; } }
  .pagination-page .prev .icon {
    margin: 0; }
    @media only screen and (min-width: 768px) {
      .pagination-page .prev .icon {
        margin-right: 10px; } }
  .pagination-page .btn {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important; }
  .pagination-page .disable {
    display: none !important; }
  .pagination-page li {
    width: 100%; }

html.safari.mac ul.search-filter.filter-procurement .search-input .form-control,
html.os ul.search-filter.filter-procurement .search-input .form-control {
  height: 47px;
  line-height: 47px;
  padding-top: 0;
  padding-bottom: 0; }

ul.search-filter {
  text-align: center;
  margin-bottom: 40px;
  margin-left: 4px; }
  @media only screen and (max-width: 767px) {
    ul.search-filter {
      max-width: 300px;
      margin: 0 auto 40px; } }
  ul.search-filter.filter-procurement {
    text-align: left; }
    @media only screen and (min-width: 768px) {
      ul.search-filter.filter-procurement {
        margin-top: 20px; } }
    @media only screen and (min-width: 992px) {
      ul.search-filter.filter-procurement {
        margin-top: 40px; } }
    ul.search-filter.filter-procurement > li {
      margin-left: -4px;
      margin-right: 0px;
      width: 30%;
      font-size: 0;
      padding: 5px 5px 5px 0; }
      ul.search-filter.filter-procurement > li + li {
        width: 20%;
        padding: 5px; }
      ul.search-filter.filter-procurement > li + li + li {
        width: 30%;
        padding: 5px; }
      ul.search-filter.filter-procurement > li + li + li + li {
        width: 20%;
        padding: 5px 0 5px 5px; }
      @media only screen and (max-width: 767px) {
        ul.search-filter.filter-procurement > li {
          width: 100%;
          padding: 0;
          margin-bottom: 10px; }
          ul.search-filter.filter-procurement > li + li {
            width: 100%;
            padding: 0; }
          ul.search-filter.filter-procurement > li + li + li {
            width: 100%;
            padding: 0; }
          ul.search-filter.filter-procurement > li + li + li + li {
            width: 100%;
            padding: 0; } }
    @media only screen and (min-width: 768px) {
      ul.search-filter.filter-procurement .btn-group {
        min-width: auto; } }
    ul.search-filter.filter-procurement .form-control {
      border: 1px solid #dddddd;
      font-family: "THSarabunNew", Arial, Thonburi;
      font-size: 15px;
      font-size: 1.5rem;
      border-radius: 5px;
      color: #222222;
      font-weight: bold;
      padding: 13px 30px 11px 45px;
      height: auto;
      display: inline-block;
      vertical-align: middle; }
    ul.search-filter.filter-procurement .search-input {
      position: relative; }
      ul.search-filter.filter-procurement .search-input .img-search {
        position: absolute;
        top: 12px;
        left: 15px; }
  ul.search-filter .text {
    vertical-align: middle; }
    @media only screen and (min-width: 768px) {
      ul.search-filter .text {
        text-align: right; } }
  ul.search-filter .topic-title {
    font-size: 38px;
    font-size: 3.8rem; }
    html.desktop.mac ul.search-filter .topic-title {
      font-size: 27px;
      font-size: 2.7rem; }
    @media only screen and (max-width: 767px) {
      ul.search-filter .topic-title {
        font-size: 32px;
        font-size: 3.2rem; }
        html.desktop.mac ul.search-filter .topic-title {
          font-size: 24px;
          font-size: 2.4rem; } }
  ul.search-filter > li {
    display: block;
    margin-left: 0;
    margin-right: 0; }
    @media only screen and (min-width: 768px) {
      ul.search-filter > li {
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px; } }
    @media only screen and (min-width: 992px) {
      ul.search-filter > li {
        margin-left: 20px;
        margin-right: 20px; } }
    @media only screen and (max-width: 767px) {
      ul.search-filter > li {
        padding: 0; }
        ul.search-filter > li + li {
          margin-top: 5px; } }
    @media only screen and (min-width: 768px) {
      ul.search-filter > li .btn-group {
        min-width: 200px; } }
    @media only screen and (min-width: 992px) {
      ul.search-filter > li .btn-group {
        min-width: 250px; } }

.filter-procurement .dropdown-menu > li > a {
  font-weight: bold; }

/* ========================================== */
/* 				  EVENT, ARTICLE      	  	  */
/* ========================================== */
@media only screen and (min-width: 992px) {
  .page__articles .highlight .card {
    background-color: #F9F9F9; }
    .page__articles .highlight .card .row {
      margin: 0; }
    .page__articles .highlight .card [rel*="block-col"] {
      padding-left: 0;
      padding-right: 6px; }
      .page__articles .highlight .card [rel*="block-col"]:last-child {
        padding-right: 0; } }

.page__articles .highlight .card header .topic-title {
  max-height: 140px; }
  html.desktop.mac .page__articles .highlight .card header .topic-title {
    max-height: 150px; }

@media only screen and (min-width: 992px) {
  .page__articles .highlight .card .info {
    padding-top: 40px; } }

.page__articles .section--tab-menu {
  position: relative;
  z-index: 10; }
  .page__articles .section--tab-menu .ct-pag,
  .page__articles .section--tab-menu .group-shadow {
    max-width: 1000px !important;
    margin: 0px auto; }
    @media (min-width: 1900px) {
      .page__articles .section--tab-menu .ct-pag,
      .page__articles .section--tab-menu .group-shadow {
        max-width: 1060px !important; } }
  .page__articles .section--tab-menu .ct-tab.ct-pag-hor.ct-pag-top {
    border: none; }
  .page__articles .section--tab-menu .ct-viewport {
    border-top: 1px solid #e6e6e6; }
  .page__articles .section--tab-menu .ct-pag {
    overflow: hidden; }

@media only screen and (min-width: 992px) {
  .page__articles.-exhibition ul.search-filter {
    margin-bottom: 60px; } }

@media only screen and (min-width: 1200px) {
  .page__articles.-exhibition ul.search-filter {
    margin-bottom: 80px; } }

.page__events .section--listing,
.page__articles .section--listing {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__events .section--listing,
    .page__articles .section--listing {
      margin-top: 50px; } }
  @media only screen and (min-width: 992px) {
    .page__events .section--listing,
    .page__articles .section--listing {
      margin-top: 80px; } }

.page__events.-exhibition .section--listing,
.page__articles.-exhibition .section--listing {
  margin-top: 0; }

.page__events .ajax-listing {
  padding-bottom: 30px; }
  @media only screen and (max-width: 767px) {
    .page__events .ajax-listing .pagination-page {
      margin-bottom: 10px; } }
  @media only screen and (min-width: 768px) {
    .page__events .ajax-listing {
      padding-bottom: 60px; } }
  @media only screen and (min-width: 1200px) {
    .page__events .ajax-listing {
      padding-bottom: 80px; } }

.page__events .section--listing {
  padding-bottom: 0; }
  .page__events .section--listing .card .thumb.zoom {
    padding-bottom: 36.5%; }
  .page__events .section--listing .section--empty {
    padding-top: 0; }
    @media only screen and (max-width: 991px) {
      .page__events .section--listing .section--empty {
        padding-bottom: 50px; } }

.page__enew {
  padding-bottom: 0 !important; }
  .page__enew .topic-title {
    margin-bottom: 10px; }
    @media only screen and (min-width: 768px) {
      .page__enew .topic-title {
        margin-bottom: 20px; } }
  .page__enew .section + .section {
    margin-top: 30px; }
    @media only screen and (min-width: 768px) {
      .page__enew .section + .section {
        margin-top: 50px; } }
  .page__enew .form--contactus .footer-button {
    margin-top: 30px; }
    @media only screen and (min-width: 768px) {
      .page__enew .form--contactus .footer-button {
        margin-top: 60px; } }
  .page__enew .form--complete {
    background-color: transparent;
    background-color: transparent; }
    .page__enew .form--complete .circle {
      border: 1px solid #34A93E; }
  .page__enew .padding-bottom {
    padding-bottom: 30px; }
    @media only screen and (min-width: 768px) {
      .page__enew .padding-bottom {
        padding-bottom: 60px; } }
    @media only screen and (min-width: 1200px) {
      .page__enew .padding-bottom {
        padding-bottom: 100px; } }

/* ========================================== */
/* 				   Page FAQS      	  	      */
/* ========================================== */
.page__faq .section--page_name {
  padding-bottom: 20px; }

.page__faq .section--accordion {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__faq .section--accordion {
      margin-top: 50px; } }
  @media only screen and (min-width: 992px) {
    .page__faq .section--accordion {
      margin-top: 80px; } }

/* ========================================== */
/* 			    Page Procurement      	  	  */
/* ========================================== */
.page__procurement .section--page_name {
  padding-bottom: 20px; }

.page__procurement.page__inner .section {
  padding-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__procurement.page__inner .section {
      padding-top: 60px; } }
  @media only screen and (min-width: 1200px) {
    .page__procurement.page__inner .section {
      padding-top: 70px; } }
  .page__procurement.page__inner .section .header-detail {
    position: relative;
    margin-bottom: 40px; }
    .page__procurement.page__inner .section .header-detail .btn {
      min-width: 150px;
      margin-bottom: 30px; }
      .page__procurement.page__inner .section .header-detail .btn .icon {
        margin-right: 10px; }
      @media only screen and (min-width: 992px) {
        .page__procurement.page__inner .section .header-detail .btn {
          position: absolute;
          left: 0;
          top: 0;
          margin-bottom: 0; } }
  @media only screen and (min-width: 992px) {
    .page__procurement.page__inner .section .header-procurement {
      max-width: 640px;
      margin: 0 auto; } }
  .page__procurement.page__inner .section .header-procurement .section-title {
    font-weight: 500 !important;
    padding: 25px 0 15px 0; }
  .page__procurement.page__inner .section .header-procurement span {
    color: #555555;
    display: inline-block; }
    @media only screen and (min-width: 992px) {
      .page__procurement.page__inner .section .header-procurement span.pre-title {
        padding-top: 15px; } }
  .page__procurement.page__inner .section .detail-procurement .block-frame {
    background-color: #FAFAFA; }
    @media only screen and (min-width: 544px) {
      .page__procurement.page__inner .section .detail-procurement .block-frame {
        padding: 20px; } }
    @media only screen and (min-width: 768px) {
      .page__procurement.page__inner .section .detail-procurement .block-frame {
        padding: 40px; } }
    .page__procurement.page__inner .section .detail-procurement .block-frame + .footer-button {
      margin-top: 40px; }
      @media only screen and (min-width: 768px) {
        .page__procurement.page__inner .section .detail-procurement .block-frame + .footer-button {
          margin-top: 70px; } }
  .page__procurement.page__inner .section .detail-procurement .wrapper-pdf {
    position: relative;
    z-index: 1;
    display: table;
    width: 100%;
    padding-bottom: 100%; }
    .page__procurement.page__inner .section .detail-procurement .wrapper-pdf iframe {
      width: 100%;
      height: 100%;
      background-color: black;
      position: absolute;
      left: 0;
      top: 0; }
      .page__procurement.page__inner .section .detail-procurement .wrapper-pdf iframe html {
        overflow-x: hidden;
        min-width: 100%; }

.page__procurement .table-file {
  margin-top: 60px; }
  @media only screen and (max-width: 767px) {
    .page__procurement .table-file {
      margin-top: 10px;
      padding-top: 25px;
      border-top: 1px solid #dddddd; } }

.section--desc {
  position: relative;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden; }

/* ========================================== */
/* 				  Page Project      	  	  */
/* ========================================== */
.page__projects .section--listing .card .thumb.zoom {
  padding-bottom: 66.5%; }

.page__projects .section--page_name {
  padding-bottom: 20px; }

@media only screen and (min-width: 992px) {
  .page__projects ul.search-filter {
    margin-bottom: 60px; } }

@media only screen and (min-width: 1200px) {
  .page__projects ul.search-filter {
    margin-bottom: 80px; } }

@media only screen and (min-width: 992px) {
  .page__projects .highlight .card {
    background-color: #F9F9F9; } }

@media only screen and (min-width: 992px) {
  .page__projects .highlight .card .info {
    padding: 40px 40px; } }

@media only screen and (min-width: 1200px) {
  .page__projects .highlight .card .info {
    padding: 60px 30px 60px 50px; } }

.page__projects .highlight .card .info header {
  margin-bottom: 10px; }
  @media only screen and (min-width: 992px) {
    .page__projects .highlight .card .info header {
      margin-bottom: 30px; } }

@media only screen and (min-width: 768px) {
  .page__projects .highlight .card .info .detail {
    margin-bottom: 10px; } }

@media only screen and (min-width: 992px) {
  .page__projects .highlight .card .info .detail {
    margin-bottom: 30px; } }

.page__projects .highlight .card .info .detail .text-content {
  line-height: 1.8;
  max-height: 100px; }
  @media only screen and (max-width: 767px) {
    .page__projects .highlight .card .info .detail .text-content {
      max-height: 80px; } }

.page__projects .highlight .card footer .btn {
  min-width: 200px; }

@media only screen and (min-width: 992px) {
  .page__projects .highlight .group-info {
    min-width: 320px; } }

@media only screen and (min-width: 1200px) {
  .page__projects .highlight .group-info {
    min-width: 360px; } }

/* ========================================== */
/* 				  Page Detail 			  	  */
/* ========================================== */
.page__detail_projects .lead-header, .page__detail_ourservice .lead-header {
  position: relative;
  width: 100%;
  height: 527px;
  background-size: auto 527px;
  background-position: top center;
  overflow: hidden; }
  .page__detail_projects .lead-header.align-left, .page__detail_ourservice .lead-header.align-left {
    background-position: top left; }
  .page__detail_projects .lead-header.align-right, .page__detail_ourservice .lead-header.align-right {
    background-position: top right; }
  @media only screen and (min-width: 1200px) {
    .page__detail_projects .lead-header.align-center, .page__detail_ourservice .lead-header.align-center {
      background-position: top center; } }
  @media only screen and (min-width: 1200px) {
    .page__detail_projects .lead-header, .page__detail_ourservice .lead-header {
      background-size: cover;
      background-position: center top; } }
  @media only screen and (max-width: 767px) {
    .page__detail_projects .lead-header, .page__detail_ourservice .lead-header {
      height: 315px;
      background-size: auto 315px; } }
  @media only screen and (max-width: 543px) {
    .page__detail_projects .lead-header, .page__detail_ourservice .lead-header {
      height: 250px;
      background-size: auto 250px; } }

.page__detail_projects .content-detail, .page__detail_ourservice .content-detail {
  margin: 0 auto;
  margin-top: -150px;
  min-height: 180px;
  position: relative;
  background-color: white;
  border-radius: 5px;
  padding: 0 40px; }
  @media only screen and (max-width: 767px) {
    .page__detail_projects .content-detail, .page__detail_ourservice .content-detail {
      margin-top: -90px; } }
  @media only screen and (max-width: 543px) {
    .page__detail_projects .content-detail, .page__detail_ourservice .content-detail {
      margin-top: -75px;
      padding: 0 15px; } }
  @media only screen and (max-width: 991px) {
    .page__detail_projects .content-detail.service-area article, .page__detail_ourservice .content-detail.service-area article {
      max-width: 100%; } }
  .page__detail_projects .content-detail article, .page__detail_ourservice .content-detail article {
    padding-top: 60px;
    margin: 0 auto 80px;
    width: 100%;
    max-width: 780px;
    text-align: center; }
    .page__detail_projects .content-detail article .title, .page__detail_ourservice .content-detail article .title {
      color: #222222; }
    @media only screen and (max-width: 991px) {
      .page__detail_projects .content-detail article, .page__detail_ourservice .content-detail article {
        max-width: 500px;
        margin-bottom: 50px; } }
    @media only screen and (max-width: 767px) {
      .page__detail_projects .content-detail article, .page__detail_ourservice .content-detail article {
        max-width: 400px;
        padding-top: 30px;
        margin-bottom: 30px; } }
    @media only screen and (max-width: 543px) {
      .page__detail_projects .content-detail article, .page__detail_ourservice .content-detail article {
        padding-top: 20px; } }
    .page__detail_projects .content-detail article .date-location, .page__detail_ourservice .content-detail article .date-location {
      padding: 20px 0;
      color: #888888; }
      .page__detail_projects .content-detail article .date-location .icon, .page__detail_ourservice .content-detail article .date-location .icon {
        vertical-align: middle;
        margin-top: -3px;
        margin-right: 5px; }
      .page__detail_projects .content-detail article .date-location p, .page__detail_ourservice .content-detail article .date-location p {
        padding: 0;
        margin: 0;
        display: inline-block;
        color: #888888; }
        .page__detail_projects .content-detail article .date-location p:last-child, .page__detail_ourservice .content-detail article .date-location p:last-child {
          padding-left: 20px; }
        @media only screen and (max-width: 991px) {
          .page__detail_projects .content-detail article .date-location p, .page__detail_ourservice .content-detail article .date-location p {
            display: block;
            text-align: center; }
            .page__detail_projects .content-detail article .date-location p:last-child, .page__detail_ourservice .content-detail article .date-location p:last-child {
              padding-left: 0; } }
        .page__detail_projects .content-detail article .date-location p span, .page__detail_ourservice .content-detail article .date-location p span {
          padding-left: 5px; }
          .page__detail_projects .content-detail article .date-location p span a, .page__detail_ourservice .content-detail article .date-location p span a {
            color: #888888; }
            .page__detail_projects .content-detail article .date-location p span a:hover, .page__detail_ourservice .content-detail article .date-location p span a:hover {
              color: #34A93E; }
    .page__detail_projects .content-detail article .toppic, .page__detail_ourservice .content-detail article .toppic {
      font-family: "THSarabunNew", Arial, Thonburi;
      font-weight: bold;
      padding: 40px 0;
      text-align: center;
      line-height: 1.8;
      color: #222222; }
      @media only screen and (max-width: 767px) {
        .page__detail_projects .content-detail article .toppic, .page__detail_ourservice .content-detail article .toppic {
          padding: 20px 0; } }
    .page__detail_projects .content-detail article .toppic-sub, .page__detail_ourservice .content-detail article .toppic-sub {
      font-family: "THSarabunNew", Arial, Thonburi;
      font-weight: bold;
      padding: 0 0 5px 0;
      text-align: left;
      line-height: 1.8; }
      @media only screen and (max-width: 767px) {
        .page__detail_projects .content-detail article .toppic-sub, .page__detail_ourservice .content-detail article .toppic-sub {
          padding: 20px 0; } }
    .page__detail_projects .content-detail article .sub-figure, .page__detail_ourservice .content-detail article .sub-figure {
      color: #888888;
      padding: 20px 0;
      line-height: 1.8;
      display: block; }
    .page__detail_projects .content-detail article figure, .page__detail_ourservice .content-detail article figure {
      padding-top: 20px; }
      .page__detail_projects .content-detail article figure img, .page__detail_ourservice .content-detail article figure img {
        margin: 0 auto; }
    .page__detail_projects .content-detail article p, .page__detail_ourservice .content-detail article p {
      text-align: left;
      line-height: 1.8; }
      .page__detail_projects .content-detail article p + p, .page__detail_ourservice .content-detail article p + p {
        margin-top: 20px; }
      .page__detail_projects .content-detail article p.cate, .page__detail_ourservice .content-detail article p.cate {
        text-align: center; }
    .page__detail_projects .content-detail article .referent p, .page__detail_ourservice .content-detail article .referent p {
      text-align: left;
      margin: 10px 0 20px 0;
      display: block; }
      .page__detail_projects .content-detail article .referent p a, .page__detail_ourservice .content-detail article .referent p a {
        border-bottom: 1px solid #555555; }
        .page__detail_projects .content-detail article .referent p a:hover, .page__detail_ourservice .content-detail article .referent p a:hover {
          border-bottom: 1px solid #34A93E; }

.page__detail_projects .content-detail article .date-location .time:before {
  content: ", "; }

.page__detail .lead-header {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden; }
  @media only screen and (max-width: 991px) {
    .page__detail .lead-header {
      height: 300px; } }
  @media only screen and (max-width: 543px) {
    .page__detail .lead-header {
      height: 180px; } }
  @media only screen and (max-width: 320px) {
    .page__detail .lead-header {
      height: 150px; } }
  .page__detail .lead-header .blurred-bg {
    width: 120%;
    height: 600px;
    background-size: cover;
    background-position: center;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    position: absolute;
    left: -100px;
    top: -100px; }
    .page__detail .lead-header .blurred-bg.non-img {
      background-image: none;
      -webkit-filter: none;
              filter: none; }
      .page__detail .lead-header .blurred-bg.non-img:after {
        content: '';
        background-color: #E6DFBF;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute; }
    @media only screen and (max-width: 767px) {
      .page__detail .lead-header .blurred-bg {
        width: 140%; } }

.page__detail .content-detail {
  margin: 0 auto;
  margin-top: -260px;
  width: 100%;
  max-width: 700px;
  position: relative; }
  @media only screen and (max-width: 991px) {
    .page__detail .content-detail {
      margin-top: -200px;
      max-width: 480px; } }
  @media only screen and (max-width: 543px) {
    .page__detail .content-detail {
      margin-top: -150px;
      padding: 0 20px; } }
  @media only screen and (max-width: 320px) {
    .page__detail .content-detail {
      margin-top: -130px;
      padding: 0 15px; } }
  .page__detail .content-detail.no-lead {
    margin-top: 0; }
  .page__detail .content-detail figure .img-photo {
    width: 100%; }
  .page__detail .content-detail .cate {
    color: #888888;
    margin-bottom: 20px; }
  .page__detail .content-detail article {
    padding: 40px 0;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .page__detail .content-detail article {
        padding: 30px 0; } }
    .page__detail .content-detail article > .title {
      color: #222222; }
    .page__detail .content-detail article .date-remark {
      padding: 20px 0;
      color: #888888; }
      .page__detail .content-detail article .date-remark a {
        color: #888888; }
      .page__detail .content-detail article .date-remark p {
        padding: 0;
        margin: 0;
        display: inline-block; }
        .page__detail .content-detail article .date-remark p + p:before {
          content: '|';
          padding-right: 20px;
          padding-left: 15px; }
          @media only screen and (max-width: 991px) {
            .page__detail .content-detail article .date-remark p + p:before {
              display: none; } }
        @media only screen and (max-width: 991px) {
          .page__detail .content-detail article .date-remark p {
            display: block;
            text-align: center; } }
        .page__detail .content-detail article .date-remark p span {
          padding-left: 5px; }
          .page__detail .content-detail article .date-remark p span a:hover {
            color: #34A93E; }
        .page__detail .content-detail article .date-remark p .icon {
          margin-right: 5px; }
          .page__detail .content-detail article .date-remark p .icon.icon-download-v {
            margin-right: 8px; }
    .page__detail .content-detail article .toppic {
      font-family: "THSarabunNew", Arial, Thonburi;
      font-weight: bold;
      padding: 40px 0;
      text-align: center;
      line-height: 1.8;
      color: #222222; }
      @media only screen and (max-width: 767px) {
        .page__detail .content-detail article .toppic {
          padding: 20px 0; } }
    .page__detail .content-detail article .sub-figure {
      padding: 20px 0;
      line-height: 1.8;
      display: block; }
    .page__detail .content-detail article figure {
      padding-top: 20px; }
      .page__detail .content-detail article figure img {
        margin: 0 auto; }
    .page__detail .content-detail article > p {
      text-align: left;
      padding-bottom: 20px;
      line-height: 1.8; }
      .page__detail .content-detail article > p.cate {
        text-align: center; }
    .page__detail .content-detail article .referent p {
      text-align: left;
      margin: 10px 0 20px 0;
      display: block; }
      .page__detail .content-detail article .referent p a {
        border-bottom: 1px solid #555555; }
        .page__detail .content-detail article .referent p a:hover {
          border-bottom: 1px solid #34A93E; }

.tag {
  margin: 10px 0;
  display: block; }
  .tag .title {
    vertical-align: middle;
    display: inline-block;
    padding: 10px 0px;
    margin: 5px; }
  .tag ul {
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    margin-left: -5px;
    margin-right: -5px; }
    .tag ul li {
      padding: 0;
      margin: 0;
      display: inline-block;
      list-style-type: none;
      vertical-align: top;
      float: left; }
    .tag ul a {
      padding: 8px 18px;
      border: 1px solid #34A93E;
      border-radius: 50px;
      display: block;
      margin: 5px;
      transition: all 0.3s; }
      @media only screen and (max-width: 767px) {
        .tag ul a {
          margin: 5px;
          padding-top: 11px;
          padding-bottom: 11px; } }
      .tag ul a:hover, .tag ul a.active {
        background-color: #34A93E;
        color: white; }

/* ========================================== */
/* 					COLLAPSE 			  	  */
/* ========================================== */
.panel-faq.panel-group {
  margin-bottom: 0px; }

.panel-faq .panel {
  margin: 0 !important;
  border-radius: 0;
  box-shadow: none; }
  .panel-faq .panel.panel-default {
    border-color: transparent; }
  .panel-faq .panel .panel-heading {
    background-color: transparent;
    border-color: transparent;
    padding: 0; }
    .panel-faq .panel .panel-heading a {
      border-bottom: 1px solid #34A93E;
      border-top: 1px solid transparent;
      display: block;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #222222; }
      @media only screen and (max-width: 767px) {
        .panel-faq .panel .panel-heading a {
          padding-top: 15px;
          padding-bottom: 15px; } }
      .panel-faq .panel .panel-heading a.accordion-toggle {
        margin-top: -2px; }
      .panel-faq .panel .panel-heading a.collapsed {
        border-bottom: 1px solid #e6e6e6;
        border-top: 1px solid transparent; }
        .panel-faq .panel .panel-heading a.collapsed .up-down {
          /*
   * Set a counter and get the length of the image path.
   */
          /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
          /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
          /*
     * Set a base background for 1x environments.
     */
          background: url("../img/icon/icon-plus-green.png") center center no-repeat;
          background-size: 20px 20px;
          /*
     * Create an @2x-ish media query.
     */
          /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
          /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
          width: 20px;
          height: 20px;
          display: inline-block;
          background-repeat: no-repeat; }
          @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
            .panel-faq .panel .panel-heading a.collapsed .up-down {
              background: url("../img/icon/icon-plus-green%402x.png") center center no-repeat;
              background-size: 20px 20px; } }
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .panel-faq .panel .panel-heading a.collapsed .up-down {
              background: url("../img/icon/icon-plus-green%402x.png") center center no-repeat;
              background-size: 20px 20px; } }
      .panel-faq .panel .panel-heading a:hover {
        color: #34A93E; }
      .panel-faq .panel .panel-heading a .up-down {
        /*
   * Set a counter and get the length of the image path.
   */
        /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
        /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
        /*
     * Set a base background for 1x environments.
     */
        background: url("../img/icon/icon-minus-green.png") center center no-repeat;
        background-size: 20px 20px;
        /*
     * Create an @2x-ish media query.
     */
        /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
        /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
        width: 20px;
        height: 20px;
        display: inline-block;
        background-repeat: no-repeat; }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          .panel-faq .panel .panel-heading a .up-down {
            background: url("../img/icon/icon-minus-green%402x.png") center center no-repeat;
            background-size: 20px 20px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          .panel-faq .panel .panel-heading a .up-down {
            background: url("../img/icon/icon-minus-green%402x.png") center center no-repeat;
            background-size: 20px 20px; } }
      .panel-faq .panel .panel-heading a .group-question {
        padding: 0;
        margin: 0;
        font-size: 0px;
        font-size: 0rem;
        position: relative; }
        .panel-faq .panel .panel-heading a .group-question li {
          padding: 0;
          margin: 0;
          display: inline-block;
          width: 95%;
          vertical-align: top;
          font-size: 15px;
          font-size: 1.5rem; }
          @media only screen and (max-width: 767px) {
            .panel-faq .panel .panel-heading a .group-question li {
              width: 100%; } }
          .panel-faq .panel .panel-heading a .group-question li + li {
            width: 5%;
            text-align: right; }
            @media only screen and (max-width: 767px) {
              .panel-faq .panel .panel-heading a .group-question li + li {
                width: auto;
                position: absolute;
                top: 3px;
                right: 0; } }
          .panel-faq .panel .panel-heading a .group-question li h4 {
            padding: 0 35px 0 0;
            margin: 0; }
          .panel-faq .panel .panel-heading a .group-question li .up-down {
            vertical-align: middle; }
            @media only screen and (min-width: 768px) {
              .panel-faq .panel .panel-heading a .group-question li .up-down {
                margin-right: 20px; } }
  .panel-faq .panel:first-child .panel-heading a {
    border-top: 1px solid #e6e6e6;
    margin-top: 1px; }
  .panel-faq .panel .panel-body {
    padding: 30px 20px;
    border-top: none !important;
    border-bottom: 1px solid transparent;
    line-height: 1.8;
    border-bottom: 1px solid #e6e6e6; }
    @media only screen and (max-width: 767px) {
      .panel-faq .panel .panel-body {
        padding: 15px; } }
    .panel-faq .panel .panel-body p.toppic {
      color: #34A93E; }
    .panel-faq .panel .panel-body span {
      padding-bottom: 25px;
      display: block; }
    .panel-faq .panel .panel-body ul {
      padding: 0 0 25px 0;
      margin: 0; }
      .panel-faq .panel .panel-body ul li {
        padding: 0;
        margin: 0 0 0 18px; }

.scrollup {
  width: 50px;
  height: 50px;
  position: fixed;
  z-index: 99;
  bottom: 60px;
  right: 60px;
  border-radius: 500px 500px;
  display: none;
  background-color: rgba(136, 136, 136, 0.5); }
  @media only screen and (max-width: 1199px) {
    .scrollup {
      bottom: 40px;
      right: 40px; } }
  @media only screen and (max-width: 991px) {
    .scrollup {
      right: 30px; } }
  @media only screen and (max-width: 767px) {
    .scrollup {
      right: 10px; } }
  .scrollup .arrow-up {
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 25px 15px; }

.modal-open {
  padding: 0 !important;
  margin: 0 !important;
  position: fixed !important; }

.modal {
  padding: 0 !important;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999999; }
  .modal .modal-dialog {
    width: 100%;
    max-width: 730px;
    margin: auto;
    height: 100%;
    vertical-align: middle;
    display: table; }
    @media only screen and (max-width: 767px) {
      .modal .modal-dialog {
        max-width: 347px; } }
    .modal .modal-dialog .modal-content {
      display: table-cell;
      height: auto;
      border-radius: 0;
      border: none;
      vertical-align: middle;
      background-color: transparent;
      box-shadow: none;
      padding: 0 15px;
      position: relative; }
      .modal .modal-dialog .modal-content .close {
        top: 0;
        right: 0;
        position: absolute;
        margin: 0;
        float: none;
        /*
   * Set a counter and get the length of the image path.
   */
        /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
        /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
        /*
     * Set a base background for 1x environments.
     */
        background: url("../img/icon/icon-close.png") center center no-repeat;
        background-size: 40px 40px;
        /*
     * Create an @2x-ish media query.
     */
        /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
        /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
        width: 40px;
        height: 40px;
        opacity: 1; }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          .modal .modal-dialog .modal-content .close {
            background: url("../img/icon/icon-close%402x.png") center center no-repeat;
            background-size: 40px 40px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          .modal .modal-dialog .modal-content .close {
            background: url("../img/icon/icon-close%402x.png") center center no-repeat;
            background-size: 40px 40px; } }
        .modal .modal-dialog .modal-content .close span {
          display: none; }
        .modal .modal-dialog .modal-content .close:hover {
          opacity: 0.6; }
      .modal .modal-dialog .modal-content .modal-header {
        padding: 0;
        border: none;
        position: relative;
        height: 45px; }
      .modal .modal-dialog .modal-content .modal-body {
        padding: 0;
        background-color: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
        .modal .modal-dialog .modal-content .modal-body .board-header {
          width: 100%;
          height: 198px;
          display: table;
          padding-left: 250px;
          padding-right: 110px;
          background-repeat: no-repeat; }
          @media only screen and (max-width: 767px) {
            .modal .modal-dialog .modal-content .modal-body .board-header {
              background-image: none !important;
              padding-left: 0;
              padding-right: 0; } }
          @media only screen and (max-width: 767px) {
            .modal .modal-dialog .modal-content .modal-body .board-header figure img {
              width: auto;
              height: auto; } }
          .modal .modal-dialog .modal-content .modal-body .board-header .board-header-area {
            height: 100%;
            display: table-cell;
            vertical-align: middle; }
            .modal .modal-dialog .modal-content .modal-body .board-header .board-header-area h3 {
              padding-bottom: 5px; }
            @media only screen and (max-width: 767px) {
              .modal .modal-dialog .modal-content .modal-body .board-header .board-header-area {
                text-align: center;
                padding: 30px 15px 10px 15px;
                display: block;
                height: auto; } }
        .modal .modal-dialog .modal-content .modal-body .board-content {
          padding: 40px 10px 45px 45px; }
          @media only screen and (max-width: 767px) {
            .modal .modal-dialog .modal-content .modal-body .board-content {
              padding: 15px 10px 30px 15px; } }
          .modal .modal-dialog .modal-content .modal-body .board-content .board-content-area {
            height: 270px;
            padding-right: 45px;
            position: relative; }
            @media screen and (max-height: 700px) {
              .modal .modal-dialog .modal-content .modal-body .board-content .board-content-area {
                height: 210px; } }
            @media only screen and (max-width: 767px) {
              .modal .modal-dialog .modal-content .modal-body .board-content .board-content-area {
                padding: 5px 15px 0 0;
                height: 130px; } }
            .modal .modal-dialog .modal-content .modal-body .board-content .board-content-area p {
              padding-bottom: 30px;
              line-height: 1.5; }
              .modal .modal-dialog .modal-content .modal-body .board-content .board-content-area p:last-child {
                padding-bottom: 0; }
        .modal .modal-dialog .modal-content .modal-body .board-footer {
          padding-bottom: 45px;
          text-align: center; }
          @media only screen and (max-width: 767px) {
            .modal .modal-dialog .modal-content .modal-body .board-footer {
              padding-bottom: 30px;
              width: 260px;
              margin: 0 auto; } }
          @media only screen and (max-width: 767px) {
            .modal .modal-dialog .modal-content .modal-body .board-footer a {
              width: 100%;
              min-width: auto; } }
          .modal .modal-dialog .modal-content .modal-body .board-footer .icon.icon-pagi-right {
            margin-left: 20px; }
            @media only screen and (max-width: 767px) {
              .modal .modal-dialog .modal-content .modal-body .board-footer .icon.icon-pagi-right {
                margin-left: 10px; } }

.section--empty {
  padding-top: 80px;
  padding-bottom: 80px;
  display: table;
  width: 100%;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .section--empty {
      padding-top: 20px;
      padding-bottom: 20px; } }
  .section--empty .group {
    display: table-cell;
    vertical-align: middle; }
    .section--empty .group .icon {
      margin-right: 18px; }
    .section--empty .group .btn {
      margin-top: 40px; }
      @media only screen and (max-width: 767px) {
        .section--empty .group .btn {
          margin-top: 20px; } }

.page__articles .lead-header .blurred-bg::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg-black-transparent.png");
  background-color: transparent;
  background-color: transparent; }

.page__publication .lead-header .blurred-bg.non-img::after {
  background-image: url("../img/bg-black-transparent.png");
  background-color: transparent;
  background-color: transparent; }

.page__publication .content-detail .show-book {
  padding-top: 80px;
  padding-bottom: 80px; }
  @media only screen and (max-width: 1199px) {
    .page__publication .content-detail .show-book {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media only screen and (max-width: 991px) {
    .page__publication .content-detail .show-book {
      padding-top: 40px;
      padding-bottom: 40px; } }
  @media only screen and (max-width: 767px) {
    .page__publication .content-detail .show-book {
      padding-top: 15px;
      padding-bottom: 15px; } }

.page__publication .content-detail .group-book figure {
  max-width: 216px;
  margin: 0 auto;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5); }
  @media only screen and (max-width: 1199px) {
    .page__publication .content-detail .group-book figure {
      max-width: 200px; } }
  @media only screen and (max-width: 991px) {
    .page__publication .content-detail .group-book figure {
      max-width: 180px; } }
  @media only screen and (max-width: 767px) {
    .page__publication .content-detail .group-book figure {
      max-width: 114px; } }

.page__publication .content-detail .footer-button {
  margin-top: 20px; }
  .page__publication .content-detail .footer-button .btn {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1;
    white-space: normal; }

.nicescroll-rails {
  z-index: 999 !important; }

#ascrail2000 .nicescroll-cursors {
  background-color: transparent !important;
  background-color: transparent !important;
  border: none !important; }

.page__calendar .section--listing {
  padding-bottom: 0; }

@media only screen and (max-width: 767px) {
  .page__calendar .header-detail {
    margin-bottom: 20px !important; } }

.calendar-detai {
  margin-top: 30px;
  padding-bottom: 30px; }
  @media only screen and (min-width: 768px) {
    .calendar-detai {
      margin-top: 60px;
      padding-bottom: 60px; } }
  .calendar-detai .container {
    max-width: 700px; }
  .calendar-detai .show-cover {
    margin: 0 auto 60px; }
    .calendar-detai .show-cover img {
      width: 100%; }
    @media only screen and (max-width: 991px) {
      .calendar-detai .show-cover {
        margin-bottom: 40px; } }
    @media only screen and (max-width: 767px) {
      .calendar-detai .show-cover {
        margin-bottom: 25px; } }

.date-detail {
  background-color: #F9F9F9;
  padding: 40px 0px;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .date-detail {
      padding: 30px 0px; } }
  .date-detail .button-back {
    margin-bottom: 30px; }
    .date-detail .button-back .btn {
      min-width: 150px; }
      .date-detail .button-back .btn .icon {
        margin-right: 10px; }
  @media only screen and (min-width: 767px) {
    .date-detail .group-detail {
      margin-top: 30px; } }
  .date-detail [rel="border-circle"] {
    width: 150px;
    height: 150px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 94px;
    font-size: 9.4rem;
    border-color: #cccccc; }
    html.desktop.mac .date-detail [rel="border-circle"] {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 70px;
      font-size: 7rem;
      font-weight: 200; }
    @media only screen and (max-width: 767px) {
      .date-detail [rel="border-circle"] {
        width: 140px;
        height: 140px;
        font-size: 70px;
        font-size: 7rem; }
        html.desktop.mac .date-detail [rel="border-circle"] {
          font-size: 52px;
          font-size: 5.2rem; } }
    .date-detail [rel="border-circle"] span {
      color: #34A93E;
      display: block;
      line-height: 1;
      text-align: center;
      transition: all .25s ease-in-out; }
    .date-detail [rel="border-circle"] .date {
      line-height: 0.7; }
      html.desktop.mac .date-detail [rel="border-circle"] .date {
        line-height: 1; }
    .date-detail [rel="border-circle"] .month {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 38px;
      font-size: 3.8rem; }
      html.desktop.mac .date-detail [rel="border-circle"] .month {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 27px;
        font-size: 2.7rem;
        font-weight: 500; }
  .date-detail .ball.active [rel="border-circle"] {
    background-color: #34A93E;
    border-color: #34A93E; }
    .date-detail .ball.active [rel="border-circle"] span {
      color: white; }
  .date-detail .info {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
    position: relative; }
    @media only screen and (min-width: 992px) {
      .date-detail .info {
        text-align: left;
        margin-left: 30px;
        padding-left: 40px;
        max-width: 650px;
        margin-top: 0;
        min-height: 150px; } }
    .date-detail .info:before {
      border-right: 1px solid #888888;
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%; }
      @media only screen and (max-width: 991px) {
        .date-detail .info:before {
          display: none; } }
    .date-detail .info .topic-title {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 46px;
      font-size: 4.6rem; }
      html.desktop.mac .date-detail .info .topic-title {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 35px;
        font-size: 3.5rem;
        font-weight: 500; }
      @media only screen and (max-width: 767px) {
        .date-detail .info .topic-title {
          font-size: 32px;
          font-size: 3.2rem; }
          html.desktop.mac .date-detail .info .topic-title {
            font-size: 24px;
            font-size: 2.4rem; } }
  .date-detail .detail {
    margin-top: 10px; }
    .date-detail .detail .icon {
      vertical-align: middle;
      margin-right: 15px; }
    .date-detail .detail .list {
      font-size: 20px;
      font-size: 2rem;
      color: #222222; }
      @media only screen and (max-width: 767px) {
        .date-detail .detail .list {
          font-size: 15px;
          font-size: 1.5rem; }
          .date-detail .detail .list li + li {
            margin-top: 10px; } }
      @media only screen and (max-width: 543px) {
        .date-detail .detail .list li {
          display: block; } }

.gm-style-mtc [role="button"] {
  height: 31px; }

.datepicker.dropdown-menu {
  font-size: 16px;
  font-size: 1.6rem; }

div.at4-arrow {
  display: none !important; }

@media only screen and (max-width: 991px) {
  .page__events .lead-header {
    height: 200px; } }

@media only screen and (max-width: 543px) {
  .page__events .lead-header {
    height: 180px; } }

.page__events .content-detail {
  margin-top: -150px; }
  .page__events .content-detail .register {
    margin-bottom: 20px; }
  .page__events .content-detail article {
    padding-top: 20px; }
    @media only screen and (max-width: 767px) {
      .page__events .content-detail article {
        padding-top: 10px; } }
  @media only screen and (max-width: 991px) {
    .page__events .content-detail {
      margin-top: -100px; } }
  @media only screen and (max-width: 543px) {
    .page__events .content-detail {
      margin-top: -80px; } }
  .page__events .content-detail footer {
    margin-top: 20px; }

.page__events.page__detail .date-remark .icon,
.page__events.page__detail .date-remark .text {
  vertical-align: middle; }

.page__events.page__detail .date-remark time {
  color: #888888; }
  @media only screen and (max-width: 991px) {
    .page__events.page__detail .date-remark time {
      display: block; } }

.page__events.page__detail .date-remark time + .location {
  margin-top: 10px; }
  @media only screen and (min-width: 992px) {
    .page__events.page__detail .date-remark time + .location {
      margin-left: 10px;
      margin-top: 0; } }

@media only screen and (max-width: 991px) {
  .page__events.page__detail .location {
    display: block; } }

.page__events.page__detail .location .text {
  color: #888888; }

.page__home {
  overflow: hidden; }
  .page__home .section {
    margin: 60px 0px 40px; }
    .page__home .section.section--video {
      margin-top: 40px; }
    @media only screen and (min-width: 768px) {
      .page__home .section {
        margin: 80px 0px 60px; } }
    @media only screen and (min-width: 1200px) {
      .page__home .section {
        margin: 120px 0px 100px; }
        .page__home .section.section--video {
          margin-top: 80px; } }
  .page__home .section-title {
    padding: 5px 0px;
    margin-bottom: 20px; }
    @media only screen and (min-width: 768px) {
      .page__home .section-title {
        margin-bottom: 50px; } }
  .page__home .section--event .section-title {
    margin-bottom: 0;
    line-height: 0.85; }
    html.desktop.mac .page__home .section--event .section-title {
      line-height: 1; }
    @media only screen and (min-width: 768px) {
      .page__home .section--event .section-title {
        padding-bottom: 10px; } }
  .page__home .have-intro {
    margin-bottom: 20px; }
    @media only screen and (min-width: 768px) {
      .page__home .have-intro {
        margin-bottom: 50px; } }
    .page__home .have-intro .section-title {
      margin-bottom: 0; }
    .page__home .have-intro .section-intro {
      font-weight: normal;
      margin-top: 5px;
      color: #222222; }
      html.desktop.mac .page__home .have-intro .section-intro {
        font-weight: 500; }
  .page__home .footer-button {
    margin-top: 30px; }
    .page__home .footer-button .icon {
      margin-right: 10px; }
    @media only screen and (min-width: 768px) {
      .page__home .footer-button {
        margin-top: 50px; }
        .page__home .footer-button .clear-small {
          width: 15px;
          display: inline-block;
          vertical-align: middle; } }
    @media only screen and (max-width: 767px) {
      .page__home .footer-button .clear-small {
        display: block;
        height: 20px; } }

.section--project .topic-title {
  font-size: 32px;
  font-size: 3.2rem;
  max-height: 100px; }
  html.desktop.mac .section--project .topic-title {
    font-size: 24px;
    font-size: 2.4rem; }
  html.desktop.mac .section--project .topic-title {
    max-height: 80px; }
  @media only screen and (min-width: 768px) {
    .section--project .topic-title {
      font-size: 46px;
      font-size: 4.6rem;
      max-height: 120px; }
      html.desktop.mac .section--project .topic-title {
        font-size: 35px;
        font-size: 3.5rem; }
      html.desktop.mac .section--project .topic-title {
        max-height: 100px; } }

@media only screen and (min-width: 768px) {
  .section--knowledge .highlight {
    margin-bottom: 30px; } }

@media only screen and (min-width: 992px) {
  .section--knowledge .highlight {
    margin-bottom: 20px; } }

@media only screen and (min-width: 992px) {
  .section--knowledge .highlight .card .thumb {
    margin-bottom: 0; } }

.section--knowledge .highlight .card header .topic-title {
  font-size: 46px;
  font-size: 4.6rem;
  max-height: 140px; }
  html.desktop.mac .section--knowledge .highlight .card header .topic-title {
    font-size: 35px;
    font-size: 3.5rem; }
  .section--knowledge .highlight .card header .topic-title a {
    display: block; }
  html.desktop.mac .section--knowledge .highlight .card header .topic-title {
    max-height: 150px; }

@media only screen and (min-width: 992px) {
  .section--knowledge .highlight .info {
    padding-top: 20px;
    padding-bottom: 20px; } }

@media only screen and (min-width: 1200px) {
  .section--knowledge .highlight .info {
    padding: 40px 20px 40px 20px; } }

.section--hero {
  position: relative; }
  .section--hero .progress {
    width: 102px;
    height: 102px;
    position: absolute;
    right: 50px;
    bottom: 30px;
    z-index: 10;
    background-color: transparent;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible; }
    @media only screen and (max-width: 991px) {
      .section--hero .progress {
        width: 64px;
        height: 64px;
        right: 20px;
        bottom: 20px; } }
    @media only screen and (max-width: 767px) {
      .section--hero .progress {
        right: 10px;
        bottom: 10px; } }
    .section--hero .progress:hover {
      cursor: pointer; }
      .section--hero .progress:hover .counter {
        cursor: default; }
      .section--hero .progress:hover .progress-photo {
        box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5); }
    .section--hero .progress .counter {
      position: absolute;
      left: 50%;
      top: 0;
      color: white;
      margin-left: -22px;
      margin-top: -55px;
      background-image: url("../img/icon/bg-counter%402x.png");
      width: 44px;
      height: 44px;
      background-size: 44px 44px; }
      @media only screen and (max-width: 991px) {
        .section--hero .progress .counter {
          margin-top: -45px; } }
      @media only screen and (max-width: 543px) {
        .section--hero .progress .counter {
          display: none; } }
      .section--hero .progress .counter .start,
      .section--hero .progress .counter .total {
        position: absolute;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        font-family: "thaisans";
        font-weight: normal;
        font-size: 27px;
        font-size: 2.7rem; }
        html.desktop.mac .section--hero .progress .counter .start, html.desktop.mac
        .section--hero .progress .counter .total {
          font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
          font-size: 21px;
          font-size: 2.1rem;
          font-weight: 500; }
        @media only screen and (max-width: 991px) {
          .section--hero .progress .counter .start,
          .section--hero .progress .counter .total {
            font-size: 24px;
            font-size: 2.4rem; }
            html.desktop.mac .section--hero .progress .counter .start, html.desktop.mac
            .section--hero .progress .counter .total {
              font-size: 18px;
              font-size: 1.8rem; } }
      .section--hero .progress .counter .start {
        left: 4px;
        top: -4px; }
      .section--hero .progress .counter .total {
        bottom: 0;
        right: 5px; }
  .section--hero .progress > svg {
    width: 100%;
    height: 100%;
    display: block; }
  .section--hero .progress-photo {
    position: absolute;
    left: 11px;
    top: 11px;
    z-index: -1;
    width: 80px;
    height: 80px;
    border-radius: 500px 500px;
    background-size: cover;
    background-position: center center; }
    @media only screen and (max-width: 991px) {
      .section--hero .progress-photo {
        width: 48px;
        height: 48px;
        left: 8px;
        top: 8px; } }

.section--video [rel="border-circle"] {
  width: 50px;
  height: 50px; }
  @media only screen and (min-width: 768px) {
    .section--video [rel="border-circle"] {
      width: 80px;
      height: 80px; } }
  @media only screen and (min-width: 992px) {
    .section--video [rel="border-circle"] {
      width: 100px;
      height: 100px; } }

@media only screen and (min-width: 1200px) {
  .section--video .video-wrapper {
    max-width: 1040px;
    margin: 0 auto; } }

.section--video .start-video {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  cursor: pointer;
  transition: all 0.3s; }
  @media only screen and (min-width: 768px) {
    .section--video .start-video {
      margin-left: -40px;
      margin-top: -40px;
      display: none; } }
  @media only screen and (min-width: 992px) {
    .section--video .start-video {
      margin-left: -50px;
      margin-top: -50px; } }
  .section--video .start-video .icon-play {
    margin-right: -9px; }
    @media only screen and (max-width: 767px) {
      .section--video .start-video .icon-play {
        margin-right: -5px; } }

.section--video .thumbnail_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  height: 100%;
  width: 100%;
  background-position: center center; }
  @media only screen and (min-width: 768px) {
    .section--video .thumbnail_container {
      background-image: none !important;
      display: none; } }
  .section--video .thumbnail_container .thumbnail {
    width: 100%;
    display: block;
    border: none !important;
    border-radius: 0px 0px;
    padding: 0;
    margin-bottom: 0; }
    @media only screen and (min-width: 768px) {
      .section--video .thumbnail_container .thumbnail {
        background-image: none !important;
        background-color: transparent;
        background-color: transparent; } }

.swiper-hero .swiper-slide .link-out {
  display: table;
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (max-width: 543px) {
    .swiper-hero .swiper-slide .link-out {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .swiper-hero .swiper-slide .link-out {
      padding-top: 42%; } }

.swiper-hero .swiper-slide .photo {
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; }

.swiper-hero .swiper-slide .-desktop {
  display: block; }
  @media only screen and (max-width: 543px) {
    .swiper-hero .swiper-slide .-desktop {
      display: none; } }

.swiper-hero .swiper-slide .-mobile {
  display: none; }
  @media only screen and (max-width: 543px) {
    .swiper-hero .swiper-slide .-mobile {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.swiper-project {
  position: relative; }
  @media only screen and (min-width: 992px) {
    .swiper-project .group-info {
      padding: 50px 0px 0px 40px; } }
  @media only screen and (min-width: 1200px) {
    .swiper-project .group-info {
      padding: 50px 10px 0px 40px; } }
  @media only screen and (min-width: 992px) {
    .swiper-project {
      height: 100%; }
      .swiper-project .swiper-wrapper .thumb * {
        height: 100%; }
      .swiper-project .swiper-slide-prev {
        pointer-events: none; } }
  .swiper-project .swiper-button-prev,
  .swiper-project .swiper-button-next {
    width: 70px;
    height: 70px;
    margin-top: -35px; }
    .swiper-project .swiper-button-prev [rel="border-circle"],
    .swiper-project .swiper-button-next [rel="border-circle"] {
      width: 70px;
      height: 70px; }
    @media only screen and (max-width: 991px) {
      .swiper-project .swiper-button-prev,
      .swiper-project .swiper-button-next {
        margin-top: -120px;
        width: 60px;
        height: 60px; }
        .swiper-project .swiper-button-prev [rel="border-circle"],
        .swiper-project .swiper-button-next [rel="border-circle"] {
          width: 60px;
          height: 60px; } }
  .swiper-project .swiper-button-prev {
    margin-left: -30px; }
    @media only screen and (min-width: 992px) {
      .swiper-project .swiper-button-prev {
        margin-left: -45px; } }
    @media only screen and (min-width: 1200px) {
      .swiper-project .swiper-button-prev {
        margin-left: -50px; } }
  .swiper-project .swiper-button-next {
    margin-right: -30px; }
    @media only screen and (min-width: 992px) {
      .swiper-project .swiper-button-next {
        margin-right: -45px; } }
    @media only screen and (min-width: 1200px) {
      .swiper-project .swiper-button-next {
        margin-right: -50px; } }
  @media only screen and (min-width: 768px) {
    .swiper-project .swiper-slide.swiper-slide-active {
      opacity: 1; }
    .swiper-project .swiper-slide.swiper-slide-prev, .swiper-project .swiper-slide.swiper-slide-next {
      opacity: 0.2; } }
  @media only screen and (min-width: 992px) {
    .swiper-project .swiper-slide {
      background-color: #F9F9F9; } }
  @media only screen and (max-width: 767px) {
    .swiper-project .swiper-slide {
      width: calc(100% - 60px); }
      .swiper-project .swiper-slide:only-child {
        width: 100%; } }

.section--project .wrapper-swiper-box {
  position: relative;
  height: 100%;
  background-color: #F9F9F9; }
  @media only screen and (min-width: 992px) {
    .section--project .wrapper-swiper-box {
      min-width: 320px; } }
  @media only screen and (min-width: 1200px) {
    .section--project .wrapper-swiper-box {
      min-width: 360px; } }

@media only screen and (min-width: 992px) {
  .section--project .swiper-box {
    padding: 40px 40px;
    width: 100%;
    height: 100%; } }

@media only screen and (min-width: 1200px) {
  .section--project .swiper-box {
    padding: 60px 30px 60px 50px; } }

.section--project .widget--slide .photo {
  overflow: hidden;
  padding-bottom: 66.5%; }

.section--project .info {
  background-color: transparent;
  background-color: transparent; }

.section--event {
  position: relative; }
  .section--event .card {
    width: 100%; }
    .section--event .card .thumb img {
      width: 100%; }
    .section--event .card .detail .icon {
      position: absolute;
      left: 0;
      margin-top: 4px; }
      @media only screen and (min-width: 768px) {
        .section--event .card .detail .icon {
          margin-top: 5px; } }
    .section--event .card .detail .icon-pin {
      margin-left: 2px; }
    .section--event .card .detail time,
    .section--event .card .detail .location {
      padding-left: 25px; }
      @media only screen and (min-width: 768px) {
        .section--event .card .detail time,
        .section--event .card .detail .location {
          line-height: 1.8;
          display: inline-block; } }
    .section--event .card .detail .location {
      position: relative; }
      @media only screen and (max-width: 991px) {
        .section--event .card .detail .location {
          display: block; } }
      .section--event .card .detail .location a {
        color: #888888; }
    @media only screen and (min-width: 992px) {
      .section--event .card .detail time + .location {
        margin-left: 15px; } }
    @media only screen and (max-width: 991px) {
      .section--event .card .detail time + .location {
        margin-top: 5px; } }
    @media only screen and (max-width: 767px) {
      .section--event .card .detail time + .location {
        margin-top: 10px; } }
    .section--event .card .detail .text {
      display: inline-block; }
      @media only screen and (max-width: 767px) {
        .section--event .card .detail .text {
          max-width: calc(100% - 25px); } }
  .section--event .data-slide {
    margin-top: 25px; }
    @media only screen and (min-width: 768px) {
      .section--event .data-slide {
        margin-top: 50px; } }
  @media only screen and (min-width: 1200px) {
    .section--event .swiper-slide {
      width: calc(100% - 250px); } }
  @media only screen and (max-width: 767px) {
    .section--event .swiper-slide {
      width: calc(100% - 60px); } }
  @media only screen and (min-width: 768px) {
    .section--event .swiper-slide-prev,
    .section--event .swiper-slide-next {
      opacity: 0.2; } }

html.ie .swiper-knowledge .card {
  width: 100%; }

@media only screen and (min-width: 768px) {
  .swiper-knowledge .swiper-slide:nth-child(1) {
    display: none; } }

@media only screen and (min-width: 992px) {
  .swiper-knowledge .swiper-slide {
    width: 300px; } }

@media only screen and (min-width: 1200px) {
  .swiper-knowledge .swiper-slide {
    width: 320px; } }

@media only screen and (min-width: 1900px) {
  .swiper-knowledge .swiper-slide {
    width: 340px; } }

@media only screen and (max-width: 991px) {
  .swiper-knowledge .swiper-slide {
    width: calc(100% - 60%); } }

@media only screen and (max-width: 767px) {
  .swiper-knowledge .swiper-slide {
    width: calc(100% - 60px); } }

#navbar-section {
  position: absolute;
  opacity: 0; }
  @media only screen and (max-width: 1199px) {
    #navbar-section {
      display: none !important; } }
  #navbar-section.affix {
    display: block;
    opacity: 1;
    position: fixed;
    left: 30px;
    top: 50%;
    z-index: 99;
    margin-top: -65px;
    width: 16px;
    height: 170px; }
  #navbar-section .nav > li > a {
    padding: 0;
    margin: 0; }
  #navbar-section .nav-tabs {
    border: none; }
    #navbar-section .nav-tabs li {
      float: none;
      margin-bottom: 0;
      text-align: center; }
      #navbar-section .nav-tabs li + li {
        margin-top: 15px; }
      #navbar-section .nav-tabs li.active > a {
        background-color: #34A93E;
        width: 16px;
        height: 16px;
        border: none;
        opacity: 1; }
    #navbar-section .nav-tabs a {
      border: 1px solid rgba(0, 0, 0, 0.3);
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 500px 500px;
      background-color: white; }
      #navbar-section .nav-tabs a:hover {
        opacity: 1;
        background-color: #34A93E; }

.page__aboutus .element {
  position: absolute;
  display: inline-block; }
  .page__aboutus .element.element-left {
    left: 0; }
  .page__aboutus .element.element-right {
    right: 0; }
  @media only screen and (max-width: 991px) {
    .page__aboutus .element {
      display: none; } }

.page__aboutus .section {
  padding: 30px 0px;
  position: relative; }
  @media only screen and (min-width: 768px) {
    .page__aboutus .section {
      padding: 60px 0px; } }
  @media only screen and (min-width: 1200px) {
    .page__aboutus .section {
      padding: 150px 0px; }
      .page__aboutus .section.-first {
        padding-top: calc(150px - 80px); }
      .page__aboutus .section.section--intro {
        padding-bottom: 20px; }
      .page__aboutus .section.pb-100 {
        padding-bottom: 100px; }
      .page__aboutus .section.section--contribution, .page__aboutus .section.section--mission {
        padding-top: 100px;
        padding-bottom: 100px; } }

.page__aboutus .section--hero .wrapper-hero {
  display: table;
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (max-width: 543px) {
    .page__aboutus .section--hero .wrapper-hero {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .page__aboutus .section--hero .wrapper-hero {
      padding-top: 32%; } }

.page__aboutus .section--hero .photo {
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; }

.page__aboutus .section--hero .-desktop {
  display: block; }
  @media only screen and (max-width: 543px) {
    .page__aboutus .section--hero .-desktop {
      display: none; } }

.page__aboutus .section--hero .-mobile {
  display: none; }
  @media only screen and (max-width: 543px) {
    .page__aboutus .section--hero .-mobile {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.page__aboutus .section--intro .caption {
  font-family: "thaisans";
  font-weight: normal;
  margin-top: 40px;
  font-size: 38px;
  font-size: 3.8rem; }
  html.desktop.mac .page__aboutus .section--intro .caption {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-weight: 500; }
  html.desktop.mac .page__aboutus .section--intro .caption {
    font-size: 27px;
    font-size: 2.7rem; }
  @media only screen and (max-width: 767px) {
    .page__aboutus .section--intro .caption {
      font-size: 28px;
      font-size: 2.8rem; }
      html.desktop.mac .page__aboutus .section--intro .caption {
        font-size: 20px;
        font-size: 2rem; } }

.page__aboutus .group-article {
  text-align: center; }
  .page__aboutus .group-article .info {
    margin: 40px auto 0px; }
    @media only screen and (max-width: 767px) {
      .page__aboutus .group-article .info {
        margin-top: 20px; } }
    .page__aboutus .group-article .info p {
      line-height: 1.8; }
    @media only screen and (min-width: 768px) {
      .page__aboutus .group-article .info {
        font-size: 20px;
        font-size: 2rem;
        max-width: 700px; }
        .page__aboutus .group-article .info.full-width {
          max-width: 100%; } }

.page__aboutus .topic {
  display: inline-block; }
  .page__aboutus .topic .title span {
    display: inline-block;
    border-bottom: 2px solid #222222;
    font-family: "thaisans";
    font-weight: lighter;
    font-size: 46px;
    font-size: 4.6rem;
    padding-bottom: 5px; }
    html.desktop.mac .page__aboutus .topic .title span {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 35px;
      font-size: 3.5rem;
      font-weight: 200; }
  .page__aboutus .topic .title strong {
    display: block;
    font-family: "thaisans";
    font-weight: bold; }
    html.desktop.mac .page__aboutus .topic .title strong {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 700; }
  .page__aboutus .topic .image {
    margin: 0 auto 10px;
    display: inline-block; }

.page__aboutus .section--vision .element-left {
  bottom: 200px;
  margin-bottom: -212px;
  margin-left: -40px; }
  @media only screen and (max-width: 1199px) {
    .page__aboutus .section--vision .element-left {
      margin-left: -191px; } }

.page__aboutus .section--vision .element-right {
  bottom: 200px; }
  @media only screen and (max-width: 1199px) {
    .page__aboutus .section--vision .element-right {
      margin-right: -110px; } }

.page__aboutus .section--business .element-left {
  bottom: 50%;
  margin-bottom: -200px;
  left: -60px; }
  @media only screen and (max-width: 1199px) {
    .page__aboutus .section--business .element-left {
      margin-left: -135px; } }

.page__aboutus .section--business:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  background-color: #F9F9F9; }
  @media only screen and (min-width: 768px) {
    .page__aboutus .section--business:before {
      width: calc(100% - 50px); } }
  @media only screen and (min-width: 992px) {
    .page__aboutus .section--business:before {
      width: calc(100% - 100px); } }

.page__aboutus .section--knowledge .element-left {
  top: 80px; }
  @media only screen and (max-width: 1199px) {
    .page__aboutus .section--knowledge .element-left {
      margin-left: -50px; } }

.page__aboutus .section--knowledge .element-right {
  top: -20px; }
  @media only screen and (max-width: 1199px) {
    .page__aboutus .section--knowledge .element-right {
      margin-right: -100px; } }

.page__aboutus .section--media {
  position: relative;
  z-index: 10; }
  .page__aboutus .section--media .element-right {
    top: 0; }
    @media only screen and (max-width: 1199px) {
      .page__aboutus .section--media .element-right {
        margin-right: -80px; } }
  .page__aboutus .section--media .element-left {
    top: 330px;
    left: -80px; }
    @media only screen and (max-width: 1199px) {
      .page__aboutus .section--media .element-left {
        margin-left: -170px; } }
  .page__aboutus .section--media:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-color: #F9F9F9; }
    @media only screen and (min-width: 768px) {
      .page__aboutus .section--media:before {
        width: calc(100% - 50px); } }
    @media only screen and (min-width: 992px) {
      .page__aboutus .section--media:before {
        width: calc(100% - 100px); } }

@media only screen and (min-width: 768px) {
  .page__aboutus .section--sponsor .group-article .info {
    max-width: 900px; } }

.page__aboutus .footer-button {
  margin-top: 40px; }
  @media only screen and (min-width: 992px) {
    .page__aboutus .footer-button {
      margin-top: 70px; } }

.section--slogan {
  background-color: #F9F9F9; }
  .section--slogan .topic-title {
    margin-bottom: 20px;
    font-family: "thaisans";
    font-weight: bold; }
    html.desktop.mac .section--slogan .topic-title {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 50px;
      font-size: 5rem;
      font-weight: 700; }
    @media only screen and (max-width: 991px) {
      .section--slogan .topic-title {
        font-size: 62px;
        font-size: 6.2rem; }
        html.desktop.mac .section--slogan .topic-title {
          font-size: 45px;
          font-size: 4.5rem; } }
    @media only screen and (max-width: 767px) {
      .section--slogan .topic-title {
        font-size: 38px;
        font-size: 3.8rem; }
        html.desktop.mac .section--slogan .topic-title {
          font-size: 27px;
          font-size: 2.7rem; } }
  .section--slogan .group-article .info {
    padding-left: 30px;
    max-width: 820px;
    display: inline-block;
    padding-top: 5px;
    position: relative;
    margin-top: 0; }
    @media only screen and (min-width: 768px) {
      .section--slogan .group-article .info {
        padding-left: 70px; } }
    .section--slogan .group-article .info:before {
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 8px;
      background-image: url("../img/aboutus/border-line.jpg");
      height: 100%;
      background-size: contain;
      background-position: left top;
      background-repeat: no-repeat; }
      @media only screen and (max-width: 767px) {
        .section--slogan .group-article .info:before {
          width: 6px;
          background-image: linear-gradient(#000000 0%, #34A93E 93%); } }
    @media only screen and (min-width: 768px) {
      .section--slogan .group-article .info {
        max-width: 820px; } }
  .section--slogan .group-article .text {
    font-family: "thaisans";
    font-weight: normal;
    font-size: 27px;
    font-size: 2.7rem;
    line-height: 1.4 !important; }
    html.desktop.mac .section--slogan .group-article .text {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 21px;
      font-size: 2.1rem;
      font-weight: 500; }
    @media only screen and (max-width: 767px) {
      .section--slogan .group-article .text {
        font-size: 21px;
        font-size: 2.1rem; }
        html.desktop.mac .section--slogan .group-article .text {
          font-size: 16px;
          font-size: 1.6rem; } }

.section--slogan,
.section--logo {
  padding-top: 80px;
  padding-bottom: 80px; }
  @media only screen and (max-width: 991px) {
    .section--slogan,
    .section--logo {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media only screen and (max-width: 767px) {
    .section--slogan,
    .section--logo {
      padding-top: 30px;
      padding-bottom: 30px; } }

.section--logo .logo {
  max-width: 350px;
  margin: 0 auto; }
  @media only screen and (max-width: 1199px) {
    .section--logo .logo {
      max-width: 300px; } }
  @media only screen and (max-width: 991px) {
    .section--logo .logo {
      max-width: 260px; } }
  @media only screen and (max-width: 767px) {
    .section--logo .logo {
      max-width: 250px; } }

.section--logo .topic-title {
  margin-bottom: 25px; }

.section--logo .show-table {
  display: table; }
  @media only screen and (max-width: 767px) {
    .section--logo .show-table {
      width: 100%; } }

.section--logo .group-article .info {
  margin-top: 0; }

.section--logo .group-logo {
  display: table-cell;
  vertical-align: middle; }
  @media only screen and (max-width: 767px) {
    .section--logo .group-logo {
      padding-bottom: 30px; } }

.section--mission {
  background-image: url("../img/aboutus/bg-mission%402x.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top; }
  @media only screen and (min-width: 992px) {
    .section--mission {
      height: 650px; } }
  .section--mission .topic {
    color: white; }
    .section--mission .topic .title span {
      border-color: white; }
  .section--mission .group {
    color: white;
    display: table;
    width: 100%;
    padding: 0px 0px 20px; }
    .section--mission .group.last {
      padding-bottom: 0; }
    @media only screen and (min-width: 992px) {
      .section--mission .group {
        padding: 20px 5px; } }
    .section--mission .group .number, .section--mission .group p {
      display: table-cell;
      vertical-align: middle;
      text-align: left; }
    .section--mission .group .number {
      font-family: "thaisans";
      font-weight: bold;
      font-size: 76px;
      font-size: 7.6rem;
      vertical-align: top;
      padding-right: 20px;
      line-height: 0.8;
      width: 80px; }
      html.desktop.mac .section--mission .group .number {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 58px;
        font-size: 5.8rem;
        font-weight: 700; }
      html.desktop.mac .section--mission .group .number {
        line-height: 1; }

#section-vision {
  overflow: hidden; }

.section--sponsor .topic-title {
  margin-bottom: 20px; }
  @media only screen and (min-width: 992px) {
    .section--sponsor .topic-title {
      margin-bottom: 40px; } }

.section--sponsor .section--guide {
  padding-top: 30px; }
  @media only screen and (min-width: 768px) {
    .section--sponsor .section--guide {
      padding-top: 60px; } }
  @media only screen and (min-width: 1200px) {
    .section--sponsor .section--guide {
      padding-top: 80px; } }
  @media only screen and (min-width: 768px) {
    .section--sponsor .section--guide .text {
      font-size: 20px;
      font-size: 2rem; } }

@media only screen and (min-width: 768px) {
  .section--sponsor .section--contact .info {
    font-size: 20px;
    font-size: 2rem; } }

.section--sponsor .section--contact .info ul {
  line-height: 1.8; }

.page__annual .section--listing {
  padding-bottom: 40px; }
  @media only screen and (min-width: 768px) {
    .page__annual .section--listing {
      padding-bottom: 80px; } }
  @media only screen and (min-width: 992px) {
    .page__annual .section--listing {
      padding-bottom: 100px; } }
  @media only screen and (min-width: 768px) {
    .page__annual .section--listing .highlight {
      max-width: 890px;
      margin: 0 auto;
      background-color: #F9F9F9; } }
  .page__annual .section--listing .highlight .card header {
    margin-bottom: 10px; }
  .page__annual .section--listing .highlight .card .thumb {
    width: 200px;
    height: 282px; }
    @media only screen and (min-width: 768px) {
      .page__annual .section--listing .highlight .card .thumb {
        width: 255px;
        height: 360px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0; } }
    @media only screen and (min-width: 992px) {
      .page__annual .section--listing .highlight .card .thumb {
        width: 100%;
        width: 360px;
        height: 508px; } }
  .page__annual .section--listing .highlight .card .info {
    text-align: center;
    max-width: 100%; }
    @media only screen and (min-width: 768px) {
      .page__annual .section--listing .highlight .card .info {
        padding: 80px 40px 20px 60px;
        text-align: left;
        max-width: 100%; } }
    @media only screen and (min-width: 992px) {
      .page__annual .section--listing .highlight .card .info {
        padding: 150px 30px 60px 50px; } }
  .page__annual .section--listing .highlight .card .detail .text-content {
    max-height: 90px;
    text-align: left; }
  .page__annual .section--listing .highlight .card footer {
    margin-top: 20px; }
    @media only screen and (min-width: 768px) {
      .page__annual .section--listing .highlight .card footer .btn {
        min-width: 260px; } }
  .page__annual .section--listing .card header {
    margin-bottom: 20px; }
  .page__annual .section--listing .card .thumb {
    margin: 0 auto 15px;
    width: 200px;
    height: 282px;
    padding-bottom: 0; }
    @media only screen and (min-width: 768px) {
      .page__annual .section--listing .card .thumb {
        width: 226px;
        height: 319px; } }
    @media only screen and (min-width: 992px) {
      .page__annual .section--listing .card .thumb {
        width: 255px;
        height: 360px; } }
  .page__annual .section--listing .card .info {
    margin: 0 auto; }
    @media only screen and (min-width: 768px) {
      .page__annual .section--listing .card .info {
        max-width: 226px;
        text-align: left; } }
    @media only screen and (min-width: 992px) {
      .page__annual .section--listing .card .info {
        max-width: 255px; } }
  @media only screen and (min-width: 768px) and (max-width: 1199px) {
    .page__annual .section--listing .card footer .btn {
      min-width: 200px; } }

.section--guide {
  padding-bottom: 30px; }
  @media only screen and (min-width: 768px) {
    .section--guide {
      padding-bottom: 60px; } }
  @media only screen and (min-width: 1200px) {
    .section--guide {
      padding-bottom: 100px; } }
  .section--guide .topic-title {
    margin-bottom: 20px; }
    @media only screen and (min-width: 992px) {
      .section--guide .topic-title {
        margin-bottom: 40px; } }
  .section--guide ul.list-number li {
    width: 100%;
    vertical-align: top; }
    @media only screen and (max-width: 1199px) {
      .section--guide ul.list-number li + li {
        margin-top: 20px; } }
    @media only screen and (min-width: 1200px) {
      .section--guide ul.list-number li {
        display: inline-table;
        width: 32%;
        padding: 0px 5px;
        vertical-align: middle; } }
  @media only screen and (min-width: 1200px) {
    .section--guide ul.list-number.-two li {
      width: 59%; }
      .section--guide ul.list-number.-two li:first-child {
        width: 40%; } }
  .section--guide ul.list-number span {
    display: table-cell;
    vertical-align: middle; }
    .section--guide ul.list-number span:first-child {
      width: 60px; }
      @media only screen and (max-width: 767px) {
        .section--guide ul.list-number span:first-child {
          width: 50px; } }
    .section--guide ul.list-number span.text {
      text-align: left;
      padding-left: 20px;
      line-height: 1.6; }
      @media only screen and (min-width: 1200px) {
        .section--guide ul.list-number span.text {
          padding-right: 10px; } }

/* ========= BOARDS ==========*/
.page__boards .section--page_name {
  padding-bottom: 20px; }

.page__boards .section--listing {
  padding-bottom: 0; }
  .page__boards .section--listing .card .thumb.zoom {
    padding-bottom: 42.5%; }

.page__boards .section--hero .wrapper-hero {
  display: table;
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (max-width: 543px) {
    .page__boards .section--hero .wrapper-hero {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .page__boards .section--hero .wrapper-hero {
      padding-top: 32%; } }

.page__boards .section--hero .photo {
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; }

.page__boards .section--hero .-desktop {
  display: block; }
  @media only screen and (max-width: 543px) {
    .page__boards .section--hero .-desktop {
      display: none; } }

.page__boards .section--hero .-mobile {
  display: none; }
  @media only screen and (max-width: 543px) {
    .page__boards .section--hero .-mobile {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.page__boards .section--borads {
  margin-top: 30px;
  padding-bottom: 30px; }
  .page__boards .section--borads + .section--chart {
    padding-top: 0px; }
  @media only screen and (min-width: 768px) {
    .page__boards .section--borads {
      margin-top: 50px;
      padding-bottom: 50px; } }
  @media only screen and (min-width: 992px) {
    .page__boards .section--borads {
      margin-top: 80px;
      padding-bottom: 20px; }
      .page__boards .section--borads + .section--chart {
        padding-top: 60px; } }
  @media only screen and (max-width: 767px) {
    .page__boards .section--borads .row {
      max-width: 367px;
      margin: 0 auto; } }
  .page__boards .section--borads .committee-blog {
    max-width: 895px;
    margin: 0 auto; }
    @media only screen and (max-width: 1199px) {
      .page__boards .section--borads .committee-blog {
        max-width: 715px; } }
    @media only screen and (max-width: 991px) {
      .page__boards .section--borads .committee-blog {
        max-width: auto; } }
  .page__boards .section--borads .card-boards {
    margin-bottom: 60px;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .page__boards .section--borads .card-boards {
        margin-bottom: 40px; } }
    @media only screen and (min-width: 768px) {
      .page__boards .section--borads .card-boards.card-big {
        background-color: #f3f3f3; } }
    .page__boards .section--borads .card-boards.card-big figure {
      padding-bottom: 0;
      max-width: 437px; }
      @media only screen and (max-width: 1199px) {
        .page__boards .section--borads .card-boards.card-big figure {
          max-width: 347px; } }
      @media only screen and (max-width: 767px) {
        .page__boards .section--borads .card-boards.card-big figure {
          max-width: auto;
          padding-bottom: 20px; } }
    @media only screen and (min-width: 768px) {
      .page__boards .section--borads .card-boards.card-big .txt-figure {
        position: absolute;
        top: 35%;
        left: 55%; } }
    .page__boards .section--borads .card-boards figure {
      padding-bottom: 20px;
      display: block; }
      .page__boards .section--borads .card-boards figure a.figure-img {
        display: block;
        overflow: hidden; }
        .page__boards .section--borads .card-boards figure a.figure-img img {
          margin: 0 auto;
          text-align: center;
          transition: all 0.3s ease-in-out; }
          @media only screen and (max-width: 767px) {
            .page__boards .section--borads .card-boards figure a.figure-img img {
              width: 100%;
              height: auto; } }
        .page__boards .section--borads .card-boards figure a.figure-img:hover img, .page__boards .section--borads .card-boards figure a.figure-img.figure_hover img {
          -webkit-transform: scale(1.06);
                  transform: scale(1.06); }
    .page__boards .section--borads .card-boards h3 {
      padding-bottom: 15px;
      line-height: 1.1; }
    .page__boards .section--borads .card-boards .group-btn {
      margin: 20px auto 0;
      max-width: 200px; }
      .page__boards .section--borads .card-boards .group-btn a {
        width: 100%;
        min-width: auto; }
        .page__boards .section--borads .card-boards .group-btn a.btn_hover {
          background-color: #34A93E;
          border: 1px solid #34A93E;
          color: white;
          transition: all 0.3s; }

.page__boards .section--chart {
  padding-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__boards .section--chart {
      padding-top: 50px;
      padding-bottom: 20px; } }
  @media only screen and (min-width: 992px) {
    .page__boards .section--chart {
      padding-top: 80px;
      padding-bottom: 20px; } }
  .page__boards .section--chart figure {
    max-width: 920px;
    margin: 80px auto;
    display: block; }
    @media only screen and (max-width: 991px) {
      .page__boards .section--chart figure {
        margin: 50px auto; } }
    @media only screen and (max-width: 767px) {
      .page__boards .section--chart figure {
        margin: 30px auto;
        max-width: 347px; } }
    .page__boards .section--chart figure .zoom-fig {
      display: block;
      position: relative; }
      .page__boards .section--chart figure .zoom-fig:hover:before {
        content: '';
        background-color: rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0; }
      .page__boards .section--chart figure .zoom-fig:hover:after {
        content: '';
        /*
   * Set a counter and get the length of the image path.
   */
        /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
        /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
        /*
     * Set a base background for 1x environments.
     */
        background: url("../img/icon/icon-zoom.png") center center no-repeat;
        background-size: 100px 100px;
        /*
     * Create an @2x-ish media query.
     */
        /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
        /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
        width: 100px;
        height: 100px;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto; }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          .page__boards .section--chart figure .zoom-fig:hover:after {
            background: url("../img/icon/icon-zoom%402x.png") center center no-repeat;
            background-size: 100px 100px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          .page__boards .section--chart figure .zoom-fig:hover:after {
            background: url("../img/icon/icon-zoom%402x.png") center center no-repeat;
            background-size: 100px 100px; } }
      html.mobile .page__boards .section--chart figure .zoom-fig:before {
        content: '';
        background-color: rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0; }
      html.mobile .page__boards .section--chart figure .zoom-fig:after {
        content: '';
        /*
   * Set a counter and get the length of the image path.
   */
        /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
        /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
        /*
     * Set a base background for 1x environments.
     */
        background: url("../img/icon/icon-zoom.png") center center no-repeat;
        background-size: 100px 100px;
        /*
     * Create an @2x-ish media query.
     */
        /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
        /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
        width: 100px;
        height: 100px;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto; }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          html.mobile .page__boards .section--chart figure .zoom-fig:after {
            background: url("../img/icon/icon-zoom%402x.png") center center no-repeat;
            background-size: 100px 100px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          html.mobile .page__boards .section--chart figure .zoom-fig:after {
            background: url("../img/icon/icon-zoom%402x.png") center center no-repeat;
            background-size: 100px 100px; } }
      @media only screen and (min-width: 768px) {
        .page__boards .section--chart figure .zoom-fig {
          display: none; } }

.page__boards .section--palace {
  text-align: center; }
  .page__boards .section--palace .palace {
    padding: 0;
    margin: 0;
    margin: 50px auto 100px auto;
    display: inline-block; }
    @media only screen and (max-width: 1199px) {
      .page__boards .section--palace .palace {
        margin-bottom: 60px; } }
    @media only screen and (max-width: 767px) {
      .page__boards .section--palace .palace {
        margin: 30px auto;
        max-width: 347px; } }
    .page__boards .section--palace .palace li {
      padding: 0 0 0 130px;
      margin: 0;
      list-style-type: none;
      text-align: left;
      position: relative;
      line-height: 1.8; }
      .page__boards .section--palace .palace li span {
        position: absolute;
        left: 0; }

.page__aboutus .history-plan .title {
  font-size: 28px;
  font-size: 2.8rem;
  margin-bottom: 10px; }
  html.desktop.mac .page__aboutus .history-plan .title {
    font-size: 20px;
    font-size: 2rem; }

.page__aboutus .history-plan .intro {
  margin-bottom: 20px; }

.page__aboutus .history-plan ul, .page__aboutus .history-plan ol {
  line-height: 1.8; }

.page__ourservice .section--page_name {
  padding-bottom: 20px; }

.page__ourservice .section--all {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__ourservice .section--all {
      margin-top: 50px; } }
  @media only screen and (min-width: 992px) {
    .page__ourservice .section--all {
      margin-top: 80px; } }

.page__ourservice .section--our-service .intro {
  margin-bottom: 60px; }
  .page__ourservice .section--our-service .intro .section-title {
    margin-bottom: 20px;
    line-height: 0.8; }

.page__ourservice .section--our-service .blog-area {
  margin: 0 auto;
  max-width: 500px;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .page__ourservice .section--our-service .blog-area {
      max-width: 300px; } }
  @media only screen and (max-width: 543px) {
    .page__ourservice .section--our-service .blog-area {
      max-width: 300px; } }
  @media only screen and (max-width: 320px) {
    .page__ourservice .section--our-service .blog-area {
      max-width: 280px; } }
  .page__ourservice .section--our-service .blog-area .figure-img {
    max-width: 223px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: inline-block; }
    .page__ourservice .section--our-service .blog-area .figure-img img {
      transition: all 0.3s ease-in-out; }
    .page__ourservice .section--our-service .blog-area .figure-img:hover img, .page__ourservice .section--our-service .blog-area .figure-img.figure_hover img {
      -webkit-transform: scale(1.06);
              transform: scale(1.06); }
    @media only screen and (min-width: 767px) and (max-width: 991px) {
      .page__ourservice .section--our-service .blog-area .figure-img {
        max-width: 180px; } }
    @media only screen and (max-width: 543px) {
      .page__ourservice .section--our-service .blog-area .figure-img {
        max-width: 180px; } }
  .page__ourservice .section--our-service .blog-area .toppic {
    padding-bottom: 10px; }
  .page__ourservice .section--our-service .blog-area p {
    line-height: 1.6;
    color: #888888; }
  .page__ourservice .section--our-service .blog-area .group-btn {
    margin: 20px 0 60px 0; }
    @media only screen and (min-width: 768px) {
      .page__ourservice .section--our-service .blog-area .group-btn {
        margin: 20px 0 0 0; } }
    .page__ourservice .section--our-service .blog-area .group-btn a {
      width: 100%;
      min-width: auto;
      max-width: 260px; }
      .page__ourservice .section--our-service .blog-area .group-btn a.btn_hover {
        background-color: #34A93E;
        border: 1px solid #34A93E;
        color: white;
        transition: all 0.3s; }

.page__ourservice .section--service-area .panel-content .topic-title {
  font-size: 65px;
  font-size: 6.5rem; }
  html.desktop.mac .page__ourservice .section--service-area .panel-content .topic-title {
    font-size: 50px;
    font-size: 5rem; }
  @media only screen and (max-width: 991px) {
    .page__ourservice .section--service-area .panel-content .topic-title {
      font-size: 46px;
      font-size: 4.6rem; }
      html.desktop.mac .page__ourservice .section--service-area .panel-content .topic-title {
        font-size: 35px;
        font-size: 3.5rem; } }
  @media only screen and (max-width: 767px) {
    .page__ourservice .section--service-area .panel-content .topic-title {
      font-size: 32px;
      font-size: 3.2rem; }
      html.desktop.mac .page__ourservice .section--service-area .panel-content .topic-title {
        font-size: 24px;
        font-size: 2.4rem; } }

@media only screen and (max-width: 767px) {
  .page__ourservice .section--service-area .panel-content .floor-plan {
    margin-bottom: 30px; } }

.page__ourservice .section--service-area .panel-content .img-floor {
  width: 940px;
  height: 612px;
  background-image: url("../img/ourservice/floor-th%402x.jpg");
  margin: 30px auto 60px auto;
  display: block;
  background-size: 100% auto; }
  @media only screen and (max-width: 991px) {
    .page__ourservice .section--service-area .panel-content .img-floor {
      width: 720px;
      height: 469px; } }
  @media only screen and (max-width: 767px) {
    .page__ourservice .section--service-area .panel-content .img-floor {
      width: 300px;
      height: 196px;
      background-size: 300px;
      margin: 15px auto 10px; } }
  body.en .page__ourservice .section--service-area .panel-content .img-floor {
    background-image: url("../img/ourservice/floor-en%402x.jpg"); }
  .page__ourservice .section--service-area .panel-content .img-floor.floor-5 {
    background-position: 0 0;
    margin: 0 auto 30px auto; }
    @media only screen and (max-width: 1199px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-5 {
        margin-bottom: 0; } }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-5 {
        margin-bottom: 0; } }
  .page__ourservice .section--service-area .panel-content .img-floor.floor-4 {
    background-position: 0 -612px; }
    @media only screen and (max-width: 991px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-4 {
        background-position: 0 -469px; } }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-4 {
        background-position: 0 -196px; } }
  .page__ourservice .section--service-area .panel-content .img-floor.floor-3 {
    background-position: 0 -1224px; }
    @media only screen and (max-width: 991px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-3 {
        background-position: 0 -938px; } }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-3 {
        background-position: 0 -392px; } }
  .page__ourservice .section--service-area .panel-content .img-floor.floor-2 {
    background-position: 0 -1836px; }
    @media only screen and (max-width: 991px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-2 {
        background-position: 0 -1407px; } }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-2 {
        background-position: 0 -588px; } }
  .page__ourservice .section--service-area .panel-content .img-floor.floor-m {
    background-position: 0 -2448px; }
    @media only screen and (max-width: 991px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-m {
        background-position: 0 -1876px; } }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-m {
        background-position: 0 -784px; } }
  .page__ourservice .section--service-area .panel-content .img-floor.floor-1 {
    background-position: 0 -3060px; }
    @media only screen and (max-width: 1199px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-1 {
        margin-bottom: 20px; } }
    @media only screen and (max-width: 991px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-1 {
        background-position: 0 -2345px; } }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content .img-floor.floor-1 {
        background-position: 0 -980px; } }

.page__ourservice .section--service-area .panel-content article {
  margin-bottom: 60px;
  display: block; }
  @media only screen and (max-width: 991px) {
    .page__ourservice .section--service-area .panel-content article {
      margin-bottom: 30px; } }
  .page__ourservice .section--service-area .panel-content article:last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 768px) {
    .page__ourservice .section--service-area .panel-content article .left {
      padding-right: 30px; } }
  @media only screen and (min-width: 768px) {
    .page__ourservice .section--service-area .panel-content article .right {
      padding-left: 30px; } }
  .page__ourservice .section--service-area .panel-content article .toppic-header {
    color: #222222;
    margin-top: 45px; }
    .page__ourservice .section--service-area .panel-content article .toppic-header:first-child {
      margin-top: 0; }
  .page__ourservice .section--service-area .panel-content article .topic {
    margin: 20px 0 10px 0; }
    @media only screen and (max-width: 991px) {
      .page__ourservice .section--service-area .panel-content article .topic {
        margin-top: 10px; } }
    .page__ourservice .section--service-area .panel-content article .topic span {
      display: inline-block;
      border-radius: 50%;
      margin-right: 10px;
      width: 18px;
      height: 18px;
      margin-top: -3px; }
    .page__ourservice .section--service-area .panel-content article .topic.-yellow {
      color: #FFDD17; }
      .page__ourservice .section--service-area .panel-content article .topic.-yellow span {
        background-color: #FFDD17; }
    .page__ourservice .section--service-area .panel-content article .topic.-green {
      color: #33a949; }
      .page__ourservice .section--service-area .panel-content article .topic.-green span {
        background-color: #33a949; }
    .page__ourservice .section--service-area .panel-content article .topic.-pink {
      color: #ee2b7a; }
      .page__ourservice .section--service-area .panel-content article .topic.-pink span {
        background-color: #ee2b7a; }
    .page__ourservice .section--service-area .panel-content article .topic.-orange {
      color: #f5951d; }
      .page__ourservice .section--service-area .panel-content article .topic.-orange span {
        background-color: #f5951d; }
    .page__ourservice .section--service-area .panel-content article .topic.-brown {
      color: #a87c4f; }
      .page__ourservice .section--service-area .panel-content article .topic.-brown span {
        background-color: #a87c4f; }
    .page__ourservice .section--service-area .panel-content article .topic.-purple {
      color: #581b5e; }
      .page__ourservice .section--service-area .panel-content article .topic.-purple span {
        background-color: #581b5e; }
    .page__ourservice .section--service-area .panel-content article .topic.-dark-blue {
      color: #1c74bc; }
      .page__ourservice .section--service-area .panel-content article .topic.-dark-blue span {
        background-color: #1c74bc; }
    .page__ourservice .section--service-area .panel-content article .topic.-blue {
      color: #7bd3f7; }
      .page__ourservice .section--service-area .panel-content article .topic.-blue span {
        background-color: #7bd3f7; }
    .page__ourservice .section--service-area .panel-content article .topic.-dark-grey {
      color: #939597; }
      .page__ourservice .section--service-area .panel-content article .topic.-dark-grey span {
        background-color: #939597; }
  .page__ourservice .section--service-area .panel-content article figure {
    margin-bottom: 15px; }
    .page__ourservice .section--service-area .panel-content article figure:last-child {
      margin-bottom: 0; }
    @media only screen and (max-width: 767px) {
      .page__ourservice .section--service-area .panel-content article figure {
        margin-top: 15px; } }
    @media only screen and (min-width: 768px) {
      .page__ourservice .section--service-area .panel-content article figure {
        margin-bottom: 20px; } }
    @media only screen and (min-width: 991px) {
      .page__ourservice .section--service-area .panel-content article figure {
        margin-bottom: 30px; } }

.page__ourservice .footer-button {
  margin-top: 40px; }
  @media only screen and (min-width: 992px) {
    .page__ourservice .footer-button {
      margin-top: 70px; } }

@media only screen and (max-width: 767px) {
  .page__ourservice .section--travel {
    margin-top: 0; } }

@media only screen and (max-width: 767px) {
  .page__ourservice .section--travel .footer-button {
    margin-top: 20px; } }

@media only screen and (min-width: 768px) {
  .page__ourservice .section--travel .footer-button {
    margin-top: 40px; } }

@media only screen and (max-width: 767px) {
  .page__ourservice .section--restaurant {
    margin-top: 60px; } }

@media only screen and (min-width: 768px) {
  .page__ourservice .section--restaurant {
    margin-top: 80px; } }

@media only screen and (max-width: 767px) {
  .page__ourservice .section--restaurant .footer-button {
    margin-top: 20px; } }

@media only screen and (min-width: 768px) {
  .page__ourservice .section--restaurant .footer-button {
    margin-top: 40px; } }

.page__ourservice .section--venue-hire .note {
  margin-top: 20px; }

.page__ourservice .section--panels {
  padding: 0; }

.section--area-overview {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 0; }
  @media only screen and (min-width: 768px) {
    .section--area-overview {
      margin-bottom: 50px; } }
  @media only screen and (min-width: 992px) {
    .section--area-overview {
      margin-bottom: 80px; } }
  .section--area-overview img {
    margin: 0 auto; }
  .section--area-overview .area-navigation {
    margin: 0;
    padding: 0; }
    @media only screen and (max-width: 767px) {
      .section--area-overview .area-navigation {
        margin: 0 auto;
        margin-bottom: 35px;
        max-width: 300px; } }
    .section--area-overview .area-navigation li {
      margin: 0 0 30px 0;
      padding: 0;
      text-align: left;
      list-style-type: none;
      color: #666666; }
      @media only screen and (max-width: 991px) {
        .section--area-overview .area-navigation li {
          margin: 0 0 25px 0; } }
      .section--area-overview .area-navigation li .area-color {
        float: left;
        border-radius: 50%;
        margin-right: 10px;
        width: 35px;
        height: 35px;
        margin-top: -4px;
        border: 1px solid rgba(136, 136, 136, 0.5); }
        @media only screen and (max-width: 991px) {
          .section--area-overview .area-navigation li .area-color {
            width: 30px;
            height: 30px;
            margin-top: -2px; } }
        .section--area-overview .area-navigation li .area-color.yellow {
          background-color: #FFDD17; }
        .section--area-overview .area-navigation li .area-color.green {
          background-color: #2AB573; }
        .section--area-overview .area-navigation li .area-color.green-2 {
          background-color: #00A188; }
        .section--area-overview .area-navigation li .area-color.pink {
          background-color: #F6ADCD; }
        .section--area-overview .area-navigation li .area-color.dark-pink {
          background-color: #ED2A7B; }
        .section--area-overview .area-navigation li .area-color.orange {
          background-color: #F7931D; }
        .section--area-overview .area-navigation li .area-color.brown {
          background-color: #B79267; }
        .section--area-overview .area-navigation li .area-color.purple {
          background-color: #581b5e; }
        .section--area-overview .area-navigation li .area-color.dark-blue {
          background-color: #0068B4; }
        .section--area-overview .area-navigation li .area-color.blue {
          background-color: #00B9F1; }
        .section--area-overview .area-navigation li .area-color.grey {
          background-color: #E7E7E7; }
        .section--area-overview .area-navigation li .area-color.dark-grey {
          background-color: #939597; }
  .section--area-overview .area-floor {
    text-align: left; }
    @media only screen and (max-width: 767px) {
      .section--area-overview .area-floor {
        margin: 0 auto;
        margin-bottom: 35px;
        max-width: 300px; } }
    .section--area-overview .area-floor .floor {
      width: 340px;
      height: 185px;
      background-image: url("../img/ourservice/service-area-floor-th.png");
      background-size: 340px;
      display: block;
      margin-left: 50px; }
      @media only screen and (max-width: 767px) {
        .section--area-overview .area-floor .floor {
          width: 300px;
          height: 163px;
          background-size: 300px;
          margin-left: 0; } }
      body.en .section--area-overview .area-floor .floor {
        background-image: url("../img/ourservice/service-area-floor-en.png"); }
      .section--area-overview .area-floor .floor.floor-5 {
        background-position: 0 0;
        width: 340px;
        height: 168px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor.floor-5 {
            width: 300px;
            height: 148px; } }
      .section--area-overview .area-floor .floor.floor-4 {
        background-position: 0 -185px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor.floor-4 {
            background-position: 0 -163px; } }
      .section--area-overview .area-floor .floor.floor-3 {
        background-position: 0 -370px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor.floor-3 {
            background-position: 0 -326px; } }
      .section--area-overview .area-floor .floor.floor-2 {
        background-position: 0 -555px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor.floor-2 {
            background-position: 0 -489px; } }
      .section--area-overview .area-floor .floor.floor-m {
        background-position: 0 -740px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor.floor-m {
            background-position: 0 -652px; } }
      .section--area-overview .area-floor .floor.floor-1 {
        background-position: 0 -925px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor.floor-1 {
            background-position: 0 -815px; } }
      .section--area-overview .area-floor .floor h3 {
        text-decoration: underline;
        margin-left: -50px; }
        @media only screen and (max-width: 767px) {
          .section--area-overview .area-floor .floor h3 {
            font-size: 28px;
            font-size: 2.8rem;
            margin-left: 0; }
            html.desktop.mac .section--area-overview .area-floor .floor h3 {
              font-size: 20px;
              font-size: 2rem; } }

@media only screen and (min-width: 768px) {
  .section--service-area .section--panels .info {
    padding-right: 20px; } }

@media only screen and (min-width: 1200px) {
  .section--service-area .section--panels .info {
    padding-right: 40px; } }

@media only screen and (min-width: 768px) {
  .section--service-area .section--panels .col-sm-push-6 .info {
    padding-left: 20px;
    padding-right: 0; } }

@media only screen and (min-width: 1200px) {
  .section--service-area .section--panels .col-sm-push-6 .info {
    padding-left: 40px;
    padding-right: 0; } }

.section--venue-hire .section--filter {
  margin-top: -10px;
  margin-bottom: 80px; }
  @media only screen and (max-width: 767px) {
    .section--venue-hire .section--filter {
      margin-bottom: 40px; } }

.section--venue-hire .area-floor .floor {
  width: 340px;
  height: 175px;
  background-image: url("../img/venuehire/area-floor-th%402x.jpg");
  background-position: 0 0;
  background-size: 340px 1047px;
  background-repeat: no-repeat; }
  @media only screen and (max-width: 767px) {
    .section--venue-hire .area-floor .floor {
      width: 300px;
      height: 154px;
      background-size: 300px 924px; } }
  body.en .section--venue-hire .area-floor .floor {
    background-image: url("../img/venuehire/area-floor-en%402x.jpg"); }
  .section--venue-hire .area-floor .floor.floor-5 {
    background-position: 0 0;
    width: 340px;
    height: 175px; }
    @media only screen and (max-width: 767px) {
      .section--venue-hire .area-floor .floor.floor-5 {
        width: 300px;
        height: 154px; } }
  .section--venue-hire .area-floor .floor.floor-4 {
    background-position: 0 -175px; }
    @media only screen and (max-width: 767px) {
      .section--venue-hire .area-floor .floor.floor-4 {
        background-position: 0 -154px; } }
  .section--venue-hire .area-floor .floor.floor-3 {
    background-position: 0 -350px; }
    @media only screen and (max-width: 767px) {
      .section--venue-hire .area-floor .floor.floor-3 {
        background-position: 0 -308px; } }
  .section--venue-hire .area-floor .floor.floor-2 {
    background-position: 0 -525px; }
    @media only screen and (max-width: 767px) {
      .section--venue-hire .area-floor .floor.floor-2 {
        background-position: 0 -462px; } }
  .section--venue-hire .area-floor .floor.floor-m {
    background-position: 0 -700px; }
    @media only screen and (max-width: 767px) {
      .section--venue-hire .area-floor .floor.floor-m {
        background-position: 0 -616px; } }
  .section--venue-hire .area-floor .floor.floor-1 {
    background-position: 0 -875px; }
    @media only screen and (max-width: 767px) {
      .section--venue-hire .area-floor .floor.floor-1 {
        background-position: 0 -770px; } }

@media only screen and (min-width: 768px) {
  .section--venue-hire .map-floor header {
    margin-bottom: 30px; } }

.page__ourservice .section--hero .wrapper-hero {
  display: table;
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (max-width: 543px) {
    .page__ourservice .section--hero .wrapper-hero {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .page__ourservice .section--hero .wrapper-hero {
      padding-top: 30%; } }

.page__ourservice .section--hero .photo {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; }
  @media only screen and (min-width: 768px) {
    .page__ourservice .section--hero .photo {
      background-size: cover; } }

.page__ourservice .section--hero .-desktop {
  display: block; }
  @media only screen and (max-width: 543px) {
    .page__ourservice .section--hero .-desktop {
      display: none; } }

.page__ourservice .section--hero .-mobile {
  display: none; }
  @media only screen and (max-width: 543px) {
    .page__ourservice .section--hero .-mobile {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.page__ourservice .section-intro {
  margin-bottom: 60px; }
  @media only screen and (max-width: 991px) {
    .page__ourservice .section-intro {
      margin-bottom: 30px; } }
  .page__ourservice .section-intro .topic-title {
    margin-bottom: 20px; }

.section--visit .wrapper {
  overflow: hidden;
  position: relative; }

.section--visit .table {
  margin-bottom: 20px; }
  .section--visit .table.-rate-member [data-col="tcdc-column-0"] {
    text-align: center; }
  .section--visit .table.-rate-member [data-col="tcdc-column-1"] {
    background-color: #F6F9F0; }
  .section--visit .table.-rate-member [data-col="tcdc-column-2"] {
    background-color: #F8ECF2; }
  .section--visit .table.-rate-member [data-col="tcdc-column-1"],
  .section--visit .table.-rate-member [data-col="tcdc-column-2"] {
    text-align: left; }

.section--visit .group-button {
  margin-top: 40px; }
  .section--visit .group-button .btn {
    margin: 0px 10px; }
    @media only screen and (max-width: 767px) {
      .section--visit .group-button .btn {
        margin: 0px; }
        .section--visit .group-button .btn + .btn {
          margin-top: 20px; } }

.section--visit .timeline {
  margin-bottom: 0; }
  @media only screen and (max-width: 767px) {
    .section--visit .timeline .line-flow {
      height: calc(100% + 50px); } }

.section--visit .contact {
  margin-top: 20px; }
  .section--visit .contact .title {
    color: #222222; }
  .section--visit .contact .list li {
    margin: 5px 0px; }
  .section--visit .contact .list span {
    display: inline-block;
    padding-right: 15px;
    position: relative; }
    @media only screen and (min-width: 768px) {
      .section--visit .contact .list span {
        width: 14%;
        white-space: nowrap;
        padding-right: 0; } }
    .section--visit .contact .list span:after {
      content: ":";
      position: absolute;
      right: 0;
      padding-right: 5px;
      top: 0; }

.section--visit .section-step {
  margin-top: 80px; }
  @media only screen and (max-width: 991px) {
    .section--visit .section-step {
      margin-bottom: 60px; } }
  .section--visit .section-step .topic {
    margin-bottom: 60px; }
    @media only screen and (max-width: 991px) {
      .section--visit .section-step .topic {
        margin-bottom: 40px; } }
  .section--visit .section-step .topic-title {
    margin-bottom: 20px; }

.map-floor header {
  margin-bottom: 40px; }
  @media only screen and (max-width: 767px) {
    .map-floor header {
      margin-bottom: 20px; } }
  .map-floor header .topic-title {
    font-size: 65px;
    font-size: 6.5rem;
    margin-bottom: 0; }
    html.desktop.mac .map-floor header .topic-title {
      font-size: 50px;
      font-size: 5rem; }
    @media only screen and (max-width: 991px) {
      .map-floor header .topic-title {
        font-size: 46px;
        font-size: 4.6rem; }
        html.desktop.mac .map-floor header .topic-title {
          font-size: 35px;
          font-size: 3.5rem; } }
    @media only screen and (max-width: 767px) {
      .map-floor header .topic-title {
        font-size: 32px;
        font-size: 3.2rem; }
        html.desktop.mac .map-floor header .topic-title {
          font-size: 24px;
          font-size: 2.4rem; } }

.map-floor .topic-title {
  margin-bottom: 20px; }
  @media only screen and (max-width: 991px) {
    .map-floor .topic-title {
      margin-bottom: 10px; } }

.map-floor .have-dot {
  margin-bottom: 10px; }

.map-floor .photo + .photo {
  margin-top: 30px; }

.map-floor .group-floor + .group-floor {
  margin-top: 30px; }
  @media only screen and (min-width: 1200px) {
    .map-floor .group-floor + .group-floor {
      margin-top: 60px; } }

@media only screen and (max-width: 767px) {
  .map-floor .group-floor .photo {
    margin-top: 15px; } }

.map-floor .group-floor .photo img {
  width: 100%; }

@media only screen and (min-width: 768px) {
  .map-floor .group-floor .info {
    padding-right: 20px; } }

@media only screen and (min-width: 1200px) {
  .map-floor .group-floor .info {
    padding-right: 40px; } }

@media only screen and (min-width: 768px) {
  .map-floor .group-floor .col-sm-push-6 .info {
    padding-left: 20px;
    padding-right: 0; } }

@media only screen and (min-width: 1200px) {
  .map-floor .group-floor .col-sm-push-6 .info {
    padding-left: 40px;
    padding-right: 0; } }

.map-floor .img-floor {
  width: 940px;
  height: 600px;
  background-image: url("../img/venuehire/area-floor-th_%402x.jpg");
  background-position: 0 0;
  background-size: cover;
  margin: -50px auto 0px; }
  @media only screen and (max-width: 991px) {
    .map-floor .img-floor {
      width: 720px;
      height: 425px; } }
  @media only screen and (max-width: 767px) {
    .map-floor .img-floor {
      width: 300px;
      height: 177px;
      margin-top: -10px; } }
  body.en .map-floor .img-floor {
    background-image: url("../img/venuehire/area-floor-en_%402x.jpg"); }
  .map-floor .img-floor.floor-5 {
    background-position: 0 0; }
  .map-floor .img-floor.floor-4 {
    background-position: 0 -650px;
    margin-top: 10px; }
    @media only screen and (max-width: 991px) {
      .map-floor .img-floor.floor-4 {
        background-position: 0 -500px; } }
    @media only screen and (max-width: 767px) {
      .map-floor .img-floor.floor-4 {
        background-position: 0 -220px; } }
  .map-floor .img-floor.floor-3 {
    background-position: 0 -1250px;
    margin-top: 10px; }
    @media only screen and (max-width: 991px) {
      .map-floor .img-floor.floor-3 {
        background-position: 0 -1000px; } }
    @media only screen and (max-width: 767px) {
      .map-floor .img-floor.floor-3 {
        background-position: 0 -400px; } }
  .map-floor .img-floor.floor-2 {
    background-position: 0 -1890px;
    margin-top: 10px;
    margin-bottom: 20px; }
    @media only screen and (max-width: 991px) {
      .map-floor .img-floor.floor-2 {
        background-position: 0 -1480px; } }
    @media only screen and (max-width: 767px) {
      .map-floor .img-floor.floor-2 {
        background-position: 0 -600px;
        margin-top: 0px;
        margin-bottom: 10px; } }
  .map-floor .img-floor.floor-m {
    background-position: 0 -2500px;
    margin-top: 0px;
    margin-bottom: 20px; }
    @media only screen and (max-width: 991px) {
      .map-floor .img-floor.floor-m {
        background-position: 0 -1930px; } }
    @media only screen and (max-width: 767px) {
      .map-floor .img-floor.floor-m {
        background-position: 0 -800px;
        margin-top: 0px;
        margin-bottom: 10px; } }
  .map-floor .img-floor.floor-1 {
    background-position: 0 -3062px;
    margin-top: 10px;
    margin-bottom: 20px; }
    @media only screen and (max-width: 991px) {
      .map-floor .img-floor.floor-1 {
        background-position: 0 -8000px; } }
    @media only screen and (max-width: 767px) {
      .map-floor .img-floor.floor-1 {
        background-position: 0 -1000px;
        margin-top: 10px;
        margin-bottom: 0; } }

.have-dot span {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 500px 500px; }

.have-dot.-green {
  color: #00A188; }
  .have-dot.-green span {
    background-color: #00A188; }

.have-dot.-purple {
  color: #591B5E; }
  .have-dot.-purple span {
    background-color: #591B5E; }

.have-dot.-blue {
  color: #1C75BC; }
  .have-dot.-blue span {
    background-color: #1C75BC; }

.have-dot.-bluesky {
  color: #7BD3F7; }
  .have-dot.-bluesky span {
    background-color: #7BD3F7; }

.have-dot.-dark-pink {
  color: #ED2A7B; }
  .have-dot.-dark-pink span {
    background-color: #ED2A7B; }

.venue-chiangmai .list-number,
.venue-chiangmai .list-bullet {
  padding-left: 18px; }

.venue-chiangmai .list-bullet li:before {
  margin-left: -15px; }

.venue-chiangmai .group-section + .group-section {
  margin-top: 30px; }

.section--restaurant .title-tcdc {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) {
    .section--restaurant .title-tcdc {
      margin-bottom: 50px; } }

@media only screen and (max-width: 991px) {
  .section--restaurant figure {
    margin-bottom: 20px; } }

.section--restaurant .navigation {
  color: #888888;
  margin-bottom: 30px;
  display: block; }
  @media only screen and (max-width: 991px) {
    .section--restaurant .navigation {
      margin-bottom: 10px; } }

.section--restaurant .toppic {
  margin-bottom: 30px;
  color: #222222; }
  @media only screen and (max-width: 991px) {
    .section--restaurant .toppic {
      margin-bottom: 10px; } }

.section--restaurant .desc {
  color: #888888;
  margin-bottom: 30px; }
  @media only screen and (max-width: 767px) {
    .section--restaurant .desc {
      margin-bottom: 20px; } }
  .section--restaurant .desc strong {
    color: #222222;
    margin-bottom: 5px;
    display: inline-block; }
  .section--restaurant .desc section + section {
    margin-top: 15px; }
  .section--restaurant .desc span {
    color: #555555; }

.section--restaurant .footer-button {
  text-align: left;
  clear: both; }
  @media only screen and (max-width: 991px) {
    .section--restaurant .footer-button {
      text-align: center; } }

.page__contact .title-tcdc {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) {
    .page__contact .title-tcdc {
      margin-bottom: 50px; } }

.page__contact .section {
  margin: 60px 0px 40px; }
  .page__contact .section.section--contactus-detail {
    margin-top: 40px; }
    .page__contact .section.section--contactus-detail .description {
      margin-top: -30px;
      margin-bottom: 20px; }
      @media only screen and (max-width: 767px) {
        .page__contact .section.section--contactus-detail .description {
          margin-top: 0; } }
  @media only screen and (min-width: 768px) {
    .page__contact .section {
      margin: 80px 0px 60px; } }
  @media only screen and (min-width: 1200px) {
    .page__contact .section {
      margin: 80px 0px 80px; }
      .page__contact .section.section--contactus-detail {
        margin-top: calc(120px - 80px); } }

.page__contact .section-sub-title {
  display: inline-block;
  font-family: "thaisans";
  font-weight: lighter;
  font-size: 46px;
  font-size: 4.6rem;
  color: #34A93E;
  margin-right: 15px;
  position: relative;
  vertical-align: bottom;
  margin-bottom: 14px;
  line-height: 1; }
  html.desktop.mac .page__contact .section-sub-title {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 35px;
    font-size: 3.5rem;
    font-weight: 200; }
  .page__contact .section-sub-title:after {
    content: " ";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #34A93E;
    position: absolute;
    left: 0;
    bottom: 0; }
    @media only screen and (max-width: 767px) {
      .page__contact .section-sub-title:after {
        height: 1px; } }
  html.desktop.mac .page__contact .section-sub-title {
    margin-bottom: 18px;
    line-height: 1.1; }
  @media only screen and (max-width: 991px) {
    .page__contact .section-sub-title {
      font-size: 37px;
      font-size: 3.7rem;
      margin-right: 10px;
      margin-bottom: 15px; }
      html.desktop.mac .page__contact .section-sub-title {
        font-size: 28px;
        font-size: 2.8rem; } }
  @media only screen and (max-width: 767px) {
    .page__contact .section-sub-title {
      font-size: 32px;
      font-size: 3.2rem;
      margin-bottom: 10px; }
      html.desktop.mac .page__contact .section-sub-title {
        font-size: 24px;
        font-size: 2.4rem; } }

.page__contact .section-title {
  padding: 5px 0px;
  margin-bottom: 0px; }
  .page__contact .section-title .number {
    font-family: "thaisans";
    font-weight: lighter;
    margin-left: 10px; }
    html.desktop.mac .page__contact .section-title .number {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 200; }
    .page__contact .section-title .number:before {
      content: "("; }
    .page__contact .section-title .number:after {
      content: ")"; }
  .page__contact .section-title.title-contact {
    font-family: "thaisans";
    font-weight: bold;
    display: inline-block; }
    html.desktop.mac .page__contact .section-title.title-contact {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 700; }
    @media only screen and (min-width: 768px) {
      .page__contact .section-title.title-contact {
        font-size: 76px;
        font-size: 7.6rem; }
        html.desktop.mac .page__contact .section-title.title-contact {
          font-size: 58px;
          font-size: 5.8rem; } }

.page__contact .g-recaptcha > div {
  margin: 0 auto; }

#section-mini .section-sub-title {
  margin-right: 5px; }

.section--map {
  background-color: #555555;
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; }
  @media only screen and (max-width: 543px) {
    .section--map {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .section--map {
      padding-top: 32%; } }

.section--contactus-detail .content {
  text-align: center; }
  .section--contactus-detail .content article {
    margin-bottom: 45px;
    display: block;
    clear: both; }
    @media only screen and (max-width: 767px) {
      .section--contactus-detail .content article {
        margin-bottom: 30px; } }
    .section--contactus-detail .content article p {
      margin: 0;
      padding: 0;
      display: block;
      color: #555555; }
    .section--contactus-detail .content article.inline.no-seperate .column {
      text-align: center;
      display: block; }
      .section--contactus-detail .content article.inline.no-seperate .column:first-child {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        margin-left: 0; }
    .section--contactus-detail .content article.inline .column {
      display: inline-block;
      text-align: left;
      vertical-align: top;
      text-align: left;
      line-height: 1.8; }
      .section--contactus-detail .content article.inline .column:first-child {
        border-right: 1px solid #e6e6e6;
        padding-right: 45px;
        margin-right: 45px;
        margin-left: 45px; }
        body.en .section--contactus-detail .content article.inline .column:first-child {
          margin-left: 0px; }
      .section--contactus-detail .content article.inline .column span {
        color: #222222;
        padding: 0;
        margin: 0; }
      @media only screen and (max-width: 991px) {
        .section--contactus-detail .content article.inline .column {
          display: block;
          text-align: center; }
          .section--contactus-detail .content article.inline .column:first-child {
            border-right: none;
            margin: 0 auto;
            padding-bottom: 20px;
            padding-right: 0; } }
  .section--contactus-detail .content h3.toppic {
    font-family: "thaisans";
    font-weight: normal;
    padding-bottom: 15px;
    color: #222222; }
    html.desktop.mac .section--contactus-detail .content h3.toppic {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 500; }
    @media only screen and (max-width: 767px) {
      .section--contactus-detail .content h3.toppic {
        padding-bottom: 10px; } }
  .section--contactus-detail .content span.working-time {
    line-height: 1.8; }
  .section--contactus-detail .content .map {
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/contactus/map-thailand.png") center center no-repeat;
    background-size: 361px 659px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
    width: 361px;
    height: 659px;
    position: relative; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .section--contactus-detail .content .map {
        background: url("../img/contactus/map-thailand%402x.png") center center no-repeat;
        background-size: 361px 659px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .section--contactus-detail .content .map {
        background: url("../img/contactus/map-thailand%402x.png") center center no-repeat;
        background-size: 361px 659px; } }
    @media only screen and (min-width: 992px) {
      .section--contactus-detail .content .map {
        margin: 0 auto; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .section--contactus-detail .content .map {
        margin-left: -15px; } }
    .section--contactus-detail .content .map .location {
      background-color: #34A93E;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: absolute;
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite; }
      .section--contactus-detail .content .map .location:hover {
        cursor: pointer;
        background-color: #288230; }
      .section--contactus-detail .content .map .location.active {
        cursor: none;
        pointer-events: none; }
        .section--contactus-detail .content .map .location.active:before {
          content: '';
          width: 50px;
          height: 50px;
          background-color: #34A93E;
          border-radius: 50%;
          position: absolute;
          left: -21px;
          top: -21px;
          opacity: 0;
          -webkit-animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
          animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
          -webkit-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards;
          -webkit-animation-delay: 0.9s;
                  animation-delay: 0.9s;
          -webkit-animation-iteration-count: infinite;
                  animation-iteration-count: infinite; }
        .section--contactus-detail .content .map .location.active:after {
          content: '';
          width: 50px;
          height: 50px;
          background-color: #34A93E;
          pointer-events: none;
          border-radius: 50%;
          position: absolute;
          left: -21px;
          top: -21px;
          opacity: 0;
          -webkit-animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
          animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
          -webkit-transform-origin: 50% 50%;
                  transform-origin: 50% 50%;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards;
          -webkit-animation-delay: 1.1s;
                  animation-delay: 1.1s;
          -webkit-animation-iteration-count: infinite;
                  animation-iteration-count: infinite; }
  .section--contactus-detail .content .select-location {
    padding: 0 0 0 30px;
    text-align: left; }
    @media only screen and (max-width: 991px) {
      .section--contactus-detail .content .select-location {
        padding: 0; } }
    @media only screen and (max-width: 767px) {
      .section--contactus-detail .content .select-location {
        margin: 0 auto;
        text-align: center;
        max-width: 420px; } }
    .section--contactus-detail .content .select-location .dropdown-menu {
      max-width: 100%;
      z-index: 1; }
      .section--contactus-detail .content .select-location .dropdown-menu li:last-child {
        padding-bottom: 20px; }
      .section--contactus-detail .content .select-location .dropdown-menu .divider {
        margin: 0; }
    .section--contactus-detail .content .select-location .text {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 24px;
      font-size: 2.4rem;
      white-space: normal;
      color: #222222; }
      html.desktop.mac .section--contactus-detail .content .select-location .text {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: 500; }
    .section--contactus-detail .content .select-location .dropdown-header .text {
      color: #222222;
      font-family: "thaisans";
      font-weight: bold;
      font-size: 24px;
      font-size: 2.4rem; }
      html.desktop.mac .section--contactus-detail .content .select-location .dropdown-header .text {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: 700; }
    .section--contactus-detail .content .select-location .detail-select .filter-option {
      white-space: normal;
      line-height: 1.1; }
    .section--contactus-detail .content .select-location .bs-searchbox .form-control {
      height: 54px; }
    .section--contactus-detail .content .select-location a:hover .text {
      color: white; }
    .section--contactus-detail .content .select-location .selected.active .text {
      color: #222222; }
    .section--contactus-detail .content .select-location .selected.active a {
      background-color: #F9F9F9; }
    .section--contactus-detail .content .select-location .selected.active:hover a {
      background-color: #34A93E; }
      .section--contactus-detail .content .select-location .selected.active:hover a .text {
        color: white; }
    .section--contactus-detail .content .select-location .active .text {
      color: white; }
    .section--contactus-detail .content .select-location .active:hover .text {
      color: white; }
    .section--contactus-detail .content .select-location p.toppic {
      color: #222222;
      padding-top: 30px; }
    .section--contactus-detail .content .select-location p .space-tel {
      padding-left: 32px; }
      @media only screen and (max-width: 767px) {
        .section--contactus-detail .content .select-location p .space-tel {
          padding-left: 0; } }
    .section--contactus-detail .content .select-location .detail-location, .section--contactus-detail .content .select-location .detail-workingtime {
      padding-top: 50px; }

.section--travel .title-tcdc {
  margin-bottom: 10px; }
  @media only screen and (min-width: 768px) {
    .section--travel .title-tcdc {
      margin-bottom: 30px; } }

.section--travel .rt01viewport {
  padding-top: 35px; }
  @media only screen and (min-width: 992px) {
    .section--travel .rt01viewport {
      padding-top: 50px; } }
  @media only screen and (min-width: 992px) {
    .section--travel .rt01viewport {
      padding-top: 70px; } }

@media only screen and (min-width: 992px) {
  .section--travel .content-tab figure {
    max-width: 500px;
    margin-right: 30px;
    float: left; } }

@media only screen and (min-width: 1200px) {
  .section--travel .content-tab figure {
    margin-right: 40px;
    max-width: 520px; } }

@media only screen and (max-width: 991px) {
  .section--travel .content-tab figure {
    max-width: 100%;
    margin-bottom: 20px; } }

.section--travel .content-tab figure img {
  width: 100%; }

@media only screen and (min-width: 992px) {
  .section--travel .content-tab article {
    width: 310px;
    float: left; } }

@media only screen and (min-width: 1200px) {
  .section--travel .content-tab article {
    width: 410px; } }

@media only screen and (max-width: 991px) {
  .section--travel .content-tab article {
    width: 100%; } }

.section--travel .content-tab article .navigation {
  color: #888888;
  margin-bottom: 30px;
  display: block; }
  @media only screen and (max-width: 991px) {
    .section--travel .content-tab article .navigation {
      margin-bottom: 10px; } }

.section--travel .content-tab article .toppic {
  margin-bottom: 30px;
  color: #222222; }
  @media only screen and (max-width: 991px) {
    .section--travel .content-tab article .toppic {
      margin-bottom: 10px; } }

.section--travel .content-tab article .desc {
  color: #888888;
  margin-bottom: 30px; }
  .section--travel .content-tab article .desc strong {
    color: #222222;
    margin-bottom: 5px;
    display: inline-block; }
  .section--travel .content-tab article .desc section + section {
    margin-top: 15px; }
  .section--travel .content-tab article .desc span {
    color: #555555; }

.section--travel .content-tab article .footer-button {
  text-align: left;
  clear: both; }
  @media only screen and (max-width: 991px) {
    .section--travel .content-tab article .footer-button {
      text-align: center; } }

@media only screen and (min-width: 768px) {
  .section--travel .btn-primary {
    padding-left: 20px;
    padding-right: 20px; } }

.middle-dot, .animated-dot .signal, .animated-dot .signal2 {
  background-color: #34A93E; }

.animated-dot {
  width: 20px;
  height: 20px;
  position: relative; }

.animated-dot .middle-dot {
  width: 16px;
  height: 16px;
  border-radius: 30px;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  left: 2px;
  top: 2px; }

.animated-dot .signal {
  width: 180px;
  pointer-events: none;
  height: 180px;
  border-radius: 200px;
  position: absolute;
  left: -80px;
  top: -80px;
  opacity: 0;
  -webkit-animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
  animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

.animated-dot .signal2 {
  width: 180px;
  height: 180px;
  pointer-events: none;
  border-radius: 200px;
  position: absolute;
  left: -80px;
  top: -80px;
  opacity: 0;
  -webkit-animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
  animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2.2s;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

@-webkit-keyframes animationSignal {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  1% {
    opacity: 0.4; }
  15% {
    opacity: 0.4; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@-webkit-keyframes animationSignal2 {
  0% {
    opacity: 0; }
  1% {
    opacity: 0.25; }
  15% {
    opacity: 0.2; }
  70% {
    opacity: 0; } }

@keyframes animationSignal {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  1% {
    opacity: 0.4; }
  15% {
    opacity: 0.4; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes animationSignal2 {
  0% {
    opacity: 0; }
  1% {
    opacity: 0.25; }
  15% {
    opacity: 0.2; }
  70% {
    opacity: 0; } }

.animated-dot .signal,
.animated-dot .signal2 {
  display: none; }
  .active .animated-dot .signal, .active
  .animated-dot .signal2 {
    display: inline-block; }

.section--related {
  position: relative; }
  @media only screen and (min-width: 992px) {
    .section--related {
      margin-top: 20px; } }
  .section--related .swiper-container {
    overflow: visible; }
  .section--related [rel="border-circle"] {
    width: 70px;
    height: 70px; }
  .section--related .swiper-button-prev,
  .section--related .swiper-button-next {
    width: 70px;
    height: 70px;
    margin-top: -65px; }
  .section--related .swiper-button-next {
    margin-right: -110px; }
  .section--related .swiper-button-prev {
    margin-left: -110px; }
  .section--related:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #222222;
    display: block;
    top: 100px;
    background-image: url("../img/dot.jpg"); }
  .section--related .card {
    background-color: white;
    margin-bottom: 30px; }
    @media only screen and (min-width: 768px) {
      .section--related .card {
        margin-bottom: 50px; } }
    .section--related .card .info {
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px; }
      @media only screen and (min-width: 768px) {
        .section--related .card .info {
          padding-left: 30px;
          padding-right: 30px;
          padding-bottom: 30px; } }
  .section--related .footer-button {
    position: relative;
    z-index: 2; }

@media only screen and (min-width: 1200px) {
  .swiper-related {
    overflow: hidden; } }

html.ie .swiper-related .card {
  width: 100%; }

@media only screen and (min-width: 992px) {
  .swiper-related .swiper-slide {
    width: 300px; } }

@media only screen and (min-width: 1200px) {
  .swiper-related .swiper-slide {
    width: 320px; } }

@media only screen and (min-width: 1900px) {
  .swiper-related .swiper-slide {
    width: 340px; } }

@media only screen and (max-width: 991px) {
  .swiper-related .swiper-slide {
    width: calc(100% - 60%); } }

@media only screen and (max-width: 767px) {
  .swiper-related .swiper-slide {
    width: calc(100% - 60px); } }

.section--timeline {
  padding-bottom: 30px; }
  .section--timeline header .section-title {
    margin-bottom: 40px; }
    @media only screen and (max-width: 767px) {
      .section--timeline header .section-title {
        margin-bottom: 30px; } }
  @media only screen and (min-width: 768px) {
    .section--timeline {
      padding-bottom: 60px; } }
  @media only screen and (min-width: 1200px) {
    .section--timeline {
      padding-bottom: 80px; } }

.timeline {
  overflow: hidden;
  margin-bottom: 50px; }
  @media only screen and (min-width: 992px) {
    .timeline {
      margin-bottom: 80px; } }
  @media only screen and (max-width: 767px) {
    .timeline {
      max-width: 400px;
      margin: 0 auto 50px; } }
  .timeline .display--table {
    text-align: center;
    height: 100%; }
  .timeline .display--table-cell {
    vertical-align: middle; }
    @media only screen and (max-width: 767px) {
      .timeline .display--table-cell {
        vertical-align: top;
        padding-top: 100px; } }
  .timeline .day {
    position: absolute;
    width: 100%;
    height: 100%;
    display: table;
    z-index: 10;
    font-family: "thaisans";
    font-weight: normal;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 0.8; }
    html.desktop.mac .timeline .day {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 500; }
    html.desktop.mac .timeline .day {
      line-height: 1; }
    @media only screen and (max-width: 767px) {
      .timeline .day {
        display: none; } }
    .timeline .day span {
      display: table-cell;
      vertical-align: middle; }
  .timeline .point {
    position: absolute;
    right: -50px;
    top: 50%;
    margin-top: -6px; }
    @media only screen and (max-width: 991px) {
      .timeline .point {
        right: -30px; } }
    @media only screen and (max-width: 767px) {
      .timeline .point {
        right: -25px; } }
    .timeline .point:before {
      content: " ";
      width: 100px;
      height: 1px;
      background-color: #34A93E;
      margin-top: -1px;
      top: 50%;
      right: 0;
      position: absolute; }
      @media only screen and (max-width: 991px) {
        .timeline .point:before {
          width: 30px; } }
      @media only screen and (max-width: 767px) {
        .timeline .point:before {
          width: 25px; } }
    .timeline .point:after {
      content: " ";
      width: 12px;
      height: 12px;
      border-radius: 500px 500px;
      border: 1px solid #34A93E;
      display: block;
      background-color: #F9F9F9;
      position: relative; }
  .timeline .-circle {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    display: block; }
    @media only screen and (max-width: 991px) {
      .timeline .-circle {
        width: 60px;
        height: 60px; } }
    @media only screen and (max-width: 767px) {
      .timeline .-circle {
        width: 8px;
        height: 8px; } }
    .timeline .-circle:before {
      content: " ";
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      left: 0;
      background-color: #F9F9F9;
      border-radius: 500px 500px;
      border: 1px solid #34A93E; }
      @media only screen and (max-width: 767px) {
        .timeline .-circle:before {
          background-color: #34A93E; } }
    .timeline .-circle:hover:before {
      background-color: #34A93E;
      color: white; }
    .timeline .-circle:hover .day {
      color: white; }
    .timeline .-circle:hover .point:after {
      background-color: #34A93E; }
    .timeline .-circle[href="#"] {
      cursor: default; }
      .timeline .-circle[href="#"]:hover:before {
        background-color: #F9F9F9;
        color: #222222; }
      .timeline .-circle[href="#"]:hover .day {
        color: #222222; }
      .timeline .-circle[href="#"]:hover .point:after {
        background-color: #F9F9F9; }
  .timeline .box {
    background-color: #F9F9F9;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    @media only screen and (max-width: 767px) {
      .timeline .box {
        padding-right: 12px;
        padding-top: 12px; } }
    .timeline .box:only-child .line-flow {
      display: none; }
    .timeline .box:last-child .line-flow {
      top: inherit;
      bottom: 50%;
      height: 100%; }
      @media only screen and (max-width: 767px) {
        .timeline .box:last-child .line-flow {
          height: 50px;
          width: 4px;
          margin-left: -2px;
          bottom: inherit;
          background-color: #F9F9F9; } }
    .timeline .box + .box {
      margin-top: 30px; }
    .timeline .box .flex-day {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100%; }
  .timeline .card .thumb {
    padding-bottom: 75%;
    margin-bottom: 0; }
  .timeline .card .info {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px; }
    @media only screen and (min-width: 1200px) {
      .timeline .card .info {
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px; } }
    .timeline .card .info [href="#"] {
      cursor: default; }
      .timeline .card .info [href="#"]:hover {
        color: #222222; }
  .timeline .line-flow {
    position: absolute;
    left: 50%;
    margin-left: -1px;
    height: 100%;
    width: 1px;
    background-color: #34A93E; }
    @media only screen and (max-width: 767px) {
      .timeline .line-flow {
        top: 100px;
        height: calc(100% + 100px); } }
  .timeline.-history .box {
    padding: 20px 0px; }
    .timeline.-history .box + .box {
      margin-top: 20px; }
    @media only screen and (min-width: 768px) {
      .timeline.-history .box {
        padding: 40px 0px; } }
  @media only screen and (min-width: 768px) {
    .timeline.-history .-circle {
      width: 80px;
      height: 80px; } }
  @media only screen and (min-width: 992px) {
    .timeline.-history .-circle {
      width: 140px;
      height: 140px; } }
  .timeline.-history .-circle:hover {
    cursor: pointer;
    cursor: default; }
    .timeline.-history .-circle:hover:before {
      background-color: #F9F9F9; }
    .timeline.-history .-circle:hover .day {
      color: #222222; }
    .timeline.-history .-circle:hover .point:after {
      background-color: #F9F9F9; }
  @media only screen and (min-width: 992px) {
    .timeline.-history .day {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 38px;
      font-size: 3.8rem; }
      html.desktop.mac .timeline.-history .day {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 27px;
        font-size: 2.7rem;
        font-weight: 500; } }
  .timeline.-history .info {
    display: table;
    width: 100%;
    height: 100%;
    padding-right: 15px; }
    @media only screen and (min-width: 768px) {
      .timeline.-history .info {
        padding-right: 40px;
        font-size: 20px;
        font-size: 2rem; } }
    .timeline.-history .info .middle-info {
      display: table-cell; }
      @media only screen and (min-width: 768px) {
        .timeline.-history .info .middle-info {
          vertical-align: middle; } }
    .timeline.-history .info p {
      line-height: 1.8; }
  @media only screen and (max-width: 767px) {
    .timeline.-history .line-flow {
      top: 50px; } }
  @media only screen and (max-width: 767px) {
    .timeline.-history .display--table-cell {
      padding-top: 50px; } }
  .timeline.-bg-white .box {
    background-color: white; }
  .timeline.-step .number {
    font-family: "thaisans";
    font-weight: normal;
    font-size: 38px;
    font-size: 3.8rem;
    display: block;
    margin-top: 2px; }
    html.desktop.mac .timeline.-step .number {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 27px;
      font-size: 2.7rem;
      font-weight: 500; }
  .timeline.-step .-circle:before {
    background-color: white; }
  .timeline.-step .section-title {
    font-family: "thaisans";
    font-weight: normal;
    margin-bottom: 10px; }
    html.desktop.mac .timeline.-step .section-title {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 500; }
  .timeline.-step .box:last-child .line-flow {
    height: 0; }
  .timeline.-step .box:last-child .display--table-cell {
    vertical-align: top; }
  .timeline.-step .-circle:hover {
    cursor: pointer;
    cursor: default; }
    .timeline.-step .-circle:hover:before {
      background-color: white; }
    .timeline.-step .-circle:hover .day {
      color: #222222; }
    .timeline.-step .-circle:hover .point:after {
      background-color: white; }
  .timeline.-service {
    margin-top: 15px; }
    .timeline.-service .box {
      padding: 20px 0px;
      background-color: transparent; }
      .timeline.-service .box + .box {
        margin-top: 20px; }
      @media only screen and (min-width: 768px) {
        .timeline.-service .box {
          padding: 40px 0px; } }
      @media only screen and (min-width: 768px) {
        .timeline.-service .box:first-child .-circle:before {
          border: 1px solid white; } }
      @media only screen and (min-width: 768px) {
        .timeline.-service .box:first-child .-circle {
          width: 180px;
          height: 220px; } }
      @media only screen and (min-width: 992px) {
        .timeline.-service .box:first-child .-circle {
          width: 255px;
          height: 300px; } }
      @media only screen and (min-width: 768px) {
        .timeline.-service .box:first-child .day figure img {
          max-width: 135px;
          max-height: 170px; } }
      @media only screen and (min-width: 992px) {
        .timeline.-service .box:first-child .day figure img {
          max-width: 200px;
          max-height: 253px; } }
      @media only screen and (min-width: 768px) {
        .timeline.-service .box:first-child .point {
          display: none; } }
      .timeline.-service .box .post:hover .point:after {
        background-color: #34A93E; }
    .timeline.-service figure img {
      transition: all 0.3s ease-in-out; }
    .timeline.-service .-circle:before {
      background-color: white; }
    .timeline.-service .-circle:hover {
      cursor: default; }
      .timeline.-service .-circle:hover:before {
        background-color: white; }
      .timeline.-service .-circle:hover .point:after {
        background-color: white !important; }
    .timeline.-service .-circle:not([href]) {
      cursor: default; }
    .timeline.-service .-circle.have-link {
      cursor: pointer; }
      .timeline.-service .-circle.have-link:hover img {
        -webkit-transform: scale(1.06);
                transform: scale(1.06); }
      .timeline.-service .-circle.have-link:hover .point:after {
        background-color: #34A93E !important; }
    @media only screen and (min-width: 768px) {
      .timeline.-service .-circle {
        width: 180px;
        height: 180px; } }
    @media only screen and (min-width: 992px) {
      .timeline.-service .-circle {
        width: 255px;
        height: 255px; } }
    .timeline.-service .day {
      display: table; }
      @media only screen and (min-width: 992px) {
        .timeline.-service .day {
          font-family: "thaisans";
          font-weight: normal;
          font-size: 38px;
          font-size: 3.8rem; }
          html.desktop.mac .timeline.-service .day {
            font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
            font-size: 27px;
            font-size: 2.7rem;
            font-weight: 500; } }
      .timeline.-service .day figure {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        display: table-cell;
        padding: 0; }
        @media only screen and (max-width: 767px) {
          .timeline.-service .day figure img {
            display: none; } }
        @media only screen and (min-width: 768px) {
          .timeline.-service .day figure img {
            max-width: 110px; } }
        @media only screen and (min-width: 992px) {
          .timeline.-service .day figure img {
            max-width: 150px; } }
    @media only screen and (min-width: 992px) {
      .timeline.-service .point {
        right: -70px; } }
    .timeline.-service .info {
      display: table;
      width: 100%;
      height: 100%;
      padding-right: 15px; }
      @media only screen and (min-width: 768px) {
        .timeline.-service .info {
          padding-left: 20px;
          font-size: 20px;
          font-size: 2rem; } }
      @media only screen and (min-width: 992px) {
        .timeline.-service .info {
          padding-left: 40px;
          padding-right: 0px; } }
      .timeline.-service .info .intro {
        color: #222222; }
      .timeline.-service .info .middle-info {
        display: table-cell;
        text-align: left; }
        @media only screen and (min-width: 768px) {
          .timeline.-service .info .middle-info {
            vertical-align: middle; } }
      .timeline.-service .info .btn-readmore {
        margin-top: 15px;
        min-width: 200px; }
      .timeline.-service .info p {
        line-height: 1.8; }
      .timeline.-service .info span {
        text-align: left;
        display: block;
        line-height: 1.8;
        font-size: 15px;
        font-size: 1.5rem; }
      .timeline.-service .info ul {
        padding: 0 0 0 22px;
        margin: 0; }
        .timeline.-service .info ul li {
          text-align: left;
          line-height: 1.8;
          font-size: 15px;
          font-size: 1.5rem;
          padding: 0;
          margin: 0; }
      .timeline.-service .info .toppic {
        color: #34A93E;
        text-align: left;
        padding: 0 0 10px 0;
        line-height: 1.2; }
    @media only screen and (max-width: 767px) {
      .timeline.-service .line-flow {
        top: 50px; } }
    @media only screen and (max-width: 767px) {
      .timeline.-service .display--table-cell {
        padding-top: 50px; } }

.form-contact {
  background-color: #F9F9F9;
  padding: 40px 0px;
  position: relative; }
  @media only screen and (min-width: 768px) {
    .form-contact {
      padding: 60px 0px; }
      .form-contact > .container {
        max-width: 870px; } }
  @media only screen and (min-width: 1200px) {
    .form-contact {
      padding: 80px 0px; } }

.form--contactus .form-control {
  min-height: 50px; }

@media only screen and (min-width: 768px) {
  .form--contactus textarea {
    height: 180px; }
    html.ie .form--contactus textarea {
      height: 233px;
      padding-top: 15px;
      padding-bottom: 15px; } }

@media only screen and (min-width: 768px) {
  .form--contactus .footer-button {
    margin-top: 20px; }
    .form--contactus .footer-button .form-group {
      margin-bottom: 35px; } }

.form--contactus .has-error .help-block {
  display: none; }

.form--contactus .form-control {
  font-size: 15px;
  font-size: 1.5rem; }

.form--contactus.-apply .file-preview {
  display: none; }

.form--contactus.-apply .legend {
  border: none; }

.form--contactus.-apply .input-group {
  display: block;
  overflow: hidden; }
  .form--contactus.-apply .input-group .form-control,
  .form--contactus.-apply .input-group .input-group-btn {
    display: inline-block; }
  .form--contactus.-apply .input-group .form-control {
    float: left;
    width: auto;
    border-radius: 4px 4px;
    padding-top: 13px;
    padding-right: 60px; }
    @media only screen and (min-width: 768px) {
      .form--contactus.-apply .input-group .form-control {
        min-width: 347px; } }
    @media only screen and (max-width: 767px) {
      .form--contactus.-apply .input-group .form-control {
        float: none;
        width: 100%; } }
  @media only screen and (min-width: 768px) {
    .form--contactus.-apply .input-group .input-group-btn {
      position: absolute;
      right: 0;
      top: 0;
      width: auto;
      z-index: 3; } }
  @media only screen and (max-width: 767px) {
    .form--contactus.-apply .input-group .input-group-btn {
      margin-top: 15px;
      position: static;
      display: block;
      width: 100%; } }
  .form--contactus.-apply .input-group .btn-file {
    border-radius: 500px 500px;
    min-width: 160px;
    margin-left: 0; }
    .form--contactus.-apply .input-group .btn-file .hidden-xs {
      display: block !important; }
  .form--contactus.-apply .input-group .fileinput-remove-button {
    margin-right: 24px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    height: 49px;
    border-radius: 0px 4px 4px 0px;
    background-color: transparent;
    background-color: transparent; }
    @media only screen and (max-width: 767px) {
      .form--contactus.-apply .input-group .fileinput-remove-button {
        margin-right: 25px;
        position: absolute;
        right: 0;
        top: 0;
        margin-right: 0; } }
    .form--contactus.-apply .input-group .fileinput-remove-button:hover {
      background-color: #34A93E;
      border-radius: 0px 4px 4px 0px; }
      .form--contactus.-apply .input-group .fileinput-remove-button:hover .icon-close-brand {
        background-image: url("../img/icon/icon-close-white.png");
        width: 17px;
        height: 16px; }

.form--contactus.-apply .section-question .label-block {
  display: block; }

.form--contactus.-apply .section-question .pretty {
  display: block;
  margin-top: 20px; }
  .form--contactus.-apply .section-question .pretty .state label {
    text-indent: 35px;
    font-weight: bold; }
    .form--contactus.-apply .section-question .pretty .state label:before {
      border-color: #34A93E; }
    .form--contactus.-apply .section-question .pretty .state label:before, .form--contactus.-apply .section-question .pretty .state label:after {
      width: 24px;
      height: 24px;
      top: -5px; }
  .form--contactus.-apply .section-question .pretty input:checked + .state label::after {
    width: 24px;
    height: 24px;
    background-color: #34A93E !important; }

@media only screen and (max-width: 767px) {
  .form--contactus.-apply .section-question .form-group {
    margin-bottom: 20px; } }

@media only screen and (min-width: 768px) {
  .form--contactus.-apply .section-question .form-group + .form-group {
    margin-top: 40px; } }

@media only screen and (max-width: 767px) {
  .form--contactus.-apply .section-question .form-group + .form-group {
    padding-top: 15px;
    border-top: 1px solid #dddddd; } }

@media only screen and (min-width: 768px) {
  .form--contactus.-apply .section-upload .form-group {
    margin-bottom: 20px; } }

@media only screen and (max-width: 767px) {
  .form--contactus.-apply .section-upload .form-group + .form-group {
    padding-top: 15px;
    border-top: 1px solid #dddddd; } }

.form--contactus.-calendar .input-group .form-control {
  background-color: white;
  line-height: 3.39; }

.form--contactus.-calendar .section-upload {
  margin-top: 20px; }
  .form--contactus.-calendar .section-upload .input-group {
    display: block;
    overflow: hidden; }
    .form--contactus.-calendar .section-upload .input-group .form-control,
    .form--contactus.-calendar .section-upload .input-group .input-group-btn {
      display: inline-block; }
    .form--contactus.-calendar .section-upload .input-group .form-control {
      float: left;
      width: auto;
      border-radius: 4px 4px;
      padding-top: 13px;
      padding-right: 60px; }
      @media only screen and (min-width: 768px) {
        .form--contactus.-calendar .section-upload .input-group .form-control {
          min-width: 347px; } }
      @media only screen and (max-width: 767px) {
        .form--contactus.-calendar .section-upload .input-group .form-control {
          float: none;
          width: 100%; } }
    @media only screen and (min-width: 768px) {
      .form--contactus.-calendar .section-upload .input-group .input-group-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
        z-index: 3; } }
    @media only screen and (max-width: 767px) {
      .form--contactus.-calendar .section-upload .input-group .input-group-btn {
        margin-top: 15px;
        position: static;
        display: block;
        width: 100%; } }
    .form--contactus.-calendar .section-upload .input-group .btn-file {
      border-radius: 500px 500px;
      min-width: 160px;
      margin-left: 0; }
      .form--contactus.-calendar .section-upload .input-group .btn-file .hidden-xs {
        display: block !important; }
    .form--contactus.-calendar .section-upload .input-group .fileinput-remove-button {
      margin-right: 24px;
      border-right: none;
      border-top: none;
      border-bottom: none;
      height: 50px;
      border-radius: 0px 4px 4px 0px;
      background-color: transparent;
      background-color: transparent; }
      @media only screen and (max-width: 767px) {
        .form--contactus.-calendar .section-upload .input-group .fileinput-remove-button {
          margin-right: 25px;
          position: absolute;
          right: 0;
          top: 0;
          margin-right: 0; } }
      .form--contactus.-calendar .section-upload .input-group .fileinput-remove-button:hover {
        background-color: #34A93E;
        border-radius: 0px 4px 4px 0px; }
        .form--contactus.-calendar .section-upload .input-group .fileinput-remove-button:hover .icon-close-brand {
          background-image: url("../img/icon/icon-close-white.png");
          width: 17px;
          height: 16px; }
  .form--contactus.-calendar .section-upload label {
    line-height: 1.4;
    margin-bottom: 10px; }
    html.desktop.mac .form--contactus.-calendar .section-upload label {
      line-height: 1; }

.form--complete {
  background-color: #F9F9F9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .form--complete .circle {
    width: 140px;
    height: 140px;
    border-radius: 500px 500px;
    margin: 0 auto;
    display: block;
    background-color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 50px; }
    @media only screen and (min-width: 768px) {
      .form--complete .circle {
        width: 180px;
        height: 180px; } }
    .form--complete .circle .icon {
      margin: 0 auto; }
  .form--complete .footer-button {
    margin-top: 40px; }
  .form--complete .text {
    font-family: "thaisans";
    font-weight: normal;
    font-size: 38px;
    font-size: 3.8rem;
    color: #222222; }
    html.desktop.mac .form--complete .text {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 27px;
      font-size: 2.7rem;
      font-weight: 500; }
    @media only screen and (max-width: 767px) {
      .form--complete .text {
        font-size: 32px;
        font-size: 3.2rem;
        line-height: 1; }
        html.desktop.mac .form--complete .text {
          font-size: 24px;
          font-size: 2.4rem; } }

.form legend {
  border-bottom: none; }

.form fieldset + fieldset {
  margin-top: 40px; }
  @media only screen and (max-width: 767px) {
    .form fieldset + fieldset {
      margin-top: 20px; } }

.fl-form.fl-style-2 label.fl-label {
  top: 2px; }

.fl-form.fl-style-2 .fl-is-active input.fl-input,
.fl-form.fl-style-2 .fl-is-active select.fl-select,
.fl-form.fl-style-2 .fl-is-active textarea.fl-textarea {
  padding-top: 20px;
  padding-bottom: 0; }

.fl-form.fl-style-2 input.fl-input,
.fl-form.fl-style-2 select.fl-select,
.fl-form.fl-style-2 textarea.fl-textarea {
  padding-top: 10px;
  padding-bottom: 5px; }

.page__privacy .section--page_name {
  padding-bottom: 20px; }

.page__privacy .section--content {
  margin-top: 30px;
  padding-bottom: 30px; }
  @media only screen and (min-width: 768px) {
    .page__privacy .section--content {
      margin-top: 50px;
      padding-bottom: 50px; } }
  @media only screen and (min-width: 992px) {
    .page__privacy .section--content {
      margin-top: 80px;
      padding-bottom: 80px; } }
  .page__privacy .section--content p {
    line-height: 1.8; }
  .page__privacy .section--content .toppic {
    color: #34A93E;
    padding-top: 45px;
    padding-bottom: 20px; }

.page__sitemap .section--content {
  padding-bottom: 30px; }
  @media only screen and (min-width: 768px) {
    .page__sitemap .section--content {
      padding-bottom: 50px; } }
  @media only screen and (min-width: 992px) {
    .page__sitemap .section--content {
      padding-bottom: 80px; } }
  .page__sitemap .section--content .group-link {
    margin-bottom: 30px; }
  .page__sitemap .section--content .header {
    color: #34A93E;
    padding-bottom: 15px; }
    .page__sitemap .section--content .header a {
      color: #34A93E; }
      .page__sitemap .section--content .header a:hover {
        color: #34A93E; }
  .page__sitemap .section--content p {
    line-height: 1.8;
    color: #555555;
    margin: 0; }
    .page__sitemap .section--content p a {
      color: #555555; }
      .page__sitemap .section--content p a:hover {
        color: #34A93E; }
  .page__sitemap .section--content ul li {
    line-height: 1.8;
    color: #555555; }
    .page__sitemap .section--content ul li:last-child {
      padding-bottom: 15px; }
    .page__sitemap .section--content ul li a {
      color: #555555; }
      .page__sitemap .section--content ul li a:hover {
        color: #34A93E; }

.page__member.page__inner .section {
  padding-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__member.page__inner .section {
      padding-top: 60px; } }
  @media only screen and (min-width: 1200px) {
    .page__member.page__inner .section {
      padding-top: 70px; } }

.page__member .section--hero .wrapper-hero {
  display: table;
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (max-width: 543px) {
    .page__member .section--hero .wrapper-hero {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .page__member .section--hero .wrapper-hero {
      padding-top: 32%; } }

.page__member .section--hero .photo {
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; }

.page__member .section--hero .-desktop {
  display: block; }
  @media only screen and (max-width: 543px) {
    .page__member .section--hero .-desktop {
      display: none; } }

.page__member .section--hero .-mobile {
  display: none; }
  @media only screen and (max-width: 543px) {
    .page__member .section--hero .-mobile {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.page__member .group-article > .info {
  margin: 40px auto 0px;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .page__member .group-article > .info {
      margin-top: 20px; } }

.page__member .section--panels {
  margin-top: 0px; }
  @media only screen and (min-width: 992px) {
    .page__member .section--panels {
      margin-top: 60px; } }
  @media only screen and (min-width: 1200px) {
    .page__member .section--panels {
      padding-bottom: 80px; } }
  .page__member .section--panels .panel-body {
    overflow: hidden;
    position: relative; }
  .page__member .section--panels .title {
    color: #222222;
    margin-bottom: 10px;
    font-family: "THSarabunNew", Arial, Thonburi;
    font-weight: bold;
    font-size: 18px;
    font-size: 1.8rem; }
    @media only screen and (min-width: 768px) {
      .page__member .section--panels .title {
        margin-bottom: 20px;
        font-size: 20px;
        font-size: 2rem; } }
  @media only screen and (max-width: 767px) {
    .page__member .section--panels .photo {
      max-width: 200px;
      margin: 0 auto 30px; } }
  @media only screen and (min-width: 768px) {
    .page__member .section--panels .wrapper-panel {
      padding-left: 30px;
      padding-right: 30px; } }
  @media only screen and (max-width: 767px) {
    .page__member .section--panels .wrapper-panel .title {
      margin-bottom: 20px; } }
  @media only screen and (min-width: 768px) {
    .page__member .section--panels ul, .page__member .section--panels ol {
      line-height: 1.8; } }
  .page__member .section--panels .group-section + .group-section {
    margin-top: 30px; }
    @media only screen and (min-width: 768px) {
      .page__member .section--panels .group-section + .group-section {
        margin-top: 40px; } }

.page__member .section--guide {
  padding-bottom: 0;
  margin-top: 40px; }
  .page__member .section--guide .topic-title {
    font-size: 28px;
    font-size: 2.8rem; }
    html.desktop.mac .page__member .section--guide .topic-title {
      font-size: 20px;
      font-size: 2rem; }
  @media only screen and (max-width: 1199px) {
    .page__member .section--guide .list-number span.text {
      padding-right: 20px; } }
  .page__member .section--guide .list-number .number {
    display: inline-block;
    line-height: 55px; }
    @media only screen and (max-width: 767px) {
      .page__member .section--guide .list-number .number {
        line-height: 50px; } }
  @media only screen and (max-width: 767px) {
    .page__member .section--guide .list-number .have-button {
      display: block;
      margin-top: 20px;
      text-align: center; } }
  .page__member .section--guide .have-button {
    text-align: right; }

@media only screen and (min-width: 768px) {
  .page__member .section--tab {
    margin-top: -20px; } }

.page__member .section--tab .rt01 .rt01viewport {
  padding-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__member .section--tab .rt01 .rt01viewport {
      padding-top: 40px; } }

.member-key {
  text-align: center;
  margin-top: 60px; }
  @media only screen and (max-width: 991px) {
    .member-key {
      margin-top: 60px; }
      .member-key .group-key {
        margin-bottom: 60px; } }
  @media only screen and (max-width: 767px) {
    .member-key {
      margin-top: 30px; }
      .member-key .group-key {
        margin-bottom: 40px; } }
  .member-key .photo {
    margin: 0 auto 30px;
    display: inline-block; }
    @media only screen and (max-width: 991px) {
      .member-key .photo {
        margin-bottom: 10px; } }
  .member-key .topic-title {
    margin-bottom: 10px; }
  .member-key .info {
    max-width: 256px;
    margin: 0 auto; }
    .member-key .info ul {
      padding: 0; }
      @media only screen and (min-width: 768px) {
        .member-key .info ul {
          line-height: 1.8; } }

.page__career.page__inner .section {
  padding-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__career.page__inner .section {
      padding-top: 60px; }
      .page__career.page__inner .section.section-apply {
        padding-top: 40px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .page__career.page__inner .section.section--intro {
      padding-top: 40px; } }
  @media only screen and (min-width: 1200px) {
    .page__career.page__inner .section {
      padding-top: 70px; } }
  @media only screen and (max-width: 767px) {
    .page__career.page__inner .section {
      padding-top: 20px; } }

.page__career .list-number {
  padding-left: 25px; }

.page__career .section--listing {
  padding: 0; }

.page__career .section--hero .wrapper-hero {
  display: table;
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (max-width: 543px) {
    .page__career .section--hero .wrapper-hero {
      padding-top: 100%; } }
  @media only screen and (min-width: 544px) {
    .page__career .section--hero .wrapper-hero {
      padding-top: 32%; } }

.page__career .section--hero .photo {
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; }

.page__career .section--hero .-desktop {
  display: block; }
  @media only screen and (max-width: 543px) {
    .page__career .section--hero .-desktop {
      display: none; } }

.page__career .section--hero .-mobile {
  display: none; }
  @media only screen and (max-width: 543px) {
    .page__career .section--hero .-mobile {
      display: block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.page__career .group-article > .info {
  margin: 40px auto 0px;
  text-align: center; }

.page__career .header-detail {
  position: relative;
  margin-bottom: 40px; }
  .page__career .header-detail .btn {
    min-width: 150px;
    margin-bottom: 30px; }
    .page__career .header-detail .btn .icon {
      margin-right: 10px; }
    @media only screen and (min-width: 992px) {
      .page__career .header-detail .btn {
        position: absolute;
        left: 0;
        top: 0;
        margin-bottom: 0; } }

.page__career .section--intro .search-filter {
  margin-top: 20px; }

.page__career .section--intro footer.group-button {
  margin-top: 70px; }
  @media only screen and (min-width: 768px) {
    .page__career .section--intro footer.group-button .btn {
      margin-left: 5px;
      margin-right: 5px; } }
  @media only screen and (min-width: 1200px) {
    .page__career .section--intro footer.group-button {
      margin-top: 100px; } }

.page__career .section--intro .swiper-career {
  margin-top: 60px; }
  @media only screen and (max-width: 991px) {
    .page__career .section--intro .swiper-career {
      margin-top: 40px; } }

@media only screen and (min-width: 768px) {
  .page__career .section-apply .group-button .btn + .btn {
    margin-left: 10px; } }

@media only screen and (min-width: 768px) {
  .page__career .section-apply .group-button .btn-primary {
    padding-left: 20px;
    padding-right: 20px; } }

@media only screen and (min-width: 992px) {
  .page__career .section-apply .group-button .btn-primary {
    padding-left: 36px;
    padding-right: 36px; } }

.page__career .group-section > .title {
  color: #222222;
  margin-bottom: 10px;
  font-family: "THSarabunNew", Arial, Thonburi;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  padding-top: 2px; }
  @media only screen and (min-width: 768px) {
    .page__career .group-section > .title {
      margin-bottom: 20px;
      font-size: 20px;
      font-size: 2rem; } }

.page__career .group-section + .group-section {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) {
    .page__career .group-section + .group-section {
      margin-top: 40px; } }

@media only screen and (min-width: 768px) {
  .page__career .list-semicolon .title {
    width: 10%; } }

@media only screen and (min-width: 992px) {
  .page__career .list-semicolon .title {
    width: 6%; } }

@media only screen and (max-width: 767px) {
  .page__career .group-button .btn {
    margin: 10px 0px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

@media only screen and (max-width: 543px) {
  .page__career .group-button .btn {
    white-space: normal; } }

.page__career .footer-button {
  margin-top: 40px; }
  @media only screen and (min-width: 992px) {
    .page__career .footer-button {
      margin-top: 60px; } }

.page__career .section-job article + article {
  margin-top: 60px; }

.page__career .section-job .footer-button {
  margin-top: 40px; }

@media only screen and (min-width: 768px) {
  .page__career .search-filter {
    margin-bottom: 60px; } }

@media only screen and (min-width: 992px) {
  .page__career .header-job {
    max-width: 530px;
    margin: 0 auto; } }

.page__career .header-job .section-title {
  font-weight: 500 !important; }

.page__career .header-job .info {
  margin-top: 10px; }
  @media only screen and (max-width: 767px) {
    .page__career .header-job .info {
      font-size: 16px;
      font-size: 1.6rem; } }

.page__career .detail-job ul > li + li {
  margin-top: 10px; }

@media only screen and (min-width: 768px) {
  .page__career .detail-job {
    max-width: 870px;
    margin: 0 auto; } }

.page__career .detail-job .group-section > .title {
  margin-bottom: 5px; }

.page__career .wrapper-form {
  max-width: 530px;
  margin: 0 auto; }

.page__career .filter-procurement .btn.dropdown-toggle {
  min-height: 50px; }

.page__career .form--complete {
  background-color: white; }
  .page__career .form--complete .circle {
    border: 1px solid #34A93E; }
  @media only screen and (min-width: 992px) {
    .page__career .form--complete .footer-button {
      margin-top: 40px; } }

.page__career .table--tcdc.-procurement.table > tbody > tr > td {
  vertical-align: middle; }

.job-item {
  border-top: 1px solid #e6e6e6;
  padding: 15px 0px; }
  .job-item:hover {
    background-color: #f5f5f5; }
  .job-item:only-child, .job-item:last-child {
    border-bottom: 1px solid #e6e6e6; }
  .job-item .text-link {
    padding-top: 5px;
    display: inline-block; }
  .job-item .list {
    padding-top: 5px;
    white-space: nowrap; }
    @media only screen and (max-width: 543px) {
      .job-item .list {
        margin-top: 5px; } }
    @media only screen and (min-width: 768px) {
      .job-item .list li {
        width: 49%;
        text-align: center; }
        .job-item .list li:last-child {
          text-align: right; } }
    .job-item .list a.link-email {
      vertical-align: middle; }

.swiper-career {
  position: relative; }
  @media only screen and (min-width: 768px) {
    .swiper-career .swiper-slide {
      width: calc(100% / 2 - 10px); } }
  @media only screen and (max-width: 767px) {
    .swiper-career .swiper-slide {
      width: calc(100% - 60px); } }
  .swiper-career .swiper-button-prev,
  .swiper-career .swiper-button-next {
    margin-top: -40px; }
  .swiper-career .swiper-button-next {
    right: 0;
    margin-right: -35px; }
    @media only screen and (max-width: 991px) {
      .swiper-career .swiper-button-next {
        margin-right: -20px; } }
  .swiper-career .swiper-button-prev {
    left: 0;
    margin-left: -35px; }
    @media only screen and (max-width: 991px) {
      .swiper-career .swiper-button-prev {
        margin-left: -20px; } }
  @media only screen and (min-width: 992px) {
    .swiper-career .swiper-button-prev,
    .swiper-career .swiper-button-next,
    .swiper-career [rel="border-circle"] {
      width: 70px;
      height: 70px; } }
  @media only screen and (min-width: 768px) {
    .swiper-career .swiper-slide-prev,
    .swiper-career .swiper-slide-next + .swiper-slide {
      opacity: 0.2; } }

#custom-search .gsc-control-cse {
  padding: 0;
  border: none; }

#custom-search .gsc-input-box {
  height: inherit !important;
  padding: 0px 0px 15px;
  border: none;
  border-bottom: 2px solid #34A93E;
  height: inherit !important; }
  @media only screen and (max-width: 767px) {
    #custom-search .gsc-input-box {
      padding: 10px 0px; } }
  #custom-search .gsc-input-box .gsib_a {
    padding: 0; }

#custom-search .gstl_50 {
  height: 100%; }

#custom-search .gsc-input {
  padding-right: 0; }

#custom-search input.gsc-input {
  font-family: "thaisans";
  font-weight: normal;
  font-size: 38px;
  font-size: 3.8rem;
  padding-left: 60px !important;
  height: inherit !important;
  color: #222222;
  background-image: url("../img/icon/ic-search%402x.png") !important;
  background-size: 38px 38px !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  text-indent: 0 !important; }
  html.desktop.mac #custom-search input.gsc-input {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 27px;
    font-size: 2.7rem;
    font-weight: 500; }
  @media only screen and (max-width: 767px) {
    #custom-search input.gsc-input {
      background-size: 30px 30px !important;
      padding-left: 40px !important; } }

#custom-search .gsc-input > input:focus,
#custom-search .gsc-input > input:hover,
#custom-search .gsc-input-box-hover,
#custom-search .gsc-input-box-focus {
  box-shadow: none; }

#custom-search .gsc-search-button {
  display: none;
  padding: 0;
  width: 0; }

#custom-search .gsst_a {
  width: 36px;
  height: 36px;
  border-radius: 500px 500px;
  line-height: 30px;
  vertical-align: middle;
  background-color: #C9C9C9;
  padding: 0;
  transition: all 0.3s; }
  @media only screen and (max-width: 767px) {
    #custom-search .gsst_a {
      line-height: 25px;
      width: 30px;
      height: 30px; } }
  #custom-search .gsst_a:hover {
    background-color: #34A93E; }

#custom-search .gsst_a,
#custom-search .gscb_a {
  color: white;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  font-size: 36px; }
  @media only screen and (max-width: 767px) {
    #custom-search .gsst_a,
    #custom-search .gscb_a {
      font-size: 30px; } }

#custom-search .gsc-table-result, #custom-search .gsc-thumbnail-inside, #custom-search .gsc-url-top {
  padding-left: 0;
  padding-right: 0; }

#custom-search .gsc-tabHeader {
  font-size: 27px;
  font-size: 2.7rem;
  font-family: "thaisans";
  font-weight: lighter;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  color: #222222;
  border-bottom: 5px solid white; }
  html.desktop.mac #custom-search .gsc-tabHeader {
    font-size: 21px;
    font-size: 2.1rem; }
  html.desktop.mac #custom-search .gsc-tabHeader {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-weight: 200; }
  #custom-search .gsc-tabHeader:hover {
    color: #34A93E; }
  #custom-search .gsc-tabHeader.gsc-tabhActive {
    border-bottom: 5px solid #34A93E;
    color: #34A93E;
    font-family: "thaisans";
    font-weight: normal; }
    html.desktop.mac #custom-search .gsc-tabHeader.gsc-tabhActive {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-weight: 500; }
  #custom-search .gsc-tabHeader.gsc-tabhInactive {
    height: inherit;
    background-color: transparent;
    background-color: transparent; }

#custom-search .gsc-tabsArea {
  border-bottom: 1px solid #E6E6E6;
  height: inherit !important;
  font-size: 0; }
  #custom-search .gsc-tabsArea > div,
  #custom-search .gsc-tabsArea .gsc-tabHeader {
    height: inherit !important; }

.gssb_c {
  color: #222222;
  margin-top: 20px !important; }

.gssb_e {
  box-shadow: none !important;
  border-radius: 4px 4px; }

.gsc-completion-container {
  box-shadow: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 20px; }
  .gsc-completion-container span {
    font-family: "thaisans";
    font-weight: normal;
    font-size: 24px;
    font-size: 2.4rem;
    color: #34A93E; }
    html.desktop.mac .gsc-completion-container span {
      font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 500; }
    .gsc-completion-container span b {
      color: #222222;
      font-family: "thaisans";
      font-weight: normal; }
      html.desktop.mac .gsc-completion-container span b {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-weight: 500; }

.gsc-completion-selected td {
  background-color: #34A93E; }

.gsc-completion-selected span, .gsc-completion-selected b {
  color: white !important; }

.gssb_a,
.gssb_a td {
  color: #222222 !important;
  line-height: 30px !important; }

.gsc-refinementsArea {
  display: none; }

.gsc-wrapper {
  padding-top: 10px; }

.gsc-result-info {
  padding: 10px 0px;
  color: #222222; }

.gsc-control-cse div {
  color: #222222;
  font-weight: normal; }

.gsc-results .gsc-cursor-box {
  margin: 20px 0px 0px !important;
  font-size: 20px;
  font-weight: normal;
  font-size: 16px;
  font-size: 1.6rem; }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    color: #555555 !important; }
    .gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
      color: #34A93E !important;
      text-decoration: none !important; }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    color: #222222 !important;
    font-weight: normal;
    border-bottom: 1px solid #34A93E !important; }
  @media only screen and (min-width: 768px) {
    .gsc-results .gsc-cursor-box {
      font-size: 18px;
      font-size: 1.8rem; } }

.gsc-above-wrapper-area {
  padding-bottom: 2px; }

.gsc-control-cse,
.gsc-control-cse .gsc-table-result,
.gsc-selected-option-container {
  font-size: 15px;
  font-size: 1.5rem; }

.form-search .input-group {
  border-bottom: 1px solid #FFFFFF; }

.form-search .form-control,
.form-search .input-group-addon {
  background-color: transparent;
  background-color: transparent;
  border: none; }

.form-search .input-group-addon {
  vertical-align: middle;
  padding-left: 0;
  padding-right: 0; }

.form-search .form-control {
  border-radius: 0 0;
  box-shadow: none;
  font-family: "thaisans";
  font-weight: lighter;
  font-size: 70px;
  font-size: 7rem;
  color: white;
  padding-left: 30px;
  padding-right: 0; }
  html.desktop.mac .form-search .form-control {
    font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
    font-size: 52px;
    font-size: 5.2rem;
    font-weight: 200; }
  @media only screen and (min-width: 768px) {
    .form-search .form-control {
      height: 100%; } }
  @media only screen and (max-width: 767px) {
    .form-search .form-control {
      font-family: "thaisans";
      font-weight: normal;
      font-size: 32px;
      font-size: 3.2rem;
      padding-left: 15px; }
      html.desktop.mac .form-search .form-control {
        font-family: "SF Pro TH", "SF Pro Display", "Sukhumvit Set";
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: 500; } }
  .form-search .form-control::-webkit-input-placeholder {
    color: 255, 255, 255, 0.3; }
  .form-search .form-control::-moz-placeholder {
    color: 255, 255, 255, 0.3; }
  .form-search .form-control:-moz-placeholder {
    color: 255, 255, 255, 0.3; }
  .form-search .form-control:-ms-input-placeholder {
    color: 255, 255, 255, 0.3; }
  .form-search .form-control:focus {
    border: none !important; }

.listing-search .card + .card {
  margin-top: 20px; }
  @media only screen and (max-width: 767px) {
    .listing-search .card + .card {
      margin-top: 50px; } }

@media only screen and (min-width: 768px) {
  .listing-search .card .post {
    padding-top: 4px; } }

.listing-search .card .thumb {
  margin-bottom: 0; }
  @media only screen and (max-width: 767px) {
    .listing-search .card .thumb {
      margin-bottom: 20px; } }

@media only screen and (min-width: 768px) {
  .listing-search .card .info {
    padding-left: 10px; } }

@media only screen and (min-width: 992px) {
  .listing-search .card .info {
    padding-left: 20px; } }

.listing-search .card .topic-title {
  max-height: 50px; }
  @media only screen and (max-width: 767px) {
    .listing-search .card .topic-title {
      max-height: 84px; } }

.listing-search .card .text-content {
  max-height: 30px; }
  @media only screen and (max-width: 767px) {
    .listing-search .card .text-content {
      max-height: 60px; } }

.listing-search footer {
  margin-top: 50px; }
  @media only screen and (max-width: 767px) {
    .listing-search footer {
      margin-bottom: 10px; } }
  @media only screen and (min-width: 992px) {
    .listing-search footer {
      margin-top: 80px; } }

@media only screen and (min-width: 992px) {
  .page__search ul.search-filter {
    margin-bottom: 60px; } }

@media only screen and (min-width: 1200px) {
  .page__search ul.search-filter {
    margin-bottom: 80px; } }

.content-cms {
  text-align: left;
  line-height: 1.8; }
  .content-cms.-zip-event span {
    font-size: 15px !important; }
  .content-cms.-zip-event strong {
    color: #222222; }
  .content-cms.-zip-event table {
    margin-bottom: 20px; }
    .content-cms.-zip-event table td {
      padding: 4px 2px; }
  .content-cms.-zip-event a:before {
    display: none; }
  .content-cms iframe {
    width: 100%; }
    .content-cms iframe body {
      min-width: 100% !important;
      min-height: 100% !important; }
      .content-cms iframe body > header {
        padding: 0; }
  .content-cms div > img,
  .content-cms td > img,
  .content-cms p > img {
    width: 100%;
    height: auto; }
  .content-cms a {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    color: #34A93E; }
    .content-cms a:before {
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      bottom: 4px;
      width: 100%;
      height: 1px;
      background-color: #34A93E; }
      .content-cms a:before:hover {
        background-color: #288230; }
    .content-cms a img {
      border-bottom: 1px solid white; }
      .content-cms a img:after {
        content: "";
        width: 100%;
        bottom: 4px;
        height: 1px;
        background-color: white;
        position: absolute;
        left: 0; }
    .content-cms a:hover {
      color: #288230; }
  .content-cms b {
    color: #222222; }

.content-detail .cate:empty {
  display: none; }

.page__detail_projects .news-detail a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  color: #34A93E; }
  .page__detail_projects .news-detail a:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 1px;
    background-color: #34A93E; }
    .page__detail_projects .news-detail a:before:hover {
      background-color: #288230; }
  .page__detail_projects .news-detail a:hover {
    color: #288230; }

.detail_content_top_right ul {
  list-style: none; }

.page__calendar .content-cms div,
.page__career .content-cms div {
  font-size: 15px !important;
  color: #555555 !important;
  font-family: "THSarabunNew", Arial, Thonburi; }

.content-cms iframe .gci-new-mobile.gci-mobile.gci-embed {
  min-width: 100% !important;
  min-height: 100% !important; }

/*# sourceMappingURL=main.css.map */