@import url(https://fonts.googleapis.com/css?family=Fjalla+One:400|Roboto:400,400italic,700);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');


body {
  font-family: calbari, sans-serif !important;
  text-decoration: none !important;
}
.logo img {
	    height: 60px;
    margin: 60px auto 0;
    display: block;
}
.home {
	padding: 40px 0 0 0;
	text-align: center;
}
.home p {
	font-weight: bold;
}
.input-group-btn img {
	height: 20px;
}
.input-group input {
	height: 45px;
	border-left: none;
}
.input-group-btn {
	height: 45px;
}
.dropdown-toggle {
	height: 45px;

}
.login {
	width: 60%;
    margin: 40px auto 0;
}
.login {
    width: 90%;
    margin: 60px auto 0;
}
.button-10 {
	    padding: 10px 0;
    bottom: 20px;
    width: 100%;
    background-color: #586ac3;
    color: #fff;
    font-weight: bold;
    margin: 25px 0 0 0;
}
.logo-1 {
	margin: 60px auto 0;
	display: table;
}
.logo-1 h4 {
	font-weight: bold;
	text-align: center;
	font-size: 22px;
}
.logo-1 p {
	font-size: 16px;
}
.float-label-control { position: relative; margin-bottom: 1.5em; width:80%; margin: 0 auto; }
    .float-label-control ::-webkit-input-placeholder { color: transparent; }
    .float-label-control :-moz-placeholder { color: transparent; }
    .float-label-control ::-moz-placeholder { color: transparent; }
    .float-label-control :-ms-input-placeholder { color: transparent; }
    .float-label-control input:-webkit-autofill,
    .float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; }
    .float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; }
        .float-label-control input:focus,
        .float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
        .float-label-control textarea:focus { padding-bottom: 4px; }
    .float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; }
    .float-label-control textarea { padding: 0.1em 0em 5px 0em; }
    .float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; }
    .float-label-control input.empty + label,
    .float-label-control textarea.empty + label { top: 0.1em; font-size: 1.5em; animation: none; -webkit-animation: none; }
    .float-label-control input:not(.empty) + label,
    .float-label-control textarea:not(.empty) + label { z-index: 1; }
    .float-label-control input:not(.empty):focus + label,
    .float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; }
    .float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; }
    .float-label-control.label-bottom input:not(.empty) + label,
    .float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }


@keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@-webkit-keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

@-webkit-keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

