/*
================================================
Created by Mark Fredriksen
Last updated on 01-13-2021
Notes: This stylesheet applies to the NHGRI Research domain (research.nhgri.nih.gov) and is an interpretation of the existing Genome.gov Web template based on DIR's specific needs.  This template is "mostly" responsive and will be updated as new styles are added.

================================================
Contents:
	01 Sensible Defaults
	02 Typography
	03 Basic Layout
	04 Header
	05 Primary Navigation
	06 Footer
	07 Main Content Basic Layout

================================================
*/


/* 01 Sensible Defaults
--------------------------------------------- */
@import url("bootstrap-reboot.css");
@import url("front-end_variables.css");
@import url("front-end_webfonts.css");


/* 02 Typography
--------------------------------------------- */
/*
	10 / 16 =	0.625em		(10px equivalent)
	12 / 16 =	0.75em		(12px equivalent)
	13 / 16 =	0.8125em	(13px equivalent)
	14 / 16 =	0.875em		(14px equivalent)
	15 / 16 =	0.9375em	(15px equivalent)
	16 / 16 =	1em				(16px equivalent)
	18 / 16 =	1.125em		(18px equivalent)
	21 / 16 =	1.3125em	(21px equivalent)
	24 / 16 =	1.5em			(24px equivalent)
	30 / 16 =	1.875em		(30px equivalent)
	42 / 16 =	2.625em		(42px equivalent)
	54 / 16 =	3.375em		(54px equivalent)
	72 / 16 =	4.5em			(72px equivalent)
*/


/* Ligatures */
body {
	text-rendering: optimizeLegibility; /* Turns on ligatures and kerning */
}

/* Rendering */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Raleway', Arial, 'Microsoft Sans Serif', 'sans-serif';
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.25;
}

em {
	font-style: italic;
}

strong {
	font-weight: 600;
}

sup {
	vertical-align: super;
	font-size: 0.625em;
}

sub {
	vertical-align: sub;
	font-size: 0.625em;
}

#masthead {
	font-size: 1.125rem;
}

header nav {
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

header .site-name h1, header .site-name a {
	font-size: 1em;
	font-weight: 500;
}

header .navbar-toggler.collapsed, header .navbar-toggler:not(.collapsed) {
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.05em;
}

.navbar-nav li {
	letter-spacing: 0.125rem;
}

.navbar-nav li>ul>li {
	font-size: 0.75rem;
}

.navbar-nav>li a:hover {
	font-weight: 600;
}

footer {
	font-size: 0.8125rem;
	font-weight: 600;
}

footer .navigation li {
	line-height: 30px;
}

.banner-notice p {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0.03125rem;
}

#button_back-to-top {
	font-family: "Font Awesome 5 Free";
	font-size: 0.75em;
	line-height: 40px;
	font-weight: 900;
}

main {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;	
	letter-spacing: max(0.03125em, calc(100vw/90*0.0625));
	line-height: 1.5em;
}

#breadcrumbs .breadcrumb {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.675rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.625em;
}

#breadcrumbs .breadcrumb li.active {
	font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
	font-size: 150%;
}

main a.external::after {
	font-family: "Font Awesome 5 Free";
	font-size: 0.875em;
	font-weight: 900;
}

#main h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: 0.015625em;
}

#main h1.home {
	font-size: 2.5rem;
}

#article-endnote {
	font-size: 0.75rem;
	font-weight: 400;
}

#article-metadata p {
	font-size: 0.75rem;
	font-style: italic;
	line-height: normal;
}

#main label {
	font-weight: 600;
}

#main form .btn-primary {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.125em;	
}

figcaption.figure-caption {
	font-weight: 400;
}

@media (min-width: 576px) {
	#breadcrumbs .breadcrumb {
		letter-spacing: 0.05em;
	}
}

@media (min-width: 768px) {
	#breadcrumbs .breadcrumb {
		font-size: 0.75rem;
	}
	#main h1 {
		font-size: 2.5rem;
	}
	#main h1.home {
		font-size: 3rem;
	}
}

@media (min-width: 992px) {
	main {
		line-height: max(1.75rem, calc(100vw/90*1.5));
	}
	main .lh-normal {
		line-height: 1.625em;
	}
}


/* 03 Basic Layout
--------------------------------------------- */
body {
	margin: 0;
	padding: 0;
}

#wrapper-page {
	width: 100%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}

