/*@import url('https://fonts.googleapis.com/css?family=Marcellus+SC|Roboto&display=swap&subset=latin-ext');*/
@import url("https://fonts.googleapis.com/css2?family=Gotu&family=Open+Sans:wght@300;400&display=swap");
/*
$pattern-bg:            "bg.jpg"; 
$pattern-bg-footer:     "bg_footer.jpg";
*/
::-moz-selection {
  color: #ffffff;
  background: #49c7d6; }

::selection {
  color: #ffffff;
  background: #49c7d6; }

html {
  position: relative;
  min-height: 100%; }

body, .mainPanel {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #e9e0dd;
  background-color: #323031;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  height: 100%; }
  body h1, .mainPanel h1 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/
    margin-bottom: 40px; }
    body h1 span, .mainPanel h1 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    body h1 span, .mainPanel h1 span {
      font-size: 24px; }
  body h2, .mainPanel h2 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/ }
    body h2 span, .mainPanel h2 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    body h2 span, .mainPanel h2 span {
      font-size: 20px; }
  body h3, .mainPanel h3 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/ }
    body h3 span, .mainPanel h3 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    body h3 span, .mainPanel h3 span {
      font-size: 18px; }
  body h4, .mainPanel h4 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/
    line-height: 1.5em; }
    body h4 span, .mainPanel h4 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    body h4 span, .mainPanel h4 span {
      font-size: 16px; }
  body h5, .mainPanel h5 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/ }
    body h5 span, .mainPanel h5 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    body h5 span, .mainPanel h5 span {
      font-size: 14px; }
  body h6, .mainPanel h6 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/ }
    body h6 span, .mainPanel h6 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    body h6 span, .mainPanel h6 span {
      font-size: 12px; }
  body a, .mainPanel a {
    color: #ffffff;
    z-index: 0;
    padding: 0px 1px;
    transition: 0.25s ease;
    text-decoration: none; }
    body a:hover, body a:focus, .mainPanel a:hover, .mainPanel a:focus {
      color: #55c7d2;
      /*opacity: 0.75;*/
      text-decoration: none; }
  body hr, .mainPanel hr {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    margin-top: 2rem;
    margin-bottom: 2rem; }
  body img, .mainPanel img {
    max-width: 100%; }
  body .background__header, .mainPanel .background__header {
    height: 400px;
    width: 100%;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 2;
    background-image: url("../../images/header.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-color: transparent; }
    @media only screen and (max-width: 768px) {
      body .background__header, .mainPanel .background__header {
        background-size: auto 400px; } }
    @media only screen and (min-width: 768px) and (max-width: 992px) {
      body .background__header, .mainPanel .background__header {
        background-size: auto 450px;
        height: 450px; } }
    @media only screen and (min-width: 992px) and (max-width: 1200px) {
      body .background__header, .mainPanel .background__header {
        background-size: auto 500px;
        height: 500px; } }
    @media only screen and (min-width: 1200px) {
      body .background__header, .mainPanel .background__header {
        background-size: auto 650px;
        height: 650px; } }
  body .btn, .mainPanel .btn {
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff; }
    body .btn:hover, body .btn:focus, .mainPanel .btn:hover, .mainPanel .btn:focus {
      background: rgba(0, 0, 0, 0.5);
      color: #55c7d2;
      opacity: 1; }
  body .back-to-top, .mainPanel .back-to-top {
    position: fixed;
    bottom: 28px;
    right: 25px;
    display: none;
    font-size: 18px;
    border: none; }
    body .back-to-top:hover, body .back-to-top:focus, .mainPanel .back-to-top:hover, .mainPanel .back-to-top:focus {
      box-shadow: none; }

.intro .langSelection {
  z-index: 5; }
  .intro .langSelection li:not(:last-child):after {
    position: absolute;
    top: 7px;
    right: 0;
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background: #e9e0dd;
    opacity: 0.75; }
  .intro .langSelection a {
    position: relative;
    font-size: 14px;
    color: #e9e0dd; }
    .intro .langSelection a:hover, .intro .langSelection a:focus {
      color: #49c7d6;
      opacity: 1; }
    .intro .langSelection a.active {
      color: #ffffff; }
      .intro .langSelection a.active:hover, .intro .langSelection a.active:focus {
        color: #49c7d6; }
.intro header {
  height: 400px; }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .intro header {
      height: 500px; } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .intro header {
      height: 600px; } }
  @media only screen and (min-width: 1200px) {
    .intro header {
      height: 750px; } }
.intro .background__header {
  height: 450px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-image: url("../../images/intro.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-color: transparent; }
  @media only screen and (max-width: 768px) {
    .intro .background__header {
      background-size: auto 450px; } }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .intro .background__header {
      background-size: auto 550px;
      height: 550px; } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .intro .background__header {
      background-size: auto 650px;
      height: 650px; } }
  @media only screen and (min-width: 1200px) {
    .intro .background__header {
      background-size: auto 800px;
      height: 800px; } }
.intro .headerDogName {
  top: calc(450px - 75px); }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .intro .headerDogName {
      top: calc(550px - 115px); } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .intro .headerDogName {
      top: calc(650px - 130px); } }
  @media only screen and (min-width: 1200px) {
    .intro .headerDogName {
      top: calc(800px - 150px); } }
.intro .footerContent {
  position: relative;
  height: 50px; }
  @media only screen and (min-width: 768px) {
    .intro .footerContent {
      height: 75px; } }

header {
  height: 400px; }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    header {
      height: 450px; } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    header {
      height: 500px; } }
  @media only screen and (min-width: 1200px) {
    header {
      height: 650px; } }

.langSelection {
  z-index: 3;
  height: 50px;
  background-color: #323031; }
  .langSelection li:not(:last-child):after {
    position: absolute;
    top: 7px;
    right: 0;
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background: #e9e0dd;
    opacity: 0.75; }
  .langSelection a {
    position: relative;
    font-size: 14px;
    color: #e9e0dd; }
    .langSelection a:hover, .langSelection a:focus {
      color: #49c7d6;
      opacity: 1; }
    .langSelection a.active {
      color: #ffffff; }
      .langSelection a.active:hover, .langSelection a.active:focus {
        color: #49c7d6; }

.headerBreed {
  font-size: 14px;
  color: #016c72;
  letter-spacing: 3px;
  opacity: 0.5;
  z-index: 3; }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .headerBreed {
      font-size: 16px;
      letter-spacing: 7px; } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .headerBreed {
      font-size: 20px;
      letter-spacing: 10px; } }
  @media only screen and (min-width: 1200px) {
    .headerBreed {
      font-size: 28px;
      color: #016c72;
      letter-spacing: 15px; } }

.headerLogos {
  z-index: 3; }
  .headerLogos .logoZKwP {
    margin-left: -13px; }
  .headerLogos a {
    opacity: 0.5; }
    .headerLogos a:hover, .headerLogos a:focus {
      opacity: 0.75; }
  .headerLogos img {
    height: 40px; }
    @media only screen and (min-width: 768px) and (max-width: 992px) {
      .headerLogos img {
        height: 50px; } }
    @media only screen and (min-width: 992px) and (max-width: 1200px) {
      .headerLogos img {
        height: 70px; } }
    @media only screen and (min-width: 1200px) {
      .headerLogos img {
        height: 70px; } }

.headerDogName {
  height: 150px;
  position: absolute;
  left: 0;
  top: calc(400px - 50px - 75px);
  z-index: 3; }
  .headerDogName h1 {
    font-family: "Gotu", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    /*line-height: 1.2em;*/
    line-height: 1.1em;
    /*  letter-spacing: $letter-spacing-base;*/
    line-height: 1.0em;
    color: #ffffff; }
    .headerDogName h1 span {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.8; }
    .headerDogName h1 small {
      font-family: "Open Sans", sans-serif;
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 1px;
      opacity: 0.8; }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .headerDogName {
      top: calc(450px - 50px - 125px); }
      .headerDogName h1 {
        font-size: 24px; }
        .headerDogName h1 small {
          font-size: 18px; } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .headerDogName {
      top: calc(500px - 50px - 130px); }
      .headerDogName h1 {
        font-size: 28px; }
        .headerDogName h1 small {
          font-size: 18px; } }
  @media only screen and (min-width: 1200px) {
    .headerDogName {
      top: calc(650px - 50px - 150px); }
      .headerDogName h1 {
        font-size: 34px; }
        .headerDogName h1 small {
          font-size: 20px; } }

.sideNav {
  height: 100%;
  width: 0;
  z-index: 20;
  top: 0;
  left: 0;
  background-color: #323031;
  overflow-x: hidden;
  transition: 0.5s; }
  .sideNav a {
    text-decoration: none;
    font-size: 18px;
    color: #e9e0dd;
    transition: 0.3s; }
    .sideNav a:hover, .sideNav a:focus {
      color: #55c7d2;
      text-decoration: none; }
    @media screen and (max-height: 450px) {
      .sideNav a {
        font-size: 16px; } }
  .sideNav .active {
    color: #ffffff; }

.sideNavOpenButton {
  height: 50px;
  width: auto;
  z-index: 4; }
  .sideNavOpenButton .btn {
    color: #ffffff;
    background: #323031; }

.sideNavCloseButton {
  top: 0;
  left: 0; }

.menuRow {
  position: absolute;
  top: 400px;
  width: 100%;
  height: 50px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3; }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .menuRow {
      top: 400px; } }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .menuRow {
      top: 450px; } }
  @media only screen and (min-width: 1200px) {
    .menuRow {
      /*top: 650px;*/
      top: 600px; } }

.mainNav a {
  position: relative;
  color: #e9e0dd;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 300; }
  .mainNav a:hover, .mainNav a:focus {
    color: #55c7d2;
    text-decoration: none; }
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .mainNav a {
      font-size: 16px; } }
  @media only screen and (min-width: 1200px) {
    .mainNav a {
      font-size: 18px; } }
.mainNav .active {
  color: #ffffff; }
.mainNav .dropdown-item {
  font-size: 16px;
  color: #e9e0dd;
  text-shadow: none;
  letter-spacing: 1px; }
  .mainNav .dropdown-item:hover, .mainNav .dropdown-item:focus {
    color: #e9e0dd;
    background: rgba(233, 224, 221, 0.1); }
  .mainNav .dropdown-item.active {
    /*background: rgba($primary-base, 0.2);*/
    background: rgba(0, 0, 0, 0.75); }
    .mainNav .dropdown-item.active:hover, .mainNav .dropdown-item.active:focus {
      background: rgba(233, 224, 221, 0.1); }
.mainNav .dropdown-menu {
  background: #161616;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  /*border: $border-width $border-style rgba($black, 0.75);*/
  border: 0px; }
.mainNav .dropdown-submenu {
  position: relative; }
  .mainNav .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em; }
  .mainNav .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem; }
.mainNav .dropdown-divider {
  border-top: 1px solid rgba(51, 116, 72, 0.2); }

@media only screen and (min-width: 1200px) {
  .mainContent {
    min-height: 300px; } }

.mainContent img, .mainPanel img {
  transition: 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.5);
  margin: 5px 2px; }
.mainContent a, .mainPanel a {
  text-decoration: underline; }
  .mainContent a:hover, .mainContent a:focus, .mainPanel a:hover, .mainPanel a:focus {
    /*opacity: 0.5;*/
    text-decoration: underline; }
    .mainContent a:hover img, .mainContent a:focus img, .mainPanel a:hover img, .mainPanel a:focus img {
      opacity: 0.5;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }
.mainContent .btn, .mainPanel .btn {
  font-size: 14px;
  text-decoration: none; }
  .mainContent .btn.active, .mainPanel .btn.active {
    background: #49c7d6;
    color: #ffffff; }
    .mainContent .btn.active:hover, .mainContent .btn.active:focus, .mainPanel .btn.active:hover, .mainPanel .btn.active:focus {
      background: #016c72; }
  .mainContent .btn:hover, .mainContent .btn:focus, .mainPanel .btn:hover, .mainPanel .btn:focus {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    opacity: 1; }
@media only screen and (min-width: 768px) {
  .mainContent .columnLeftDogInfo, .mainPanel .columnLeftDogInfo {
    border-right: 1px solid rgba(0, 0, 0, 0.3); } }
.mainContent .columnRightDogInfo p, .mainPanel .columnRightDogInfo p {
  padding: 10px 0px; }
.mainContent .gallery .card h5, .mainPanel .gallery .card h5 {
  font-size: 16px;
  letter-spacing: 1px;
  transition: 0.25s ease; }
.mainContent .gallery .card a, .mainPanel .gallery .card a {
  text-decoration: none; }
  .mainContent .gallery .card a.stretched-link, .mainPanel .gallery .card a.stretched-link {
    color: #e9e0dd;
    opacity: 0.7; }
.mainContent .gallery .card:hover h5, .mainContent .gallery .card:hover a, .mainPanel .gallery .card:hover h5, .mainPanel .gallery .card:hover a {
  opacity: 0.75; }
.mainContent .gallery .card:hover img, .mainPanel .gallery .card:hover img {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }
.mainContent .pedigree, .mainPanel .pedigree {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #e9e0dd;
  font-size: 10px; }
  .mainContent .pedigree tr:not(:first-of-type), .mainPanel .pedigree tr:not(:first-of-type) {
    border-top: 1px solid rgba(0, 0, 0, 0.75); }
  .mainContent .pedigree td, .mainPanel .pedigree td {
    vertical-align: middle;
    padding-left: 1rem; }
    .mainContent .pedigree td h5, .mainPanel .pedigree td h5 {
      font-size: 14px;
      margin-bottom: 0px; }
    .mainContent .pedigree td h6, .mainPanel .pedigree td h6 {
      font-size: 12px;
      padding: 2px 0px;
      margin-bottom: 0px; }
    .mainContent .pedigree td p, .mainPanel .pedigree td p {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem; }
    @media only screen and (min-width: 768px) {
      .mainContent .pedigree td p, .mainPanel .pedigree td p {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem; } }
.mainContent .dog h3, .mainPanel .dog h3 {
  font-size: 20px;
  letter-spacing: 1px; }
.mainContent .dog img, .mainPanel .dog img {
  max-height: 250px; }
.mainContent .dog p, .mainPanel .dog p {
  font-size: 14px; }
  .mainContent .dog p.dog__details, .mainPanel .dog p.dog__details {
    color: rgba(233, 224, 221, 0.7); }
.mainContent .dog a, .mainPanel .dog a {
  text-decoration: none; }
  .mainContent .dog a:hover img, .mainContent .dog a:focus img, .mainPanel .dog a:hover img, .mainPanel .dog a:focus img {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.7); }
.mainContent .dog .dog__card img, .mainPanel .dog .dog__card img {
  max-height: 500px; }
.mainContent .backlink a, .mainPanel .backlink a {
  text-decoration: none; }

.footerContent {
  position: relative;
  height: 175px; }
  @media only screen and (min-width: 768px) {
    .footerContent {
      height: 160px; } }

.footerContact {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 3px; }
  .footerContact .footerContactName {
    overflow: hidden; }
    .footerContact .footerContactName:before, .footerContact .footerContactName:after {
      position: absolute;
      bottom: 0;
      overflow: hidden;
      width: 50%;
      height: 1px;
      content: '';
      background-color: rgba(0, 0, 0, 0.3); }
    .footerContact .footerContactName:before {
      margin-left: calc(-50% - 50px);
      text-align: right; }
    .footerContact .footerContactName:after {
      margin-left: 50px; }
  @media only screen and (min-width: 768px) {
    .footerContact {
      font-size: 20px; } }

.footerCopyrights {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 50px;
  font-size: 10px;
  color: #e9e0dd; }
  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .footerCopyrights {
      font-size: 12px; } }
  @media only screen and (min-width: 992px) {
    .footerCopyrights {
      font-size: 14px; } }

#cookiesInfoWindow {
  background: #000000;
  width: 350px;
  max-width: 75%;
  font-size: 14px; }
  #cookiesInfoWindow .btn {
    font-size: 14px;
    border: 1px solid #55c7d2; }

/*# sourceMappingURL=theme.css.map */