/*
Theme Name:  Spyra Rocks UI
Theme URI:   https://www.spyra.rocks
Description: Default child theme
Author:      Spyra Rocks
Author URI:  https://www.spyra.rocks
Template:    generatepress
Version:     0.1
*/

/* Retina Mode */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and(min-resolution: 192dpi),
screen and(min-resolution: 2dppx) {

    .page-id-752 .gb-container-a0b09dbb::before {
        background-image: url(https://www.spyra.rocks/wp-content/uploads/media/images/bg-01@2x.webp)
    }

    .page-id-8871 .gb-container-845db794::before {
        background-image: url(https://www.spyra.rocks/wp-content/uploads/media/images/bg-02@2x.webp)
    }

    .page-id-373 .gb-container-a0b09dbb::before {
        background-image: url(https://www.spyra.rocks/wp-content/uploads/media/images/bg-04@2x.webp)
    }

    .page-id-8969 .gb-container-845db794::before {
        background-image: url(https://www.spyra.rocks/wp-content/uploads/media/images/bg-07@2x.webp)
    }

    .page-id-8946 .gb-container-a0b09dbb::before {
        background-image: url(https://www.spyra.rocks/wp-content/uploads/media/images/bg-08@2x.webp)
    }

    .page-id-10396 .gb-container-a0b09dbb::before {
        background-image: url(https://www.spyra.rocks/wp-content/uploads/media/images/bg-11@2x.webp)
    }

}

/* Dark Mode */
figure.wp-dark-mode-bg-image img {
    filter: invert(1);
}

.wp-dark-mode-active .invert {
    filter: invert(1) !important;
}

.wp-dark-mode-switch-23 .switch-inner span:not(.glass):first-child svg:hover {
    color: #000 !important;
}


.wp-dark-mode-switch-23 .switch-inner span:not(.glass):nth-child(2) svg:hover {
    color: #000 !important;
}

/* Light Mode */
.blur {
    backdrop-filter: blur(10px);
}

@media(min-width:1024px) {
    .header-wrap {
        right: 50%;
        position: fixed;
    }

    .site-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .gb-container.sticky {
        position: sticky;
        top: 0;
    }
}

.hover-darken:hover:before {
    opacity: 0.6;
}

.hover-darken:hover h2 {
    opacity: 1;
}

.hover-darken h2 {
    opacity: 0.5;
}

.hover-darken,
.hover-darken * {
    transition: all 0.3s ease;
}

@media(min-width:1025px) {
    .paging-navigation {
        position: fixed;
        top: 50%;
        width: 40%;
        left: 5%;
    }
}

@media(max-width:1024px) {
    .site-main {
        position: relative;
    }

    .paging-navigation {
        position: absolute;
        top: 5%;
        width: 80%;
        left: 10%;
    }
}

.single h1.gb-headline-text {
    font-family: Sora;
    font-weight: 200;
    font-size: 30px;
    line-height: 60px;
}

.gb-headline-text {
    font-family: Sora;
    font-weight: 200 !important;
}


.home .entry-content {
    background: #181818;
}

.sticky {
    animation: einblenden 1.5s;
    -moz-animation: einblenden 1.5s;
    /* Für Firefox */
    -webkit-animation: einblenden 1.5s;
    /* Für Safari und Chrome */
    -o-animation: einblenden 1.5s;
    /* Für Opera */
}

@keyframes einblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes einblenden {

    /* Für Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes einblenden {

    /* Für Safari und Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes einblenden {

    /* Für Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.c-label,
.f12-captcha,
.template-1 {
    color: #000 !important;
}

.wpa-test-msg {
    background: #d1ecf1 !important;
    border: 1px solid #bee5eb !important;
    border-radius: 5px !important;
    color: #0c5460 !important;
    font-size: 14px !important;
    padding: .75rem 1.25rem !important;
    font-family: Arial !important;
    margin-top: 5px !important
}

span.wpa-button {
    display: inline-block !important;
    padding-top: 5px !important;
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    margin-top: 5px !important;
    cursor: pointer !important
}

#altEmail_container,
.altEmail_container {
    position: absolute !important;
    overflow: hidden !important;
    display: inline !important;
    height: 1px !important;
    width: 1px !important;
    z-index: -1000 !important
}