/*
* Element START
*/

.forms .element {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 4rem;
    margin-bottom: 1.5rem;
}

.forms .element.row {
	flex-direction: row;
}

/* Size START */

.forms .w50 {
    width: 50%;
}

.forms .w25 {
    width: 25%;
}

/* Size END */

/*
* Element END
*/



/*
* Form START
*/

form {
	display: block;
}

.forms {
    display: flex;
    flex-wrap: wrap;
    margin: 4rem 0;
}

/*
* Form END
*/



/*
* Label START
*/

.forms label {
    margin-right: 5rem;
}

/*
* Label END
*/



/*
* Fields START
*/

/* Input/Textarea START */

.forms input,
.forms textarea {
    padding: 1rem 1.5rem;
    font-size: 1.8rem;
}

textarea {
	max-width: 100%;
	min-width: 100%;
	min-height: 12rem;
	max-height: 20rem;
}

input,
textarea {
	border: 1px solid #000000;
	color: #000000;
	background-color: #ffffff;
	transition: background .2s, color .2s, border .2s;
	-webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus {
	outline: none;
	background-color: #000000;
	color: #ffffff;
	border: 1px solid #ffffff;
}

/* Input/Textarea END */

/* Select START */

select {
	width: auto;
}

select:after {
	content: "";
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	width: 2rem;
	height: 2rem;
	right: 2rem;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%) rotate(90deg);
}

/* Select END */

/* Button START */

.element.button input {
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
    transition: .2s border, .2s color, .2s background-color;
    cursor: pointer;
    width: 25rem;
    padding: 1.5rem 2rem;
    height: auto;
}

.element.button input:hover {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}

/* Button END */

/*
* Fields END *
*/

@media (max-width: 600px) {
	.forms .element {
		padding-right: 0;
	}
	
	.forms .w25 {
		width: 50%;	
	}
	
	.forms .w25,
	.forms .w50 {
		width: 100%;
	}
}