:root {
    --serif: "Cormorant Garamond", Garamond, serif;
    --sans: Poppins, 'Century Gothic', Futura, Arial, Verdana;
    --pink: rgba(200, 86, 75, .5);
    --bronze: rgba(115, 40, 20, .7);
    --white: #fdf6e9;
}

#ballad {
    --pink: rgba(107, 86, 172, .5);
    --bronze: rgba(63, 31, 113, .7);
}

#curse {
    background: rgba(238,159,140,.1);
    --bronze: #bb2420;
    --pink: #e89682;
}

#ballad {
    background: rgba(205,201,221, .2);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html,
body {
    font-family: var(--serif), serif;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    margin: auto;
    padding: 0;
}

body {

    background: var(--white) url('../img/OUABH_heart.jpg') no-repeat fixed;
    background-size: 1000px;
    background-position: calc(50vw + 10em) -3em;
}

.js body {
    background-image: url('../img/OUABH_heart.webp');
}

a {
    color: #333;
    transition: all .2s;
}

a:hover {}

hr {
    margin: 3em 40%;
    padding: 0;
    border: none;
    height: 1px;
    background: var(--bronze);

}

.tophr {
	width: 100%;
	margin: auto;
}

.titlefix {
    display: inline-block;
    font-family: var(--sans), sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: var(--bronze);
}

.mb-5 {
	margin-bottom: 5em;
}

main {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    clear: both;
}

main:after {
    content: '';
    display: block;
    clear: both;
}

    .section {
        padding: 0 2vw;
    }


/***************************

MAIN BOOK SECTIONS

****************************/

.section {
    width: 100%;
    max-width: 100rem;
    margin: auto;
}

.section:after {
    content: '';
    display: block;
    clear: both;
}

#ouabh {
    padding: 2em 0;
}

#ballad,
#curse {
    padding: 4em 0;
}



/* LEFT MARGIN: Bookshot width + 3em */

#ouabh header,
#ouabh .buylinks,
#ouabh .desc,
#ouabh .reviews{
	    padding-left: 33em;
}

#curse header,
#curse .buylinks,
#curse .desc,
#curse .reviews{
    padding-right: 33em;
}

#ballad header,
#ballad .buylinks,
#ballad .desc,
#ballad .reviews {
    padding-left: 33em;
}

/***************************

TITLE + AUTHOR

****************************/

h1,
h2,
h3 {
    margin: auto;
    font-weight: normal;
    line-height: 1.1em;
}

header {
    margin-bottom: 4em;
}

header h1,
header h2 {
    font-weight: 300;
}

/* LIVE TYPE TITLE */

header h1 {
    font-size: 4em;
    font-style: italic;
}

/* AUTHOR NAME */

header h2 {
    font-family: var(--sans), sans-serif;
    font-size: 2.5em;
    font-weight: 200;
    text-transform: uppercase;
    color: var(--bronze);
    letter-spacing: .1em;
}


/* SUBTITLE */

header h3 {
    font-family: var(--sans), sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.25em;
    letter-spacing: .1em;
    margin: 1em 0 .25em;
    color: var(--pink);
}

/***************************

BOOK JACKET

****************************/

.book picture {
    width: 30em;
    max-width: 600px;
    margin: auto;
	margin-bottom: 5em;
}

.book picture img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.bookbg {
	background: none !important;
}

#ouabh.book picture {
    float: left;
}

#curse.book picture  {
    float: right;
}

#ballad.book picture {
    float: left;
}

/***************************

BUY LINKS

***************************/

.buylinks button {
    display: none;
}

.buylinks h1 {
    display: inline-block;
    font-family: var(--sans), sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: var(--bronze)
}

.buylinks h2 {
    font-size: 2em;
}


.buylinks ul {
    padding: 0;
    /* Removes list indent */
    list-style-type: none;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    text-align: center;
}

.buylinks li {
    display: flex;
    flex: 0 1 19%;
    /* Three buttons per line */
    margin-bottom: 1.5%;
    overflow: hidden;
}


.buylinks li a {
    font-family: var(--sans), sans-serif;
    width: 100%;
    padding: .75em 1em;
    background: rgba(253, 246, 233, .6);
    color: var(--pink);
    text-decoration: none;
    border: 1px solid var(--pink);
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 2em;
    text-overflow: ellipsis;
}

.buylinks li a:hover {
    background: var(--pink);
    color: var(--white);
}

.buylinks li a:before {
    color: var(--bronze);
}


/***************************

DESCRIPTION

****************************/


.desc {
    margin: 2em 0;
}

