/* see general.css for default styles for all sizes*/
.home-page-header-slider {
    margin: 0 auto 3rem;
}
div.header-slider__slide {
    z-index: 1000;
}
div.header-slider__content.story-bar > ul > li.story-bar-title {
    width: 60%;
    float: left;
}
div.header-slider__content.story-bar > ul > li.page-number {
    width: 30%;
    float: right;
}
.header-slider__content.story-bar {
    background-image: linear-gradient(to right, #2b3b8e, #2a62ab, #2889c8, #27a6dd);
}
.home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
    padding-top: 68%;
}
div.header-slider__slide .header-slider__content div.title {
    width: 60%;
    margin: auto;
}
div.header-slider__slide .header-slider__content div.title img {
    width: 10%;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
div.header-slider__slide .header-slider__content div.title h1 {
    color: #fff;
    width: 100%;
    text-transform: none;
    text-align: left;
}
div.header-slider__slide .header-slider__content div.title h1 .small-italic {
    font-family: 'Avenir-book';
    font-style: italic;
}
section.story-content-wide {
    background-image: url(/research/magazine/fall-2021/images/president-kelly-letter-640x800.png);
    padding-top: 30em;
    margin-top: 20%;
    z-index: -200;
    background-size: contain;
    background-repeat: no-repeat;
}
div.inner-border {
    border: 5px solid #cc0000;
    padding: .5em;
    width: 100%;
    margin: 2em auto;
}
div.story-content-inner {
    background-image: linear-gradient(to right, #2b3b8e, #2a62ab, #2889c8, #27a6dd);
    color: #fff;
    width: 100%;
    margin: 1em auto;
    padding: 2em;
}
#section > div > div > section > p > a {
    margin-left: 20%;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
		landscape view phones 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 600px) {
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 56%;
    }
    div.header-slider__slide .header-slider__content div.title h1 {
        width: 60%;
        margin: auto;
    }
    section.story-content-wide {
        margin-top: 10%;
    }
    div.story-content-inner {
        width: 90%;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Medium devices (tablets, 750px and up) 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 750px) {
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 18%;
        width: 60%;
    }
    div.header-slider__slide .header-slider__content div.title {
        width: 90%;
        margin: auto;
    }
    div.header-slider__slide .header-slider__content div.title h1 {
        font-size: 130%;
        margin: 0;
        width: 70%;
        float: right;
    }
    section.story-content-wide {
        background-image: url(/research/magazine/fall-2021/images/kelly-banner-1400x700-new.png);
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Large devices (desktops, 976px and  - this size is where the fau template changes, rather than 992px
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 976px) {
    #to-top > div > div > div > div.header-slider__content.story-bar > ul > li.story-bar-title {
        width: 40%;
        margin-left: 2.5%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 20%;
    }
    div.inner-border {
        width: 80%;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	iPad Pro (portrait and landscape)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 24%;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title h1 {
        font-size: 180%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        top: 120%;
        width: 60%;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	styles for laptop devices 1440+ (styles actually change at 1400px)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 1400px) {
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 0;
    }
    div.header-slider__slide .header-slider__content div.title {
        margin-top: 23%;
    }
    div.header-slider__slide .header-slider__content div.title h1 {
        font-size: 150%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        top: 25%;
    }
    div.inner-border {
        padding: 1em;
    }
    div.story-content-inner {
        width: 100%;
        margin: 0;
    }
    section.story-content-wide {
        background-image: url(/research/magazine/fall-2021/images/kelly-banner-1920x970-new.png);
        background-size: 100%;
        margin-top: -44em;
        padding-top: 44em;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	styles for large desktop monitors - 1900 wide x 1080 tall
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 1900px) {
    div.header-slider__slide .header-slider__content.page-title-text div.title {
        top: 0;
        width: 80%;
        margin-top: 18%;
    }
    div.header-slider__slide .header-slider__content div.title h1 {
        font-size: 240%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        width: 40%;
        top: 45%;
        font-size: 140%;
        margin: auto;
    }
    section.story-content-wide {
        margin-top: -48em;
        padding-top: 48em;
        background-size: 100%;
    }
    div.inner-border {
        width: 60%;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Large MAC desktop - 2560 wide x 1440 tall
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 2500px) {
    div.header-slider__slide .header-slider__content.page-title-text div.title {
        margin-top: 21%;
    }
    div.header-slider__slide .header-slider__content div.title h1 {
        font-size: 300%;
    }
    section.story-content-wide {
        margin-top: -54em;
        padding-top: 54em;
    }
    div.inner-border {
        width: 60%;
        margin-top: 12%;
    }
}