/** checkout styles **/
.StripeElement {
 background-color: white;
 height: 40px;
 padding: 10px 12px;
 border-radius: 4px;
 border: 1px solid gainsboro;
 box-shadow: 0 1px 3px 0 #e6ebf1;
 -webkit-transition: box-shadow 150ms ease;
 transition: box-shadow 150ms ease;
 width:500px;
 margin-left: 7px;
}

.StripeElement--focus {
 box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
 border-color: #fa755a;
}

.StripeElement--webkit-autofill {
 background-color: #fefde5 !important;
}

button {
 background-color:steelblue;
 border:none;
 border-radius:5px;
 color:white;
 padding:5px;
 margin-top:5px;
 float:right;
}
.label-credit-card {
  display:block;
  margin-left: 7px;
  margin-top:20px;
  font-size: 14pt;
  color:steelblue;
}
.signin-controls { display:none;}
.your-items-title {border-bottom:1px solid gainsboro;margin-top: .5em;font-size: 1.5em;font-weight:bold;margin-bottom: .5em;background-color:#2f2f2f;color:white;padding:10pt;}
.checkout-total-header {float:left;width:100px;font-weight:bold;font-size:14pt;margin-top: 1em;}
.checkout-total {font-size: 20pt;margin-top: .85em;float: right;}
.checkout-item-list {width:100%;}
.payment-details-title {margin-top: 4em;border-bottom:1px solid gainsboro;font-size: 1.5em;font-weight:bold;margin-bottom: .5em;background-color:#2f2f2f;color:white;padding:10pt;}
.stripe-button-el span {
  font-size: 1.3em;
  background-image: none;
  background:none;
  background-color: var(--call-to-action-button);
  display: inline-block;
  border:none;
  box-shadow: none;
}
.stripe-button-el {
  background-image: none;
  background:none;
  background-color: var(--call-to-action-button);
  color:white;
  padding: 10px;
  border:1px solid gray;
}
.item-name, .item-description, .item-price {float:left;width:175px;}
.item-name {font-weight:bold;font-size:14pt;}
.item-description {width: 400px;}
.item-price {float:right;text-align: right;}
.credit-card-logos { height:20px;}
.column-header {margin-bottom:2pt;}
hr { margin:4px;}
.back-to-subscriptions {}
#inline-sign-in {width: 318px;}
.btn-sign-in-small {font-size:12pt;}
#checkout-username, #checkout-password {height:22px;width: 100%;font-size: 15pt;padding: 15pt;margin-bottom: 7pt;border: 1px solid dimgray;}

.charging-content {
  width:60%;
  margin:auto;
}
.charging-content h1 {
  text-shadow: 0px 2px 4px black;
  color:white;
  font-weight:bold;
  text-align: center;
  font-size: 69pt;
  margin: 24pt;
  margin-top:10pt;
}

.charging-content h1 + h1 {
  font-size:38pt;
}

.lds-circle {
  display: block;
  transform: translateZ(1px);
  margin:auto;
  width: 100px;
}
.lds-circle > div {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 30px;
  border-radius: 50%;
  background: whitesmoke;
  color: #30b94a;
  font-size: 83pt;
  font-weight: bold;
  line-height: 109pt;
  padding-left: 40px;
  animation: lds-circle 3.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  box-shadow: 2px 2px 4px black;
  text-shadow: 1px 1px 3px black;
}
@keyframes lds-circle {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}


/* desktop */
@media only screen and (min-width: 801px) {
		.card {width: 70%;margin:auto;margin-bottom: 5px;}
		#login {width:65%;margin:auto;background-color:white;}
		.btn-tryout {width: 47%;margin:auto;display:block;box-shadow: 0px 0px 10px dimgray;font-size: 1em;position: relative;top: 202px;}
		.btn-tryout-top { width:450px; position:relative;top:100px;font-size:.75em;}
		.sign-up-box { width:65%;margin:auto;margin-top:200px;}
    .menu-links a {display:block;width: 100%;font-size: 1.75em;}
}

/* mobile */
@media only screen and (max-device-width: 800px) {
    .card { width: 100%;}
    .btn-menu { display:block;}
    .subscription-types {
        width: 100%;
        margin: auto;
    }
    .subscription-type {
        width: 96%;
        margin-right: 0px;
    }
}