.desc h1 {
    font-family: var(--serif), serif;
    font-size: 4em;
    font-style: italic;
    color: var(--bronze);
    font-weight: bold;
}

.desc p, .desc q {
    line-height: 1.25em;
    font-size: 1.75em;
    margin-top: 1.5em;
    margin: 0 0 .5em 0;
}

.desc p b {
    display: inline;
    line-height: 1em;
}


blockquote {
    margin: auto;
    text-indent: -.5em;
}

blockquote:after {
    content: '';
    display: block;
    clear: right;
}

.desc q {
    quotes: "\201C""\201D";
    margin-bottom: 0;

}

q:after {
    content: "\201D \2002";

}

cite {
    display: inline-block;
    text-align: right;
    float: right;
    line-height: 1.5rem;
    font-size: 1.75em;
    margin-top: .5em;
    color: var(--bronze);
}

cite:before {
    content: "\2014";
    margin-left: .5em;
}



/***************************

DOWNLOAD

****************************/

.download {
    background: var(--pink);
    padding: 2em;
    margin: auto;
    text-align: center;
    color: var(--white);
    white-space: nowrap;
}

.download a {
    font-family: var(--sans), sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    text-decoration-color: var(--pink);
    padding: .25em .5em;
}

.download a:hover {
    background: var(--pink);
    text-decoration-color: transparent;
}

#wp {
    background: #000 url(../img/stars.gif) fixed;
    --pink: rgba(201, 182, 228, .7);
}

#wp a {
    color: var(--tanpink);
}


#wallpaper {
    height: 80vh;
    width: auto;
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.6);
    border: 1px solid var(--pink);
}

#inline {
    margin: auto;
    text-align: center;
}

#inline a {
    color: var(--white);
    font-family: var(--sans), sans-serif;
    text-align: center;
    font-weight: 700;
    font-size: 1.5em;
    display: block;
    text-decoration: none;
}

#inline a span {
    margin: 1em auto;
    display: block;
}

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -.05em;
    margin-right: .25em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
    fill: var(--white);
}


/***************************

REVIEWS

****************************/


.reviews {
    padding: 5em 0 6em;
    background: var(--bronze);
    color: var(--white);
}

.reviews .section {
    display: flex;
    justify-content: space-between;
}

.reviews h1 {
    font-size: 3em;
    text-align: center;
    margin-bottom: .5em;
    color: #4f1606;
    font-weight: 600;
}

.reviews .section div {
    flex: 1;
    flex: 0 0 calc(50% - 3em);
    align-self: center;
}



.reviews .section div:first-of-type hr:last-of-type {
    display: none;
}



/***************************

EVENTS

****************************/


#events {
    text-align: center;
    padding: 0;
    clear: both;


}

#events h1 {
    
    border-top: 1px solid var(--pink);
    font-family: var(--sans);
    font-size: 3em;
    font-weight: bold;
    padding-top: 2rem;
    text-transform: uppercase;
}


#events h1 i {
    font-family: var(--serif), serif;
    text-transform: lowercase;
    letter-spacing: -.025em;
    color: var(--bronze);
}
#events h1 br {
    display: none;
}

#events p {
    text-align: center;
    margin: 1em auto;
    font-size: 2em;

}

.tour br {
        display: none;
    }
#events .events {
	display: none;
	max-width: 80em;
	margin: auto;
}

#events .tour {
    display: table;
	width: 100%;
    border: .5px;
    border-spacing: 1px 0;
    border-bottom: 1px solid var(--pink);
    font-family: var(--sans), sans-serif;
}

.tour .row,
.tour .header {
    display: table-row;
}

.tour .header {
    text-transform: uppercase;
    font-size: .8em;
    white-space: nowrap;
}

.tour .header div {
    display: table-cell;
    padding: .5em;
    background: var(--bronze);
    color: white;
    font-weight: bold;
    letter-spacing: .2em;
}

.tour .row > div {
    display: table-cell;
    padding: 1rem 1rem;
    font-size: 1.3em;
    line-height: 1.4rem;
    vertical-align: middle;
    color: var(--bronze);
}


.tour .row div {
    border-bottom: 1px solid var(--pink);
    white-space: nowrap;
}


.tour .row:nth-child(odd) div {
    color: #333;
}

.tour .row div:nth-child(odd) {
    font-weight: bold;
}

.tour .row .venue {
    white-space: normal;
}

.tour .row:last-of-type > div {
    border-bottom: 0;
}

.tour .row .ticket {
    width: 10%;
    min-width: 8em;
}

