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

$bg-color: #d9d8c6;
$primary-color: #5b5a5c;
$secondary-color: darken($primary-color, 15%);

body {
  background: $bg-color;
}

li {
  list-style: none;
}

.down-link {
    position: relative;
}

.down-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.order-button {
    padding: 12px;
    border: 1px solid white;
    text-transform:uppercase;
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: white;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    width: -moz-fit-content;
    height: -moz-fit-content;
}

.order-button:hover {
    background-color: white;
}

.order-button > a {
    text-decoration: none;
    color: white;
}

.order-button > a:hover {
    color: #182748;
}



#logos-container {
    margin-top: 50px;
}

#logos {
      max-width: 1200px;
}

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
}


.suga-container {
  background: $primary-color;
  padding: .2em;
  max-width: 570px;
  margin: 50em auto;
  box-shadow: 3px 3px 0px $secondary-color;
  border: 2px solid $secondary-color;
  border-radius: 5px;
}

.suga-slider-wrap {
  overflow: hidden;
  margin: 1em;
}

.suga-slider-group {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

.suga-slide {
  float: left;
  position: relative;
  margin-left: 0;
  padding-right: 8px;
}