/* Site wide */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

p, a {
  font-family:'Atkinson Hyperlegible', sans-serif;

}
h1, h2, h3 {
  font-family:'Atkinson Hyperlegible', sans-serif;
}

#menu-menu-1 {
  z-index: 2;
}

/* Home Page */
.home-textDiv {
  position: absolute;
  top: 5%;
  right: 5%;
  width:30%;
  text-align: right;
}
.home-name {
  font-size: max(3vw);
}
.portfolio-header-description {
  text-align: left;
  max-width: 100%;
  position: absolute;
  margin-top:5px;
  font-size:max(1vw);
  z-index:2;
}
.home-job {
  font-size: 2vw;
  padding-top: 4%;
}

/* Profile Page */

.profile-header-grid {
  margin: auto;
  max-width: 70%;
  margin-bottom: 1%;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    max-width:50%;
    margin:auto;
    padding-top:2%;
}

.profile-clients {
  text-align: center;
}
/* Portfolio Page */
.portfolio-chrono-header {
  float:left;
  position:relative;
  font-size:5vh;
}

.portfolio-content-filter {
  position: fixed;
  z-index:2;
  top:30%;
  max-width:20%;
  right: 0px;
  padding-right: 10%;
}

.client-image-wrapper {
  padding-left: 10%;
  padding-right: 10%;
}
.element-item {
  position: absolute;
}

