/*!
Theme Name: Fiction
Author: Academ Web Solutions
Description: fiction Theme
Version: 1.0.0
Text Domain: fiction
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
 *
 * 1.0 - Base
 *   1.1 - Normalize
 *   1.2 - Buttons
 * 2.0 - Header
 * 3.0 - Footer
 * 4.0 - Home Page
 * 5.0 - Gallery Page
 * 6.0 - Contact Page
 * 7.0 - Music Page
 * 8.0 - Merch Page
 * 9.0 - Stream Page
 * 10.0 - Notes Page

 */

/* --- / --- */


/*======
*
* 1.0 - Base
*
======*/
html {
    font-size: 16px;
	
}

body {
    position: relative;
    font-family: "SF Pro Display", sans-serif;
    font-size: 16px;
	
	
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
		
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
	
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}
textarea,
input {
    color: #fff;
}
/* 1.2 - Buttons */
input[type="submit"],
.btn {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 14px 30px;
    color: #fff;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.1);
    font-family: Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    text-transform: uppercase;
    transition: opacity .15s ease-in-out, color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
}

/* --- / --- */

/*======
*
* 2.0 - Header
*
======*/

#home-header,
#primary-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 50;
}

#home-header {
    transform: scale(0.7);
    transform-origin: top;
}

#home-header .widget-image-caption {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2)
}

#primary-header .menu-item .elementor-item {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

#primary-header .menu-item .elementor-item.elementor-item-active,
#primary-header .menu-item .elementor-item:hover {
    text-shadow: none;
}

.elementor-nav-menu--dropdown {
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
}

#primary-header .menu-item.current-page-ancestor a {
    color: #2784BA;
    text-shadow: none;
}

#primary-header .menu-item.current-page-ancestor a:after {
    opacity: 1;
}

.text-shadow {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1025px) {
    #primary-header .menu-item .elementor-item {
        text-shadow: none;
    }
}

/* --- / --- */

/*======
*
* 3.0 - Footer
*
======*/

#primary-footer {
/*  	position:absolute;   */
/* 	change position:uset in Template-Theme Builder-Footer */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}  

#primary-footer .elementor-icon {

    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}


/* --- / --- */

/*======
*
* 4.0 - Home Page
*
======*/
#home-menu {

}

#home-menu .elementor-nav-menu {
    display: flex;
    flex-wrap: wrap;
}

#home-menu .menu-item {
    width: 50%;
    padding: 15px;
}
#home-menu .menu-item {
    min-width: 160px;
}
#home-menu li .elementor-item {
    position: relative;
    margin: 0 auto;
    padding-top: 140px;
    width: max-content;
    /*transform: rotate(10deg);*/
    font-size: 16px;
    color: rgba(0, 0, 0, 0);
    -webkit-animation: wobble-hor-bottom 6s linear infinite both;
    animation: wobble-hor-bottom 6s linear infinite both;
}

#home-menu li:nth-child(2) .elementor-item {
    -webkit-animation: wobble-hor-left 6s linear infinite both;
    animation: wobble-hor-left 6s linear infinite both;
}
#home-menu li:nth-child(3n) .elementor-item {
    -webkit-animation: wobble-hor-left 6s linear infinite both;
    animation: wobble-hor-left 6s linear infinite both;
}


#home-menu .menu-item:nth-child(odd) .elementor-item {
    position: relative;
    margin: 0 auto;
    padding-top: 120px;
    width: max-content;
    /*transform: rotate(-10deg);*/
}
#home-menu .elementor-item:hover {
    color: #fff;
}
#home-menu .elementor-item:before {
    content: "";
    display: block;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -60px;
    width: 120px;
    height: 120px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url('/jh/wp-content/uploads/2021/04/notes.png');
    background-color: transparent;
    /*-webkit-animation: wobble-hor-bottom 6s linear infinite both;*/
    /*animation: wobble-hor-bottom 6s linear infinite both;*/
}
/*#home-menu .elementor-item:hover:before {*/
#home-menu .elementor-item:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;

}

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
    0%,
    100% {
        -webkit-transform: translate(0%);
        transform: translate(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translateX(-30px) rotate(-10deg);
        transform: translateX(-30px) rotate(-10deg);
    }
    50% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }

    75% {
        -webkit-transform: translateX(30px) rotate(10deg);
        transform: translateX(30px) rotate(10deg);
    }
    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}
