/*
 Theme Name:   Ramsern
 Description:  Theme für die Website des Jugendhaus Ramsern in Beatenberg.
 Author:       Cedric Bolleter
 Theme URI:    https://ramsern.ch
 Template:     pathway
 Version:      1.4
 Text Domain:  ramsern
*/

/* SELECTION */
::-moz-selection {
    background: #882948;
    color: #fff;
}

::selection {
    background: #882948;
    color: #fff;
}


/* GENERAL */

/* FONTS & TRANSITIONS */

* {
    /* font-family: 'Open Sans', Helvetica, Arial, Sans-Serif, serif; */
    /* transition-timing-function: linear; */
    /* transition-duration: .5s; */
    /* --kubio-color-1: 162, 198, 23; */
    --kubio-color-1: 136, 41, 72;
    --kubio-color-2: 136, 41, 72;
    /* --kubio-color-3: 255, 204, 0; */
    --kubio-color-3: 162, 198, 23;
    --kubio-color-4: 88, 31, 56;
    --kubio-color-5: 255, 255, 255;
    --kubio-color-6: 30, 30, 30;
    --kubio-color-7: 255, 255, 255;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fredoka One', 'Open Sans', Helvetica, Arial, Sans-Serif, serif !important;
}

.kubio-menu>ul>li>a {
    font-family: Inter, 'Open Sans', Helvetica, Arial, Sans-Serif, serif !important;
    font-weight: 500;
}

/* LINKS */
a {
    transition-duration: .5s;
    transition-property: color;
}

[data-kubio] a:not([class*="wp-block-button"]):visited,
a:not([class*="wp-block-button"])[data-kubio]:visited {
    color: rgba(var(--kubio-color-2), 1);
}

[data-kubio] a:not([class*="wp-block-button"]):hover,
a:not([class*="wp-block-button"])[data-kubio]:hover,
[data-kubio] a:not([class*="wp-block-button"]):visited:hover,
a:not([class*="wp-block-button"])[data-kubio]:visited:hover {
    color: rgba(var(--kubio-color-6), 1);
}

body {
    scroll-behavior: smooth;
}

/* START PAGE */
.ramsern-start-overview {
    border-radius: 5px;
    transition-duration: .5s;
    transition-property: all;
}

.ramsern-start-overview:hover {
    box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.15);
}

/* HEADER */
.wp-block-kubio-iconlistitem,
.wp-block-kubio-social-icon span {
    transition: all .5s;
}

.wp-block-kubio-iconlistitem:hover,
.wp-block-kubio-social-icon:hover span {
    opacity: .7;
}

.wp-block-kubio-social-icon span {
    fill: white !important;
}

/* HERO */
#hero .h-separator--bottom {
    bottom: calc(-1px) !important;
}

.kubio-slideshow .slideshow-image {
    background-size: cover;
    background-position: 50% 30%;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

/* Offscreen Menu */
.wp-block-kubio-menu-offscreen-content a {
    transition-property: none;
}

/* RECAPTCHA */
.grecaptcha-badge {
    visibility: hidden;
}

/* CONTACT FORMS */
.wpcf7-form-control {
    box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.15);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: rgba(var(--kubio-color-5), 1);
    transition-duration: 0.5s;
    border-color: rgba(0, 0, 0, 0) !important;
    margin-bottom: 12px !important;
    padding: 7px !important;
    border-width: 2px !important;
    border-style: solid !important;
}

.wpcf7-form-control:focus,
.wpcf7-form-control:active {
    border-color: rgba(var(--kubio-color-2), 1) !important;
}

.wpcf7-form-control.wpcf7-submit {
    border-style: none !important;
}

.wpcf7-response-output {
    text-align: center !important;
}

.ramsern-cf7horizontal {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-left: -5px;
    margin-right: -5px;
}

.ramsern-cf7horizontal label {
    margin: 0 5px;
    flex-grow: 1;
}

.ramsern-cf7text {
    resize: none;
    height: 100px;
}

.wpcf7-not-valid-tip {
    /* text-align: center !important; */
    line-height: 1.2em !important;
    font-size: .85em;
    border-radius: 5px;
    box-shadow: 0 5px 15px 2px rgba(0,0,0,.1);
    color: inherit !important;
}

/* Chrome, Safari, Edge, Opera */
.ramsern-cf7personen::-webkit-outer-spin-button,
.ramsern-cf7personen::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Firefox */
.ramsern-cf7personen {
    -moz-appearance: textfield !important;
}

.ramsern-cf7half {
    flex-shrink: 1;
    flex-basis: 40%;
}

