@font-face {
    font-family: font1;
    src: url('../fonts/barlow/Regular.woff2') format('woff2'),
         url('../fonts/barlow/Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    /* font-display: optional; */
  }
  
  @font-face {
    font-family: font1;
    src: url('../fonts/barlow/Bold.woff2') format('woff2'),
         url('../fonts/barlow/Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    /* font-display: optional; */
  }

:root {
    --bg-color: #f8f9fa;
    --copy-color: #111;
    --primary: #06c;
    --secondary: #f80;
    --border-color: #e8e9ea;
    --grey: #88898a;
    --colums: 5;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.3s ease both;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media ( max-width: 1279px ) {
    :root { --colums: 4; }
}


@media ( max-width: 1023px ) {
    :root { --colums: 3; }
}

@media ( max-width: 639px ) {
    :root { --colums: 2; }
}

/*
@media ( max-width: 479px ) {
    :root { --colums: 1; }
}
*/



*,
*:before,
*:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/** /
* {
    outline: 1px dotted #cf0c;
}
/**/

html {
    font-size: 62.5%;
    line-height: 1.333em;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    width: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--copy-color);
    font: normal 1.6rem font1, arial, sans-serif;
    font-feature-settings: 'kern';
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    min-height: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

ul {
    list-style-type: none;
}

img {
    max-width: 100%;
}

#page-wrapper {
    max-width: 128rem;
    margin: 0 auto;
    padding: 0 2rem;
}

header {
    background-color: var(--bg-color);
    height: 13rem;
    left: 0;
    max-width: 128rem;
    padding: 0 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}



@media ( min-width: 1280px ) {
    header {
        left: calc( ( 100vw - 128rem ) / 2 );
    }
}

header:before {
    background-color: inherit;
    box-shadow: 0 0 .5rem #0001;
    content: '';
    display: block;
    height: 13rem;
    left: 0;
    right: 0;
    position: fixed;
    z-index: -1;
}



#logo {
    display: block;
    width: 28rem;
    position: absolute;
    top: 2rem;
}

@media ( max-width: 374px ) {
    #logo {
        top: 2.2rem;
        width: 23rem;
    }
}

#logo:hover {
    opacity: .66;
}

header .search-wrapper {
    display: block;
    position: absolute;
    right: 2rem;
    top: 1.7rem;
    width: 13rem;
}

.search-wrapper input {
    border: .2rem solid var(--border-color);
    border-radius: .4rem;
    font: normal 1.6rem/3.2rem font1, arial, sans-serif;
    height: 3.2rem;
    max-width: 100%;
    padding: 0 .4rem;
}

.search-wrapper input:focus {
    border-color: var(--primary)
}



#nav-toggle,
[for=nav-toggle],
footer nav#footer-nav,
header nav#main-nav,
header nav#meta-nav {
    display: none;
}

@media ( max-width: 519px ) {
    .search-wrapper {
        display: none !important;
    }

    #nav-toggle:checked ~ #page-wrapper header .search-wrapper {
        display: block !important;
    }

    #nav-toggle:checked ~ #page-wrapper header #logo {
        display: none;
    }
}

@media ( max-width: 1199px ) {
    [for=nav-toggle] {
        color: var(--copy-color);
        cursor: pointer;
        display: block;
        font-size: 3rem;
        line-height: 3rem;
        position: fixed;
        right: 2rem;
        text-align: center;
        top: 1.7rem;
        -webkit-user-select: none;
        user-select: none;
        width: 3rem;
        z-index: 100;
    }
    
    [for=nav-toggle] i:last-of-type {
        display: none;
    }
    
    #nav-toggle:checked ~ [for=nav-toggle] i:first-of-type {
        display: none;
    }

    #nav-toggle:checked ~ [for=nav-toggle] i:last-of-type {
        display: block;
    }

    #nav-toggle:checked ~ #page-wrapper header nav#main-nav {
        bottom: 0;
        display: block;
        left: 0;
        overflow-y: scroll;
        padding: 2rem;
        position: fixed;
        right: 0;
        scroll-behavior: smooth;
        top: 6.5rem;
        background-color: var(--primary);
        z-index: 60;
    }

    header nav#main-nav a {
        color: var(--bg-color);
        font-size: 2.1rem;
        line-height: 3.2rem;
        text-decoration: none;
    }

    header nav#main-nav a.active {
        color: var(--copy-color);
    }

    header nav#main-nav > ul > li> ul {
        display: none;
    }

    header nav#main-nav ul li.link--neu,
    header nav#main-nav ul li.link--veranstaltungen,
    header nav#main-nav ul li.link--widerrufsrecht {
        margin-top: 3rem;
    }
    
    header nav#meta-nav ul > li > ul {
        display: none;
    }
    
    header nav#main-nav ul li.link--veranstaltungen > ul {
      display: none;
    }
}

