How do I fix the code where the curtain doesn't open?

[htmlcssjavascript28]

Would I be writing the css differently?

css:

.hide+.curtain-containerC .curtain-leftC {
  transform: translateX(-100%);
}


.hide+.curtain-containerC .curtain-rightC {
  transform: translateX(100%);
}

curtain opens: Edit fiddle - JSFiddle - Code Playground

<div class="curtain-containerC">
    <div class="slide curtain-leftC">
        <div class="inner">
            <div class="container2"></div>
        </div>
    </div>


    <div class="slide curtain-rightC">
        <div class="inner">
            <div class="container2"></div>
        </div>
    </div>
</div>

<div class="outer-containerA hide">

curtain doesn't open: Edit fiddle - JSFiddle - Code Playground

<div class="outer-containerA hide">


<div class="curtain-containerC">
    <div class="slide curtain-leftC">
        <div class="inner">
            <div class="container2"></div>
        </div>
    </div>


    <div class="slide curtain-rightC">
        <div class="inner">
            <div class="container2"></div>
        </div>
    </div>
</div>

 

[tomliv]

The fiddle works for me. A black curtain opens to reveal the video.

 

[htmlcssjavascript28]

Not here it doesn't open: Edit fiddle - JSFiddle - Code Playground

This does not open.

 

[tomliv]

Not here it doesn't open: Edit fiddle - JSFiddle - Code Playground

Yes it does. Mac Firefox.