/*
 Theme Name: ChienChat-Theme
 Theme URI: https://www.hozjan.net/
 Description: Dies ist ein <b>ready-to-start</b> Child-Theme f&uuml;r Chien & Chat. Entwickelt und bereitgestellt von Hozjan Artwork. Dieses Theme beinhaltet alle notwendigen Dateien, um den schnellen und einfach Start zu erm&ouml;glichen.
 Author: Hozjan Artwork - Benny Hozjan
 Author URI: https://www.hozjan.net/
 Template: Divi
 Version: 1.0.0
 Tag: Child Theme, Hozjan Artwork 
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

.single .et_pb_post {
  margin-bottom:0
}

.sortiment-blurb .et_pb_blurb .et_pb_blurb_description p {
  transition:var(--tra-3s);
   margin-top:5px;
  font-weight:var(--me)
}
.sortiment-blurb .et_pb_blurb:hover .et_pb_blurb_description p {
  cursor:pointer;
  color:var(--blue);
  margin-left:-3px;
}


/* Logo-Slider */
.customer-logos .et_pb_module {
  margin-bottom:4rem!important;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


/* ==========================================================================
   Standard CSS
   ========================================================================== */
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
	}

html { font-size: 62.5%; }

#page-container {overflow:hidden}
 
a[href^="#"] {cursor:pointer}

:root {
	/* Global Colors */
	--blue: 	#0033CC;
	--dark:		#132044;
	--light:	#e0e7f9;
	--yellow:	#FAB907;
	--black:	#000000;
	--white:	#ffffff;
	
	/* Font Weight */
	--bo:	700;
	--me:	500;
	--li:	300;
	
	/* Transition */
	--tra-3s: all .3s ease-in-out;
	}

::-moz-selection { background: var(--blue); color: var(--white) }
::selection { background: var(--blue); color: var(--white); }


.mce-panel .mce-stack-layout-item.mce-first {
	position: sticky!important;
	top: -60px;
}

.bh-align-center-section,
.bh-align-center-row .et_pb_column,
.bh-align-center-module {
   display: flex;
   flex-direction: column;
   justify-content: center;
}


/*set the defautl background color of the header section*/
.et-db #et-boc .et-l .bh_header {
	background: transparent;
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
}
.et-db #et-boc .et-l .bh_header .et_pb_menu__logo {
  background:white;
  padding:1rem;
  margin-top:0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

/*set the background color of the fixed header when scrolling*/
.et-db #et-boc .et-l .bh-fixed-header {
	background-color: #fff!important;
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
	box-shadow:0px 0 50px rgba(0,0,0,.2)
}

.et-db #et-boc .et-l .bh-fixed-header .et_pb_menu.et_pb_menu ul li a {
	color: var(--dark)!important
}

.et_pb_section.bh_header .mobile_nav .mobile_menu_bar:before {
	color:white;
}
.et_pb_section.bh-fixed-header .mobile_nav .mobile_menu_bar:before {
    color: var(--blue)!important;
    font-size: 40px;
} 
.et_pb_module .et_mobile_menu {
    width: calc(100% + 5rem);
    left: -2.5rem;
    margin-top: 1rem;
    box-shadow: rgb(112 111 111 / 15%) 0px 20px 30px -6px;
    border-radius: 1rem 1rem 1rem 1rem
}
.bh-fixed-header .et_pb_module .et_mobile_menu {
	margin-top: 0;
	 border-radius: 0rem 0rem 1rem 1rem
}

/* ==========================================================================
   Popup Button CSS
   ========================================================================== */
.aktion {
  background:var(--blue);
  color:#fff;
 font-weight:bold;
  display:table;
  height:30px;
  padding:1rem 1.5rem;
  margin-top:20px;
  margin-right:30px;
  border-radius:30px
}

/* Tablets in Portrait-Modus zwischen (768-980px) */
@media only screen and ( min-width: 375px ) and ( max-width: 980px ) {
    .aktion {margin-top:0;}
}
/* ==========================================================================
   Popup CSS
   ========================================================================== */
/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .dl-popup-wrapper {
  position:fixed;
  z-index:990;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: all .5s cubic-bezier(.14,.06,.41,1.39);
  opacity:0;
  visibility:hidden;
}
body:not(.et-fb) .dl-popup-wrapper.popup-is-visible {
  opacity:1;
  visibility:visible;
}


/* Allow the content inside the popup wrapper to scroll */
.dl-popup-inside {
  height:100%;
  overflow-y: scroll;
}


/* Prevent Body from Scrolling when Popup is visible */
body.dl-noscroll {
  overflow: hidden;
}

/* Center Align Popup Content inside the Section */
.dl-popup-content {
  display:flex;
  flex-direction:column;
  justify-content: center;
}
.dl-popup-content .et_pb_row {
  margin-top:0;
  margin-bottom:0;
}


/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:46px;
  }
}
@media (min-width:783px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:32px;
  }
}

/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
  z-index:99999;
}

/* Add a hand cursor to the close trigger element */
.dl-popup-close {
  cursor:pointer;
}

/* Add Row animation when popup is triggered */
.dl-popup-wrapper.popup-is-visible .et_pb_row:not(.dl-popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}

/* ==========================================================================
   Footer CSS
   ========================================================================== */
