/*-- Use For Custom Styling --*/

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



/*   Color Code



Grey = #707070;

SkyBlue = #5797EF;

DarkBlue = #1E4CC1;

light Blue = #e0eefa;



*/



html {

  scroll-behavior: smooth;

}



body, h1, h2, h3, h4, h5, h6, p, div{

	font-family: "Roboto", sans-serif !important;

	font-weight: 300;

	color: #707070 !important;

}



section{

		/*margin-bottom: 60px;*/

		padding: 0px 0px !important;

		/*margin-bottom: 60px;*/

	

}



#loader {

	height: 100vh;

	width: 100%;

	overflow: hidden;

	z-index: 1200;

	background: #5797EF !important;

	position: fixed;

}



.dot1, .dot2, .dot3 {

	background-color: #ffffff !important;

}





ul, ol, dl {

  list-style-position: outside;

  margin-bottom: 25px;

  list-style-type: decimal !important;

}





ul li, ol li, dl li{

  font-size: 16px;

  line-height: 20px;

  margin-bottom: 10px;

}



p{font-weight: 300 !important;}



.display-none{	display: none !important;}

.display-block{display: block !important;}





.alt-font{

	font-family: "Roboto", sans-serif !important;

	font-weight: 300;

}



.dummy-row{

 display: block !important;

 height: 80px !important;

}



.text-bold{ font-weight: 600 !important;}



.upperCase{text-transform: uppercase;}



.round-corner40-img{border-radius: 40px 40px;}

.round-corner30-img{border-radius: 40px 40px;}

.round-corner30-img{border-radius: 40px 40px;}

.round-corner30-img{border-radius: 40px 40px;}



.mobile-view{display: block;}

.mobile-hide{display: none;}

.desktop-view{display: block;}

.desktop-hide{display: none;}



.top-0px{top: 0px !important;}

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

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

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

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

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

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

.top-70px{top: 70px !important;}

.top-80px{top: 80px !important;}

.top-90px{top: 90px !important;}

.top-100px{top: 100px !important;}



.bottom-0px{bottom: 0px !important;}

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

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

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

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

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

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

.bottom-70px{bottom: 70px !important;}

.bottom-80px{bottom: 80px !important;}

.bottom-90px{bottom: 90px !important;}

.bottom-100px{bottom: 100px !important;}





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

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

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

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

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

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

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

.margin-top-70px{margin-top: 70px !important;}

.margin-top-80px{margin-top: 80px !important;}

.margin-top-90px{margin-top: 90px !important;}

.margin-top-100px{margin-top: 100px !important;}



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

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

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

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

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

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

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

.margin-bottom-70px{margin-bottom: 70px !important;}

.margin-bottom-80px{margin-bottom: 80px !important;}

.margin-bottom-90px{margin-bottom: 90px !important;}

.margin-bottom-100px{margin-bottom: 100px !important;}







