body.popup-show {    

}

* {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
/* popup */
.popup {   
    display:none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%; 
    z-index:10000;
    text-align: center;
}
.popup:after {    
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
/* tło popupa */
.popup .bg {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;

    background: #000; /* ie8 i jego rodzina */
    filter:alpha(opacity=70);   

    background:rgba(0,0,0,0.7); /* reszta przeglądarek */
    opacity:1;    
    box-shadow:inset 0 0 100px rgba(0,0,0,1);

    transition:1s;
    -moz-transition:1s;
    -webkit-transition:1s;
}
.popup .container-wraper {   
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    text-align: center;
    overflow-x:auto;
    overflow-y:scroll;
}
.popup .container-wraper:after {    
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
/* okienko popupa */
.popup .container { 
    position: relative;
                
    /* centrowanie popupa */    
    display: inline-block;
    vertical-align: middle;
    max-width:600px;
    width:80%;
    min-height: 20%;      

    padding:20px 30px 30px 30px;  
    font-family:'Open Sans', sans-serif;
    color:#333;
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
    border-radius:6px;
    box-shadow:inset 0 1px 0 #fff, inset 0 0 30px #ddd, 0 0 20px rgba(0,0,0,0.5), 0 1px 5px rgba(0,0,0,0.5);
    text-align:center;
    transition:1s 1s;
    -moz-transition:1s 1s;
    -webkit-transition:1s 1s;    
}
.popup .container h3 {
    font:300 1.8em 'Open Sans', sans-serif;
    text-transform: uppercase;    
    margin:0;
    padding:0 0 10px 0;
    color:#666;
    border-bottom:1px solid #ddd;
    box-shadow:0 1px 0 #fff;
}
.popup .container .content {
    padding:20px;
    color:#666;
}

/* przyciski w popupie */
.button {   
    display: inline-block;
    background: #f1e767;
    background: -moz-linear-gradient(top,  #f1e767 0%, #feb645 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645));
    background: -webkit-linear-gradient(top,  #f1e767 0%,#feb645 100%);
    background: -o-linear-gradient(top,  #f1e767 0%,#feb645 100%);
    background: -ms-linear-gradient(top,  #f1e767 0%,#feb645 100%);
    background: linear-gradient(to bottom,  #f1e767 0%,#feb645 100%);
    border-radius:3px;  
    min-width:150px;
    padding:1em 2em;
    font:bold 1em 'Open Sans', sans-serif;
    text-transform: uppercase;
    color:#222;
    text-shadow:1px 1px 1px rgba(255,255,255,0.6);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin:0 10px;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.3), 0 2px 2px rgba(0,0,0,.1);
}
.button:focus, .button:active {
    box-shadow:inset 0 3px 3px rgba(0,0,0,0.5);
}

.button.cancel {
    background: #dddddd;
    background: -moz-linear-gradient(top,  #dddddd 0%, #aaaaaa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#aaaaaa));
    background: -webkit-linear-gradient(top,  #dddddd 0%,#aaaaaa 100%);
    background: -o-linear-gradient(top,  #dddddd 0%,#aaaaaa 100%);
    background: -ms-linear-gradient(top,  #dddddd 0%,#aaaaaa 100%);
    background: linear-gradient(to bottom,  #dddddd 0%,#aaaaaa 100%);
}
/* ie8 fix */
.lt-ie9 .popup .container {
    border:2px solid #111;
}
.lt-ie9 .button {
    border:1px solid #F2D16A;
}
.lt-ie9 .button.cancel {
    border:1px solid #CBCBCB;    
}

/* guzik otwierajacy popup */
#popupTest {
    background:#e00909;
    padding:10px;
    min-width:100px;
    font:bold 1em sans-serif;
    color:#fff;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border-radius:3px;
    box-shadow:0 2px 1px rgba(0,0,0,0.3);
    text-transform: uppercase;
}