.drop-container li {
    -webkit-user-select: none !important; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none !important; /* disable the IOS popup when long-press on a link */
}

.draggable-source {
    outline: none;
    cursor: pointer;
}

.draggable-source img {
    pointer-events:none;
}

.drop-pos.draggable-dropzone--active img{
    display: none;
}

.hide{
    display: none;
}

#info-panel{
    position: relative;
}

.cow-cuts{
    position: relative;
}

.cow-grid ul{
    list-style: none;
}

.cow-grid ul:before{
    margin: 0;
}

.cow-grid ul:after{
    margin: 0;
}

.cow-grid ul li{
    position: relative;
}

#game-info {
    font-family: Sedgwick;
    color: #7A4A4B;
    margin: 0 auto;
    display: block;
}


div.cut-container{
    position: relative;
    display: inline-block;
    left: -25px;
}

ul.cuts{
    list-style: none;
    position: relative;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-evenly;
    -webkit-justify-content: space-between;
}

#puzzle-success{
    display: block;
    margin: 0 auto;
    position: relative;
    background: url('../media/PopUpWow@2x.png') no-repeat center center;
    height: 100vh;
    width: 100vw;
    animation-duration: 1s;
    animation-name: slidein;
}

#puzzle-success a{
    position: relative;
    height: 43px;
    width: 233px;
    display: block;
}

#puzzle-success a:nth-child(1){
    top: calc(50vh - -65.5px);
    left: calc(50vw - 117px);
}

#puzzle-success a:nth-child(2){
    top: calc(50vh - -73.5px);
    left: calc(50vw - 117px);
}

@media(max-width: 599px){

    #info-panel{
        height: 38px;
        top: -138px;
        width: 307px;
    }

    #game-info {
        width: 300px;
        font-size: 14px;
    }

    #cut-info{
        height: 47px;
        width: 307px;
        top: -37px;
        left: 0;
        border-radius: 0 0 13px 13px;
        position: relative;
    }

    .cow-cuts{
        width: 204px;
        left: 48px;
        top: 36px;
    }

    .cow-grid{
        height: 134px;
        width: 204px;
        position: relative;
        top: -98px;
        left: 48px;
    }

    /*Chuck*/
    .cow-grid ul li:nth-child(1){
        height: 47px;
        width: 43px;
        left: 12px;
        top: 15px;
    }

    /*rib*/
    .cow-grid ul li:nth-child(2){
        height: 47px;
        width: 28px;
        left: 51px;
        top: -35px;
    }

    /*short loin*/
    .cow-grid ul li:nth-child(3){
        height: 40px;
        width: 30px;
        left: 75px;
        top: -82px;
    }
    /*sirloin*/
    .cow-grid ul li:nth-child(4){
        height: 62px;
        width: 30px;
        left: 100px;
        top: -123px;
    }

    /*round */
    .cow-grid ul li:nth-child(5){
        height: 64px;
        width: 29px;
        left: 125px;
        top: -187px;
    }

    /*brisket*/
    .cow-grid ul li:nth-child(6){
        height: 26px;
        width: 32px;
        left: 19px;
        top: -203px;
    }

    /*plate*/
    .cow-grid ul li:nth-child(7){
        height: 34px;
        width: 50px;
        left: 45px;
        top: -236px;
    }

    /*flank*/
    .cow-grid ul li:nth-child(8){
        height: 31px;
        width: 46px;
        left: 79px;
        top: -270px;
    }

    div.cut-container{
        height: 43px;
        width: 320px;
        top: -269px;
        left: -6px;
    }

    ul.cuts{
        height: 43px;
        width: 320px;
    }

    .cuts li#chuck{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 85px;
    }

    .cuts li#rib{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 56px;
    }

    .cuts li#short_loin{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 66.5px;
    }

    .cuts li#sirloin{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 60px;
    }

    .cuts li#round{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 52px;
    }

    .cuts li#brisket{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 56px;
    }

    .cuts li#plate{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 85px;
    }

    .cuts li#flank{
        display: inline-block;
        position: relative;
        height: 50px;
        width: 56px;
    }

    .draggable-source{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        /*border: 1px solid red;*/
    }

    .chuck{
        height: auto;
        width: 42px;
        position: absolute;
    }

    .chuck img{
        height: auto;
        width: 42px;
        position: relative;
    }

    .rib{
        height: auto;
        width: 28px;
        position: relative;
    }

    .rib img{
        height: auto;
        width: 28px;
        position: relative;
    }

    .short_loin{
        height: auto;
        width: 32px;
        position: relative;
    }

    .short_loin img{
        height: auto;
        width: 32px;
        position: relative;
    }

    .sirloin{
        height: auto;
        width: 31px;
        position: relative;
    }

    .sirloin img{
        height: auto;
        width: 31px;
        position: relative;
    }

    .round{
        height: auto;
        width: 30px;
        position: relative
    }

    .round img{
        height: auto;
        width: 30px;
        position: relative;
    }

    .brisket{
        height: auto;
        width: 31px;
        position: relative
    }

    .brisket img{
        height: auto;
        width: 31px;
        position: relative;
    }

    .plate{
        height: auto;
        width: 49px;
        position: relative
    }

    .plate img{
        height: auto;
        width: 49px;
        position: relative;
    }

    .flank{
        height: auto;
        width: 45px;
        position: relative
    }

    .flank img{
        height: auto;
        width: 45px;
        position: relative;
    }
}


