/*
  Theme Name: Amplus WP-Praxis
  Theme URI: https://amplus.ch
  Version: 1.0.0
  Template: Divi
  Author: Amplus WP-Praxis
  Author URI: https://amplus.ch
  Text Domain: amplus-wp-praxis
  License: GNU General Public License v2 or later
  License URI: https://amplus.ch
*/

/* Hide Google ReCaptcha Batch */
.grecaptcha-badge { 
    visibility: hidden !important;
}

/* Margin Bottom im Textmodul auf mobile entfernen */
@media (max-width: 980px) {
    .et_pb_column .et_pb_module {
        margin-bottom: 0px;
    }
}

/* Default Margin H-Elemente */
.et_pb_module h2 {
	margin-bottom:10px;
}




/* MadMenu content with submenus */
.dvmm_menu__menu .dvmm_menu li ul.sub-menu {
    width: max-content;
} 




/* Ferienunterkunft Sorglos 360 */


/* Container Start */
.sorglos-hero-container {
    width: 100%;
    height: 100%;
    position: relative;
    resize: both;
    overflow: hidden;
    padding-top: calc(2 * var(--padding));
    padding-bottom: calc(2 * var(--padding));
}
/*Container End*/



/* Icons Start */
.icon-buchung {
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid;
    border-color: black;
    position: absolute;
    max-width: 25%;
    transform: translate(55%, -10%);

}

.icon-kommunikation {
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid;
    border-color: black;
    position: absolute;
    max-width: 25%;
    transform: translate(245%, 10%);
}

.icon-calendar {
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid;
    border-color: black;
    position: absolute;
    max-width: 25%;
    transform: translate(153%, 232%);
}


@media (max-width: 981px) {
    .icon-buchung {
        max-width: 37%;
        transform: translate(7%, -11%);
    }

    .icon-kommunikation {
        max-width: 37%;
        transform: translate(170%, -32%);
    }

    .icon-calendar {
        max-width: 37%;
        transform: translate(86%, 300%);
    }
}

/* Icons End */

/**** LAYOUT  ****/

/* multi column classes for desktop  */
@media (min-width: 981px) {

    .two-col {
        column-count: 2;
        gap: var(--gap);
    }

    .three-col {
        column-count: 3;
        gap: var(--gap);
    }
}


/* GRID 2 column layout */
@media (max-width: 981px) {
    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        /*max-width: 100%;*/ /* Maximale Breite des Grid-Containers, basierend auf den Breiten der Spalten */
        /*width: 100%;*/ /* Sicherstellen, dass der Container responsiv bleibt */
        /*margin: 0 auto;*/ /* Zentrieren des Containers */
        align-items: center;
    }
}



@media (min-width: 981px) {
    .grid-container {
        display: grid;
        align-items: center;
        grid-template-columns: [full-width-start] 1fr [left-padding-start] var(--padding) [left-column-start] minmax(0, calc(var(--half-content-max-width) - (var(--gap-1080) / 2))) [gap-start] calc((var(--gap-1080) / 2)) [gap-mid]calc((var(--gap-1080) / 2)) [right-column-start] minmax(0, calc(var(--half-content-max-width) - (var(--gap-1080) / 2))) [right-padding-start] var(--padding) [right-padding-end] 1fr [full-width-end];
    }

        .grid-container > .content-left {
            grid-column: left-column-start / gap-start;
        }

        .grid-container > .content-right {
            grid-column: right-column-start / right-padding-start;
        }

        .grid-container > .full-content {
            grid-column: left-column-start / right-padding-start;
        }

        .grid-container > .content-left-full-width {
            grid-column: full-width-start / gap-start;
        }

        .grid-container > .content-right-full-width {
            grid-column: gap-mid / full-width-end;
        }
}


/**** LAYOUT  END****/


