/*-----------------------------------------------------------------------------
author:    www.visityakima.com
-----------------------------------------------------------------------------*/


/* =Yakima Convention Center Default page
-----------------------------------------------------------------------------*/

/* =Slide Show */

 .slideshow-container {
      position: relative;
      width: 100%;
	  height: 80vh; /* 2/3 of device height */
      overflow: hidden;
	 max-width:2200px;
	margin:0  auto;
    }

#bg-video, .fallback-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .fallback-img {
      display: none;
    }

.overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-color: #0f3e52;
      mix-blend-mode: multiply;
      z-index: 2;
    }

.overlayColor {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-color: #0f3e52;
      mix-blend-mode: color;
      z-index: 2;
    }

@media (max-width: 768px) {
      #bg-video {
        display: none;
      }
      .fallback-img {
        display: block;
      }
	.overlay {
      display: none;
    }
}

.slides {
      position: relative;
      z-index: 3;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      padding: 12rem 7.5% 3rem 7.5%;
	  width:85%;
      color: white;
    }

.slide {
      position: absolute;
      opacity: 0;
      visibility: hidden;
      max-width: 100%;	
    }

    .slide.active {
      opacity: 1;
      visibility: visible;
    }

    .slide h2 {
      font-size: 8vw;
      font-weight: normal;
      line-height: .9;
      color: #97d2dc;
      text-transform: uppercase;
	  font-family:'bebasneuepro-bold', Arial, sans-serif;
	background: -webkit-linear-gradient(#9ad1d6, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    }

    .slide h2 span {
      display: block;
      color: #fff;
      text-transform: uppercase;
    }

    .slide p {
      font-size: 1.25vw;
      margin-top: 1rem;
      max-width: 700px;
    }

.btn {
      display: inline-block;
      margin-top: 2rem;
      padding: 0.8rem 1.5rem;
      background-color: #c56128;
      color: white;
      text-decoration: none;
      border-radius: 20px;
      font-size: 1rem;
      text-transform: uppercase;
      transition: background-color 0.3s;
	font-family:'bebasneuepro-bold', Arial, sans-serif;font-size:1.75em;
    }

.btn:hover {
      background-color: #fff;
	  color: #0f3e52;
    }

    .arrows {
      position: absolute;
      width: 100%;
      bottom: 5%;
      transform: translateY(-50%);
      z-index: 4;
      display: flex;
      justify-content: space-between;
      padding: 0 1rem;
    }

    .arrow {
      background: rgba(0,0,0,0.4);
      color: white;
      border: none;
      font-size: .75rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.3s;
    }

    .arrow:hover {
      background: rgba(197,97,40,0.7);
    }

    @media (max-width: 768px) {
      .slide h2 { font-size: 9vw; }
      .slide h2 span { font-size: 9vw; }
      .slide p { font-size: 3vw; }
      .btn { font-size: 3vw; padding: 1rem 2rem; }
	   .slideshow-container {
	  height: 70vh; 
    }
    }

/* =Quote Slides */

.quotereviewContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    transition: transform 0.5s ease;
	}

  .quotereview {
    background: #d4ebf6;
    border-radius: 12px;
    padding: 5%;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
	font-family:'bebasneuepro-bold', Arial, sans-serif;	
  }

  .quotereview::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 30px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #d4ebf6 transparent transparent transparent;
  }

  .quotereview .quotedetail {
    margin: 0 0 0 0;
    font-size: 1.5rem;
    color: #024057;
	text-transform: uppercase;
  }

  .quotereview .quoteauthor {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #c56128;
  }

  .quotereview .quotecompany {
    font-size: 0.8rem;
    font-style: italic;
    color: #c56128;
  }

@media (max-width: 768px) {
.quotereviewContainer {
    grid-template-columns:1fr;
    gap: 0;
	}
	
.quotereview {
    margin:0 0 20px 0;
  }
}