/*
Title: Creating an HTML5 enhanced responsive-ready contact form, with custom javascript feature detection
Tutorial on: http://www.onextrapixel.com

Author: http://www.toddmotto.com
*/



.wrapper {

	margin:0 auto;

	position:relative;
}

#contact-form input[type="text"],

#contact-form input[type="email"],


#contact-form textarea,

#contact-form button[type="submit"] {

	font:200 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;

}

#contact-form {

	text-shadow:0 1px 0 #FFF;

	border-radius:4px;

	-webkit-border-radius:4px;

	-moz-border-radius:4px;

	padding:0px;


}

#contact-form label span {

	cursor:pointer;
	color:#991D57;

	display:block;

	margin:5px 0;

	font-weight:600;

}


#contact-form input[type="text"] {

	width:12em;

	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;

	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;

	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;

	border:1px solid #CCC;

	background:#FFF;

	margin:0 0 5px;
	padding:10px;

	border-radius:5px;

}


#contact-form input[type="email"],
#contact-form textarea {

	width:100%;

	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;

	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;

	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;

	border:1px solid #CCC;

	background:#FFF;

	margin:0 0 5px;
	padding:10px;

	border-radius:5px;

}

#contact-form input[type="text"]:hover,

#contact-form input[type="email"]:hover,

#contact-form input[type="tel"]:hover,

#contact-form input[type="url"]:hover,

#contact-form textarea:hover 
{
	
-webkit-transition:border-color 0.3s ease-in-out;

	-moz-transition:border-color 0.3s ease-in-out;	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;

}

#contact-form textarea {

	height:80px;
	max-width:100%;

}

#contact-form button[type="submit"] {

	cursor:pointer;

	width:170px;

	border:none;
	background:#6f316f;

	background-image:linear-gradient(bottom, #6f316f 0%, #6f316f 52%);

	background-image:-moz-linear-gradient(bottom, #6f316f 0%, #6f316f 52%);

	background-image:-webkit-linear-gradient(bottom, #6f316f0 0%, #6f316f 52%);

	color:#FFF;

	margin:0 0 5px;

	padding:10px;

	border-radius:5px;

}

#contact-form button[type="submit"]:hover {

	background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);

	background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);

	background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);

	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;

	transition:background-color 0.3s ease-in-out;

}

#contact-form button[type="submit"]:active {

	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);

}

#contact-form input:focus,
#contact-form textarea:focus {

	outline:0;

	border:1px solid #999;

}
::-webkit-input-placeholder {

    color:#888;
}

:-moz-placeholder {

    color:#888;
}

::-moz-placeholder {

    color:#888;
}

:-ms-input-placeholder {
    color:#888;
}