.bg-white{background-color: #ffffff !important;}

.bg-light-blue{background-color: #e0eefa !important;}







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



.text-blod{ font-weight: 400 !important;}





.fill-black{fill: #000000;}

.fill-grey{fill: #707070;}



.Vertical-align{

	position: absolute;

	top: 50%;

	-webkit-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	transform: translateY(-50%);

	left: 0;

	right: 0;

	margin: auto;

	text-align: center;

}



.rotated-180{	transform: rotate(180deg);}



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

.text-grey{color: #707070 !important;}



.bg-dark-blue{background-color: #1E4CC1 !important;}



.svg-fill-white{	fill:	#ffffff !important;	color: #ffffff !important;}

.svg-fill-grey{	fill:	#707070 !important;	color: #707070 !important;}









/*       N A V    B A R  ***********************************/



nav.navbar.navbar-default.nav-white ul.nav > li > a, .nav-white .header-social-icon a, .nav-white .header-search-form:focus{

	 font-size: 11px !important;

		border: 1px solid transparent;

}



header nav.navbar{

	border-radius: 0px 0px 40px 40px;

	height: 80px;

	background: transparent;

	font-size: 10px !important;

}



header a.logo img{

	max-height: 80px;

}



.TopNavLogoSVG{

		max-height: 50px;

		height: 50px !important;

		width: 200px !important;

		margin-top: 0px;

}



.TopNavLogoSVG-REV{

		max-height: 50px;

		height: 50px !important;

		width: 200px !important;

		margin-top: -50px;

}



#myNavbar{

	font-family: "Roboto", sans-serif !important;

	font-weight: 300;

}



#myNavbar:hover{

	color: #000000 !important;

}



/*

.construction header nav.navbar .navbar-nav > li > a,

nav.navbar.bootsnav ul.nav > li > a,

.construction .header-search-form {

     color: #707070 !important;

 }

 */



#Language-btn{

position: relative;
    width: 28px !important;
    border-radius: 4px;
    cursor: pointer;
    z-index: 99;
    right: 0;
    top: 14px;


}





.menu_bars{

    right: 2%;

}



.construction header nav.navbar .navbar-nav > li > a:hover,

nav.navbar.bootsnav ul.nav > li > a:hover,

.construction .header-search-form:hover {

     /*color: #000000 !important;

					border: 1px solid #ffffff !important;

					background-color: #0000ff !important;

					border-radius: 20px;*/

 }

	

	.navbar-nav > li > a {

     padding: 4px 12px !important;

					margin: 0 0 !important;

					outline: 0px solid transparent;

					-webkit-transition: all 0.2s ease-in-out;

					transition: all 0.2s ease-in-out;

					border: 1px solid transparent;

 }



.navbar-nav > li > a:hover {

     /*color: #000000 !important;*/

					outline: 0px solid transparent;

					border: 1px solid #ffffff !important;

					background-color: #0000ff !important;

					border-radius: 20px;

					-webkit-transition: all 0.2s ease-in-out;

					transition: all 0.2s ease-in-out;

 }

	

	

.pushmenu{

	background-color: #ffffff;

	color: #707070 !important;

}



.side-nav .menu_bars.active.right span{

	background-color: #707070 !important;

	}

	

.pushmenu .push_nav li {

    display: block;

    font-size: 24px !important;

				line-height: 36px;

    padding: 5px;

    margin: 0 0px 18px 0px;

    padding-left: 0;

				text-transform: uppercase !important;

				font-family: "Roboto", sans-serif !important;

}

	



.pushmenu .push_nav > li > a, .header-appear .pushmenu .push_nav > li > a{

	color: #707070 !important;

	text-transform: uppercase !important;

	font-family: "Roboto", sans-serif !important;

    font-size: 24px !important;

				line-height: 26px;

}



.pushmenu .push_nav > li > a:hover, .header-appear .pushmenu .push_nav > li > a:hover{

	color: #0000ff !important;

	text-transform: uppercase !important;

	font-family: "Roboto", sans-serif !important;

    font-size: 24px !important;

				line-height: 36px;

}



.side-nav-social-icon a{

	color: #707070 !important;

	border-color: #707070 !important;

}



.topNavlink{	top: 16px;}



.nav-active{

  border-bottom: 3px solid #0000ff !important;

  color: #0000ff !important;

}



/* custom scrollbar */

::-webkit-scrollbar {

  width: 15px;

}



::-webkit-scrollbar-track {

  background-color: transparent;

}



::-webkit-scrollbar-thumb {

  background-color: #d6dee1;

  border-radius: 15px;

  border: 6px solid transparent;

  background-clip: content-box;

}



::-webkit-scrollbar-thumb:hover {

  background-color: #a8bbbf;

}





/*    E N D   N A V    B A R  ******************************/





/**********  Creative Code Light Box  ************/

.cc_lightBox-container{

 display: none;

  /* Overlay entire screen */

  position: fixed;

  z-index: 999;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 20px;

  background: rgba(0, 0, 0, 0.8);

}



.cc_lightBox-container div{color: #000000 !important;}



.cc_lightBox-modal{

    position: absolute;

    display: block;

    top: 50%;

    left: 50%;

    margin-top: -300px;

    margin-left: -500px;

    width: 1000px;

    height: 600px;

    background-color: #E1EDFA !important;

    padding-top: 100px;

    border-radius: 40px;

    overflow: hidden !important;

}



.cc_lightBox-modal .heading-text{

 font-size: 36px;

 line-height: 44px;

 font-weight: 600;

 color: #000000 !important;

}



.cc_lightBox-modal .body-text, .cc_lightBox-modal .body-text ul li, .cc_lightBox-modal .body-text ol li{

 font-size: 14px !important;

 line-height: 18px !important;

 color: #000000 !important;

}



.close-lightbox {

  position: absolute;

  display: block;

  font-size: 45px;

  font-weight: 300;

  margin: 0;

  top: 0;

  right: 0px;

  padding: 15px;

  cursor: pointer;

  transition: transform .5s ease-in-out;

}



.close-lightbox:hover{

 transform: rotate(90deg);

}



.lighbox-row{

 width: 90%;

 margin: 0;

 margin-left: 0px;

 margin-right: 0px;

 margin: auto auto;

 padding: 0 0 50px 0;

 /*border: 1px solid red;*/

 display: table;

}



.lighbox-col{

  display: block;

}







.lighbox-col .col-1{width: 25% !important; padding: 0 15px 0 0; float: left;}

.lighbox-col .col-2{width: 50% !important; padding: 0 15px 0 0; float: left;}

.lighbox-col .col-3{width: 75% !important; padding: 0 15px 0 0; float: left;}

.lighbox-col .col-4{width: 100% !important; padding: 0 15px 0 0; float: left;}



.col-1, .col-2, .col-3, .col-4{display: block !important; }



.col-1 .text-container, .col-2 .text-container, .col-3 .text-container, .col-4 .text-container{

  max-height: 450px; overflow-y: auto;

}





.lightbox-BG-left{

  position: relative;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height: 600px;

  width: 110% !important;

  left: -50px;

  top: -100px;

  max-height: 600px;

  overflow: hidden;

  

}





.MyHome-lightBox-BG1{

  background-image: url(../images/home/lightbox-innovation.jpg);

  background-position: left bottom;



}

#amazon-lightBox .lighbox-row{padding: 0px !important;width: 100%;}
#amazon-lightBox .cc_lightBox-modal{
    width: 100%;
    height: auto;
    max-width: 1000px;
    padding: 0px;
}
@media (min-width: 320px) and (max-width: 767px) {
    #amazon-lightBox .cc_lightBox-modal{
    left: 15px;
    margin: auto;
    top: 36%;
        right: 15px;
        width: 90%;
    }
}







/**********  ./Creative Code Light Box  ************/



/*    HOME PAGE   ****************************************************************/

#hero-banner{

	padding-bottom: 0px;

}





#hero-video{

	/*height: 100vh !important;

	width: auto !important;*/

	margin: auto auto;

}



#scroll{



}



#hero-ScrollDown-btn{

	display: inline-block;

	border: none !important;

	letter-spacing: .5px;

	line-height: inherit;

	border-radius: 0px;

	width: 50px !important;

	font-family: "Roboto", sans-serif !important;

	font-size: 16px !important;

	font-weight: 400;

	transition-duration: 0.3s;

	transition: all 0.3s !important;

	transition-timing-function: ease-in-out;

	color: #ffffff !important;

	background-color: transparent !important;

	padding: 0px;

	margin: 0px;

	margin-top: 40px !important;

	margin-left: 0px !important;

	margin-bottom: 0px !important;

	text-decoration: none !important;

	animation: float 3s ease-in-out infinite;

	opacity: 0.8;

	display: none !important;

}



    #myCarousel .website-header-1 {

        font-size: 64px;

        line-height: 72px;

        margin-top: 140px;

        color: #ffffff !important;

    }





