/**
 * COMPONENT STYLES
 * 
 * Styles for all pattern library components.
 * References design tokens from design-tokens.css
 * 
 * Organization:
 * 1. Base/Reset
 * 2. Typography8
 * 3. Components (alphabetical)
 * 4. Responsive overrides
 */

/* ============================================
   IMPORTS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ============================================
   BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: var(--font-family-default);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--grey-dark);
  background-color: var(--white);
  vertical-align: middle;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height: 100%
}

a {
  color: var(--scout-blue);
  text-decoration: none;
}

a:hover,
a:hover span {
  text-decoration: underline;
}

/* ============================================
   COLOUR QUICK STYLES
   ============================================ */

.text-blue {
  color: var(--scout-blue);
}

.text-green {
  color: var(--scout-green);
}

.text-red {
  color: var(--scout-red);
}

.text-navy {
  color: var(--scout-navy);
}

.text-purple {
  color: var(--scout-purple);
}

.text-teal {
  color: var(--scout-teal);
}

.text-white {
  color: var(--white);
}

.text-black {
  color: var(--black);
}

.background-blue {
  background-color: var(--scout-blue);
}

.background-green {
  background-color: var(--scout-green);
}

.background-red {
  background-color: var(--scout-red);
}

.background-navy {
  background-color: var(--scout-navy);
}

.background-purple {
  background-color: var(--scout-purple);
}

.background-teal {
  background-color: var(--scout-teal);
}

.background-white {
  background-color: var(--white);
}

.background-black {
  background-color: var(--black);
}


/* ============================================
   TYPOGRAPHY
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-titles);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.squirrels h1,
.squirrels h2 {
  font-family: var(--font-family-titles-squirrels);
}

.explorers h1,
.explorers h2 {
  font-family: var(--font-family-titles-explorers);
  font-weight: var(--font-weight-normal);
}

h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl)
}

h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: var(--font-size-base);
}

h4 {
  font-size: var(--font-size-sm);
}

sup {
  vertical-align: top;
  font-size: 0.6em;
  vertical-align: super;
}

/* ============================================
   BUTTONS
   ============================================ */

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

button:focus-visible {
  outline: 0.3vw solid;
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
}

/* ============================================
   CARD COMPONENT
   ============================================ */

.carousel-widget__content {
  margin-top: 3em;
  position: absolute;
  top: 0;
  width: 100%;
}

.section-card {
  background: var(--white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-base);
  min-width: 22em;
  display: grid;
  grid-row: Header / span 6;
  grid-template-rows: [Header] 4em [Meetings] auto [Sections] auto [LocationHeader] auto [Location] auto;
  max-width: 22em;
}

.carousel-widget__card-grid> :first-child {
  margin-left: 3em;
}

.carousel-widget__card-grid> :last-child {
  margin-right: calc(2.5 *var(--spacing-xl));
}

.carousel-widget__left,
.carousel-widget__right {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  width: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  user-select: none;
}

.carousel-widget__left {
  left: 0px;
  background: linear-gradient(90deg, #ffffff, transparent);
}

.carousel-widget__right {
  right: 0px;
  background: linear-gradient(90deg, transparent, #ffffff);
}

.carousel-widget__left button,
.carousel-widget__right button {
  border-radius: 100%;
  border: none;
  margin: calc(0.5 * var(--spacing-xl));
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  color: var(--scout-purple);
  background: radial-gradient(white 50%, transparent);
  transition: var(--transition-base);
}

.carousel-widget__left button:disabled,
.carousel-widget__right button:disabled {
  color: var(--grey-light);
}

.carousel-widget__left button:hover:not(:disabled),
.carousel-widget__right button:hover:not(:disabled) {
  opacity: 1;
}

.carousel-widget__left button:active:not(:disabled),
.carousel-widget__right button:active:not(:disabled) {
  transform: scale(1.1);
  opacity: 1;
}

:root {
  --section-card-stripe: calc(calc(2 * var(--spacing-md)) + calc(3 * var(--font-size-xs)));
}

.section-card {
  border-color: var(--key-colour-light);
}

.section-card:hover {
  box-shadow: var(--shadow-md);
}

/* Card Header */
.section-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  align-content: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  grid-row: Header;
}

.section-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  grid-row: Links;
  grid-column: Icon / span 2;
}


