Deriss

Site URL: http://www.deriss.com/film
Hi!
I want to change the logo color for a specific page (www.deriss.com/film) and change logo color again when tapping the mobile navigation on that page.
Right now I successfully managed to change the logo color by uploading new logos in css and referring the urls (the logos looks all the same just color change)
Step by step;
1. Replaced logo in a page
2. called another logo on that same page when using mobile nav 
3. problem is the replaced logo (1) on the page is still there so now I have two logos overlapping each other. 
How do I remove the replaced logo (1) when tapping mobile nav
Here's the code; thankful for any help or direction, thanks! 
<style> 
.header--menu-open
.header-title-logo {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
  
}
  div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7a6a0c4aca21082659737/1610065568794/Deriss_blue_Logo.png") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
</style>