/*
TABSQUARE MERCHANT CUSTOMER DISPLAY
URL: ?
AUTHOR: Nabil Amer Thabit (nbilz//lab//dsign | @nbilz)
EMAIL: nbilz@live.com
CREATE DATE: Jul 9, 2019
UPDATE DATE: Jul 9, 2019
REVISION: 1
NAME: merchant.display-texas-1.0.css
TYPE: Cascading Style Sheet
DESCRIPTION: TabSquare | Next Generation Smart Restaurant Solutions
PALETTE:    1. #FF6B00 / rgb(255, 107, 0) (Pure Orange / Blaze Orange)
            2. #56565A / rgb(86, 86, 90) (Very Dark Grayish Blue / Scarpa Flow)

            1. #EC493D / rgb(236, 73, 61) (Bright Red / Cinnabar)
            2. #1F5482 / rgb(31, 84, 130) (Dark Blue / Blumine)
            3. #FBC540 / rgb(251, 197, 64) (Bright Orange / Bright Sun)
Layout:     1. HD Monitor -> Landscape -> Init
            2. HD Monitor -> Landscape -> Open Left or Right
            3. HD Monitor -> Landscape -> Full Screen
            4. HD Monitor -> Landscape -> Full Screen + Open Left or Right
            5. HD Monitor -> Landscape -> Open Left and Right
            6. HD Monitor -> Landscape -> Full Screen + Open Left and Right
            7. HD Monitor -> Portrait -> Init
            8. HD Monitor -> Portrait -> Open Left or Right
            9. HD Monitor -> Portrait -> Full Screen
            10. HD Monitor -> Portrait -> Full Screen + Open Left or Right
            11. HD Monitor -> Portrait -> Open Left and Right
            12. HD Monitor -> Portrait -> Full Screen + Open Left and Right
            13. Desktop -> Landscape -> Init
            14. Desktop -> Landscape -> Open Left or Right
            15. Desktop -> Landscape -> Full Screen
            16. Desktop -> Landscape -> Full Screen + Open Left or Right
            17. Desktop -> Landscape -> Open Left and Right
            18. Desktop -> Landscape -> Full Screen + Open Left and Right
            19. Desktop -> Portrait -> Init
            20. Desktop -> Portrait -> Open Left or Right
            21. Desktop -> Portrait -> Full Screen
            22. Desktop -> Portrait -> Full Screen + Open Left or Right
            23. Desktop -> Portrait -> Open Left and Right
            24. Desktop -> Portrait -> Full Screen + Open Left and Right
            25. Tablet -> Landscape -> Init
            26. Tablet -> Landscape -> Open Left or Right
            27. Tablet -> Landscape -> Full Screen
            28. Tablet -> Landscape -> Full Screen + Open Left or Right
            29. Tablet -> Landscape -> Open Left and Right
            30. Tablet -> Landscape -> Full Screen + Open Left and Right
            31. Tablet -> Portrait -> Init
            32. Tablet -> Portrait -> Full Screen
            33. Mobile -> Landscape -> Init
            34. Mobile -> Landscape -> Full Screen
            35. Mobile -> Portrait -> Init
            36. Mobile -> Portrait -> Full Screen
*/

ul.but-act li a.for-cw,
ul.but-act li a.for-ccw,
ul.but-act li a.for-dark{
    width: 32px;
    height: 32px;
    padding: 0;
}

ul.but-act li a.for-cw i,
ul.but-act li a.for-ccw i{
    font-size: 12px;
    line-height: 12px;
}

