@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

.container{max-width: 1140px;}

/* ELEMENT style */
body{font-family: 'Roboto', sans-serif;}
a{text-decoration: none;}
h1{font-size:2.25rem; font-weight:400;} /* 36px-Regular */
h2{font-size:1.875rem; font-weight:500;} /* 30px-Bold */
h2 span{font-size:5rem; font-weight:400;} /* 82px-Regular */
h3{font-size:3rem; font-weight:700; line-height:3.75rem;} /* 48px-Bold-60l */
h5 span{font-size:1rem; font-weight:400;}
p{font-size:1rem; font-weight:400; line-height:1.75rem;} /* 18px-Regular-28l */
p a{color:#000;}
/*p a:hover{color:#000; border-bottom: solid 3px #ee1b2e; height:0.125rem; left:0; width:100%;}*/
ol, ul{line-height:1.75rem;}
ul.bltd{list-style: none; padding:0; margin: 0;}
ul.bltd li{background: url("../../assets/img/bltd.png") 0 8px no-repeat; margin-left:10px; padding-left:25px;}

/* SECTION spacing */
.sectionspcingtop{padding-top:3rem;}
.sectionspcingbottom{padding-bottom:3rem;}	
.sectionspcingtb{padding:3rem 0;}
@media (min-width: 768px){.sectionspcingtopbottom{padding:4.75rem 0;}.sectionspcingtop{padding-top:8.75rem;} /*140px*/ .sectionspcingbottom{padding-bottom:8.75rem;} .sectionspcingtb{padding:8.75rem 0;}}

/* NUMBER section */
#numbers .txt-number{font-size:3.5rem;}
#numbers .txt-number span{font-size:2.5rem;}
.smttl{border:solid 1px #000;-webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px; padding:1px 10px;font-size:0.8rem;}

/* MEDIA ROOM scroll */
#inrbanner .media-room {background: url("../../assets/img/banner1.jpg"); min-height: 35rem; background-attachment: fixed;  background-position: center; background-repeat: no-repeat; background-size: cover;}

#mediaroom .card{width: 80%; margin: -50px auto 0 auto;}
#mediaroom .card .card-text{font-size: 1.2rem;}

/* -- INNER BANNER */
#inrbanner  .hm-video {  height: 100%;  left: 0;   -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%;transform: translateY(-50%); width: 100%;}
#inrbanner  .carousel-sec {color: #fff; height: auto; max-width: 100%; /*padding-top: 40px;*/ position: relative;}
#innrbanner  .carousel-sec {color: #fff; height: auto; max-width: 100%; /*padding-top: 40px;*/ position: relative;}
.hm-banner-desc {position:relative;z-index:5;padding-top: 333px;padding-bottom: 56px;}
#inrbanner .carousel-caption{text-align: left; bottom:4rem; left:0; right:0;}
#inrbanner .carousel-item {background: url("../../assets/img/banner1.jpg"); min-height: 46rem;   background-position: center; background-repeat: no-repeat; background-size: cover;}
#innrbanner .who-we-banner{background: url("../../assets/img/who-we-banner.jpg"); min-height: 46rem;   background-position: center; background-repeat: no-repeat; background-size: cover;}
#innrbanner .carousel-caption{text-align: left; bottom:4rem; left:0; right:0;}
/*.who-we-banner {background: url("../../assets/img/who-we-banner.jpg"); min-height: 46rem;   background-position: center; background-repeat: no-repeat; background-size: cover;}
*/.sustainability-banner {background: url("../../assets/img/banner1.jpg"); min-height: 46rem;   background-position: center; background-repeat: no-repeat; background-size: cover;}
.bnrlibattery {background: url("../../assets/img/bnr-libattery.jpg"); min-height: 35rem;   background-position: center; background-repeat: no-repeat; background-size: cover;}
.catalyst-banner {background: url("../../assets/img/bnr-catalyst-recycling.jpg"); min-height: 35rem;  background-position: center; background-repeat: no-repeat; background-size: cover;}

@media (max-width: 768px) { 
/*	#inrbanner .carousel-item{background: unset;background-color:#080808; }*/
	.sustainability-banner {background: unset; }
	#inrbanner .carousel-caption{left:0; right:0; /*bottom:2rem;*/}
	#innrbanner .carousel-caption{left:0; right:0; /*bottom:2rem;*/}
	/*#inrbanner .carousel-caption{position:unset;background-color:#080808;}*/
	#inrbanner .carousel-caption h1{font-size:1.5rem;}		
	#innrbanner .carousel-caption h1{font-size:1.5rem;}		
}
@media (min-width: 768px) {
	#inrbanner .carousel-item {min-height: 46rem;}	
	#innrbanner .who-we-banner {min-height: 46rem;}	
	#inrbanner .carousel-caption{left:0; right:0; bottom:2rem;}	
	#innrbanner .carousel-caption{left:0; right:0; bottom:2rem;}	
}
@media (min-width: 992px) { 
	#inrbanner .carousel-caption{bottom:4rem;}
	#innrbanner .carousel-caption{bottom:4rem;}
	.hm-banner-desc{bottom: 1.2rem !important;}
}

@media (max-width: 768px) {
	.bnrlibattery {background: unset;}
	#banner .hm-video {height: 60% !important;top: 30% !important;transform: translateY(-50%) !important;}
	#hmmob-view-head{background-color:#080808;margin-top: -225px;}
	#inmob-view-head{background-color:#080808;margin-top: -175px;position: relative;z-index: 99;}
	#mob-view-head{background-color:#080808;}
	#inrbanner .carousel-item {background-size: cover;background-position: top;}
	#innrbanner .who-we-banner {background-size: cover;background-position: top;}
	#inrbanner .carousel-item {min-height: 25.1rem;}
	#innrbanner .who-we-banner{min-height: 25.1rem;}
}
/* HOME page */
/*-- HEADER --*/
.navbar-expand-lg .navbar-nav .nav-link{padding-left:0; padding-right:0; color:#fff; font-size:18px;}
#header {position: absolute;z-index: 999; padding: 1.6rem 0 0 0;}
.header {position: absolute;z-index: 99;}
#header .dropdown-toggle::after{border:unset;}
#header .navbar-nav .nav-link:before {border-bottom: solid 3px #ee1b2e; content: ""; height: .125rem;left: 0;opacity: 0;position: absolute; top: 82%;transition: opacity .6s ease-out;width: 100%;}
#header .navbar-nav .nav-link:hover:before ,#header .navbar-nav .active:before{ opacity: 1;}
@media  (max-width: 991px) {
	    .overlay {  height: 100%;  width: 0;position: fixed;  z-index: 1;  top: 0; left: 0; background-color: rgb(0,0,0);  background-color:#2b2b2b;  overflow-x: hidden; transition: 0.5s; }
        .overlay-content {  position: relative;    width: 100%;  top:10%;  text-align: center;  margin: 20px 30px; }
        .overlay a {   padding: 8px;   text-decoration: none;    font-size: 36px;    color: #818181;    display: block;  transition: 0.3s;  line-height: 50px;font-size: 1.5rem;}
        .overlay a:hover, .overlay a:focus {  color: #f1f1f1;   }
        .overlay .closebtn {  position: absolute;  top: 20px;right: 45px;  font-size: 60px; }      
}
@media screen and (max-height: 450px) {
            .overlay a {    font-size: 20px    }
            .overlay .closebtn { font-size: 40px;  top: 15px; right: 35px;  }
        }
/*
 -- MOBILE-RESPONSIVE-HEADER */
.navigation__checkbox {display: none;}
.navigation__button {  position: absolute; top: 2.8rem;  right: 1.5rem; height: 3rem; width: 3rem; text-align: center; background-color: transparent;z-index: 300; cursor: pointer;}
.navigation__background { position: fixed;top: 2rem; right: 2rem; height: 0.01rem; width: 0.01rem; background:#2b2b2b; background-size: cover; background-position: center; z-index: 100;transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);}
.navigation__nav { position: fixed; top: 0; left: 0;  height: 100vh; opacity: 0;  width: 0; visibility: hidden; z-index: 200;transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.navigation__nav .hover-effect{position: relative;}
.navigation__nav .hover-effect::before{content: "";position: absolute;width:100%;top:89%;left: 0;background-color: #ee1b2e;transition: opacity .6s ease-out; opacity: 0;}
.navigation__nav .hover-effect:hover:before{height: 3px;transition-duration:0.8s;opacity: 1;}
.navigation__nav .hover-effect:hover{color: #fff !important;transition-duration:0.8s;}
.navigation__nav .hover-effect-border{position: relative;}
.navigation__nav .hover-effect-border::before{content: "";position: absolute;height: 2px; width:100%;top:89%;left: 0;background-color: #ee1b2e;opacity:1;}
.navigation__nav .hover-effect-border:hover:before{height: 2px;transition-duration:0.5s; opacity:0;}
.navigation__nav .hover-effect-border:hover{color: #ee1b2e !important;transition-duration:0.5s;}
.navigation__list { @include center;position: absolute; top: 50%;left: 60%; transform: translate(-50%, -50%);text-align: left; width: 100%; list-style: none;}
.navigation__link:link, .navigation__link:visited {  display: inline-block; color: #f4f4f4;  font-size: 1.5rem;  text-decoration: none; transition: all .2s;line-height:2rem;}
.navigation__link span { margin-right: 1.5rem;display: inline-block;}
.navigation__checkbox:checked ~ .navigation__background {	transform: scale(50000);-webkit-transform: scale(50000);-moz-transform: scale(50000);-ms-transform: scale(50000);-o-transform: scale(50000);}
.navigation__checkbox:checked~.navigation__nav {  width: 100%;  visibility: visible; opacity: 1;}
.navigation__icon { position: relative;  }
.navigation__icon,.navigation__icon::before,.navigation__icon::after { display: inline-block;width: 2.2rem; height: 3px; background-color: #fff;}
.navigation__icon::before,
.navigation__icon::after { content: '';  position: absolute; left: 0;transition: all 200ms;}
.navigation__icon::after { top: .8rem;}
.navigation__button:hover .navigation__icon::after { top: 1rem;}
.navigation__checkbox:checked+.navigation__button .navigation__icon { background-color: transparent;}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before { top: 0;  transform: rotate(135deg);}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {top: 0; transform: rotate(-135deg);}
 

/* -- trial-mob */

@media (max-width: 991px) {
	.navbar-nav .nav-link.active{color:#fff;}
	.navbar-nav .dropdown-menu{position:unset!important;transform: unset!important;text-align:left;transition:0.8s;}
	.navbar-nav .dropdown-menu .dropdown-item{color:#fff;display: unset;padding:0 0 10px 0;}
	.navbar-nav .dropdown-menu .dropdown-item:hover{background-color:transparent;}
}
@media(max-width:991px) {
    #header {top:0;padding:0;}
    .nav-link{font-size:2.125rem;display: inline-flex;}
    #header .dropdown-toggle::after { vertical-align: 0;margin-left: 10px;}
    #header .dropdown-menu{background-color:#2b2b2b;color:#fff;}
    #header .dropdown-menu a{color:#fff;}
    .navbar-collapse{background-color:#2b2b2b;}
	#header .navbar-nav .nav-link::before{content:unset;}
}

/* -- BANNER */
#banner  .hm-video {height: 100%;left: 0;-o-object-fit: cover;object-fit: cover;position: absolute;top: 50%;transform: translateY(-50%);width: 100%;}
#banner  .carousel-sec {color: #fff; height: auto; max-width: 100%; padding-top: 40px; position: relative;}
#banner  .hm-banner-desc {position:relative;z-index:5;padding-top: 450px;padding-bottom: 72px;}
#banner  .banner-video-desc {position:relative;z-index:5;padding-top: 530px;padding-bottom: 72px;}
#banner  .banner-desc {position:relative;z-index:5;padding-top: 590px;padding-bottom: 72px;}
#banner .carousel-caption{text-transform: uppercase; text-align: left; bottom:0px; left:0; right:0;}
#banner .carousel-caption h2 span{font-size: 5rem; font-weight: 200;}
#banner .carousel-caption p {font-size: 1.2em;}
#banner .carousel-caption p i{padding:0 10px;}
/*#banner .carousel-item {background: url("../../assets/img/banner1.jpg"); max-height: 45rem; background-attachment: fixed;  background-position: center; background-repeat: no-repeat; background-size: cover;}
*/@media (max-width: 768px) { 
	#banner .carousel-item {max-height: 35rem;}
	#banner .carousel-caption{text-align: center;/* bottom:170px !important;*/}
	#banner .carousel-caption h2{font-size:1.5rem;}		
	#hmmob-view-head h2{font-size:1rem;}		
	#banner .carousel-caption h2 span{font-size: 3rem; font-weight: 200;}
	#hmmob-view-head span{font-size: 3rem; font-weight: 200;}
	#banner .carousel-caption p {font-size: 1rem;}	
	#hmmob-view-head p {font-size: 1rem;}	
	#banner .carousel-caption p i{padding-right: 10px;}		
	#hmmob-view-head p i{padding-right: 10px;}		
}
@media (min-width: 768px) {
	#banner .carousel-caption h2{font-size:1.5rem;}		
	#banner.carousel-caption h2 span{font-size: 3rem; font-weight: 200;}
	#banner .carousel-caption p {font-size: 1rem;}	
}
@media (max-width: 992px) {
	#banner .carousel-caption{  bottom:50px; }
}
@media (min-width: 992px) { 
	#banner .carousel-caption h2 span{font-size: 4rem; font-weight: 200;}	
}

/* -- PARALLAX */
.parallax{background-image: url("../../assets/img/hmimg-power-of-zero.jpg"); min-height: 40.625rem; /* Set height 650px */ background-attachment: fixed;  background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden}
.parallax-content {width:35.625rem; padding:3.125rem;}
@media (max-width: 576px) {.parallax{min-height: 20rem; background-attachment: scroll; background-size: contain;} .parallax-content {width:100%; padding:0.938rem;}}
@media (min-width: 576px) {.parallax{min-height: 20rem;} .parallax-content {width:100%; padding:3.125rem;}}
@media (min-width: 768px) {#power-of-zero{margin-bottom:320px}	.parallax{min-height: 28.125rem;} .parallax-content{width:35.625rem; padding:3.125rem; position: absolute; left:18%; bottom:-260px;}}
@media (min-width: 992px) {#power-of-zero{margin-bottom:320px}	.parallax{min-height: 34.375rem;} .parallax-content{width:35.625rem; padding:3.125rem; position: absolute; left:40%; bottom:-260px;}}
@media (min-width: 1200px) {#power-of-zero{margin-bottom:320px} .parallax{min-height: 40.625rem;} .parallax-content{width:35.625rem; padding:3.125rem; position: absolute; left:50%; bottom:-260px;}}	

/* -- ESG CARDS */
#hmesg .card, #mediaroom .card{border:none; -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1);}
#hmesg .card, #mediaroom .card, #hmesg .card img, #mediaroom .card img{border-radius: 0px;}
#hmesg .card-footer, #mediaroom .card-footer{background: none; border:none; padding-bottom: 15px; }

/* CATALYST RECYCLING page */
/* -- CRE */
.crebg{background-image: url("../../assets/img/bg-cre.jpg"); min-height: 50rem; /* Set height 800px */ background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden}
.crecontent{width:35.625rem; padding:3.125rem; background: #fff;}
@media (max-width: 576px) {.crebg{min-height:20rem;} .crecontent {padding:2rem 0.938rem;}}
@media (min-width: 576px) {.crebg{min-height:20rem;} .crecontent {width:100%; padding:2rem 0;} #cresec{margin: 0 60px;}}
@media (min-width: 768px) {.crebg{min-height:20rem;} .crecontent {width:100%; padding:2rem 0;}}
@media (min-width: 992px) {.crebg{min-height:50rem;} .crecontent{width:35.625rem; padding:2rem; position:absolute; right:0rem;; bottom:5.5rem;} #cresec{margin:0;}}
@media (min-width: 1200px){.crebg{min-height:50rem;} .crecontent{width:35.625rem; padding:2rem; position:absolute; right:0rem;; bottom:5.5rem;} #cresec{margin:0;}}	

/* LITHIUM-ION BATTERY RECYCLING page */
/* -- CR */
.crbg{background-image: url("../../assets/img/bg-cr.jpg"); min-height: 31.25rem; /* Set height 800px */ background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden}
.crbg1{background-image: url("../../assets/img/bg-lib.jpg"); min-height: 31.25rem; /* Set height 800px */ background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden}

@media (max-width: 992px) {
.crbg{background:none;}
}

.crcontent{width:28rem; padding:3.125rem; background: #fff;}
@media (max-width: 576px) {.crbg{min-height:20rem;} .crcontent {padding:2rem 0.938rem;}}
@media (min-width: 576px) {.crbg{min-height:20rem;} .crcontent {width:100%; padding:2rem 0;} #cresec{margin: 0 60px;}}
@media (min-width: 768px) {.crbg{min-height:20rem;} .crcontent {width:100%; padding:2rem 0;}}
@media (min-width: 992px) {.crbg{min-height:31.25rem;} .crcontent{width:28rem; padding:2rem; position:absolute; right:0rem;; bottom:8.5rem;} #cresec{margin:0;}}
@media (min-width: 1200px){.crbg{min-height:31.25rem;} .crcontent{width:28rem; padding:2rem; position:absolute; right:0rem;; bottom:8.5rem;} #cresec{margin:0;}}	

/* -- LIBRI */
.libribg{background-image: url("../../assets/img/bg-lib.jpg"); min-height: 50rem; /* Set height 800px */ background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden}
.libricontent{width:35.625rem; padding:3.125rem; background: #fff;}
@media (max-width: 576px) {.libribg{min-height:20rem;} .libricontent {padding:2rem 0.938rem;}}
@media (min-width: 576px) {.libribg{min-height:20rem;} .libricontent {width:100%; padding:2rem 0;} #cresec{margin: 0 60px;}}
@media (min-width: 768px) {.libribg{min-height:20rem;} .libricontent {width:100%; padding:2rem 0;}}
@media (min-width: 992px) {.libribg{min-height:50rem;} .libricontent{width:35.625rem; padding:2rem; position:absolute; right:0rem;; bottom:6.2rem;} #cresec{margin:0;}}
@media (min-width: 1200px){.libribg{min-height:50rem;} .libricontent{width:35.625rem; padding:2rem; position:absolute; right:0rem;; bottom:6.2rem;} #cresec{margin:0;}}	

/* ZINK RECYCLING page */
#inrbanner .zinc-banner {background:unset; background-attachment: fixed;  background-position: center; background-repeat: no-repeat; background-size: cover;}

/* ZINK CC */
@media (max-width: 992px) {#zinkcc{background: #f5f5f5; padding:3rem;} .zinkcccontent{background: #fff; padding:3rem ;margin-bottom:3rem;}}
@media (min-width: 992px) {#zinkcc{background: #f5f5f5; padding:3rem 3rem 3rem 0;} .zinkcccontent{background: #fff; padding:3rem;}}

/* WHO WE ARE page */
/* -- RND */
.rndbg{background-image: url("../../assets/img/bg-rnd.jpg"); min-height: 50rem; /* Set height 800px */ background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; overflow:hidden}
.rndcontent{width:35.625rem; padding:3.125rem; background: #fff;}
@media (max-width: 576px) {.rndbg{min-height:20rem;} .rndcontent {padding:2rem 0.938rem;}}
@media (min-width: 576px) {.rndbg{min-height:20rem;} .rndcontent {width:100%; padding:2rem 0;} #cresec{margin: 0 60px;}}
@media (min-width: 768px) {.rndbg{min-height:20rem;} .rndcontent {width:100%; padding:2rem 0;}}
@media (min-width: 992px) {.rndbg{min-height:50rem;} .rndcontent{width:35.625rem; padding:2rem; position:absolute; right:0rem;; bottom:6.2rem;} #cresec{margin:0;}}
@media (min-width: 1200px){.rndbg{min-height:50rem;} .rndcontent{width:35.625rem; padding:2rem; position:absolute; right:0rem;; bottom:6.2rem;} #cresec{margin:0;}}	

/* -- TIMELINE */
.main-timeline {position: relative;}
.main-timeline::after {content: "";position: absolute;width: 6px;background-color: #939597;top: 0;bottom: 0;left: 50%;margin-left: -3px;}
.timeline {position: relative;background-color: inherit;width: 50%;}
.timeline::after {content: "";position: absolute;width: 25px;height: 25px;right: -13px;background-color: #e10431;border: 5px solid #fff;top: 15px;border-radius: 50%;z-index: 1;}
.left {padding: 0px 40px 0px 0px;left: 0;}
.right {padding: 0px 0px 0px 40px;left: 50%;}
.left::before {content: " ";position: absolute;top: 18px;z-index: 1;right: 30px;border: medium solid white;border-width: 10px 0 10px 10px;border-color: transparent transparent transparent white;}
.right::before {content: " ";position: absolute;top: 18px;z-index: 1;left: 30px;border: medium solid white;border-width: 10px 10px 10px 0;border-color: transparent white transparent transparent;}
.right::after {left: -12px;}
@media screen and (max-width: 600px) {
	.main-timeline::after {left: 31px;}
	.timeline {width: 100%;padding-left: 70px;padding-right: 25px;}
	.timeline::before {left: 60px;border: medium solid white;border-width: 10px 10px 10px 0;border-color: transparent white transparent transparent;}
	.left::after, .right::after {left: 18px;}
	.left::before {right: auto;}
	.right {left: 0%;}}

/* -- LEADERSHIP */
#leadership .container{background: #f5f5f5; padding: 2rem;}
#leadership .card{background: none; border: none; text-align: center;}
#leadership .card p{line-height:1.55rem;}
#leadership .card img{filter: grayscale(100%);}
#leadership .card:hover img{filter:none;  transition: filter 1s;}

/*--- FOOTER ---*/
#footer .footer-top {background-color: #080808;}
#footer .hover-effect{position: relative;}
#footer .hover-effect::before{content: "";position: absolute;height: 2px; width:100%;top:110%;left: 0;background-color: #ee1b2e;}
#footer .hover-effect:hover:before{height: 0px;transition-duration:0.5s;}
#footer .hover-effect:hover{color: #ee1b2e !important;transition-duration:0.5s;}
#footer p span{font-weight:500;} 
#footer .iconln:before{font-family:FontAwesome; font-size:22px; margin-right:10px;}
#footer .iconln:before{content:"\f08c";}
#copyright{font-size:1rem;font-weight:400; line-height:1.75rem;}
/*-------------------CONTACTUS-------------------*/
#contactus .form-control,#contactus .form-select{ background-color: #f4f4f4; border: unset;}
#contactus .btn ,#Careers .btn,#the-battery-show .btn{background-color: #ee1b2e; border:1px solid transparent   !important; border-radius: 10px;transition: 0.5s;color:#fff;}
#the-battery-show .btn:hover,btn.active ,#Careers .btn:hover ,btn:hover {background-color: #fff;border:1px solid #ee1b2e !important;transition: 0.8s;color:#ee1b2e;}


#the-battery-show .modal-body, #the-battery-show .modal-footer {
	background: #000000;
}
.circle_icon {
	width: 30px;
	height: 30px;
	line-height: 30px !important;
	text-align: center;
}
.close_btn {
	position: absolute;
	top: -42px;
	right: -46px;
	border-radius: 2px;
	background: white;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	padding: 6px;
}

.btn-close{opacity:1}
.modal-content {
	margin-top: 30px;
}
@media screen and (max-width: 600px) {
	.modal-content {
		margin-top: 50px;
	}

	.close_btn {
		right: 0px;
	}
}