@charset "UTF-8";
/* CSS Document */

	/*------------------------------------*
			  BASELINE
			*------------------------------------*/
			html {font-size:10px;} /** Sets baseline font to multiple of 10; e.g., 16px = 1.6rem **/

			body {
				font-size:1.6rem;
				line-height:2.4rem; /** Baseline for verticle rhythm; 150% of font-size **/
				margin:0 auto;
				}
ted by Font Squirrel (https://www.fontsquirrel.com) on October 30, 2018 */


			div {
				box-sizing:border-box; /**includes borders and padding; good for sizing and max-width**/
			}

			p, blockquote, a, figcaption{
				font-family: calluna, serif;
				font-weight:300;
			}

			h1, h2, h3, h4, h5, h6{
				font-family: bebas-neue, sans-serif;
				font-weight:400;
				color:#222222;
			}


			p, blockquote, figcaption{
				font-weight:regular;
				color:#222222;
			}

			/** As font-size decreases, do math to keep 24px line-height; magic number (24) / font-size = line-height in em **/
			h2 {font-size:4.2rem; line-height:1.0909em;}
			h1 {font-size:3.2rem; line-height:1.0909em;}
			h3 {font-size:3rem; line-height:1.0909em;}
			h4 {font-size:1.8rem; line-height:1.333em;}
			h5, h6 {font-size:1.6rem; line-height:1.5em;}

			p {margin-bottom: 24px;}

			img {width:100%;}

			a{
				text-decoration:none;
				color:#2196F3;
			}

			a:hover{
				text-decoration:underline;
				color:#424242;
			}

			/*------------------------------------*
			COLUMN AND ROW SETTINGS
			*------------------------------------*/

			.row,
			.col {
				display: block;
				/**margin-right: 0 !important;
				padding-right: 0 !important;**/
			}
			.row {
				padding-left: 0 !important;
			}
			.row:before,
			.row:after {
				content: " ";
				display: table;
			}
			.row:after {
				clear: both;
			}
			.col {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				float: left;
				margin-left: 0;
				width: 100%;
				min-height: 1px;
		  		vertical-align:top;
			}

			.col > div > p {
				max-width:50em; /** ensures content doesn't exceed line measure length of 75 characters **/
			}

			.col > img {
				max-width:100%;
			}

			[class*='col-']{
				float:left;
				min-height:1px;
				width: 16%;
				padding: 24px;
			}

			.row {
				margin-top: 24px;
			}
			.col {
				padding-left: 24px;  Gutter support; 150% of base font size
				padding-right:24px !important;
			}

			.center {width:100% !important; text-align:center !important;}
			.center > div {display:inline-block !important; float:initial;}	/**for a row, make it 100% width and align things in the center.**/


			/*------------------------------------*
			GRID SETTINGS  :  width = 100%; columns = 12
			*------------------------------------*/
			.span-12 {
			width: 100%;
			}
			.span-11 {
			width: 91.66667%;
			}
			.span-10 {
			width: 83.33334%;
			}
			.span-9 {
			width: 75%;
			}
			.span-8 {
			width: 66.66667%;
			}
			.span-7 {
			width: 58.33334%;
			}
			.span-6 {
			width: 50%;
			}
			.span-5 {
			width: 41.66667%;
			}
			.span-4 {
			width: 33.33334%;
			}
			.span-3 {
			width: 25%;
			}
			.span-2 {
			width: 16.66667%;
			}
			.span-1 {
			width: 8.33334%;
			}


header{
	overflow: hidden;
  position: relative;
	height:88px;
	background-color: black;
	color:white;
	padding-left:24px;
	padding-top:8px;
	padding-bottom:-8px;
	padding-right:8px;
}

header h1{
	font-size: 32px;
	line-height: 32px;
	font-weight: 400;
	margin-left:-16px;
	color: white;
}

header a, header a:hover{
	font-family: bebas-neue, sans-serif;
	color: white;
	text-decoration: none;
}

.headerContainer .span-12{
	padding-left:0;
}

.headerContainer{
	width:75%;
	position:relative;
	margin-left:auto;
	margin-right:auto
}

#header2{
	float:left;
	margin-top:-48px;
}

#header2.col{
	padding-left:0 !important;
}

