.u-flexitem-center {
    margin     : auto;
    align-self : center;
}

.u-flexitem-left {
    margin-right : auto;
    align-self   : center;
}

.u-flexitem-right {
    margin-left : auto;
    align-self  : center;
}

.u-flexitem-x-center {
    margin-right : auto;
    margin-left  : auto;
}

.u-flexitem-x-left {
    margin-right : auto;
}

.u-flexitem-x-right {
    margin-left : auto;
}

.u-flexitem-y-center {
    align-self : center;
}

.u-flexitem-y-top {
    align-self : flex-start;
}

.u-flexitem-y-bottom {
    align-self : flex-end;
}

/* misc helper classes
 */
.u-screen-reader-text {
    clip      : rect(1px, 1px, 1px, 1px);
    clip-path : inset(50%);
    height    : 1px;
    width     : 1px;
    margin    : -1px;
    overflow  : hidden;
    padding   : 0;
    border    : 0;
    position  : absolute;
    word-wrap : normal !important;
}

.u-clearfix:after {
    content : "";
    display : table;
    clear   : both;
}

.u-hidden {
    display : none;
}

.u-invisible {
    visibility : hidden;
}

.u-antialiased {
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.u-overflow-hidden {
    overflow : hidden;
}

.u-remove-top {
    margin-top : 0;
}

.u-remove-bottom {
    margin-bottom : 0;
}

.u-add-half-bottom {
    margin-bottom : var(--vspace-0_5);
}

.u-add-bottom {
    margin-bottom : var(--vspace-1);
}

.u-no-border {
    border : none;
}

.u-fullwidth {
    width : 100%;
}

.u-pull-left {
    float : left;
}

.u-pull-right {
    float : right;
}



/* ===================================================================
 * # PAGE WRAP
 *
 *
 * ------------------------------------------------------------------- */
.s-pagewrap {
    display        : flex;
    flex-direction : column;
    min-height     : 100%;
    overflow       : hidden;
    position       : relative;
}


/* ===================================================================
 * # SITE HEADER
 *
 *
 * ------------------------------------------------------------------- */
.s-header {
    z-index  : 100;
    width    : 100%;
    position : absolute;
    top: 4%;
    left: 0;
    /* background-color: #ffffffa1; */
    height: 127px;
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------
 * ## branding
 * -------------------------------------------------------------------- */
.s-header__branding {
    z-index        : 2;
    font-family    : var(--font-2);
    font-size      : 2.8rem;
    line-height    : 1;
    letter-spacing : -0.03em;
    transform      : translateY(-50%);
    position       : absolute;
    top            : 50%;
    left           : 3.6rem;
}

.s-header__branding .site-title {
    margin  : 0;
    padding : 0;
}

.s-header__branding a {
    margin  : 0;
    padding : 0;
    outline : 0;
    border  : none;
    color   : black;
}

.s-header__branding a img {
    width: 75%;
}


.ss-home .s-header__branding a {
    color : white;
}

/* --------------------------------------------------------------------
 * ## main navigation
 * -------------------------------------------------------------------- */
.s-header__navigation {
    max-width : none;
    width     : 100%;
}

.s-header__nav-wrap {
    display         : flex;
    justify-content : center;
    /* margin-left     : 6rem;
    margin-right    : 6rem; */
    width           : 100%;
}

.ss-home .s-header__nav-wrap {
    margin-left : 50%;
}

.s-header__nav-wrap .s-header__nav-heading {
    display        : none;
    font-family    : var(--font-1);
    font-weight    : 300;
    font-size      : var(--text-size);
    color          : var(--color-text-light);
    letter-spacing : -0.02em;
    padding-left   : 3.2rem;
    margin-top     : 0;
    margin-bottom  : var(--vspace-1_75);
    position       : relative;
}

.s-header__nav-wrap .s-header__nav-heading::before {
    content          : "";
    display          : block;
    width            : 2rem;
    height           : 1px;
    background-color : rgba(0, 0, 0, 0.3);
    position         : absolute;
    top              : 50%;
    left             : 0;
}

.s-header__nav {
    list-style : none;
    display    : flex;
    flex-flow  : row nowrap;
    margin     : 0;
    padding    : 0;
}

.s-header__nav a {
    display: inline-block;
    font-size:1.23rem;
    font-weight: 600;
    line-height: 3rem;
    color: #000;
    transition-property : color, background-color;
}
.s-header__nav a.ordernow:last-child{
    color: #bfa459;
}
.s-header__nav a:hover {
    color : rgba(0, 0, 0, 0.3);
}

.s-header__nav li {
    padding  : 0 1.2rem;
    position : relative;
}

.s-header__nav li.has-children>a {
    padding-right : 1.2rem;
    position      : relative;
}

.s-header__nav li.has-children>a::after {
    border-bottom            : 1px solid black;
    border-right             : 1px solid black;
    content                  : '';
    display                  : block;
    height                   : 5px;
    width                    : 5px;
    margin-top               : -4px;
    pointer-events           : none;
    -webkit-transform-origin : 66% 66%;
    transform-origin         : 66% 66%;
    transform                : rotate(45deg);
    transition               : all .3s;
    position                 : absolute;
    right                    : 0;
    top                      : calc(50% + 2px);
}

.s-header__nav .current-menu-item>a {
    border-bottom : 1px solid var(--color-text-dark);
}

.s-header__nav ul {
    z-index: 200;
    column-count: 2;
    margin: 0;
    padding: 2rem 0;
    background: #fff;
    border-radius : 0 0 4px 4px;
    transform: translate(0, 20px);
    transition: all .5s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
}

.s-header__nav ul ul {
    position      : absolute;
    top           : 0;
    left          : calc(100% + 1px);
    border-radius : 0 0 4px 4px;
    padding-top   : 1.2rem;
}

.s-header__nav ul li {
    display    : block;
    text-align : left;
    padding    : 0;
    margin     : 0;
    min-height : 3.2rem;
    width      : 100%;
}

.s-header__nav ul li a {
    display: block;
    white-space: nowrap;
    padding: 0.6rem 2rem 0.6rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 0.1rem;
    color: rgb(37 37 37 / 92%);
}

.s-header__nav ul li a img{
    filter: invert(110%) sepia(71%) saturate(1714%) hue-rotate(348deg) brightness(97%) contrast(100%);
    width: 19px;
    margin-right: 9px;
}

.s-header__nav ul li a:focus,
.s-header__nav ul li a:hover {
    color : rgb(24, 24, 24);
}

.s-header__nav li:hover>ul {
    opacity    : 1;
    visibility : visible;
    transform  : translate(0, 0);
}

/* --------------------------------------------------------------------
 * ## mobile menu toggle
 * -------------------------------------------------------------------- */
.s-header__menu-toggle {
    display   : none;
    z-index   : 301;
    width     : 6.8rem;
    height    : 7.2rem;
    transform : translateY(-50%);
    position  : absolute;
    top       : 50%;
    right     : .8rem;
}

.s-header__menu-toggle span {
    display          : block;
    background-color : black;
    width            : 22px;
    height           : 2px;
    margin-top       : -1px;
    font             : 0/0 a;
    text-shadow      : none;
    color            : transparent;
    transition       : background-color 0.3s ease-in-out;
    position         : absolute;
    right            : 23px;
    top              : 50%;
    bottom           : auto;
    left             : auto;
}

.s-header__menu-toggle span::before,
.s-header__menu-toggle span::after {
    content          : "";
    width            : 100%;
    height           : 100%;
    transition       : transform 0.3s ease-in-out;
    background-color : inherit;
    position         : absolute;
    left             : 0;
}

.s-header__menu-toggle span::before {
    top : -8px;
}

.s-header__menu-toggle span::after {
    bottom : -8px;
}

/* is clicked 
 */
.s-header__menu-toggle.is-clicked span {
    background-color : rgba(0, 0, 0, 0);
    transition       : all .1s;
}

.s-header__menu-toggle.is-clicked span::before,
.s-header__menu-toggle.is-clicked span::after {
    background-color : black;
}

.s-header__menu-toggle.is-clicked span::before {
    top       : 0;
    transform : rotate(135deg);
}

.s-header__menu-toggle.is-clicked span::after {
    bottom    : 0;
    transform : rotate(225deg);
}


.header-fixed {
    background-color: #651e0a;
    box-shadow: 0 1px 1px #d9d9d9;
    padding: 14px 45px;
    height: 40px;
    color: #ffffff;
    display: flex;
    align-items: center;
    color: #ffffff;
    box-sizing: border-box;
    justify-content: space-between;
    top: -100px;
    -webkit-transition: top 0.3s;
    transition: top 0.3s;
}

.header-fixed .header-limiter.left {
    text-align: left;
}

.header-fixed .header-limiter {
	max-width: 1200px;
    margin: 10px;
    text-align: right;
}

.header-fixed .header-limiter.left h1 span {
    color: #ffffff;
    font-size: 17px;
}


.header-fixed .header-limiter.left h1 svg{

width: 30px;

}

/*	The header placeholder. It is displayed when the header is fixed to the top of the
	browser window, in order to prevent the content of the page from jumping up. */

.header-fixed-placeholder{
	height: 80px;
	display: none;
}

/* Logo */

.header-fixed .header-limiter h1 {
	float: left;
	/* font: normal 28px Cookie, Arial, Helvetica, sans-serif; */
	line-height: 40px;
	margin: 0;
}

.header-fixed .header-limiter h1 span {
	color: #5383d3;
}

/* The navigation links */

.header-fixed .header-limiter a {
	color: #ffffff;
	text-decoration: none;
}

.header-fixed .header-limiter nav {
	/* font:16px Arial, Helvetica, sans-serif; */
	line-height: 40px;
	float: right;
}

.header-fixed .header-limiter nav a{
	display: inline-block;
	padding: 0 5px;
	text-decoration:none;
	color: #ffffff;
	opacity: 0.9;
}

.header-fixed .header-limiter nav a:hover{
	opacity: 1;
}

.header-fixed .header-limiter nav a.selected {
	color: #608bd2;
	pointer-events: none;
	opacity: 1;
}

/* Fixed version of the header */

body.fixed .header-fixed {
	padding: 10px 40px;
	height: 50px;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.header-fixed-placeholder {
	display: block;
}

 .header-fixed .header-limiter h1 {
	font-size: 24px;
	line-height: 30px;
}

 .header-fixed .header-limiter nav {
	line-height: 28px;
	font-size: 16px;
}


/* Making the header responsive */

@media all and (max-width: 600px) {

	.header-fixed {
		padding: 20px 0;
		height: 75px;
	}

	.header-fixed .header-limiter h1 {
		float: none;
		margin: -8px 0 10px;
		text-align: center;
		font-size: 24px;
		line-height: 1;
	}

	.header-fixed .header-limiter nav {
		line-height: 1;
		float:none;
	}

	.header-fixed .header-limiter nav a {
		font-size: 13px;
	}


}


/* ------------------------------------------------------------------- 
 * ## header-search
 * ------------------------------------------------------------------- */
.s-header__search {
    z-index    : 302;
    display    : block;
    background : rgb(0 0 0 / 74%);
    opacity    : 0;
    visibility : hidden;
    position   : fixed;
    top        : 0;
    left       : 0;
    right      : 0;
    bottom     : 0;
    width      : 100%;
    height     : 100%;
    transition : all .3s .5s;
}

.s-header__search-inner {
    background-color: #fafafa;
    height: 50px;
    width: 100%;
    transform: translateY(-200%);
    transition: transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.s-header__search-form {
    width   : 100%;
    padding : 0 var(--gutter);
    margin  : 0;
}

.s-header__search-form label {
    margin : 0;
}

.s-header__search-form input[type="search"] {
    --input-height   : var(--vspace-3);
    background-color : transparent;
    color            : white;
    height           : auto;
    width            : 100%;
    font-family      : var(--font-2);
    font-weight      : 400;
    font-size        : var(--text-md);
    line-height      : 1;
    border           : transparent;
    margin           : 0;
    text-align       : center;
    margin: 0 30px;
}

.s-header__search-form input[type="search"]::-webkit-search-decoration,
.s-header__search-form input[type="search"]::-webkit-search-cancel-button,
.s-header__search-form input[type="search"]::-webkit-search-results-button,
.s-header__search-form input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance : none;
}

.s-header__search-form input[type="search"]::-webkit-input-placeholder {
    color   : rgb(24, 24, 24);
    opacity : 1;
}

.s-header__search-form input[type="search"]:-moz-placeholder {
    color   : rgb(24, 24, 24);
    opacity : 1;
}

.s-header__search-form input[type="search"]::-moz-placeholder {
    color   : rgb(24, 24, 24);
    opacity : 1;
}

.s-header__search-form input[type="search"]:-ms-input-placeholder {
    color   : rgb(24, 24, 24);
    opacity : 1;
}

.s-header__search-form input[type="search"].placeholder {
    color   : rgb(24, 24, 24);
    opacity : 1;
}

.s-header__search-form input[type="search"]:focus {
    outline    : none;
    color   : rgb(24, 24, 24);
    box-shadow : none;
}

.s-header__search-form input[type="submit"] {
    display : none;
}

body.search-is-visible .s-header__search {
    transition : all .3s;
    opacity    : 1;
    visibility : visible;
}

body.search-is-visible .s-header__search-inner {
    transform : none;
}

/* ------------------------------------------------------------------- 
 * ## close button for search 
 * ------------------------------------------------------------------- */
.s-header__search-close {
    display: flex;
    background-color: #9b1c1c;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    font: 0 / 0 a;
    text-shadow: none;
    color: transparent;
    transform: translateY(-50%);
    position: absolute;
    top: 45%;
    right: 2.8rem;
}

.s-header__search-close::before,
.s-header__search-close::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    background-color: white;
    position: absolute;
    top: 8px;
    left: 14px;
}

.s-header__search-close::before {
    transform : rotate(45deg);
}

.s-header__search-close::after {
    transform : rotate(-45deg);
}

/* -------------------------------------------------------------------
 * ## search triggers
 * ------------------------------------------------------------------- */
.s-header__search-trigger {
    display         : flex;
    align-items     : center;
    justify-content : center;
    transform       : translateY(-50%);
    position        : absolute;
    top             : 50%;
    right           : 3.6rem;
    background-color: #ffffff;
    border: 1px solid grey;
    width: 28px;
    height: 28px;
    border-radius: 35%;
}

.s-header__social-facebook-trigger{
    display         : flex;
    align-items     : center;
    justify-content : center;
    transform       : translateY(-50%);
    position        : absolute;
    top             : 50%;
    right: 5%;
    background-color: #ffffff;
    border: 1px solid grey;
    width: 28px;
    height: 28px;
    border-radius: 35%;
}


.s-header__social-instagram-trigger{
    display         : flex;
    align-items     : center;
    justify-content : center;
    transform       : translateY(-50%);
    position        : absolute;
    top             : 50%;
    right: 7%;
    background-color: #ffffff;
    border: 1px solid grey;
    width: 28px;
    height: 28px;
    border-radius: 35%;
}

a.s-header__social-facebook-trigger:hover, a.s-header__social-facebook-trigger:active, a.s-header__social-facebook-trigger:focus {
    color: #929292;
}


a.s-header__social-instagram-trigger:hover, a.s-header__social-instagram-trigger:active, a.s-header__social-instagram-trigger:focus {
    color: #929292;
}

/* 
.s-header__search-trigger svg {
    height : 2.8rem;
    width  : 2.8rem;
} */

.s-header__search-trigger svg path {
    stroke :#000;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * site-header
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
    .ss-home .s-header__nav>li {
        padding : 0 1rem;
    }

    .ss-home .s-header__nav>li>a {
        font-size : 1.6rem;
    }
}

@media screen and (min-width: 1201px) {

    .s-header__nav li.has-children:hover>a::after,
    .s-header__nav li.has-children:focus>a::after {
        transform : rotate(225deg);
    }

    .s-header__nav li ul {
        display : block !important;
    }
}

@media screen and (max-width: 1200px) {
    .s-header {
        top : 4rem;
    }

    .s-header__branding {
        left : 2.8rem;
    }

    .s-header__nav-wrap {
        z-index          : 300;
        display          : block;
        opacity          : 0;
        visibility       : hidden;
        background-color : white;
        width            : 100%;
        height           : 100%;
        margin           : 0 !important;
        padding          : var(--vspace-1_5) 0;
        border           : none;
        overflow-y       : auto;
        position         : fixed;
        top              : 0;
        left             : 0;
        bottom           : 0;
        right            : 0;
    }

    .s-header__nav-wrap .s-header__nav-heading {
        display     : inline-block;
        margin-left : 5.6vw;
    }

    .s-header__nav-wrap .s-header__nav {
        display       : block;
        counter-reset : ctr;
        padding       : 0 6vw var(--vspace-1);
    }

    .s-header__nav-wrap .s-header__nav>li.has-children>a {
        padding-right : 1.6rem;
    }

    .s-header__nav-wrap .s-header__nav>li a {
        font-size    : var(--text-xxxl);
        line-height  : 1.6;
        padding-left : 2.4rem;
    }

    .s-header__nav-wrap .s-header__nav>li a:hover {
        color : var(--color-1);
    }

    .s-header__nav-wrap .s-header__nav>li::before {
        content           : counter(ctr, decimal-leading-zero);
        counter-increment : ctr;
        display           : inline;
        font-family       : var(--font-1);
        font-weight       : 400;
        font-size         : var(--text-xs);
        color             : black;
        transform         : translateY(-50%);
        position          : absolute;
        left              : 0;
        top               : 2.8em;
    }

    .s-header__nav-wrap .s-header__nav li {
        display    : block;
        padding    : 0;
        text-align : left;
        position   : relative;
    }

    .s-header__nav-wrap .s-header__nav li ul {
        width            : 100%;
        opacity          : 0;
        visibility       : visible;
        height           : auto;
        max-height       : 0;
        overflow         : hidden;
        transform        : translate(0, 0);
        background-color : transparent;
        padding          : 0;
        position         : static;
    }

    .s-header__nav-wrap .s-header__nav li.sub-menu-is-open>ul {
        opacity    : 1;
        max-height : 1000px;
    }

    .s-header__nav-wrap .s-header__nav li.has-children>a::after {
        top : 0.85em;
    }

    .s-header__nav-wrap .s-header__nav li.sub-menu-is-open>a::after {
        transform : rotate(225deg);
    }

    .s-header__nav-wrap .s-header__nav li ul li a {
        font-size   : calc(var(--text-size) * 0.8889);
        font-weight : 300;
        line-height : var(--vspace-0_5);
        color       : var(--color-text-light);
        padding     : .4rem 1.6rem .2rem 3.2rem;
    }

    .s-header__nav-wrap .s-header__nav li ul li a:focus,
    .s-header__nav-wrap .s-header__nav li ul li a:hover {
        color : var(--color-text-black);
    }

    .s-header__nav-wrap .s-header__nav li.current-menu-item a {
        border : none;
    }

    .s-header__menu-toggle {
        display : block;
    }

    .s-header__search-trigger {
        right : 6.4rem;
    }

    .s-header__search-trigger svg {
        height : 3.2rem;
        width  : 3.2rem;
    }

    .ss-home .s-header__nav li>a {
        font-size : var(--text-xxxl);
    }

    body.menu-is-open .s-header__nav-wrap {
        opacity    : 1;
        visibility : visible;
    }
}

@media screen and (max-width: 600px) {
    .s-header__nav-wrap .s-header__nav-heading {
        margin-left : 7vw;
    }

    .s-header__nav {
        padding : 0 8vw var(--vspace-1);
    }
}

@media screen and (max-width: 400px) {
    .s-header__nav>li a {
        font-size    : var(--text-xxl);
        padding-left : 2.2rem;
    }

    .s-header__nav>li::before {
        top : 2.6rem;
    }
}


/* ===================================================================
 * # HERO
 *
 *
 * ------------------------------------------------------------------- */
.hero {
    --entry-title-size : 7.6rem;
    --text-multiplier  : 1;
    background-color   : var(--color-body);
    width              : 100%;
    height             : 100vh;
    min-height         : calc(25.5 * var(--space));
    overflow           : hidden;
    position           : relative;
}

/* --------------------------------------------------------------------
 * ## hero slider
 * -------------------------------------------------------------------- */
.hero__slider {
    --slider-bg-color : var(--color-gray-1);
    display           : block;
    position          : absolute;
    top               : 0;
    left              : 0;
    right             : 0;
    bottom            : 0;
    width             : 100%;
    height            : 100%;
    min-height        : calc(25.5 * var(--space));
}

.hero__slider .swiper-pagination {
    font-size : 16px;
    width     : auto;
    transform : translateY(-50%);
    top       : 50%;
    right     : 4rem;
    left      : auto;
    bottom    : auto;
}

.hero__slider .swiper-pagination .swiper-pagination-bullet {
    display     : block;
    outline     : none;
    font-weight : 300;
    width       : auto;
    height      : auto;
    background  : transparent;
    color       : #000;
    margin      : 1.4rem 0;
    opacity     : 1;
    position    : relative;
}

.hero__slider .swiper-pagination .swiper-pagination-bullet::before {
    content : "0";
}

.hero__slider .swiper-pagination .swiper-pagination-bullet:nth-child(n + 10)::before {
    content : none;
}

.hero__slider .swiper-pagination .swiper-pagination-bullet-active {
    font-weight : 400;
    color       : black;
}

.hero__slider .swiper-pagination .swiper-pagination-bullet-active::after {
    content          : "";
    display          : block;
    background-color : black;
    height           : 1px;
    width            : 2.8rem;
    position         : absolute;
    top              : 50%;
    right            : -4rem;
    pointer-events   : none;
}

.hero__slide {
    background-color : var(--slider-bg-color);
    display          : flex;
    align-items      : center;
    position         : relative;
}

.hero__slide::before {
    content          : "";
    display          : block;
    background-color : black;
    width            : 50%;
    height           : 100%;
    position         : absolute;
    top              : 0;
    right            : 50%;
    bottom           : 0;
    left             : 0;
}

.hero__entry-image {
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    width               : 50%;
    position            : absolute;
    top                 : 0;
    right               : 50%;
    bottom              : 0;
    left                : 0;
}

.hero__entry-image::before {
    z-index        : 2;
    content        : "";
    display        : block;
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    width          : 100%;
    height         : 100%;
    pointer-events : none;
    background     : black;
    background     : linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 94%);
    opacity        : 0.3;
    mix-blend-mode : multiply;
}

.hero__entry-text {
    width           : 50%;
    display         : flex;
    justify-content : center;
    margin-left     : 50%;
    margin-right    : 6rem;
    padding-top     : calc(8.8rem + var(--vspace-3));
    padding-bottom  : var(--vspace-4);
}

.hero__entry-text-inner {
    z-index          : 2;
    box-sizing       : border-box;
    background-color : var(--slider-bg-color);
    padding          : var(--vspace-1) 4rem var(--vspace-2) 6rem;
    text-align       : center;
    max-width        : 680px;
    max-height       : calc(20 * var(--space));
    overflow         : hidden;
    position         : relative;
}

.hero__entry-text-inner::after {
    content        : "";
    display        : block;
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    width          : 100%;
    height         : 100%;
    background     : linear-gradient(180deg, rgba(249, 250, 251, 0) 95%, #f9fafb 100%);
    pointer-events : none;
}

.hero__entry-meta {
    margin-left   : .4rem;
    margin-bottom : var(--vspace-0_5);
}

.hero__entry-meta .cat-links a {
    font-weight    : 400;
    font-size      : var(--text-sm);
    text-transform : uppercase;
    letter-spacing : .2em;
    color          : var(--color-text-dark);
}

.hero__entry-meta .cat-links a::after {
    content : ", ";
}

.hero__entry-meta .cat-links a:last-child::after {
    display : none;
}


.hero__entry-title a {
    color :#000;
}

.hero__entry-desc {
    max-width    : 540px;
    margin-right : auto;
    margin-left  : auto;
}

.hero__more-link {
    display        : inline-block;
    color          : var(--color-text-dark);
    font-weight    : 500;
    font-size      : 1.15rem;
    text-transform : uppercase;
    letter-spacing : .3em;
    border-bottom  : 1px solid transparent;
}

.hero__more-link:focus,
.hero__more-link:hover {
    color         : var(--color-text-dark);
    border-bottom : 1px solid black;
}

/* --------------------------------------------------------------------
 * ## hero scroll down
 * -------------------------------------------------------------------- */
.hero__scroll-down {
    z-index          : 2;
    display          : flex;
    align-items      : center;
    font-size        : calc(var(--text-size) * 0.5556);
    font-weight      : 600;
    text-transform   : uppercase;
    letter-spacing   : .3em;
    color            : black !important;
    position         : absolute;
    bottom           : 4.4rem;
    left             : calc(100% - 3rem);
    transform-origin : left bottom;
    transform        : rotate(-90deg);
    width            : 200px;
}

.hero__scroll-down svg {
    margin-right : 1.2rem;
    height       : var(--vspace-0_625);
    width        : var(--vspace-0_625);
}

.hero__scroll-down svg path {
    stroke : black;
}

/* --------------------------------------------------------------------
 * ## slide transitions
 * -------------------------------------------------------------------- */
.hero__entry-image,
.hero__entry-text-inner,
.hero__entry-text-inner> :nth-child(n) {
    transition-timing-function : cubic-bezier(0.28, 0.12, 0.22, 1);
    transition-duration        : .4s;
    transition-delay           : 0s;
    opacity                    : 0;
}

.hero__entry-image,
.hero__entry-text-inner {
    transition-property : opacity, visibility;
    visibility          : hidden;
}

.hero__entry-text-inner> :nth-child(n) {
    transition-property : opacity, transform;
    transform           : translate(0, 50px);
}

.no-js .hero__entry-image,
.no-js .hero__entry-text-inner,
.no-js .hero__entry-text-inner> :nth-child(n),
.swiper-slide-active .hero__entry-image,
.swiper-slide-active .hero__entry-text-inner,
.swiper-slide-active .hero__entry-text-inner> :nth-child(n) {
    opacity : 1;
}

.no-js .hero__entry-image,
.swiper-slide-active .hero__entry-image {
    visibility       : visible;
    transition-delay : .4s;
}

.no-js .hero__entry-text-inner,
.swiper-slide-active .hero__entry-text-inner {
    visibility       : visible;
    transition-delay : .8s;
}

.no-js .hero__entry-text-inner> :nth-child(1),
.swiper-slide-active .hero__entry-text-inner> :nth-child(1) {
    transition-delay : 1s;
}

.no-js .hero__entry-text-inner> :nth-child(2),
.swiper-slide-active .hero__entry-text-inner> :nth-child(2) {
    transition-delay : 1.2s;
}

.no-js .hero__entry-text-inner> :nth-child(3),
.swiper-slide-active .hero__entry-text-inner> :nth-child(3) {
    transition-delay : 1.4s;
}

.no-js .hero__entry-text-inner> :nth-child(4),
.swiper-slide-active .hero__entry-text-inner> :nth-child(4) {
    transition-delay : 1.6s;
}

.no-js .hero__entry-text-inner> :nth-child(1),
.no-js .hero__entry-text-inner> :nth-child(2),
.no-js .hero__entry-text-inner> :nth-child(3),
.no-js .hero__entry-text-inner> :nth-child(4),
.swiper-slide-active .hero__entry-text-inner> :nth-child(1),
.swiper-slide-active .hero__entry-text-inner> :nth-child(2),
.swiper-slide-active .hero__entry-text-inner> :nth-child(3),
.swiper-slide-active .hero__entry-text-inner> :nth-child(4) {
    transform : translate(0, 0);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * hero
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1700px) {
    .hero {
        --text-multiplier : .92;
    }

    .hero__entry-text-inner {
        max-width : 600px;
    }
}

@media screen and (max-width: 1600px) {
    .hero {
        --text-multiplier : .9;
    }
}

@media screen and (max-width: 1500px) {
    .hero {
        --text-multiplier : .87;
    }
}

@media screen and (max-width: 1400px) {
    .hero {
        --text-multiplier : .8;
    }

    .hero__slider .swiper-pagination {
        font-size : calc(var(--text-size) * 0.7778);
    }

    .hero__slider .swiper-pagination .swiper-pagination-bullet {
        margin : .8rem 0;
    }

    .hero__entry-text-inner {
        max-width : 540px;
    }

    .hero__entry-meta .cat-links a {
        font-size : calc(var(--text-size) * 0.7778);
    }

    .hero__entry-title {
        margin-bottom : var(--vspace-1_25);
    }

    .hero__entry-desc {
        max-width     : 440px;
        font-size     : calc(var(--text-size) * 0.8889);
        line-height   : var(--vspace-0_875);
        margin-bottom : var(--vspace-0_75);
    }

    .hero__more-link {
        font-size : 1.1rem;
    }
}

@media screen and (max-width: 1300px) {
    .hero {
        --text-multiplier : .76;
    }
}

@media screen and (max-width: 1200px) {
    .hero {
        --text-multiplier : .72;
    }

    .hero__entry-desc {
        max-width : 380px;
    }
}

@media screen and (max-width: 1100px) {
    .hero {
        --text-multiplier : .66;
    }
}

@media screen and (max-width: 1000px) {
    .hero {
        overflow : auto;
    }

    .hero__entry-text {
        width          : 100%;
        margin         : 0 8rem;
        padding-top    : calc(5.5 * var(--space));
        padding-bottom : var(--vspace-4_5);
    }

    .hero__entry-text-inner {
        max-width  : 520px;
        padding    : var(--vspace-2) var(--vspace-1_5) var(--vspace-1_5);
        border     : 1px solid var(--color-gray-2);
        box-shadow : 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.06), 0 8px 8px rgba(0, 0, 0, 0.06);
    }
}

@media screen and (max-width: 800px) {
    .hero {
        --text-multiplier : .62;
    }
}

@media screen and (max-width: 700px) {
    .hero__slider .swiper-pagination {
        right : 3.2rem;
    }

    .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after {
        width : 2.2rem;
        right : -3.2rem;
    }

    .hero__scroll-down {
        left : calc(100% - 2.4rem);
    }
}

@media screen and (max-width: 600px) {
    .hero {
        --text-multiplier : .55;
    }

    .hero__entry-text {
        margin : 0 7rem;
    }

    .hero__entry-text-inner {
        padding : 4.8rem 3.6rem 4rem;
    }
}

@media screen and (max-width: 500px) {
    .hero {
        --text-multiplier : .46;
    }

    .hero__slider .swiper-pagination {
        right : 1.8rem;
    }

    .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after {
        display : none;
    }

    .hero__scroll-down {
        bottom : 2.4rem;
    }

    .hero__scroll-down svg {
        height : 2.4rem;
        width  : 2.4rem;
    }

    .hero__scroll-down span {
        display : none;
    }

    .hero__entry-text {
        margin : 0 5rem;
    }

    .hero__entry-text-inner {
        padding : 4.8rem 3.2rem 4rem;
    }
}

@media screen and (max-width: 400px) {
    .hero {
        --text-multiplier : .44;
    }

    .hero__slider .swiper-pagination {
        transform : translateY(0);
        top       : auto;
        right     : auto;
        left      : 2rem;
        bottom    : 2.4rem;
    }

    .hero__slider .swiper-pagination .swiper-pagination-bullet {
        display          : inline-block;
        font-size        : 1.1rem;
        height           : 2rem;
        width            : 2rem;
        line-height      : 2rem;
        margin           : 0 .6rem;
        background-color : rgba(0, 0, 0, 0.5);
        text-align       : center;
    }

    .hero__slider .swiper-pagination .swiper-pagination-bullet::before {
        display : none;
    }

    .hero__slider .swiper-pagination .swiper-pagination-bullet-active {
        background-color : white;
        color            : black;
    }

    .hero__slide::before,
    .hero__entry-image {
        width : 66%;
        right : 33%;
    }

    .hero__entry-text {
        margin : 0 2rem;
    }

    .hero__entry-text-inner {
        padding : 4.8rem 2.4rem 4rem;
    }

    .hero__entry-title {
        margin-bottom : var(--vspace-1);
    }
}


/* ===================================================================
 * # SITE CONTENT
 *
 *
 * ------------------------------------------------------------------- */
.s-content {
    padding-top: 6.5%;
}

.s-content--blog,
.s-content--page {
    padding-top : calc(6.5 * var(--space));
}

.ss-home .s-content {
    padding-top : 0;
}

/* --------------------------------------------------------------------
 * ## pageheader
 * -------------------------------------------------------------------- */
.s-pageheader {
    text-align : center;
}

.s-pageheader .row {
    max-width : 900px;
}

.s-pageheader .page-title {
    font-size     : var(--text-display-3);
    line-height   : 1.085;
    margin-top    : 0;
    margin-bottom : var(--vspace-1);
}

.s-pageheader .page-title__small-type {
    display        : block;
    font-family    : var(--font-1);
    font-weight    : 300;
    font-size      : calc(var(--text-size) * 0.8889);
    letter-spacing : 0;
    line-height    : 1;
    color          : var(--color-text-light);
}

.s-pageheader+.bricks {
    padding-top : var(--vspace-2);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * site content
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {

    .s-content--blog,
    .s-content--page {
        padding-top : calc(6 * var(--space));
    }
}

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

    .s-content--blog,
    .s-content--page {
        padding-top : var(--vspace-5);
    }
}

@media screen and (max-width: 800px) {
    .s-pageheader .page-title {
        font-size : var(--text-display-2);
    }

    .s-pageheader .page-title__small-type {
        font-size : calc(var(--text-size) * 0.8333);
    }
}

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

    .s-content--blog,
    .s-content--page {
        padding-top : var(--vspace-4_5);
    }

    .s-pageheader .page-title {
        font-size : 4.8rem;
    }
}

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

    .s-pageheader .page-title {
        font-size : 4.2rem;
    }

    .s-pageheader .page-title__small-type {
        font-size : 1.3rem;
    }

    .s-pageheader+.bricks {
        padding-top : var(--vspace-1);
    }
}