.intro-modal {
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(1.1);
    //transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 10000;
}

/*
##Device = Tablets, Mobiles, Ipads, Laptops, Desktops
##Screen = B/w 768px to higher resolution desktops
*/
@media (min-width: 768px) {
    .intro-modal-content { padding: 20px 25px; width: 570px; height: 500px; }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    .intro-modal-content { padding: 20px 25px; width: 430px; height: 306px; }
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
    .intro-modal-content { padding: 20px 25px; width: 300px; height: 214px; }
}

/*
##Device = ?
##Screen = B/w to 319px
*/
@media (max-width: 319px) {
    .intro-modal-content { padding: 20px 25px; width: 200px; height: 122px; }
}

.intro-modal-content {
    background-image: url("popup-2025-2.jpg");
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.5rem;
    -webkit-box-shadow: 0px 0px 20px 1px #555555;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0px 0px 20px 1px #555555;  /* Firefox 3.5 - 3.6 */
    box-shadow:         0px 0px 20px 1px #555555;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.intro-close-button {
    background-image: url("close.png");
    background-size: 16px 18px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    margin: 10px 10px;
    width: 16px;
    height: 18px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.intro-close-button:hover {
    transform: scale(1.1)
}

.show-intro-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}