/* slider dots */
.dot {
    width: 12px;
    height: 12px;
    margin: 0px 5px;
    background: #b4ada8;
    border-radius: 20px;
}

dot.active {
    background: #3f3f3f;
}


/* Participants slider logo border */
.members-slider-image-container.current {
    border: 1px solid #b4ada8;
}

/* asides within Blueprint / Guidance */
.blueprint-body h2 {
    font-size: 24px;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* removed blueprint-body selector to reuse dropdown styles */
h2.dropdown-heading {
    font-size: revert;
    margin: revert;
}

.dropdown-toggle.w--open .dropdown-icon {
    transform: rotate(180deg);
} 

.blueprint-body aside h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

.blueprint-body aside:first-child:not(.resource) {
    margin-top: 0!important;
}

/* adding pointer to figures to indicate lightbox */
.blueprint-body figure {
    cursor: pointer;
}

aside {
    margin: 2em 0;
    color: #262626;
    background: #3f3f3f;
    overflow: hidden;
}

aside .aside-heading {
    padding: 24px 32px;
    font-weight: 300;
    color: white;
    font-family: 'Flama', 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1;
}

aside .aside-body {
    padding: 24px 32px 32px;
    background: #e2e2e2;
    font-size: 1rem;
}

aside.navy, aside.cfo-principles {
    background: #1e3250;
}

aside.navy .aside-body, aside.cfo-principles .aside-body {
    background: #aecfe6;
}

aside.teal, aside.insights {
    background: #297d6d;
}

aside.teal .aside-body, aside.insights .aside-body {
    background: #b9d4cf;
}

aside.gold, aside.improvement {
    background: #8b7930;
}

aside.gold .aside-body, aside.improvement .aside-body {
    background: #ccb146;
}

aside.red, aside.papers {
    background: #ec3740;
}

aside.red .aside-body, aside.papers .aside-body {
    background: #f9bdc0;
}

aside.darkgray, aside.resources {
    background: #3f3f3f;
}

aside.darkgray .aside-body, aside.resources .aside-body {
    background: #e2e2e2;
}


/* marked for deletion */
aside .aside-heading.cfo-principles {
    background: #1e3250;
}

aside .aside-body.cfo-principles {
    background: #aecfe6;
}

aside .aside-heading.insights {
    background: #297d6d;
}

aside .aside-body.insights {
    background: #b9d4cf;
}

aside .aside-heading.improvement {
    background: #8b7930;
}

aside .aside-body.improvement {
    background: #ccb146;
}

aside .aside-heading.papers {
    background: #ec3740;
}

aside .aside-body.papers {
    background: #f9bdc0;
}

aside .aside-heading.resources {
    background: #3f3f3f;
}

aside .aside-body.resources {
    background: #e2e2e2;
}

/* end marked for deletion */


/* interactive sidebars */

aside.sidebar {
    color: #1e3250;
    background: gainsboro;
    width: 40%;
    float: right;
    clear: both;
    margin: 0 2.2em 2em;
    margin-right: -16%;
    position: relative;
    z-index: 1;
    transition: all .4s, padding 0s;
    padding: 24px;
}


aside.sidebar * {
    transition: all .4s;
}


aside.sidebar .sidebar-body {
    display: none;
    padding: 24px;
    padding-right: 7em;
    padding-left: 2em;
    font-size: 1rem;
}

aside.sidebar .sidebar-body h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

aside.sidebar .sidebar-heading {
    font-size: 16px;
    font-weight: 300;    
    width: 100%; 
    position: relative;
    line-height: 1;
    transition: margin 0s, padding 0s;
    font-family: 'Flama', 'Roboto', sans-serif;
}

aside.sidebar .sidebar-expand {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 28px;
    height: 28px;
}

aside.sidebar .sidebar-expand img {
    position: absolute;
}

aside.sidebar .sidebar-expand:hover {
    cursor: pointer;
}

aside.sidebar .sidebar-expand:hover img:nth-child(2n) {
    opacity: 0;
}

aside.sidebar.expanded .sidebar-expand img:nth-child(n+3) {
    display:none;
}

aside.sidebar.expanded {
    padding: 0;
    width: 116%;
    margin-bottom: 3em;
}

aside.sidebar.expanded .sidebar-heading {
    padding: 24px 32px;
    padding-bottom: 0px;
}

aside.sidebar.expanded .sidebar-body {
    display: block;
}

aside.sidebar.expanded .sidebar-heading {
    padding-left: 32px;
}

aside.sidebar .sidebar-title {
    font-family: 'Flama', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.4;
    padding-right: 3em;
    margin-top: 1em;
}

aside.sidebar.expanded .sidebar-title {
    display: none;
}

aside.sidebar .sidebar-title:nth-child(2) {
    /* covers the case where there is no .sidebar-heading */
    margin-top: 0;
}

/* color schemes */

aside.sidebar.navy {
    background: #1e3250;
    color: white;
}

aside.sidebar.navy.expanded .sidebar-heading {
    padding-bottom: 24px;
}

aside.sidebar.navy .sidebar-body {
    background: #aecfe6;
    color: #262626;
}

aside.sidebar.teal {
    background: #297d6d;
    color: white;
}

aside.sidebar.teal.expanded .sidebar-heading {
    padding-bottom: 24px;
}

aside.sidebar.teal .sidebar-body {
    background: #b9d4cf;
    color: #262626;
}

aside.sidebar.red {
    background: #ec3740;
    color: white;
}

aside.sidebar.red.expanded .sidebar-heading {
    padding-bottom: 24px;
}

aside.sidebar.red .sidebar-body {
    background: #f9bdc0;
    color: #262626;
}

aside.sidebar.gold {
    background: #8b7930;
    color: white;
}

aside.sidebar.gold.expanded .sidebar-heading {
    padding-bottom: 24px;
}

aside.sidebar.gold .sidebar-body {
    background: #ccb146;
    color: #262626;
}

aside.sidebar.darkgray {
    background: #3f3f3f;
    color: white;
}

aside.sidebar.darkgray.expanded .sidebar-heading {
    padding-bottom: 24px;
}

aside.sidebar.darkgray .sidebar-body {
    background: gainsboro;
    color: #262626;
}


@media screen and (max-width: 991px) {
    aside.sidebar {
        margin-right: 0;
    }
    aside.sidebar.expanded {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    aside.sidebar {
        width: 100%;
    }
}


/* Resource asides */

aside.resource {
    width: 40%;
    margin: 2em 4em;
    margin-right: -16%;
    float: right;
    background-color: white;
    font-size: 16px;
    padding-top: 2em;
    border-top: 2px solid #1e3250;
    position: relative;
}

aside.resource::before {
    content: "Resources";
    top: -.666em;
    position: relative;
    font-size: 16px;
    font-family: 'Flama', 'Roboto', sans-serif;
    font-weight: 300;
    color: #1e3250;    
}

aside.resource .resource-title {
    padding-right: 3em;
    margin-bottom: 1.3em;
    color: #1e3250;
    font-family: 'Flama', 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
}

aside.resource .resource-image {
    margin-bottom: 1.4em;   
}

aside.resource .resource-link {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 20px;
    right: 0;
    background-image: url(https://uploads-ssl.webflow.com/5fac289d14bbfd31e1e69008/61f4661f68b308ea25b95109_new-window-icon-blue-9pt.svg);
}

aside.resource .resource-link:hover {
    opacity: .75;
}

@media screen and (max-width: 1080px) {
    aside.resource {
        width: 100%;
        float: none;
        margin: 3em 0;
    }
}

@media screen and (max-width: 991px) {
    aside.resource {
        width: 40%;
        float: right;
        margin: .5em 0 2em 5em;
    }
}

@media screen and (max-width: 700px) {
    aside.resource {
        width: 100%;
        float: none;
        margin: 3em 0;
    }
}


/* Documentation page */

pre {
    font-size: 12px;
    padding: 10px;
    padding-bottom: 20px;
    background-color: #FAFAFA;
    border-radius: 10px;
}