/*Container Frau Start*/
.frau-mit-kaffee {
    width: 100%;
    
}
.frau-mit-kaffee {
    max-width: 95%;
    display: block;
    margin: auto;
    border-radius: 50%;
}
@media (min-width: 981px) {
    .frau-mit-kaffee img {
        max-width: 50%;
        border-radius: 0%;
    }
}


    /* Container Frau End */

    /* Hero sections styles */
    .portfolio-hero::after {
        content: '';
        background: url('../../uploads/2024/03/Amplus-Bird-left.svg');
        width: 256px;
        height: 256px;
        position: absolute;
        background-repeat: no-repeat;
        right: 0px;
        top: 0px;
        opacity: 0.1;
        visibility: visible;
    }
    /* Blog Seite Meta Tags Styling */
    .post-meta {
        background-color: #001d3d !important;
        padding: 2px !important;
        display: inline;
    }



    /* Felder bei Kommentar ausblenden */
    #reply-title, #email-notes, .comment-form-cookies-consent, .required-field-message, .comment_date {
        display: none;
    }

    /* CSS für Kommentar */
    #respond {
        padding-top: 0px;
    }


    /* Hintergrundfarben für die Projectseiten */
    .color-sbpv {
        --color: #D60B52 !important;
    }

    .color-gherzi {
        --color: #2370c0 !important;
    }

    .color-tbz {
        --color: #00A0E5 !important;
    }

    .color-kt24 {
        --color: #F4583F !important;
    }

    .color-chalet {
        --color: #DB7093 !important;
    }

    .color-adriavino {
        --color: #691A55 !important;
    }

    /*apply the link underline and other styling*/
    .fancy-links-portfolio .et_pb_text a, .fancy-links .dvmd_tm_table a, .et_pb_code_inner a {
        --_fancy-link-color: var(--color,red);
        background-image: linear-gradient(120deg, var(--_fancy-link-color) 0%, var(--_fancy-link-color) 100%);
        background-repeat: no-repeat;
        background-size: 100% 2px;
        background-position: 0 100%;
        transition: background-size 0.25s ease-in-out;
        color: inherit !important;
        font-weight: bold;
    }

        /*animate the line into a background on hover*/
        .fancy-links-portfolio .et_pb_text a:hover, .fancy-links .dvmd_tm_table a:hover {
            --_text-color: var(--text-color,red);
            background-size: 100% 100%;
            color: var(--_text-color) !important;
            transition: ease all .3s;
        }

    .color-splerin {
        --color: #CA7F40 !important;
    }




    /*apply the link underline and other styling*/
    .fancy-links .et_pb_text a, .fancy-links .post-content a, .fancy-links .dvmd_tm_table a {
        background-image: linear-gradient(120deg, #FFC300 0%, #FFC300 100%)!important;
        background-repeat: no-repeat!important;
        background-size: 100% 2px!important;
        background-position: 0 100%!important;
        transition: background-size 0.25s ease-in-out!important;
        color: inherit !important;
        font-weight: bold!important;
    }

        /*animate the line into a background on hover*/
        .fancy-links .et_pb_text a:hover, .fancy-links .dvmd_tm_table a:hover, .fancy-links .post-content a:hover {
            background-size: 100% 100%!important;
            color: #000000 !important;
            transition: ease all .3s!important;
        }

            /* zusätzliche einstellungen für fancy link blog */
        .fancy-links .post-content a {
            display:inline;
            padding:5px;
        }


        .et_pb_blog_0 .pagination a {
            color:black;
            font-size:19px;
        }


    /* Blurb Angebot Titel vertikal zentrieren */
    .startseite-blurb .et_pb_blurb_container {
        vertical-align: middle;
        position: relative;
        top: 0px;
    }



    /* Remove Divi Default Padding on Headings */
    h1, h2, h3, h4, h5, h6 {
        padding-bottom: 0px;
    }

    /* Remove Divi Default Padding on Headings */
    .no-bottom-padding p {
        padding-bottom: 0px;
    }



/* Silbentrennung aktivieren */
p, h1, h2, h3, h4, h5, h6 { 
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 hyphens: auto;
}



    /* CSS für Startseite */
    .et_pb_column_1_3 {
        margin-bottom: 0px !important;
    }

    .we-can-do {
        background-color: black !important;
        padding: 4px 4px 4px 4px;
    }

    .gelb {
        background-color: #ffd60a;
        padding: 5px 5px 5px 5px;
    }

    .wordpress-unterricht {
    }

    .blau {
        background-color: #003566;
        padding: 5px 5px 5px 5px;
    }

    .black {
        background-color: #000000;
        padding: 5px 5px 5px 5px;
    }

    .green {
        --color: green;
    }


    .wordpress-unterricht {
        background-color: rgba(186,148,255,0.7);
        padding: 5px 5px 5px 5px;
    }

    .beratung {
        background-color: #4a4f6e;
        padding: 5px 5px 5px 5px;
    }

    .erweiterung {
        background-color: rgba(87,186,233,0.70);
        padding: 5px 5px 5px 5px;
    }


    .underline-h1:after {
        content: '';
        height: 3px;
        width: 10%;
        background: #000000;
        display: block;
        position: relative;
        top: 10px;
    }

    /*
@media screen and (min-width: 980px) and (max-width: 1280px) {
  .animated-svg { 
    margin-top:-200px!important; } }
*/

    @media screen and (min-width: 305px) and (max-width: 390px) {
        .we-love-wordpress h3, .we-love-wordpress p {
            font-size: 18px !important;
        }
    }

    @media screen and (max-width: 304px) {
        .we-love-wordpress h3, .we-love-wordpress p {
            font-size: 12px !important;
        }
    }



    /* Ende Startseite */



    /*Selection Color */
    ::selection {
        background: #FFC300; /* WebKit/Blink Browsers */
    }

    ::-moz-selection {
        background: #FFC300; /* Gecko Browsers */
    }



    /* Sidebar schwarzer Text */
    .et_pb_widget a {
        color: black !important;
    }


    .mobile_nav.opened ul#mobile_menu1 {
        height: auto !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .mobile_nav.closed ul#mobile_menu1 {
        display: none !important;
    }

    #main-menu-amplus .et_mobile_menu .sub-menu li a {
        font-size: 17px;
        font-weight: 400;
    }




    /* Custom Underline*/

    .underline-yellow {
        background: url("../../uploads/2022/05/Underline-yellow.webp") bottom left no-repeat;
        background-size: 100% 10px;
        padding-bottom: 8px;
    }

    .underline-blue {
        background: url("../../uploads/2022/05/Underline-blue.webp") bottom left no-repeat;
        background-size: 100% 10px;
        padding-bottom: 8px;
    }


    .underline-h1-black {
        background: url("../../uploads/2022/04/underline-h1-black.webp") bottom left no-repeat;
        background-size: 100% 10px;
        padding-bottom: 8px;
    }


    .underline-white {
        background: url("../../uploads/2022/04/underline-white.webp") bottom left no-repeat;
        background-size: 100% 10px;
        padding-bottom: 8px;
    }



    /*! Global Style Classes 
 * */
    /* Inline */
    .display-inline, .display-inline div {
        display: inline;
    }


    /* Flex */
    .justify-center {
        --justify: center;
    }

    .justify-start {
        --justify: flex-start;
    }

    .justify-end {
        --justify: end;
    }

    /* As Header */
    .asH1 p {
        font-size: var(--h1);
        color: var(--font-color);
    }

    .asH2 p {
        font-size: var(--h2);
        color: var(--font-color);
    }

    .asH3 p {
        font-size: var(--h3);
        color: var(--font-color);
    }

    .asH4 p {
        font-size: var(--h4);
        color: var(--font-color);
    }

    .zitat p {
        font-size: var(--h3);
        color: var(--font-color);
    }

    /* With Underline */
    .with-underline a {
        text-decoration: underline !important;
    }

    /**** PADDING ****/
    .no-padding {
        padding: 0px !important;
    }

    /*! Class for default padding */
    .default-padding {
        padding: var(--padding) !important;
    }


    /*! Class for default padding */
    .top-bottom-padding {
        padding-top: var(--padding) !important;
        padding-bottom: var(--padding) !important;
    }

    .left-right-padding {
        padding-left: var(--padding) !important;
        padding-right: var(--padding) !important;
    }


    @media (max-width: 981px) {
        .top-bottom-padding-mobile {
            padding-top: var(--padding) !important;
            padding-bottom: var(--padding) !important;
        }

        .default-padding-mobile {
            padding: var(--padding) !important;
        }
    }

    /**** PADDING END ****/


    /**** MARGIN ****/
    .no-margin {
        margin: 0px !important;
    }

    /*! Class for default margin */
    .default-margin {
        margin: var(--margin) !important;
    }


    /*! Class for default margin */
    .top-bottom-margin {
        margin-top: var(--margin) !important;
        margin-bottom: var(--margin) !important;
    }

    
    .bottom-margin {
        margin-bottom: var(--margin) !important;
    }

    .left-right-margin {
        margin-left: var(--margin) !important;
        margin-right: var(--margin) !important;
    }

    .left-margin {
        margin-left: var(--margin) !important;
    }


    @media (max-width: 981px) {
        .top-bottom-margin-mobile {
            margin-top: var(--margin) !important;
            padding-bottom: var(--margin) !important;
        }

        .default-margin-mobile {
            margin: var(--margin) !important;
        }
    }

    /**** MARGIN END ****/




    /* Background Color primary */
    .background-color {
        --_background-color: var(--color, red);
        background-color: var(--_background-color);
    }



    /* primary Color Variation Classes */
    .primary-color-ultra-light {
        --color: var(--primary-color-ultra-light);
    }

    .primary-color-light {
        --color: var(--primary-color-light);
    }

    .primary-color-medium {
        --color: var(--primary-color-medium);
    }

    .primary-color-dark {
        --color: var(--primary-color-dark);
    }

    .primary-color-ultra-dark {
        --color: var(--primary-color-ultra-dark);
    }

    /* secondary Color Variation Classes */
    .secondary-color-ultra-light {
        --color: var(--secondary-color-ultra-light);
    }

    .secondary-color-light {
        --color: var(--secondary-color-light);
    }

    .secondary-color-medium {
        --color: var(--secondary-color-medium);
    }

    .secondary-color-dark {
        --color: var(--secondary-color-dark);
    }

    .secondary-color-ultra-dark {
        --color: var(--secondary-color-ultra-dark);
    }

    /* Tertiary Color Variation Classes */
    .tertiary-color-ultra-light {
        --color: var(--tertiary-color-ultra-light);
    }

    .tertiary-color-light {
        --color: var(--tertiary-color-light);
    }

    .tertiary-color-medium {
        --color: var(--tertiary-color-medium);
    }

    .tertiary-color-dark {
        --color: var(--tertiary-color-dark);
    }

    .tertiary-color-ultra-dark {
        --color: var(--tertiary-color-ultra-dark);
    }

    /* Black Color Class */
    .color-black {
        --color: black;
    }

    /* White Color Class */
    .color-white {
        --color: white;
    }


    /* Black Text Color Class */
    .text-color-black {
        --text-color: black;
    }

    /* White Text Color Class */
    .text-color-white {
        --text-color: white;
    }




    /**** Image helper class */
    .stretch-image-x .et_pb_image_wrap, .stretch-image-x img {
        object-fit: cover;
        width: 100% !important;
    }


    .stretch-image-y .et_pb_image_wrap, .stretch-image-y img {
        object-fit: cover;
        height: 100% !important;
    }

    .et_pb_section_video:not(.et_pb_section--with-menu) {
        overflow: visible !important;
    }

    /*Divi inline buttons */
    .inline-buttons .et_pb_button_module_wrapper {
        display: inline-block;
    }

    /* Divi inline buttons align */
    .inline-buttons {
        text-align: right;
    }


    /*Divi inline buttons only Desktop & Tablet */
    @media screen and (min-width: 481px) {
    .inline-buttons-desktop .et_pb_button_module_wrapper {
        display: inline-block;
    }
    }



    /* Fancy Divi Button with Keyframes */
    .et_pb_button_module_wrapper > .btn:link {
        text-decoration: none;
        padding-top: var(--half-quarter-padding);
        padding-right: var(--quarter-padding);
        padding-bottom: var(--half-quarter-padding);
        padding-left: var(--quarter-padding);
        transition: all .2s;
        position: relative;
        border-radius: 0px;
        border: 2px solid;
        border-color: black;
        isolation: isolate;
    }

    .et_pb_button_module_wrapper > .btn:active {
        border-color: var(--primary-color-medium);
    }

    .et_pb_button_module_wrapper > .btn::after {
        content: "";
    }

    .et_pb_button_module_wrapper > .btn:hover {
        --_background-color: var(--color,red);
        background-color: var(--_background-color);
        animation: pulse-btn 2s;
    }

    .et_pb_button_module_wrapper > .btn {
        --_background-color: var(--color,red);
        --_color: var(--font-color-hex,red);
        background-color: var(--_background-color);
        color: var(--_color);
        font-size: var(--p);
        font-weight: 800;
    }





    @keyframes pulse-btn {
        0% {
            box-shadow: 0 0 0 0 rgba(var(--primary-color-r), var(--primary-color-g), var(--primary-color-b), 0.7);
        }

        70% {
            box-shadow: 0 0 0 15px rgba(255, 82, 82, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
        }
    }

        @keyframes pulse-btn-grey {
        0% {
            box-shadow: 0 0 0 0 rgba(238, 238, 238, 0.7);
        }

        70% {
            box-shadow: 0 0 0 15px rgba(255, 82, 82, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
        }
    }



    /* Main Menu Animation */
    #menu-amplus-v2-1 > li:hover {
        animation: pulse-btn 2s;
    }



    /* Fancy Contact Form Button with Keyframes */
    .btn button:link {
        text-decoration: none;
        padding-top: var(--half-quarter-padding);
        padding-right: var(--quarter-padding);
        padding-bottom: var(--half-quarter-padding);
        padding-left: var(--quarter-padding);
        transition: all .2s;
        position: relative;
        border-radius: 0px;
        border: 2px solid;
        border-color: black;
        isolation: isolate;
    }

    .btn button:active {
        border-color: var(--primary-color-medium);
    }

    .btn button:hover {
        --_background-color: var(--color,red);
        background-color: var(--_background-color);
        animation: pulse-btn 2s;
    }

    .btn button {
        --_background-color: var(--color,red);
        --_color: var(--font-color-hex,red);
        background-color: var(--_background-color);
        color: var(--_color);
        font-size: var(--p);
        font-weight: 800;
    }




    /* Contanct Form Button */
    .et_contact_bottom_container > button:hover {
        animation: pulse-btn 2s;
    }

    .et_contact_bottom_container > button {
        padding-top: var(--half-quarter-padding) !important;
        padding-right: var(--quarter-padding) !important;
        padding-bottom: var(--half-quarter-padding) !important;
        padding-left: var(--quarter-padding) !important;
    }

    .et_contact_bottom_container > button::after {
        display:none;
    }




    /* Divi Pixel Card Button Animation */

    .dipi_hover_box .et_pb_button:link {
        text-decoration: none;
        padding-top: var(--half-quarter-padding);
        padding-right: var(--quarter-padding);
        padding-bottom: var(--half-quarter-padding);
        padding-left: var(--quarter-padding);
        transition: all .2s;
        position: relative;
        border-radius: 0px;
        border: 2px solid;
        border-color: black;
    }

    .dipi_hover_box .et_pb_button:active {
          border-color: #eeeeee;

    }

    .dipi_hover_box .et_pb_button:hover {
        
         animation: pulse-btn-grey 2s;

    }

    .dipi_hover_box .et_pb_button {
        background-color: #eeeeee;
        color: #000000;
        font-size: var(--p);
        font-weight: 800;
        }

        .dipi_hover_box .et_pb_button::after {
         display:none;
        }




    /* Divi Reaveal Button */

    .btn .dipi-reveal-button:link {
        text-decoration: none;
        padding-top: var(--half-quarter-padding);
        padding-right: var(--quarter-padding);
        padding-bottom: var(--half-quarter-padding);
        padding-left: var(--quarter-padding);
        transition: all .2s;
        position: relative;
        border-radius: 0px;
        border: 2px solid;
        border-color: black;
    }

    .btn .dipi-reveal-button:active {
          border-color: #eeeeee;

    }

    .btn .dipi-reveal-button:hover {
        
         animation: pulse-btn-grey 2s;

    }

    .btn .dipi-reveal-button {
        background-color: #eeeeee;
        color: #000000;
        font-size: var(--p);
        font-weight: 800;
        }

        .btn .dipi-reveal-button::after {
         display:none;
        }


/* Anchor fixed Header */
#einzelkurse, #gruppenkurse {
	padding-top: 150px;
}

body {
	overflow:initial!important;
}



    /* Zurück Icon ausblenden */
    .dvmm_back_home {
        display: none !important;
    }