@media ( min-width: 1200px ) {
    header nav#main-nav {
        bottom: 2rem;
        display: block;
        left: 1.8rem;
        position: absolute;
    }
    
    header nav#main-nav ul {
        display: flex;
    }
    
    header nav#main-nav > ul > li {
        padding-right: 2rem;
    }
    
    
    header nav#main-nav ul > li > ul {
        display: none;
    }
    
    header nav#main-nav ul li.link--home,
/*    header nav#main-nav ul li.link--autor,*/
    header nav#main-nav ul li:nth-of-type(n+8) {
        display: none;
    }
    
    header nav#main-nav a {
        color: var(--primary);
        display: inline-block;
        font-size: 3rem;
        font-weight: bold;
        line-height: 3rem;
        padding-bottom: 1rem;
        position: relative;
        text-decoration: none;
        transition: transform .15s ease-in-out;
    }
    
    header nav#main-nav a:hover {
        transform: scale(1.05);
    }
    
    header nav#main-nav a:before {
        background-color: var(--primary);
        bottom: 0;
        content: '';
        display: block;
        height: .4rem;
        left: 0;
        opacity: 0;
        position: absolute;
        transform: scaleX(.3);
        transition: all .15s ease-in-out;
        width: 100%;
    }
    
    header nav#main-nav a.active:before,
    header nav#main-nav a:hover:before {
        opacity: 1;
        transform: none;
    }
    
    header nav#meta-nav {
        display: block;
        position: absolute;
        right: 15rem;
        top: 2.4rem;
    }
    
    header nav#meta-nav ul {
        display: flex;
    }
    
    header nav#meta-nav > ul > li {
        padding-right: 1rem;
    }
    
    header nav#meta-nav ul > li > ul {
        display: none;
    }
    
    header nav#meta-nav ul li:nth-of-type(-n+7) {
        display: none;
    }
    
    header nav#meta-nav a {
        color: var(--copy-color);
        display: inline-block;
        padding-bottom: .6rem;
        position: relative;
        text-decoration: none;
        transition: transform .15s ease-in-out;
    }
    
    header nav#meta-nav a:hover {
        transform: scale(1.05);
    }
    
    header nav#meta-nav a:before {
        background-color: var(--copy-color);
        bottom: 0;
        content: '';
        display: block;
        height: .2rem;
        left: 0;
        opacity: 0;
        position: absolute;
        transform: scaleX(.3);
        transition: all .15s ease-in-out;
        width: 100%;
    }
    
    header nav#meta-nav a.active:before,
    header nav#meta-nav a:hover:before {
        opacity: 1;
        transform: none;
    }
    
    header nav#meta-nav ul li.link--impressum,
    header nav#meta-nav ul li.link--datenschutz,
    header nav#meta-nav ul li.link--agb,
    header nav#meta-nav ul li.link--widerrufsrecht {
      display: none;
    }
    
    
    footer nav#footer-nav {
      display: block;
    }
    
    #footer-nav ul {
      bottom: 3.6rem;
      display: flex;
      flex-direction: row-reverse;
      gap: 1rem;
      position: absolute;
      right: 0;
    }
    
    #footer-nav li {
      display: none;
    }
    
    #footer-nav li.link--impressum,
    #footer-nav li.link--datenschutz,
    #footer-nav li.link--agb,
    #footer-nav li.link--widerrufsrecht {
      display: inline-block;
    }
    
    #footer-nav a {
        color: var(--copy-color);
        display: inline-block;
        padding-bottom: .6rem;
        position: relative;
        text-decoration: none;
        transition: transform .15s ease-in-out;
    }
    
    #footer-nav a:hover {
        transform: scale(1.05);
    }
    
    #footer-nav a:before {
        background-color: var(--copy-color);
        bottom: 0;
        content: '';
        display: block;
        height: .2rem;
        left: 0;
        opacity: 0;
        position: absolute;
        transform: scaleX(.3);
        transition: all .15s ease-in-out;
        width: 100%;
    }
    
    #footer-nav a.active:before,
    #footer-nav a:hover:before {
        opacity: 1;
        transform: none;
    }
}

