/*--------------- Showcase styles blue nad pink -----------------*/
/*Showcase default styles*/
/*
Background color white #fff
Primary blue #035E81
Secondary pink #B00C2D
Primary font Minion Pro
Secondary font Myriad Pro
*/
/*Progress bar color*/
.progress-bar{
background:#B00C2D;
}
/*-----------------------------------Title, Subtitle, Author*/
/*Sets height for the parallax image in header*/
.interchange-background-wrapper{
max-height:600px;
}
/*Sets the background color of the text block that includes the title, subtitle, and author*/
.interchange-background-text{
background-color:transparent;
}
/*Article title*/
.interchange-background-text-header{
text-align:left;
text-transform:uppercase;
text-shadow:none;
background-color:#B00C2D;
color:#fff;
font-size:3.25rem;
font-weight:normal;
padding:1rem 1rem 1rem 3rem;
width:80%;
line-height:1;
margin-left:-5.1rem;
}
/*Article subtitle*/
.interchange-background-text-subtitle{
color:#035E81;
background-color:#fff;
padding:1rem 2rem 1.5rem 3rem;
text-shadow:none;
margin-top:-1rem;
margin-left:-5.1rem;
text-align:left;
font-size:2.3rem;
font-weight:normal;
line-height:1;
}
/*Background for the author by line in header.*/
.showcase-article-author{
color:#373E45;
background-color:#fff;
/*opacity:0.75;*/
}
/*Sets the background color of the paragraph overlayed hero paralex images*/
.interchange-background-text p{
background:#000;
color:#fff;
/*opacity:0.75;*/
}
/*----------------------------------------Article content styles*/
/*Top level heading in article*/
.showcase h2{
color:#035E81;
border-bottom:3px solid #035E81;
}
/*Second level heading in article*/
.showcase h3{
color:#035E81;
font-size:1.65rem;
}
/*Third level heading and full-width quote header*/
.showcase h4{
color:#035E81;
text-align:center;
text-transform:capitalize;
}
.showcase h5{
margin-left:6.2rem;
}
.showcase > .cb-content.NT h4{
color:#fff;
text-align: left;
}
/*Quote that aligns to right side of page*/
.showcase p.quote-right{
color:#035E81;
border-left:3px solid #B00C2D;
}
/*Quote that aligns to left side of page*/
.showcase p.quote-left{
color:#035E81;
border-right:3px solid #B00C2D;
}
/*Full-width quote*/
.showcase p.quote-center{
color:#fff;
}
.showcase p.quote-center a{
color:#fff;
border-bottom:2px solid #fff;
text-decoration:none;
}
/*Sets the background color for the full width quote*/
.cb-blue{
background-color:#035E81;
}
/*----------------------------------------Chapter nav & Social share*/
.chapter-button{
background-color:#035E81;
}
.chapter-list nav ul li a{
color:#373E45;
}
/*Sets the chapter nav list item on hover color*/
.chapter-list nav ul li a:hover{
background-color:#035E81;
}
/*social share*/
.showcase-share{
background-color:#035E81;
}
.close-button-small{
background-color:#035E81;
}
/*Sets background color of the "share" options list*/
ul.share-list{
background-color:#035E81;
}
/*----------------------------------------@media */
/*extra large (TV)*/
@media only screen and (min-width: 75.0625rem){
.interchange-background-wrapper{
max-height:1000px;
}
.interchange-background-text-header{
font-size:3.5rem;
font-weight:normal;
padding:1rem 0 1.2rem 2rem;
margin-left:-1.1rem;
margin-bottom:-1.5rem;
}
.interchange-background-text-subtitle{
margin-left:-1.1rem;
font-size:3rem;
line-height:0.98;
width:100%;
padding:1rem 1rem 1rem 2rem;
}
.figure--right-1-4, .figure--right-1-3, .figure--right-1-2,
.figure--left-1-4, .figure--left-1-3, .figure--left-1-2,
.figure--1-4, .figure--1-3, .figure--1-2, .figure--1-1{
margin-left:1rem;
}
.showcase p{
font-size:1.75rem;
}
.showcase p.quote-right{
font-size:2rem;
line-height:1.1;
}
.showcase p.quote-center{
font-size:1.8rem;
}
}
/*large screen (desktop)*/
@media only screen and (min-width: 64.0625rem) and (max-width: 75rem){
.interchange-background-text-header{
font-size:3.25rem;
font-weight: normal;
padding:1rem 1rem 1.2rem 6rem;
line-height:1;
margin-left:-5.1rem;
margin-bottom:-1.1rem;
}
.interchange-background-text-subtitle{
padding: 1rem 1rem 1rem 2rem;
margin-top:-1rem;
margin-left:-1.1rem;
width:80%;
}
.showcase p{
width:47rem;
font-size:1.75rem;
}
.showcase p.quote-center{
padding:0;
}
}
/*small screen (laptops)*/
@media only screen and (min-width:48.0625rem) and (max-width: 64rem){
.interchange-background-wrapper{
max-height:600px;
}
.interchange-background-text-header{
padding:1rem 1rem 1rem 2rem;
font-size:3.25rem;
line-height:1.1;
margin-bottom:-1.3rem;
margin-left:-2.5rem;
}
.interchange-background-text-subtitle{
font-size:2.5rem;
line-height:1.1;
padding:1rem 2rem 1rem 2.1rem;
margin-left:-2.5rem;
width:95%;
}
.showcase p{
width:80%;
margin:1.2rem 1.2rem 1.2rem 6.25rem;
}
}
/*tablet (iPad)*/
@media only screen and (min-width: 30.0625rem) and (max-width: 48rem){
.interchange-background-wrapper{
max-height:600px;
}
.interchange-background-text-header{
padding:1rem 1rem 1rem 2rem;
font-size:2.25rem;
line-height:1.1;
margin-bottom:-0.7rem;
margin-left:-2.5rem;
}
.interchange-background-text-subtitle{
font-size:1.5rem;
line-height:1.1;
padding:1rem 2rem 1rem 2.1rem;
margin-left:-2.5rem;
}
.showcase p{
width:100%;
}
.showcase h4{
margin-left:2.15rem;
}
}
/*mobile (iPhone)*/
@media only screen and (min-width:20rem) and (max-width:30rem){
.interchange-background-wrapper{
background:#fff;
}
.interchange-background-text-wrapper{
background-color:transparent;
margin-top:-14rem;
margin-left:-1.1rem;
}
.interchange-background-text-header{
margin-left:-0rem;
margin-bottom:-1.19rem;
margin-top:1rem;
padding:0.65rem;
font-size:1.25rem;
line-height:1.1;
}
.interchange-background-text-subtitle{
margin-top:0em;
margin-left:0rem;
padding:0.5rem 0.5rem 0.5rem 1rem;
line-height:1.15;
font-size:1.15rem;
}
.showcase h2{
max-width:15rem;
font-size:1.25rem;
}
.showcase p{
padding:1rem;
margin:0 auto;
width:21rem;
font-size:1.25rem;
}
.showcase.caption, .showcase figcaption{
font-size:0.75rem;
}
.showcase figure, .showcase.figure--right-1-1, .showcase.figure--right-1-2, .showcase.figure--right-1-3, .showcase.figure--right-1-4{
max-width:15.5rem;
}
.js-background-image{
width:73%;
}
.showcase p.quote-right, .showcase p.quote-left{
border-top:none;
border-bottom:none;
}
}