.btn {
	padding: 0.5em 2em;
	outline: none;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	border: 1px solid #C2185B;
	background: #E91E63;
	border-radius: 2px;
	box-shadow: 2px 2px 5px rgba(0,0,0,.6);
}

.btn:hover {
	background: #D81B60;
}

.form__row {
	margin: 0.5em 0;
}

.form__label {
	font-size: 0.875em;
}

.form__data input[type="text"],
.form__data input[type="password"],
.form__data textarea {
	width: 100%;
	padding: 0.25em;
	color: #555;
	border-radius: 2px;
	border: 1px solid #BDBDBD;
}

.form__data textarea {
	min-height: 5em;
}

.form__data input.input-text--sm {
	width: 3em;
}

.form__footer {
	margin: 1em 0 0.5em;
	text-align: center;
}

.form__error,
.form__success {
	color: #fff;
	padding: 0.25em;
	text-align: center;
}

.form__error {
	background: #EF5350;
	border: 1px solid #E53935;
}

.form__success {
	background: #66BB6A;
	border: 1px solid #43A047;
}

.form__data--error input[type="text"],
.form__data--error input[type="password"],
.form__data--error textarea {
	background: #EF5350;
	border: 1px solid #E53935;
	color: #fff;
}

/* ------------------------------------------------------------------------- */

body {
	font-family: 'Open Sans', sans-serif;
	background: #684b5f url('../img/hatter-1.jpg') repeat top center;
	color: #684b5f;
	font-size: 100%;
}

.section__title {
	color: #FAFAFA;
	text-align: center;
	font-family: 'Ledger', sans;
	text-transform: uppercase;
	margin-top: 1em;
	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}

@media screen and (max-width: 48em) {
	.section__title { 
		font-size: 1.5em;
	}
	
	.full-name {
		display: none;
	}
}

.box {
	background: #EEEEEE url('../img/box-texture.png') repeat 0 0;
	border-radius: 10px;
	border: 1px solid #BDBDBD;
	padding: 0.375em;
	box-shadow: 2px 2px 5px rgba(0,0,0,.6);
	color: #684b5f;
}

.box__outer {
	border: 1px dashed #BDBDBD;
	border-radius: 5px;
}

.box__inner {
	border: 1px dashed #fff;
	border-radius: 5px;
}

.box__content {
	padding: 1em 2em;
	font-size: 1.125em;
	line-height: 1.5em;
}

@media screen and (max-width: 48em) {
	.box__content {
		font-size: 1em;
	}
}

.section-products {
	margin-top: 3.5em;
}

.products {
	padding: 0.5em;
}

.products:after {
	content: "";
	clear: both;
	display: table;
}

.products__header {
	float: left;
	margin: 0.25em 0;
	padding-right: 0.5em;
	padding: 0 1em 0 0.5em;
	text-align: center;
	width: 15%;
}

@media screen and (max-width: 48em) {
	.products__header {
		float: none;
		padding: 0 0 0.5em;
		width: 100%;
	}
}

.products__image {
	max-width: 100%;
	border: 1px dashed #9E9E9E;
	padding: 0.125em;
	border-radius: 50%;
	background: #fff;
	margin-top: 0.25em;
}

@media screen and (max-width: 48em) {
	.products__image {
		width: 6em;
	}
}

.products__content {
	float: left;
	border-left: 1px dashed #9E9E9E;
	padding: 0 1em;
	width: 85%;
	min-height: 8em;
}

@media screen and (max-width: 48em) {
	.products__content {
		float: none;
		border-left: none;
		border-top: 1px dashed #9E9E9E;
		width: 100%;
		min-height: 0;
	}
}

.products__title {
	font-size: 1.5em;
	margin: 0.25em 0;
}

@media screen and (max-width: 48em) {
	.products__title {
		font-size: 1.25em;
	}
}

.products__list {
	font-size: 0.875em;
}

.list__title {
	display: block;
	font-weight: 700;
	margin-top: 0.5em;
}

.list__itmes {
	margin-left: 1em;
	display: block;
}

.section-contact {
	margin: 3.5em 0 2em;
}

.contact {
	padding: 0.5em;
}

.contact:after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width: 48em) {
	.contact h2 {
		font-size: 1.25em;
	}
}

.contact-data {
	float: left;
	width: 50%;
	padding: 0.5em 1em 0.5em 0.5em;
}

.contact--company {
	font-size: 1.25em;
	margin-bottom: 0.5em;
}

.contact--address {
	background: transparent url('../img/envelop.png') no-repeat left center;
	padding-left: 1.5em;
}

.contact--phone {
	background: transparent url('../img/phone.png') no-repeat left center;
	padding-left: 1.5em;
}

.contact--mobile {
	background: transparent url('../img/mobile.png') no-repeat left center;
	padding-left: 1.5em;
}

@media screen and (max-width: 48em) {
	.contact-data {
		float: none;
		width: 100%;
		padding: 0.5em 0.5em 1em;
	}
}

.contact-form {
	float: left;
	width: 50%;
	padding: 0.5em 0.5em 0.5em 1em;
	border-left: 1px dashed #fff;
}

@media screen and (max-width: 48em) {
	.contact-form {
		float: none;
		width: 100%;
		padding: 1em 0.5em 0.5em;
		border-left: none;
		border-top: 1px dashed #fff;
	}
}

.form__info {
	font-size: 0.875em;
}