/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/
/*-------------
--0---------0--
--0---------0--
--0-------- 0--
--0---------0--
--0----0----0--
--0---0-0---0--
--0--0---0--0--
--0-0-----0-0--
--0---------0--
---------------
Webmodus GmbH
Rain 21
5000 Aarau
---------------
www.webmodus.ch
---------------
-------------*/

/** Allgemein **/
/** Bereich Header **/
/** Bereich Slider **/
/** Bereich Before Main **/
/** Bereich Main **/
/** Bereich After Main **/
/** Bereich Bottom **/
/** Bereich Footer **/
/** Kontaktformular **/

.webmodus-mitglieder-section input:not(input[type="submit"]),
.webmodus-mitglieder-section select{
    background:#fff !important;
    border:1px solid #d1d1d1;
    height: 45px;
}
.webmodus-mitglieder-section .w-filter.state_desktop.layout_hor .w-filter-item[data-ui_type="dropdown"] .w-filter-item-values::after{
    right:0 !important;
}
.webmodus-filter-suche-container > *{
    width:33.33333% !important;
}
.webmodus-filter-suche-container .w-filter-item-values{
    width: 100% !important;
}
.webmodus-search-container{
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
}
.webmodus-search-container i{
    margin-right: -27.5px;
    z-index: 1;
}
.webmodus-search-container input{
    padding-left: 40px;
}


.webmodus-tabelle-mitglieder-top-row{
    display: flex;
    flex-flow: row nowrap;
    background: #1D1D1B;
    padding: 10px 20px;
    margin-bottom: 1rem;
}
.telefon_mitglieder, .fax_mitglieder, .email_mitglieder, .webseite_mitglieder{
    color:#e30613;
}
.webmodus-tabelle-mitglieder-top-row span{
    color:#fff;
}
.webmodus-tabelle-mitglieder-top-row > div{
    width:25%;
}
.webmodus-no-result{
    font-weight: 700;
    text-align: center;
    font-size: 20px;
}
.webmodus-mitglied-tabelle article{
    background:#F2F2F2;
    padding: 20px;
}
.webmodus-mitglied-tabelle article img {
	width:175px;
}
.webmodus-mitglied-tabelle article .usg_vwrapper_4 > div:first-child{
	font-size: 18px !important;
}
.webmodus-mitglied-tabelle article .usg_vwrapper_4{
	font-size: 14px;
line-height: 1.8;
}
.page-id-284 .w-grid.type_grid:not([class*="cols_"]) .w-grid-item:not(:last-child), .w-grid.type_masonry:not([class*="cols_"]) .w-grid-item:not(:last-child){
	margin-bottom:1rem !important;
}
.webmodus-mitglied-tabelle article > div > div > div:first-child,
.webmodus-mitglied-tabelle article > div > div > div:nth-child(2),
.webmodus-mitglied-tabelle article > div > div > div:nth-child(3),
.webmodus-mitglied-tabelle article > div > div > div:last-child{
    font-weight: 500;
}
.branche_mitglieder{
    font-weight: 400 !important;
}
.webmodus-mitglied-tabelle article > div > div > div:first-child{
    width:25%;
}
.webmodus-mitglied-tabelle article > div > div > div:nth-child(2){
    width:25%;
}
.webmodus-mitglied-tabelle article > div > div > div:nth-child(3){
    width:25%;
}
.webmodus-mitglied-tabelle article > div > div > div:last-child{
    width:25%;
}
.webmodus-spezial-box .vc_col-sm-8{
    margin-left: 1.5rem;
}
.webmodus-spezial-box .vc_col-sm-4{
    margin-left: -3rem;
}

.webmodus-ladenzeiten-container > div,
.webmodus-abgabe-container > div{
    width: 33.3333%;
}

.webmodus-ladenzeiten-container > div > a,
.webmodus-abgabe-container > div > a{
    width: 100%;
    padding: 20px 0;
}