a, a:link, a:visited {
	color: var(--blue-royal);
	font-weight: 400;
}

a:hover {
	color: var(--cobalt);
}

.top-target, .skip-nav {
	position: absolute;
	left: -9999px;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	clip: rect(1px 1px 1px 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	border: 0 none;
}

.banner-notice {
	position: relative;
	text-align: center;
	background: var(--magenta);
}

.banner-notice.alert {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.banner-notice p {
	margin: 0;
	padding: 0.85em;
	color: #fff;
	display: inline-block;
	max-width: 90%;
}

.banner-notice p a, footer .navigation a {
	text-decoration: none;
	-webkit-transition: ease all 0.25s;
	-moz-transition: ease all 0.25s;
	-o-transition: ease all 0.25s;
	transition: ease all 0.25s;
	padding-bottom: 1px;
	border-bottom: 1px solid;
}

.banner-notice p a {
	text-transform: uppercase;
	color: inherit;
	border-color: transparent;
}

.banner-notice p a:hover {
	text-decoration: none;
	border-color: #fff;
}

.banner-notice p .emdash {
	display: inline-block;
}

.banner-notice p .emdash:before {
	content: "\2014";
	display: inline-block;
	padding: 0 6px;
}

.banner-notice button.close {
	position: absolute;
  top: 0;
	right: calc(100vw/80*2 - calc(2.5rem - 0.8625rem)/2); /*Convert to variable to easy change with outside margin-left and right*/
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 100%;
  border: none;
	outline: none;
	background: transparent;
  font-size: 1.5rem;
  transition: 0.25s linear;
	padding: 0;
	opacity: 1;
}

.banner-notice button.close:not(:disabled):not(.disabled):hover, .banner-notice button.close:not(:disabled):not(.disabled):focus {
	opacity: 1;
}

.banner-notice button.close:before, .banner-notice button.close:after {
  position: absolute;
  content: '';
  width: 0.8625rem;
  height: 0.125rem;
  background: var(--white);
}

.banner-notice button.close:before {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.banner-notice button.close:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);	
}

.banner-notice button.close:hover {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

@media (min-width: 576px) {
	#button_back-to-top {
		display: inline-block;
		position: fixed;
		bottom: 1rem;
		right: 0.75rem;
		width: 40px;
		height: 40px;
		text-align: center;
		display: none;
		background: rgba(191,64,127,.7); /*#bf407f; Magenta*/
		-webkit-transition: background-color 0.3s;
		-moz-transition: background-color 0.3s;
		-o-transition: background-color 0.3s;
		transition: background-color 0.3s;
		z-index: 1000;
	}
	#button_back-to-top:hover {
		text-decoration: none;
		cursor: pointer;
		background: var(--magenta);
	}
	#button_back-to-top::after {
		content: "\f077";
		color: #fff;
	}
}


/* 04 Header
--------------------------------------------- */
header {
	color: #fff;
	webkit-position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.18), 0 2px 10px 0 rgba(0,0,0,0.12);
}

#masthead {	
	color: #fff;
	background: var(--blue-dusty);
	line-height: 0;
}

#masthead .brand {
	margin: 0 var(--margin-outside);
	padding: 1rem 0;
}

#masthead .brand>a {
	display: inline-block;
}

#masthead .brand img {
	height: 33px;
	width: auto;
	vertical-align: top;
	-webkit-transition: ease all 0.25s;
	-moz-transition: ease all 0.25s;
	-o-transition: ease all 0.25s;
	transition: ease all 0.25s;
}

#masthead .utilities {
	margin-right: var(--margin-outside);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#wrapper-search-desktop {
	display: none;
	align-items: center;
}

#wrapper-search-desktop .icon {
	color: inherit;
	padding-left: 0.75rem;
	-webkit-transition: ease all 0.5s;
	-moz-transition: ease all 0.5s;
	-o-transition: ease all 0.5s;
	transition: ease all 0.5s;
}

#wrapper-search-desktop .icon:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

#masthead input[type="search"] {
	width: calc(50vw - 25em);
	min-width: 22.5em;
}

#masthead .form-control, #masthead .form-control:focus, #masthead .form-control:active, #search-mobile {
	color: #fff;
	background: transparent;
	border: none;
	border-bottom: #fff 1px solid;
	border-radius: 0;
	outline: none;
	box-shadow: none;
}