/*600px, 900px, 1200px, and 1800px*/
@media(min-width: 600px){

    /*@keyframes slidein {*/
        /*from {*/
            /*margin-top: -100%;*/
        /*}*/

        /*to {*/
            /*margin-top: 0;*/
        /*}*/
    /*}*/

    #info-panel{
        height: 62px;
        top: -158px;
        width: 576px;
    }

    #game-info{
        width: 530px;
    }

    #cut-info{
        height: 96px;
        width: 576px;
        top: -88px;
        left: 0px;
        border-radius: 0 0 18px 18px;
        position: relative;;
    }

    .cow-cuts{
        width: 340px;
        left: 106px;
        top: 94px;
    }

    .cow-grid{
        height: 158px;
        width: 300px;
        position: relative;
        top: -119px;
        left: 180px;
    }

    /*Chuck*/
    .cow-grid ul li:nth-child(1){
        height: 78px;
        width: 70px;
        left: -26px;
        top: 15px;
    }

    /*rib*/
    .cow-grid ul li:nth-child(2){
        height: 75px;
        width: 46px;
        left: 38px;
        top: -68px;
    }

    /*short loin*/
    .cow-grid ul li:nth-child(3){
        height: 69px;
        width: 54px;
        left: 78px;
        top: -144px;
    }
    /*sirloin*/
    .cow-grid ul li:nth-child(4){
        height: 105px;
        width: 51px;
        left: 120px;
        top: -214px;
    }

    /*round */
    .cow-grid ul li:nth-child(5){
        height: 109px;
        width: 50px;
        left: 162px;
        top: -323px;
    }

    /*brisket*/
    .cow-grid ul li:nth-child(6){
        height: 42px;
        width: 50px;
        left: -14px;
        top: -349px;
    }

    /*plate*/
    .cow-grid ul li:nth-child(7){
        height: 54px;
        width: 82px;
        left: 29px;
        top: -404px;
    }

    /*flank*/
    .cow-grid ul li:nth-child(8){
        height: 51px;
        width: 74px;
        left: 85px;
        top: -459px;
    }

    div.cut-container{
        height: 115px;
        width: 600px;
        top: -374px;
    }

    ul.cuts{
        height: 115px;
        width: 590px;
    }

    .cuts li#chuck{
        display: inline-block;
        position: relative;
        height: 99px;
        width: 85px;
    }

    .cuts li#rib{
        display: inline-block;
        position: relative;
        height: 85px;
        width: 56px;
    }

    .cuts li#short_loin{
        display: inline-block;
        position: relative;
        height: 80px;
        width: 66.5px;
    }

    .cuts li#sirloin{
        display: inline-block;
        position: relative;
        height: 114px;
        width: 60px;
    }

    .cuts li#round{
        display: inline-block;
        position: relative;
        height: 117px;
        width: 52px;
    }

    .cuts li#brisket{
        display: inline-block;
        position: relative;
        height: 40px;
        width: 56px;
    }

    .cuts li#plate{
        display: inline-block;
        position: relative;
        height: 53px;
        width: 85px;
    }

    .cuts li#flank{
        display: inline-block;
        position: relative;
        height: 85px;
        width: 56px;
    }

    .draggable-source{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        /*border: 1px solid red;*/
    }

    .chuck{
        height: auto;
        width: 70px;
        position: absolute;
    }

    .chuck img{
        height: auto;
        width: 70px;
        position: relative;
    }

    .rib{
        height: auto;
        width: 46px;
        position: relative;
    }

    .rib img{
        height: auto;
        width: 46px;
        position: relative;
    }

    .short_loin{
        height: auto;
        width: 54px;
        position: relative;
    }

    .short_loin img{
        height: auto;
        width: 54px;
        position: relative;
    }

    .sirloin{
        height: auto;
        width: 51px;
        position: relative;
    }

    .sirloin img{
        height: auto;
        width: 50px;
        position: relative;
    }

    .round{
        height: auto;
        width: 50px;
        position: relative
    }

    .round img{
        height: auto;
        width: 50px;
        position: relative;
    }

    .brisket{
        height: auto;
        width: 50px;
        position: relative
    }

    .brisket img{
        height: auto;
        width: 50px;
        position: relative;
    }

    .plate{
        height: auto;
        width: 82px;
        position: relative
    }

    .plate img{
        height: auto;
        width: 82px;
        position: relative;
    }

    .flank{
        height: auto;
        width: 74px;
        position: relative
    }

    .flank img{
        height: auto;
        width: 74px;
        position: relative;
    }
}