/*------------ we are  -----*/
.we a{
    font-size:12px;
}
#countdown{
	font-size: 14px;
    color: #5cb85c;
    margin: 20px auto;
    text-align: center;
    display: table;
}
.fixed-bottom {
	    width: 80%;
position: absolute;
bottom: 20px;
left: 10%;
}
.form-heading { color:#fff; font-size:23px;}
.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
.login-form .form-control {
  background: #f7f7f7 none repeat scroll 0 0;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}
.main-div {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 2px;
  margin: 10px auto 30px;
  max-width: 38%;
  padding: 50px 70px 70px 71px;
}

.login-form .form-group {
  margin-bottom:10px;
}
.login-form{ text-align:center;}
.forgot a {
  color: #777777;
  font-size: 14px;
  text-decoration: underline;
}
.login-form  .btn.btn-primary {
  background: #f0ad4e none repeat scroll 0 0;
  border-color: #f0ad4e;
  color: #ffffff;
  font-size: 14px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0;
}
.forgot {
  text-align: left; margin-bottom:30px;
}
.botto-text {
  color: #ffffff;
  font-size: 14px;
  margin: auto;
}
.login-form .btn.btn-primary.reset {
  background: #ff9900 none repeat scroll 0 0;
}
.back { text-align: left; margin-top:10px;}
.colors {
   /* text-indent: 10px;*/
    font-family: Arial;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    width: 10%;
}
.colors span {
    animation: 20s linear 0s normal none infinite running rotateColors;
    color: red;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    font-size: 25px;
    width: 90%;
    text-align: center;
}
.colors span:nth-child(2) {
    animation-delay: 3s;
    color: orange;
}
.colors span:nth-child(3) {
    animation-delay: 6s;
    color: goldenrod;
}
.colors span:nth-child(4) {
    animation-delay: 9s;
    color: green;
}
.colors span:nth-child(5) {
    animation-delay: 12s;
    color: blue;
}
.colors span:nth-child(6) {
    animation-delay: 15s;
    color: purple;
}
@keyframes rotateColors {
0% {
    opacity: 0;
}
2% {
    opacity: 0;
    transform: translateY(-30px);
}
5% {
    opacity: 1;
    transform: translateY(0px);
}
17% {
    opacity: 1;
    transform: translateY(0px);
}
20% {
    opacity: 0;
    transform: translateY(30px);
}
80% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}
.fixed-bottom a:hover {
  color: #fff !important;
}
.btn.focus, .btn:focus, .btn:hover {
  color: #fff !important;
}
.login-1
{    top: 0;
    position: fixed;
    z-index: 99;
    width: 100%;
    left: 0;
}

.login-1 h4 {
  background-color: #fff;
box-shadow: 0 0 5px #ccc;
padding: 20px 10px 15px 15px;
margin: -7px 0;
text-decoration: none !important;
font-size: 16px;

}
.login-1 h4 a {
  text-decoration: none !important;
}
.login-1 h4 i {
  font-size: 16px;
}
.btn {
  border: none !important;
  border-bottom: 1px solid #ccc !important;
}



.modal-header {
  border-bottom: none !important;
}
.button-10 {
  border-radius: 0px;
margin: 0px;
margin: 0px;
border: none !important;
}
.modal-footer {
  padding: 0px !important;
  border-radius: 0px !important;
}
.fixed-bottom-9 {
  margin: 20px 0 0 0;
}
.modal-body h5 {
  text-align: center;
}



.bs-vertical-wizard {
    border-right: 1px solid #eaecf1;
    padding-bottom: 60px;
}

.bs-vertical-wizard ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bs-vertical-wizard ul>li {
    display: block;
    position: relative;
}

.bs-vertical-wizard ul>li>a {
    padding: 10px 10px 10px 10px;
    color: #333c4e;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    text-decoration: none;
}

.bs-vertical-wizard ul>li>a:before {
    content: '';
    position: absolute;
    width: 1px;
    height: calc(100% - 25px);
    background-color: #bdc2ce;
    left: 13px;
    bottom: -9px;
    z-index: 3;
}

.bs-vertical-wizard ul>li>a .ico {
    pointer-events: none;
    font-size: 14px;
    position: absolute;
    left: 10px;
    top: 15px;
    z-index: 2;
}

.bs-vertical-wizard ul>li>a:after {
    content: '';
    position: absolute;
    border: 2px solid #bdc2ce;
    border-radius: 50%;
    top: 14px;
    left: 6px;
    width: 16px;
    height: 16px;
    z-index: 3;
}

.bs-vertical-wizard ul>li>a .desc {
  display: block;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 0 0 40px;
}

.bs-vertical-wizard ul>li.complete>a:before {
    background-color: #5cb85c;
    opacity: 1;
    height: calc(100% - 25px);
    bottom: -9px;
}

.bs-vertical-wizard ul>li.complete>a:after {display:none;}
.bs-vertical-wizard ul>li.locked>a:after {display:none;}
.bs-vertical-wizard ul>li:last-child>a:before {display:none;}

.bs-vertical-wizard ul>li.complete>a .ico {
    left: 8px;
}

.bs-vertical-wizard ul>li>a .ico.ico-green {
    color: #5cb85c;
}

.bs-vertical-wizard ul>li>a .ico.ico-muted {
    color: #bdc2ce;
}

.bs-vertical-wizard ul>li.current {
    background-color: #fff;
}

.bs-vertical-wizard ul>li.current>a:before {
    background-color: #ffe357;
    opacity: 1;
}

.bs-vertical-wizard ul>li.current>a:after {
    border-color: #ffe357;
    background-color: #ffe357;
    opacity: 1;
}

.bs-vertical-wizard ul>li.current:after, .bs-vertical-wizard ul>li.current:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.bs-vertical-wizard ul>li.current:after {
    border-color: rgba(255,255,255,0);
    border-left-color: #fff;
    border-width: 10px;
    margin-top: -10px;
}

.bs-vertical-wizard ul>li.current:before {
    border-color: rgba(234,236,241,0);
    border-left-color: #eaecf1;
    border-width: 11px;
    margin-top: -11px;
}
.second {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 1px 7px;
    border-radius: 50%;
    margin: 10px 0 0 0;
    display: inline-block;

}
.fixed-bottom-10 {
    position: fixed;
    bottom: 6px;
    display: block;
    width: 91%;

}
.modal-body {
    position: relative;
    padding: 5px !important;

}

@-webkit-keyframes popUp {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes popUp {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}

.profile__picture {
    background: #ffffff;
    border-radius: 100px;
    border: 5px solid #fff;
    height: 70px;
    width: 70px;
    float: inline-start;

}
.profile__picture img {
  border-radius: 100px;
  height: 100%;
  width: 100%;
  float: left;
}
.modal-body-9 {
  background-color: #f3f3f3;
}

.modal-content-9 {
  margin: 50% 0 0 0;
}
.auto-modal {
  padding: 15px;
}
.auto-modal h4 {
        text-align: center;
        font-size: 18px;
}
.auto-modal p {
  font-size: 14px;
}
.second-para {
  font-size: 12px !important;
}
.modal-content {
  margin:    0 auto;
}
/*
 * FilePond Custom Styles
 */

.filepond--drop-label {
  color: #4c4e53;
}

.filepond--label-action {
  text-decoration-color: #babdc0;
}

.filepond--panel-root {
  background-color: #edf0f4;
}


/**
 * Page Styles
 */

.filepond--root {
  width:170px;
  margin: 0 auto;
}
.profile {
    border: 1px solid #ccc;
    width: 60px;
    border-radius: 50%;
    padding: 7px;
    height: 60px;
        float: left;
}
.profile p  {
      font-size: 9px;
}
.profile i {
      margin: 5px auto;
    display: block;
    width: 25%;
}
.profile-9 {
    padding: 10px 0 10px 5px;
    height: 80px;
}
.sohail {
margin: 0px
}
.sohail h4 {
  margin: 0px;
  padding: 0 0 0 70px;
}
.sohail p {
  margin: 0px;
  padding: 0 0 0 70px;
  font-size: 13px;
}
.span-9 {
  background-color: #ccc;
padding: 3px 7px;
border: 1px solid #ccc;
border-radius: 50%;
margin: 0 10px 0 20px;
color: #fff;
}
.addprofilepage {
  background-color: #e6e6e6e8;
  height: auto;
}
.second-section {
 border: 1px solid #ccc;
background-color: #fff;
padding: 0px 0;
margin: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.second-section a {
  color: #000;
  text-decoration: none;
}
.secondsection-9 {
  border-top: 1px solid #ccc;
  padding: 12px 0;
  display: block;
}
.secondsection-28 {
  padding: 12px 0;
  display: block;
}



.submit-approval {
    margin: 30px auto;
    width: 94%;
    display: block;

}

.title-pen {
  color: #333;
  font-family: "Coda", sans-serif;
  text-align: center;
}
.title-pen span {
  color: #55acee;
}

.user-profile {
  margin: auto;
  width: 100%; 
  height: 100px;
  background: #ffd5d5;
  border-radius: .3em;
}

.user-profile .username {
    margin: auto;
        margin-top: auto;
        margin-left: auto;
    margin-top: -5.4em;
    margin-left: 5.1em;
    color: #000;
    font-size: 15px;
    font-family: "Coda", sans-serif;
    font-weight: bold;
    text-decoration: none !important;
}
a {
  text-decoration: none !important;
}
.user-profile  .bio {
  margin: auto;
  display: inline-block;
  margin-left: 6.43em;
  color: #e76043; 
  font-size: .87em;
  font-family: "varela round", sans-serif;
}
.username {
  text-decoration: none !important;
}
.user-profile > .description {
  margin: auto;
  margin-top: 1.35em;
  margin-right: 4.43em;
  width: 14em;
  color: #c0c5c5; 
  font-size: .87em;
  font-family: "varela round", sans-serif;
}
.user-profile > img.avatar {
  padding: .7em;
  margin-left: .3em;
  margin-top: .3em;
  height: 6.23em;
  width: 6.23em;
  border-radius: 18em;
}

.user-profile ul.data {
  margin: 2em auto;
  height: 3.70em;
  background: #4eb6b6;
  text-align: center;
  border-radius: 0 0 .3em .3em;
}
.user-profile li {
  margin: 0 auto;
  padding: 1.30em; 
  width: 33.33334%;
  display: table-cell;
  text-align: center;
}

.user-profile span {
  font-family: "varela round", sans-serif;
  color: #e3eeee;
  white-space: nowrap;
  font-size: 1.27em;
  font-weight: bold;
}
.user-profile span:hover {
  color: #daebea;
}



.auto-modal i {
  margin: 0 auto;
display: table;
font-size: 25px;
color: #586ac3;
}
.get {
  border: 1px solid #000;
      float: right;
    border-radius: 2px;
    padding: 5px;
    margin: -7px 0 !important;
}
.node {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display:inline-block;
    transition: all 1000ms ease;
}

.activated {
    box-shadow: 0px 0px 3px 2px rgba(194, 255, 194, 0.8);
}

.divider {
    height: 40px;
    width: 2px;
    margin-left: 4px;
    transition: all 800ms ease;
}
.green{ background-color: rgba(92, 184, 92, 1) }
.red { background-color: rgba(255, 148, 148, 1); }
.grey { background-color: rgba(201, 201, 201, 1); }
.login-28 {
  height: 60px;
}
.login-28 h4 {
      background-color: #fff;
    box-shadow: 0 0 5px #ccc;
    padding: 15px 10px;
    margin: 0px 0;
    text-decoration: none !important;
    font-size: 16px;
}
.iden h4 {
  font-size: 16px;
  padding: 0 15px 15px 15px;
  font-weight: bold;
  line-height: 20px;
}
.badge-default {
  background-color: #777;
}
.badge-primary {
  background-color: #337ab7;
}
.badge-success {
  background-color: #5cb85c;
}
.badge-info {
  background-color: #5bc0de;
}
.badge-warning {
  background-color: #f0ad4e;
}
.badge-danger {
  background-color: #d9534f;
}

.navbar-icon-top .navbar-nav>li>a>.fa, .navbar-icon-top .navbar-nav>li>a>.glyphicon {
    position: relative;
    width: 36px;
    font-size: 24px;
}
.navbar-icon-top .navbar-nav>li>a>.fa>.badge, .navbar-icon-top .navbar-nav>li>a>.glyphicon>.badge {
    position: absolute;
    right: 0;
    font-family: sans-serif;
}
.navbar-icon-top .navbar-nav>li>a>.fa {
    top: 3px;
    line-height: 12px;
}
.navbar-icon-top .navbar-nav>li>a>.fa>.badge {
    top: -10px;
}
.navbar-icon-top .navbar-nav>li>a>.glyphicon {
    top: 6px;
    line-height: 6px;
}
.navbar-icon-top .navbar-nav>li>a>.glyphicon>.badge {
    top: -16px;
}

@media (min-width: 768px) {
    .navbar-icon-top .navbar-brand {
        padding: 25px 15px;
    }
    .navbar-icon-top .navbar-text {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .navbar-icon-top .navbar-btn, .navbar-icon-top .navbar-form {
        margin-top: 18px;
        margin-bottom: 18px;
    }
    .navbar-icon-top .navbar-nav>li>a {
        text-align: center;
        display: table-cell;
        height: 70px;
        vertical-align: middle;
        padding-top: 0;
        padding-bottom: 0;
    }
    .navbar-icon-top .navbar-nav>li>a>.fa, .navbar-icon-top .navbar-nav>li>a>.glyphicon {
        display: block;
        width: 48px;
        margin: 2px auto 4px auto;
        top: 0;
        line-height: 24px;
    }
    .navbar-icon-top .navbar-nav>li>a>.fa>.badge, .navbar-icon-top .navbar-nav>li>a>.glyphicon>.badge {
        top: -7px;
    }
}


.menu-1 ul {
  margin: 0px;
  padding: 0px;
}
.menu-1 ul li {
     width: 25%;
    margin: 0px;
    text-align: center;
    float: left;
    list-style: none;
}
.menu-1 ul li a i  {
          text-align: center;
display: block;
padding: 5px 0 5px;
font-size: 16px;
}
.menu-1 ul li a {
  padding: 5px 0;
display: block;
color: #777575;
text-decoration: none;
font-size: 12px;
}
.menu-1 ul li a:hover {
    color: #586ac3;
} 
.menu-1 ul li a.active {
    color: #586ac3 !important;
}
.menu-1 {
  position: fixed;
bottom: 0px;
background-color: #fff;
width: 100%;
padding: 5px 0;
z-index: 999;
border-top: 1px solid #eaeaea;
    box-shadow: 0 0 10px #b9b9b9;
}

.menu-20 ul li{width: 20% !important }


.stack-menu__link {
  padding: 10px 20px !important;
border-bottom: 1px solid #ccc;
display: block;
text-decoration: none !important;
}
.stack-menu__link {
  padding: 10px 20px !important;
border-bottom: 1px solid #ccc;
display: block;
text-decoration: none !important;
}
.stack-menu {
  width:95%;
  margin: 0 auto;
}
.and-10 {
  color: #fff;
}
.and-10:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.select {
  padding: 0 0 0 15px;
}
.select p {
  padding: 20px 0 0 0;
  font-size: 12px;
}
.popular p {
  padding: 10px 0 10px 15px;
  font-size: 12px;
  color: #000;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 0px !important;
}
.select h3 {
  margin-top: 0px !important;
  padding: 0px;
  font-size: 20px;
  font-weight: bold;
}

/* Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}
/* Styles for wrapping the search box */

.main {
    width: 90%;
    margin: 10px auto;
}

/* Bootstrap 3 text input with search icon */

.has-search .form-control-feedback {
    right: 9px;
    left: 5px;
    color: #000;
    top: 7px;
}

.has-search .form-control {
    padding-right: 12px;
    padding-left: 34px;
}
.search {
  height: 45px !important;
}
.background-color-category {
  background-color: #f3f3f3;
}
.checkbox input,
.checkbox-inline input,
.radio input,
.radio-inline input {
  opacity: 0;
  position: absolute;
}

.checkbox label,
.radio label {
  margin-top: 5px;
  margin-bottom: 5px;
}

.checkbox .indicator,
.checkbox-inline .indicator,
.radio .indicator,
.radio-inline .indicator {
  position: relative;
}

.checkbox .indicator:before,
.checkbox-inline .indicator:before,
.radio .indicator:before,
.radio-inline .indicator:before {
  content: '';
  border: 2px solid #888;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
  padding: 2px;
  margin-top: -5px;
  margin-right: 10px;
  text-align: center;
}

.checkbox input:checked + .indicator:before,
.checkbox-inline input:checked + .indicator:before {
  border-color: #00f;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="-7 -7 30 30"><path fill="#00f" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>') no-repeat;
}

.checkbox input:disabled + .indicator:before,
.checkbox-inline input:disabled + .indicator:before {
  border-color: #ccc;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

.checkbox input:checked:disabled + .indicator:before,
.checkbox-inline input:checked:disabled + .indicator:before {
  border-color: #ccc;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="-7 -7 30 30"><path fill="#ccc" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>') no-repeat;
}

.radio input + .indicator:before,
.radio-inline input + .indicator:before {
  border-radius: 50%;
}

.radio input:checked + .indicator:before,
.radio-inline input:checked + .indicator:before {
  border-color: #00f;
  background: #00f;
  box-shadow: inset 0px 0px 0px 5px #fff;
}

.radio input:disabled + .indicator:before,
.radio-inline input:disabled + .indicator:before {
  border-color: #ccc;
  box-shadow: inset 0px 0px 0px 5px #fff;
}

.radio input:checked:disabled + .indicator:before,
.radio-inline input:checked:disabled + .indicator:before {
  border-color: #ccc;
  background: #ccc;
  box-shadow: inset 0px 0px 0px 5px #fff;
}

.checkbox input:focus + .indicator,
.checkbox-inline input:focus + .indicator,
.radio input:focus + .indicator,
.radio-inline input:focus + .indicator {
  outline: 0px solid #ddd;
  /* focus style */
}
.checkbox, .radio {

    position: relative;
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-weight: bold;

}
.radio label {
  font-weight: bold;
}
.button-12 {
    position: fixed;
    padding: 10px 0;
    bottom: 0px;
    width: 100%;
    background-color: #586ac3;
    color: #fff;
    font-weight: bold;
    margin: 25px 0 0 0;
    border-radius: 0px;

}
.form-control {
  height: 45px !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 0 0 !important;
}
.stack-menu__link {
    background-position: center right 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M.087 1.656L1.232.318l4.681 5.026-1.145 1.338z'/%3E%3Cpath d='M4.768 5.318l1.145 1.338-4.68 5.026-1.146-1.338z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat !important;

}
.stack-menu {

box-shadow: 0 0 0 !important;
}
.menu-4 {
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px !!important;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
}
.menu-2 {
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    width: 95%;
    font-weight: 500;
    font-size: 14px;
    margin: 5px auto;
}
#stack-menu-1 {
    background-color: #fff;
}
.stack-menu__link-1 {
    padding: 10px 20px !important;
    border-bottom: 1px solid #ccc;
    display: block;
    /* text-decoration: none !important; */
    font-size: 13px !important;
}
.stack-menu__link-1 {
    background-position: center right 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M.087 1.656L1.232.318l4.681 5.026-1.145 1.338z'/%3E%3Cpath d='M4.768 5.318l1.145 1.338-4.68 5.026-1.146-1.338z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    color: #000;

}
.stack-menu__link-10 {
    padding: 10px 20px !important;
    border-bottom: 1px solid #ccc;
    display: block;
    text-decoration: none !important;
    font-size: 13px !important;
    width: 95%;
    background-color: #f7f7f7;
    margin: -30px auto;
}
.stack-menu__link-10 {
    background-position: center right 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M.087 1.656L1.232.318l4.681 5.026-1.145 1.338z'/%3E%3Cpath d='M4.768 5.318l1.145 1.338-4.68 5.026-1.146-1.338z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    color: #000;

}
 ul {
  list-style: none !important;
  padding: 0px !important;
}
.new-9 {

    background-color: #6a6a6a;
    min-height: 150px;

}
.new-leads-1 h4 {
  color: #fff;
  font-weight: bold;
  padding: 0 15px;
  float: left;
}
.menu-26 ul li {
  text-align: center;
    display: inline-block;
    padding: 10px 0px;
}
.menu-26 ul li a {
    color: #fff;
    font-size: 10px;
    display: grid;
    padding: 0 7px;
    text-decoration: none !important;
}
.menu-26 ul li  i {
  color: #fff;
  font-size: 18px;
  text-decoration: none !important;
}
.menu-26 {
  float: right;
}
.zero-9 {
  position: absolute;
top: 11px;
color: #000;
right: 60px;
font-weight: bold;
}
.alerts-9 {
  width: 95%;
  margin:0 auto;
}

.bio a {
  background-color: #455a64;
    padding: 5px 5px;
    border-radius: 5px;
    color: #fff;
    margin: 10px 0 0 0;
    display: block;
}
.policy {
    width: 41%;
    background-color: #fff;
    float: left;

}
.menu-3 {
  margin: 0 0 60px 0 !important;
}
.stack-menu__link {
  font-size: 15px !important;
}
.gst  {
 border: 1px solid #ccc;
margin: 20px 0 0 0;
border-radius: 5px;
padding: 0 10px;
width: 95%;
margin: 5px auto;
}
.gst h4 {
font-size: 16px;
font-weight: bold;
}
.gst a {
  padding: 10px 0px;
  display: block;
  font-weight: bold;
}
hr {
  margin: 0px !important;
}
.dropdown {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
.dropdown select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Magic font size number to prevent iOS text zoom */
  font-size:1.25em;
  /* General select styles: change as needed */
  /* font-weight: bold; */
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}
.dropdown select,
label {
}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */

.dropdown::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  z-index: 2;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(102,102,102)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") 0 0 no-repeat;  
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}

/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dropdown select::-ms-expand {
    display: none;
  }
  /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
  select:focus::-ms-value {
    background: transparent;
    color: #222;
  }
}

/* Firefox >= 2 -- Older versions of FF (v2 - 6) won't let us hide the native select arrow, so we'll just hide the custom icon and go with native styling */
/* Show only the native arrow */
body:last-child .dropdown::after, x:-moz-any-link {
  display: none;
}
/* reduce padding */
body:last-child .dropdown select, x:-moz-any-link {
  padding-right: .8em;
}

/* Firefox 7+ -- Will let us hide the arrow, but inconsistently (see FF 30 comment below). We've found the simplest way to hide the native styling in FF is to make the select bigger than its container. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.dropdown::after`, did not undo the previous rule */

/* Set overflow:hidden on the wrapper to clip the native select's arrow, this clips hte outline too so focus styles are less than ideal in FF */
_::-moz-progress-bar, body:last-child .dropdown {
  overflow: hidden;
}
/* Show only the custom icon */
_::-moz-progress-bar, body:last-child .dropdown:after {
  display: block;
}
_::-moz-progress-bar, body:last-child .dropdown select {
  /* increase padding to make room for menu icon */
  padding-right: 1.9em;
  /* `window` appearance with these text-indent and text-overflow values will hide the arrow FF up to v30 */
  -moz-appearance: window;
  text-indent: 0.01px;
  text-overflow: "";
  /* for FF 30+ on Windows 8, we need to make the select a bit longer to hide the native arrow */
  width: 110%;
}

/* At first we tried the following rule to hide the native select arrow in Firefox 30+ in Windows 8, but we'd rather simplify the CSS and widen the select for all versions of FF since this is a recurring issue in that browser */
/* @supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
.dropdown select { width:110%; }
}   */


/* Firefox 7+ focus style - This works around the issue that -moz-appearance: window kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar, body:last-child .dropdown select:focus {
  outline: 2px solid rgba(180,222,250, .7);
}


/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus, .dropdown::after {
  display:none;
}


/* Hover style */
.dropdown:hover {
  border:1px solid #888;
}

/* Focus style */
select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}


/* Firefox focus has odd artifacts around the text, this kills that */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

option {
  font-weight:normal;
}


/* These are just demo button-y styles, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

.output {
  margin: 0 auto;
  padding: 0em; 
}
.colors-1 {
  padding: 0em;
  color: #fff;
  display: none;
  width: 100%;
}
.red {
  background: #c04;
} 
.yellow {
  color: #000;
}
.box {
  display: block;
  height: auto;
  margin: 10px;  
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

.upload-options {
    position: relative;
    height: auto;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    -webkit-transition: background-color ease-in-out 150ms;
    transition: background-color ease-in-out 150ms;
    padding: 5px;
    width: 46%;
    border: 1px dashed #4574b0;
    float: left;
    margin: 0 5px;
}
.upload-options input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.upload-options label {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}
.upload-options label::after {
  content: "\f0fe";
font-family: 'FontAwesome';
font-size: 2.5rem;
color: #8853ff;
z-index: 0;
margin: 0 auto;
}
.upload-options label span {
  display: inline-block;
  width: 50%;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}
.upload-options label span:hover i.material-icons {
  color: lightgray;
}

.js--image-preview {
  height: 83px;
width: 48%;
position: relative;
overflow: hidden;
background-image: url("");
background-color: white;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: right;
}

.drop {
  display: block;
  position: absolute;
  background: rgba(95, 158, 160, 0.2);
  border-radius: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.animate {
  -webkit-animation: ripple 0.4s linear;
          animation: ripple 0.4s linear;
}

@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}
.upload-options h6 {
    color: #000;
}
.contactContainer p {
  font-size: 11px;
  color: #000;
}
.contactContainer {
  margin: 10px 0;
}
.Invite h3 {
  font-size: 18px;
padding: 10px 20px 10px;
line-height: 30px;
}
.button-10 a {
  color: #fff;
}
/*::-webkit-input-placeholder {
  direction: rtl;
}

fieldset.form-group {
  position: relative;
}

label {
  position: absolute;
  top: .6rem;
  left: 1rem;
  transition: all .1s ease-in-out;
  cursor: text;
}

:focus + label {
  color: #66afe9;
  top: -.9rem;
  background: white;
}*/
.identify-1{
  margin: 0 0 60px 0;
}
.plain ol > li 
{
 line-height: 27px;     
}


/* -------------------------------------- */    
/* underlined list stle                   */

.underlined ol 
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

.underlined ol > li 
{
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#f6f6f6;
}

.underlined ol > li:before 
{
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

.underlined li ol,
.underlined li ul 
{
margin-top:6px;
}

.underlined ol ol li:last-child 
{
margin-bottom:0;
}
.section {
  padding: 30px 0;
  color: #333;
}
.section .top-side {
  text-align: center;
}
.section .top-side .title {
  font-weight: 500;
  font-size: 15px;
  display: inline-block;
}
.section .top-side .title:after {
  content: "";
  display: block;
  width: 50%;
  border-bottom: 1px solid #494949;
  margin: 8px auto;
}
.section .top-side h2 {
  font-weight: 700;
}
.section.portfolio .filters {
  text-align: center;
  margin-top: 50px;
}
.section.portfolio .filters ul {
  padding: 0;
}
.section.portfolio .filters ul li {
  list-style: none;
  display: inline-block;
  padding: 20px 30px;
  cursor: pointer;
  position: relative;
}
.section.portfolio .filters ul li:after {
  content: "";
  display: block;
  width: calc(0% - 60px);
  position: absolute;
  height: 2px;
  background: #333;
  transition: width 350ms ease-out;
}
.section.portfolio .filters ul li:hover:after {
  width: calc(100% - 60px);
  transition: width 350ms ease-out;
}
.section.portfolio .filters ul li.active:after {
  width: calc(100% - 60px);
}
.section.portfolio .filters-content {
  margin-top: 50px;
}
.section.portfolio .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
.section.portfolio .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}
.section.portfolio .filters-content .item {
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
}
.section.portfolio .filters-content .item .p-inner {
  padding: 20px 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.section.portfolio .filters-content .item .p-inner h5 {
  font-size: 15px;
}
.section.portfolio .filters-content .item .p-inner .cat {
  font-size: 13px;
}
.section.portfolio .filters-content .item img {
  width: 100%;
}

#form1{
  padding:10px;
  border-radius:15px;
  display:none;

}

#formButton{
  color: #000;
  font-size: 14px;
  text-decoration: none;
 
}

b{
  color:#3498db;
}
#submit{
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  background: #3498db;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

#submit:hover{
  background: #3cb0fd;
  text-decoration: none;
}
.stack-menu__link:hover {
    color: #000 !important;
    background-color: #fff !important;
}
.contant-details i {
  font-size: 20px;
color: #62b79b;
}
.contant-details-1 i {
  font-size: 20px;
color: #000;
}
.contant-details-2 i {
  font-size: 20px;
color: #000;
}
.avatar-upload {
  position: relative;
  max-width: 205px;
  margin: 50px auto;
}
.avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}
.avatar-upload .avatar-edit input {
  display: none;
}
.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
  content: "\f040";
  font-family: 'FontAwesome';
  color: #757575;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}
.avatar-upload .avatar-preview {
  width: 192px;
  height: 192px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.guidelines {
  background-color: #f3f3f3;
  padding: 10px;
  margin: 60px 0 60px 0;
}