[id*="custom-html"]{padding:0 !important; position:relative;}
.text-show{display:block !important;}
.text-bold{font-weight: 500;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-blue{color:#00b2ff;}
.text-green{color:#64be00;}
.small-text{font-size: 15px;}
.text-dark-blue{color:#0c3e91;}
.text-mid-blue{color:#0056a3;}
.text-mid-light-blue{color:#006eb7;}
.text-mid-light-green{color:#1ea23a;}
.text-mid-green{color:#007f38;}
.text-mid-dark-green{color:#006c32;}
.text-dark-green{color:#004a1f;}
.border-dark-blue{color:#0c3e91;}
.border-mid-blue{color:#0056a3;}
.border-mid-light-blue{color:#006eb7;}
.border-mid-light-green{color:#1ea23a;}
.border-mid-green{color:#007f38;}
.border-mid-dark-green{color:#006c32;}
.border-dark-green{color:#004a1f;}
.light-blue{background:#00b2ff; padding: 5px 0;}
.dark-blue{background:#0c3e91; padding: 5px 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
.light-green{background:#64be00; padding: 5px 0;}
.dark-green{background:#004a1f; padding: 5px 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
#report-section .btn.color-adjusted {background-color: #fff !important; border-color: #fff !important; color: #003eab !important;}
#report-section .border-adjusted {color: #fff !important;}
#report-section .border-adjusted:hover {background-color: transparent!important;}
#report-section .border-adjusted::before {background-color: #fff !important;}

.position-absolute {position: absolute;}
blockquote {border-width: 0 !important;}

.zyx-paragraph--top-hero{position: relative; padding: 0 !important;}
.zyx-paragraph--top-hero .row {height: 500px; align-items: center;}

.sponsor-box {position: relative;}
.sponsor-box img {display: block; width: 100%; height: 400px; object-fit:cover !important;}
.sponsor-box .description {color: #fff; top: 0; padding: 1rem; left: auto; right: auto;}
.sponsor-box .description .h1{font-size: 80px; font-weight: normal !important;}
.sponsor-box .overlay {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);overflow: hidden; width: 100%;height: 70px; padding:0 1rem; transition: .5s ease;}
.sponsor-box .overlay .description {display: none; padding: 0 1rem;}
.sponsor-box .overlay .description ul {padding-left: 0;}
.sponsor-box .overlay:hover {height: 100%;}
.sponsor-box .overlay .caption {color: #fff; display:flex;height: 70px; align-items: center;}
.sponsor-box .overlay .caption h5{align-items: center!important; color:#fff !important; margin: 0 auto!important; text-align: center;}
.sponsor-box .overlay:hover .description{display: block;}

.border-line-dotted{border-bottom: 2px dotted #000; width: 100%;}

.green-design-canvas {margin-top: 3rem}
.green-design-canvas ul {font-size: 21px;}
.green-design-timeline {margin-top: 1rem;}

.green-life-canvas {position: relative; height: 569px;}
.green-life-canvas img {max-width: none !important;}
.greening-life-cycle {position: relative; height: 480px; display: flex; justify-content: center;}
.border-up {position: absolute; top: 0; height: 226px;}
.border-down{position: absolute; bottom: 0; height: 254px;}
.green-life-cycle-bottom-line {position: absolute; bottom: 0; left: -28px;}
.green-life-cycle {text-align: center; padding: 2rem;}
.green-life-cycle h6{margin-top: 0 !important; font-size: 0.9rem !important;}
.green-life-cycle-01 {width: 175px;}
.green-life-cycle-02 {width: 175px;}
.green-life-cycle-03 {width: 183px;}
.green-life-cycle-04 {width: 175px; height: 340px;}
.green-life-cycle-05 {width: 175px;}
.green-life-cycle-06 {width: 175px;}
.green-life-cycle-07 {width: 189px;}
.odd-life-cycle {margin-left: -19px; margin-right: -20px;}
.even-life-cycle {margin-left: 0; margin-right: 0; display: flex; align-items: end;}
.even-life-cycle-04{margin-left: 1px; margin-right: -1px; display: flex; align-items: end;}
.green-life-cycle .img-box {height: 101px; display: flex; justify-content: center; align-items: center;}
.green-life-cycle .h2, .timeline-content .h2{font-weight: 600 !important;}

.expand-line {border-bottom: 2px solid #000;}
.open-close-button {width: 2em; height: 2em; margin: auto; margin-bottom: -1rem; font-size: 1.2rem; position: relative; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); cursor: pointer;}
.open-close-button:before {content: ""; display: block; position: absolute; background-color: #00b2ff; width: 80%; height: 6%; left: 10%; top: 47%;}
.open-close-button:after {content: ""; display: block; position: absolute; background-color: #00b2ff; width: 6%; height: 80%; left: 47%; top: 10%;}
.open-close-button.open {-moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);}
.close-button {width: 2em; height: 2em; margin: 1rem auto; font-size: 1.2rem; position: relative; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);  cursor: pointer;}
.close-button:before {content: ""; display: block; position: absolute; background-color: #00b2ff; width: 80%; height: 6%; left: 10%; top: 47%;}
.close-button:after {content: ""; display: block; position: absolute; background-color: #00b2ff; width: 6%; height: 80%; left: 47%; top: 10%;}
.timeline{position:relative;}
.timeline-content {display: none; min-height: 950px;}
.middle-line{text-align:center; position:absolute; top:0; left:0; right:0; margin:0 auto; width: 2px; height:950px; background: #555;}
.line-year{width: 80px; border: 1px dashed;}
.milestoneRight{text-align: left; width: 50%;}
.milestoneLeft{text-align: right; width: 50%;}
.timeline-milestone .text-year{font-weight: 500; text-align: right; font-size: 2.66rem;}
.timeline-milestone .text-desc{text-align: left;}
.timeline-milestone .dot span {vertical-align: middle; line-height: inherit !important;}

#minimal-section h2, #package-section h3, #supply-chain-section h3{display: none;}
#package-section .col-md-5{width: 50%;}
#package-section .col-md-5.offset-md-1{margin-left: 0 !important;}

.top-header-canvas {position:relative; height:500px; overflow:hidden; z-index:0;}
.top-header-canvas video {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;}
.top-header-canvas .d-flex {height: 500px;}
.top-header-canvas .banner-title{color: #fff; position: relative; width: 100%; z-index: 1;}

#sustainable-manufacturing {padding: 0 !important;}
#sustainable-manufacturing .row{min-height: 500px; align-items: center;}
#minimal-section .col-md-5, #sustainable-manufacturing .col-md-5{width: 100%;}
#sustainable-manufacturing h2{display: none;}
.video-canvas {position:absolute; width:100%; min-height:500px; overflow:hidden; top:0; left:0;}
.video-canvas video{z-index:0;}
.banner-title{position:relative; z-index:1; display:flex; align-items:center; min-height:500px;}

#report-section h2{display: none;}
#report-section .col-md-5 {width: 80%;}

.award-logo img {height: 50px; width: auto;}

.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 1500px) {
    .green-design-canvas{margin-top: 1.5rem}
    .green-design-canvas ul{font-size: 19px;}
    .green-design-canvas img {height: 60px;}  
}

@media (max-width: 1500px) and (min-width: 1100px) {
    .green-design-canvas .h3 {font-size: 30px;}
}

@media (max-width: 1100px) {
    .green-life-canvas, .greening-life-cycle {height: auto;}
    .green-life-cycle-bottom-line img, .border-up, .border-down {display: none;}
    .greening-life-cycle {flex-wrap: wrap;}
    .even-life-cycle, .even-life-cycle-04 {align-items: start;}
    .odd-life-cycle, .even-life-cycle-04 {margin-left: 0; margin-right: 0;}
    .green-life-cycle-04 {height: auto;}
}

@media (max-width: 900px) {
	.top-header-canvas .banner-title {width: 100%;}
    .number-caption span.value{font-size: 100px;}
    .number-caption span.percentage-text{font-size: 80px;}
    .eco-friendly-section .left-side, .eco-friendly-section .right-side {height: auto; width: 100%;}
    .eco-friendly-section .imgLink img {height: 400px;}
}

@media (max-width:850px) {
    .sponsor-box .overlay{height: 100%;}
    .sponsor-box .overlay .description {display: block;} 
    .sponsor-section.d-flex{flex-direction: column;}
    .sponsor-section .col.me-2{margin-right: 0 !important; margin-bottom: 1rem;}
}


@media (max-width:700px) {
	#statement-section{height:auto; margin-top:0; background-size:cover !important;}
    .timeline-canvas {margin-top: 1rem;}
    .line-year{width:auto;}
    #supply-chain-section {background-position: 60% center!important; text-align: left;}
}

@media (max-width: 500px) {
    #product-sustainability .zyx-paragraph__background-image img {object-position: 70%;}
    .top-header-canvas .banner-title h2{font-size: 2rem;}
    .green-life-cycle .img-box{height: 100px;}
    .line-year, .timeline-milestone .dot span {display: none;}
    .green-life-cycle {width: auto; padding: 0 0 1rem;}
    .green-design-canvas img {height: 40px; width: auto;}
    #package-section .col-md-5{width: 100%;}
    .odd-life-cycle, .even-life-cycle, .even-life-cycle-04 {width: 50%; justify-content: center;}
    .sponsor-box img {height: 300px;}
    }

@media (max-width: 400px) {
    .sponsor-box.hazardous img {height: 400px;}
}