/*------>>> Animations <<<-----*/


@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.animate-switch-container {
  position:relative;
  overflow: hidden;
 /*  height: 500px; */
/*   width: 750px; */
  border: solid 1px black;
  box-shadow: 6px 6px 15px gray;
  padding:10px;
  border-radius:10px;

  background-size: 50px 50px;
}
}
 @media only screen and (min-width: 992px) {
 .animate-switch-container {
  position:relative;
  overflow: hidden;
 /*  height: 500px; */
  width: 750px; 
  border: solid 1px black;
  box-shadow: 6px 6px 15px gray;
  padding:10px;
  border-radius:10px;

  background-size: 50px 50px;
}
 }
.animate-switch{
  padding:10px;
  width: 100%;
  padding-top: 0px;
}
.animate-switch.ng-animate {
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
  position:absolute;

}
/* hide leaving slide  */
/* show */
.animate-switch.ng-leave{
  left:0;
}
/* hide */
.forward .animate-switch.ng-leave.ng-leave-active{
  left:-100%;
}
.backward .animate-switch.ng-leave.ng-leave-active{
  left: 100%;
}
/* show entering slide  */
/* hide */
.forward .animate-switch.ng-enter {
  left:100%;
}
.backward .animate-switch.ng-enter {
  left:-100%;
}
/* show */
.animate-switch.ng-enter.ng-enter-active {
  left:0;
}


/*-----------------------------------*/
/*------>>> Validation <<<-----------*/
/*-----------------------------------*/

.form-validation input.ng-invalid-maxlength {
  border:2px solid #D9272D;
}


.length-error {
  color: #D9272D;
  display: block;
  font-size: 12px;
  opacity: .8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  line-height: 18px;
  padding: 10px 10px 5px 10px;
  margin: -25px 0 20px 0;
  background-color: #E3E3E3;
  border-radius: 0 0 5px 5px;
}

.input-error {
  border: 2px solid #D9272D;
}

/*-----------------------------------*/
/*------->>> FORM STYLES <<<---------*/
/*-----------------------------------*/

.note {
  display: block;
  font-size: 12px;
  opacity: .8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  line-height: 18px;
}

.note-input {
  padding: 10px 10px 5px 10px;
  margin: -25px 0 20px 0;
  background-color: #E3E3E3;
  border-radius: 0 0 5px 5px;
}

.note-input-error, .required-error-banner {
  background-color: rgba(217, 39, 45, 0.5);
}

/*-----------------------------------*/
/*----------->>> HELPERS <<<-------------*/
/*-----------------------------------*/

/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
	    margin-left: 0px;
}
#progressbar li {
	list-style-type: none;
    color: black;
    text-transform: uppercase;
    font-size: 10px;
    width: 11%;
    float: left;
    position: relative;
    text-align: center;
}
#progressbar li:before {
	    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: #ffae1a;
    border-radius: 3px;
    margin: 0px auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
    width: 100%;
    height: 2px;
    background: #ffae1a;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}
 .underlined::before{background-color:#D7D7D7;}
.underlined::after{color:#D7D7D7; background-color:#FFFFFF;}
.bgded .underlined::after{background-color:#5c666f;}
.underlined{display:inline-block; position:relative; padding-bottom:8px; z-index:1;margin-bottom: 25px;}
.underlined::before, .underlined::after{display:block; position:absolute; bottom:0; width:100%; height:1px; content:"";}
.underlined::after{bottom:-10px; left:50%; width:20px; height:20px; line-height:20px; margin-left:-10px; font-family:"FontAwesome"; font-size:24px; content:"\f05b"; text-align:center;}


.social{
    background:#000;
    padding:6px 0;
}
.social-wrapper .social-icon a{
    float:left;
    font-size:13px;
    color:#fff;
}
.social-wrapper .social-icon a:hover{
    color:#82ca9c;
}
.social-wrapper .social-icon a i{
    padding-right:10px;
}
.social-wrapper .social-contact{
    float:right;
    font-size:12px;
}
.social-wrapper .social-contact a{
    color:#fff;
    margin-right:20px;
}
.social-wrapper .social-contact a:hover{
    color:#82ca9c;
}
.social-wrapper .social-contact a i{
    padding-right:5px;
}

/*For Menu Style*/
.navbar-default {
    background-color: transparent;
    border-color: transparent;
    border-radius:0;
    padding-top:20px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #82ca9c;
    background-color:transparent;
}
.navbar-default .navbar-nav>li>a {
    color: #000;
    font-size:12px;
    font-weight:600;
	text-transform:uppercase;
}
.navbar-default .navbar-nav li a :hover{
    color: #82ca9c;
}
.navbar-default .collapse .login a{
    color: #82ca9c;
    border: 1px solid #82ca9c;
    border-radius: 20px;
    padding: 4px 30px;
    font-size: 12px;
    margin-top: 10px;
    margin-left: 30px;
    display:inline-block;
    overflow:hidden;
}
.navbar-default .collapse .login:hover a{
    background-color: rgba(0, 173, 62, 0.75);
    color:#fff;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: #82ca9c;
    background-color: transparent;
}
/* .navbar-brand{
	margin-top:-33px;	
} */
.input-error {
  border: 1px solid #D9272D;
}
.navbar-nav>li>a {
    padding: 5px 7px;
}
/*For Footer Menu Section*/

.footer-menu{
    background:#0e3966;
    color:#fff;
    border-bottom:1px solid #cfcdcd;
}
.menu-item{
    margin-bottom:20px;
}
.menu-item h5{
    font-size:16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
}
.menu-item p{
    font-size:12px;
}
.menu-item ul li{
    font-size:13px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom:10px;
}

.menu-item .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 65%;
    margin-bottom: 0;

}
.menu-item input[type="text"]{
    color:#82ca9c;
}
.menu-item input[type="submit"]{
    display:inline-block;
    width:35%;
    background:#82ca9c;
    color:#fff;
	border:0px;
}
.menu-item input[type="submit"]:hover{
	background-color: rgba(0, 173, 62, 0.75);
}

/*For Footer Section*/
.footer{

    color:#000;
}
.footer-wrapper{
    padding:20px 0px;
    display:block;
}
.footer-brand{
    float:left;
}
.copyright{
    text-align:right;
}
.copyright p{
    font-size: 1.125rem;
    margin-bottom: 1px;
    padding: 20px 0px;
}
.copyright p i{
    color:#ff0000;
}.copyright p a{
    color:#32E10A;
}


.fa-2x {
font-size: 2em;
}
/* .fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
} */


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:#212121;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
  font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;

}