/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
button,form, fieldset, input, textarea {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	background: transparent;
	vertical-align: baseline;
	font-size: 100%;
}
body {line-height: 1;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-spacing: 0;border-collapse: collapse;}
address, caption, cite, code, dfn, em, strong, var { font-weight: normal; font-style: normal;}
caption, th { text-align: left; font-weight: normal; font-style: normal;}
html {
	background-image: linear-gradient(to right, #3a3a3a , #3fa14c);
}

body{
	min-height: 100%;
	height: 100%;
	font-weight: lighter;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	-webkit-font-smoothing: subpixel-antialiased;
}
a{color: #3fa14c;text-decoration: none;}
p{display: block;width: 300px;margin-left: -180px;margin-top: -5px;}
p a{color: #a4a4a4;font-size: 10px;text-decoration: none;}
p a:hover{color: #3fa14c;border-bottom: 1px solid gray}
#warp{
	position: relative;
	margin: 0px auto 0;
	width: 550px;
	text-align:center;
	color:white;
}
form{
	display: block;
	width: 400px;
	height: 500px;
}
h1{
	color: #3fa14c;
	font-weight: bolder;
	font-size: 60px;
}
.mint{
	height: 300px;
	float: left;
	width: 200px;
	border-right: 1px solid #333333;
	text-align: left;
	left:0;
	top:0;
	transition: all 200ms ease-in 100ms;
}
.cars{
	height: 250px;
	top: 70px;
	left: -62px;
	float: right;
	width: 135px;
	text-align: right;
	transition: all 200ms ease-in 100ms;
}
.mint, .cars{
	position: relative;
	display: block;
	overflow: hidden;
	transform: rotate(30deg);
}
.cars h1{
	margin-left: -10px;
	color:#3fa14c;
}
.roti, .rota{
	position: relative;
	display: block;
	transform: rotate(-30deg);
}
.mint:hover h1,
.cars:hover h1{color: #b6b6b6;}
.rota{margin-top: 80px;margin-left: 35px;}
.roti{margin-top: 80px;margin-right: 55px;}
	input,button{
	margin: 4px;
	padding: 8px 6px;
	width: 350px;
	background: white;
	color:black;
	font-size: 10px;
	transition: all 1s ease-out;
}
button{
	margin-left: -230px;
	background:#303030;
	color:white;
	text-align: right;
	cursor: pointer;
	transition: all 1s ease-out;
}
button:hover{
	background:#3fa14c;
	transition: all 0.3s ease-in;
}
input:hover{box-shadow: inset 0 0 5px rgba(190,29,204,0.6) }
input:focus{background: gray;color: white}
.up{
	top:100px;
	left:-60px;
}
.down{
	top:-100px;
	left:60px;
}

p.success,
p.error {
    color: white;
    font-family: lato;
    background: yellowgreen;
    display: inline-block;
    padding: 2px 50%;
    width: 100%;
}
p.error {
    background: orangered;
}