/*
Theme Name: AhlbackAgency2016
Theme URI: http://www.ahlbackagency.com
Author: Ahlback Agency
Author URI: http://www.ahlbackagency.com
Description: Wordpress theme for a literary agency Ahlback Agency
Version: 0.3
License: Restricted
License URI: http://www.ahlbackagency.com
Text Domain: ahlbackagency2016
Tags: Magenta, grey, all the joy. Masonry, Isotope and good responsiveness.
*/

@font-face {
    font-family: "RF Dewi";
    src:
        url("fonts/rfdewi-semibold-webfont.woff2") format("woff2"),
        url("fonts/rfdewi-semibold-webfont.woff") format("woff"),
        url("fonts/rfdewi-semibold-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
/* Variables */
:root {
    --primary-color: #ffffff;
    --grey: #d8d8d8;
    --light-grey: rgb(175 175 175);
    --light: #f3f3f3;
    --light-blue: #c9d5f92e;
    --magenta: #de007e;
    --magenta-light: #ff5bb8;
    --magenta-dark: #af0063;
    --hover-bg: #fcf4f8;
    --paragraph-color: #000000;
    --font-paragraph: "Open Sans", sans-serif;
    --font-header: "RF Dewi", sans-serif;
}

/* Normalizing */

body {
    margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],
template {
    display: none;
}
a {
    background-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b,
strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
small {
    font-size: 80%;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1em 40px;
}
hr {
    box-sizing: content-box;
    height: 0;
}
pre {
    overflow: auto;
}
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input {
    line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
}
optgroup {
    font-weight: bold;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td,
th {
    padding: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .page-section:first-child {
        margin-top: 24px !important;
    }
}
.page-section__heading H2,
.page-section__heading H1 {
    font-family: var(--font-header) !important;
    font-size: 1.65rem !important;
}
.page-section__heading:after {
    margin-bottom: 0.8em !important;
}
.page-section__inner {
    padding: 64px 32px !important;
}

/************** Typography ***************/

body,
input,
select,
textarea {
    color: var(--paragraph-color);
    font-family: var(--font-paragraph);
    font-size: 18px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
h1,
h2,
button,
.pieni-book-box-kirjantiedot,
.sample-links {
    color: var(--magenta);
    font-family: var(--font-header);
    clear: both;
}
h1,
h2 {
    font-size: 1.65rem;
    color: var(--magenta);
    line-height: 1.65em;
    margin: 0;
}

h3,
h4,
h5,
h6 {
    font-family: var(--font-paragraph);
    color: var(--paragraph-color);
    clear: both;
}
button {
    text-transform: uppercase;
}

.page-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0 16px;
    overflow: hidden;
    margin-bottom: 25px;
}
.page-title {
    flex: 0 0 auto;
    margin-block-start: 0;
    margin-block-end: 0;
}
.page-header:after {
    content: "";
    flex: 1 1 auto;
    border-bottom: 2px solid var(--magenta);
    margin-bottom: 0.6em;
    min-width: 225px;
}
article .read-more {
    font-family: var(--font-header);
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: lowercase;
    padding-left: 22px;
    position: relative;
    transition: all ease-in-out 0.25s;
}
article .read-more:hover {
    padding-left: 28px;
    color: var(--magenta-dark);
}
article .read-more:before {
    content: "";
    width: 12px;
    border-top: 2px solid var(--magenta);
    position: absolute;
    left: 0;
    top: 50%;
}

div.home H1 {
}
article header.entry-header H1,
header.ala-header H2 {
    font-weight: 500;
    font-size: 2.6rem;
    line-height: 1.25em;
}
article header.entry-header H1 {
    /* margin: 52px 0 10px 6px; */
    margin: 0;
}
article header.ala-header H2 {
    margin: 38px 0 10px 6px;
}
article header H2 a {
    color: #666666;
}
p {
    font-family: var(--font-paragraph);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1.5em;
}
.pieni-book-box-author {
    font-size: 1rem;
    font-weight: 600;
    color: var(--magenta);
    padding: 0;
    margin: 8px 0 0 0;
    line-height: 1.1em;
}
.pieni-book-box-kirjannimi {
    color: #000000;
    padding: 0;
    margin: 8px 0 0 0;
    line-height: 1.1em;
}
.pieni-book-box-tiedot {
    font-size: 0.9em;
    color: #888888;
    padding: 0;
    margin: 8px 0 0 0;
}
.pieni-author-box-excerpt {
    font-size: 0.9em;
    padding: 0;
    margin: 8px 0 0px 0;
    line-height: 1.3em;
}
.author-boksi .author-links a {
    font-family: var(--font-paragraph);
    text-transform: uppercase;
    font-size: 0.9em;
}
.main-navigation {
    font-family: var(--font-paragraph);
    text-transform: uppercase;
    font-size: 80%;
}
footer.site-footer {
    font-family: var(--font-paragraph);
    font-size: 0.9em;
    color: #ffffff;
}
footer.site-footer a {
    color: #ffffff;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

address {
    margin: 0 0 1.5em;
}
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}
.magenta {
    color: var(--magenta);
}

/*--------------------------------------------------------------
## Global links
--------------------------------------------------------------*/
a {
    color: var(--magenta);
    text-decoration: none;
}
a:hover,
a:focus,
a:active {
    color: #000000;
}
a:focus {
    outline: thin dotted;
}
a:hover,
a:active {
    outline: 0;
}
.newslist a,
H2 a {
    color: #000000;
    transition: color 100ms ease-out;
}
.newslist a:hover,
H2 a:hover {
    color: var(--magenta);
    transition: color 100ms ease-out;
}
H2.entry-title a {
    color: var(--magenta);
    -webkit-transition: color 250ms ease-out;
    -moz-transition: color 250ms ease-out;
    -o-transition: color 250ms ease-out;
    transition: color 250ms ease-out;
}
H2.entry-title a:hover,
H2.entry-title a:focus,
H2.entry-title a:active {
    color: var(--magenta);
    -webkit-transition: color 200ms ease-out;
    -moz-transition: color 200ms ease-out;
    -o-transition: color 200ms ease-out;
    transition: color 200ms ease-out;
}

/**************** Structure ******************/

body {
    margin: 0 auto;
}
#page {
    width: 100%;
    margin: 0;
    background-color: var(--primary-color);
}
header.site-header {
    height: 98px;
    border-bottom: 1px solid var(--grey);
}
.site-header-container {
    font-weight: 400;
    font-size: 1.15rem;
    display: flex;
    padding: 0 2%;
    max-width: 1500px;
    height: 98px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-evenly;
}

#content {
    max-width: 1200px;
    margin: 0 auto;
}
.content-area {
}
.clear1 {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 1px;
}
.clear10 {
    clear: both;
    width: 100%;
    height: 10px;
}
.clear30 {
    clear: both;
    width: 100%;
    height: 30px;
}

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 42px;
    row-gap: 15px;
}
@media screen and (max-width: 767px) {
    .two-columns {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
##  Team
--------------------------------------------------------------*/

@media screen and (min-width: 500px) and (max-width: 1023px) {
    .team-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 20px;
        margin: 20px 0 0 0;
    }
}
@media screen and (min-width: 1024px) {
    .team-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 42px;
        row-gap: 25px;
        margin: 25px 0 0 0;
    }
}
.team-member[href],
.team-member[onclick] {
    cursor: pointer;
}
.team-member-info-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 992px;
    padding: 35px;
    display: none !important;
    grid-template-columns: 21% 30% 41%;
    column-gap: 3%;
    background: var(--primary-color);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    margin: 0 auto;
}
.team-member-info-box.show {
    display: grid !important;
}
.team-member h2,
.team-member-info-box h2 {
    margin: 0;
    color: var(--paragraph-color);
    line-height: 1.15em;
}
.team-member h2 {
    margin: 25px 0 0 0;
}
.member-image img {
    display: block;
}
.team-member-info ul {
    list-style-image: url("img/icon-ok.svg");
    margin: 25px 0;
    font-size: 0.9rem;
    padding: 0 0 0 20px;
}
.close-button {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
.team-member-info-box .small-text {
    font-weight: 400;
}
.bold-small-text {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}
.modal-overlay {
    position: fixed;
    margin: 0 auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #c9d5f99e;
}
.no-pad {
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (max-width: 1040px) {
    .team-member-info-box {
        max-height: calc(100vh - 25px);
        overflow-y: auto;
        position: relative;
        width: 96%;
        margin: 25px 2%;
        top: unset;
        left: unset;
        transform: none;
    }
}
@media screen and (max-width: 860px) {
    .team-member-info-box.show {
        display: block !important;
    }
    .member-image {
        float: left;
        width: 26%;
    }
    .team-member-info {
        float: left;
        width: 60%;
        margin-left: 5%;
    }
    .member-description {
        float: left;
        width: 100%;
        padding-top: 25px;
    }
}
@media screen and (max-width: 480px) {
    .member-image {
        width: 100%;
    }
    .team-member-info {
        width: 100%;
        margin-left: 0;
        padding-top: 25px;
    }
    .member-description {
        width: 100%;
        padding-top: 10px;
    }
}

/*--------------------------------------------------------------
## Menus & Header
--------------------------------------------------------------*/
.logo-container {
    position: relative;
    width: 190px;
    margin: 0;
}
.logo-container img {
    display: block;
    width: 100%;
}
.guides-header-button {
}
.guides-header-button a {
    font-family: var(--font-paragraph);
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--magenta);
    display: inline-block;
    line-height: 1.25em;
    text-align: center;
    padding: 8px 12px;
    border: 2px solid var(--magenta);
    border-radius: 4px;
    background: var(--primary-color);
    transition: background ease 0.25s;
}
.guides-header-button a:hover {
    color: var(--magenta);
    background: var(--hover-bg);
}
.main-navigation {
    display: flex;
    text-align: center;
    margin: 0 0 0 1%;
    align-items: center;
}
.main-navigation ul {
    display: block;
    list-style: none;
    margin: 0 auto;
    text-align: center;
    padding-left: 0;
}
.main-navigation li {
    display: inline-block;
    position: relative;
    padding: 0 0.7em;
}
@media screen and (max-width: 991px) {
    .main-navigation li {
        padding: 0 0.4em;
    }
}
.main-navigation a {
    color: var(--paragraph-color);
    display: block;
    text-decoration: none;
    -webkit-transition: color 250ms ease-out;
    -moz-transition: color 250ms ease-out;
    -o-transition: color 250ms ease-out;
    transition: color 250ms ease-out;
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
    color: var(--magenta);
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--magenta);
    font-weight: 700;
}
.menu-toggle,
.main-navigation.toggled ul {
    display: none;
}
.search-icon {
    width: 50px;
    display: inline-block;
    height: 22px;
    text-align: center;
    cursor: pointer;
}
@media screen and (min-width: 767px) and (max-width: 1300px) {
    .search-icon {
        text-align: left;
    }
}
.searchbox {
    position: absolute;
    width: 22%;
    min-width: 340px;
    height: auto;
    right: 5%;
    z-index: 1;
    top: 87px;
    padding: 15px 0 5px 0;
    background: var(--primary-color);
    box-shadow: 0px 8px 24px rgb(0 0 0 / 15%);
    border-radius: 2px;
}
.searchbox input[type="text"] {
    width: 90%;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--magenta);
    padding: 3px;
    border: none;
    border-radius: 0;
}
.searchbox input[type="submit"] {
    width: 10%;
    height: 30px;
    border: none;
    background-image: url(/site2022/www/wp-content/themes/ahlbackagency2022/img/search-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--primary-color);
}
:focus-visible {
    outline: none;
}
.searchbox .search-form {
    display: flex;
    border-bottom: 2px solid var(--magenta);
    margin: 5px 15px;
}
.searchbox p {
    font-size: 0.9rem;
    font-weight: 400;
    padding: 8px 15px;
    display: inline-block;
    width: 100%;
    margin: 0;
}
.searchbox p span {
    font-weight: 700;
}
.searchbox .author-header a {
    display: block;
}
.searchbox p a {
    color: var(--paragraph-color);
    display: inline-block;
}
.img-on-search-box {
    width: 18%;
    height: auto;
    float: right;
    margin-left: 10px;
    display: block;
}
.searchbox .book-header:hover,
.searchbox .author-header:hover {
    background-color: var(--light);
}
.highlight {
    color: var(--magenta);
}
.searchbox hr {
    border-bottom: 1px solid var(--grey);
    margin: 10px 15px;
}

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

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}
*/