.tour .ticket a, .tour .tbdticket a {
    font-size: 1rem;
    padding: .5em 1em;
    display: block;
    color: #FFF;
    width: 100%;
    background: var(--white);
    color: var(--bronze);
    border: 1px solid var(--pink);
    text-decoration: none;
    border-radius: 2em;
    white-space: nowrap;
    font-weight: bold;
    font-family: var(--sans);
    text-overflow: ellipsis;
    overflow: hidden;
}

.tour .ticket a:hover {
    background: var(--bronze);
    color: var(--white);
}

.tour .tbdticket a {
    background: black;
    color: white;
    border-color: transparent;
    opacity: .2;
    pointer-events: none;
}



.loading {
    text-align: center;
    -webkit-animation: fadeinout .5s infinite;
    animation: fadeinout .5s infinite;
}

@-webkit-keyframes fadeinout {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes fadeinout {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}


/***************************

SOCIAL MEDIA

****************************/


#social {
    text-align: center;
    margin-bottom: 3em;
    padding-bottom: 2em;
    border-bottom: 1px solid #f2bcac;
    color: var(--white);

}

#social h1 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: .5em;
}

#social a {
    font-size: 1.25em;
    text-decoration: none;
    display: inline-block;
    margin: 0 1em;
    font-family: var(--sans), sans-serif;
    font-weight: 600;
    color: #f2bcac;
}

#social a:hover {
    text-decoration: underline;
}

#social .social img {
    height: 1.25em;
}

/***************************

FLATRION FIRST EDITION SIGN UP

****************************/


#newsletter {
    width: 100%;
    max-width: 100em;
    margin: 0 auto 3em;
    font-family: var(--sans), sans-serif;

}

#newsletter h1 {
    font-size: 1.5em;
    letter-spacing: .05em;
    line-height: 1.25em;
    margin: 0 2em;
    font-weight: 600;
    text-transform: uppercase;
}


/***************************

FOOTER & COPYRIGHT

****************************/

footer {
    background: #000 url(../img/stars.gif) fixed;
    text-align: center;
    color: var(--white);
    padding: 3em 0 2em;

}


footer a {
    color: var(--white);
}

footer span {
    content: '';
    display: inline-block;
    width: 1em;
}

#logo {
    display: inline-block;
    width: 4em;
    margin: 0 0 1em 0em;
}

#logo img {
    width: 100%;
}




footer .social a:hover {
    text-decoration: underline;
}

footer .social img {
	display: inline-block;
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
    margin-right: .25em;
}

#copy {
    font-family: var(--sans), sans-serif;
    font-weight: 600;
}


footer #logo-lockup .social {
	
    font-family: var(--sans), sans-serif;
    font-weight: 600;
    display: block;
    text-align: center;
	margin-bottom: 1em;
}

footer #logo-lockup .social a {
    font-size: 1.25em;
    text-decoration: none;
    line-height: 0;
    font-weight: bold;
}

footer #logo-lockup .social a {
    white-space: nowrap;
    margin: 0 1em .5em 0;
    display: inline-block;
}

footer #logo-lockup .social a:hover {
    text-decoration: underline;
}

footer #logo-lockup .social img {
    height: 1.25em;
    width: 1.25em;
    vertical-align: -.25em;
    margin-right: .25em;
}

footer #logo-lockup .social div {
    display: inline-block;
    margin: auto;
}

footer ul {
	list-style: none;
	margin: 0 5vw 0;
	line-height: 1.5;
	padding: 0;
	text-align: center;
	justify-content: center;
	display: flex;
	gap: 1.5em;
	position: relative;
}

a.cookie-privacy:after {
	content: "";
	display: inline-block;
	vertical-align: -.6em;
	width: 2.5em;
	height: 1.5em;
	background-image: url(https://us.macmillan.com/wp-content/themes/macmillan-publishers/images/privacy-policy.png);
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: .5em;
}
/*!!!!!!!!!!!!!!!!!!!!!!

MEDIA QUERIES

!!!!!!!!!!!!!!!!!!!!!!*/


/* Medium Desktop & Landscape iPad */

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


   #curse .buylinks ul li {
        flex: 0 1 24%;
        /* Three buttons per line */
        margin-bottom: 2%;
    }
    
     .buylinks ul li {
        flex: 0 1 32%;
        /* Three buttons per line */
        margin-bottom: 2%;
    }

    .reviews br {
        display: none;
    }

    .reviews .section div {
        align-self: flex-start;
    }

    .reviews q {
        font-size: 1.5em;
    }
    .tour br {
        display: block;
    }

}

