/* 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;

    }

}