/************** Page  **********/

.page-description {
    font-size: 1.1em;
    padding-right: 8%;
    padding-left: 8%;
    font-weight: normal;
    font-style: italic;
    text-align: center;
}

/************** Structure * Etusivu **********/

.etusivun-uutisboksi {
    width: 25%;
    /* height: 260px; */
    min-height: 140px;
    float: left;
    display: block;
    margin: 10px 0 5px 0;
    padding: 0 20px;
}
.etusivun-uutisboksi .etusivu-featured-image {
    width: 100%;
    height: auto;
    display: block;
}
.etusivun-uutisboksi .etusivu-featured-image img {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}
.etusivun-uutisboksi .etusivu-featured-image img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}
.etusivun-uutisboksi .otsikko {
    text-align: center;
}
div.hotboxes .pieni-author-box-home {
    width: 15%;
    min-height: 200px;
    float: left;
    display: block;
    margin-right: 2%;
    padding: 0;
    background: #ffffff;
    border: 7px solid #ffffff;
    border-radius: 2px;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
div.hotboxes .pieni-author-box-home H2 {
    font-weight: 400;
    margin: 8px 0 10px 0;
    padding: 0;
}
div.hotboxes div:last-child {
    margin: 0;
}
div.pieni-author-box-home img {
    width: 100%;
    height: auto;
}

/************** Structure * Kirjasivu : Uutisboksi  **********/

.book-boksi,
.author-boksi,
.uutis-boksi,
.series-boksi {
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 0;
    display: table;
    position: relative;
}
.uutis-boksi {
    padding: 32px 0;
}
.uutis-boksi .entry-meta {
    font-weight: 700;
}
.news-featured-image,
.news-featured-image,
.news-teksti,
.news-featured-image-kolmepalkkia,
.news-teksti-kolmepalkkia,
.news-rights-sold {
    float: left;
}
.news-teksti {
    width: 68%;
    margin-left: 4%;
}
.news-featured-image {
    width: 23%;
}
/* Kolmella palkilla uutissivu */
.news-featured-image-kolmepalkkia {
    width: 20%;
    min-width: 120px;
}
.news-teksti-kolmepalkkia {
    width: 45%;
    margin-left: 2%;
}
.news-rights-sold {
    width: 30%;
    margin-left: 3%;
    padding: 15px 35px;
    background: var(--light-blue);
}
blockquote {
    margin: 0 1.5em 0 3em;
    position: relative;
}
blockquote:before {
    display: block;
    width: 24px;
    content: ' " ';
    font-size: 6rem;
    position: absolute;
    left: -52px;
    top: -17px;
    color: var(--magenta);
    font-family: var(--font-paragraph);
    font-weight: 500;
    line-height: 1em;
}

/*** Book only ****/

.book-page .author-name {
    font-weight: 600;
    letter-spacing: 0.4px;
    margin: 0;
    color: var(--magenta);
}
.book-boksi .book-image,
.series-boksi .book-image {
    float: left;
    width: 25%;
}
.book-boksi .book-image img,
.series-boksi .book-image img {
    margin: 25px 0;

    min-width: 120px;
    -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.book-boksi .book-image p,
.series-boksi .book-image p {
    display: block;
    margin: 3px 3px;
}
.reading_materials {
    padding-top: 14px;
}
.book-tags {
    padding-top: 14px;
}
.dl-button {
    display: flex;
    border: 2px solid var(--magenta);
    border-radius: 4px;
    padding: 7px 4px 7px 15px;
    gap: 10px;
    width: auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--magenta);
}
.dl-button:hover {
    color: var(--magenta);
    background: var(--hover-bg);
}
.book-boksi .book-stats {
    float: left;
    width: 20%;
    display: table-cell;
    font-weight: 400;

    padding-top: 1px;
    padding-right: 26px;
}
.book-boksi .book-stats .rights_sold {
    padding: 0;
    margin: 0;
}
.book-boksi .book-stats .rights_sold p {
    text-transform: none;
    font-weight: 400;
    padding: 5px 15px 6px 0;
    margin: 0;
}
.book-boksi .book-content {
    float: left;
    width: 40%;
    margin-left: 3%;
    display: table-cell;
}
.right-column {
    width: 29%;
    margin-left: 3%;
    float: left;
    padding: 15px 35px;
    background: var(--light-blue);
}
.praise-boksi {
    background: url("img/heittomerkki.png") 5% 25px no-repeat;
    padding: 25px 5% 0 34%;
    min-height: 165px;
}
.praise-boksi p {
    line-height: 1.3em;
}

.author-boksi .author-image {
    float: left;
    width: 24%;
    /* display: table-cell; */
    position: relative;
}
.author-image img {
    margin: 25px 0;
    width: 80%;
    min-width: 140px;
}
.author-boksi .author-content {
    float: left;
    width: 72%;
    display: table-cell;
}
.author-content a.more,
.author-content a.author-page-link {
    padding: 10px 14px;
    border: 2px solid var(--magenta);
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    margin: 0 10px 0 0;
}
.author-content .icon {
    display: inline-block;
    margin: 0 10px;
}
.author-content .icon img {
    display: block;
}
.author-content a.more {
    background: var(--magenta);
    color: var(--primary-color);
}
.author-content a.author-page-link {
    background: var(--primary-color);
    color: var(--magenta);
}
.author-content a.author-page-link:hover {
    color: var(--magenta);
    background: var(--hover-bg);
}

.filters-button-group {
    max-width: none !important;
}

@media only screen and (min-width: 760px) {
    .filters-button-group {
        justify-content: flex-start !important;
    }
}
.selectize-control {
    text-align: left !important;
}
.filter-regions {
    flex-direction: row !important;
    align-items: center !important;
    margin: 20px;
}
.filter-regions LABEL {
    color: var(--paragraph-color) !important;
}
.selectize-input > input {
    width: 230px !important;
}
@media screen and (max-width: 760px) {
    .filter-regions {
        flex-direction: column !important;
    }
}

/*** Book box & Author box links ****/

.author-boksi .author-links {
    float: left;
    width: 20%;
    min-height: 280px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding-top: 5%;
}
.author-boksi .author-links a,
.book-boksi .sample-links a,
.series-boksi .sample-links a {
    display: block;
    color: #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #b1007c;
    -webkit-transition: background-color 200ms ease-out;
    -moz-transition: background-color 200ms ease-out;
    -o-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
}
.author-boksi .author-links a {
    margin: 12px 0 0 20%;
    padding: 5px 12px;
}
.book-boksi .sample-links a,
.series-boksi .sample-links a {
    text-align: center;
    margin: 25px 0 30px 0;
    padding: 4px 10px;
    text-transform: uppercase;
}
.author-boksi .author-links a:hover,
.book-boksi .sample-links a:hover,
.series-boksi .sample-links a:hover {
    background-color: #000000;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    -o-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
}
.authors-links {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

/*** Series box and page ****/

.series-boksi .serie-content {
    float: left;
    margin-left: 8%;
    width: 60%;
    display: table-cell;
}

.puolet {
    width: 50%;
}
.kolmannes {
    width: 33%;
}
/*** Rights Guides****/

.rights-guide-boxes {
    display: flex;
}
.rights-guide-box {
    width: 130px;
    min-height: 380px;
    display: block;
    float: left;
    padding: 0;
    margin: 25px 30px 50px 0;
}
.rights-guide-box img {
    width: 100%;
    height: auto;
}
.rights-guide-box .dl-button-container {
    width: 100%;
    text-align: center;
}
.rights-guide-box-big {
    width: 25%;
    padding: 2%;
}
.rights-guide-box-big img {
    margin: 20px auto 0 auto;
    text-align: center;
}

/*** Film & TV ***/

.filmandtv H2.entry-title {
    padding: 0;
    margin: 15px 0 5px 6px;
}

/*** Newslists ****/

ul.newslist {
    width: 100%;
    display: block;
    list-style: none;
    padding: 0;
    margin: 25px 0 50px 0;
}
ul.newslist li {
    width: 100%;
    display: block;
    list-style: none;
    padding: 10px 50px 10px 3%;
    border-bottom: 1px solid #f6c9c5;
}
ul.newslist .headline {
    font-size: 1.1rem;
}

div.newslist-big {
    width: 100%;
    display: block;
    clear: both;
    padding: 0;
    margin: 25px 0 50px 0;
}
div.newslist-big .year-number {
    width: 100%;
    display: block;
    clear: both;
    padding: 10px 50px 10px 3%;
    border-bottom: 1px solid #f6c9c5;
}
div.newslist-big .headline {
    font-size: 1.2em;
}
.content-news-items {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .content-news-items {
        margin-inline: -16px;
    }
}

.news-item {
    width: 25%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 16px 25px;
}
.news-item-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.news-item-image a {
    width: 100%;
    padding-bottom: 150%;
    background-size: 100% auto;
    background-position: 50% 100%;
    background-repeat: no-repeat;
}
.news-item-content p {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light-grey);
    margin: 10px 0 15px 0;
}
.news-item-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}
.news-item-content h3 a {
    color: #000;
    transition: all 0.3s ease;
}