#masthead input#search-desktop[type="search"]::-webkit-search-cancel-button, input#search-mobile[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	position: relative;
	right: 0.25em;
	height: 0.75em;
	width: 0.75em;
	background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewPort='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='1' y1='11' x2='11' y2='1' stroke='white' stroke-width='2'/%3e%3cline x1='1' y1='1' x2='11' y2='11' stroke='white' stroke-width='2'/%3e%3c/svg%3e");
}

#search-desktop::-webkit-input-placeholder, #search-desktop::placeholder, #search-mobile::placeholder, #search-mobile::-webkit-input-placeholder { /* Most Modern Browsers */
	color: #fff !important;
	opacity: 0.5;
}

#search-desktop::-ms-input-placeholder, #search-mobile::-ms-input-placeholder { /* Edge Browsers */
	color: #fff !important;
	opacity: 0.5;
}

#masthead .wrapper-nav-toggle {
	margin-left: 1em;
	width: auto;
	visibility: visible;
	opacity: 1;
}

.navbar-toggler {
	padding: 0;
	background: transparent !important;
	border-radius: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.navbar-toggler:focus, .navbar-toggler:active {
  outline: none;
  background: transparent !important;
}

.navbar-toggler.collapsed::before, .navbar-toggler:not(.collapsed)::before {
	color: var(--white);
	margin-right: 0.75em;
}

.navbar-toggler-icon {
	background-image: none !important; /*Disables Bootstrap's default toggle icon*/
}

.navbar-toggler .icon-bar {
	display: block;
	width: 22px;
	height: 1px;
	background-color: var(--white);
	-webkit-transform: rotate(0deg) translate(0px, 0px);
	-moz-transform: rotate(0deg) translate(0px, 0px);
	-o-transform: rotate(0deg) translate(0px, 0px);
	transform: rotate(0deg) translate(0px, 0px);
	opacity: 1;
}

.navbar-toggler .icon-bar+.icon-bar {
  margin-top: 6px;
}

.navbar-toggler .icon-bar:nth-child(3) {
  width: 16px;
  -webkit-transition: ease all .35s;
	-moz-transition: ease all .35s;
	-o-transition: ease all .35s;
	transition: ease all .35s;
}

.navbar-toggler .nav-toggle-icon:hover>.icon-bar:nth-child(3), .navbar-toggler .nav-toggle-icon:active>.icon-bar:nth-child(3) {
  width: 22px;
	-webkit-transition: ease all .35s;
	-moz-transition: ease all .35s;
	-o-transition: ease all .35s;
	transition: ease all .35s;
}

.navbar-toggler .icon-bar:nth-child(2), .navbar-toggler .icon-bar:nth-child(4) {
	-webkit-transition: transform .35s ease-in-out;
	-moz-transition: transform .35s ease-in-out;
	-o-transition: transform .35s ease-in-out;
	transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
	-webkit-transform: rotate(135deg) translate(6px, -4px);
	-moz-transform: rotate(135deg) translate(6px, -4px);
	-o-transform: rotate(135deg) translate(6px, -4px);
	transform: rotate(135deg) translate(6px, -4px);
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
	width: 22px;
	visibility: hidden;
	background-color: transparent;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(4) {
	-webkit-transform: rotate(-135deg) translate(6px, 4px);
	-moz-transform: rotate(-135deg) translate(6px, 4px);
	-o-transform: rotate(-135deg) translate(6px, 4px);
	transform: rotate(-135deg) translate(6px, 4px);
}

@media (min-width: 576px) {
	#masthead .brand {
		padding: 1.5rem 0;
	}
	#masthead .brand img {
		height: 45px;
	}
	#masthead .wrapper-nav-toggle {
		margin-left: 0;
		width: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: ease all .25s;
		-moz-transition: ease all .25s;
		-o-transition: ease all .25s;
		transition: ease all .25s;
	}
}

@media (min-width: 768px) {
	#masthead .wrapper-nav-toggle {
		margin-left: 0;
		width: 0;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: ease all .25s;
		-moz-transition: ease all .25s;
		-o-transition: ease all .25s;
		transition: ease all .25s;
	}
	header.minified {
		position: fixed;
	}
	header.minified #masthead .wrapper-nav-toggle {
		margin-left: 1em;
		width: auto;
		visibility: visible;
		opacity: 1;
	}
	header.minified #masthead .brand {
		padding: 1rem 0;
	}
	header.minified #masthead .brand img {
		height: 35px;
	}
}

