/**
 * @file
 * Styling for Views in Bartik.
 */

/* Tab styles */
.views-displays .tabs .open > a {
  border-radius: 7px 7px 0 0;
}
.views-displays .tabs .open > a:hover,
.views-displays .tabs .open > a:focus {
  color: #0071b3;
}
.views-displays .secondary .form-submit {
  font-size: 0.846em;
}

/* Tabs action list styles */
.views-displays .tabs .action-list {
  padding: 0;
}

/* Contextual filter options styles */
.views-filterable-options .filterable-option:nth-of-type(even) .form-type-checkbox {
  background-color: #f9f9f9;
}

/* Views action dropbutton styles */
.views-ui-display-tab-actions .dropbutton .form-submit {
  color: #0071b3;
}
.views-ui-display-tab-actions .dropbutton .form-submit:hover,
.views-ui-display-tab-actions .dropbutton .form-submit:focus {
  color: #018fe2;
}

/* Views exposed form styles */
.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
}
/* Container for the results */
.views-exposed-form div.contextual-region {
  display: flex;
  flex-wrap: wrap;
}
/* Exposed form */
.views-exposed-form form {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
}

.views-exposed-form form .form-item {
  flex-basis: 20%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Ensures the label / input are on different lines */
.views-exposed-form form label {
  width: 100%;
}
/* text input */
.views-exposed-form form input {
  max-width: 150px;
  display: block;
}
/* select */
.views-exposed-form form select {
  min-width: 150px;
  max-width: 90%;
  font-size: inherit;
  padding: 0.5em;
  width: auto;
}


/* Submit button */
.views-exposed-form .form-actions {
  /* Ensure the buttons are on a new line */
  flex-basis: 100%;
}

/* pager */
.views-exposed-form nav {
  width: 100%;
  clear: both;
}

/***
 * Homepage views slideshow
 */
#block-views-block-home-slideshow-block-1,
.views-slideshow {
  position: relative;
}
/*
  Views slidshow not responsive:
  https: //www.drupal.org/project/views_slideshow/issues/2632406
  The !important fix there solves responsiveness, but breaks the animation.
  Switching to flexslider instead
*/
.flex-caption {
  visibility: hidden;
}

/* Style the previous and next buttons */
.views-slideshow-controls-bottom .views_slideshow_controls_text_next,
.views-slideshow-controls-bottom .views_slideshow_controls_text_previous {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 40px 80px;
  z-index: 98;
}
/* Position the previous button to the very left */
.views-slideshow-controls-bottom .views_slideshow_controls_text_previous {
  left: 0;
  background-image: url(../assets/images/large_left.png);
}

/* Position the next button to the very right */
.views-slideshow-controls-bottom .views_slideshow_controls_text_next {
  right: 0;
  background-image: url(../assets/images/large_right.png);
}
/* Style the buttons on hover */
.views_slideshow_controls_text span:hover {
  background-position: center top;
}

/* Hide the pause button */
.views-slideshow-controls-bottom .views_slideshow_controls_text_pause {
  display: none;
}

.views-slideshow-controls-bottom .views_slideshow_controls_text_next::before,
.views-slideshow-controls-bottom .views_slideshow_controls_text_previous::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
}

/* Hide the previous and next text visually */
.views-slideshow-controls-bottom .views_slideshow_controls_text_next a,
.views-slideshow-controls-bottom .views_slideshow_controls_text_previous a {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/***
 * DrinkSense (tools & info) slideshow view block
 */
#views_slideshow_cycle_main_drinksense_tools_info-block_1 .views-row {
  width: 376px;
  height: 211px;
  margin-right: 0px;
  float: left;
}

/***
 * Home page flip boxes - no flip anymore.
 */
.services-box {
  height: 260px;
  width: 100%;
}

#block-views-block-home-flipbox-block-2 .services-box {
  margin-bottom: 20px;
}
.services-box .inner {
  position: relative;
}

.services-box .front {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  margin: 10px 0;
  height: 260px;
  width: 100%;
}

@media (max-width: 767px) {
  .services-box {
    height: 270px;
  }
  .services-box .front {
    height: 270px;
  }
}

.services-box .front {
  z-index: 2;
  background-clip: padding-box;
  border: 1px solid #616161;
  border-radius: 2px;
  box-sizing: border-box;
  color: #231f20;
  padding: 15px 15px;
}
.services-box .front::before,
.services-box .front::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  background: #616161;
}
.services-box .front::before {
  top: 0;
}
.services-box .front::after {
  bottom: 0;
}