.news-item-content h3 a:hover {
    color: var(--magenta);
}

@media screen and (max-width: 991px) {
    .news-item {
        width: 33.33%;
    }
}
@media screen and (max-width: 767px) {
    .news-item {
        width: 50%;
    }
}
@media screen and (max-width: 480px) {
    .news-item {
        width: 100%;
        padding-inline: 0;
    }
}

/*** SORTS BOX ***/

#sorts {
    text-align: center;
    font-size: 1.1em;
    margin: 0 auto;
    padding: 0;
    clear: both;
    position: relative;
    display: block;
}
#sorts p {
    text-align: center;
    margin: -5px auto 20px 0;
    padding: 0;
}

/*********** Contact page  ***********/

.an-agent {
    width: 25%;
    float: left;
    position: relative;
    padding: 5px 25px 0 15px;
    margin: 0;
}
.an-agent img {
    width: 100%;
    max-width: 260px;
    height: auto;
}
.kartta1,
.kartta2 {
    width: 48%;
    float: left;
    height: 540px;
    margin: 0 0 30px 0;
}
.kartta1 {
    margin-right: 3%;
}
.kartta2 {
    margin-right: 0;
}
.kartta1 H1,
.kartta2 H1 {
    margin: 0 0 12px 0;
}

/************** Structure * Search page  ***************/

