html, body {
    width: 100%;
    height: 100%;
	 background-color: #e2e3e3;
}

::-webkit-scrollbar {
    width: 0;
}

@media (max-width: 991px) {
::-webkit-scrollbar {
	width: 0;
}
}
 
::-webkit-scrollbar-track {
	background-color: #d1d2d4;
}
 
::-webkit-scrollbar-thumb {
	background-color: #404040;
}

.sidebar::-webkit-scrollbar {
    width: 0;
}

a,
a:hover
{
	text-decoration: none !important;
}

.header {
	display: table;
	position: relative;
	width: 100%;
	height: 100%;
	background: transparent no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

contact {
	display: table;
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../contact/img/contact.png) no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	}

.text-vertical-center {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.text-medium {
	font-size: 2rem;
}

.main-nav {
top:0!important;

}

.hidden {
transform:translateY(-100%)
}

@media (max-width: 991px) {
.text-vertical-center {
	vertical-align: bottom;
}
}

.mlx-auto {
	margin-left: auto;
	margin-right: 0;
}

@media (max-width: 1800px) {
.mlx-auto {
	margin-left: auto;
	margin-right: 0;
}
}

.mrx-auto {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1800px) {
.mrx-auto {
	margin-left: 0;
	margin-right: auto;
}
}

.popover-body {
	text-align: center;
	font-family: 'Futura Std';
	font-weight: normal;
	font-size: 1rem;
}

.transparent {
	color: transparent !important;
	background-color: transparent !important;
}

.display-table {
	display: table;
}

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

.absolute {
	position: absolute;
}

.video-texture {
	background: url(../img/video_texture.png) repeat;
	z-index: 1;
}

.video-banner {
	width: 100%;
	overflow: hidden;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

video {
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

@media (max-width: 480px) {
video {
	height: 100%;
}
}

.sound {
	font-size: 0.9rem;
	position: fixed;
	text-align: right;
	color: #fff;
	right: 1rem;
	bottom: 1rem;
	padding: 1rem;
}

@media (max-width: 375px) {
.sound {
	font-size: .5rem;
    position: fixed;
    text-align: right;
    color: #fff;
    right: 0rem;
    bottom: 0rem;
    padding: .5rem;
}
}

.sound-setting {
	cursor: default;
	font-family: 'Helvetica';
}

.sound-setting span {
	font-family: 'HelveticaNeueLTStd-BdEx';
}

@media (max-width: 1199px) {
.navbar {
	padding: 1rem;
}
}

@media (max-width: 991px) {
.navbar {
	padding: 2rem;
}
}

.bottom {
	padding: .5rem !important;
	transition: ease-in .3s !important;
}

.main-nav {
	/*max-width: 96vw;*/
}

.splash-content {
	padding: 3rem;
}

@media (max-width: 991px) {
.splash-content {
	padding: 3rem 2rem;
	margin-top: auto;
}
}

@media (max-width: 991px) {
.main-brand-mobile {
    width: calc(10rem + 20vw);
}
.mobile-nav {
	margin-left: auto !important;
	margin-right: auto !important;
}
}

.mainmenu {
	font-weight: bold;
	text-align: right;
	font-size: calc(0.35rem + 0.7vw);
	z-index: 2;
	padding-top: .4rem;
}

.mainmenu-shrink {
	font-size: calc(0.35rem + 0.7vw);
}

.lang-seperator {
	margin-left: -.7rem;
	margin-right: -.7rem;
}

@media (max-width: 991px) {
.mainmenu {
	font-size: 1.2rem;
	background: rgba(0, 0, 0, 0.8);
	border-radius: .5rem;
	width: 100%;
	float: none;
	padding: 1rem;
	margin-top: .5rem;
	z-index: 2;
}
.mainmenu-shrink {
	margin-top: .5rem;
	z-index: 2;
}
.lang-seperator {
	margin-left: 0rem;
	margin-right: 0rem;
}
}

.thick-line {
	margin: 1.3rem 0;
	border: .3rem solid #00d4f8;
	background-color: #00d4f8;
}

.medium-thick {
	margin: 1.3rem 0;
	border: .17rem solid #00d4f8;
	background-color: #00d4f8;
}

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


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

.thin-grey {
	margin-top: 0;
	margin-bottom: -1.53rem;
	border: 1px solid #a7a9ab;
	border-top: 1px solid #a7a9ab;
}

.title-sj {
	font-size: calc(1.5rem + 0.75vw);
	line-height: calc(1.7rem + 1.7vw);
}

@media (max-width: 991px) {
	.title-sj {
	font-size: calc(1.3rem + .65vw) !important;
	line-height: calc(2rem + 2vw) !important;
}
}

.p-mc-sj {
	font-size: calc(0.7rem + 0.35vw);
	padding-top: .6rem;
	padding-bottom: 1.4rem;
	line-height: calc(1.1rem + 0.55vw);
}

.p-md-sj {
	font-size: 1.2rem;
	padding-top: 0;
	padding-bottom: 1.4rem;
	line-height: 2rem;
}

@media (max-height: 800px) {
.title-sj {
    font-size: calc(1.5rem + 1.5vw) !important;
    line-height: calc(2rem + 2vw) !important;
}
.p-mc-sj {
	font-size: calc(0.5rem + 0.25vw);
	padding-top: .5rem;
	padding-bottom: 1.75rem;
	line-height: calc(.8rem + .4vw);
}
}

.p-c-sj {
	font-family: 'Helvetica Neue LT Std';
	font-weight: 300;
	text-align: left;
	font-size: calc(.79rem + 0.395vw);
    padding-top: .6rem;
    padding-bottom: 1.4rem;
    line-height: calc(1.2rem + 0.6vw);
}

.paragraph-padding-right {
	padding-right: 3rem;
}

@media (max-width: 991px) {
.p-c-sj {
    font-size: calc(0.8rem + 0.4vw);
    line-height: calc(1.4rem + .6vw);
}
.justified-mobile {
	text-align: justify;
}
}

@media (max-width: 380px) {
.navbar-toggler {
	padding: 0;
}
}

@media (min-width: 991px) {
.mobile-logo {
	width: 15rem;
}
.mobile-logo {
	padding: .5rem 1rem .5rem 0rem;
}
}

@media (max-width: 991px) {
.mobile-logo {
	width: 15rem;
}
}

@media (max-width: 457px) {
.mobile-logo {
	width: 12rem;
}

.sidebar {
	top: 6rem;
}
}

@media (max-width: 380px) {
.mobile-logo {
	width: 10rem;
}
}

@media (max-width: 380px) {
.bar-font {
    padding-right: 1rem;
}
}

.navbar-toggler:focus {
	background-color: transparent;
}

.img-push {
	margin-bottom: 0.3rem;
}

.img-full {
	width: 100%;
	height: auto;
}

.btn-padding {
	margin-right: .15rem;
}

.btn-intro {
	text-decoration: none !important;
	color: #FFF;
	padding: .5rem
}

@media (max-width: 991px) {
.btn-intro {
	padding: .4rem;
	font-size: .8rem;
}
}

.btn-red {
  color: #fff;
  background-color: #00d4f8;
  border-color: #00d4f8;
}

.btn-red:hover {
  color: #fff;
  transition: linear .2s;
  background-color: #025f91;
  border-color: #025f91;
}

.btn-red:focus, .btn-red.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-margin-top-bottom {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.btn-full {
	width: 100%;
}

.btn-white {
  color: #000 !important;
  background-color: #FFF !important;
  border-color: #FFF;
  font-size: calc(0.7rem + 0.35vw);
}

.btn-white:hover {
  color: #000;
  transition: linear .2s;
  background-color: #FFF;
  border-color: #FFF;
}

.btn-white:focus, .btn-white.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-white.disabled, .btn-white:disabled {
  background-color: #FFF;
  border-color: #FFF;
}

.btn-white:not([disabled]):not(.disabled):active, .btn-white:not([disabled]):not(.disabled).active,
.show > .btn-white.dropdown-toggle {
  color: #000;
  background-color: #FFF;
  border-color: #FFF;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.activated {
	display: inline-block;
	color: #e97b2e;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
}

.activated::after {
	content: '';
	display: block;
	width: 40%;
	height: .25rem;
	background: #e97b2e;
	margin-left: auto;
	margin-right: auto;
	transition: ease-in .2s;
}

.activated:hover::after {
	background: #e53430;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	transition: ease-out .2s;
}

@media (min-width: 991px) {
.underlined-link {
	display: inline-block;
	color: #00d4f8;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
}

.underlined-link::after {
	content: '';
	display: block;
	width: 0;
	height: .25rem;
	background: #00d4f8;
	margin-left: auto;
	margin-right: auto;
	transition: ease-in .2s;
}

.underlined-link:hover::after {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	transition: ease-out .2s;
}

.navbar {
	transition: ease-in .3s;
	padding: 1rem;
}

.navbar-shrink {
	padding: 7px 10px 7px 10px;
	transition: ease-in .4s;
}
}

@media (max-width: 991px) {
.ul-mobile {
	padding: 1rem;
	display: inline-block;
	color: #e53430;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
}

.ul-mobile:hover {
	display: block;
	background: #e53430;
	border-radius: .3rem;
	margin-left: auto;
	margin-right: auto;
	transition: ease-in .3s;
}

.activated::after:hover {
	width: 0;
}
}
.sidebar-shrink {
	top: 0 !important;
}
.sidebar {
	padding: 3rem;
	z-index: 9 !important;
	left: 0;
	background-color: #e2e3e3;
	border-bottom: 0px solid transparent;
	top: 7.09rem;
	transition: ease-in .3s;
	font-weight: bold;
	font-size: calc(0.3rem + 0.6vw);
}

@media (max-width: 1280px) {
.sidebar {
	padding: 2rem;
}
}

@media (max-width: 1199px) {
.sidebar {
	font-size: calc(0.4rem + 0.8vw);
	transition: ease-in .3s;
}
}

@media (max-width: 991px) {
.sidebar {
	display: none;
	padding: 0;
	top: 8.8rem;
	font-size: 1rem;
	background-color: #e2e3e3;
	color: white;
	text-align: center;
}
#background {
	padding-top: 5rem !important;
}
#project {
	padding-top: 5rem !important;
}
#product {
	padding-top: 5rem !important;
}
#career {
	padding-top: 5rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
#contact {
	padding-top: 5rem !important;
}
#vision-mission {
	padding-top: 0 !important;
}
.navbar {
	padding: 1rem;
	transition: ease-in .3s;
}
}