@media (min-width: 900px){
/*@media (orientation: landscape) and (min-device-width: 900px){*/
    #info-panel{
        height: 100px;
        top: -85px;
        left: -1px;
        width: 863px;
    }

    #game-info{
        width: 800px;
    }

    #cut-info{
        height: 140px;
        width: 863px;
        top: -78px;
        left: 2px;
        border-radius: 0 0 30px 30px;
        position: relative;
    }

    .cow-cuts{
        width: 420px;
        left: 240px;
        top: 180px;
    }

    .cow-grid{
        height: 158px;
        width: 300px;
        position: relative;
        top: -79px;
        left: 343px;
    }

    /*Chuck*/
    .cow-grid ul li:nth-child(1){
        height: 99px;
        width: 85px;
        left: -35px;
        top: 15px;
    }

    /*rib*/
    .cow-grid ul li:nth-child(2){
        height: 85px;
        width: 56px;
        left: 44px;
        top: -89px;
    }

    /*short loin*/
    .cow-grid ul li:nth-child(3){
        height: 80px;
        width: 66.5px;
        left: 94px;
        top: -176px;
    }
    /*sirloin*/
    .cow-grid ul li:nth-child(4){
        height: 114px;
        width: 63px;
        left: 146px;
        top: -258px;
    }

    /*round */
    .cow-grid ul li:nth-child(5){
        height: 117px;
        width: 60px;
        left: 198px;
        top: -376px;
    }

    /*brisket*/
    .cow-grid ul li:nth-child(6){
        height: 40px;
        width: 61px;
        left: -19px;
        top: -392px;
    }

    /*plate*/
    .cow-grid ul li:nth-child(7){
        height: 53px;
        width: 100px;
        left: 34px;
        top: -448px;
    }

    /*flank*/
    .cow-grid ul li:nth-child(8){
        height: 85px;
        width: 90px;
        left: 103px;
        top: -502px;
    }

    div.cut-container{
        height: 135px;
        width: 850px;
        top: -405px;
    }

    ul.cuts{
        height: 135px;
        width: 850px;
    }

    .cuts li#chuck{
        display: inline-block;
        position: relative;
        height: 99px;
        width: 85px;
    }

    .cuts li#rib{
        display: inline-block;
        position: relative;
        height: 85px;
        width: 56px;
    }

    .cuts li#short_loin{
        display: inline-block;
        position: relative;
        height: 80px;
        width: 66.5px;
    }

    .cuts li#sirloin{
        display: inline-block;
        position: relative;
        height: 114px;
        width: 60px;
    }

    .cuts li#round{
        display: inline-block;
        position: relative;
        height: 117px;
        width: 52px;
    }

    .cuts li#brisket{
        display: inline-block;
        position: relative;
        height: 40px;
        width: 56px;
    }

    .cuts li#plate{
        display: inline-block;
        position: relative;
        height: 53px;
        width: 85px;
    }

    .cuts li#flank{
        display: inline-block;
        position: relative;
        height: 85px;
        width: 56px;
    }

    .draggable-source{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        /*border: 1px solid red;*/
    }

    .chuck{
        height: auto;
        width: 86px;
        position: absolute;
    }

    .chuck img{
        height: auto;
        width: 86px;
        position: relative;
    }

    .rib{
        height: auto;
        width: 56px;
        position: relative;
    }

    .rib img{
        height: auto;
        width: 56px;
        position: relative;
    }

    .short_loin{
        height: auto;
        width: 66.5px;
        position: relative;
    }

    .short_loin img{
        height: auto;
        width: 66.5px;
        position: relative;
    }

    .sirloin{
        height: auto;
        width: 63px;
        position: relative;
    }

    .sirloin img{
        height: auto;
        width: 63px;
        position: relative;
    }

    .round{
        height: auto;
        width: 60px;
        position: relative
    }

    .round img{
        height: auto;
        width: 61px;
        position: relative;
    }

    .brisket{
        height: auto;
        width: 61px;
        position: relative
    }

    .brisket img{
        height: auto;
        width: 61px;
        position: relative;
    }

    .plate{
        height: auto;
        width: 100px;
        position: relative
    }

    .plate img{
        height: auto;
        width: 100px;
        position: relative;
    }

    .flank{
        height: auto;
        width: 90px;
        position: relative
    }

    .flank img{
        height: auto;
        width: 90px;
        position: relative;
    }

}