.search-results main {
    max-width: 920px;
    margin: 5em auto 2em auto;
}
.search-page {
    min-height: 350px;
}
.search-boksi {
}
.search-boksi h3 {
    text-transform: capitalize;
    margin: 0;
}
.search-boksi article {
    margin: 1em 0;
    width: 100%;
    display: inline-block;
}
.search-boksi h2.entry-title {
    font-size: 1.6em;
    margin: 22px 0 10px 0;
}
.img-on-search-page {
    width: 120px;
    height: auto;
    float: left;
    margin-right: 25px;
    display: block;
}
.search-boksi .book p {
    float: left;
    /* margin-left: 160px; */
    margin: 0;
}
.search-boksi hr {
    border-bottom: 1px solid var(--grey);
    margin: 2em 0;
}
.small-box {
    width: auto;
    display: flex;
    justify-content: center;
    margin: 14% auto 0 auto;
}
.small-box h2 {
    line-height: 1.25em;
    margin: 0.5em 0 0 1em;
}

/************** Structure * Footer  ***************/

footer.site-footer {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    background-color: var(--magenta);
    padding: 4em 0;
}
.mediafooter,
.site-info,
.bottom-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.site-info {
    display: flex;
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-rows: auto; */
    justify-content: space-between;
    flex-direction: row;
}
.site-info h3 {
    color: var(--primary-color);
    font-style: normal;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
    line-height: 2.5em;
}
.footer-links {
    width: 20%;
}
.footer-links ul {
    margin: 0;
    padding: 0;
}
.footer-links ul li {
    display: inline-block;
    width: 50%;
    float: left;
}
.footer-links a {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 12px 0 2px 0;
    font-weight: 600;
    overflow: hidden;
}
.footer-links a:before {
    content: "";
    position: absolute;
    bottom: 0;
    overflow: hidden;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition:
        opacity 0.3s,
        width 0.3s;
    opacity: 0;
}
.footer-links a:hover:before {
    width: 100%;
    opacity: 1;
}