.services-box .front a,
.services-box .front a:hover,
.services-box .front a:visited {
  color: #231f20;
}
.services-box .front a:hover {
  text-decoration: underline;
}

.services-box .front h3 {
  margin: 5px 0;
  font-weight: 200;
}
/* The first box has a wide background, but let's limit the text width */
.item-1 .services-box .front p {
  max-width: 500px;
  margin: 0 auto;
}

.services-box .front i {
  font-size: 80px;
  text-align: center;
}

.services-box .front img {
  margin: 10px auto;
  position:absolute;
  bottom: 20px;
  height: 75px;
  left: calc(50% - 55px);
  padding-top: 2px;
}

.services-box .corner {
  position: absolute;
  right: 12px;
  bottom: 20px;
  opacity: 0.4;
}

.services-box .corner i {
  font-size: 2em;
}

/***
 * Promotion Ads
 */
/* Default styles for small image */
#block-views-block-promotion-block-1 .views-field-field-promo-large {
  display: none;
}

#block-views-block-promotion-block-1 .views-field-field-promo-small {
  display: block;
}

/* Media query for screen size larger than 767px */
@media screen and (min-width: 768px) {
  #block-views-block-promotion-block-1 .views-field-field-promo-large {
    display: block;
  }

  #block-views-block-promotion-block-1 .views-field-field-promo-small {
    display: none;
  }
}

/***
 * Headshots - card layout with col-lg-3
 */
@media (min-width: 1200px) {
  .views-flexbox-cards .col-lg-3 {
    width: calc(25% - 2em);
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .views-flexbox-cards .col-md-4 {
    width: calc(33.33% - 2em);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .views-flexbox-cards .col-sm-4 {
    width: calc(33.33% - 2em);
  }
}
@media (max-width: 767px) {
  .views-flexbox-cards .col-xs-6 {
    width: calc(50% - 2em);
  }
}

/* Make sure each card doesn't stretch horizontally, but has same height */
#block-views-block-headshots-block-1 .views-view-flexbox .views-flexbox-item {
  flex-grow: 0;
  height: 240px;
}

/* Make sure content alignment center actually works. */
.views-flexbox-align-content-center .views-flexbox-item {
  text-align: center;
}
/* Make the headshot image 150x150 even the real image is bigger, so it looks
   more sharp */
.views-field-field-headshot-media img {
  width: 150px;
  height: auto;
}

/***
 * Views news releases - page
 */
.view-id-news-releases .views-row {
  padding: 20px;
}

.view-id-news-releases .banding .views-row:nth-of-type(odd) {
  background-color: #eee;
  border: 1px dotted #999;
}

/***
 * Views news releases - block (in section-bottom)
 * View's css class: view-latest-news
 */
#section-bottom .view-latest-news {
  padding: 5px;
}

#section-bottom .view-latest-news .views-field-title {
  margin: 10px 0;
}

#section-bottom .view-latest-news .views-field-title a {
  font-size: 17.5px;
  font-family: 'ralewayregular';
  color: #fff;
  font-weight: normal;
}

#section-bottom .view-latest-news .views-field-title a:hover {
  color: #b0b2bc;
}

#section-bottom .view-latest-news .views-field-field-publish-date {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  float: left;
  margin: 0 10px 0 0;
  padding: 10px 10px;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out 0.5s linear;
  -moz-transition: all 0.3s ease-in-out 0.5s linear;
  -o-transition: all 0.3s ease-in-out 0.5s linear;
  -ms-transition: all 0.3s ease-in-out 0.5s linear;
  transition: all 0.3s ease-in-out 0.5s linear;
  line-height: 10px;
  background: #231f20;
}

/***
 * Node news releases
 */
.node--type-news-release .node__content > div {
  padding: 20px;
}

/***
 * Views locations (on contact us page)
 */
.block-views-blocklocations-block-1.contact-us {
  background-color: #ececec;
  margin-left: 1em;
  margin-right: 1em;
}

.contact-us {
  border-style: solid;
  border-color: darkgrey;
  border-width: 1px;
}

.contact-us p.address {
  margin-bottom: 0;
}

.contact-us footer {
  background-color: #ececec;
}
.contact-us footer p {
 padding-left: 5px;
}

.contact-us h3 {
  font-size: 14px;
  height: 2em;
  padding-left: 5px;
}

.contact-us .view-grouping-header {
  padding-left: 5px;
  font-size: 14px;
  background-color: lightgrey;
}

.contact-us .views-view-flexbox {
  min-height: 9em;
  padding-left: 5px;
  background-color: #ececec;
}

.contact-us .views-view-flexbox .views-flexbox-item {
  height: 75px;
}