/*

Brandon Grotesque, for headings

font-family: "brandon-grotesque",sans-serif;

Light	    "brandon-grotesque"	300	normal
Light Italic	"brandon-grotesque"	300	italic
Bold	    "brandon-grotesque"	700	normal
Bold Italic	"brandon-grotesque"	700	italic
Black	    "brandon-grotesque"	900	normal


Freight Sans Pro, for body

font-family: "freight-sans-pro",sans-serif;

Book	    "freight-sans-pro"	400	normal
Book Italic	"freight-sans-pro"	400	italic
Bold	    "freight-sans-pro"	700	normal
Bold Italic	"freight-sans-pro"	700	italic


Sax Mono, for numerals

font-family: "sax-mono",monospace;

Regular	    "sax-mono"	        400	normal

*/

h1, h2, h3, h4, h5, h6 {
    font-family: "brandon-grotesque", "open sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

body{
    font-family: "freight-sans-pro", "open sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 200%;
}

.body-front-page {
    /*background-image: url("/static/img/1080_optical_paper_background.png");*/
    background-color: rgb(228, 229, 218);
}

.all-caps {
    text-transform: uppercase;
}

p {
    font-weight: 400;
}

a {
    color: rgb(135, 20, 12);
    text-decoration: underline;
}

a:hover {
    color: rgb(191, 39, 29);
}


/* Navbar */

.navbar-inverse {
    font-family: "brandon-grotesque", "open sans", sans-serif;
}

.navbar-inverse a.navbar-brand {
    font-weight: 600;
    color: rgb(254, 255, 242);
    font-size: 100%;
}

.navbar-inverse .navbar-nav>li>a {
    font-weight: 400;
    color: rgb(254, 255, 242);
}


.navbar-brand img {
    height: 2em;
}

.navbar-optical {
    border-radius: 0;
    margin-bottom: 0;
}

.navbar-optical a {
    text-decoration: none;
    color: rgb(254, 255, 242);
}

.navbar-optical .container-fluid {
    background-color: rgb(0, 38, 76);
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: rgb(254, 255, 242);
}

.search-field {
    font-family: "freight-sans-pro", "open sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 80%;
}

/* Welcome & Mission Statement */

#welcome {
    /* add background subscribe ticket image */
    font-family: "freight-sans-pro", "open sans", sans-serif;
    font-style: normal;
    font-weight: 400;
}

#welcome p {
    margin-top: -0.5em;
}

.optical-logo-font {
    font-family: "brandon-grotesque", "open sans", sans-serif;
    font-size: 90%;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

.mission-statement {
    font-size: 140%;
    padding-top: 1.2em;
    padding-bottom: 1em;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.btn-optical-subscribe-hero {
    background-color: rgb(48, 119, 191);
    text-shadow: none;
    color: rgb(254, 255, 242);
    text-decoration: none;
    font-style: normal;
    font-weight: 400;
    font-size: 100%;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 0;
}

.btn-optical-subscribe-hero:hover {
    color: rgb(254, 255, 242);
    background-color: rgb(0, 77, 153);
}

/* Latest Podcast */

#latest-title {
    background-color: rgb(135, 20, 12);
    color: rgb(254, 255, 242);
}

#latest-title h3 {
    margin-top: 0.5em;
    font-weight: 400;
    text-transform: uppercase;
}

#latest {
    background-color: rgb(191, 39, 29);
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    font-size: 120%;
    padding: 25px 0;
}

#latest-shade {
    /* This is an ND filter on top of the banner image */
}

.latest-podcast-header {
    display: flex;
    justify-content: space-between;
}

#latest h2 {
    color: rgb(254, 255, 242);
}

#latest p {
    background-color: rgba(135, 20, 12, 0.66);
    border-radius: 3px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.latest-logo {
    font-size: 112%;
    margin-right:0.11em;
    position: relative;
    top: 0.13em;
}

.latest-podcast-number {
    font-family: "sax-mono", "open sans", monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 210%;
    margin-top: 0;
    order: 2;
    flex-basis: content;
}

.latest-podcast-number a {
	color: rgb(254, 255, 242);
    text-decoration: none;
}

.latest-podcast-title {
    font-size: 150%;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: .575em;
    margin-right: .25em;
}

.latest-podcast-title > a {
	color: rgb(254, 255, 242);
    text-decoration: none;
}

.latest-podcast-description p {
    /*text-shadow: 0 0 2px #000,*/
                 /*2px 2px 2px #000;*/
    color: rgb(254, 255, 242);
    margin-bottom: 0.75em;
}

.btn-optical-latest {
    background-color: rgb(217, 64, 54);
    text-shadow: none;
    color: rgb(254, 255, 242);
    text-decoration: none;
    font-family: "freight-sans-pro", "open sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 100%;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 0.6em;
}

.btn-optical-latest:hover {
    color: rgb(254, 255, 242);
    background-color: rgb(191, 39, 29);
}

/* Quotes Section */

.fa-quote-left {
    margin-right: 0.1em;
    text-indent: -1em;
    padding-left: 1em;
    position: relative;
    top: 0.025em;

}

.pull-left {
    font-weight: 500;
}

.pull-left .fa-quote-left {
    color: rgb(135, 20, 12);
}

p.cite {
    clear: left;
    text-align:right;
}


/* Subscription Section */

#subscribe {
    background-color: rgb(0, 38, 76);
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    margin-top: 25px;
    padding-bottom: 25px;
    color: rgb(254, 255, 242);
    font-size: 150%;
}

#subscribe h2 {
    margin-top: 0.67em;
    margin-bottom: 0.33em;
}

.fa-li-optical {
    position: relative;
    left: -0.1em;
}

.no-bullet {
    list-style-type: none;
    list-style-position: inside;
}

.no-bullet li {
    position: relative;
}

a.btn-optical-subscribe-link {
    background-color: rgb(48, 119, 191);
    text-shadow: none;
    color: rgb(254, 255, 242) !important;
    text-decoration: none !important;
    font-family: "freight-sans-pro", "open sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 100%;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 0.6em;
}

a.btn-optical-subscribe-link:hover {
    background-color: rgb(0, 77, 153) !important;
}

/* forms */

.indicates-required {
    text-align: right;
}  

.asterisk {
    color: rgb(191, 39, 29);
}

.form-control {
    font-size:120%;
}

.iphone-submit {
    /* 
    Hiding the modal-body submit input item
    This allows Return and iPhone "Go" buttons to work,
    without displaying the button in the body.
    (We have a button in the modal-footer)
    */
    visibility: hidden;
    position: absolute;
}

/* Footer */

footer {
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
}

#optical-logo {
    color: rgb(3, 14, 25);
    font-size: 1500%;
    padding-top: 2em;
    padding-bottom: 1em;
}