@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,600;0,700;1,300&display=swap');



:root {
    --color-primary: #323A53;
    --color-secondary: #57B45A;
    --color-secondary-alpha-low: rgba(87, 180, 90, 0.15);
    --color-ecru: #F6F4F0;

    --color-white: #FFFFFF;
    --color-white-alpha-high: rgba(255, 255, 255, 0.85);
    --color-black-alpha-low: rgba(0, 0, 0, 0.4);
    --color-gray: #BEBEBA;
    --color-lightgray: #E8E8E8;

    --font-head: 'Overpass', Arial, Helvetica, sans-serif;
    --font-sub: 'novecento-sans';
    --font-tertiary: 'novecento-sans-narrow';

    --font-size-xlarge: 28px;
    --font-size-large: 24px;
    --font-size-medium: 22px;
    --font-size-small: 20px;
    --font-size-xsmall: 18px;

    --spacer-xsmall: 7.5px;
    --spacer-small: 7.5px;
    --spacer-medium: 10px;
    --spacer-large: 15px;
    --spacer-xlarge: 20px;
    --spacer-xxlarge: 40px;
}







html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
html, body	{
    height: 100%;
}
html {
    -webkit-text-size-adjust: 100%;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div, header, nav, figure, main, footer {
    display: block;
    margin: 0;
    padding: 0;
}









body {
    font-family: 'Overpass', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--color-primary);
}
img {
    border: none;
}
strong, b {
    font-weight: 700;
}
ul {
    margin-left: 20px;
}




a {
    color: var(--color-primary);
    text-decoration: underline;
	transition: all .3s;
}
a:hover, a:active {
    color: var(--color-secondary);
}


a.secondary {
    color: var(--color-secondary);
    text-decoration: underline;
}
a.secondary:hover, a.secondary:active {
    color: var(--color-secondary);
    opacity: 0.85;
}


a.body {
    color: var(--color-primary);
    text-decoration: none;
}
a.body:hover, a.body:active {
    opacity: 0.95;
    color: var(--color-primary);
}


a.noborder {
    text-decoration: none;

}



a.btn {
    display: inline-block;
    font-family: var(--font-tertiary);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;

    padding: var(--spacer-medium);
    margin: var(--spacer-xlarge) auto 0;
    background-color: var(--color-primary);
}
a.btn i {
    display: inline-block;
    vertical-align: baseline;
    margin-left: var(--spacer-medium);
}
a.btn:hover,
a.btn:active {
    background-color: var(--color-secondary);
}




a.btn.border {
    font-weight: 400;
    border: 1px solid var(--color-white);
}
a.btn.border:hover,
a.btn.border:active {
    color: var(--color-primary);
    background-color: var(--color-white);
}




a.btn.ecru {
    color: var(--color-primary);
    background-color: var(--color-ecru);
}
a.btn.ecru:hover,
a.btn.ecru:active {
    color: var(--color-secondary);
}




a.return {
    color: var(--color-secondary);
    text-decoration: none;
}
a.return:hover,
a.return:active {
    color: var(--color-primary);
}
a.return i {
    display: inline-block;
    vertical-align: baseline;
    margin-right: 10px;
}








h1 {
    font-family: var(--font-tertiary);
    font-size: var(--font-size-xlarge);
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}
h2 {
    font-family: var(--font-tertiary);
    font-size: var(--font-size-medium);
    font-weight: 200;
    line-height: 1.3;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
h3 {
    font-family: var(--font-head);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-secondary);
    letter-spacing: 1px;
}
h4 {
    font-family: var(--font-tertiary);
    font-size: var(--font-size-large);
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}
h5 {
    font-family: var(--font-head);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    text-transform: uppercase;
}
h6 {
    font-family: var(--font-tertiary);
    font-size: var(--font-size-xsmall);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}




hr {
    width: 100%;
    clear: both;
    background-color: var(--color-secondary);
    height: 1px;
    border: 0;
    margin: 0;
    padding: 0;
}

hr.small {
    max-width: 65px;
    margin: var(--spacer-large) auto;
    height: 2px;
}