.bh_footer .et_pb_module.et_pb_text .et_pb_text_inner p,
.bh_footer .et_pb_module.et_pb_blurb p {
  font-size:1.4rem;
  color:#fff;
  line-height: 1.7rem;
}
.bh_footer .et_pb_module.et_pb_text .et_pb_text_inner h5,
.single-sortiment_katze .bh_footer .et_pb_module.et_pb_text .et_pb_text_inner h5,
.single-sortiment_hund .bh_footer .et_pb_module.et_pb_text .et_pb_text_inner h5 {
	color:#fff
}

/* ==========================================================================
   Gutschein CSS
   ========================================================================== */
.bh-cta .et_pb_promo_description h2 {
  font-weight:var(--bo);
  margin-bottom:2rem;
  font-size:3.5rem
}

.bh-cta .et_pb_promo_description p {
  font-size:2rem;
  font-weight:var(--li);
  margin-bottom:2rem
}


/* ==========================================================================
   Blurb Hover Hunde & Katzen CSS
   ========================================================================== */
#bh_blurb .et_pb_blurb .et_pb_main_blurb_image {
  transition:var(--tra-3s)
}
#bh_blurb .et_pb_blurb:hover .et_pb_main_blurb_image {
  transform:scale(1.1)
}

/* ==========================================================================
   Galerie CSS
   ========================================================================== */
.et_pb_gallery .et_overlay {
background: rgba(1, 51, 204,.8)!important
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  content: '';
  background-color: #fff;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index:99;
}

.et_pb_gallery_image:before {
  width: 60px;
  height: 1px;
  left: 100%;
}

.et_pb_gallery_image:after {
  height: 60px;
  width: 1px;
  top: 0%;
}

.et_pb_gallery_item:hover .et_overlay {
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  opacity: 0.7;
}

.et_pb_gallery_image:hover:before,
.et_pb_gallery_image:hover:after{
  opacity: 1;
  top: 50%;
  left: 50%;
}


.et_pb_inline_icon:before, 
.et_overlay.et_pb_inline_icon:before {
  content:'';
  }


/* ==========================================================================
   Cat & Dog Category CSS
   ========================================================================== */
.cat-dog,
.cat-cat {
  border-radius:20px;
  padding:20% 8%;
  transition:var(--tra-3s);
  overflow:hidden
 }

.cat-dog h4,
.cat-cat h4 {
  color:rgba(255,255,255,.3);
  font-weight:900;
  font-size:5rem!important;  
}
.cat-dog h4 {
  text-align:right;
}

.cat-dog:hover h4,
.cat-cat:hover h4 {
  color:#fff
}

.cat-dog:hover{
	cursor:pointer;
	background-image:url('https://chienchat.ch/wp-content/uploads/2021/12/chien-chat-dog-1.jpg');
}
.cat-cat:hover {
   cursor:pointer;
   background-image:url('https://chienchat.ch/wp-content/uploads/2021/12/chien-chat-cat-1.jpg');
}


/* ==========================================================================
   Font CSS
   ========================================================================== */
.bh_top-title::before {
  content:"—";
  display:block;
  position:absolute;
  left:0;
  font-size:2rem;
  color: var(--blue);
  font-weight:var(--me);
}

.bh_top-title p {
 padding-left:25px;
 display:inline-table;
 position:relative;
 font-weight:var(--me)!important;
 font-size:1.8rem!important;
 font-style:italic!important
}   
   
   
.et_pb_module.et_pb_text h1 {
	font-size : clamp(3rem, 10vw, 5.5rem);
	line-height : clamp(3rem, 10vw, 6rem);
	font-weight: var(--bo)
}
	
.et_pb_module.et_pb_text h2 {
	font-size : clamp(2rem, 10vw, 3rem);
	line-height : clamp(2.8rem, 10vw, 3.2rem);
	font-weight: var(--bo)
}

.et_pb_module.et_pb_text h3 {
	font-size : clamp(1.8rem, 10vw, 2.8rem);
	line-height : clamp(2.4rem, 10vw, 3rem);
	font-weight: var(--li)
}

.et_pb_module.et_pb_text h4 {
	font-size : clamp(2.3rem, 10vw, 3rem);
	line-height : clamp(2.8rem, 10vw, 3.2rem);
	font-weight: var(--bo)
}

h4.et_pb_module_header {
	font-size: clamp(1.8rem, 10vw, 1.8rem);
    line-height: clamp(2.2rem, 10vw, 2.4rem);
    font-weight: var(--bo);
    color:var(--blue)	
}

.et_pb_module.et_pb_text p,
.et_pb_blurb_description p {
	font-size: clamp(1.8rem, 10vw, 1.8rem);
    line-height: clamp(2.2rem, 10vw, 2.4rem);
    font-weight: var(--li);	
}

.et_pb_module.et_pb_text ul li::marker {
  color:var(--blue)
}
/* ==========================================================================
   Footer CSS
   ========================================================================== */
.et-db #et-boc .bh_footer ul.bh-footer-data {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 20px;
    list-style-type: none;
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase
}

.et-db #et-boc .bh_footer ul.bh-footer-data li {
    margin: auto
}

.et-db #et-boc .bh_footer ul.bh-footer-data li a {
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
    color: var(--white)!important
}

.et-db #et-boc .bh_footer ul.bh-footer-data li a:hover {
    color: var(--yellow)!important
}