/* iPad Pro 6th*/
@media only screen and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 1)
  /*and (min-device-width: 768px) and (max-device-width: 2732px) and (orientation: portrait) ,
  only screen and (min-device-width: 768px) and (max-device-width: 1640px) */
 /* 1366 *//* and (-webkit-min-device-pixel-ratio: 1.5) */
 {
    #menulogin {
        margin-top: 520px;background-color: white;
     }
     div.fontmobile,a.fontmobile,input.fontmobile,p.fontmobile,span.fontmobile,label.fontmobile,button.fontmobile,select.fontmobile,.fontmobile,
     span.material-icons,button.accordion-button,p.fontjudullistvid,p.fontjudullistvid1,a#judul_pages
     {
         font-size: 20px;
         
     }
     
     #brandimgs{
        height:50px ;
        width: auto;/* 80px */
    }
    #cardmenu{
        padding: 1.5em .5em .5em;
        border-radius: 1em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
       
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        height: 25vh;
        width: 30vw;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #cardmenu1{
        padding: 1.5em .5em .5em;
        border-radius: 1em;
        text-align: center;
        
        border: none;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        height: 25vh;
        width: 30vw;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #cardtesti{
        padding: .5em .5em 0em .5em;
 
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        position: relative;
        
        margin-right: 10px;
        
    
        border-radius:1rem;
        border-style: solid; 
        border-color:red;
        width:600px;
        height:300px;
        display: inline-block;
        white-space: normal;
        
        
    }
    #imgtesti{
        width:100%;
        height:100%;
    }
    #paragtestix{
        position: absolute; 
        bottom: 0;
        margin-right:10px;
        text-align:justify;
        font-size:26px;
    }
    #marquess{
        font-size:26px;
        color:white;
    }
    #red_klik_button_home{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: red;
        border:2px solid red;
        border-radius:1rem;
        margin-right:7px;
        margin-top: 9px;
        margin-bottom: 9px;
        font-size:20px;
        color:white;
        box-shadow: 0px 2px 2px #ccc;
    }

    /*  */

    /* button white klik */
    #white_klik_button_home{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: white;
        border:2px solid white;
        border-radius:1rem;
        margin-right:7px;
        margin-top: 9px;
        margin-bottom: 9px;
        font-size:20px;
        color:black;
        box-shadow: 0px 2px 2px #ccc;

    }
    #red_klik_button{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: red;
        border:2px solid red;
        border-radius:1rem;
        font-size: x-large;
        margin-top: 9px;
        margin-bottom: 9px;
        white-space: nowrap;
        color:white;
        box-shadow: 0px 2px 2px #ccc;
        font-weight: 700;
        font-size:20px;
    }

    /*  */

    /* button white klik */
    #white_klik_button{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: white;
        border:2px solid white;
        border-radius:1rem;
        font-size: x-large;
        margin-top: 9px;
        margin-bottom: 9px;
        white-space: nowrap;
        color:black;
        box-shadow: 0px 2px 2px #ccc;
        font-weight: 700;
        font-size:20px;
    }
    #cardmenuhasiltos{
        padding: 1.5em 1.5em 1.5em 1.5em;
        border-radius: 1em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
       
        
        margin-bottom: 15px;
        height: auto;
        width: auto;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #imglistbelanja{
        width:50%;
        height:auto;
        cursor: pointer;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto
    }
    #cardnews,#cardnews1{
        padding: 1.5em .5em .5em .5em;
        border-radius: 1em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        position: relative;
       
        margin-bottom: 2em;
        height: 35vh;
        width: 100%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    #bgakn{
        background-image:url('https://ressmartcpns.smartgeniusid.com/0img/2background/footerimg.webp') ;background-repeat: no-repeat;
        background-size: cover;
        background-position: left;
        height: 40vh;
        position: relative;
    }
    /*floating button*/
    span.float{
        position:fixed;
        width:60px;
        height:60px;
        bottom:60px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
    }

    i.my-float{
        margin-top:90px;
    }

    a.float1{
        position:fixed;
        width:60px;
        height:60px;
        bottom:258px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
        display: none;
    }

    i.my-float1{
        margin-top:90px;
    }

    a.float2{
        position:fixed;
        width:60px;
        height:60px;
        bottom:190px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
        display: none;
    }

    i.my-float2{
        margin-top:90px;
    }

    a.float3{
        position:fixed;
        width:60px;
        height:60px;
        bottom:125px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
        display: none;
    }

    i.my-float3{
        margin-top:90px;
    }
}
/* iPad Pro 4th*/
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)
  {
    #menulogin {
        margin-top: 520px;background-color: white;
     }
     div.fontmobile,a.fontmobile,input.fontmobile,p.fontmobile,span.fontmobile,label.fontmobile,button.fontmobile,select.fontmobile,.fontmobile,
     span.material-icons,button.accordion-button,p.fontjudullistvid,p.fontjudullistvid1,a#judul_pages,
     div#chathapuspg a.fontmobile,div#chathapuspg span.fontmobile,div#chathapuspg label.fontmobile,a.emoji
     {
         font-size: 20px;
         
     }
     
     #brandimgs{
        height:50px ;
        width: auto;/* 80px */
    }
    #cardmenu{
        padding: 1.5em .5em .5em;
        border-radius: 1em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
       
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        height: 25vh;
        width: 30vw;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #cardmenu1{
        padding: 1.5em .5em .5em;
        border-radius: 1em;
        text-align: center;
        
        border: none;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        height: 25vh;
        width: 30vw;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #cardtesti{
        padding: .5em .5em 0em .5em;
 
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        position: relative;
        
        margin-right: 10px;
        
    
        border-radius:1rem;
        border-style: solid; 
        border-color:red;
        width:600px;
        height:300px;
        display: inline-block;
        white-space: normal;
        
        
    }
    #imgtesti{
        width:100%;
        height:100%;
    }
    #paragtestix{
        position: absolute; 
        bottom: 0;
        margin-right:10px;
        text-align:justify;
        font-size:26px;
    }
    #marquess{
        font-size:26px;
        color:white;
    }
    #red_klik_button_home{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: red;
        border:2px solid red;
        border-radius:1rem;
        margin-right:7px;
        margin-top: 9px;
        margin-bottom: 9px;
        font-size:20px;
        color:white;
        box-shadow: 0px 2px 2px #ccc;
    }

    /*  */

    /* button white klik */
    #white_klik_button_home{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: white;
        border:2px solid white;
        border-radius:1rem;
        margin-right:7px;
        margin-top: 9px;
        margin-bottom: 9px;
        font-size:20px;
        color:black;
        box-shadow: 0px 2px 2px #ccc;

    }
    #red_klik_button{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: red;
        border:2px solid red;
        border-radius:1rem;
        font-size: x-large;
        margin-top: 9px;
        margin-bottom: 9px;
        white-space: nowrap;
        color:white;
        box-shadow: 0px 2px 2px #ccc;
        font-weight: 700;
        font-size:20px;
    }

    /*  */

    /* button white klik */
    #white_klik_button{
        padding: 0.5em 0.5em 0.5em 0.5em;
        background-color: white;
        border:2px solid white;
        border-radius:1rem;
        font-size: x-large;
        margin-top: 9px;
        margin-bottom: 9px;
        white-space: nowrap;
        color:black;
        box-shadow: 0px 2px 2px #ccc;
        font-weight: 700;
        font-size:20px;
    }
    #cardmenuhasiltos{
        padding: 1.5em 1.5em 1.5em 1.5em;
        border-radius: 1em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
       
        
        margin-bottom: 15px;
        height: auto;
        width: auto;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #imglistbelanja{
        width:50%;
        height:auto;
        cursor: pointer;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto
    }
    #cardnews,#cardnews1{
        padding: 1.5em .5em .5em .5em;
        border-radius: 1em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        position: relative;
       
        margin-bottom: 2em;
        height: 35vh;
        width: 100%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    #bgakn{
        background-image:url('https://ressmartcpns.smartgeniusid.com/0img/2background/footerimg.webp') ;background-repeat: no-repeat;
        background-size: cover;
        background-position: left;
        height: 40vh;
        position: relative;
    }
    /*floating button*/
    span.float{
        position:fixed;
        width:60px;
        height:60px;
        bottom:60px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
    }

    i.my-float{
        margin-top:90px;
    }

    a.float1{
        position:fixed;
        width:60px;
        height:60px;
        bottom:258px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
        display: none;
    }

    i.my-float1{
        margin-top:90px;
    }

    a.float2{
        position:fixed;
        width:60px;
        height:60px;
        bottom:190px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
        display: none;
    }

    i.my-float2{
        margin-top:90px;
    }

    a.float3{
        position:fixed;
        width:60px;
        height:60px;
        bottom:125px;
        right:9px;
        background-color: red;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        margin-left: 10px;
        padding-top: 18px;
        display: none;
    }

    i.my-float3{
        margin-top:90px;
    }
}