.mail-list-button {
    display: inline-block;
    background: var(--primary-color);
    color: var(--magenta) !important;
    font-weight: 700;
    width: 220px;
    padding: 8px;
    margin: 14px 0;
    text-align: center;
    border-radius: 3px;
    border: 2px solid var(--primary-color);
    transition: all ease 0.25s;
}
.mail-list-button:hover {
    background: var(--magenta);
    color: var(--primary-color) !important;
}
.mediafooter {
    display: flex;
    width: 100%;
    margin: 10px auto 0 auto;
}
.mediafooter img {
    margin: 1px 8px 0 0;
}
.bottomfooter {
    display: inline-block;
    /* background-color: var(--primary-color); */
    color: var(--magenta);
    width: 100%;
}
.bottom-footer-content {
    padding: 0 20px;
    display: flex;
    height: 76px;
    align-items: center;
}
.small-text {
    font-family: var(--font-paragraph);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .footer-links {
        width: 25%;
    }
    .mail-list-button {
        width: 175px;
    }
}
@media screen and (max-width: 767px) {
    .site-info {
        flex-wrap: wrap;
    }
    .footer-info {
        width: 100%;
    }
    .footer-links,
    .mail-list-box {
        width: 50%;
        margin-bottom: 2em;
    }
}
@media screen and (max-width: 480px) {
    .footer-links,
    .mail-list-box {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Elements, bulkki-listaus
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}
body {
    background: #fff;
}
q:before,
q:after {
    content: "";
}
q {
    quotes: "" "";
}
hr {
    background-color: #b1007c;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}
ul,
ol {
    margin: 0 0 1.5em 3em;
}
ul {
    list-style: disc;
}
ol {
    list-style: decimal;
}
li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 1.5em 1.5em;
}
img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
}
select {
    border: 1px solid #ccc;
}
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
    color: #111;
}
textarea {
    width: 100%;
}
button.dl-button {
    border: none;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    box-shadow: none;
    background-color: #b1007c;
    -webkit-transition: background-color 220ms ease-out;
    -moz-transition: background-color 220ms ease-out;
    -o-transition: background-color 220ms ease-out;
    transition: background-color 220ms ease-out;
    color: #fff;
    font-size: 1em;
    line-height: 1em;
    padding: 6px 14px;
    margin: 14px auto;
}
button.dl-button:hover {
    border: none;
    color: #fff;
    box-shadow: none;
    background-color: #000000;
    -webkit-transition: background-color 150ms ease-out;
    -moz-transition: background-color 150ms ease-out;
    -o-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.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;
    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 1.5em 1.5em 0;
}
.alignright {
    display: inline;
    float: right;
    margin: 1.5em 0 1.5em 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-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-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%;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}
