.viewport {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
}

.game {
    position: relative;
    width: 808px;
    height: 238px;
}
.game .row{
    margin: 0;
}
.results {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform 1s ease;
    font-size: 2em;
    padding: 13px 66px 9px;
}

.results.shown {
    display: flex;
    transform: translateY(0);
}

.columns {
    background-size: 100% 100%;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.columns.columns-top {
    background-image: url(../../../images/lps/cornhole/strip-1.jpg);
	background-image: -webkit-image-set(url("../../../images/lps/cornhole/strip-1.jpg") 1x, url("../../../images/lps/cornhole/strip-1@2x.jpg") 2x);    
}

.columns.columns-center {
    background-image: url(../../../images/lps/cornhole/strip-2.jpg);
	background-image: -webkit-image-set(url("../../../images/lps/cornhole/strip-2.jpg") 1x, url("../../../images/lps/cornhole/strip-2@2x.jpg") 2x);    
}

.columns.columns-bottom {
    background-image: url(../../../images/lps/cornhole/strip-3.jpg);
	background-image: -webkit-image-set(url("../../../images/lps/cornhole/strip-3.jpg") 1x, url("../../../images/lps/cornhole/strip-3@2x.jpg") 2x);    
}

.columns:after {
    content: "";
    display: block;
    padding-top: 9.81848%;
}


@keyframes ltr-transition-0 {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: 269.333px;
    }
}

@keyframes ltr-transition-1 {
    0% {
        background-position: 269.333px;
    }

    100% {
        background-position: 538.666px;
    }
}

@keyframes ltr-transition-2 {
    0% {
        background-position: 538.666px;
    }

    100% {
        background-position: 808px;
    }
}

@keyframes rtl-transition-0 {
    0% {
        background-position: -269.333px;
    }

    100% {
        background-position: -538.666px;
    }
}

@keyframes rtl-transition-1 {
    0% {
        background-position: -808px;
    }

    100% {
        background-position: -1077.333px
    }
}

@keyframes rtl-transition-2 {
    0% {
        background-position: -1346.666px
    }

    100% {
        background-position: -1616px;
    }
}
@media screen and (max-width: 767px){
    .game {
        position: relative;
        width: 354px;
        height: 104px;
    }
    .results{
        font-size: 1.125em;
        padding: 9px 36px 3px;
    }
    @keyframes ltr-transition-0 {
        0% {
            background-position: 0px;
        }
    
        100% {
            background-position: 118px;
        }
    }
    
    @keyframes ltr-transition-1 {
        0% {
            background-position: 118px;
        }
    
        100% {
            background-position: 236px;
        }
    }
    
    @keyframes ltr-transition-2 {
        0% {
            background-position: 236px;
        }
    
        100% {
            background-position: 354px;
        }
    }
    
    @keyframes rtl-transition-0 {
        0% {
            background-position: -118px;
        }
    
        100% {
            background-position: -236px;
        }
    }
    
    @keyframes rtl-transition-1 {
        0% {
            background-position: -354px;
        }
    
        100% {
            background-position: -472px
        }
    }
    
    @keyframes rtl-transition-2 {
        0% {
            background-position: -590px
        }
    
        100% {
            background-position: -708px;
        }
    }

}