@media (min-width: 1200px){
/*@media (orientation: landscape) and (min-device-width: 1200px){*/
    #info-panel{
        height: 114px;
        top: -95px;
        left: 18px;
        width: 962px;
    }

    #game-info{
        width: 900px;
    }

    #cut-info{
        height: 152px;
        width: 998px;
        top: -42px;
        left: -18px;
        border-radius: 0 0 35px 35px;
        position: relative;
    }

    .cow-cuts{
        width: 500px;
    }

    .cow-grid{
        height: 183px;
        width: 355px;
        position: relative;
        top: -128px;
        left: 365px;
    }

    .cow-grid ul li:nth-child(1){
        height: 117px;
        width: 102px;
        left: -36px;
        top: 17px;
    }

    .cow-grid ul li:nth-child(2){
        height: 104px;
        width: 67px;
        left: 58px;
        top: -106px;
    }

    .cow-grid ul li:nth-child(3){
        height: 94px;
        width: 78px;
        left: 117px;
        top: -212px;
    }

    .cow-grid ul li:nth-child(4){
        height: 125px;
        width: 75px;
        left: 179px;
        top: -309px;
    }

    .cow-grid ul li:nth-child(5){
        height: 139px;
        width: 73px;
        left: 240px;
        top: -438px;
    }

    .cow-grid ul li:nth-child(6){
        height: 47px;
        width: 72px;
        left: -17px;
        top: -456px;
    }

    .cow-grid ul li:nth-child(7){
        height: 61px;
        width: 120px;
        left: 45px;
        top: -523px;
    }

    .cow-grid ul li:nth-child(8){
        height: 66px;
        width: 108px;
        left: 128px;
        top: -585px;
    }

    div.cut-container{
        height: 140px;
        width: 950px;
        top: -475px;
    }

    ul.cuts{
        height: 140px;
        width: 950px;
    }

    .cuts li#chuck{
        display: inline-block;
        position: relative;
        height: 99px;
        width: 85px;
    }

    .cuts li#rib{
        display: inline-block;
        position: relative;
        height: 85px;
        width: 56px;
    }

    .cuts li#short_loin{
        display: inline-block;
        position: relative;
        height: 80px;
        width: 66.5px;
    }

    .cuts li#sirloin{
        display: inline-block;
        position: relative;
        height: 114px;
        width: 60px;
    }

    .cuts li#round{
        display: inline-block;
        position: relative;
        height: 117px;
        width: 52px;
    }

    .cuts li#brisket{
        display: inline-block;
        position: relative;
        height: 40px;
        width: 56px;
    }

    .cuts li#plate{
        display: inline-block;
        position: relative;
        height: 53px;
        width: 85px;
    }

    .cuts li#flank{
        display: inline-block;
        position: relative;
        height: 85px;
        width: 56px;
    }

    .draggable-source{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        /*border: 1px solid red;*/
    }

    .chuck{
        height: auto;
        width: 102px;
        position: absolute;
    }

    .chuck img{
        height: auto;
        width: 102px;
        position: relative;
    }

    .rib{
        height: auto;
        width: 67px;
        position: relative;
    }

    .rib img{
        height: auto;
        width: 67px;
        position: relative;
    }

    .short_loin{
        height: auto;
        width: 78px;
        position: relative;
    }

    .short_loin img{
        height: auto;
        width: 78px;
        position: relative;
    }

    .sirloin{
        height: auto;
        width: 75px;
        position: relative;
    }

    .sirloin img{
        height: auto;
        width: 75px;
        position: relative;
    }

    .round{
        height: auto;
        width: 73px;
        position: relative
    }

    .round img{
        height: auto;
        width: 73px;
        position: relative;
    }

    .brisket{
        height: auto;
        width: 72px;
        position: relative
    }

    .brisket img{
        height: auto;
        width: 72px;
        position: relative;
    }

    .plate{
        height: auto;
        width: 120px;
        position: relative
    }

    .plate img{
        height: auto;
        width: 120px;
        position: relative;
    }

    .flank{
        height: auto;
        width: 108px;
        position: relative
    }

    .flank img{
        height: auto;
        width: 108px;
        position: relative;
    }
}