@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=vietnamese");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap&subset=vietnamese");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  outline: none !important; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

html,
body {
  min-height: 100%; }

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  font-weight: 400;
  color: #333333; }

ol,
ul {
  list-style: none; }

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

table {
  border-collapse: collapse;
  border-spacing: 0; }

button {
  outline: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  button:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

a {
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

input[type=text],
textarea {
  -webkit-appearance: none; }

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

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

/* Slider */
.slick-loading .slick-list {
  background: #fff slick-image-url("./../images/ajax-loader.gif") center center no-repeat; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-share-facebook:before {
  content: "\e914"; }

.icon-service:before {
  content: "\e911"; }

.icon-invest-position:before {
  content: "\e912"; }

.icon-investor:before {
  content: "\e913"; }

.icon-close:before {
  content: "\e90e"; }

.icon-slide-next:before {
  content: "\e90f"; }

.icon-slide-prev:before {
  content: "\e910"; }

.icon-call:before {
  content: "\e902"; }

.icon-facebook:before {
  content: "\e909"; }

.icon-instagram:before {
  content: "\e90a"; }

.icon-maps:before {
  content: "\e90b"; }

.icon-youtube:before {
  content: "\e90c"; }

.icon-zoom:before {
  content: "\e90d"; }

.icon-next:before {
  content: "\e908"; }

.icon-dropdown:before {
  content: "\e900"; }

.icon-email:before {
  content: "\e901"; }

.icon-language:before {
  content: "\e903"; }

.icon-link:before {
  content: "\e904"; }

.icon-linkedin:before {
  content: "\e905"; }

.icon-printing:before {
  content: "\e906"; }

.icon-search:before {
  content: "\e907"; }

.clearfix {
  clear: both; }

.m0 {
  margin: 0 !important; }

.mt0 {
  margin-top: 0 !important; }

.mr0 {
  margin-right: 0 !important; }

.mb0 {
  margin-bottom: 0 !important; }

.ml0 {
  margin-left: 0 !important; }

.m5 {
  margin: 5px !important; }

.mt5 {
  margin-top: 5px !important; }

.mr5 {
  margin-right: 5px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.ml5 {
  margin-left: 5px !important; }

.m10 {
  margin: 10px !important; }

.mt10 {
  margin-top: 10px !important; }

.mr10 {
  margin-right: 10px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.ml10 {
  margin-left: 10px !important; }

.m15 {
  margin: 15px !important; }

.mt15 {
  margin-top: 15px !important; }

.mr15 {
  margin-right: 15px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.ml15 {
  margin-left: 15px !important; }

.m20 {
  margin: 20px !important; }

.mt20 {
  margin-top: 20px !important; }

.mr20 {
  margin-right: 20px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.ml20 {
  margin-left: 20px !important; }

.m25 {
  margin: 25px !important; }

.mt25 {
  margin-top: 25px !important; }

.mr25 {
  margin-right: 25px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.ml25 {
  margin-left: 25px !important; }

.m30 {
  margin: 30px !important; }

.mt30 {
  margin-top: 30px !important; }

.mr30 {
  margin-right: 30px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.ml30 {
  margin-left: 30px !important; }

.m35 {
  margin: 35px !important; }

.mt35 {
  margin-top: 35px !important; }

.mr35 {
  margin-right: 35px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.ml35 {
  margin-left: 35px !important; }

.m40 {
  margin: 40px !important; }

.mt40 {
  margin-top: 40px !important; }

.mr40 {
  margin-right: 40px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.ml40 {
  margin-left: 40px !important; }

.m45 {
  margin: 45px !important; }

.mt45 {
  margin-top: 45px !important; }

.mr45 {
  margin-right: 45px !important; }

.mb45 {
  margin-bottom: 45px !important; }

.ml45 {
  margin-left: 45px !important; }

.m50 {
  margin: 50px !important; }

.mt50 {
  margin-top: 50px !important; }

.mr50 {
  margin-right: 50px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.ml50 {
  margin-left: 50px !important; }

.m55 {
  margin: 55px !important; }

.mt55 {
  margin-top: 55px !important; }

.mr55 {
  margin-right: 55px !important; }

.mb55 {
  margin-bottom: 55px !important; }

.ml55 {
  margin-left: 55px !important; }

.m60 {
  margin: 60px !important; }

.mt60 {
  margin-top: 60px !important; }

.mr60 {
  margin-right: 60px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.ml60 {
  margin-left: 60px !important; }

.m65 {
  margin: 65px !important; }

.mt65 {
  margin-top: 65px !important; }

.mr65 {
  margin-right: 65px !important; }

.mb65 {
  margin-bottom: 65px !important; }

.ml65 {
  margin-left: 65px !important; }

.p0 {
  padding: 0 !important; }

.pt0 {
  padding-top: 0 !important; }

.pr0 {
  padding-right: 0 !important; }

.pb0 {
  padding-bottom: 0 !important; }

.pl0 {
  padding-left: 0 !important; }

.p5 {
  padding: 5px !important; }

.pt5 {
  padding-top: 5px !important; }

.pr5 {
  padding-right: 5px !important; }

.pb5 {
  padding-bottom: 5px !important; }

.pl5 {
  padding-left: 5px !important; }

.p10 {
  padding: 10px !important; }

.pt10 {
  padding-top: 10px !important; }

.pr10 {
  padding-right: 10px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pl10 {
  padding-left: 10px !important; }

.p15 {
  padding: 15px !important; }

.pt15 {
  padding-top: 15px !important; }

.pr15 {
  padding-right: 15px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pl15 {
  padding-left: 15px !important; }

.p20 {
  padding: 20px !important; }

.pt20 {
  padding-top: 20px !important; }

.pr20 {
  padding-right: 20px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pl20 {
  padding-left: 20px !important; }

.p25 {
  padding: 25px !important; }

.pt25 {
  padding-top: 25px !important; }

.pr25 {
  padding-right: 25px !important; }

.pb25 {
  padding-bottom: 25px !important; }

.pl25 {
  padding-left: 25px !important; }

.p30 {
  padding: 30px !important; }

.pt30 {
  padding-top: 30px !important; }

.pr30 {
  padding-right: 30px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pl30 {
  padding-left: 30px !important; }

.p35 {
  padding: 35px !important; }

.pt35 {
  padding-top: 35px !important; }

.pr35 {
  padding-right: 35px !important; }

.pb35 {
  padding-bottom: 35px !important; }

.pl35 {
  padding-left: 35px !important; }

.p40 {
  padding: 40px !important; }

.pt40 {
  padding-top: 40px !important; }

.pr40 {
  padding-right: 40px !important; }

.pb40 {
  padding-bottom: 40px !important; }

.pl40 {
  padding-left: 40px !important; }

.p45 {
  padding: 45px !important; }

.pt45 {
  padding-top: 45px !important; }

.pr45 {
  padding-right: 45px !important; }

.pb45 {
  padding-bottom: 45px !important; }

.pl45 {
  padding-left: 45px !important; }

.p50 {
  padding: 50px !important; }

.pt50 {
  padding-top: 50px !important; }

.pr50 {
  padding-right: 50px !important; }

.pb50 {
  padding-bottom: 50px !important; }

.pl50 {
  padding-left: 50px !important; }

.p55 {
  padding: 55px !important; }

.pt55 {
  padding-top: 55px !important; }

.pr55 {
  padding-right: 55px !important; }

.pb55 {
  padding-bottom: 55px !important; }

.pl55 {
  padding-left: 55px !important; }

.p60 {
  padding: 60px !important; }

.pt60 {
  padding-top: 60px !important; }

.pr60 {
  padding-right: 60px !important; }

.pb60 {
  padding-bottom: 60px !important; }

.pl60 {
  padding-left: 60px !important; }

.p65 {
  padding: 65px !important; }

.pt65 {
  padding-top: 65px !important; }

.pr65 {
  padding-right: 65px !important; }

.pb65 {
  padding-bottom: 65px !important; }

.pl65 {
  padding-left: 65px !important; }

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

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

@-webkit-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); } }

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

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

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

@keyframes flash {
  0%,
  50%,
  100% {
    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 {
  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); } }

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

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

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

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

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

@-webkit-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(0deg);
    transform: rotate(0deg); } }

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

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

@-webkit-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); } }

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

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-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%); } }

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

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

@-webkit-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); } }

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

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

@-webkit-keyframes bounceInDown {
  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); } }

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

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

