@charset "UTF-8";

article#createAccount {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	background-color: #e0e0e0;
	border: 1px solid black;
	border-radius: 6px;
	padding: 1em;
}

#user-account .form-container,
#customer-contact .form-container
 {
	max-width: none;
}

#account-form {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: flex-start;
}

#account-form label, #account-form input, #account-form textarea {
	margin: 2px;
	margin-left: .5em;
	resize: none;
}

#account-form #login-div, #account-form #info-div, #account-form #address-div
	{
	display: flex;
	flex-flow: column nowrap;
}

#customer-contact .form-container {
	display: inline-block;
	text-align: left;
}

#user-account-form {
	max-width: 40em;
}

.contact-form .email a {
	float: right;
	font-size: 13px;
	color: #33a;
}

.contact-form .email:after {
	clear: both;
}

.contact-form .gender > * {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	margin-bottom: .2em;
}

.contact-form .gender > * > * {
	flex: 1;
	max-width: 6em;
	white-space: nowrap;
}

.contact-form #phone {
	max-width: 12em;
}

.contact-form #main-address {
	border: 1px solid gray;
	padding: .7em .7em .7em .2em;
	margin-top: 1.5em;
	position: relative;
	border-radius: 3px;
}

.contact-form #main-address h4 {
	position: absolute;
	top: -2.5em;
	padding: .3em;
	background: #ccc;
	color: gray;
}

.contact-form .street {
	align-items: flex-start;
}

.contact-form .street label {
	margin-top: .2em;
	margin-right: -.7em;
}

.contact-form .street textarea {
	resize: none;
	margin-left: .7em;
}

.contact-form #zip {
	max-width: 6em;
}

.contact-form #city {
	min-width: 12em;
}

.contact-form .submits {
	margin-top: .5em;
}

.contact-form .conds {
	float: left;
}

#customer-contact {
	text-align: center;
}

#user-account {
	text-align: center;
	padding: 1em 0;
}


@media only screen and (max-device-width : 768px) , screen and (max-width: 768px) {
	#customer-contact .form-container {
		max-width: none;
	}
	#user-account .form-container {
		max-width: none;
	}
}

@media only screen and (max-device-width : 560px) , screen and (max-width: 560px) {
	
	#customer-contact .form-container {
		font-size: 13px;
	}
	#user-account .form-container {
		font-size: 13px;
	}
	.contact-form #city {
		min-width: 8em;
	}
}