.section-card__icon {
  flex-shrink: 0;
}

cardheader {
  background: var(--key-colour);
  display: grid;
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  border-bottom: 2px double var(--key-colour-light);
  box-shadow: 0px 0.1em 4.1em var(--key-colour-light);
}

card row:last-child {
  margin-bottom: var(--spacing-lg);
}

card cardheader row:last-child {
  margin-bottom: 0;
}

card cardheader .group-name__parenthetical,
card cardhearder .group-headline {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
}

.section-card__row {
  display: grid;
  gap: var(--spacing-sm);
  align-content: center;
  justify-content: flex-start;
  margin: 0 var(--spacing-sm);
  grid-template-columns: [Icon] var(--icon-size-xl) [Content] 1fr;
  align-items: center;
  grid-row: attr(data-row);
}

.section-card__row--header {
  margin-top: var(--spacing-md);
}

.section-card__row__icon {
  grid-column: Icon;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.section-card__row__icon span {
  font-family: var(--font-family-icons);
  font-size: var(--icon-size-base);
  /* background-color: var(--key-colour); */
  color: var(--key-colour);
  font-weight: var(--font-weight-light);
  /* padding: var(--spacing-xs); */
  /* border: var(--border-width-thick) solid rgba(0,0,0,0.1); */
  /* border-radius: var(--border-radius-full); */
}

.section-card__row__content {
  display: flex;
  grid-column: Content;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: flex-start;
}

row column.section-card__row--header {
  font-weight: var(--font-weight-semibold);
}

row[data-row="Header"] column.section-card__row__content,
row[data-row="Location"] column.section-card__row__content {
  flex-direction: column;
  align-items: flex-start;
}

row[data-row="Meetings"] column.section-card__row__content {
  flex-direction: column;
  align-items: flex-start;
}


p.small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: var(--spacing-sm) 0;
}


.section-card__title-block {
  flex: 1;
  min-width: 0;
  /* Allows text truncation */
}

.section-card h2 {
  font-family: var(--font-family-titles);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.section-card span.group-headline {
  color: rgba(255, 255, 255, 0.75);
  grid-column: Content;
}

.section-card__other-sections {
  justify-content: center;
  grid-row: Sections;
  background-color: var(--key-colour-light);
  box-shadow: 0 0px 2px var(--key-colour-light);
  border-radius: var(--border-radius-sm);
  border: 0.5px dashed var(--key-colour-dark);
  padding: 0.5em;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
  margin: 0 1em;
}

.section-card__other-sections ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
}

.section-card__meeting-labels {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.section-card__meeting-labels,
.section-card__location-info {
  padding: var(--spacing-xs);
  flex-grow: 1;
  justify-content: center;
  grid-column-start: Content;
  display: grid;
}

.section-card__partner-list {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  gap: calc(0.5 * var(--spacing-xs));
  font-size: var(--font-size-sm);
  justify-content: center;
}

.section-card__partner-list__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.section-card__partner-list__grid-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}

.address-label {
  margin: var(--spacing-xs) 0;
  /* font-size: var(--font-size-sm); */
}

.address-label span {
  display: block;
}

.address-label span:not(:last-child)::after {
  content: ', \00a0';
}

.section-card__location-info a .postcode {
  display: block;
  font-size: var(--font-size-sm);
  margin-top: 0.3em;
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--grey);
  font-weight: var(--font-weight-normal);
}

/* Card Body */
.card__body {
  margin-bottom: var(--spacing-lg);
}

.location-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.location-info .address {
  font-size: var(--font-size-sm);
  color: var(--grey-dark);
  line-height: var(--line-height-normal);
}

/* Meeting Labels */
.meeting-labels {
  margin-bottom: var(--spacing-md);
}

.meeting-labels__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
  color: var(--grey-dark);
}

.meeting-labels__list {
  list-style: none;
}

.meeting-labels__item {
  font-size: var(--font-size-sm);
  color: var(--grey);
  padding: var(--spacing-xs) 0;
}

.meeting-labels__item::before {
  content: "•";
  margin-right: var(--spacing-sm);
  color: var(--scout-purple);
}