main {
    margin-top: 13rem;
/*    padding: 8rem 0 0;*/
    padding: 0;
    position: relative;
}

@media ( max-width: 1199px ) {
    header {
        height: 6.5rem;
    }

    header:before {
        height: 6.5rem;
    }
    
    header .search-wrapper {
        right: 6rem;
    }
    
    main {
        margin-top: 6.5rem;
    }
}

/*
body.template--home main {
    padding-top: 0;
}
*/

main a {
    color: var(--primary);
    text-decoration: none;
}

main h1,
main h2,
main h3,
main ul,
main p {
    margin-bottom: 2rem;
}

main h1 {
    color: var(--primary);
    font-size: 4rem;
}

@media ( max-width: 413px ) {
    main h1 {
        font-size: 3rem;
    }
}

main h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

main h1 span.subtitle,
main h3 {
    color: var(--copy-color);
    font-size: 2rem;
    font-weight: normal;
}

main section.text ul li {
    padding-left: 2rem;
    position: relative;
}

main section.text ul li:before {
    content: '–';
    left: 0;
    position: absolute;
}

img.cover {
/*    border: .1rem solid #fff1;*/
    box-shadow: 0 0 .5rem #0003;
}

.search-row {
    padding: 2rem 0;
}

.search-row:nth-of-type(odd) {
    background-color: var(--border-color);
}

.search-row:last-of-type {
    margin-bottom: 4rem;
}

.author--book-wrapper,
.book-wrapper {
	background-color: var(--border-color);
	padding: 4rem 0;
}

.author-wrapper,
.book--author-wrapper {
	background-color: var(--primary);
	color: var(--bg-color);
	padding: 4rem 0;
}

.author-wrapper h1 {
	color: var(--bg-color);
	margin-bottom: 4rem;
}


.book--author-books,
.author--books {
	padding: 4rem 0;
}

@media ( min-width: 768px ) {
    .event,
/*    .events,*/
    .search-row,
    .author-wrapper,
    .book--author-wrapper,
    .book-wrapper {
        align-items: start;
        display: grid;
        gap: 4rem;
        grid-template-columns: 28rem 1fr;
    }
}

.events > div,
.event > article,
.author-bio,
.book-description {
  max-width: 60rem;
}

.book-info {
    /* align-self: start; */
    position: sticky;
    top: 0;
    z-index: 1;
}

.cover-link {
    display: block;
}

.book-title {
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem;
}

.book-title h2 {
  order: -1;
}


table {
    border-collapse: collapse;
}

table th {
    padding-right: 1rem;
    text-align: left;
    vertical-align: top;
    width: 8rem;
}

h2 > a {
    color: var(--copy-color);
    text-decoration: none;
}

.author-bio a {
    color: var(--bg-color);
    text-decoration: underline;
}

.author-bio h2 > a {
    color: var(--bg-color);
    text-decoration: none;
}

h2 > a:hover {
    text-decoration: underline;
}

#hero-slider {
    background-color: var(--primary);
    padding: 2rem 0;
}

