/*Fonts: Bases
-------------------------------------------------- */
p,
.card-title,
.card-body,
ul,
ol,
.btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}


h1 {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}


h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
}

.h2-serif {
    padding-top: 1rem;
    font-family: 'EB Garamond', serif !important;
    font-size: 1.9rem;
}

.hr-after-h2{
    margin-top: 10px;
    margin-bottom: 1.5rem;
    border-width: 2px;
    border-color: lightgray;
}

/* to be used to add a break between paragraphs, as before a conclusion paragraph */
.hr-inline{
    margin-top: 3rem;
    margin-bottom: 3rem;
    border-width: 2px;
    width: 200px;
    border-color: lightgray;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: .25rem;
    text-transform: uppercase;
}

strong {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
}

.serif-huge {
    padding-top: 1rem;
    font-family: 'EB Garamond', serif !important;
    font-size: 3rem;
}

blockquote {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    opacity: .6;
    padding-left: 2rem;
    border-left: 2px solid;
    border-color: rgb(177, 177, 177);
}

/* Fonts: Colors
--------------------------------------------------*/
.font-color-dark {
    color: rgb(233, 245, 255);
    opacity: .85;
}

.hr-color-dark{
    border-color: rgb(233, 245, 255);
    opacity: .85;
}

.font-color-dark-secondary {
    color: rgb(233, 245, 255);
    opacity: .92;
}

.font-color-mediumdark {
    color: rgb(233, 245, 255);
}

.font-color-brightblue{
    color: rgb(42, 108, 146);
}

.font-color-darkblue{
    color: rgb(31, 41, 101);
}


/*Fonts: Special styles
--------------------------------------------------*/
.p-detail {
    opacity: .6;
    padding-left: 1rem;
    border-left: 2px solid rgb(179, 179, 179);
}

.p-huge {
    font-size: 1.8rem; 
    font-weight: 500;
}

.border-right{
    border-right: 1px solid lightgray;
}


/*Reduces spacing between secondary header and primary header*/
.secondary-header-large-above {
    margin-top: .5rem;
}

.p-header-above {
    padding-top: 0rem;
}

.secondary-header-large {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 0rem;
    margin-top: 1rem;
    text-transform: uppercase;
}

.p-header {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
}


/*Using when there is a secondary heading immediately before H2*/
.h-translucent {
    opacity: 0.6;
}


.list-detail {
    opacity: .5;
    border-left: 1px solid;
}

.list-detail-p {
    margin-left: -1.5rem;
    margin-bottom: 0rem;
}


/* For list of paragraph-length text, as in a footnotes section */
.long-list li {
    padding-bottom: 1rem;
}


/* for captions that are as wide as the body text above and below them */
.figcaption-inline {
    text-align: center;
    padding: 0 5vw 0 5vw;
}


.landing-page-heading-h1 {
    font-size: 2.8rem;
}

.landing-page-heading-h2 {
    font-size: 1.2rem;
    padding-top: .5rem;
    font-weight: 300;
    line-height: 1.5rem;
}

.a-page-breadcrumb {
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    margin-bottom: 1rem;
    text-decoration: none;
    color: rgb(0, 0, 0);
    opacity: .5;
}

.a-page-breadcrumb-dark {
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    margin-bottom: 1rem;
    text-decoration: none;
    color: rgb(217, 227, 235);
    opacity: .5;
}

.a-page-breadcrumb:hover,
.a-page-breadcrumb:focus,
.a-page-breadcrumb-dark:hover,
.a-page-breadcrumb-dark:focus {
    text-decoration: none;
    color: rgb(122, 133, 143);
    opacity: .85;
}


/*links in text*/
.a-dark {
    text-decoration: none;
    color: rgb(108, 201, 255);
}

.a-dark:hover,
.a-dark:focus {
    text-decoration: none;
    color: rgb(36, 175, 255);
}

.a-dark-detail {
    text-decoration: none;
    color: rgb(145, 215, 255);
}

.a-dark-detail:hover,
.a-dark-detail:focus {
    text-decoration: none;
    color: rgb(82, 192, 255);
}

/*links in text*/
.link-no-href {
    text-decoration: none;
    color: #287CFF !important;
}

.link-no-href:hover,
.link-no-href:focus {
    text-decoration: none;
    color: #1E62CB !important;
}

/*links that navigate between pages in areas like sidebar and footer, that appear on dark backgrounds*/
.a-navigation-dark {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: rgb(219, 230, 240);
}

.social-icon-block .a-navigation-dark {
    opacity: 0.85;
}

.a-navigation-dark:hover,
.a-navigation-dark:focus,
.a-navigation-dark:active {
    text-decoration: none;
    color: rgb(255, 255, 255);
}