@media (max-width: 457px) {
#background {
	padding-top: 3rem !important;
}
#project {
	padding-top: 3rem !important;
}
#product {
	padding-top: 3rem !important;
}
#career {
	padding-top: 3rem !important;
}
#contact {
	padding-top: 3rem !important;
}
}

@media (min-width: 991px) {
.sidebar {
	top: 5rem;
	transition: ease-in .3s;
}
}

@media (max-width: 457px) {
.navbar {
	padding: .3rem;
	transition: ease-in .3s;
}
}

@media (max-width: 991px) {
.sidebar {
	font-size: .95rem;
	top: 5.2rem;
	transition: ease-in 0s;
}
}

@media (max-width: 457px) {
.sidebar {
	top: 8rem;
	transition: ease-in .3s;
}

.sidebar {
	font-size: .85rem;
	top: 4.4rem;
	transition: ease-in 0s;
}
}

.brand-link {
	text-decoration: none !important;
	color: black;
}

.content-padding {
	padding: 3rem;
}

@media (max-width: 991px) {
.content-padding {
	padding: 2rem;
}
}

.img-padding {
	padding: .2rem;
	width: 100%;
}

.img-padded {
	padding: 2rem;
	width: 100%;
}

.img-rounded {
	border-radius: .4rem;
}

