@charset "utf-8";
*, ::before, ::after { 
	box-sizing: border-box; 
  	margin: 0;
	padding: 0;
}
body, html {
	height: 100%;
	width: 100%;
}
body {
	font: 100%/1.4 'Roboto', sans-serif;
	color: #6b380d;	
	background-color: #f6b86b;
}
.ccm-page {
	
}
.cke_browser_gecko {
	font-family: 'Roboto' !important;
	color: #666 !important;
	line-height: 1.6 !important;
	font-size: 110% !important;
}

/* ~~ Element-/Tag-Selektoren ~~ */
img { 
	max-width: 100%;
	height: auto;
	vertical-align: bottom;	
}
.imgdesc {
	font-weight: 700;
}
a img { 
	border: none;
}
h1 {
	font: 180%/1.2 "Bree Serif", serif;
	font-weight: 400;	
	color: #f2952c;
	margin-bottom: 25px;
}
h2 {
	font: 130%/1.2 "Bree Serif", serif;	
	font-weight: 400;
	color: #f2952c;	
	margin-bottom: 20px;	
}
h3, h4, h5, h6 {
	font-size: 110%;	
	font-weight: 700;
	margin-bottom: 5px;	
}
a {
	outline: 0;	
}
.container a {
	color: #ff6600;
	text-decoration: none; 
}
.container a:hover, 
.container a:active, 
.container a:focus { 
	text-decoration: underline; 
}
.logo a {
	display: block;
}
.container p,
.container ul, 
.container ol {
	margin-bottom: 20px; 
}
.container li {
	margin-left: 18px; 
}
.contentbox img {
	margin-bottom: 5px;	
}
.imgdesc {
	margin-bottom: 25px;	
}
.contentbox hr {
	margin: 35px 0 25px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: #f2952c 3px dotted;
	height: 1px;
}


/* ~~ Layout ~~ */
.container {
	position: relative;
	width: 100%;
	max-width: 1048px;
	margin: 0 auto;
}
.sidebar {
	display: block;
	width: 100%;
	background: #f7debf;
}
.logo {
	width: calc(100% - 100px);
	max-width: 300px;
	padding: 20px 30px;
}
.sidebar .adresse {
	display: none;	
}
.footer.adresse {
	border-top: #f2952c 2px solid;
	padding-top: 30px;
	margin-top: 30px;
}
.contentbox {
	width: 100%;
	padding: 0 25px 5px;	
	background: #f7debf;
}
.flex {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.desktop { 
	display: none;
}
.navi {
	font: 120%/1.2 "Bree Serif", serif;
}

/* ~~ Slider ~~ */
.ccm-image-slider-container  {
	position: relative;
	height: 60vw !important;
	max-height: 600px;
	margin: 0 -25px 30px;
	overflow: hidden;
	z-index: 1;
	color: #FFF;
	background: #FFF;
}
.ccm-image-slider-container li  {
	margin: 0;
}
.ccm-image-slider {
	height: 60vw !important;
	max-height: 600px;	
	overflow: hidden;	
}
.ccm-image-slider-container ul.rslides li {
	height: 60vw !important;
	max-height: 600px;
}
.ccm-image-slider-container ul.rslides li img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
  width:100%;
	height:100%
}
.ccm-image-slider-text {
	display: none;
}
.rslides_tabs {
    position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	z-index: 2;
	padding: 0 !important;
}
.rslides_tabs li a {
    background: #FFF !important;
}
.rslides_tabs li.rslides_here a {
    background: #f7debf !important;
}