div.iconrow {
    display: table;
    width: 100%;
    margin-top: var(--spacer-large);
}
div.iconrow:nth-child(1) {
    margin-top: 0;
}
div.iconrow > div {
    display: table-cell;
    vertical-align: middle;
}
div.iconrow > div:nth-child(1) {
    width: 50px;
}
div.iconrow > div:nth-child(2) {
    padding-left: var(--spacer-large);
    text-align: left;
}
div.iconrow i {
    display: block;
    width: 100%;
    height: 50px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 50px;
    background-color: var(--color-primary);

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
div.iconrow i.highlight {
    background-color: var(--color-secondary);
}



div.iconrow.small {
    margin-top: var(--spacer-medium);
}
div.iconrow.small > div:nth-child(1) {
    width: 30px;
}
div.iconrow.small i {
    height: 30px;
    color: var(--color-primary);
    font-size: 18px;
    line-height: 30px;
    background-color: transparent;
}
div.iconrow.small i.highlight {
    color: var(--color-secondary);
}














div.btnrow {
    display: table;
    width: 100%;
    margin-top: var(--spacer-large);
}
div.btnrow:nth-child(1) {
    margin-top: 0;
}
div.btnrow > div {
    display: table-cell;
    vertical-align: middle;
}


div.btnrow > div:nth-child(1) {
    width: 100px;
    padding-right: var(--spacer-large);
}
div.btnrow > div:nth-child(1) img {
    display: block;
    width: 100%;
}

div.btnrow > div:nth-child(2) a {
    display: block;
    position: relative;

    font-family: var(--font-tertiary);
    font-size: var(--font-size-xsmall);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;

    padding-right: 50px;

}
div.btnrow > div:nth-child(2) a:hover,
div.btnrow > div:nth-child(2) a:active {
    color: var(--color-secondary);
}

div.btnrow > div:nth-child(2) a i {
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    font-size: 20px;
    line-height: 1;
}






/*
======================================================================
STARTER
=====================================================================
*/
div.starter {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}
div.starter > div {
    position: relative;
}
div.starter > div.left {
    order: 1;
    text-align: center;
    background-color: var(--color-lightgray);
}
div.starter > div.right {
    height: 320px;
    text-align: center;
    background-position: center center;
    background-size: cover;
}

div.starter div.content {
    display: table;
    width: 100%;
    height: 100%;
}
div.starter div.content > div {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 0;
}





div.starter h1.slogan > span {
    display: block;
    font-family: var(--font-sub);
    font-size: var(--font-size-large);
    line-height: 1.1;
    color: var(--color-white);
    text-shadow: 0 1px 2px var(--color-black-alpha-low);
}
div.starter h1.slogan > span:nth-child(1) {
    font-size: var(--font-size-small);
    line-height: 1;
}
div.starter h1.slogan > span:nth-last-child(1) {
    font-size: var(--font-size-xsmall);
    font-weight: 100;
    line-height: 2;
}





/* home */
div.starter.home div.content > div > div.wrapper {
    max-width: 500px;
}
div.starter.home > div.left img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
div.starter.home > div.left img.logo {
    max-width: 280px;
    margin-top: var(--spacer-xlarge);
    margin-bottom: var(--spacer-xlarge);
}
div.starter.home > div.left img.kaas {
    max-width: 240px;    
    margin-bottom: var(--spacer-xlarge);
}


div.starter.home > div.left ul {
    margin-top: var(--spacer-large);
}
div.starter.home > div.left ul > li {
    display: block;
    list-style: none;
    line-height: 1;
    padding: var(--spacer-xsmall) var(--spacer-large);
}

.home > div.left ul a {
    color: var(--color-gray);
}
div.starter.home > div.left ul a:hover,
div.starter.home > div.left ul a:active {
    color: var(--color-secondary);
}




div.starter.home > div.right {
    background-image: url('/img/starters/cow-small.jpg');
}





/* contact */
div.starter.contact > div.left {
    z-index: 800;
    background-color: var(--color-white);
}
div.starter.contact > div.right {
    background-position: center top;
    background-image: url('/img/starters/contact-small.jpg');
}


div.starter.contact h1.slogan > span {
    font-size: var(--font-size-xlarge);
    color: var(--color-primary);
    text-shadow: none;
}
div.starter.contact h1 > span:nth-child(1) {
    font-size: var(--font-size-small);
}
div.starter.contact h1 > span:nth-last-child(1) {
    font-size: var(--font-size-small);
}



div.starter.contact div.iconWrap {
    width: 200px;
    margin: auto;
}




/*
======================================================================
BANNER
=====================================================================
*/
div.banner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;

    color: var(--color-white);
    background-color: var(--color-primary);
}
div.banner > div {
    position: relative;
}
div.banner > div.left {
    height: 320px;
    text-align: center;
    background-position: center center;
    background-size: cover;
}