.webmodus-spezial-box .vc_col-sm-4::before{
    content:'';
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    height: 100%;
    width: 29%;
    position: absolute;
    left: -28.9%;
    background: #1d1d1b;
}
@media only screen and (max-width:810px) {
    .webmodus-spezial-box .vc_col-sm-8 > div{
        height:400px;
    }
    .webmodus-spezial-box .vc_col-sm-4::before{
        display: none;
    }
}
@media only screen and (max-width:600px) {
    .webmodus-spezial-box .vc_col-sm-8 > div{
        height:350px;
    }
}
@media only screen and (max-width:700px) {
    .webmodus-ladenzeiten-container,
    .webmodus-abgabe-container{
        flex-direction: column;
    }
    .webmodus-ladenzeiten-container > div,
    .webmodus-abgabe-container > div{
        width: 100%;
    }
    #webmodus-tabelle-allgemein .repeater-row,
    #webmodus-tabelle-ausserordentliche .repeater-row,
    #webmodus-tabelle-schulferien .repeater-row,
    #webmodus-tabelle-abgabe .repeater-row,
    #webmodus-tabelle-annahme .repeater-row{
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid black;
    }
    #webmodus-tabelle-allgemein .repeater > div:first-child,
    #webmodus-tabelle-ausserordentliche .repeater > div:first-child,
    #webmodus-tabelle-schulferien .repeater > div:first-child,
    #webmodus-tabelle-abgabe .repeater > div:first-child,
    #webmodus-tabelle-annahme .repeater > div:first-child{
        border-top: 2px solid black;
    }
    #webmodus-tabelle-allgemein .repeater-row >  div,
    #webmodus-tabelle-ausserordentliche .repeater-row >  div,
    #webmodus-tabelle-schulferien .repeater-row >  div,
    #webmodus-tabelle-abgabe .repeater-row >  div,
    #webmodus-tabelle-annahme .repeater-row >  div{
        width: 100%;
        text-align: left !important;
    }
}

.active-table{
    background: #e30613 !important;
}
.hide-table{
    display: none !important;
}
.row-tabelle-oeffnungszeiten .wpb_wrapper > div{
    transition: opacity 300ms ease-in-out;
}

.woocommerce-Price-currencySymbol{
    margin-right:7.5px;
}

/* Icon Neuigkeiten Box */

i.material-icons{
    color: #706f6f;
    font-size: 30px;
}

/* Tabelle Beitrittsreglement */

.beschreibung_repeater_beitrittsreglement{
    width: 70%;
}

.betrag_repeater_beitrittsreglement{
    text-align: right;
    width:15%;
    display: flex;
    justify-content: flex-end;
}

.tabelle-beitrittsreglement .repeater-row{
    background-color: #f2f2f2;
    border-bottom: 1px solid black !important;
    padding: 20px 15px;
    display: flex;
    flex-flow: row nowrap;
    gap:20px;
}
.tabelle-beitrittsreglement > div > div:last-child{
    border: none !important;
}
.kategorie_repeater_beitrittsreglement{
    width:15%;
}

@media only screen and (max-width:600px) {

    .tabelle-beitrittsreglement .repeater-row{
        flex-flow: column;
    }
    .kategorie_repeater_beitrittsreglement,.betrag_repeater_beitrittsreglement,.beschreibung_repeater_beitrittsreglement{
        width:100%;
    }
    .betrag_repeater_beitrittsreglement{
        text-align: left;
    }
}

/* Repeater Erläuterungen zum Beitragsreglement */

.haekchen-erlaeuterungen{
    width: 30px;
    height: 30px;
}

.webmodus-erlaeuterungen-container{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap:2.75%;
}

.webmodus-erlaeuterungen-container > div.box-erlaeuterungen:nth-child(-n + 3){
    background-color: white;
    padding: 30px;
    width: 31.5%;
    margin-bottom: 35px;
}

.webmodus-erlaeuterungen-container > div.box-erlaeuterungen:nth-child(n + 4){
    background-color: white;
    padding: 30px;
    width: 22.938%;
    margin-bottom: 35px;
}

@media only screen and (max-width:1080px) {
    .w-search-form input {
        border:2px solid #1d1d1b !important;
    }
    .webmodus-erlaeuterungen-container{
        gap:4%;
    }
    .webmodus-erlaeuterungen-container > div.box-erlaeuterungen{
        width:48% !important;
    }
}
@media only screen and (max-width:600px) {

    .webmodus-erlaeuterungen-container > div.box-erlaeuterungen{
        width:100% !important;
        margin-bottom: 30px !important;
    }
}
.titelundicon_erlaeuterungen{
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 20px;
}

.titelundicon_erlaeuterungen h4{
    padding-top: 0px;
    padding-left: 10px;
    font-size: 22px;
}

/* Tabelle Einkaufen in Baden */

.row-tabelle-oeffnungszeiten .repeater,.row-tabelle-abgabe .repeater{
    background-color: white;
}


.allgemeine_ladenoeffnungszeiten_repeater, .ausserordentliche_ladenoffnungszeiten_repeater, .schulferien_repeater{
    background-color: white;
}

.tag_allgemeine_ladenoeffnungszeiten, .bezeichnung_ausserordentliche_ladenoeffnungszeiten{
    padding-left: 20px !important;
    width: 33%;
}
.stelle_abgabe_stellen, .stelle_annahme_stellen, .stelle_annahme_stellen_city_card{
    padding-left: 20px !important;
    width: 43%;
}
.adresse_abgabe_stellen, .adresse_annahme_stellen, .adresse_annahme_stellen_city_card{
    width: 23%;
    text-align: left;
}

