/*
.wobble-hor-bottom{-webkit-animation:wobble-hor-bottom .6s both;animation:wobble-hor-bottom .6s both}
@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}
*/

*{
    /*    background-color: rgba(0,0,0,0.05);*/
}

@keyframes shake-horizontal{
    0%,100%{
        transform:translateX(0)
    }
    10%,30%,50%,70%{
        transform:translateX(-10px)
    }
    20%,40%,60%{
        transform:translateX(10px)
    }
    80%{
        transform:translateX(8px)
    }
    90%{
        transform:translateX(-8px)
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media (max-width: 845px) {
    .onTablet{
        display:inline-block !important;
    }
    .page{
        max-width: 100%;
    }
    #mmenuBox{
        position: fixed;
        background-color: var(--blue);
        border-radius: 18px;
        
        width:calc(100% - 80px);
        
        height: calc(100vh - 80px);
        height:400px;
        top:100px;
        left:40px;
        display: flex;
        display: none;
        align-items: flex-start;
        justify-content: flex-start;
        padding:20px;
        
        flex-direction: column;
        
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;  
   
        
    }
    #mmenuBox a{
        font-size: 18px;
        text-decoration-thickness: 1px;
        color:#fff;      
        
        width:100%;
        text-align: center;
        padding:15px;
        
        display: flex;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;        
        
    }
   
    
    
    
    
    
    /*horni lista s menu---------------------------------------------------------------------------------------*/
    #headerBox {
        display:flex;
        align-items: center;
        justify-content: space-between;
    }
    #headerBox #mMenu{
        display: block;
        width:60px;
        height:60px;
        float:right;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url('menu.svg');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 34px;
    }
    #headerBox #mMenu.close{
        background-image: url('close.svg');
    }
    #headerBox #logo{
        width:360px;
    }
    #headerBox #menu{
        display: none;
    }
    #headerBox #btnArea .btn{
        display: none;
    }

    /*COVER BOX*/
    #cover {
        flex-direction:column-reverse;
        padding: 0px;
        margin-top:-60px;
        padding-bottom: 30px;
    }
    #cover .half{
        width:100%;
        margin:0px;
        padding: 0px;
        text-align: center;
    }
    #cover a{
        display: inline;
        margin-left:30px;
        margin-right:30px;
        float: unset;
    }
    #cover a:hover{
        font-weight: 300;
    }
    #cover p{
        margin-bottom: 30px;
    }
    /*ProcAMC-------- --------------------------------------------------------------------------------------------*/
    #procAMC{
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        padding:0px;
    }
    #procAMC .card{
        padding-bottom:20px;
        flex: 0 0 calc(50% - 20px);
        margin: 10px;
    }
    #procAMC .card p,
    #procAMC .card h2
    {
        text-align: center;
    }

    /*Uzitecne fce-------- --------------------------------------------------------------------------------------------*/
    #fceAMC{
        border-radius: 0px;
        padding-left: 0px;
        padding-right: 0px;
        background-color: #fff;
        height:900px;
        box-shadow: none !important;
        margin-top: -50px;
    }
    #fceAMC #amc{
        background-position: calc(50% + 28px) 30px;
        margin-left: -20px;
        width:calc(100% + 40px);
        background-size: 250px;
        select-user:none;
    }
    #fceAMC .vlastnost,
    #fceAMC #popisy_left,
    #fceAMC #popisy_right
    {
        display: none;
    }
    #fceAMC h3, #fceAMC h4 {
        text-align: center;

    }
    #fceAMC .swipeinfo{
        width:100%;
        text-align: center;
        margin-top: -600px;
        display: flex;
        justify-items: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        select-user:none;
    }
    #fceAMC .swipeinfo div{
        background-color: rgba(0,0,0,0.7);
        background-color: #fff;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        /*border:2px solid var(--blue);*/
        color:var(--blue);
        border-radius: 30px;
        padding:10px 20px;
        display: flex;
        justify-items: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        select-user:none;
    }
    #fceAMC .swipeText{
        display:flex;
        /*border:1px solid red;*/
        margin-top: 110px;
        flex-direction: column;
        justify-items: center;
        justify-content: flex-start;
        align-items: center;
        align-content: flex-start;
        height:110px;
    }
    #fceAMC .swipeText *{
        text-align:center;
    }

    #fceAMC .swipeinfo div img{
    }
    #fceAMC .swipeinfo div img:nth-child(2){
        transform: scaleX(-1);
    }
    .shake{
        animation: shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both, fade-out 1s ease-in-out 1s forwards;
    }

    #fceAMC #prepinace{
        margin-top:20px;
        margin-bottom: 100px;
    }

    /* ---------------------------------------------------------------------------------------------- */
    #bckStin_podfce{
        background:none;
    }
    /* blok text - obraek napravo----------------------------------------------------------------------------*/
    #textIMGright{
        padding-top: 0px;
    }
    #fceAMC #textIMGright .img img{
        margin-left: -50px;
    }
    /*-------------------------------------------------------------------------------------------------------*/
    .page.opetBila{
        margin-top: 0px;
        padding-top: 0px;
        width:100%;
        background-color: #fff;
        background-image: url('sunmi-logo.svg');
        background-repeat: no-repeat;
        background-position: 50% 35px;
    }
    .page.inBila{
        padding:0px;
    }

    .zaskoleni .nomob {
        display: none !important;
    }
    .zaskoleni {
        width:100%;
        display:block;
    }
    .zaskoleni .half {
        text-align: center;
        margin:0px !important;
        width: 100% !important;
    }

    /* - --------------------------------hardware------------------------------------------------------*/
    #hardware{
        padding-top:0px;
        padding-bottom:65px;
        margin-top: -80px;
        
    }

    #hardware .hwBoxes .hwbox p{
        height: auto;
        text-align: center;
        padding-bottom: 20px;
    }


    #hardware .hwBoxes .hwbox a{
        font-size:17px;
        margin-bottom: 20px;
    }
    #hardware .hwBoxes .hwbox .icon{
        margin-top: 20px;
    }
    #hardware table td{
        width:33%;
    }
    #hardware table td:nth-child(1){
        width:33%;
    }





    #hardware h2, #hardware h3{
        text-align: center;
        float:left;
    }
    #hardware .hwBoxes{
        flex-direction: column;
    }
    #hardware .hwBoxes div.hwbox {
        width:100% !important;
        margin:0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
        padding-left: 0px;
    }

    
    #hardware .nomob{
        display:none;
    }
    #hardware .mob{
        display:table-cell;
        text-align: center;
        background-color: #fff;
    }
    #hardware table tr:nth-child(odd) td{
        text-align: center;
        padding-left:10px;
        padding-right:10px;
    }
    #hardware table tr:nth-child(odd){
        background-color: #f7f9fc;
    }
    #hardware table tr:nth-child(odd) td:nth-child(even){
        border-right: 3px solid #fff;
    }
    #hardware table tr:nth-child(odd) td:nth-child(odd){
        border-left: 3px solid #fff;
    }
    
    #hardware table tr:nth-child(1){
        background-color: #fff;
    }
    
    
      #hardware .hwBoxes{
        flex-direction: column;
        float:left;
        width:100%;        
    }
    #hardware .hwBoxes div.hwbox {
        width: 100% !important;
        margin:0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
    }
    #hardware .hwBoxes .first {
        padding-top: 0px !important;
    }


    /* - --------------------------------prislusenstvi------------------------------------------------------*/
    #doplnky{
        padding-top:25px;
        padding-bottom:25px;
    }
    #doplnky h2,h3{
        text-align: center;
    }
    #doplnky .dopBoxes {
        display:flex;
        margin-top: 30px;
        gap: 20px;
        justify-content: space-between;
        align-items: flex-start;
        
        flex-direction: column;        
    }
    #doplnky .dopBoxes .dopbox{
        width:100%;
    }
    #doplnky .dopBoxes .dopbox:nth-child(4){
        display: none;
    }
    /*-----------------------------ke stazeni---------------------------*/
    #download {
        display: flex;
        flex-direction: column;
        align-items:  center;
        
        padding-top:25px;
        padding-bottom:65px;
    }
    #download h2{
        font-size:44px;
        color:var(--blue);
        font-weight: 200;
        margin-bottom: 30px;
        text-align: center;
    }
    #download h2 b{
        font-weight: 700;        
    }
    #download h3{
        color:var(--blue);
        font-weight: 300;
        font-size: 22px;
        height:80px;
        margin-top:25px;
        text-align: center;
    }
    #download .verze{
        display: flex;
        align-items: center;
        float: left;
        padding-right: 20px;
        line-height: 1.3;
    }
    #download .down{
        width:47px;
        float:left;
    }
    #download p{
        clear:left;        
        text-align: center;
    }
    #download .disclamer{
        padding-top: 40px;
        font-style: italic;
    }
    #download .disclamer2{
        padding-top: 42px;
        font-style: italic;
    }
    /*----------------------paticka---------------------------*/
    #footer{
        background-color: var(--blue);
        width:100%;
        
    }
    #footer #footerin{
        color:#fff;
        width: 1196px;
        margin:auto;
        padding-top: 65px;
        padding-bottom:0px;
        max-width: 100%;        
        flex-wrap: wrap; 
         
    }
    #footer #footerin .sloupec{
        flex: 0 0 50%; 
        text-align: center !important;
        margin-bottom: 30px;
    }
    #footer #footerin .nomob{
        display: none;
    }

    
 

}














