/* Big tablet (1024) to 1200px (widths smaller than the 1140px row) */

/* keep as it is */



/* MAYBE delete all of this. Keep the PC version and when you move to 767px (maybe 1023px) phones you positionate the help, settings modal to the cornerse and winning score center bottom. You will then change the resolution to be 16:9. Instead of the PC version.



/* Small tablet to big tablet: from (768) 840 to 1023px */

@media only screen and (max-width: 1023px) {

    

    .wrapper {

        width: 100%;

        height: 575px;

    }

    

    .player-name { font-size: 195%; }

    

    .player-current-box {

        width: 110px;

    }

    

    .btn-new { top: 25px; }

    .btn-roll { top: 403px; }

    .btn-hold { top: 467px; }

    .js-text-animation { top: 70px; }



    .btn-settings { 

        bottom: 15px;

        left: 10%;

    }

    .btn-help { 

        bottom: 15px;

        left: 90%;

    }

    .winning-score-display { bottom: 17px; }

}



/* 768 to 930  Something between */

@media only screen and (max-width: 930px) {

    

    .one-dice-panel {

        left: 44.4%;

    }

    .js-rotateout-animation {

        left: 50%;

    }

    

    .active .player-name::after {

        right: -10px;

    }

}





/* 768 to 840  Something between */

@media only screen and (max-width: 840px) {

    

    .one-dice-panel {

        left: 43.8%;

    }

    .js-rotateout-animation {

        left: 50%;

    }

    .active .player-name::after {

        right: -20px;

    }

}



/* Small phones to small tablets: from 481 to 767px */

@media only screen and (max-width: 767px) {

    

    body {

        font-size: 80%;

    }

    .wrapper {

        width: 100%;

        height: 100%;

    }    

    .player-0-panel,

    .player-1-panel {

        padding: 50px;

    }

    .player-name { font-size: 130%; }

    .player-score {

        font-size: 350%;

        margin-bottom: 50px;

    }

    

    .player-current-box {

        width: 100px;

        padding: 8px;

    }

    .player-current-score {

        font-size: 150%;

    }

    

    .active .player-name::after {

        font-size: 40px;

        top: -13px;

        right: 30px;

    }

    

    .btn-new { top: 20px; }

    .btn-roll { top: 235px; }

    .btn-hold { top: 275px; }

    .js-text-animation { top: 50px; }

    .btn-settings { bottom: 5px; }

    .btn-help { bottom: 5px; }

    .winning-score-display { bottom: 7px; }

    

    /* dices */

    .one-dice-panel {

        left: 44.4%;

        top: 130px; 

        transform: translateX(-50%);

        height: 80px;

    }

        

    .js-rotateout-animation {

        left: 50%;

    }

    

    .two-dice-panel {

        left: 50%;

        top: 130px;

        transform: translateX(-50%);

        height: 80px;

        width: 180px;

    }

    

    .dice {

        height: 100%;

    }

    

    .modal-content {

        margin: 0 auto;

        padding: 20px;

        border: 1px solid #888;

        width: 50%; /* Could be more or less, depending on screen size */

        height: 100%;

    }

    

    .btn-save {

        position: absolute;

        top: 260px;

        bottom: 0;

        height: 20px;

    }



    .btn-cancel {

        position: absolute;

        top: 290px;

        bottom: 0;

        height: 20px;

    }

}

/* IPHONE 6 */

