html{
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%
}

body{
	margin:0;
	overflow-y:scroll;
	font-family:Roboto,sans-serif;
	font-weight:400;
	font-size:1rem;
	letter-spacing:normal;
	line-height:1.75;
	color:rgba(0,0,0,.87);
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased
}
main{
	max-width:600px;
	margin:6em auto;
	padding-left:1em;
	padding-right:1em
}

.subtitle,h1,h2{
    margin:2em 0 .3em -.07em;
    font-weight:400;
    letter-spacing:.02em;
    line-height:1
}

h1{
    font-size:3.5rem
}
.subtitle{
    font-size:1.5rem;
    line-height:1.2
}
.subtitle,ol,p,ul{
    margin-top:0;
    margin-bottom:1.5rem
}
strong{
    font-weight:500
}
.bottom-nav{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
    border-top:1px solid #e0e0e0;
    background-color:#fff;
    z-index:1;
    -webkit-tap-highlight-color:transparent
}
.bottom-nav__action{
    padding:8px 12px;
    min-width:56px;
    max-width:144px;
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    color:#757575;
    text-decoration:none
}
.bottom-nav__action:not(:last-child){
    margin-right:12px
}
.bottom-nav__action--active{
    padding-top:6px;
    color:#F57C00
}
.bottom-nav__icon{
    display:block;
    width:1em;
    height:1em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:4px;
    font-size:24px
}
.bottom-nav__icon path,.bottom-nav__icon polygon,.bottom-nav__icon rect{
    fill:currentColor
}
.bottom-nav__icon circle{
    stroke:currentColor;
    stroke-width:1
}
.bottom-nav__label{
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Droid Sans,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    display:block;
    font-size:12px
}
.bottom-nav__action--active .bottom-nav__label{
    font-size:14px
}
.no-labels-nav{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
    border-top:1px solid #e0e0e0;
    background-color:#009688;
    z-index:1;
    -webkit-tap-highlight-color:transparent
}
.no-labels-nav__action{
    padding:16px 12px;
    min-width:32px;
    max-width:72px;
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    color:#e0e0e0;
    text-decoration:none
}
.no-labels-nav__action:not(:last-child){
    margin-right:12px
}
.no-labels-nav__action--active{
    padding-top:6px;
    color:#fff;
    padding-bottom:8px;
    min-width:56px;
    max-width:144px
}
.no-labels-nav__icon{
    display:block;
    width:1em;
    height:1em;
    margin-left:auto;
    margin-right:auto;
    font-size:24px
}
.no-labels-nav__icon path,.no-labels-nav__icon polygon,.no-labels-nav__icon rect{
    fill:currentColor
}
.no-labels-nav__icon circle{
    stroke:currentColor;
    stroke-width:1
}
.no-labels-nav__action--active .no-labels-nav__icon{
    margin-bottom:4px
}
.no-labels-nav__label{
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Droid Sans,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    display:none
}
.no-labels-nav__action--active .no-labels-nav__label{
    font-size:14px;
    display:block
}
 
a{
	text-decoration: none;
	color: #0277BD;
	font-weight: 500;
}

h4{
	margin-bottom: 0;
	font-weight: 500;
}

h3{
	margin-bottom: 0;
	font-weight: 700;
}

.text_light{
	font-weight: 300;
}

.circular {
	width: 100px;
	height: 100px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	float: left;
	display: table-cell;
	}

	.btn {
		position: relative;
	  
		display: block;
		margin: 30px auto;
		padding: 0;
	  
		overflow: hidden;
	  
		border-width: 0;
		outline: none;
		border-radius: 2px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
		
		background-color: #00B8D4;
		color: #ecf0f1;
		
		transition: background-color .3s;
	  }
	  
	  .btn:hover, .btn:focus {
		background-color: #0277BD;
	  }
	  
	  .btn > * {
		position: relative;
	  }
	  
	  .btn span {
		display: block;
		padding: 12px 24px;
	  }
	  
	  .btn:before {
		content: "";
		
		position: absolute;
		top: 50%;
		left: 50%;
		
		display: block;
		width: 0;
		padding-top: 0;
		  
		border-radius: 100%;
		
		background-color: rgba(236, 240, 241, .3);
		
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	  }
	  
	  .btn:active:before {
		width: 120%;
		padding-top: 120%;
		
		transition: width .2s ease-out, padding-top .2s ease-out;
	  }

/* form starting stylings ------------------------------- */
.group 			  { 
	position:relative; 
	margin-bottom:45px; 
  }
  input 				{
	font-size:18px;
	padding:10px 10px 10px 5px;
	display:block;
	width:300px;
	border:none;
	border-bottom:1px solid #757575;
  }
  input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  label 				 {
	color:#999; 
	font-size:18px;
	font-weight:normal;
	position:absolute;
	pointer-events:none;
	left:5px;
	top:10px;
	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:-20px;
	font-size:14px;
	color:#FF9800;
  }
  
  /* BOTTOM BARS ================================= */
  .bar 	{ position:relative; display:block; width:300px; }
  .bar:before, .bar:after 	{
	content:'';
	height:2px; 
	width:0;
	bottom:1px; 
	position:absolute;
	background: #FF9800; 
	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 {
	position:absolute;
	height:60%; 
	width:100px; 
	top:25%; 
	left:0;
	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;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
	  from { background:#FF9800; }
	to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
	  from { background:#FF9800; }
	to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
	  from { background:#FF9800; }
	to 	{ width:0; background:transparent; }
  }