@charset "UTF-8";
  /* ===============Popup Style======= */
        /* The Modal (background) */
        
        .modal {
            display: block;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 9999999;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.57);
            /* Black w/ opacity */
        }
        /* Modal Content/Box */
        
        .modal-content {
            background-color: #022b69a2;
            text-align: center;
            color: #fff !important;
            margin: 10% auto;
            /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            border-radius: 25px;
            /* box-shadow: 0 0 20px rgb(35, 173, 255); */
            box-shadow: 0 4px 8px 0 rgb(241, 193, 193), 0 6px 20px 0 rgb(240, 185, 185);
            width: 32%;
            height: auto;
            /* Could be more or less, depending on screen size */
        }

        .modal-content p {color: #fff !important; font-size: 0.98em !important;}
        
        .modal-content input {
            margin-bottom: 10px;
            padding: 4px 5px;
            border-radius: 6px;
            }
        
        .modal-content select { width:66% !important; }           
        
        /* The Close Button */
        #xclose {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        
        #xclose:hover,
        #xclose:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        #ctryClose {
            color: #c9c372;
            text-decoration: underline;
        }
        
        #ctryClose:hover,
        #ctryClose:focus {
            cursor: pointer;
        }
        
        #BtnClose {
            margin: 86px auto;
            text-align: center;
            display: block;
        }
        
        #BtnClose:hover,
        #BtnClose:focus {
            cursor: pointer;
        }

    /* ===============/Popup Style====== */

       /* ===============PayfastPopup Style======= */

        /* The Modal (background) */
        
        .payfast-modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 9999999;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.57);
            /* Black w/ opacity */
        }
        /* Modal Content/Box */
        
        .payfast-modal-content {
            background-color: #fff;
            text-align: center;
            color: #000;
            margin: 10% auto;
            /* 15% from the top and centered */
            padding: 5px;
            border: 1px solid #888;
            /* border-radius: 25px; */
            /* box-shadow: 0 0 20px rgb(35, 173, 255); */
            box-shadow: 0 4px 8px 0 rgb(241, 193, 193), 0 6px 20px 0 rgb(240, 185, 185);
            width: 20%;
            height: auto;
            /* Could be more or less, depending on screen size */
        }

        .fixedvaluesblack {color:#000}

        .payfast-modal-content p {color: #000; font-size: 0.98em !important;}

        .payfast-modal-content .payfast-popup-header {
            background-color:#092f46;
            color:#fff;
            width:100%;
            text-align:center;
            margin: 0 auto;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        
        .payfast-modal-content input {
            margin-bottom: 10px;
            padding: 4px 5px;
            border-radius: 6px;
            }

        .payfast-modal-content ul {
        display:block;
        list-style: none;
        } 

        .payfast-modal-content ul li input {
        display:none;
        }

        .payfast-modal-content ul li {
        border:1px !important;
        height: max-content;
        width: max-content;
        float: left;
        } 

        .payfast-modal-content ul li label {
        display: inline-block;
        border:1px solid lightgrey;
        padding-top: 20px;
        margin: 5px;
        padding-bottom: 20px;
        width: 80px;
        }  

        .payfast-modal-content ul li  input[type=radio]:checked + label {
        border:1px solid #6d8db6 !important;
        display: inline-block;
padding-top: 20px;
margin: 5px;
padding-bottom: 20px;
width: 80px;
        } 

        .payfast-modal-content .payfast-submit {
            background-color: #f00;
            color: #fff;
            padding: 5px;
            width:80%;
            -webkit-border-radius: 15px;
             -moz-border-radius: 15px;
            border-radius: 15px;
        }    
        
        .payfast-modal-content select { width:66% !important; } 
        
        .pfstinput {width:82% !important}
        
        /* The Close Button */
        .payfast-xclose {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: relative;
            top: -65px;
        }
        
        .payfast-xclose:hover,
        .payfast-xclose:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        
        #payfast-ctryClose {
            color: #c9c372;
            text-decoration: underline;
        }
        
        #payfast-ctryClose:hover,
        #payfast-ctryClose:focus {
            cursor: pointer;
        }
        
        #payfast-BtnClose {
            margin: 86px auto;
            text-align: center;
            display: block;
        }
        
        #payfast-BtnClose:hover,
        #payfast-BtnClose:focus {
            cursor: pointer;
        }


        @media (min-width: 1011px) and (max-width: 1200px) {
            .fixedvaluesblack {margin-left: 10% !important;}
    
            .payfast-modal-content ul li label,
            .payfast-modal-content ul li  input[type=radio]:checked + label {
                width: 60px;
                padding-top: 15px;
                padding-bottom: 15px;
            }
    
    } 

        @media (min-width: 851px) and (max-width: 1010px) {
            .fixedvaluesblack {margin-left: 3% !important;}
    
            .payfast-modal-content ul li label,
            .payfast-modal-content ul li  input[type=radio]:checked + label {
                width: 60px;
                padding-top: 15px;
                padding-bottom: 15px;
            }
    
    }       

        @media (min-width: 531px) and (max-width: 850px) {
            .fixedvaluesblack {margin-left: 3% !important;}
    
            .payfast-modal-content ul li label,
            .payfast-modal-content ul li  input[type=radio]:checked + label {
                width: 50px;
                padding-top: 5px;
                padding-bottom: 5px;
            }
    
    }  

