form, body, html {
    font-size: 12px !important;
    font-family: Oswald, sans-serif, Noto Sans;
    margin: 0px;
    padding: 0px;
  /* height: 100%;*/
    width: 100%;
   background-color:darkgray;
   
}

    html .t-container-fluid,
    html .t-row-wrap > .t-row {
        max-width: none !important;
        padding: 0;
        margin: 0;
        height:100%;
    } 
    

.mode {
    padding: 8px; 
    color: #2b506e;
    white-space:nowrap;
    text-align: center;
    margin-bottom: 8px;
   font-size:20px;
    border-radius: 16px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.floatright {
    float: right;
    margin-top: 10px;
    vertical-align: middle !important;
    margin-right:10px;

}


.btnoptions {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-family: Oswald, sans-serif, Noto Sans;
    font-size: medium;  
    color: #2b506e; 
    margin: 2px;
    background-color:white;
    border-style: solid;
    border-width: thin;
    border-color: silver;
    border-radius: 15px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}


    .btnoptions:hover {
        box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
        transform: scale(1.03);
        transition: all .3s;
    }



.opacityPulse-css {
    animation: opacityPulse 5s ease-out;
    animation-iteration-count: infinite;
    opacity: 10;
}

@-webkit-keyframes opacityPulse {
    0% {
        opacity: 0.3;        
        color:black;
    } 

    50% {
        opacity: 1.0;
      
    }

    100% {
        opacity: 0.8;        
        color: black;
    }
}




.txtbox2 {
    border-color: rgb(3, 102, 214) !important;
    border-radius: 4px;
    border-width: 1px !important;
    padding: 4px;
    font-family: "Oswald script=latin rev=2", sans-serif !important;
    width: 100%;
    transition: box-shadow 300ms ease-out;
    /*  -moz-box-shadow: 0 0 8px rgba(82,168,236,.6); */
    /*box-shadow: 0 0 8px rgba(82,168,236,.6) !important; */
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;*/
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}


    .txtbox2:focus {
        border-color: rgba(82,168,236,.8);
        outline: 0;
        outline: thin;
       
    }

.txtbox {
    opacity: 1 !important;
    font-family: "Oswald script=latin rev=2", sans-serif !important;
    border-color: rgb(3, 102, 214) !important;
    border-style: solid;
    border-width: 1px;
    font-weight: normal !important;
    border-radius: 4px;
    transition: box-shadow 300ms ease-out;
    width:100%;
   
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    /*  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;*/
  /*  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;*/
    /*  box-shadow: rgb(3, 102, 214) 0px 0px 0.5px 0.5px !important; */
}






.btnpayoptions {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-family: Oswald, sans-serif, Noto Sans;
    font-size: medium;
    color: #2b506e;
    margin: 2px;
    border-style: solid;
    border-width: thin;
    border-color: silver;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; 
}

.btnpaypal {
    max-width: 250px;
    border-style: solid;
    border-width: thin;
    border-color: transparent;
    border-radius: 4px;
    text-align: center;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    background-color: white;
    width: 100%;
    height: auto;
    font-size: medium;
    color: white;
    padding: 11px;
    background-image: url('../img/pp.png');
    background-repeat: no-repeat;
    background-position: center;
}
.btnapay {
    max-width: 250px;
    border-style: solid;
    border-width: thin;
    border-color: transparent;
    border-radius: 4px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    background-color: white;
    width: 100%;
    height: auto;
    font-size: medium;
    color: white;
    padding: 11px;
    background-image: url('../img/apay.png');
    background-repeat: no-repeat;
    
    background-position: center;
    background-size: 78px 36px;
}

.btngpay {
    max-width: 250px;
    border-style: solid;
    border-width: thin;
    border-color: transparent;
    border-radius: 4px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    background-color: black;
    width: 100%;
    height: auto;
    font-size: medium;
    color: white;
    padding: 11px;
    background-image: url('../img/gpay.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75px 32px;
}


.btncard {
    border-style: solid;
    border-width: thin;
    border-color: transparent;
    border-radius: 4px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    background-color: #023064;
    width: 100%;
    font-family: Oswald, sans-serif, Noto Sans;
    height: auto;
    font-size: medium;
    color: white;
    padding: 11px;
    background-blend-mode: difference;
    background-image: url('../img/blankcard.png');
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
    background-position-x: 18%;
    background-position-y: 6px;
    background-size: 45px 32px;
}

.btncheq {
    border-style: solid;
    border-width: thin;
    border-color: transparent;
    border-radius: 4px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    width: 100%;
    font-family: Oswald, sans-serif, Noto Sans;
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    height: auto;
    font-size: medium;
    color: #2b506e;
    padding: 11px;
    background-color: whitesmoke;
    background-image: url('../img/cheq.png');
    text-align: center;
    background-repeat: no-repeat;
    background-position-x: 18%;
    background-position-y: 4px;
    /*  background-position-x: 38px;
    background-position-y: 4px; */
    background-size: 50px 35px;
}


.schedulegroup {
    background: white !important;
    padding: 0px !important;
    width: 100%;
    position: relative;
    float:left;
    max-width: 600px;
    display: block;
    white-space: nowrap;
}

.Initialsched {
    display: block;
    font-family: Oswald, sans-serif, Noto Sans;
    width:100%;
    background-color: white;
    border-style: none !important;
    float:left;
}
.leftContainer {
    width: 85%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    padding: 0px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 16px;
    font-family: 'Roboto';
    background: #ffffff;
    z-index: 99999999999 !important;
    opacity: 10 !important;
    float: right;
    margin-top: 10px;
       height: 625px;
}



.featuredimage {
    margin-top: 2px !important;
    padding-top: 7px !important;
    padding-left:7px !important;
    padding-right:7px !important;
    border-radius: 16px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important; 
 /*   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;*/
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.featuredmessage {
    font-size: 13px;
    padding: 14px;
    margin-left:10px;
    margin-right:10px;
    text-align:justify;
}
/**cards*/

.flag {
    background-repeat: no-repeat;
    background-image: url('../img/bg-flag2.png');
    background-size: cover;         
}

.fullheight {
    vertical-align: top;
    /* height: 57.5vh; */
    height: 100%;
   
  
}

#div1 {
    height: 57.5vh;
}

#div1b {
    height: 57.5vh;
}

.bottom {
    position:absolute !important;
    bottom:0 !important;
    width:100%;
    
    
}




.upsellmsg {
    padding-top:10px;
    padding-bottom:10px;
    margin:25px;
    text-align:left;
    font-size:18px;
    color:black;

}


.navbutton {
    background-color: steelblue !important;
    border-style: none !important;
    color: white !important;
    border-radius: 0px !important;
   padding:10px;
   font-size:16px !important;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.hidden {
    visibility:hidden !important;
}

.show {
    visibility:visible !important;
  
}

.back {
    Font-Size: 24px;
    background-color: transparent;
    border-style: none !important;    
    text-align: center !important;
    margin-left: 10px;
    color:maroon;
}

.card-bounding {
    /*  background: linear-gradient(to right, transparent, silver);*/
    width: 100% !important;
    max-width: 550px;
    margin: 0 auto;
   position: relative;
    font-size: medium;
    
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    border-radius: 16px;
    font-family: 'Roboto';
   

    z-index: 999 !important;
    background-color: white;
    float: left;
    overflow: hidden;
    margin-top: 10px;
    height: 625px;
}


    .card-bounding:hover {
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 
   
        }

    .card-bounding aside {
      /*  font-size: 24px; */
        padding-bottom: 8px;
    }

.card-container {
    width: 100%;
    padding-left: 80px;
    padding-right: 40px;
    position: relative;
  /*  box-sizing: border-box; */
  /*  border: 1px solid #ccc; */
    /*  margin: 0 auto 30px auto;*/
    padding-bottom: 2px;
}

    .card-container input {
        width: 100%;
        letter-spacing: 1px;
     /*   font-size: 30px; */
        padding: 15px 15px 15px 25px;
        border: 0;
        outline: none;
     /*  box-sizing: border-box;  */
    }

.card-type {
    width: 62px;
    height: 49px;
    background: url("../img/blankcard.png");
    background-size: 55px 40px;
    background-repeat: no-repeat;
   /*  position: absolute; */
    /* top: 1px; */
    left: 4px;
    margin: 3px;
}

    .card-type.mastercard {
        background: url("../img/mc.png");
        background-repeat: no-repeat;
        background-position: 0 -10px;
      
    }

    .card-type.visa {
        background: url("../img/visa.png");
        background-repeat: no-repeat;
        background-size: 60px 50px;
    }

    .card-type.amex {
        background: url("../img/amex.png");
        background-repeat: no-repeat;
        
    }

    .card-type.discover {
        background: url("../img/discover.png");
        background-repeat: no-repeat;
        background-size: 59px 49px;
    }


    .card-type.diners_club_carte_blanche {
        background: url("../img/diners.jpg");
        background-repeat: no-repeat;
        background-size: 50px 40px;
    }

    .card-type.diners_club_international {
        background: url("../img/diners.jpg");
        background-repeat: no-repeat;
        background-size: 50px 40px;
    }

    .card-type.jcb {
        background: url("../img/jcb.png");
        background-repeat: no-repeat;
        background-size: 59px 49px;
    }

.card-valid {
    text-align:left;
    padding-left:5px;
    line-height: 40px;
    font-size: 25px;
    font-weight:bold;
    font-family: 'icons';
    color: transparent;
    visibility:hidden;
    
}

    .card-valid.active {
        color: #42ca7c;
        visibility:visible !important;
    }

.card-details {
    width: 100%;
    text-align: left;
 /*   margin-bottom: 30px;*/
    transition: 300ms ease;
}

    .card-details input {
        font-size: 30px;
        padding: 15px;
     /*   box-sizing: border-box; */
        width: 100%;
    }

        .card-details input.error {
            border: 1px solid #c2313c;
         /*   box-shadow: 0 4px 8px 0 rgba(238,76,87,0.3); */
            outline: none;
        }

    .card-details .expiration {
        width: 50%;
        float: left;
       padding-right: 5%; 
    }

    .card-details .cvv {
        width: 45%;
        float: left;
    }

.active {
    visibility: visible;
}

.inactive {
    visibility: hidden;
}

.paygroup {
    display: flex;
    white-space: nowrap;
    width: 100%;
}
.InitialSub {
    display: block;
    padding: 10px;
    float: left;
    font-family: Oswald, sans-serif, Noto Sans;
    font-size: medium;
    background-color: white;
    color: #2b506e;
    margin: 2px;
    max-width: 610px;
    width: 100%;
    border-style: solid;
    border-width: thin;
    border-color: silver;
    border-radius: 15px;
}

    .InitialSub:hover {
        color: white;
        font-family: Oswald, sans-serif, Noto Sans;
        font-size: medium;
        transition: all 0.25s ease-in-out;
        background-color: #4078a5;
        border-radius: 15px;
    }

.ClickedSub {
    float: left;
    padding: 10px;
    display: block;
    font-family: Oswald, sans-serif, Noto Sans;
    font-size: medium;
    background-color: #2b506e;
    border-radius: 15px;
    color: white;
    margin: 2px;
    max-width: 610px;
    width: 100%;
    border-style: solid;
    border-width: thin;
    border-color: steelblue;
    box-shadow: rgba(1,60,136,.5) 0 -1px 3px 0 inset,rgba(0,44,97,.1) 0 3px 6px 0;
}

.fontbold {
    font-weight: bold !important;
    color: #2b506e !important;
}

.CheckBox {
    color: #325d81;
}

.tabs {
    width: 100%;
    border-radius: 12px;
    color: white;
    text-align: center !important;
    font-size: 15px;
    background-color: transparent;
    
   

}

.txtamount {
    font-size:22px;
    color:steelblue;
}

.txtamount_freq {
    font-size:18px;
    color:gray;
}

.socialmedia {
    font-size:large !important;
    border-style:none !important;
    background-color: transparent !important;
    box-shadow:none !important;

}

.divsocialmedia {
    bottom:0px;
}

.breakdown {
   
    width: 100%;
    padding-left:14%;
    padding-right:14%;
}

.left {
    text-align:left;
}

.right {
    text-align:right;
}
.fees {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    background-color: #6c9dc6;
    border-style: solid;
    border-width: thin;
    border-color: #6c9dc6;
    /*box-shadow: rgba(1,60,136,.5) 0 -1px 3px 0 inset,rgba(0,44,97,.1) 0 3px 6px 0;*/
    color: black;
    white-space: nowrap !important;
    margin-top: 45px;
   margin-left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 6px;
    width: 88%;
    text-align: center;
}

.w3-padding-group {
    padding: 12px 16px !important;
    vertical-align:middle;
     
}


.header-shadow {
    width: 100%;
    opacity: 1;
    /*/ border-style: none;
    border-bottom-style: solid;
    border-bottom-width: thin;*/
    /*box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;*/

    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    /*  border-bottom-color: silver;*/
    /*  box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); */
}


#header1 {
    margin-top: 4%;
}
.footer {
    width: 100% !important;
    max-width: 85%;
    padding-top:5%;
    margin: 0 auto;
    position: relative;
    color:black;
    font-size:11px;
    

}

/* iphone se*/
@media (max-width: 320px) {
    .card-bounding {
        
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        height: auto; /* 578px;*/
        
    }

    .mode {
        padding: 6px;
    }


    .floatright {
        float: right;
        margin-top: 6px;
        margin-right: 10px;
    }

    #h4a {
        font-size:16px !important;
    }

    #useof {
        font-size:12px;
    }

    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

   .filler {
       height:50px;
   }

  
}

