/*
 * Helper Classes for 3rd and 3rd
 * Extracted from Mira Mar Sarasota site
 * Utility classes for spacing, sizing, colors, and alignment
 */

/* ============================================
   COLOR HELPER CLASSES
   ============================================ */

.green *,
.green {
  color: #87A80E !important;
}


/* ============================================
   TEXT WIDTH HELPER CLASSES - DESKTOP
   ============================================ */

@media (min-width: 1000px) {
  .text-width-40 {
    max-width: 40% !important;
  }

  .text-width-45 {
    max-width: 47% !important;
  }

  .text-width-50 {
    max-width: 50% !important;
  }

  .text-width-55 {
    max-width: 55% !important;
  }

  .text-width-53 {
    max-width: 53% !important;
  }

  .text-width-60 {
    max-width: 60% !important;
  }

  .text-width-62 {
    max-width: 62% !important;
  }

  .text-width-65 {
    max-width: 65% !important;
  }

  .text-width-66 {
    max-width: 66% !important;
  }

  .text-width-59 {
    max-width: 59% !important;
  }

  .text-width-68 {
    max-width: 68% !important;
  }

  .text-width-69 {
    max-width: 69% !important;
  }

  .text-width-70 {
    max-width: 70% !important;
  }

  .text-width-75 {
    max-width: 75% !important;
  }

  .text-width-78 {
    max-width: 78% !important;
  }

  .text-width-80 {
    max-width: 80% !important;
  }

  .text-width-83 {
    max-width: 83% !important;
  }

  .text-width-85 {
    max-width: 85% !important;
  }

  .text-width-87 {
    max-width: 87% !important;
  }

  .text-width-90 {
    max-width: 90% !important;
  }

  .text-width-92 {
    max-width: 92% !important;
  }

  .text-width-93 {
    max-width: 93% !important;
  }

  .text-width-94 {
    max-width: 94% !important;
  }

  .text-width-95 {
    max-width: 95% !important;
  }

  /* MARGIN TOP HELPERS - DESKTOP */

  .m-t-10 {
    margin-top: 10px !important;
  }

  .m-t-20 {
    margin-top: 20px !important;
  }

  .m-t-30 {
    margin-top: 30px !important;
  }

  .m-t-40 {
    margin-top: 40px !important;
  }

  .m-t-50 {
    margin-top: 50px !important;
  }

  .m-t-60 {
    margin-top: 60px !important;
  }

  .m-t-70 {
    margin-top: 70px !important;
  }

  .m-t-80 {
    margin-top: 80px !important;
  }

  .m-t-90 {
    margin-top: 90px !important;
  }

  .m-t-100 {
    margin-top: 100px !important;
  }

  /* MARGIN RIGHT HELPERS - DESKTOP */

  .m-r-10 {
    margin-right: 10px !important;
  }

  .m-r-20 {
    margin-right: 20px !important;
  }

  .m-r-30 {
    margin-right: 30px !important;
  }

  .m-r-40 {
    margin-right: 40px !important;
  }

  .m-r-50 {
    margin-right: 50px !important;
  }

  /* MARGIN LEFT HELPERS - DESKTOP */

  .m-l-10 {
    margin-left: 10px !important;
  }

  .m-l-20 {
    margin-left: 20px !important;
  }

  .m-l-30 {
    margin-left: 30px !important;
  }

  .m-l-40 {
    margin-left: 40px !important;
  }

  .m-l-50 {
    margin-left: 50px !important;
  }

  .p-b-20 {
    padding-bottom: 20px !important;
  }

  /* PADDING LEFT HELPERS - DESKTOP */

  .p-l-20px {
    padding-left: 20px !important;
  }

  .p-l-3vw {
    padding-left: 3vw !important;
  }

  .p-l-5vw {
    padding-left: 5vw !important;
  }

  .p-l-10vw {
    padding-left: 10vw !important;
  }

  /* PADDING TOP HELPERS - DESKTOP */

  .p-t-20px {
    padding-top: 20px !important;
  }

  .p-t-50px {
    padding-top: 50px !important;
  }
}

/* ============================================
   TEXT WIDTH AND MARGIN HELPERS - MOBILE
   ============================================ */

@media (max-width: 999px) {
  .text-width-40 {
    max-width: 85% !important;
  }

  .text-width-45 {
    max-width: 90% !important;
  }

  .text-width-50 {
    max-width: 90% !important;
  }

  .text-width-55 {
    max-width: 92% !important;
  }

  .text-width-60 {
    max-width: 95% !important;
  }

  .text-width-62 {
    max-width: 95% !important;
  }

  .text-width-66 {
    max-width: 95% !important;
  }

  .text-width-75 {
    max-width: 100% !important;
  }

  .text-width-80 {
    max-width: 100% !important;
  }

  .text-width-83 {
    max-width: 100% !important;
  }

  .text-width-85 {
    max-width: 100% !important;
  }

  .text-width-87 {
    max-width: 100% !important;
  }

  .text-width-90 {
    max-width: 100% !important;
  }

  .text-width-92 {
    max-width: 100% !important;
  }

  .text-width-95 {
    max-width: 100% !important;
  }

  /* MARGIN TOP HELPERS - MOBILE (proportionally smaller) */

  .m-t-20 {
    margin-top: 20px !important;
  }

  .m-t-30 {
    margin-top: 18px !important;
  }

  .m-t-40 {
    margin-top: 24px !important;
  }

  .m-t-50 {
    margin-top: 30px !important;
  }

  .m-t-60 {
    margin-top: 36px !important;
  }

  .m-t-70 {
    margin-top: 42px !important;
  }

  .m-t-80 {
    margin-top: 48px !important;
  }

  .m-t-90 {
    margin-top: 54px !important;
  }

  .m-t-100 {
    margin-top: 60px !important;
  }

  .m-b-0 {
    margin-bottom: 0px !important;
  }

  .m-b-5 {
    margin-bottom: 5px !important;
  }

  .m-b-10 {
    margin-bottom: 10px !important;
  }

  /* TEXT ALIGNMENT HELPER - MOBILE */

  .justify-me {
    text-align: justify;
  }

  .left-align-me {
    text-align: left !important;
  }
}

.m-b-20 {
  margin-bottom: 20px !important;
}

/* ============================================
   ALIGNMENT HELPER CLASSES (ALL BREAKPOINTS)
   ============================================ */

.center-me {
  margin: 0 auto;
  text-align: center;
}

.right-me {
  margin-left: auto;
}

.left-me {
  margin-right: auto;
}

/* ============================================
   BUTTON WIDTH HELPER CLASSES (ALL BREAKPOINTS)
   ============================================ */

.btn-width-15 {
  min-width: 15%;
}

.btn-width-20 {
  min-width: 20%;
}

.btn-width-25 {
  min-width: 25%;
}

.btn-width-30 {
  min-width: 30%;
}

.btn-width-40 {
  min-width: 40%;
}

.btn-width-50 {
  min-width: 50%;
}

.btn-width-60 {
  min-width: 60%;
}

.btn-width-70 {
  min-width: 70%;
}

.btn-width-80 {
  min-width: 80%;
}

.btn-width-90 {
  min-width: 90%;
}

.btn-width-100 {
  min-width: 100%;
}

@media (max-width: 819px) {

  .btn-width-20,
  .btn-width-25 {
    min-width: 80% !important;
  }
}