.uhrzeit_allgemeine_ladenoeffnungszeiten, .datum_ausserordentliche_ladenoeffnungszeiten{
    text-align: center;
    width: 33%;
}

.spezielles_allgemeine_ladenoeffnungszeiten, .info_ausserordentliche_ladenoeffnungszeiten, .plz_ort_abgabe_stellen, .plz_ort_annahme_stellen, .plz_ort_annahme_stellen_city_card{
    text-align: right;
    padding-right: 20px !important;
    width: 33%;
}

.ferien_schulferien{
    width: 50%;
    padding-left: 20px !important;
}

.daten_schulferien{
    width: 50%;
    padding-right: 20px !important;
}

/* Unsere wichtigsten Anliegen Über uns */

.container_icon_anliegen{
    background: #e30613;
    border-radius: 100%;
    width: 70px;
    height: 70px;
    padding: 15px;
}

.box-anliegen{
    margin-bottom: 50px;
}



.rev-btn{
    width:max-content !important;
}

rs-column-wrap > rs-column:first-child{
    padding-left: calc(100% - 650px) !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

@media only screen and (min-width:1400px) {
    header .w-nav-list.level_1{
        transition: all 300ms linear;
    }

    header:not(.sticky) .w-nav-list.level_1{
        margin-top:50px;
    }
    header:not(.sticky) .w-nav-list.level_2{
        margin-top:-25px;
    }
}
@media only screen and (max-width:1400px) {
    .w-search-form input {
        border:2px solid #1d1d1b !important;
    }
}

/** Accordion **/
/** Wichtig kein Margin **/
.webmodus-accordion-container {
    display: flex;
    flex-flow: column;
}
.webmodus-accordion-button {
    text-align: left !important;
    padding: 15px;
    background: #101214; /* Farbe des Hintergrund des Buttons ändern */
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    align-items: center;
}
.webmodus-accordion-button p {
    color: #fff !important; /* Farbe der Schrift des Buttons ändern */
    font-size: 20px;
}
.webmodus-accordion-button > p{
    margin:0 !important;
}
.webmodus-accordion-icon{
    color: #fff; /* Farbe der Schrift des Icons ändern */
}
.webmodus-accordion-panel {
    background-color: transparent; /* Farbe des Hintergrund des Panels ändern */
    /*color: red;*/ /* Farbe der Schrift des Panels ändern */
    overflow: hidden;
    transition: all 300ms ease-in-out;
    height: 0;
}
.webmodus-accordion-panel p {
    padding: 1rem 0 !important;
}
.webmodus-accordion-panel *{
    margin:0 !important;
    width: 100%;
}

h1.webmodus-titel{
    padding-left: calc(50% - 650px) !important;
    border-bottom:3px solid #e30613;
    width:max-content;
    padding-bottom:10px !important;
}

/******************************************************/
/** MEDIA QUERIES START **/
/******************************************************/
/** Laptop**/
@media screen and (max-width: 1400px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
    h1.webmodus-titel{
        padding-left: 2.5rem !important;
    }
    rs-column-wrap > rs-column:first-child{
        padding-left: 2.5rem !important;
    }
}

/** Landscape Tablet**/
@media screen and (max-width: 1024px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
    h1.webmodus-titel{
        padding-left: 2.5rem !important;
    }
    rs-column-wrap > rs-column:first-child{
        padding-left: 2.5rem !important;
    }
}

/** Tablet**/
@media screen and (max-width: 900px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
    /** Accordion **/
    .panel .panel-bild-container a {
        width:48%;
    }
}

/** Mini Tablet**/
@media screen and (max-width: 768px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
}

/** Mobile Landscape **/
@media screen and (max-width: 600px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
    h1.webmodus-titel{
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width:100% !important;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    rs-column-wrap > rs-column:first-child{
        padding-left: 1.5rem !important;
    }
}

/** Mobile Smartphone Gross **/
@media screen and (max-width: 480px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
}

/** Mobile Smartphone Mini **/
@media screen and (max-width: 320px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
}
@media screen and (max-width: 1025px) {
    .webmodus-dokumente-container{
        column-count:3 !important;
    }
}
@media screen and (max-width: 799px) {
    .webmodus-dokumente-container{
        column-count:2 !important;
    }
}
@media screen and (max-width: 600px) {
.w-toplink{
    right:5px !important;
}
    .webmodus-dokumente-container{
        column-count:1 !important;
    }
    .webmodus-form-row{
        flex-direction: column !important;
        gap:10px !important;
    }
    .webmodus-form-col-50,.webmodus-form-col-75,.webmodus-form-col-25{
        width: 100% !important;
    }
	.rev_row_zone_middle{
		height: 100% !important;
top: 0 !important;
	}
	.rev_break_columns rs-column-wrap.rs-parallax-wrap{
		height:100% !important;
	}
	rs-row-wrap, rs-column, rs-cbg-mask-wrap{
		height:100% !important;
	}
	rs-row, rs-row.rs-layer{
		height:100% !important;
	}
	rs-column-wrap > rs-column:first-child{
		height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
	}

}
@media only screen and (max-width: 925px){
    .webmodus-mitglied-tabelle article > div > div{
        flex-direction: column;
    }
    .webmodus-filter-suche-container{
        flex-direction: column;
    }.webmodus-filter-suche-container > *{
    width: 100% !important;
         }
    .webmodus-tabelle-mitglieder-top-row{
        display: none;
    }
    .webmodus-search-container{
        margin: 10px -9px 10px 9px;
    }
    .webmodus-mitglied-tabelle article > div > div > div{
        width: 100% !important;
        margin-bottom:1rem;
    }
    .webmodus-mitglied-tabelle article > div > div > div:last-child{
        margin-bottom:0 !important;
    }
}
@media screen and (max-width: 810px) {
	.citycom-custom-offnungszeiten .repeater-row{
		width:50% !important;
	}
}
@media screen and (max-width: 625px) {
	.citycom-custom-offnungszeiten .repeater-row{
		width:100% !important;
	}
}
/******************************************************/
/** MEDIA QUERIES ENDE **/
/******************************************************/


/******************************************************/
/** Partikel Effekte **/
/******************************************************/

.particletext {
  position: relative;
}

.particletext.bubbles > .particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  animation: bubbles 3s ease-in infinite;
  border-radius: 100%;
}

.particletext.hearts > .particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(204, 42, 93, 1);
  animation: hearts 3s ease-in infinite;
}

