@font-face {
    font-family: 'figfont';
    src: url(../fonts/NHaasGroteskDSPro-95Blk.otf);
}
@font-face {
    font-family: 'titlefont';
    src: url(../fonts/NHaasGroteskDSPro-95Blk.otf);
}
@font-face {
    font-family: 'infofont';
    src: url(../fonts/NHaasGroteskDSPro-45Lt.otf);
}
@font-face {
    font-family: 'regularfont';
    src: url(../fonts/NHaasGroteskDSPro-55Rg.otf);
}
@font-face {
    font-family: 'boldinfofont';
    src: url(../fonts/FranklinGothicMediumCond.ttf);
}
@font-face {
    font-family: 'boldfont';
    src: url(../fonts/NHaasGroteskDSPro-75Bd.otf);
}




#tags {
    padding: 0px 0;
    width:100%;
    margin-top:20px;
    position:relative;
    text-align: center;
    font-weight:300;
    font-size: 14px;
    font-stretch: 25%;
}
#tags a {
    background: #333333;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
    display: inline-block;
    text-decoration: none;
    color: #635847;
    font-family: 'boldinfofont';
    font-size: 12px;
    border-radius: 3px;
    font-weight:500;
    font-size: 14px;
    font-stretch: 25%;
    height:14px;
}
#tags a.selected {
    background: #4c453a;
    color: #907a56;
}

body {
    counter-reset: imgCounter;
}

.bodypart {
    display:inline-block;
    margin-top:30px;

}

.hidden {
   display:none;
 }

.tagspace {
    display:inline-block; 
    width:10px;"
}

/* increment the counter anywhere there's a figcaption */
figcaption {
    counter-increment: imgCounter;
}

/* display the value of the counter before the element */
figcaption:before {
    content: counter(imgCounter);
}    
   
:root {
--new: #d2b48c;
--rewatch: #7c6f5b;
--octoberween: #e35e0f;
--octoberweenrewatch: #9c3d1a;
--holiday: #3399cc;
--holidayrewatch: #015a87;
--horror: #c20007;
--horrorrewatch: #860b0b;
--book: #aaaaaa;
--holidayhorror: #8400ff;
--holidayhorrorrewatch: #5400a2;
--nope: #2f2f2f;
--nostalgia: #5b4539;
}

.holder {
  position: relative;
    display: inline-block;
    height: 430px;
    vertical-align: top;
    margin-top: 0px;
    padding:10px;
    border:0px;
    background-color: currentcolor;
    margin-bottom: 4px;
}
    
.new {
    color: var(--new);
    display: inline-block;
}  
.rewatch {
    color: var(--rewatch);
    display: inline-block;
}
.horror {
    color: var(--horror);
    display: inline-block;
} 
.horrorrewatch {
    color: var(--horrorrewatch);
     display: inline-block;
}
.octoberween {
    color: var(--octoberween);
    display: inline-block;
} 
.octoberweenrewatch {
    color: var(--octoberweenrewatch);
    display: inline-block;
}
.holiday {
    color: var(--holiday);
    display: inline-block;
} 
.holidayrewatch {
    color: var(--holidayrewatch);
    display: inline-block;
}
.holidayhorror {
    color: var(--holidayhorror);
    display: inline-block;
} 
.holidayhorrorrewatch {
    color: var(--holidayhorrorrewatch);
    display: inline-block;
}
.book {
    color: var(--book);
    display: inline-block;
}
.nope {
    color: var(--nope);
    display: inline-block;
}
.nostalgia {
    color: var(--nostalgia);
    display: inline-block;
}

details > summary {
    list-style: none;
    text-align: center; 
    color:var(--rewatch);
    font-family: 'titlefont';font-size: 35px;
    height:30px;
    margin-bottom: 25px;
}










details > summary::-webkit-details-marker {
  display: none;
}    

.details {
    text-align: center;
}

.tally {color:var(--new);font-family: 'infofont';line-height:11px;}

.tdnum {padding:0;}

.tallynum {
    width:25px;text-align: right;padding-right:5px;font-size: 14px;font-stretch: 25%;position:relative;top:-.5px;font-family: 'boldinfofont';}
.tallyname {
    text-align: left; font-weight:300;font-size: 14px;font-stretch: 25%;text-transform: capitalize;} 
.tallyhead {font-family: 'titlefont'; text-align: left; width:250px;font-size:18px;line-height:10px;padding-bottom: 5px;}
.tallydiv {
    margin-top:20px;
    width:250px;
    display:inline-block;
    vertical-align: top;
    width:250px;
}
.tallydivlast {
    margin-top:20px;
    display:inline-block;
    vertical-align: top;
    width:160px;
}
.tallydivfirst {
    width:250px;
    margin-top:20px;
    display:inline-block;
    vertical-align: top;
    margin-left:50px;
}


.entry {width:294px;height:450;table-layout:fixed;padding: 0;margin: 0;}

.hrule {
    background-color: currentColor; border:none;height:.5px;width:288px; margin-top: 8px;margin-bottom: 10px;
}

.overlaynum {
    font-family: 'Roboto Flex';font-size: 15px;line-height:30px;position:relative;top:5px;}
.pretitle {height:30px;}
.spacer {height:15px;}
.spacerb {height:5px;}
.figcaptiontext {
    padding-left: 10px; font-family: 'figfont';font-size:65px;height:67px; -webkit-text-stroke:1px currentColor;-webkit-text-fill-color:transparent;}