.hentry {
    margin: 0;
}
.byline,
.updated:not(.published) {
    display: none;
}
.single .byline,
.group-blog .byline {
    display: inline;
}
.page-content,
.entry-content,
.entry-summary {
    margin: 0;
}
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.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%;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 1.5em;
}
.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    box-shadow: none !important;
}
.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;
}
/** SPECIAL EROTIN **/
.clear-specialcase,
.clear-specialcase2,
.clear-specialcase3 {
    display: none;
}

/*--------------------------------------------------------------
##  Responsive layout
--------------------------------------------------------------*/

/** Structure * Etusivu  **/

@media screen and (max-width: 991px) {
    article header.entry-header H1,
    article header.entry-header H2,
    header.ala-header H2,
    header.ala-header H2.entry-title {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.45rem;
        line-height: 1.5em;
    }
    .etusivun-uutisboksi .otsikko {
        font-size: 80%;
    }
    div.hotboxes .pieni-author-box-home {
        width: 30%;
        min-height: 200px;
        float: left;
        display: block;
        margin-left: 1%;
        margin-right: 2%;
        padding: 0;
    }
    div.hotboxes div:last-child {
        margin-left: 1%;
        margin-right: 2%;
    }
    .clear-specialcase2 {
        display: block;
        clear: both;
        width: 100%;
        height: 15px;
    }
    .rights-guide-box-big img {
        width: 82%;
    }
    .an-agent p {
        font-size: 0.9em;
        margin-bottom: 20px;
        line-height: 1.4em;
    }
    .kartta1,
    .kartta2 {
        display: block;
        width: 100%;
        clear: both;
        float: none;
        margin-bottom: 50px;
    }
    .kartta1 H1,
    .kartta2 H1 {
        font-size: 1.7em;
    }
}

/** MAX 820PX lahinna vain uutisia varten **/
@media screen and (max-width: 820px) {
    /* Kolmella palkilla uutissivu */
    .news-featured-image-kolmepalkkia {
        width: 30%;
        min-width: 120px;
    }
    .news-teksti-kolmepalkkia {
        width: 62%;
        margin-left: 5%;
    }
    .news-rights-sold {
        width: 60%;
        float: right;
        margin: 25px 5% 20px 0;
    }
    ul.newslist li {
        font-size: 90%;
        padding: 7px 30px 7px 3%;
        border-bottom: 1px solid #f6c9c5;
    }
    .an-agent {
        width: 50%;
        float: left;
        position: relative;
        padding: 5px 30px 10px 30px;
    }
    .an-agent img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    .clear-specialcase3 {
        display: block;
        clear: both;
        width: 100%;
        height: 15px;
    }
}

@media screen and (max-width: 767px) {
    article header.entry-header H1,
    article header.entry-header H2,
    header.ala-header H2,
    header.ala-header H2.entry-title {
        font-size: 1.65rem;
    }
    h2 {
        font-size: 1.25rem;
        line-height: 1.5em;
    }
    .main-navigation li {
        display: inline-block;
        position: relative;
        padding: 10px 4px 20px 4px;
    }
    .guides-header-image {
        width: 145px;
        top: 20px;
    }
    .clear-specialcase {
        display: block;
        clear: both;
        width: 100%;
        height: 15px;
    }
    .etusivun-uutisboksi {
        width: 49%;
        padding: 0 30px;
        display: table-cell;
    }
    .etusivun-uutisboksi .otsikko {
        text-align: center;
        font-size: 90%;
    }
    .author-boksi .author-image {
        width: 26%;
    }
    .author-boksi img {
    }
    .author-boksi .author-content {
        width: 70%;
    }
    .author-boksi .author-links {
        width: 80%;
        clear: both;
        float: right;
        min-height: 80px;
        padding-bottom: 30px;
        padding-top: 20px;
    }
    .author-boksi .author-links a {
        margin: 12px 20% 0 20%;
        padding: 5px 12px;
    }

    .book-boksi .book-image,
    .series-boksi .book-image {
        float: left;
        width: 34%;
    }
    .book-boksi .book-stats,
    .book-boksi .book-content {
        float: right;
        width: 60%;
        margin-right: 0%;
        display: inline;
    }
    .book-boksi .right-column {
        width: 60%;
        margin-left: 6%;
        float: left;
        padding: 15px 35px;
        background: var(--light-blue);
    }
    .book-boksi .book-stats {
        margin-top: 6px;
    }
    .book-boksi .book-stats p {
        line-height: 1.2em;
        margin: 14px 0;
    }

    .praise-boksi {
        background: url("img/heittomerkkiPIENIRESO.png") no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding: 25px 13%;
        min-height: 180px;
    }
    .praise-boksi p {
        line-height: 1.4em;
    }
}

