* 
{
  box-sizing: border-box;
  font-family:verdana;
  margin:0px;
  padding:1px;
}
h2{  font-size: 17px;text-align: center;}
p  {  font-size: 15px;}
.row
{
  margin-top: 25px;
}
.row::after 
{
  display: table;
}
[class*="col-"] 
{
  
  position: relative;
  overflow:auto;
}
.left   {  position: absolute;  left: 0px;  }
.right  {  position: absolute;  right: 0px; }
.center {  margin: auto;                    }
.header
{
  height: 150px;
  background: linear-gradient(#262626, #0093DD);
  color:white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 30% 30% / 0 0 40% 40%;
}
.aside 
{
  background-color: #ffffff;
  padding: 5px;
  color: black;
  text-align: center;
  font-size: 14px;
  overflow: auto;
}
/* For desktop: */
.col-1 {padding: 5px;width: 35%;}
.col-2 {padding: 5px;width: 25%;}
.col-3 {padding: 5px;width: 35%;}
.col-4 {padding: 0px;width: 20%;}
.big
{
  display:block;
}
.small
{
  display: none;
  visibility: hidden;
}
@media only screen and (max-width: 993PX) 
{
  /* For mobile phones: */
  [class*="col-"] 
  {
    padding: 5px;width: 100%;
  }
  .hide, .big
  {
    display: none;
    visibility: hidden;
  }
  .small
  {
    display: block;
    visibility: visible;
  }
}
.index1 
{
  margin-top: 100px;
  height:350px;
  padding: 50px 25px 10px 25px;
	border-radius:10px;
	background: #F1F1F1;
	border: 1px solid #ebebeb;
	box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group 
{ 
	position: relative; 
	margin-bottom: 45px; 
}
input
{
	font-size: 18px;
	padding: 10px 10px 10px 5px;
	-webkit-appearance: none;
	display: block;
	background: #F1F1F1;
	color: #636363;
	width: 95%;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
label 
{
	color: #999; 
	font-size: 17px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: all 0.2s ease;
}
input:focus ~ label, input.used ~ label 
{
	top: -20px;
	-webkit-transform: scale(.80);
	transform: scale(0.80); left: -4px;
	color: #0093DD;	
}
.bar 
{
	position: relative;
	display: block;
	width: 95%;
}
.bar:before, .bar:after 
{
  content: '';
  height: 2px; 
  width: 0;
  bottom: 1px; 
  position: absolute;
  background: #0093DD; 
  transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
.highlight 
{
	position: absolute;
	height: 60%; 
	width: 100%; 
	top: 25%; 
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}
input:focus ~ .highlight 
{
	-webkit-animation: inputHighlighter 0.3s ease;
	animation: inputHighlighter 0.3s ease;
}
@-webkit-keyframes inputHighlighter 
{
	from { background: #0093DD; }
	to 	{ width: 0; background: transparent; }
}
@keyframes inputHighlighter 
{
	from { background: #0093DD; }
	to 	{ width: 0; background: transparent; }
}
.button 
{
	border-radius:5px;
	position: relative;
	display: inline-block;
	padding: 12px 24px;
	margin: .3em 0 1em 0;
	width: 100%;
	vertical-align: middle;
	color: #fff;
  font-size: 16px;
  font-weight:bold;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	text-align: center;
	letter-spacing: 1px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid #3160B6;
	cursor: pointer;
	transition: all 0.15s ease;
}
.button:focus { outline: 0; }
.buttonBlue 
{
  background: linear-gradient(#0093DD, #262626);
  text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: linear-gradient(#262626, #0093DD); }
.footer 
{
  height:50px;
  background: linear-gradient(#0093DD, #262626);
  color: white;
  font-size: 12px;
  padding: 15px;
  bottom:0px;
  position:fixed;
  left:1px;
  right:1px;
  bottom:1px;
}
span.a
{
	display: inline-block;
	width: 100%;
  position:absolute;
}
.line
{
	margin-left:0px;
	width:95%;	
}
.link:link 
{
  color: white;
  text-decoration: none;
}
.link:visited 
{
  color: white;
}
.link:hover 
{
  font-size: 15px;
}
.link:active 
{
  color: #50B153;
}