* { box-sizing:border-box; }

.row {
  width: 100%;
  float: left;
  min-height: 30px;
}

.row .middle-column:first-child {
    margin-right: 10%;
    float: left;
}
.row .middle-column {
    width: 45%;
    float: right;
}

.row .center {
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .row .middle-column {
    width: 90%;
    float: left;
  }
}

/* basic stylings ------------------------------------------ */
.container 		{ 
  font-family:"Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  font-weight:200;  
  width:100%; 
  max-width: 1024px;
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
}
/* form starting stylings ------------------------------- */
.container .group 			  { 
  position:relative; 
  margin-bottom:15px; 
}
.container input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  border:none;
  border-bottom:1px solid #757575;
}
.container input:focus 		{ outline:none; }

/* LABEL ======================================= */
.container label 				 {
  color:#ccc; 
  font-size:18px;
  font-weight:200!important;
  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;
}

.container input[type="text"] {
  background-color: #4a4a49;
  color: #fff;
}
.container input[type="text"]:focus {
  color: #DDD;
}

/* active state */
.container input:focus ~ label, 
.container input:valid ~ label 		{
  top:-2px;
  font-size:14px;
  color:#ddd;
}

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

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

/* HIGHLIGHTER ================================== */
.container .highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.container 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:#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; }
}



/* basic stuff */
.container .check-box input[type=checkbox] { display:none; } /* hide the checkbox */
.container .check-box label, p             { padding-left: 50px; }
.container .check-box #check-awesome       { 
    position: relative;
    float: left;
    width: 50px;
    height: 30px;
}

.check-link {
  float: left;
}

/* checkbox css -------------------------- */

/* show a cursor when we hover */
.container .check-box label { cursor:pointer; }

/* style all of our span tags with position absolute and over to the left */
.container .check-box label span { display: block; position: absolute; left: 0; transition-duration:0.3s;
}

/* style our circle and position it */
.container .check-box label .circle {
  background:#fff;
  left:-15px;
  top:-15px;
  height:50px;
  width:50px;
  z-index:-1;
  border-radius:50%;
}

/* style our box */
.container .check-box label .box {
  border:2px solid #000;
  height:20px;
  width:20px;
  z-index:888;
  transition-delay:0.2s;
}
.container .check-box label .box.error {
  border-color: red;
}

/* style the check. give it a border on the bottom right only and then rotate */
.container .check-box label .check {
  top:-7px;
  left:6px;
  width:12px;
  height:24px;
  border:2px solid #0f9d58;
  border-top: none;
  border-left: none;
  -webkit-transform:rotate(180deg);
  transition-delay:0.3s;
  z-index:888;
  opacity:0;
}

/* rotate and then hide our box */
.container .check-box input[type=checkbox]:checked ~ label .box {
  opacity:0;
  -webkit-transform:rotate(180deg);
}

/*rotate and show our check */
.container .check-box input[type=checkbox]:checked ~ label .check {
  opacity: 1;
  -webkit-transform:scale(1) rotate(45deg);
}

.container .check-box input:focus ~ label, .container .check-box input:valid ~ label {
  top:0;
  color: #000;
  font-weight: bold!important;
}
/*circle keyframes */
.container .check-box label .circle {
  -webkit-animation:growCircle 0.3s ease;
}

@-webkit-keyframes growCircle {
  0%, 100% { -webkit-transform: scale(0); }
  70%      { background:#ddd; -webkit-transform:scale(1.25); }
}

.container input[type="submit"] {
  background-color: #009a95!important;
}

.warning {
  font-size: 11px;
  color: white;
  padding: 0 8px;
  margin-top: -4px;
  border-radius: 0 0 5px 5px;
  background-color: red;

}

/* ANIMATIONS ================ */
@-webkit-keyframes errorEvidence {
  from { height: 0px }
  to 	{ height: auto }
}
@-moz-keyframes errorEvidence {
  from { height: 0px }
  to 	{ height: auto }
}
@keyframes errorEvidence {
  from { height: 0px }
  to 	{ height: auto }
}