html {
	margin:0;
	padding:0;
	line-height: 1.6;
	box-sizing: border-box;
	font-family: sans-serif;
	color:#404d5b;
}

body {
	max-width:1600px;
	margin:0 auto;
	padding:0;
	background-color:#ffffff;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	
	grid-template-areas: 
		"header header header"
		"nmgc nmgc nmgc"
		"mainArea mainArea mainArea"
		"footer footer footer";
}

button {
	cursor: pointer;
}

a {
	color:#374F90;
	text-decoration: underline;
}

a:focus {
	background-color:rgba(255,222,122,.8);
}

img {
	display:block;
	max-width:100%;
	align-self: flex-start;
}

#OrgInfo {
	background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)), url('/img/background_0.jpg');
	background-size:cover;
	grid-area: header;
	
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: 
		"umn umn"
		"nmgcLink NAV";
}

@media (max-width:600px) {
	#OrgInfo {
	
	display:grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	grid-template-areas: 
		"umn"
		"nmgcLink"
		"NAV";
	}
}

#UMN {
	grid-area:umn;
	background-color:rgba(255,255,255,.8);
	/*background-color:rgba(255,222,122,.8);*/
	/*#ffde7a;*/
	
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
	
	padding-bottom:1em;
}

#UMNLogo {
	flex:1 1 0;
	padding:1em;
	
	display:flex;
	flex-direction:column;
	justify-content: center;
}

#UMNLogo img {
	max-width:300px;
}

#OneStop {
	flex:1 1 0;
	padding-right:1em;
	
	display:flex;
	flex-direction: column;
	align-items: flex-end;
}

#OneStop p {
	padding: 0 1.4em 0 0;
	margin:.4em;
	background-image: url('../img/lockIcon-02.svg');
	background-size:contain;
	background-position: right;
	background-repeat: no-repeat;
}

#OneStop a {
	color:#7a0019;
	font-weight: normal;
}

input[type=submit] {
	background:url("../img/searchIcon-03.svg");
	border:none;
	background-repeat:no-repeat;
	background-size:contain;
	height:2em;
	width:2em;
	cursor: pointer;
}

#NMGC_Link {
	grid-area:nmgcLink;
	padding:1em;
	
	display:flex;
	flex-direction: column;
	justify-content: center;
}

nav {
	grid-area: NAV;
	padding:1em;
	
	font-family: 'Fira Code',monospace;
}

nav ul {
	margin:0;
	padding:0;
	
	list-style-type: none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: flex-end;
}

nav ul a {
	padding:.6em .4em .6em .8em;
	margin:.2em;
	flex-basis:46%;
	background-color:rgba(255,255,255,.7);
	border: 2px solid #404d5b;
	
}

@media (max-width:1024px){
	nav ul a {
		flex-basis:100%;
	}
}

nav ul a:hover {
	border: 2px solid #ffde7a;
	background-color:#404d5b;
	color:#ffffff;
}

nav ul a:focus {
	background-color:rgba(255,222,122,.8);
	color:#404d5b;
}

h1 {
	margin:.4em 0 .4em 0;
	padding:0;
	text-align: center;
	font-family: 'Fira Code',monospace;
}

h2 {
	padding:.6em 0 .6em 0;
	background-color:#404d5b;
	font-family: 'Fira Code',monospace;
	text-align: center;
	color:#ffffff;
	width:100%;
}

h3 {
	margin:0;
	padding:0;
	font-weight: bolder;
	color:#404d5b;
	font-family:'Fira Code',monospace;
}

main {
	margin:0;
	padding:0 1em 0 1em;
	grid-area: mainArea;
	
	display:flex;
	flex-direction:column;
	justify-content: flex-start;
}

.center {
	margin:.2em;
	padding:0;
	text-align: center;
}

#Carousel {
	position: relative;
	margin:0;
	padding:0;
	
}

@media (max-width:1024px) {
	#Carousel {
		display: none;
	}
}

#Carousel section {
	margin:0;
	padding:0;	
}

#Carousel p {
	text-align: center;
}

.slide {
	margin:0;
	padding:0;
}

#Controls {
	position:absolute;
	right:6%;
	bottom:5%;
}

button {
	font-size:1em;
	margin:.4em;
	color:#ffffff;
	background-color:rgba(64,77,91,.8);
	border-radius:6px;
	border:2px solid #ffffff;
	padding:.6em;
}

button:hover {
	border: 2px solid #ffde7a;
	background-color:rgba(64,77,91,1);
}

button:focus {
	background-color:rgba(255,222,122,.8);
	color:#404d5b;
}

button:active {
	transform:scale(.96,.96);
}

#byLine {
	margin:0;
	padding:0 1em 0 1em;
}

#byLine p {
	text-align: center;
	margin:0;
	padding:0;
}

