@charset "utf-8";
/* CSS Document */

@font-face {
   font-family: Vision;
   src: url(fonts/Vision-Regular.ttf);
}

* {
  box-sizing: border-box;
}
body {
	font-size: 100%;
	font-family: Vision;
	font-size: 14px;
	color: #383838;
	text-decoration:none;
	line-height: 22px;
	background-color:#e2e2e2;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
}

a img {
	text-decoration: none;
}

p {
  text-align: justify;
  letter-spacing: 1px;
}

#header {
	top:0px;
	position:fixed;
	width:100%;
	z-index:5;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
	z-index:99;
}

#loginheader {
	width:100%;
	height:62px;
	padding:21px;
	background-color:#191d5c;
	text-align:left;
	z-index: 5;
	color:#fff;
}

#loginheader img {
	height:16px;
	width:auto; 
	vertical-align: middle; 
	margin-right:5px;
}

#logoarea {
	width:100%;
	float:left;
	text-align:left;
	background:#FFF;
	height:auto;
}

#logo {
	width:33%; 
	margin:12px;
}

#menuicon {
	float:right; 
	width:6%; 
	margin:1.5%
}

#coverimage {
	margin-top:185px;
	width:100%;
	height: 334px;
	background-image:url(images/coverimagebg.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
}

#levelone {
	top:-50px; 
	width:100%; 
	position:relative; 
	z-index:1;
}

#leveltwo {
	top:-20px; 
	width:100%; 
	position:relative; 
	background-color:#fff;
}

#levelthree {
	top:-20px; 
	width:100%; 
	position:relative;
	padding-top:30px;
	padding-bottom:10px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background:none;
  text-align:center;
  justify-content: space-between;
}

.flex-container > div {
  width:31.3%;
  background-color: #fff;
  margin: 1%;
  text-align: center;
  border:1px solid #333;
}

.flex-container > divone {
  width:98%;
  margin: 1%;
}

.flex-container > divtwo {
  width:48%;
  margin: 1%;
}

.flex-container > divbig {
  width:63%;
  background-color: #fff;
  margin: 1%;
  text-align: center;
  border:1px solid #333;
}

.flex-container > divfour {
	width: 22.5%;
}

.flex-container > divfive {
  width:18%;
  background-color: #fff;
  margin: 1%;
  text-align: center;
  border:1px solid #333;
}

.flex-container > diveight {
  width:12%;
  margin: 0.5%;
}

.flex-container > div p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 1px;
  margin:5%;
}

.flex-container > divbig p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 1px;
  margin:2.5%;
}

.flex-container > divmx {
  width:98%;
  background-color: #fff;
  margin: 1%;
  text-align: center;
}

.flx {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.four {
  width: 22.5%;
}



#products {
	width:100%;
	left:0px;
	padding-top:3%;
	padding-bottom:3%;
}

#products-small {
	width:100%;
	left:0px;
	padding-top:3%;
	padding-bottom:3%;
}
 
.subFooter {
	top:0px; 
	width:100%; 
	position:relative;
	padding-top:30px;
	padding-bottom:30px;
	background-color:#191d5c;
}
 
.mainFooter {
	width: 100%;
	float: left;
	padding-left: 0;
	background-color: #006fb8;
	color: #FFF;
	padding:2.5%;
	padding-top:1%;
	padding-bottom:1%;
}

.right {
	text-align:right;
	float:right;
	width:50%;
}

.right p {
	text-align:right;
}

.left {
	text-align:left;
	float:left;
	width:50%;
}

.left p {
	text-align:left;
}

#postimage {
	margin-left:5%;
	margin-right:5%;
	margin-bottom:5%;
	width:90%;
	height:auto;
	float:left;
}

#prdimage {
	outline: 1px dashed #000;
    outline-offset: -5px;
	width:100%; 
	height:auto; 
	pointer-events: none;
	background-color:#fff;
}

#aboutimage {
	height:auto;
	float:left;
	margin-top:19%; 
	margin-left:25%; 
	margin-right:25%; 
	width:50%;
}

.workarea {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.workareabig {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  margin-right:15px;
}

#desktop { 
	display:block;
}
#mobile {
	display:none;
}

.desktop { 
	display:block;
}
.mobile {
	display:none;
}

.skillscontainer {
  width: 100%;
  background-color: #fff;
  margin-bottom:20px;
}

.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right:20px;
  color: white;
  background-color: #191d5c;
}

#whatsapp_side {
	  display:block;
	  position: fixed;
	  top: 46%;
	  left: 12px;
	  z-index: 99;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  width:4%;
	  height:auto;
	  border-radius:50%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#ontop {
	  display:block;
	  position: fixed;
	  bottom: 3%;
	  right: 1.5%;
	  z-index: 99;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  width:3%;
	  height:auto;
	  border-radius:50%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

