:root {
  --ltpurple: #DAD1E1;
  --medpurple: #8C6DA0;
  --dmpurple: #6A517B;
  --darkpurple: #503C5D;
  }

html {font-size:calc(0.65em + 0.33vw);}
body {font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size: inherit; margin: 0; padding: 0; box-sizing: border-box; 
      background-color: #ddd; }

h1,h2,h3 { margin: 6px 0; font-family: Raleway,Arial,Helvetica,sans-serif; color: var(--darkpurple); }
h1 { font-size: 2.5rem; }
h3 { font-size: 1.3rem; }
h2 { margin: 24px 0; }
a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--medpurple); }
img { font-size: 0; }

a:hover { border: none; background-color: var(--ltpurple); }

a.readmore { display: inline-block; margin-left: 8px; border: none; font-size: 0.9rem; color: var(--dmpurple); font-style: italic; }
a.readmore::after { content: ""; border: solid #6A517B; border-width: 0 2px 2px 0; display: inline-block; padding: 3px;
                       transform: rotate(-45deg); }
					   
a.maillink, a.phonelink { border: none; color: var(--darkpurple); }
a.maillink:hover, a.phonelink:hover { color: white; background-color: var(--dmpurple); }
a.maillink::after { background-image: url("images/icons/mail.svg"); margin-left: 5px; background-size: contain; content: "";
                    display: inline-block; width: 16px; height: 12px; background-repeat: no-repeat; }
a.phonelink::after { background-image: url("images/icons/phone.svg"); margin-left: 5px; background-size: contain; content: "";
                    display: inline-block; width: 16px; height: 12px; background-repeat: no-repeat; }

.contentsection { border-top: 1px solid var(--darkpurple); padding: 12px 25px; overflow: hidden; font-size: 1.2rem; }
.contentsection p, .contentsection p { margin: 0 0 12px 0; }
.contentsection b, .feedsection b { color: var(--medpurple); }
.contentsection h2 { margin: 12px; }
.subsectionl { flex-basis: 40%; padding-right: 20px; }
.subsectionr { flex-basis: 40%; padding-left: 20px; text-align: center; }
.feedsection { display: flex; padding: 0 100px; font-size: 1.2rem; }
.feedimg { object-fit: cover; object-position: top left; border: 1px solid var(--dmpurple); margin: 12px; max-width: 200px; 
           min-width: 200px; max-height: 200px; min-height: 200px; }
.rightimg { float: right; margin: 12px; }
.leftimg { float: left; margin: 12px; }
.leftimgflush { float: left; margin-right: 12px; border: 1px solid #666; }
.bottomline { border-bottom: 1px solid var(--darkpurple); }
.topline { border-top: 1px solid var(--darkpurple); }
.padtop { padding-top: 24px; }
.padbottom { padding-bottom: 24px; }
.rightlightline { border-right: 1px solid var(--ltpurple); }
.smallprint { font-size: 0.7rem; margin-top: 18px !important; }
.floatfix { overflow: hidden; }
.flexdiv { display: flex; }
.center { text-align: center; }
.flexcenter { display: flex; justify-content: center; }
.narrowcol { flex-basis: 30%; flex-shrink: 1; margin-right: 24px; }
.widecol { flex-basis: 65%; flex-shrink: 2; flex-grow: 2; }
.hidden { display: none; }
.indent { padding-left: 100px; padding-right: 100px; }
.img200 { height: 200px; }
.img350 { height: 350px; }
.img400 { height: 400px; }
.colorbox { text-align: center; margin: 0 0 12px 0; padding: 3px 0; background-color: var(--darkpurple); color: white;
            font-weight: bold; }
.top0 { margin-top: 0; }
.linkbtn { display: inline-block; padding: 8px 16px; background-color: var(--darkpurple); color: white; margin: 12px 0 12px 20px;
           border: none; border-radius: 9px; width: 250px; text-align: center; }
.linkbtn:hover { background-color: white; color: var(--darkpurple); }
.tight { margin: 9px 0; font-size: 1.1rem; list-style-type: square; }
.tight li { margin-bottom: 2px; }
.imgborder { border: 1px solid black; }
.sidebyside { display: flex; justify-content: center; }
.italictitle { font-size: 2rem; font-weight: normal; font-style: italic; text-align: center; }
.nohover { pointer-events: none; }
.imgborder { border: 1px solid black; }
.capfig { display: table; }
.capfig figcaption { display: table-caption; caption-side: bottom ; font-size: 1rem; }
.smrttxt { font-size: 0.9rem; text-align: right; }
.topmarg { margin-top: 50px !important; }
.openlist li { margin-bottom: 9px; }

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 10px; }
.gallery img { width: 250px; height: 300px; object-fit: cover; object-position: top center; cursor: pointer; }
.gallery figcaption { text-align: center; font-size: 1.5rem; text-transform: capitalize; }
.photogallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 10px; margin: 0 auto 16px auto;
                width: 90%; }
