/****** Global styles ******/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);

* {
	list-style: none;
	font-family: Open sans;
	line-height: 1.4;
	box-sizing: border-box;
	margin: 0;
}

/****** Text styling ******/
	h1 {
		font-size: 3.5em; /* 56px */
		
	}

	h2 {
		font-size: 1.5em; /* 24px */
		letter-spacing: .04em;
		line-height: ;
		
	}

	h3 {
		font-size: 1.25em; /* 20px */
		font-weight: 500;
	}

	h4 {
		font-size: 1.1em; /* 18px */
		/*font-weight: 400;*/
		
	}

	h5 {
		font-size: 1em; /* 16px */
		font-weight: 400;
		
	}

	h6 {
		font-size: .875em; /* 14px */
		font-weight: 400;
		
	}


	a {
		/*text-decoration: none;*/
		color: #333334;
	}  

	.inactive {
		color: #cccccc;
	}


/**** Spacing scale variables ****/

:root {
	--2-spc: 2px;
	--4-spc: 4px;
	--6-spc: 6px;
	--8-spc: 8px;
	--12-spc: 12px;
	--16-spc: 16px;
	--24-spc: 24px;
	--32-spc: 32px;
	--40-spc: 40px;
	--64-spc: 64px;
}


body {
	overflow-x: hidden;
	background-color: #FAFAFA;
}


p {
	padding: 0;
	margin: 0;
	line-height: 1.5;
	color: #333334;
}

ul {
	padding: 0;
	margin: 0;
}

li {
	margin: 8px;
}

.project-btn {
	border: none;
	background-color: #01478E;
	padding: 16px 24px;
	border-radius: 40px;
	font-size: 1.125em;
	cursor: pointer;
	margin-top: 10px;
	text-align: center;
	color: #ffffff;
	text-decoration: none !important;
	max-width: 264px;
}

.project-btn:hover {
	background-color: #1670CC;
	transition: .3s ease-in-out;
}

.disabled {
	background-color: #ccc;
	color: #333334;
	cursor: default;
}

.disabled:hover {
	background-color: #ccc;;
}


h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	color: #333334;
}

span {
	color: #333334;
}


/******* Header ********/