/*** MAX 610PX ja MENU TOGGLE ***/

@media screen and (max-width: 767px) {
    header.site-header,
    .site-header-container {
        height: 84px;
        padding: 0 3%;
    }
    #content {
        padding: 0 8px;
    }
    .search-icon {
        width: 20%;
    }
    .main-navigation {
        display: block;
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 84px;
        margin: 0;
        background: var(--primary-color);
    }
    .menu-toggle,
    .main-navigation.toggled ul {
        display: block;
    }
    .main-navigation ul {
        display: none;
    }
    .main-navigation.toggled ul.menu li {
        display: block;
        position: relative;
        padding: 10px 0;
        margin: 0;
        width: 100%;
        clear: both;
        border-bottom: 1px solid var(--magenta);
        font-size: 0.9em;
    }
    .guides-header-button a {
        font-weight: 600;
        font-size: 0.8rem;
    }
    button.menu-toggle {
        display: block;
        width: 100%;
        border: none;
        clear: both;
        padding: 8px;
    }
    .searchbox {
        min-width: 288px;
    }
}
/**
@media screen and (min-width: 611px ) {
	.menu-toggle,
	.main-navigation.toggled ul {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}
***/

@media only screen and (max-width: 759px) {
    .page-section__inner {
        padding: 20px !important;
    }
}

/*** MAX 540PX ***/

@media screen and (max-width: 540px) {
    article header.entry-header H1,
    article header.entry-header H2,
    header.ala-header H2,
    header.ala-header H2.entry-title {
        font-size: 1.25rem;
    }

    .etusivun-uutisboksi .otsikko {
        text-align: center;
        font-size: 80%;
    }
    .etusivun-uutisboksi {
        width: 49%;
        padding: 0 15px;
    }
    div.hotboxes .pieni-author-box-home {
        width: 90%;
        min-height: 200px;
        clear: both;
        margin-bottom: 20px;
        display: block;
        margin-left: 5%;
        margin-right: 5%;
        padding: 0;
    }
    div.hotboxes div:last-child {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .page-description {
        padding: 0 2%;
        font-size: 90%;
    }
    /* Kolmella palkilla uutissivu */
    .news-featured-image,
    .news-featured-image-kolmepalkkia {
        width: 80%;
        margin: 0 10% 25px 10%;
        clear: both;
    }
    .news-teksti,
    .news-teksti-kolmepalkkia {
        width: 94%;
        margin-left: 3%;
        clear: both;
    }
    .news-rights-sold {
        width: 92%;
        margin-left: 4%;
        clear: both;
    }
    .uutis-boksi div img.alignright,
    .uutis-boksi div img.alignleft {
        clear: both;
        display: block;
        margin: 1.5em auto;
    }
    .kakkosthumbit {
        width: 45%;
        margin-left: 0;
        margin-right: 5%;
        float: left;
    }
    .author-boksi .author-image {
        width: 100%;
        clear: both;
    }
    .author-image img {
        margin: 0;
        width: 100%;
        min-width: 140px;
    }
    .author-boksi .author-content {
        width: 100%;
        margin: 20px 0 10px 0;
    }
    .author-boksi .author-links {
        width: 100%;
        clear: both;
        float: right;
    }
    .rights-guide-box {
        width: 120px;
        min-height: 360px;
        display: block;
        float: left;
        padding: 0;
        margin: 20px 5px 10px 10px;
    }
    .rights-guide-box-big {
        width: 100%;
        clear: both;
        text-align: center;
    }
    .rights-guide-box-big img {
        width: 86%;
        margin: 20px auto 0 auto;
        text-align: center;
    }
    .an-agent {
        width: 100%;
        float: left;
        position: relative;
        padding: 5px 8% 20px 8%;
    }
    .an-agent img {
        margin: 0 auto;
        text-align: center;
    }

    .book-boksi .book-image,
    .series-boksi .book-image {
        float: left;
        width: 100%;
    }
    .book-boksi .book-stats,
    .book-boksi .book-content {
        float: left;
        width: 100%;
        margin-left: 0;
        margin: 40px 0;
    }
    .book-boksi .right-column {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 410px) {
    p {
        font-size: 0.9rem;
    }
    #content {
        padding: 0 5px;
    }
    .etusivun-uutisboksi {
        width: 100%;
        margin: 0 auto;
        padding: 0 4%;
        margin-bottom: 25px;
        display: table-cell;
    }
    div.hotboxes .pieni-author-box-home {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }
    div.hotboxes div:last-child {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }

    .book-boksi .book-image,
    .series-boksi .book-image {
        float: none;
        width: 100%;
        clear: both;
        display: block;
    }
    .book-boksi .book-stats,
    .book-boksi .book-content {
        float: none;
        width: 100%;
        margin: 40px 0;
        clear: both;
        display: block;
    }
    .book-boksi .right-column {
        padding: 20px;
    }
    .praise-boksi {
        padding: 20px 6%;
    }
    .clear-specialcase {
        display: none;
    }
}

/*--------------------------------------------------------------
# Screenwriters page
--------------------------------------------------------------*/
.screenwriters-directors-section {
    .page-section__inner {
        padding-bottom: 32px !important;
    }
}

.screenwriters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
    margin-top: 48px;
}

