/*!
Theme Name: HM_RNHDDP_Subsite_Theme
Author: Ali Seckin Karayol
Author URI: http://aliseckin.com
Description: Theme Developed for Hafiza Merkezi Regional Network for Historical Dialogue and Dealing with the Past Project
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hm_rnhddp
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

HM_RNHDDP_Subsite_Theme is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Navigation
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Theme Specific Styles
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: block;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0 0 1.5em;
    /* Make sure select elements fit in widgets. */
}

.widget select {
    max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.hentry {
    margin: 0 0 1.5em;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}



/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}


/*--------------------------------------------------------------
# Theme Specific Styles by AliSeckin
--------------------------------------------------------------*/
/*
8px = 0.5rem
9px = 0.5625rem
10px = 0.625rem
11px = 0.6875rem
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
15px = 0.9375rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
22px = 1.375rem
24px = 1.5rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem
32px = 2rem
34px = 2.125rem
36px = 2.25rem
38px = 2.375rem
40px = 2.5rem
*/
.myBorder {
    border: 1px solid magenta;
}

body {
    background-color: #FFFEF4;
    font-family: "Merriweather", serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#header {
    background-color: #000303;
}

#logo {
    z-index: 1000;
}

#logo img {
    width: 32px;
    height: 52px;
    position: absolute;
    top: 0px;
    background-color: #F5AA65;
    padding: 0.3rem;
}

#title {
    background-color: #000303;
    height: 3.25rem;
}

#title .titleText {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #F5AA65;
    line-height: 0.875rem;
    margin-left: 1.5rem;
}

#title .mobileMenuIcon {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #F5AA65;
    line-height: 3.25rem;
    text-transform: uppercase;
    border: 1px solid #F5AA65;
    padding: 0.25rem 0.5rem;
}

#title .mobileMenuIcon:hover {
    cursor: pointer;
}

#fullScreenMenu {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-size: 1.25rem;
    position: absolute;
    overflow-y: scroll;
    padding: 0px !important;
}

#fullScreenMenu .modal-dialog {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#fullScreenMenu .modal-dialog .modal-content {
    background-color: #F5AA65;
    color: #2E1C0C;
    height: auto;
    min-height: 100%;
    border: 0px;
    border-radius: 0px;
}

#fullScreenMenu .modal-dialog .modal-content .modal-header {
    background-color: #D89354;
    border-bottom: 0px;
    height: 3.25rem;
    font-size: 1rem;
}

#fullScreenMenu .modal-dialog .modal-content .modal-header .modalCloseIcon {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #000303;
    text-transform: uppercase;
    border: 1px solid #000303;
    padding: 0.25rem 0.5rem;
}

#fullScreenMenu .modal-dialog .modal-content .modal-header .modalCloseIcon:hover {
    cursor: pointer;
}

#fullScreenMenu .modal-dialog .modal-content .modal-body ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#fullScreenMenu .modal-dialog .modal-content .modal-body ul li {
    line-height: 2.5rem;
}

#fullScreenMenu .modal-dialog .modal-content .modal-body ul li a {
    text-decoration: none;
    color: #2E1C0C;
    opacity: 0.5;
}

#fullScreenMenu .modal-dialog .modal-content .modal-body ul li:hover a,
#fullScreenMenu .modal-dialog .modal-content .modal-body ul li:focus a,
#fullScreenMenu .modal-dialog .modal-content .modal-body ul li.active a {
    opacity: 1;
    cursor: pointer;
}

#shareModal {
    font-family: "Roboto Condensed", sans-serif;
    position: absolute;
    overflow-y: scroll;
    padding: 0px !important;
}

#shareModal .modal-body {
    text-align: center;
}

#shareModal .modal-body ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#shareModal .modal-body ul li {
    line-height: 3rem;
    padding: 0.25rem;
}

#shareModal .modal-body ul li a {
    width: 100%;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    color: #FFF;
}

#shareModal .modal-body ul li a.facebook {
    background-color: #3B5998;
    border-color: #3B5998;
}

#shareModal .modal-body ul li a.twitter {
    background-color: #1DA1F2;
    border-color: #1DA1F2;
}

#shareModal .modal-body ul li a.whatsapp {
    background-color: #25d366;
    border-color: #25d366;
}