@keyframes wobble-hor-bottom {
    0%,
    100% {
        -webkit-transform: translate(0%);
        transform: translate(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translateX(-30px) rotate(-10deg);
        transform: translateX(-30px) rotate(-10deg);
    }
    50% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }

    75% {
        -webkit-transform: translateX(30px) rotate(10deg);
        transform: translateX(30px) rotate(10deg);
    }
    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-left {
    0%,
    100% {
        -webkit-transform: translate(0%);
        transform: translate(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translateX(30px) rotate(10deg);
        transform: translateX(30px) rotate(10deg);
    }
    50% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }

    75% {
        -webkit-transform: translateX(-30px) rotate(-10deg);
        transform: translateX(-30px) rotate(-10deg);
    }
    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}
@keyframes wobble-hor-bottom {
    0%,
    100% {
        -webkit-transform: translate(0%);
        transform: translate(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translateX(-30px) rotate(-10deg);
        transform: translateX(-30px) rotate(-10deg);
    }
    50% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }

    75% {
        -webkit-transform: translateX(30px) rotate(10deg);
        transform: translateX(30px) rotate(10deg);
    }
    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);
    }
}

#home-menu .menu-game .elementor-item:before {
    background-image: url('/jh/wp-content/uploads/2021/04/game.png');
}

#home-menu .menu-merch .elementor-item:before {
    background-image: url('/jh/wp-content/uploads/2021/04/tee.png');
}

#home-menu .menu-gallery .elementor-item:before {
    background-image: url('/jh/wp-content/uploads/2021/04/gallery.png');
}

#home-menu .menu-stream .elementor-item:before {
    background-image: url('/jh/wp-content/uploads/2021/04/stream.png');
}

#home-menu .menu-music .elementor-item:before {
    background-image: url('/jh/wp-content/uploads/2021/04/music.png');
}
@media (max-width: 992px) {
    #home-menu .elementor-item {
        /*font-size: 16px;*/
        color: #2784BA;
    }
    #home-menu li .elementor-item {
        color: #2784BA;
    }
    html, body {
        overflow-x: hidden;
    }
}
@media (max-width: 360px) {
    #home-menu .menu-item {
        /*width: 100%;*/
        /*padding: 20px 0;*/
        max-width: 145px;
        min-width: 100px;
    }
    #home-menu .elementor-item {
        padding-top: 100px;
    }
    #home-menu .elementor-item:before {
        width: 95px;
        left: 71%;
    }
    #home-menu li .elementor-item {
        color: #2784BA;
    }
    #home-menu li .elementor-item ,
    #home-menu .menu-item:nth-child(odd) .elementor-item {
        padding-top: 106px;
    }

}

/* --- / --- */

/*======
*
* 5.0 - Gallery Page
*
======*/

#gallery .e-gallery-item {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
}
#gallery .e-gallery-item:nth-child(n+10) {
    display: none;
}
#elementor-lightbox-slideshow-all-eafe805 .elementor-slideshow__header {
    padding-right: 45px;
    right: 0;
    width: auto;
}

@media (max-width: 767px) {
    #gallery .e-gallery-item {
        border-width: 10px;
    }
}
/* --- / --- */

/*======
*
* 6.0 - Contact Page
*
======*/
#contact-form {
    position: relative;
    padding: 35px 70px;
    margin-bottom: 80px;
}
#contact-form .elementor-widget-container {
    position: static;
}

#contact-form:before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    /*box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);*/
    /*filter: blur(10px);*/
    z-index: -1;
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
}

#contact-form > div {
    position: relative;
    z-index: 10;
}

#contact-form .gform_wrapper {
    margin: 0;
}

#contact-form .gform_footer {
    position: absolute;
    bottom: -80px;
    left: 0;
    z-index: 20;
}

#contact-form .gfield {
    padding: 0;
    margin: 0 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

#contact-form .gfield_label {
    padding: 12px 0 0;
    width: 120px;
    flex: none;
    text-align: right;
    margin-right: 15px;
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

#contact-form .gfield_required {
    display: none;
}