/*
@media ( min-width: 1280px ) {
    #hero-slider {
        padding: calc( ( 100vw - 124rem ) / 2 ) 0; 
    }
}

@media ( min-width: 1360px ) {
    #hero-slider {
        padding: 6rem 0 3rem;
    }
}
*/

.wide,
section {
    position: relative;
}

.wide:before,
section:before {
    background-color: inherit;
    content: '';
    display: block;
    height: 100%;
    left: -2rem;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: -1;
}

@media ( min-width: 1281px ) {
    .wide:before,
    section:before {
        left: calc( ( 100vw - 124rem ) / -2 );
    }
}

.slides {
    /* aspect-ratio: 1040 / 455; */
    /* height: 54rem; */
    position: relative;
    width: 100%
}

/*
@media ( max-width: 1280px ) {
    .slides {
        height: calc( 540 / 1280 * 100vw );
    }
}
*/

.slides .slide {
    position: absolute;
    top: 0;
}

#neuerscheinungen,
#literatur,
#krimis,
#demnaechst {
    padding: 4rem 0;
}

#hero-slider {
    padding-bottom: 4rem;
}

.slick-track {
    padding-bottom: 2rem;
    position: relative;
}

.slick-track li {
    display: flex;
    padding: 0 1rem;
}


section:not(#hero-slider,#autoren) .slick-track li {
    aspect-ratio: 1/1.8;
    /* outline: 1px dotted green; */
}

section:not(#hero-slider,#autoren) .slick-track li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/** /
section:not(#hero-slider,#autoren) .slick-track li a div {
    bottom: 0;
    position: absolute;
    width: 100%;
}
/**/

/* #hero-slider ul,
#neuerscheinungen ul,
#literatur ul,
#krimis ul,
#demnaechst ul,
#autoren ul {
  display: flex;
  margin: 0 auto;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-color: transparent transparent;
  scrollbar-height: 0;
  scrollbar-width: none;
}

#autoren ul,
#hero-slider ul {
    height: auto;
}

@media ( max-width: 1240px ) {
    #neuerscheinungen ul,
    #literatur ul,
    #krimis ul,
    #demnaechst ul,
    #autoren ul {
        height: auto;
    }
}

#hero-slider ul::-webkit-scrollbar,
#neuerscheinungen ul::-webkit-scrollbar,
#literatur ul::-webkit-scrollbar,
#krimis ul::-webkit-scrollbar,
#demnaechst ul::-webkit-scrollbar,
#autoren ul::-webkit-scrollbar {
  display: none;
}

#hero-slider ul li,
#neuerscheinungen ul li,
#literatur ul li,
#krimis ul li,
#demnaechst ul li,
#autoren ul li {
    flex: 0 0 calc( ( 100% - ( var(--colums) - 1 ) * 2rem ) / var(--colums) );
    margin: 0 1rem;
    scroll-snap-align: start;
}
#neuerscheinungen ul li a,
#literatur ul li a,
#krimis ul li a,
#autoren ul li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#neuerscheinungen ul li a div,
#literatur ul li a div,
#krimis ul li a div,
#demnaechst ul li a div,
#autoren ul li a div {
    margin-top: 1rem;
}



#hero-slider ul li {
    flex: 0 0 100%;
}
*/

/*
@media ( min-width: 1321px ) {
    #neuerscheinungen ul,
    #literatur ul,
    #krimis ul,
    #autoren ul {
        gap: 0 2rem;
        height: 58rem;
    }

    #autoren ul {
        height: auto;
    }

    #neuerscheinungen ul li,
    #literatur ul li,
    #krimis ul li,
    #autoren ul li {
        flex: 0 0 calc( 25% - 3rem );
    }
}
*/

section > .stepper > ul > li > a {
    display: block;
}

/*
#neuerscheinungen ul li > a,
#literatur ul li > a,
#krimis ul li > a,
#autoren ul li > a {
    transition: transform .15s ease-in-out;
}

#neuerscheinungen ul li > a:hover,
#literatur ul li > a:hover,
#krimis ul li > a:hover,
#autoren ul li > a:hover {
    transform: scale(.98);
}

#neuerscheinungen ul li > a > img,
#literatur ul li > a > img,
#krimis ul li > a > img,
#autoren ul li > a > img {
}
*/

#neuerscheinungen ul li > a > div,
#literatur ul li > a > div,
#krimis ul li > a > div {
    height: 8rem;
}