ul.but-act li a.for-ccw i{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

ul.but-act li a.for-cw.disabled,
ul.but-act li a.for-ccw.disabled{
    opacity: .5;
    pointer-events: none;
}

.for-logo{
    position: absolute;
    z-index: 9;
    width: 64px;
    height: 64px;
    padding: 10px;
    box-sizing: border-box;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    background: #FFF;
}

.for-logo img{
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

section.for-display{
    font-family: 'Titillium', 'D-DIN', Helvetica, Arial, sans-serif;
    position: relative;
    height: 600px;
}

ul.dis-lay{
    margin: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #FFF;
    position: absolute;
}

ul.dis-lay.portrait{
    bottom: 50px;
}

ul.dis-lay > li{
    position: absolute;
    padding: 0;
    top: 0;
    bottom: 50px;
    width: 50%;
    color: #485157;
}

ul.dis-lay > li:first-child{
    right: auto;
    width: 50%;
    background: #FFD3B3;
}

ul.dis-lay > li:last-child{
    background: #FFF;
    right: 0;
}

ul.dis-lay.portrait > li,
ul.dis-lay.portrait > li:first-child{
    width: 100%;
    height: 50%;
    bottom: auto;
}

ul.dis-lay.portrait > li:last-child{
    right: auto;
    top: 50%;
}

ul.dis-lay > li > .dis-head{
    padding: 0 20px;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 64px;
    font-weight: bold;
    text-align: center;
    background: rgba(255, 255, 255, .50);
}

ul.dis-lay > li:last-child > .dis-head{
    background: rgba(0, 0, 0, .25);
}

ul.dis-lay > li > .dis-con{
    position: absolute;
    top: 64px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    border-top: none;
}

ul.dis-lay > li > .dis-con > ul{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

ul.dis-lay > li > .dis-con > ul > li{
    position: absolute;
    font-weight: bold;
    width: 50%;
    height: 12.5%;
    z-index: 0;
    font-size: 100px;
    line-height: 100px;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, .25);
}

.side-right.on-expand ul.dis-lay > li > .dis-con > ul > li,
.side-right.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
    font-size: 90px;
    line-height: 90px;
}

.side-right.on-expand.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
    font-size: 60px;
    line-height: 60px;
}

ul.dis-lay > li:first-child > .dis-con > ul > li{
    border-right: 1px solid rgba(255, 255, 255, .50);
    /* font-size: 120px;
    line-height: 120px; */
}

/* .side-right.on-expand ul.dis-lay > li:first-child > .dis-con > ul > li,
.side-right.on-expand-notif ul.dis-lay > li:first-child > .dis-con > ul > li{
    font-size: 110px;
    line-height: 110px;
} */

/* .side-right.on-expand.on-expand-notif ul.dis-lay > li:first-child  > .dis-con > ul > li{
    font-size: 80px;
    line-height: 80px;
} */

ul.dis-lay > li > .dis-con > ul > li span{
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    margin: 0 auto;
    transform: translateY(-50%);
    box-sizing: border-box;
}