.website-header-2{	font-size: 48px;	line-height: 56px;}



#thirsty, #sustainable{

	position: relative;

	margin: 120px 0 !important;

}



#thirsty h3, #sustainable h3{

	font-family: "Roboto", sans-serif !important;

	font-size: 64px;

	line-height: 70px;

}



.heading-title {

    position: relative;

    display: table-cell;

    vertical-align: middle;

    min-height: 540px;

}



#thirsty .heading-title, #sustainable .heading-title{

	padding: 0;

	padding-left: 60px;

	height: 540px !important;

}



.info-title{

	position: relative;

	top: 190px;

	font-size: 32px;

	line-height: 40px;

	margin-bottom: 80px;

	

}



.info-CTA{

	position: relative;

	margin-top: 20px;

}







.myKnowMore, .myKnowMore-Rev{

	display: inline-block;

	

	letter-spacing: .5px;

	line-height: inherit;

	border-radius: 30px;

	width: 170px !important;

	font-family: "Roboto", sans-serif !important;

	font-size: 20px !important;

	font-weight: 400;

	transition-duration: 0.3s;

	transition: all 0.3s !important;

	transition-timing-function: ease-in-out;

	color: #707070 !important;

	background-color: transparent !important;

	padding: 4px 10px;

	margin-top: 30px !important;

	text-transform: none !important;

}