#autoren ul li > a > div {
    height: 4rem;
}

#neuerscheinungen ul li > a > div strong,
#literatur ul li > a > div strong,
#krimis ul li > a > div strong,
#demnaechst ul li > a > div strong,
#autoren ul li > a > div strong {
    text-transform: uppercase;
}

#demnaechst,
#literatur {
    background-color: var(--copy-color);
    color: var(--bg-color);
    padding: 4rem 0;
}

#demnaechst > h1,
#literatur > h1 {
    color: var(--bg-color);
    margin-bottom: 4rem;
}

#demnaechst a,
#literatur a {
    color: var(--bg-color);
}

#autoren {
    background-color: var(--primary);
    color: var(--bg-color);
    padding: 4rem 0;
}

#autoren > h1 {
    color: var(--bg-color);
    margin-bottom: 4rem;
}

#autoren a {
    color: var(--bg-color);
}

#autoren-liste {
    background-color: var(--primary);
    /* color: var(--bg-color); */
    padding: 0 0 4rem;
}

#autoren-liste > h1 {
    color: var(--bg-color);
    margin-bottom: 4rem;
}

#autoren-liste > ul {
    columns: var(--colums);
    column-gap: 2rem;
}

@media ( min-width: 1240px ) {
    #autoren-liste > ul {
        column-gap: 4rem;
    }
}

#autoren-liste a {
    color: var(--bg-color);
}

#autoren-liste a + span {
    float: right;
    display: none;
}

@media ( min-width: 768px ) {
  #autoren-liste a:hover + span {
      display: inline-block;
  }
}

#hero-slider .slider-items {
    padding-bottom: 2rem;
}

.stepper {
    padding-bottom: 4rem;
    position: relative;
}

.steppercontrols {
    bottom: 0;
    display: block;
    height: 4rem;
    line-height: 4rem;
    position: absolute;
    text-align: center;
    width: 100%;
}

.steppercontrols span {
    display: inline-block;
}

.steppercontrols .prev,
.steppercontrols .next {
    color: var(--secondary);
    cursor: pointer;
    display: inline-block;
    font-size: 4rem;
    height: 2rem;
    position: absolute;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    /* top: -10.5rem; */
    top: 0;
    -webkit-user-select: none;
    user-select: none;
    width: 2rem;
    z-index: 10;
}

/*
#hero-slider .steppercontrols .prev,
#hero-slider .steppercontrols .next {
    top: -6.5rem;
}

.steppercontrols .prev { left: -4rem; }
.steppercontrols .next { right: -4rem; }
*/

/* @media ( max-width: 1360px ) { */
    .steppercontrols .prev,
    .steppercontrols .next {
      top: 0 !important;
    }

    .steppercontrols .prev { left: 0; }
    .steppercontrols .next { right: 0; }
/* } */

.steppercontrols .inactive {
    color: var(--grey);
    opacity: .25;
    cursor: default;
}

.steppercontrols .prev:not(.inactive):hover,
.steppercontrols .next:not(.inactive):hover {
    transform: scale(1.1);
}

.dots {
    padding-top: .6rem;
}

.dot {
    cursor: pointer;
    display: inline-block;
    height: 2.1rem;
    margin: .1rem;
    position: relative;
    width: 3.9rem;
}

.dot:before {
    background-color: var(--border-color);
    border-radius: .3rem;
    content: '';
    display: block;
    height: .3rem;
    left: 0;
    position: absolute;
    right: 0;
    top: .9rem;
    transition: height .15s ease-in-out, top .15s ease-in-out;
    width: 100%;
}

