/*------------------------------------*\
    TRIP PLANNER
\*------------------------------------*/
/* =========================================
  MassByTrain Trip Planner (SCOPED)
  Form + Trip View + Timeline + Maps
  ========================================= */

#mbt-trip-planner,
#mbt-trip-planner * { box-sizing: border-box; }

#mbt-trip-planner {
  --mbt-purple: #80276c;
  --mbt-soft:   #efeceb;   /* form panel bg */
  --mbt-soft2:  #f3e8ee;   /* accordion bg */
  --mbt-text:   #111111;
  --mbt-dot:    #ffffff;
  --mbt-dest:   #fecd32;

  font: inherit;
  line-height: 1.4;
  color: var(--mbt-text);
}

#mbt-trip-planner a { text-decoration: none; }
#mbt-trip-planner a:hover { text-decoration: underline; }

#mbt-trip-planner input,
#mbt-trip-planner select,
#mbt-trip-planner textarea,
#mbt-trip-planner button {
  font: inherit;
  color: inherit;
}

/* Keep your container */
#mbt-trip-planner .mbt-container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* =========================================
  FORM (scoped)
  ========================================= */

#mbt-trip-planner .trip-form {
  padding: 20px;
  background: var(--mbt-soft);
}

#mbt-trip-planner .mbt-panel {
  background: var(--mbt-purple);
  /* padding: 1.25rem 1.25rem 1rem; */
}

/* Banner title (two stacked purple strips) */
#mbt-trip-planner .mbt-banner {
  text-align: center;
  margin: 4px 0 30px; /* was 0.25rem 0 1.25rem */
}
#mbt-trip-planner .mbt-banner span {
  display: inline-block;
  background: var(--mbt-purple);
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 22px; /* was 1.35rem */
  line-height: 1.2;
  padding: 6px 10px; /* was 0.35rem 0.6rem */
  margin: 2px 0;
}
#mbt-trip-planner .mbt-banner span + span { margin-top: 4px; /* was 0.25rem */ }

/* Stepper rail */
#mbt-trip-planner .mbt-stepper {
  position: relative;
}
#mbt-trip-planner .mbt-step {
  position: relative;
  padding: 0 0 20px 20px; /* was 0 0 1.25rem 1.25rem */
}
#mbt-trip-planner .mbt-step::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--mbt-purple);
  border-radius: 999px;
  background: white;
}
#mbt-trip-planner .mbt-step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 6px;
  width: 2px;
  background: var(--mbt-purple);
  opacity: 0.95;
}
/* #mbt-trip-planner .mbt-step-last::after { display: none; } */

/* Question text */
#mbt-trip-planner .mbt-q-title {
  font-weight: bold;
  font-size: 17px; /* was 1.05rem */
  margin: 0 0 4px; /* was 0 0 0.25rem */
}
#mbt-trip-planner .mbt-req {
  color: #c81d25;
  margin-left: 2px; /* was 0.15rem */
}
#mbt-trip-planner .mbt-q-help {
  margin: 0 0 10px;  /* was 0 0 0.65rem */
  font-size: 16px;   /* was 0.98rem */
  color: #1a1a1a;
}

/* Inputs */
#mbt-trip-planner .mbt-control { width: 100%; }

#mbt-trip-planner .mbt-input,
#mbt-trip-planner .mbt-select,
#mbt-trip-planner .mbt-textarea {
  width: 100%;
  border: 2px solid #8d8d8d;
  border-radius: 0;
  background: #fff;
  padding: 11px 13px; /* was 0.7rem 0.8rem */
  color: var(--mbt-text);
}
#mbt-trip-planner .mbt-textarea {
  resize: vertical;
  min-height: 90px;
}

#mbt-trip-planner .mbt-mini-label {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;       /* was 0.9rem */
  letter-spacing: 0.02em;
  margin: 12px 0 6px;    /* was 0.75rem 0 0.35rem */
}

/* Two-column grid like the comp */
#mbt-trip-planner .mbt-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* was 1rem */
}
@media (max-width: 640px) {
  #mbt-trip-planner .mbt-grid-2 { grid-template-columns: 1fr; }
}

/* Hide helper */
#mbt-trip-planner .mbt-hidden { display: none !important; }

/* Radios */
#mbt-trip-planner .mbt-radio-row {
  display: flex;
  gap: 32px; /* was 2rem */
  align-items: center;
  margin: 4px 0 6px; /* was 0.25rem 0 0.35rem */
}
#mbt-trip-planner .mbt-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* was 0.6rem */
  font-weight: 600;
}
#mbt-trip-planner .mbt-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mbt-purple);
  margin: 0;
}

