@import "variables.less";

#mobileMenu
{
	background-color: @color-dark;
	height: 200px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 500;
	width: 100%;
	padding: 20px;
	display: none;

	.navigation
	{
		text-align: center;	
		a
		{
			text-decoration: none;
			text-transform: uppercase;
			color:#fff;
			font-family: @font-heading-public;
			font-size: 22px;
			display: block;
			line-height: 32px;
		}
	}
}

section.hero
{
	position: relative;
	padding-bottom: 70px;
	padding-top: 30px;
	height: 300px;

    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/

	.mobile
	{
		div
		{
			overflow: auto;
		}
		.logo
		{
			float: left;
			max-width: 250px;
			width: 80%;
		}
		.burger
		{
			max-width: 100%;
			float: right;
		}
	}
	.desktop
	{
		display: none;
	}
}

#frontPage
{
	hr
	{
		border-top: 1px solid #fff;
		margin: 50px 0;
	}
	section.about
	{
		background-color: @color-light;
		text-align: center;

		p
		{
			font-family: @font-default;
			font-weight: 300;
			font-size: 24px;
			line-height: 32px;
			color:#000;
			margin-bottom: 50px;
		}
	}
	section.practiceAreas
	{
		background-color: @color-dark;
		text-align: center;

		h1
		{
			color:#fff;
		}

		div.list
		{
			text-align: left;
			ul
			{
				list-style:none;
				margin: 0px;
				padding: 0px;

				li
				{
					font-family: @font-heading-public;
					color:#fff;
					font-size: 22px;
					margin-bottom: 10px;
				}
			}
		}
	}
	section.staff
	{
		background-color: @color-medium;
		text-align: center;

		h1
		{
			color:#fff;
		}

		div.people
		{
			overflow: auto;
		}
			div.single
			{
				text-align: left;
				margin-bottom: 30px;

				img
				{
					margin-bottom: 20px;
					display: block;
					width: 100%;
				}

				span
				{
					font-family: @font-heading-public;
					display: block;
					color:#fff;
					display: block;
					height: 24px;
				}
	
				span.name
				{
					font-size: 16px;
					font-weight: 400;
				}
				span.title
				{
					font-weight: 300;
				}
			}

		.dividerButton
		{
			.inner
			{
				background-color: @color-medium;
			}
		}

	}
}

#practice
{
	.area
	{	
		border-bottom: 1px solid @color-dark;
		margin-bottom: 40px;
		padding-bottom: 20px;

		h2
		{
			color:@color-dark;
		}
	}
}

#staff
{
	.employee
	{
		margin-bottom: 70px;
		border-bottom: 1px solid @color-dark;
		padding-bottom: 70px;

		img
		{
			padding: 0px 0px;
			width: 100%;
			object-fit: cover;
			margin-bottom: 40px;
		}

		h2
		{
			color:@color-dark;
			margin-bottom: 0px;
			margin-top: 0px;
		}

		span
		{
			font-size: 16px;
			color:#666;
			display: block;

			&.title
			{
				font-size: 18px;
				margin-bottom: 10px;
			}

			&.phone
			{
				margin-bottom: 20px;
			}
		}

		a
		{
			font-family: @font-heading-public;
			font-size: 16px;
		}


		.extraInfo
		{
			padding-top: 10px;

			h3
			{
				color:@color-dark;
				font-size: 28px;
				margin-bottom: 10px;
			}

			ul
			{
				margin:0px;
				padding-left: 20px;
				list-style: square;

				li
				{
					font-size: 16px;
					margin: 0px;
					padding: 0px;
					line-height: 26px;
				}
			}
		}
	}
}

@media (min-width: 768px) {

	section.hero
	{
		padding-top: 50px;

		.mobile
		{
			display: none
		}
		.desktop
		{
			display: block;
			overflow: auto;

			div
			{
				overflow: auto;
			}
			.logo
			{
				height: 70px;
				float: left;
			}
			.languages
			{
				position: absolute;
				top: 0px;
				right: 0px; 
				a
				{
					text-decoration: none;
					text-transform: uppercase;
					color:#fff;
					font-family: @font-heading-public;
					font-size: 14px;
					display: block;
					float: left;
					margin-left: 20px;
				}
			}
			.navigation
			{
				position: absolute;
				top: 33px;
				right: 0px; 
				a
				{
					text-decoration: none;
					text-transform: uppercase;
					color:#fff;
					font-family: @font-heading-public;
					font-size: 20px;
					display: block;
					float: left;
					margin-left: 20px;
				}
			}
		}
	}

	#frontPage
	{
		section.about
		{
			padding: 100px 0;
			p
			{
				font-size: 32px;
				line-height: 42px;
			}
		}
	}
	#practice
	{
		.area
		{
			padding-bottom: 0px;
			height: 320px;
		}
	}
	#staff
	{
		.employee
		{
			img
			{
				margin-bottom: 0px;
				padding: 0px;
			}
		}
	}
}

@media (min-width: 992px) {

	section.hero
	{
		height: 400px;
	}

	#frontPage
	{
	}
	#practice
	{
		.area
		{
			padding-bottom: 0px;
			height: 270px;
		}
	}
}