.slideout {
    position: fixed;
    width: 21%;
    height: 5%;
    left: 100%;
    top: 30%;
    transition: left .3s ease-out;
    color: #ffffff;
    opacity: 80%;

}

    .slideout.active {
        left: 83%;
    }

.handle {
    position: absolute;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: solid;
    border-color: red;
    border-width: 20px;
    left: -63px;
    width: 65px;
    height: 100%;
    padding: 7px;
    cursor: pointer;
    background: #000000;
    color: #ffffff;
}


.body {
    position: absolute;
    background: #000000;
    padding: 7px;
    width: 400px;
    height: 100%;
    color: #ffffff;
    opacity: 80%;
  /*  border-right: solid;
    border-color: red;
    border-width: 180px*/
}


/*IPHONE 14*/

@media (max-width:500px) {
    .slideout {
        position: fixed;
        width: 10%;
        height: 5%;
        left: 100%;
        top: 30%;
        transition: left .3s ease-out;
        color: #ffffff;
    }

        .slideout.active {
            left: 30%;
        }

    .handle {
        position: absolute;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: solid;
        border-color: red;
        border-width: 15px;
        left: -60px;
        width: 60px;
        height: 100%;
        padding: 7px;
        cursor: pointer;
        color: #ffffff;
        background: #000000;
    }

    .body {
        position: absolute;
        padding: 7px;
        width: 300px;
        height: 100%;
        color: #ffffff;
        /* border-right: solid;
        border-color: red;
        border-width: 50px*/
    }
}





@media (max-width: 400px) {
    .slideout {
        position: fixed;
        width: 10%;
        height: 5%;
        left: 100%;
        top: 30%;
        transition: left .3s ease-out;
     
        color: #ffffff;
      
    }

        .slideout.active {
            left: 25%;
        }

    .handle {
        position: absolute;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: solid;
        border-color: red;
        border-width: 15px;

        left: -60px;
        width: 60px;
        height: 100%;
        padding: 7px;
        cursor: pointer;
        color: #ffffff;
        background: #000000;
    }

    .body {
        position: absolute;
        padding: 7px;
        width: 300px;
        height: 100%;
        color: #ffffff;
       /* border-right: solid;
        border-color: red;
        border-width: 50px*/
    }
}




/*.........................*/

.slideout1 {
    position: fixed;
    width: 22%;
    height: 5%;
    left: 100%;
    top: 35%;
    transition: left .3s ease-out;
    color: #ffffff;
    opacity: 80%;
}

    .slideout1.active {
        left: 83%;
    }

.handle1 {
    position: absolute;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: solid;
    border-color: red;
    border-width: 20px;
    left: -63px;
    width: 65px;
    height: 100%;
    padding: 7px;
    cursor: pointer;
    color: #ffffff;
    background: #000000;
}

.body1 {
    position: absolute;
    padding: 7px;
    width: 400px;
    height: 100%;
    color: #ffffff;
    opacity: 80%;
    background: #000000;
 /*   border-right: solid;
    border-color: red;
    border-width: 180px*/
}


/*IPHONE*/

@media (max-width: 500px) {
    .slideout1 {
        position: fixed;
        width: 10%;
        height: 5%;
        left: 100%;
        top: 35%;
        transition: left .3s ease-out;
        color: #ffffff;
    }

        .slideout1.active {
            left: 30%;
        }

    .handle1 {
        position: absolute;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: solid;
        border-color: red;
        border-width: 15px;
        left: -60px;
        width: 60px;
        height: 100%;
        padding: 7px;
        cursor: pointer;
        color: #ffffff;
        background: #000000;
    }

    .body1 {
        position: absolute;
        padding: 7px;
        width: 300px;
        height: 100%;
        color: #ffffff;
        background: #000000;
        /*   border-right: solid;
        border-color: red;
        border-width: 50px*/
    }
}




@media (max-width: 400px) {
    .slideout1 {
        position: fixed;
        width: 10%;
        height: 5%;
        left: 100%;
        top: 35%;
        transition: left .3s ease-out;
        color: #ffffff;
    }

        .slideout1.active {
            left: 25%;
        }

    .handle1 {
        position: absolute;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: solid;
        border-color: red;
        border-width: 15px;
        left: -60px;
        width: 60px;
        height: 100%;
        padding: 7px;
        cursor: pointer;
        color: #ffffff;
        background: #000000;
    }

    .body1 {
        position: absolute;
        padding: 7px;
        width: 300px;
        height: 100%;
        color: #ffffff;
        background: #000000;
     /*   border-right: solid;
        border-color: red;
        border-width: 50px*/
    }
}



/*..............*/

.slideout2 {
    position: fixed;
    width: 23%;
    height: 5%;
    left: 100%;
    top: 40%;
    transition: left .3s ease-out;
    color: #ffffff;
    opacity: 80%;
}

    .slideout2.active {
        left: 83%;
    }

.handle2 {
    position: absolute;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: solid;
    border-color: red;
    border-width: 20px;
    left: -63px;
    width: 65px;
    height: 100%;
    padding: 8px;
    cursor: pointer;
    color: #ffffff;
    background: #000000;
}

.body2 {
    position: absolute;
    background: #000000;
    padding: 7px;
     width: 400px;
    height: 100%;
    color: #ffffff;
    opacity: 80%;
   /* border-right: solid;
    border-color: red;
    border-width: 180px*/
}




/*IPHONE
*/

@media (max-width: 500px) {
    .slideout2 {
        position: fixed;
        width: 10%;
        height: 5%;
        left: 100%;
        top: 40%;
        transition: left .3s ease-out;
        color: #ffffff;
    }

        .slideout2.active {
            left: 30%;
        }

    .handle2 {
        position: absolute;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: solid;
        border-color: red;
        border-width: 15px;
        left: -60px;
        width: 60px;
        height: 100%;
        padding: 7px;
        cursor: pointer;
        color: #ffffff;
        background: #00000;
    }

    .body2 {
        position: absolute;
        padding: 7px;
        width: 300px;
        height: 100%;
        color: #ffffff;
        /* border-right: solid;
        border-color: red;
        border-width: 50px*/
    }
}




@media (max-width: 400px) {
    .slideout2 {
        position: fixed;
        width: 10%;
        height: 5%;
        left: 100%;
        top: 40%;
        transition: left .3s ease-out;
        color: #ffffff;
    }

        .slideout2.active {
            left: 25%;
        }

    .handle2 {
        position: absolute;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right: solid;
        border-color: red;
        border-width: 15px;
        left: -60px;
        width: 60px;
        height: 100%;
        padding: 7px;
        cursor: pointer;
        color: #ffffff;
        background: #00000;
    }

    .body2 {
        position: absolute;
        padding: 7px;
        width: 300px;
        height: 100%;
        color: #ffffff;
       /* border-right: solid;
        border-color: red;
        border-width: 50px*/
    }
}