/* -------- FONTS, TEXT BLOCKS */
#article li {
    font-family: "aktiv-grotesk", sans-serif;
    display: list-item;
    list-style-position: inside;
}

#article ul li {
    list-style-type: square;
}

#article ol li {
    list-style-type: decimal;
}

strong,
b {
    font-weight: 900 !important;
}

#article h1 {
    /* font-size: 230%; */
    word-break: break-word;
}

.normal-headline h1 {
    font-size: 230%;
}

.big-headline h1,
.bigger-headline h1 {
    font-size: 200%;
    max-width: unset;
    text-align: center;
    line-height: 1.3;
}

.biggest-headline h1 {
    font-size: 280%;
    max-width: unset;
    text-align: center;
}

#article h2,
#article h3,
#article h4,
#article h5,
#article h2 *,
#article h3 *,
#article h4 *,
#article h5 * {
    font-size: 120%;
    font-weight: 100 !important;
}

.article-container-inner p,
.article-container-inner small,
.article-container-inner h1,
.article-container-inner h2,
.article-container-inner h3,
.article-container-inner h4,
.article-container-inner h5,
.article-container-inner figure,
.article-container-inner figcaption,
.article-container-inner ol,
.article-container-inner ul,
.article-container-inner li,
.bagde {
    margin: auto;
    padding: 7px 30px;
    /* background-color: white; */
    background-color: #ffffffed;
    display: block;
}

.bagde {
    background-color: unset;
}

.article-container-inner-pink p,
.article-container-inner-pink small,
.article-container-inner-pink h1,
.article-container-inner-pink h2,
.article-container-inner-pink h3,
.article-container-inner-pink h4,
.article-container-inner-pink h5,
.article-container-inner-pink figure,
.article-container-inner-pink figcaption,
.article-container-inner-pink ol,
.article-container-inner-pink ul,
.article-container-inner-pink li {
    background-color: #f9e9f5;
}


.article-container-inner p,
.article-container-inner small,
.article-container-inner h2,
.article-container-inner h3,
.article-container-inner h4,
.article-container-inner h5,
.bagde {
    max-width: 750px;
}

.article-container-inner p {
    padding-bottom: 2%;
}

.article-container-inner figure {
    text-align: center;
}

.dpsp-click-to-tweet-content {
    font-family: 'Domaine';
    font-size: 23px !important;
}

.dpsp-click-to-tweet-cta span {
    font-family: aktiv-grotesk, sans-serif;
    font-size: 16.7px !important;
}

/* --------- BLOCKQUOTE */

#article blockquote {
    font-family: 'Courier New', Courier, monospace;
    font-size: 100%;
    width: 80%;
    margin: 0;
    background-color: #dadada;
    padding: 3%;
    border-left: 30px solid black;
}

#article blockquote p {
    background-color: unset;
}

/* --------- ALERT TEXT */

.article-alert {
    font-weight: 100;
    text-align: left;
    padding: 0;
}


/* -------- ARTICLE MAIN CONTAINERS */

.article-container-special {
    padding-top: 40vh;
}

.article-container-special-clearpicture {
    padding-top: 100vh;
}

/* --------- ARTICLE ELEMENT CONTAINERS */
figcaption {
    padding: 5px;
    font-weight: 600;
}

figure,
.wp-caption {
    width: unset !important;
    display: block;
    margin: auto !important;
}

figure.big {
    width: auto;
    height: auto;
}

article iframe {
    width: 100%;
}

/* KIRJOITTAJAKREDIITTI --- TODO: */
.writer-credits-end-article p {
    padding: 1px;
}

/* -------- LUE LISÄÄ -LAATIKKO */
.lue-lisaa-box {
    z-index: -1;
}

.lue-lisaa-box a {
    display: block;    
}

/* -------- COMMMENT BOX */
.comment-section-title {
    font-size: 190% !important;
}

.comment-author-byline {
    font-size: 120%;
}

/* ------ TODO:  */
p.comment-content {
    font-size: 100%;
    color: black;
}

