:root {
  --font-1: 'opensans-regular', sans-serif;
  --font-2: 'opensans-regular', sans-serif;

  /* monospace
     */
  --font-mono: 'opensans-regular', sans-serif;
}

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

  /* color-1 (#0C2E7E - St. Patricks Blue)
     * color-2 (#DF2935 - Rose Madder)
     * color-3 (#00b295 - Jungle Green)
     */
  --color-1: hsla(222, 83%, 27%, 1);
  --color-2: hsla(356, 74%, 52%, 1);
  --color-3: hsla(170, 100%, 35%, 1);

  /* theme color variations
     */
  --color-1-lighter: hsla(222, 83%, 47%, 1);
  --color-1-light: hsla(222, 83%, 37%, 1);
  --color-1-dark: hsla(222, 83%, 17%, 1);
  --color-1-darker: hsla(222, 83%, 10%, 1);
  --color-2-lighter: hsla(356, 74%, 72%, 1);
  --color-2-light: hsla(356, 74%, 62%, 1);
  --color-2-dark: hsla(356, 74%, 42%, 1);
  --color-2-darker: hsla(356, 74%, 32%, 1);

  /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675),
     * color-info(#d7ecfb), color-notice(#fff099)
     */
  --color-error: hsla(359, 100%, 91%, 1);
  --color-success: hsla(76, 69%, 68%, 1);
  --color-info: hsla(205, 82%, 91%, 1);
  --color-notice: hsla(51, 100%, 80%, 1);
  --color-error-content: hsla(359, 50%, 50%, 1);
  --color-success-content: hsla(76, 29%, 28%, 1);
  --color-info-content: hsla(205, 32%, 31%, 1);
  --color-notice-content: hsla(51, 30%, 30%, 1);

  /* shades
     * generated using
     * Tint & Shade Generator
     * (https://maketintsandshades.com/)
     */
  --color-black: #000000;
  --color-gray-19: #0a0a0a;
  --color-gray-18: #141414;
  --color-gray-17: #1e1e1e;
  --color-gray-16: #282828;
  --color-gray-15: #333333;
  --color-gray-14: #3d3d3d;
  --color-gray-13: #474747;
  --color-gray-12: #515151;
  --color-gray-11: #5b5b5b;
  --color-gray-10: #656565;
  --color-gray-9: #747474;
  --color-gray-8: #848484;
  --color-gray-7: #939393;
  --color-gray-6: #a3a3a3;
  --color-gray-5: #b2b2b2;
  --color-gray-4: #c1c1c1;
  --color-gray-3: #d1d1d1;
  --color-gray-2: #e0e0e0;
  --color-gray-1: #f0f0f0;
  --color-white: #ffffff;

  /* text
     */
  --color-text: var(--color-gray-18);
  --color-text-dark: var(--color-black);
  --color-text-light: var(--color-gray-8);
  --color-placeholder: var(--color-gray-8);

  /* buttons
     */
  --color-btn: var(--color-gray-3);
  --color-btn-text: var(--color-black);
  --color-btn-hover: var(--color-1);
  --color-btn-hover-text: var(--color-white);
  --color-btn-primary: var(--color-black);
  --color-btn-primary-text: var(--color-white);
  --color-btn-primary-hover: var(--color-1);
  --color-btn-primary-hover-text: var(--color-white);
  --color-btn-stroke: var(--color-black);
  --color-btn-stroke-text: var(--color-black);
  --color-btn-stroke-hover: var(--color-1);
  --color-btn-stroke-hover-text: var(--color-white);

  /* others
     */
  --color-white-bg: white;
  --color-body: #f5f5f5;
  --color-border: var(--color-gray-2);
}

/* -------------------------------------------------------------------
 * ## vertical spacing and typescale
 * ------------------------------------------------------------------- */