header {
	background-color: #ffffff;
	opacity: 1;
	padding: 1em 10em;
	margin: 0 0 56px 0;
	/*position: fixed;*/
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

header a {
	box-shadow: inset 0 0 0 0 #FFCA00;
	margin: 0 -.25rem;
	padding: 0 .25rem;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

header a:hover {
	box-shadow: inset 222px 0 0 0 #FFCA00;
}

.menu {
	display: flex;
}


.item {
	padding: 2px 8px;
}


.menu-items-left {
	flex-direction: column;
}

.menu-items-right {
	display: flex;
	margin-left: auto;
	align-items: center;
}

.smallTitle {
	font-size: 1.4em;
	font-weight: 600;
}


.menu h6 {
	display: flex;
	/*padding: .5em;*/
}

.navbar-toggle {
	display: none;
	width: 30px;
	height: 30px;
}


/****** Header content end ******/


/********** Main Content Area ********/
 
 .main {
 	display: block;
 	margin: 4em auto 4em auto;
 	max-width: 80%;
 	padding: 0 20px 0 20px;
 	z-index: 1;
	position: relative;
 }

/******* Main Content Area End ******/



/**** Home Page ****/

.card {
	align-items: stretch;
	/*box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.18);
	border-radius: 8px;*/
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto var(--64-spc) auto;
	width: 100%;
}

.card--content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
	padding: 32px;
	flex: 1;
	color: #333334;
}

.card--content a {
	text-decoration: none;
}

.card--title {
	margin-bottom: var(--8-spc);
	font-weight: 600;
}

.card--subtitle {
	margin-bottom: var(--32-spc);
	font-weight: 400;
}

.tert-title {
	margin-bottom: var(--16-spc);
}

.img--container {
	padding: 0;
	max-width: 50%;
}

.img--container .img-mobile {
	display: none;
	}

.img--container img {
	/*background-size: cover;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;*/
	object-fit: cover;
	padding-left: 0px;
	width: 100%;
	height: 100%;
}

/**** Home Page End ****/



/**** Project page ****/

 .mainProject {
 	margin: 2em auto 1.5em auto;
 }

.corral {
	margin: 2em auto 2em auto;
}

.projectInfo {
 	margin: 2em 0;
 }

 .projectInfo li {
 	margin: 1em 0;
 }

.roleTitle {
	font-weight: bold;
	padding-right: 1em;
	display: inline-block;
	width: 124px;
}

.textPiece {
	margin: 0 0 2em 0;
}

.sectionTitle {
	margin: 0 0 1.01em 0;
}

.sectionTitle:after {
	content: "";
	display: block;
	width: 15%;
	padding-top: var(--8-spc);
	border-bottom: solid 2px #01478E;
}

.landscapeImg {
	display: block;
 	margin: 1.5em 0 1.5em 0;
 	width: 100vw;
 	z-index: 1;
	position: relative;
}

.landscapeImg img {
	max-width: 100vw;
	margin: 0;
	padding: 0;
}

.copy {
	padding-bottom: 1em;
}

.textPiece ul li {
	list-style: disc;
}

.textPiece ul  {
	padding-left: var(--16-spc);
	padding-bottom: var(--16-spc);
}

.doubleImgContainer {
	margin: var(--24-spc) auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.img--container-single {
	margin: 2em auto 2em auto;
}
.img--container-single img {
	width: 100%;
}


.doubleImg-left {
	margin-right: 12px;
	padding: var(--16-spc);
	text-align: center;
}

.doubleImg-left img {
	width: 100%;
}

.doubleImg-right {
	margin-left: 12px;
	padding: var(--16-spc);
	text-align: center;
}

.doubleImg-right img {
	width: 100%;
}

.doubleImgTitle {
	margin-top: var(--8-spc);
	font-weight: bold;
	text-align: center;
}

.project-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	/*justify-content: spc-evenly;*/
	margin: 1em auto;
}

.project-nav span {
	margin: 0 16px 0 16px;
	padding: .5em;
	width: 18%;
	text-align: center;
}

.project-nav .inactive {
	color: #cccccc;
}

.project-nav span a {
	box-shadow: inset 0 0 0 0 #FFCA00;
	margin: 0 -.25rem;
	padding: 0 .25rem;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.project-nav span a:hover {
	box-shadow: inset 222px 0 0 0 #FFCA00;
}


/**** Project page End ****/



/**** Project-specific styles ****/

/** Sitehands **/
.heroImg {
 	margin: 0 auto;
 	background: linear-gradient(-45deg, rgba(70, 100, 217, 0.7), 
 		rgba(31, 1, 62, 0.7)), 
 		url(/img/sitehands/cover-page-A.png) center center / cover no-repeat;
 	height: 100vh;
 	max-height: 300px;
 }

.heroImg h1 { 
 	color: #ffffff;
 	padding: 16px 24px;
 	z-index: 1;
 	position: absolute;
	top: 40%;
	left: 10%;
	text-shadow: 1px 1px 4px rgba(000, 000, 000, 0.4);
}

/**** Disctopia ****/
.heroImg_disctopia {
 	/*margin: 0 auto;*/
 	background: linear-gradient(-45deg, rgba(19, 143, 64, 0), rgba(19, 143, 64, 0.4)), url(/img/disctopia/disctopia-cover-page-A.png) center center / cover no-repeat;
 	/*height: 100vh;
 	max-height: 300px;*/
 }

.heroImg_disctopia h1 { 
 	color: #ffffff;
 	padding: 16px 24px;
 	z-index: 1;
 	position: absolute;
	top: 40%;
	left: 10%;
	text-shadow: 1px 1px 4px rgba(000, 000, 000, 0.4);
}

/**** Project-specific styles End ****/


/****** About page ******/

.abt-main {
	padding: 0 20% 0 20%;
	display: flex;
	flex-direction: column;
}

.abt-intro {
	display: flex;
	margin: 0 0 40px 0;
	flex-direction: row;
}

.abt-intro img {
	width: 100%;
	max-width: 124px;
	height: 100%;
	max-height: 124px;
	padding: 1px;
	border-radius: 16px;
}

.abt-intro-inner {
	padding-left: var(--24-spc);
}

.abt-moreInfo ul {
	padding-left: 16px;
}

.abt-moreInfo li {
	margin: 1em 0;
	list-style-type: disc;
}

.abt-moreInfo li:before {
	/*content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	background-color: #197DD4;
	margin-right: 8px;*/
	/*vertical-align: middle;*/
}

.abt-bookend {
	margin-top: 40px;
}

.abt-bookend a {
	box-shadow: inset 0 0 0 0 #FFCA00;
	margin: 0 -.25rem;
	padding: 0 .25rem;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.abt-bookend a:hover {
	box-shadow: inset 222px 0 0 0 #FFCA00;
	color: #333a4b;
}


/****** Footer ******/

footer {
	position: absolute;
	left: 0;
	right: 0;
	background-color: #333334;
	padding: 4em 11em;
	text-align: center;
	margin-top: 3em;
	z-index: 1;
}

footer h2 {
	color: #ffffff;
	margin-bottom: 1em;
}

footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

footer ul li {
	display: flex;
}

footer a {
	text-decoration: none;
	color: #ffffff;
	box-shadow: inset 0 0 0 0 #FFCA00;
	margin: 0 .25rem;
	padding-right: .50rem;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
	display: flex;
}

footer a:hover {
		box-shadow: inset 222px 0 0 0 #FFCA00;
		color: #333a4b;
	}

footer a span {
	margin-right: 8px;
	color: inherit;
	box-shadow: inset 0 0 0 0 #FFCA00;
	margin: 0 .20rem;
	padding: 0 .50rem;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

footer a span:hover {
	box-shadow: inset 222px 0 0 0 #FFCA00;
	color: #333a4b;
}


/****** Media Queries ******/

@media (max-width:  1000px){
	header {
		padding: 1em 4em;
	}

	.img--container {
		/*display: none;
		max-width: fit-content;
		padding: 0 0 0 2em;*/
		max-width: max-content;
		min-height: 124px;
		max-height: 264px;
	}

}

@media (max-width: 767px){

	header {
		padding: 1em 2em;
		justify-content: space-around;
		align-items: baseline;
		flex-direction: column;
		margin: 0 0 16px 0;
		position: fixed;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}

	.main {
	 	margin: 2em auto;
	 	max-width: 100%;
	 }

	.corral {
		margin: 2em auto 0 auto;
	}

	.menu-items, .menu {
		flex-direction: column;
	}

	.menu-items {
		display: none;
		transition: all 0.5s ease-out;
	}

	.menu-items-right {
		margin-left: 0;
		align-items: flex-end;
		padding-top: 8px;
		opacity: 0;
		visibility: hidden;
		height: 0%;
		overflow: hidden;
		/*transition: all 0.5s ease-out;
		transition:
    		opacity 1s,
		    display 1s allow-discrete;*/
	}

	
	.item {
		padding: 8px;
	}

	.navbar-toggle-show {
		display: flex;
		opacity: 1;
		visibility: visible;
	}


	.navbar-toggle {
		align-self: flex-end;
		display: initial;
		position: absolute;
		cursor: pointer;
	}


	footer {
		margin-top: 1em; 
		padding: 4em;
	}
}


@media (max-width: 577px){
	.heroImg h1 { 
		padding: .5em;
		font-size: 2.5em;
	 	top: 35%;
		left: 5%;
	}

	.mobileProject{
		margin:  2em auto;
	}

	.heroImg {
		max-height: 200px;
	}

	.card--content h1 {
		font-size: 2.1em;
	}

	.card--content h2 {
		font-size: 1.3em;
	}

	.card--content h3 {
		font-size: 1.15em;
	}

	.corral {
		margin: 2em auto 0 auto;
	}


	.landscapeImg {
		margin: 1.5em 0 1em 0;
	}


	.doubleImgContainer {
		flex-wrap: wrap;
		text-align: center;
		flex-direction: column;
	}

	.doubleImg-left {
		margin: 0 auto 24px auto;
		padding: 0;
	}

	.doubleImg-left img {
		width: 65%;
	}

	.doubleImg-right {
		margin: 0 auto;
		padding: 0;
	}

	.doubleImg-right img {
		width: 65%;
	}

	.img--container {
		/*display: none;*/
		max-width: fit-content;
		min-height: 116px;
		max-height: 216px;
	}

}

@media (max-width: 414px) {
	.heroImg h1 { 
 		padding: .5em;
		font-size: 2em;
		top: 30%;
		left: 5%;
	 }

	.heroImg {
	 	height: 100vh;
	 	max-height: 180px;
	 }

	 .sectionTitle {
	 	font-size: 1.2em;
	 }

	 .card--content {
	 	padding: 16px 24px;
	 }

 	.card--content h1 {
		font-size: 2em;
	}

	.card--content h2 {
		font-size: 1.2em;
	}

	.card--content h3 {
		font-size: 1.1em;
	}

	.doubleImgTitle h4 {
		font-size: 1em;
	}

	footer h2 {
		font-size: 1.2em;
	}
}


@media (max-width: 360px) {
	header {
	padding: 1em 2em;
	}

	.heroImg h1 { 
		padding: .5em;
		font-size: 1.5em;
		top: 30%;
		left: 5%;
	 }

 	.heroImg {
	 	height: 100vh;
	 	max-height: 150px;
	 }

	 .main {
		 	margin: 6em auto 4em auto;
		 }

	 .card--content {
	 	padding: 8px 24px 16px 24px; 
	 }


	footer {
		padding: 3em 2em;
	}

	footer ul {
		flex-wrap: wrap;
	}
}