/* quicksand-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/quicksand-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* quicksand-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/quicksand-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* quicksand-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/quicksand-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



  /* caveat-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/caveat-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }



  

  *, *:before, *:after { box-sizing: border-box; padding: 0; margin: 0;  }
body {   background: #eeeeee; font-family: 'Quicksand', sans-serif; font-weight: 400; font-size:17px; padding: 0; margin: 0;}
b, strong { font-weight: 700; font-family: 'Quicksand', sans-serif;} 

.main-container {    display: flex;    flex-direction: row;    max-width: 1600px;    margin: 0 auto; }

header {  position:fixed; top:0; z-index:2; box-sizing: border-box; background: #a71680;  padding: 5px 10px;  color: #fff; width:100%;  font-size:12px; }
a#logo-mobil { width: 50px; height: 50px; display: block; margin: 0 auto 10px auto;}
#header-info-mobil { display: flex; justify-content: space-between;}
.site-title {  font-weight: 700; text-align: left; width: 100%; font-size:0.85rem;}
#kontakt-top { display:block; text-align: left; width: 100%; font-size:0.85rem;}
#kontakt-top a { color: #fff;}
#kontakt-top span.telefon, #kontakt-top span.mail { display: inline-block; margin-right:10px; }
#kontakt-top span.paypal { display: inline-block; position: relative; margin:10px 0;}
#kontakt-top span.paypal::before { content:''; background: url("images/paypal.png") no-repeat; width:19px; height: 20px; position:absolute; background-size: contain;}
#kontakt-top span.paypal a { padding-left: 23px;}
#desktop-menu, a#logo-desktop { display: none; visibility: hidden; }
#main-content { margin-top: 150px; padding: 0 20px; max-width:1400px; }
.com-content-article__body ul { margin: 0 0 0 30px;}
.com-content-article__body p { margin: 10px 0;}

/* Headlines */

