/** JOFIA CSS MAIN Dec 31 2020 **/
/** Valeria was here **/

html {
    font-size: 100%;
}

body {
    font-size: 1rem;
/** A 20210411 to fix issues in iPhone and most mobile devices **/
    width: 100%;
}

/*** TYPOGRAPHY ***/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Oswald", sans-serif;
}

h1 {
    font-size: 3rem;
    color: #ffffff;
    font-weight: normal;
    line-height: 0.9;
}

h2 {
    font-size: 2.5rem;
    color: #303f30;
    font-weight: 400;
    line-height: 1;
}

h2.issue {
    font-size: 4rem;
}

h2.cover,
h2.issue,
h2.cover-article-title,
h2.issue-article-title,
h2.hmain {
    color: #00303F;
}

h3 {
    font-size: 2.25rem;
    color: #30303f;
    font-weight: 400;
    line-height: 0.9;
}

h3.cover-article-author,
h3.issue-article-author {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 0.9;
    color: #111111;
}

pre {
   font-size: 1rem;
   color: #676767;
   padding: 2rem 0 0 4rem;
}

a {
    color: #C32630;
    text-decoration: none;
}

.hero-img {
    position: relative;
}

.hero-img #breadcrumb {
    width: 100%;
    position: absolute;
}

#breadcrumb p {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.hero-img #breadcrumb p {
    color: #00303F;
    text-align: center;
    margin: 0;
    padding: 1.2rem 0;
    font-weight: 300;
}

#mtitle h1 {
    color: #FFFFFF;
    font-weight: 300;
}

/* main menu */
#menu {
    position: relative;
}

nav {

    background-color: rgb(0, 48, 63);
    width: 100%;
    border: none;
}

.nav:before,
.nav:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
}

.nav:after {
    clear: both;
}

.toggle {
    display: block;
    color: #fff;
    background-color: #00303f;
    margin-bottom: 0;
    z-index: 1;
    border-color: #00303f;
}

.toggle i {
    font-size: 1.2rem;
    font-weight: 400;
    text-align: center;
}


.menu {
    /* display: flex; */
    list-style-type: none;
    margin-bottom: 0;
}

.menu-item {
    margin-bottom: 0;
}

.menu-item a {
    display: block;
    font-family: "Oswald", sans-serif;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.menu-item a.current-issue {
    background-color: rgb(147, 18, 22);
}

.menu-item a.selected {
    background-color: #fff;
    color: rgb(0, 48, 63);
}

.menu-item a:hover {
    background-color: rgb(195, 38, 48);
    color: rgb(255, 255, 255);
}


#main {
    font-family: 'Cardo', Serif;
    font-weight: 300;
    font-size: 1.375rem;
    line-height: 1.3;
    color: #111111;
}


a.article-read-on,
a.article-download,
a.issue-read-on {
    font-family: "Oswald", Sans-serif;
}

a:hover {
    color: #FFFFFF;
    background: #C32630
}

a.toc {
    font-family: "Oswald", Sans-serif;
    font-weight: 300;
    font-size: 1.8rem;
}

#content p {
    text-align: justify;
}

/** Modifiers for all text **/
.tlight {
    font-weight: 300;
}

.titalic {
    font-style: italic;
}

.tsmall {
    font-size: 0.8em;
}

.tsans {
    font-family: "Oswald", Sans-serif;
}

.tcenter {
    text-align: center;
    margin: 0 auto;
    border-bottom: 1px solid #878787;
}

.compact {
    margin-bottom: 6px;
    padding-bottom: 0;
}

/** used to lighten up the Fall-Spring cover title **/
span.fall-spring {
    font-weight: 300;
}

ul {
    list-style-type: none;
}

.page ul {
    list-style-type: square;
    margin-left: 1.125rem;
}

div.toc {
    background-color: #e1e1e1;
    padding: 1rem 2rem 1rem 4rem;
}

/**	Used for spans in the li items for TOCs **/
.toc-pages {
    font-size: 0.8rem;
    color: #444444;
}

.toc-author {
    font-family: "Oswald", Sans-serif;
}

.toc-title {
    font-family: "Oswald", Sans-serif;
    font-size: 1.8rem;
}

/*** ELEMENTS ***/
/* Logo */
#barline {
    min-height: 6rem;
    background-color: #931216;
}