/* Section Circles */
.section-circles {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.section-circle {
  border-radius: 50%;
}

.section-circle:hover {
  box-shadow: var(--shadow-lg);
  transition: var(--transition-fast);
}

.section-circle--empty {
  opacity: 0.2;
}

.contact-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.contact-links__item {
  margin-left: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.detail-chip .sprite-icon {
  flex-shrink: 0;
}

/* Detail Badges */
.detail-badges {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.detail-badges__links {
  display: flex;
  gap: var(--spacing-md);
}

.detail-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--grey-lighter);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  color: var(--grey-dark);
}

.detail-badge__tooltip {
  position: relative;
}

.detail-badge__tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--grey-darker);
  color: var(--white);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-xs);
  z-index: var(--z-tooltip);
}

/* Card Footer */
.card__footer {
  display: flex;
  justify-content: flex-end;
}

.group-details__btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--key-colour);
  color: var(--white);
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.group-details__btn:hover {
  background-color: var(--key-colour-dark);
}

/* ============================================
   CAROUSEL-SPECIFIC LAYOUT
   ============================================ */

.results-carousel {
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Enforce a 16:9 aspect ratio for the carousel container */
  aspect-ratio: 16 / 9;
  /* Add a max-height to prevent it from becoming excessively tall on wide screens */
  max-height: 500px;
}

.carousel-widget__card-grid {
  display: grid;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 16px 20px 20px 20px;
  height: 100%;
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
  justify-content: space-evenly;
  margin-top: var(--spacing-md);
  grid-template-rows: subgrid;
}

/* ============================================
   FILTER COMPONENTS
   ============================================ */

.filter-controls {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--key-colour);
  padding: 0 var(--spacing-sm);
  position: absolute;
  width: 100%;
  z-index: 200;
  border-bottom: 4px solid #fff;
  top: 0;
  transition: var(--transition-slow);
  overflow: hidden;
  /* Ensures the dropdown is clipped when collapsing */
}

.filter-controls__dropdown {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-bottom: 0.5em;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-slow), visibility var(--transition-slow);
}

.filter-controls--closed .filter-controls__dropdown {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

:root {
  --filter-control-height: calc(calc(3 * var(--spacing-sm)) + var(--font-size-xl));
}

.filter-controls__toggle {
  position: absolute;
  right: var(--spacing-sm);
  color: white;
  font-weight: var(--font-weight-black);
  transition: var(--transition-base);
  font-size: 1.75em;
  text-shadow: 0 0 0.1em var(--key-colour-light);
}

.filter-controls__toggle:hover {
  opacity: 0.8;
}

.filter-controls__toggle:active {
  opacity: 0.5;
}

.filter-controls--closed .filter-controls__toggle {
  rotate: 180deg;
  text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.1);
}

.filter-dropdown {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: var(--border-width) solid var(--border-color);
}

.filter-group__buttons {
  margin-bottom: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-xs);
  margin: 0.2em 0.5em;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  color: var(--white);
}

.filter-group__title {
  color: var(--white);
  text-align: center;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: rgba(255, 255, 255, 0.15);
  border: var(--border-width) solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  transition: all var(--transition-base);
  flex: 1;
}

.filter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(252, 238, 238, 0.5);
}

.filter-btn--active {
  background-color: var(--white);
  border-color: var(--key-colour-light);
  color: var(--key-colour);
  font-weight: var(--font-weight-bold);
}

.filter-btn--active:hover {
  background-color: var(--key-colour-dark);
  border-color: var(--key-colour-dark);
}







/* ============================================
   SECTION SELECTOR
   ============================================ */

#carousel-root {
  width: 100%;
}

.section-selector {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.carousel-widget__header h1 {
  min-height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
}

.filter-controls__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  margin: 0;
  color: var(--white);
  padding: var(--spacing-xs);
  text-align: center;
}

.filter-controls__reset-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.filter-controls__reset-link:hover {
  text-decoration-color: rgba(255, 255, 255, 0.7);
}


.section-selector__grid {
  display: flex;
  gap: 1vw;
  background: #fff;
  margin: 1vw;
  position: absolute;
  top: var(--filter-control-height);
  width: 98vw;
  max-width: 1200px;
}