.screenwriter-item {
    text-align: left;
}

.screenwriter-thumbnail {
    overflow: hidden;
}

.screenwriter-thumbnail img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center 0%;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.4s ease-in-out;
}

.screenwriter-thumbnail:hover img {
    filter: grayscale(50%);
}

.screenwriter-title {
    font-family: var(--font-header);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px; /* 125% */
    transition: all 0.3s ease;
    margin: 24px 0 16px;
}

.screenwriter-title:hover {
    color: var(--magenta);
}

.screenwriter-description p {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
    margin: 0;
}

@media (max-width: 1024px) {
    .screenwriters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .screenwriters-grid {
        grid-template-columns: 1fr;
    }
}

.cta-section {
    padding: 32px 32px 46px;

    .cta-section__inner {
        text-align: center;

        p {
            font-family: var(--font-header);
            font-size: 24px;
            font-weight: 600;
            line-height: 30px; /* 125% */
            margin: 0;
        }
    }
}

/*--------------------------------------------------------------
# Single screenwriters details page
--------------------------------------------------------------*/
/* Ensures styles only apply to single screenwriter pages */
body.single-screenwriter .screenwriter-single {
    margin-top: 64px;
}

body.single-screenwriter .screenwriter-single .container {
    padding-inline: 32px;
}

body.single-screenwriter .screenwriter-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

/* Left Column: Featured Image */
body.single-screenwriter .screenwriter-image {
    flex: 1;
    max-width: 300px;
}

body.single-screenwriter .screenwriter-image img {
    width: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

body.single-screenwriter .screenwriter-image img:hover {
    filter: grayscale(0%);
}

/* Right Column: Details */
body.single-screenwriter .screenwriter-details {
    flex: 2;
}

body.single-screenwriter .screenwriter-title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 18px;
}

body.single-screenwriter .screenwriter-description {
    margin-bottom: 32px;
}

body.single-screenwriter .screenwriter-description p {
    color: black;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
    margin-bottom: 20px;
}

/* Awards & Nominations Section */
body.single-screenwriter .screenwriter-awards {
    background: rgba(201, 213, 249, 0.2);
    padding: 32px;
    margin-top: 20px;
}

body.single-screenwriter .screenwriter-awards.bg-white {
    background: #ffffff;
}

body.single-screenwriter .screenwriter-awards h3 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px; /* 162.5% */
    margin: 0 0 16px;
}

/* Awards Table */
body.single-screenwriter .awards-table {
    margin-top: 10px;
}

body.single-screenwriter .award-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #d9d9d9;
    padding: 8px 0;
}

body.single-screenwriter .award-row:last-child {
    border: none;
}

body.single-screenwriter .award-text {
    font-weight: normal;

    p {
        font-size: 14px;
        margin: 0;
    }
}

body.single-screenwriter .award-year {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--magenta);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 128.571% */
}

/* IMDb Logo */
body.single-screenwriter .imdb-logo {
    margin-top: 20px;
}

body.single-screenwriter .imdb-logo svg {
    display: block;
    width: 48px;
    height: 24px;
}

@media (max-width: 768px) {
    body.single-screenwriter .screenwriter-single .container {
        padding-inline: 20px;
    }

    body.single-screenwriter .award-year {
        padding-top: 3px;
        align-items: flex-start;
    }

    body.single-screenwriter .screenwriter-content {
        flex-direction: column;
        gap: 24px;

        .screenwriter-image {
            width: 100%;
            max-width: 100%;
            height: 332px;

            img {
                height: 332px;
            }
        }

        .screenwriter-awards {
            padding: 20px;
        }
    }
}

/* Ensures styles only apply to single screenwriter pages */
body.single-screenwriter .screenwriter-selected-work {
    margin-top: 46px;

    .page-section__heading {
        margin-bottom: 48px;
    }
}

/* 5-Column Grid */
body.single-screenwriter .selected-work-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}

/* Grid Item */
body.single-screenwriter .selected-work-item {
    text-align: left;
}

/* Image */
body.single-screenwriter .selected-work-image {
    width: 100%;
    height: 267px;
    display: block;
    overflow: hidden;
}

body.single-screenwriter .selected-work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s;
}

body.single-screenwriter .selected-work-image img:hover {
    transform: scale(1.05);
}

/* Year */
body.single-screenwriter .selected-work-year {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 16px;
}

/* Title */
body.single-screenwriter .selected-work-title {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px; /* 128.571% */
    letter-spacing: 0.4px;
    margin-top: 2px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

body.single-screenwriter .selected-work-title:hover {
    color: var(--magenta);
}

/* Categories */
body.single-screenwriter .selected-work-categories {
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
}

/* Responsive Layout */
@media (max-width: 1024px) {
    body.single-screenwriter .selected-work-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    body.single-screenwriter .selected-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    body.single-screenwriter .selected-work-grid {
        grid-template-columns: 1fr;
    }
}

.single-screenwriter .screenwriter-related-news {
    margin-top: 64px;
    margin-bottom: 30px;
}