.dot.pos:before {
    background-color: var(--secondary);
}

.dot:hover:before {
    border-radius: .3rem;
    height: .5rem;
    top: .8rem;
}

/*
section#hero-slider .dot.pos:before,
section#autoren .dot.pos:before {
    background-color: var(--copy-color);
}
*/

.book-list {
    background-color: var(--primary);
    color: var(--bg-color);
    padding: 4rem 0;
}

.book-list h1 {
    color: var(--bg-color);
}

.book-list a {
    color: var(--bg-color);
}

.book--author-books ul,
.author--books ul,
.book-list ul {
    /*
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    margin: 4rem 0;
    width: 100%
}

.book--author-books ul li,
.author--books ul li,
.book-list ul li {
    display: flex;
/*    flex: 0 0 calc( 20% - 2rem );*/
    flex-direction: column;
/*    gap: 1rem;*/
/*    justify-content: flex-end;*/
    justify-content: space-between;
    height: 100%;
}

@media ( max-width: 1023px ) {
    .book--author-books ul,
    .author--books ul,
    .book-list ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    
    /*
    .book--author-books ul li,
    .author--books ul li,
    .book-list ul li {
        flex: 0 0 calc( 25% - 2rem );
    }
    */
}

@media ( max-width: 767px ) {
    .book--author-books ul,
    .author--books ul,
    .book-list ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    /*
    .book--author-books ul li,
    .author--books ul li,
    .book-list ul li {
        flex: 0 0 calc( 33.33% - 2rem );
    }
    */
}

@media ( max-width: 479px ) {
    .book--author-books ul,
    .author--books ul,
    .book-list ul {
        grid-template-columns: 1fr 1fr;
    }
    /*
    .book--author-books ul li,
    .author--books ul li,
    .book-list ul li {
        flex: 0 0 calc( 50% - 1rem );
    }
    */
}

.book--author-books ul li > .book-info,
.author--books ul li > .book-info {
    height: 6rem;
}

.book-list--book-info {
    height: 8rem;
}

.book-list--book-info strong {
    text-transform: uppercase;
}

section.event,
section.events {
  background-color: var(--primary);
  color: var(--bg-color);
  padding: 4rem 0;
}

section.text {
    background-color: var(--primary);
    color: var(--bg-color);
/*    padding: 4rem 0 4rem 32rem;*/
    padding: 4rem 0;
/*    max-width: 92rem;*/
    max-width: 62rem;
}

section.event h1,
section.events h1,
section.text h1 {
    color: var(--bg-color);
    margin-bottom: 4rem;
}

section.events h1 {
  margin-bottom: 0;
}

section.events ul {
  margin: 4rem 0 0;
}

section.events ul li {
  margin-bottom: 4rem;
}

section.event a,
section.events a {
  color: var(--bg-color);
}
section.text a {
    color: var(--bg-color);
    text-decoration: underline;
}

@media ( max-width: 979px ) {
    section.text {
        padding-left: 0;
    }
}

section.author-events {
  background-color: var(--primary);
  color: var(--bg-color);
  padding: 4rem 0;
}

section.author-events a,
section.author-events h3 {
  color: var(--bg-color);
}

footer {
    padding: 4rem 0;
    position: relative;
}

footer:before {
    background-color: var(--border-color);
    content: '';
    display: block;
    height: 100%;
    left: -2rem;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: -1;
}

@media ( min-width: 1240px ) {
    footer:before {
        left: calc( ( 100vw - 124rem ) / -2 );
    }
}

footer #dino {
    position: absolute;
    right: 0;
    top: 4rem;
    width: 12rem;
}

@media ( max-width: 413px ) {
    footer #dino {
        display: none;
    }
}

footer #dino:hover {
    opacity: .66;
}

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

footer .social-links {
    font-size: 3.2rem;
    margin-top: 2rem;
}

footer .social-links a {
    color: var(--copy-color);
    margin-right: 1.6rem;
}

footer .social-links a:hover {
    color: var(--primary);
}