.comment-form input[type="text"] {
    font-family: aktiv-grotesk, sans-serif;
    width: 95% !important;
    padding: 2% 0%; /* TODO: */
    font-size: 100%;
    display: block;
}

.comment-form textarea {
    font-family: aktiv-grotesk, sans-serif;
    width: 95% !important;
    padding: 2% 0%; /* TODO: */
    font-size: 110%;
    line-height: 1.3;
    display: block;
}

/* --- TODO: */
.form-submit {
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
}

.comment-form #submit {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 100%;
    background: black;
    color: white;
    border: black 1px solid;
    text-transform: uppercase;
    padding: 2%;
}


.comment-form #submit:hover {
    background: white;
    color: black;
    border: black 1px solid;
}


/* -------- IMAGES */

.article-image {
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.article-image-small {
    width: 700px;
}

.bg-video-fullscreen {
    width: 100%;
    min-height: 100%;
    z-index: -3;
}

.bg-video-fullscreen video,
.video-fullscreen video {
    width: 100%;
}

.video-fullscreen {
    width: 100%;
    height: auto;
}

.article-headline-section img {
    width: 100%;
    margin: auto;
    display: block;
}

figure img,
figure video {
    width: 100%;
    height: auto;
}

figure:not(.mikrokuva):not(.pienikuva):not(.puolipienikuva):not(.isokuva) img {
    max-width: 750px;
    margin: auto;
}

.badge-photo {
    max-width: 100px !important;
    margin: 2%;
    border-radius: 20%;
}

.mikrokuva {
    max-width: 50px;
}

.pienikuva {
    max-width: 100px;
}

.puolipienikuva {
    max-width: 200px;
}

.isokuva {
    width: 100vw;
}

/* -------- POSITIONS */

.position-fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.stick {
    position: sticky;
    top: 0;
    left: 0;
    z-index: -3;
}

.cover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* -------- SIZE, VISIBILITY */

.max-height {
    background-size: cover;
    width: 100%;
    min-height: 100%;
    background-position-x: 50%;
}

.hide-picture {
    background-image: unset !important;
}

/* ARTICLE BACKGROUND IMAGE */
#article {
    background-size: 100%;
    background-color: white;
    background-repeat: no-repeat;
}



/* MACGYVER FIXES ----  */
/* Some share buttons center */
ul.dpsp-networks-btns-wrapper.dpsp-networks-btns-content.dpsp-networks-btns-share.dpsp-column-auto {
    margin: auto !important;
    width: 50%;
}

/* Hide comment avatar images */
img.avatar.avatar-32.photo {
    display: none;
}

/* Hide 'sanoo' text*/
span.says {
    display: none;
}

/* Hide double tweet */
.dpsp-network-icon-after {     
    display: none;
}

/* MACGYVER FIXES END ----  */

@media only screen and (min-width: 1000px) {
    #article .normal-headline h1 {
        font-size: 260%;
    }

    .big-headline h1 {
        font-size: 340%;
        max-width: unset;
        text-align: center;
    }

    #article .bigger-headline h1,
    #article .biggest-headline h1 {
        font-size: 600%;
        max-width: unset;
        text-align: center;
        line-height: 1.1;
    }

    #article h2,
    #article h3,
    #article h4,
    #article h5,
    #article h2 *,
    #article h3 *,
    #article h4 *,
    #article h5 * {
        font-size: 22px;
    }

    #article .bagde h5 *,
    #article .bagde h5,
    #article .twitter-nosto-click-to-tweet h2 {
        font-size: 142%;
    }
    
    
    
}

@media screen and (min-width: 1400px) {
    p.comment-content {
        font-size: 100% !important;
    }

}

@media only screen and (min-width: 1600px) {
    .big-headline h1 {
        font-size: 450%;
    }

    #article .bigger-headline h1 {
        font-size: 800%;
        max-width: unset;
        text-align: center;
    }
    
    #article .biggest-headline h1 {
        font-size: 900%;
        max-width: unset;
        text-align: center;
    }
}