/* Actions */
#mbt-trip-planner .mbt-actions {
  display: flex;
  justify-content: center;
  /* gap: 3rem; */
  align-items: center;
  padding: 12px 0 4px; /* was 0.75rem 0 0.25rem */
  flex-direction: column;
}
#mbt-trip-planner .mbt-action-primary {
  background: none;
  border: none;
  padding: 0;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--mbt-purple);
  text-decoration: underline;
  cursor: pointer;
  font-size: 24px;
  margin: 20px 0;
}
#mbt-trip-planner .mbt-action-primary:hover {
  color: #000000;
}
#mbt-trip-planner .mbt-action-link {
  background: none;
  border: none;
  padding: 0;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--mbt-text);
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
  align-self: flex-end;
}

/* ===============================
   Transportation Modes (Stepper)
   =============================== */

#mbt-trip-planner .mbt-modes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 6px;
}

/* Checkbox row – matches radio style */
#mbt-trip-planner .mbt-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* Purple checkbox styling */
#mbt-trip-planner .mbt-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mbt-purple);
  cursor: pointer;
}

/* Optional helper text spacing (if present) */
#mbt-trip-planner .mbt-q-help {
  margin-top: 4px;
}


/* =========================================
  Select2 (scoped)
  ========================================= */

#mbt-trip-planner .select2-container { width: 100% !important; }

#mbt-trip-planner .select2-container--default .select2-selection--single {
  height: auto;
  border: 2px solid #8d8d8d;
  border-radius: 0;
  padding: 9px 12px; /* was 0.55rem 0.75rem */
  display: flex;
  align-items: center;
}
#mbt-trip-planner .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}
#mbt-trip-planner .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}
#mbt-trip-planner .select2-dropdown .select2-search input {
  width: 100% !important;
  box-sizing: border-box;
  padding: 9px 12px; /* was 0.55rem 0.75rem */
  border: 2px solid #8d8d8d;
  border-radius: 0;
}

/* Select2 highlighted option (hover / keyboard) */
.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #80276c!important;
}
.select2-container--default
.select2-results__option--selected {
  background-color: #80276c!important;
}
.select2-results__option {
  transition: background-color 0.12s ease;
}




/* =========================================
  Map container (scoped)
  ========================================= */

#mbt-trip-planner .map-container{
  width: 100%;
  height: 240px;
  border-radius: 0;
  overflow: hidden;
  background: #eee;
}

/* =========================================
  AI loader (scoped)
  ========================================= */

#mbt-trip-planner .mbt-ai-loader {
  text-align: center;
  margin-top: 16px; /* was 1rem */
}
#mbt-trip-planner .mbt-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255,255,255,0.3); /* faint white ring */
  border-top-color: #ffffff;              /* solid white spinner */
  border-radius: 999px;
  margin: 0 auto 8px; /* was 0 auto 0.5rem */
  animation: mbtSpin 0.8s linear infinite;
}
#mbt-trip-planner .mbt-ai-text {
  color: #FFF;
  font-size: 15px; /* was 0.95rem */
  padding-bottom: 30px;
}
@keyframes mbtSpin { to { transform: rotate(360deg); } }

/* =========================================
  TRIP VIEW (scoped)
  ========================================= */

#mbt-trip-planner .mbt-results-wrap {
  background: var(--mbt-purple);
  padding: 28px 0;
}

#mbt-trip-planner .mbt-results-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* "YOUR TRIP" should live visually in purple band */
#mbt-trip-planner .mbt-results-title {
  text-align: center;
  margin: 0 0 18px;
}
#mbt-trip-planner .mbt-results-title span {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: #fff;
  color: var(--mbt-purple);
  border: 3px solid var(--mbt-purple);
  padding: 8px 14px;
}

#mbt-trip-planner .mbt-results-card {
  /* background: #fff; */
  /* border-radius: 0; */
  /* box-shadow: 0 2px 10px rgba(0,0,0,.08); */
  padding: 10px;
}

/* DEPART / RETURN chip */
#mbt-trip-planner .mbt-chip {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--mbt-purple);
  color: #fff;
  padding: 6px 10px;
  border-radius: 0;
  margin: 0 0 10px;
}

/* itinerary card base */
#mbt-trip-planner .itinerary {
  border: 1px solid #e3e6ef;
  background: #fff;
  border-radius: 0;
  padding: 14px;
  margin-bottom: 14px;
}

/* Labels and values for comp-style coloring */
#mbt-trip-planner .mbt-k {
  font-weight: bold;
  color: var(--mbt-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#mbt-trip-planner .mbt-v {
  color: var(--mbt-purple);
  font-weight: 400; /* not bold */
}