ul#list > li {
	display: flex;
	justify-content: space-between;
	padding: 2rem 0;
}

ul#list > li > .cover {
	display: block;
	position: relative;
/*	width: 15%;*/
	width: 14.7rem;
}

ul#list > li > .cover.placeholder {
	background-color: rgba( 0, 0, 0, .05 );
	height: 14.7rem;
}

.title-cover img,
.cover img {
	box-shadow: 0 0 .5rem rgba( 0, 0, 0, .5 );
}

ul#list > li > div {
	display: block;
/*	width: 80%;*/
	width: calc( 100% - 19.5rem );
}

@media ( max-width: 539px ) {
	ul#list > li {
		display: block;
	}
	ul#list > li > div {
		width: 100%;
	}
}

ul#list h2 {
	margin-bottom: .5rem;
}

ul#list h3 {
	font-weight: normal;
}

.form-wrapper {
  background-color: var(--primary);
  color: var(--bg-color);
  padding: 2rem 0;
}

.form-wrapper a {
  color: var(--bg-color);
  text-decoration: underline;
}

body.page--cart main {
  padding: 2rem 0;
}

body.page--checkout main {
  padding: 2rem 0 0;
}

body.page--checkout ul li div p {
  margin-bottom: 0;
}

body.page--checkout .form-field {
	display: flex;
	margin-bottom: 2rem;
}

body.page--checkout .form-field .form-label {
	width: 32rem;
}

@media ( max-width: 640px ) {
	body.page--checkout .form-field {
		display: block;
	}
	
	body.page--checkout .form-field .form-label {
		width: 100%;
	}
}

body.page--checkout input[type=text],
body.page--checkout input[type=email] {
	font: 2rem/2.9rem font1, arial, sans-serif;
	padding: .2rem .8rem;
}

button,
.button {
  border-radius: .4rem;
}

body.page--checkout button[type=submit],
body.page--checkout button[type=reset] {
	font: 2rem/2.9rem font1, arial, sans-serif;
	cursor: pointer;
	padding: .2rem .8rem;
}

body.page--checkout button[type=submit] {
	background-color: var(--bg-color);
	color: var(--primary);
}

body.page--checkout textarea {
	font: 2rem/2.9rem font1, arial, sans-serif;
	min-height: 16rem;
	padding: .2rem .8rem;
}

/**/
#fullorder,
body.page--checkout div.form-field.dontshow {
	outline: .1rem dashed green;
  display: none;
}
/**/

body.page--checkout .form-honeybear {
	display: none;
}

body.page--cart .button,
button.add-to-cart {
  background-color: var(--primary);
  color: var(--bg-color);
  font: 2rem/2.9rem font1, arial, sans-serif;
  cursor: pointer;
  margin: 2rem 0;
  padding: .2rem .8rem;
  text-align: left;
  width: 100%;
}

body.page--cart .button:hover,
button.add-to-cart:hover {
  box-shadow: 0 0 .5rem rgba( 0, 0, 0, .3 );
}

body.template--author .button,
body.template--book .button {
  background-color: var(--bg-color);
  color: var(--primary);
  cursor: pointer;
  display: block;
  font: 2rem/2.9rem font1, arial, sans-serif;
  margin: 2rem 0;
  padding: .2rem .8rem;
  text-align: left;
  width: 100%;
}

body.template--book .actions button {
  margin-top: 0 !important;
}

body.template--author .button:hover,
.button:hover {
  box-shadow: 0 0 .5rem rgba( 0, 0, 0, .1 );
}


.cart-actions form {
	display: inline-block;
}

.cart-actions input.quantity {
	font: 1.5rem/2.1rem font1, arial, sans-serif;
	cursor: pointer;
	margin: 2rem 0;
	padding: .2rem;
	text-align: center;
}

.cart-actions button {
	background-color: var(--primary);
	color: #fff;
	font: 1.5rem/2.1rem font1, arial, sans-serif;
	cursor: pointer;
	margin: 2rem 0;
	padding: .2rem .4rem;
}

