/* SECTION STYLES */
/* Custom section styles */
body {
    margin: 0;
    padding: 0;
}

.bio {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 14pt;
}
.bio-text {
    display: inline-block;
    text-align: left;
    width: 80%;
    margin: 2rem;
    color: #323232;
    text-shadow: 2px 2px 8px #f8f8f8;
}
.bio-grid {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-rows: auto;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    text-align: left;
    margin: 18px 0px 50px 0px;
    font-size: 14pt;
}
.bio-grid-img {
    background-image: url("photos/kate-forrest-1747_300x400.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
@media only screen and (max-width: 800px) {
    .bio-grid {
        grid-template-columns: 100%;
        grid-template-rows: 250px auto;
    }
    .bio-grid-img {
        background-image: url("photos/kate-forrest-1747_300x200.jpg");
    }
}
.bio-grid-item {
    grid-row-start: auto;
    grid-row-end: auto;
    grid-column-start: auto;
    grid-column-end: auto;
}
.release-wrapper {
    padding: 0px;
    width: 100%;
    height: auto;
    text-align: center;
}
/* CSS pattern based on http://lea.verou.me/css3patterns/#tartan */
.book-wrapper-background {
    display: inline-block;
    background-color: #58bf49;
    max-width: 580px;
    padding: 45px 45px;
    height: auto;
    background-image:
        repeating-linear-gradient(
            transparent,
            transparent 50px,
            rgba(0,0,0,.4) 50px,
            rgba(0,0,0,.4) 53px,
            transparent 53px,
            transparent 63px,
            rgba(0,0,0,.4) 63px,
            rgba(0,0,0,.4) 66px,
            transparent 66px,
            transparent 116px,
            rgba(0,0,0,.5) 116px,
            rgba(0,0,0,.5) 166px,
            rgba(255,255,255,.2) 166px,
            rgba(255,255,255,.2) 169px,
            rgba(0,0,0,.5) 169px,
            rgba(0,0,0,.5) 179px,
            rgba(255,255,255,.2) 179px,
            rgba(255,255,255,.2) 182px,
            rgba(0,0,0,.5) 182px,
            rgba(0,0,0,.5) 232px,
            transparent 232px),
        repeating-linear-gradient(
            270deg,
            transparent,
            transparent 50px,
            rgba(0,0,0,.4) 50px,
            rgba(0,0,0,.4) 53px,
            transparent 53px,
            transparent 63px,
            rgba(0,0,0,.4) 63px,
            rgba(0,0,0,.4) 66px,
            transparent 66px,
            transparent 116px,
            rgba(0,0,0,.5) 116px,
            rgba(0,0,0,.5) 166px,
            rgba(255,255,255,.2) 166px,
            rgba(255,255,255,.2) 169px,
            rgba(0,0,0,.5) 169px,
            rgba(0,0,0,.5) 179px,
            rgba(255,255,255,.2) 179px,
            rgba(255,255,255,.2) 182px,
            rgba(0,0,0,.5) 182px,
            rgba(0,0,0,.5) 232px,
            transparent 232px),
        repeating-linear-gradient(
            125deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,.2) 2px,
            rgba(0,0,0,.2) 3px,
            transparent 3px,
            transparent 5px,
            rgba(0,0,0,.2) 5px);
}
@media only screen and (max-width: 500px) {
    .book-wrapper-background {
        padding: 25px 0px;
    }
}
/* Block Quote based on https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
.book-about {
    display: inline-block;
    line-height: 1.45;
    max-width: 480px;
    font-size: 16px;
    text-align: justify;
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    padding: 10px 25px 10px 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
.book-about:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
.book-about-wrapper {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 10px 0px;
}
.book-img-wrapper {
    width: 50%;
    max-width: 500px;
    display: inline-block;
    float: left;
}
@media only screen and (max-width: 1115px) {
    /* styles for medium screens */
    .book-img-wrapper {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }
}
.book-img {
    width: 100%;
    height: auto;
}
.footer {
    display: block;
    height: 190px;
    background-color: #323232;
    color: #f8f8f8;
    padding: 1rem 0px;
    font-size: 12pt;
    text-align: center;
}
.footer-icon {
    fill: #f8f8f8;
}
.footer-icon:hover {
    fill: #DDA0DD;
}
.footer-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
.footer-social {
    font-size: 1.375rem;
    display: inline-block;
}
.footer-text-sm {
    font-size: 10pt;
}
.footer-url-text {
    text-decoration: none;
    color: #f8f8f8;
}
.footer-url-text:hover {
    color: #DDA0DD;
}
.fillspace {
    display: inline-block;
    width: 45px;
}
.floral-background {
    background-image: url("img/floral-bliss-5-bw.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.map-background {
    background-image: url("img/map.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
@media only screen and (max-width: 1220px) {
    /* styles for medium screens */
    .floral-background {
        background-image: url("img/floral-bliss-5-bw_1200x800.jpg");
    }
    .map-background {
      background-image: url("img/map_1200x800.png")
    }
}
@media only screen and (max-width: 640px) {
    /* styles for narrow screens */
    .floral-background {
        background-image: url("img/floral-bliss-5-bw_600x400.jpg");
    }
}
#Home {
    background-color: #f8f8f8;
}
.heading {
    padding-top: 100px;
    width: 100%;
    height: 565px;
    color: #323232;
    text-shadow: 2px 2px 8px #f8f8f8;
    background-color: #f8f8f8;
}
.heading h1 {
    font-size: 60px;
    line-height: 3.5rem;
    margin-bottom: 1rem;
}
/* Method based on Ben Marshall's responsive iframes
   https://benmarshall.me/responsive-iframes/  */
.iframe-container{
    text-align: center;
}
.iframe-container iframe {
    border: 0;
}
@media screen and (max-width : 575px){
    .iframe-container {
        overflow: hidden;
        padding-top: 56.25%;
        position: relative;
    }
    .iframe-container iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
.intext-link {
    font-weight: bold;
    text-decoration: underline;
    color: #323232;
}
.intext-link:hover {
    color: #BA55D3;
}
.landscape-background {
    background-image: url("img/icm_landscape_1000x667.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 667px auto;
}
@media screen and (max-width : 575px){
    /*Make dropdown links appear inline*/
    .landscape-background {
        background-image: url("img/icm_landscape_617x365.png");
        background-size: 365px auto;
    }
    .heading {
        height: 420px;
    }
}
.instagram {
    padding-top: 25px;
}
@media only screen and (max-width: 328px) {
    /* styles for narrow screens */
    .instagram {
        display: none;
    }
}
.join {
    font-size: 33px;
    text-decoration: none;
    border: 1px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    padding: 8px 10px;
}
.join:hover {
    color: #DDA0DD;
}
.josefin {
    font-family: 'Josefin Slab';
}
.icon-space {
    margin: 0px 10px;
    padding: 0;
    text-decoration: none;
}
.script {
    font-family: 'Josefin Slab';
    font-size: 70px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
}
.social {
    padding-top: 18px;
    padding-bottom: 36px;
}
.story-img {
    display: block;
}
.story-about {
    display: inline-block;
    line-height: 1.45;
    max-width: 480px;
    font-size: 16px;
    text-align: justify;
    padding: 0 12px;
}
.story {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 14pt;
}
.subscribe {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}
.title-script {
    font-family: 'Alex Brush', cursive;
    font-size: 120px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
}
.work-title {
    padding: 50px 0px 15px 0px;
    text-align: center;
    text-transform: uppercase;
}
.work-subtitle {
    padding: 25px 0px 25px 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14pt;
}
.text-halo {
  text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.2em white;
}

/* SOCIAL MEDIA ICONS */
/* Add style to social media icons */
.fas {
    text-decoration: none;
}
.far, .fab {
    padding: 10px;
    font-size: 30px;
    width: 33px;
    text-align: center;
    text-decoration: none;
}

/* Add a hover effect */
.fas:hover, .far:hover, .fab:hover {
    opacity: 0.7;
}

/* Add color to social media icons */
.fa-envelope {
    background: #000000;
    color: white;
}
.fa-instagram {
    color: white;
    background: linear-gradient(to bottom right, #fccc63, #e95950, #bc2a8d, #8a3ab9);
}
.fa-facebook {
    background: #3b5998;
    color: white;
}
.fa-twitter {
    background: #55ACEE;
    color: white;
}
.fa-external-link-alt {
    color: #323232;
}