#FrontPage {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#FrontPage section {
	flex:1 1 0;
	margin:.6em;
	min-width:340px;
}

.verticalButtons {
	display:flex;
	flex-direction:column;
	justify-content: center;
}

.sectionLink {
	text-align: right;
}

#PartnerLogos {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
}

.partner {
	flex:1 1 0;
	padding:1em;
	min-width:72px;
}

#Acknowledgement {
	
	display:flex;
	flex-direction: column;
	flex-wrap:wrap;
}

footer {
	grid-area:footer;
	
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0)), url('/img/background_0.jpg');
	background-size:cover;
	
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:auto auto auto;
	grid-template-areas: 
		"title title title"
		"sectionleft . sectionright"
		"legal legal legal";
}

#ContactInfo {
	grid-area:sectionleft;
	padding:2em;
}

#Resources {
	grid-area:sectionright;
	padding:2em;
}

#Legal {
	grid-area: legal;
	
	background-color:rgba(64,77,91,.6);
	color:#ffffff;
	padding:.2em;
}

#Legal p {
	text-align:center;
}

article {
	margin:.5em 0 .5em 0;
	padding:1em;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	border:2px solid #8ca9c9;
	align-items:center;
	justify-content: space-between;
}

article.person {
	display:flex;
	flex-direction: column;
	max-width:280px;
	border:none;
}

article.person img {
	margin-bottom: 1em;
	box-shadow: 1px 2px 4px #738ba0;
}

article.person h3 {
	padding:0;
	text-align: center;
}

article.person p {
	padding:0;
	margin:0;
	text-align: center;
}

.people {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.articleContent {
	margin:0;
	padding:1em;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex:3 1 0;
	min-width:240px;
}

@media (max-width:660px){
	
	.hideSmall {
		display:none;
	}
}

.articleImg {
	margin:0;
	padding:1em;
	flex:1 1 0;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content: space-around;
	min-width:240px;
}

.articleImg img {
	
	box-shadow: 1px 2px 4px #738ba0;
}

.mtgImg {
	margin:.2em;
	max-width: 48%;
	align-self: flex-start;
}

#Acknowledgement {
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
}

#AckContent {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap-reverse;
}

#AckImg {
	flex:1 1 0;
	min-width:380px;
	display:flex;
	flex-direction: row;
	justify-content: center;
}

#AckText {
	display:flex;
	flex-direction: column;
	justify-content: center;
	flex:3 1 0;
}

.pubInfo {
	display:flex;
	flex-direction:column;
	flex:3 1 0;
}

.pubImg {
	flex:1 1 0;
}

.sorter {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
}

article button, .sorter button {
	border-radius:0;
	font-size:1em;
	font-weight: normal;
	padding:.4em;
	margin:.2em;
}

button.db, button.meth, button.sw, button.ml {
	background-color:#779340;
}

button.sep, button.sto {
	background-color:#1b9dc4;
}

button.cat, button.trans {
	background-color:#815892;
}

button.elec, button.mag {
	background-color:#f79431;
}

button.db:hover, button.meth:hover, button.sw:hover, button.ml:hover, button.sep:hover, button.sto:hover, button.cat:hover, button.trans:hover, button.elec:hover, button.mag:hover {
	border: 2px solid #ffde7a;
	background-color:rgba(64,77,91,1);
}

button.db:focus, button.meth:focus, button.sw:focus, button.ml:focus, button.sep:focus, button.sto:focus, button.cat:focus, button.trans:focus, button.elec:focus, button.mag:focus {
	background-color:rgba(255,222,122,.8);
	color:#404d5b;
}

.green {
	border-color:#779340;
}

.blue {
	border-color:#1b9dc4;
}

.purple {
	border-color:#815892;
}

.orange {
	border-color:#f79431;
}

/* general visibilty controls */

.hidden {
	display:none;
}

.visually-hidden {
	visibility: hidden;
}

.stretch {
	width:100%;
	margin:0;
}

/*software styles for svg*/


.svg_esc {
	fill:#a5d1ef;
}

.svg_pa {
	fill:#c5e2cd;
}

.svg_db {
	fill:#cfb3e8;
}

.svg_ml {
	fill:#f9dcb9;
}

.svg_mms {
	fill:#edb7be;
}

.elecstruct {
	background-color:#51a3e5;
}
.poreanalytics {
	background-color:#64846e;
}

.databases {
	background-color:#6f5682;
}

.machinelearning {
	background-color:#9e7e57;
}

.molecularmodeling {
	background-color:#c95d67;
}

#Random {
	border:none;
}

#PubInfo h3, #PubInfo p {
	animation: fadeInAnimation ease 5s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
}

#Random .pubImage {
	box-shadow: 1px 1px 5px #768ea7;	 
}

#Random .pubInfo h3, .pubInfo p {
	margin-left:2rem;
}

@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
}