@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 **/
				background-color:white;
				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{
				font-family: calluna, serif;
				font-weight: 300;
			}

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


			p, blockquote{
				font-weight:regular;
			}

			/** 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;
}

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
}

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;
}


.introduction{
	text-align:center;
	padding-top:80px;
	padding-bottom:80px;
}

.book{
	font-family: bebas-neue-by-fontfabric, sans-serif;
	font-weight: 300;
	font-style: normal;
}


.introduction.row{
	margin-top:0;
}

.introduction p{
font-size:36px;
line-height:1.0909em;
}

.introduction h2{
	font-size:72px;
}

.introduction h2, .introduction p{
	position:relative;
	z-index:2;
	width:75%;
	margin-left:auto;
	margin-right:auto;
	font-family: bebas-neue-by-fontfabric, sans-serif;
	font-weight: 700;
}

.container{
	width:90%;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

.overlaycontainer {
  position: relative;
  width: 48%;
	margin-bottom:16px;
	margin-left:16px;
	padding-left: 0;
}

.image {
	position:relative;
	display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: white;
}

.overlaycontainer:hover .overlay {
  opacity: 1;
}

.overlaycontainer:active .overlay {
  opacity: 1;
}

.text {
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
	width:75%;
}

.text p{
	line-height: 32px;
	margin-top:0;
	margin-bottom:16px;
	font-size: 24px;
}

.text h2{
	font-size:56px;
	line-height: 67px;
	margin-top:0;
	margin-bottom:16px;
}

.card {
    box-shadow: 0 8px 4px 0 rgba(0,0,0,0.5);
    transition: 0.3s;
    border-radius: 4px; /* 2px rounded corners */
		background-color:white;
		padding:32px 24px 32px 8px;
}

.card img{
	float:left;
}

.timeSpent{
	padding-top:4px;
}

.description{
	padding: 16px 0;
}

.projectLink{
	margin-bottom:16px;
}

.projectLink a{
	color:#0336FF;
	font-size: 18px;
}

.projectLink a:hover{
	text-decoration: none;
	border-bottom: 1px solid #0336FF;
	color: #0336FF;
}

.projectLink p{
	color: #A29B9B;
}


footer.cardContainer{
	padding-left:0;
	padding-right:0;
}

.cardBottomBorder{
	border-bottom:5px #2196F3 solid;
}

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;
}


@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{
	width:90%;
}


.introduction{
	height:auto;
	padding-top:5%;
	padding-bottom:5%;
}

.introduction h2, .introduction p{
	width:90%;
}

.introduction h2{
	font-size:48px;
}

.row > .container > .overlaycontainer > :first-child{
	margin-top:-24px;
}

.overlaycontainer {
  position: relative;
  width: 100%;
	margin-left: 0;
}


.col{
	padding-left:0;
}

.designChallenge, .quotes{
	margin-top:24px;
}

.designChallenge:first-child, .quotes:first-child{
	margin-top:0;
}

.col {
	float:none;
}

.card{
	margin-top:24px;
}

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

}

@media (min-width: 20em) and (max-width:39.9em) {  /** 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{
	width:90%;
}


.introduction{
	height:auto;
	padding-top:5%;
	padding-bottom:5%;
}

.introduction h2, .introduction p{
	width:90%;
}

.row > .container > .overlaycontainer > :first-child{
	margin-top:-24px;
}

.introduction h2{
	font-size: 36px;
}

.introduction p{
	font-size: 24px;
}

.overlaycontainer {
  position: relative;
  width: 100%;
	margin-left: 0;
}

.text p{
	line-height: 26px;
	font-size: 18px;
}

.text h2{
	font-size:32px;
	line-height: 40px;
}

.col{
	padding-left:0;
}

.designChallenge, .quotes{
	margin-top:24px;
}

.designChallenge:first-child, .quotes:first-child{
	margin-top:0;
}

.col {
	float:none;
}

.card{
	margin-top:24px;
}

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

}