/*---------------------+
 | Site: Burns Institute Data  |
 | Part: Master styles |
 +---------------------*/

/* Imports
=====================================================================*/
@import url(//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
@import url(//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap);
@import url(/styles/avenir-next.css);
@import url(/styles/dinpro.css);
@import url(/styles/fontawesome.css);
@import url(/styles/reset.css);


/* Fonts
======================================================================*/
body { font-family: "Lato", Arial, sans-serif; }
.action, h1, #nav { font-family: "Avenir Next", Arial, sans-serif; }


/* Basics
======================================================================*/
:root {
    --action: #ea404b;
    --branding-dark: #415360;
    --link: #21b1b1;
}

a { transition: all 0.1s ease-in-out; }
a, a:hover, a:active { color: var(--link); }
body { line-height: 1.4; }
cite, em { font-style: italic; }
dl, ol, p, table, ul { margin-bottom: 1em; }
html { font-size: 18px; }
img { max-width: 100%; }
h1 { font-size: 2.5rem; font-weight: 900; line-height: 1; margin: 0 0 0.5em; }
h2 { font-size: 1.88rem; font-weight: 500; margin-bottom: 0.5em; }
li { margin-bottom: 0.5em; }
ol { list-style: decimal; margin-left: 2em; }
strong { font-weight: bold; }
ul { list-style: disc; margin-left: 1.5em; }

/* Core layout
======================================================================*/
.clear { clear: both; }
.content { margin: 0 auto; max-width: 1200px; padding: 3vw 20px; }
.content-narrow { margin: 0 auto; max-width: 826px; padding: 4vw 20px; }
.content + .content-narrow, .content-narrow + .content { padding-top: 0; }


/* Content
======================================================================*/
/* Buttons */
.btn { border-radius: 5px !important; font-weight: bold; padding: 0.5rem 1rem; transition: all 0.15s ease-in-out; }

.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .btn-primary:hover {
    background: var(--action) !important;
    border: 0;
    color: #fff;
}

.btn-primary:hover { opacity: 0.7; }

.btn-secondary, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:active:focus {
    background: #fff !important;
    border: 1px solid var(--action);
    color: var(--action);
}

.btn-secondary:hover { background: #f0f0f0 !important; color: #000; }
.btn-secondary.active { background: #f2f2f2 !important; box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2); color: #000 !important; }
.btn-toolbar { margin-bottom: 1rem; }

/* Dropdowns */
.dropdown-menu { max-height: 300px; overflow-y: auto; }

/* Footer */
#footer { background: #f7f7f7; font-size: 0.7rem; }
#footer .content { display: flex; justify-content: space-between; }

/* Header */
#header { background: var(--branding-dark); padding: 0 20px; }
#header a { color: #fff; }
#header .content { align-items: center; display: flex; justify-content: space-between; padding: 18px 0 13px; }
#logo { width: 417px; }

    /* Menu */
    #menu {
        background: var(--branding-dark);
        height: 100%;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: all 0.1s ease-in-out;
        width: 300px;
    }
    
    #menu, #menu a { color: #fff; }
    #menu a { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 1em; }
    #menu a:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }
    #menu li { margin: 0; }
    #menu ul { list-style: none; margin: 0; }
    .menu-open #menu { opacity: 1; transform: translateX(0); }
    
    /* Navigation */
    #nav { font-weight: bold; text-align: right; }
    #nav a:hover { opacity: 0.7; text-decoration: none; }
    #nav li { display: inline-block; margin-left: 1em; }
    #nav ul { list-style: none; margin: 0; }

/* Hero */
.hero {
    background: url(/images/hero.jpg) 50% 50% no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgba(65, 83, 96, 0.6);
}

.hero, .hero a, .hero h1 { color: #fff; }
.hero-overlay { padding: 0 20px; }
.hero-overlay .content { padding: 9.5vh 0 4vh 0; }

/* Intro */
.intro { color: #666; font-size: 1.38rem; }

/* Projects */
.project { flex: 0 0 auto; width: 48%; }
.project-list { display: flex; justify-content: space-between; }
.project-thumb { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); display: block; margin-bottom: 10px; }
.project-thumb:hover { opacity: 0.7; }
.project-thumb img { display: block; }

/* Widths
=====================================================================*/
@media screen and (max-width: 950px) {
    /* Basics */
    h1 { font-size: 2.5rem; }
    
    /* Content */
        /* Header */
        #logo { width: 200px; }
        
        /* Hero */
        .hero-overlay .content { padding-right: 0; }
}

@media screen and (max-width: 700px) {
    /* Basics */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    
    /* Content */
        /* Buttons */
        .btn, .btn-group { display: block; margin-bottom: 0.5em; text-align: center; width: 100%; }
        
        /* Footer */
        #footer .content { display: block; text-align: center; }
        
        /* Header */
        #nav { display: none; }
        
        /* Intro */
        .intro { font-size: 1.15rem; }
        
        /* Projects */
        .project { width: auto; }
        .project-list { display: block; }
}