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

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

html
{
  	-webkit-tap-highlight-color:transparent; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */
	-o-user-select: none; user-select: none;
}

body {
	margin:0px; padding:0px; width:100%; height:100%; overflow: hidden; background-color:#000000; font-family:Arial; font-size: 13px; color:#fff; line-height: 20px;
	text-decoration:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	display:flex; flex-direction:column;  
}

#header {
	height:10%; width:100%; background-color:#000000; border-bottom: 1px solid #424242; display:inline-block; padding:1%; padding-bottom:0.5%;
}

#cardarea {
	flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory;  height:90%; width:100%; left:0;
}

#logo {
	height:90%; width:auto; display: inline-block;
}

#menuicon {
	height:90%; width:auto; display: inline-block; float:right; cursor:pointer;
}

.sidenav {
	height: 100%;  width: 360px; position: fixed; z-index: 1; top: 0px; left: 100%; background-color: #111111; overflow-x: hidden; transition: 0.5s;
	 backdrop-filter: blur(50px);

}

.sidenav a { 
	padding-top: 12px; padding-bottom:12px; text-decoration: none; color: #fff; display: block; transition: 0.3s; border-bottom: 1px solid #474747; width:80%; cursor:pointer; overflow:hidden; min-width:180px; margin-left:10%;
}

.sidenav p { 
	min-width:180px; 
}

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

#workarea {
	width:80%; margin-left:10%; margin-right:10%; display:inline-block;
}

.section {
	scroll-snap-align: start; height: 100%; box-sizing: border-box; padding:1.2%; 
} 

#addnew {
	top: 50%; left: 50%; transform: translate(-50%, -50%); position:fixed; opacity:42%; cursor:pointer;
}

#addnew:hover {
	opacity:100%;
}

#xflow {
	width: 100%; overflow: hidden; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory;
 }

#xflowchild {
	width: 28.3%; height: 100%; margin-right:5%; display: block; float:left; line-height: 20px; text-align: center; font-size: 14px; 
}

#backbtn {
	text-align:right; color:#ccc; cursor:pointer; font-size:20px; padding-top:9%; padding-right:6.5%; padding-bottom:4.5%;
}

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

::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #000000; 
}
::-webkit-scrollbar-thumb {
	border-radius: 7px;
	background: #424242; 
}
::-webkit-scrollbar-thumb:hover {
	background: #424242; 
}

@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) {

body {
	font-size: 14px; line-height: 22px;
}

#header {
	height:8%; padding:3%; padding-bottom:2%;
}

.sidenav {
	width:100%;
}

#workarea {
	width:88%; margin-left:6%; margin-right:6%; display:inline-block;
}

.section {
  padding:7%; padding-right:0px; padding-left:0px;
} #sectionplus {padding:5%;}

#xflow {overflow-x:scroll;}

#xflowchild {width: 90%; margin-right:5%; margin-left:5%; float:none; display:inline-block;}

#backbtn {
	padding-top:6.5%; padding-right:6.5%; padding-bottom:6.5%;
}

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

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

}

#flx{
	display: flex; 
	flex-direction: row; 
	justify-content: space-between;
	width:100%;
}

.fleshpopup {
	padding:10px; padding-left:22px; padding-right:22px; border-radius:12px; background-color:#fff; color:#000000; position:fixed;	display:block;	top: 85%; 
	left: 50%; transform: translate(-50%, -50%); max-width:90%; z-index:1000; visibility:hidden; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
	border: 1px solid #000000;
}

.frostedglass {
    filter: drop-shadow(2px 4px 6px black); background-color: rgba(152, 151, 151, 0.2); 
}

#centerdiv {
	border:1px solid #424242; border-radius: 7px; width:95%; max-width:320px; padding: 9px; top: 50%; left: 50%; position:relative; transform: translate(-50%, -50%);
}

#centerdiv frormarea {
	display:table; width:90%; margin-left: 5%; margin-right:5%; padding-top: 5%; padding-bottom: 5%;
}

#subheader {
	width:100%; top:0px; display:table; border-bottom:1px solid #424242;
}

#subheader p {
	color:#fff; padding-top:14px; font-size:14px;
}

#subheader b {
  float: right;
  overflow: hidden;
  position: relative;
  height: 14px;
  line-height:14px;
  top:3px;
  margin-right:10%;
}

@media only screen and (max-width: 768px) {#subheader b {margin-right:15.5%;}}

#subheader .innerIam {
  display: inline-block;
  color: #12e315;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;

/*animation*/
-webkit-animation:move 5s;
   -moz-animation:move 5s;
    -ms-animation:move 5s;
     -o-animation:move 5s;
        animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:4s;
   -moz-animation-delay:2s;
    -ms-animation-delay:2s;
     -o-animation-delay:2s;
        animation-delay:2s;
}

#subheader img {
	height:48px; float:left; vertical-align:middle; margin-top:3px; margin-left:5px; padding:4px;
}

/* Image Upload */
    