/*iphone 6/7/8/se*/
@media (max-width: 375px) {

    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
              
    }


    .mode {
        padding: 6px;
        
    }


    .floatright {
        float: right;
        margin-top: 6px;        
        margin-right: 10px;
    }




    .bottom {
        margin-top:10px;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;

    }
    .breakdown {
        width: 100%;
        padding-left: 14%;
        padding-right: 14%;
        margin-bottom:15%;
    }

    .filler {
        height: 50px;
    }
}





/*galaxy note*/
@media (max-width: 412px) {
    .card-bounding {
       height:auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
   
    }

    .bottom {
        margin-top: 6%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

    .breakdown {
     
        width: 100%;
        padding-left: 14%;
        padding-right: 14%;
        margin-bottom: 15%;
    }
    .filler {
        height: 100px;
    }
    
}




/*iphone 6/7/8 plus*/
@media (max-width: 414px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        height: auto; /* 575px; */
    }

    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

    .filler {
        height: 100px;
    }

 
}
/**surface duo */
@media (max-width: 540px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        height: auto; /* 575px; */
    }
    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

    .filler {
        height: 100px;
    }


}



/*iphone se landscape*/
@media (max-width: 568px) {
    .card-bounding {
        width:100%;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        height: auto; 
    }
    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

  
}


@media (max-width: 600px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
     
    }
    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

  
}


@media (max-width: 653px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
       
    }
    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }

    .filler {
        height: 100px;
    }
}

@media (max-width: 667px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        width:100%;
    
       
    }

    .bottom {
        margin-top:3%;
        position:relative !important;
        bottom: 0 !important;
        width: 100%;
    }

    .filler {
        height: 100px;
    }
}

@media (max-width: 760px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        width:100%;
    }

    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }


    .filler {
        height: 100px;
    }
}
/*
@media (max-width: 800px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        width:100%;
    
    }

    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }
}
*/

@media (max-width: 883px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        height: auto;
        width:100% !important;
    }

    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }
}



@media screen and (max-width: 915px), screen and (max-height: 412px) {
    .card-bounding {
        height: auto;
        border-style: none;
        box-shadow: none;
        border-radius: 0px;
        margin-top: 0px;
        height: auto;
        width: 100% !important;
    }

    .bottom {
        margin-top: 3%;
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
    }
}