@charset "UTF-8";

/*
*   home.css (/landing/home OR /)
***************************************************************************** */
/* element selectors  */
html {
    font-family: sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 10px;
}

body {
  background-color: #e9eaea;
    margin: 0;
    font-size: 16px;
    line-height: 1.42857143;
    color: #333;
    font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
    background: linear-gradient(#ffda85, #e9eaea, #87d6ec);
}

img {
    border: 0;
    vertical-align: middle;
}

button, input[type=button], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

p {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: normal;
}

a, a:link, a:visited {
    text-decoration: none;
    color: #3596b0;
    background-color:transparent;
}

a:hover {
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    -o-transition-duration: .6s;
    transition-duration: .6s;

    color: #f9be34;
    outline:0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* -------------------------------------------------------------------------- */

/* general selectors */
.slide-button {
  transition: linear all 0.2s;
  display: block;
  padding: 6px 12px;
  margin: 15px 0 0;
  max-width: 114px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;

  -ms-touch-action: manipulation;
  touch-action: manipulation;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  background-image: none;
  background-color: transparent;
  border: 2px solid #eea236;
  border-radius: 4px;
}

a.slide-button {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.slide-button:hover {
  transition: linear background-color 0.2s;
    background-color: #ec971f;
}

.slide-button:active {
  transition: linear scale 0.2s;
  transform: scale(0.95)
}

/* ------------------------------------------------------------------------------------- */
/* Jumbotron (contains search form, slide text, and a random background image) */
.jumbotron {
    padding: 80px 0 30px;
    min-height: 280px;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f9be34;
    margin-bottom: 0;
    color: #fff;
}

.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
}

/* in order to take the inline style out of the jumbotron, a class has been made for each of the possible backgrounds that gets sent from the controller */
.backgroundImg1 {
    background-image: url("/images/backgrounds/carouselbg1.jpg")
}
.backgroundImg2 {
    background-image: url("/images/backgrounds/carouselbg2.jpg")
}
.backgroundImg3 {
    background-image: url("/images/backgrounds/carouselbg3.jpg")
}
.backgroundImg4 {
    background-image: url("/images/backgrounds/carouselbg4.jpg")
}
.backgroundImg5 {
    background-image: url("/images/backgrounds/carouselbg5.jpg")
}

/* animation for the "connectin you to what you need" section */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/* content within the learn more block under inputs: "connecting you to what you need" */
.wrapper-slidetext {
    width: 1196px;
    max-width: 90%;
    margin: auto;
}

.slidetext {
    display: block;
    font: normal 14px 'Open Sans', Arial, Helvetica, Sans-serif;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    margin-top: 20px;
    padding: 20px;
    width: 41.66666667%;
}

.slidetext p {
    font-size: 15px;
    color: #fff;
}

.slidetext-header {
    margin: 0 0 20px;
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
    color: #fff;
}

/* "What You Need" text */
.slidetext-header-large {
    display: block;
    font-weight: 600;
    font-size: 36px;
    color: #fff;
}

.slidetext-subheader {
    font-size: 24px;
    font-weight: 400;
}
/* end of jumbotron  */
/* ------------------------------------------------------------------------------------- */
/* Featured Categories (fc) */

/* list of featured categories (ie 'food/dining', 'health/wellness', etc) */

 /* wrapper-fc & inner are seperated for background-color & position purposes
 wrapper-fc serves as the background color, inner serves as the positioner for the inner elements  */

.container-main {
  margin: 0;
  min-height: 800px;
}

.fl-leaderboards-wrapper {
  max-width: 1170px;
  padding: 0 15px 30px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}

.wrapper-fc {
  background: #f9be34;
  position: relative;
  display: flex;
  padding: 12px 0;
  margin-bottom: 20px;
}

.fc-inner {
  display: block;
  margin: auto;
}

/* styling only for the default options. due to each category being shorter in length than the other typical options, setting a width to spread out the options a bit */
.fc-default-inner {
  width: 100%;
}

.fc-item-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  align-items: stretch;
  position: relative;
  z-index: 3;
  line-height: 1;
  padding-inline-start: 0;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.wrapper-fc-item {
  transition: linear all 0.3s;
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid black;
  padding-left: 3px;
  width: 100%;
}

/* final fc-item set without a border to avoid a leftover border on the far right side */
.wrapper-fc-item:nth-child(6) {
  border-right: none;
}

.fc-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: linear all 0.2s;
  cursor: pointer;
  position: relative;
  list-style-type: none;
  color: rgb(22, 22, 22) !important;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  padding: 2px;
  width: 100%;
}

.fc-item:hover {
  transition: linear all 0.2s;
  transform: scale(1.1);
  filter: invert(32%) sepia(12%) saturate(2126%) hue-rotate(147deg) brightness(94%) contrast(92%);
}

.fc-item:active {
  transition: linear all 0.2s;
  transform: scale(0.99);
}

.fc-icons {
  height: 22px;
  width: 22px;
}

/* end of featured categories */

/* ------------------------------------------------------------------------------------- */
/* Featured Listings (fl), just below featured categories */
.wrapper-download-app {
    display: block;
    width: 100%;
    background: #f0f0f0;
    padding: 10px 0;
    margin: 10px auto;
    font: italic 10px 'Open Sans', Arial, Helvetica, Sans-serif;
    color: #c5c4c4;
    position: relative;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgb(44, 44, 44);
}

.wrapper-download-app img {
    margin-bottom: 4px;
    border: solid 1px #ccc;
  }

.wrapper-download-app p, .wrapper-download-app a {
    font: bold 14px 'Open Sans', Arial, Helvetica, Sans-serif;
    font-style: italic;
    margin: 5px 0 0 0;
}

.app-banner {
    width: 100%;
    margin-bottom: 5px;
}

.hover-tint {
    transition: ease-out all 0.3s;
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hover-tint:hover {
    transition: ease-in all 0.3s;
    background-color: rgba(0, 0, 0, 0.15);
}

.wrapper-bottom-fl {
    background-color: #e9eaea;
}

.wrapper-bottom-fl .fl-wrap-triple {
    max-width: 1170px;
}

.wrapper-bottom-fl .fl-list-address {
    color: #3596b0;
}

/* end of fl section */
/* ------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------ */
/* Animations */
/* ------------------------------------------------------------------------------------------ */
.appear-animation {
    animation-duration: 0.75s;
    animation-name: appear;
    animation-fill-mode: backwards;
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* *****************************************************************************
    Media Breakpoints
***************************************************************************** */
@media screen and (max-width:1200px), (max-device-width: 1200) {
  .container-main, .search-form-container {
    width: auto;
    margin-right: auto;
    margin-left: auto;
  }

  .search-form-container {
    width: 95%;
  }

  .searchwrapper input.topsearch {
    width: 49%
  }

  p.slidehead {
    font-size: 30px;
    line-height: 38px
  }

  .fc-item-list {
    grid-template-columns: repeat(6, 1fr);
    width: 95%;
  }

  .extra-fc-item {
    display: none;
  }

  .wrapper-fc-item:nth-child(6) {
    border-right: none;
  }

  .fc-inner {
    width: 95%;
  }

  .wrapper-download-app {
    width: 95%;
  }
}

@media screen and (max-width:992px), (max-device-width: 992px) {
  .container-main {
    width: auto;
  }

  .searchwrapper input {
    height: 42px;
    font: normal 16px 'Open Sans', Arial, Helvetica, Sans-serif;
    color: #8f8e8e;
    width: 49%;
    font-style: italic;
    border: solid 1px #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-left: 55px
  }

  .searchwrapper input, .searchwrapper input.near, .searchwrapper input.find {
    margin-bottom: 10px;
    width: 100%;
  }

  .searchwrapper input.find {
    margin-left: 0;
  }

  .searchwrapper .slide-button {
    display: block;
    float: none;
    margin: 10px auto;
    height: 30px
  }

  .wrapper-slidetext {
    width: 85.5%;
  }

  .slidetext {
    width: 100%;
  }

  .slidetext {
    display: block;
    font-size: 12px;
  }

  .slidetext p {
    font-size: 15px;
  }

  p.slidehead {
    font-size: 24px;
    line-height: 38px;
  }

  .slidehead_big {
    font-weight: 600;
    font-size: 36px
  }

}

@media screen and (max-width:768px), (max-device-width: 768px) {
  .container-main {
    width: auto;
  }

  .jumbotron {
    background-color: #3596b0;
    min-height: 378px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .jumbotron input {
    height: 30px
  }

  .wrapper-fc {
    height: auto;
  }

  .fc-item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: row;
    padding-left: 0;
  }

  .wrapper-fc-item:nth-child(3) {
    border-right: none;
  }

  .wrapper-fc-item {
    margin: auto;
  }

  .wrapper-download-app {
    width: auto;
  }
}

@media screen and (max-width: 576px), (max-device-width: 576px) {
  .container-main {
    padding: 0 15px 15px 15px;
    min-height: 0;
  }

  .wrapper-slidetext {
      width: 95%;
  }
}

@media screen and (max-width:480px), (max-device-width: 480px) {

  .fc-item-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: row;
  }

  .fc ul {
    padding: 10px;
  }

  /* for greater specificity to override previous stylings for wrapper-fc-item. mainly targeting the change in border */
  .fc-item-list .wrapper-fc-item {
    border-right: 1px solid black;
    width: 100%;
    text-align: center;
  }

  .wrapper-fc-item:nth-child(even) {
    border-right: none;
  }
}