.myKnowMore{border: 1px solid #ffffff !important;color: #ffffff !important;}

.myKnowMore-Rev{border: 1px solid #707070 !important; color: #707070 !important;}



.myKnowMore:hover{

	background-color: #ffffff !important;

	color: #707070 !important;

}



.myKnowMore-Rev:hover{

	background-color: #707070 !important;

	color: #ffffff !important;

}











#sec-myParalax1{

	padding: 600px 0;

	height: 800px;

	margin-bottom: -20px;

}



.myParalax-img1{

    background-image: url(../images/img_shutterstock_1986550307.jpg);

}





#sec-myParalax2{

	padding: 300px 0;

	height: 800px;

	margin-bottom: 0px;

}



.arrow-shaking{

  position: relative;

  right: 0px;

  padding: 20px;

  margin: 0px auto;

  -webkit-animation: moving 2s ease-out infinite;

  animation: moving 2s ease-out infinite;

  cursor: pointer;

}



@-webkit-keyframes moving {

  0% {left: 0px;  }

  25% {left: 5px;  }

  50% {left:-5px;  }

  75% {left: 5px;  }

  100% {left: 0px;  }

}



@keyframes moving {

  0% {left: 0px;  }

  25% {left: 5px;  }

  50% {left:-5px;  }

  75% {left: 5px;  }

  100% {left: 0px;  }

}







.myParalax-img2{

   background-image: url(../images/home/banner-footer.jpg);

   -webkit-background-size: cover;

   -moz-background-size: cover;

   -o-background-size: cover;

   background-size: cover;

   background-position: bottom center;

}





.MyParallax1 {

	height: 600px;

	overflow: hidden;

	position: relative;

}





#MyParallax1-text{

	padding-top: 500px;

	font-weight: 300;

	font-size: 60px;

	line-height: 80px;

	color: #ffffff !important;

}



#MyParallax2-text{

	padding-top: 80px;

	font-weight: 300;

	font-size: 60px;

	line-height: 66px;

	color: #ffffff !important;

}







.MyParallax1 h3 {

	font-size: 3em;

	color: limegreen;

	position: absolute;

	width: 100%;

	height: 100%;

	margin: 0;

	line-height: 50px;

	text-align: center;

	/* Starting position */

	-moz-transform: translateX(100%);

	-webkit-transform: translateX(100%);

	transform: translateX(100%);

	/* Apply animation to this element */

	-moz-animation: example1 15s linear infinite;

	-webkit-animation: example1 15s linear infinite;

	animation: example1 15s linear infinite;

}





.MyParallax1 h3 {

	font-size: 3em;

	color: limegreen;

	position: absolute;

	width: 100%;

	height: 100%;

	margin: 0;

	line-height: 50px;

	text-align: center;

   /* Starting position */

	-moz-transform:translateX(100%);

	-webkit-transform:translateX(100%);

	transform:translateX(100%);

   /* Apply animation to this element */

	-moz-animation: example1 15s linear infinite;

	-webkit-animation: example1 15s linear infinite;

	animation: example1 15s linear infinite;

}







