////////////////////////////////////////
// $Team section
////////////////////////////////////////

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


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


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

#{$block}
	width: 100%
	min-height: 645px
	padding-top: 55px
	background-color: #16a086
	text-align: center

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


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


	// $Team section title
	&__title
		font-size: 28px
		font-weight: normal
		margin-bottom: 10px
		color: #fff
		text-transform: capitalize


	// $Team section description
	&__descr
		font-size: 14px
		font-weight: normal
		margin-bottom: 45px
		color: #fff


	// $Team section member
	&__member
		display: inline-block
		position: relative
		width: 220px
		margin: 0 30px 30px
		background-color: #fff

		@media screen and (max-width: 1000px)
			width: 190px
			margin: 0 20px 30px

		@media screen and (max-width: 800px)
			width: 180px
			margin: 0 10px 30px

		@media screen and (max-width: 640px)
			display: block
			width: 260px
			margin: 0 auto 30px

		& img
			width: 100%


	// $Team section member info
	&__member-info
		display: block
		width: 100%
		height: 190px
		padding: 15px 10px

		@media screen and (max-width: 640px)
			height: auto


	// $Team section member name
	&__member-name
		margin-bottom: 5px
		font-size: 18px


	// $Team section member role
	&__member-role
		display: block
		margin-bottom: 20px
		font-size: 13px
		font-style: italic
		text-transform: capitalize


	// $Team section member description
	&__member-descr
		text-align: left
		line-height: 1.3

		@media screen and (max-width: 640px)
			display: none


	// $Team section member social icons
	&__member-soc
		display: block
		position: absolute
		width: 180px
		height: 50px
		top: 95px
		left: 50%
		margin-left: -90px
		background-color: rgb(22,160,134)
		background-color: rgba(22,160,134,.8)
		white-space: nowrap
		overflow: hidden
		opacity: 0
		visibility: hidden
		transition: all .5s

		// $Team section member social icons CONTEXT: $Team section member STATE: hover
		#{$block}__member:hover &
			opacity: 1
			visibility: visible

		@media screen and (max-width: 640px)
			width: 260px
			top: 220px
			margin-left: -130px

		& li
			display: inline-block


	// $Team section member icon
	&__member-icon
		display: block
		width: 45px
		height: 50px
		margin-left: -3px
		color: #fff
		transition: all .3s
		font-size: 0

		&:hover
			color: #c1c1c1

		&:before
			display: block
			font-family: FontAwesome
			font-size: 30px
			line-height: 50px

		&.fb:before
			content: "\f09a"

		&.tw:before
			content: "\f099"

		&.gplus:before
			content: "\f0d5"

		&.db:before
			content: "\f17d"