#shareModal .modal-body ul li a.email {
    background-color: #D0021B;
    border-color: #D0021B;
}

#shareModal .modal-body ul li a.copylink {
    background-color: #636363;
    border-color: #636363;
}

#shareModal .modal-body ul li:hover a {
    cursor: pointer;
    opacity: 0.9;
    font-size: 1.35rem;
}

#featuredArea {
    position: relative;
}

#featuredArea .featuredImage {
    position: relative;
}

#featuredArea .featuredImage .featuredTitle {
	display:none;
}

#featuredArea .featuredImage .share {
    position: absolute;
    background-color: #F5AA65;
    color: #000303;
    bottom: 0rem;
    right: 0rem;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1rem;
    padding: 0.6rem 0.8rem 0.5rem 0.8rem;
}

#featuredArea .featuredImage .share:hover {
    background-color: #000303;
    color: #F5AA65;
    cursor: pointer;
}

#featuredArea .featuredCaption {
    box-sizing: content-box;
    font-size: 0.875rem;
    padding: 20px;
    overflow: hidden;
    border: none;
    color: #F5AA65;
    text-align: left;
    background: #2E1C0C;
    box-shadow: 8px 0 0 0 #d87102 inset;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#content {
    margin-top: 3rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #F5AA65;
}

#content.noBorder {
    border-bottom: 0px solid #F5AA65;
}

#content h1,
#content h2 {
    text-align: center;
}

#content figure {
    margin: 2rem 0;
}

#content figure img {
    outline: 4px solid #F5AA65;
    outline-offset: -4px;
}

#content figure figcaption {
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.25rem;
    color: #FFFEF4;
    background-color: #F5AA65;
    padding: 0.5rem 0rem;
}

#content .country figure img {
	outline: 4px solid #000;
	-webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
}

#content .country figure figcaption {
    background-color: #000;
	transition: all 0.5s ease;
}

#content .country a {
    text-decoration: none;
}

#content .country a:hover figure img {
    outline: 4px solid #F5AA65;
	-webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}

#content .country a:hover figure figcaption {
    color: #000;
    background-color: #F5AA65;
}

#content .country a figure figcaption {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0.5rem 0rem;
}

#content .pageHeaderForIntroductionPage{
	display:none;
}

#footer {
    background-color: #000303;
    min-height: 5rem;
    margin-top: 4rem;
}

#footer a {
    text-decoration: none;
    color: #F5AA65;
}

#footer a:hover {
    color: #FFF;
}

h1 {
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: 0.125rem;
    line-height: 3rem;
}

h2 {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}

h3 {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 2rem 0 1rem 0;
}

h4 {
    text-align: center;
    font-family: "Merriweather", serif;
    color: #D89354;
    font-weight: 700;
    font-size: 1rem;
    line-height: 2rem;
    margin: 2rem 0;
}

h6 {
    text-align: center;
    font-family: "Merriweather", serif;
    color: #D89354;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 1rem 0 2rem 0;
}

p {
    line-height: 2rem;
}

blockquote {
    text-align: left;
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
    line-height: 2rem;
    margin: 2rem 0;
    -webkit-box-shadow: 8px 0 0 0 #d87102 inset;
    box-shadow: 8px 0 0 0 #d87102 inset;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding-left: 2rem;
}

@media (max-width: 374px) {

    /* Target devices smaller than 375px. */
    #title .titleText {
        font-size: 0.625rem;
        line-height: 0.75rem;
        margin-left: 1.5rem;
        margin-top: 0.5rem;
    }

    #fullScreenMenu {
        font-size: 1rem;
    }

    #featuredArea .featuredCaption {
        font-size: 0.75rem;
        padding: 1rem 0.75rem;
        box-shadow: 4px 0 0 0 #d87102 inset;
    }

    #content {
        margin-top: 2rem;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    #content figure img {
        outline: 2px solid #F5AA65;
        outline-offset: -2px;
    }

    #content .country a {
        text-decoration: none;
    }

    #content .country a:hover img {
        outline: 2px solid #000303;
    }

    #content .country a:hover figcaption {
        color: #F5AA65;
        background-color: #000303;
    }

    #content .country a figure figcaption {
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 0.5rem 0rem;
    }

    #footer {
        background-color: #000303;
        min-height: 5rem;
        margin-top: 4rem;
        color: #F5AA65;
    }

    h1 {
        font-size: 2rem;
        letter-spacing: 0rem;
        line-height: 2.75rem;
    }

    h2 {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 2rem;
    }

    h4 {
        line-height: 1.5rem;
    }

    p {
        line-height: 1.5rem;
    }

    blockquote {
        line-height: 1.5rem;
        margin-left: -1rem;
        margin-right: 0rem;
        padding-left: 1.25rem;
    }
}