#scr {
	overflow:scroll;
}


#logo {
	width:71%; 
	margin:11px;
}

#menuicon {
	float:right; 
	width:15%; 
	margin:3.5%;
	margin-right:0px;
}

#aboutimage {
	height:auto;
	float:left;
	margin-top:7%; 
	margin-left:60%; 
	width:40%;
}

.workarea {
	width:94%;
	margin-left:auto;
	margin-right:auto;
}

.workareabig {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}


#coverimage {
	margin-top:146px;
	width:100%;
}

#levelone {
	top:-75px; 
	width:100%; 
	position:relative; 
	z-index:1;
}

#levelthree{
	top:-75px; 
}

#leveltwo {
	top:-50px; 
	width:100%; 
	position:relative; 
	background-color:#fff;
}

.flex-container > div {
  width:98%;
  background-color: #fff;
  margin: 1%;
  text-align: center;
  border:1px solid #333;
  margin-bottom:5%;
}

.flex-container > divtwo {
  width:98%;
}

.flex-container > divbig {
  width:98%;
  margin: 1%;
  margin-bottom: 2%;
  margin-top:2%;
}

.flex-container > divfour {
	width:100%;
}

.flex-container > divfive {
  width:98%;
  margin: 1%;
  margin-bottom: 2%;
  margin-top:2%;
}

.flex-container > diveight {
  width:48%;
  margin: 1%;
}

.flx {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#products {
	width:376%;
}

.four {
	width:20%;
	margin-right:1.7%;
}

.mainFooter {
	width: 100%;
	float: left;
	padding:2.5%;
	margin-left:0px;
	margin-right:0px;
}

.right,
.left {
	text-align:center;
	float:none;
	width:100%;
}

.right p {
	text-align:center;
}

.left p {
	text-align:center;
}

#desktop { 
	display:none;
}
#mobile {
	display:block;
}

.desktop { 
	display:none;
}
.mobile {
	display:block;
}

#whatsapp_side {
	  display:block;
	  position: fixed;
	  top: 86%;
	  left: 12px;
	  z-index: 99;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  width:12%;
	  height:auto;
	  border-radius:50%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#ontop {
	  display:block;
	  position: fixed;
	  bottom: 12px;
	  right: 12px;
	  z-index: 99;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  width:10%;
	  height:auto;
	  border-radius:50%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

}

.progress {
  background: linear-gradient(to right, #006fb8 var(--scroll), transparent 0);
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
  height: 4px;
  z-index: 99999;
}

.prdname {
	top:-75px; 
	position:relative; 
	background-color:#666; 
	padding:3px; 
	border-radius:5px; 
	color:#fff; 
	text-align:center; 
	max-width:80%;
	margin-left:12.5%;
	background-color: rgba(0,0,0,0.7);
}

/* ===========================
   ======= Font style ====== 
   =========================== */
   
h1 {font-size: 24px}
h2 {font-size: 22px}
h3 {font-size: 20px}
h4 {font-size: 18px}
h5 {font-size: 16px}
h6 {font-size: 14px}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 60px;
	color:#333;
}

h1 {
	 text-transform: uppercase;
	 font-weight: bold;
}

.hr4 {
  color: #191d5c;
}

.hr5 {
  color: #006fb8;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
	outline: 0;
	}

a img {
	text-decoration: none;
}

a:link {
	text-decoration: none;
	color: #383838;
}

a:visited {
	text-decoration: none;
	color: #383838;
}

a:hover {
	text-decoration: none;
	color: #383838;
}

a:active {
	text-decoration: none;
	color: #383838;
}

#blue {
	color:#fff;
}

#blue a {
	outline: 0;
	}

#blue a:link {
	text-decoration: none;
	color: #fff;
}

#blue a:hover {
	text-decoration: none;
	color: #f8abad;
}

#blue a:visited {
	text-decoration: none;
	color: #fff;
}

#blue a:active {
	text-decoration: none;
	color: #fff;
}

#black {
	color:#383838;
}

#black a {
	outline: 0;
	}

#black a:link {
	text-decoration: none;
	color: #383838;
}

#black a:hover {
	text-decoration: none;
	color: #383838;
}

#black a:visited {
	text-decoration: none;
	color: #383838;
}

#black a:active {
	text-decoration: none;
	color: #383838;
}

h5 a {
	outline: 0;
	}

h5 a img {
	text-decoration: none;
}

h5 a:link {
	text-decoration: none;
	color: #383838;
}

h5 a:hover {
	text-decoration: none;
	color: #383838;
}

h5 a:visited {
	text-decoration: none;
	color: #383838;
}

h5 a:active {
	text-decoration: none;
	color: #383838;
}

h6 a {
	outline: 0;
	}

h6 a img {
	text-decoration: none;
}