@-webkit-keyframes bounceInLeft {
  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); } }

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

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

@-webkit-keyframes bounceInRight {
  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); } }

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

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

@-webkit-keyframes bounceInUp {
  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); } }

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

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

@-webkit-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); } }

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

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

@-webkit-keyframes bounceOutDown {
  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); } }

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

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

@-webkit-keyframes bounceOutLeft {
  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); } }

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

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

@-webkit-keyframes bounceOutRight {
  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); } }

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

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

@-webkit-keyframes bounceOutUp {
  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); } }

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

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

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

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

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

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@-webkit-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; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-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);
    -ms-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);
    -ms-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);
    -ms-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);
    -ms-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; } }

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

@-webkit-keyframes flipInX {
  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(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

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

@-webkit-keyframes flipInY {
  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(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

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

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

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

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

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

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

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

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

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) 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 {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

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

@-webkit-keyframes rotateInDownLeft {
  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; } }

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

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

@-webkit-keyframes rotateInDownRight {
  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; } }

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

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

@-webkit-keyframes rotateInUpLeft {
  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; } }

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

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

@-webkit-keyframes rotateInUpRight {
  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; } }

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

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

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

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

@-webkit-keyframes rotateOutDownLeft {
  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; } }

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

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

@-webkit-keyframes rotateOutDownRight {
  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; } }

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

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

@-webkit-keyframes rotateOutUpLeft {
  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; } }

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

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

@-webkit-keyframes rotateOutUpRight {
  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; } }

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@-webkit-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; } }

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-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);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-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);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-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);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-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);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

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

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

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

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

body {
  overflow-x: hidden;
  height: 100%;
  width: 100%; }

.in-down {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

.in-left {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-duration: 1s;
  animation-delay: 1s; }

@-webkit-keyframes slideInWidth {
  0% {
    width: 0; }
  100% {
    width: 100%; } }

@keyframes slideInWidth {
  0% {
    width: 0; }
  100% {
    width: 100%; } }

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

@-webkit-keyframes slideInHieght {
  0% {
    height: 0; }
  100% {
    height: auto; } }

@keyframes slideInHieght {
  0% {
    height: 0; }
  100% {
    height: auto; } }

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

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  transition: .3s ease-out; }
  .waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease-out;
    transition-property: transform, opacity;
    transform: scale(0);
    pointer-events: none; }
  .waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45); }
  .waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7); }
  .waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7); }
  .waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7); }
  .waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7); }
  .waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7); }
  .waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7); }
  .waves-effect input[type="button"], .waves-effect input[type="reset"], .waves-effect input[type="submit"] {
    border: 0;
    font-style: normal;
    font-size: inherit;
    text-transform: inherit;
    background: none; }
  .waves-effect img {
    position: relative;
    z-index: -1; }

.waves-notransition {
  transition: none !important; }

.waves-circle {
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom; }
  .waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1; }

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  -webkit-mask-image: none; }

.waves-block {
  display: block; }

/* Firefox Bug: link not triggered */
.waves-effect .waves-ripple {
  z-index: -1; }

.tab-container {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  padding: 0 100px; }
  .tab-container.sticky {
    position: fixed;
    left: 0;
    top: 73px;
    right: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); }
  .tab-container .tab-list {
    display: flex;
    justify-content: center; }
  .tab-container a {
    position: relative;
    opacity: 0.85;
    padding: 20px 0;
    text-decoration: none;
    text-align: center;
    margin: 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: #525252;
    font-weight: 500; }
    .tab-container a.active {
      color: #EE2E35;
      font-weight: 600; }
      .tab-container a.active::after {
        width: 100%;
        transition: all 0.3s ease-in-out; }
    .tab-container a::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      top: 100%;
      left: 0;
      background-color: #EE2E35; }
  @media only screen and (max-width: 1336px) {
    .tab-container {
      padding: 0 100px; }
      .tab-container .link {
        font-size: 12px;
        margin: 0 12px; } }

/**/
.tab-link-container {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  padding: 0 100px; }
  .tab-link-container.sticky {
    position: fixed;
    left: 0;
    top: 66px;
    right: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); }
  .tab-link-container .tab-link-list {
    display: flex;
    justify-content: center; }
  .tab-link-container a {
    position: relative;
    opacity: 0.85;
    padding: 20px 0;
    text-decoration: none;
    text-align: center;
    margin: 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: #525252;
    font-weight: 500; }
    .tab-link-container a.active {
      opacity: 1;
      color: #162028;
      font-weight: 600; }
      .tab-link-container a.active::after {
        width: 100%;
        transition: all 0.4s ease-in-out; }
    .tab-link-container a::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      top: 100%;
      left: 0;
      background-color: #162028; }
    .tab-link-container a:hover {
      color: #162028;
      font-weight: 500;
      opacity: 1; }
      .tab-link-container a:hover::after {
        width: 100%;
        transition: all 0.4s ease-in-out; }
  @media only screen and (max-width: 1336px) {
    .tab-link-container {
      padding: 0 15px; }
      .tab-link-container .link {
        font-size: 14px;
        margin: 0 18px;
        padding: 12px 0; } }

.banner-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 66px; }
  .banner-container .banner-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .banner-container .banner-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: scale 5s ease-in-out; }
    .banner-container .banner-image::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(33, 37, 45, 0.2); }
    .banner-container .banner-image .image {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .banner-container .banner-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 66%; }
    .banner-container .banner-content.banner-full {
      width: 100%; }
    .banner-container .banner-content.banner-bottom {
      transform: unset;
      left: 80px;
      bottom: 80px;
      top: unset;
      text-align: left;
      width: 50%; }
    .banner-container .banner-content .title-banner {
      font-family: 'Source Serif Pro';
      font-weight: 500;
      font-size: 48px;
      line-height: 58px;
      color: #ffffff;
      padding-top: 20px;
      letter-spacing: 0.06em;
      text-transform: uppercase; }
    .banner-container .banner-content .sub-title-banner {
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #ffffff; }
      .banner-container .banner-content .sub-title-banner:hover a {
        text-decoration: underline; }
      .banner-container .banner-content .sub-title-banner a {
        color: inherit; }

.banner-general .banner-image {
  height: 400px !important; }

.center-title {
  position: relative;
  font-size: 32px;
  line-height: 44px;
  color: #162028;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 10px; }
  .center-title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    bottom: 0;
    background-color: #EE2E35; }

.center-title-white {
  position: relative;
  font-size: 32px;
  line-height: 44px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 10px; }
  .center-title-white::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    bottom: 0;
    background-color: #ffffff; }

.custom-row {
  align-items: center; }

.title-under {
  display: flex;
  justify-content: center; }

/*Pagination*/
.work-pagination {
  margin-top: 20px; }

.paginationjs-pages ul {
  display: flex;
  padding: 0;
  justify-content: center;
  list-style: none;
  flex-wrap: nowrap;
  margin-bottom: 0; }

.paginationjs-pages li {
  margin: 0 4px; }

.paginationjs-pages a {
  width: 38px;
  height: 38px;
  display: block;
  display: table;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: #525252;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  border: none;
  text-decoration: none; }

@media only screen and (max-width: 475px) {
  .paginationjs-pages li {
    margin: 0 3px; }
  .paginationjs-pages a {
    width: 34px;
    height: 34px; } }

.paginationjs-pages li.paginationjs-prev a {
  position: relative;
  border: 1px solid #DEDEDE;
  color: #525252;
  visibility: hidden; }
  .paginationjs-pages li.paginationjs-prev a:after {
    position: absolute;
    content: "\e910";
    font-family: "icomoon";
    font-size: 14px;
    visibility: visible;
    border: 1px solid #DEDEDE;
    color: #525252;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0; }

.paginationjs-pages li.paginationjs-next a {
  position: relative;
  border: 1px solid #DEDEDE;
  color: #525252;
  visibility: hidden; }
  .paginationjs-pages li.paginationjs-next a:after {
    position: absolute;
    content: "\e90f";
    font-family: "icomoon";
    font-size: 14px;
    visibility: visible;
    border: 1px solid #DEDEDE;
    color: #525252;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0; }
  .paginationjs-pages li.paginationjs-next a li.paginationjs-ellipsis a {
    background-color: transparent;
    color: #fff; }

.paginationjs-pages li.active a {
  background: #162028;
  border: 1px solid #162028;
  color: #fff; }

/* PLugin Chat */
.zalo-chat-widget {
  bottom: 100px !important;
  right: 25px !important; }
  .zalo-chat-widget iframe {
    min-height: 66vh !important;
    min-width: 375px !important; }

.bg-custom {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 !important;
  width: 100%;
  z-index: 99;
  text-align: center;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06) !important; }

.navbar-brand {
  padding: 0; }
  .navbar-brand img {
    max-width: 100%;
    height: 58px;
    object-fit: contain; }

.box-language {
  margin-left: 60px !important; }
  .box-language .nav-item {
    display: flex;
    justify-content: flex-end;
    padding: 0 !important; }
    @media only screen and (max-width: 991px) {
      .box-language .nav-item {
        justify-content: center; } }
    .box-language .nav-item .nav-link {
      margin: 0 6px;
      display: flex; }
      .box-language .nav-item .nav-link img {
        border-right: 1px solid rgba(255, 255, 255, 0.45);
        height: auto;
        min-width: 26px;
        width: 100%; }
      .box-language .nav-item .nav-link:last-child {
        margin-right: 0; }
        .box-language .nav-item .nav-link:last-child img {
          border-right: none; }
      .box-language .nav-item .nav-link.active {
        border: 1px solid #DEDEDE;
        padding: 4px 4px 4px 5px !important;
        border-radius: 2px; }

.nav-item {
  padding: 22px 20px; }
  .nav-item:hover .dropdown-mega {
    height: auto;
    visibility: visible;
    opacity: 1;
    top: 100%;
    transition: all .5s ease-in-out;
    z-index: 1; }
  .nav-item.active {
    background-color: rgba(38, 38, 38, 0.05); }
    .nav-item.active .nav-link {
      font-weight: 600; }
  @media (min-width: 768px) {
    .nav-item.active a::before {
      width: 100%; }
    .nav-item.active a:after {
      visibility: visible;
      opacity: 1; } }
  .nav-item .nav-link {
    color: black !important;
    font-size: 13px;
    line-height: 22px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 !important; }
    .nav-item .nav-link .icon {
      width: 20px;
      height: 20px; }

.navbar-toggler {
  padding: 0;
  border: none !important;
  outline: none !important;
  transform: scale(0.5); }

.navbar-toggler-landing {
  padding: 0;
  border: none !important;
  outline: none !important;
  transform: scale(0.5);
  background: transparent; }
  @media (min-width: 768px) {
    .navbar-toggler-landing {
      display: none; } }

#nav-icon {
  width: 60px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer; }

#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #162028;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out; }

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center; }

#nav-icon span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center; }

#nav-icon span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  width: 70%;
  left: auto;
  right: 0; }

.show-menu-landing #nav-icon span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px; }

.show-menu-landing #nav-icon span:nth-child(2) {
  width: 0%;
  opacity: 0; }

.show-menu-landing #nav-icon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
  width: 100%; }

.show-menu-landing #nav-icon span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px; }

.show-menu #nav-icon span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px; }

.show-menu #nav-icon span:nth-child(2) {
  width: 0%;
  opacity: 0; }

.show-menu #nav-icon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
  width: 100%; }

@media only screen and (max-width: 1365px) {
  .dropdown-mega {
    left: 100px;
    right: 100px; } }

@media only screen and (max-width: 1129px) {
  .nav-item {
    padding: 0 15px; }
  .dropdown-mega {
    left: 80px;
    right: 80px; } }

@media only screen and (max-width: 1090px) {
  .nav-item {
    padding: 0 15px; }
  .dropdown-mega {
    left: 80px;
    right: 80px; } }

@media only screen and (max-width: 1024px) {
  .nav-item {
    padding: 0 15px; } }

@media only screen and (max-width: 992px) {
  .nav-item {
    padding: 0 10px; }
  .dropdown-mega {
    left: 30px;
    right: 30px; } }

@media only screen and (max-width: 780px) {
  .nav-item {
    padding: 0 5px; }
  .dropdown-mega {
    display: none; } }

@media only screen and (max-width: 767px) {
  .wrapper .banner-container {
    padding-top: 68px !important; }
  .bg-custom {
    padding: 8px 0 !important; }
    .bg-custom .nav-item a {
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: 700;
      padding: 0px 1rem; }
    .bg-custom .order-0 {
      flex: 1;
      display: flex;
      width: 100%;
      padding-bottom: 6px; }
      .bg-custom .order-0 .navbar-brand {
        margin-left: 0 !important;
        padding: 0; }
  .show-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    overflow-y: hidden; }
    .show-menu .bg-custom {
      height: auto;
      overflow: auto;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      padding-bottom: 0px;
      overflow-x: hidden; }
      .show-menu .bg-custom .collapse {
        display: block;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 74px;
        background: #fff;
        padding: 15px 15px; }
      .show-menu .bg-custom .order-1 {
        flex: 0; }
      .show-menu .bg-custom .order-0 {
        position: relative;
        flex: none;
        display: flex; }
        .show-menu .bg-custom .order-0:before {
          width: calc(100vw - 1px);
          left: -15px;
          bottom: 0;
          height: 1px;
          background-color: rgba(255, 255, 255, 0.1);
          content: "";
          position: absolute; }
        .show-menu .bg-custom .order-0 .navbar-brand {
          margin-left: 0 !important; }
      .show-menu .bg-custom .box-language {
        width: 100%;
        line-height: 50px;
        text-align: center;
        margin-left: 0 !important; }
      .show-menu .bg-custom .nav-item {
        padding: 16px 0; } }

@media only screen and (max-width: 414px) {
  padding-bottom: 60px; }

@media only screen and (max-width: 991px) {
  .menu-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 15px 0 15px !important; }
    .menu-container > .mx-auto {
      display: flex !important;
      width: 100% !important; }
  .navbar-brand {
    text-align: left !important;
    width: 100% !important; }
  .navbar-expand-md .navbar-collapse {
    display: none !important;
    padding-top: 20px; }
  .show-menu {
    overflow-y: hidden; }
  .show-menu .bg-custom .collapse {
    display: block !important;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 68px;
    background: #fff;
    padding: 15px 15px;
    opacity: 1;
    visibility: visible; }
  .navbar-expand-md .navbar-toggler {
    display: block !important; }
  .bg-custom {
    padding: 8px 0 !important; }
    .bg-custom .collapse {
      opacity: 0;
      visibility: hidden;
      transition: 0.4s all; }
  .banner-container {
    padding-top: 74px !important; }
  .navbar-expand-md .navbar-nav {
    height: auto;
    flex-direction: column !important; }
    .navbar-expand-md .navbar-nav .nav-item {
      padding: 16px 0; }
      .navbar-expand-md .navbar-nav .nav-item.active .nav-link {
        color: black !important; }
    .navbar-expand-md .navbar-nav .nav-link {
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 700;
      padding: 0px 1rem; }
      .navbar-expand-md .navbar-nav .nav-link:before {
        display: none; }
      .navbar-expand-md .navbar-nav .nav-link:after {
        display: none; }
  .dropdown-mega {
    display: none; }
  .box-language {
    margin-left: 0 !important; }
    .box-language .nav-item {
      padding: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1); } }

@media (min-width: 991px) {
  .navbar-expand-md .navbar-nav {
    align-items: center !important; }
  .box-language {
    align-items: unset !important; } }

