$duration = 450ms $tileWidth = 250px $tileHeight = ($tileWidth / (16/9)) $iconSize = 50px $growFactor = 1.5 // 1.5 times the original size $moveLeft = -($tileWidth * ($growFactor - 1) / 2) $moveRight = $tileWidth * ($growFactor - 1) body, html padding: 0 10px margin: 0 background: #0E0F11 color: #ecf0f1 font-family: 'Open Sans', sans-serif min-height: 100vh display: flex flex-direction: row align-items: center width: 100% * { box-sizing: border-box } h1, p text-align: center p width: 100% max-width: 500px margin: auto a:link a:hover a:active a:visited transition: color 150ms color: #95a5a6 text-decoration: none a:hover color: #7f8c8d text-decoration: underline .contain width: 100% .row overflow: scroll width: 100% .row__inner transition: $duration transform font-size: 0 white-space: nowrap margin: ($tileHeight / 2) 0 padding-bottom: 10px // Account for OS X scroll bar .tile position: relative display: inline-block width: $tileWidth height: $tileHeight margin-right: 10px font-size: 20px cursor: pointer transition: $duration all transform-origin: center left .tile__img width: $tileWidth height: $tileHeight object-fit: cover .tile__details position: absolute bottom: 0 left: 0 right: 0 top: 0 font-size: 10px opacity: 0 background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%) transition: $duration opacity &:after &:before content: '' position absolute top: 50% left: 50% display: black &:after margin-top: (-($iconSize / 2)) margin-left: (-($iconSize / 2)) width: $iconSize height: $iconSize border: 3px solid #ecf0f1 line-height: $iconSize text-align: center border-radius: 100% background: rgba(0,0,0,0.5) z-index: 1 &:before content: '▶' left: 0 width: 100% font-size: 30px margin-left: 7px margin-top: -18px text-align: center z-index: 2 .tile:hover & opacity: 1 .tile__title position absolute bottom: 0 padding: 10px // * // * Hover effects // * // We assume when you hover .row, you're also hovering a .tile // First, move the whole row towards the left .row__inner:hover transform: translate3d($moveLeft, 0, 0) .row__inner:hover .tile // Fade out every tile opacity: .3 // And then grow the current tile and make it opaque again &:hover transform: scale($growFactor) opacity: 1 // And finally move all tiles right of the current tile to the right, // so its flush against the hovered tile .tile:hover ~ .tile transform: translate3d($moveRight, 0, 0)
 

A NEW KIND OF

COMPETITION

WHAT IS IT?

Directors Cut™ is a film competition that brings short films from directors around the world to battle for greatness on the silver screen. Each month, selected films will square off. The audience votes, and the winner moves on to the final round and a chance to win the cash prize.

WHERE IS IT?

The competitions will take place each month at the Quaker Cinema in New Philadelphia, Ohio. Audience members will enjoy dinner from local area restaurants before the films begin (dinner is included in the price of admission). Send your short film now, and secure your spot in the competition.

DIRECTORS

Your work is your masterpiece. You want the world to see what you've created. Submit your short films here. 

SUBMIT FILM
AUDIENCE

You love to be the critic. Now enjoy an evening viewing, dinning, and voting for your favorite films.

BUY TICKETS
VOTING

After you've seen the films, you will vote and find out which director will be moving to the next round.

BUY TICKETS
Anchor 3

    Work    

ABOUT THE

QUAKER CINEMA

Nestled in downtown New Philadelphia, the Quaker Cinema has supplied cinematic entertainment since 1940. Originally, the theater contained one massive screen in an auditorium that seated over 800 people. In the 1980s, the theater was converted into two screen to accommodate multiple movie showings. In 2015, the exterior was restored to the original marquee and the interior was modernized with a retro feel.