#contact-form .ginput_container {
    margin-top: 0;
    width: 100%;
    width: calc(100% - 135px);
}
.subscribe-form input,
#contact-form .ginput_container textarea,
#contact-form .ginput_container input,
#contact-form .ginput_container textarea {
    background-color: transparent;
    border-radius: 0;
    padding: 0 5px;
    border: none;
    border-bottom: 2px solid #fff;
    box-shadow: none;
    font-size: 18px;
    font-family: Roboto, sans-serif;
    font-style: italic;
    height: 32px;
    /*padding-left: 5px;*/
    /*padding-bottom: 0;*/
    line-height: 21px;
}
.subscribe-form input {
    /*text-transform: uppercase;*/
    /*text-align: center;*/
    width: 100%;
    max-width: 500px;
    height: 40px;
}
.subscribe-form .subscribe-form__btn {
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
    margin-top: 20px;
}
#contact-form .ginput_container textarea {
    height: auto;
    margin-top: 15px;
    /*line-height: 17px;*/
}
.subscribe-form input:focus,
#contact-form .ginput_container input:focus,
#contact-form .ginput_container textarea:focus {
    outline: none;
    box-shadow: none;
}
.subscribe-form input:focus + label {
    /*text-align: left;*/
    display: none;
}
.subscribe-form__input {
    position: relative;
}
.subscribe-form__input label {
    position: absolute;
    top: 14px;
    color: #fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    opacity: 1;
    text-align: center;
    text-transform: uppercase;
    left: calc(50% - 115px);
    font-size: 18px;
    font-family: Roboto, sans-serif;
    font-style: italic;
    z-index: -1;
}





#contact-form .gform_footer {
    text-align: center;
}

#contact-form .validation_message {
    text-align: center;
}

::placeholder {
    color: #fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

#send-request #field_2_6 {
    position: relative;
}

#send-request #field_2_6:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 30px;
    height: 30px;
    background-position: 50% 50%;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d)'%3E%3Cpath d='M19.133 17.379l1.125-1.125c.094-.094.199-.117.316-.07.117.046.176.14.176.28v5.099c0 .468-.164.867-.492 1.195a1.627 1.627 0 01-1.195.492H6.688c-.47 0-.868-.164-1.196-.492A1.627 1.627 0 015 21.563V9.188c0-.47.164-.868.492-1.196A1.627 1.627 0 016.688 7.5h9.632c.117 0 .2.059.246.176.047.117.024.222-.07.316l-1.125 1.125a.239.239 0 01-.176.07H6.687v12.376h12.375v-4.008c0-.07.024-.13.07-.176zm5.52-7.102l-9.247 9.246-3.164.352a1.413 1.413 0 01-1.195-.422 1.413 1.413 0 01-.422-1.195l.352-3.164 9.246-9.246a1.964 1.964 0 011.441-.598c.563 0 1.055.2 1.477.598l1.511 1.511c.399.399.598.891.598 1.477 0 .562-.2 1.043-.598 1.441zm-3.481 1.09l-2.04-2.039-6.538 6.54-.246 2.284 2.285-.246 6.539-6.539zm2.285-2.812l-1.512-1.512c-.187-.164-.363-.164-.527 0l-1.09 1.09 2.04 2.039 1.089-1.09c.164-.164.164-.34 0-.527z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='0' y='.25' width='30.25' height='28' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

#send-request #field_2_6 input {
    padding-right: 35px;
}
input[type="submit" i]:focus {
    outline: none;
}
.subscribe-form .subscribe-form__btn-mc {
    display: none;
}
.subscribe-form {
    text-align: center;
}
.subscribe-form .form-password__invalid {
    display: none;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    color: #fff;
    margin-top: 20px;
}
.mc4wp-alert.mc4wp-error {
    text-align: center;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    color: #fff;
}
@media (max-width: 767px) {
    #send-request .elementor-column {
        padding-left: 15px;
        padding-right: 15px;
    }
    #contact-form .gform_footer {
        bottom: -100px;
    }
    #contact-form .gfield_label {
        width: 100%;
        margin: 0 0 5px;
        font-size: 20px;
        text-align: left;
        padding: 0;
    }

    #contact-form .ginput_container {
        width: 100%;
    }
    #contact-form {
        padding: 35px 30px;
    }
}