h1, h2, h3 { line-height: 1.2; font-weight: 700;}
h1 { margin:20px 0 20px 0; border-bottom: 1px dotted #000; padding: 0 0 10px 0; font-size: 1.5rem;}
h2 { font-size: 1.3rem; margin: 25px 0 5px 0;}
h3 { font-size: 1.2rem; margin: 15px 0 5px 0;}
h4 { font-size: 1.0rem; margin: 5px 0 5px 0;}
.com-content-article h2 { margin-bottom: 5px;}
p { margin-bottom: 10px;}

/* Links */

a:link, a:visited { color:#a71680; text-decoration: none; padding-bottom: 1px; border-bottom:1px dotted transparent; transition: all .3s; }
a:hover, a:active { border-bottom:1px dotted #a71680; transition: all .3s; }
.showtime-image a { border:none; }

/*Menu*/
.menui {  background: #fff;  transition: 0.6s ease;  transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);   position: absolute; }
#mobil-menu ul.nav {   display:none; right:0;  top:0; position:absolute; width:100%; top:130px; background:#fff; margin:0; text-align:center; list-style-type:none; padding:20px;    }
.top-menu {  position: relative; top: 0;   width: 30px;  height: 3px;  border-radius: 2px;  background-color: #fff; transition: all .3s; }
.mid-menu {  position: relative; top: 4px;    width: 30px;  height: 3px;   border-radius: 2px; background-color: #fff; transition: all .3s;}
.bottom-menu {  position: relative; top: 8px;     width: 30px;  height: 3px;  border-radius: 2px;   background-color: #fff;transition: all .3s; }
.top-animate  {   top:5px;   -webkit-transform: rotate(45deg);  transform: rotate(45deg); transition: all .3s;  }
.mid-animate {  opacity:0; transition: all .3s; }
.bottom-animate {   top:0;   -webkit-transform: rotate(-225deg);  transform: rotate(-225deg); transition: all .3s;}
ul.mod-menu { list-style-type: none;}
ul.mod-menu li { margin-bottom: 10px;}
ul.mod-menu li a { font-weight: 700; font-size:1rem;}
ul.mod-menu li.current a { color:#e37303; }

/* Formular */
.formContainer { max-width: 700px;}
.formSpan12 label { letter-spacing: 0.05em; margin-bottom: 5px; font-size: 0.85rem;}
.formSpan12 input, .formSpan12 textarea { padding:10px 20px; border-radius:2px; border: 1px solid #ccc; width: 100%; }
.formSpan12 input[type=checkbox] { width: inherit; margin:0 10px 0 0; }
.formSpan12 .formValidation { font-size: 0.85rem; color:red}
button { background-color: #a71680; padding: 10px 15px; color: #fff; border: none; border-radius:2px; transition: all .3s;}
button:hover { background-color: #e37303; transition: all .3s; border-radius: 10px;}

/*Banner*/
.container-banner { display:none; }


/* Crop Image */

.blog-item figure.item-image  {  height: 100%;  overflow: hidden;  position: relative;  width:300px;  height:300px;  border-radius: 20px;  border:none; }
.blog-item figure.item-image img {  width: auto;  height: 100%;  aspect-ratio: 1;   object-fit: cover;  transition: transform .5s; }

/* Blog */

.blog-item figure.item-image img:hover { transform: scale(1.1); transition: transform .5s; }
.blog-item { position:relative; text-align: center; }
.blog-itemfigure .item-image  { position:relative; }
.blog-item .item-content { position: absolute; background:#fff; bottom:20px; left:20px; width:260px; border-radius: 10px; padding: 10px 5px; }
.com-content-category-blog__items .com-content-category-blog__item { margin-bottom: 1rem; }
.com-content-category-blog__item p.readmore { margin-top:10px;}
.com-content-category-blog__navigation { margin-top:20px;  }
.com-content-category-blog__navigation ul.pagination { padding:0; margin:0; list-style-type:none; display:flex; gap:10px;}
.com-content-category-blog__navigation ul.pagination li { padding: 3px 5px;}
.com-content-category-blog__navigation ul.pagination li.active  { border:1px dotted #a71680;  }
span.icon-angle-double-left { background:url(images/angle-left.svg) no-repeat; background-size: contain; display: inline-block; width:20px; height: 12px; }
span.icon-angle-double-right { background:url(images/angle-right.svg) no-repeat; background-size: contain; display: inline-block; width:20px; height: 12px; }
.com-content-category-blog__counter { color:#333; font-size: 0.85em; letter-spacing: 0.03em; margin-bottom: 10px;}

.article-info .article-info-term { display: none;}
dd.published { color:#333; font-size:0.85rem; padding-bottom:5px; }
.com-content-article dl.article-info { display: block;}
.com-content-article .com-content-article__body { display: block;}

ul.fields-container { list-style-type: none; margin: 0; padding: 0;}
.eigenschaften .custom-field-list-item { display:inline-block; padding:15px 20px; border:1px solid #ccc; border-radius:25px; background:#fff; margin-right: 5px; margin-bottom: 10px;}
ul.fields-container li.rasse span.field-value:before { position:absolute; left:0; content:''; width:20px; height:20px; background-image: url(images/rasse.png); background-size: contain; display: inline-block; margin-right: 10px;}
ul.fields-container li.geschlecht span.field-value:before { position:absolute; left:0;content:''; width:20px; height:20px; background-image: url(images/geschlecht.png); background-size: contain; display: inline-block; margin-right: 10px;}
ul.fields-container li.alter span.field-value:before { position:absolute; left:0;content:''; width:20px; height:20px; background-image: url(images/sanduhr.png); background-size: contain; display: inline-block; margin-right: 10px; background-position: unset;}
ul.fields-container li.eigenschaften { padding: 10px 0; border-bottom: 1px dotted #333; margin: 20px 0;}
ul.fields-container li.galerie { margin-top:20px; border-bottom: 1px dotted #333;  margin-bottom: 20px;}
ul.fields-container li.kontaktdetails-mail {  margin-top:20px;}
ul.fields-container li.kontaktdetails-telefonnummer .field-label, ul.fields-container li.kontaktdetails-mail .field-label  { font-weight: 700; }
li.beschreibung-des-tieres { margin-top:10px; }
ul.fields-container li.alter span, ul.fields-container li.geschlecht span, ul.fields-container li.rasse span { position: relative; padding-left: 30px; }
ul.fields-container li.bildergalerie { margin-bottom: 20px;}
img { max-width: 100%; height: auto; }


/* Footer */
footer#footer-desktop { display: none;}
footer#footer-mobil { border-top: 1px dotted #333; padding:10px 0 20px 0; margin-top: 20px;}
footer#footer-mobil ul { display: flex; padding: 0 10px;}
footer#footer-mobil ul li { margin-right: 10px;}
footer ul.mod-menu li a { color:#666; font-weight: 400;  }
img.insta, img.facebook { max-width: 15px;}

/* Sliders */
div.jwts_toggleControlContainer a.jwts_toggleOn { color:#e37303; }
div.jwts_toggleControlContainer a.jwts_toggleControl { font-weight: 700; font-size: 1.1rem; padding: 8px; background: #fff;}
div.jwts_toggleControlContainer a.jwts_toggleOff span.jwts_toggleControlTitle { background-position: 0 5px; }
div.jwts_toggleControlContainer a.jwts_toggleOn span.jwts_toggleControlTitle { background-position: 0 -140px; }
div.jwts_toggleControlContainer a.jwts_toggleOn span.jwts_toggleControlNotice { display: none;}

@media (min-width: 800px) {
  .com-content-category-blog__items { display: flex; gap:1rem; flex-wrap: wrap;}
  .com-content-category-blog__items .com-content-category-blog__item { margin-bottom: 0; }
  .com-content-article__body a.lightbox2-image-link { float: left; margin:0 20px 20px 0; }
  ul.fields-container li.rasse, ul.fields-container li.geschlecht, ul.fields-container li.alter { display: inline-block; margin-right: 15px;  }
}

@media (min-width: 1148px) {
    .site-title, #kontakt-top  { font-size:14px; display:inline-block; width: inherit ;}
    .site-title { margin-right: 20px;}
    footer#footer-mobil { display: none;}
    footer#footer-desktop { display: inherit;}
    header { margin: 0 auto; width:100%; left:250px; font-size:14px; padding:10px;}
    #kontakt-top #mod-custom110 { display: flex; gap: 20px;  }
    #kontakt-top span.paypal {  margin:0;}
    #mobil-menu, a#logo-mobil { display: none; visibility: hidden; }
    #desktop-menu { margin-top: 30px;}
    #desktop-menu, a#logo-desktop { display: inherit; visibility: inherit; }
    #desktop-menu a.toggleicon { display: none; visibility: hidden; }
    a#logo-desktop  { display: inline-block; margin:inherit; width:100px; height: 100px; margin: 0 auto; border:none; }
    #sidebar { position: fixed; z-index:1; top: 0; left: 0; height: 100%; width: 250px; display: flex; overflow-x: hidden;  flex-direction: column;
        background: #fff; border-right:1px solid #ccc; padding: 25px 20px; transition: all 0.4s ease;  -webkit-box-shadow: 2px 0px 4px -2px rgba(0,0,0,0.3); box-shadow: 2px 0px 4px -2px rgba(0,0,0,0.3); }
    #main-content { padding:30px 20px 30px 280px; margin: inherit; }
    .container-banner { padding:40px 0 0 250px; position: relative; display:inherit; }
    .container-banner .mod-custom { position: relative;}
    .container-banner .bannerbild { position: relative; }
    .container-banner .text-overlay { z-index: 1; position: absolute; bottom:40px; left:20px;  font-family: 'Caveat'; color:#fff; font-size:25px;  }
    .blog-item figure.item-image  { width:350px; height:350px;    }
    .blog-item .item-content { width:310px;  }
    footer { position: absolute; left:20px; bottom:30px;}
    footer ul.mod-menu   { display: flex; flex-wrap: wrap; gap: 10px; }
    footer ul.mod-menu li { margin: 0;}
   
  footer ul.mod-menu li.item-117 { width:100%; }
}