/* Let text wrap (NO truncation / no ellipsis) */
#mbt-trip-planner .mbt-stepline {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

#mbt-trip-planner .mbt-leg--rail .mbt-stepline,
#mbt-trip-planner .mbt-leg--rail .mbt-train-time {
  margin-top: 7px;
}

#mbt-trip-planner .loading-text {
  padding: 20px;
  text-align: center;
  color: white;
}

/* =========================================
  Timeline legs (dots + thin purple line)
  ========================================= */

#mbt-trip-planner .mbt-leg,
#mbt-trip-planner .mbt-leg-group {
  position: relative;
  padding-left: 38px; /* room for dot + line */
  margin-top: 14px;
}

/* vertical line */
#mbt-trip-planner .mbt-leg::before,
#mbt-trip-planner .mbt-leg-group::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mbt-purple);
  opacity: 0.9;
}

/* dot */
#mbt-trip-planner .mbt-leg::after,
#mbt-trip-planner .mbt-leg-group::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mbt-dot);
  border: 2px solid var(--mbt-purple);
}

/* Train time */
#mbt-trip-planner .mbt-train-time {
  font-weight: bold;
  color: var(--mbt-text);
}

/* =========================================
  Non-CR accordion groups (square corners)
  ========================================= */

#mbt-trip-planner details.mbt-leg-group {
  border-radius: 0;
}

/* summary toggle bar */
#mbt-trip-planner .mbt-group-toggle {
  background: var(--mbt-soft2);
  border-radius: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* chevron right */
  gap: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(128, 39, 108, 0.18);
}

#mbt-trip-planner details > summary::-webkit-details-marker { display: none; }

#mbt-trip-planner .mbt-group-meta {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #333;
  opacity: .85;
}

/* Inner area needs light purple bg too (and to feel "inside") */
#mbt-trip-planner .mbt-group-inner {
  background: var(--mbt-soft2);
  border: 1px solid rgba(128, 39, 108, 0.18);
  border-top: none;
  padding: 10px 12px 12px;
  margin-left: 0;
}

/* inner legs in accordion should NOT have timeline */
#mbt-trip-planner .mbt-group-inner .mbt-leg {
  margin-top: 7px;
  padding-left: 0;
}
#mbt-trip-planner .mbt-group-inner .mbt-leg::before,
#mbt-trip-planner .mbt-group-inner .mbt-leg::after { display: none; }

/* Chevron helper (if you use .mbt-chevron span) */
#mbt-trip-planner .mbt-chevron {
  margin-left: auto;
}

/* =========================================
   Universal chevron behavior for ALL toggles
   ========================================= */

#mbt-trip-planner summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* default (closed) */
#mbt-trip-planner .mbt-chevron {
  transition: transform 0.15s ease;
}

/* open state */
#mbt-trip-planner details[open] > summary .mbt-chevron {
  transform: rotate(90deg);
}

/* =========================================
  Map toggle (square corners)
  ========================================= */

#mbt-trip-planner .mbt-map-toggle { margin-top: 14px; }

#mbt-trip-planner .mbt-map-toggle > summary {
  background: #f3f3f3;
  border: 1px solid #d7d7d7;
  border-radius: 0;
  padding: 10px 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between; /* chevron right */
}
#mbt-trip-planner .mbt-map-inner { padding-top: 10px; }

/* =========================================
  Destination highlight + Buy link
  ========================================= */

#mbt-trip-planner .mbt-destination,
#mbt-trip-planner .leg-destination {
  margin-top: 14px;
  background: var(--mbt-dest);
  padding: 10px 12px;
  border-radius: 0;
  font-weight: bold;
  color: var(--mbt-text);
}

#mbt-trip-planner .mbt-buy {
  text-align: center;
  margin: 30px 0 20px 0;
}
#mbt-trip-planner .mbt-buy a {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mbt-purple);
  text-decoration: underline;
  font-size: 19px;
}


/* =========================================
  AI Trip Guide
  ========================================= */

#mbt-trip-planner .ai-trip-guide {
  padding: 20px;
  background-color: var(--mbt-purple);
}

#mbt-trip-planner .ai-trip-guide section {
  padding: 20px;
  background-color: var(--mbt-soft2);
}

#mbt-trip-planner .ai-trip-guide section .title {
  font-size: 17px;
  margin-top: 0;
  color: var(--mbt-purple);
}

#mbt-trip-planner .ai-trip-guide section a {
  color: var(--mbt-purple);
  text-decoration: underline;
}



#mbt-trip-planner .mbt-place-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mbt-trip-planner .mbt-place-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
}

