/************************************************************************/
/*									*/
/*			C  U  S  T  O  M				*/
/*									*/
/*									*/
/************************************************************************/

.container {

}

/*** Hintergründe ***/


.hg0, .hg1, .hg2, .hg3, .hg4, .hg5, .hg-breadcrumb, .hg-content, .hg-footer, .hg-copy {
    float:left;
    width:100%;

}

.hg0 {
    background: var(--primaerfarbe);
}




.hg3, .hg-footer {
    background: var(--hellgrau);
}
.hg-copy {
    background: var(--primaerfarbe);
    margin-bottom: 60px;
}


/* Ãœberschriften */


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, ol, p, ul {

}

h1, .h1 {
    font-weight:300;
    font-size:48px;

}

h2, .h2 {
    font-size:30px;
    font-weight:300;
    text-transform:uppercase;

}

h3, .h3 {
}

h4, .h4 {
}

h5, .h5 {
}

h6, .h6 {

}

/********************** BUTTONS / buttons *************************/




/* ENDE buttons ENDE */



/********************** SLOGAN / Slogan *************************/

.slogan {
    color: var(--weiss);
    font-size: 18px;
    text-align: center;
}
.slogan p {
    margin:0;
}


/* ENDE slogan ENDE */


/********************** LOGO & MAINMENU *************************/

.hg1-box {
    display: flex;
    align-items: flex-end;
}


/* ENDE logo + mainmenu  ENDE */


/********************** Profession / Friseur - Fußpflege - Kosmetik  *************************/

.profession {
    text-align: center;
    padding: 25px 0;
}


/* BUTTON TERMIN BUCHEN */

.btn-termin,
.btn-termin:focus {
    display: flex;
    flex-flow:row;
    background: rgb(216,113,99);
    background: radial-gradient(circle, rgba(216,113,99,1) 0%, rgba(153,72,65,1) 100%);
    width: 330px;
    height: 100px;
    line-height: 100px;
    margin: 25px auto;
    color: var(--weiss);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);
    transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);

    font-size: 22px;
    text-transform: uppercase;
    transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
    text-decoration: none;
    align-items: center;
    padding-left:40px;
    font-weight:600;
}



a.btn-termin::after {
    content: "";
    background-image: url(/images/icons/check_white200.png);
    height: 100px;
    width: 200px;
    position: relative;
    z-index: 999;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    margin:0 auto;
    border:1px solid var(--transparent);

}

.btn-termin:hover {
    font-size: 0;
    transition: all 0.25s;
    background: var(--sekundaerfarbe);
    border:1px solid var(--weiss);
    padding-left:20px;
    max-width:100%;
}

a.btn-termin:hover::after{

    background-size: 200px;
}

/* ENDE button buchen ENDE */






/* ENDE profession ENDE */






/**********************************************************************/
/************************** Layout / layout ***************************/
/**********************************************************************/

.page-header {

    border-bottom: none;
    text-align: center;
}

/*.zentriert {
    text-align: center;
}*/


/* HEADER Großer und Kleiner Kopfbereich */



/* 2, 3, 4 Spalten */

.zwei_spalten {
    width:calc( (100% - 30px) / 2);
}
div.fields-container div.zwei_spalten:nth-child(odd) {
    margin-left:0;
}
div.fields-container div.zwei_spalten:nth-child(even) {
    margin-right:0;
}


.drei_spalten {
    width:calc( (100% - 30px) / 3);
}
div.fields-container div.drei_spalten:nth-child(3n+1) {
    margin:0;
}
div.fields-container div.drei_spalten:nth-child(3n+2) {

}
div.fields-container div.drei_spalten:nth-child(3n+0) {
    margin:0;
}


.vier_spalten {
    width:calc( (100% - 45px) / 4);
}

div.fields-container div.vier_spalten:nth-child(3n+1) {
    margin:0;
}
div.fields-container div.vier_spalten:nth-child(3n+2) {
    margin:0 0 15px 0;
}
div.fields-container div.vier_spalten:nth-child(3n+3) {
    margin:0 0 15px 0;
}
div.fields-container div.vier_spalten:nth-child(3n+0) {
    margin:0 0 15px 0;
}



/* ENDE Spalten ENDE */


/****** STARTSEITE HOME ***********/

.blog-item {
    width: 100%;
    display: flex;
    flex-flow: column;

}


.item-box {
    display: flex;
    flex-flow:column;
}

figure.item-image {
    width: 100%;
}
figure.item-image img {
    width:100%;
    height: auto;

}


.item-content {
    width: 100%;
    padding: 0 35px;
}




























/* ENDE SALONS */


/* Anfahrt (OSModul) */

.anfahrt p {
    margin-top:0;
}

/*ENDE Anfahrt*/
/* ENDE HOME ENDE */

/*****************************************************************************/
/******************************* MENUS ***************************************/
/*****************************************************************************/



/* Pagination */

.pagination {
    float:left;
    width:100%;
}
.pagination ul {
    display: flex;
    flex-flow: row;
}
.pagination ul li {
    list-style:none;
}
.pagination ul li a {
    padding:5px;
}
.pagination ul li span {
    padding:5px;
}








/*********************************************************************************/
/*																				 */
/*           	              Slideshow CK               		             */
/*																				 */
/*********************************************************************************/


.swiper-img-cont {
    background-position: left center;
}


.swiper-caption {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}




.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image:url("/images/icons/white_right.png");
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image:url("/images/icons/white_left.png");
}

.swiper-pagination-bullet-active {
    background: var(--weiss);
}


