/*----------------------------------------------+
 | Site: American Society of Retina Specialists |
 | Part: Patients styles                        |
 +----------------------------------------------*/

/* Imports
=====================================================================*/
@import url(//fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,700,700i,800,800i&display=swap);


/* Fonts
======================================================================*/
body, .fas-search .search-button, input, select, textarea { font-family: "Montserrat", Arial, sans-serif; }


/* Basics
======================================================================*/
:root {
    /* Colors */
    --blue: #578ad6;
    --blue-dark: #1a4280;
    --blue-vibrant: #0045aa;
    --burgundy: #87354f;
    --deep-aqua: #5f96b2;
    --green: #66bf6b;
    --green-light: rgba(102, 191, 107, 0.8);
    --navy: rgba(26, 66, 128, 0.8);
    --orange: #f89728;
    --periwinkle: rgba(0, 69, 170, 0.5);
    --periwinkle-light: rgba(0, 69, 170, 0.25);
    --periwinkle-lightest: rgba(0, 69, 170, 0.1);
    --purple: #4b3176;
    --teal: #6dbbcf;
    --teal-light: rgba(109, 187, 207, 0.4);
    --teal-lightest: rgba(109, 187, 207, 0.1);
    
    /* Dimensions */
    --gutter: 40px;
    --pad: 20px;
    --vpad: 2.5vmin;
}

a { color: var(--purple); transition: all 0.1s ease-in-out; }
body { background: #fff; font-size: 1.2rem; line-height: 1.5; padding: 0; }
h2 { color: var(--blue); font-size: 1.5rem; font-weight: 500; }
h3 { font-size: 1.3rem; font-weight: bold; margin: 2em 0 0.7em; }
hr { background: var(--periwinkle); color: var(--periwinkle); margin: var(--vpad) 0; opacity: 0.75; }
html { font-size: 18px; }
main { display: block; padding: var(--vpad) var(--pad); }
section { padding: var(--vpad); var(--pad); }

/* Core layout
======================================================================*/
.content, .content-primary-secondary { margin: 0 auto; max-width: 1200px; overflow: hidden; }
.custom main { padding: 0; }
.custom .content-primary-secondary { display: block; }


/* Content
======================================================================*/

/* Acronym */
.acronym { padding-left: 2rem; }
.acronym strong { color: var(--teal); font-size: 1.8rem; margin-right: 0.05em; }

/* Articles */
.article h2 { color: var(--blue); font-weight: 700; }

/* Buttons */
.action {
    background: none;
    border: 1px solid var(--blue);
    border-radius: 1em;
    color: var(--blue-dark);
    font-weight: 500;
    padding: 0.5em 1.5em;
}

.action:hover { background: var(--blue-dark); color: #fff; text-decoration: none; }

.action-donate-foundation {
    background: var(--green);
    border: 0;
    border-radius: 0.6em;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.action-donate-foundation:hover { background: var(--green); opacity: 0.7; }

.btn { font-size: 1.1rem; padding: 0.4em 1em; text-transform: none; }

/* Colors */
    /* Backgrounds */
    .bg-green { background: var(--green-light); }
    .bg-periwinkle { background: var(--periwinkle-lightest); }
    .bg-purple { background: var(--purple); }
    .bg-teal { background: var(--teal-lightest); }
    
    /* Text */
    .color-green { color: var(--green); }
    .color-periwinkle { color: var(--periwinkle); }
    .color-purple { color: var(--purple); }
    .color-teal { color: var(--teal); }

/* Conditions */
.condition-feature a {
    display: grid;
    color: #000;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 2em;
}

.condition-feature a:hover { opacity: 0.7; text-decoration: none; }
.condition-feature-summary { align-self: center; grid-column: 2 / span 2; }
.condition-feature-summary .more { color: var(--blue-dark); }
.condition-feature-thumb { align-self: center; margin: 0; }
.condition-feature-thumb figcaption { background: #444; color: #fff; font-size: 1.5rem; font-weight: 500; padding: 0.5em; text-align: right; }
.condition-feature-thumb figcaption p { margin: 0; }
.condition-feature-thumb img { display: block; width: 100%; }

/* Custom bullets */
.custom-bullets { list-style: none; margin-left: 0; }
.custom-bullets li { padding-left: 1.9em; position: relative; }
.custom-bullets .fa { font-size: 1.5rem; left: 0; position: absolute; top: 0.05rem; }

/* Feature */
.feature { display: block; margin: 0; padding: 0; position: relative; }

.feature:after {
    background: var(--purple);
    content: " ";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: calc((100% - 1200px) / 2);
}

.feature-content {
    background: var(--purple);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    justify-content: center;
    min-height: 400px;
    padding: 1em 1em 1em 0;
    position: relative;
    width: 31%;
}

.feature-content h2 { color: #fff; font-size: 2.1rem; font-weight: bold; }
.feature-content .more { color: #fff; }

.feature-media {
    height: 100%;
    left: 0;
    padding-left: calc(((100% - 1200px) / 2) + (1200px * 0.3));
    position: absolute;
    top: 0;
    width: 100%;
}

.feature-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
}

/* Feature grid */
.feature-grid {
    list-style: none;
    display: grid;
    column-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin: 3rem 0;
    row-gap: 3rem;
}

.feature-grid a, .feature-grid figure, .feature-grid li { display: flex; flex: 1 1 auto; flex-direction: column; }
.feature-grid a { flex: 1 1 auto; }
.feature-grid a:hover { text-decoration: none; opacity: 0.7; }

.feature-grid .condition-feature-thumb figcaption {
    flex: 1 1 auto;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
    min-height: 5rem;
    padding: 0.5em 1em;
    text-align: left;
}

.feature-grid figure { width: 100%; }
.feature-grid img { width: 100%; }

/* Find a retina specialist */
.fas-header { color: var(--blue); font-size: 2rem; font-weight: normal; margin-top: 1.5em; margin-bottom: .5em; }
.fas-header-part { display: inline-block; font-size: 1em; margin: 0 0.7em 0 0; white-space: nowrap; }
.fas-search { display: grid; grid-gap: var(--gutter); grid-template-columns: 1fr 2fr; }
.fas-search-form { align-self: center; font-size: 1.2rem; }
.fas-search .search-button { background: var(--blue-dark); color: #fff; font-weight: bold; padding: 0.7em 1.5em; text-transform: uppercase; }
.fas-search-label { align-self: center; color: var(--blue-dark); font-size: 1.5rem; font-weight: 500; line-height: 1.2; text-align: right; }
.fas-search-label strong { font-weight: 800; text-transform: uppercase; }
.fas-search-label strong:after { content: " "; display: block; }

/* Footer */
#credit { margin-top: 1em; }
#credit a strong { color: var(--blue); }
#copyright { opacity: 1; }
#footer { background: none; border-top: 1px solid #ddd; color: #000; padding: 0; }
#footer .content { padding: 3em 35px; }
#footer a { color: var(--blue); }
.footer-about { color: var(--blue-dark); font-weight: 500; margin-block: 2rem; }
#footer-nav-secondary { border-bottom: 1px solid rgba(0, 0, 0, 0.2); opacity: 1; }
#footer-social { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
#footer-social .fa { color: color: var(--blue); }
.support { color: var(--blue-dark); font-weight: 500; margin-bottom: 2rem; }

    /* Foundation promo */
    .foundation-promo { background: var(--green-light); text-align: left; }
    .foundation-promo .content { align-items: center; display: flex; justify-content: space-between; }
    .foundation-promo-action { flex: 0 0 auto; }
    .foundation-promo-logo { width: 30%; }
    .foundation-promo-logo img { display: block; }
    
    .foundation-promo-tagline {
        border-left: 2px solid #fff;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 900;
        line-height: 1.1;
        margin: 0 1rem;
        padding: 0.1rem 0 0.1rem 1.5rem;
    }

/* Header */
#header { background: #fff; padding: 0; position: sticky; top: 0; z-index: 10; }
#header .content { display: flex; flex-wrap: wrap; justify-content: space-between; }
#header-nav { margin: 0; width: 100%; }
#header-nav li:last-child { border: 0; padding: 0; }
.header-primary { padding: 1rem var(--pad); }
.header-secondary { padding: 20px var(--pad) 0; }
#logo-patients { color: #0045aa; font-size: 0.8rem; }
#social-search li { margin-bottom: 0; }
#site-search .hidden { display: none; }

/* Heroes */
.hero { display: block; margin: 0; padding: 0; position: relative; }

.hero:after {
    background: #fff;
    content: " ";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: calc((100% - 1200px) / 2);
}

.hero-content {
    background: linear-gradient(90deg, rgba(255,255,255,1) 12%, rgba(255,255,255,0) 60%);
    display: flex;
    flex-direction: column;
    font-size: 1.7rem;
    justify-content: center;
    min-height: 400px;
    padding: 3em 60% 3em 0;
    position: relative;
}

.hero-content h1 { color: var(--blue-dark); font-size: 1.9rem; font-weight: bold; letter-spacing: 0.01em; text-transform: uppercase; }

.hero-media {
    height: 100%;
    left: 0;
    padding-left: calc(((100% - 1200px) / 2) + 12%);
    position: absolute;
    top: 0;
    width: 100%;
}

.hero-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%;
    width: 100%;
}

    /* Sub heroes */
    .subhero { display: block; margin: 0; padding: 0; position: relative; }
    .subhero .content { align-items: flex-end; display: flex; position: relative; }
    
    .subhero:after {
        background: #777;
        content: " ";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: calc((100% - 1200px) / 2);
    }
    
    .subhero-content {
        background: var(--purple);
        color: #fff;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        font-size: 2.6rem;
        justify-content: center;
        line-height: 1.15;
        min-height: 400px;
        padding: 1em 1em 1em 0;
        position: relative;
        width: 50%;
    }
    
    .subhero-content h1 { color: #fff; font-size: 3.1rem; font-weight: bold; line-height: 1.05; margin-bottom: 0.2em; }
    .subhero-content p { margin: 0; }
    
    .subhero-media {
        height: 100%;
        left: 0;
        padding-left: calc(((100% - 1200px) / 2) + (1200px * 0.5));
        position: absolute;
        top: 0;
        width: 100%;
    }
    
    .subhero-media img {
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0;
        width: 100%;
    }
    
    .subhero.bg-burgundy:after, .subhero.bg-burgundy .subhero-content { background: var(--burgundy); }
    .subhero.bg-green:after, .subhero.bg-green .subhero-content { background: var(--green-light); }
    .subhero.bg-periwinkle:after, .subhero.bg-periwinkle .subhero-content { background: var(--periwinkle); }
    .subhero.bg-purple:after, .subhero.bg-purple .subhero-content { background: var(--purple); }
    .subhero.bg-teal:after, .subhero.bg-teal .subhero-content { background: var(--teal); }

/* Intro */
.intro { font-size: 1.66rem; }
p.intro { margin-bottom: 0.5em; }

/* More links */
.more { font-weight: 500; text-transform: uppercase; }

/* Navigation */
#nav { border-radius: 0; margin: 0; font-size: 0.94rem; }
#nav .content { overflow: visible; }
#nav .content > ul { display: flex; }
#nav .content > ul { display: flex; list-style: none; margin: 0; }
#nav .content > ul > li { display: flex; margin: 0; position: relative; }
#nav .content > ul > li > a { display: block; padding: 0.6em 0.7em; }
#nav .content > ul > li:hover > a { background: rgba(255, 255, 255, 0.1); }
#nav .content > ul > li:hover ul { left: 0; z-index: 1000; }

/* Onset age ranges */
.onset { font-size: 1.7em; line-height: 1; }

/* Retina Health Series */
.rhs a, .rhs .highlight h2 { color: var(--periwinkle); }
.rhs .highlight { background: rgba(0, 172, 240, 0.10); border: 0; box-shadow: none; }
.rhs .highlight h2 { border: 0; margin-top: 0; }

/* Header */
.rhs-header {
    align-items: center;
    border-bottom: 2px solid #ccc;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.rhs-header-primary { flex: 0 0 auto; width: 60%; }
.rhs-header-secondary { flex: 0 0 auto; text-align: right; width: 37%; }
.rhs-logo img { width: 80%; }

.rhs-tagline {
    color: var(--green);
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 1em;
    opacity: 0.8;
}

.rhs-title { color: var(--green); font-size: 2.6rem; font-weight: 500; line-height: 1; text-transform: uppercase; }
.rhs-subtitle { font-size: 1.3rem; margin-bottom: 0.7em; opacity: 0.8; }

/* Section decorations */
    /* Outlined */
    .section-outlined { border: 3px solid var(--teal); border-radius: 0 2rem 0 2rem; margin-bottom: 2em; }
    .section-outlined-body, .section-outlined-head { overflow: hidden; padding: 1rem 2rem; }
    .section-outlined-head { border-bottom: 3px solid var(--teal); }
    .section-outlined-head h2 { margin: 0; }
    
    /* Triangles */
    [class *= "section-triangle"] { margin-bottom: 4vmin; position: relative; }
    
    [class *= "section-triangle"]:after {
        border-color: transparent;
        border-style: solid;
        border-width: 0 0 2.7rem 0;
        bottom: 0;
        content: "";
        height: 0;
        position: absolute;
        transform: translateY(100%);
        width: 0;
    }
    
    .section-triangle-left:after {
        border-left-color: #ddd;
        border-left-width: 95vw;
        left: 0;
    }
    
    .section-triangle-right:after {
        border-right-color: #ddd;
        border-right-width: 95vw;
        right: 0;
    }
    
    .section-triangle-left.bg-periwinkle:after { border-left-color: var(--periwinkle-light); }
    .section-triangle-left.bg-teal:after { border-left-color: var(--teal-light); }
    .section-triangle-right.bg-periwinkle:after { border-right-color: var(--periwinkle-light); }
    .section-triangle-right.bg-teal:after { border-right-color: var(--teal-light); }

/* Stats */
.stats-section { background: var(--periwinkle); color: #fff; padding-bottom: 0; }
.stats-section h2 { color: #fff; }
.stats-section li { margin: 0; padding: 0 var(--gutter) 4vmin; position: relative; }
.stats-section li:after { background: #fff; content: " "; height: 100%; left: 0; position: absolute; top: 0; width: 1px; }
.stats-section li:first-child:after { display: none; }
.stats-section strong { display: block; font-size: 3rem; line-height: 1.1; }

.stats-section ul {
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(3, calc(100% / 3));
    font-size: 1.2rem;
    list-style: none;
    margin: 0 calc(var(--gutter) * -1);
}

/* Symptoms */
.symptoms {
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
}

.symptoms-icon { border: 5px solid var(--teal); border-radius: 100%; flex: 0 0 auto; margin-left: 1rem; width: 100px; }
.symptoms li { align-items: center; display: flex; flex-direction: row-reverse; margin: 0; padding-right: 30%; }
.symptoms-title { font-size: 1.2rem; text-align: right; }


/* Widths
=====================================================================*/
@media screen and (max-width: 970px) {
    /* Basics */
    :root { --vpad: 2.5vmax; }
    html { font-size: 16px; }
    
    /* Content */
        /* Feature */
        .feature-content { min-height: 0; padding: 1em var(--pad) 1px; width: auto; }
        .feature-media { height: 40vmax; padding: 0; position: static; }
        
        /* Find a retina specialist */
        .fas-header-part { display: block; margin: 0; }
        .fas-search { display: block; }
        .fas-search-form { font-size: 1.1rem; }
        .fas-search-label { margin-bottom: 0.5em; text-align: left; }
        .fas-search-label strong:after { display: none; }
        
        /* Foundation promo */
        .foundation-promo .content { display: block; text-align: center; }
        .foundation-promo-logo { margin: 0 auto; width: 50%; }
        .foundation-promo-tagline { border: 0; margin: 1rem 0; padding: 0; }
        
        /* Header */
        #header { margin: 0; }
        .header-secondary { display: none; }
        #nav-toggle { float: none; position: absolute; right: 1rem; top: 1rem; }
        
        /* Hero */
        .hero { border-bottom: 1px solid #ddd; }
        .hero-content { min-height: 0; padding: 1em var(--pad) 1px; }
        .hero-media { height: 40vmax; position: static; }
        
            /* Subhero */
            .subhero .content { display: block; }
            .subhero-content { font-size: 1.8rem; min-height: 0; padding: 1em var(--pad); width: auto; }
            .subhero-content h1 { font-size: 2rem; }
            .subhero-media { height: 40vmax; padding: 0; position: static; }
        
        /* Intro */
        .intro { font-size: 1.6rem; }
        
        /* Section decorations */
            /* Outlined */
            .section-outlined-body, .section-outlined-head { padding: 1rem; }
            
            /* Triangles */
            [class *= "section-triangle"]:after { border-bottom-width: 1.2rem; }
        
        /* Stats */
        .stats-section li { border-top: 1px solid #fff; padding: 15px; }
        .stats-section li:after { display: none; }
        .stats-section ul { display: block; margin: 0; }
        
        /* Symptoms */
        .symptoms { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 700px) {
    /* Basics */
    :root { --pad: 15px; }
    
    /* Content */
        /* Callouts */
        [class *= "call"] { float: none; margin: 0 0 1em !important; width: 100% !important; }
        
        /* Conditions */
        .condition-feature a { display: block; }
        .condition-feature figure { margin-bottom: 1em; }
        
        /* Header */
        #logo img { height: 25px; }
        
        /* Retina Health Series */
        .rhs-header { display: block; }
        .rhs-header-primary { margin-bottom: 1rem; }
        .rhs-header-primary, .rhs-header-secondary { width: auto; }
        .rhs-header-secondary { text-align: left; }
        .rhs-logo img { width: 70%; }
        .rhs-title { font-size: 1.5rem; }
        .rhs-subtitle { font-size: 1rem; }
        
        /* Symptoms */
        .symptoms { display: block; }
        .symptoms-icon { margin: 0 1em 0 0; }
        .symptoms li { flex-direction: row; margin-bottom: 1em; padding: 0; }
        .symptoms-title { text-align: left; }
}