/* Medium Desktop & Landscape iPad */

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

    body {
        background-position: calc(50%)
    }

    .section {
        max-width: 80rem;
    }

    .book header h1 {
        font-size: 3em;
    }

    .book  header {
        margin-bottom: 2em;
    }

    .book  picture {
        width: 35%;
    }


    #ouabh header,
    #ouabh .buylinks, #curse header,
    #curse .buylinks {
        padding-left: calc(35% + 2em);
        /* LEFT MARGIN: Bookshot width + 2em */
    }

    #ballad header,
    #ballad .buylinks {
        padding-right: calc(35% + 2em);
        /* LEFT MARGIN: Bookshot width + 2em */
    }


     .desc {
        padding: 0 !important;
        clear: both;
    }


    .download a {
        font-size: 2em;
    }

    hr {
        margin: 2em 40%;
    }


    #newsletter form {
        width: 100%
    }

    #newsletter #countryrules div {
        margin: 1em 2em 0;

    }

    #newsletter form .email {
        flex: 2;
    }

 .tour .row div {
        white-space: normal;
    }
}

/* Small Desktop & Portrait iPad */

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

    body {
        font-size: 12px;
    }

    .section {
        padding: 0 5vw;
    }

    #ouabh.book picture, #curse.book picture {
        width: 40%;
        margin-left: 2em;
        float: right;
    }

      #ballad picture {
        width: 40%;
        margin-left: 2em;
        float: left;
    }

    .buylinks ul li, #curse .buylinks ul li {
        flex: 0 1 49%;
        /* Three buttons per line */
        margin-bottom: 2%;
    }

    #ouabh header, #ballad header, #curse header,
    #ouabh .buylinks, #ballad .buylinks, #curse .buylinks,
    #ouabh .desc, #ballad .desc, #curse .desc   {
        padding: 0;
        /* LEFT MARGIN: Bookshot width + 2em */
    }

    .book header h1 {
        font-size: 4em;
    }



    #curse header h3 br {
        display: none;
    }



    .buylinks h1 {
        font-size: 1.75em;
    }

    .buylinks h2 {
        font-size: 1.75em;
    }

    #events .tour {
        flex-flow: wrap;
    }

    .tour .ticket {
    }

    #ouabh #events br {
        display: block;
    }

    .download a {
        font-size: 2em;
        white-space: normal;
        text-indent: -1em;
        display: block;
    }


 #events .tour {
        display: block;
        text-align: left;
     border-bottom: 0;
    }

    .tour .row,
    .tour .header {
        display: flex;
        flex-flow: wrap;
        align-content: center;
        align-items: center;
        justify-content: space-between;
    }

    .tour .row div,
    .tour .header div {
        display: block;
        border: 0;
        padding-left: 1rem;
    }

    .tour .row {
        padding: 1em 0;

    }

    .tour .row div {
        padding: 0 1rem;
    }

    .tour .row:nth-child(even) {
        background: rgba(255,255,255,.6)
    }

    .tour .header .venue,
    .tour .header .host {
        display: none;
    }

    .tour .date {
        flex: 0 1 18rem;
        white-space: nowrap !important;
        padding-bottom: 1em;
    }

    .tour .row .date {
        border-right: 1px solid var(--pink) !important;

    }

    .tour .row:nth-child(odd) .date {

    }

    #events .tour .time {
        flex: 1 0 8rem;
    }

    .tour .host {
        flex: 0 1 100%;
        order: 4;
        padding: .5em 1rem 0 !important;
        font-weight: bold;
        text-transform: uppercase;
    }

    .tour .host:before {
        font-family: var(--serif);
        content: 'In conversation with ';
        text-transform: none;
        font-weight: normal;
        font-style: italic;
        line-height: 1.5rem;
        font-size: 1.25em;

    }


    .tour .venue {
        order: 5;
        flex: 1 0 50%;
        padding: .25em 1rem 1em !important;
    }

    .tour .venue:before {
        content: 'Venue: ';
        font-weight: bold;
        text-transform: uppercase;
        font-size: .8em;
        line-height: 1.5rem;
    }


    #events .tour .ticket, #events .tour .tbdticket {
        order: 3;
        flex: 0 1 12rem;
        text-align: center;
    }


    .tour br {
        display: none;
    }

}