.section-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.section-btn {
  scale: 1;
  border-radius: clamp(5px, 2vw, 25px);
  background-color: var(--white);
  border: solid var(--white);
  border-width: clamp(0.5px, 0.5vw, 6px);
  position: relative;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  padding: var(--spacing-sm);
  display: flex;
  align-items: center;
  font-family: var(--font-family-titles);
  color: var(--key-colour);
  font-size: clamp(14px, 2vw, 28px);
  font-weight: var(--font-weight-bold);
  aspect-ratio: 1;
  justify-content: center;
  --icon-size-button: clamp(42px, 9vw, 90px);
  transition: scale 0.2s ease-in-out;
  z-index: 100
}

.section-btn[data-section="squirrels"] {
  --key-colour: var(--scout-red);
  --key-colour-dark: var(--scout-red-dark);
  --key-colour-light: var(--scout-red-light);
  font-family: var(--font-family-titles-squirrels);
  font-weight: var(--font-weight-black);
}

.section-btn[data-section="beavers"] {
  --key-colour: var(--scout-blue);
  --key-colour-dark: var(--scout-blue-dark);
  --key-colour-light: var(--scout-blue-light);
}

.section-btn[data-section="cubs"] {
  --key-colour: var(--scout-green);
  --key-colour-dark: var(--scout-green-dark);
  --key-colour-light: var(--scout-green-light);
}

.section-btn[data-section="scouts"] {
  --key-colour: var(--scout-forest);
  --key-colour-dark: var(--scout-forest-dark);
  --key-colour-light: var(--scout-forest-light);
}

.section-btn[data-section="explorers"] {
  --key-colour: var(--scout-navy);
  --key-colour-dark: var(--scout-navy-dark);
  --key-colour-light: var(--scout-navy-light);
  font-family: var(--font-family-titles-explorers);
  font-weight: var(--font-weight-normal);
  font-size: clamp(16px, 2.2vw, 30px);
}

.section-btn:hover {
  scale: 1.1;
  border-color: var(--key-colour-dark);
  box-shadow: var(--shadow-md);
  background-color: var(--key-colour);
  color: var(--white);
  text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.6);
  z-index: 101;
  transition: scale 0.3s cubic-bezier(0.41, -2.99, 0.43, 4.49);
}

.section-btn:hover .sprite-section-logo::after {
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.6);
  border-radius: var(--border-radius-full);
}

.section-btn--squirrels {
  font-family: var(--font-family-titles-squirrels);
}

.section-btn__label {
  /* font-weight: var(--font-weight-bold); */
  font-size: clamp(18px, 2.8vw, 36px);
  margin-top: var(--spacing-xs);
  height: 1.25em;
  align-items: center;
  display: flex;
}

@media (max-width: 600px) {
  .section-selector__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .section-btn { 
    --icon-size-button: 15vw;
  }

}

/* ============================================
   NO RESULTS
   ============================================ */

#no-results-target {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.no-results {
  display: flex;
  gap: var(--spacing-lg);
  flex-grow: 0;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: var(--key-colour-dark);
  position: relative;
  top: 4em;
}

.no-results__icon {
  margin-bottom: var(--spacing-xl);
  opacity: 0.5;
  font-size: 4em;
  color: var(--key-colour-dark);
}

.no-results__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color: var(--key-colour-dark);
}

.no-results__message {
  font-size: var(--font-size-base);
  color: var(--grey-dark);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-relaxed);
}

.no-results__actions button {
  background-color: var(--key-colour);
  color: var(--white);
  padding: 0.5em 1em;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: var(--font-weight-semibold);
  border: 0.1em solid var(--white);
}

.no-results__actions button:hover {
  background-color: var(--key-colour-dark);
}

.no-results__actions button:active {
  background-color: var(--key-colour-dark);
  color: var(--key-colour-light);
  border: 0.1em solid var(--key-colour-light);
}


/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Responsive Day Formatting */

/* For mobile/smaller screens (<= 800px), show the short format by default */
.day-format--long {
  display: none;
}

.day-format--short {
  display: inline;
}

/* For larger screens (> 800px), show the long format */
@media (min-width: 801px) {
  .day-format--long {
    display: inline;
  }

  .day-format--short {
    display: none;
  }
}

.spin-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.4);
  color: var(--black);
  text-shadow: var(--shadow-md);
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
}

.spin::after {
  position: absolute;
  -webkit-animation: spin 6s linear infinite;
  -moz-animation: spin 6s linear infinite;
  animation: spin 6s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}