#background {
	padding-top: 4rem;
	height: auto;
}

#project {
	padding-top: 4rem;
	height: auto;
}

#product {
	padding-top: 4rem;
	height: auto;
}

#career {
	padding-top: 4rem;
	padding-left: 7rem;
	height: auto;
	transition: ease-in .3s;
}

.career-content {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: 2rem;
}

.career-image {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

.career-img {
	width: 100%;
}

.contact-page {
	margin-top: 7rem;
}

#contact {
	padding-top: 4rem;
	height: auto;
}

@media (max-width: 1199px) {
#career {
	padding-left: 5rem;
	padding-right: 5rem;
}
.career-content {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: 0;
}

.career-image {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 0;
	padding-right: 0;
}
}

@media (max-width: 515px) {
.product-main-heading {
	font-size: calc( 19px + (38 - 19) * ( (100vw - 400px) / ( 800 - 400) ));
}
}

#vision-mission {
	padding-top: 8rem;
	height: auto;
}

.vision-mission {
	padding-right: 3rem;
}

@media (max-width: 991px) {
.vision-mission {
	padding-right: 0;
}
}

@media (min-width: 991px) {
.sidenav-btn {
	display: none !important;
}
}

.sidenav-title {
	color: #000000;
	border-left: .5rem solid #d1d2d4;
	padding: 1rem .6rem;
}

.sidenav-item {
	color: #a7a9ab;
	background-color: transparent;
	border-left: .5rem solid #d1d2d4;
	padding: .6rem;
	transition: all .3s;
}

.sidenav-item:hover {
	color: #00d4f8 !important;
	border-left: .5rem solid #00d4f8;
	transition: all .3s;
}

@media (max-width: 991px) {
.sidenav-title {
	color: #FFF;
	border-left: 0;
	padding: 0 0 .75rem 1.6rem;
	background-color: #404040;
}

.sidenav-title {
    padding: .4rem 0 .6rem 1.6rem;
}
}

@media (max-width: 457px) {
.sidenav-title {
	padding: .2rem 0 .4rem .6rem;
}
}

.sidenav-item {
	color: #a7a9ab;
	background-color: #e2e3e3;
	padding: .5rem;
}

.sidenav-btn {
	right: 3.5rem;
}

.sidenav-btn {
	right: 2.1rem;
}

.nav-pills .nav-link {
  border-radius: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #00d4f8;
  border-left: 0;
  background-color: transparent;
  border-left: .5rem solid #00d4f8;
}

