/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**

	Media Queries
	=============

	1.0 - Screen
	2.0 - Orientation
	3.0 - HDPI
	4.0 - Print


	Usage
	=========

	@include min-screen(width){};
	@include max-screen(width){};
	@include screen(min-width, max-width){};

	@include min-screen-height(height){};
	@include max-screen-height(height){};
	@include screen-height(min-height, max-height){};

	@include orientation(orientation){};

	@include hdpi(ratio){};

	Note
	=========
	You CANNOT use @extend inside the media query.


	Credit
	=========
	Rafal Bromirski - http:paranoida.com/
	Licensed under a MIT License

**/
/*--------------------------------------------------------------
1.0 - Screen
--------------------------------------------------------------*/
/*--------------------------------------------------------------
2.0 - Orientation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
3.0 - HDPI
--------------------------------------------------------------*/
/*--------------------------------------------------------------
4.0 - Print
--------------------------------------------------------------*/
/* Aspect Ratio */
[style*="--aspect-ratio"] > :first-child {
  width: 100%; }

[style*="--aspect-ratio"] > img {
  height: auto; }

@supports (--custom: property) {
  [style*="--aspect-ratio"] {
    position: relative; }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio))); }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; } }

iframe[id^="vpf-preview-"] .usc-notification-bar.has-notification-bar .notification-bar {
  display: none !important; }

.wp-block-visual-portfolio {
  padding: 0 0 4rem;
  position: relative;
  top: 20px; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] select {
    appearance: none;
    background-color: #FAFAFA !important;
    background-size: .75rem !important;
    border: 1px solid #E0E0DC !important;
    border-radius: 0 !important;
    color: #1f1e18 !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    height: unset;
    line-height: 1.75rem !important;
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    position: relative;
    text-transform: capitalize !important; }
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] select:hover {
      background-color: #FAFAFA !important; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-filter__style-dropdown,
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-sort__style-dropdown {
    display: flex;
    flex-flow: column nowrap;
    margin: 0 !important; }
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-filter__style-dropdown:before,
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-sort__style-dropdown:before {
      display: block;
      font-size: 1rem !important;
      font-weight: bold !important;
      line-height: 1.25rem !important;
      margin: 0 0 .5rem !important; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-filter__style-dropdown:before {
    content: 'Filter by'; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-sort__style-dropdown:before {
    content: 'Sort by'; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] figure.vp-portfolio__item {
    width: calc(100% - 1rem); }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-img-wrap {
    max-height: 240px; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-overlay {
    margin: 0 !important; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-meta {
    min-height: 200px !important;
    padding: 1rem !important; }
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-meta h2 {
      margin: 0 0 .5rem !important;
      padding: 0; }
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-meta a {
      color: #1f1e18;
      display: block;
      font-size: 1.25rem;
      font-weight: 900;
      line-height: 1.5rem !important;
      text-decoration: none; }
      .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-meta a:hover {
        color: #1f1e18 !important;
        text-decoration: underline; }
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__item-meta-excerpt * {
      font-size: 1rem !important;
      line-height: 1.25rem; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__items {
    display: grid;
    grid-auto-rows: 1fr; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__layout-elements-top.vp-portfolio__layout-elements-align-center {
    justify-content: space-between; }
  .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__pagination-wrap {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 0;
    padding: 0; }
    .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__pagination-wrap .vp-pagination__load-more {
      border: 1px solid #900;
      border-radius: .25rem;
      color: #900;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: .06px;
      line-height: 20px;
      padding: 0.5rem 1rem;
      text-transform: capitalize;
      transition: unset !important; }
      .wp-block-visual-portfolio .vp-portfolio[data-vp-layout="tiles"] .vp-portfolio__pagination-wrap .vp-pagination__load-more:hover {
        background: #900;
        border: 1px solid #900;
        color: white;
        transition: unset !important; }