/*************************/
 /*       Headings        */
/*************************/

/* Defaults */

h1 {
    font-family: "Effra", "Effra W01", Helvetica, sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: none;
    font-size: 1.7rem;
    margin: 5% 0 10%;
}

h2 {
    font-family: "Museo Slab", "Museo Slab W01", "Museo Slab", Gerogia, serif;
    font-weight: 300;
    text-decoration: none;
    text-transform: none;
    font-size: 1.7rem;
    margin: 5% 0 10%;
}

h3,
.inside-content h3 {
    font-family: "Museo Slab", "Museo Slab W01", "Museo Slab", Gerogia, serif;
    font-weight: 300;
    text-decoration: none;
    text-transform: none;
    color: #900;
}

h4 {
    font-family: "Effra", "Effra W01", Helvetica, sans-serif !important;
    font-weight: 700 !important;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.4em;
}

@media (min-width: 400px) { 
    h2 {
        font-size: 2rem;
    }
}

@media (min-width: 680px) { 
    h2 {
        margin: 15px 0 50px;
    }
}

@media (min-width: 1160px) { 
    h2 {
        font-size: 2.2rem;
    }
}





  /***********************/
 /*      Body Copy      */
/***********************/

.page-content p,
.page-content ul, 
.page-content li,
.page-content table {
    font-family: "Effra", "Effra W01", Helvetica, sans-serif;
    font-weight: 400;
    color: #222;
    font-size: 16px;
    line-height: 23px;
}





  /***********************/
 /* Section Backgrounds */
/***********************/


/* Rays */

.rays-bkg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 10% 0;
    z-index: 10;
}

.rays-bkg--black {
    background: #000;
}

.rays-bkg--red {
    background: #800;
}

.rays-bkg--red--1 {
    background: #800 url(../img/branding/rays/rays-vertical-1.jpg) repeat top center;
    background-size: cover;
}

.second-level-2017 .rays-bkg--red--1 {
    background-attachment: fixed;
}