nav{
	padding-top:8px;
}

nav ul{
	float:right;
}

nav li{
	display:inline-block;
	text-align:right;
	margin-left: 24px;
  margin-right: 24px;
	text-align: right;
	line-height: 32px;
	font-size: 24px;
}

nav a{
	color:#7F7F7F;
	text-decoration: none;
	margin-top:24px;
	font-family: bebas-neue, sans-serif;
	font-weight: 400;
}

nav a:hover{
	text-decoration: none;
	color:white;
}

#selectedNav{
	text-decoration: none;
	color:white;
	border-bottom:2px solid white;
}


.container{
	width:62.223%;
	max-width:1000px;
	position:relative;
	margin-left:auto;
	margin-right:auto
}

.container p, .container h2, .container h3, .container ol{
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	max-width:800px;
}

.containerAboutMe{
	width:62.223%;
	max-width:928px;
	position:relative;
	margin-left:auto;
	margin-right:auto
}

.containerAboutMe p, .containerAboutMe h2{
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	max-width:928px;
}

.projectTitle{
	margin-left:auto;
	margin-right:auto;
	padding:24px 0 24px 0;
	text-align: center;
}

.projectTitle h1{
	font-size:72px;
	line-height: 88px;
	margin: 0 auto 8px auto;
}

.projectTitle h3{
	font-size:32px;
	line-height: 38px;
	margin:0 auto;
	font-family: bebas-neue-by-fontfabric, sans-serif;
	font-weight: 300;
	font-style: normal;
	text-align: center;
}

.projectIntroImage{
	margin:0;
	padding-left:0;
	position:relative;
}

.projectIntroImage img{
	object-fit: cover;
	height:640px;
}


.projectImage .projectIntroImage .projectImage img{
	width:auto;
	height:auto;
}

.projectText, .productText{
	margin-left:auto;
	margin-right:auto;
	position:relative;
	padding-top:64px;
	padding-bottom:64px;
}

.projectText h2, .productText h2{
	font-size:48px;
	line-height: 58px;
	margin-top:0;
	margin-bottom:24px;
}

.projectText h3, .projectText h3{
	font-size:32px;
	line-height: 38px;
	margin-bottom:16px;
}

.projectText p, .productText p{
	font-size:24px;
	line-height: 36px;
	margin-bottom:24px;
}

.projectText h2, .projectText h3, .projectText p{
	text-align: left;
}

.productText h2, .productText h3, .productText p{
	text-align: center;
}

.projectText p:last-child, .productText p:last-child{
	margin-bottom:0;
}

.projectText figcaption, .productText figcaption{
	font-size:16px;
	text-align: center;
	line-height: 16px;
	padding:16px 0;
}

.projectTextColor{
	background-color: #F4F6F7;
}

.projectText figure, .productText figure{
	margin:64px 0 0 0;
}

.projectText figcaption > strong{
	color:red;
}

.numberList ol {
	position: relative;
	display: inline-block;
	font-size: 24px;
	font-family: calluna, serif;
	font-weight: 300;
	margin-left: 32px;
	line-height: 36px
}


.numberList li{
	text-align: left;
	padding-left:16px;
	padding-right:16px;
	margin-bottom:16px
}

.numberList li:last-child{
	margin-bottom: 0;
}

.projectImage .projectIntroImage .projectImage img{
	width:auto;
	height:auto;
}

.bottomNav{
	background-color:black;
	padding-top:24px;
	padding-bottom:24px;
	position:relative;
	box-shadow: 0 -2px 4px 0 rgba(0,0,0,.12);
    transition: 0.3s;
	margin-top:-24px;
}

.bottomNav h3{
	text-align:center;
	color: #7F7F7F;
	margin-bottom:8px;
	margin-top:0;
	font-size:20px;
}

.bottomNav a{
	font-family: bebas-neue, sans-serif;
	margin-top:0;
	margin-bottom:0;
	color:white;
	font-size: 28px;
}


.bottomNav ul{
	width:100%;
	float:left;
	padding-left:0;
}

.bottomNav li{
	display:inline;
	text-align:center;
	width:50%;
	float:left;
	margin-left:auto;
	margin-right:auto;
}