.particletext.hearts > .particle:before,
.particletext.hearts > .particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(204, 42, 93, 1);
}

.particletext.hearts > .particle:before {
  transform: translateX(-50%);
}

.particletext.hearts > .particle:after {
  transform: translateY(-50%);
}

.particletext.lines > .particle {
  position: absolute;
  background-color: rgba(244, 67, 54, 0.5);
  animation: lines 3s linear infinite;
}

.particletext.confetti > .particle {
  opacity: 0;
  position: absolute;
  animation: confetti 3s ease-in infinite;
}

.particletext.confetti > .particle.c1 {
  background-color: rgba(255, 255, 255, 0.5);
}

.particletext.confetti > .particle.c2 {
  background-color: rgba(0, 255, 0, 0.5);
}

.particletext.fire > .particle {
  position: absolute;
  background-color: rgba(255, 193, 7, 0.5);
  border-radius: 40px;
  border-top-right-radius: 0px;
  animation: fires 0.8s linear infinite;
  transform: rotate(-45deg);
  opacity: 0;
}

.particletext.fire > .particle:before {
  position: absolute;
  content: '';
  top: 60%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 40px;
  border-top-right-radius: 0px;
  background-color: rgba(251, 140, 0, 0.5);
}

.particletext.sunbeams > .particle {
  position: absolute;
  background-color: rgba(253, 216, 53, 0.5);
  animation: sunbeams 3s linear infinite;
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%);
  }
}

@keyframes hearts {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(45deg);
  }
  20% {
    opacity: 0.8;
    transform: translate(0, -20%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%) rotate(45deg);
  }
}

@keyframes lines {
  0%, 50%, 100% {
    transform: translateY(0%);
  }
  25% {
    transform: translateY(100%);
  }
  75% {
    transform: translateY(-100%);
  }
}

@keyframes confetti {
  0% {
    opacity: 0;
    transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(2000%) rotate(1440deg);
  }
}

@keyframes fires {
  0% {
    transform: rotate(-70deg) translateY(0%);
  }
  25% {
    transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }
  50% {
    transform: rotate(-70deg) translateY(-10%);
  }
  75% {
    transform: rotate(-20deg) translateY(-20%);
  }
  100% {
    transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}

@keyframes sunbeams {
  0% {
    transform: translateY(40%) rotate(0deg);
  }
  50% {
    transform: translateY(-40%) rotate(180deg);
  }
  100% {
    transform: translateY(40%) rotate(360deg);
  }
  0%, 14%, 17%, 43%, 53%, 71%, 80%, 94%, 100% {
    opacity: 0;
  }
  6%, 15%, 24%, 28%, 48%, 55%, 78%, 82%, 99% {
    opacity: 1;
  }
}