@media (max-width: 600px) {
	.ref, .titlename {
		font-size: 16px;
		padding: 8px;
		text-align: center;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		box-sizing: border-box;
		word-break: break-word;
	}
	.marginlr10 {
		margin: 0 2%;
	}
	.refblock {
		padding: 2%;
		height: auto;
	}
}

* {
	margin: 0; 
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;	
	font-weight: 300;
	color: #fcfcfc;
	line-height: 1.5;
}

body {
	margin: 0 auto;
	padding: 0;
	max-width: 1366px; /* previously 96% */
	
}

header {
  position: sticky;
  top: 0;
  background: #fff; /* or your preferred color */
  z-index: 1000;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

 footer {
 	position: sticky;
 	padding: 8px;
 	margin: 0; 	
	bottom: 0;
	background-color: #fafafa;
	color: black;
	text-align: center;
	
 }

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.bottomspace {
	padding-bottom: 12px;
}

.whiteback {
	background-color: #fff;
}

.lightgrayback {
	background-color: #fafafa;	
}

.lightamberback { 
	background-color: #FFE082;
}

.limeback {
	background-color: #EEFF41;
}

.deeporangeback {
	background-color: #a93b28; /*a82d07 */
}

.lightblueback {
	background-color: #0caedc;
}


.darkgrayback {
	background-color: #37474f;
}

.blackback	 {
	background-color: #000;
}

.graphpaperdark {
	background-color: #37474f;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23546e7a' fill-opacity='0.26'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");	
}

.graphpaperlight {
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cfd8dc' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.purpleblue {
	background-color: #434f95;

}

.magentaback {
	background-color: #c2087c;
}

.xboxback {
	background-color: #1d5f1d;
	
}

.purpleback {
	background-color: #564289;

}

.logoyellow {
	/* background-color: #ffffff; */
}

.logowsdm {
	background: url(../img/wsdmlogo2020.png) no-repeat center;
	background-size: 4%;
	
}



/* text */
h1 {
	font-size: 24px;
	font-weight: 400;
}

h2 {
	font-size: 16px;
	font-weight: 400;	
	margin: 0 0 16px;
}
 


p {
	margin: 16px 0;
	line-height: 1.6;
}

a { text-decoration: inherit; 
	 color: #63C6E9; 
}


a.yellowlink {
	
	font-weight: 400;
	color: #f6ad09;
}

a.otherprojects {
	font-size: 16px;
	font-weight: 400;
	color: #37474f;
}

a.otherprojects:hover {
	color: #8BC34A; 
	
}

figcaption {
	font-size: 14px;
	line-height: 1.4;
	padding-bottom: 12px;

}

.titlename {
	font-weight: 300;
	color: #1c1b38;

	
} 

.categorytitle {
	font-size: 18px;
	font-weight: 500;	
}

.textbelowh1 {
	text-align: left;
	padding: 16px 0;
}


.orange {color: #f4511e;}

.purple {color: #512DA8;}

.white { color: #ffffff; }

.dark { color: #37474f; }


.lighttext { color: #bdbdbd; }

.maintagline {font-size: 32px;}  

.caption { font-size: 12px; }

.attention {color: #E91E63;}

.footercontact { 
	color: #4e4191; 
	font-weight: 400;
	} 
.quote {
	font-size: 28px;
	font-family:PT Serif;
	text-align: center;
	padding: 20px;
}

.ref {
	font-size: 20px;
	font-family:PT Serif;
	text-align: center;
	padding: 20px;
	display: none;

}

.ref:first-of-type { display: block; }

.underlinetext {
	text-decoration: underline;
}



/* end text styles */


/* menu base styles */
nav {
	background: #fff;
	box-shadow: 0 0px 3px rgba(0,0,0,0.12);
	margin: 0 0 2px; /* set bottom to 2 for shadow effect */


}
nav ul {
	list-style-type: none;
	padding: 0; /* don't do padding here, do nav a*/
}

nav a {
	text-decoration: none;
	text-align: center;
	color: white; /* #37474f; */
	display: block;
	padding: 12px;

}

nav a:hover {
	color: #666; 
}

.main_nav a.active {
	color: black; 
	font-weight: bolder;
}




/* main content style */
section {
	margin: 0;
	padding: 0;
	/* padding-top: 70px; Adjust to match your header height */
}



.intro {	

	padding: 8%;
	background: url("../img/wsdm_bg.png"); 
	/* background: url("../img/wsdm_bg.png"); */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
	background-color: #1c1b38;
	background-attachment: scroll;

}

.refblock {	

	padding: 4%;
	background-color: #dbdae5;
	height: auto;
	
	/* add this on 6.14.20 so the page won't jump up due to 
	different length of the feedback */

}


.marginlr10 {
	margin: 0 10%;

}

.marginltopbottom {
	margin: 4% 0;
}

.addpad {
	padding: 32px;
}



.category {
	margin: 0 4%;
	padding-bottom: 6px;
	text-align: left;
	
}

.embedvideo {
	padding: 4%;
	background-color: #fafafa;


	
}


.projectgroup {
	margin: 0 4%;
	background-color: #fff;
	padding: 2.8% 4%;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

	
}

.projectsinglecard {
	
	margin: 32px;
	background-color: #fff;	
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	
}

.projectfullwidth { /* used in detail project page */
	padding: 6% 12%;

}

.projectmidwidth {
	padding: 6%;

}

.problem { /* color block */
	padding: 6% 12%; /* 8% 16% */
	/* text-align: center; */
	
}

/* hack projects masonry layout */

.hackprojects {
	width: 96%;
	margin: auto;

	-moz-column-width: 220px;
	-webkit-column-width: 220px;
	column-width: 220px;

	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;

	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
}


.hackcard figure img {
	width: 100%;
	height: 50%; /* auto */
	margin-top: 20px;
}


.hackcard[title] {
	text-decoration: none;
	font-weight: 500;
	padding: 1 rem;
	color: #424242; /* not seeing effect if changed to any color */	
	box-shadow: 0 1px 3px rgba(0,0,0, .12), 0 1px 2px rgba(0,0,0, .24);	
	display: inline-block; 
	margin-bottom: 20px;
	transition: all .3s cubic-bezier(0.25, .8, .25, 1);
}

.hackprojects:hover .hackcard[title]:not(:hover){
	opacity: .85;
}

.hackcard[title]:hover {
	box-shadow: 0 7px 14px rgba(0,0,0, .25), 0 8px 8px rgba(0, 0, 0, .20) ;
}

.hackcard {
	padding: 48px 48px;
	line-height: 1.2;

}


/* end of hack projects masonry layout */

article {
	padding: 8px 0;
	/* line-height: 2; */
}



figure { /* testing dual images in 1 card */
	margin-bottom: 16px;
}


img {max-width: 100%;} 
img.reduce44 {max-width: 44%} /*  trick for image to shrink */
img.reduce88 {max-width: 88%} 

img.opac {opacity: 0.5;}
img.shadow {box-shadow: 0 0px 3px rgba(0,0,0,0.12);}


.button{
	display: inline-block;
	margin: 16px 0;
	padding: 12px 20px;
	background-color: #fafafa;
	border: none;
	border-radius: 4px;
	color: #4e4191;
	
}

.button:hover {
	background-color: #d4d3f4;
	color: #4e4191;
	transition-duration: 150ms;
}


.buttonprimary {

	margin: 20px 0;
	background-color: #ffc107; /* amber 500 */
	border: none;
	color: white;
	display: block;
}


.buttonsecondary {
	
	margin: 20px auto; /* center-align*/
	background-color: #fff;
	border: 1px solid #ffc107;
	color: #ffc107;
}


.buttonxbox {
	background-color: #1d5f1d;
}

.buttontmo {
	background-color: #c2087c;
}

.projectside4:hover {
	background-color: #f5f5f5;
}

/* flex styles small screen */
/* Responsive adjustment for mobile */
@media (max-width: 600px) {
 
  section {
    padding-top: 0x;
  }
    .titlename {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* flex styles big screen */

@media screen and (min-width: 768px) { /* tried 64em */

		
	nav {
		display: flex;
		justify-content: space-between;

	}

	nav ul {
		display: flex;
		justify-content: flex-end;
		align-items: center; /* test sticky */

	}

	nav li {
		flex: 1 0 auto;
	}

	

	.projects {

		display: flex;
		justify-content: space-around; /* don't see difference here!! */
		align-items: center;

	}
	.projectsingle {
		
		padding: 20px auto;
		margin: 0 auto; 
		box-sizing: border-box;
		flex-basis: 44%;
	}

	.projectsidebyside {
		margin: 0;
		padding: 0;		
		box-sizing: border-box;
		flex-basis: 44%;

	}

	.projectside3{
		margin: 0;
		padding: 16px 0;		
		box-sizing: border-box;
		flex-basis: 32%;
		
	}

	.projectside4 {
		margin: 0;
		padding: 0;		
		box-sizing: border-box;
		flex-basis: 20%;

	}

	.rowcolumnmixleft {
		flex: 1;
		align-self: flex-start;
		
	}
		
	.rowcolumnmixright {
		flex: 1;
		display: flex;
		flex-direction: column;
		
	}	

	
}
	
} /* end media 768 */