/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
 :root {

    --color-1: hsl(207, 59%, 54%, 1) !important;
    --color-2: hsla(219, 79%, 63%, 1) !important;
    --color-3: hsla(189, 75%, 80%, 1) !important;

    /* theme color variations
     */
    --color-1-lighter: hsla(207, 93%, 64%, 1) !important;
    --color-1-light  : hsla(207, 93%, 54%, 1) !important;
    --color-1-dark   : hsla(207, 93%, 34%, 1) !important;
    --color-1-darker : hsla(207, 93%, 24%, 1) !important;
    --color-2-lighter: hsla(189, 79%, 83%, 1) !important;
    --color-2-light  : hsla(189, 79%, 73%, 1) !important;
    --color-2-dark   : hsla(189, 79%, 53%, 1) !important;
    --color-2-darker : hsla(189, 79%, 43%, 1) !important;
}

 /* ===================================================================
  * # services
  *
  * ------------------------------------------------------------------- */
.service-icon--product-design {
    background-image: url(../images/icons/services-blue/icon-product-design.png) !important;
}

.service-icon--branding {
    background-image: url(../images/icons/services-blue/icon-branding.png) !important;
}

.service-icon--frontend {
    background-image: url(../images/icons/services-blue/icon-frontend.png) !important;
}

.service-icon--research {
    background-image: url(../images/icons/services-blue/icon-research.png) !important;
}

.service-icon--illustration {
    background-image: url(../images/icons/services-blue/icon-illustration.png) !important;
}

.service-icon--ecommerce {
    background-image: url(../images/icons/services-blue/icon-ecommerce.png) !important;
}

/* ===================================================================
 * # hero
 *
 * ------------------------------------------------------------------- */


.s-hero__bg {
    background-image: url(../images/hero-bg-blue.jpg) !important;
}

.s-hero__content h1::before {
    background-image: url(../images/dots-blue.png) !important;
}

.s-about::before {
    background-image: url(../images/dots-blue.png) !important;
}
 
.folio-item__title {
    color: hsla(207, 93%, 34%, 1) !important;
}

.pswp__caption h4 {
    color: hsla(207, 93%, 34%, 1) !important;
}