@font-face {
  font-family: MyriadRegular;
  src: url("../fonts/MyriadPro-Regular.otf");
}

@font-face {
  font-family: MyriadBold;
  src: url("../fonts/MyriadPro-Bold.otf");
}

@font-face {
  font-family: MyriadSemiBold;
  src: url("../fonts/MyriadPro-Semibold.otf");
}

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

html {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: MyriadRegular;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  vertical-align: top;
  outline: 0;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: none;
}

a:focus,
button:focus {
  outline: 0;
  outline: -webkit-focus-ring-color auto 0;
  outline-offset: 0;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: top;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

table {
  border-collapse: collapse;
}

iframe {
  border: none;
  vertical-align: top;
}

li,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
  vertical-align: top;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input:focus::-webkit-input-placeholder,
input:focus:-moz-placeholder,
input:focus::-moz-placeholder,
input:focus:-ms-input-placeholder {
  color: transparent;
}

input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
  cursor: pointer;
}

input[type="search"] {
  box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button,
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
  cursor: pointer;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1.2;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1,
h2,
h3 {
  line-height: 1.3;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.2857em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.9375em;
}

h6 {
  font-size: 0.786em;
}

p {
  line-height: 1.6;
  margin: 3px 0 15px;
}

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

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1100px;
  }
}

img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.col-20,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}

.col-20,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-11 {
  width: 91.66666667%;
}