.ramsern-cf7plz {
    flex-basis: 3.5em;
    flex-grow: 0 !important;
}

.ramsern-cf7ort {
    flex-basis: 50%;
    display: flex;
    flex-flow: row nowrap;
}

.ramsern-cf7ort:last-child {
    flex-grow: 1;
}

.ramsern-cf7phone {
    flex-basis: 140px;
}

.wpcf7-textarea {
    resize: none;
}

.wpcf7-date {
    cursor: pointer;
}

.wpcf7-form-control.wpcf7-submit {
    background-color: rgba(var(--kubio-color-2), 1) !important;
    color: rgba(var(--kubio-color-5), 1) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    font-family: Open Sans, Helvetica, Arial, Sans-Serif, serif;
    font-weight: 400;
    font-size: 14px !important;
    font-style: normal !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    border-radius: 0px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
    box-shadow: none;
    margin-top: 15px;
}

.wpcf7-form-control.wpcf7-submit:hover {
    background-color: rgba(var(--kubio-color-6), 1) !important;

}

.wpcf7-response-output {
    border: none !important;
    border-radius: 8px;
    color: inherit !important;
    box-shadow: 0 5px 15px 2px rgba(0,0,0,.15);
    /* background-color: #eddfe4 !important; */
}

.wpcf7-form.invalid .wpcf7-response-output {
    background-color: #eddfe4 !important;
}

/* CONTACT FORMS RESPONSIVE */

@media screen and (max-width: 450px) {
    .ramsern-cf7ort {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 1025px) and (min-width: 765px) {
    .ramsern-cf7ort {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 765px) {
    #kubio .wp-block-kubio-contact .wp-block-kubio-contact__formContainer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* PREISLISTEN */

small a {
    font-size: inherit !important;
}

.ramsern-preise table,
.ramsern-preise td {
    border-right: none;
    border-left: none;
    border-top: none;
    border-color: rgba(0, 0, 0, 0.15);
}

.ramsern-preise table tr td:last-child {
    min-width: 90px;
}

.ramsern-preise figure {
    margin-left: 0;
    margin-right: 0;
}

.ramsern-preise table h4 {
    margin: 20px 0 0;
}

/* PHOTO GALLERY */
/* Lightbox */

/* div.pgc-rev-lb-b-bg {
    background-color: rgba(0,0,0,.5) !important;
} */

.pgc-rev-lb-b-content .pgc-img {
    border-radius: 5px;
    box-shadow: 0 5px 15px 2px rgba(0, 0, 0, .15);
}

.pgc-rev-lb-b-view div.pgc-rev-lb-b-next-prev-button {
    border-radius: 0;
    transition: background-color .5s, transform .5s !important;
    width: 55px;
    height: 55px;
}

.pgc-rev-item-menu-view div.pgc-rev-item-menu-button {
    border-radius: 0;
    transition: background-color .5s, transform .5s !important;
}

/* Lightbox Thumbnails */
.pgc-rev-scroll-bar-thumb-item-inner {
    border-radius: 4px;
    border-color: rgba(var(--kubio-color-2), 1) !important;
}

.pgc-rev-scroll-bar-thumb-main-wrap {
    border-radius: 5px !important;
}

/* Justifyed View */

.pgc-image .pgc-image>div {
    border-radius: 5px !important;
    box-shadow: 0 3px 9px 2px rgba(0, 0, 0, .2);
}

.pgcsimplygalleryblock-justified-item {
    padding: 3px;
}

.pgcsimplygalleryblock-justified-item .pgcsimplygalleryblock-justified-item-inner {
    cursor: pointer !important;
}

.pgcsimplygalleryblock-justified-item .pgcsimplygalleryblock-justified-item-inner:focus {
    box-shadow: none !important;
}

.pgcsimplygalleryblock-justified-item-hover {
    background-color: rgba(var(--kubio-color-2), .9) !important;
    transition: opacity .5s !important;
}

/* Justifyed View Labels */
.pgcsimplygalleryblock-justified-info-wrap {
    text-align: left;
}


/*  DATENSCHUTZ (FOOTER)  */

.ramsern-copyright {
    margin-bottom: 0 !important;
}

.ramsern-datenschutz,
.ramsern-datenschutz a,
.ramsern-datenschutz a:hover,
.ramsern-datenschutz a:active,
.ramsern-datenschutz a:focus,
.ramsern-datenschutz a:visited {
    color: white !important;
    font-size: 10px !important;
    transition: opacity .5s;
}

.ramsern-datenschutz a:hover {
    opacity: .7 !important;
}