div.banner h1 {
    color: var(--color-white);
}



div.banner div.content {
    display: table;
    width: 100%;
    height: 100%;
}
div.banner div.content > div {
    display: table-cell;
    vertical-align: middle;
    padding: var(--spacer-xlarge) 0;
}
div.banner div.content > div > div.wrapper {
    max-width: 600px;
    margin-left: 0;
}







/*
======================================================================
TWO COLS
=====================================================================
*/
div.two-cols.center {
    text-align: center;
}
div.two-cols > div:nth-child(1) {
    margin-bottom: var(--spacer-xxlarge);
}




/*
======================================================================
TILES
=====================================================================
*/
div.tileWrap {
    display: flex;
    flex-direction: column;
}
div.tileWrap > div {
    width: 100%;
    max-height: 250px;
}
div.tileWrap > div:nth-child(2) {
    margin: var(--spacer-xlarge) 0;
}

div.tileWrap > div > div {
    display: table;
    width: 100%;
    height: 100%;
}
div.tileWrap a {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
    height: 100%;

    font-family: var(--font-tertiary);
    font-size: var(--font-size-medium);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 2px var(--color-black-alpha-low);
    letter-spacing: 2px;

    background-size: cover;
    background-position: center center;
}
div.tileWrap a:hover,
div.tileWrap a:active {
    opacity: 0.85;
}
div.tileWrap a > span {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--spacer-medium) var(--spacer-xlarge) var(--spacer-medium) var(--spacer-medium);
}
div.tileWrap a i {
    position: absolute;
    right: var(--spacer-small);
    top: calc(50% - (var(--font-size-medium) / 2));
}




/*
======================================================================
NEWS
=====================================================================
*/
div.newsWrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
div.newsWrap > div {
    background-color: var(--color-ecru);
    margin-top: var(--spacer-xlarge);
}
section.ecru div.newsWrap > div {
    background-color: var(--color-white);
}
div.newsWrap > div:nth-child(1) {
    margin-top: 0;
}



div.newsWrap img {
    display: block;
    width: 100%;
}


div.newsWrap div.txt {
    position: relative;
    padding: var(--spacer-large);
    padding-right: 75px;
}

div.newsWrap a.icon {
    position: absolute;
    right: var(--spacer-medium);
    top: calc(50% - 10px);

    font-size: 20px;
    line-height: 1;
}

.source-img {
    margin-bottom: -20px;
    padding-top: 5px;
    padding-right: 5px;
    color: grey;
    font-size: 10px;
    text-align: right;
}
.source-text {

    padding-top: 5px;
    padding-left: 0px;
    padding-bottom: 5px;
    color: grey;
    font-size: 10px;
}


/*
======================================================================
NEWSITEM
=====================================================================
*/
div.two-cols.newsitem img {
    display: block;
    width: 100%;
}




/*
======================================================================
IMAGE ROW
=====================================================================
*/
div.imgrow {
    padding: 40px 0 20px 0;
}
div.imgWrap {
    position: relative;
    margin: calc(var(--spacer-medium) * -1);
    display: flex;
}
div.imgWrap img {
    width: calc( 25% - (var(--spacer-medium) * 2));
    margin: var(--spacer-medium);
}





/*
======================================================================
SHOP
=====================================================================
*/
div.shop h1 {
    color: var(--color-secondary);
}





/*
======================================================================
PRODUCTS
=====================================================================
*/
div#productWrap {
    position: relative;
}
div.productSlide {
    opacity: 0;
}
div.products {
    position: relative;
    display: flex;
    flex-direction: column;
}
div.products > div:nth-child(1) {
    order: 1;
    padding: var(--spacer-large);
    background-color: var(--color-white);
}


div.products > div:nth-child(2) img {
    display: block;
    width: 100%;
}


div.products h1 {
    font-size: var(--font-size-large);
    color: var(--color-secondary);
}



div.productSlide.absolute {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}