.element-item:hover .hover-block:nth-of-type(1) {
  transition: all linear 400ms;
  opacity: 1;
}
.element-item .hover-block:nth-of-type(1)  {
  transition: all linear 400ms;
  opacity: 0;
}
.element-item .no-hover-block {
  height: 227px;
  width: 156px;
  background-color: #9461ab;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.element-item .hover-block {
  height: 227px;
  width: 156px;
  background-color: #9461ab;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Ribbons - Testing */
.ribbon {
  background-color: #9461ab;
  max-width:70%;
  color:white;
  font-size: 1vw;
  text-align: center;
  padding-inline: 5% 10%;
  writing-mode: horizontal-tb;  
}


/* Porfolio Images and Hover Logic */
.portfolio-img-unannounced {
  background-image: url("../img/unannounced.webp");
}
.portfolio-img-unannounced-anim {
  background-image: url("../img/unannounced.webp");
}
.portfolio-img-codependent {
  background-image: url("../img/codependent.webp");
}
.portfolio-img-deadmen {
  background-image: url("../img/deadmen.webp");
}
.portfolio-img-timespook {
  background-image: url("../img/timespook.webp");
}
.portfolio-img-radiohead {
  background-image: url("../img/radiohead.webp");
}
.portfolio-img-radiohead-anim {
  background-image: url("../img/img-hover/hover-radiohead.webp");
}
.portfolio-img-mesozoique {
  background-image: url("../img/mesozoique.webp");
}
.portfolio-img-mesozoique-anim {
  background-image: url("../img/img-hover/hover-mesozoique.webp");
}
.portfolio-img-moh {
  background-image: url("../img/moh.webp");
}
.portfolio-img-moh-anim {
  background-image: url("../img/img-hover/hover-moh.webp");
}
.portfolio-img-rbugly {
  background-image: url("../img/rbugly.webp");
}
.portfolio-img-rbugly-anim {
  background-image: url("../img/img-hover/hover-rbugly.webp");
}
.portfolio-img-apres {
  background-image: url("../img/apres_2.webp");
}
.portfolio-img-apres-anim {
  background-image: url("../img/img-hover/hover-apres.webp");
}
.element-override-apres {
  border-color:#b1b3b6;
  border: 3px solid;
}
.element-override-apres-anim {
  border-color:#b1b3b6;
  border: 0px solid;
}
.portfolio-img-oeil {
  background-image: url("../img/oeil.webp");
}
.portfolio-img-oeil-anim {
  background-image: url("../img/img-hover/hover-oeil.webp");
}
.portfolio-img-dota {
  background-image: url("../img/newbloom.webp");
}
.portfolio-img-dota-anim {
  background-image: url("../img/img-hover/hover-dota.webp");
  background-size: 156px 227px;
}
.portfolio-img-bladerunner {
  background-image: url("../img/bladerunner.webp");
}
.portfolio-img-bladerunner-anim {
  background-image: url("../img/img-hover/hover-bladerunner.webp");
}
.portfolio-img-arcanium {
  background-image: url("../img/arcanium.webp");
}
.portfolio-img-arcanium-anim {
  background-image: url("../img/img-hover/hover-arcanium.webp");
}
.portfolio-img-pb {
  background-image: url("../img/pb.webp");
}
.portfolio-img-pb-anim {
  background-image: url("../img/img-hover/hover-pb.webp");
}
.portfolio-img-mdl {
  background-image: url("../img/mdl.webp");
}
.portfolio-img-mdl-anim {
  background-image: url("../img/img-hover/hover-mdl.webp");
}
.portfolio-img-copen {
  background-image: url("../img/copen.webp");
}
.portfolio-img-copen-anim {
  background-image: url("../img/img-hover/hover-copen.webp");
}
.portfolio-img-kobold {
  background-image: url("../img/kobold.webp");
}
.portfolio-img-kobold-anim {
  background-image: url("../img/img-hover/hover-kobold.webp");
}
.portfolio-img-hpass {
  background-image: url("../img/hpass.webp");
}
.portfolio-img-hpass-anim {
  background-image: url("../img/img-hover/hover-hpspy.webp");
}
.portfolio-img-git {
  background-image: url("../img/git.webp");
}
.portfolio-img-barles {
  background-image: url("../img/barles.webp");
}
.portfolio-img-git-anim {
  background-image: url("../img/img-hover/hover-git.webp");
}
.portfolio-img-falloutm {
  background-image: url("../img/falloutmiami.webp");
}
.portfolio-img-falloutm-anim {
  background-image: url("../img/falloutmiami.webp");
}
.portfolio-img-falloutc {
  background-image: url("../img/falloutCascadia.webp");
}
.portfolio-img-falloutc-anim {
  background-image: url("../img/img-hover/hover-falloutCascadia.webp");
}
.portfolio-img-defunctland {
  background-image: url("../img/defunctland.webp");
}
.portfolio-img-defunctland-anim {
  background-image: url("../img/img-hover/hover-defunctland.webp");
}
.portfolio-img-bowflex-hvt {
  background-image: url("../img/bowflex-hvt.webp");
}
.portfolio-img-bowflex-hvt-anim {
  background-image: url("../img/img-hover/hover-bowflex-hvt.webp");
}
.portfolio-img-dopatwo2023 {
  background-image: url("../img/dopatwo2023.webp");
}
.portfolio-img-dopatwo2023-anim {
  background-image: url("../img/img-hover/hover-dopatwo2023.webp");
}
.portfolio-img-drawandguess {
  background-image: url("../img/drawandguess.webp");
}
.portfolio-img-drawandguess-anim {
  background-image: url("../img/img-hover/drawandguess.webp");
}
.portfolio-img-boatmanvania {
  background-image: url("../img/boatmanvania.webp");
}
.portfolio-img-boatmanvania-anim {
  background-image: url("../img/img-hover/hover-boatmanvania.webp");
}
.portfolio-img-esma-cookie {
  background-image: url("../img/esma-cookie.webp");
}
.portfolio-img-esma-cookie-anim {
  background-image: url("../img/img-hover/hover-esma-cookie.webp");
}
.portfolio-img-flintlock {
  background-image: url("../img/flintlock.webp");
}
.portfolio-img-flintlock-anim {
  background-image: url("../img/img-hover/hover-flintlock.webp");
}
.portfolio-img-thread {
  background-image: url("../img/thread.webp");
}
.portfolio-img-thread-anim {
  background-image: url("../img/img-hover/hover-thread.webp");
}
.portfolio-img-bmop {
  background-image: url("../img/bmop.webp");
}
.portfolio-img-bmop-anim {
  background-image: url("../img/img-hover/hover-bmop.webp");
}
.portfolio-img-parpg {
  background-image: url("../img/parpg.webp");
}
.portfolio-img-parpg-anim {
  background-image: url("../img/img-hover/hover-parpg.webp");
}
.portfolio-img-dreamstone {
  background-image: url("../img/dreamstone.webp");
}
.portfolio-img-dreamstone-anim {
  background-image: url("../img/img-hover/hover-dreamstone.webp");
}
.portfolio-img-leak {
  background-image: url("../img/leak.webp");
}
.portfolio-img-leak-anim {
  background-image: url("../img/img-hover/hover-leak.webp");
}
.portfolio-img-readyup {
  background-image: url("../img/readyup.webp");
}
.portfolio-img-readyup-anim {
  background-image: url("../img/img-hover/hover-readyup.webp");
}
.portfolio-img-houseBreakfast {
  background-image: url("../img/houseBreakfast.webp");
}
.portfolio-img-houseBreakfast-anim {
  background-image: url("../img/img-hover/hover-houseBreakfast.webp");
}
.portfolio-img-chip {
  background-image: url("../img/chip.webp");
}
.portfolio-img-chip-anim {
  background-image: url("../img/img-hover/hover-chip.webp");
}
.portfolio-img-hpwth {
  background-image: url("../img/hpwth.webp");
}
.portfolio-img-hpwth-anim {
  background-image: url("../img/img-hover/hover-hpwth.webp");
}
.portfolio-img-thief {
  background-image: url("../img/thief.webp");
}
.portfolio-img-thief-anim {
  background-image: url("../img/img-hover/hover-thief.webp");
}
.portfolio-img-hpwis {
  background-image: url("../img/hpwis.webp");
}
.portfolio-img-hpwis-anim {
  background-image: url("../img/img-hover/hover-hpwis.webp");
}
.portfolio-img-relativity {
  background-image: url("../img/relativity.webp");
}
.portfolio-img-relativity-anim {
  background-image: url("../img/img-hover/hover-relativity.webp");
}
.portfolio-img-gaslight {
  background-image: url("../img/gaslight.webp");
}
.portfolio-img-gaslight-anim {
  background-image: url("../img/img-hover/hover-gaslight.webp");
}
.portfolio-img-burning {
  background-image: url("../img/burning.webp");
}
.portfolio-img-burning-anim {
  background-image: url("../img/img-hover/hover-burning.webp");
}
.portfolio-img-turb {
  background-image: url("../img/turb.webp");
}
.portfolio-img-munitionmine {
  background-image: url("../img/munitionmine.webp");
}
.portfolio-img-turb-anim {
  background-image: url("../img/img-hover/hover-turb.webp");
}
.portfolio-img-aitd {
  background-image: url("../img/aitd.webp");
}
.portfolio-img-aitd-anim {
  background-image: url("../img/img-hover/hover-aitd.webp");
}
.portfolio-img-slotsparadise {
  background-image: url("../img/slotsparadise.webp");
  background-position:center;
}
.portfolio-img-slotsparadise-anim {
  background-image: url("../img/img-hover/hover-slotsparadise.webp");
  background-position:center;
}
.portfolio-img-projecthorse {
  background-image: url("../img/projecthorse.webp");
}
.portfolio-img-projecthorse-anim {
  background-image: url("../img/img-hover/hover-projecthorse.webp");
}
.portfolio-img-shieldbash {
  background-image: url("../img/shieldbash.webp");
}
.portfolio-img-shieldbash-anim {
  background-image: url("../img/img-hover/hover-shieldbash.webp");
}
.portfolio-img-sony {
  background-image: url("../img/sony.webp");
}
.portfolio-img-sony-anim {
  background-image: url("../img/img-hover/hover-sony.webp");
}
.portfolio-img-crimeates {
  background-image: url("../img/crimeates.webp");
}
.portfolio-img-crimeates-anim {
  background-image: url("../img/img-hover/crimeates.webp");
}
.portfolio-img-rocksmith {
  background-image: url("../img/rocksmith.webp");
}
.portfolio-img-gifties {
  background-image: url("../img/gifties.webp");
}
.portfolio-img-gifties-anim {
  background-image: url("../img/img-hover/hover-gifties.webp");
}
.portfolio-img-childrenofeden {
  background-image: url("../img/childrenofeden.webp");
}
.portfolio-img-dooley{
  background-image: url("../img/dooley.webp");
}
.portfolio-img-sleightofhand{
  background-image: url("../img/sleightofhand.webp");
}
/* Client Images */
.client-logo {
  background-repeat: no-repeat;
  background-size:90%;
  background-position: center;
    background-color: white;
}
.client-sony {
  background-image:url("../img/clients/sony.webp");
}
.client-respawn {
  background-image:url("../img/clients/respawn.webp");
  background-color: black;
}
.client-valve {
  background-image:url("../img/clients/valve.webp");
  background-color: #f74843;
}
.client-supercombo {
  background-image:url("../img/clients/supercombo.webp");
}
.client-daylight {
  background-image:url("../img/clients/daylight.webp");
}
.client-esma {
  background-image:url("../img/clients/esma.webp");
}
.client-asg {
  background-image:url("../img/clients/asg.webp");
  background-color: black;
}
.client-magnopus {
  background-image:url("../img/clients/magnopus.webp");
}
.client-dig1 {
  background-image:url("../img/clients/dig1.webp");
}
.client-pcc {
  background-image:url("../img/clients/pcc.webp");
}
.client-frontwire {
  background-image:url("../img/clients/frontwire.webp");
  background-color: transparent;
}
.client-wdi {
  background-image:url("../img/clients/wdi.webp");
  background-color: white;
}
.client-wildflower {
  background-image:url("../img/clients/wildflower.webp");
  background-size: 100%;
}
.client-wf {
  background-image:url("../img/clients/wf.webp");
}
.client-a44 {
  background-image:url("../img/clients/a44.webp");
}
.client-bigfish {
  background-image:url("../img/clients/bigfish.webp");
}


/* Extended Portfolio Images */
.portfolio-img-vvgoobm {
  background-image: url("../img/vvgoobm.webp");
}
.portfolio-img-vgmcon2024 {
  background-image: url("../img/vgmcon2024.webp");
}
.portfolio-img-dopatwo {
  background-image: url("../img/dopatwo.webp");
}
.portfolio-img-dopatwo {
  background-image: url("../img/dopatwo.webp");
}
.portfolio-img-farmFable {
  background-image: url("../img/farmFable.webp");
}
.portfolio-img-potato {
  background-image: url("../img/potato.webp");
}
.portfolio-img-riftshadow {
  background-image: url("../img/riftshadow.webp");
}
.portfolio-img-highlander {
  background-image: url("../img/highlander.webp");
}
.portfolio-img-lesbianage {
  background-image: url("../img/lesbianage.webp");
}
.portfolio-img-royalJelly {
  background-image: url("../img/royalJelly.webp");
}
.portfolio-img-sec7 {
  background-image: url("../img/sec7.webp");
}
.portfolio-img-toll {
  background-image: url("../img/toll.webp");
}
.portfolio-img-ggj18 {
  background-image: url("../img/ggj18.webp");
}
.portfolio-img-ggj16 {
  background-image: url("../img/ggj16.webp");
}.portfolio-img-cnjam {
  background-image: url("../img/cnjam.webp");
}.portfolio-img-sushiPop {
  background-image: url("../img/sushiPop.webp");
}
.portfolio-img-mlp {
  background-image: url("../img/mlp.webp");
}
.portfolio-img-molyjam {
  background-image: url("../img/molyjam.webp");
}.portfolio-img-toth19 {
  background-image: url("../img/toth19.webp");
}.portfolio-img-theSea {
  background-image: url("../img/theSea.webp");
}.portfolio-img-toth18 {
  background-image: url("../img/toth18.webp");
}.portfolio-img-snatcher {
  background-image: url("../img/snatcher.webp");
}.portfolio-img-final88 {
  background-image: url("../img/final88.webp");
}
.portfolio-img-mountaineering {
  background-image: url("../img/mountaineering.webp");
}.portfolio-img-backcap {
  background-image: url("../img/backcap.webp");
}.portfolio-img-assassins {
  background-image: url("../img/assassins.webp");
}.portfolio-img-righteousBuff {
  background-image: url("../img/righteousBuff.webp");
}.portfolio-img-clocktale {
  background-image: url("../img/clocktale.webp");
}.portfolio-img-melting {
  background-image: url("../img/melting.webp");
}.portfolio-img-betterYou {
  background-image: url("../img/betterYou.webp");
}.portfolio-img-cutting {
  background-image: url("../img/cutting.webp");
}.portfolio-img-playtime {
  background-image: url("../img/playtime.webp");
}.portfolio-img-boulder {
  background-image: url("../img/boulder.webp");
}
.portfolio-img-photoshoot {
  background-image: url("../img/photoshoot.webp");
}.portfolio-img-steel {
  background-image: url("../img/steel.webp");
}.portfolio-img-rivalry {
  background-image: url("../img/rivalry.webp");
}.portfolio-img-reversal {
  background-image: url("../img/reversal.webp");
}.portfolio-img-helpingHands {
  background-image: url("../img/helpingHands.webp");
}.portfolio-img-doubleExposure {
  background-image: url("../img/doubleExposure.webp");
}.portfolio-img-warehouse {
  background-image: url("../img/warehouse.webp");
}.portfolio-img-lydia {
  background-image: url("../img/lydia.webp");
}.portfolio-img-lastRound {
  background-image: url("../img/lastRound.webp");
}.portfolio-img-elka {
  background-image: url("../img/elka.webp");
}
.portfolio-img-disgrace {
  background-image: url("../img/disgrace.webp");
}.portfolio-img-dreamDate {
  background-image: url("../img/dreamDate.webp");
}.portfolio-img-watercolors {
  background-image: url("../img/watercolors.webp");
}.portfolio-img-evilLeague {
  background-image: url("../img/evilLeague.webp");
}.portfolio-img-atCollege {
  background-image: url("../img/atCollege.webp");
}.portfolio-img-tryouts {
  background-image: url("../img/tryouts.webp");
}.portfolio-img-starCrossed {
  background-image: url("../img/starCrossed.webp");
}.portfolio-img-mustLoveCats {
  background-image: url("../img/mustLoveCats.webp");
}.portfolio-img-honest {
  background-image: url("../img/honest.webp");
}.portfolio-img-pyrotech {
  background-image: url("../img/pyrotech.webp");
}
.portfolio-img-chocolateHearts {
  background-image: url("../img/chocolateHearts.webp");
}.portfolio-img-boats {
  background-image: url("../img/boats.webp");
}.portfolio-img-sicky {
  background-image: url("../img/sicky.webp");
}.portfolio-img-andILoveHer {
  background-image: url("../img/andILoveHer.webp");
}.portfolio-img-groceryRun {
  background-image: url("../img/groceryRun.webp");
}.portfolio-img-sketch {
  background-image: url("../img/sketch.webp");
}.portfolio-img-nyu11 {
  background-image: url("../img/nyu11.webp");
}.portfolio-img-withoutYou {
  background-image: url("../img/withoutYou.webp");
}.portfolio-img-sunAndMoon {
  background-image: url("../img/sunAndMoon.webp");
}.portfolio-img-solace {
  background-image: url("../img/solace.webp");
}
.portfolio-img-goodnightGuard {
  background-image: url("../img/goodnightGuard.webp");
}.portfolio-img-apiary {
  background-image: url("../img/apiary.webp");
}.portfolio-img-lifted {
  background-image: url("../img/lifted.webp");
}.portfolio-img-bringHerBack {
  background-image: url("../img/bringHerBack.webp");
}.portfolio-img-offBook {
  background-image: url("../img/offBook.webp");
}.portfolio-img-bear {
  background-image: url("../img/bear.webp");
}.portfolio-img-avtp {
  background-image: url("../img/avtp.webp");
}.portfolio-img-unserKind {
  background-image: url("../img/unserKind.webp");
}.portfolio-img-peg1 {
  background-image: url("../img/peg1.webp");
}.portfolio-img-lifebook {
  background-image: url("../img/lifebook.webp");  
}.portfolio-img-pobudove {
  background-image: url("../img/pobudove.webp");
}
.portfolio-img-pawns {
  background-image: url("../img/pawns.webp");
}
.portfolio-img-commentWar {
  background-image: url("../img/commentWar.webp");
}
.portfolio-img-strangerWithin {
  background-image: url("../img/strangerWithin.webp");
}
.portfolio-img-sympathy {
  background-image: url("../img/sympathy.webp");
}
.portfolio-img-bedtime {
  background-image: url("../img/bedtime.webp");
}
.portfolio-img-drift {
  background-image: url("../img/drift.webp");
}
.portfolio-img-everything {
  background-image: url("../img/everything.webp");
}
.portfolio-img-memorySync {
  background-image: url("../img/memorySync.webp");
}
.portfolio-img-shadowStory {
  background-image: url("../img/shadowStory.webp");
}
.portfolio-img-sorcerersDaughter {
  background-image: url("../img/sorcerersDaughter.webp");
}
.portfolio-img-afterhours {
  background-image: url("../img/afterhours.webp");
}
.portfolio-img-systemshock {
  background-image: url("../img/systemshock.webp");
}
.portfolio-img-kyoryu {
  background-image: url("../img/kyoryu.webp");
}
.portfolio-img-kyoryu-gamescom {
  background-image: url("../img/kyoryu-gamescom.webp");
}
.portfolio-img-area51 {
  background-image: url("../img/area51.webp");
  background-position:center;
}
.portfolio-img-eastern {
  background-image: url("../img/eastern.webp");
}
.portfolio-img-kickblips {
  background-image: url("../img/kickblips.webp");
  background-position:center;
}
.portfolio-img-relicarena {
  background-image: url("../img/relicarena.webp");
  background-position:center;
}
.portfolio-img-tfConnect2024 {
  background-image: url("../img/tfConnect2024.webp");
  background-position:center;
}
.portfolio-img-tfConnect2023 {
  background-image: url("../img/tfConnect2023.webp");
  background-position:center;
}
.portfolio-img-tfConnect2022 {
  background-image: url("../img/tfConnect2022.webp");
  background-position:center;
}
.portfolio-img-putnam2020 {
  background-image: url("../img/putnam2020.webp");
  background-position:center;
}
.portfolio-img-putnam2022 {
  background-image: url("../img/putnam2022.webp");
  background-position:center;
}
.portfolio-img-putnam2023 {
  background-image: url("../img/putnam2023.webp");
  background-position:center;
}
.portfolio-img-putnam2024 {
  background-image: url("../img/putnam2024.webp");
  background-position:center;
}
.portfolio-img-putnam2025 {
  background-image: url("../img/putnam2025.webp");
  background-position:center;
}
.portfolio-img-putnam2019 {
  background-image: url("../img/putnam2019.webp");
  background-position:center;
}
.portfolio-img-songaday2016 {
  background-image: url("../img/songaday2016.webp");
  background-position:center;
}
.portfolio-img-straysOfIstanbul {
  background-image: url("../img/straysOfIstanbul.webp");
  background-position:center;
}
.portfolio-img-interloperV1 {
  background-image: url("../img/interloperVol1.webp");
  background-position:center;
}
.portfolio-img-interloperV2 {
  background-image: url("../img/unannounced.webp");
  background-position:center;
}
.portfolio-img-goosd {
  background-image: url("../img/goosd.webp");
  background-position:center;
}
.portfolio-img-iceDayNiceDay {
  background-image: url("../img/iceDayNiceDay.webp");
  background-position:center;
}
.portfolio-img-greener {
  background-image: url("../img/greener.webp");
  background-position:center;
}
.portfolio-img-tailless {
  background-image: url("../img/tailless.webp");
  background-position:center;
}
.portfolio-img-flowersForMom {
  background-image: url("../img/flowersForMom.webp");
  background-position:center;
}
.portfolio-img-desertEyes {
  background-image: url("../img/desertEyes.webp");
  background-position:center;
}
.portfolio-img-goblinGoldRush {
  background-image: url("../img/goblinGoldRush.webp");
  background-position:center;
}

/* Percussion Specific Images */
.portfolio-img-percLotr {
  background-image: url("../percussion/img/lotr.jpg");
  background-size: 100% 100%;
}
.portfolio-img-dyson {
  background-image: url("../percussion/img/dyson.jpg");
  background-size: 100% 100%;
}
.portfolio-img-concave {
  background-image: url("../percussion/img/concave.jpg");
  background-size: 100% 100%;
}
.portfolio-img-bonded {
  background-image: url("../percussion/img/bonded.jpg");
  background-size: 100% 100%;
}
.portfolio-img-lapras {
  background-image: url("../percussion/img/lapras.jpg");
  background-size: 100% 100%;
}
.portfolio-img-romp {
  background-image: url("../percussion/img/romp.jpg");
  background-size: 100% 100%;
}
.portfolio-img-toybox {
  background-image: url("../percussion/img/toybox.jpg");
  background-size: 100% 100%;
}
.portfolio-img-fair {
  background-image: url("../percussion/img/fair.jpg");
  background-size: 100% 100%;
}
.portfolio-img-abandon {
  background-image: url("../percussion/img/abandon.jpg");
  background-size: 100% 120%;
}
.portfolio-img-temp {
  background-image: url("../img/jbTemp.webp");
  background-size: 100% 100%;
}

.poster .no-hover-block {
  position: absolute;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  border-radius: 7px;
  background-size: 100% 100%;
}
.poster .hover-block {
  position: absolute;
  background-repeat: no-repeat;
  transform: translate(0, 0%);
  width: 100%;
  height: auto;
  border-radius: 7px;
  background-size: 100% 100%;
}

.poster:hover .hover-block:nth-of-type(1) {
  transition: all linear 400ms;
  opacity: 1;
}
.poster .hover-block:nth-of-type(1)  {
  transition: all linear 400ms;
  opacity: 0;
}