@import url(https://fonts.googleapis.com/css?family=Lato:400,700)!important;

.container {	
	width: 300px!important;
	height: 300px!important;
	margin: auto!important;
	text-align: left!important!important;
}

.login_bar {
	width: 300px!important;
	height: 50px!important;
	background: white!important;
	border-radius: 10px!important;
	top: 50%!important;
	position: relative!important;
  z-index: 1!important;
	overflow: hidden!important;
}

.login {
	background: transparent!important;
	border: none!important;
	border: solid 2px!important;
	border-radius: 10px!important;
	position: relative!important;
	height: 100%!important;
	width: 100%!important;
	text-align: left!important;
	line-height: 50px!important;
	vertical-align: middle!important;
	z-index: 10!important;
	-webkit-transition: transform 0.2s ease-in-out 0s!important;
	   -moz-transition: transform 0.2s ease-in-out 0s!important;
	     -o-transition: transform 0.2s ease-in-out 0s!important;
	        transition: transform 0.2s ease-in-out 0s!important;
}

.login_active {
	-webkit-transform: translateX(300px)!important;
	   -moz-transform: translateX(300px)!important;
	    -ms-transform: translateX(300px)!important;
	     -o-transform: translateX(300px)!important;
	        transform: translateX(300px)!important;
}

.subscribe_button:hover{
	background-color: #222A33!important;
	cursor:pointer!important;
}

.subscribe_button {
	background: #171D23!important;
	position: absolute!important;
	top: -50px!important;
	left: 200px!important;
	border-top-right-radius: 10px!important;
	border-bottom-right-radius: 10px!important;
	height: 150px!important;
	width: 100px!important;
	text-align: center!important;
	line-height: 150px!important;
	vertical-align: middle!important;	
	color: white!important;
	-webkit-transition: transform 0.2s ease 0s!important;
	   -moz-transition: transform 0.2s ease 0s!important;
	     -o-transition: transform 0.2s ease 0s!important;
	        transition: transform 0.2s ease 0s!important;
	z-index: 100!important;
}

.subscribe_button_active{
	-webkit-transform: translateY(50px)!important;
	   -moz-transform: translateY(50px)!important;
	    -ms-transform: translateY(50px)!important;
	     -o-transform: translateY(50px)!important;
	        transform: translateY(50px)!important;
}

.subscribing{
	background: #CDD4DC!important;
	height: 100%!important;
	width: 300px!important;
	z-index: 101!important;
	position: relative!important;
	bottom: 50px!important;
	left:-300px!important;
	display: inline-block!important;
	-webkit-transition: transform 0.2s ease 0s !important;
	   -moz-transition: transform 0.2s ease 0s !important;
	     -o-transition: transform 0.2s ease 0s !important;
	        transition: transform 0.2s ease 0s !important;
}

.subscribing_active {
	-webkit-transform: translateX(300px)!important;
	   -moz-transform: translateX(300px)!important;
	    -ms-transform: translateX(300px)!important;
	     -o-transform: translateX(300px)!important;
	        transform: translateX(300px)!important;
}

.thanks{
	background: transparent!important;
	height: 100%!important;
	width: 300px!important;
	text-align: left!important;
	line-height: 50px!important;
	vertical-align: middle!important;
	padding-left: 10px!important;
	position: relative!important;
	top:-50px!important;
	display: inline-block!important;
	-webkit-transition: transform 0.5s ease 0s !important;
	   -moz-transition: transform 0.5s ease 0s !important;
	     -o-transition: transform 0.5s ease 0s !important;
	        transition: transform 0.5s ease 0s !important;
	z-index: 102!important;
}

.thanks_active {
	-webkit-transform: translateY(-50px)!important;
	   -moz-transform: translateY(-50px)!important;
	    -ms-transform: translateY(-50px)!important;
	     -o-transform: translateY(-50px)!important;
	        transform: translateY(-50px)!important;
}