div.button {
    display: table;
    background-color: var(--color-primary);
    margin: 15px 0 0 auto;
}
div.button > div {
    display: table-cell;
    vertical-align: middle;
}
div.button > div:nth-child(1) {
    width: 110px;
}
div.button img {
    display: block;
    width: 100%;
}
div.button > div:nth-child(2) {
    height: 100%;

    font-family: var(--font-tertiary);
    font-weight: 400;
    font-size: var(--font-size-small);
    line-height: 100%;
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 var(--spacer-large);
}
div.button > div:nth-child(2) i {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-left: 20px;
}
div.button:hover,
div.button:active,
div.button:focus {
    cursor: pointer;
    background-color: var(--color-secondary);
}






/*
======================================================================
VARIA
=====================================================================
*/
div.varia img {
    display: block;
    width: 250px;
    margin: 0 auto var(--spacer-xlarge);
}





/*
======================================================================
CHEESE
=====================================================================
*/

div#cheeseCat {
    position: relative;
    z-index: 1;
    display: block;
    width: 250px;
    height: 38px;
    margin: 20px auto;

    font-family: var(--font-tertiary);
    font-size: var(--font-size-small);
    font-weight: 200;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
}
div#cheeseCat a {
    position: relative;
    display: block;

    padding: 7px 50px 7px 20px;
    background-color: var(--color-secondary);

    color: var(--color-white);
    text-decoration: none;
}
div#cheeseCat a.placeholder::after {
    position: absolute;
    right: 15px;
    top: calc(50% - 11px);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
}

div#cheeseCat ul {
    display: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
}
div#cheeseCat ul > li {
    display: block;
    list-style: none;

    padding: 7px 50px 7px 20px;
    background-color: var(--color-white);
    color: var(--color-secondary);
    cursor: pointer;

    border: 1px solid var(--color-secondary);
    border-top: none;
}
div#cheeseCat ul > li.hide {
    display: none;
}
div#cheeseCat ul > li:hover,
div#cheeseCat ul > li:active,
div#cheeseCat ul > li:focus {
    background-color: var(--color-secondary-alpha-low);
}





div#cheeseTarget {
    display: none;
}

div#cheeseThumbs span,
div#cheeseTarget span {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 5px;
    color: var(--color-secondary);
}



div#cheeseThumbs {
    display: block;
}
div#cheeseThumbs > div {
    display: inline-block;
    vertical-align: middle;
}

div#cheeseThumbs > div.prev,
div#cheeseThumbs > div.next {
    width: 40px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
div#cheeseThumbs > div.next {
    text-align: right;
}

div#cheeseThumbs > div.prev.slick-disabled,
div#cheeseThumbs > div.next.slick-disabled {
    color: var(--color-gray);
    cursor: default;
}
div#cheeseThumbs > div.prev.slick-arrow.slick-hidden,
div#cheeseThumbs > div.next.slick-arrow.slick-hidden {
    opacity: 0;
    cursor: default;
}

div#cheeseThumbs > div.items {
    text-align: center;
    width: calc(100% - 50px - 50px);
}




div#cheeseThumbs div.item {
    padding: var(--spacer-medium);
    margin: 0 var(--spacer-xsmall);
}
div#cheeseThumbs img {
    display: block;
    width: 100%;
    padding: 0 var(--spacer-medium);
}
div#cheeseThumbs p > span{
    display: inline-block;
    margin: 0 5px;
    color: var(--color-secondary);
}


div#cheeseThumbs p.cat {
    font-family: var(--font-tertiary);
    font-weight: 200;
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}




/*
======================================================================
HISTORY
=====================================================================
*/
div#historyItems {
    position: relative;
    display: block;
}


div#historyItems > div.items {
    width: 100%;
    max-width: 960px;
    padding-top: 30px;
}
div#historyItems div.item {
    position: relative;
}
div#historyItems img {
    display: block;
    width: 100%;
}
div#historyItems p {
    padding-top: var(--spacer-medium);
}





div#historyItems .prev,
div#historyItems .next {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
div#historyItems .prev {
    right: 40px;
}


div#historyItems .slick-disabled {
    opacity: 0.4;
    cursor: default;
}