@media (max-width: 600px) {



    #procAMC{
        padding:0px;
    }
    #procAMC .card{
        flex: 0 0 100%;
        margin: 0px;
        margin-bottom: 20px;
    }
    #procAMC .card p,
    #procAMC .card h2
    {
        text-align: center;
    }
    #procAMC .card p{
    }
    #procAMC .card h2{
        margin: 0px;
        height: auto;
        min-height: 0px;
        padding-bottom: 20px;
    }
    #procAMC .card h2 br {
        display: none;
    }
    .page{
        padding-left: 20px;
        padding-right: 20px;
    }
    #cover a{
        padding:20px 0px 20px 40px;
        background-size: 24px;
    }
    #fceAMC #prepinace .prepinac{
        width:20px;
        height:20px;
        border-radius: 100%;
        border:5px solid #e9e9e8;
        cursor: pointer;
        margin:5px;
    }
    #fceAMC #prepinace .prepinac.act{
        border:7px solid var(--blue);
    }



    #hardware h2, #hardware h3{

    }
    #hardware h3
    {
        margin-top: 0px;
        margin-bottom: 30px;
    }
    #hardware .hwBoxes{
        flex-direction: column;
        float:left;
        width:100%;        
    }
    #hardware .hwBoxes div.hwbox {
        width: 100% !important;
        margin:0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
    }
    #hardware .hwBoxes .first {
        padding-top: 0px !important;
    }




}





@media (max-width: 400px) {
    .page{
        padding-left: 10px;
        padding-right: 10px;
    }
    #cover a{
        margin:0px;
        margin-left:5px;
        margin-right:5px;
        padding:20px 0px 20px 40px;
        background-size: 24px;
    }

    #fceAMC #amc{
        margin-left: -10px;
        width:calc(100% + 20px);
    }
    #download > .verze:first-of-type{
        margin-top: 30px;
    }

}