#mbt-trip-planner .mbt-place-card:hover {
  border-color: #d6c0cf; /* subtle purple/pink hover */
}

#mbt-trip-planner .mbt-place-text {
  flex: 1;
  min-width: 0;
}

#mbt-trip-planner .mbt-place-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

#mbt-trip-planner .mbt-place-blurb {
  font-size: 12.5px;
  line-height: 1.25;
  opacity: 0.95;
}

#mbt-trip-planner .mbt-place-thumb {
  width: 92px;
  min-width: 92px;
  height: 62px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid #e6e6e6;
}

#mbt-trip-planner a.mbt-place-card {
  text-decoration: none!important;
  color: black!important;
}

#mbt-trip-planner .notification.is-warning {
  background-color: #fff3ce;
  text-align: center;
  padding: 15px;
  border-radius: 8px;
}

/*------------------------------------*\
    THEME COLORS and FORMATTING
\*------------------------------------*/

*,
*:after,
*:before {
    box-sizing: border-box;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font: 400 16px/1.6 "Inter", sans-serif;
    font: 400 1.6rem/1.6 "Inter", sans-serif;
}

.inherit {
    color: inherit;
}

.small-text {
    font-size: 1.2rem;
}

.standard-text {
  font-size: 1.6rem;
}

.header-extra-small {
  font-size: 1.8rem;
}

.header-small {
  font-size: 2.0rem;
}

.header-medium {
  font-size: 2.4rem;
}

.header-large {
  font-size: 3rem;
}

.header-xlarge {
  font-size: 3.6rem;
}

.basic-rollover {
  transition: all 0.5s ease-in-out;
}
.basic-rollover:hover {
  opacity: 0.7;
}

.height-100 {
  height: 100%;
}

.width-100 {
  width: 100%!important;
}

.lazy-load {
  opacity: 0;
 -moz-animation: fadeIn .4s ease-in;
  -webkit-animation: fadeIn .4s ease-in;
  animation: fadeIn ease-in .4s 1;
  -moz-animation-delay: .4s;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.shadow-on-box {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}

.round-corners {
  border-radius: 10px;
}

.centered {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.light-weight {
    font-weight: 100;
}

.italic {
    font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.no-text-decoration {
  text-decoration: none!important;
}

.row-reverse {
  flex-direction: row-reverse;
}

.flex-vcenter {
  display: flex;
  align-items: center;
}

.p-0 {
  padding: 0px;
}

.p-3 {
  padding: 3px;
}

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-25 {
  padding: 25px;
}

.p-30 {
  padding: 30px;
}

.p-35 {
  padding: 35px;
}

.p-40 {
  padding: 40px;
}

.p-45 {
  padding: 45px;
}

.p-50 {
  padding: 50px;
}

.p-60 {
  padding: 60px;
}

.p-70 {
  padding: 70px;
}

.p-80 {
  padding: 80px;
}

.p-90 {
  padding: 90px;
}

.p-100 {
  padding: 100px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-3 {
  padding-top: 3px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px;
}

.pr-0 {
  padding-right: 0px;
}

.pr-3 {
  padding-right: 3px;
}

.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-100 {
  padding-right: 100px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-3 {
  padding-bottom: 3px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pl-0 {
  padding-left: 0px;
}

.pl-3 {
  padding-left: 3px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-100 {
  padding-left: 100px;
}

.m-0 {
  margin: 0px;
}

.m-3 {
  margin: 3px;
}

.m-5 {
  margin: 5px;
}

.m-10 {
  margin: 10px;
}

.m-15 {
  margin: 15px;
}

.m-20 {
  margin: 20px;
}

.m-25 {
  margin: 25px;
}

.m-30 {
  margin: 30px;
}

.m-35 {
  margin: 35px;
}

.m-40 {
  margin: 40px;
}

.m-45 {
  margin: 45px;
}

.m-50 {
  margin: 50px;
}

.m-60 {
  margin: 60px;
}

.m-70 {
  margin: 70px;
}

.m-80 {
  margin: 80px;
}

.m-90 {
  margin: 90px;
}

.m-100 {
  margin: 100px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-3 {
  margin-top: 3px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.mr-0 {
  margin-right: 0px;
}

.mr-3 {
  margin-right: 3px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-100 {
  margin-right: 100px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-3 {
  margin-bottom: 3px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.ml-0 {
  margin-left: 0px;
}

.ml-3 {
  margin-left: 3px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-100 {
  margin-left: 100px;
}

/*------------------------------------*\
    KEYFRAMES
\*------------------------------------*/

/* IE 11 Fix for animation. Exclude browser prefix */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* FireFox fix for animation. Inlcude 'moz' prefixed keyframes element */
@-moz-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}