/* Contacts */
#contacts {
	padding-top: 5rem;
	padding-bottom: 10rem;
}

#cont-bgr {
	height: calc(100% - 18rem);
	top: auto;
	bottom: 0;
}

#cont-bgr .bgr {opacity: .4;}

#cont-title {letter-spacing: .5em;}

#cont-box {
	box-shadow: 0 2rem 2rem -1rem rgba(0,0,0,.3);
	padding: 2rem 1rem;
	transform: translateZ(2px) scale(.9);
}

#cell-data {
	width: 20rem;
	border: 1px solid #DDD;
	border-width: 0 0 0 1px;
}

.cont-title {
	color: #888;
	font-size: 2rem;
}

.cont-title .txt-bold {color: #333;}

.contact-icon-box {
	width: 5rem;
	padding: 1.5rem 0;
}

.contact-icon {
	background-position: center;
	background-size: contain;
	width: 2rem;
	height: 2rem;
}

.cont-stitle {
	color: #333;
	font-size: .95rem;
	text-transform: uppercase;
	font-weight: bold;
}

.cont-txt {
	color: #555;
	font-size: .9rem;
}

.big .cont-stitle {font-size: 1.3rem;}
.big .cont-txt {font-size: 1.2rem;}
.big .contact-icon {width: 3rem; height: 3rem;}

.contact-line {
	background-color: #ddd;
	height: 1px;
	margin: 1rem 0;
}

#mail-sent {
	background-color: #137415;
	padding: 1rem 0;
	margin-bottom: 2rem;
	color: #FFF;
	font-size: 1.5rem;
	text-align: center;
}

/*Form*/
.cont-lbl {
	padding-top: 1rem;
	transform-origin: left;
	transform: translateY(2rem) scale(1.2);
	line-height: 1rem;
	pointer-events: none;
	z-index: 1;
	transition: transform .3s, color .3s;
}

.focus .cont-lbl {transform: translateY(.5rem) scale(1);}
.cont-lbl-box:not(.focus) .cont-lbl {color: #666 !important;}

.form_inp, .form_tarea {
	background-color: transparent;
	display: inline-block;
	border: none;
	border-bottom: 1px solid #999;
	padding: 0;
	margin: 0;
	color: #666;
	font-family: text;
	font-size: .9rem;
	box-sizing: border-box;
}

.form_inp {line-height: 3rem;}

.inp_shrt {width: calc(50% - 2px);}
.inp_long {width: 100%;}

.form_tarea {
	width: 100%;
	height: 11rem;
	padding-top: 1rem;
	resize: none;
}

/*Mobile*/
@media screen and (max-width: 1000px) {
	.cont-tbl, .cont-cell {display: block;}
	
	#cell-mail {padding-bottom: 2rem;}

	#cell-data {
		width: auto;
		padding-top: 2rem;
		border: none;
	}

	#cont-box {padding: 2rem 0;}

	#cont-btn {
		display: block;
		margin: 0 auto;
	}

	.contact-icon-box {
		width: 3rem;
	}

	.contact {
		display: inline-block;
		width: auto;
		margin: 0 3rem 2rem 0;
	}
}

@media screen and (max-width: 550px) {

	#contacts {
		padding-bottom: 0;
	}


	#contacts .wrap-wide {
		padding: 0 !important;
	}

	#cont-box {
		box-shadow: none;
		transform: none;
	}

	.contact-icon-box {
		width: 6rem;
	}

	.contact {
		display: block;
		margin: 0;
	}
}

@media screen and (max-width: 450px) {
	#cont-title {letter-spacing: .7rem;}
}