/*links that navigate between pages in areas like sidebar and footer, that appear on dark backgrounds*/
.a-navigation-dark-small {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: #6B7B85;
    font-size: .9rem !important;
}

.a-navigation-dark-small:hover,
.a-navigation-dark-small:focus,
.a-navigation-dark-small:active {
    text-decoration: none;
    color: rgb(161, 170, 177);
}

/*Social icons*/
.social-icon-block {
    font-size: 1.7rem;
}

/* containers
-------------------------------------------------- */
.container-body {
    padding-top: 2rem;
}

.container-dark {
    background-color: #090E35;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
}

.container-light-secondary {
    background-color: rgb(245, 245, 245);
    padding: 1.5rem;
    border-radius: 4px;
}

.container-darkest {
    background-color: rgb(1, 4, 28);
}

.container-darkest-gradient {
    background: rgb(1, 4, 28);
    background: linear-gradient(180deg, rgb(1, 4, 28) 30%, rgb(6, 13, 58) 100%);
}

.landing-page-heading-container {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 6rem;
}

.page-heading-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page-heading-container-hero {
    padding-top: 2rem;
    padding-bottom: 15rem;
}

.no-text-decoration {
    text-decoration: none !important;
}

.container-video-modal-background {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: rgb(223, 237, 240);
}


/*Hero image
--------------------------------------------------*/
.bg-hero-gradient {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0.6) 100%),
    url("media/hero_spacetime_branches.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgb(0, 112, 177);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.bg-hero-papers-card {
    background-color: #f3fbff;
}

.bg-hero-jobs-card {
    background-color: rgb(0, 99, 186);    
}

.bg-hero-theorysummary-card-smscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 0) 0%, rgba(1, 4, 28, 0) 100%),
    url("media/page-summary_hero-card-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgb(0, 112, 177);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-theorysummary-card-lgscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 0) 0%, rgba(1, 4, 28, 0) 100%),
    url("media/page-summary_hero-card-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgb(0, 112, 177);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-pauli-smscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 80%),
    url("media/page-pauli_hero-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-pauli-lgscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 90%),
    url("media/page-pauli_hero-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-blackholes-smscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 70%),
    url("media/page-blackhole_hero-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-blackholes-lgscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 40%),
    url("media/page-blackhole_hero-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-superfluid-smscreen {
    /* image and gradient */
    background-image: url("media/page-superfluid_hero-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-superfluid-lgscreen {
    /* image and gradient */
    background-image: url("media/page-superfluid_hero-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-cat-smscreen {
    /* image and gradient */
    background-image: url("media/page-cat_hero-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-cat-lgscreen {
    /* image and gradient */
    background-image: url("media/page-cat_hero-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-visualizing-smscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 20%),
    url("media/page-visualizing_hero-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-visualizing-lgscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 20%),
    url("media/page-visualizing_hero-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-origins-smscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 0%),
    url("media/page-origins_hero-smscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-hero-origins-lgscreen {
    /* image and gradient */
    background-image: linear-gradient(to bottom, rgba(1, 4, 28, 1) 0%, rgba(1, 4, 28, 0) 0%),
    url("media/page-origins_hero-lgscreen.png");
    
    /* display a color similar to the image while browser is loading image */
    background-color: rgba(1, 4, 28, 1);
    
    /* Full height */
    height: 100%;
    
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*card
-------------------------------------------------- */

.card-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}

.card-overlay {
    background: rgb(1, 4, 28, 0.5);
}

.card-margin {
    margin-bottom: 2rem;
}

a.card-link,
a.card-link:hover {
    color: inherit;
}

.card-no-border {
    border: none;
}

.card-body-no-border {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.5rem;
}

/*make cards of equal height within a row*/
.row.equal-height {
    display: flex;
    flex-wrap: wrap;
}
.row.equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.equal-height .card {
    flex: 1;
}

/*make cards of equal height within a column*/
.col.equal-height {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.equal-height .card {
    flex: 1;
}



/*Accordion
-------------------------------------------------- */
.accordion-caret:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f068";
    float: left;
    margin-right: 1rem;
    color: gray;
}

.accordion-caret.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067";
}

.accordion-card-header-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: .5rem;
    padding-left: .5rem;
}

.accordion div.card:only-child { 
    border-bottom: 1px solid rgba(0, 0, 0, 0.125); 
    border-radius: calc(0.25rem - 1px); 
}

.accordion .card-header, .accordion-cards .card-header {
    background-color: white;
    border-bottom-color: whitesmoke;
}



/*images
-------------------------------------------------- */
.image-col {
    padding-bottom: 1rem;
}

.image-inline {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.max-width-160 {
    max-width: 160px;
    width: 100%;
}

.max-width-350 {
    max-width: 350px;
    width: 100%;
}

.max-width-400 {
    max-width: 400px;
    width: 100%;
}

.max-width-700 {
    max-width: 700px;
    width: 100%;
}

/*playsinline MP4 (looks like gif)
-------------------------------------------------- */
.embed-video-playsinline-intros {
    border-width: 0px;
    max-width: 550px;
}

.embed-video-playsinline {
    border-width: 0px;
}

/*navbar 
-------------------------------------------------- */
/* Extra height for vertical videos. Add onto embed-responsive-1by1  */
.vert-video {
    padding-top: 30%;
}

/*navbar 
-------------------------------------------------- */
.navbar-brand {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 1.5rem;
    width: 140px;
}

.nav-item {
    font-size: .9rem;
    font-weight: 500;
    margin-left: 1rem;
    margin-top: 1rem;
}

.page-navbar-padding {
    margin-top: 60px;
}

.navbar {
    background-color: rgb(1, 4, 28);
    z-index: 100;
    height: 60px;
}



/* sidebar nav drawer & shared sidebar/footer styling --------------- */

#sidebar {
    width: 300px;
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    z-index: 999;
    background: rgb(1, 4, 28);
    transition: all 0.3s;
    overflow-y: scroll;
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 17px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: rgb(217, 227, 235);
    opacity: .85;
}

#sidebarCollapse {
    cursor: pointer;
}

#sidebarCollapse:hover,
#dismiss:hover {
    opacity: 1;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.overlay.active {
    display: block;
    opacity: 1;
}

/*padding specific to sidebar*/
#sidebar .sidebar-header-div {
    padding-top: 1rem;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

#sidebar a.sidebar-header,
#footer a.footer-header {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: rgb(217, 227, 235);
    opacity: .85;
}


#sidebar a.sidebar-header:hover,
#footer a.footer-header:hover {
    opacity: 1;
}

#sidebar ul.components,
#footer ul.components {
    padding: 0px;
}

#sidebar ul li,
#footer ul li {
    margin: 0 !important;
}

/*padding specific to sidebar*/
#sidebar ul p {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2rem;
}

#sidebar ul p,
#footer ul p {
    padding-bottom: .5rem;
    margin: 0 !important;
    text-transform: uppercase;
    font-size: .9rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: rgb(217, 227, 235);
    opacity: .6;
}

/*padding specific to sidebar*/
#sidebar ul li a {
    padding-left: 10px;
    padding-right: 10px;
}

#sidebar ul li a,
#footer ul li a {
    padding-top: .5rem;
    padding-bottom: .5rem;
    display: block;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/*
#sidebar ul li a:hover {
background: rgb(6, 13, 58);
}
*/

#sidebar ul li.active>a {
    background: rgb(22, 31, 90);
    color: rgb(232, 237, 241);
}


#sidebar hr,
#footer hr {
    border-color: rgb(52, 58, 100);
}