@media (min-width: 992px) {
	#wrapper-search-desktop {
		display: flex;
	}
}


/* 05 Primary Navigation
--------------------------------------------- */
header nav {
	background: var(--blue-dusty-dark-trans);
	color: #fff;
}

header nav .navbar {
	display: none;
}

header nav .site-name {
	margin-left: var(--margin-outside);
	padding: 1.5em 0;
}

header nav .site-name h1 {
	margin: 0;
}

header .site-name h1 a {
	color: inherit;
	cursor: pointer;
}

header .site-name h1 a:hover {
	text-decoration: none;
}

header nav .wrapper-nav-toggle {
	margin-right: var(--margin-outside);
}

header nav .navbar-toggler.collapsed::before {
	content: 'MENU';
}

header nav .navbar-toggler:not(.collapsed)::before {
	content: 'CLOSE';
}

#site-nav-primary {
	padding: 1em var(--margin-outside) 1.5em;
}

#wrapper-search-mobile {
	display: flex;
	justify-content: space-between;
	align-items: center; /* Disable for full height child divs*/
}

#wrapper-search-mobile form {
	width: 100%;
}

#wrapper-search-mobile .icon {
	color: inherit;
	padding-left: 1.25rem;
}

.navbar-nav a, .navbar-nav a:link, .navbar-nav a:visited {
	color: inherit;
}

ul.navbar-nav {
	margin: 1em 0 0;
}

.navbar-nav li {
	list-style: none;

text-transform: uppercase;

}

.navbar-nav li>ul>li {

text-transform: capitalize;

}

.navbar-nav>li a {
	display: inline-block;
	padding: 0.625em;
	text-decoration: none;
  -webkit-transition: border ease-in 0.15s;
	-moz-transition: border ease-in 0.15s;
	-o-transition: border ease-in 0.15s;
	transition: border ease-in 0.15s;
	border-left: 6px solid transparent;
}

.navbar-nav>li a:hover {
	text-decoration: none;
	border-color: var(--genome-teal);
}

@media (min-width: 576px) {
	header nav .navbar {
		display: flex;
		flex-wrap: nowrap;
	}
}

@media (min-width: 768px) {
	header.minified .navbar {
		display: none;
	}
	#site-nav-primary {
		border-top: var(--gray) 1px solid;
	}
}

@media (min-width: 992px) {
	#wrapper-search-mobile {
		display: none;
	}
	ul.navbar-nav {
		margin: 0; 
	}
}


/* 06 Footer
--------------------------------------------- */
footer {
	padding: 60px 0;
	color: #fff;
	background: var(--blue-dusty)
}

footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.logos-gov {
	text-align: center;
}

.logos-gov img {
	height: 50px;
	width: auto;
}

.logos-gov li {
	display: inline-block;
}

.logos-gov li+li {
	padding-left: 2.5em;
}

footer .navigation ul {
	margin-left: calc(100vw/40*2); 
	padding-left: 1.25rem; /*Equal to 1/2 the padding on navigation li to force center*/
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	border-left: 4px solid var(--white);
	-webkit-column-rule: 4px solid var(--white);
	-moz-column-rule: 4px solid var(--white);
	column-rule: 4px solid var(--white);
	-webkit-column-gap: calc(2.5rem + 6px);
	-moz-column-gap: calc(2.5rem + 6px);
	column-gap: calc(2.5rem + 6px);
}

footer .navigation li {
	padding-right: calc(100vw/40*2);
}

footer .navigation a {
	color: inherit;
	border-color: transparent;
}

footer .navigation a:hover {
	text-decoration: none;
	border-color: #fff;
}

footer .mantra svg {
	height: 60px;
	width: auto;
}

svg#mantra-genome .block {
	fill: var(--genome-teal);
} 

svg#mantra-genome .text {
	fill: var(--white);
}

/* Medium-sized devices (e.g., tablets) 991px and below */
@media (max-width: 991px) {
	footer {
		padding: 50px 0;
	}
	footer .container {
		text-align: center;
	}
	.logos-gov li+li {
		padding-left: 4em;
	}
	footer .navigation {
		display: inline-flex;
		margin: 3.25rem 0;
		text-align: left;
	}
	footer .navigation ul {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
		-webkit-column-gap: calc(6rem + 6px);
		-moz-column-gap: calc(6rem + 6px);
		column-gap: calc(6rem + 6px);
	}
	footer .navigation li {
		padding-right: 0;
	}
}

