#tt_popup_modal {
    position: fixed;
    left: 50%;
    right: 0;
    top: 50%;
    bottom:0;
    /*margin: 10%;*/
    display: none;
    overflow: visible;
    z-index: 99999999;
    max-width: 75vw;
    max-height: 45vw;
    margin-left: -37.5vw;
    margin-top: -22.25vw;

}
#tt_popup_modal:before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    background: rgba(0, 0, 0, .8);
}
#tt_popup_modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: 0 0 10px #000;
    position: relative;
    background-color: black;
}
#tt_close_button {
    border: white 1px solid;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAzUlEQVRIS8WV0Q3CMAxE7zZiFEaASYBJYARG6UZBlloppEl9jpS0Ur96uVfHvoSY8HACA/MhKaUbgIXk0lthSukC4EryuXn8VbIKvqsoDGqt321XL+hoXbUnUZCnbzbeW7jtt6I7nC7PwPtebXxtolpGKsA8pZyUhhGADDFhZvwA8IqMuVRJ1mQL6xvAneRHDawMySqxJNtrqZYCK0GG92T4dHlT5H13c6IaKLpzzi7lzyInwy6MvQDvsCwvrfE3o5rgqE4KY9S01E+B/ACFwq8atA8RhwAAAABJRU5ErkJggg==) no-repeat center;
    position: absolute;
    top: -50px;
    right: -50px;
    cursor: pointer;
    z-index: 9;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px)  {
    #tt_popup_modal {
        top: 17%;
        margin-left: -45vw;
        max-width: 90%;
        max-height: 95%;
        margin-bottom: 15px;
    }

    #tt_close_button {
        border: white 1px solid;
        border-radius: 50%;
        height: 45px;
        width: 45px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAzUlEQVRIS8WV0Q3CMAxE7zZiFEaASYBJYARG6UZBlloppEl9jpS0Ur96uVfHvoSY8HACA/MhKaUbgIXk0lthSukC4EryuXn8VbIKvqsoDGqt321XL+hoXbUnUZCnbzbeW7jtt6I7nC7PwPtebXxtolpGKsA8pZyUhhGADDFhZvwA8IqMuVRJ1mQL6xvAneRHDawMySqxJNtrqZYCK0GG92T4dHlT5H13c6IaKLpzzi7lzyInwy6MvQDvsCwvrfE3o5rgqE4KY9S01E+B/ACFwq8atA8RhwAAAABJRU5ErkJggg==) no-repeat center;
        position: absolute;
        top: -23px;
        right: -17px;
        cursor: pointer;
        z-index: 9;
    }
}

@media only screen
and (min-device-width : 360px)
and (max-device-width : 1024px)
and (orientation: landscape){
    #tt_popup_modal {
        top: 45%;
        margin-left: -45vw;
        max-width: 90%;
        max-height: 95%;
        margin-bottom: 15px;
    }

    #tt_close_button {
        border: white 1px solid;
        border-radius: 50%;
        height: 45px;
        width: 45px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAzUlEQVRIS8WV0Q3CMAxE7zZiFEaASYBJYARG6UZBlloppEl9jpS0Ur96uVfHvoSY8HACA/MhKaUbgIXk0lthSukC4EryuXn8VbIKvqsoDGqt321XL+hoXbUnUZCnbzbeW7jtt6I7nC7PwPtebXxtolpGKsA8pZyUhhGADDFhZvwA8IqMuVRJ1mQL6xvAneRHDawMySqxJNtrqZYCK0GG92T4dHlT5H13c6IaKLpzzi7lzyInwy6MvQDvsCwvrfE3o5rgqE4KY9S01E+B/ACFwq8atA8RhwAAAABJRU5ErkJggg==) no-repeat center;
        position: absolute;
        top: -22px;
        right: -23px;
        cursor: pointer;
        z-index: 9;
    }
}

@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px){
    #tt_close_button {
        border: white 1px solid;
        border-radius: 50%;
        height: 45px;
        width: 45px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAzUlEQVRIS8WV0Q3CMAxE7zZiFEaASYBJYARG6UZBlloppEl9jpS0Ur96uVfHvoSY8HACA/MhKaUbgIXk0lthSukC4EryuXn8VbIKvqsoDGqt321XL+hoXbUnUZCnbzbeW7jtt6I7nC7PwPtebXxtolpGKsA8pZyUhhGADDFhZvwA8IqMuVRJ1mQL6xvAneRHDawMySqxJNtrqZYCK0GG92T4dHlT5H13c6IaKLpzzi7lzyInwy6MvQDvsCwvrfE3o5rgqE4KY9S01E+B/ACFwq8atA8RhwAAAABJRU5ErkJggg==) no-repeat center;
        position: absolute;
        top: -25px;
        right: -21px;
        cursor: pointer;
        z-index: 9;
    }
}