/* --- / --- */

/*======
*
* 7.0 - Music Page
*
======*/
/*.music-list {*/
/*    display: none;*/
/*}*/
.music-category {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}
.music-list {
    margin: 0;
}
.music-list .elementor-heading-title {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}
.music-list .elementor-icon-list-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.music-list .elementor-icon-list-item {
    width: 50%;
    padding: 10px !important;
}
.music-list .elementor-icon-list-item a {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    /*border: 1px solid transparent;*/
    border-radius: 6px;
    padding: 12px 15px;
    color: #fff;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*background-color: rgba(255, 255, 255, 0.1);*/
    /* background-color: #54B4EB52;*/
    font-family: Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    text-transform: uppercase;
    transition: opacity .15s ease-in-out, color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
}
.music-list .elementor-icon-list-item a span {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
@media (max-width: 576px) {
    .music-list .elementor-icon-list-item {
        width: 100%;
        padding: 5px 0 !important;
    }
}

/* --- / --- */

/*======
*
* 8.0 - Merch Page
*
======*/
#merch .merch-row .elementor-widget-wrap {
    height: 100%;
}
#merch .merch-row .elementor-widget-wrap > .elementor-element {
    height: 100%;
}
#merch .merch-row .elementor-widget-container {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0px 0px 14px rgba(255, 255, 255, 0.5);
}
#merch .merch-row .elementor-image-box-wrapper {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
#merch .merch-row .elementor-image-box-img {
    margin: auto 0;
}
#merch .merch-row .elementor-image-box-title {
    margin-bottom: 10px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}


/* --- / --- */

/*======
*
* 9.0 - Stream Page
*
======*/
#stream-timer .elementor-countdown-item {
    padding: 0;
}
#stream-timer .elementor-countdown-digits {
    position: relative;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}
#stream-timer .elementor-countdown-digits:after {
    content: ":";
    position: relative;
    /*right: -10px;*/
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
}
#stream-timer .elementor-countdown-item:last-child .elementor-countdown-digits:after {
    display: none;
}
#stream-timer .elementor-countdown-label,
#stream-timer .elementor-countdown-expire--message {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
#stream-timer .elementor-countdown-expire--message a {
    color: #fff;
}
@media (max-width: 1024px) {
    #stream-timer .elementor-countdown-digits:after {
        position: absolute;
        right: -10px;
        bottom: 0;
        padding-left: 0;
    }
}
/* --- / --- */

/*======
*
* 10.0 - Notes Page
*
======*/


/* --- / --- */


.notes_section .blog-inner {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-auto-rows: 1px;

}
.notes_section .blog-inner > .post {
    /*width: 100%;*/
    /*min-height: 360px;*/
    height: 100%;
    font-weight: normal;
    background-color: #FFFFFF1A;
    box-shadow: 0px 0px 14px 0px rgba(255, 255, 255, 0.5) inset;
    padding: 0 30px;
    color: #fff;
    font-size: 18px;
    line-height: 160%;

}
.notes_section .blog-inner > .post .blog-excerpt p {
    word-break: break-word;
}

.blog-inner > .post .pld-count-wrap {
    color: #fff;
    font-family: "SF Pro Display", Sans-serif;
    font-size: 16px;
    font-weight: 600;
}
.blog-inner > .post .pld-like-wrap {
    position: relative;
}
.blog-inner > .post .pld-like-wrap:before {
    content: '';
    position: absolute;
    width: 22px;
    right: -22px;
    top: 4px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='21' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.074 15.719c.305.562.293 1.125-.035 1.687-.305.563-.785.844-1.441.844H1.723c-.657 0-1.149-.281-1.477-.844-.305-.562-.305-1.125 0-1.687L8.684 1.094C9.012.53 9.504.25 10.16.25s1.149.281 1.477.844l8.437 14.625zm-8.789-2.531a1.475 1.475 0 00-1.125-.493c-.445 0-.832.164-1.16.492-.305.305-.457.68-.457 1.126 0 .445.152.832.457 1.16a1.65 1.65 0 001.16.457c.445 0 .82-.153 1.125-.457.328-.329.492-.715.492-1.16 0-.446-.164-.82-.492-1.126zM8.613 6.894l.282 4.78c0 .259.14.387.421.387h1.688c.281 0 .422-.128.422-.386l.281-4.781c0-.141-.047-.247-.14-.317a.334.334 0 00-.282-.14h-2.25a.437.437 0 00-.316.14c-.07.07-.106.176-.106.317z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
}