.bottomNav a, .bottomNav a:hover{
	color:white;
}

.bottomNav a:hover{
	text-decoration: none;
	border-bottom: 1px solid white;
}

footer{
	color:black;
	padding:64px 0 64px 0;
}

.table{
	display:table;
	margin:0 auto;
}

.table ul{
	padding-left:0;
	list-style-position:inside;
	margin-top:0;
}

.table li{
	float:left;
	list-style-type:disc;
	margin-left:8px;
	margin-right:8px;
}

.table li:first-child{
	margin-left:0;
	list-style-type:none;
}

.table li:last-child{
	margin-right:0;
}

.table a, .table a:hover{
	color:black;
}

.imgCircle{
	border-radius:50%;
	width:96px;
	height:auto;
}



@media (min-width: 40em) and (max-width:80em) {  /** Based on width between 320 and 928px **/

.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
width: auto;
}  /**  un-comment to control layout for small screen layout */

h2 {font-size:3.2rem; line-height:1.0909em;}
h1 {font-size:3rem; line-height:1.0909em;}
h3 {font-size:2.7rem; line-height:1.0909em;}
h4 {font-size:1.8rem; line-height:1.333em;}
h5, h6 {font-size:1.6rem; line-height:1.5em;}



header{
	overflow: hidden;
  position: relative;
	height:auto;
	background-color: black;
	color:white;
	padding-left:0;
	padding-top:8px;
	padding-bottom:-8px;
	padding-right:0;
	text-align: center;
}

header h1{
	margin-left:0;
}

.headerContainer .span-12{
	padding-left:0;
}


nav ul{
	padding-left:0;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

.container, .containerAboutMe{
	width:90%;
}

.col{
	padding-left:0;
}

.col {
	float:none;
}

.card{
	margin-top:24px;
}

.sectionTitle{
	margin-bottom:-24px;
}

}

@media (min-width: 20em) and (max-width:39em) {  /** Based on width between 320 and 928px **/

.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
width: auto;
}  /**  un-comment to control layout for small screen layout */

h2 {font-size:3.2rem; line-height:1.0909em;}
h1 {font-size:3rem; line-height:1.0909em;}
h3 {font-size:2.7rem; line-height:1.0909em;}
h4 {font-size:1.8rem; line-height:1.333em;}
h5, h6 {font-size:1.6rem; line-height:1.5em;}



header{
	overflow: hidden;
  position: relative;
	height:auto;
	background-color: black;
	color:white;
	padding-left:0;
	padding-top:8px;
	padding-bottom:-8px;
	padding-right:0;
	text-align: center;
}

header h1{
	margin-left:0;
}

.headerContainer .span-12{
	padding-left:0;
}


nav ul{
	padding-left:0;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

.container, .containerAboutMe{
	width:90%;
}

.col{
	padding-left:0;
}

.col {
	float:none;
}

.card{
	margin-top:24px;
}

.sectionTitle{
	margin-bottom:-24px;
}

.projectTitle h1{
	font-size:48px;
	line-height: 56px;
	margin: 0 auto 16px auto;
}

.projectIntroImage img{
	object-fit: cover;
	height:320px;
}

.projectText h2, .productText h2{
	font-size:32px;
	line-height: 48px;
	margin-top:0;
	margin-bottom:16px;
}

.projectText p, .productText p{
	font-size:18px;
	line-height: 27px;
	margin-bottom:24px;
}



.numberList ol {
	position: relative;
	display: inline-block;
	font-size: 18px;
	font-family: calluna, serif;
	font-weight: 300;
	margin-left: auto;
	line-height: 27px
}


.numberList li{
	text-align: left;
	padding-left:8px;
	margin-bottom:8px
}


.bottomNav h3{
	text-align:center;
	color: #7F7F7F;
	margin-bottom:8px;
	margin-top:0;
	font-size:20px;
}

.bottomNav a{
	font-family: bebas-neue, sans-serif;
	margin-top:0;
	margin-bottom:0;
	color:white;
	font-size: 28px;
}


.bottomNav ul{
	width:100%;
}

.bottomNav li{
	display:block;
	width:100%;
	float:none;
	margin-bottom: 36px;
}

.bottomNav li:last-child{
	margin-bottom:0;
}

}