:root {

  /* spacing
     * base font size: 18px
     * vertical space unit : 32px
     */
  --base-size: 62.5%;
  --base-font-size: 1.8rem;
  --space: 3.2rem;

  /* vertical spacing
     */
  --vspace-0_125: calc(0.25 * var(--space));
  --vspace-0_25: calc(0.25 * var(--space));
  --vspace-0_5: calc(0.5 * var(--space));
  --vspace-0_75: calc(0.75 * var(--space));
  --vspace-0_875: calc(0.875 * var(--space));
  --vspace-1: calc(var(--space));
  --vspace-1_25: calc(1.25 * var(--space));
  --vspace-1_5: calc(1.5 * var(--space));
  --vspace-1_75: calc(1.75 * var(--space));
  --vspace-2: calc(2 * var(--space));
  --vspace-2_5: calc(2.5 * var(--space));
  --vspace-3: calc(3 * var(--space));
  --vspace-3_5: calc(3.5 * var(--space));
  --vspace-4: calc(4 * var(--space));
  --vspace-4_5: calc(4.5 * var(--space));
  --vspace-5: calc(5 * var(--space));

  /* type scale
     * ratio 1:2 | base: 18px
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px)
     * --text-display-2 = (64.50px)
     * --text-display-1 = (53.75px)
     * --text-xxxl      = (44.79px)
     * --text-xxl       = (37.32px)
     * --text-xl        = (31.10px)
     * --text-lg        = (25.92px)
     * --text-md        = (21.60px)
     * --text-size      = (18.00px) BASE
     * --text-sm        = (15.00px)
     * --text-xs        = (12.50px)
     *
     * -------------------------------------------------------
     */
  --text-scale-ratio: 1.2;
  --text-size: var(--base-font-size);
  --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
  --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
  --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));

  /* default button height
     */
  --vspace-btn: var(--vspace-2);

}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --base-font-size: 1.6rem;
    --space: 2.8rem;
  }
}

/* -------------------------------------------------------------------
 * ## grid variables
 * ------------------------------------------------------------------- */
:root {

  /* widths for rows and containers
     */
  --width-full: 100%;
  --width-max: 1200px;
  --width-wide: 1400px;
  --width-wider: 1600px;
  --width-widest: 1800px;
  --width-narrow: 1000px;
  --width-narrower: 900px;
  --width-grid-max: var(--width-max);

  /* gutters
     */
  --gutter-lg: 2rem;
  --gutter-md: 1.8rem;
  --gutter-mob: 1rem;
}

ul {
  list-style: disc;
}

code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  font-size: calc(var(--text-size) * 0.9444);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: var(--vspace-1);
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */

pre[class*="language-"] {
  padding: var(--vspace-0_5) 0 var(--vspace-1);
  margin: var(--vspace-1) 0;
  overflow: auto;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
  background: #272822;
}

/* Inline code */

:not(pre)>code[class*="language-"] {
  padding: .1em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}



blockquote {
  margin: 0 0 var(--vspace-1) 0;
  padding: var(--vspace-1) var(--vspace-1_5);
  border-left: 4px solid black;
  position: relative;

}

blockquote:before {
  content: '' !important;
}

@media screen and (max-width: 400px) {
  blockquote {
    padding: var(--vspace-0_75) var(--vspace-0_75);
  }
}

blockquote p {
  font-family: var(--font-1);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: normal;
  line-height: var(--vspace-1_25);
  color: var(--color-text-dark);
  padding: 0;
}

blockquote cite {
  display: block;
  font-family: var(--font-1);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--vspace-0_75);
  font-style: normal;
}

blockquote cite:before {
  content: "\2014 \0020";
}

blockquote cite,
blockquote cite a,
blockquote cite a:visited {
  color: var(--color-text-light);
  border: none;
}

/* ===================================================================
 * # preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  background: white;
  z-index: 500;
  height: 100vh;
  width: 100%;
  opacity: 1;
}

.no-js #preloader,
.oldie #preloader {
  display: none;
}

#loader {
  width: var(--vspace-1_5);
  height: var(--vspace-1_5);
  padding: 0;
  opacity: 1;
}

#loader:before {
  content: "";
  border-top: 6px solid rgba(0, 0, 0, 0.2);
  border-right: 6px solid rgba(0, 0, 0, 0.2);
  border-bottom: 6px solid rgba(0, 0, 0, 0.2);
  border-left: 6px solid black;
  -webkit-animation: load 1.1s infinite linear;
  animation: load 1.1s infinite linear;
  display: block;
  border-radius: 50%;
  width: var(--vspace-1_5);
  height: var(--vspace-1_5);
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------------
 * ## page loaded
 * ------------------------------------------------------------------- */