.swiper-title {
    font-weight: 700;
    color: var(--weiss)fff;
    margin-bottom: 7px;
    font-size: 38px;

    line-height: 48px;
    text-align: center;
    cursor: default;


}


.swiper-desc {
    color: var(--weiss)fff;
    margin-bottom: 7px;
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
    text-align: center;
    cursor: default;

}




a.btn-slider-readmore {
    color: var(--schriftfarbe1);
    background-color: #b5bccf;
    display: inline-block;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 27px;
    padding: 9px 20px 7px 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius:0;
}

a.btn-slider-readmore:hover {
    background-color: #006cae;
    transition: all 0.2s ease;
}


.swiper-layout-vertical .swiper-caption {
    height:auto;

}
.swiper-layout-vertical .swiper-title {
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: normal;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 5px;
    left: 0;
    margin: 0;
    padding: 0;
    height: 10px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.swiper-layout-vertical .swiper-caption {
    height: auto;
    margin-bottom: 20px;
    padding: 5px;
}

/*slideshow ck ende*/

/* Slideshiw CK Salons */

/* SALONS Slider + Ãœberschrift */

.salons-box {
    background: var(--primaerfarbe);
    padding: 10px auto 5px;
}

.salons-box .page-header {

    margin: 0;
    padding: 10px 0 5px;
}


.salons-box h2{
    color:var(--weiss);
    margin: 0;
    padding: 0;
}


.salons-box .swiper-caption {
    width:100%;
}


.slider-salons .swiper-slide {
    display: flex;
    flex-flow:column;
}


.slider-salons .swiper-slide a {
    background: var(--transparent);
    transition: all 0.2s ease;
    background-size: 50%;
    background-position: top;
    display: flex;
    padding: 20px;
    margin-left: 50%;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.slider-salons .swiper-slide a:hover {
    background: var(--primaerfarbe);
    transition: all 0.2s ease;
}

.slider-salons .swiper-slide .swiper-link {
    width: 100%;
    margin-left: 0;
    height: 50px;
    margin-bottom: 0;
    bottom: 0;
    position: relative;
}


.slider-salons .swiper-slide:hover .swiper-link {
    width:100%;

}

.slider-salons .swiper-slide a::after {
    content: "Öffnungszeiten & Termin buchen";
    font-size:18px;
    color:var(--weiss);

}

.slider-salons .swiper-slide:hover a::after {
    content: "Öffnungszeiten & Termin buchen";
    font-size: 18px;
    color: var(--weiss);
}



/* Kunden */

.kunden-box {

}
.kunden-box .page-header {
    margin-bottom:0;
}

/* SLIDER KUNDEN */



.slider-kunden {
    margin-bottom:15px;
    background: var(--hellgrau);
}

.slider-kunden .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image:url("/images/icons/gray_right.png");
}

.slider-kunden .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image:url("/images/icons/gray_left.png");
}

.slider-kunden .swiper-pagination-bullet-active {
    background: var(--schriftfarbe1);
}



.slider-kunden .swiper-desc {
    font-size:18px;
    line-height: normal;
}
.slider-kunden div.swiper-slide {
    display: flex;
    flex-flow:column;
}
.slider-kunden .swiper-img-cont {
    /*    height: 100px;*/
    display: none;
}


.slider-kunden .swiper-layout-over .swiper-caption {
    position: relative;
    display: flex;
    width: 75%;
    background: var(--transparent);
    color: var(--schriftfarbe1);
    justify-content: center;
    margin: 0 auto;
    padding:0;
}



/********************  OS MODUL ****************/

.anfahrt-box h2 {
    display: none;
}



/* ENDE OS MODUL */

/***************** QUICK MENU / quickmenu / your request ******************/
/* >>>>>>>> QUICK MENU <<<<<<<<<<<< */



/* ENDE quickmenu ENDE */

/************************************************************************/
/*                          Footer              			*/
/************************************************************************/

footer {
    display: block;
    float: left;
    position: relative;
    width: 100%;
    margin-top:50px;


}





.footer-general {
    display: flex;
    justify-content: center;
}

.footer-general ul {
    margin-bottom:10px;
}
.footer-general ul li {
    float:left;
    list-style: none;
    background: none;
}
.footer-general ul li a {
}
.footer-general ul li a:hover {
}


.copyright {
    color:var(--weiss);
}









/* MAP */

.leaflet-top, .leaflet-bottom {
    z-index:500;
}




/******************************** CHRONOFORMS  *****************************/


/****************************** ende chronoforms  *******************/





/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 450px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 450px) {


}

/*ENDE @media (min-width: 450px) ENDE*/


/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 600px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 600px) {






}/*ENDE @media (min-width: 600px) ENDE*/

/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 767px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 767px) {

    #quick-menu {
        top: 80px;
    }

    .swiper-img-cont {
        background-position: center center;
    }

    .swiper-caption {
        width: 50%;
    }

    /* Button Termin buchen */
    .btn-termin,
    .btn-termin:focus {
        width: 400px;
    }

    /*Kundenerfahrung*/
    .slider-kunden .swiper-layout-over .swiper-caption {

        width: 50%;
    }

    /* Über uns */
    .item-box {

        flex-flow:row;
    }

    .hg-copy {
    
    margin-bottom: 0px;
}

}/*ENDE @media (min-width: 767px) ENDE*/

/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 990px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 990px) {



} /*ENDE @media (min-width: 990px) ENDE*/

/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 1200px)             		           */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 1200px) {



} /*ENDE @media (min-width: 1160px) ENDE*/