.col-xs-10 {
  width: 83.33333333%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-8 {
  width: 66.66666667%;
}

.col-xs-7 {
  width: 58.33333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-4 {
  width: 33.33333333%;
}

.col-xs-3 {
  width: 25%;
}

.col-20 {
  width: 20%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.col-xs-1 {
  width: 8.33333333%;
}

@media (min-width: 768px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
}

@media (min-width: 992px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}

@media (min-width: 1200px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

@font-face {
  font-family: "rockwell_condensed";
  src: url("../fonts/Rockwell-CondensedBold.woff2") format("woff2"),
    url("../fonts/Rockwell-CondensedBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS Utilities CSS Documentation:
----------------------------------------------------------------
1.0 Clearing
2.0 Margin Padding
3.0 Centering Layout
4.0 Component
  4.1 Button
  4.2 Font
  4.3 Modal Popup
  4.4 Back to Top
  4.5 Social Share
5.0 Utilities
  5.1 Gradient
--------------------------------------------------------------*/
.clearfix:after,
.clearfix:before,
.row:after,
.row:before {
  display: table;
  content: "";
  line-height: 0;
}

.clearfix:after,
.row:after {
  clear: both;
}

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

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

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

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

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

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

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

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

.display-table {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.display-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}

.center {
  float: none !important;
  margin: 0 auto !important;
  text-align: center;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
  text-align: center;
}

.btn {
  transition: all 0.3s ease;
}

.btn-blue {
  background: #4797bf;
  color: #ffffff;
  padding: 6px 10px;
}

.btn-blue:hover,
.btn-blue:focus {
  color: #ffffff;
}

.btn-white {
  background: 0 0;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 12px 35px;
  border-radius: 0px;
  text-transform: capitalize;
}

.btn-white:hover,
.btn-white:focus {
  background: #ffffff;
  color: #000000;
  cursor: pointer;
}

.btn-big {
  padding: 6px 25px;
  letter-spacing: 5px;
  font-weight: 600;
}

.btn-small {
  padding: 4px 20px;
}

a {
  transition: all 0.2s ease;
}

.text {
  font-size: 20px;
  color: #ffffff;
}

@media (max-width: 768px) {
  .text {
    font-size: 17px;
  }
}

.text--white {
  color: #ffffff;
}

.text--yellow {
  color: #ffff00;
}

.text--black {
  color: #000000;
}

.text--lightblack {
  color: #616161;
}

.text--bigger {
  font-size: 25px;
}

.text--smaller {
  font-size: 12px;
}

.text--bold {
  font-weight: bold;
}

.text--title {
  font-size: 25px;
  font-weight: bold;
}

.text__top {
  margin-top: -250px !important;
  transition: all 0.5s ease;
}

@media (max-width: 768px) {
  .text__top {
    margin-top: -60vw;
  }
}

.text__inner {
  background: rgba(75, 123, 128, 0.8);
  padding: 10px;
  border-radius: 10px;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

[role="button"] {
  cursor: pointer;
}

.modal-open {
  overflow: hidden;
}

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.fade .modal-dialog {
  transform: translate(0, -25%);
  transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.42857143;
}

.modal-body {
  position: relative;
  padding: 15px;
}

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}

.clearfix:after,
.modal-header:after,
.modal-footer:after {
  clear: both;
}

.backtop {
  position: fixed;
  bottom: 10px;
  right: 5px;
  z-index: 9999;
  opacity: 0;
  transition: all 0.4s ease;
}

@media (min-width: 768px) {
  .backtop {
    bottom: 25px;
    right: 15px;
  }
}

.backtop span {
  color: #ffffff;
  font-size: 11px;
  text-align: center;
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .backtop span {
    display: none;
  }
}

.backtop__link {
  margin: auto;
  width: 36px;
  height: 36px;
  padding: 6px 8px;
  background: #ffffff;
  border-radius: 30px;
  color: #000;
  border: 0px solid #000;
  display: block;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.backtop__link:hover {
  background: #4797bf;
}

.backtop.show {
  opacity: 1;
}

.social {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 99;
}

@media (max-width: 768px) {
  .social {
    right: 0;
    left: 0;
    text-align: center;
    margin: auto;
    top: 5px;
  }
}

.social__item {
  margin: 0px 5px;
}

.social__item img {
  width: 25px;
}

@media (max-width: 768px) {
  .social__item img {
    width: 20px;
  }
}

.hidden {
  display: none !important;
}

.italic {
  font-style: italic;
}

.container__full {
  height: 100%;
}

.full__height {
  height: 100vh !important;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-embed__link {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background: #4797bf;
}

.video-embed iframe,
.video-embed object,
.video-embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.overlay__black {
  background: rgba(0, 0, 0, 0);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(0, 0, 0, 0)),
    color-stop(37%, rgba(0, 0, 0, 0.6)),
    color-stop(47%, rgba(0, 0, 0, 0.66)),
    color-stop(100%, black)
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 37%,
    rgba(0, 0, 0, 0.66) 47%,
    black 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}

.overlay__halfblack {
  background: rgba(0, 0, 0, 0.5);
}

.overlay__radial--black {
  background: rgba(255, 255, 255, 0);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 0%,
    black 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=1 );
}

.overlay__grey {
  background: rgba(209, 209, 209, 0.6);
}

.parallax {
  width: 100%;
  position: absolute;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  background-attachment: fixed;
}

.scrollSlide {
  left: 100% !important;
  top: 0;
}

.scrollDown {
  left: 0;
  top: 100% !important;
}

.moveLeft {
  left: -100% !important;
}

.pushRight {
  left: 0 !important;
}

.moveRight {
  left: 100% !important;
}

.moveDown {
  top: 0 !important;
}

.moveUp {
  top: -100% !important;
}

.pushDown {
  top: 100% !important;
}

.display {
  opacity: 1 !important;
}

.hide {
  opacity: 0 !important;
}

.zTop {
  z-index: 100;
}

.fixed {
  position: fixed !important;
}

.strong {
  font-weight: bold;
}

.vhide {
  visibility: hidden;
}

.pagefull {
  background-position: 50% 100%;
}

#preloader {
  overflow: hidden;
  background: linear-gradient(
    0deg,
    #62b8cc 61.38%,
    #50afc4 75.67%,
    #36a1b7 100%
  );
  height: 100%;
  width: 100%;
  z-index: 999999;
  position: fixed;
  bottom: 0;
}

#preloader .wrapper {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

#preloader .wrapper__content {
  width: 400px;
  margin: auto;
}

@media (max-width: 768px) {
  #preloader .wrapper__content {
    width: 300px;
  }
}

.spinner {
  margin: auto;
  width: 66px;
  height: 66px;
  animation: contanim 2s linear infinite;
}

.spinner svg {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transform: rotate(-90deg);
}

.spinner svg:nth-child(1) circle {
  stroke: #1e193d;
  stroke-dasharray: 1, 300;
  stroke-dashoffset: 0;
  animation: strokeanim 3s calc(0.2s * (1)) ease infinite;
  transform-origin: center center;
}

.spinner svg:nth-child(2) circle {
  stroke: #e0d8c0;
  stroke-dasharray: 1, 300;
  stroke-dashoffset: 0;
  animation: strokeanim 3s calc(0.2s * (2)) ease infinite;
  transform-origin: center center;
}

.spinner svg:nth-child(3) circle {
  stroke: #f2b120;
  stroke-dasharray: 1, 300;
  stroke-dashoffset: 0;
  animation: strokeanim 3s calc(0.2s * (3)) ease infinite;
  transform-origin: center center;
}

.spinner svg:nth-child(4) circle {
  stroke: #e36647;
  stroke-dasharray: 1, 300;
  stroke-dashoffset: 0;
  animation: strokeanim 3s calc(0.2s * (4)) ease infinite;
  transform-origin: center center;
}

@keyframes strokeanim {
  0% {
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 120, 300;
    stroke-dashoffset: -58.548324585;
  }
  100% {
    stroke-dasharray: 120, 300;
    stroke-dashoffset: -175.6449737549;
  }
}

@keyframes contanim {
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS Main CSS Documentation:
----------------------------------------------------------------
1.0 Page
2.0 Cover
3.0 Custom
--------------------------------------------------------------*/
.picturefill-background {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: 50% 100% !important;
  /* padding: 0 200px; */
}

.page {
  position: relative;
}

.page__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 768px) {
  .page__4 .text__top {
    margin-top: -10vw;
  }
}

@media (max-width: 768px) {
  .page__4 .text__top {
    margin-top: -70vw;
  }
}

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

@media (min-width: 768px) {
  .page__6 .title {
    margin-top: -20vw;
    font-size: 2em;
  }
}

@media (max-width: 768px) {
  .page__6 .title {
    margin-top: -40vw;
  }
}

.page__11 h3 {
  color: #ffffff;
}

@media (min-width: 768px) {
  .page__12 .title {
    font-size: 1.8em;
    margin-top: -10vw;
  }
}

@media (min-width: 768px) {
  .page__20 .text,
  .page__21 .text {
    font-size: 18px;
  }
}

.page__25 .text {
  font-size: 22px;
}

.page__26 .content {
  text-align: left;
  margin-top: -20vw;
  margin-left: -6vw;
  font-size: 1.3em;
}

@media (max-width: 768px) {
  .page__26 .content {
    text-align: left;
    margin-top: -80vw;
    margin-left: 0;
    font-size: 1em;
  }
}

.page__26 .content h1 {
  color: #73382b;
}

.page__32 .content {
  color: #73382b;
}

@media (max-width: 768px) {
  .page__32 .content {
    font-size: 1.6em;
  }
}

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

@media (min-width: 768px) {
  .page__33 .title {
    margin-top: -20vw;
    font-size: 1.5em;
  }
}

@media (max-width: 768px) {
  .page__33 .title {
    margin-top: -40vw;
  }
}

.page__39 .content {
  color: #73382b;
  font-size: 3.6em;
}

@media (max-width: 768px) {
  .page__39 .content {
    font-size: 2em;
  }
}

.page__40 .content h2 {
  font-size: 3em;
}

@media (max-width: 768px) {
  .page__40 .content h2 {
    font-size: 1.8em;
  }
}

.page__animation {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page__animation img {
  position: absolute;
  bottom: 0;
  left: 0;
}

.page__animation__cover--awan {
  animation: swing 20s infinite alternate;
}

.page__animation__cover--awan2 {
  animation: swingReverse 20s infinite alternate;
}

.page__animation__cover--build-3 {
  display: none;
}

.page__animation__cover--build-4 {
  display: none;
}

.page__animation__cover--build-stats {
  opacity: 0;
}

.page__animation__cover--build {
  z-index: 100;
}

.page__animation__cover--text {
  display: none;
}

@media (min-width: 768px) {
  .page__animation__cover--text .text__top {
    margin-top: -10vw;
  }
}

@media (max-width: 768px) {
  .page__animation__cover--text .text__top {
    margin-top: -70vw;
  }
}

@media (max-width: 768px) {
  .page__animation__cover .kincir__2 {
    bottom: calc(6% - 0px) !important;
    right: calc(29% - 10px) !important;
  }
  .page__animation__list .kincir__2 {
    bottom: calc(6% - 0px) !important;
    right: calc(29% - 10px) !important;
  }
}

.page__animation__cover .kincir__1 {
  height: 220px;
  width: 110px;
  position: absolute;
  left: calc(35% - 20px);
  bottom: calc(18% - 0px);
}

.page__animation__cover .kincir__2 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(10% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__list .kincir__2 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(10% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__kilang .kincir__2 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(10% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__invest .kincir__2 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(10% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__cover .kincir__3 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(26% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__list .kincir__3 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(26% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__kilang .kincir__3 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(26% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__invest .kincir__3 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(26% - 10px);
  bottom: calc(6% - 0px);
}

.page__animation__cover .kincir__item--1 {
  left: -169px;
  bottom: 200px;
  animation: rotating 3s linear infinite;
  max-width: 500px;
}

.page__animation__list .kincir__item--1 {
  left: -169px;
  bottom: 200px;
  animation: rotating 3s linear infinite;
  max-width: 500px;
}

.page__animation__kilang .kincir__item--1 {
  left: -169px;
  bottom: 200px;
  animation: rotating 3s linear infinite;
  max-width: 500px;
}

.page__animation__invest .kincir__item--1 {
  left: -166px;
  bottom: 206px;
  animation: rotating 3s linear infinite;
  max-width: 500px;
}

.page__animation__cover .kincir__item--4 {
  left: -169px;
  bottom: 200px;
  animation: rotating 5s linear infinite;
  max-width: 500px;
}

.page__animation__list .kincir__item--4 {
  left: -169px;
  bottom: 200px;
  animation: rotating 5s linear infinite;
  max-width: 500px;
}

.page__animation__kilang .kincir__item--4 {
  left: -169px;
  bottom: 200px;
  animation: rotating 5s linear infinite;
  max-width: 500px;
}

.page__animation__invest .kincir__item--4 {
  left: -166px;
  bottom: 206px;
  animation: rotating 5s linear infinite;
  max-width: 500px;
}

.kincir.kincir__2 img {
  height: 400px;
}
.kincir.kincir__3 img {
  height: 400px;
}

.page__animation__cover .kincir__item--2 {
  width: 70px;
  left: -22px;
  bottom: 76px;
  animation: rotating 5s linear infinite;
}

.page__animation__cover .kincir__item--3 {
  width: 70px;
  left: 39px;
  bottom: 42px;
  animation: rotating 4s linear infinite;
}

.page__animation__cover #animationRegulasi {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

@media (max-width: 768px) {
  .page__animation__cover #animationRegulasi {
    height: auto;
    left: auto;
    height: auto;
    width: 110%;
    bottom: 0;
    right: 17%;
    top: auto;
  }
}

.page__animation__rec--serti-1,
.page__animation__rec--serti-2,
.page__animation__rec--serti-3,
.page__animation__rec--serti-4,
.page__animation__rec--serti-5 {
  display: none;
}

.page__animation__rec .kincir__item--1 {
  left: -7px;
  bottom: 105px;
  animation: rotating 3s linear infinite;
  width: 130px;
}

.page__animation__rec .kincir__item--2 {
  width: 70px;
  left: -22px;
  bottom: 76px;
  animation: rotating 5s linear infinite;
}

.page__animation__rec .kincir__item--3 {
  width: 70px;
  left: 39px;
  bottom: 42px;
  animation: rotating 4s linear infinite;
}

@media (min-width: 768px) {
  .page__animation__list--tower {
    top: 75px;
  }
  .page__animation__list--towerlight {
    top: 55px;
  }
}

@media (max-width: 768px) {
  .page__animation__list--tower,
  .page__animation__list--towerlight {
    bottom: -22%;
  }
  .page__animation__list--towerlight {
    display: none !important;
  }
}

.page__animation__kilang--building2 {
  bottom: -100%;
}

.page__animation__kilang--buildingasap {
  animation: flash 2s alternate infinite;
}

.page__animation__invest--awan {
  left: 20%;
}

.page__animation__invest--coin {
  left: 100%;
}

.page__animation__invest--build {
  left: 100%;
}

.page__animation__invest--text2 {
  top: 100%;
}

.page__animation__invest--text2 .text {
  font-size: 20px;
  margin-top: -15vw;
}

@media (max-width: 768px) {
  .page__animation__invest--text2 .text {
    font-size: 15px;
    margin-top: -22vw;
  }
}

.page__animation__invest--text3 {
  top: 100%;
}

.page__animation__invest--text3 .text {
  font-size: 22px;
  margin-top: -8vw;
}

@media (max-width: 768px) {
  .page__animation__invest--text3 .text {
    font-size: 15px;
    margin-top: -10vw;
  }
}

.page__animation__outlet--bubble {
  display: none;
}

.page__animation__outlet--bubble2 {
  opacity: 0;
}

.page__animation__outlet--booth {
  bottom: -2vw;
}

.page__animation__outlet--loop,
.page__animation__outlet--loopMobile,
.page__animation__outlet .loop {
  bottom: -100%;
}

.page__animation__outlet .loop {
  height: 530px;
  width: 600px;
  position: absolute;
  left: 0;
}

.page__animation__outlet .loop .text-wrapper .content {
  position: absolute;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 320px;
  text-align: center;
  right: calc(14% - 10px);
  top: calc(15% - 0px);
}

.page__animation__outlet .loop .text-wrapper--2 {
  display: none;
}

.page__animation__outlet .loop .text-wrapper--3 {
  display: none;
}

.page__animation__outlet .loop .text-wrapper--4 {
  display: none;
}

.page__animation__skema--content {
  background-size: contain !important;
}

.page__animation__potensi .kincir__4 {
  height: 220px;
  width: 110px;
  position: absolute;
  left: calc(30% - 20px);
  bottom: calc(20% - 0px);
}

.page__animation__potensi .kincir__5 {
  height: 220px;
  width: 110px;
  transform: scale(0.7);
  position: absolute;
  right: calc(13% - 10px);
  bottom: calc(21% - 0px);
}

.page__animation__potensi .kincir__item--1 {
  left: -7px;
  bottom: 105px;
  animation: rotating 3s linear infinite;
  width: 130px;
}

.page__animation__potensi .kincir__item--2 {
  width: 70px;
  left: -22px;
  bottom: 76px;
  animation: rotating 5s linear infinite;
}

.page__animation__potensi .kincir__item--3 {
  width: 70px;
  left: 39px;
  bottom: 42px;
  animation: rotating 4s linear infinite;
}

.page__animation__pabrik--text {
  opacity: 0;
}

.page__animation__air--text {
  opacity: 0;
}

.page__animation__surya--text {
  opacity: 0;
}

.page__animation__bayu--text {
  opacity: 0;
}

.page__animation__ombak--text {
  opacity: 0;
}

@media (min-width: 768px) {
  .page__animation__ombak .content-graph {
    margin-top: -5vw;
  }
}

@media (max-width: 768px) {
  .page__animation__ombak .content-graph {
    margin-top: -80vw;
  }
}

.page__static {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.7s ease;
}

.page__static__cover {
  top: 0;
}

.page__static__cover .overlay__halfblack {
  display: none;
}

.page__static__cover-1 {
  top: 0;
}

.page__static__cover-1 .overlay__halfblack {
  display: none;
}

.page__static__pembangkit {
  top: 100%;
  background: #668079;
}

.page__static__credit {
  top: 100%;
}

.page__static__outlet {
  top: 100%;
  background: #d8cb8b;
}

.page__static__outlet .bottom-bg {
  position: absolute;
  width: 100%;
  height: 30%;
  background: #d0ac8a;
  bottom: 0;
}

@media (max-width: 768px) {
  .page__static__outlet .bottom-bg {
    height: 15%;
  }
}

/* .page__static__listrik {
  background: url("../images/bg-page-17.svg");
  background-repeat: no-repeat;
  background-size: contain;
} */

@media (max-width: 768px) {
  .page__static__listrik .bottom-bg {
    height: 15%;
  }
}

/* .page__static__skema {
  top: 100%;
} */

.page__static__potensi {
  top: 100%;
}

.page__static__pabrik {
  top: 100%;
  background: #ff7262;
}

.page__static__air {
  top: 100%;
  background: #72bdba;
}

.page__static__surya {
  top: 100%;
  background: #ffb533;
}

.page__static__bayu {
  top: 100%;
  background: #8cb596;
}

.page__static__ombak {
  top: 100%;
  background: #177d8f;
}

.page__static__energi {
  top: 100%;
  background: linear-gradient(to bottom, #f0c451 0%, #e6f25c 100%);
}

.page__static__energi .bg-color {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.page__static__energi .bg-color--1 {
  opacity: 0.6;
  background: linear-gradient(to bottom, #f0c451 0%, #e6f25c 100%);
}

.page__static__energi .bg-color--2 {
  opacity: 0.9;
  background: linear-gradient(to bottom, #51a3f0 0%, #f0c451 100%);
  display: none;
}

.page__static__energi .bg-color--3 {
  opacity: 0.8;
  background: linear-gradient(to bottom, #51a3f0 0%, #a7b59a 100%);
  display: none;
}

.page__static__energi .bg-color--4 {
  opacity: 0.9;
  background: linear-gradient(to bottom, #0d4478 0%, #1667b2 100%);
  display: none;
}

.page__static__pembangkit {
  top: 100%;
  background: linear-gradient(
    180deg,
    #e6f25c 0%,
    #f0c451 21.55%,
    #51a4f0 38.46%,
    #1667b3 60.56%,
    #0d4478 74.88%,
    #03121f 91.66%
  );
}

.page__static__credit {
  top: 100%;
  background: linear-gradient(
    180deg,
    #e6f25c 0%,
    #f0c451 12.82%,
    #51a4f0 38.46%,
    #1667b3 60.56%,
    #0d4478 74.88%,
    #03121f 91.66%
  );
}

.page__image {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.page__color {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 1s ease;
}

.page__color .item {
  width: 100%;
  height: 100%;
}

.page__color--soon {
  background: linear-gradient(
    0deg,
    #62b8cc 61.38%,
    #50afc4 75.67%,
    #36a1b7 100%
  );
}

.page__color--evening {
  background: linear-gradient(0deg, #d7ca9c 5.83%, #bca964 79.32%);
}

.page__color--night {
  background: linear-gradient(0deg, #d7ca9c 5.83%, #bca964 79.32%);
}

.page__color--blue {
  background: #668079;
}

.page .label {
  background: url(../images/label.png) no-repeat;
  background-size: cover;
  padding: 10px;
  width: 60%;
  margin: auto;
  color: black;
}

@media (max-width: 768px) {
  .page .label {
    width: 100%;
    background-size: 100% 100%;
  }
}

@media (max-width: 768px) {
  .page-wrapper {
    padding: 70px 0px !important;
  }
}

@keyframes AnimationName {
  0% {
    background-position: 82% 0%;
  }
  50% {
    background-position: 19% 100%;
  }
  100% {
    background-position: 82% 0%;
  }
}

.cover__title {
  color: #ffffff;
  z-index: 20;
  margin: auto;
  text-align: center;
}

@media (max-width: 768px) {
  .cover__title {
    text-align: center;
    top: 20%;
  }
  .cover__title h1 {
    font-size: 28px !important;
  }
  .cover__title h3 {
    font-size: 16px !important;
  }
  .logo-img__flex {
    margin: 20px 16px !important;
  }
  .logo-img__flex .img__bumn {
    width: 150px !important;
  }
  .logo-img__flex .img__pln {
    width: 100px !important;
  }
}

@media (min-width: 768px) {
  .cover__title {
    width: 60%;
  }
}

.cover__title h1 {
  color: #ffd400;
  text-shadow: 0px 2px 0px #0071bc;
  transition: all 0.5s ease;
}

.cover__content__item {
  position: absolute;
  bottom: 0;
}

.text-popout {
  background: #ffffff;
  color: #000000;
  border-radius: 12px;
  padding: 14px;
  min-height: 83px;
  font-weight: 700;
  font-size: 1.3em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .text-popout {
    width: 400px;
  }
}

@media (max-width: 768px) {
  .text-popout {
    width: 300px;
  }
}

.text-popout span {
  position: absolute;
  top: -20px;
  left: -10px;
  background: yellow;
  padding: 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

.text-popout--1 {
  left: 0;
  right: 0;
  margin: auto;
}

@media (max-width: 768px) {
  .text-popout--1 {
    margin-top: -60vw;
  }
}

.text-popout--2 {
  left: 0;
  right: 0;
  margin: -20vw auto 0px;
}

@media (max-width: 768px) {
  .text-popout--2 {
    margin-top: -60vw;
  }
}

.text-popout--3 {
  left: 0;
  right: 0;
  margin: auto;
}

@media (max-width: 768px) {
  .text-popout--3 {
    position: absolute;
    top: 40vw;
  }
}

.text-highlight {
  position: relative;
  text-align: left;
}

@media (min-width: 768px) {
  .text-highlight {
    margin-top: -11vw;
  }
}

.text-highlight::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 10px;
  background: #ffff00;
  height: 11px;
  width: 80px;
}

.text-zoom {
  position: absolute;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 320px;
}

@media (max-width: 768px) {
  .text-zoom {
    width: 250px;
    margin: 38vw auto 0px;
    left: auto;
    bottom: auto;
    position: relative;
  }
}

.text-zoom--1,
.text-zoom--2 {
  left: calc(100% - 54vw);
  bottom: calc(100% - 13vw);
}

@media (max-width: 768px) {
  .text-zoom--1,
  .text-zoom--2 {
    left: auto;
    bottom: auto;
  }
}

.text-zoom--3,
.text-zoom--4 {
  position: relative;
  left: 10vw;
  bottom: -4vw;
}

@media (max-width: 768px) {
  .text-zoom--3,
  .text-zoom--4 {
    left: auto;
    bottom: auto;
  }
}

.text-zoom .text {
  color: #000000;
  font-weight: bold;
}

.text-job {
  text-align: left;
}

.content-graph {
  color: #ffffff;
}

@media (max-width: 768px) {
  .content-graph {
    margin-top: -68vw;
  }
}

.content-graph .title {
  font-size: 4em;
  font-weight: bold;
}

@media (max-width: 768px) {
  .content-graph .title {
    font-size: 2.5em;
  }
}

.content-graph .stats {
  border-radius: 16px;
  padding: 10px;
  text-align: center;
  margin: auto;
}

@media (min-width: 768px) {
  .content-graph .stats {
    width: 320px;
  }
}

@media (max-width: 768px) {
  .content-graph .stats {
    width: auto;
  }
}

.content-graph .stats h1 {
  color: #ffffff;
  font-size: 3em;
}

@media (max-width: 768px) {
  .content-graph .stats h1 {
    font-size: 2em;
  }
}

.content-graph .stats p {
  color: #ffff00;
  margin-bottom: 0px;
  font-size: 1.6em;
}

.content-graph .stats--red {
  background: #ce0f00;
}

.content-graph .stats--tosca {
  background: #0d7a7f;
}

.content-graph .stats--yellow {
  background: #ef6f06;
}

.content-graph .stats--green {
  background: #589965;
}

.content-graph .stats--blue {
  background: #003b4f;
}

.content-graph .detail {
  color: #ffffff;
  font-size: 1.6em;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .content-graph .detail {
    font-size: 1.2em;
  }
}

.content-graph--red .title {
  color: #ce0f00;
}

.content-graph--tosca .title {
  color: #0d7a7f;
}

.content-graph--yellow .title {
  color: #ef6f06;
}

.content-graph--green .title {
  color: #0d7a7f;
}

.content-graph--blue .title {
  color: #003b4f;
}

@media (max-width: 768px) {
  .data {
    width: 80%;
    margin: auto;
    margin-top: 0vw;
  }
}

.content-area {
  display: flex;
  flex: 1;
  margin-top: 30px;
}

.content-area .item {
  flex: 1;
}

.content-area .item:first-child {
  flex: 2;
}

.content-area .item:last-child {
  flex: 2;
}

.content-area .item p {
  font-size: 1.6em;
}

@media (max-width: 768px) {
  .content-area .item p {
    font-size: 1.2em;
  }
}

@media (max-width: 768px) {
  .content-area .item h1 {
    font-size: 1.3em;
  }
}

.credit__item {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.6em;
}

@media (max-width: 768px) {
  .credit__item {
    font-size: 1.3em;
  }
}

.credit__item--title {
  font-weight: bold;
}

.scroll-down {
  position: absolute;
  bottom: 15%;
  right: 5%;
  margin: auto;
  width: 40px;
  z-index: 3;
  color: #ffffff;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS Utilities CSS Documentation:
----------------------------------------------------------------
1.0 Animate General
2.0 List Animate
  2.1 Fade In
  2.2 Move Down
  2.3 Floating Down
  2.4 Floating Down Slow
  2.5 Fade In Left
  2.6 fade In Up
  2.7 Rotate
  2.8 Flash
  2.9 Blink
3.0 Swing
  3.1 Glow Effect
  3.2 Wave
--------------------------------------------------------------*/
.animate--rotating {
  animation: rotating 3s linear infinite;
}

.animate--rotatingReverse {
  animation: rotatingReverse 10s linear infinite;
}

.animate--hide {
  opacity: 0;
  transition: all 0.5s ease-out;
}

.animate--show {
  opacity: 1;
  transition: all 0.5s ease-out;
}

.animate--flash {
  animation: flash 1.4s alternate infinite;
  animation-delay: 2s;
}

.animate--flashSlow {
  animation: flash 1s alternate;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}

.animate--pushDown {
  transform: translateY(100%);
  transition: all 1.2s ease;
}

.animate--overflowUp {
  transform: translateY(-100%);
  transition: all 1.2s ease;
}

.animate--pullUp {
  transform: translateY(0%);
  transition: all 1.2s ease;
}

.animate--float {
  animation: float 1s ease-in-out infinite alternate;
}

.animate--floatSlow {
  animation: floatSlow 1.5s ease infinite alternate;
}

.animate--floatSuperSlow {
  animation: floatSuperSlow 1.5s ease infinite alternate;
}

.animate--car {
  animation: car 0.3s ease infinite alternate;
}

.animate--scaleOut {
  transform: scale(0);
  transition: all 1s ease;
}

.animate--scaleIn {
  transform: scale(1);
  transition: all 1s ease;
}

.animate--scaleBig {
  transform: scale(2);
  transition: all 1s ease;
}

.animate--posLeft {
  transition: all 1s ease;
  transform: translate(-100%);
}

.animate--blink {
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.animate--swing {
  animation-name: swing;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.animate--glow {
  animation: glow 1.2s ease-in-out infinite alternate;
}

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

body {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes movedown {
  0% {
    top: -120px;
    transition: all ease 0.4s;
  }
  100% {
    top: 0;
  }
}

@keyframes float {
  from {
    transform: translateY(-15%);
  }
  to {
    transform: translateY(10%);
  }
}

@keyframes floatSlow {
  from {
    transform: translateY(-5%);
  }
  to {
    transform: translateY(5%);
  }
}

@keyframes floatSuperSlow {
  from {
    transform: translateY(-7px);
  }
  to {
    transform: translateY(7px);
  }
}

@keyframes car {
  from {
    transform: translateY(-2px);
  }
  to {
    transform: translateY(2px);
  }
}

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

.fadeInLeft {
  animation-name: fadeInLeft;
}

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

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@keyframes rotatingReverse {
  from {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}

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

@keyframes flashSlow {
  from,
  100%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    transform: scale(1);
    box-shadow: 0 0 #6ebf5f;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(255, 232, 102, 0);
  }
  to {
    transform: scale(1);
    box-shadow: 0 0 rgba(255, 232, 102, 0);
  }
}

@keyframes swing {
  0% {
    transform: translateX(-5%);
  }
  50% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes swingReverse {
  0% {
    transform: translateX(7%);
  }
  50% {
    transform: translateX(-7%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 30px #66cc33, 0 0 20px #66cc33;
  }
  to {
    text-shadow: 0 0 10px #66cc33, 0 0 15px #66cc33;
  }
}

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.95);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
/*# sourceMappingURL=style.min.css.map */

/* NEW SLICING */

.wrapper__logo-img {
  z-index: 100;
  position: absolute;
  width: 100%;
  transition: all 0.5s;
}

.wrapper__logo-img-hover {
  z-index: 100;
  position: absolute;
  width: 100%;
  background: #000000;
}

.wrapper__logo-img-hover {
  opacity: 0;
  transition: all 0.5s;
}

.wrapper__logo-img:hover .wrapper__logo-img-hover {
  opacity: 1;
  transition: all 0.5s;
  margin-top: -60px;
}

.wrapper__logo-img:hover {
  margin-top: 60px;
  transition: all 0.5s;
}

.logo-img__flex {
  display: flex;
  justify-content: space-between;
  margin: 20px 40px;
}

.logo-img__flex-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
}

.cover__title h3 {
  font-size: 26px;
}

.cover__title h1 {
  font-size: 60px;
}

.text-yellow {
  font-size: 24px;
  color: #ffd400;
  font-weight: 600;
}

.text-white-large {
  font-size: 48px;
  color: #ffffff;
  font-weight: 700;
}

.wrapper__img-page-3 {
  position: relative;
  top: 340px;
  left: 250px;
}

.page__animation__rec {
  background: linear-gradient(110.1deg, #0e96c1 0%, #24717e 100%);
}

.wrapper___page-4-text-1 {
  text-align: center;
  background: linear-gradient(90.71deg, #f3b515 0%, #f1cd10 100%);
  border-radius: 30px;
  width: 350px;
  padding: 5px;
  position: relative;
  top: 65px;
  left: 30px;
}

.wrapper___page-4-text-1.custom-12 {
  bottom: 20px;
  left: 30px;
}

.wrapper___page-4-text-1 p {
  font-size: 22px;
  color: #333333;
  margin: 0px;
}

.wrapper__page-4-text-2 {
  background: #ffeec2;
  border-radius: 10px;
  width: 420px;
  position: absolute;
  right: 200px;
  top: 200px;
}

.wrapper__page-4-text-2 p {
  text-align: left;
  padding: 10px;
  font-size: 17px;
  color: #333333;
  margin: 0px;
}

.page__5-images img {
  position: relative;
  bottom: 150px;
  left: 100px;
}

.wrapper__card-header {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: #237280;
  padding: 10px;
}

.wrapper__card-header p {
  margin: 0px;
  color: #f5e721;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.wrapper__card {
  width: 100%;
  margin-bottom: 40px;
}

.card__body {
  background: #ffeec2;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.card__body-item {
  text-align: left;
  padding: 10px;
}

.card__body-item span {
  font-size: 15px;
}

.content__details p {
  text-align: left;
  color: #fff;
  font-size: 18px;
}

.content__details.custom {
  position: relative;
  bottom: 150px;
  left: 100px;
}

.content__details.custom-1 {
  position: absolute;
  top: 150px;
  left: 50px;
  width: 500px;
}

.page-8__text-1 p {
  font-size: 30px;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
}

.page-8__text-2 {
  margin-top: 20px;
}

.page-8__text-2 p {
  font-size: 18px;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
  font-style: italic;
}

.page__animation__museum--hill.custom {
  z-index: 100;
  background-size: cover !important;
}

.page__animation__list--hill {
  background-size: cover !important;
}

.page-9__wrapper-flex {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  right: 10%;
}

.page-9__wrapper-flex img {
  margin-left: 40px;
  margin-bottom: 40px;
}

.wrapper__card-custom {
  position: relative;
}

.card__textnumber {
  font-size: 16px;
  font-weight: 700;
  background: #237280;
  color: #ffff00;
  padding: 20px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
  left: 4px;
}

.card__textfield {
  font-size: 16px;
  background: #ffffff;
  color: #000;
  padding: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.page-11__text-yellow {
  color: #ffd400;
  font-size: 40px;
  font-weight: 700;
  text-align: left;
  text-shadow: 0px 2px 0px #0071bc;
}

.page-11__text-white {
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
}

.page-11__text-white.custom-fz {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  font-style: italic;
}

.wrapper__page14-flex {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.wrapper__page14-flex p {
  font-size: 22px;
  color: #ffffff;

  text-align: left;
}

.wrapper__page14-flex img {
  width: 60px;
  margin-right: 40px;
  position: relative;
}

.page-16__text-big {
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  bottom: 40px;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
}

.page-16__text-small {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  bottom: 40px;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
  font-style: italic;
}

.bg__colum3x2 {
  background: url("../images/bg-page-17.svg");
}

.bg__col-1 {
  background: url("../images/content-page-17\(6\).svg");
  padding-bottom: 75%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg__col-2 {
  background: url("../images/content-page-17\(1\).svg");
  padding-bottom: 75%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg__col-3 {
  background: url("../images/content-page-17\(2\).svg");
  padding-bottom: 75%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg__col-4 {
  background: url("../images/content-page-17\(3\).svg");
  padding-bottom: 75%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg__col-5 {
  background: url("../images/content-page-17\(4\).svg");
  padding-bottom: 75%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg__col-6 {
  background: url("../images/content-page-17\(5\).svg");
  padding-bottom: 75%;
  background-repeat: no-repeat;
  background-size: cover;
}

.col-lg-4.no-padding {
  padding-left: 0px;
  padding-right: 0px;
}

.custom__hidden {
  display: none;
}
.row.no-margin {
  margin-left: 0px;
  margin-right: 0px;
}

.page__animation__cover--card-page-1 {
  display: none;
  z-index: 100;
  left: 150px;
}

.page__animation__cover--card-page-2 {
  display: none;
  z-index: 100;
  left: 150px;
}

.page__animation__cover--card-page-3 {
  display: none;
  z-index: 100;
  left: 150px;
}

.page__animation__cover--card-page-4 {
  display: none;
  z-index: 100;
  left: 150px;
}

.page__animation__cover--card-page-1 img {
  bottom: 80px;
  left: 20px;
  width: 28%;
}

.page__animation__cover--card-page-2 img {
  left: 500px;
  width: 28%;
}

.page__animation__cover--card-page-3 img {
  left: 20px;
  top: 15px;
  width: 28%;
}

.page__animation__cover--card-page-4 img {
  left: 500px;
  top: 80px;
  width: 28%;
}

.wrapper__page-4-flex {
  display: flex;
  justify-content: flex-start;
}

.wrapper__text-cover {
  transition: all 0.5s ease;
}

.wrapper__img-page-4 {
  position: relative;
  top: 500px;
  left: 300px;
}

.wrapper__card.custom-2 {
  width: 400px;
  position: absolute;
  left: 50px;
  top: 250px;
}

.wrapper__card.custom-3 {
  width: 400px;
  position: absolute;
  left: 50px;
  top: 400px;
}

.wrapper__image.custom-3 img {
  position: absolute;
  top: 53px;
  right: 150px;
  left: unset;
  width: 600px;
}

.card__body-item img {
  position: relative;
}

.wrapper__content-details-custom {
  position: absolute;
  right: 200px;
  top: 300px;
}

.wrapper__image.custom-4 img {
  position: absolute;
  top: 150px;
  left: 50px;
  width: 600px;
}

.wrapper__image.custom-7 img {
  /* top: 150px;
  left: 150px; */
  position: unset;
}

.wrapper__image.custom-6 {
  /* position: absolute;
  top: 200px;
  right: 20px; */
}

.wrapper__image.custom-6 img {
  position: relative;
}

.wrapper__cover-title {
  width: 100%;
  transition: all 0.5s ease;
  margin: unset;
}

.wrapper__card-custom.card-1 {
  top: 50%;
  z-index: 100;
  /* left: 10%; */
  transition: all 0.5s ease;
}

.wrapper__card-custom.card-2 {
  top: 50%;
  z-index: 100;
  /* left: 10%; */
  transition: all 0.5s ease;
}
.wrapper__card-custom.card-3 {
  top: 50%;
  z-index: 100;
  /* left: 10%; */
  transition: all 0.5s ease;
}

.card-to-top {
  top: 25% !important;
  transition: all 0.5s ease;
}

.transform-fontsize h1 {
  font-size: 32px;
  transition: all 0.5s ease;
}

.wrapper__image.page-11 img {
  position: relative;
  top: 50px;
  transition: all 0.5s ease;
  width: 35%;
}
.wrapper__page-11-text {
  position: absolute;
  top: 50%;
  left: 40%;
  z-index: 100;
}

.chart-to-left {
  left: -400px !important;
  transition: all 0.5s ease;
}

.wrapper__page-13-text img {
  position: relative;
  left: unset;
  bottom: 24px;
  height: 272px;
}
.wrapper__page-13-text {
  position: relative;
  top: 120px;
}

.wrapper__image.custom-5 img {
  top: 10%;
  left: 25%;
  width: 750px;
}

.bg-red {
  background: #e24047;
  padding-bottom: 300%;
}

.bg-cream {
  background: #fbc773;
  padding-bottom: 300%;
}

.bg-cyan {
  background: #17c3b2;
  padding-bottom: 300%;
}

.bg-blue {
  background: #227c9d;
  padding-bottom: 300%;
}

.bg-orange {
  background: #d4872c;
  padding-bottom: 300%;
}

.page__red-img {
  position: relative;
  right: 20%;
}

.page__cyan-img {
  position: relative;
  right: 20%;
}

.page__orange-img {
  position: relative;
  left: 5%;
}

.wrapper__content-energi {
  width: 400px;
}

.title__white p {
  font-size: 44px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.title__black p {
  font-size: 44px;
  font-weight: 700;
  color: #333333;
  text-align: center;
}

.wrapper__page-red {
  background: #a71832;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

.wrapper__page-orange {
  background: #ae480f;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

.wrapper__page-cream {
  background: #51a8b7;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

.wrapper__page-cyan {
  background: #177d8f;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

.wrapper__page-blue {
  background: #2a3563;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

.value-white {
  font-size: 50px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: -10px;
}

.value-yellow {
  font-size: 36px;
  font-weight: 400;
  color: #ffff00;
  text-align: center;
}

.content-energi__detail-white {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

.content-energi__detail-black {
  font-size: 20px;
  font-weight: 400;
  color: #333333;
  text-align: center;
}

.background__img-akhir {
  width: 100%;
}

.background__img-akhir-overlay {
  width: 100%;
}

.title__white-big {
  position: relative;
  top: 30%;
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}

.wrapper__flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 40px;
}

.title-value {
  color: #ffffff;
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  margin: 0px;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
}

.title-catatan {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 100px;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
  font-style: italic;
}

.text-role {
  font-size: 16px;
  color: #ffffff;
  margin: 0px;
}

.text-nama {
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  margin: 0px;
}

.text-call {
  font-size: 16px;
  color: #ffffff;
  margin-top: 20px;
}

.wrapper__credit {
  margin-bottom: 20px;
}

.w-100 {
  width: 100%;
}

.page__red-text {
  opacity: 0;
}

.page__cream-text {
  opacity: 0;
}

.page__cyan-text {
  opacity: 0;
}

.page__blue-text {
  opacity: 0;
}

.page__orange-text {
  opacity: 0;
}

.wrapper__card-custom.card-1 img {
  position: unset;
}

.wrapper__card-custom.card-2 img {
  position: unset;
}

.wrapper__card-custom.card-3 img {
  position: unset;
}

.row.custom--image-67 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 20%;
  left: 5%;
  z-index: 100;
}

.flexbox-pohongedung {
  display: flex;
  justify-content: space-around;
}

.add-overlay {
  background: linear-gradient(0deg, #111111, #111111);
  opacity: 0.6;
}

@media screen and (min-width: 1900px) {
  .wrapper__card-custom.card-1 {
    top: 40%;
    z-index: 100;
    /* left: 22%; */
  }
  .wrapper__card-custom.card-2 {
    top: 40%;
    z-index: 100;
    /* left: 22%; */
  }
  .wrapper__card-custom.card-3 {
    top: 40%;
    z-index: 100;
    /* left: 22%; */
  }
  .card-to-top {
    top: 250px !important;
    transition: all 0.5s ease;
  }
  .wrapper__page-11-text {
    position: absolute;
    top: 50%;
    left: 40%;
    z-index: 100;
  }
  .wrapper__img-page-3 {
    top: 450px;
  }
  .text__top {
    margin-top: -300px !important;
    transition: all 0.5s ease;
  }
}

@media (max-width: 768px) {
  .page__animation__cover--card-page-1 img {
    bottom: 120px;
    left: -150px;
    height: 130px;
    width: 100%;
  }
  .page__animation__cover--card-page-2 img {
    left: -150px;
    height: 130px;
    bottom: -20px;
    width: 100%;
  }
  .page__animation__cover--card-page-3 img {
    top: 42px;
    left: -150px;
    height: 130px;
    width: 100%;
  }
  .page__animation__cover--card-page-4 img {
    left: -150px;
    height: 130px;
    top: 191px;
    width: 100%;
  }
  .wrapper___page-4-text-1 {
    width: 300px;
    left: 0px;
  }
  .wrapper___page-4-text-1 p {
    font-size: 16px;
  }
  .wrapper__page-4-flex {
    justify-content: center;
    margin-top: 40px;
  }
  .text-yellow {
    font-size: 20px;
  }
  .text-white-large {
    font-size: 40px;
  }
  .wrapper__img-page-3 {
    left: 0px;
    top: 250px;
  }
  .wrapper__img-page-4 {
    top: 580px;
    left: 20px;
  }
  .wrapper__page-4-text-2 {
    right: 35px;
    top: 100px;
    width: 300px;
  }
  .content__details.custom-1 {
    top: 100px;
    left: 5px;
    width: 100%;
  }
  .content__details p {
    font-size: 16px;
  }
  .wrapper__card.custom-2 {
    width: 340px;
    left: 10px;
    top: 200px;
  }
  .wrapper__card.custom-3 {
    width: 340px;
    left: 10px;
    top: 330px;
  }
  .card__body-item span {
    font-size: 12px;
  }
  .wrapper__card-header p {
    font-size: 12px;
  }
  .wrapper__image.custom-3 img {
    top: 470px;
    width: 350px;
    left: 20px;
  }
  .wrapper__image.custom-4 img {
    top: 100px;
    left: 0px;
    height: 200px;
  }
  .wrapper__content-details-custom {
    right: 150px;
    top: 500px;
    width: 250px;
  }
  .wrapper__image.custom-7 img {
    top: 100px;
    left: 60px;
    width: 250px;
  }
  .wrapper__image.custom-6 {
    top: 400px;
    left: -30px;
    right: 0px;
  }
  .wrapper__image.custom-6 img {
    width: 150px;
  }
  .text__top {
    margin-top: -250px !important;
  }
  .card__textnumber {
    font-size: 8px;
  }
  .card__textfield {
    font-size: 8px;
  }
  .wrapper__image.page-11 img {
    top: -5px;
    width: 60%;
  }
  .card-to-top {
    top: 150px !important;
  }
  .chart-to-left {
    left: 0 !important;
  }
  .page-11__text-yellow {
    font-size: 20px;
  }
  .page-11__text-white {
    font-size: 14px;
  }
  .page-11__text-white.custom-fz {
    font-size: 14px;
  }
  .wrapper__page-11-text {
    right: 0px;
    top: 70%;
    left: 0px;
  }
  .wrapper__card-custom.card-1 {
    left: 0px;
    top: 200px !important;
  }
  .wrapper__card-custom.card-2 {
    left: 0px;
    top: 200px !important;
  }
  .wrapper__card-custom.card-3 {
    left: 0px;
    top: 200px !important;
  }
  .wrapper__page14-flex p {
    font-size: 14px;
  }
  .wrapper__page14-flex img {
    width: 40px;
  }
  .wrapper__page-12-text {
    position: relative;
    top: 100px;
  }
  .page-16__text-big {
    font-size: 16px;
  }
  .page-16__text-small {
    font-size: 14px;
  }
  .wrapper__page-13-text img {
    width: 150px;
  }
  .page__red-img {
    right: 0px;
    bottom: 0px;
  }

  .page__cyan-img {
    right: 0px;
    bottom: 0px;
  }

  .page__orange-img {
    right: 0px;
    bottom: 0px;
  }

  .wrapper__content-energi {
    width: 100%;
  }
  .title__white p {
    font-size: 36px;
  }
  .value-white {
    font-size: 42px;
  }
  .value-yellow {
    font-size: 30px;
  }
  .content-energi__detail-white {
    font-size: 16px;
  }
  .title__black p {
    font-size: 36px;
  }
  .content-energi__detail-black {
    font-size: 16px;
  }
  .wrapper__image.custom-5 img {
    top: unset;
    left: 0px;
    bottom: 300px;
  }
  .title__white-big {
    font-size: 28px;
  }
  .wrapper__flex {
    justify-content: center;
  }
  .img__pohon {
    bottom: -10px !important;
  }
  .row.custom--image-67 {
    left: 0%;
  }
}