/* ========== iconite laterale ========== */

    .hideclass {
        opacity: 0;
        -moz-transition: all 1000ms linear;
        -webkit-transition: all 1000ms linear;
        -o-transition: all 1000ms linear;
        transition: all 1000ms linear;
        -moz-transform: translate3d(150px, 0px, 0px);
        -webkit-transform: translate3d(150px, 0px, 0px);
        -o-transform: translate(150px, 0px);
        -ms-transform: translate(150px, 0px);
        transform: translate3d(150px, 0px, 0px);
        z-index: -1;
    }

    @media all {
        .side-icons {
            position: fixed;
            z-index: 2;
            right: 0;
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            top: 45%;
            justify-items: flex-end;
            align-items: center;
            width: 100vw;
        }

        /*-----------asista-----------*/

        .asistadiv {
            left: 0;
            right: 0;
            z-index: 1;
            filter: alpha(opacity=100);
            height: 40px;
            background-color: #006600;
            color: whitesmoke;
            text-align: center;
            align-content: center;
            border-radius: 8px;
            position: absolute;
        }

        .asistadiv p {
            color: whitesmoke;

        }

        .showclass {
            opacity: 1;
            -moz-transform: translate3d(0px, 0px, 0px);
            -webkit-transform: translate3d(0px, 0px, 0px);
            -o-transform: translate(0px, 0px);
            -ms-transform: translate(0px, 0px);
            transform: translate3d(0px, 0px, 0px);
            z-index: 3
        }

        .asista-iconita {
            width: 0;
            background-color: #006600;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            padding: 2.5px 25px 2.5px 15px;
            border: 1px solid #006600;
            border-radius: 8px;
            display: block;
            position: relative;
        }

        .asista-iconita p {
            color: #ffffffce;
            align-items: center;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.4em;
            
        }

        .asista-iconita a {
            display: block;
            color: whitesmoke;
            text-decoration: none;
        }

        .asista-iconita p:hover {
            color: #0000009e;
            text-decoration: none;
        }
        .asista-iconita:hover{
            transform: scale(1.1);
        }

        /*-----------facebook-----------*/
        .facebook-iconita {
            background-color: transparent;
        }

        .facebook-iconita img {
            display: block;
            width: 2.5em;
            height: auto;
            border-radius: 8px;
        }
        .facebook-iconita:hover{
            transform: scale(1.1);
        }

        /*-----------search bar-----------*/

        #unhide {
            display: none;
        }

        #expand {
            color: whitesmoke;
            width: 0;
            background-color: #0046FF;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            padding: 10px 25px 10px 15px;
            border-radius: 8px;
            border: none;
        }

        #expand :hover {
            color: #0000009a;
        }

        #unhide {
            position: fixed;
            z-index: 1;
            top: 43.4%;
            right: 40px;
            background-color: whitesmoke;
        }

        #unhide div {
            margin: 0;
        }
        .bara-search:hover{
            background: #396bf6de;
            border-radius: 10px;
            transform: scale(1.1);

        }

    }

    /* ******************************* PC ***************************** */
    @media (min-width: 981px) {
        .asistadiv p {
            margin: 0;
            text-align: center;
            font-size: 1.8em;
        }
    }

    /* ******************************* TABLETA ***************************** */
    @media (min-width: 641px) and (max-width: 980px) {
        .asistadiv p {
            margin: 0;
            text-align: center;
            font-size: 15px;
        }
    }

    /* ******************************* MOBIL ***************************** */
    @media (max-width: 640px) {
        .asistadiv p {
            margin: 0;
            text-align: center;
            font-size: 10px;
        }
    }