h6 a:visited {
	text-decoration: none;
	color: #383838;
}

h6 a:active {
	text-decoration: none;
	color: #383838;
}

h6 a:link {
	text-decoration: none;
	color: #383838;
}

h6 a:hover {
	text-decoration: none;
	color: #383838;
}

/* ===========================
   ======== SIDE MENU ======== 
   =========================== */

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  background-color:#006fb8;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  color:#fff;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #fff;
}

.sidenav a:visited {
	text-decoration: none;
	color: #fff;
}

.sidenav a:link {
	text-decoration: none;
	color: #fff;
}

.sidenav a:active {
	text-decoration: none;
	color: #fff;
}

.sidenav a:hover {
	text-decoration: none;
	color: #fff;
}

.sidenav .closebtn {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color:#fff;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* ===========================
   ========== FORMS ========== 
   =========================== */

.formcontainer {
	width:100%;
	margin:0 auto;
	position:relative;
	left:0px;
	overflow:hidden;
	height:auto;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font-family: Vision; }

#contact {
	padding:25px;
	padding-left:0px;
	padding-right:0px;
	margin:0 0;
	position:relative;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], input[type="password"], input[type="file"], #contact textarea,  #contact select {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, input[type="password"], input[type="file"], #contact textarea:hover, #contact select{
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#333;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#842250;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}


/* Topnav */

.topnav {
  overflow: hidden;
  background-color: #fff;
  color: #393739;
}

.topnav a {
  float: left;
  display: block;
  color: #393739;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:link, a:visited {
	text-decoration: none;
	color: #393739;
}

.topnav a:active {
	text-decoration: none;
	color: #393739;
}

.topnav a:hover  {
  color: #fff;
  background-color: #191d5c;
}

/* Mob Menu */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#sidebarcover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
    position: fixed;
  z-index: 5;
  	color: #fff;
    pointer-events:none;
}

#sidebar {
  padding: 20px 0;
  background-color: #424244;
  width: 220px;
  visibility: visible;
  opacity: 1;
  pointer-events: none;pointer-events:auto;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: 250ms ease-in;
  transition: 250ms ease-in;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    pointer-events:auto;        	  
}

#sidebar::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

#sidebar .navbar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 20px;
}

#sidebar .navbar-header .brand-logo {
  font-size: 1.5em;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: 250ms ease-in;
  transition: 250ms ease-in;
  visibility: visible;
}

.nav-link {
	color: #fff;
	text-align:left;
	float:left;
	text-decoration: none;
}

#sidebarcover a, a:link, a:visited {
	color: #fff;
	text-decoration: none;
}

#sidebarcover a:active {
	color: #fff;
	text-decoration: none;
}

.navbar-body .nav-item {
  padding: 10px 20px;
  cursor: pointer;
  -webkit-transition: 400ms all ease-in-out;
  transition: 400ms all ease-in-out;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

#main-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding: 15px 15px;
}

#main-content .check-box {
  cursor: pointer;
  display: inline-block;
  pointer-events: auto; 
}

#main-content .check-box .line {
  width: 20px;
  height: 2px;
  background-color: #212121;
  margin: 4px 0;
  display: block;
  pointer-events: auto; 
}

#checkbox {
  display: none;
  pointer-events: auto; 
}

#checkbox:checked ~ #sidebar {
  width: 0;
  -webkit-animation: sidebarAnim 500ms;
          animation: sidebarAnim 500ms;
}

#checkbox:checked ~ #sidebar .nav-item {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}

#checkbox:checked ~ #sidebar .brand-logo {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  visibility: hidden;
}

#checkbox:checked ~ #sidebar .navbar-header {
  visibility: hidden;
}

.navbar-body .nav-item:hover {
  background-color: #842250;
  color: #424244;
}

@-webkit-keyframes sidebarAnim {
  0% {
    width: 220px;
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    visibility: visible;
  }
  50% {
    width: 220px;
  }
  100% {
    width: 0;
    opacity: 0;
    -webkit-transform: translateX(-220px);
            transform: translateX(-220px);
    visibility: hidden;
  }
}

@keyframes sidebarAnim {
  0% {
    width: 220px;
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    visibility: visible;
	
  }
  50% {
    width: 220px;
  }
  100% {
    width: 0;
    opacity: 0;
    -webkit-transform: translateX(-220px);
            transform: translateX(-220px);
    visibility: hidden;
  }
}
/*# sourceMappingURL=style.css.map */

.scrllcover {width:100%;}

.flx-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	overflow: hidden;
}

#productsx {
	width:100%;
	left:0px;
	overflow: hidden;
}

.fourscroll {
  width: 22.5%;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

	.scrllcover {width:100%; overflow: scroll; padding: 0  5% }
	
	#productsx {
		width:376%;
	}
	.fourscroll {
		 width:22.5%;
	}
	
}