#myParalax {

	padding: 200px 0;

}



#MyParallax-text {

	padding-top: 100px;

	font-weight: 200;

	font-size: 72px;

	color: #0000ff !important;

}





#sec-productList1{margin-bottom: 0px;}







#info-container{

	display: block;

	height: 500px;

	width: 100%;

	background-color: #ffffff;

	margin: 90px 0;

	position: relative;

    background-image: url(../images/bg-1.avif);

	background-repeat: no-repeat;

	background-size: 100% 100%;

}





#product-list-container{

	display: block;

	height: 500px;

	width: 100%;

	background-color: #ffffff;

	margin: 90px 0;

	position: relative;

}



.pre-product-button{

	max-height: 40px;  

	max-width: 40px; 

	position: relative;  

	top: 230px;  

	bottom: 0;  

	left: 0;  

	right: 0;  

	margin: auto;

}



.product-container{

	max-height: 500px;  

	max-width: 500px; 

	position: relative;  

	top: 0px;  

	bottom: 0;  

	left: 0;  

	right: 0;  

	margin: auto;

}



#hero-banner{

	margin-bottom: 0px;

	background-color: #e0eefa;

	background-image: url(../video/thumb-intro.jpg);

}



#hero-banner-sub-page{

	margin-bottom: 0px;

	background-color: #e0eefa;

	height: 100vh;

}







.myBG-img0{

	/*

	background: url(../images/img_shutterstock_383512207.jpg) no-repeat center center fixed; 

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

	*/

	background-color: #ffffff;

	

	

}



.myBG-img1{

	background: url(../images/img_shutterstock_1904183506.avif) no-repeat center center fixed; 

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

	

}



.myBG-img-white{

	background: #ffffff;

	

}



.bg-alpha50{opacity: 0.5;}

.bg-alpha60{opacity: 0.6;}

.bg-alpha70{opacity: 0.7;}

.bg-alpha80{opacity: 0.8;}

.bg-alpha90{opacity: 0.9;}



.class-product-imges {

	display: block;

	position: relative;

	top: 80px !important;

}



.class-product-desc{

		position: relative !important;

		display: inline-table !important;

		vertical-align: middle;

		margin-top: 80px !important;

}





.product-category{

	font-size: 36px;

	line-height: 40px;

	margin-bottom: 20px;

}



.footer-text{font-size: 11px;}



.product-name{

	font-size: 48px;

	line-height: 54px;

	margin-bottom: 40px;

}



.product-details{

	font-size: 22px;

	line-height: 28px;

	margin-bottom: 40px;

}



.product-know-more-btn{

	height: 41px;

	width: 140px;

}



.product-know-more-btn:hover{

	height: 41px;

	width: 140px;

}





/*   INFO carousel    */





#sec-info, #sec-info2{

	height: 100vh;

	padding: 0px !important;

	margin: 0px !important;

	margin-bottom: 80px !important;

}



#sec-productList{

	height: 700px;

	padding: 0px;

	margin: 0px;

}





#myCarousel{	margin: 0px;}



#myCarousel .carousel-inner {

	min-height: 600px;

	height: 100vh;

	border-radius: 0px;

}





#myCarousel_product{

		margin: 120px 0;

}



#myCarousel_product .carousel-inner {

	display: block;

	min-height: 600px;

	height: 600px;

	border-radius: 30px;

}





#myCarousel_product  .carousel-inner::before {    

      content: "";

      background-size: cover;

      position: absolute;

      top: 0px;

      right: 0px;

      bottom: 0px;

      left: 0px;

						background-color: #ffffff;

      opacity: 1;

}











.carousel, .item {

	height:100%;

	min-height: 600px;

}



.carousel, .item {

	height:100%;

}







.carousel {

	margin-bottom: 60px;

}

.carousel-caption {

	z-index: 10;

}

.carousel .item {

	/*/*background-color: #777777;*/

}

.carousel .carousel-inner .bg {

	background-repeat:no-repeat;

	background-size:cover;

}