.rays-bkg--red h1,
.rays-bkg--red h2,
.rays-bkg--red h3,
.rays-bkg--red h4,
.rays-bkg--red h5,
.rays-bkg--red h6,
.rays-bkg--red p,
.rays-bkg--red a.brand-button,
.rays-bkg--red a.brand-button:hover,
.rays-bkg--black h1,
.rays-bkg--black h2,
.rays-bkg--black h3,
.rays-bkg--black h4,
.rays-bkg--black h5,
.rays-bkg--black h6,
.rays-bkg--black p {
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.rays-bkg--red a.brand-button {
    background: #000;
    border-color: #000;
}

/* Colors */

.white-bkg {
    padding: 10% 0;
}

.white-bkg h1,
.white-bkg h2,
.white-bkg h3,
.white-bkg h4,
.white-bkg h5,
.white-bkg h6 {
    color: #000;
}

.white-bkg h3 {
    color: #900;
}

.white-bkg a.brand-button,
.white-background a.brand-button {
    color: #900;
    border-color: #900;
}

.white-bkg a.brand-button:hover,
.white-background a.brand-button:hover {
    background: #000;
    color: #fff;
    border-color: #000;
    text-decoration: none;
}

/* Section customizations */

@media (min-width: 400px) { 
    .rays-bkg a.brand-button,
    .white-bkg a.brand-button {
        font-size: 1.1rem;
    }
}

@media (min-width: 680px) { 
    .rays-bkg,
    .white-bkg {
        padding: 40px 0 60px;
    }
}



  /**********************/
 /*      Buttons       */
/**********************/

/* Standard brand buttons */

.brand-button {
    display: inline-block;
    width: auto;
    border: 2px solid #fff;
    font-family: "Effra", "Effra W01", "Arial", sans-serif;
    font-weight: 700;
    text-align: center;
    color: #fff;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: .025em;
    word-spacing: .3em;
    padding: 10px 15px;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border-radius: 0;
}

.brand-button--hover-fill-white:hover {
    background: #fff;
    color: #4b4b4b;
}










  /**********************/
 /*     Breadcrumbs    */
/**********************/

.breadcrumbs {
    font-family: "Effra", "Effra W01", Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
    padding: 0;
    background: #ebebeb;
    margin: 0 auto;
    width: 100%;
    overflow-x: auto;
    position: relative;
}

.breadcrumbs__crumb {
    padding: 7px 0;
    display: inline-block;
}

.breadcrumbs__crumb + .breadcrumbs__crumb:before {
    content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    z-index: 1;
    font-size: 1em;
    padding: 0 0 0 9px;
    margin: 0 9px 0 0;
    display: inline-block;
}

.breadcrumbs__crumb,
.breadcrumbs__crumb:last-child:before {
    color: #4b4b4b;
}

.breadcrumbs__crumb:last-child {
    color: #900;
}

.breadcrumbs__crumb:hover {
    text-decoration: underline;
}

@media (max-width: 1159px) {

    .breadcrumbs__wrapper {
        margin: 0 0 0 5%;
        width: 1160px;
        padding: 0 15px 0 0;
    }
}

@media (min-width: 1160px) {
    .breadcrumbs__wrapper {
        min-width: 1160px;
    }
}




  /**********************/
 /*      Wrappers      */
/**********************/

/* Four buttons */

.four-buttons,
.four-buttons li,
.four-buttons li a {
    display: block;
    width: 100%;
}

.four-buttons li a {
    margin: 0 0 15px;
    float: left;
}

@media (min-width: 680px) { 
    .four-buttons li a {
        margin: 0 0 5%;
    }

    .four-buttons li {
        margin: 0;
        float: left;
        width: 50%;
    }

    .four-buttons li:nth-child(even) {
        margin-left: 1%;
        width: 48%;
    }

    .four-buttons li:nth-child(odd) {
        margin-right: 1%;
        width: 48%;
    }
}

@media (min-width: 1160px) { 
    .four-buttons li {
        margin: 0 1%;
        float: left;
        width: 23%;
    }

    .four-buttons li:first-child {
        margin-left: 0;
        width: 23.5%;
    }

    .four-buttons li:nth-child(even) {
        margin-left: 1%;
        width: 23.5%;
    }

    .four-buttons li:nth-child(odd) {
        margin-right: 1%;
        width: 23.5%;
    }

    .four-buttons li:last-child {
        margin-right: 0;
        width: 23.5%;
    }

}





  /****************************/
 /*     Section Elements     */
/****************************/

/* Events widget */

.events-widget ul {
    display: block;
    list-style: none;
    padding: 0;
    float: left;
    width: 100%;
}

.events-widget ul li {
    width: 100%;
    display: inline-block;
    margin: 0 0 30px;
    font-family: "Effra", "Effra W01", Helvetica, sans-serif;
    font-weight: 900;
}

.events-widget ul li a {
    display: block;
    float: left;
    width: 100%;
    position: relative;
}

.events-widget .eventDate {
    text-transform: uppercase;
    width: 66px;
    height: 64px;
    margin: 0 0 0 0;
    float: left;
    background: #fff;
    color: #900;
    padding: 3px 0 0 0;
    transition: all .3s ease;
}

.events-widget .eventTitle,
.events-widget .event-title {
    float: right;
    display: inline-block;
    position: absolute;
    left: 0;
    padding: 7px 0 0 84px;
    right: 0;
    min-height: 67px;
    border-top: 2px solid transparent;
    top: -1px;
}

.events-widget .eventDate span {
    display: block;
    text-align: center;
}

.events-widget .eventDate span.eventDate_day {
    font-size: 2rem;
}

.events-widget .eventDate_month {
    font-weight: 700;
    font-family: "Museo Slab", "Museo Slab W01", "Museo Slab", Gerogia, serif;
}

.events-widget a {
    color: #fff;
}

.events-widget a:hover .eventTitle,
.events-widget a:hover .event-title {
    border-color: #fff;
    background: rgba(0,0,0,0.05);
}

.events-widget .eventTitle .item,
.events-widget .event-title .item {
    font-family: "Effra", "Effra W01", Helvetica, sans-serif;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.025rem;
    line-height: 1em;
    padding-right: 5px;
    display: inline-block;
}

.second-level-2017.new-brand .events-widget h2 {
    color: #fff;
    margin-bottom: 40px;
}

@media (min-width: 600px) {
    .events-widget ul li {
        float: left;
        clear: none;
        width: 50%;
        padding-right: 35px;
    }
}

@media (min-width: 1160px) {
    .events-widget ul li {
        float: left;
        clear: none;
        width: 25%;
        padding-right: 35px;
        margin: 0 0 60px;
    }
}

/* Events - on white */

.events-widget--on-white a {
    color: #900;
}

.events-widget--on-white .eventDate {
    background: #800 url(../img/branding/rays/rays-vertical-1.jpg) repeat top center;
}

.events-widget--on-white .eventDate span {
    color: #fff;
}

.events-widget--on-white .eventDate_month {
    font-weight: 300;
}

.events-widget--on-white a:hover .eventTitle {
    border-color: #900;
    background: rgba(0,0,0,0.05);
}

.events-widget .jump-away-link {
    font-family: "Effra", "Effra W01", Helvetica, sans-serif;
    font-weight: 900;
}

.events-widget .jump-away-link a {
    float: right;
}





/* Live Filter List - Three Column */

.key-icons {
    font-family: "Effra", "Effra W01", "Arial", sans-serif;
}

.key-icons--item {
    display: inline-block;
    margin: 0 5px 0 0;
}


.live-filter-three-col {
    display: inline-block;
    width: 100%;
    margin: 10px 0;
}

.three-col-list-wrapper {
    margin: 15px 0 0;
}

ul.three-col-list {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.three-col-list li {
    border-top: 1px solid #ccc;
    display: block;
    position: relative;
    padding: 8px 0;
}

.three-col-list li a {
    display: inline-block;
    width: 85%;
}

.three-col-list li a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.three-col-list li .major,
.three-col-list li .minor {
    position: absolute;
}

.three-col-list li .major {
    right: 20px;
    top: 10px;
}

.three-col-list li .minor {
    right: 2px;
    top: 10px;
}

.three-col-list li ul {
    margin: 4px 0 0 15px;
    padding: 0;
}

.three-col-list li li {
    border: 0 none;
    font-size: .85em;
    padding: 0;
    color: #555
}

@media only screen and (min-width: 900px) {
    ul.three-col-list {
        width: 31.333%;
        float: left;
        margin: 0 1%;
        display: inline-block;
    }

    .site-directory ul.three-col-list .key-icons--icon {
        display: none;
    }
}

/* Key badges */

.key-icons--icon {
    display: inline-block;
    padding: 2px;
    width: 18px;
    height: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 13px;
}

.major-minor-badges--wider-badges .key-icons--icon {
    width: auto;
    min-width: 18px;
}

.key-icons-wrapper--larger {
    padding-top: 7px;
}

.key-icons-wrapper--larger .key-icons--icon {
    display: inline-block;
    padding: 6px 3px;
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
}

.key-icons--icon_red {
    color: #fff;
    background: #900;
}

.key-icons--icon_blue {
    color: #fff;
    background: #106ab7;
}

.key-icons--icon_green {
    color: #fff;
    background: #007c17;
}

.key-icons--icon_black {
    color: #fff;
    background: #000;
}

.key-icons--icon_grey {
    color: #000;
    background: #ddd;
}

.key-icons--icon_aqua {
    color: #fff;
    background: #008094;
}

.key-icons--icon_orange {
    color: #fff;
    background: #b15500;
}

.key-icons--icon_yellow {
    color: #000;
    background: #f1c200;
}

.key-icons--icon_purple {
    color: #fff;
    background: #660096;
}

.key-icons--icon_white {
    color: #333;
    background: #fff;
}

.key-icons--icon_circle {
    border-radius: 50%;
}

/* Functionality styles */

.do-live-filter-search-term {
    cursor: pointer;
    padding: 2px 5px;
}

.do-live-filter-search-term:hover {
    color: #900;
}

.do-live-filter-search-term.selected,
.do-live-filter-search-term:focus {
    background-color: #e8e8e8;
    color: #900;
    border-radius: 2px;
    outline: none;
}

@media only screen and (max-width: 1024px) {

    .second-level-2017 section.majors-minors > div.wrapper {
        width: 97%;
        margin: 0 1.5%;
    }

    .do-live-filter-search-term {
        cursor: pointer;
        padding: 5px 6px;
    }

}

@media only screen and (min-width: 1025px) {

    .second-level-2017 section.majors-minors input.rounded-input {
        max-width: 50%;
    }

}
























  /**********************/
 /*    Maps & Charts   */
/**********************/

/* Google Map embeds */

.map-container-full {
    width: 100%;
    height: 550px;
    position: relative;
}

.map-container-full--disable-zoom-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 10;
    background: rgba(75,75,75,.3);
}

.map-container-full--disable-zoom-overlay_grey-background,
.map-container-full--disable-zoom-overlay:hover {
    background: rgba(75,75,75,.925);
}

.map-container-full--main-button,
.brand-button.map-container-full--main-button {
    display: block;
    margin: 250px auto 0;
    opacity: 1;
    width: 160px;
}

.map-container-full--disable-zoom-overlay .brand-button {
    background: #4b4b4b;
}

.map-container-full--disable-zoom-overlay:hover .map-container-full--main-button {
    opacity: 1;
    cursor: pointer;
    background: transparent;
}

.map-container-full--disable-zoom-overlay:hover .brand-button:hover {
    color: #4b4b4b;
    background: #fff;
}

.map-container-full--button-options {
    display: block;
    width: 100%;
    margin: 180px auto 0;
    display: none;
}

.map-container-full--button-options--option {
    margin: 0 auto 20px;
    width: 200px;
    display: block;
}

.map-container-full h3 {
    color: #fff;
    margin: 0 auto 20px;
    display: block;
    width: 100%;
    text-align: center;
}

@media (min-width: 600px) {
}



  /**********************/
 /*     Grid Items     */
/**********************/

/* Magazine style Grid Items */

.grid-item_category {
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/branding/rays/triangles/red-triangle-1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 234px;
    height: 88px;
    padding: 15px 0 0 15px;
    margin: 0;
    text-align: left;
    color: #fff;
    font-family: "Effra", "Effra W01", "Arial", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1.3em;
    letter-spacing: .025em;
    text-shadow: 0 0 10px #400;
    opacity: .925;
    z-index: 1;
}


.grid-item_category--primary {
    background: url("../img/branding/rays/triangles/red-triangle-1.png");
    background-size: 100%;
    background-repeat: no-repeat;
}


.grid-item_category--secondary {
    background: url("../img/branding/rays/triangles/white-triangle-1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-shadow: none;
    color: #4b4b4b;
    padding: 10px 0 0 10px;
    font-size: 1.05em;
    letter-spacing: .015em;
    line-height: 1.2em;
}


.grid-item_category--secondary span {
    display: block;
    font-weight: 400;
    color: #900;
    text-transform: none;
}


.grid-item {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 0;
    max-height: 100%;
    width: 100%;
    background: #4b4b4b;
    text-align: center;
    height: auto;
    border-bottom: 1px solid #fff;
}


.grid-item--red {
    background: #900;
}


.grid-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
}


.grid-item--cursor-all a {
    cursor: pointer;
}


.grid-item .mag-articles_title {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 34px;
}


.grid-item--no-title-default .mag-articles_title {
    display: none;
}


.grid-item--no-title-default:hover .mag-articles_title {
    display: block;
}

.new-brand .content-wrapper .grid-item .mag-articles_title h3,
.grid-item .mag-articles_title h3 {
    position: absolute;
    top: 43%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 95%;
    left: 2.5%;
    right: 2.5%;
    cursor: pointer;
    font-family: "Effra", "Effra W01", "Arial", sans-serif;
    font-weight: 700;
    text-align: center;
    color: #fff;
    font-size: 1em;
    line-height: 1em;
    text-shadow: 0 0 10px rgba(0,0,0,.3);
}

.grid-item--hover-image .mag-articles_title h3,
.no-touch .grid-item:hover .mag-articles_title h3 {
    font-size: .625em;
    width: 68%;
    left: 16%;
    right: 16%;
    top: 38%;
}

table.tablesaw.sb-isotope-list tr {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 70px !important;
    transition-duration: 0.001s !important;
}


@media only screen and (max-width: 399px) {

}


.grid-item--hover-image .mag-articles_title p:before,
.no-touch .grid-item:hover .mag-articles_title p:before {
    content: "";
    position: absolute;
    border-bottom: 2px solid #fff;
    width: auto;
    top: -30%;
    left: 35%;
    right: 35%;
}


.grid-item--star-instead-of-line .mag-articles_title p:before,
.grid-item--star-instead-of-line:hover .mag-articles_title p:before {
    border-bottom: 0 none;
    content: "★";
    font-size: .7em;
    top: -30%;
    margin-top: -3.5%;
}


.grid-item .mag-articles_title p {
    position: relative;
    width: 90%;
    margin: 20px auto 0;
    color: #fff;
    font-family: "Museo Slab", "Museo Slab W01", "Times", serif;
    font-weight: 200;
    font-style: normal;
    font-size: .65em;
    line-height: 1.3em;
    display: none;
    text-transform: none;
}


.no-touch .grid-item:hover .mag-articles_title p,
.grid-item--hover-image .mag-articles_title p {
    display: block;
}


.grid-item .mag-articles_title button {
    display: block;
    position: absolute;
    top: 83%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 36%;
    left: 32%;
    right: 32%;
    font-size: .35em;
    font-weight: 400;
    opacity: 0;
    cursor: pointer;
    max-width: 160px;
    margin: 0 auto;
}


.grid-item .mag-articles_title button:hover {
    background: #fff;
    color: #4b4b4b;
}


.grid-item--red .mag-articles_title button:hover {
    color: #900;
}


.no-touch .grid-item:hover .mag-articles_title button {
    opacity: 1;
}


.grid-item_hover-show {
    opacity: 0;
}


.no-touch .grid-item:hover img {
    opacity: .1;
}


.grid-item--hover-image img {
    opacity: 0.275;
}


.grid-item--hover-image:hover img {
    opacity: .375;
}


.grid-item--no-opacity-on-hover:hover img {
    opacity: 1;
}


.grid-item--swap-images-on-hover .grid-item_hover-hide,
.no-touch .grid-item--swap-images-on-hover .grid-item_hover-hide,
.grid-item--swap-images-on-hover:hover .grid-item_hover-show,
.no-touch .grid-item--swap-images-on-hover:hover .grid-item_hover-show {
    opacity: 1;
    display: inline;
}


.grid-item--swap-images-on-hover .grid-item_hover-show,
.grid-item--swap-images-on-hover:hover .grid-item_hover-hide {
    opacity: 0;
    display: none;
}

.grid-item--swap-images-on-hover .mag-articles_title {
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
    width: 2000px;
    height: 2000px;
}

.grid-item_close-overlay {
    display: none;
    text-indent: -9999px;
    padding: 12px;
    opacity: .5;
    z-index: 20;
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    cursor: pointer;
}

.grid-item_close-overlay .grid-item_close-overlay_x {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/controls/x.png) no-repeat center center;
    background-size: cover;
}

.grid-item_close-overlay:hover {
    opacity: 1;
}

.grid-item--hover-state-show-on-mobile .grid-item_close-overlay {
    display: block;
}

.grid-item--hide-close-button .grid-item_close-overlay {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .grid-item--hover-state-show-on-mobile img {
        opacity: .275;
    }
    .grid-item--hover-state-show-on-mobile p {
        display: block;
    }
    .grid-item--hover-state-show-on-mobile .mag-articles_title {
        display: block;
    }
    .grid-item--hover-state-show-on-mobile .mag-articles_title h3 {
        font-size: .625em;
        width: 68%;
        left: 16%;
        right: 16%;
        top: 38%;
    }
    .grid-item--hover-state-show-on-mobile .mag-articles_title p {
        display: block;
    }
    .grid-item--hover-state-show-on-mobile .mag-articles_title p:before {
        content: "";
        position: absolute;
        border-bottom: 2px solid #fff;
        width: auto;
        top: -30%;
        left: 35%;
        right: 35%;
    }

    .grid-item--hover-state-show-on-mobile.grid-item--star-instead-of-line .mag-articles_title p:before {
        border-bottom: 0 none;
        content: "★";
        font-size: .7em;
        top: -30%;
        margin-top: -3.5%
    }
    .grid-item--hover-state-show-on-mobile .mag-articles_title button {
        opacity: 1;
    }
}