.ss-loaded #preloader {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .6s .9s ease-in-out;
  transition: all .6s .9s ease-in-out;
}

.ss-loaded #preloader #loader {
  opacity: 0;
  -webkit-transition: opacity .6s ease-in-out;
  transition: opacity .6s ease-in-out;
}


/* -------------------------------------------------------------------
 * ## animation stuff
 * ------------------------------------------------------------------- */
.animate-this {
  opacity: 0;
  visibility: hidden;
}

.no-js .animate-this,
.no-cssanimations .animate-this {
  opacity: 1;
  visibility: visible;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* fade in */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 150%, 0);
    transform: translate3d(0, 150%, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 150%, 0);
    transform: translate3d(0, 150%, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/* -------------------------------------------------------------------
 * ## slick slider
 * ------------------------------------------------------------------- */
.slick-slider .slick-slide {
  outline: none;
}

.slick-slider .slick-dots {
  display: block;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: var(--vspace-1) 0 0 0;
  text-align: center;
  position: absolute;
  top: 100%;
  left: 0;
}

.slick-slider .slick-dots li {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 5px;
  cursor: pointer;
}

.slick-slider .slick-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

.slick-slider .slick-dots li button:hover,
.slick-slider .slick-dots li button:focus {
  outline: none;
}

.slick-slider .slick-dots li.slick-active button,
.slick-slider .slick-dots li:hover button {
  background: white;
}

/* -------------------------------------------------------------------
 * ## masonry entries
 * ------------------------------------------------------------------- */
.s-bricks {
  background-color: var(--color-body);
}

.bricks-wrapper .entry {
  margin-bottom: 4rem;
}

.bricks-wrapper .entry__thumb,
.bricks-wrapper .entry__text {
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}

.bricks-wrapper .entry__thumb {
  overflow: hidden;
  position: relative;
}

.bricks-wrapper .entry__thumb img {
  vertical-align: bottom;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin: 0;
}

.bricks-wrapper .entry__thumb .thumb-link::before {
  z-index: 1;
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.bricks-wrapper .entry__thumb .thumb-link::after {
  z-index: 1;
  display: block;
  content: "...";
  font-family: georgia, serif;
  font-size: 3.2rem;
  height: 90px;
  width: 90px;
  letter-spacing: .2rem;
  line-height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  text-align: center;
  color: white;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 50%;
  top: 50%;
}

.bricks-wrapper .entry__thumb:hover .thumb-link::before {
  opacity: 1;
  visibility: visible;
}

.bricks-wrapper .entry__thumb:hover .thumb-link::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.bricks-wrapper .entry__thumb:hover .thumb-link img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.bricks-wrapper .entry__text {
  padding: 2.4rem 2.8rem 3.6rem;
  background-color: white;
}

.bricks-wrapper .entry__title {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--vspace-1);
  margin-top: 0;
  margin-bottom: var(--vspace-0_5);
}

.bricks-wrapper .entry__title a,
.bricks-wrapper .entry__title a:visited {
  color: black;
}

.bricks-wrapper .entry__meta {
  font-family: var(--font-1);
  font-size: var(--text-sm);
  margin-bottom: calc(0.125 * var(--space));
}

.bricks-wrapper .entry__meta a,
.bricks-wrapper .entry__meta a:visited {
  color: black;
}

.bricks-wrapper .entry__cat-links a::after {
  content: ", ";
}

.bricks-wrapper .entry__cat-links a:last-child::after {
  display: none;
}

.bricks-wrapper .entry__excerpt {
  font-size: 1.5rem;
  line-height: 1.733;
  color: var(--color-text-light);
}

.bricks-wrapper .entry__excerpt p {
  margin-bottom: 0;
}

/* featured post slider
 * ------------------------------------------------------------------- */
.featured-grid .entry__content {
  position: relative;
}

.featured-grid .entry__content:hover .f-slide__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.f-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 600px;
  width: 100%;
  background-color: white;
  padding: var(--vspace-2) 15% var(--vspace-1);
  text-align: center;
  position: relative;
}

