Product navigation arrows not visible in desktop

Site URL: http://www.intotheblackpines.com

When in a product page on desktop view, the only way to navigate through the product photos is to actually click on them under the main photo. But in Mobile, you just swipe sideways on the image to navigate through the photos. I remember there was arrows to the side of the photo and the (1/5) to the top right of the photo when in desktop view, so that you could click on the arrow and navigate through the photos, but now they're not there. Also , in mobile, the (1/5) does appear, but it appears in white and some of my products have a white background so you can't see the numbers at all, I will also need help changing that to black or even a gray. Thank you in advance everyone! password to the site is jogajh89

Add this to Home > Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

I also used the code above that @tuanphan posted and was able to make it work for me (thank you!) 

However, I was having trouble with my mobile site and the arrows were showing up as white blocks instead of arrows. I'm sure this is due to the design of my template. But I just had to change the word 'white' to 'transparent' and it works perfectly now! 

Thanks so much for some great code, dude! Helping this newb make her site function.