Hide logo on mobile/tablet sticky nav and change text style on mobile sticky

Alrighty so I have a transparent primary nav using nav as header. I've managed to style the sticky nav separately with some custom CSS like so:

.main-navigation.navigation-clone {
	 background-image: linear-gradient(to right, #005d68, #007b7f, #009a8f, #2db99a, #5cd89f);
}

and

.main-navigation.sticky-navigation-transition .main-nav > ul > li > a, .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .mobile-bar-items a, .sticky-navigation-transition .navigation-branding .main-title {
	color: white;
}

.main-navigation.sticky-navigation-transition .main-nav > ul > li > a:hover , .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .mobile-bar-items a, .sticky-navigation-transition .navigation-branding .main-title{
	color: #005D68 ;
}

The issue though is that the logo doesn't show well over the gradient so it's hidden on desktop. But I can't hide it from tablet and mobile only on the sticky nav. In other words. On tablet/mobile I'd like the logo to show on normal but hide on sticky.

I'd also like to change the text colour of the mobile toggle and label on the mobile/tablet sticky.

Does anyone have a suggestion on how to pull that off.