.cover-article-image,
.toc-img,
.past-issue {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cover-article-image {
    border: 1px solid #CBCBCB;
    padding: .5rem;
}

/** Top of page colored bar **/
ul.row {
    height: 100px;
}

div.footback {
    color: #fff;
    background: #00303f;
}

div.footback>div.container {
    padding-top: 10px;
}

div.open-issue {
    color: #000000;
    background-color: transparent;
    padding: 1rem;
    border-top: 1px solid #878787;
}

a.icon {
    display: none;
}

p.colophon,
p.open-issue-paragraph,
p.meta,
a.meta,
li.eic {
    font-family: "Oswald", Sans-serif;
}

a.meta {
    color: #ABABAB;
}

/*** MEDIA QUERIES ***/
/** Smartphone normal **/
@media screen and (min-width: 20rem) {

    /* debugging */
    /*
    body {
        border-top: 10px solid red;
    }
    */

    .nav {
        display: none;
    }

    .active {
        display: block;
    }

    .toggle {
        position: absolute;
        top: -37px;
        right: 0;
    }

    .menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }

    .menu-item {
        width: 100%;
    }

    .menu-item a {
        padding: 1rem 0 1rem 1rem;
    }

    .hero-img {
        margin-bottom: 1rem;
    }

    .hero-img #breadcrumb {
        width: 100%;
        position: absolute;
        background-color: rgba(255, 255, 255, .9);
    }

    .hero-img #breadcrumb p {
        text-align: left;
        padding-left: 1rem;
    }

    /*** SMARTPHONE PADDING ***/
    .container {
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #mtitle h1 {
        margin: 0;
        padding: 1rem;
        font-size: 1.875rem;
        line-height: 1.2;
        text-align: center;
    }

    h2.cover {
        line-height: 1.3;
        font-size: 2rem;
    }

    h2,
    h3 {
        line-height: 1.2;
    }

    .issue {
        margin-top: 1rem;
    }

    .issue h2 {
        font-size: 2rem;
        margin-top: .5rem;
    }

    h2.issue {
        font-size: 2.5rem;
	# padding-bottom: 2rem;
    }

    .issue h3 {
        font-size: 1.5rem;
        margin-bottom: .5rem;
    }

    div.toc {
        padding-left: .8rem;
        padding-right: .8rem;
    }

    ul.toc {
        margin-bottom: 0;
    }

    li.toc {
        margin-bottom: 2rem;
    }

    .toc-author {
        margin-bottom: .8rem;
    }

    a.toc {
        font-size: 1.5rem;
    }

    .toc-pages {
        font-size: .9rem;
    }

    .cover-article-image {
        max-width: 92%;
    }

    #content p,
    .page li {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    #content p {
        margin-bottom: 0;
    }

    .page li {
        margin: 0;
    }

    .page {
        list-style-type: square;
    }

    #info {
        margin-bottom: 2rem;
    }

    .issue-article-index {
        margin-bottom: 3.5rem;
    }

    .issue-article-title {
        margin-bottom: 0;
    }

    .issue-article-subtitle {
        margin-top: .8rem;
    }


    .tsmall {
        font-size: .9rem;
    }

}

/** Smartphone rotated **/
@media screen and (min-width: 28.125rem) {

    /* debugging */
    /*
    body {
        border-top: 10px solid green;
    }
    */

}

/** 760 px **/
@media screen and (min-width:47.5rem) {

    /* debugging */
    /*
    body {
        border-top: 10px solid blue;
    }
    */

    #mtitle h1 {
        text-align: center;
        font-size: 3rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .nav {
        display: block;
    }

    .toggle {
        display: none;
    }

    .menu {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 100%;
    }

    .menu-item {
        align-self: center;
        width: auto;
    }

    .menu-item a {
        display: block;
        max-width: 11rem;
        font-family: "Oswald", sans-serif;
        font-size: 1.2rem;
        color: #fff;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        padding: 1rem;
    }

    .menu:last-child {
        padding-bottom: 0;
    }
}

/** 990 px **/
@media screen and (min-width: 61.875rem) {

    /* debugging */
    /*
    body {
        border-top: 10px solid yellow;
    }
*/
    .hero-img #breadcrumb {
        background-color: rgba(255, 255, 255, .9);
        top: 0;
    }

    .hero-img #breadcrumb p {
        text-align: center;
    }

    #mtitle h1 {
        text-align: center;
        font-size: 3rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .nav {
        display: block;
    }

    .toggle {
        display: none;
    }

    .menu {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .menu-item {
        align-self: center;
        width: auto;
    }

    .menu-item a {
        display: block;
        width: 11rem;
        font-family: "Oswald", sans-serif;
        font-size: 1.2rem;
        color: #fff;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        padding: 1rem;
    }

    .menu:last-child {
        padding-bottom: 0;
    }
}

/** 1920 px **/
@media screen and (min-width: 120rem) {}