div.callout-box.big-img.searchimage > a > img {
	cursor: default;
}
#s4-workspace {
    -webkit-overflow-scrolling: touch;
}

#s4-titlero w {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    height: 0px !important;
    overflow: visible;
    display: block !important;
}

#contentBox {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

div.article,
div.welcome {
    padding: 0px !important;
}

#pageStatusBar[class],
.ms-status-msg {
    margin-bottom: 0 !important;
}

#Breadcrumb_nigms ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0
}

#Breadcrumb_nigms li {
    list-style: none;
    margin: 0;
    padding: 0
}

#Breadcrumb_nigms .s4-breadcrumb-arrowcont>span.s4-breadcrumb {
    display: none !important
}

#Breadcrumb_nigms {
    margin: 5px 0;
    position: relative !important;
    display: block
}

#Breadcrumb_nigms a.BT-breadcrumbLink,
#Breadcrumb_nigms a.BT-breadcrumbLinkRoot,
#Breadcrumb_nigms span.BT-breadcrumbLinkCurrent {
    padding: 0 10px;
    text-decoration: none
}

#Breadcrumb_nigms span.BT-breadcrumbLinkCurrent,
#Breadcrumb_nigms a.BT-breadcrumbLink:hover,
#Breadcrumb_nigms a.BT-breadcrumbLinkRoot:hover,
#Breadcrumb_nigms span.BT-breadcrumbLinkCurrent:hover {
    padding: 0 10px;
    text-decoration: none
}

#Breadcrumb_nigms.boxed {
    background: #f2efef;
    background: rgba(0, 0, 0, 0.1)
}

a[data-featherlight="glossary"] {
    text-decoration: none;
    border-bottom: 1px blue dotted;
}

html {
    text-shadow: none !important;
}

@media print {
    .no-print {
        display: none;
    }
}

/* .left-sidebar-fold {
    display: none !important;
} */

#nigms_announcementtitle {
    text-align: center;
}

/* .main-fold {
    background: linear-gradient(to left, transparent, white 70%), url('../images/fold/3475.jpg');
    background-position: right;
    background-repeat: no-repeat;
} */

.bg-light-blue {
    position: relative;
    background-image: url('../images/fold/bg-light-blue.jpg');
    overflow: hidden;
}

.bg-light-blue p {
    font-size: 18px;
}

.bg-nobel:before {
    content: '';
    display: block;
    position: absolute;
    overflow: visible;
    top: 0;
    bottom: 0;
    right: 0;
    margin-right: -20%;
    width: 62%;
    height: 100%;
    background-image: url('../images/fold/nobel.png');
    background-repeat: no-repeat;
    background-size: auto 110%;
    background-position: bottom left;
    opacity: .47;
}

@media (min-width: 767px) {
    .bg-nobel:before {
        opacity: .73;
    }
}

#nigms_announcementfold[data-attr=''] {
    display:none;
  }

input.ms-long {
    width: 95% !important;
}

/*BEGIN Actual Custom CSS*/

/*custom.css*/
/**List "fixes". Standard list need to be overhauled cause some bad stuff is happening in main.css**/
#content ul {
	overflow:visible;
}

h4.better-h4 {
	font-size: 1.35rem;
	color:	#2d2d2d;
	line-height: 1.5rem;
}

/**Exit Disclaimer Upgrade**/
.exit-disclaimer {
	display:inline-block;
    word-break: break-word;
	position: relative;
	margin-left: 0.5ch;
    transition: .3s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    line-height: normal;
}
	
.exit-disclaimer::before {
	content: '';
	width: 1.1ch;
	height: 1.1ch;
	padding: 1px;
    display: inline-block;
	-webkit-mask: url('../images/icons/exit-disclaimer.svg') no-repeat 50% 50%;
	mask: url('../images/icons/exit-disclaimer.svg') no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: #1d6cbd;
	padding: 0 2px;
}
/**Button Rules**/
/**btn-default, btn-block**/
.btn-default .exit-disclaimer::before,
.btn-block .exit-disclaimer::before {
	background-color: #1d6cbd;
}
.btn-default:hover .exit-disclaimer::before,
.btn-block:hover .exit-disclaimer::before,
.btn-default:active .exit-disclaimer::before,
.btn-block:active .exit-disclaimer::before,
.btn-default:focus .exit-disclaimer::before,
.btn-block:focus .exit-disclaimer::before  {
	background-color: white;
}
/**btn-white, pathways-btn**/
.btn-white .exit-disclaimer::before,
.btn-default-inverse .exit-disclaimer::before,
.pathways-display-cover .exit-disclaimer::before,
.pathways-btn .exit-disclaimer::before {
	background-color: white;
}