/*dims page content when sidebar open*/
#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}

/* same as above but for footer-minimal */
#content-footer-minimal {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}


/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

#content {
    padding-bottom: 366px;
    /* padding bottom by footer height */
}

#content-footer-minimal {
    padding-bottom: 105px;
    /* padding bottom by height of footer-minimal */
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 366px;
    /* Set the fixed height of the footer here */
    /*line-height: 30px;*/
    /* Vertically center the text there */
    background-color: rgb(4, 8, 36);
}

.footer-minimal {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* height: 366px; */
    /* Set the fixed height of the footer here */
    /*line-height: 30px;*/
    /* Vertically center the text there */
    background-color: rgb(4, 8, 36);
}

.footer-top {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
}

.footer-bottom {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    text-align: center;
}

/*Padding anchors so that anchored section appears below the fixed navbar
-------------------------------------------------- */
a.anchor {
    position: relative;
    top: -60px;
    visibility: hidden;
}

/*Modal
-------------------------------------------------- */
.modal-dialog {
    max-width: 900px;
    margin: 80px auto;
}

.modal-body {
    position: relative;
    padding: 0px;
}

.close {
    position: absolute;
    right: 25px;
    top: -40px;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.modal-backdrop {
    opacity: .8 !important;
}

/*Video thumbnail timestamp
-------------------------------------------------- */
.bottom-right {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.btn-timestamp {
    background-color: rgb(1, 4, 28);
    color: rgb(217, 227, 235) !important;
    opacity: 0.85;
}

.btn-video-play {
    border-radius: 1rem;
}



/*Cognito forms styling
-------------------------------------------------- */

/* Set height of multiline textbox */
.el-textarea__inner {
    height: 200px!important;
}