/* button position based on grid # and grid item content */

.grid--title-only .grid-item .mag-articles_title button {
    top: 74%;
}

.grid-8 .grid-item .mag-articles_title button {
    width: 48%;
    left: 26%;
    right: 26%;
    max-width: 230px
}

.grid-square.grid-8 .grid-item {
    height: 0;
    /* padding-bottom: 100%;  ratio for 443/443 */
    padding-bottom: 100%; /* ratio for 50% of 443/443 */
    width: 100%;
}

@media only screen and (min-width: 400px) {
    .grid-item--hover-image .mag-articles_title p:before,
    .no-touch .grid-item:hover .mag-articles_title p:before {
        top: -20%;
    }
}

@media only screen and (min-width: 520px) {
    .grid-8 .grid-item {
        width: 50%;
    }
    .grid-square.grid-8 .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 50%; /* ratio for 50% of 443/443 */
        width: 50%;
    }
}

@media only screen and (min-width: 660px) {
    .grid-3 .grid-item {
        width: 50%;
    }
    .grid-3.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 50%; /* ratio for 50% of 443/443 */
        width: 50%;
    }
    .grid-item {
        border-right: 1px solid #fff;
    }
}

@media only screen and (min-width: 840px) {
    .grid-8 .grid-item {
        width: 33.333%;
    }
    .grid-8.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 33.333%; /* ratio for 33.333% of 443/443 */
        width: 33.333%;
    }
}