#order {
/*	background-color: transparent;*/
	font: 1.5rem/2.1rem font1, arial, sans-serif;
	height: 20rem;
	width: 100%;
}



.finqlink {
    background-color: var(--bg-color);
/*    border: .05rem solid #000;*/
    border-radius: .6rem;
    display: inline-block;
    padding: .6rem .2rem .2rem .6rem;
}

.finqlink:hover {
    background-color: var(--border-color);
}

.finqlink img {
    width: 16rem;
}

/* BEGIN COOKIEBANNER */

#cookiebannerbg {
  background-color: rgba( 0, 0, 0, .5 );
  bottom: 0;
  display: block;
  left: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

@supports ( ( -webkit-backdrop-filter: blur(10px) ) or ( backdrop-filter: blur(10px) ) ) {
  #cookiebannerbg {
/*    background-color: rgba( 255, 255, 255, .8 );*/
    backdrop-filter: saturate(180%) blur(1px);
    -webkit-backdrop-filter: saturate(180%) blur(1px);
  }
}

#cookiebanner {
  color: #fff;
  background-color: var(--primary);
  border-radius: .4rem;
  box-shadow: 0 0 .5rem rgba( 0, 0, 0, .25 );
  display: block;
  font-size: 1.8rem;
  left: 2rem;
  padding: 2rem;
  position: fixed;
  bottom: 2rem;
  width: 30rem;
  z-index: 10000;
}

@media screen and ( max-width: 639px ) {
  #cookiebanner {
    left: 1rem;
  }
}

#cookiebanner a {
  color: #fff;
  text-decoration: underline;
}

#cookiebanner > div {
  max-width: 96rem;
  margin: 0 auto;
  text-align: center;
}

.cookiebanner fieldset {
  border: .1rem solid #fff;
  border-radius: .4rem;
  margin: 2rem 0;
  padding: 0 1rem 1rem 1rem;
}

.cookiebanner fieldset label {
  cursor: pointer;
  display: block;
  padding-left: 2rem;
  position: relative;
  text-align: left;
  width: 100%;
}

.cookiebanner fieldset label input[type=checkbox] {
  left: 0;
  position: absolute;
  top: .8rem;
}

.cookiebanner fieldset label small {
  display: block;
  line-height: 1.8rem;
}

body.cookiebanner {
/*  margin-top: 44px;*/
}

.disallowed-external-content button,
a.btn {
  background-color: #fff;
  color: var(--primary) !important;
  cursor: pointer;
  display: block;
  font-size: 1.8rem;
  border-radius: .4rem;
  line-height: 1.8rem;
/*  margin-top: 2rem;*/
  padding: .6rem;
}

.disallowed-external-content button {
  margin-bottom: 0;
  margin-top: 1rem;
}

.disallowed-external-content button:hover,
a.btn:hover {
  color: #333;
}

.disallowed-external-content {
  border: .1rem solid var(--bg-color);
  border-radius: .3rem;
  color: #fff;
  display: block;
  padding: 2rem;
}

/* END COOKIEBANNER */


/* MAILCHIMP */

#mc-embedded-subscribe-form {
  background-color: var(--bg-color);
  border-radius: .3rem;
  color: var(--copy-color);
  padding: 2rem 2rem 6rem 2rem;
  position: relative;
  width: 100%;
}

#mc-embedded-subscribe-form .indicates-required {
  position: absolute;
  right: 2rem;
  top: 2.5rem;
}

#mc-embedded-subscribe-form input[type=email] {
  border: .1rem solid var(--border-color);
  font: inherit;
  margin-bottom: 2rem;
  padding: .5rem;
  width: 24rem;
}

#mc-embedded-subscribe-form input[type=submit] {
  background-color: var(--primary);
  border-radius: .3rem;
  color: #fff;
  font: inherit;
  margin-bottom: 2rem;
  padding: .5rem;
}

#mc-embedded-subscribe-form .brandingLogo {
  bottom: 0rem;
  position: absolute;
  right: 2rem;
}