@media only screen and (max-width: 667px) {

    .one-dice-panel {

        left: 43.7%;

        top: 130px; 

        transform: translateX(-50%);

        height: 80px;

    }

    .js-rotateout-animation {

        left: 50%;

    }

    

/* GALAXY SIII */

@media only screen and (max-width: 640px) {

    .one-dice-panel {

        left: 43.6%;

        top: 120px; 

        transform: translateX(-50%);

        height: 80px;

    }

    .js-rotateout-animation {

        left: 50%;

    }

    

    .two-dice-panel {

        top: 120px;

    }

    

    .btn-new { top: 20px; }

    .btn-roll { top: 230px; }

    .btn-hold { top: 267px; }

    .js-text-animation { top: 50px; }

    .btn-settings { bottom: 5px; }

    .btn-help { bottom: 5px; }

    .winning-score-display { bottom: 7px; }



/* IPHONE 5 */

@media only screen and (max-width: 568px) {

    .btn-new { top: 20px; }

    .btn-roll { top: 225px; }

    .btn-hold { top: 255px; }

    .js-text-animation { top: 50px; }

    .btn-settings { bottom: 5px; }

    .btn-help { bottom: 5px; }

    .winning-score-display { bottom: 7px; }

    

    .player-current-box {

        width: 90px;

    }

    .active .player-name::after {

        font-size: 30px;

        top: -8px;

        right: 15px;

    }

    

    /* dices */

    .one-dice-panel {

        left: 43.6%;

        top: 130px; 

        transform: translateX(-50%);

        height: 70px;

    }

        

    .two-dice-panel {

        left: 50%;

        top: 130px;

        transform: translateX(-50%);

        height: 70px;

        width: 150px;

    }

    

    .js-rotateout-animation {

        left: 50%;

    }

}



@media only screen and (max-width: 540px) {

    .btn-new { top: 20px; }

    .btn-roll { top: 225px; }

    .btn-hold { top: 255px; }

    .js-text-animation { top: 50px; }

    .btn-settings { bottom: 8px; }

    .btn-help { bottom: 8px; }

    .winning-score-display { bottom: 10px; }

    

    .player-current-box {

        width: 90px;

    }

    .active .player-name::after {

        font-size: 30px;

        top: -8px;

        right: 15px;

    }

    

    /* dices */

    .one-dice-panel {

        left: 43.6%;

        top: 130px; 

        transform: translateX(-50%);

        height: 70px;

    }

        

    .two-dice-panel {

        left: 50%;

        top: 130px;

        transform: translateX(-50%);

        height: 70px;

        width: 150px;

    }

    

    .js-rotateout-animation {

        left: 50%;

    }

}



/* Small phones: from 0 to 480px OR phones in VERTICAL mode OR Iphone 4 */

@media only screen and (max-width: 480px) {

    

    .player-name { font-size: 100%; }

    .player-score {

        font-size: 300%;

        margin-bottom: 60px;

    }

    

    .player-current-box {

        width: 100%;

    }

    

    .active .player-name::after {

        font-size: 30px;

        top: -10px;

        right: -20px;

    }

    

    .btn-new { top: 25px; }

    .btn-roll { top: 320px; }

    .btn-hold { top: 350px; }

    .js-text-animation { top: 50px; }



    .btn-settings { 

        top: 400px;

        bottom: 0;

        left: 50%;

        height: 20px;

    }

    .btn-help { 

        top: 430px;

        bottom: 0;

        left: 50%;

        height: 20px;

    }

    .winning-score-display { 

        top: 470px;

        bottom: 0;

        left: 50%;

        height: 20px;

    }

    

    .modal-content {

        width: 100%; /* Could be more or less, depending on screen size */

    }

    

    /* dices */

    .one-dice-panel {

        left: 41.4%;

        top: 130px; 

        transform: translateX(-50%);

        height: 70px;

    }

        

    .two-dice-panel {

        left: 50%;

        top: 150px;

        transform: translateX(-50%);

        height: 60px;

        width: 130px;

    }

    

    .dice {

        height: 100%;

    }

    .js-rotateout-animation {

        left: 50%;

    }

}





/* Vertical mode Iphone 6 */

@media only screen and (max-width: 375px) {

    

    /* dices */

    .one-dice-panel {

        left: 40%;

    }

    .js-rotateout-animation {

        left: 50%;

    }

}

    

/* Galaxy SIII */

@media only screen and (max-width: 360px) {

    

    .two-dice-panel {

        left: 50%;

        top: 165px;

        transform: translateX(-50%);

        height: 58px;

        width: 125px;

    }

        

    .active .player-name::after {

        font-size: 28px;

        top: -9px;

        right: -15px;

    }

}





/* Vertical mode Iphone 5 */

@media only screen and (max-width: 320px) {

    

    body { font-size: 75%; }



    /* dices */

    .one-dice-panel {

        left: 39.7%;

        top: 140px; 

        height: 65px;

    }

    .js-rotateout-animation {

        left: 50%;

    }

    

    .two-dice-panel {

        left: 50%;

        top: 165px;

        transform: translateX(-50%);

        height: 58px;

        width: 125px;

    }

    

    .active .player-name::after {

        font-size: 26px;

        top: -8px;

        right: -25px;

    }

}