.loginsignup {
  display: block;
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #368DDA;
  cursor: pointer;
  top: -28px;
  right: -28px;
  z-index: 10;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.4s ease-in-out;
}

.loginsignup>i {
  color: #fff;
  line-height: 56px;
  font-size: 2em;
  transition: all 0.4s ease-in-out;
  margin-right: 15px;
  float:right;
}

.actives {
  top: 0;
  right: 0;
  border-radius: 5px;
  width: 100%;
  height: 420px;
  cursor:auto;
}

.actives>i {
  margin: 0 15px;
  transform: rotate(360deg);
  cursor:pointer;
}

.loginsignup>.fields {
  visibility:hidden;
  opacity:0;
  width: 0;
  height:0;
}

.actives>.fields {
  visibility:visible;
  opacity:1;
  width: 100%;
  height:100%;
  transition-delay: 0.2s;
}
.headers {
  display: block;
  position: relative;
  font-size: 2em;
  color: #ff9800;
}
.cards:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.loginsignup .headers {
  color: #fff;
}
.cards {
    /*height: 350px;*/
    width: 450px;
    background: #fff;
    font-family: Roboto;
    display: block;
    position: relative;
    margin: 50px auto;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.2s ease-in-out;
	}
	.card-contents
	{
		padding:35px;
	}
.btnsn
{
background-color:white !important;
color:#3598db!important
}
.btnsn:hover{
    background-color:#fff !important;
    color:#ff751c !important;
}