/* Breadcrumb */

.breadcrumb {
   background-color: #fff;
   border-radius: 10px 10px 0 0;
   margin-bottom: 0;
   border-bottom: 1px solid #45b8cb;
}
.breadcrumb .active a {
   color: #000;
   font-weight: bold;
   font-size: 20px;
}
.breadcrumb .active a:hover {
   text-decoration: none;
}

.breadcrumb>li+li:before {
   content: "➡";
   font-weight: 900;
   color: #3ba1b0;
}

/* Sections (~= pages) */

section {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   min-height: 500px;
   position: relative;
   padding-bottom: 65px;
}

section .btn.next {
   float: right;
   margin-right: 15px;
   min-width: 25%;
}
section .btn.next:after {
   content: '>';
   padding-left: 10px;
   font-weight: 900;
}
section .btn.previous {
   float: left;
   margin-left: 15px;
   min-width: 25%;
}
section .btn.previous:before {
   content: '<';
   padding-right: 10px;
   font-weight: 900;
}

section>p,
.control-label {
   color: #777;
   font-weight: normal;
}

section>.stripe-logo>img {
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: .5em;
  padding: .5em;
}

section>.info-label {
   color: #777;
   font-weight: normal;
}

section>.buttons:last-child {
   position: absolute;
   bottom: 15px;
   width: 100%;
}

/* Summary */

.summary {
   margin-bottom: 40px;
}
.summary ul {
   padding-left: 40px;
   margin-bottom: 10px;
}
.summary ul>li {
   list-style-type: square;
   padding-bottom: 10px;
}

/* For forms and lists */
.count {
   text-align: right;
   padding-right: 36px;
}
input.count {
	padding-right: 22px;
	font-weight: bold;
	max-width: 100px;
}
.spare {
   background-color: #fff;
   border: 1px solid #3ba1b0;
   border-radius: 20px;
   font-weight: 700;
   padding: 6px 9px;
   margin: 0 5px;
   color: #3ba1b0;
   text-align: center;
}
.price {
   font-family: 'monaco', monospace, sans-serif;
   text-align: right;
}
span.price {
   padding-left: 10px;
}
.total {
   font-weight: 700;
}
.spare.price {
   padding-right: 20px;
}

/* Footer */
footer {
   font-size: 12px;
   padding-top: 20px;
   text-shadow: 1px 1px #3ba1b0;
}

footer p {
   display: inline-block;
   width: 33%;
   text-align: center;
   padding-left: 15px;
   padding-right: 15px;
}
footer p:first-child {
   text-align: left;
}
footer p:last-child {
   text-align: right;
}

footer a:hover {
   text-decoration: none;
}

footer a>img {
   margin: 10px;
}

/* Misc */

.btn.highlight {
   padding: 12px 24px;
   font-weight: bold;
   text-shadow: 1px 1px grey;
   border-color: lightgrey;
}
.btn.highlight:hover {
   border-color: grey;
}

.center-glyph {
   left: 50%;
   margin-left: -24px;
   font-size: 48px;
   padding-top: 10px;
   padding-bottom: 10px;
}

/* Animations */

@keyframes rotate {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}

.rotating {
   animation-name: rotate;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

.blink.hidden {
   display: block!important;
   visibility: hidden;
   opacity: 0;
}
.blink.hidden>* {
   display: none!important;
}
.blink:not(.hidden) {
   visibility: visible;
   opacity: 1;
}
.blink {
   transition: visibility 0s, opacity 0.5s linear;
}

@media only screen and (max-width: 768px) {

   form .spare {
      margin-top: -6px;
   }

}