@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
	font-weight: 300;
}

body{
	font-family: 'Source Sans Pro', sans-serif;
	color: black;
	font-weight: 350;
}

body::-webkit-input-placeholder { /* WebKit browsers */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 350;
}

body:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family: 'Source Sans Pro', sans-serif;
    opacity:  1;
    font-weight: 350;
}

body::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family: 'Source Sans Pro', sans-serif;
    opacity:  1;
    font-weight: 350;
}

body:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 350;
}


.wrapper{
	background: #28A7E1;
    background: -webkit-linear-gradient(top left, #28A7E1 0%, #53aee3 100%);
    background: -moz-linear-gradient(top left, #28A7E1 0%, #53aee3 100%);
    background: -o-linear-gradient(top left, #28A7E1 0%, #53aee3 100%);
    background: linear-gradient(to bottom right, #28A7E1 0%, #53aee3 100%);
	
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.wrapper.form-success.container h1{
    transform: translateY(85px);
}

.container{
	max-width: 800px;
	margin: 0 auto;
	padding: 80px 0;
	text-align: center;
}

.container 	h1{
	color: white;
    font-size: 48px;
    transition-duration: 1s;
    transition-timing-function: ease-in-put;
    font-weight: 240;
}

form{
	padding: 20px 0;
	position: relative;
	z-index: 2;
}

form input{
	display: block;
	appearance: none;
	outline: 0;
	border: 1px solid fade(white, 40%);
	background-color: fade(white, 20%);
	width: 380px;
		
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	display: block;
	text-align: center;
	font-size: 28px;
		
	transition-duration: 0.25s;
	font-weight: 300;
}

form input:focus{
    background-color: white;
    width: 400px;
    
    color: #28A7E1;
}

form input:hover{
    background-color: fade(white, 40%);
}
	
form button{
	appearance: none;
	outline: 0;
	background-color: white;
	border: 0;
	padding: 10px 15px;
	color: #28A7E1;
	border-radius: 3px;
	width: 380px;
	cursor: pointer;
	font-size: 28px;
	transition-duration: 0.25s;
}

form button:hover{
    background-color: rgb(245, 247, 249);
}