@media (min-width: 576px) {

    /* Target devices wider than 576px. */
    #title .titleText {
        font-size: 1rem;
        line-height: 0.875rem;
        margin-left: 2rem;
    }
}

@media (min-width: 768px) {

    /* Target devices wider than 768px. */
    #logo {
        z-index: 1000;
    }

    #logo img {
        width: 60px;
        height: 100px;
        padding: 0.5rem;
    }

    #title .titleText {
        font-size: 1.125rem;
        line-height: 1.25rem;
        margin-left: 4rem;
        margin-top: 0.5rem;
    }

    #content .country a {
        text-decoration: none;
    }

    #content .country a:hover img {
        outline: 4px solid #000303;
    }

    #content .country a:hover figcaption {
        color: #F5AA65;
        background-color: #000303;
    }

    #content .country a figure figcaption {
        font-size: 1.25rem;
        line-height: 1.75rem;
        padding: 0.5rem 0rem;
    }

    #fullScreenMenu {
        font-size: 1.25rem;
        position: absolute;
    }

    #fullScreenMenu .modal-dialog .modal-content .modal-body ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    #fullScreenMenu .modal-dialog .modal-content .modal-body ul li {
        line-height: 2.75rem;
    }
	
	#featuredArea .featuredImage .featuredTitle {
		display:block;
		position: absolute;
		top: 40%;
		left: 3%;
		width: 94%;
		text-align: center;
	}
	
	#featuredArea .featuredImage .featuredTitle h1 {
		margin-bottom:8px;
		color: rgba(255, 255, 255, 0.9);
	}
	
	#featuredArea .featuredImage .featuredTitle h2 {
		color: rgba(0, 0, 0, 0.9);
	}
	
	#featuredArea .featuredImage .featuredTitle h6 {
		margin-top:0px;
	}
	
	#featuredArea .featuredImage .featuredTitle h1 span {
		font-size: 110%;
		padding-left: 10px;
		padding-right: 10px;
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.9);
		background-color: rgba(0, 0, 0, 0.9);
		box-decoration-break: clone;
	}
	
	#featuredArea .featuredImage .featuredTitle h2 span {
		font-size:120%;
		line-height:180%;		
		box-shadow: 0 0 0 10px rgba(245, 170, 101, 1);
		background-color: rgba(245, 170, 101, 1);
		box-decoration-break: clone;
	}
	
	#featuredArea .featuredImage .featuredTitle h6 span {
		font-size:120%;
		line-height:100%;
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 1);
		background-color: rgba(0, 0, 0, 1);
		box-decoration-break: clone;
	}
	
	#content .pageHeaderForIntroductionPage{
		display:block;
	}
	
	.pageHeader{
		display:none;
	}
	
	.homePageTitleText {
        display: none;
    }
}

