.bg-blue { background-color:var(--cty-brand-blue); }
.bg-navy { background-color:var(--cty-brand-navy); }
.bg-navy-dark { background-color:var(--cty-brand-navy); }
.bg-cream { background-color:var(--cty-brand-cream); }
.bg-cream-light { background-color:var(--cty-brand-cream-light); }
.bg-green { background-color:var(--cty-brand-green); }
.bg-yellow { background-color:var(--cty-brand-yellow); }

.bg-pink { background-color: #cf2c62; border:4px solid #cf2c62; }

.fg-blue { color:var(--cty-brand-blue); }
.fg-navy { color:var(--cty-brand-navy); }
.fg-navy-dark { color:var(--cty-brand-navy); }
.fg-cream { color:var(--cty-brand-cream); }
.fg-cream-light { color:var(--cty-brand-cream-light); }

.oly-swiper-button-next, .oly-swiper-button-prev {
   background-color:var(--cty-brand-yellow);
   color:var(--cty-brand-navy)
}

.bg-streets { 
  background-image:url('https://ctycms.com/tx-sugar-land-ed/SL-Pattern-map2.svg'); 
  background-size:cover;
}

.domino-bg-streets { 
  .op-domino-content {
    background-image:url('https://ctycms.com/tx-sugar-land-ed/SL-Pattern-map2.svg'); 
    background-size:cover;
  }
}


/*
.bg-navy-hexagons, .bg-navy-hexagons .op-domino-content { 
  background-color:var(--cty-brand-navy); 
  background-image:url('https://ctycms.com/tx-sugar-land-ed/SL_Pattern-TrapezoidsHexagons-v2.svg');
  background-position:center center;
  background-size:425px 371px;
}
*/
.bg-navy-hexagons, .bg-navy-hexagons .op-domino-content { 
  background-color:var(--cty-brand-navy); 
  background-image:url('https://ctycms.com/tx-sugar-land-ed/SL_Pattern-TrapezoidsHexagons-v3.svg');
  background-position:center center;
  background-size:425px 371px;
}




.corners-tlbr-cream {
  position: relative;
}
.corners-tlbr-cream::before {
    content: ''; position: absolute;
    top: 0; right: 0; width: 0; height: 0;
    border-left: 90px solid transparent;
    border-top: 90px solid var(--cty-brand-cream);
}
.corners-tlbr-cream::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; width: 0; height: 0;
    border-right: 90px solid transparent;
    border-bottom: 90px solid var(--cty-brand-cream); 
}



.corners-blbr-blue {
  position: relative;
}
.corners-blbr-blue::before {
    content: ''; position: absolute;
    bottom: 0; right: 0; width: 0; height: 0;
    border-left: 90px solid transparent;
    border-bottom: 90px solid var(--cty-brand-blue); 
}
.corners-blbr-blue::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; width: 0; height: 0;
    border-right: 90px solid transparent;
    border-bottom: 90px solid var(--cty-brand-blue);
}



.corners-tltr-blue {
  position: relative;
}
.corners-tltr-blue::before {
    content: ''; position: absolute;
    top: 0; right:0; width: 0; height: 0;
    border-left: 90px solid transparent;
    border-top: 90px solid var(--cty-brand-blue); 
}
.corners-tltr-blue::after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    border-right: 90px solid transparent;
    border-top: 90px solid var(--cty-brand-blue);
}




.bg-clip-tlbr-triangles { 
  .op-hero-card-cover {
    background-color: rgba(6,9,86,0.35);
  }
}

.bg-clip-tlbr-triangles > div { 
  clip-path: polygon(
    0 0,
    0 calc(50% - 45px),           /* left edge of left triangle */
    45px 50%,                     /* right point of left triangle */
    0 calc(50% + 45px),           /* left edge of left triangle */
    0 100%,
    calc(50% - 45px) 100%,        /* bottom edge of bottom triangle */
    50% calc(100% - 45px),        /* top point of bottom triangle */
    calc(50% + 45px) 100%,        /* bottom edge of bottom triangle */
    100% 100%,
    100% calc(50% + 45px),        /* right edge of right triangle */
    calc(100% - 45px) 50%,        /* left point of right triangle */
    100% calc(50% - 45px),        /* right edge of right triangle */
    100% 0,
    calc(50% + 45px) 0,           /* top edge of top triangle */
    50% 45px,                     /* bottom point of top triangle */
    calc(50% - 45px) 0,           /* top edge of top triangle */
    0 0
  );
}
.bg-clip-tlbr-triangles .op-hero-card-content { padding:45px; }


.sltx-blue-stats {
  .oly-stat-cards { margin:0; }
  .oly-stat-card { width:100%; height:100%; border:0; padding:1.5rem; text-align:center; background-color:var(--cty-brand-blue); color:white; }
  .oly-stat-card-a {  
    display: flex;
    align-items: end; /* center vertically */
    justify-content: center; /* center horizontally */
    min-height:80px;
  }
  .oly-stat-card-b {  
    display: flex;
    align-items: start; /* center vertically */
    justify-content: center; /* center horizontally */
    min-height:80px;
  }
  .oly-stat-card-a-lg { 
    font-weight: 800;
    font-size: 2.4rem;
    line-height:1.3;
    margin-bottom: 0rem;
    text-wrap: balance; 
  }
  .oly-stat-card-b-md { 
    font-size: 1rem;
    line-height:1.3;
    font-weight:500;
    margin-bottom: 0;
    text-wrap: balance;
   }
  .oly-stat-card-b-sm { 
    font-size: 1rem;
        line-height: 1.3;
        font-weight: 500;
        margin-bottom: 0;
        text-wrap: balance; }
}