/* Small-sized devices (e.g., phones) 767px and below */
@media (max-width: 767px) {
	footer {
		padding: 40px 0;
	}
	.logos-gov img {
		height: 45px;
		width: auto;
	}
	.logos-gov li+li {
		padding-left: 2.5em;
	}
	footer .navigation {
		margin: 2.25rem 0;
		text-align: center;
	}
	footer .navigation ul {
		margin: 0;
		padding: 0;
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		border-left: none;
		-webkit-column-rule: none;
		-moz-column-rule: none;
		column-rule: none;
		-webkit-column-gap: normal;
		-moz-column-gap: normal;
		column-gap: normal;
	}
	footer .navigation li {
		margin: 0.75em 0;
	}
	footer .mantra svg {
		height: 50px;
		width: auto;
	}
}


/* 07 Main Content: Basic Layout
--------------------------------------------- */
main {
	padding: 1.5em 0.75em;
	color: var(--text-main);
}

main a {
	text-decoration: none;
	-webkit-transition: ease all 0.25s;
	-moz-transition: ease all 0.25s;
	-o-transition: ease all 0.25s;
	transition: ease all 0.25s;
	padding-bottom: 1px;
	border-bottom: 1px solid transparent;
}

main a:hover {
	text-decoration: none;
	border-color: inherit;
}

main a.external::after {
	content: "\f35d";
	margin-left: 0.375em;
}

#breadcrumbs {
	padding: 0;
}

#breadcrumbs .breadcrumb {
	display: block;
	color: var(--gray-dark);
	margin-bottom: 2rem;
	padding: 0 0.5rem 0.75rem;
	background: none;
	border-radius: 0;
	border-bottom: 1px solid var(--blue-dusty);
}

#breadcrumbs .breadcrumb-item {
	display: inline;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--gray-dark);
	content: "\203A";
}

#breadcrumbs .breadcrumb a, #breadcrumbs .breadcrumb a:link, #breadcrumbs .breadcrumb a:visited {
	color: var(--gray-dark);
}

#breadcrumbs .breadcrumb a:hover {
	color: var(--blue-royal);
}

#breadcrumbs .breadcrumb li.active {
	color: var(--magenta-dusty);
}

article#main {
	padding: 0;
	background: transparent;
}

#main h1 {
	color: var(--blue-dusty);
	padding: 0.125em 0;
}

#main h1.home {
	padding: 0.25em 0 0.5em;
}

#main h2, #main h3, #main h4, #main h5, #main h6, #main h7, #main h8 {
	margin-top: 1.25em;
	color: var(--blue-dusty);
}

#main .image, #main .figure, #main .picture {
	/*display: inline-block;*/
	margin: 2em 0;
}

#article-endnote::before {
	background-color: var(--white-off);
	content: '';
	display: block;
	height: 1px;
	margin: 2rem 0 1.25rem;
	width: 65%;
}

#article-metadata::before {
	background: var(--magenta);
	content: '';
	display: block;
	height: 8px;
	margin: 2rem 0 1.5rem;
	width: 4em;
}

#article-metadata sup {
	top: 0.25em;
}

@media (min-width: 576px) {
	main {
		padding: 1.5em 0 2em;
	}
	#breadcrumbs .breadcrumb {
		padding: 0 1rem 0.75rem;
	}
}

@media (min-width: 992px) {
	article p {
		margin-bottom: 1.25rem;
	}
}


/* 08 Main Content: Table Layout
--------------------------------------------- */
table img.table-icon[src*=svg] {
	height: 1.25em;
}


/* 09 Main Content: Form Layout
--------------------------------------------- */
#main form {
	margin: 1.5rem 0 0;
}

#main form .form-group {
	margin-bottom: 2rem;
}

#main form .btn-primary {
	margin-top: 1.25em;
	padding: 0.5rem 1rem;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	transition: background-color 0.3s;
	background-color: var(--blue-dusty);
	border: none;
	border-radius: 0;	
}

#main form .btn-primary:hover {
	background: var(--magenta);
}


@media (min-width: 992px) {
	#main form {
		margin: 2rem 0 2.5rem;
}
	#main form .form-group {
		margin-bottom: 0;
	}
	#main form .form-group+.form-group {
		padding-left: 1.75em;
	}
}