@CHARSET "UTF-8";

html {
	height: 100%;
}

body {
	font: 400 15px Lato, sans-serif;
	line-height: 1.8;
	color: #818181;
	height: 100%;
}

#user-tools {
    padding: 0;
    margin: 0;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: yellow;
}

.col-centered{
	float: none;
	margin: 0 auto;
}

@media (max-width: 1024px) {
   	.navbar-header {
       	float: none;
   	}
   	.navbar-toggle {
       	display: block;
       	margin-top: 3px;
       	margin-bottom: 3px;
   	}
   	.navbar-collapse {
       	border-top: 1px solid transparent;
       	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   	}
   	.navbar-collapse.collapse {
       	display: none!important;
   	}
   	.navbar-nav {
       	float: none!important;
       	margin: 7.5px -15px;
   	}
   	.navbar-nav>li {
       	float: none;
   	}
   	.navbar-nav>li>a {
       	padding-top: 10px;
       	padding-bottom: 10px;
   	}
   	.navbar-text {
       	float: none;
       	margin: 15px 0;
   	}
   	/* since 3.1.0 */
   	.navbar-collapse.collapse.in { 
       	display: block!important;
   	}
	.collapsing {
		overflow: hidden!important;
	}
}
.navbar {
	min-height: 40px;
	margin-bottom: 0;
	background-color: #0078AC !important;
	border-width: 0;
	z-index: 9999;
	font-size: 12px !important;
	line-height: 1.42857143 !important;
	letter-spacing: 1px;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
	opacity: 1;
	box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.2);
}
.navbar-nav>li>a {
    padding: 10px;
}
.navbar li a, .navbar .navbar-brand {
	color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav>li.open>a, .navbar-nav>li>ul>li.open>a {
	background-color: #006b99 !important;
}
.navbar-nav>li.active>a, .navbar-nav>li.active>ul.dropdown-menu>li.active>a,
.navbar-nav>li.active>ul.dropdown-menu>li.dropdown-submenu>ul.dropdown-menu>li.active>a {
	color: #0078AC !important;
	background-color: #fff !important;
}
.navbar-default .navbar-toggle {
	border-color: transparent;
	color: #fff !important;
}
.navbar-nav>li>.dropdown-menu, .navbar-nav>li>.dropdown-menu>.dropdown-submenu>.dropdown-menu,
.navbar-nav>li>ul>li>a {
	background-color: #0078AC !important;
}

.navbar-vertical {
	box-shadow: 4px 0 4px rgba(0, 0, 0, 0.2);
}

.nav-pills>li>a {
	border-radius: 0px;
	color: #E2332A;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
	color: #fff;
	background-color: #E2332A !important;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.slideanim {visibility:hidden;}
.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

.content {
	margin-top: 45px;
}

/* For adding Glyphicon in text input */
/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
  font-size: 20px;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

/* Floating the caret to rihgt in dropdown */
.caret-right {
	float:right;
	display: inline-block;
	margin-top: 6px;
}

/* form styling start*/
p.success-note {
	color: green;
	border: solid 1px green;
	width: 50%;
	margin: auto;
	margin-bottom: 20px;
	text-align: center;
}

/* form styling start*/
div.failure-note {
	border: solid 1px red;
	width: 50%;
	margin: auto;
	padding-left: 30px;
	margin-bottom: 20px;
}

div.failure-note p {
	color: red;
}

form .errorlist {
	color: #ba2121;
	background: white;
}

form .errorlist li {
	font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

.input-group, .checkbox-input-group { 
	position:relative; 
	margin-bottom:20px;
	width: 100%;
}
input {
	font-size:18px;
	padding:0 10px 0 5px;
	display:block;
	width:100%;
	border:none;
	border-bottom:1px solid #0078AC;
	color: #333;
}
input:focus { outline:none; }

input[type="submit"] {
	width: 30%;
	margin: 50px 35% 0 35%;
	border: solid 1px #0078AC;
	background-color: white;
	color: #0078AC;
	border-radius: 2px;
}

input[type="submit"]:hover {
	background-color: #0078AC;
	color: white;
	box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.3);
}

.btn-geocrat {
	border: solid 1px #0078AC;
	background-color: white;
	color: #0078AC;
	border-radius: 2px;
}

.btn-geocrat:hover {
	background-color: #0078AC;
	color: white;
	box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.3);
}

select {
	color: #333;
	background-color: white;
	width: 100%;
	margin-top: 5px;
}
select:focus {
	outline: none;
}

.bootstrap-select {
    display: inline-block;
    width: 100%;
}

textarea {
	margin-top: 5px;
	border: solid 1px #0078AC;
	width: 100%;
}
textarea:focus {
	outline: none;
}

/* LABEL */
.input-group label, .checkbox-input-group label:FIRST-CHILD {
	font-size:16px;
	color:#0078AC;
	font-weight:normal;
	pointer-events:none;
	margin-bottom: -5px;
}

/* BOTTOM BARS */
.bar { 
	position:relative;
	display:block;
	width:100%;
}
.bar:before, .bar:after {
	content:'';
	height:2px; 
	width:0;
	bottom:1px; 
	position:absolute;
	background:#0078AC; 
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
}
.bar:before {
	left:50%;
}
.bar:after {
	right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
	width:50%;
}

/* HIGHLIGHTER */
.highlight {
	top: 40%;
	position:absolute;
	height:55%;
	width:100px;
	pointer-events:none;
	opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
}

/* css for material design checkbox */
.checkbox-input-group input[type=checkbox] {
	display:none;
}
#check-material {
	position:relative;
}
.checkbox-input-group label {
	margin-bottom: 0;
	padding-left:30px;
	cursor:pointer;
	font-weight: normal;
	color: #333;
	line-height: normal;
}

.checkbox-input-group label span {
	display:block;
	position:absolute;
	left:0; 
	-webkit-transition-duration:0.3s;
	-moz-transition-duration:0.3s;
	transition-duration:0.3s;
}
.checkbox-input-group label .box {
	margin-top: 2px;
	border:2px solid #0078AC;
	height:15px;
	width:15px;
	z-index:888;
	-webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s;
}
.checkbox-input-group label .check {
	margin-top: -5px;
	left: 6px;
	width: 10px;
	height: 20px;
	border:2px solid #0f9d58;  
	border-top: none;
	border-left: none;
	opacity:0;
	z-index:888;
	-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
	-webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; transition-delay:0.3s;
}

input[type=checkbox]:checked ~ label .box { 
	opacity: 0;
	-webkit-transform: scale(0) rotate(-180deg);
	-moz-transform: scale(0) rotate(-180deg);
	transform: scale(0) rotate(-180deg);
}
input[type=checkbox]:checked ~ label .check {
	opacity: 1; 
	-webkit-transform: scale(1) rotate(45deg);
	-moz-transform: scale(1) rotate(45deg);
	transform: scale(1) rotate(45deg);
}

.state-indicator {
	display: inline;
	font-size: 1em;
}

.state-indicator.glyphicon-ok {
	color: green;
}

.state-indicator.glyphicon-asterisk {
	color: orange;
}

.state-indicator.glyphicon-remove {
	color: red;
}

.modal:before {
	content: '';
	display: inline-block;
	height: 15%;
}

.modal {
	color: black;
}

/* Loader animation */
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 110px;
  height: 110px;
  margin: -50px 0 0 -50px;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
/* Loader animation end */

/* Scrollbar style */
::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.2); 
}
/* Scrollbar style end */

/* bubble animation */
@-webkit-keyframes growCircle {
  0%, 100%   { -webkit-transform:scale(0); }
  70%        { background:#DDD; -webkit-transform:scale(1.25); }
}
@-moz-keyframes growCircle {
  0%, 100%   { -moz-transform:scale(0); }
  70%        { background:#DDD; -moz-transform:scale(1.25); }
}
@keyframes growCircle {
  0%, 100%   { transform:scale(0); }
  70%        { background:#DDD; transform:scale(1.25); }
}

/* ANIMATIONS */
@-webkit-keyframes inputHighlighter {
	from { background:#0078AC; }
	to   { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#0078AC; }
	to   { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#0078AC; }
	to   { width:0; background:transparent; }
}
/* form styling end*/

@keyframes slide {
	0% {
		opacity: 0;
		-webkit-transform: translateY(70%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0%);
	}
}
@-webkit-keyframes slide {
	0% {
	  	opacity: 0;
	  	-webkit-transform: translateY(70%);
	}
	100% {
	  	opacity: 1;
		-webkit-transform: translateY(0%);
	}
}
@media screen and (max-width: 768px) {
	.col-sm-4 {
		text-align: center;
		margin: 25px 0;
	}
	.btn-lg {
	    width: 100%;
	    margin-bottom: 35px;
	}
	.navbar-nav>li>a {
	    padding: 10px;
	}
}
@media screen and (max-width: 480px) {
	.logo {
		font-size: 150px;
	}
	.navbar-nav>li>a {
	    padding: 10px;
	}
}
