@charset "utf-8";

/*============================================================================
  POPUPS  (mobile version follows)
============================================================================*/

.autopop{}/*auto popup when click this css*/
.close-this{
    position: absolute;
    right: 15px;
    top: 15px;
}

/* --------------------- color overlays --------start---------------- */
#overlay_white{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index:5000;
    -moz-opacity: 0.8; opacity:.8; filter: alpha(opacity=80);
}
#overlay_blue{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #0051fb;
    z-index:5000;
    -moz-opacity: 0.8; opacity:.8; filter: alpha(opacity=80);
}
#overlay_red{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index:5000;
    -moz-opacity: 0.8; opacity:.8; filter: alpha(opacity=80);
}
#overlay_green{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #3ec300;
    z-index:5000;
    -moz-opacity: 0.8; opacity:.8; filter: alpha(opacity=80);
}
#overlay_yellow{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #fff318;
    z-index:5000;
    -moz-opacity: 0.8; opacity:.8; filter: alpha(opacity=80);
}
#overlay_black{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:5000;
    -moz-opacity: 0.8; opacity:.8; filter: alpha(opacity=80);
}


/* --------------------- popups boxes --------start---------------- */
.popup-box{
    color: #333;
    text-align: center;
    display: none;
    z-index: 5010;
    padding: 30px;
    width: 800px;
    min-height: 100px;
    max-height: 600px;
    box-sizing: border-box;
    overflow-y: scroll;
    position:fixed;
    top: 50px;
    left: 50%;
    margin-left: -430px; /*set to a negative number 1/2 of your width*/
    background-color: #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 20px 2px rgba(0,112,164, 0.5);
    -webkit-box-shadow: 0px 0px 20px 2px rgba(0,112,164, 0.5);
    box-shadow: 0px 0px 20px 2px rgba(0,112,164, 0.5);
}
.popup-box h2{
    margin: 0 0 30px 0;
    font-size: 20px;
}
.ppb-continue{
    position: absolute;
    bottom: 15px;
    left: 5px;
    width: 100px;
    display: block;
    text-align: center;
    font-style: italic;
    font-size: 13px;
    color: red;
}


/* --------------------- 0px to 849 px horizontal --------start---------------- */
/* retain ALL RULES from the previous condition + these: */
/* IMPORTANT: keep ALL rules & in THAT order for logical + practical reasons */
/*@media only screen and (min-width: 500px) and (max-width: 780px)*/
/*,only screen and (min-device-width: 500px) and (max-device-width: 780px){*/
@media screen and (max-width: 849px) {
    .close-this{}

    /* --------------------- color overlays --------start---------------- */
    #overlay_white{}
    #overlay_blue{}
    #overlay_red{}
    #overlay_green{}
    #overlay_yellow{}
    #overlay_black{}

    /* --------------------- popups boxes --------start---------------- */
    .popup-box{
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        min-height: inherit;
        max-height: inherit;
        padding: 20px;
        margin-left: 0; /*set to a negative number 1/2 of your width*/
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        -khtml-border-radius: 0;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .popup-box h2{}
    .ppb-continue{
        left: auto;
        right: 5px;
    }
}