/*
    Implementation Samples for NetPay Payment Gateway demonstrate that how you can
    implement NetPay Payment Gateway into your application. 
    Copyright (C) 2015,  NetPay

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>. 
*/
:root, body{
    padding: 0;
    margin: 0;    
    height: 101%;    
}
body{
    padding: 74px 0 34px;        
    background: #010125 url(../img/bg.jpg) center 50px no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;       
}
.preloader{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0,0,0,.9);
    z-index: 999;    
}
.container{
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(255,255,255,.7);
}
.content{
    min-height: 500px;
    padding-bottom: 15px;
    -webkit-box-shadow: 2px 2px 2px 3px rgba(0,0,0,.2);
    -moz-box-shadow: 2px 2px 2px 3px rgba(0,0,0,.2);
    -ms-box-shadow: 2px 2px 2px 3px rgba(0,0,0,.2);
    box-shadow: 2px 2px 2px 3px rgba(0,0,0,.2);
}
h2{
    margin: 0 0 15px;
    font-size: 20px;
}
.text{
    background: rgba(255,255,255,.7);
    border: 1px solid #fff;
    padding: 15px;
    -webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,.2);
    -moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,.2);
    -ms-box-shadow: 2px 2px 1px 3px rgba(0,0,0,.2);
    box-shadow: 2px 2px 1px 3px rgba(0,0,0,.2);
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.text:hover{
    background: rgba(255,255,255,.95);
}
.text h2{
    padding: 10px 15px;
    border-bottom: 3px solid #9b3f92;
    margin: -15px -15px 15px;    
    color: #9b3f92;    
}
.text:first-child{
    margin: 15px 0 15px;
}
ul.rom-style{
    list-style: none;
    padding: 0 0 0 15px;
}
.fixed-top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,.7);
    -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,.7);
    -ms-box-shadow: 1px 1px 5px 1px rgba(0,0,0,.7);
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,.7);
    text-shadow: -1px 0 0 rgba(0,0,0,.2);
}
.fixed-top h1{
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
    line-height: 50px;
    color: #58408e;
}
.header-logo{
    max-height: 32px;
    float: right;
    margin: 9px 0;
}
.btn-set .btn.pull-right{
    margin-left: 15px;
}
.btn-set-top{
    padding: 15px;
    background: rgba(0,0,0,.2);
    border-bottom: 3px solid #9b3f92;
}
.btn{
    position: relative;
    border-radius: 0;
    overflow: hidden;
    padding-left: 25px;
    padding-right: 25px;    
    -webkit-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.2);
    -ms-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.2);
    box-shadow: 1px 1px 1px 2px rgba(0,0,0,.2);
}
.btn:hover{
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
    -ms-box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
    box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
    -webkit-transform: translate(2px, 2px);  
    -moz-transform: translate(2px, 2px);  
    -ms-transform: translate(2px, 2px);  
    transform: translate(2px, 2px);  
}
.btn:after{
    content: '';
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;   
    top: -4px;    
    /* older browsers */
    left: 100%;
    /* modern browsers */
    left: -webkit-calc(100% - 6px);
    left: calc(100% - 6px);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);    
    z-index: 1;
    background: #fff;    
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -ms-transition: all .15s linear;
    transition: all .15s linear;
}
.btn > span{
    position: relative;
    z-index: 2;
}
.btn.btn-default{
    background: rgba(0,0,0,.4);
    border: 1px solid #fff;
    color: #fff;    
}
.btn.btn-default:hover{    
    border: 1px solid #9b3f92;    
}
.btn.btn-default:hover:after{
    background: #9b3f92;        
    left: -34px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
.btn.btn-default:active{
    background: #000;
}
.grid-row{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: block;
    
}
.grid-row > .grid-category{
    width: 16.666666%;
    height: 0;
    padding-top: 16.666666%;    
    position: relative;
    float: left;
}
.grid-category:hover{
    z-index: 2;
    -webkit-transform: translateZ(10px);
}
.grid-category .grid-box{  
    will-change: transform;
    position: absolute;
    /*older browser */
    width: 100%;
    /*modern browser */
    width: -webkit-calc(100% - 24px);
    width: calc(100% - 24px);
    /*older browser */
    height: 100%;    
    /*modern browser */
    height: -webkit-calc(100% - 24px);    
    height: calc(100% - 24px);    
    top: 12px;
    left: 12px;
    text-align: center;
    background: #c20c66;
    border: 1px solid #a20c46;    
    color: #fff;
    padding: 20px;    
    -webkit-transition: transform .2s linear;  
    -moz-transition: transform .2s linear;  
    -ms-transition: transform .2s linear;  
    transition: transform .2s linear;  
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    outline: 1px solid transparent;
    cursor: pointer; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    overflow: hidden;
}
.grid-category .grid-box:after{
    content: '';    
    position: absolute;
    display: block;
    width: 101%;
    height: 101%;
    top: -7%;    
    left: 34%;
    -webkit-transform: rotate(45deg);    
    -moz-transform: rotate(45deg);    
    -ms-transform: rotate(45deg);    
    transform: rotate(45deg);    
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
}
.grid-row .grid-box:last-child,
.open .grid-row .active .grid-box,
.open .grid-row .grid-category:not( :hover) .grid-box:last-child{
    -webkit-box-shadow: 12px 12px 1px 0 rgba(0,0,0,.3);    
    -moz-box-shadow: 12px 12px 1px 0 rgba(0,0,0,.3);    
    -moz-box-shadow: 12px 12px 1px 0 rgba(0,0,0,.3);    
    box-shadow: 12px 12px 1px 0 rgba(0,0,0,.3);    
}
.grid-category.active .grid-box:first-child,
.open .grid-row .grid-category.active .grid-box:hover{    
    background: #7c06bc;
    border-color: #7c06bc;
}

.grid-category.active .grid-box{
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: cubic-bezier(.1,.5,.6,1.5);
    -moz-transition-timing-function: cubic-bezier(.1,.5,.6,1.5);
    -ms-transition-timing-function: cubic-bezier(.1,.5,.6,1.5);
    transition-timing-function: cubic-bezier(.1,.5,.6,1.5);
} 
.open .grid-category.active .grid-box:active{
    -webkit-animation: ease-in-out activeHover .1s 1;    
    -moz-animation: ease-in-out activeHover .1s 1;    
    -ms-animation: ease-in-out activeHover .1s 1;    
    animation: ease-in-out activeHover .1s 1;    
}
@-webkit-keyframes activeHover{
    0%{
        left: 12px;
    }
    25%{
        left: 10px;
    }
    75%{
        left: 14px;
    }
    100%{
        left: 12px;
    }
}
@-moz-keyframes activeHover{
    0%{
        left: 12px;
    }
    25%{
        left: 10px;
    }
    75%{
        left: 14px;
    }
    100%{
        left: 12px;
    }
}
@-ms-keyframes activeHover{
    0%{
        left: 12px;
    }
    25%{
        left: 10px;
    }
    75%{
        left: 14px;
    }
    100%{
        left: 12px;
    }
}
@keyframes activeHover{
    0%{
        left: 12px;
    }
    25%{
        left: 8px;
    }
    75%{
        left: 16px;
    }
    100%{
        left: 12px;
    }
}
.grid-category-title,
.grid-row .grid-box-title{        
    font-size: 14px;
}
.grid-category-title,
.grid-box-text{
    top: 50%;
    left: 0;
    text-align: center;
    padding: 0 15px;
    -webkit-transform: translate(0, -50%) translateZ(0);
    -moz-transform: translate(0, -50%) translateZ(0);
    -ms-transform: translate(0, -50%) translateZ(0);
    transform: translate(0, -50%) translateZ(0);
    position: absolute;
    display: block;
    width: 100%;
    -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    -moz-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    -ms-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}
.grid-category-title i{
    margin-bottom: 10%;
    display: inline-block;
}
.box-id{
    position: absolute;
    bottom: 5px;
    right: 9px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    -moz-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    -ms-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    font-size: 10px;
    opacity: .7;
}
.rating{
    position: absolute;
    width: 70%;
    bottom: 5px;
    left: 6px;
    -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    -moz-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    -ms-text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    letter-spacing: -1px;
    text-align: left;
    color: #ccc;
}
.rating i:after,
.rating i:before{
    font-size: 14px;
    text-decoration: none !important;    
}
.rating i.selected{
    color: #fe0;
}

/* Stores */

.grid-category > .grid-box.item{    
    padding: 0;
}
.grid-row .grid-category .grid-box:not( :first-child),
.open .grid-row .grid-category.active .grid-box.item:hover:not( :first-child){
    background: rgba(0,0,0,.8);
    border: 1px solid #aaa;    
}
.grid-category > .grid-box.item:after{
    background: rgba(0,0,0,.6);
    width: 100%;
    height: 30px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.grid-category > .grid-box.item img{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%;
    max-width: 200%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.grid-category.active > .grid-box.item:hover img{
    max-width: 100%;
}
.grid-category > .grid-box.item .grid-box-text{
    top: 10px;
    background: rgba(0,0,0,.6);    
}
.grid-category > .grid-box.item .rating,
.grid-category > .grid-box.item .box-id{
    z-index: 2;
}
.click_an_pay{
    position: absolute;
    width: 100%;
    border-left: none;
    border-right: none;
    background: #5cb85c;
    text-decoration: none;
    z-index: 3;
    line-height: 30px;
    left: 0;
    top: -30px;    
    -webkit-transition: transform .2s ease-in-out;
    -moz-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
.active .item:hover .click_an_pay{
    -webkit-transform: translate(0, 30px);
    -moz-transform: translate(0, 30px);
    -ms-transform: translate(0, 30px);
    transform: translate(0, 30px);
}
.grid-box-title-1{
    position: absolute;
    display: block;
    top: 5px;
    right: 10px;
    text-align: right;
    font-size: 10px;
    text-transform: uppercase;
    opacity: .7;
}