html, body {
  height: 100%;
  font-family: "Noto Sans", "Noto Sans TC", "Noto Sans SC", sans-serif !important;
  text-size-adjust: none !important;
  -webkit-text-size-adjust: none !important;
  -ms-text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
}
.tag, .filter-btn {
  cursor: pointer;
}
.mark, mark {
  padding: 0.2em;
  background-color: transparent;
}
body {
  display: flex;
  flex-direction: column;
}
.mx-caption::before {
  display: inline-block;
  content: " ";
  background-image: url(../themes/maxims-sustainability/assets/images/caption-arrow.svg);
  background-size: 12px 6px;
  height: 6px;
  width: 12px;
  margin-right: 10px;
}
.dot-fire, .dot-fire::before, .dot-fire::after {
  background-color: white !important;
  color: white !important;
}
.content2 {
  font-size: 1.2rem;
  margin-bottom: 6rem;
}
.content4 {
  font-size: 0.8rem;
}
.colorA7 {
  color: #A7A7A7;
}
/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */
.dot-fire {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: none;
  color: #fff;
  box-shadow: 9999px 22.5px 0 -5px #fff;
  -webkit-animation: dot-fire2 5s infinite linear;
  animation: dot-fire2 5s infinite linear;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.dot-fire::before, .dot-fire::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9fff;
  color: #fff;
}
.dot-fire::before {
  box-shadow: 9999px 22.5px 0 -5px #fff;
  -webkit-animation: dot-fire 5s infinite linear;
  animation: dot-fire 5s infinite linear;
  -webkit-animation-delay: -1.4s;
  animation-delay: -1.4s;
}
.dot-fire::after {
  box-shadow: 9999px 22.5px 0 -5px #fff;
  -webkit-animation: dot-fire1 5s infinite linear;
  animation: dot-fire1 5s infinite linear;
  -webkit-animation-delay: -1.8s;
  animation-delay: -1.8s;
}
@-webkit-keyframes dot-fire {
  5% {
    box-shadow: 9999px 30px 0 -5px #fff;
  }
  /*
  10% {
    box-shadow: 9999px 20px 0 0px #fff;
  }
  */
  20% {
    box-shadow: 9999px 0px 0 2px #fff;
  }
  80% {
    box-shadow: 9999px 0px 0 2px #fff;
  }
  /*
  90%{
    box-shadow: 9999px -20px 0 0px #fff;
  }
  */
  95% {
    box-shadow: 9999px -30px 0 -5px #fff;
  }
}
@keyframes dot-fire {
  5% {
    box-shadow: 9999px 30px 0 -5px #fff;
  }
  /*
  10% {
    box-shadow: 9999px 20px 0 0px #fff;
  }
  */
  20% {
    box-shadow: 9999px 0px 0 2px #fff;
  }
  80% {
    box-shadow: 9999px 0px 0 2px #fff;
  }
  /*
  90%{
    box-shadow: 9999px -20px 0 0px #fff;
  }
  */
  95% {
    box-shadow: 9999px -30px 0 -5px #fff;
  }
}
@-webkit-keyframes dot-fire1 {
  5% {
    box-shadow: 9999px 30px 0 -5px #fff;
  }
  /*
  10% {
    box-shadow: 9999px 20px 0 0px #fff;
  }
  */
  20% {
    box-shadow: 9999px -25px 0 2px #fff;
  }
  80% {
    box-shadow: 9999px -25px 0 2px #fff;
  }
  /*
  90%{
    box-shadow: 9999px -20px 0 0px #fff;
  }
  */
  95% {
    box-shadow: 9999px -30px 0 -5px #fff;
  }
}
@keyframes dot-fire1 {
  5% {
    box-shadow: 9999px 30px 0 -5px #fff;
  }
  /*
  10% {
    box-shadow: 9999px 20px 0 0px #fff;
  }
  */
  20% {
    box-shadow: 9999px -25px 0 2px #fff;
  }
  80% {
    box-shadow: 9999px -25px 0 2px #fff;
  }
  /*
  90%{
    box-shadow: 9999px -20px 0 0px #fff;
  }
  */
  95% {
    box-shadow: 9999px -30px 0 -5px #fff;
  }
}
@-webkit-keyframes dot-fire2 {
  5% {
    box-shadow: 9999px 30px 0 -5px #fff;
  }
  /*
  10% {
    box-shadow: 9999px 20px 0 0px #fff;
  }
  */
  20% {
    box-shadow: 9999px 25px 0 2px #fff;
  }
  80% {
    box-shadow: 9999px 25px 0 2px #fff;
  }
  /*
  90%{
    box-shadow: 9999px -20px 0 0px #fff;
  }
  */
  95% {
    box-shadow: 9999px -30px 0 -5px #fff;
  }
}
@keyframes dot-fire2 {
  5% {
    box-shadow: 9999px 30px 0 -5px #fff;
  }
  /*
  10% {
    box-shadow: 9999px 20px 0 0px #fff;
  }
  */
  20% {
    box-shadow: 9999px 25px 0 2px #fff;
  }
  80% {
    box-shadow: 9999px 25px 0 2px #fff;
  }
  /*
  90%{
    box-shadow: 9999px -20px 0 0px #fff;
  }
  */
  95% {
    box-shadow: 9999px -30px 0 -5px #fff;
  }
}
h1 {
  font-size: 2rem;
  font-weight: 900;
}
h2 {
  color: #64CAD6;
  font-weight: 600;
}
.mx-title-highlight::before {
  display: inline-block;
  content: " ";
  background: linear-gradient(180deg, #FF4343 0%, #D80000 100%);
  height: 1.2em;
  width: 8px;
  vertical-align: sub;
  margin-right: 1em;
}
.mx-blockquote {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 40px;
}
.mx-blockquote::before {
  display: inline-block;
  content: " ";
  background-image: url(../themes/maxims-sustainability/assets/images/open-quote.svg);
  background-size: 100px 200px;
  height: 200px;
  width: 100px;
  margin-right: 10px;
  vertical-align: middle;
}
.mx-blockquote::after {
  display: inline-block;
  content: " ";
  background-image: url(../themes/maxims-sustainability/assets/images/close-quote.svg);
  background-size: 100px 200px;
  height: 200px;
  width: 100px;
  margin-right: 10px;
  vertical-align: middle;
}
.block-btn {
  padding: 50px;
  color: white;
  font-size: 24px;
  text-align: center;
  background-position: center !important;
  background-size: cover !important;
}
.block-btn::after {
  display: inline-block;
  content: " ";
  background-image: url(../themes/maxims-sustainability/assets/images/link-arrow.svg);
  background-size: 12px 20px;
  height: 20px;
  width: 12px;
  margin-left: 10px;
}
a {
  text-decoration: none;
}

@charset "UTF-8";
html, body {
  height: 100%;
  font-family: "Noto Sans", "Noto Sans TC", "Noto Sans SC", sans-serif !important;
  text-size-adjust: none !important;
  -webkit-text-size-adjust: none !important;
  -ms-text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
  font-size: 16px;
}
body {
  padding: 0px;
  background: #E5E5E5;
  background-color: white;
}
.padding-0rem {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}
.margin-0rem {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}
.w-80 {
  width: 80%;
}
.header {
  position: fixed;
  z-index: 2;
  padding: 3rem;
  width: 100vw;
}
.header img {
  width: 15rem;
  margin-right: 1.5rem;
}
#fronteditor {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 5rem !important;
  /*
    padding-bottom: 4rem!important;
    */
  padding-bottom: 5rem !important;
  background-color: whitE !important;
}
#fronteditor .editor-item {
  font-size: 1.2rem;
}
#fronteditor .section-title {
  font-size: 3rem;
  height: 4rem;
  background: -webkit-linear-gradient(left, #64C8D5, #47B659);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#fronteditor p:last-child {
  margin-bottom: 3px;
}
.header-title {
  /*
    font-weight: 600;
    */
  font-size: 2rem;
  color: white;
  width: 14rem;
  letter-spacing: 5px;
}
.header-title:hover {
  color: white;
}
.header-title.active {
  color: white;
}
#nav-modal .image {
  background-size: cover;
  background-position: center;
  height: 100vh;
  transition-duration: 1s;
}
#nav-modal .model-container {
  padding: 3rem 4rem 0 4rem;
}
#nav-modal .model-container .model-title-container {
  width: 100%;
  margin-bottom: 1rem;
}
#nav-modal .model-container .model-title-container img {
  height: 5rem;
  margin-right: 1.5rem;
}
#nav-modal .model-container .model-title-container .model-title {
  color: #858482;
  font-size: 1.5rem;
}
#nav-modal .model-container .other-essay {
  font-weight: 400;
  font-size: 1.2rem;
  text-decoration-line: underline;
  color: #8A8A8A;
  letter-spacing: 0.2rem;
}
#nav-modal .underline {
  border-bottom: 1px solid #B7B7B7;
}
#nav-modal .title {
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.2em;
  color: #484848;
}
#nav-modal .three-dot {
  border-style: dotted;
  border-color: transparent;
  border-width: 0px 0px 9px 0px;
  margin: auto;
  width: 50px;
}
#nav-modal .header-title {
  font-weight: 500;
  font-size: 2rem;
  width: unset;
  color: #8A8A8A;
  padding: 0.7rem 0.7rem 0.7rem 0px;
  transition-duration: 0.5s;
  display: flex;
}
#nav-modal .header-title .header-text {
  width: fit-content;
}
#nav-modal .header-title:hover {
  color: #484848;
}
#nav-modal .header-title.active {
  color: #484848;
}
#nav-modal .header-title.active .three-dot {
  margin-top: 0.5rem;
  border-color: #A6CE38;
}
#nav-modal .langbox {
  font-size: 1.2rem;
  color: #8A8A8A;
}
#mobile-nav-modal .model-container .model-title-container {
  width: 100%;
  border-bottom: 1px solid #D1D1D1;
  padding: 17px 35px;
}
#mobile-nav-modal .model-container .model-title-container img {
  /*
                height: 32.5px;
                */
  margin-right: 15px;
  width: 9rem;
}
#mobile-nav-modal .model-container .model-title-container .model-title {
  color: #858482;
  font-size: 1.2rem;
}
#mobile-nav-modal .header-text {
  font-size: 1.2rem;
}
#mobile-nav-modal .underline {
  border-bottom: 1px solid #B7B7B7;
}
#mobile-nav-modal .title {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: #484848;
  text-align: center;
}
#mobile-nav-modal .three-dot {
  border-style: dotted;
  border-color: transparent;
  border-width: 0px 0px 9px 0px;
  margin: auto;
  width: 2.5rem;
}
#mobile-nav-modal .header-title {
  font-weight: 600;
  text-align: center;
  padding: 0.7rem 0px;
  font-size: 1rem;
  color: #8A8A8A;
  width: 100%;
}
#mobile-nav-modal .header-title:hover {
  color: #484848;
}
#mobile-nav-modal .header-title.active {
  color: #484848;
}
#mobile-nav-modal .header-title.active .three-dot {
  border-color: #A6CE38;
}
#mobile-nav-modal .langbox {
  font-size: 1rem;
  color: #484848;
}
.mx-sus-btn:hover img {
  transform: scale(1.2);
}
.mx-sus-btn img {
  transform-origin: left;
  transition: 1s;
}
.mx-sus-blockquote {
  font-size: 1.5rem;
  padding: 0rem;
  text-align: center;
  color: #64c8d5;
  font-weight: 700;
  max-width: 60rem;
  margin: auto;
}
.mx-sus-blockquote::before {
  font-size: 3rem;
  font-family: "Nunito Sans" !important;
  margin-left: -0.6rem;
  margin-right: 0.6rem;
  vertical-align: middle;
  display: inline-block;
  content: "‘";
  line-height: 0;
}
.mx-sus-blockquote::after {
  content: "’";
  vertical-align: middle;
  display: inline-block;
  font-size: 3rem;
  font-family: "Nunito Sans" !important;
  margin-left: 0.6rem;
  line-height: 0;
}
.mx-sus-blockquote-author {
  margin-top: -10px;
}
#search {
  display: block;
  position: relative;
}
#search input {
  box-shadow: 6px 6px 10px rgba(86, 61, 24, 0.05);
  border-radius: 50px;
}
#search .sbtn {
  position: absolute;
  background: none;
  color: #868686;
  font-size: 1em;
  cursor: pointer;
  left: 0;
  margin-left: 8px;
  width: 35px;
  border: 0px;
}
#search .s {
  width: 100%;
  background: #fff;
  line-height: 55px;
  padding: 0 60px;
  border: none;
  color: #888;
  margin: 14px 0 0 0;
  display: flex;
}
.color {
  background: #ffffffb8;
  padding: 20px 60px;
}
.color .header-title {
  color: #777777;
}
.color .header-title:hover {
  color: #453C3C;
}
.color .header-title.active {
  color: #453C3C;
}
.color svg path {
  fill: #777777;
}
.float-btn {
  background: linear-gradient(95.62deg, #64CAD6 0%, #52BC8B 100%);
  border-radius: 15px 0px 0px 15px;
  height: 120px;
  width: 40px;
  position: fixed;
  float: right;
  right: 0%;
  top: calc(50% - 60px);
  z-index: 1000;
}
.banner-carousel {
  height: 80vh;
  position: relative;
}
.banner-carousel .item {
  height: 80vh;
  background-position: center;
  background-size: cover;
}
.carousel1 {
  height: 80vh;
  position: relative;
}
.carousel1 .carousel1-video {
  width: 100%;
  object-fit: cover;
  clip-path: inset(0.5px 0.5px);
}
.carousel1 .box-contianer {
  padding: 3rem;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  position: absolute;
  display: flex;
  align-items: flex-end;
  color: white;
  z-index: 1;
  pointer-events: none;
}
.dot-container {
  max-width: 50%;
  padding-left: 100px;
}
.banner-title {
  font-weight: nromal;
  /*
    font-size: 3rem; 
    */
  font-size: 2rem;
  color: #FFFFFF;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 768px) {
  .banner-title {
    font-size: 1.6rem;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  }
}
.banner-content {
  font-weight: 100;
  font-size: 1.2rem;
  max-width: 50rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.btn-banner {
  border: 1px solid #52BC8B;
  border-radius: 1.5rem;
  color: #86D679;
  font-weight: 600;
  font-size: 20px;
  padding: 1.5rem 2.5rem;
  margin: 1.5rem 0px;
  letter-spacing: 0.2em;
  pointer-events: visible;
}
.btn-banner:hover, .btn-banner:focus {
  color: #86D679;
}
.owl-dots {
  display: none;
}
.banner-dot {
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 2.15rem 1.5rem 1.25rem 0.6rem;
  opacity: 0.6;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  background: #e9ecef;
  pointer-events: visible;
}
.banner-dot.active {
  cursor: pointer;
  opacity: 1;
}
.banner-dot:hover {
  cursor: pointer;
}
.clock-container {
  background: transparent;
  margin: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -1rem;
  margin-top: -1rem;
}
.clock-shape {
  fill: transparent;
  stroke-width: 1px;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.main-circle {
  stroke: #e9ecef;
  stroke-dashoffset: calc(300 - (300 * (0 / 60)));
  transition-duration: 0s;
}
.banner-dot.active .main-circle {
  transition-duration: 5s;
  /*
    stroke-dashoffset: calc(300 - (300 * (25 / 60)));
    */
  stroke-dashoffset: calc(300 - (300 * (20 / 60)));
}
.banner-dot.active .main-circle.video-dot {
  transition-duration: 58s;
}
.title {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: #484848;
}
.carousel2 {
  margin-top: 180px;
}
.circle {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 1px solid black;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 1.5rem;
}
@property --mycirclecolor2 {
  syntax: "<color>";
  initial-value: #FFFFFF;
  inherits: false;
}
@property --mycirclecolor {
  syntax: "<color>";
  initial-value: #FFFFFF;
  inherits: false;
}
.circle-green {
  background: linear-gradient(132.51deg, var(--mycirclecolor1) 0%, var(--mycirclecolor2) 96.5001%);
  transition: --mycirclecolor1 0.5s, --mycirclecolor2 0.5s;
}
.sus-carousel .item {
  height: 25rem;
  background-position: center;
  background-size: cover;
}
.sus-dot {
  display: block;
  width: 18.5px;
  height: 18.5px;
  margin: 15px 60px 15px 0px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #D6D6D6;
  pointer-events: visible;
}
.sus-dot.active, .sus-dot:hover {
  cursor: pointer;
  background: #69C6D5;
}
.type {
  display: inline-block;
  /*
    font-family: 'Montserrat';
    */
  border-radius: 0px 0px 15px 0px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 2.5rem;
}
.types {
  display: flex;
  border-radius: 20px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  white-space: pre;
  padding: 3px 20px;
  margin-right: 1rem;
  margin-bottom: 0.2rem;
  vertical-align: middle;
}
.carousel-title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 43px;
  letter-spacing: 0.2em;
  color: #79D0D6;
  max-width: 832px;
}
.carousel-content {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 2rem;
  color: #000000;
  max-width: 832px;
}
.fluid-image {
  background-repeat: no-repeat;
  height: 35rem;
}
.fluid-image-title {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 43px;
  text-align: center;
  letter-spacing: 0.2em;
  color: white;
  max-width: 1219px;
}
.fluid-image-content {
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  color: white;
  max-width: 1219px;
}
.video-container-container {
  overflow: hidden;
}
.video-container {
  /*
    height: calc((33vw / 4 * 3) - 120px);
    */
  /*
    max-height: 400px;
    margin:1rem;
*/
  transition-duration: 1s;
  height: min(25vw, 330px);
  background-size: cover;
  background-position: center;
}
.video-container:hover {
  transform: scale(1.05);
}
.video .type {
  transition-duration: 1s;
  display: inline-block;
  border-radius: 50px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  /*
        padding: 4px 5px;
        width: 9rem;
        */
  /*
        padding: 5px 5px;
        */
  min-width: 7.5rem;
  text-align: center;
  cursor: pointer;
  padding: 3px 20px;
}
.video-title {
  font-weight: 500;
  font-size: 1.2rem;
  /*
    letter-spacing: 0.05em;
    */
  color: black;
}
.video-btn circle, .video-btn path {
  transition-duration: 0.2s;
}
.video-btn:hover, .video-btn.active {
  fill: #52bc8b;
}
.video-btn:hover circle, .video-btn.active circle {
  stroke: #52bc8b;
}
.video-btn:hover path, .video-btn.active path {
  stroke: white;
  fill: white;
}
.new-image {
  background-size: cover;
  background-position: center;
  padding: 20px;
  height: min(28vw, 400px);
}
.new-image .title {
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0em;
  line-height: 1.5;
  color: #FFFFFF;
}
.new-image-time {
  /*
    font-family: 'Montserrat';
    */
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.1em;
  color: white;
  text-align: center;
  line-height: 50px;
}
.float-btn {
  background: linear-gradient(95.62deg, #64CAD6 0%, #52BC8B 100%);
  border-radius: 15px 0px 0px 15px;
  height: 120px;
  width: 40px;
  position: fixed;
  float: right;
  right: 0%;
  top: calc(50% - 60px);
  z-index: 1000;
}
.sus-text .title {
  font-size: 72px;
  background: linear-gradient(91.58deg, #64CAD6 0%, #52BC8B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding: 1em 0px 0.5em 0px;
}
.sus-text .content {
  font-size: 30px;
  color: #484848;
  text-align: center;
  padding: 0.5em 0px;
}
.sus-article-header {
  font-weight: 600;
  font-size: 1.5rem;
}
.mx-sus-caption {
  font-size: 0.8rem;
}
.mx-sus-intro {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}
.post-content {
  padding-bottom: 5rem;
  margin-top: -1rem;
}
.post-content h4 {
  color: #64C8D5;
}
.sus-article-block {
  margin-bottom: 4rem !important;
}
.sus-article-content {
  column-gap: 3rem;
}
body[lang=en] #nav-modal .header-title {
  font-size: 1.5rem;
}
@media screen and (max-width: 992px) {
  /*
    .new-image{
        height: 80vw;
    }
    */
  .video-container {
    height: 80vw;
  }
}
@media screen and (max-width: 768px) {
  /*
    html, body{
        font-size: 14px;
    }
    */
  .title-center {
    font-size: 3rem !important;
  }
  .sus-article-block {
    margin-bottom: 0rem !important;
  }
  .mx-sus-blockquote {
    line-height: 1.4;
    font-size: 1.1rem;
    margin-bottom: 0px;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .mx-sus-blockquote::after, .mx-sus-blockquote::before {
    transform: translateY(5px) !important;
  }
  .mx-sus-blockquote-author {
    margin-top: -25px;
  }
  .sus-article-images img {
    padding: 0px !important;
  }
  .post-content {
    padding-bottom: 0rem;
  }
  .sus-article-header {
    /*
    padding:0px !important;
    */
  }
  .sus-article-content {
    padding: 0px !important;
  }
  .mx-sus-intro {
    font-size: 1.1rem;
  }
  .sus-article-header {
    margin-top: 1rem;
  }
  .video .type {
    min-width: 10rem;
    font-size: 0.8rem;
    padding: 5px;
  }
  .video-title {
    letter-spacing: 0em;
  }
  .video-text-container {
    padding: 1rem;
  }
  #fronteditor {
    padding: 1rem;
  }
  #fronteditor .editor-item {
    font-size: 1rem;
  }
  #fronteditor .section-title {
    font-size: 1.6rem;
  }
  #fronteditor p {
    margin-bottom: 0.5rem;
  }
  .carousel1 .box-contianer {
    padding: 1rem 1.5rem;
  }
  .header img {
    width: 9rem;
  }
  .float-btn {
    width: 40px;
    height: 90px;
    top: 130px;
    padding: 10px !important;
  }
  .float-btn .dot-fire {
    width: 5px;
    height: 5px;
  }
  .float-btn .dot-fire:before {
    width: 5px;
    height: 5px;
  }
  .float-btn .dot-fire:after {
    width: 5px;
    height: 5px;
  }
  .carousel1 .box-contianer {
    /*
            margin-top: -120px;
            */
    /*
            margin-bottom: calc(120px - 105px);
            */
    margin-bottom: 0;
  }
  .carousel1 .banner-content {
    font-size: 1rem;
  }
  .banner-dot {
    width: 10px;
    height: 10px;
    margin: 0.75rem 1.4rem 0.5rem 0.3rem;
  }
  .banner-dot .clock-container {
    margin-left: -19px;
    margin-top: -19px;
  }
  .banner-dot .clock-container circle {
    r: 10px;
  }
  .banner-dot.active .main-circle {
    stroke-dashoffset: calc(300 - (300 * (12.4 / 60)));
  }
  .header {
    /*
        padding: 17px 30px;
        */
    padding: 17px 35px;
  }
  .header img {
    margin-right: 14px;
  }
  .header-title {
    font-size: 20px;
    width: unset;
  }
  .banner-carousel {
    height: 530px;
  }
  .banner-carousel .item {
    height: 530px;
  }
  .sus-text {
    padding: 30px;
  }
  .sus-text .title {
    font-size: 40px;
  }
  .sus-text .content {
    font-size: 18px;
  }
  .title {
    font-size: 1.6rem;
  }
  .circle {
    width: 11px;
    height: 11px;
    margin-top: -10px;
    margin-right: 15px;
  }
  #footer {
    font-size: 0.6rem !important;
  }
  .types {
    font-size: 0.8rem;
    padding: 5px 24px;
    margin-bottom: 0.4rem;
  }
  .header-title .header-text {
    letter-spacing: 0em;
  }
  #mobile-nav-modal .title {
    letter-spacing: 0em;
  }
}
.title .underline {
  width: 100%;
  background: black;
  border-radius: 30px;
  height: 0.5rem;
  /*
    margin-top:10px;
    */
  margin-top: 7px;
}
.banner-contianer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 3rem;
  align-items: flex-end;
}
.banner-contianer .underline {
  background-color: white;
  width: 2em;
}
.banner {
  height: 60vh;
  background-size: cover;
  background-position: center;
  position: relative;
  width: 100%;
  color: white;
}
.banner .title {
  color: white;
  font-size: 3rem;
}
.banner .accordion-header {
  overflow: hidden;
}
.banner .accordion-header .post-title {
  transition: height 3s, opacity 0.5s;
}
.accordion-item, .accordion-button, .accordion-button:focus, .accordion-button:not(.collapsed) {
  background-color: transparent;
}
.post-title {
  font-size: 2rem;
  font-weight: 700;
  opacity: 1;
  /*
    margin-bottom:1rem;
    */
}
.post-tag {
  margin-bottom: 0.5rem;
}
.post-tag .post-type, .post-tag .post-date {
  color: #A7A7A7;
}
.post-thumb {
  transition: 0.5s;
  min-height: 200px;
  flex: 0 0 400px;
}
.plusbtn {
  display: inline-block;
  border: 0px;
  box-shadow: unset;
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11C0 4.92487 4.92487 0 11 0V0C17.0751 0 22 4.92487 22 11V11C22 17.0751 17.0751 22 11 22V22C4.92487 22 0 17.0751 0 11V11Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.733333 11C0.733333 16.6701 5.32988 21.2667 11 21.2667C16.6701 21.2667 21.2667 16.6701 21.2667 11C21.2667 5.32988 16.6701 0.733333 11 0.733333C5.32988 0.733333 0.733333 5.32988 0.733333 11ZM11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0Z' fill='url(%23paint0_linear_47_103)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 11.6667V10.6667H15V11.6667H7Z' fill='%2355BBCC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.3334 7L11.3334 7L11.3334 15L10.3334 15L10.3334 7Z' fill='%2355BBCC'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_47_103' x1='-0.342657' y1='0.0497983' x2='24.0841' y2='2.2631' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2364CAD6'/%3E%3Cstop offset='1' stop-color='%2352BC8B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  transition: transform 0.2s ease-in-out;
}
.plusbtn.active {
  transform: rotate(-180deg);
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.733333 11C0.733333 16.6701 5.32988 21.2667 11 21.2667C16.6701 21.2667 21.2667 16.6701 21.2667 11C21.2667 5.32988 16.6701 0.733333 11 0.733333C5.32988 0.733333 0.733333 5.32988 0.733333 11ZM11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0Z' fill='url(%23paint0_linear_47_108)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 12V11H15V12H7Z' fill='%2355BBCC'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_47_108' x1='-0.342657' y1='0.0497983' x2='24.0841' y2='2.2631' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2364CAD6'/%3E%3Cstop offset='1' stop-color='%2352BC8B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.accordion-button {
  height: unset;
  transition: 1s;
  line-height: 1.5;
}
.accordion-button:after {
  border: 0px;
  box-shadow: unset;
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11C0 4.92487 4.92487 0 11 0V0C17.0751 0 22 4.92487 22 11V11C22 17.0751 17.0751 22 11 22V22C4.92487 22 0 17.0751 0 11V11Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.733333 11C0.733333 16.6701 5.32988 21.2667 11 21.2667C16.6701 21.2667 21.2667 16.6701 21.2667 11C21.2667 5.32988 16.6701 0.733333 11 0.733333C5.32988 0.733333 0.733333 5.32988 0.733333 11ZM11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0Z' fill='url(%23paint0_linear_47_103)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 11.6667V10.6667H15V11.6667H7Z' fill='%2355BBCC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.3334 7L11.3334 7L11.3334 15L10.3334 15L10.3334 7Z' fill='%2355BBCC'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_47_103' x1='-0.342657' y1='0.0497983' x2='24.0841' y2='2.2631' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2364CAD6'/%3E%3Cstop offset='1' stop-color='%2352BC8B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.accordion-button:focus {
  border: 0px;
  box-shadow: unset;
}
.accordion-button:not(.collapsed) {
  box-shadow: unset;
}
.accordion-button:not(.collapsed) .post-thumb {
  width: 0px;
  opacity: 0;
  flex: 0 0 0px;
}
.accordion-button:not(.collapsed) .post-title {
  /*
            height:0px;
            opacity:0;
            */
  color: #212529;
}
.accordion-button:not(.collapsed):after {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.733333 11C0.733333 16.6701 5.32988 21.2667 11 21.2667C16.6701 21.2667 21.2667 16.6701 21.2667 11C21.2667 5.32988 16.6701 0.733333 11 0.733333C5.32988 0.733333 0.733333 5.32988 0.733333 11ZM11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0Z' fill='url(%23paint0_linear_47_108)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 12V11H15V12H7Z' fill='%2355BBCC'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_47_108' x1='-0.342657' y1='0.0497983' x2='24.0841' y2='2.2631' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2364CAD6'/%3E%3Cstop offset='1' stop-color='%2352BC8B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.header-title .three-dot {
  opacity: 0;
  transition: 0.5s;
}
.header-title .circle-border {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border: 0px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  background: linear-gradient(132.51deg, #64CAD6 0%, #52BC8B 96.01%);
  opacity: 0;
  transition-duration: 0.5s;
}
.header-title:hover .three-dot {
  opacity: 1;
}
.header-title:hover .circle-border {
  opacity: 1;
}
@media screen and (max-width: 992px) {
  .post-thumb {
    transition: 0.5s;
    flex: 0 0 300px;
  }
}
@media screen and (max-width: 768px) {
  /*
    .accordion-container{
        .padding-2rem{
            padding-left: calc(2rem - 0.75rem)!important;
            padding-right: calc(2rem - 0.75rem)!important;
        }
    }*/
  .video.container .video-item.padding-2rem, .video.container .video-item:first-child.padding-2rem, .video.container .video-item:last-child.padding-2rem {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .padding-2rem {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .padding-0rem {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
  .margin-0rem {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
  }
  .header-title .circle-border {
    margin-right: 0.3rem;
    margin-left: 0.3rem;
  }
  .post-thumb {
    width: calc(100% - 2.5rem);
    margin: 0px 1.25rem;
    /*
        width: calc(100% - 4rem);
        margin: 0px 2rem;
        */
    height: 300px;
    flex: 0 0 260px;
  }
  .accordion-button:not(.collapsed) .post-thumb {
    height: 0px;
    width: unset;
    opacity: 0;
  }
  .accordion-button::after {
    display: none;
  }
  .banner-contianer {
    padding: 2rem;
  }
  .banner .title {
    font-size: 2rem;
  }
  .banner .banner-content {
    font-size: 1rem;
  }
  .accordion-body div {
    column-count: 1 !important;
  }
  .accordion-body .row .col {
    flex: 0 0 auto;
    width: 100%;
  }
  .banner-title {
    font-size: 2rem;
  }
  .post-title {
    margin-bottom: 0rem;
    font-size: 1.5rem;
  }
  .post-tag {
    margin-bottom: 0;
  }
  #mobile-nav-modal .header-title .three-dot {
    border-width: 0px 0px 7px 0px;
  }
}
.paddingtophome {
  padding-top: 2rem;
}
.paddingdestop {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .paddingtophome {
    padding-top: 0rem;
    margin-bottom: -1rem;
  }
  .paddingdestop {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
}
.page-link {
  color: #64c8d5;
}
.page-item.active .page-link {
  background-color: #64c8d5;
  border-color: #64c8d5;
}
.pagination {
  justify-content: center;
}
.gdpr-banner__button--opt-in {
  color: #fff;
  background: #1bb627;
}
.oc-link-green {
  color: #00AC4A !important;
}
.oc-link-oragne {
  color: #F97A05 !important;
}
.oc-link-strong {
  font-weight: 700 !important;
}

.bubble-1 {
  animation-name: animate1;
  animation-duration: 3.1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-2 {
  animation-name: animate2;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-3 {
  animation-name: animate3;
  animation-duration: 3.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-4 {
  animation-name: animate4;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-5 {
  animation-name: animate5;
  animation-duration: 2.3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-6 {
  animation-name: animate6;
  animation-duration: 3.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-7 {
  animation-name: animate7;
  animation-duration: 2.9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-8 {
  animation-name: animate8;
  animation-duration: 4.1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-9 {
  animation-name: animate9;
  animation-duration: 4.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-10 {
  animation-name: animate10;
  animation-duration: 3.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-11 {
  animation-name: animate11;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bubble-12 {
  animation-name: animate12;
  animation-duration: 3.3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes animate1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate4 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate5 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate6 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(18px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate7 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate8 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate9 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate10 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate11 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate12 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0);
  }
}
.bubble-13 {
  animation-name: animate13;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes animate13 {
  0% {
    transform: scale(0.2) translateY(0);
  }
  50% {
    transform: scale(0.2) translateY(200px);
  }
  100% {
    transform: scale(0.2) translateY(0);
  }
}