/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.cta-button {
    display: none;
}

@media only screen and (max-width: 768px) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .cta-button {
        background: rgb(245,155,67);
        position: fixed;
        top: 50%;
        width: 10em;
        right: -7em; /* Käytämme tässä calc()-funktiota ja vh-yksikköä. Oletamme, että buttonin alkuperäinen korkeus on 100% ja leveys on 100px. */
        transform: rotate(90deg) translateX(-50%);
        /* Lisää muut tyylit (kuten left tai right, taustaväri, jne.) */
        border-radius: 0 0 1em 1em;
        z-index: 1000;
        color: white;
        padding: 0.5em;
        font-weight: bold;
        text-align: center;
        padding-bottom: 0.3em;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        cursor: pointer; /* Tämä asettaa kursorin osoitin-tilaan, mikä estää tekstikursorin näkymisen */
        user-select: none; /* Estää tekstin valitsemisen */
        transition: right 0.5s ease;
    }

    .cta-button-visible {
	display: block;
        right: -4em; /* Muuta tätä arvoa siirtääksesi nappia halutulle etäisyydelle oikeasta reunasta, kun se on näkyvissä */
    }

    .cta-button:active,
    .cta-button-pressed {
        background-color: #57a5c4;
    }
}