@media only screen and (min-width: 1160px) {
    .grid-8 .grid-item {
        width: 25%;
    }
    .grid-8.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 25%; /* ratio for 25% of 443/443 */
        width: 25%;
    }
}

@media only screen and (min-width: 1320px) {
    .grid-3 .grid-item {
        width: 33.333%;
    }
    .grid-3.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 25%; /* ratio for 25% of 443/443 */
        width: 25%;
    }
    .grid-item .mag-articles_title button {
        font-size: .3em;
        max-width: 145px;
    }
}

@media only screen and (min-width: 1980px) {
    .grid-3 .grid-item {
        width: 25%;
    }
    .grid-3.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 25%; /* ratio for 25% of 443/443 */
        width: 25%;
    }
}

@media only screen and (min-width: 2640px) {
    .grid-3 .grid-item {
        width: 20%;
    }
    .grid-3.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 20%; /* ratio for 20% of 443/443 */
        width: 20%;
    }
}

@media only screen and (min-width: 3300px) {
    .grid-3 .grid-item {
        width: 16.66%;
    }
    .grid-3.grid-square .grid-item {
        height: 0;
        /* padding-bottom: 100%;  ratio for 443/443 */
        padding-bottom: 16.66%; /* ratio for 16.66% of 443/443 */
        width: 16.66%;
    }
}