/* not used? */
.box-cards-blue-stats {

  padding:1rem 0;

  .box-card { 
    background-color:var(--cty-brand-blue); color:white;
    overflow:hidden;
  }

  .box-card a { display:block; text-decoration:none; color:inherit; }
  .box-card:hover a { text-decoration:none; color:inherit; }

  .box-card-flex {
    position: relative;
    min-height: 245px;
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    overflow: hidden;
    text-decoration:none;
  }

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

  .op-headline {
    font-weight: 800;
    font-size: 2.4rem;
    line-height:1.3;
    margin-bottom: 0rem;
    text-wrap: balance;
  }

  .op-text {
    font-size: 1rem;
    line-height:1.3;
    font-weight:500;
    margin-bottom: 0;
    text-wrap: balance;
  }

}




/* domino-sugar-land */

.domino-sugar-land {

  /*.op-domino-hold { width:100%; margin:0; }
  .op-domino-bg { display:block; }
  .op-domino-row { display:block; width:100%; margin:0 auto; } 
  .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 {
    display: flex;
    align-items: center; 
    justify-content: center; 
  }
  .op-domino-flex > div { width:100%; }
  */
  .op-domino-bg { 
    background: linear-gradient(90deg,
      var(--cty-brand-navy) 0%,  
      var(--cty-brand-navy) 3%,  
      rgba(0,0,0,0) 3%,
      rgba(0,0,0,0) 97%,
      var(--cty-brand-navy) 97%,
      var(--cty-brand-navy) 100%
      ); 
    }
  .op-domino-image-img { clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); }
  .op-domino-content { text-align:center; }

  @media all and (min-width: 768px) {
    /*.op-domino-row { display:flex; }
    .op-domino-row-reverse { flex-direction: row-reverse; }
    .op-domino-image  { width:50%; padding:0; }
    .op-domino-image-img { width:100%; height:100%; padding:0; }
    */
    .op-domino-bg { 
    background: linear-gradient(0deg,
      var(--cty-brand-navy) 0%,  
      var(--cty-brand-navy) 3%,  
      rgba(0,0,0,0) 3%,
      rgba(0,0,0,0) 97%,
      var(--cty-brand-navy) 97%,
      var(--cty-brand-navy) 100%
      ); 
    }
    .op-domino-image-img { clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); }
    .op-domino-content { text-align:left; }

    /*
    .op-domino-content { width:50%; padding:2rem; }
    .op-domino-flex { min-height: 400px; }
    */
  }
  /*
  @media all and (min-width: 992px) {
    .op-domino-content { padding:2.5rem; }
  }
  @media all and (min-width: 1200px) {
    .op-domino-content { padding:3rem;; }
  }
  */
}


/* override defaults */
.sample-stats {
  .oly-stat-cards { margin:1.5rem 0; }
  .oly-stat-card { width:100%; height:100%; text-align:center; }
  .oly-stat-card-a { 
    display:flex; 
    height:120px;
    padding:1rem; padding-bottom:0;
    align-items:end; 
    justify-content:center;
  }
  .oly-stat-card-b { 
    display:flex; 
    height:80px;
    padding:0.5rem; padding-top:0;
    align-items:start;
    justify-content:center;
  }
  .oly-stat-card-a-lg { font-size:3.0rem; font-weight:900; }
  .oly-stat-card-b-md { font-weight:inherit; }
  .oly-stat-card-b-sm { font-size:1rem; font-weight:600; font-style:italic;}
}



/* box-car-pop as for projets */

.box-card-pop { 

  .box-card { 
    height:100%;
    height:600px; 
    background-color:#2f3130; color:white;
  }

  .box-card a { display:block; height:100%; min-height: inherit; text-decoration:none; color:inherit; }

  .box-card:hover a { text-decoration:none; color:inherit; min-height: inherit; }

  .box-card-flex {
    position: relative;
    min-height: inherit;
    height:100%;
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    overflow: hidden;
    text-decoration:none;
  }

  .box-card-image { 
    position: absolute;
    width: 100%; 
    height:100%; 
    background-size: cover; 
    background-position: center center;
  }

  .box-card a .box-card-image {  transition: all 300ms linear 0s; }
  .box-card a:hover .box-card-image { transform: scale(1.1); }

  .box-card-cover {
    position: absolute;
    width: 100%; 
    height:100%; 
    background-color:rgba(6,9,91,0.35);
  }

  .box-card a .box-card-cover { transition: all 300ms linear 0s; }
  .box-card a:hover .box-card-cover { background-color:rgba(6,9,91,0.85); }

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

  .box-card a .box-card-drawer { display:none; transition: all 200ms linear 0s; }
  .box-card a:hover .box-card-drawer { display:block; }
  

}






/* rotating logo marquee */
/* https://ryanmulligan.dev/blog/css-marquee/ */

.op-marquee {
  --gap: 3rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  color:inherit;
  padding:0; 
  margin:0;
}

ul.op-marquee-content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  list-style:none;
  margin:0;
  padding:0;
}

ul.op-marquee-content li { width:180px; }

.op-marquee-logo-img { width:180px; height:120px; background-position:center center; background-size: contain; background-repeat:no-repeat; }

@keyframes scrollmarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
.op-marquee-content {
  animation: scrollmarquee 180s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .op-marquee-content {
    animation-play-state: paused !important;
  }
}
/*.op-marquee:hover .op-marquee-content {
  animation-play-state: paused;
}*/