@media (min-width: 325px) and (max-width: 530px) {
        .fixedvaluesblack {margin-left: 6% !important;}

        .payfast-modal-content ul li label,
        .payfast-modal-content ul li  input[type=radio]:checked + label {
            width: 40px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

}        

    /* ===============/PayfastPopup Style====== */

    /* ===============SubsplashPopup Style====== */
    .subsplash-modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 9999999;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.57);
        /* Black w/ opacity */
    }
    
    .subsplash-modal-content {
        /* background-color: #b8e4ff;
        text-align: center;
        color: #000;
        margin: 10% auto;
        /* 15% from the top and centered * /
        padding: 5px;
        border: 1px solid #888;
        /* border-radius: 25px; * /
        /* box-shadow: 0 0 20px rgb(35, 173, 255); * /
        box-shadow: 0 4px 8px 0 rgb(241, 193, 193), 0 6px 20px 0 rgb(240, 185, 185);
        width: 15%;
        height: auto;
        /* Could be more or less, depending on screen size */

        background-color: #022b69a2;
        text-align: center;
        color: #fff !important;
        margin: 10% auto;
        /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        border-radius: 25px;
        /* box-shadow: 0 0 20px rgb(35, 173, 255); */
        box-shadow: 0 4px 8px 0 rgb(241, 193, 193), 0 6px 20px 0 rgb(240, 185, 185);
        width: 25%;
        height: auto;
        /* Could be more or less, depending on screen size */
    }   

    .subsplash-modal-content .payfast-popup-header {
        background-color:#092f46;
        color:#fff;
        width:100%;
        text-align:center;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* The Close Button */
    .subsplash-xclose {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: relative;
        top: -10px; 
    }
    
    .subsplash-xclose:hover,
    .subsplash-xclose:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .subsplash-modal-content p {color: #000; font-size: 1em !important; font-weight: bold;}

   /* .modal-link-paypal {
        /* background-color: #f00;* /
        background-image: linear-gradient(45deg, #f00, rgba(255, 0, 0, 0.601));
        color: #fff;
        padding: 5px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        text-decoration: none;
        width: 120px;
        display: inline-block;
    }  */

    .modal-link-paypal,
    .modal-link-splash {
        /* background-color: #092f46; 
        background-image: linear-gradient(45deg, #092f46,#092f46a9 ); */
        color: #022b69d3; 
        background-color: #fff;
        padding: 5px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        text-decoration: none;
        width: 60%;
        display: inline-block; 
        word-break: break-all;
        font-size: 1em;
        font-weight: bold;
        padding-top: 34px;
    }

    a.modal-link-paypal:hover,
    a.modal-link-splash:hover {
        color: #022b6994;
        background-color: #b6cef1;
    }

    .modal-link-paypal {
        background-image:url('images/paypallogo.png');
        background-repeat: no-repeat;
        background-size: 58%;
        background-position: center top;  
    }

    .modal-link-splash {
        background-image:url('images/subsplashlogo.png');
        background-repeat: no-repeat;
        background-size: 77%;
        background-position: center top;  
    }        
    
    /* a.modal-link-paypal:hover{
        background-image: linear-gradient(45deg, rgba(255, 0, 0, 0.601), #f00);
        color: #ddd !important;
        text-decoration: none;
    } 
    a.modal-link-splash:hover {
        background-image: linear-gradient(45deg, #092f46a9, #092f46 );
        color: #ddd !important;
        text-decoration: none;
    } */

   /* ===============/SubsplashPopup Style====== */