.photogallery img { width: 250px; height: 300px; object-fit: cover; object-position: top left; }


.photostrip { display: flex; margin: 12px auto; justify-content: center; }
.photostrip img { width: 150px; height: 150px; object-fit: cover; object-position: top center; margin: 0 8px; }

#wrapper { margin: 50px 6px 6px 6px; border: 1px solid var(--darkpurple); background-color: white; }

#header { width: 100%; position: fixed; top: 0; left: 0; z-index: 999; borderbottom: 1px solid white;
          background-color: var(--ltpurple); }
#banner { color: white; font-size: 2rem; font-family: Raleway, sans-serif; font-variant: small-caps; font-weight: bold; }
#index #banner { display: none; }
#banner img { float: left; margin: 0 15px; }
#banner span { display: inline-block; margin: 25px 15px auto 0; max-width: 50%; }
.bannericon { float: right; margin-right: 12px; border: none; height: 24px; margin-top: 30px; }
.bannericon img { height: 24px; }
#menubar { display: flex; width: 100%; text-align: center; border-bottom: 1px solid white; }
.menutab { padding: 9px 0; background-color: var(--medpurple); color: white; display: inline-block; border-right: 1px solid #ccc;
           text-align: center; text-decoration: none; flex-grow: 1; cursor: pointer; }
.menutab:hover { background-color: var(--ltpurple); color: var(--darkpurple); }
.curtab { background-color: var(--darkpurple); }
.curtab:hover { background-color: var(--darkpurple); color: white; }
#skinnymenu { position: absolute; right: 0; top: 0; display: none; }
.menubutton { display: inline-block; margin-left: 12px; height: 20px; vertical-align: bottom; }
#skinnymenu a { display: block; width: 200px; }
.menuhead { background-color: var(--dmpurple); color: var(--ltpurple); text-align: center; padding: 9px 0; border: none; }
.menuhead img { filter: invert(86%) sepia(14%) saturate(174%) hue-rotate(231deg) brightness(102%) contrast(83%); }
.menuhead:hover { background-color: var(--darkpurple); color: var(--ltpurple); }

.mainheader { width: 100%; height: 300px; background-image: url("images/starryflip.jpg"); background-size: cover;
              background-position: 0% 15%; }
.mainheadtext { font-size: 4rem; color: white; font-family: Raleway, sans-serif; font-variant: small-caps; font-weight: bold;
                padding-top: 45px; margin-left: 25px; }
.tmainheader { width: 100%; background-image: url(images/mainlogobgrad.jpg); contain: layout; background-repeat: repeat-x;
              height: 250px; text-align: center; }
.tmainheaderimg { height: 250px; display: inline-block; }
.tmainheadtext { font-size: 4rem; color: var(--darkpurple); font-family: Raleway, sans-serif; font-variant: small-caps;
                font-weight: bold; padding: 25px 50px 12px 24px; display: inline-block; background: transparent;
                text-align: left; vertical-align: top; border-left: 6px solid var(--darkpurple); margin-top: 6px; }