.title {
    padding-left: 10px;font-family: 'titlefont';font-size: 35px;line-height:28px;margin-right:5px;display:inline-block; white-space: pre-wrap; word-wrap: break-word; -ms-word-wrap: break-word; -ms-word-break: break-word;color:currentColor;}
.subtitle {
    padding-left: 10px;font-family: 'boldfont';font-size: 20px;display:inline-block;line-height: 20px;white-space: pre-wrap; word-wrap: break-word; -ms-word-wrap: break-word; -ms-word-break: break-word;color:currentColor;}
.year {
    padding-left: 10px;font-family: 'infofont';margin-bottom:10px;display: inline-block;margin-top:-10px;font-weight:300;font-size: 16px;font-stretch: 25%;color:currentColor;}
.infostuff {
    height:15px;margin-bottom: 2px;vertical-align: top;}
.date {
    padding-left: 10px;font-family: 'boldfont';margin-right:15px;line-height:10px;text-transform: capitalize;font-weight:700;font-size: 20px;font-stretch: 25%;color:currentColor;}
.info {
    display:inline-block;margin-right:15px;line-height:10px;font-weight:500;text-transform: uppercase;}
.infoholder {
    padding-left: 10px; margin-top:10px;
}
.network {
    font-family: 'boldinfofont';display: inline-block;text-transform:uppercase;font-weight:700;font-size: 14px;font-stretch: 25%;color:currentColor;}
.genrekeep {
    display:inline;line-height:10px;}
.secondarygenre {
    font-family: 'boldinfofont';display: inline-block;text-transform:uppercase;font-weight:700;font-size: 14px;font-stretch: 25%;color:currentColor;}
.genre {
    font-family: 'boldinfofont';display: inline-block;text-transform:uppercase;font-weight:700;font-size: 14px;font-stretch: 25%;color:currentColor;}
.episode {
    width:240px;font-family: 'boldfont';line-height:16px;display: inline-block;font-weight:700;font-size: 16px;font-stretch: 25%; white-space: pre-wrap;
  word-wrap: break-word;-ms-word-wrap: break-word;-ms-word-break: break-word;margin-top:1.5px;color:currentColor;margin-left:10px;}
.episodecontainer {
    width:270px;    
}
.episodenum {
    padding-left: 10px;font-family: 'infofont';display: inline-block;font-weight:300;font-size: 16px;font-stretch: 25%;vertical-align: top;color:currentColor;}
.ratingholder {
    width:282px;text-align: center;margin-left: 87.5px;
}
.rating {
    width:107px;height:20px;margin-bottom: 5px;background-color: currentColor;}
.rating img {
    display: block;
  margin-left: auto;
  margin-right: auto;width:107px;height:20px;}
.ratingsub {
   left:3px; position:relative;background-color: currentColor;width:60px;height:11px;display: block; vertical-align: top;}
.ratingsub img {
    width:60px;height:11px;display: block;vertical-align: top;}
.ratingsubtext {
    font-family: 'boldinfofont';display: inline-block;text-transform:uppercase;font-weight:700;font-size: 10px;font-stretch: 25%;display:block; vertical-align: top; line-height: 10px; width:65px; text-align: center;color:currentColor;;
}
.ratingcontainer {
    width:282px; margin-right: 0px; align-content: center;
}
.ratingtable {
    margin-left: 5px;
}
.ratingbox {
    width:72px;text-align: center;height:10px;padding:0;
}
.medium {
    display:inline-block;line-height:9px;margin-right: 5px;top:2px;background-color: currentColor;}

.review {
    font-family: 'regularfont';text-transform:none;max-height: 29px;line-height: 14px; font-size: 14px;font-stretch: 100%; overflow-y: auto;}
.reviewholder {
    margin-top:20px;padding-right: 5px;padding-left: 10px; width:270px;
}
.ratingfront {
    width:107px; vertical-align:middle; text-align: center; }
.ratingfront img {
    height:20px;margin-top:1px;}
.tallydrop {
    font-family: 'Saira Extra Condensed';line-height:13px;width:350px;text-transform: uppercase;}
.tallytable {
    font-family: 'Saira Extra Condensed';height:20px;text-transform: uppercase;}
.posterframe {
    height:404px; width:270px; vertical-align: middle; padding:0; margin:0;}    
.posterframe img {
    height:400px; width:270px;}

.nope .posterframe {
    opacity: .2;
}
.nope .ratingfront {
    opacity: 0;
}
.nope .figcaptiontext {
    display: none;   
}

.nope .rating {
    display:none;
}
.nope .title {
    margin-top:66px;
}


.topinfo {
    height:250px; 
    width:294px;
    vertical-align: top;
    overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.bottominfo {
    width:294px;
    vertical-align: bottom;
    height:196px;
    padding: 0;
    margin: 0;
}
.bottompad {
    height:15px;
}



.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
      width: 300x;
  height: 450px;
}
    

.textoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
    background-color: #1e1e1e;
} 



.holder:hover .overlay {
  opacity: 1;
}
.holder:hover .textoverlay {
  opacity: 1;
}


.dropdowncontent a:hover {background-color: #1e1e1e;}

.dropdown:hover .dropdowncontent {display: block;}

.dropdown:hover .dropbtn {background-color: #1e1e1e;}