table{
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;
  word-wrap:break-word; 
}
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one 🙂       */
  display: flex;
  align-items: center;
}
// SASS Variables.
$text: #fff;
$link: #e34234;
$link-hover: #ba160c;
$background: #00356B;

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 95%;
	background: $background
}
#particles-js1 {
  position: absolute;
  width: 100%;
  height: 95%;
	background: $background
}

.text {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%,-50%);
	color: $text;
	max-width: 90%;
	padding: 2em 3em;
	background: rgba(0, 0, 0, 0.4);
	text-shadow: 0px 0px 2px #131415;
	font-family: 'Open Sans', sans-serif;
}

h1 {
	font-size: 2.25em;
	font-weight: 700;
	letter-spacing: -1px;
}
html, body{
	height: 100%;
  background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.avatar{
	height: auto;
    text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.maincontent{
	background-color: #303F9F;
	border-radius: 5px;
	-webkit-box-shadow: 0px 18px 72px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 18px 72px 2px rgba(0,0,0,0.75);
box-shadow: 0px 18px 72px 2px rgba(0,0,0,0.75);
}
.sliderpage{
	min-height: 400px;
}
.avatar-image{
	width: 250px;
}

.login-contain{
	border-radius: 4px 0px 0px 4px;
	overflow: hidden;
	background-color: #FAFAFA;
	padding: 25px;
	padding-bottom: 35px;
}

.text-login{
	padding: 5px;
	padding-bottom: 20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 20px;
	color: #212121;
	font-weight: 600;
}
.text-sub {
	padding-top: 15px;
	padding-bottom: 10px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 12px;
	color: #212121;
	font-weight: 100;
}

.text-head{
	padding: 5px;
	padding-top: 40px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 33px;
	color: #e3e3e3;
	font-weight: bold;
}
.text-serv {
	line-height: 10%;
	padding: 5px;
	padding-bottom: 30px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 22px;
	color: #e3e3e3;
	font-weight: 500;
}
.head-text{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 35px;
	margin-left: auto;
	margin-right: auto;
	color: #E8EAF6;
	font-weight: 500;
}

.sub-text{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 11px;
	color: #f0ebf0;
	height: 100px;
	font-weight: 100;
}

input 				{
  font-size: 14px;
  padding:8px 8px 8px 1px;
  display:block;
  width: 100%;
  border:none;
  border-bottom:1px solid #757575;
	background: transparent;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size: 14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:18px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-5px;
  font-size:8px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width: 100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  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%;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

div h2 {
    background: #293581;
    background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    border: 0 solid rgba(0,0,0,0.2);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
}
div.banner {
  z-index: -1;
}
div.banner h2 {
    border-radius: 0 0 5px 5px;
    border-width: 0 1px 1px 1px;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    display: inline-block;
    margin: 0;
    padding: 15px 28px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 30px;
}
div.banner h2:before, div.banner h2:after {
    bottom: 4px;
    box-shadow: 0 6px 5px rgba(0,0,0,0.4);
    content: "";
    height: 10px;
    position: absolute;
    width: 47%;
    z-index: -1;
}
div.banner h2::before {
    left: 3%;
    transform: rotate(-3.5deg);
}
div.banner h2::after {
    right: 3%;
    transform: rotate(3.5deg);
}