.blog-inner > .post:nth-child(n+10) {
    /*visibility: hidden;*/
}
@media (max-width: 400px) {
    .notes_section .blog-inner {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}
/* --- / --- */

/*======
*
* 4.0 - Home Page
*
======*/


/* --- / --- */
body > div {
    overflow: hidden;
}
.elementor-section.cloud-section {
    position: relative;

}
.elementor-section.cloud-section + section {
    /*z-index: 2;*/
}
.elementor-section.cloud-section > .elementor-container {
    position: absolute;
    width: 100%;
    overflow: hidden;
    /*z-index: 1;*/
}
.cloud-section .cloud {
    position: relative;
    width:100%;
    padding-bottom: 100%;
    background-size: cover;
}
.cloud-section .cloud img {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    opacity: 0.3;
    /*bottom: 0;*/
    /*height: 100%;*/
}
@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(20%)
    }
    to {
        -moz-transform: translateX(-100%)
    }
}
@keyframes animCloud {
    from {
        -webkit-transform: translateX(20%);
        -moz-transform: translateX(20%);
        -ms-transform: translateX(20%);
        -o-transform: translateX(20%);
        transform: translateX(20%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
.cloud1 {
    -webkit-animation: animCloud 30s infinite linear;
    -moz-animation: animCloud 30s infinite linear;
    animation: animCloud 30s infinite linear
}
.cloud2 {
    -webkit-animation: animCloud 50s infinite linear;
    -moz-animation: animCloud 50s infinite linear;
    animation: animCloud 50s infinite linear
}
.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}
.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
}

@media (max-width: 1220px) {
    .cloud-section .cloud img {
        bottom: 0;
        height: 100%;
    }
}
#contact-form .textarea-custom {
    align-items: flex-start;
}

#contact-form.notes-form {
    max-width: 750px;
    margin: 0 auto 100px auto;


}
#contact-form.notes-form #gform_submit_button_3 {
  /*  background:  #54B4EB52;*/
    border: none;
}
.page-id-290 #primary-footer ,
.page-id-277 #primary-footer {
   /*padding-bottom: ;*/
}
#audio-player {
    width: 80%;
    margin: 0 auto;
}
#audio-player .mejs-controls {
background: #fff;
    border-radius: 30px;
    height: 60px;
    align-items: center;
    top: 0px;
}
#audio-player .mejs-container {
    border-radius: 31px;
    background: transparent;
    height: 60px;
}
#audio-player .elementor-widget-container > h5 {
    color: #fff;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
#audio-player .mejs-button>button {
    background: transparent url('/jh/wp-content/themes/fiction/assets/images/player.svg');
}
#audio-player .mejs-time {
    color: #000;
}
#audio-player  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
#audio-player .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #000;
}
#audio-player .mejs-mute>button {
    background-position: -60px 0;
}
#audio-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
#audio-player .mejs-controls .mejs-time-rail .mejs-time-total {
    background: rgba(18, 17, 17, 0.33);
    height: 5px;
    margin-top: 1px;

}
#audio-player .mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 8px 0 0;
}
#audio-player .mejs-time-loaded {
    height: 5px;
}
#audio-player .mejs-time-hovered{
    background: transparent;
    height: 5px;
}
#audio-player .mejs-controls .mejs-time-rail .mejs-time-current {
    height: 5px;
}
#audio-player .mejs-time-handle {
    top: -2px;
    border: 4px solid #000;
}
#audio-player  .mejs-time-handle-content {
    border: 4px solid #000;
    top: -5px;
    left: -5px;
}
#audio-player  .mejs-pause>button {
    background-position: -20px 0;
}
@media (max-width: 991px) {
    #audio-player {
        width: 100%;
        margin: 0 20px;
    }
}


textarea:focus::placeholder ,
input:focus::placeholder {
    color: transparent!important;
    /*text-shadow: transparent!important;*/
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0)!important;
}