/* ~~ Gallery ~~ */
.ccm-block-gallery {
	margin: -5px -5px 25px;
}
.ccm-block-gallery .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.ccm-block-gallery a {
  	width: 50%;
	border: transparent 5px solid;
	overflow: hidden;
}
.ccm-block-gallery .ccm-block-gallery-image-overlay-color {
  	background-color: rgba(0,0,0,.5) !important;
}
.ccm-block-gallery .ccm-block-gallery-image {
  	padding-top: 0 !important;
	aspect-ratio: 5 / 3;
}
.ccm-block-gallery .ccm-block-gallery-image img {
  	padding-top: 0 !important;
	aspect-ratio: 5 / 3;
	bottom: 0 !important;
  	left: 0 !important;
	right: 0 !important;
  	top: 0 !important;
	margin-bottom: 0;
}
.ccm-block-gallery .ccm-block-gallery-image-overlay-text {
	text-align: center;
	font-weight: 400 !important;
	padding: 10px;
}
.ccm-block-gallery a:before {
  content: url(img/lupe.svg);
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 15px);
	z-index: 2;
	scale: 0.2;
	opacity: 0;
	 -webkit-transition: all 0.3s;
  	transition: all 0.3s;
}
.ccm-block-gallery a:hover:before {
	scale: 1;
	opacity: 1;
}
.mfp-title {
  text-align: center !important;
}
/* ~~ Zuchttier ~~ */
.zuchttier {
  	margin-bottom: 30px;
}
.zuverkaufen {
  	display: none;
}
.verkauft {
	margin-top: 20px;
  	padding: 5px;
	text-align: center;
	color: #FFF;
	background: #060;
	font-weight: 700;
}

/* YouTube */
.youtubeBlock {
	margin-bottom: 30px;
}

/* Popup section */
		.content{
            cursor: pointer;
            margin-top: 0;
            opacity: 1;
        }

        .popup {
            position: fixed;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.829);
            opacity: 0;
            transition: opacity 0.5s ease-in-out 0.2s;
        }
        .pop {
            opacity: 1;
            transition: opacity 0.2s ease-in-out 0s;
        }
        .container.pop{
            filter: blur(10px);
            z-index: 0;                
        }
        .pop>article{
            min-width: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 50% 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
        }
        .popup img{
            width: 100%;
            z-index: 5;
            animation: popup 0.3s linear both;
        }
        .close-btn{
            background: #FFF;
            border-radius: 100%;
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            font-size: 1rem;
            color: white;
            cursor: pointer;
            transition: background 0.5s ease;
            animation: popup 0.3s linear 0.3s both;
        }
        .close-btn:hover{
            background: black;
        }
        .icon-cancel::before{
            position: relative;
            top: -0.05px;
        }
        .closepopup{
            animation: closepopup 1s linear both;
        }
        @keyframes popup{
            from {
                transform: scale(0);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @keyframes closepopup{
            from {
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(0);
                opacity: 0;
            }
        }
@media (min-width: 500px) {

}
@media (min-width: 600px) {
.container {
	width: calc(100% - 60px);
}	

}

@media (min-width: 1024px) {
h1 {
	font-size: 200%;
}
h2 {
	font-size: 150%;	
}	
/* ~~ Layout ~~ */
.container {
	margin: 0 auto;
}	
.sidebar {
	position: relative;
	width: 270px;
	min-height: 100vh;
	background: #f7debf;
	padding-top: 30px;	
}
.fix {
	position: fixed;
}
.logo {
	width: 270px;	
	border-top: #f2952c 6px solid;
	border-bottom: #f2952c 6px solid;
	padding: 15px 20px;
}
.navi {
	width: 270px;	
	background: #FFF;	
	border-bottom: #f2952c 6px solid;
	padding: 15px 0;
}
.sidebar .adresse {
	display: block;
	width: 270px;
	padding: 20px 20px 0;	
}
.footer.adresse {
	display: none;	
}
.contentbox {
	width: calc(100% - 330px);
	padding: 30px 25px 5px;		
	min-height: 100vh;	
}
/* ~~ Gallery ~~ */
.ccm-block-gallery a {
  	width: 33.333%;
}
/* ~~ Zuchttier ~~ */
.bild,
.text {
  	width: 48%;
}	
}
@media (min-width: 1240px) {
/* ~~ Spaltenlayout ~~ */
div.ccm-layout-column-wrapper {
	margin: 0 -30px 30px;
}
div.ccm-layout-column {
  padding: 0 30px;
}
}
@media (max-width: 1240px) {
/* ~~ Spaltenlayout ~~ */
div.ccm-layout-column {
  width: 100% !important;
	margin-bottom: 30px;
}
}