/* Fonts */
@import url("https://use.typekit.net/rok1zwb.css");

/* Scaffolding */

html {
    font-size: 62.5%;
    font-weight:400
}
body {font-family: benton-sans, sans-serif;font-weight: 400;font-style: normal;color:#000}
strong, b {font-weight:600;}
em, cite {font-style:italic;}

.piano-content {width:100%}


.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width:1px
}

.mobile-only {display:none!important;}
.desktop-only {display:block!important;}

h1, h2, h3, h4, h5, h6, h7, h8 {font-weight:600;margin-top:0}
h1, h2, h3, h4 {margin-bottom:0rem;}
h1 {font-size: 5.8rem;line-height: 6.4rem;}
h2 {font-size: 4.6rem;line-height: 5rem;}
h3 {font-size: 3.6rem;line-height: 4rem;}
h4 {font-size: 2.8rem;line-height: 3.2rem;}
h5 {font-size: 2.2rem;line-height: 2.8rem;}
h6 {font-size: 1.8rem;line-height: 2.4rem;}
ol, ul {list-style-position: inside;}
ol {list-style: none; counter-reset: smr-counter;}
ol li {counter-increment: smr-counter;}
ol li::before {content: counter(smr-counter) ". ";color: #005B9C;font-weight: 600;}
ul {list-style: none;}
ul li::before {content: "\2022";color: #005B9C;font-weight: 600;display: inline-block; width: 1em;}
li {margin-bottom:8px}
.content a {color: #000;text-decoration: none;border-bottom: 1px solid #00e0ff;}
.content a:hover {color:#005b9c}
p {font-size:1.8rem; line-height: 3.2rem;margin-bottom:16px}
p.info {font-size:1.4rem;line-height:2rem;}
p.caption {font-size:1.2rem; line-height: 1.8rem;font-weight:normal;}
.meta {font-size:1.4rem; line-height:2.2rem; letter-spacing:1px;font-weight: 600;text-transform:uppercase; }
.summary {font-size:2rem; line-height:2.6rem; }
.callout-special {background-color:#f0f0f0; padding:20px}
.callout-info {border: 1px solid #00e0ff;padding:20px;font-size: 1.3rem;line-height: 2rem;font-weight: 400;width: 25%;margin-bottom: 20px;float: right; clear: both;position: relative;z-index: 99;}

.is-button {background:transparent; cursor: pointer;text-transform: uppercase;text-decoration: none;font-size: 1.2rem;font-weight: 600;letter-spacing: 1px;border: 1px solid #00e0ff;color: #005b9c!important;height: 45px;line-height: 4.5rem;padding: 0 15px;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;justify-content: center;  transition: 0.5s;width:100%}
.is-button a {color: #005b9c;text-decoration:none;transition: 0.5s;width:100%;text-align:center;line-height: 1.3;}
.is-button:hover {background:#00e0ff}
.is-button.aqua {color: #005B9C!important;background:#00e0ff;border:none;}
.is-button.aqua a {color: #005B9C!important;}
.is-button.aqua:hover {color: #00e0ff!important;background:#005B9C}
.is-button.aqua:hover a {color: #00e0ff!important;}

.is-button.blue a {color: #fff!important;}
.is-button.blue {color: #fff!important;background:#005B9C;border:none;}
.is-button.blue:hover {background:#000}
.is-button.blue a:hover {color: #fff!important;}

.content blockquote.pullquote{background: #f0f0f0; background-clip:content-box;color: #000;overflow: auto;font-size: 3.6rem;font-weight: 400;font-style: normal;line-height: 4rem;margin-bottom:16px;}
.content blockquote.pullquote:before{content: "";display: block;width: 35px;height: 32px;background: url(https://sloanrefresh.wpengine.com/wp-content/themes/smr/assets/images/icons/quote-mark_aqua.svg) no-repeat;margin: 30px 0 15px 30px;}
.content blockquote.pullquote p {padding:0 30px 30px}
.content blockquote.pullquote .pullquote-author {margin-top: -25px;font-size: 1.4rem;line-height: 2rem;padding-bottom:10px}
.content blockquote.pullquote .pullquote-citation {margin-top: -25px;font-size: 1.4rem;line-height: 2rem;}
.content blockquote.pullquote--blue {background: #005b9c;
color: #fff;}
.content blockquote.pullquote--aqua {background: #00e0ff;
color: #000;}
.content blockquote.pullquote--aqua:before {background: url(https://sloanrefresh.wpengine.com/wp-content/themes/smr/assets/images/icons/quote-mark_blue.svg) no-repeat;}

img, img.size-full {
	width:100%
}

.attribution, .caption {
	font-size: 1.1rem;
    line-height: 1.6rem;
    font-weight: 600;
    font-style: normal;
    margin-top:10px;
}

@media screen and (max-width: 1024px) {
h1 {font-size: 4.6rem;line-height: 5rem;}
h2 {font-size: 3.6rem;line-height: 4rem;}
h3 {font-size: 2.8rem;line-height: 3.2rem;}
h4 {font-size: 2.2rem;line-height: 2.8rem;}
h5 {font-size: 1.8rem;line-height: 2.4rem;}
h6 {font-size: 1.5rem;line-height: 2.2rem;}

}

@media screen and (max-width: 800px){
p {font-size:1.6rem; line-height: 2.8rem;}
.meta {font-size:1.3rem; line-height:2rem;}
.is-button {font-size: 1.2rem;line-height:4.5rem;}
.content blockquote.pullquote{font-size: 2.8rem;line-height: 3.2rem;}
.callout-info {width: 100%;float: none;margin-bottom:20px}
}

@media screen and (max-width: 550px) {
h1 {font-size: 3.6rem;line-height: 4rem;}
h2 {font-size: 2.8rem;line-height: 3.2rem;}
h3 {font-size: 2.2rem;line-height: 2.8rem;}
h4 {font-size: 1.8rem;line-height: 2.4rem;}
h5 {font-size: 1.5rem;line-height: 2.2rem;}
h6 {font-size: 1.2rem;line-height: 2rem;}

}

/* Generic classes */

.blue {
    color:#005b9c !important
}

.aqua {
    color:#00e0ff !important
}

.silver {
    color:#f0f0f0 !important
}

.black {
    color:#000 !important
}

.white {
    color:#fff !important
}

.red {
    color:#ed1b2e !important
}

.green {
    color:#006b67 !important
}

.shadow {
    box-shadow:3px 3px 10px 0 rgba(0, 0, 0, .4)
}

.strikethrough {
text-decoration: line-through;

}

/* Grid */

*, *:after, *:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.l-grid {
overflow: visible;


}

.l-grid:after {
    content: "";
    display: block;
    clear:both
}

.l-grid[class*='l-col-'] > *{
    float: left;
    padding-left:20px
}

.l-grid.l-col-20 > * {
    width:20%
}

.l-grid.l-col-25 > * {
    width:25%
}

.l-grid.l-col-33 > * {
    width:33.33%
}

.l-grid.l-col-50 > * {
    width:50%
}

.l-grid.l-col-66 > * {
    width:66.66%
}

.l-grid.l-col-75 > * {
    width:75%
}

.l-grid.l-col-50and25 > * {
    width:25%
}

.l-grid.l-col-50and25 > :first-child {
    width:50%
}

.l-grid.l-col-30to40to30 > * {
    width:30%
}

.l-grid.l-col-30to40to30 > * + * {
    width:40%
}

.l-grid.l-col-30to40to30 > * + * + * {
    width:30%
}

.l-grid.l-col-25and75 > * {
    width:75%
}

.l-grid.l-col-25and75 > :first-child, .l-grid.l-col-75and25 > * {
    width:25%
}

.l-grid.l-col-75and25 > :first-child {
    width:75%
}

.l-grid.l-col-66and33 > * {
    width:33.33%
}

.l-grid.l-col-33and66 > *, .l-grid.l-col-66and33 > :first-child {
    width:66.66%
}

.l-grid.l-col-33and66 > :first-child, .l-grid.l-col-33to25 > * {
    width:33.33%
}

.l-grid.l-col-33to25.has-oxe > :nth-child(3), .l-grid.l-col-33to25 > :last-child {
    display:none;
}

.l-grid.l-col-33to25.has-oxe > :last-child {
    display:block
}

.l-grid.l-col-50to33and66 > * {
    width:50%
}



@media only screen
  and (max-device-width: 550px) {
    .l-grid.l-mobile-100, .l-mobile-100 {
        overflow: hidden;
        margin-left:0
    }

    .l-mobile-100 > div {
        width: 100% !important;
        float: none;
        padding-left: 0 !important;
        margin-bottom:20px
    }

    .l-mobile-100 > div:first-child {
        margin-top:0
    }
    .mobile-only {display:block!important;}
    .desktop-only {display:none!important;}
}