.carousel .carousel-inner .bg-white {

	background: #ffffff;

	background-position: center top;

}



.carousel .carousel-inner .home-info-bg1 {

	background-image: url(../images/home/hero-banner-01.jpg);

	background-position: center top;

}

.carousel .carousel-inner .home-info-bg2 {

	background-image: url(../images/home/hero-banner-02.jpg);

	background-position: center center;

}

.carousel .carousel-inner .home-info-bg3 {

	background-image: url(../images/home/hero-banner-03.jpg);

	background-position: left top !important;

}



.carousel-control.left {

	background: none;

}

.carousel-control.right {

	/*

  right:0;

  left:auto;

  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);

  background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);

  background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));

  background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);

  background-repeat:repeat-x

  */

		background: none;



}



.carousel-caption {

	position: absolute;

	right: 15%;

	top: 0px;

	left: 15%;

	z-index: 10;

	padding-top: 20px;

	padding-bottom: 20px;

	color: #474747;

	text-align: left;

	text-shadow: none;

	font-size: 32px;

	line-height: 40px;

	font-weight: 100;

}





#myCarousel .carousel-indicators li {

	border-color: #ffffff !important;

}



#myCarousel .carousel-indicators .active {

  width:12px;

  height:12px;

  background-color:#ffffff !important;

}



#myCarousel_product .carousel-indicators li {

	border-color: #707070 !important;

}



#myCarousel_product .carousel-indicators .active {

  width:12px;

  height:12px;

  background-color:#707070 !important;

}





/*   END INFO carousel    */













/*    END  HOPE PAGE    */





/*   FOOTER ****************/



.quick-link-container, .email-container, .social-container{

	font-size: 14px;

	line-height: 18px;

	color: #ffffff;

	margin-top: 20px;

	text-align: left !important;

	color: #ffffff !important;

}



.quick-link-container ul li{

	line-height: 30px;

 list-style: none !important;

}

.quick-link-container ul li a{color: #fff;}

.email-container input{

	max-width: 300px;

}



.footer-contact-text{

	color: #ffffff !important;

	font-size: 14px;

	margin-bottom: 10px;



}



.text-TC{

	color: #ffffff !important;

	font-size: 13px;

	margin-bottom: 10px;

}



.pushmenu svg{

	fill:	#707070 !important;

	color: #707070 !important;

}



.pushmenu svg:hover{

	fill:	#ffffff !important;

	color: #ffffff !important;

}



input[type=text]{

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

     border-radius: 20px;

     border: 1px solid #2d9fd9;

     color: #a0d18c;

     width: 250px;

     height: 30px;

     padding-left: 10px;

    }

    

input[type=text]:focus {

     outline: none;

     border: 1px solid #a0d18c;

     color: #2d9fd9;

}



.footer-submit-btn{

	max-width: 106px;

	max-height: 30px;

	padding: 2px 20px;

	background: #5797EF !important;

	color: #ffffff !important;

}





.footer-submit-btn:hover, .footer-submit-btn:focus {

	background: #ffffff !important;

	border-color: #ffffff !important;

	color: #1E4CC1 !important;

}



/*   END   FOOTER ****************/









@keyframes rotation {

	from {

		transform: rotate(0deg);

   }

	to {

		transform: rotate(-360deg);

   }

}/*-- Use For Custom Styling --*/

header nav.navbar {

	border-radius: 0px 0px 40px 40px;

	height: 80px;

	background: transparent;

}



header a.logo img {

	max-height: 100px;

	max-width: 200px !important;

}







@keyframes rotation {

	from {

		transform: rotate(0deg);

	}



	to {

		transform: rotate(-360deg);

	}

}



@keyframes horizontal-shaking {

 0% { transform: translateX(0) }

 25% { transform: translateX(5px) }

 50% { transform: translateX(-5px) }

 75% { transform: translateX(5px) }

 100% { transform: translateX(0) }

}





#circleHeroText {

	height: 60vh !important;

	width: auto !important;

	animation: rotation 30s infinite linear;

}