.footer-container {
  padding-top: 40px;
  background-color: #162028; }
  .footer-container .logo-footer-container {
    margin-bottom: 35px; }
  .footer-container .logo-footer img {
    max-width: 100%;
    height: 58px;
    object-fit: contain; }
  .footer-container .quick-link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 20px; }
  .footer-container .footer-link {
    display: flex;
    flex-wrap: wrap; }
    .footer-container .footer-link li {
      width: 33.33%;
      padding-bottom: 15px; }
      .footer-container .footer-link li a {
        font-size: 14px;
        line-height: 24px;
        color: #ffffff;
        opacity: .65;
        transition: 0.3s all !important; }
        .footer-container .footer-link li a:hover {
          opacity: 1; }
  .footer-container .footer-infor {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    opacity: .65; }
    .footer-container .footer-infor p {
      font-size: 14px;
      line-height: 24px;
      color: #ffffff; }
      .footer-container .footer-infor p a {
        color: inherit; }
    .footer-container .footer-infor i {
      font-size: 16px;
      color: #ffffff;
      margin-right: 12px;
      margin-top: 5px; }
  .footer-container .copyright-container {
    padding: 10px 0;
    background-color: #131c23;
    margin-top: 20px; }
    .footer-container .copyright-container .copyright-content {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .footer-container .copyright-container .copyright-content .social {
        display: inherit; }
        .footer-container .copyright-container .copyright-content .social .social-link {
          padding: 10px;
          background-color: #363636;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 15px; }
          .footer-container .copyright-container .copyright-content .social .social-link img {
            min-width: 16px;
            width: 16px;
            height: 16px;
            object-fit: contain;
            transition: 0.3s all; }
          .footer-container .copyright-container .copyright-content .social .social-link:hover img {
            transform: scale(1.1); }
    .footer-container .copyright-container .copyright {
      font-size: 14px;
      line-height: 22px;
      color: #ffffff; }

/* /////////// IMAGE ZOOM /////////// */
@keyframes zoomInImage {
  from {
    transform: scale3d(1, 1, 1);
    transition: 1s; }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
    transition: 1s; } }

.zoomInImage {
  animation-name: zoomInImage; }

.lg-video-cont {
  width: 100% !important;
  max-width: 90vw !important; }

img {
  max-width: 100%; }

.extra-col, .col-2-5 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px; }

.col-2-5 {
  flex: 0 0 19.833333325%;
  max-width: 19.833333325%; }
  @media (max-width: 992px) {
    .col-2-5 {
      flex: 0 0 33.33%;
      max-width: 33.33%; } }
  @media (max-width: 767px) {
    .col-2-5 {
      flex: 0 0 50%;
      max-width: 50%; } }
  @media (max-width: 456px) {
    .col-2-5 {
      flex: 0 0 100%;
      max-width: 100%; } }

@media (min-width: 768px) {
  .container {
    max-width: 920px; } }

@media (min-width: 1200px) {
  .container {
    max-width: 1184px !important; } }

html {
  -webkit-text-size-adjust: none;
  touch-action: manipulation; }

body {
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif; }

.wrapper {
  overflow-x: hidden !important; }

.open {
  overflow-y: hidden; }

.search-open {
  overflow-y: hidden; }

.pp-section {
  height: 100%;
  position: absolute;
  width: 100%;
  backface-visibility: hidden; }

.container-fluid {
  padding-right: 10vw;
  padding-left: 10vw; }

/* /////////// BANNER CONTAINER /////////// */
.home-banner {
  overflow: hidden;
  position: relative;
  height: 100vh; }
  .home-banner .slick-slide {
    height: 100vh; }
  .home-banner .home-slider {
    animation: scale 5s ease-in-out; }
    .home-banner .home-slider .slider-item {
      height: 100vh;
      width: 100%;
      position: relative; }
      .home-banner .home-slider .slider-item::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        top: 0;
        left: 0; }
      .home-banner .home-slider .slider-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .home-banner .home-slider .slider-item .project-content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center; }
        .home-banner .home-slider .slider-item .project-content h1 {
          font-family: 'Source Serif Pro';
          font-weight: 600;
          font-size: 42px;
          line-height: 52px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #FFFFFF;
          text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
          padding-bottom: 40px; }
        .home-banner .home-slider .slider-item .project-content h3 {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: #FFFFFF;
          padding-bottom: 20px; }
        .home-banner .home-slider .slider-item .project-content .btn-banner {
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: #262626;
          background-color: #fff;
          border-radius: 4px;
          padding: 11px 42px;
          transition: 0.4s all; }
          .home-banner .home-slider .slider-item .project-content .btn-banner:hover {
            background-color: #3E596B;
            color: #fff; }
  .home-banner .slide-button-custom {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px; }
    .home-banner .slide-button-custom .slide-arrow {
      width: 46px;
      height: 46px;
      padding: 0;
      border: none;
      border-radius: 4px;
      background-color: #ffffff;
      transition: 0.3s all;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .35; }
      .home-banner .slide-button-custom .slide-arrow i {
        font-size: 20px; }
      .home-banner .slide-button-custom .slide-arrow:hover {
        background-color: #3E596B;
        opacity: 1; }
        .home-banner .slide-button-custom .slide-arrow:hover i {
          color: #ffffff; }
  .home-banner .slick-dots {
    bottom: 25px; }
    .home-banner .slick-dots li {
      width: 28px; }
      .home-banner .slick-dots li button {
        width: 30px; }
    .home-banner .slick-dots li button:before {
      font-family: 'Montserrat';
      position: absolute;
      top: 50%;
      left: 0;
      width: 30px;
      height: 3px;
      transform: translateY(-50%);
      background-color: #ffffff;
      content: '' !important;
      text-align: center;
      opacity: .5;
      border-radius: 4px; }
    .home-banner .slick-dots li.slick-active button:before {
      opacity: 1; }

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

.block-title h2 {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 38px;
  line-height: 48px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #162028;
  margin-bottom: 20px; }

.block-title p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
  margin: 0 auto;
  margin-bottom: 50px;
  max-width: 70%; }

.title-center {
  text-align: center; }

.title-white h2 {
  color: #fff; }

.title-white p {
  color: #fff;
  opacity: .65; }

.title-has-line {
  position: relative; }
  .title-has-line::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 60px;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff; }

/* /////////// SERVICE /////////// */
.home-service {
  padding: 100px 0 80px 0;
  background-color: #F7F5EF; }
  .home-service .service-item {
    display: flex;
    margin-bottom: 30px; }
    .home-service .service-item .service-item-content {
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.05);
      border-radius: 0px 0px 4px 4px; }
      .home-service .service-item .service-item-content img {
        width: 100%;
        height: 182px;
        object-fit: cover; }
      .home-service .service-item .service-item-content h3 {
        padding: 16px 16px 20px 16px;
        font-weight: 600;
        font-size: 16px;
        line-height: 26px;
        color: #162028; }

/* /////////// STRENGTH /////////// */
.home-strength {
  padding: 220px 0 100px 0;
  background-color: #162028;
  position: relative; }
  .home-strength .strength-path {
    position: absolute;
    top: -1px; }
    .home-strength .strength-path img {
      width: 100%;
      height: 100%; }
  .home-strength .strength-item {
    display: flex;
    margin-bottom: 30px; }
    .home-strength .strength-item .strength-item-content {
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.05);
      padding: 30px 25px;
      border-radius: 8px; }
      .home-strength .strength-item .strength-item-content img {
        width: 42px;
        height: 42px;
        object-fit: contain; }
      .home-strength .strength-item .strength-item-content h3 {
        font-weight: 600;
        font-size: 18px;
        line-height: 28px;
        color: #162028;
        padding-top: 20px;
        padding-bottom: 12px; }
      .home-strength .strength-item .strength-item-content p {
        font-size: 14px;
        line-height: 22px;
        color: #162028; }

/* /////////// CUSTOMER /////////// */
.home-customer {
  padding: 100px 0 80px 0; }

.customer-list {
  justify-content: center; }

.customer-item {
  margin-bottom: 30px;
  display: flex;
  flex: 0 0 20%;
  max-width: 20%; }
  .customer-item .customer-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 20px;
    background-color: #ffffff;
    transition: 0.5s all;
    border: 1px solid #DEDEDE;
    border-radius: 4px; }
    .customer-item .customer-item-content:hover {
      box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.1);
      border: 1px solid #ffffff;
      transform: scale(1.2); }
    .customer-item .customer-item-content img {
      width: 100%;
      max-height: 90px;
      object-fit: cover; }

