@import 'fonts';
@import 'colors';
@import 'mixins';
@import '../h5bs/css/mixins.less';

// Global Styles 
// TODO: Integrate into specific elements/classes

.right {
	float: right;
	color: @gray;
	display: inline-block;
	margin-top: -1rem;
}

.solo {
	display: block;
}

.text-padding {
	width: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

// Slideshows with no left margin on slide-inner
.full {
	margin: 0 !important;
}



// Basic Elements

html {
	font-size: 62.5%;
}

body {
	.proxima-nova(14, 18);
	color: #ccc;
	min-width: 320px;
	overflow: auto;
	padding: 0;
	margin: 0;
	-webkit-overflow-scrolling: touch;
	-moz-font-feature-settings:"liga=1, dlig=1"; 
    -moz-font-feature-settings:"liga", "dlig"; /* EDIT: new syntax for FF 15+ */ 
    -ms-font-feature-settings:"liga", "dlig"; 
    -o-font-feature-settings:"liga", "dlig"; 
    -webkit-font-feature-settings:"liga", "dlig"; 
    font-feature-settings:"liga", "dlig";
    background: @black;
	background-image: -webkit-gradient(radial, center top, 0, center top, 200, from(#2D2D2D), to(black));
	background-image: -webkit-radial-gradient(center top, circle, #2D2D2D 0, black 200);
	background-image: -moz-radial-gradient(center top, circle, #2D2D2D 0, black 200);
	background-image: -ms-radial-gradient(center top, circle, #2D2D2D 0, black 200);
	background-image: -o-radial-gradient(center top, circle, #2D2D2D 0, black 200);
	background-image: radial-gradient(center top, circle, #2D2D2D 0, black 200);
	background-repeat: no-repeat;
}


header {
	margin: 1.75em auto 1.4em;
	width: 100%;
}

footer {
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: center;

	p {
		.proxima-nova(10, 12, 500);
		color: @gray;
	}
}

h1 {

}

h2 {
	.proxima-nova(14, 20, 600, 0.25rem);
	text-transform: uppercase;
	color: @yellow;
	margin-bottom: 1rem;
}

h3 {
	.proxima-nova(14, 18, 600);
	color: @gray;
}

p {
	.proxima-nova(14, 20);	
}

a {
	text-decoration: none;
	color: @yellow;

	&.pdf {
		color: @gray;

		&:after {
			content:"";
			margin-left: 0.1rem;
		}
	}
}

hr {
	.vertical-three-colors(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, .15), .9 , #000);
	height: 1rem;
	border-top: rgba(255, 255, 255, 0.2) 1px solid;
	margin-top: 0;
	margin-bottom: .1rem;
	width: 100%;
}

aside {
	margin: 1rem 2.5% 0rem;
}

.wrapper {
	margin: 0 auto;
}

#content {
	margin: 1.5rem auto 0;
	width: 100%;

	& > section {
		width: 95%;
		margin: 0 2.5%;
	}
	section {
		width: 95%;
		margin: 0 2.5%;
	}
}

// Navigation

nav {
	&.main {
		li {
			margin: 1.5rem 0;
		}
	}


	&.secondary {
		text-align: center;

		li {
			display: inline-block;
			margin-bottom: 1.25rem;
			text-transform: uppercase;
			.proxima-nova(12, 12, 400, 0.25rem);

			&:first-child {
				margin-right: 0.75rem;
				padding-right: 0.75rem;
			}

			&.solo {
				display: block;
			}
		}
	}

	&.primary {
		display: none;
		text-align: center;

		li {
			margin-bottom: 1rem;

			// TODO: Is this necessary? Is the bump still happening?;
			&:first-child {
				// margin-top: 1rem;
			}

			& > a {
				.proxima-nova(14, 16, 600, 0.15rem);
				text-transform: uppercase;
				color: @gray !important;
			}
		}
	}
}

#nav {
	a {
		text-transform: uppercase;
		.proxima-nova(14, 16, 600, 0.25rem);
		color: @gray;
		&.active {
			color: @white !important;
		}
	}
}

a.toggle-nav {
	color: @white;
	text-align: center;
	width: 100%;
	display: block;
	margin-bottom: 10px;
}


// Article Base Attributes
article {
	hgroup {
		margin: 0;
	}

	h1 {
		.proxima-nova(18, 20, 400);
		color: @red;
	}

	h2 {
		.proxima-nova(14, 20, 400);
		text-transform: none;
	}

	img {
		padding: 0;
		margin: 2rem auto 1rem;
		width: 100%;
	}

	p {
		margin-bottom: 1.25rem;
		color: @gray;
	}

	date {
		font-style: italic;
	}
}


// Logo Animation

.home {
	@-webkit-keyframes allinone {
			0% {
				margin-top: 10em;
				opacity: 0;
			}

			15% {
				opacity: 0;
			}

			50% {
				opacity: 1;
				margin-top: 10em;
			}

			90% {
				margin-top: 1.75em;
			}
		}

		@-webkit-keyframes leading {
			0% {
				opacity: 0;
				display: block;
			}

			60% {
				opacity: 1;
			}

			79% {
				display: block;
			}

			80% {
				opacity: 0;
				display: none;
			}

			100% {
				opacity: 0;
				display: none;
			}
		}

		@-webkit-keyframes alltherest {
			0% {
				opacity: 0;
				display: none;
				visibility: hidden;
			}

			80% {
				opacity: 0;
				display: inherit;
				visibility: hidden;				
			}

			100% {
				opacity: 1;
				display: inherit;
				visibility: visible;
			}
		}

		@-webkit-keyframes ellipsis {
			0% {
				opacity: 0;
				display: none;
				visibility: hidden;
			}

			80% {
				opacity: 0;
				display: -webkit-box;
				display: box;
				display: -webkit-flex;
				display: flex;
				visibility: hidden;				
			}

			100% {
				opacity: 1;
				display: -webkit-box;
				display: box;
				display: -webkit-flex;
				display: flex;
				visibility: visible;
			}
		}

		

	div#logo {
		-webkit-animation-name: allinone;
		-webkit-animation-duration: 6s;
		-webkit-animation-timing-function: ease;
	}

	.leading {
		-webkit-animation-name: leading;
		-webkit-animation-duration: 6s;
		-webkit-animation-timing-function: ease;
		opacity: 0;
		// display: none;
		color: @gray;
		text-align: center;
		font-size: 0.75em; 
		font-weight: 500;
	}

	section,
	footer,
	hr,
	nav {
		-webkit-animation-name: alltherest;
		-webkit-animation-duration: 6s;
		-webkit-animation-timing-function: ease;

	}

	.slide-container, .slide-inner {
		li.project {
			h3 {
				-webkit-animation-name: ellipsis;
				-webkit-animation-duration: 6s;
				-webkit-animation-timing-function: ease;
				word-break: break-word;
				// -webkit-hyphens: auto;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				display: box;
				display: -webkit-flex;
				display: flex;
				// Fix because it's not displaying as 3 lines on load.
				height: 2.5em;
			}
		}
	}	
}


// Logo

#logo {
	margin: 0 auto;

	a {
		margin: 0 auto;

		& > h1 {
			.proxima-nova(16, 12, 300, 0.4rem);
			text-transform: uppercase;
			color: @white;
			text-decoration: none;
			text-align: center;
			height: 2rem;
			width: 100%;

			@media screen and (max-width: 320px) {
				.proxima-nova(12, 10, 400, 0.25rem);
				height: 1rem;
			}
		}
		img {
			width: 100%;
		}
	}

	.diamond {
		background: url('../img/logo-slim.png') no-repeat;
		background-size: auto;
		height: 15px;
		margin-bottom: 1.5rem;
		margin-top: 0;

		@media screen and (max-width: 320px) {
			max-width: 100%;
		}
	}
}

.slide-container {
	margin: 0; 
	padding: 0; 
	height: 220px;
	width: 100%; 
	overflow: auto; 
	-webkit-overflow-scrolling: touch;

	.slide-inner {
		margin: 0 0.95rem;

		li {
			margin-left: 0.5rem;
			float: left;
			display: inline-block;

			&:first-child {
				margin: 0;
			}

			img {
				margin: 0;
				width: 100%;
			}
		}
	}
}

body.home {
	header,
	#content,
	footer {
		opacity: 0.0;
	}
}

.article-thumbs {
	width: 100% !important;
	margin: 0 !important;

	h2 {
		.proxima-nova(14, 18, 600, 0.25rem);
		color: @gray;
	}

	.slide-container, .slide-inner {
		height: 190px;
		// margin: 0 !important;

		li {
			width: 100px !important;

			a { 
				color: @gray;
				text-decoration: none;
			}

			h1 {
				.proxima-nova(14, 18, 600);
				overflow : hidden;
			  	text-overflow: ellipsis;
				display: -webkit-box;
			  	-webkit-line-clamp: 3;
		  		-webkit-box-orient: vertical;
				margin-bottom: 0.5rem;

				small {
					.proxima-nova(12);
					font-style: italic;
					display: block;
				}
			}	

			h3 {
				color: @gray;
				text-transform: none;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}	

			p {
				color: #808080;
				overflow : hidden;
			  	text-overflow: ellipsis;
				display: -webkit-box;
			  	-webkit-line-clamp: 2;
		  		-webkit-box-orient: vertical;
		  		.proxima-nova(12, 16);

		  		a {
					color: @gray;
				}
			}

			date {
				margin-top: 0.5rem;
				.proxima-nova(12, 22);
				font-style: italic;
				display: block;
			}

			&.text {
				h1 {
					.proxima-nova(18, 22, 400);
				  	-webkit-line-clamp: 5;
				}

				p {
					-webkit-line-clamp: 4;
				}
			}
		}
	}
}

.article-list {
	h1 {
		.proxima-nova(14, 18, 600);
		overflow : hidden;
	  	text-overflow: ellipsis;
		display: -webkit-box;
	  	-webkit-line-clamp: 3;
  		-webkit-box-orient: vertical;
		margin-bottom: 0.5rem;

		small {
			.proxima-nova(12);
			font-style: italic;
			display: block;
		}
	}	

	img {
		margin-bottom: 0;
	}
}

.article-detail {
	width: 100%;

	.slide-container, .slide-inner {
		height: 250px;
	}

	h1 {
		color: @gray;
	}

	a {
		color: @gray;
		font-weight: 600;
	}
}


.project-thumbs {
	width: 100% !important;
	margin: 0 !important;

	h2 {
		.proxima-nova(14, 18, 600, 0.25rem);
	}

	h2, h3, p {
		color: @gray;
	}

	.slide-container, .slide-inner {
		// height: 160px; // Old height
		height: 126px;

		li.project {
			width: 100px !important;

			&:first-child {
				// margin-left: 0.95rem;
			}

			h3 {
				word-break: break-word;
				// -webkit-hyphens: auto;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
			}
		}
	}	
}


.project-list {
	h2 {
		.proxima-nova(14, 20);
		margin-bottom: 0;
	}

	article {
		margin-bottom: 1rem;
		width: 48%;

		&:first-child {
			margin-right: 4%;
		}

		h1 {
			word-break: break-word;
			// -webkit-hyphens: auto;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
		}

		img {
			margin-bottom: 0.25rem;
		}
	}
}

.project-detail {
	width: 100%;

	.slide-container, .slide-inner {
		height: 250px;
	}

	h1 {
		.proxima-nova(18, 22, 300);
		color: @red;
	}

	h2 {
		.proxima-nova(14, 16);
		color: @gray;
		margin-bottom: 0;
	}

	a {
		font-weight: 600;
	}

	.slide-inner > li {
		width: 320px !important;
		height: 240px !important;
		overflow: hidden;
		// background: red !important;

		iframe {
			width: 100%;
			height: 100%;
			background: black !important;
		}
	}


}




section.mission {
	display: block;
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.person-list {

	article {
		margin-left: 2%;
		margin-bottom: 0.5rem;
		width: 32%;

		&:first-child {
			margin-left: 0;
		}

		img {
			margin-bottom: 0;
			margin-top: 1rem;
		}

		h1 {
			color: @red;
		}

		h2 {
			.proxima-nova(14, 16, 600);
			margin-bottom: 0;
			word-break: break-word;
			// -webkit-hyphens: auto;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
		}
		
		h3 {
			.proxima-nova(14, 16);
			color: @gray;
		}
	}
}

.person {
	width: 100% !important;
	margin: 0 !important;

	section {
		margin-bottom: 2rem !important;

		img {
			float: left !important;
			max-width: 25% !important;
			margin: 0 !important;
		}

		hgroup {
			float: left;
			max-width: 71% !important;
			margin-left: 4%;

			h1 {
				.proxima-nova(24, 28);
				color: @red;
			}

			h2 {
				.proxima-nova(14, 18);
				color: @gray;
			}
		}

		p, li {
			color: @gray;
			margin-top: 0.75rem;
			margin-bottom: 0;

			&:first-child {
				margin-top: 0;
			}

			&.award, &.engagement > p {
				margin-top: 0 !important;
			}
		}

		&.person-hgroup, &.education, &.certifications, &.affiliations {
			p {
				margin-top: 0.25rem;

				&:first-child {
					margin-top: 0;
				}
			}
		}
	}

	h3 {
		.proxima-nova(14, 18, 600, 0.25rem);
		color: @yellow;
		display: block;
		text-transform: uppercase;
	}

	
}

.offices {
	width: 100% !important;
	margin: 0 !important;

	h1 {
		.proxima-nova(18, 22, 600);
		color: @red;
	}

	a {
		color: @gray;
	}

	li {
		.proxima-nova(14, 18, 400);
	}

	img {
		width: 100%;
		margin-bottom: 1rem;
	}

	hr {
		margin-bottom: 1.5rem;
	}

	.address {
		.proxima-nova(12, 18, 400);
		color: @gray;
		margin-bottom: 0.5rem;
	}

	.contact {
		// margin-bottom: 4rem;
		margin-bottom: 2.5rem;
		
		li {
			margin-top: 0.5rem;
	
			&:first-child {
				margin-top: 0;
			} 
		}
	}

	.initial {
		.proxima-nova(14, 18, 600);
		margin-right: 0.25rem;
	}
}

.firm, .innovation, .service {
	h1 {
		.proxima-nova(24, 28, 400);
		color: @yellow;
		margin-top: 1.75rem;
		margin-bottom: 0.5rem;
		display: block;
	}

	h2 {
		.proxima-nova(14, 20, 600, 0.25rem);
		text-transform: uppercase;
		color: @yellow;
		margin-top: 1rem;
		margin-bottom: 0.25rem;
	}

	h3 {
		.proxima-nova(16, 22, 600);
		color: @gray;	
		margin-top: 0.5rem;
		margin-bottom: 0.15rem;
		text-transform: capitalize;
	}

	dd, td {
		display: block;
	}

	ul, ol {
		li {
			margin-bottom: .25rem;

			&:first-child {
				margin-top: .25rem;
			}
		}

		&.services {
			li { 
				margin-top: 0.25rem;

				&:first-child {
					margin-top: 0;
				}

				a {
					.proxima-nova(16, 22, 600);
					color: @gray;
				}
			}
		}
	}

	section + img, div.slide-container {
		margin-top: 2rem;
	}

	.slide-container, .slide-inner {
		height: 268px;

		& > img {
			margin: 1rem auto 1rem;
		}
	}
}