.bg-aqua { background-color:var(--cty-brand-aqua); }
.bg-green { background-color:var(--cty-brand-green); }
.bg-purple { background-color:var(--cty-brand-purple); }
.bg-orange { background-color:var(--cty-brand-orange); }
.bg-pine { background-color:var(--cty-brand-pine); }
.bg-pink { background-color:var(--cty-brand-pink); }
.bg-navy { background-color:var(--cty-brand-navy); }

.fg-aqua { color:var(--cty-brand-aqua); }
.fg-green { color:var(--cty-brand-green); }
.fg-purple { color:var(--cty-brand-purple); }
.fg-orange { color:var(--cty-brand-orange); }
.fg-pine { color:var(--cty-brand-pine); }
.fg-pink { color:var(--cty-brand-pink); }
.fg-navy { color:var(--cty-brand-navy); }

/* https://cssgradient.io/ */

.bg-gradient-green-aqua { 
  background: var(--cty-brand-aqua);
  background: linear-gradient(var(--cty-brand-green) 0%, var(--cty-brand-aqua) 100%);
}

.bg-gradient-pink-orange { 
  background: var(--cty-brand-pink);
  background: linear-gradient(var(--cty-brand-pink) 0%, var(--cty-brand-orange) 100%);
}

.bg-purple-lines {
  background-color: var(--cty-brand-aqua);
  background-color: linear-gradient(var(--cty-brand-pink) 0%, var(--cty-brand-orange) 100%);
  background-image:url('https://ctycms.com/az-tempe/purple-lines-1x375-v2.svg');
  background-repeat:repeat-x;
  background-position: center bottom;
  background-size: 1px 375px;
}


/* tempe domino stories */





.tempe-domino-stories {

  .op-domino-row { margin-bottom:1rem; }
  .op-domino-row-even { background-color:var(--cty-brand-pink); color:white; }
  .op-domino-content { text-align:center; }
  @media all and (min-width: 768px) {
    .op-domino-image  { width:60%; padding:0; }
    .op-domino-content { width:40%; padding:2rem; }
  }

  .op-domino-bg-odd {
    background-color:var(--cty-brand-pine); color:white;
    .btn-brand-domino { 
      background-color:var(--cty-brand-pink); 
      border:1px solid var(--cty-brand-pink);  
      color:var(--cty-brand-pine); 
    }
    .btn-brand-domino:hover {  
     background-color:var(--cty-brand-pink); 
      border:1px solid var(--cty-brand-pink);  
      color:var(--cty-brand-pine);  
    }
  }

  .op-domino-bg-even {
    background-color:var(--cty-brand-pink); color:white;
    .btn-brand-domino { 
      background-color:var(--cty-brand-pine); 
      border:1px solid var(--cty-brand-pine);  
      color:white; 
    }
    .btn-brand-domino:hover {  
     background-color:var(--cty-brand-pine); 
      border:1px solid var(--cty-brand-pine);  
      color:white;  
    }
  }

}


/* events domimo */

.events-landing-domino {

  background-color:var(--cty-brand-purple); color:white;

  .op-domino-hold { width:100%; margin:0; }
  .op-domino-row  { display:block; }
  .op-domino-image { display:block; }
  .op-domino-image-img { display:block; width:100%; padding-bottom:80%; background-size:cover; background-position:center center; }
  .op-domino-content { display:block; padding:1.5rem; }

  .op-domino-flex {
     min-height: 0px;
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
  }
  .op-domino-flex > div { width:100%; }

  @media all and (min-width: 768px) {
    .op-domino-row { display:flex; }
    .op-domino-row-reverse { flex-direction: row-reverse; }
    .op-domino-image  { width:66%; padding:0; }
    .op-domino-image-img { width:100%; height:100%; padding:0; }
    .op-domino-content { width:33%; padding:2rem;}
    .op-domino-flex {  min-height: 500px; } 
  }
  @media all and (min-width: 992px) {
    .op-domino-content { padding:2.5rem; }
  }
  @media all and (min-width: 1200px) {
    .op-domino-content { padding:3rem;; }
  }

}


/* tempe box cards tall */

.tempe-box-cards-tall {

  .box-card { 
    background-color:#444;
    color:white;
  }

  .box-card-flex {
    min-height: 440px;
    align-items: end; /* center vertically */
    justify-content: center; /* center horizontally */
  }

  .box-card-cover {
    position: absolute;
    width: 100%; 
    height:100%; 
    background-color:transparent;
  }
  .box-card .box-card-cover {
    transition: all 250ms linear 0s;
    opacity:0.5;
    background: linear-gradient(25deg, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0));
  }
  .box-card:hover .box-card-cover {
    opacity:1;
  }

  .box-card-content {
    position: relative;
    text-align: center;
    padding: 2rem 2rem;
    max-width: 992px;
  }

  .op-subhead {
    font-weight: 500;
    font-size: 0.9rem;
    padding-bottom:8px;
    text-transform: none;
    margin-bottom: 0;
    text-wrap: balance;
    border-bottom:1px solid;
  }

  .op-headline {
    font-family: 'Platypi', serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height:1.2;
    padding-top:8px;
    margin-top:0;
    margin-bottom: 0;
    text-wrap: balance;
  }

}