/* Mobile Device */

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

    #ouabh, #ballad, #curse {
        padding: 0 0 2em;
    }

    #wp {
        background: rgba(63, 31, 113, .7);

    }

    #wp a {
        text-decoration-color: #dad1e6;
    }


     #ouabh header, #ballad header, #curse header {
        order: 1;
        margin: 0 auto 2em;
        text-align: center;
        background: black url(../img/stars.gif);
        width: 100%;
        padding: 2em 1em;
        color: var(--white)
    }

    .book header h1 {
        font-size: 9vw;
        /* responsive title font */
    }

    #curse header h1 {
        font-size: 11vw;
    }

     .book header h2 {
        font-size: 6vw;
        /* responsive author font */
        color: #f2bcac;
    }

    #ballad header h2 {
        color: #dad1e6;
    }

     .book header h3 {
        font-size: 1.25em;
        letter-spacing: .05em;
        color: #f2bcac
    }

    #ballad header h3 {
       color: #dad1e6
    }

    .section {
        /* Responsive side padding */
        padding: 0;
    }

    .buylinks,
    .book  .desc {
        /* Remove book float */
        margin: 0 5vw;
    }

    /* Reorder book details for mobile */

    .book .section {
        display: flex;
        flex-flow: wrap;
    }


    /* Option 1: Move buylinks next to bookshot */

    #ouabh picture, #ballad picture, #cuse picture {
        float: none;
        width: 20vw;
        flex: 1.5;
        margin: 0 2.5vw 1em 0;
    }

    .buylinks {
        text-align: center;
        flex: 1;
        margin-bottom: 2em;
    }

    .buylinks ul {
        display: block;
        font-size: .8em;
    }



    .js #ouabh picture, .js #ballad picture, .js #curse picture  {
        flex: 0 1 60%;
        order: 2;
        margin: -1em auto 0;
    }
	
	.mobilefix {
	padding-left: 3em !important
}
    .js .buylinks {
        flex: 0 1 100%;
        order: 1;
        margin: 0 auto 2em;
        width: 100%;
    }


    .js .buylinks button {
        width: 13em;
        font-family: var(--sans);
        color: var(--white);
        font-weight: bold;
        font-size: 1em;
        margin: 1em auto;
        text-align: left;
        display: block;
        border: 0;
        padding: .5em 3em .75em 1em;
        border-radius: 2em;
        background-image:
            linear-gradient(45deg, transparent 50%, var(--white) 50%),
            linear-gradient(135deg, var(--white) 50%, transparent 50%);
        background-position: calc(100% - 1.5em) center, calc(100% - 1em) center;
        border-color: var(--pink);
        background-color: var(--pink);
        background-size: .5em .5em, .5em .5em;
        background-repeat: no-repeat;
        outline: none;
        transition: background-color .2s ease;
    }

    .js .buylinks button.clicked {
        background-image:
            linear-gradient(135deg, transparent 50%, var(--bronze) 50%),
            linear-gradient(45deg, var(--bronze) 50%, transparent 50%);
        background-position: calc(100% - 1.5em) center, calc(100% - 1em) center;
        font-weight: bold;
        color: var(--bronze);
        transition: background-color .2s ease;
    }


    .js .buylinks div ul {
        display: none;
        margin-top: .5em;

    }

    .js .buylinks ul {
        display: block;
        text-align: left;
        padding: 0 5vw;
    }

    .js .buylinks ul li {
        margin-bottom: .5em;
        display: inline-block;
        width: 49%;
        text-align: center;
    }

    .js .buylinks ul li:nth-of-type(odd) {
        margin-right: 1%;
    }

    .js .buylinks ul li a {
        font-size: 1.25em;
        display: block;
    }


    .desc {
        order: 3;
    }

    .desc h1 {
        font-size: 3em;
    }

    .reviews {
        order: 4;
        padding: 3em 5vw;
    }

    .reviews .section {
        display: block;

    }

    .reviews h1 {
        font-size: 2em;
    }

    .reviews .section div:first-of-type hr:last-of-type {
        display: block;
    }


    .download a {
        font-size: 1.5em;
    }


     #events {
        order: 5;
        border-width: 2px;
        padding-top: 2em;
    }
    
    #events .tour {
        margin-top: 0;
    }

    #events h1 {
        font-size: 2.5em;
        margin: 0 5vw 0;
    }
    
    #events p {
        font-size: 1.75em;
        text-align: left;
        margin: .5em 5vw 1em ;
    }

    .tour .date {
        flex: 1 0 8rem;
        white-space: normal !important;
    }

    .tour .time {
        flex: 1;
    }




    #newsletter #countryrules div {
        text-align: left;
    }


    #newsletter form div {
        margin-top: .5em;
    }

    #newsletter form .country {
        flex: 1;
        order: 4;
        margin-right: 1%;
    }

    #newsletter form .email {
        flex: 1 0 100%;
        margin: 0 0 .5em 0;
    }

    #newsletter form #submit {
        order: 5;
        flex: 1;
    }

    footer {
        padding: 3em 5vw;
    }

    #social h1 {
        font-size: 2em;
    }

    footer span {
        content: '';
        display: block;
    }

}