/*
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 **/


/** Seiten blenden ein **/
/*  Page Fade In */
body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* End: Page Fade In */

/******************************************************/
/** Leistungen Menu **/
/******************************************************/
.webmodus-leistungen-menu-section .vc_column-inner{
    padding:0 !important;
}
.webmodus-leistungen-menu-top-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    width: 100%;
}
.webmodus-leistungen-menu-top-container > div{
    width:25%;
}
.webmodus-leistungen-menu-top-box {
    margin-right: 1.25rem;
}

.webmodus-leistungen-menu-top-box-link {
    padding: 2rem 4rem;
    min-height: 140px;
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.webmodus-leistungen-menu-top-box-link span {
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 20px !important;
}
@media screen and (max-width: 1300px) {
    .webmodus-leistungen-menu-section{
        display: none !important;
    }
}
/******************************************************/
/** Leistungen Submenu **/
/******************************************************/
.webmodus-leistungen-child-level-0 > .webmodus-leistungen-menu-child-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
}

.webmodus-leistungen-menu-item-inner {
    /* PK: Muss nicht flex sein */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    padding:4rem 0;
    max-width: 1300px;
    width: 100%;
    min-height: 400px;
}
.webmodus-leistungen-menu-child-container{
    width:100%;
}
.webmodus-leistungen-child-level-0{
    justify-content: center;
}

.webmodus-leistungen-child-level-0 > a {
    display: none;
}
.webmodus-leistungen-child-level-0 > div > .webmodus-leistungen-menu-child-container{
    display: flex;
    justify-content: space-evenly;
    flex-flow:row nowrap;
    gap:10px;
}
.webmodus-leistungen-child-level-1{
    padding:0;
    width: calc(100% - 10px);
}
.webmodus-leistungen-child-level-1 > a,
.webmodus-leistungen-child-level-1 > span{
    color:#39475A !important;
    font-weight: 900 !important;
    margin-bottom: 5px;
    display: block;
}
/*.webmodus-leistungen-child-level-1 > a,
.webmodus-leistungen-child-level-2 > a,
.webmodus-leistungen-child-level-3 > a{
    text-decoration: underline !important;
}*/
.webmodus-leistungen-child-level-1 > a > span,
.webmodus-leistungen-child-level-1 > span{
    font-size:18px;
}
.webmodus-leistungen-child-level-2 > a,
.webmodus-leistungen-child-level-2 > span{
    color:#39475A !important;
    display: flex;
    flex-flow: row nowrap;
}
.webmodus-leistungen-child-level-2 > a:before,
.webmodus-leistungen-child-level-2 > span:before{
    content:"•";
    margin-right:5px;
}
.webmodus-leistungen-child-level-3 > a:before,
.webmodus-leistungen-child-level-3 > span:before{
    content: "-";
    margin-right:5px;
}
.webmodus-leistungen-child-level-3 > a,
.webmodus-leistungen-child-level-3 > span{
    color:#39475A !important;
    display: block;
    margin-left:1rem;
}
.webmodus-leistungen-menu-item-link{
    display: flex;
    padding:0 !important;
    text-align:left !important;
    line-height: 30px !important;
}
.webmodus-leistungen-menu-item-link::before{
    border:none !important;
    position:unset !important;
}
@media screen and (max-width: 1300px) {
    .webmodus-leistungen-submenu-section{
        display: none !important;
    }
}
/******************************************************/
/** Leistungen Content **/
/******************************************************/
.webmodus-leistungen-content-section .vc_column-inner{
    padding:0 !important;
}
.webmodus-leistungen-content-row {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 4rem 0;
}

.webmodus-leistungen-content-inner {
    max-width: 1300px;
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
    width: 100%;
}

.webmodus-leistungen-content-container > .webmodus-leistungen-content-row:nth-child(2n + 2) {
    background: #F5F7FA;
}

.webmodus-leistungen-content-container > .webmodus-leistungen-content-row:nth-child(2n + 2) > div {
    flex-direction: row-reverse;
}
.webmodus-leistungen-content-row > div > div:first-child {
    width: 40%;
}
.webmodus-leistungen-content-row > div > div:last-child {
    width: 60%;
}
.webmodus-leistungen-content-bild {
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    height: 280px;
}
.webmodus-leistungen-content-bild > img{
    object-fit: contain;
}
@media screen and (max-width: 1300px) {
    .webmodus-leistungen-content-inner{
        flex-direction: column !important;
        padding-left:1.5rem;
        padding-right: 1.5rem;
    }
    .webmodus-leistungen-content-row > div > div:first-child,
    .webmodus-leistungen-content-row > div > div:last-child{
        width: 100%;
    }
    .webmodus-leistungen-content-bild{
        height:auto;
    }
}

/** 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%;
}

/******************************************************/
/** MEDIA QUERIES START **/
/******************************************************/
/** Laptop**/
@media screen and (max-width: 1200px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
}

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

/** 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: 660px) {
    /** Allgemein **/
    /** Bereich Header **/
    /** Bereich Slider **/
    /** Bereich Before Main **/
    /** Bereich Main **/
    /** Bereich After Main **/
    /** Bereich Bottom **/
    /** Bereich Footer **/
}

/** 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 QUERIES ENDE **/
/******************************************************/