/*Flex*/
:root {
  --picbutton-gradient-color: #000;
  --picbutton-overlay-color: #000;
  --picbutton-gradient-opacity: 0.4;
  --picbutton-gradient-opacity-hover: 0.8;
  --picbutton-overlay-opacity: 0.5;
  --picbutton-overlay-opacity-hover: 0.7;
  --picbutton-button-color: #8a9995;
  --picbutton-transition-duration-in: 0.75s;
  --picbutton-transition-duration-out: 0.5s;
  --picbutton-button-transition-duration: 0.25s;
  --picbutton-zoom: 1.08; }

.lloydpicbutton__container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden; }
  .lloydpicbutton__container:before, .lloydpicbutton__container:after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none; }
  .lloydpicbutton__container:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity var(--picbutton-transition-duration-out) ease-out; }
  .lloydpicbutton__container:after {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    opacity: 0.5; }
  .lloydpicbutton__container, .lloydpicbutton__container:link, .lloydpicbutton__container:visited, .lloydpicbutton__container:hover, .lloydpicbutton__container:focus, .lloydpicbutton__container:active {
    color: #fff; }
  .lloydpicbutton__container:hover:before, .lloydpicbutton__container:focus:before, .lloydpicbutton__container:active:before {
    transition: opacity var(--picbutton-transition-duration-in) ease-out; }
  .lloydpicbutton__container:hover .lloydpicbutton__button, .lloydpicbutton__container:focus .lloydpicbutton__button, .lloydpicbutton__container:active .lloydpicbutton__button {
    background-color: var(--picbutton-button-color);
    color: #fff;
    border-color: var(--picbutton-button-color); }
  .lloydpicbutton__container, .lloydpicbutton__container * {
    text-decoration: none !important; }
  .lloydpicbutton__container h3 {
    color: inherit; }
.lloydpicbutton__height {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 1px;
  -ms-flex: 0 0 1px;
  flex: 0 0 1px;
  width: 1px; }
.lloydpicbutton--height-16x9 .lloydpicbutton__height {
  padding: 0 0 56.25%; }
.lloydpicbutton--height-4x3 .lloydpicbutton__height {
  padding: 0 0 75%; }
.lloydpicbutton--height-1x1 .lloydpicbutton__height {
  padding: 0 0 100%; }
.lloydpicbutton--height-2x1 .lloydpicbutton__height {
  padding: 0 0 50%; }
.lloydpicbutton--height-3x1 .lloydpicbutton__height {
  padding: 0 0 33%; }
.lloydpicbutton--height-4x1 .lloydpicbutton__height {
  padding: 0 0 25%; }
.lloydpicbutton--align-top-left:before {
  opacity: var(--picbutton-gradient-opacity);
  background-image: linear-gradient(to bottom, var(--picbutton-gradient-color), transparent); }
.lloydpicbutton--align-top-left:hover:before, .lloydpicbutton--align-top-left:focus:before, .lloydpicbutton--align-top-left:active:before {
  opacity: var(--picbutton-gradient-opacity-hover); }
.lloydpicbutton--align-top-left .lloydpicbutton__content {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
  text-align: left; }
.lloydpicbutton--align-bottom-left:before {
  opacity: var(--picbutton-gradient-opacity);
  background-image: linear-gradient(to top, var(--picbutton-gradient-color), transparent); }
.lloydpicbutton--align-bottom-left:hover:before, .lloydpicbutton--align-bottom-left:focus:before, .lloydpicbutton--align-bottom-left:active:before {
  opacity: var(--picbutton-gradient-opacity-hover); }
.lloydpicbutton--align-bottom-left .lloydpicbutton__content {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
  text-align: left; }
.lloydpicbutton--align-center:before {
  opacity: var(--picbutton-overlay-opacity);
  background-color: var(--picbutton-overlay-color); }
.lloydpicbutton--align-center:hover:before, .lloydpicbutton--align-center:focus:before, .lloydpicbutton--align-center:active:before {
  opacity: var(--picbutton-overlay-opacity-hover); }
.lloydpicbutton--align-center .lloydpicbutton__content {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  text-align: center; }
.lloydpicbutton--hide-button .lloydpicbutton__button {
  display: none; }
.lloydpicbutton--has-border:after {
  border: 1px solid currentColor; }
.lloydpicbutton--has-zoom .lloydpicbutton__image {
  transform: scale(1);
  transition: transform var(--picbutton-transition-duration-out) ease-out; }
.lloydpicbutton--has-zoom:hover .lloydpicbutton__image, .lloydpicbutton--has-zoom:focus .lloydpicbutton__image, .lloydpicbutton--has-zoom:active .lloydpicbutton__image {
  transform: scale(var(--picbutton-zoom));
  transition: transform var(--picbutton-transition-duration-in) ease-out; }
.lloydpicbutton__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover; }
.lloydpicbutton__content {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  position: relative;
  padding: 30px;
  z-index: 2; }
.lloydpicbutton__button {
  display: inline-block;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.7em 1.4em 0.55em 1.4em;
  color: #fff;
  border: 1px solid  #fff;
  transition: background-color var(--picbutton-button-transition-duration) ease-in, color var(--picbutton-button-transition-duration) ease-in, border-color var(--picbutton-button-transition-duration) ease-in; }