ul.dis-lay > li:first-child > .dis-con > ul > li span{
    -webkit-animation: wink 2.4s infinite ease-in-out;
    animation: wink 2.4s infinite ease-in-out;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(2) span{
    animation-delay: .2s;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(3) span{
    animation-delay: .4s;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(4) span{
    animation-delay: .6s;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(5) span{
    animation-delay: .8s;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(6) span{
    animation-delay: 1s;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(7) span{
    animation-delay: 1.2s;
}

ul.dis-lay > li:first-child > .dis-con > ul > li:nth-child(8) span{
    animation-delay: 1.4s;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(n+9){
    right: 0;
    border-right: none;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(1),
ul.dis-lay > li > .dis-con > ul > li:nth-child(9){
    top: 0;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(2),
ul.dis-lay > li > .dis-con > ul > li:nth-child(10){
    top: 12.5%;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(3),
ul.dis-lay > li > .dis-con > ul > li:nth-child(11){
    top: 25%;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(4),
ul.dis-lay > li > .dis-con > ul > li:nth-child(12){
    top: 37.5%;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(5),
ul.dis-lay > li > .dis-con > ul > li:nth-child(13){
    top: 50%;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(6),
ul.dis-lay > li > .dis-con > ul > li:nth-child(14){
    top: 62.5%;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(7),
ul.dis-lay > li > .dis-con > ul > li:nth-child(15){
    top: 75%;
}

ul.dis-lay > li > .dis-con > ul > li:nth-child(8),
ul.dis-lay > li > .dis-con > ul > li:nth-child(16){
    top: 87.5%;
}

.for-display .note{
    position: absolute;
    text-align: center;
    background: #000;
    color: #FFF;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    font-size: 28px;
    font-weight: bold;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-right.on-expand-notif .for-display .note,
.side-right.on-expand .for-display .note{
    font-size: 26px;
}

.side-right.on-expand.on-expand-notif .for-display .note{
    font-size: 24px;
}

/* FULLSCREEN */
body.on-full section.for-display{
    position: inherit;
    height: auto;
}

body.on-full .for-logo{
    top: 69px;
}

body.on-full section.for-logo img{
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    object-fit: contain;
}

body.on-full .side-right.on-expand .for-logo{
    left: 250px;
    /* width: 20%; */
}

/* body.on-full .side-right.on-expand-notif .for-logo{
    width: 20%;
}

body.on-full .side-right.on-expand.on-expand-notif .for-logo{
    width: 15%;
} */

body.on-full ul.dis-lay{
    top: 69px;
}

body.on-full .side-right.on-expand ul.dis-lay{
    left: 250px;
}

body.on-full .side-right.on-expand-notif ul.dis-lay{
    right: 250px;
}

body.on-full .side-right.on-expand.on-expand-notif ul.dis-lay{
    left: 250px;
    right: 250px;
}

body.on-full .side-right.on-expand.on-expand-notif .content-head{
    right: 354px;
    position: absolute;
    top: 6px;
    margin: 0;
    overflow: visible;
}

/* ROTATED */
body.rotated{
    margin: 0;
    overflow: hidden;
}

body.rotated .rotated-wrap{
    position: absolute;
    height: 100vw;
    width: 100vh;
    top: -100vw;
    overflow: auto;
}

body.rotated.rot-cw .rotated-wrap{
    transform: rotate(90deg);
    transform-origin: bottom left;
    left: 0;
}

body.rotated.rot-ccw .rotated-wrap{
    transform: rotate(-90deg);
    transform-origin: bottom right;
    right: 0;
}

body.rotated .rotated-wrap .pad-top{
    height: 104px;
}

body.rotated .rotated-wrap header ul.bread-crumb{
    display: block;
    margin: 0 -20px -20px -20px;
    padding: 20px;
}

body.rotated .rotated-wrap header ul.bread-crumb li:first-child{
    display: inline-block;
}

body.rotated.on-full .rotated-wrap .sec-head{
    margin: -103px 0 0 0;
}

body.rotated ul.dis-lay > li{
    bottom: 35px;
}

body.rotated .for-display .note{
    height: 35px;
    line-height: 35px;
    font-size: 20px;
}

body.rotated.rot-cw .ui-tooltip{
    transform: rotate(90deg);
}

body.rotated.rot-ccw .ui-tooltip{
    transform: rotate(-90deg);
}

body.rotated section.for-display{
    height: 900px;
}

body.rotated .for-logo{
    width: 70px;
    height: 70px;
}

body.rotated ul.dis-lay > li > .dis-head{
    font-size: 40px;
    line-height: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.rotated .side-right.on-expand.on-expand-notif ul.dis-lay > li > .dis-head{
    font-size: 28px;
}

body.rotated ul.dis-lay > li > .dis-con{
    top: 70px;
}

body.rotated ul.dis-lay > li:first-child,
body.rotated ul.dis-lay > li:last-child{
    width: 100%;
}

body.rotated ul.dis-lay > li:first-child{
    height: 50%;
}

body.rotated ul.dis-lay > li:last-child{
    top: 50%;
}

body.rotated ul.dis-lay > li:first-child > .dis-con > ul > li{
/*    width: 25%;*/
}

body.rotated ul.dis-lay > li > .dis-con > ul > li{
    font-size: 70px;
    line-height: 70px;
}

body.rotated .side-right.on-expand ul.dis-lay > li > .dis-con > ul > li,
body.rotated .side-right.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
    font-size: 50px;
    line-height: 50px;
}

body.rotated .side-right.on-expand.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
    font-size: 45px;
    line-height: 45px;
}

/* body.rotated ul.dis-lay > li:first-child > .dis-con > ul > li{
    font-size: 100px;
    line-height: 100px;
}

body.rotated .side-right.on-expand ul.dis-lay > li:first-child > .dis-con > ul > li,
body.rotated .side-right.on-expand-notif ul.dis-lay > li:first-child > .dis-con > ul > li{
    font-size: 55px;
    line-height: 55px;
} */

/* body.rotated .side-right.on-expand.on-expand-notif ul.dis-lay > li:first-child  > .dis-con > ul > li{
    font-size: 50px;
    line-height: 50px;
} */

/* DARK MODE */
body.dark-mode{
    background: #222;
}

body.dark-mode header,
body.dark-mode footer{
    background: rgba(0, 0, 0, .8);
}

body.dark-mode footer{
    color: #999;
}

body.dark-mode .title-head em,
body.dark-mode header ul.top-nav li a,
body.dark-mode header a.nav-link,
body.dark-mode footer a{
    color: #CCC;
}

body.dark-mode header ul.bread-crumb li{
    color: #999;
}

body.dark-mode header ul.bread-crumb li a{
    color: #CCC;
}

body.dark-mode header ul.bread-crumb li a:hover{
    color: #FF6B00;
}

body.dark-mode .side-left{
    background: rgba(255, 107, 0, .5);
}

body.dark-mode .side-notif,
body.dark-mode .nav-drop ul li a{
    background: rgba(0, 0, 0, .8);
}

body.dark-mode .nav-drop ul li a:hover{
    background: #FF6B00;
}

body.dark-mode .side-notif ul li a{
    color: #CCC;
    border-bottom: 1px solid #333;
}

body.dark-mode .side-notif ul li:last-child a{
    border-bottom: none;
}

body.dark-mode .side-notif ul li a:hover{
    color: #FF6B00;
}

body.dark-mode .side-notif ul li a span{
    color: #666;
}

body.dark-mode .content-head ul.but-nav li a{
    color: #999;
}

body.dark-mode .content-head ul.but-nav li a:hover{
    color: #FFF;
    box-shadow: inset 0 -3px 0 #FFF;
}

body.dark-mode header a.nav-link:hover,
body.dark-mode header ul.top-nav li a:hover,
body.dark-mode .content-head ul.but-nav li a.nav-act{
    color: #FF6B00;
}

body.dark-mode .sec-head{
    border-bottom: 1px solid #333;
}

body.dark-mode .for-logo{
    background: rgba(0, 0, 0, .25);
}

body.dark-mode ul.dis-lay > li:first-child{
    color: #FF6B00;
    background: #242F35;
}

body.dark-mode ul.dis-lay > li:last-child{
    color: #FFF;
    background: #586167;
}

body.dark-mode ul.dis-lay > li:first-child > .dis-head{
    background: rgba(255, 255, 255, .15);
}

body.dark-mode ul.dis-lay > li:last-child > .dis-con > ul > li{
    border-right: 1px solid rgba(255, 255, 255, .15);
}

@media screen and (min-width: 1400px){
    section.for-display{
        height: 750px;
    }
    
    .for-logo{
        width: 84px;
        height: 84px;
    }
    
    ul.dis-lay > li > .dis-head{
        font-size: 48px;
        padding: 0 40px;
        line-height: 84px;
    }
    
    ul.dis-lay > li > .dis-con{
        top: 84px;
    }
    
    ul.dis-lay > li > .dis-con > ul > li{
        font-size: 50px;
        line-height: 50px;
    }

    ul.dis-lay.portrait > li > .dis-con > ul > li{
        font-size: 35px;
        line-height: 35px;
    }
    
    .side-right.on-expand ul.dis-lay > li > .dis-con > ul > li,
    .side-right.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
        font-size: 40px;
        line-height: 40px;
    }
    
    .side-right.on-expand ul.dis-lay.portrait > li > .dis-con > ul > li,
    .side-right.on-expand-notif ul.dis-lay.portrait > li > .dis-con > ul > li{
        font-size: 30px;
        line-height: 30px;
    }
    
    .side-right.on-expand.on-expand-notif ul.dis-lay > li  > .dis-con > ul > li{
        font-size: 30px;
        line-height: 30px;
    }
    
    /* ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 160px;
        line-height: 160px;
    } */
    
    /* .side-right.on-expand ul.dis-lay > li:first-child > .dis-con > ul > li,
    .side-right.on-expand-notif ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 150px;
        line-height: 150px;
    } */
    
    /* .side-right.on-expand.on-expand-notif ul.dis-lay > li:first-child  > .dis-con > ul > li{
        font-size: 120px;
        line-height: 120px;
    } */
    
    .side-right.on-expand-notif .for-display .note,
    .side-right.on-expand .for-display .note{
        font-size: 26px;
    }
    
    .side-right.on-expand.on-expand-notif .for-display .note{
        font-size: 24px;
    }
    
/*    ROTATED */
    body.rotated .for-logo{
        width: 100px;
        height: 100px;
    }
    
    body.rotated ul.dis-lay > li > .dis-head{
        font-size: 64px;
        line-height: 100px;
    }
    
    body.rotated .side-right.on-expand.on-expand-notif ul.dis-lay > li > .dis-head{
        font-size: 48px;
    }
    
    body.rotated ul.dis-lay > li > .dis-con{
        top: 100px;
    }
    
    body.rotated section.for-display{
        height: 1300px;
    }
    
    body.rotated ul.dis-lay > li > .dis-con > ul > li{
        font-size: 50px;
        line-height: 50px;
    }

    body.rotated .side-right.on-expand ul.dis-lay > li > .dis-con > ul > li,
    body.rotated .side-right.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
        font-size: 40px;
        line-height: 40px;
    }

    body.rotated .side-right.on-expand.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
        font-size: 20px;
        line-height: 20px;
    }

    /* body.rotated ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 150px;
        line-height: 150px;
    } */

    /* body.rotated .side-right.on-expand ul.dis-lay > li:first-child > .dis-con > ul > li,
    body.rotated .side-right.on-expand-notif ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 130px;
        line-height: 130px;
    } */

    /* body.rotated .side-right.on-expand.on-expand-notif ul.dis-lay > li:first-child  > .dis-con > ul > li{
        font-size: 110px;
        line-height: 110px;
    } */

    .side-right.on-expand-notif .for-display .note,
    .side-right.on-expand .for-display .note{
        font-size: 20px;
    }
    
    .side-right.on-expand.on-expand-notif .for-display .note{
        font-size: 12px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    ul.but-act li:nth-child(1),
    ul.but-act li:nth-child(2){
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
    .side-right.on-expand-notif ul.dis-lay > li > .dis-head{
        font-size: 26px;
    }
    
    ul.dis-lay > li > .dis-con > ul > li{
        font-size: 90px;
        line-height: 90px;
    }
    
    .side-right.on-expand ul.dis-lay > li > .dis-con > ul > li,
    .side-right.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
        font-size: 70px;
        line-height: 70px;
    }
    
    .side-right.on-expand.on-expand-notif ul.dis-lay > li > .dis-con > ul > li{
        font-size: 40px;
        line-height: 40px;
    }
    
    /* ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 100px;
        line-height: 100px;
    } */
    
    /* .side-right.on-expand ul.dis-lay > li:first-child > .dis-con > ul > li,
    .side-right.on-expand-notif ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 80px;
        line-height: 80px;
    } */
    
    /* .side-right.on-expand.on-expand-notif ul.dis-lay > li:first-child  > .dis-con > ul > li{
        font-size: 50px;
        line-height: 50px;
    } */
    
    .side-right.on-expand-notif .for-display .note,
    .side-right.on-expand .for-display .note{
        font-size: 22px;
    }
    
    .side-right.on-expand.on-expand-notif .for-display .note{
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
    section.for-display{
        height: 750px;
    }
    
    ul.dis-lay > li:first-child,
    ul.dis-lay > li:last-child{
        width: 100%;
    }
    
    ul.dis-lay > li:first-child{
        height: 50%;
    }
    
    ul.dis-lay > li:last-child{
        top: 50%;
    }
    
    ul.dis-lay > li > .dis-con > ul > li{
        font-size: 65px;
        line-height: 65px;
    }
    
    /* ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 75px;
        line-height: 75px;
    } */
}

@media screen and (max-width: 767px){
    ul.but-act li:nth-child(1),
    ul.but-act li:nth-child(2){
        display: none;
    }
    
    body.on-full .content-head{
        display: none;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape){
    section.for-display{
        height: 450px;
    }
    
    ul.dis-lay > li > .dis-con > ul > li{
        font-size: 65px;
        line-height: 65px;
    }
    
    body.on-full ul.dis-lay > li > .dis-con > ul > li{
        font-size: 50px;
        line-height: 50px;
    }
    
    /* ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 75px;
        line-height: 75px;
    } */
    
    /* body.on-full ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 60px;
        line-height: 60px;
    } */
    
    .for-display .note{
        font-size: 22px;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait){
    section.for-display{
        height: 750px;
    }
    
    ul.dis-lay > li:first-child,
    ul.dis-lay > li:last-child{
        width: 100%;
    }
    
    ul.dis-lay > li:first-child{
        height: 45%;
    }
    
    ul.dis-lay > li:last-child{
        top: 45%;
    }
    
    ul.dis-lay > li > .dis-con > ul > li{
        font-size: 55px;
        line-height: 55px;
    }
    
    body.on-full ul.dis-lay > li > .dis-con > ul > li{
        font-size: 30px;
        line-height: 30px;
    }
    
    /* ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 65px;
        line-height: 65px;
    }
    
    body.on-full ul.dis-lay > li:first-child > .dis-con > ul > li{
        font-size: 40px;
        line-height: 40px;
    } */
    
    .for-display .note{
        font-size: 12px;
    }
}

/*
@media screen and (min-width: 1400px){}

@media screen and (min-width: 768px) and (max-width: 1024px){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){}

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

@media screen and (max-width: 767px) and (orientation: landscape){}

@media screen and (max-width: 767px) and (orientation: portrait){}
*/