/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    display: none;
    position: fixed;
    top: 10%;
    right: 25%;
    bottom: 10%;
    left: 25%;
    background: rgba(0, 174, 216, 0.9);
    color: white;
    z-index: 9999;
    opacity: 1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    text-align: justify;
    padding: 2%;
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    border-bottom-left-radius:16px;
    border-bottom-right-radius:16px;
    font-size: 1.1em;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 174, 216, 0.8) transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    display: inline;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

@media only screen and (max-width: 1024px){
    
    /* The actual popup (appears on top) */
    .popup .popuptext {
        display: none;
        position: fixed;
        top: 6%;
        right: 6%;
        bottom: 6%;
        left: 6%;
        background: rgba(0, 174, 216, 0.9);
        color: white;
        z-index: 9999;
        opacity: 1;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
        text-align: justify;
        padding: 2%;
        border-top-left-radius:16px;
        border-top-right-radius:16px;
        border-bottom-left-radius:16px;
        border-bottom-right-radius:16px;
        font-size: 0.95em;
    }

    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
        display: inline;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1366px){

    /* The actual popup (appears on top) */
    .popup .popuptext {
        display: none;
        position: fixed;
        top: 8%;
        right: 15%;
        bottom: 8%;
        left: 15%;
        background: rgba(0, 174, 216, 0.9);
        color: white;
        z-index: 9999;
        opacity: 1;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
        text-align: justify;
        padding: 2%;
        border-top-left-radius:16px;
        border-top-right-radius:16px;
        border-bottom-left-radius:16px;
        border-bottom-right-radius:16px;
        font-size: 1.0em;
    }

    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
        display: inline;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

}