.mainheadtext p { margin: 0; }
.smgray { font-size: 1.25rem; color: #eee; font-weight: bold; }
.tsmgray { font-size: 1.25rem; color: var(--medpurple); font-weight: bold; }
.subhead { font-size: 3rem; }

ul.linkbars { list-style: none; margin: 20px; padding: 0 30px; overflow: hidden; }
ul.linkbars li { text-align: center; margin-bottom: 12px; }
ul.linkbars li a { border: none; display: block; width: 100%; padding: 8px; background-color: var(--ltpurple); border-radius: 9px; }
ul.linkbars li a:hover { background-color: var(--darkpurple); color: white; }

.linkbox { margin: 12px auto; display: flex; }
.linkbox a { display: block; flex-grow: 1; background-color: var(--darkpurple); color: white; margin: 0 15px; padding: 8px 0;
             text-align: center; }
.linkbox a:hover { background-color: var(--ltpurple); color: var(--mdpurple); }

.minibar { width: 100%; text-align: center; margin-bottom: 12px; border-top: 1px solid var(--dmpurple);
           border-bottom: 1px solid var(--dmpurple); font-size: 0.9rem; background-color: var(--ltpurple); }
.minibar a { display: inline-block; padding: 2px 6px; border-bottom: none; border-left: 1px solid var(--dmpurple);
             color: var(--darkpurple); cursor: pointer; font-weight: bold; }
.minibar a:first-child { border-left: none; }
.minibar a:hover { background-color: white; }

#dogtable { display: flex; margin: 0 auto; }
.dogwrap { display: flex; justify-content: center; }
.arrowbar { width: 75px; text-align: center; }
.arrowbar img { width: 75px; margin-top: 100px; display: block; cursor: pointer; 
                filter: invert(32%) sepia(11%) saturate(1616%) hue-rotate(232deg) brightness(99%) contrast(85%); }
.arrowbar img:hover { filter: invert(74%) sepia(0%) saturate(80%) hue-rotate(142deg) brightness(114%) contrast(88%); }
#dogcanvas { display: flex; width: 600px; overflow-x: scroll; border: 1px solid var(--darkpurple); }
.dogbox { position: relative; width: 600px; background-color: var(--ltpurple); }
.dogimg { margin: 0; padding-bottom: 2px; width: 600px; border-bottom: 1px solid var(--darkpurple); text-align: center; }
.dogimg img { max-width: 600px; max-height: 400px; cursor: pointer; }
.dogimg figcaption { width: 100%; background-color: var(--darkpurple); color: white; text-align: center; font-weight: bold; font-size: 1.7rem; padding: 3px 0; }
.dogtxt { padding: 12px; }
.dogtxt b { color: var(--darkpurple); }
.dogcap { display: inline-block; margin-left: 3px; color: var(--darkpurple); font-size: 0.9rem; }
.dogimg img.adoptbnr { width: 500px; position: absolute; top: 20%; z-index: 1; left: 50%; transform: translate(-50%); }
.moreimgs { border-top: 1px solid var(--darkpurple); margin-top: 12px; }
.moreimgs span { display: inline-block; text-align: right; color: var(--darkpurple); padding: 2px; vertical-align: top; width: 100px; }
.altimgtn { width: 100px; height: 100px; object-fit: cover; object-position: top center; border: 1px solid var(--darkpurple); cursor: pointer; }

.expandlista { min-width: 150px; flex-basis: 300px; flex-shrink: 1; }
.expandlistb { background-color: var(--ltpurple); border: 1px solid var(--darkpurple); flex-basis: 1200px; flex-shrink: 2; }
.expandlistb h2 { text-align: center; font-size: 1.5rem; }
.clicklist { margin: 8px 0; padding-left: 12px; }
.clicklist li { cursor: pointer; list-style-position: inside; padding-left: 6px; position: relative; }
.clicklist li:hover { background-color: var(--ltpurple); color: var(--darkpurple); }
.clicklist li:first-child { list-style-type: none; margin-left: -9px; }
.clicklist li.active { border-top: 1px solid var(--darkpurple); border-bottom: 1px solid var(--darkpurple); 
                       border-left: 1px solid var(--darkpurple); background-color: var(--ltpurple); cursor: default; 
					   box-shadow: 1px 0 var(--ltpurple); }
.clicklist li.active:hover { color: black; }
.choice p { font-size: 1.1rem; margin: 9px 12px 9px 24px; }
.slide figcaption { text-align: center; font-size: 1.2rem; text-transform: capitalize; }

.dogwithname img { width: 300px; }
.dogwithname figcaption { background-color: var(--dmpurple); color: white; text-align: center; font-size: 1.1rem; }

.colbottom { width: 80%; border: 1px solid black; margin: 24px auto 0 auto; }

#newsframe { margin: 0 auto; }
#newsframe object { width: 100%; height: 100%; }

.wraparound { float: right; margin: 80px 20px 0 0; width: 150px; shape-outside: url('images/nobgdog.png');
                  shape-image-threshold: 0.9; shape-margin: 1rem; }

#popup { border: none; }
.bigdog { max-height: 90vh; max-width: 90vw; }

.poem p { margin: 0 12px 9px 12px; font-style: italic; }
.rainbowimg { object-fit: cover; object-position: top left; border: 1px solid var(--dmpurple); margin: 12px; max-width: 200px; }

#footer { width: 100%; display: flex; background-color: var(--ltpurple); border-top: 1px solid var(--darkpurple); }
#footer p { margin: 0 0 3px 15px; }
.footpanel { flex-basis: 30%; color: black; margin: 12px; }

.icondiv { float: right; text-align: center; margin: 6px 0 0 12px; }
.icondiv img { display: inline-block; height: 36px; margin: 0 9px 9px 0; }
.icondiv img.rh { height: 60px; }

#sheltergallery figure { position: relative; width: 250px; border: 1px solid var(--darkpurple); }
.extra { width: 175px !important; }
img.saltimgtn { width: 75px; height: 75px; object-fit: cover; object-position: top center; cursor: pointer; }
.gallerybox, .galleryboxr { display: inline-block; }
.galleryboxr { vertical-align: top; }

.sponsor { position: absolute; bottom: 33px; left: 6px; font-size: 0.9rem; font-style: italic; color: var(--darkpurple);
           background-color: var(--ltpurple); border: 1px solid var(--medpurple); border-radius: 6px; padding: 2px 8px;
           cursor: pointer; }
.sponsor:hover { background-color: var(--medpurple); color: var(--ltpurple); }
.sponstrip { width: 90%; text-align: center; margin: 0 auto 12px auto; white-space: nowrap; overflow-x: auto;
             scrollbar-width: thin; }
.sponstrip a { border: none; }
.sponstrip figure { display: inline-block; margin: 0 3px; }
.sponstrip figcaption { font-size: 0.85rem; }
.stripcur { border: 2px solid var(--darkpurple); }
.sponsordog { display: flex; margin-top: 12px; border-top: 1px solid var(--medpurple); padding-top: 24px; justify-content: center; }
.spdog figure { max-width: 600px; flex-shrink: 1; }
.spdog img { width: 100%; }
.spdog figure { border: 1px solid var(--darkpurple); }
.spdog figcaption { text-align: center; border-bottom: 1px solid var(--darkpurple); background-color: var(--ltpurple); }
.splinks { flex-shrink: 1; text-align: center; }
.splinks h3 { margin: 24px 0 6px 0; }
.alldonate { margin-left: 36px; }
.alldonate h3 { margin-bottom: 12px; color: var(--darkpurple); font-size: 1.5rem; }
.venform, .venmofrm, .ppfrm { border: 1px solid #333; background-color: #999; padding: 18px; text-align: center; border-radius: 12px; }
.venmofrm, .ppfrm { padding-top: 6px; background-color: var(--ltpurple); }
.vbutton { text-decoration: none; border: 1px solid var(--darkpurple); background-color: var(--dmpurple); border-radius: 9px; color: white; padding: 3px 9px; 
           font-size: 1.2rem; font-family: "Open Sans"; cursor: pointer; }
.vbutton:hover { background-color: var(--medpurple); border: 1px solid var(--darkpurple); }
a.sponlink, a.venlink { border: 1px solid var(--darkpurple); border-radius: 9px; font-size: 1rem; padding: 3px 8px;
             margin-right: 9px; background-color: var(--ltpurple); margin-bottom: 9px; }
a.sponlink { display: inline-block; }
a.venlink { display: block; }
a.sponlink:hover, a.venlink:hover { background-color: var(--darkpurple); color: white; }
.zelletxt { max-width: 300px; font-size: 1rem; text-align: justify; border: 1px solid var(--darkpurple); padding: 12px;
            border-radius: 12px;}
.spondesc { width: 600px; padding-bottom: 25px; }
.donopt { list-style-type: square; }
.donopt li { margin: 0 36px 9px 9px; }   
            
.dogstrip { width: 90%; text-align: center; margin: 0 auto 12px auto; white-space: nowrap; overflow-x: auto;
             scrollbar-width: thin; }
.dogstrip figure { display: inline-block; margin: 0 3px; cursor: pointer; }
.dogstrip figure:hover { background-color: var(--ltpurple); }
.dogstrip figure:hover img { border: 1px solid var(--ltpurple); opacity: 0.5; }
.dogstrip figure img { border: 1px solid black; width: 100px; }
.dogstrip figcaption { font-size: 0.85rem; } 

.weback { margin-top: 24px; font-size: 0.8rem; margin-left: 6px; }

.newsbanner { background-color: var(--dmpurple); color: white; font-size: 1.2rem; padding: 8px 50px; }         
.newsbanner div { display: table-cell; vertical-align: middle; }
.newsimg { padding-right: 8px; }
.newsimg img { filter: invert(88%) sepia(73%) saturate(0%) hue-rotate(343deg) brightness(109%) contrast(102%); height: 36px; }
.newshead { font-size: 1.5rem; padding-right: 20px; font-weight: bold; }
.newstxt a { color: var(--ltpurple); border-bottom-color: var(--ltpurple); }
.newstxt a:hover { border: none; color: var(--dmpurple); }

.videodiv { margin: 12px auto; text-align: center; }
.videodiv h3 { text-align: center; font-size: 1.7rem; }
.videodiv video { max-height: 75vh; border: 1px solid var(--darkpurple); }

.donatelogo { cursor: pointer; float: right; margin-right: 8px; position: relative; width: 279px; }
.donatelogo:hover img.imagehov { opacity: 1; }
.imagereg { opacity: 1; transition: 1s ease; width: 100%; }
.imagehov { opacity: 0; transition: 1s ease; position: absolute; top: 0; left: 0; }



@media screen and ( max-width: 1024px ) {
  .photostrip { flex-wrap: wrap; max-width: 350px; }
  }
@media screen and ( max-width: 768px ) {
  #menubar { display: none; }
  #skinnymenu { display: block; }
  .smallstack { flex-direction: column; }
  .gallery, .photogallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photostrip { flex-wrap: wrap; max-width: 350px; }
  }
@media screen and ( max-width: 480px ) {
  #menubar { display: none; }
  #skinnymenu { display: block; }
  .sidebyside { flex-direction: column; }
  .footpanel { flex-direction: column; }
  .gallery, .photogallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }