﻿#main-center-block-s4launch {
    top: 15vh;
    float: none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    position: relative;
}


#bgM {
    border: 0 none;
    height: 486px;
    left: 50%;
    margin: auto auto auto -333px;
    padding: 0;
    position: absolute;
    top: 140px;
    width: 666px;
    z-index: 2999;
}


iframe#ifrm {
    border: 0 none;
    height: 430px;
    left: 50%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 184px;
    max-width: 614px;
    width: 100%;
    z-index: 2999;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transform: translateX(-50%);
}

#bgCrt {
    background-color: #dfeef6;
    height: 100vh;
    left: 0;
    margin: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}


#ftM {
    border: 0 none;
    height: 30px;
    left: 48.4%;
    margin: auto auto auto -285px;
    padding: 0;
    position: absolute;
    top: 620px;
    width: 614px;
    z-index: 2999;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

/* Only need this if ada is off */
/*#clB {*/
/*background-image: url("../mkdirect/Codal/savemoney/modal-close.png");*/
/*background-image: url('/MK30/assets/images/close.png');
    background-color: transparent;
    border:none;
    cursor: pointer;
    height: 26px;
    left: 50%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 172px;
    width: 24px;
    height: 24px;
    z-index: 2999;
    transform: translateX(-50%);
    margin-left: 307px;
}*/







@media only screen and (min-width:300px) and (max-width:555px) {
    body .framebox {
        height: 100vh;
        float: none;
        margin: 0;
        position: relative;
        overflow-y: scroll;
        background-color: #fff;
    }

    #NOTbody {
        height: 100vh;
    }

    .modal-content {
        width: 93% !important; /*Could be more or less, depending on screen size */
        padding: 5px !important;
    }

    #closeModal {
        top: 40px !important;
        right: 1px !important;
    }

    #bgCrt {
        width: 100%;
        float: none;
        margin: 0 auto;
        display: block;
    }

    .main-center-block {
        position: absolute;
        width: 94%;
        left: 3%;
        right: 3%;
    }

    iframe#ifrm {
        width: 100%;
        max-width: 560px;
        height: 532px;
        top: 25px; /*tom*/
        float: none;
        display: block;
        margin: 0 auto;
        /*3-13-19 TJC keep it as absolute position: relative;*/
        overflow-y: scroll;
        padding-bottom: 0px;
    }

   

    #bgM {
        max-width: 559px;
        width: 97%;
        left: 1vw;
        right: 1vw;
        top: 30px;
        float: none;
        margin: 0 auto;
        display: block;
        border: solid 2px #000;
        height: 100vh;
        background-image: none;
        background: #d9e5ed;
        /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#f3f7f9, #ecf2f6, #d1dee5);
        /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#f3f7f9, #ecf2f6, #d1dee5);
        /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#f3f7f9, #ecf2f6, #d1dee5);
        /* For Firefox 3.6 to 15 */
        background: linear-gradient(#f3f7f9, #ecf2f6, #d1dee5);
        /* Standard syntax */
        /*3-13-19 TJC improve mobile popup*/
        display: none;
    }

    #clB {
        /*3-13-19 TJC improve mobile popup*/
        position: absolute;
        top: 15px;
        margin: 0 auto;
        float: none;
        display: block;
        /*3-13-19 TJC improve mobile popup*/
        /*right: 0px;*/
        left: unset;
        /*2-16-21 ARS place cross at the corner of popup - improve mobile experience*/
        right: -7px;
    }

    #ftM {
        width: 100%;
        max-width: 560px;
        left: 15px;
        /*3-13-19 tjc stay absoute   position: relative;*/
        margin: 0 auto;
        top: -282px; /*override*/
        /*3-13-19 tjc*/
        top: 572px;
    }
}

@media only screen and (max-height: 400px) {
    #ftM {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        top: 440px;
        position: absolute !important;
    }

    iframe#ifrm {
        min-height: 400px;
        border: 0 none;
        left: 50%;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        top: 5px;
        max-width: 614px;
        width: 100%;
        z-index: 2999;
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        transform: translateX(-50%);
    }

    .mkAlertArea {
        height: 0 !important;
        min-height: 0 !important;
    }
}