/* more space between title and sub when grid items are larger */

@media (min-width: 330px) and (max-width: 659px), (min-width: 990px) and (max-width: 1319px), (min-width: 1650px) and (max-width: 1979px), (min-width: 2310px) and (max-width: 2639px), (min-width: 2970px) and (max-width: 3299px) {
    .grid-item .mag-articles_title p {
        margin: 35px auto 0;
    }
    .grid-item--hover-image .mag-articles_title p:before,
    .no-touch .grid-item:hover .mag-articles_title p:before {
        top: -30%;
    }
}

@media (min-width: 460px) and (max-width: 659px), (min-width: 1320px) and (max-width: 1649px) {
    .grid-item .mag-articles_title {
        font-size: 45px;
    }

    .grid-8 .grid-item .mag-articles_title {
        font-size: 38px;
    }
}

@media (min-width: 990px) and (max-width: 1319px), (min-width: 1650px) and (max-width: 1979px), (min-width: 2310px) and (max-width: 2639px), (min-width: 2970px) and (max-width: 3299px) {
    .grid-item .mag-articles_title button {
        top: 79%;
    }
    .grid-item .mag-articles_title {
        font-size: 49px;
    }
    .grid-8 .grid-item .mag-articles_title {
        font-size: 38px;
    }
}

@media (min-width: 1650px) {

    .grid-8 .grid-item .mag-articles_title {
        font-size: 49px;
    }
}