/* preload */
:root:before{
    content: url(fonts/LibreBaskerville-Regular.ttf)
             url(fonts/LibreBaskerville-Bold.ttf)
             url(images/border1.png)
             url(images/creature.png)
             url(images/creaturewithtext.png)
             url(images/igbutton.png)
             url(images/igbuttonh.png)
             url(images/igbuttonp.png)
             url(images/mailbutton.png)
             url(images/mailbuttonh.png)
             url(images/mailbuttonp.png);
    background: #FFFFFF;
    visibility:collapse;
    position:absolute;
    left: -999em;
    top: -999em;
}
@keyframes bark {
    0% {
        transform:translate(0, 0px);
    }
    50% {
        transform:translate(0, -30px);
    }
    100% {
        transform:translate(0, 0px);
    }
}
@font-face {
    font-family: defaults;
    src: url(fonts/LibreBaskerville-Regular.ttf);
  }
  @font-face {
    font-family: defaults-bold;
    src: url(fonts/LibreBaskerville-Bold.ttf);
  }
  html, body {
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      background-color: #FFFFFF;
      color: #000000;
      font-family: defaults, Arial, Helvetica, sans-serif;
      font-size:18px;
      overflow: hidden;
      overflow-y: scroll;
      overflow-x: scroll;
      scroll-behavior: smooth;
  }
  strong {
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
  }
  img {
      padding: 0;
      display: block;
      margin: 0 auto;
      max-height: 100%;
      max-width: 100%;
  }
  div{
    overflow: hidden;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .bark {
    visibility: collapse;
  }
  .imgcreature {
    position:relative;
    width:450px;
    height:auto !important;
    padding-right:300px !important;
    z-index: 9;
  }
  .mobilelogo {
    position:relative;
    margin-top:0px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:80%;
    height:auto;
    z-index: 1;
    pointer-events: all !important;
    visibility: collapse;
    display:none;
  }
  .imglogo {
    position:relative;
    margin-top:-410px !important;
    margin-left:330px !important;
    width:320px;
    height:auto;
    z-index: 7;
    pointer-events: all !important;
  }
  .imgig {
    position:relative;
    margin-top:0px !important;
    margin-left:530px !important;
    width:70px;
    height:70px;
    z-index: 1 !important;
    background-image:url(images/igbutton.png);
    background-size:cover;
    pointer-events: all !important;
  }
  .imgig:hover {
    background-image:url(images/igbuttonh.png);
    background-size:cover;
  }
  .imgig:active {
    background-image:url(images/igbuttonp.png);
    background-size:cover;
  }
  .imgmail {
    position:relative;
    margin-top:-73px !important;
    margin-left:630px !important;
    width:90px;
    height:75px;
    z-index: 1 !important;
    background-image:url(images/mailbutton.png);
    background-size:cover;
    pointer-events: all !important;
  }
  .imgmail:hover {
    background-image:url(images/mailbuttonh.png);
    background-size:cover;
  }
  .imgmail:active {
    background-image:url(images/mailbuttonp.png);
    background-size:cover;
  }
  .logo {
    margin-left:auto;
    margin-right:auto;
    margin-top:2vh;
    width:900px;
    height:450px !important;
    position: relative;
    pointer-events:none !important;
  }
  .sitecontent {
    margin-left:auto;
    margin-right:auto;
    margin-top:-159px;
    margin-bottom:10vh;
    width:900px;
    height:auto;
    position: relative;
    border: 7px solid #323232;
    border-image:url("images/border1.png") 20 / 20px 20px 20px 20px / 20px 20px 20px 20px
        round;
    padding-top:30px;
    padding-left:30px;
    padding-right:30px;
    padding-bottom:30px;
    border-radius: 25px;
    background-color: #FFFFFF;
  }

  .navcluster {
    pointer-events:all !important;
  }
  .logo a {
    pointer-events:all !important;
  }
  .logo img {
    pointer-events:none;
  }
  .navcluster a {
    pointer-events:none !important;
  }
  .barkwindow {
    position:absolute;
    width:370px;
    height:350px !important;
    margin-left:130px !important;
    z-index: 9;
  }
  .mainnav {
    text-align:center !important;
    padding-top:40px;
    padding-bottom:25px;
    z-index:20 !important;
  }
  .mainnav a {
    transition: font-size 0.2s, color 0.2s, background-color 0.2s, border 0.2s !important;

  }
  .mainnav a:link {
    border: 3px solid #323232;
    background-color: #FFFFFF;
    border-radius: 10px;
    color: #000000;
    text-decoration: none;
    font-size:23px;
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding-top:7px;
    padding-bottom:7px;
    padding-left:12px;
    padding-right:12px;
    margin-left:10px;
    margin-right:10px;
    filter: drop-shadow(1px 2px 2px #000000);
  }
  .mainnav a:visited {
    border: 3px solid #323232;
    background-color: #FFFFFF;
    border-radius: 10px;
    color: #000000;
    text-decoration: none;
    font-size:23px;
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding-top:7px;
    padding-bottom:7px;
    padding-left:12px;
    padding-right:12px;
    margin-left:10px;
    margin-right:10px;
    filter: drop-shadow(1px 2px 2px #000000);
  }
  .mainnav a:hover {
    border: 3px solid #323232;
    background-color: #000000;
    border-radius: 10px;
    color: #FFFFFF;
    text-decoration: none;
    font-size:26px;
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding-top:7px;
    padding-bottom:7px;
    padding-left:12px;
    padding-right:12px;
    margin-left:10px;
    margin-right:10px;
    filter: drop-shadow(1px 2px 2px #000000);
  }
  .mainnav a:focus {
    border: 3px solid #323232;
    background-color: #000000;
    border-radius: 10px;
    color: #FFFFFF;
    text-decoration: none;
    font-size:26px;
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding-top:7px;
    padding-bottom:7px;
    padding-left:12px;
    padding-right:12px;
    margin-left:10px;
    margin-right:10px;
    filter: drop-shadow(1px 2px 2px #000000);
  }
  .mainnav a:active {
    border: 3px solid #323232;
    background-color: #000000;
    border-radius: 10px;
    color: #bcbcbc;
    text-decoration: none;
    font-size:19px;
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding-top:7px;
    padding-bottom:7px;
    padding-left:12px;
    padding-right:12px;
    margin-left:10px;
    margin-right:10px;
    filter: drop-shadow(1px 2px 2px #000000);
  }
  
  .introimg {
    float:right;
    height:auto !important;
    width:230px !important;
    padding-left:20px !important;
    padding-top:5px !important;
  }
  .pboxcontainer{
    display:grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows:none;
    place-items: center;
    width:100%;
    height:310px;
  }
  .promobox {
    text-align:center;
    width:70%;
    height:88%;
    border: 3px solid #323232;
    padding-top:0px;
    padding-left:33px;
    padding-right:33px;
    padding-bottom:10px;
    border-radius: 15px;
    background-color:#e8e8e8;
    font-family: defaults-bold, Arial, Helvetica, sans-serif;
    font-size: 19px;
    filter: drop-shadow(2px 3px 3px #000000);
    transition: transform 0.2s;
  }
  .promobox:hover{
    transform:scale(1.05);
  }
  .promobox:active{
    transform:scale(0.95);
  }
  .promobox img {
    width:200px;
    height:200px;
    text-align: center;
    align-items: center;
  }
  .promobox a {
    text-decoration: underline !important;
    color:#000000;
  }
  .promolink3 {
    display:block;
    visibility: visible;
  }
  .mpromolink3 {
    display:none;
    visibility: collapse;
  }

  .mobilelinks {
    display:grid;

    place-items:center !important;
    text-align:center;
    justify-items: center !important;
    justify-content: center !important;
    visibility:collapse;
    width:auto;
    height:auto;

    grid-template-columns: 70px 80px;
    grid-template-rows: 100%;
    grid-gap: 25px;
    
  }
  .mimgig {
    width:70px;
    height:70px;
    z-index: 5;
    background-image:url(images/igbutton.png);
    background-size:cover;
    pointer-events: all !important;
  }
  .mimgig:hover {
    background-image:url(images/igbuttonh.png);
    background-size:cover;
  }
  .mimgig:active {
    background-image:url(images/igbuttonp.png);
    background-size:cover;
  }
  .mimgmail {
    width:85px;
    height:75px;
    z-index: 5;
    background-image:url(images/mailbutton.png);
    background-size:cover;
    pointer-events: all !important;
  }
  .mimgmail:hover {
    background-image:url(images/mailbuttonh.png);
    background-size:cover;
  }
  .mimgmail:active {
    background-image:url(images/mailbuttonp.png);
    background-size:cover;
  }
  .commsimg{
    width:auto;
    height:auto;
  }
  .mobilefooter {
    visibility: collapse;
    display:none; 
  }



  .pillustgrid {
    display:grid;
    width:100%;
    height:auto;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(4, 210px);
    grid-template-rows: repeat(2, 210px);
  }
  .pminigrid {
    display:grid;
    width:100%;
    height:auto;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(4, 210px);
    grid-template-rows: repeat(1, 210px);
  }
  .pimages {
    border: 2px solid #000000;
    width:200px;
    height:200px;
    background-position: center;
    background-size:cover;
 
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    transition: transform 0.2s, filter 0.2s;
  }
  .pimages:hover{
    transform: scale(1);
    filter:brightness(130%);
  }
  .pimages:active{
    transform: scale(0.95);
  }  

  .storelink1 {
    color:#000000
  }
@media screen and (max-width: 900px) {
  body {
    overflow-x: hidden;
  }
  .mainnav a:link {
    line-height:60px;
  }
  .mainnav a:hover {
    font-size:23px !important
  }
  .mainnav a:focus {
    font-size:23px !important
  }
  .mainnav a:active {
    font-size:23px !important
  }
  .introimg {
    float:none;
    text-align:center;
  }
  .mobilelinks {
    display: grid !important;
    visibility:visible !important;

  }
  .imgig{
    display:none !important;
    visibility: collapse !important;
  }
  .imgmail{
    display:none !important;
    visibility: collapse !important;
  }
  .pboxcontainer{
    display:grid;
    padding-top:20px;
    padding-bottom:50px;
    grid-template-columns:none !important;
    grid-template-rows: repeat(3, auto) !important;
    place-items: center;
    width:100%;
    height:100% !important;
    grid-row-gap: 40px;
  }
  .promobox {
    font-size: 25px;
    height:100% !important;
  }
  .promobox img {
    width:auto !important;
    height:auto !important;
    text-align: center;
    align-items: center;
  }
  .sitecontent {
    width:auto !important;
    height:auto !important;
    margin-top:-10.955% !important;
    padding-top:0px !important;
  }
  .mainnav{
    padding-top:27px !important;
  }
  .logo {
    margin-left:auto;
    margin-right:auto;
    margin-top:2vh;
    width:auto;
    height:40% !important;
    position: relative;
    pointer-events:none;
    justify-content: center;
    align-items: center;
  }
  .mobilelogo {
    visibility:visible !important;
    display:block !important;
  }
  .navcluster{
    display:none !important;
    visibility:collapse !important;
  }
  .imgcreature{
    display:none !important;
    visibility:collapse !important;
  }
  .barkwindow{
    visibility: collapse;
    display:none;
  }
  .mobilefooter {
    visibility:visible !important;
    display:block !important; 
  }
  .pillustgrid {
    display:grid;
    width:100%;
    height:auto;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(1, auto);
    grid-row-gap: 12px;
  }
  .pminigrid {
    display:grid;
    width:100%;
    height:auto;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(1, auto);
    grid-row-gap: 12px;
  }
  .pimages {
    border: 2px solid #000000;
    width:75vw;
    height:75vw;
    background-position: center;
    background-size:cover;
    
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    transition: transform 0.2s, filter 0.2s;
  }
  .promolink3 {
    display:none;
    visibility: collapse;
  }
  .mpromolink3 {
    display:block;
    visibility: visible;
  }
}