@keyframes float {

	0% {

		transform: translatey(0px);

	}



	50% {

		transform: translatey(-40px);

	}



	100% {

		transform: translatey(0px);

	}

}









#bottle-Hero {

	height: 60vh;

	max-height: 500px;

	width: auto;

	/*animation: float 5s ease-in-out infinite;*/

}





/* Move it (define the animation) */

@-moz-keyframes example1 {

	0% {

		-moz-transform: translateX(100%);

	}



	100% {

		-moz-transform: translateX(-100%);

	}

}



@-webkit-keyframes example1 {

	0% {

		-webkit-transform: translateX(100%);

	}



	100% {

		-webkit-transform: translateX(-100%);

	}

}



@keyframes example1 {

	0% {

		-moz-transform: translateX(100%);

		/* Firefox bug fix */

		-webkit-transform: translateX(100%);

		/* Firefox bug fix */

		transform: translateX(100%);

	}



	100% {

		-moz-transform: translateX(-100%);

		/* Firefox bug fix */

		-webkit-transform: translateX(-100%);

		/* Firefox bug fix */

		transform: translateX(-100%);

	}

}



#shop-index-page {

	padding: 30px 0;

}



#contact {

	padding: 30px 0;

}

#circleHeroText{

	height: 60vh;

	width: auto;

	animation: rotation 30s infinite linear;

}

/*

@keyframes float {

	0% {

		transform: translatey(0px);

   }

	50% {

		transform: translatey(-40px);

   }

	100% {

		transform: translatey(0px);

   }

}

*/







#bottle-Hero{

	height: 60vh;

	max-height: 500px;

	width: auto;

	/*animation: float 5s ease-in-out infinite;*/

}



/* Move it (define the animation) */

@-moz-keyframes example1 {

	0% {

		-moz-transform: translateX(100%);

   }

	100% {

		-moz-transform: translateX(-100%);

   }

}

@-webkit-keyframes example1 {

	0% {

		-webkit-transform: translateX(100%);

   }

	100% {

		-webkit-transform: translateX(-100%);

   }

}

@keyframes example1 {

	0% {

		-moz-transform: translateX(100%);

	   /* Firefox bug fix */

		-webkit-transform: translateX(100%);

	   /* Firefox bug fix */

		transform: translateX(100%);

   }

	100% {

		-moz-transform: translateX(-100%);

	   /* Firefox bug fix */

		-webkit-transform: translateX(-100%);

	   /* Firefox bug fix */

		transform: translateX(-100%);

   }

}







#shop-index-page{

	padding: 30px 0;

}

#contact{

	padding: 30px 0;

}



.text-block h3{

    padding-top: 24px;

    margin-bottom: 10px;

}

.dropdown-menu{
    left: inherit;
}
.dropdown-menu li {
    list-style-type: none;
}.dropdown-menu a {
    text-transform: none;
}
.dropdown-menu li:hover {
    background: #CCCCCC;
}

/*

// X-Small devices (portrait phones, less than 576px)

// No media query for xs since this is the default in Bootstrap



// XX-Large devices (larger desktops, 1400px and up)

*/

@media (min-width: 1401px) { 

	.device-body-text{

		font-size: 20px !important;

		line-height: 24px !important;

		text-align: left !important;

	}

	

	#hero-video{

		width: 100vw !important;

		height: auto !important;

  

  

	}

	

	#hero-ScrollDown-btn{

		margin-top: 60px !important

	}

	
	

	

}





/* X-Large devices (larger desktops, 1400px and up)

*/

@media (min-width: 1367px) and (max-width: 1400px) { 

	.device-body-text{

		font-size: 20px !important;

		line-height: 24px !important;

		text-align: left !important;

	}

	

	#hero-video{

		height: auto !important;

		width: 100vw !important;

	}

	

	#hero-ScrollDown-btn{

		margin-top: -100px !important

	}

	

	#Language-btn{



	}

	

	

}













/*// X-Large devices (large desktops, 1200px and up)*/