/**Some have NOTs for btn-icon, pathways-button. Also note stupidly pathways-button and pathways-btn are different classes**/
.btn-white:not(.btn-icon):not(.pathways-button):hover .exit-disclaimer::before,
.btn-white:not(.btn-icon):not(.pathways-button):active .exit-disclaimer::before,
.btn-white:not(.btn-icon):not(.pathways-button):focus .exit-disclaimer::before,
.btn-default-inverse:hover .exit-disclaimer::before,
.btn-default-inverse:active .exit-disclaimer::before,
.btn-default-inverse:focus .exit-disclaimer::before,
.pathways-btn:hover span .exit-disclaimer::before,
.pathways-btn:active span .exit-disclaimer::before,
.pathways-btn:focus span .exit-disclaimer::before {
	background-color: #154e88;
}
/**Exit Disclaimer Message**/
.exit-disclaimer:hover::after {
	content: ' This link takes you away from the NIGMS website. NIGMS does not endorse and is not responsible for the content on the destination site. ';
	background-color: #f3f3f3;
	color: #000;
	font-size: 0.7rem;
	font-weight: normal;
	position: absolute;
	white-space: normal;
	left: 100%;
	bottom: 100%;
	width: 40ch;
	text-align: left;
	padding: 2px;
	z-index:1;
	border: 1px solid white;
}

/*TEMP survey box for science education page*/
.survey-box {
	text-align: center;
	color: black;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 1rem;
	background: rgba(255,255,255,0.8);
	margin: 1rem auto 0 auto;
	max-width: 1370px;
	
}

/**move search form over to make room for additional social media icon**/
@media (min-width: 768px){
	.search-collapse #search-form, .search-collapse form {
		   right: 300px;
	}
}

/**Fix footer social media icons**/
/* .icon-sm-facebook:before {
    background-image: url(images/facebook.svg);
}
.icon-sm-twitter:before {
    background-image: url(../images/twitter.svg);
}
.icon-sm-instagram:before {
    background-image: url(../images/instagram.svg);
}
.icon-sm-youtube:before {
    background-image: url(../images/youtube.svg);
}
.icon-sm-mail:before {
    background-image: url(../images/mail.svg);
}
.icon-sm-pinterest:before {
	background-image: url(../images/pinterest.svg);
}
*/
.icon-pinterest {
	background-image: url("../images/pinterest.svg");
	display: inline-block;
	width: 4em;
	height: 4em;
	border-radius: 2em;
	background-color: #E60023;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 73%;
	
}

.icon-linkedin {
	background-image: url("../images/linkedin.svg");
	display: inline-block;
	width: 4em;
	height: 4em;
	border-radius: 2em;
	background-color: #E60023;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 73%;
	
}

/**Fix for home page fold 1 background image appearing unnecessarily**/
.homepage .main-fold {
	background-size: cover;
}
.homepage .main-fold:before {
    background-image: none;
}

/**
* Temprary fix to improve bullet alignment
**/
.main-content ul:not([class])>li:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -0.7em;
    top: .7em;
    width: .33em;
    top: 0.45em;
    background-color: #1d6cbd;
}

/**
* Table Fix Styles
* adds black borders to table, requires a container div for mobile friendly-ish
**/

.table-fix-container {
    width: 100%;
    max-width: 100%;
}

.table-fix {
    border: 1px solid black;
}

.th-fix {
    display: table-cell;
    border: 1px solid black !important;
    text-align: inherit;
}

.td-fix {
    display: table-cell;
    border: 1px solid black !important;
    text-align: inherit;
}

@media (max-width: 768px) {
    .table-fix-container {
        width: 760px;
        overflow-x: scroll;
        box-shadow: 3px 1px darkgrey;
    }
}

@media (max-width: 500px) {
    .table-fix-container {
        width: 400px;
        overflow-x: scroll;
        box-shadow: 3px 1px darkgrey;
    }
}

/**
* temporary FAQ Styles
**/

.faq-question,
h4.faq-question,
h5.faq-question,
h6.faq-question {
    font-size: 1.4em;
    margin-top: 1em;
    line-height: 1.3em;
    color: #000;
}

/**
* pathways fold homepage background color fix
**/

.pathways-fold {
    background-color: #427b98 !important;
}

.pathways-fold:before {
    background: -moz-linear-gradient(left, #427b98 40%, transparent 150%);
    background: -webkit-linear-gradient(left, #427b98 40%, transparent 150%);
    background: linear-gradient(to right, #427b98 40%, transparent 150%);
}

@media (max-width: 991px) {
    .pathways-fold-content {
        background-color: rgba(22, 60, 90, 0.85) !important;
    }
}

/**
* pathways fold hompage background color fix
**/

.top-content-boxes .row .top-content-box.rt-01 {
    background-color: rgba(78, 139, 216, 0.92) !important;
}

.top-content-boxes .row .top-content-box.rt-02 {
    background-color: rgba(23, 197, 195, 0.92) !important;
}

.top-content-boxes .row .top-content-box.rt-03 {
    background-color: rgba(111, 190, 83, 0.92) !important;
}

.top-content-boxes .row .top-content-box.rt-04 {
    background-color: rgba(201, 151, 80, 0.92) !important;
}

.top-content-boxes .row .top-content-box.gf-01 {
    background-color: rgba(25, 161, 202, 0.92) !important;
}

.top-content-boxes .row .top-content-box.gf-02 {
    background-color: rgba(50, 160, 118, 0.92) !important;
}

.top-content-boxes .row .top-content-box.gf-03 {
    background-color: rgba(147, 110, 179, 0.92) !important;
}

.top-content-boxes .row .top-content-box.gf-04 {
    background-color: rgba(41, 186, 184, 0.92) !important;
}

.top-content-boxes .row .top-content-box.cb-01 {
    background-color: rgba(24, 148, 190, 0.92) !important;
}

.top-content-boxes .row .top-content-box.cb-02 {
    background-color: rgba(12, 205, 202, 0.92) !important;
}

.top-content-boxes .row .top-content-box.cb-03 {
    background-color: rgba(50, 160, 118, 0.92) !important;
}

.top-content-boxes .row .top-content-box.cb-04 {
    background-color: rgba(193, 173, 88, 0.92) !important;
}

.contacts-division {
    margin: 2em 0 0 0;
    padding: 0.5em 10px;
    color: white;
    background-color: #376a70;
}

h4.contacts-branch {
    padding: 0.5em 10px;
    margin: 1.5em 0 0 0;
    color: white;
    background-color: #414141;
}

h4.first-in-list {
    margin-top: 0;
}

.contacts-program {
    margin-top: 1em;
    padding: 1em 10px;
    line-height: 1.3;
    font-weight: bold;
    background-color: #d8eaec;
}

p.contacts-contactname {
    line-height: 1.4;
}

.first-in-list {
    margin-top: 0;
}

/*BEGIN GENERAL USE STYLES*/

/*Used in content blocks*/
.block-img {
    max-width: 200px;
    width: 100%;
    border-radius: 25px;
    margin-top: 1rem;
}
.block-caption {
    font-size: 0.8rem;
    line-height: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/*basic list style with no bullets.*/
.toc-list {
    list-style: none;
    padding-left: 1em;
}

/*add to a button to make long text wrap*/
.btn-break {
    word-wrap: break-word;
    white-space: normal;
}

/*used when placing an exit icon on a dark button*/
.exit-inverse img {
    background-color: transparent;
    border-radius: 5px;
    padding: 1px;
}

.exit-inverse:hover img {
    background-color: rgba(21, 78, 136, 0.8);
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}

.lightbox-caption {
color: white;
font-weight: bold;
text-decoration: none;
width: 50%;
margin: 0.5em 25%;
padding: 1em 0.5em;
background-color: #171d1f;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}

.lightbox:target {
    outline: none;
    display: block;
}

img.watermark {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

div.image-with-caption {
    border: 2px solid #e4e4e4;
    background-color: #ecf2f7;
    margin: 0.5em;
    padding: 0.25em;
    width: 25%;
}

@media only screen and (max-width: 992px) {
    div.image-with-caption {
        border: 2px solid #e4e4e4;
        background-color: #ecf2f7;
        margin: 0.5em;
        padding: 0.25em;
        width: 100%;
    }
}

div.image-with-caption>img {
    width: 100%;
}

div.image-with-caption>p {
    font-size: 0.8em;
    line-height: 1.4em;
    margin-top: 0.5em;
    color: f3f3f3;
}

/*END GENERAL USE STYLES*/

/*BEGIN BOOKLETS STYLES */

div.booklet-chapter {
    display: inline-block;
    width: 100%;
    margin: 8px 0;
    background: rgba(216, 234, 236, 0.3);
    -webkit-transition: background 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: background 0.5s;
    border: 1px solid #d4d4d4;
    border-radius: 25px;
}

div.booklet-chapter:hover {
    background: rgba(216, 234, 236, 1);
}

h3.booklet-chapter-header {
    color: #171d1f;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0.5em 0.25em 0.25em 0.25em;
}

.booklet-chapter-icon {
    float: left;
    height: 100px;
    width: 100px;
    margin: 0.75em;
    border: 1px solid black;
    border-radius: 10%;
}

.booklet-cover-img {
    float: left;
    margin: 0.5em 2em 1em 0px;
    width: 25%;
    box-shadow: 5px 5px #171d1f;
}

div.booklet-top-section {
    display: inline-block;
    width: 100%;
    margin: 0 0 1em 0;
}

/*END BOOKLETS STYLES */

.ms-srch-hover-outerContainer {
    display: none !important;
}

.ms-srch-item {
    width: auto !important;
}

.ms-srch-bestBetItem {
    width: auto !important;
}

/*BEGIN PROGRAM PAGES STYLES*/

.prog-pg-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

a.prog-pg-btn-4 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    width: 25%;
    padding: 1em;
    position: relative;
    text-decoration: none;
}

@media only screen and (max-width: 992px) {
    a.prog-pg-btn-4 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        width: 100%;
        padding: 1em;
        position: relative;
        text-decoration: none;
    }
}

.prog-pg-btn-color-one {
    background-color: #376a70;
}

.prog-pg-btn-color-two {
    background-color: #478b92;
}

.prog-pg-btn-color-three {
    background-color: #08b170;
}

.prog-pg-btn-color-four {
    background-color: #125454;
}

p.prog-pg-btn-text {
    font-size: 1.5em;
    line-height: 1.2em;
    color: #ecf2f7;
    display: inline-block;
    width: 100%;
    font-weight: bold;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a.prog-pg-btn-4:hover>p.prog-pg-btn-text {
    -ms-transform: translateY(2em) scale(1.3);
    /* IE 9 */
    -webkit-transform: translateY(2em) scale(1.3);
    /* Safari */
    transform: translateY(2em) scale(1.3);
}

div.prog-pg-btn-icon-background {
    position: relative;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    padding: 10%;
    background-color: #d8eaec;
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a.prog-pg-btn-4:hover>div.prog-pg-btn-icon-background {
    -ms-transform: translateY(4e);
    /* IE 9 */
    -webkit-transform: translateY(4em);
    /* Safari */
    transform: translateY(4em);
    /* Standard syntax */
    opacity: 0;
}

img.prog-pg-btn-icon {
    width: 100%;
    display: inline-block;
}

/*END PROGRAM PAGES STYLES*/

/*BEGIN FINDINGS COLLAGE BOXES https://auth.nigms.nih.gov/education/findings/Pages/default.aspx */

.collage10 .collage-box, .collage12 .collage-box {
    margin-bottom: 10px
}

.collage10 .collage-box.box1:before {
    background-image: url(../images/bg/findings-collage-10-1.png)
}

.collage12 .collage-box.box1:before {
    background-image: url(../images/bg/findings-collage-12-1.png)
}

.collage10 .collage-box.box1:after {
    background: -moz-linear-gradient(bottom, #151b3d 0, rgba(31, 40, 89, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(bottom, #151b3d 0, rgba(31, 40, 89, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #151b3d, rgba(31, 40, 89, 0.8) 62%, rgba(0, 0, 0, 0) 100%)
}

.collage12 .collage-box.box1:after {
    background: -moz-linear-gradient(bottom, #002608, rgba(0, 71, 14, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(bottom, #002608, rgba(0, 71, 14, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #002608, rgba(0, 71, 14, 0.8) 62%, rgba(0, 0, 0, 0) 100%)
}

.collage10 .collage-box.box2:before {
    background-image: url(../images/bg/findings-collage-10-2.jpg)
}

.collage12 .collage-box.box2:before {
    background-image: url(../images/bg/findings-collage-12-2.png)
}

.collage10 .collage-box.box2:after {
    background: -moz-linear-gradient(bottom, #104979 0, rgba(16, 73, 121, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(bottom, #104979 0, rgba(16, 73, 121, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #104979, rgba(16, 73, 121, 0.8) 62%, rgba(0, 0, 0, 0) 100%)
}

.collage12 .collage-box.box2:after {
    background: -moz-linear-gradient(bottom, #2e0000 0, rgba(46, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(bottom, #2e0000 0, rgba(46, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #2e0000, rgba(46, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0) 100%)
}

.collage10 .collage-box.box3:before {
    background-image: url(../images/bg/findings-collage-10-3.jpg)
}

.collage12 .collage-box.box3:before {
    background-image: url(../images/bg/findings-collage-12-3.jpg)
}

.collage10 .collage-box.box3:after {
    background: -moz-linear-gradient(bottom, #2e0000 0, rgba(46, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(bottom, #2e0000 0, rgba(46, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #2e0000, rgba(46, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0) 100%)
}

.collage12 .collage-box.box3:after {
    background: -moz-linear-gradient(bottom, #104979 0, rgba(16, 73, 121, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(bottom, #104979 0, rgba(16, 73, 121, 0.8) 62%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, #104979, rgba(16, 73, 121, 0.8) 62%, rgba(0, 0, 0, 0) 100%)
}

.collage10 .collage-box.box4, .collage12 .collage-box.box4 {
    display: none
}

.collage10 .collage-box.box1 {
    width: 100%
}

.collage12 .collage-box.box1 {
    height: 100%
}

@media (min-width:768px) {
    .collage10 .collage-box {
        float: left
    }
    .collage10 .collage-box.box1, .collage10 .collage-box.box2, .collage10 .collage-box.box3 {
        margin-bottom: 12px
    }
    .collage10 .collage-box.box1 {
        height: 270px;
        top: 0;
        left: 0;
        margin-bottom: 12px
    }
    .collage10 .collage-box.box2 {
        height: 357px;
        width: calc(60% - 12px/2);
        top: 282px;
        left: 0;
        margin-bottom: 12px
    }
    .collage10 .collage-box.box3 {
        height: 357px;
        width: calc(40% - 12px/2);
        top: 282px;
        right: 0;
        left: auto;
        float: right
    }
    .collage12 .collage-box.box1 {
        top: 0;
        left: 0;
        margin-bottom: 12px
    }
    .collage12 .collage-box.box2 {
        height: 295px;
        width: calc(50% - 12px/2);
        top: 0;
        right: 0;
        margin-bottom: 12px
    }
    .collage12 .collage-box.box3 {
        height: 335px;
        width: calc(50% - 12px/2);
        top: 307px;
        right: 0;
        left: auto;
        float: right
    }
    .collage10 .collage-box.box1.open {
        bottom: 0;
        height: 100%;
        z-index: 10
    }
    .collage10 .collage-box.box2.open {
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10
    }
    .collage10 .collage-box.box3.open {
        top: 0;
        width: 100%;
        height: auto;
        z-index: 10
    }
    .collage12 .collage-box.box2.open {
        top: 0;
        width: 100%;
        height: auto;
        z-index: 10
    }
    .collage12 .collage-box.box2.open {
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10
    }
    .collage12 .collage-box.box3.open {
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10
    }
}

/*END FINDINGS COLLAGE BOXES*/

/*START SOCIAL MEDIA BUTTONS*/

.smGlobalBtn {
    /* global button class */
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 60px;
    height: 60px;
    padding: 1em;
    margin: 0.5em;
    text-decoration: none;
    text-align: center;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    fill: white;
}

.smGlobalBtn:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* facebook button class*/

.facebookBtn {
    background: #4060A5;
    content: url(../images/facebook.svg);
}

/* twitter button class*/

.twitterBtn {
    background: #00ABE3;
    content: url(../images/twitter.svg);
}

/*END SOCIAL MEDIA BUTTONS*/

/**START FACT SHEET STYLES
	BY: Matt Mills
	LAST UPDATED: 2019-02-28
	ABOUT: These styles are for the Fact Sheets found in Science Education
	USAGE:
	REFERENCES:
**/

.imgCaptionBox {
    max-width: 100%;
    padding: 3px;
    margin-bottom: 1em;
    display: block;
    background-color: #f3f3f3;
    border: 1px solid silver;
    /*box-shadow: 2px 5px #636363*/
}

p.captionBox-caption {
    padding: 0.5em 0.5em 0.25em 0.5em;
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 0
}

p.captionBox-credit {
    font-size: 0.8em;
    line-height: 1.1em;
    padding: 0 0.5em 0.25em 0.5em;
    margin: 0
}

.factBox {
    width: 100%;
    max-width: 100%;
    padding: .5em;
    display: inline-block;
    background-color: #f3f3f3;
    box-shadow: 2px 5px #636363
}

.factBoxHeader {
    color: white !important;
    margin: -.3em -.3em .5em -.3em;
    padding: .25em;
    background-color: gray;
}

.learnMoreBox {
    margin: 2em 1em 3em 0px;
    background-color: #f3f3f3;
    box-shadow: 2px 5px #636363;
}

.learnMoreBoxTitleRow {
    background-color: gray;
}

h4.learnMoreBox__h4 {
    color: white;
    font-weight: 700;
}

h5.learnMoreBox__h5 {
    box-shadow: 0px 2px;
    padding: 0.5em 0px 3px;
}

ul.learnMoreBox__ul {
    padding-left: 1.2em;
}

/*END FACT SHEET STYLES*/

/**START FOOTNOTES
	BY: Matt Mills
	LAST UPDATED: 2019-01-17
	ABOUT: These are generic footnote styles that can be used to make footnotes fully accessible, and their numbering automated.
	USAGE:
	REFERENCES: https://codepen.io/SitePoint/pen/QbMgvY
**/

footer {
    margin-top: 50px;
    border-top: 1px solid silver;
    font-size: 0.8em;
}

footer ol {
    padding-left: 20px;
}

/**
 * Initialiazing a `footnotes` counter on the wrapper
 */

article {
    counter-reset: footnotes;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */

[aria-describedby="footnote-label"] {
    counter-increment: footnotes;
    /* 1 */
    text-decoration: none;
    /* 2 */
    color: inherit;
    /* 2 */
    cursor: default;
    /* 2 */
    outline: none;
    /* 2 */
}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */

[aria-describedby="footnote-label"]::after {
    content: '[' counter(footnotes) ']';
    /* 1 */
    vertical-align: super;
    /* 2 */
    font-size: 0.5em;
    /* 3 */
    margin-left: 2px;
    /* 4 */
    color: blue;
    /* 5 */
    text-decoration: underline;
    /* 5 */
    cursor: pointer;
    /* 5 */
}

/**
 * Resetting the default focused styles on the number
 */

[aria-describedby="footnote-label"]:focus::after {
    outline: thin dotted;
    outline-offset: 2px;
}

[aria-label="Back to content"] {
    font-size: 0.8em;
}

/**
 * Highlight target note
 */

footer :target {
    background: yellow;
}

/**
 * Visually hidden yet accessible content
 */

.visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    visibility: hidden;
    opacity: 0;
}

/**END FOOTNOTES**/

/**
* SCIENCE EDUCATION PAGE
**/

.pathways-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 10px);
    height: 106px;
    padding-left: 0px;
    margin-top: 22px;
}

@media only screen and (min-width:481px) {
    .pathways-button {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 375px;
        height: 106px;
        padding-left: 0px;
        margin-top: 22px;
    }
}

/**
* END SCIENCE EDUCATION PAGE
**/

/**
* SIMPLE DIV BASED TABLE
**/

div.basicTable {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.divTable.basicTable .divTableCell, .divTable.basicTable .divTableHead {
    border: 1px solid #000000;
    padding: 5px 4px;
}

.divTable.basicTable .divTableBody .divTableCell {
    font-size: 13px;
}

.divTable.basicTable .divTableHeading {
    background: #F3F3F3;
}

.divTable.basicTable .divTableHeading .divTableHead {
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    text-align: left;
}

.basicTable .tableFootStyle {
    font-size: 14px;
}

/* DivTable.com */

.divTable {
    display: table;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    display: table-header-group;
}

.divTableCell, .divTableHead {
    display: table-cell;
}

.divTableHeading {
    display: table-header-group;
}

.divTableFoot {
    display: table-footer-group;
}

.divTableBody {
    display: table-row-group;
}

/**
* END SIMPLE DIV BASED TABLE
**/

/**STYLES THAT SHOULD BE INTEGRATED BY NETE**/

/**
*HOMEPAGE BLOG BOXES - Make blog box title links not change color or underline
**/

#loop-homepage-blogbox h2 a, #biobeat-homepage-blogbox h2 a {
    text-decoration: none;
}

#loop-homepage-blogbox h2 a:visited, #biobeat-homepage-blogbox h2 a:visited {
    color: #1d6cbd;
}

/*END BLOG BOXES*/

/**MEGA MENU LINE HEIGHT TO FIX ITEM WRAPPING TO A SECOND LINE TOUCHING**/

.navbar.navbar-default .navbar-nav>li>ul {
    line-height: 1.3em;
}

/**END STYLES THAT SHOULD BE INTEGRATED BY NETE**/

/*fix the way links are displayed in the sidebar. I don't know why the originally had display:block applied, but it looks bad*/

.left-sidebar a {
    display: inline;
    line-height: inherit;
}

/**START SCIENCE EDUCATION SEPA PAGE**/

div.sepa-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
    margin: 2em 0.5em;
    padding: 0.5em;
}

div.sepa-image-col {
    flex: 1 2 150px;
    padding: 0.5em 1em
}
@media only screen and (max-width: 600px) {
	 div.sepa-image-col {
	    flex: 0 1 auto;	}
}


div.sepa-desc-col {
    flex: 4 1 400px;
    padding: 0.5em 1em;
    min-height: 250px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly
}

img.sepa-img {
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    width: 100%;
    min-width: 150px;
    max-width: 200px;
    margin-top: 1em;
}

h4.sepa-item-header {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 0;
    margin-left: 0;
}

a.sepa-btn {
    width: 20ch;
}

.sepa-group-heading {
    margin-left: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.sepa-group-description {
    margin-left: 2rem !important;
}

.sepa-container .sepa-module {
    margin: 0;
    padding: 0 0.5rem 0 2rem;
    background-color: transparent;
    align-items: flex-start;
}

.sepa-module-image-col {
    flex: 1 2 75px;
    padding: 0.25em 0.25em;
}

.sepa-module-desc-col {
    flex: 4 1 400px;
    padding: 0.5em 1em;
    min-height: 100px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}

/**SCIENCE EDUCATION SEPA PAGE**/

div.nigmscatalogs-item {
    padding-bottom: 50px;
}

/**START OPAE Evaluation Reports /about/opae/Pages/reports.aspx **/

.opae-box h3 {
    font-size: 1.2em;
}

.opae-box strong {
    color: #068554;
}

.opae-btn {
    display: block;
    text-align: left;
    padding: 10px !important;
}

.opae-btn:before {
    float: right !important;
    content: "-";
    font-weight: bold;
    font-size: 1.1em;
    height: 1.5em;
    width: 1.5em;
    text-align: center;
}

.opae-btn.collapsed:before {
    float: right !important;
    content: "+";
}

.opae-btn:hover, .opae-btn:active, .opae-btn:focus {
    text-decoration: none;
    color: white;
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

/**END OPAE Evaluation Reports /about/opae/Pages/reports.aspx **/

 /*BEGIN PATHWAYS LANDING PAGE*/
    /*Pathways title fold with Pathways logo and video background*/
    .pathways-title-fold {
        position: relative;
        width: 100%;
        height: 18em;
        overflow: hidden;
        margin-top: 2rem;
        background-color: darkblue;
    }
    @media (max-width: 550px) {
        .pathways-title-fold {
            height: 14em;
        }
    }
    /* Style the video: 100% width and height to cover the entire window */
    #pathwaysTitleVideo {
        position: absolute;
        top: 0;
        width: 150%;
    }
    /* Add some content at the bottom of the video/page */
    .pathways-title-fold .title-content {
        position: absolute;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(241, 241, 241, 1);
        width: 100%;
        height: 100%;
        padding: 20px;
        text-align: center;
    }
    .pathways-title-fold img {
        width: 80%;
        margin: 1em;
    }
    .pathways-title-fold p {
        color: rgba(241, 241, 241, 1);
        font-size: 26px;
    }
    @media (max-width: 550px) {
        .pathways-title-fold p {
            font-size: 20px;
        }
    }

    /*Pathways page basic fold*/
    .pathways-page-folds {
        background-size: cover;
        padding: 1rem;
    }
    .pathways-page-folds p {
        color: rgba(241, 241, 241, 1);
    }
    /*Pathways Issues fold background*/
    .issues-fold {
        margin-top: -1rem;
        background-color: darkred;
        background-image: url(../images/bg/pathways-issue-fold-bg.jpg);
    }
    /*Pathways Video fold background*/
    .video-fold {
        margin-top: 2rem;
        background-color: darkblue;
        background-image: url(../images/bg/pathways-video-fold-bg.jpg);
    }
    /*H3 Header for basic folds*/
    .pathways-page-folds h3 {
        display: inline-block;
        color: rgba(241, 241, 241, 1);
        background: rgb(0,0,0);
        background: -moz-radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 95%, rgba(0,0,0,0) 100%);
        background: -webkit-radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 95%, rgba(0,0,0,0) 100%);
        background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 95%, rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
        margin: 2rem 0.5rem 0 0.9rem;
        padding: 0.5rem 0.5rem;
    }

    /*Pathways Issues Fold Display Area*/
    .pathways-issue-display-container {
        background-color: rgba(0, 0, 0, 0.5);
        margin: 1rem;
        padding-bottom: 1rem;
        transition: flex 0.2s;
    }
    h4.pathways-issue-title {
        color: rgba(241, 241, 241, 1);
        font-size: 2.2rem;
    }
    /*Pathways cover image in display area*/
    .pathways-display-cover {
        display: inline-block;
        width: 90%;
        margin: 1.6rem 5% 1rem 5%;
        text-align: center;
    }
    .pathways-display-cover-img {
        width: 100%;
        box-shadow: 2px 2px 7px rgba(200, 200, 200, 0.6);
    }
    .pathways-display-cover p {
        margin-top: 1rem;
        font-weight: bold;
    }
    /*Transition animation for display area*/
    .pathways-display-slide-in {
        animation: pathways-display-slide-in 0.5s ease-out;
    }
    @keyframes pathways-display-slide-in {
        0% {
            opacity: 0;
            transform: translateY(-600px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /*Selector for pathways display area*/
    .pathways-selector {
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
    }
    @media (max-width: 550px) {
        .pathways-selector {
            justify-content: space-between;
        }
    }
    .pathways-selector-videos {
        justify-content: space-evenly;
    }
    .pathways-selector li {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 0;
        margin: 1rem;
        width: 12rem;
    }
    @media (max-width: 550px) {
        .pathways-selector li {
            width: 8rem;
            margin: 1rem 0.5rem;
        }
    }
    .pathways-selector li.pathways-video-item {
        width: 20rem;
    }
    .pathways-selector li a {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        text-align: center;
        padding: 1rem;
        margin: 0;
        width: 100%;
        height: 100%;
        transition: all 0.2s;
    }
    @media (max-width: 550px) {
        .pathways-selector li a {
            display: block;
            padding: 0.25rem;
        }
        .pathways-selector li a p{
            font-size: 0.6rem;
            line-height: 1.3;
            padding-top: 0.2rem;
        }
    }
    .pathways-selector li a:hover {
        text-decoration: none;
    }
    .pathways-selector li:hover {
        color: #154e88;
        background-color: rgba(241, 241, 255, 0.95);
        transition: all 0.2s;
    }
    .pathways-selector li a.active,   
    .pathways-selector li a.active:hover {
        background-color: rgba(241, 241, 255, 0.95);
        color: #154e88;
        transition: all 0.2s;
    }
    .pathways-selector li a.active h4,
    .pathways-selector li a.active p,
    .pathways-selector li:hover h4,
    .pathways-selector li:hover p {
        color: #154e88;
    }
    .pathways-selector li:hover h4 img {
        background-color: transparent;
        border-radius:5px;
        padding: 1px;
    }
    .pathways-selector li:hover h4 img:not(:hover),
    .pathways-selector li:hover h4 img {
        background-color: rgba(21, 78, 136, 0.8);
    }
    .pathways-selector li h4 {
        font-size: 1.3rem;
        line-height: 1.7rem;
        margin: 0.25rem;
        color: rgba(241, 241, 241, 1);
        text-align: center;
        font-weight: 600;
    }
    @media (max-width: 550px){
        .pathways-selector li h4 {
            font-size: 0.8rem;
            line-height: 1.3;
            padding-top: 0.4rem;
        }
    }
    .pathways-selector p {
        color: rgba(241, 241, 241, 1);
    }
    .pahtways-selector-img {
        width: 100%;
        margin: 0;
        box-shadow: 2px 2px 7px rgba(200, 200, 200, 0.6);
    }

    /*Buttons for issue content*/
    .pathways-btn {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        border: 2px solid rgba(241, 241, 241, 1);
        width: 100%;
        padding: 0.5rem 0.25rem;
        margin: 0.5rem 0.5rem 0.5rem 0;
        font-size: 16px;
        line-height: 1.3;
        font-weight: bold;
        white-space: normal;
        background-color: transparent;
        color: rgba(241, 241, 241, 1);
        cursor: pointer;
    }
    .pathways-btn:hover,
    .pathways-btn:active,
    .pathways-btn:visited:hover,
    .pathways-btn:visited:active {
        color: #154e88;
        background-color: rgba(241, 241, 255, 0.95);
        border: 2px solid rgba(241, 241, 241, 1);
        text-decoration: none;
    }
    .pathways-btn:visited {
        color: rgba(241, 241, 241, 1);
    }
    .pathways-btn .pathways-btn-img {
        background-color: rgba(241, 241, 255, 0.95);
        width: 4rem;
        padding: 0.25rem;
        border-radius: 1rem;
    }
    @media (max-width: 550px){
        .pathways-btn .pathways-btn-img {
            width: 3rem;
        }
    }

    .pathways-btn span:not(.exit-disclaimer) {
        width: 9rem;
        margin: 0.25rem 0.25rem 0.25rem 1em;
    }
    .pathways-btn span:not(.exit-disclaimer) img {
        background-color: transparent;
        border-radius:5px;
        padding: 1px;
    }

    .pathways-btn:hover span:not(.exit-disclaimer) img:not(:hover),
    .pathways-btn span:not(.exit-disclaimer) img:hover {
        background-color: rgba(21, 78, 136, 0.8);
    }

    /*Pathways video fold*/
    .pathways-video-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: stretch;
        color: rgba(241, 241, 241, 1);
    } /*END PATHWAYS LANDING PAGE*/