/* Main headline */
#pp_wrapper{width:100%}

.pp_photodiv {overflow:hidden ; float:left; margin-right:10px;}
.pp_photo {width:100%;  }

.pp_listitem {float:left; text-align:center;}
.pp_heroimage { overflow:hidden;
    border-radius:10px;
    object-fit: cover;
    margin-left:1px;
}

:root{
    --pp_male: deepskyblue;
    --pp_female: hotpink;
    --pp_unknownsex: teal;
}

.pp_imageframe {position:relative; margin:10px 10px 0 10px;}
.pp_imageframe img.pp_Male {border: 0.3rem outset var(--pp_male);}
.pp_imageframe img.pp_Female {border: 0.3rem outset var(--pp_female);}
.pp_imageframe img.pp_Unknown {border: 0.3rem outset var(--pp_unknownsex);}


.noaccentcolor {border:none !important}

a.pp_Male  {color:var(--pp_male)}
a.pp_Female  {color:var(--pp_female)}
a.pp_Unknown {color:var(--pp_unknownsex)}

.pp_listitem h3 {padding-bottom:0;margin-bottom:0}
#pp_sortlink {padding-bottom:30px; text-align:center; font-weight:bold}

.pp_stickie1-img { position: absolute;
    top: 00%;
    left: 0;
    right: 0;
    width:80px;}
.pp_stickie2-img {position: absolute;
    top: 0;
    left: calc(100% - 100px);
    right: 000px;
    width:80px;}    
.pp_stickie3-img {position: absolute;
    top:50px;
    left: calc(100% - 100px);
    width:80px;}
.pp_inlinename {
font-size:1.6em; 
}
.pp_inlinecontent{
    position: absolute;
    text-align:center;
    bottom: 12px;
    xleft: calc(100% - 100px);
    width:100%;
color:#fff;
font-weight:bold;
text-shadow: 2px 2px #333;
line-height:1em;
}

#pp_jumpto {width:100%; text-align:center;padding-bottom:20px; padding-top:10px}
#pp_jumpto select {font-size:1em; }

.pp_ytvideo 
{
    padding-top:56.25%;
    position:relative;
}
.pp_ytvideo iframe
{
    position:absolute;top:0;left:0;
    width:100%;
    height:100%;
}

.pp_adoption_pending_note {font-weight:bold}

.pp_video_icon { padding-left:10px; padding-top:1px; font-size:1em}

.pp_fieldset {border: 2px groove; padding:20px; margin:20px 0}
.pp_fieldset legend {font-weight:bold; padding: 0 20px}

.pp_poweredby_disabled {display:none}

#pp_animalcount {text-align:right}

.pp_heroimage { aspect-ratio: 1 / 1; width:100%;}

div.pp_listitem {  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height:1.3em; }

.pp_found_item {clear:both; background-color:#f5f5f5; margin-bottom:20px; 
    display:flex; align-items:center; xbackground-color:#0a0}
.pp_found_pic {float:left; padding-right:20px; width:200px}
.pp_found_datax {clear:both}


/* Extra small devices (phones, 600px and down) show one tile per row */
@media only screen and (max-width: 600px) {
    .pp_listitem {width:100%; font-size:1.5em}
    .pp_photodiv {width:100%; padding-bottom:10px}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:120px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 120px);}
}

/* Small devices (portrait tablets and large phones, 600px and up) 2 tiles per row */
@media only screen and (min-width: 600px) {
    .pp_listitem {width:50%; font-size:1.4em}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:80px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 80px);}
}

/* Medium devices (landscape tablets, 768px and up) 3 tiles / row */
@media only screen and (min-width: 800px) {
    .pp_listitem {width:33%; font-size:1.1em}
    .pp_photodiv {width:30%;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1100px) {
    .pp_listitem {width:25%;  font-size:1em}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:90px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 90px);}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1300px) {
    .pp_listitem {width:20%; font-size:0.9em}
    .pp_heroimage {max-width:200px; max-height:200px }
    .pp_video_icon {padding-top:0px; font-size:0.8em; display:none}
    .pp_stickie1-img, .pp_stickie2-img, .pp_stickie3-img {width:70px}
    .pp_stickie2-img, .pp_stickie3-img {left: calc(100% - 70px);}
}


#pp_loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

.pp_paginationlinkset .curpage { opacity:0.5}
.pp_paginationlinkset a { text-decoration:none; font-weight:bold; }
.pp_paginationlinkset { text-align:center; clear:both; padding-bottom:20px}

#pp_sortmessage {text-align:center}

/* YELLOWWEBMONKEY */
#pp_wrapper, #pp_left,#pp_right, #pp_photosection,#pp_headline  {display:flex;display: -webkit-flex;display: -moz-flexbox;display: -ms-flexbox;display: -ms-flexbox;-webkit-flex-wrap: wrap; }
#pp_wrapper, #pp_headline {flex-flow:row wrap;}
#pp_left {flex:1 0 40%;}
#pp_right {flex:1 0 50%;flex-flow:column nowrap;}
#pp_name {} 
#pp_animal_id, #pp_adopt {flex:1 0 40%;}
#pp_adopt a {background:#512E91;}
#pp_adopt {margin-bottom:1.6em;}
#pp_animal_id {font-size:1.5rem;margin-bottom:1rem;}
#pp_photosection {flex-flow:row wrap;justify-content:flex-start;}
#pp_photosection .pp_photodiv {width: auto;float:none;align-content:start;}
#pp_photosection .pp_photodiv:first-of-type, #pp_photosection p {flex:1 0 100%;}
#pp_photosection .pp_photodiv img {width:auto;height:100px;border-radius:8px;margin-bottom:5px;}
#pp_photosection .pp_photodiv:first-of-type img {width:400px;height:auto;}
.pp_videodiv {flex:1 1 100%;max-width:450px;}
.pp_ytvideo {}
.pp_fieldset {border:none;}
#pp_intro, #pp_moreinfo {margin-top: 2rem;border-top: 1px solid #2584ab;padding-top: 1rem;}
#pp_moreinfo {flex:1 0 100%;}

@media screen and (max-width: 480px) {
  #pp_left {flex:1 0 100%;}
  #pp_right {flex:1 0 100%;}
}