@font-face {
    src: url("../fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf");
    font-family: "Source Sans 3";
    font-weight: 400;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100% !important;
  height: 100%;
  vertical-align: baseline;
  font-family:'Source Sans 3', Arial, sans-serif;
  background-color: rgb(255, 255, 255);
}
body.overflow_hidden, html.overflow_hidden
{
    overflow: hidden;
}
h1{
     font-size:2.8em;
     line-height:1.5em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:500;
     color:#555555;
     margin:0em;
 }

 h2{
     font-size:1.5em;
     line-height:1.0em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:500;
     color:rgb(231, 89, 8);
     margin:0em;
     margin-left:0.5em;
     padding:1.0em;
     text-align:left;
 }
 h2 a{
     font-size:1.5em;
     line-height:1.0em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:500;
     color:rgb(231, 89, 8);
     margin:0em;
     margin-left:0.5em;
     padding:1.0em;
     text-align:left;
 }
h2 a:hover{
   cursor: pointer;
   color:rgb(231, 89, 8);
   border-bottom:0em;
 }
 h3{
     font-size:1.0em;
     line-height:0.1em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:500;
     color:#666666;
     margin:0em;
     padding:1.0em;
     text-align:left;
 }
 h4{
     font-size:0.8em;
     line-height:0.1em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:500;
     color:#666666;
     margin:0em;
     padding:1.0em;
     text-align:left;
 }
 p {
     line-height:1.25em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:100;
     color:#222222;
     margin:0em;
     padding:1.25em;
     text-align:justify;
 }
 a {
     list-style:square;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:100;
     color:#222222;
     line-height:1.25em;
     padding:0em;
     margin:0.313em 0em 0.313em 0em;
 }
a:hover{
   cursor: pointer;
   border-bottom:0.13em solid #E75908;
 }
 div {
     line-height:1.25em;
     font-family:Helvetica;
     font-weight:100;
     color:#000000;
     margin:0em;
     padding:0em;
     text-align:left;
 }
 ul {
     margin:0em;
     padding:0em;
 }

 li {
     list-style:square;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:100;
     color:#222222;
     line-height:1.25em;
     padding:0em;
     margin:0.313em 0em 0.313em 0em;
 }
.link{
   cursor: pointer;
   color:#333333;
   border-radius: 4px;
  background-image: url(../_imagefiles/global/icon-weblink.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  border-bottom:0.188em solid #ffffff;
 }
.link:hover{
   cursor: pointer;
   border-bottom:0.188em solid #E75908;
 }



.footer {
  grid-column: 1/4;
  grid-row: 4/5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-template-rows: none;
  grid-gap: 0;
  margin: 0em;
  background-color: rgb(237, 237, 237);
  color: #cccccc;
  min-height: 300px;
}


 .setclear { clear: both; }



 #loading {
     position: absolute;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
  background:#ffffff;
  background-image: url(https://www.hounds-yard.de/_imagefiles/global/loader.gif);
    background-size:250px;
    background-repeat:no-repeat;
    background-position:center;
    z-index:10000000;
    opacity: 0.5;
    filter: alpha(opacity=50);
 }

figure.align-left {
  float: left;
}

figure.align-right {
  float: right;
}

figure.image figcaption {
  line-height:1.9em;
  font-family:'Source Sans 3', Arial, sans-serif;
  font-size:0.8em;
  font-weight:80;
  text-align: center;
}


a {
    text-decoration: none;
}

/****************************************************************
/*          CSS Style für ADMIN Preview Foto erstellen
/***************************************************************/
.sectionmain {
    display: inline-block;
    width:90%;
    background:#ffffff;
    vertical-align: top;
    margin:1em;
    padding:0em;
     font-family:Helvetica;
    font-size:0.9em;
     color:#000000;
    text-align:center;
    border-bottom:0.188em solid #E75908;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/****************************************************************
/*          CSS Style für Galerie Slider Main
/***************************************************************/
.content .fotogallery    {
    display:block;
    align-self: flex-end;
    background:#ffffff;
    margin-bottom:2.5em;
    margin-top:2em;
    width:100%;
    border-bottom:0.188em solid #E75908;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/****************************************************************
/*          CSS Style für Galerie Übersicht Container
/***************************************************************/
#gallerycontainer {
    display: inline-block;
    width:90%;
    background:#ffffff;
    vertical-align: top;
    margin:2em;
    padding:1em;
    text-align:center;
    cursor: pointer;
    border-bottom:0.188em solid #E75908;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#gallerycontainer:hover {
    border-bottom:0.188em solid #999999;
}
#gallerycontainer img {
  border: 1px rgba(0,0,0,.4) solid;
  background-color: #CCCCCC;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

#gallerycontainer .galleryconthead {
    font-family: Playfair Display;
    font-size: 20px;
}
#gallerycontainer .gallerycontdescript {
     font-family:Helvetica;
     font-weight:100;
    font-size:80%;
}
/****************************************************************
/*          CSS Style für USER Galerie Detail Container
/***************************************************************/
#galleryusrpreviewcontainer:hover {
    border-bottom:0.188em solid #999999;
}
#galleryusrpreviewheadline{
    display: inline-block;
    width:100%;
    vertical-align: top;
    margin:0;
    padding:0;
    font-size:1.8em;
    font-family:'Source Sans 3', Arial, sans-serif;
    font-weight:500;
    text-align:left;
}
#gallerusrpreviewdata {
    overflow: hidden;
    border: 0;
    vertical-align: top;
    margin-top:20px;
    text-align:left;
    font-family:'Source Sans 3', Arial, sans-serif;
    color:#444444;
}

/****************************************************************
/*          CSS Style für ADMIN Galerie Detail Container
/***************************************************************/
#galleryadminfileeditcontainer{
    display: inline-block;
    width:100%;
    background:#ffffff;
    vertical-align: top;
    margin:2em;
    padding:1em;
    text-align:center;
    border-bottom:0.188em solid #E75908;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#galleryadmindetailcontainer{
    display: inline-block;
    width:100%;
    background:#ffffff;
    vertical-align: top;
    margin:0.5em;
    padding:0.5em;
    text-align:center;
    border-bottom:0.188em solid #E75908;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#gallerydetailfile {
    display: inline-block;
    width:200px;
    overflow: hidden;
    vertical-align: sub;
    margin:1em;
    padding:1em;
    text-align:center;
    border-bottom:0.188em solid #E75908;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#gallerydetailfile:hover {
    border-bottom:0.188em solid #999999;
}
#gallerydetailfile .fileimg {
    max-width :170px;
    max-height : 180px;
    overflow: hidden;
    top: 50%;
    left: 50%;
}
#filedescript {
     font-size:0.8em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:80;
}
#fileedit {
     font-size:0.8em;
     font-family:'Source Sans 3', Arial, sans-serif;
     font-weight:80;
}
#fileedit .filedelete {
    height:25px;
    width:25px;
    float:right;
    cursor: pointer;
}
#fileedit .fileedit {
    height:25px;
    width:25px;
    float:left;
    cursor: pointer;
}
/****************************************************************
/*          CSS Style für ADMIN Preview Foto erstellen
/***************************************************************/
#gallerymain {
    display: inline-block;
    width:100%;
    background:#ffffff;
    vertical-align: top;
    margin:5em;
    padding:2em;
    text-align:center;
    border-bottom:0.188em solid #E75908;
}
#gallerymain #picture-prev {
    display:inline-block;
    float:left;
    width:50%;
    height:auto;
    min-height : 350px;
    margin-left:0em;
    padding:0em;
    vertical-align: top;
    margin-bottom: 20px;
}

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -330px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: #CCCCCC;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}



/****************************************************************
/*          CSS Style für Main Inhalt FOOTER
/***************************************************************/
#footermenu ul li a{
    color:#333333;
}
#footermenu ul li a:hover {
    border-bottom:0.188em solid #E75908;
}
#footermenu ul li .active {
    border-bottom:0.188em solid #E75908;
}
/****************************************************************
/*          CSS Style für Main Inhalt Rider
/***************************************************************/
.openrider{
    width:30px;
    height:30px;
    overflow: hidden;
    float: right;
    position:absolute;
    margin-top:-15px;
    margin-left:88%;
    background: #555555 url("https://www.hounds-yard.de/_imagefiles/global/open-rider01.png") right top no-repeat;
    cursor:pointer;
}
.openrider a{
    display:block;
    height:100%;
}
.closerider{
    width:30px;
    height:30px;
    overflow: hidden;
    float: right;
    position:absolute;
    margin-top:-15px;
    margin-left:88%;
    background: #555555 url("https://www.hounds-yard.de/_imagefiles/global/close-rider01.png") right top no-repeat;
    cursor:pointer;
}
.closerider a{
    display:block;
    height:100%;
}
.main-botton-main{
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    color:#333333;
    border-radius: 4px;
    border-color: rgb(153, 153, 153);
    background-color: transparent;
    height:25px;
    width:93%;
    margin:10px;
    overflow:visible;
    cursor:pointer;
}
.main-botton-main:hover {
 border-radius: 4px;
 border-color: rgb(153, 0, 0);
 height:25px;
 overflow:visible;
 cursor:pointer;
}
.main-botton-main.activ{
 border-radius: 4px;
 border-color: rgb(153, 0, 0);
 color:rgb(255, 102, 102);
 height:25px;
 overflow:visible;
 cursor:pointer;
}
.container-responce-inner{
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    flex-wrap : wrap;
    justify-content: space-between;
    border-radius: 4px;
    max-width:90%;
    border:1px;
    border-color:#cccccc;
    background-color:#ffffff;
    padding:0px;
    margin:0px;
}
/* Navigation für Update WEB-Text  */
#adminbar {
  display: block;
  background-color: #ffffff;
  height: 25px;
  width: 100%;
  margin:4px;
  padding:4px;
  border:1px;
  border-color:#cccccc;
  border: 1px rgba(0,0,0,.4) solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#adminbar  #lastupdate{
  display: inline-block;
  width: 58%;
  line-height:1.90em;
  font-family:Helvetica;
  font-size:0.8em;
  color:#000000;
  text-align: left;
}
#adminbar  #update{
  display: inline-block;
  width: 40%;
  text-align: right;
}


/*    Angaben Gestaltung des telefon Links     */
.phoneus_link {
  display: inline-block;
  color:#333333;
  background-image: url(../_imagefiles/global/phone-hoerer.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  align-content: center;
  border-radius: 4px;
  border-bottom:0.188em solid #ffffff;
}
.phoneus_link:hover {
  cursor: pointer;
    border-bottom:0.188em solid #E75908;
}
.phoneus_link:active {
    border-bottom:0.188em solid #E75908;
}

/*    Angaben Gestaltung des handy links    */
.handyus_link {
  display: inline-block;
  color:#333333;
  background-image: url(../_imagefiles/global/phone-smart.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  align-content: center;
  border-radius: 4px;
  border-bottom:0.188em solid #ffffff;
}
.handyus_link:hover {
  cursor: pointer;
    border-bottom:0.188em solid #E75908;
}
.handyus_link:active {
    border-bottom:0.188em solid #E75908;
}

/*     Angaben  Gestaltung des e Mail Links      */
.mailus_link {
  display: inline-block;
  color:#333333;
  background-image: url(../_imagefiles/global/icon_mailus.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  align-content: center;
  border-radius: 4px;
  border-bottom:0.188em solid #ffffff;
}
.mailus_link:hover {
  cursor: pointer;
    border-bottom:0.188em solid #E75908;
}
.mailus_link:active {
    border-bottom:0.188em solid #E75908;
}

/*     Angaben  Gestaltung des Web Links      */
.web_link{
  display: inline-block;
  color:#333333;
  background-image: url(../_imagefiles/global/icon-weblinkout.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  align-content: center;
  border-radius: 4px;
  border-bottom:0.188em solid #ffffff;
}
.web_link:hover {
  cursor: pointer;
    border-bottom:0.188em solid #E75908;
}
.web_link:active {
    border-bottom:0.188em solid #E75908;
}

/*     Angaben  Gestaltung des Intern Links      */
.intern_link {
  display: inline-block;
  color:#333333;
  background-image: url(../_imagefiles/global/icon-weblink.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  align-content: center;
  border-radius: 4px;
  border-bottom:0.188em solid #ffffff;
}
.intern_link:hover {
  cursor: pointer;
    border-bottom:0.188em solid #E75908;
}
.intern_link:active {
    border-bottom:0.188em solid #E75908;
}
/*     Angaben Gestaltung des google Map Links       */
.google_link {
  display: inline-block;
  color:#333333;
  background-image: url(../_imagefiles/global/icon-maps.png);
  background-repeat: no-repeat;
  background-position: center right;
  width: 14em;
  height: 1.3em;
  align-content: center;
  border-radius: 4px;
  border-bottom:0.188em solid #ffffff;
}
.google_link:hover {
  cursor: pointer;
    border-bottom:0.188em solid #E75908;
}
.google_link:active {
    border-bottom:0.188em solid #E75908;
}
/*     Angaben Gestaltung des link_na_oben buttons   */
#sideup_link {
  display: inline-block;
  background:transparent;
  background-image: url("../_imagefiles/global/icon-up.png");
  background-repeat: no-repeat;
  background-position: center center;
  width: 45px;
  height: 45px;
  align-content: center;
  border-radius: 4px;
  margin: 20px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
#sideup_link:hover {
  cursor: pointer;
  transition: background-color .3s;
  background-color: #666666;
}
#sideup_link:active {
  transition: background-color .3s;
  background-color: #555;
}

/****************************************************************
/*          TABS mit Radio Button
/***************************************************************/
.tabbed figure {
   display: block;
   margin-left: 0;
   border-bottom: 1px solid silver;
   clear: both;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
  padding: 20px;
  width: 100%;
  border: 1px solid silver;
  background: #fff;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}
#tab0:checked ~ figure .tab0,
#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4,
#tab5:checked ~ figure .tab5,
#tab6:checked ~ figure .tab6,
#tab7:checked ~ figure .tab7,
#tab8:checked ~ figure .tab8,
#tab9:checked ~ figure .tab9,
#tab10:checked ~ figure .tab10 { display: block; }

nav label {
   float: left;
   padding: 15px 15px;
   border-top: 1px solid silver;
   border-right: 1px solid silver;
   background: hsl(0, 0%, 53%);
   color: #eee;
}

nav label:nth-child(1) { border-left: 1px solid silver; }
nav label:hover { background: hsl(0, 0%, 40%); }
nav label:active { background: #ffffff; }
#tab0:checked ~ nav label[for="tab0"],
#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"],
#tab4:checked ~ nav label[for="tab4"],
#tab5:checked ~ nav label[for="tab5"],
#tab6:checked ~ nav label[for="tab6"],
#tab7:checked ~ nav label[for="tab7"],
#tab8:checked ~ nav label[for="tab8"],
#tab9:checked ~ nav label[for="tab9"],
#tab10:checked ~ nav label[for="tab10"] {
  background: white;
  color: #111;
  position: relative;
  border-bottom: none;
}
#tab0:checked ~ nav label[for="tab0"]:after,
#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after,
#tab4:checked ~ nav label[for="tab4"]:after,
#tab5:checked ~ nav label[for="tab5"]:after,
#tab6:checked ~ nav label[for="tab6"]:after,
#tab7:checked ~ nav label[for="tab7"]:after,
#tab8:checked ~ nav label[for="tab8"]:after,
#tab9:checked ~ nav label[for="tab9"]:after,
#tab10:checked ~ nav label[for="tab10"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}

 /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* Style the close button */
.tabcontentclose {
  float: right;
  cursor: pointer;
  font-size: 28px;
}
.tabcontentclose:hover {color: red;}