#imgContainer {
    width: 100%; text-align: center; position: relative; margin-bottom: 12px;
}
#imgArea {
	display: inline-block; margin: 0 auto; width:36%;	 max-width: 110px; height:auto; max-height: 110px; position: relative; background-color: #eee; font-size: 13px; 
	border-radius: 50%; border: 2px solid #AAA; overflow: hidden; cursor: pointer;
}
#imgArea img {
	outline: medium none; vertical-align: middle;  width: 100%; border-radius: 50%;
}
#imgChange {
	bottom: 0; color: #FFFFFF; display: block; height: 16%; left: 0; line-height: 32px; position: absolute; text-align: center; width: 100%; padding-bottom: 4px;
}
#imgChange img {
	width:16%; height:auto; border: 1px solid #000000;
}
#imgArea input[type="file"] {
    bottom: 0; cursor: pointer; height: 100%; left: 0; margin: 0; opacity: 0; padding: 0; position: absolute; width: 100%; z-index: 0;
}
/* Progressbar Image Upload */
.progressBar {
	background: none repeat scroll 0 0 #ffd700; left: 0; padding: 3px 0; position: absolute; top: 43%; width: 100%; display: none;
}
.progressBar .bar {
    background-color: #000000; width: 0%; height: 14px;
}
.progressBar .percent {
	display: inline-block; left: 0; position: absolute; text-align: center; top: 0; width: 100%; color: #fff; font-size: 11px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer; 
}
.card div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 6px;
  filter: drop-shadow(2px 4px 6px black); background-color: rgba(152, 151, 151, 0.2); border: 1px solid #626262;
}
.card .back {
  transform: rotateY(180deg); 
}
.card.flipped {
  transform: rotateY(180deg);
}

myerror{
    display: none; 
    color: #B30002; 
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 5px; 
    background-color: #FFDFE0;
    margin-bottom: 7px;
	text-align:left;
}

/* Form Field */
#contact {
	padding-left:0px;
	padding-right:0px;
	margin:0 0;
	position:relative;
	width:100%;
}

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

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

fieldset label {
    font-size: 12px;
    padding-bottom: 9px;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="otp"],#contact input[type="url"], input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea, #contact select {
	width:100%;
	border:1px solid #fff;
	border-radius: 5px;
	background:#111;
	margin:0 0 8px;
	padding:12px;
	color:#fff;
	background-position:right; background-repeat:no-repeat; background-size:28px;
}

#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"], fieldset input[type="datetime-local"], #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 #0c9b0f;
}

#contact input[type="text"]:focus, #contact input[type="email"]:focus, #contact input[type="tel"]:focus, #contact input[type="url"]:focus, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:focus {
	-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 #076009;	
}

#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;
}

.mitraabtn {
	background-color:#393738;
	border-radius:8px; 
	width:auto; 
	padding:10px;
	padding-right:20px;
	padding-left:20px; 
	color:#fff; 
	text-align:center; 
	font-size:12px;  
	cursor:pointer;
	border: 1px solid #ccc;
	margin-top:16px;
}

.mitraabtn:hover {
	border-color:#076009; 
}

.otherbtn {
	background-color:#000000;
	border-radius:8px; 
	width:auto; 
	padding:10px;
	padding-right:20px;
	padding-left:20px; 
	color:#fff; 
	text-align:center; 
	font-size:12px;  
	cursor:pointer;
	border: 1px solid #ccc;
	margin-top:8px;
	margin-left:20%; margin-right:20%;
}

.toggle-btn-container {
	width:100%; height:auto; float:left; left:0px; display:block; margin-top:3%;
}

.toggle-btn-container p {
	font-size:14px; width:80%; float:left; text-align:left; padding-top:3px;
}

.toggle-btn-container p > img {
	margin-left:5px; height:21px; width:auto; vertical-align:middle;
}

.toggle-btn
{
	width:40px;
	height:25px;
	background-color:#FF484B;
	border-radius:30px;
	padding:3px;
	transition:all 400ms ease-in-out;
	cursor:pointer;
}
.toggle-btn > .circle
{
	width:18px;
	height:18px;
	background:white;
	border-radius:50%;
	transition:all 400ms ease-in-out;
}
.toggle-btn.active
{
	background-color:#00B82C;
}

.toggle-btn.active > .circle
{
	margin-left:15px;
}

.toggle-btn.deactivate
{
	background-color:#FF484B;
}

.toggle-btn.deactivate > .circle
{
	margin-left:0px;
}


#statistics {
	background-color:#161616; border-radius: 5px; padding:8px; padding-top:1px; padding-bottom:9px; width:100%; height:auto; 
	float:left; left:0px; display:block; margin-top:25px;
}

#statisticsarea {
	background-color:#000000; border-radius: 5px; padding:15px; padding-top:15px; padding-bottom:10px; display: flex; flex-direction: row; justify-content: space-between;
	border:1px solid #626262; 
}

.or {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #686868; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

.or span { 
    background:#111; 
    padding:0 10px;
	color:#686868;
}

/* Slideshow */
.mySlides {display: none}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  height: 100%;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  user-select: none;
  padding:5%;
}

.next {
  right: 10px;
  border-radius: 5px;
}

.prev {
  left: 10px;
  border-radius: 5px;	
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 16px}
}

/* type effect */

.typebtn {
	border-radius:8px; 
	width:auto; 
	padding:6px;
	color:#fff; 
	text-align:left; 
	font-size:12px;  
	cursor:pointer;
	border:none;
	font-weight:bold;
	overflow:hidden;
	margin-top:10px;
}

.typebtn p span.typed-text {
  font-weight: bold;
  color: #0c9b0f;
}
.typebtn p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.typebtn p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}

/* Animation word-up-down */

@keyframes move{
0%  { top: 0px; }
20% { top: -14px; }
40% { top: -28px; }
60% { top: -42px; }
80% { top: -56px; }
}

@-webkit-keyframes move {
0%  { top: 0px; }
20% { top: -14px; }
40% { top: -28px; }
60% { top: -42px; }
80% { top: -56px; }
}
@-moz-keyframes move {
0%  { top: 0px; }
20% { top: -14px; }
40% { top: -28px; }
60% { top: -42px; }
80% { top: -56px; }
}
@-o-keyframes move {
0%  { top: 0px; }
20% { top: -14px; }
40% { top: -28px; }
60% { top: -42px; }
80% { top: -56px; }
}
@keyframes move {
0%  { top: 0px; }
20% { top: -14px; }
40% { top: -28px; }
60% { top: -42px; }
80% { top: -56px; }
}