/*
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 **/
.kurzbeschrieb_leistungen {
    transition: height 0.3s ease; /* animate height change */
}
/** Side Tab Webmodus **/
.webmodus-site-tab{
    position: fixed;
    right: 0;
    top:40%;
    width: 29%;
    z-index: 999;
    display: flex;
    flex-flow:row nowrap;
    background: #fff;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding: 20px;
    gap:20px;
    box-shadow: 0 0 7px 0 rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.25);
    transform: translate(calc(70% - 20px), 0);
    transition: transform 300ms ease-in-out;
}
.webmodus-site-tab-button{
    width: 80px;
}
.webmodus-site-tab-content{
    width: calc(100% - 80px);
}
.webmodus-site-tab-button{
    display: flex;
    flex-flow:column nowrap;
    align-items: center;
    gap:10px;
}
.webmodus-site-tab-button-image > img{
    height: 130px;
    object-fit: contain;
}
.webmodus-site-tab-button-title h3{
    font-size: 1.4em;
}
.webmodus-site-tab-button-title h3,
.webmodus-site-tab-content *{
    color: #003A7A;
}
.webmodus-site-tab-content{
    font-size: 14px;
    line-height: 1.4;
}
.webmodus-site-tab-button-title-icon{
    display: none;
}

@media screen and (max-width: 1620px){
    .webmodus-site-tab {
        width: 40%;
    }
}
@media screen and (max-width: 900px){
    .webmodus-site-tab {
        width: 60%;
    }
}
@media screen and (max-width: 810px){
    .webmodus-site-tab {
        width: 60%;
    }
}
@media screen and (max-width: 600px){
    .webmodus-site-tab {
        width: 60%;
    }
}
@media screen and (max-width: 480px){
    .webmodus-site-tab {
        width: 70%;
    }
}
@media screen and (max-width: 300px){
    .webmodus-site-tab {
        width: 80%;
    }
}
@media screen and (min-width: 811px){
    #webmodus-tab-mobile{
        display: none !important;
    }
}
@media screen and (max-width: 810px){
    .webmodus-site-tab{
        display: none !important;
    }
}
#webmodus-tab-mobile{
    background: #fff;
    border-radius: 20px;
    align-items: center;
    padding: 20px;
    margin-top:30px;
}
#webmodus-tab-mobile .titel_tab{
    color: #003A7A;
}
#webmodus-tab-mobile .text_tab{
    font-size: 14px;
    line-height: 1.4;
    color: #003A7A;
}
iframe{
    margin-bottom: -10px !important;
}
    /** Side Tab Webmodus Ende **/
/** 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 */

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