@media (min-width: 992px) {

    /* Target devices wider than 992px. */
    #logo img {
        width: 92px;
        height: 156px;
        position: absolute;
        top: 0px;
        padding: 1rem;
    }

    #title {
        background-color: #000303;
        height: 3rem;
    }

    #title .container .row {
        height: 3.25rem;
    }

    #title .titleText {
        font-size: 1.125rem;
        margin-left: 6rem;
    }

    #menu {
        background-color: #D89354;
        height: 3rem;
    }

    #menu .myNav {
        margin-left: 7rem;
        padding: 0px;
        height: 3rem;
    }

    #menu .myNav ul {
        width: 100%;
        padding-left: 0px;
        margin-left: 0px;
    }

    #menu .myNav ul li a {
        font-family: "Merriweather", serif;
        font-weight: 700;
        font-size: 0.8125rem;
        line-height: 3rem;
        color: #2E1C0C;
        opacity: 0.7;
    }

    #menu .myNav ul li.active,
    #menu .myNav ul li:hover {
        box-shadow: inset 0 -4px 0 #2E1C0C;
    }

    #menu .myNav ul li.active a,
    #menu .myNav ul li:hover a {
        text-decoration: none;
        opacity: 1;
    }

    #menu .myNav ul li.lang-item a {
        background-color: #2E1C0C;
        color: #F5AA65;
        padding: 0.5rem;
        border-radius: 0.25rem;
    }

    #menu .myNav ul li.lang-item:hover {
        box-shadow: inset 0 0 0 #2E1C0C;
    }

    #featuredArea .featuredCaption {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        width: 330px;
        padding: 20px;
        overflow: hidden;
        border: none;
        color: #F5AA65;
        text-align: left;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        background: #2E1C0C;
        -webkit-box-shadow: 8px 0 0 0 #d87102 inset;
        box-shadow: 8px 0 0 0 #d87102 inset;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        position: absolute;
        left: 1rem;
        bottom: -3rem;
    }

    #featuredArea .pageControls {
        position: absolute;
        bottom: -3rem;
        right: 0rem;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        line-height: 3rem;
    }

    #featuredArea .pageControls .control {
        color: #F5AA65;
        padding: 0 1rem;
    }

    #featuredArea .pageControls .control.increaseTextSize {
        padding-right: 0.5rem;
    }

    #featuredArea .pageControls .control.decreaseTextSize {
        padding-left: 0.5rem;
    }

    #featuredArea .pageControls .control:hover {
        color: #000303;
        cursor: pointer;
    }

    #content {
        margin-top: 8rem;
        padding-bottom: 4rem;
        margin-bottom: 4rem;
        border-bottom: 2px solid #F5AA65;
    }

    #content figure {
        margin: 2rem 0;
    }

    #content figure img {
        outline: 4px solid #F5AA65;
        outline-offset: -4px;
    }

    #content figure figcaption {
        font-size: 0.75rem;
        text-align: center;
        line-height: 2rem;
        color: #FFFEF4;
        background-color: #F5AA65;
    }

    #footer {
        background-color: #000303;
        min-height: 5rem;
        margin-top: 4rem;
        color: #F5AA65;
    }

    h1 {
        font-family: "Merriweather", serif;
        font-weight: 900;
        font-size: 3rem;
        letter-spacing: 0.125rem;
        line-height: 4rem;
    }

    h2 {
        font-family: "Merriweather", serif;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 2.5rem;
    }

    h3 {
        font-family: "Merriweather", serif;
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 2rem;
        margin: 2rem 0 1rem 0;
    }

    h4 {
        text-align: center;
        font-family: "Merriweather", serif;
        color: #D89354;
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 2rem;
        margin: 2rem 0;
    }

    p {
        line-height: 2rem;
    }

    blockquote {
        text-align: left;
        font-family: "Merriweather", serif;
        font-weight: 400;
        font-style: italic;
        font-size: 1rem;
        line-height: 2rem;
        margin: 2rem 0;
        -webkit-box-shadow: 8px 0 0 0 #d87102 inset;
        box-shadow: 8px 0 0 0 #d87102 inset;
        margin-left: 4rem;
        margin-right: 4rem;
        padding-left: 4rem;
    }
}

@media (min-width: 1200px) {

    /* Target devices wider than 1200px. */
    #title .titleText {
        font-size: 1.375rem;
    }

    #menu .myNav ul li a {
        font-size: 1rem;
    }
}

@media print {

    /* Target for printing. */
    body {
        background-color: white;
        font-family: "Merriweather", serif;
    }

    #title {
        background-color: white;
        height: 5rem;
    }

    #title .titleText {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 700;
        font-size: 2rem;
        color: #F5AA65;
        margin-left: 0rem;
    }

    #featuredArea .featuredCaption {
        box-sizing: content-box;
        font-size: 0.875rem;
        padding: 20px;
        overflow: hidden;
        border: none;
        color: black;
        text-align: left;
        background: white;
        box-shadow: 8px 0 0 0 #d87102 inset;
    }

    #content {
        border-bottom: 2px solid black;
    }

    #content figure img {
        outline: 4px solid black;
        outline-offset: -4px;
    }

    #content figure figcaption {
        color: black;
        background-color: white;
    }

    #footer {
        background-color: white;
        margin-top: 4rem;
        color: black;
        border-top: 2px solid black;
    }

    h4 {
        color: black;
    }
}