////////////////////////////////////////
// $Contact section
////////////////////////////////////////

//////////////////////////////////////// Block variables


//////////////////////////////////////// Block mixins and functions


//////////////////////////////////////// Block styles
$block: ".contact"

#{$block}
	width: 100%
	min-height: 500px
	padding: 50px 0
	background-color: #ecf0f1
	text-align: left

	@media screen and (max-width: 640px)
		padding: 50px 10px


	// $Contact section inner container
	&__inner
		max-width: 1024px
		margin: 0 auto
		+clearfix

	// $Contact section title
	&__title
		font-size: 28px
		font-weight: normal
		margin-bottom: 10px
		text-transform: capitalize
		text-align: center


	// $Contact section description
	&__descr
		font-size: 14px
		font-weight: normal
		margin-bottom: 55px
		text-align: center


	// $Contact section form
	&__form
		display: block
		float: left
		max-width: 465px
		margin: 0 15px 0 40px
		+clearfix

		@media screen and (max-width: 800px)
			max-width: 50%
			margin: 0 2% 0 8%

		@media screen and (max-width: 640px)
			float: none
			max-width: 90%
			margin: 0 auto 50px


	// $Contact section form input
	&__form-input
		display: inline-block
		width: 220px
		height: 45px
		margin-bottom: 20px
		padding-left: 12px
		border: 2px solid #bec3c7
		font-style: italic
		color: #999

		@media screen and (max-width: 800px)
			width: 100%

		&:first-of-type
			margin-right: 20px


	// $Contact section form text area
	&__form-tarea
		display: block
		box-sizing: border-box
		width: 465px
		height: 155px
		margin-bottom: 25px
		padding: 20px 0 0 12px
		border: 2px solid #bec3c7
		font-style: italic
		color: #999
		resize: none

		@media screen and (max-width: 800px)
			width: 100%


	// $Contact section form submit
	&__form-submit
		display: block
		float: right
		width: 115px
		height: 35px
		text-align: center
		background-color: #1bbc9b
		font-size: 15px
		color: #fff
		text-transform: uppercase
		transition: all .5s

		@media screen and (max-width: 480px)
			float: none
			margin: 0 auto

		&:hover
			background-color: darken(#1bbc9b, 10%)


	// $Contact section card
	&__card
		display: inline-block
		width: 230px
		height: 150px

		@media screen and (max-width: 800px)
			width: 40%

		@media screen and (max-width: 640px)
			display: block
			width: 230px
			margin: 20px auto


	// $Contact section card title
	&__card-title
		margin-bottom: 20px
		font-size: 14px
		line-height: .5
		text-transform: uppercase

		@media screen and (max-width: 640px)
			text-align: center


	// $Contact section card item
	&__card-item
		position: relative
		font-size: 14px
		line-height: 24px

		&:before
			display: block
			position: absolute
			top: 0
			left: 0
			font-family: FontAwesome

		&.place
			padding-left: 15px
			margin-bottom: 15px

			&:before
				content: "\f041"

		&.tel
			padding-left: 17px
			margin-bottom: 10px

			&:before
				content: "\f098"

		&.fax:before
			content: "\f02f"

		&.email
			display: inline-block
			padding-left: 20px
			font-size: 14px
			line-height: 24px
			color: #444

			&:before
				content: "\f003"

			&:hover
				text-decoration: underline