/*
======================================================================
SOCIALS
=====================================================================
*/
div.socialWrap {
    text-align: center;
}
div.socialWrap a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 var(--spacer-large);
}
div.socialWrap a > i {
    width: 50px;
    height: 50px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 50px;
    background-color: #1B202F;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
div.socialWrap a:hover > i,
div.socialWrap a:active > i {
    background-color: var(--color-primary);
}




/*
======================================================================
TEMPLATE
=====================================================================
*/

#wrap {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

.wrapper {
    position: relative;
    display: block;
    max-width: 1280px;
    padding: 0 20px;
    margin: auto;
}

.center {
    text-align: center;
}






/* Header */
header {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    background-color: var(--color-white-alpha-high);
}
header > .wrapper {
    display: table;
    width: 100%;
    padding: 0;
}
header > .wrapper > div,
header > .wrapper > nav {
    display: table-cell;
    vertical-align: middle;
}



/* Header Logo */
header div.logo {
    width: 225px;
    padding: 15px 30px 10px 20px;
}
header div.logo a,
header div.logo img {
    display: block;
    width: 100%;
}



/* Header Hamburger */
header div.hamburger {
    text-align: right;
}
header div.hamburger a {
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    font-size: 18px;
    line-height: 1;
    visibility: hidden;
}
header div.hamburger a:hover,
header div.hamburger a:active {
    color: var(--color-secondary);
}




/* Header Nav - default */
header nav {
    font-family: var(--font-tertiary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}
header nav a {
    text-decoration: none;
}



/* Header Nav - head */
header nav#head {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: calc(100% - 54px);
}
header nav#head a {
    display: block;
    padding: 10px 20px;
    text-align: right;
    border-right: 1px solid var(--color-primary);
    background-color: var(--color-white-alpha-high);
}
header nav#head a:nth-last-child(1) {
    border-bottom: 1px solid var(--color-primary);
}
header nav#head a:hover,
header nav#head a:active {
    background-color: var(--color-secondary);
    color: var(--color-white);
}


/* Header Nav - Lan */
header nav#lan {
    /* display: none; */
    position: relative;
    width: 55px;
}
header nav#lan a {
    display: block;
    text-align: left;
    padding: 0 10px;
    border-left: 1px solid var(--color-primary);
}
header nav#lan i {
    position: relative;
    margin-left: 5px;
}


header nav#lan > div {
    display: none;
    position: absolute;
    left: 0%;
    top: 100%;
    width: 100%;
    background-color: var(--color-white-alpha-high);
}
header nav#lan > div.bb {
    border-bottom: 1px solid var(--color-primary);
}
header nav#lan > div > a {
    padding: 10px;
}
header nav#lan > div > a:hover,
header nav#lan > div > a:active {
    background-color: var(--color-secondary);
    color: var(--color-white);
}




/* Header Socials */
header nav#socials {
    display: none;
}















/* Main */
main > section {
    padding: 40px 0;
}

main > section.xlightgray {
    background-color:#F9F9F9;
}
main > section.lightgray {
    background-color: var(--color-lightgray);
}
main > section.primary {
    color: var(--color-white);
    background-color: var(--color-primary);
}
main > section.primary h1 {
    color: var(--color-white);
}
main > section.ecru {
    background-color: var(--color-ecru);
}








/* Footer */
footer {
    color: var(--color-white);
    padding: 30px 0 20px 0;
    border-top: 5px solid var(--color-white);
    background-color: var(--color-primary);
}

footer a {
    color: var(--color-white);
    text-decoration: none;
}
footer a:hover, footer a:active {
    color:var(--color-white);
    text-decoration: underline;
}





/* Footer - logo */
footer div.logo img {
    display: block;
    width: 100%;
    max-width: 200px;
}



/* Footer - Contact */
footer div.contact {
    margin: 20px 0;
}



/* Footer - Socials */
footer div.socials a {
    margin-left: 20px;
}
footer div.socials a:hover, footer div.socials a:active {
    opacity: 0.75;
}
footer > .wrapper > div.socials a:nth-child(1) {
    margin-left: 0;
}
















.mb1 {
    margin-bottom: var(--spacer-xsmall);
}
.mb2 {
    margin-bottom: var(--spacer-small);
}
.mb3 {
    margin-bottom: var(--spacer-medium);
}
.mb4 {
    margin-bottom: var(--spacer-large);
}
.mb5 {
    margin-bottom: var(--spacer-xlarge);
}


.mt1 {
    margin-top: var(--spacer-xsmall);
}
.mt2 {
    margin-top: var(--spacer-small);
}
.mt3 {
    margin-top: var(--spacer-medium);
}
.mt4 {
    margin-top: var(--spacer-large);
}
.mt5 {
    margin-top: var(--spacer-xlarge);
}