@media (min-width: 992px) and (max-width: 1199px) { 



	.device-body-text{

		font-size: 18px !important;

		line-height: 22px !important;

		text-align: left !important;

	}

	

	#hero-video{

		height: 100vh !important;

		width: auto !important;

	}

	

	#hero-ScrollDown-btn{

		margin-top: -40px !important

	}



	.about-text, .about-text p{

    font-size: 16px;

    line-height: 20px;

}

	

	

}





/*// Large devices (desktops, 992px and up)*/

@media (min-width: 768px) and (max-width: 991px) { 



	.device-body-text{

		font-size: 18px !important;

		line-height: 22px !important;

		text-align: left !important;

	}

	

	#hero-video, #hero-img-banner{

		height: 100vh !important;

		width: auto !important;

	}

	

	#hero-ScrollDown-btn{

			margin-top: 10px !important

	}



}





/*  Mobile design */

@media (min-width: 320px) and (max-width: 767px) {

	

	section {

		margin-bottom: 0px !important;

	}

	

	#hero-banner {

			margin-bottom: 0px !important;

	}

	

	.device-body-text{

		font-size: 14px !important;

		line-height: 18px !important;

		text-align: left !important;

	}



	#hero-video{

		height: 100vh !important;

		width: auto !important;

		margin: 0px !important;

		margin-left: -133% !important;

	}



	#Language-btn {
        position: relative;
        top: 5px !important;
        right: 30px;

	}

	

	#hero-ScrollDown-btn{

		margin-top: 90px !important;

	}

	

	#circleHeroText{

		max-width: 400px !important;

		max-height: 400px !important;



	}

	

	.carousel-caption {

	}
    .carousel-control.right{
        right: 20px;
    }
    .carousel-control.left{
        left: 20px;
    }

	.myKnowMore, .myKnowMore-Rev {

		padding: 1px 8px;

		margin-top: 10px !important;
        
        margin-bottom: 30px;

	}
    .item .myKnowMore-Rev{
        margin-top: 5px !important;
    }
    .quick-link-container ul{
        padding-left: 0px;
    }
	

	.carousel-caption .website-header-1 {

		font-size: 36px !important;

		line-height: 40px !important;

		margin-top: 50px !important;

	}

	

	#thirsty{

		margin-bottom: 0px !important;

	}

		

	#thirsty .heading-title, #sustainable .heading-title {

		display: contents;

	}

	



	

		

	#thirsty h3, #sustainable h3 {

		font-family: "Roboto", sans-serif !important;

		font-size: 36px !important;

		line-height: 40px !important;

		margin-top: 20px !important;

	}

	

	.parallax {

	}

	

	#sec-myParalax1 {

		padding: 600px 0;

		height: 600px;

		bottom: 0px;

		margin-bottom: 0px !important;

		background-position: left 65% top;

	}

	

	#MyParallax1-text {

		padding-top: 200px;

	}

	

	#myCarousel_product {

		margin-top: 40px !important;

		padding: 0 20px !important;

	}

	

	

	.carousel-caption {

		top: 50px !important;

	}

	
	.item .carousel-caption {

		top: 0px !important;

	}

	.top-50px {

		top: 25px !important;

	}

		

	

	.product-category {

		font-size: 18px;

		line-height: 20px;

		margin-bottom: 10px;

	}

	

	.product-name {

		font-size: 24px;

		line-height: 28px;

		font-weight: 400;

		margin-bottom: 10px;

  text-transform: uppercase;

	}

			

	.product-details {

		font-size: 16px;

		line-height: 16px;

		margin-bottom: 10px;

	}

	

	#sec-productList1 , #sec-myParalax2{

		margin-bottom: 0px !important;

	}

	

	#MyParallax2-text {

		padding-top: 40px;

		font-weight: 300;

		font-size: 60px;

		color: #ffffff !important;

	}

    #sec-tectnology-01b .product-image{
        display: none;
    }
    #sec-technology-04{
        background-size: cover !important;
    }
    #sec-tectnology-01b .dummy-row{display: none !important}
    #sec-tectnology-01b .sec-technology-01b-container{margin-bottom: 0px !important;}

}