.see-all {
  text-align: center;
  margin-top: 20px; }
  .see-all .btn-all {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #162028; }
    .see-all .btn-all:hover {
      color: #293C49; }
      .see-all .btn-all:hover i {
        padding-left: 15px; }
    .see-all .btn-all i {
      color: #293C49;
      padding-left: 5px;
      transition: 0.4s all; }

.clients-section {
  padding: 50px 0 30px 0; }

.about-row {
  align-items: center; }
  .about-row .about-image {
    height: 380px; }
    .about-row .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.about-content {
  padding-left: 40px; }

.about-title {
  font-family: 'Source Serif Pro';
  font-weight: 500;
  font-size: 38px;
  line-height: 48px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #162028;
  padding-bottom: 20px;
  position: relative; }
  .about-title::before {
    content: url(/assets/images/title-pattern.png);
    position: absolute;
    left: -24px;
    top: -14px; }

.about-des p {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #525252;
  padding-bottom: 15px; }

.history-section {
  padding: 80px 0; }

.orientation-section {
  padding: 80px 0;
  background-color: #162028; }
  .orientation-section .orientation-row {
    flex-direction: row-reverse; }
  .orientation-section .about-title {
    color: #ffffff; }
  .orientation-section .orientation-des p {
    color: #ffffff;
    opacity: .65; }
  .orientation-section .about-content {
    padding-left: 0;
    padding-right: 40px; }
    .orientation-section .about-content .about-title::before {
      content: url(/assets/images/title-pattern-white.png); }

.organization-section {
  padding: 80px 0 40px 0; }
  .organization-section .organization-image img {
    width: 100%; }

.project-section {
  padding: 20px 0 60px 0; }

.project-list .project-item {
  padding: 40px 0; }
  .project-list .project-item:nth-child(even) {
    flex-direction: row-reverse; }

.project-list .project-image img {
  width: 100%;
  height: 350px;
  object-fit: cover; }

.project-list .project-title {
  font-family: 'Source Serif Pro';
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: 0.03em;
  color: #162028;
  padding-bottom: 15px;
  border-bottom: 1px solid #DEDEDE; }
  .project-list .project-title a {
    color: inherit; }
  .project-list .project-title:hover a {
    color: #3E596B; }

.project-list .project-infor {
  padding-bottom: 30px;
  border-bottom: 1px solid #DEDEDE; }
  .project-list .project-infor .project-infor-item {
    margin-top: 25px;
    display: flex; }
    .project-list .project-infor .project-infor-item span {
      font-weight: 500;
      font-size: 16px;
      line-height: 26px;
      color: #525252;
      margin-left: 15px; }
    .project-list .project-infor .project-infor-item i {
      font-size: 22px; }

.project-list .see-detail {
  margin-top: 30px; }
  .project-list .see-detail .btn-detail {
    background-color: #162028;
    border-radius: 4px;
    padding: 10px 20px;
    display: inline-block;
    transition: 0.4s all; }
    .project-list .see-detail .btn-detail span {
      font-weight: 600;
      font-size: 14px;
      line-height: 22px;
      color: #ffffff; }
    .project-list .see-detail .btn-detail i {
      position: relative;
      color: #ffffff;
      margin-left: 8px;
      top: 2px;
      font-size: 18px;
      transition: 0.4s all; }
    .project-list .see-detail .btn-detail:hover {
      background-color: #3E596B; }
      .project-list .see-detail .btn-detail:hover i {
        margin-left: 15px; }

/* PROJECT DETAIL */
.related-section {
  background-color: #F7F5EF;
  padding: 60px 0 40px 0; }

.detail-content {
  width: 80%;
  margin: 0 auto; }

.project-detail {
  padding: 50px 0 50px 0; }

.image-list {
  margin: 0 -15px; }
  .image-list a {
    display: block;
    margin-bottom: 30px; }
    .image-list a img {
      width: 100%;
      height: 280px;
      object-fit: cover; }

.project-information {
  padding-bottom: 40px;
  border-bottom: 1px solid #DEDEDE; }

.project-infor-image {
  padding-top: 50px; }

.detail-paragraph {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #525252;
  padding-bottom: 15px; }

.project-infor-detail {
  padding-top: 25px;
  width: 75%;
  margin: 0 auto; }
  .project-infor-detail .project-infor-item {
    margin-bottom: 25px;
    display: flex;
    align-items: center; }
    .project-infor-detail .project-infor-item .project-infor-label {
      font-weight: 600;
      margin-left: 12px;
      margin-right: 12px; }
    .project-infor-detail .project-infor-item i {
      font-size: 20px; }

.news-section {
  padding: 60px 0 60px 0; }

.related-title h2 {
  margin-bottom: 40px; }

.news-item {
  margin-bottom: 40px; }
  .news-item .news-image {
    overflow: hidden; }
    .news-item .news-image img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: all .5s ease-in-out; }
    .news-item .news-image:hover img {
      transform: scale(1.15) rotate(-3deg); }
  .news-item .news-content {
    margin-top: 20px; }
    .news-item .news-content .news-title {
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #162028;
      margin-bottom: 12px; }
      .news-item .news-content .news-title a {
        color: inherit; }
      .news-item .news-content .news-title:hover a {
        color: #3E596B; }
    .news-item .news-content .news-des {
      font-size: 14px;
      line-height: 22px;
      color: #525252; }

/* DETAIL */
.news-detail {
  padding-top: 106px; }

.detail-page-title {
  font-family: 'Source Serif Pro';
  font-weight: 600;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0.03em;
  color: #162028;
  margin-bottom: 20px; }

.detail-page-infor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #DEDEDE; }
  .detail-page-infor p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #525252; }
  .detail-page-infor .share {
    display: flex;
    align-items: center; }
    .detail-page-infor .share .share-item {
      min-width: 34px;
      width: 34px;
      height: 34px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      background-color: transparent;
      margin-left: 15px;
      transition: .3s all;
      border: 1px solid #DEDEDE;
      cursor: pointer; }
      .detail-page-infor .share .share-item i {
        font-size: 12px; }
      .detail-page-infor .share .share-item .icon-share-facebook {
        color: #1877F2; }
      .detail-page-infor .share .share-item .icon-link {
        color: #525252; }

.detail-no-banner {
  padding: 40px 0; }
  .detail-no-banner p {
    font-size: 16px;
    line-height: 24px;
    color: #525252;
    padding-bottom: 15px; }
    .detail-no-banner p img {
      height: auto; }

.contact-section {
  padding: 50px 0 60px 0; }
  .contact-section .contact-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #162028;
    margin-bottom: 40px;
    text-transform: uppercase; }
  .contact-section .contact-infor-item {
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start; }
    .contact-section .contact-infor-item i {
      font-size: 16px;
      color: #525252;
      margin-right: 12px;
      margin-top: 4px; }
    .contact-section .contact-infor-item p {
      font-size: 16px;
      line-height: 24px;
      color: #525252; }
      .contact-section .contact-infor-item p a {
        color: inherit; }

.form-container .form-item {
  margin-bottom: 20px; }
  .form-container .form-item label {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #525252;
    margin-bottom: 8px; }
  .form-container .form-item .form-control {
    width: 100%;
    background-color: #E0E2E4;
    border-radius: 4px;
    border: none;
    height: 46px;
    padding: 6px 15px;
    color: #162028; }
    .form-container .form-item .form-control:focus, .form-container .form-item .form-control:hover {
      outline: none;
      box-shadow: none;
      border: none; }
  .form-container .form-item button {
    padding: 12px 40px;
    border: none;
    border-radius: 4px;
    background-color: #162028;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
    transition: 0.4s all; }
    .form-container .form-item button:hover {
      background-color: #3E596B; }
  .form-container .form-item textarea {
    height: auto !important; }

.contact-map {
  background-color: #E0E2E4;
  padding: 60px 0; }
  .contact-map .map-container iframe {
    border: 0;
    width: 100%;
    height: 500px; }

.error-page {
  padding-top: 80px; }
  @media only screen and (max-width: 475px) {
    .error-page {
      padding-top: 50px; } }

.error-container {
  padding: 5vh 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }
  .error-container .images {
    padding: 40px; }
    .error-container .images img {
      width: 100%; }
  .error-container .content {
    padding: 20px; }
    .error-container .content h3 {
      font-size: 20px;
      line-height: 28px;
      font-weight: 600;
      color: #162028;
      margin-bottom: 12px; }
    .error-container .content p {
      font-size: 14px;
      line-height: 22px;
      color: #525252;
      margin-bottom: 20px; }
    .error-container .content a {
      padding: 10px 25px;
      border: none;
      background-color: #162028;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #ffffff;
      transition: all .2s ease-in-out;
      text-align: center; }
      .error-container .content a:hover {
        background-color: #3E596B; }
    @media only screen and (max-width: 475px) {
      .error-container .content h3 {
        font-size: 16px;
        line-height: 24px; } }
  @media only screen and (max-width: 992px) {
    .error-container {
      height: auto; }
      .error-container .content {
        padding: 0; } }

/* SCREEN 1200 */
@media only screen and (max-width: 1200px) {
  /* HEADER */
  .box-language {
    margin-left: 30px !important; }
  .nav-item {
    padding: 22px 12px; } }

@media only screen and (max-width: 992px) {
  /* HEADER */
  .box-language {
    margin-left: 0 !important; }
    .box-language .nav-item .nav-link {
      padding: 4px 4px 4px 5px !important;
      display: flex; }
      .box-language .nav-item .nav-link:first-child {
        margin-left: 0; }
  /* HOME */
  .customer-item {
    flex: 0 0 25%;
    max-width: 25%; } }

/* SCREEN 768 */
@media only screen and (max-width: 768px) {
  /* COMMON*/
  .block-title h2 {
    font-size: 28px;
    line-height: 38px; }
  .block-title p {
    font-size: 14px;
    line-height: 22px;
    max-width: 100%; }
  /* HOME */
  .customer-item {
    flex: 0 0 33.33%;
    max-width: 33.33%; }
  /* Banner General */
  .banner-container .banner-content .title-banner {
    font-size: 32px;
    line-height: 42px; } }

/* SCREEN 767 */
@media only screen and (max-width: 767px) {
  .navbar-brand img {
    height: 52px; } }

/* SCREEN 475 */
@media only screen and (max-width: 475px) {
  /* HOME */
  .home-banner {
    height: 100vh; }
    .home-banner .slick-slide {
      height: 100vh; }
    .home-banner .home-slider .slider-item {
      height: 100vh; }
      .home-banner .home-slider .slider-item .project-content {
        width: 70%; }
        .home-banner .home-slider .slider-item .project-content h1 {
          font-size: 28px;
          line-height: 38px;
          padding-bottom: 30px; }
        .home-banner .home-slider .slider-item .project-content h3 {
          padding-bottom: 12px; }
    .home-banner .slide-button-custom {
      padding: 0 10px; }
      .home-banner .slide-button-custom .slide-arrow {
        width: 40px;
        height: 40px; }
  .home-customer {
    padding: 40px 0 20px 0; }
  .customer-item {
    flex: 0 0 50%;
    max-width: 50%; }
  .home-service {
    padding: 40px 0 20px 0; }
  .home-strength {
    padding: 100px 0 20px 0; }
    .home-strength .strength-path {
      top: -7px; }
  .title-has-line::before {
    height: 40px;
    top: -60px; }
  /* FOOTER */
  .footer-container .menu-footer {
    display: none; }
  .footer-container .copyright-container .copyright-content {
    flex-direction: column; }
  .footer-container .copyright-container .copyright {
    padding-bottom: 15px; }
  /* TAB OTHER PAGE*/
  .tab-link-container {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
    padding: 6px 15px; }
    .tab-link-container.sticky {
      position: relative;
      left: unset;
      top: unset;
      right: unset;
      z-index: 1; }
    .tab-link-container .tab-link-list {
      display: flex;
      justify-content: center;
      flex-direction: column; }
    .tab-link-container a {
      padding: 5px 0;
      font-size: 16px;
      line-height: 24px;
      color: #525252;
      font-weight: 500;
      text-align: left; }
      .tab-link-container a.active {
        color: #162028;
        font-weight: 600; }
        .tab-link-container a.active::after {
          width: 0; }
      .tab-link-container a::after {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        top: 100%;
        left: 0;
        background-color: #162028; }
    .tab-link-container .link {
      font-size: 14px;
      margin: 2px 0;
      padding: 8px 0; }
  /* Banner General */
  .banner-container .banner-content {
    top: 56%; }
    .banner-container .banner-content .title-banner {
      font-size: 28px;
      line-height: 38px;
      padding-bottom: 30px; }
    .banner-container .banner-content .sub-title-banner {
      font-size: 14px;
      line-height: 22px; } }

/* SCREEN 992 */
@media only screen and (max-width: 992px) {
  .about-row {
    flex-direction: column-reverse; }
  .about-content {
    padding-left: 0; }
  .orientation-section .orientation-row {
    flex-direction: column-reverse; }
  .about-content {
    padding-bottom: 20px; } }

/* SCREEN 768 */
@media only screen and (max-width: 768px) {
  .history-section {
    padding: 40px 0; }
  .orientation-section {
    padding: 40px 0; }
  .about-title {
    font-size: 28px;
    line-height: 38px; }
  .organization-section {
    padding: 40px 0 20px 0; }
  .about-row .about-image {
    height: 300px; } }

/* SCREEN 475 */
@media only screen and (max-width: 475px) {
  .about-row .about-image {
    height: 220px; } }

/* SCREEN 992 */
@media only screen and (max-width: 992px) {
  /* PROJECT DETAIL */
  .project-infor-detail {
    width: 100%; } }

/* SCREEN 475 */
@media only screen and (max-width: 475px) {
  .project-section {
    padding: 10px 0 40px 0; }
  .project-list .project-item {
    padding: 20px 0; }
  .project-list .project-image img {
    height: 220px; }
  .project-list .project-title {
    font-size: 28px;
    line-height: 38px;
    padding-top: 20px; }
  .project-list .project-infor {
    padding-bottom: 20px; }
    .project-list .project-infor .project-infor-item {
      margin-top: 15px; }
      .project-list .project-infor .project-infor-item span {
        font-size: 14px;
        line-height: 22px;
        margin-left: 15px; }
      .project-list .project-infor .project-infor-item i {
        font-size: 18px; }
  .project-list .see-detail {
    margin-top: 20px; }
  .detail-content {
    width: 100%; }
  /* PROJECT DETAIL */
  .about-title {
    font-size: 28px;
    line-height: 38px; }
    .about-title::before {
      display: none; }
  .project-detail {
    padding: 30px 0; }
  .project-infor-detail {
    padding-top: 10px; }
  .project-information {
    padding-bottom: 10px; }
  .project-infor-image {
    padding-top: 30px; }
  .image-list a {
    margin-bottom: 20px; }
  .related-section {
    padding: 30px 0 20px 0; }
    .related-section .block-title h2 {
      margin-bottom: 0; } }

/* SCREEN 1200 */
@media only screen and (max-width: 1200px) {
  .news-item .news-image img {
    height: 180px; } }

/* SCREEN 992 */
@media only screen and (max-width: 992px) {
  .news-section {
    padding: 40px 0 40px 0; }
  .news-item .news-image img {
    height: 250px; } }

/* SCREEN 768 */
@media only screen and (max-width: 768px) {
  .news-item {
    margin-bottom: 30px; }
    .news-item .news-image img {
      height: 220px; } }

/* SCREEN 767 */
@media only screen and (max-width: 767px) {
  .detail-content {
    width: 100%; }
  .detail-no-banner {
    padding: 20px 0; }
  .detail-page-title {
    font-size: 26px;
    line-height: 35px; }
  .detail-page-infor p {
    font-size: 14px;
    line-height: 22px; } }

/* SCREEN 475 */
@media only screen and (max-width: 475px) {
  .news-section {
    padding: 30px 0 40px 0; }
  .news-item .news-image img {
    height: 220px; }
  .related-section .related-title h2 {
    margin-bottom: 20px; }
  .detail-page-infor {
    display: block; }
    .detail-page-infor .share {
      margin-top: 12px; }
  .detail-no-banner p {
    font-size: 14px;
    line-height: 22px; } }

/* SCREEN 475 */
@media only screen and (max-width: 475px) {
  .contact-section {
    padding: 30px 0; }
    .contact-section .contact-title {
      margin-bottom: 30px; }
    .contact-section .contact-infor-item {
      margin-bottom: 20px; }
      .contact-section .contact-infor-item i {
        font-size: 14px;
        color: #525252;
        margin-right: 8px;
        margin-top: 4px; }
      .contact-section .contact-infor-item p {
        font-size: 14px;
        line-height: 22px; }
  .contact-map {
    padding: 30px 0; }
    .contact-map .map-container iframe {
      height: 350px; } }