.f-slide__background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.f-slide__overlay {
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.f-slide__content {
  position: relative;
}

.f-slide__meta {
  font-family: var(--font-1);
  font-size: set-text-size(0.8888);
  margin: -3.2rem 0 0.8rem 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.f-slide__meta li {
  display: inline-block;
  margin: 0 3px;
  padding: 0;
}

.f-slide__meta li a {
  color: rgba(255, 255, 255, 0.6);
}

.f-slide__meta li a:hover,
.f-slide__meta li a:focus {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.f-slide__title {
  font-family: var(--font-2);
  font-weight: 500;
  font-size: var(--text-xxl);
  line-height: 1.286;
  margin-top: 0;
  margin-bottom: var(--vspace-1);
  color: white;
}

.f-slide__title a {
  color: white;
  border-bottom: 1px solid transparent;
}

.f-slide__title a:hover,
.f-slide__title a:focus {
  color: white;
  border-color: rgba(255, 255, 255, 0.1);
}

/* featured-post-slider direction nav
 * --------------------------------------------------------- */
.featured-post-nav button {
  z-index: 2;
  background-color: black;
  border: black;
  padding: 0;
  margin: 0;
  height: 6rem;
  width: 6rem;
  cursor: pointer;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}

.featured-post-nav button svg {
  height: 2rem;
  width: 2rem;
}

.featured-post-nav button svg path {
  fill: rgba(255, 255, 255, 0.5);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.featured-post-nav button:hover svg path,
.featured-post-nav button:focus svg path {
  fill: white;
}

.featured-post-nav__prev {
  left: 0;
}

.featured-post-nav__next {
  right: 0;
}

/*  post formats - masonry view
 * ------------------------------------------------------------------- */

/* format quote & format link
 * --------------------------------------- */
.format-quote,
.format-link {
  text-align: center;
}

.format-quote .entry__thumb,
.format-link .entry__thumb {
  display: table;
  background: white;
  padding: 2.4rem 3rem 4.8rem;
  min-height: 320px;
  width: 100%;
  position: relative;
}

.format-quote .entry__thumb::before,
.format-link .entry__thumb::before {
  content: "";
  display: block;
  height: 3.6rem;
  width: 3.6rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 1.5rem;
  position: absolute;
  top: var(--vspace-1_25);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.format-quote blockquote::before {
  display: none;
}

.format-quote blockquote,
.format-link .link-wrap {
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: none;
}

.format-quote blockquote p,
.format-link .link-wrap p {
  font-family: var(--font-2);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--vspace-1);
  color: black;
  padding: 7.8rem 0 0 0;
  margin-bottom: var(--vspace-1);
}

.format-quote cite,
.format-link cite {
  display: block;
  font-family: var(--font-1);
  font-size: 1.5rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--color-text-light);
}

.format-quote cite::before,
.format-link cite::before {
  display: none;
}

.format-quote cite a,
.format-quote cite a:visited {
  color: var(--color-text-light);
  border: none;
}

.format-quote .entry__thumb::before {
  background-image: url(../blogs/images/icons/icon-quote.svg);
}

.format-link .entry__thumb::before {
  background-image: url(../blogs/images/icons/icon-link.svg);
  width: 3.2rem;
  height: 3.2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 3rem 3rem;
}

.format-link .link-wrap cite:before {
  display: none;
}

.format-link .link-wrap cite a,
.format-link .link-wrap cite a:visited {
  color: var(--color-text-light);
  display: inline-block;
  padding-bottom: .4rem;
}

.format-link .link-wrap cite a:hover,
.format-link .link-wrap cite a:focus {
  color: black;
}

/* format video & format audio
 * --------------------------------------- */
.format-video .entry__thumb::after,
.format-audio .entry__thumb::after {
  content: "";
  display: block;
  height: 5.6rem;
  width: 5.6rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
}

.format-video .thumb-link::before,
.format-video .thumb-link::after,
.format-audio .thumb-link::before,
.format-audio .thumb-link::after {
  display: none !important;
}

.format-video .entry__thumb::after {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  background-image: url(../blogs/images/icons/icon-video.svg);
  background-size: 2.8rem 2.8rem;
}

.format-video .entry__thumb-link {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.format-audio .entry__thumb::after {
  background-image: url(../blogs/images/icons/icon-audio.svg);
  background-size: 2.8rem 2.8rem;
}

/* -------------------------------------------------------------------
 * ## format gallery
 * ------------------------------------------------------------------- */
.format-gallery .entry__thumb {
  overflow: hidden;
}

.format-gallery .slider {
  overflow: hidden;
}

.format-gallery .slick-dots {
  text-align: right;
  margin: 0;
  padding: 0 2.4rem 0 2rem;
  position: absolute;
  top: auto;
  bottom: var(--vspace-0_75);
  right: 0;
}

.format-gallery .slider__slides {
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.format-gallery .slider__slides.slick-initialized {
  opacity: 1;
  visibility: visible;
}

/* responsive:
/* common and reusable styles
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
  .bricks-wrapper .entry {
    margin-bottom: 3.6rem;
  }
}

@media screen and (max-width: 1040px) {

  .bricks-wrapper .entry__title,
  .format-quote blockquote p,
  .format-link .link-wrap p {
    font-size: var(--text-md);
    line-height: calc(0.875 * var(--space));
  }
}

@media screen and (max-width: 980px) {

  .bricks-wrapper .entry__title,
  .format-quote blockquote p,
  .format-link .link-wrap p {
    font-size: var(--text-lg);
    line-height: var(--vspace-1);
  }
}

@media screen and (max-width: 800px) {
  .bricks-wrapper .entry {
    margin-bottom: 3.2rem;
  }
}

@media screen and (max-width: 700px) {
  .bricks-wrapper .entry {
    margin-bottom: 2.4rem;
  }

  .bricks-wrapper .entry__title,
  .format-quote blockquote p,
  .format-link .link-wrap p {
    font-size: var(--text-md);
    line-height: calc(0.875 * var(--space));
  }
}

@media screen and (max-width: 600px) {
  .bricks-wrapper .entry {
    margin-bottom: 4rem;
  }

  .bricks-wrapper .entry__title,
  .format-quote blockquote p,
  .format-link .link-wrap p {
    font-size: var(--text-lg);
    line-height: var(--vspace-1);
  }

  .f-slide {
    height: 552px;
  }

  .f-slide__meta {
    font-size: var(--text-sm);
  }

  .f-slide__title {
    font-size: var(--text-xl);
  }

  .featured-post-nav button {
    height: 5.2rem;
    width: 5.2rem;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    top: auto;
    bottom: 0;
  }

  .featured-post-nav button svg {
    height: 1.6rem;
    width: 1.6rem;
  }
}

@media screen and (max-width: 400px) {
  .bricks-wrapper .entry {
    margin-bottom: 3.6rem;
  }

  .f-slide {
    height: 440px;
  }

  .featured-post-nav button {
    height: 4.4rem;
    width: 4.4rem;
  }

  .featured-post-nav button svg {
    height: 1.4rem;
    width: 1.4rem;
  }
}


/* ===================================================================
 * # bricks masonry
 *
 * ------------------------------------------------------------------- */
.s-bricks {
  padding-top: 4.2rem;
  padding-bottom: 102px;
}

.s-bricks.with-top-sep {
  position: relative;
}

.s-bricks.with-top-sep::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -100px;
  width: 200px;
  height: 1px;
  background-color: var(--color-border);
}

.s-bricks .masonry {
  max-width: 1440px;
  width: 94%;
  margin: 0 auto var(--vspace-1);
}

.s-bricks .pagination {
  margin-top: 6rem;
}

.bricks-wrapper .grid-sizer,
.bricks-wrapper .brick {
  width: 25%;
}

.bricks-wrapper .brick {
  float: left;
  padding: 0 var(--gutter-lg);
}

.bricks-wrapper .featured-grid {
  width: 50%;
}

.bricks-wrapper .featured-grid .entry-content {
  width: 100%;
  background: #151515;
}

/* responsive:
/* bricks masonry
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
  .s-bricks .masonry {
    width: 98%;
  }
}

@media screen and (max-width: 1400px) {
  .s-bricks .masonry {
    max-width: var(--width-max);
    width: 94%;
  }

  .bricks-wrapper .grid-sizer,
  .bricks-wrapper .brick {
    width: 33.33333%;
  }

  .bricks-wrapper .brick {
    padding: 0 var(--gutter-md);
  }

  .bricks-wrapper .featured-grid {
    width: 66.66667%;
  }
}

@media screen and (max-width: 980px) {
  .s-bricks .masonry {
    max-width: 780px;
    width: 96%;
  }

  .bricks-wrapper .grid-sizer,
  .bricks-wrapper .brick {
    width: 50%;
  }

  .bricks-wrapper .featured-grid {
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .bricks-wrapper .brick {
    padding: 0 1.6rem;
  }
}

@media screen and (max-width: 700px) {
  .bricks-wrapper .brick {
    padding: 0 1.2rem;
  }
}

@media screen and (max-width: 600px) {
  .s-bricks .masonry {
    max-width: 480px;
    width: 100%;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .bricks-wrapper .grid-sizer,
  .bricks-wrapper .brick {
    float: none;
    width: 100%;
    padding: 0 var(--gutter-mob);
    clear: both;
  }
}

@media screen and (max-width: 400px) {
  .bricks-wrapper .brick {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}


/* ===================================================================
 * # blog styles and blog components
 *
 * ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
 * ## single post meta
 * ------------------------------------------------------------------- */
.s-content__post-meta {
  font-family: var(--font-1);
  font-size: calc(var(--text-size) * 0.944);
  list-style: none;
  text-align: center;
  margin-left: 0;
  margin-bottom: var(--vspace-1_75);
  color: var(--color-text-light);
}

.s-content__post-meta a {
  color: black;
}

.s-content__post-meta li {
  display: inline-block;
  padding-left: 0;
  margin: 0 .8rem;
}

.s-content__post-meta .cat a {
  margin-right: .6rem;
}

.s-content__post-meta .cat a:last-child {
  margin-right: 0;
}

.s-content__post-meta .cat a:last-child::after {
  content: none;
}

.s-content__post-meta .cat a::after {
  content: ",";
}

/* -------------------------------------------------------------------
 * ## single post tags
 * ------------------------------------------------------------------- */
.s-content__post-tags {
  margin: var(--vspace-2) 0 var(--vspace-1_25);
}

.s-content__post-tags span {
  color: black;
  margin-right: 1rem;
  font-weight: 600;
}

.s-content__post-tags a {
  color: var(--color-text-light);
  margin-right: 1rem;
}

/* -------------------------------------------------------------------
 * ## author profile
 * ------------------------------------------------------------------- */
.s-content__author {
  margin-top: var(--vspace-2_5);
  padding-top: var(--vspace-0_25);
  padding-left: 9.6rem;
  position: relative;
}

.s-content__author a {
  color: black;
}

.s-content__author h5 {
  margin-top: 0;
}

.s-content__author img {
  margin: .6rem 0 0 0 !important;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

.s-content__author p {
  margin-bottom: var(--vspace-0_5);
}

.s-content__author .author-social {
  list-style: none;
  margin-left: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .2em;
}

.s-content__author .author-social li {
  display: inline-block;
  margin-right: 0.8rem;
  padding-left: 0;
}

.s-content__author .author-social a {
  color: var(--color-text-light);
}

/* -------------------------------------------------------------------
 * ## single post page nav
 * ------------------------------------------------------------------- */
.s-content__pagenav {
  padding-top: var(--vspace-0_5);
  margin: 12rem 0;
  border-top: 1px solid var(--color-border);
}

.s-content__pagenav div {
  float: left;
  width: 50%;
  padding-top: var(--vspace-0_5);
  padding-right: var(--gutter-lg);
}

.s-content__pagenav a {
  font-family: var(--font-2);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--vspace-1);
  border: none;
  color: black;
}

.s-content__pagenav a span {
  display: block;
  font-family: var(--font-1);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--vspace-1);
  margin-bottom: var(--vspace-0_5);
  color: var(--color-text-light);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.s-content__pagenav a:hover span {
  color: black;
}

/* -------------------------------------------------------------------
 * responsive:
 * blog styles and blog components
 * ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
  .s-content__author {
    padding-left: 0;
    text-align: center;
  }

  .s-content__author img {
    position: static;
    width: 6.6rem;
    height: 6.6rem;
    margin: 0 0 0.8rem 0 !important;
  }
}

@media screen and (max-width: 640px) {
  .s-content__pagenav {
    text-align: center;
  }

  .s-content__pagenav div {
    float: none;
    width: 100%;
    padding-right: 0;
  }

  .s-content__pagenav div:first-child {
    margin-bottom: var(--vspace-0_5);
  }
}

/* Slider */

.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}



/* ===================================================================
 * # content wrap
 *
 * ------------------------------------------------------------------- */
.s-content {
  background-color: var(--color-body);
  color: var(--color-text);
  --row-max-width: 1080px;
  padding-top: var(--vspace-2_5);
  padding-bottom: var(--vspace-3_5);
}

.s-content--single {
  padding-bottom: var(--vspace-1_5);
}

.s-content .row {
  max-width: var(--row-max-width);
}

.s-content .row.wide {
  max-width: 1400px;
}

.s-content .row.narrow {
  max-width: 800px;
}

.s-content__media {
  position: relative;
  margin-bottom: var(--vspace-2_5);
}

.s-content__media img {
  vertical-align: bottom;
  margin-bottom: 0;
}

.s-content__primary {
  padding-left: 8rem;
  padding-right: 8rem;
}

.s-content__primary img {
  max-width: calc(var(--row-max-width) - var(--gutter-lg) * 2);
  margin: var(--vspace-1) 0 var(--vspace-1) -8rem;
}

.s-content__title {
  font-size: var(--text-xxxl);
  line-height: var(--vspace-1_75);
  margin-top: 0;
  margin-bottom: var(--vspace-1_75);
  letter-spacing: -.02em;
  text-align: center;
}

.s-content__title--post {
  margin-bottom: var(--vspace-0_25);
}

.s-content__blocks h4 {
  margin-top: 0;
}

.s-content__form {
  margin-top: var(--vspace-2);
}

/* responsive:
 * content wrap
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .s-content {
    --row-max-width: 1000px;
  }

  .s-content__primary {
    padding-left: 4.8rem;
    padding-right: 4.8rem;
  }

  .s-content__primary img {
    max-width: calc(var(--row-max-width) - var(--gutter-md) * 2);
    margin: var(--vspace-1) 0 var(--vspace-1) -4.8rem;
  }
}

@media screen and (max-width: 1100px) {
  .s-content {
    --row-max-width: 920px;
  }

  .s-content__primary {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .s-content__primary img {
    margin: var(--vspace-1) 0 var(--vspace-1) -4rem;
  }
}

@media screen and (max-width: 1020px) {
  .s-content__primary {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .s-content__primary img {
    max-width: 100%;
    margin: var(--vspace-1) 0;
  }
}

@media screen and (max-width: 800px) {
  .s-content {
    padding-top: var(--vspace-1_75);
  }

  .s-content__primary {
    padding-left: 0;
    padding-right: 0;
  }

  .s-content__media {
    margin-bottom: var(--vspace-2);
  }
}

@media screen and (max-width: 600px) {
  .s-content {
    padding-top: var(--vspace-1_5);
  }

  .s-content__media {
    margin-bottom: var(--vspace-1_5);
  }
}

@media screen and (max-width: 400px) {
  .s-content__title {
    font-size: var(--text-xxl);
    line-height: var(--vspace-1_5);
  }
}