@media (max-width: 310px) {
.sidebar {
	display: none;
}
}

@media (max-width: 1800px) {
.contact-footer {
	display: none;
}
}

@media (max-width: 495px) {
.copyright {
	font-size: calc( 12px + (40 - 20) * ( (100vw - 400px) / ( 800 - 400) ));
}
}

.righted {
	right: 0 !important;
	left: auto !important;
}

@media (max-width: 510px) {
.contact-dropup {
	display: none !important;
}
}

.catalog {
	overflow-y: scroll !important;
	bottom: 4rem;
	position: fixed;
}

@media (max-width: 991px) {
.catalog {
	position: absolute;
	height: auto !important;
	bottom: auto;
}
.bottom {
	transition: none;
}
}

.grid {
  background: transparent;
}

.grid::after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  width: 32%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1199px){
.grid-item {
  width: 46%;
}
}

@media (max-width: 991px){
.grid-item {
  width: 100%;
}
}

img {
	mix-blend-mode: none;
}

.product-item {
	transition: ease-in .3s;
	color: transparent;
	width: 100%;
	height: 100%;
	display: block;
}

.product-item::after {
	content: '';
	display: block;
	width: 0%;
	height: 0;
	background-color: #e53430;
	transition: ease-in .3s;
	margin-left:auto;
	margin-right:auto;
}

.product-image {
  display: block;
  width: 100%;
  transition: ease-in .3s;
  mix-blend-mode: multiply;
}

.product-image:hover {
/*multiply effect on background hover*/
  transition: ease-in .3s;
  mix-blend-mode: multiply;
}

.product-item:hover .product-image {
/*multiply effect on background hover*/
	transition: ease-in .3s;
	mix-blend-mode: multiply;
}

.multiply {
/*multiply effect on background hover*/
	transition: ease-in .3s;
	mix-blend-mode: multiply;
}

.product-name {
	font-size: calc(0.8rem + 1.2vw);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding: 2rem;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: block;
}

.product-name::after {
	content: '';
	display: block;
	width: 0%;
	height: .5rem;
	background-color: #00d4f8;
	transition: ease-in .3s;
	margin-left: auto;
	margin-right: auto;
}

.product-item:hover .product-name::after {
	content: '';
	display: block;
	width: 20%;
	height: .5rem;
	background-color: #00d4f8;
	transition: ease-in .3s;
}

.product-item:hover {
	/*multiply effect on background hover by waheedos*/
	background-color: #00d4f8 !important;
	color: white !important;
	transition: ease-in .3s;
	border-radius: 5% !important;
}

@media (max-width: 991px) {
.product-name {
	font-size: calc( 25px + (50 - 25) * ( (100vw - 400px) / ( 800 - 400) ));
}
}

.sidenav-highlight {
	color: #00d4f8;
	border-left: .5rem solid #00d4f8 !important;
	transition: ease-in .3s;
}

.product-image-highlight {
	background-color: #00d4f8;
	color: white !important;
	transition: ease-in .3s;
}

.product-title-highlight::after {
	content: '';
	display: block;
	width: 20%;
	height: .5rem;
	background-color: #00d4f8;
	transition: ease-in .3s;
}

/*start modal stylesheet*/
.modal-content::before {
	content: '';
	display: block;
	width: 100%;
	height: .6rem;
	background: linear-gradient(to right, #00d4f8,#e1f71d,#00d4f8);
	transition: ease-in .3s;
	margin-left:auto;
	margin-right:auto;
}

@media (min-width: 991px) {
  .modal-dialog {
    margin: 0;
  }
}

@media (max-width: 1199px) {
  .modal-dialog {
    max-width: 55rem;
  }
}

@media (max-width: 991px) {
  .modal-dialog {
    max-width: 50rem;
  }
}

@media (max-width: 830px) {
  .modal-dialog {
    max-width: 45rem;
  }
}

@media (max-width: 767px) {
  .modal-dialog {
    max-width: 40rem;
  }
}

@media (min-width: 991px) {
  .modal-body {
	  padding: 2rem 6rem 4rem;
  }
}

@media (max-width: 1199px) {
  .modal-body {
	  padding: 1.5rem 5rem 3rem;
  }
}

@media (max-width: 991px) {
  .modal-body {
	  padding: 1rem 2rem 2rem;
  }
}

@media (min-width: 991px) {
.distributor {
	padding-top: 2rem;
	padding-right: 2.5rem;
}
}

@media (max-width: 1199px){
.distributor {
	padding-top: 2rem;
	padding-right: 4rem;
}
}

@media (max-width: 991px) {
.distributor {
	padding-top: 2rem;
	padding-right: 0;
}
}

.show {
	padding: 0 !important;
}

.modal-dialog-center {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.product-side-desc {
	line-height: 2rem;
}

.product-title-desc {
	padding-right: 3rem;
}