/**
*** STUDIO STEIN UI SYSTEM
*** FOR: GONDÔ MARKET
**/

@font-face {
  font-family: 'Cocogoose';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/cocogoose.woff) format('woff');
}

@font-face {
  font-family: 'Rimouski';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/rimouski.woff) format('woff');
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v78/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }

/* VARIABLES */
:root {

  /* Color */
  --c-primary: #00ADEE;
  --c-primary-light: #33c2f7;
  --c-primary-dark: #0085b6;

  --c-secondary: #89BE33;
  --c-secondary-light: #a6db51;
  --c-secondary-dark: #6d9c21;

  --c-light: #F7F7F8;
  --c-light-alt: #EDEDED;
  --c-dark: #7A7A7A;
  --c-dark-alt: #141E27;


  /* Grid */
  --b-layout-max-width: 84rem; /* 1344 px */
  --b-layout-gutter: 20px;

  /* Font */
  --f-font-primary: 'Rimouski', Helvetica, sans-serif;
  --f-font-alt: 'Cocogoose', sans-serif;
  
  --f-primary-light: 400;
  --f-primary-regular: 400;
  --f-primary-bold: 400;

  --f-alt-light: 700;
  --f-alt-regular: 700;
  --f-alt-bold: 700;

  /* Random */
  --r-border-radius: 8px;
  --r-box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.12);

  /* Inputs */
  --i-border: 2px solid #00ADEE;
  --i-background: none;
  --i-color: #141E27;
  --i-placeholder: #7A7A7A;
  
  /* Margin / Padding */
  --mp-1: 4px;
  --mp-2: 8px;
  --mp-3: 16px;
  --mp-4: 32px;
  --mp-5: 64px;
  --mp-6: 128px;

  --mpR-1: 2px;
  --mpR-2: 4px;
  --mpR-3: 8px;
  --mpR-4: 12px;
  --mpR-5: 16px;
  --mpR-6: 24px;
}


/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 1rem;
  scroll-behavior: smooth;
  line-height: 1.5;
  font-family: var(--f-font-primary);
  color: var(--c-dark);
}

/* ANIMATION */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform:translateY(-32px);
  }
  to {
    opacity: 1;
    transform:translateY(0px);
  }
}

.animate {
    opacity: 0;
    transform:translateY(-32px);
}

.animatePlay {
  animation-name: fadeInDown;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

/* TYPOGRAPHY */

h1 { font-size: 2.5rem; font-family: var(--f-font-alt); font-weight: var(--f-alt-bold);}

h2 {  font-size: 2rem; font-family: var(--f-font-alt); font-weight: var(--f-alt-bold);}

h3 {  font-size: 1.375rem; font-family: var(--f-font-alt); font-weight: var(--f-alt-bold);}

h4 {  font-size: 1.125rem; font-family: var(--f-font-alt); font-weight: var(--f-alt-bold);}

h5 {  font-size: 1rem; font-family: var(--f-font-alt); font-weight: var(--f-alt-bold);}

h6 {  font-size: 0.875rem; font-family: var(--f-font-alt); font-weight: var(--f-alt-bold);}

p {  font-size: 1rem;}

.lead { font-size: 1.25rem; }

.small { font-size: 0.875rem; }

a {
    text-decoration: none;
    color: inherit;
  }

.font-alt {font-family: var(--f-font-alt);}
	
.uppercase { text-transform: uppercase; }

.pointer { cursor: pointer; }

.balance-text {
	text-wrap: balance;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    vertical-align: text-bottom;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

/* Font Weight */

.font-light {  font-weight: var(--f-primary-light);}
.font-alt.font-light {    font-weight: var(--f-alt-light);  }
.font-regular {    font-weight: var(--f-primary-regular);}
.font-alt.font-regular {    font-weight: var(--f-alt-regular);  }
.font-bold {    font-weight: var(--f-primary-bold);}
.font-alt.font-bold {    font-weight: var(--f-alt-bold);  }

/* Line Heights */

.lh-75 { line-height: 0.75; }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }
.lh-175 { line-height: 1.75; }
.lh-200 { line-height: 2; }

/* POSITIONING */

.left {  text-align: left !important;}
.right {  text-align: right !important;}
.justify {  text-align: justify !important;}

.center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* COLORS */

.bg-primary { background: var(--c-primary); }
.bg-secondary { background: var(--c-secondary); }
.bg-light { background: var(--c-light); }
.bg-light-alt { background: var(--c-light-alt); }
.bg-dark { background: var(--c-dark); }
.bg-dark-alt { background: var(--c-dark-alt); }
.bg-white { background: white; }
.bg-black { background: black; }

.text-primary { color: var(--c-primary); }
.text-secondary { color: var(--c-secondary); }
.text-light { color: var(--c-light); }
.text-light-alt { color: var(--c-light-alt); }
.text-dark { color: var(--c-dark); }
.text-dark-alt { color: var(--c-dark-alt); }
.text-white { color: white; }
.text-black { color: black; }


/* DISPLAY */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.no-display { display: none; }

/* RANDOM */

.radius { border-radius: 4px; }
.no-overflow { overflow: hidden; }
.shadow { box-shadow: var(--r-box-shadow); }
.verticalmiddle { vertical-align: middle; }

/* TABLES */

.table {
	margin-bottom: 1.5rem;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: center
}

.table td,
.table th {
	border: 1px solid rgba(222, 226, 230, .5);
	border-width: 0 0 1px;
	padding: .75rem;
	vertical-align: middle;
	text-align: inherit;
	margin: 0;
  line-height: 1;
}

.table tr {
	transition: .3s
}

.table tr:hover {
  background: var(--c-light-alt);
}

.table thead,
.table thead th {
	border-bottom: 2px solid rgba(222, 226, 230, .5)
}

.table tfoot th,
.table thead th {
	padding: 1rem;
}

.table tfoot th {
	border-top: 2px solid rgba(222, 226, 230, .5);
	border-bottom: none
}

/* FLEXBOX */
.flex {    display: flex;  }
  .flex-row {    flex-direction: row;  }
  .flex-row-reverse {    flex-direction: row-reverse;  }
  .flex-column {    flex-direction: column;  }
  .flex-column-reverse {    flex-direction: column-reverse;  }
  .flex-grow {    flex-grow: 1;  }
  .flex-grow-2 {    flex-grow: 2;  }
  .flex-grow-3 {    flex-grow: 3;  }
  .flex-grow-4 {    flex-grow: 4;  }
  .flex-grow-5 {    flex-grow: 5;  }
  .flex-grow-6 {    flex-grow: 6;  }
  .flex-wrap {    flex-wrap: wrap;  }
  .flex-justify-end {    justify-content: flex-end;  }
  .flex-justify-center {    justify-content: center;  }
  .flex-justify-space-between {    justify-content: space-between;  }
  .flex-align-stretch {    align-items: stretch;  }
  .flex-align-start {    align-items: start;  }
  .flex-align-end {    align-items: end;  }
  .flex-align-center {    align-items: center;  }
  
  /* z-index */
  
  .z-0 { z-index: 0; }
  .z-1 { z-index: 10; }
  .z-2 { z-index: 20; }
  .z-3 { z-index: 30; }
  .z-4 { z-index: 40; }
  .z-5 { z-index: 50; }
  .z-6 { z-index: 60; }
  
  /* MARGIN */
  
  .m-0 {margin: 0px !important;}
  .m-1 {margin: var(--mp-1) !important;}
  .m-2 {margin: var(--mp-2) !important;  }
  .m-3 {margin: var(--mp-3) !important;  }
  .m-4 {margin: var(--mp-4) !important;  }
  .m-5 {margin: var(--mp-5) !important;  }
  .m-6 {margin: var(--mp-6) !important;  }
  .mv-0 {margin-top: 0px !important;margin-bottom: 0px !important;  }
  .mv-1 {margin-top: var(--mp-1) !important;margin-bottom: var(--mp-1) !important;  }
  .mv-2 {margin-top: var(--mp-2) !important;margin-bottom: var(--mp-2) !important;  }
  .mv-3 {margin-top: var(--mp-3) !important;margin-bottom: var(--mp-3) !important;  }
  .mv-4 {margin-top: var(--mp-4) !important;margin-bottom: var(--mp-4) !important;  }
  .mv-5 {margin-top: var(--mp-5) !important;margin-bottom: var(--mp-5) !important;  }
  .mv-6 {margin-top: var(--mp-6) !important;margin-bottom: var(--mp-6) !important;  }
  .mh-0 {margin-left: 0px !important;margin-right: 0px !important;  }
  .mh-1 {margin-left: var(--mp-1) !important;margin-right: var(--mp-1) !important;  }
  .mh-2 {margin-left: var(--mp-2) !important;margin-right: var(--mp-2) !important;  }
  .mh-3 {margin-left: var(--mp-3) !important;margin-right: var(--mp-3) !important;  }
  .mh-4 {margin-left: var(--mp-4) !important;margin-right: var(--mp-4) !important;  }
  .mh-5 {margin-left: var(--mp-5) !important;margin-right: var(--mp-5) !important;  }
  .mh-6 {margin-left: var(--mp-6) !important;margin-right: var(--mp-6) !important;  }
  .mt-0 {margin-top: 0px !important;  }
  .mb-0 {margin-bottom: 0px !important;  }
  .mt-1 {margin-top: var(--mp-1) !important;  }
  .mb-1 {margin-bottom: var(--mp-1) !important;  }
  .mt-2 {margin-top: var(--mp-2) !important;  }
  .mb-2 {margin-bottom: var(--mp-2) !important;  }
  .mt-3 {margin-top: var(--mp-3) !important;  }
  .mb-3 {margin-bottom: var(--mp-3) !important;  }
  .mt-4 {margin-top: var(--mp-4) !important;  }
  .mb-4 {margin-bottom: var(--mp-4) !important;  }
  .mt-5 {margin-top: var(--mp-5) !important;  }
  .mb-5 {margin-bottom: var(--mp-5) !important;  }
  .mt-6 {margin-top: var(--mp-6) !important;  }
  .mb-6 {margin-bottom: var(--mp-6) !important;  }
  .ml-0 {margin-left: 0px !important;  }
  .mr-0 {margin-right: 0px !important;  }
  .ml-1 {margin-left: var(--mp-1) !important;  }
  .mr-1 {margin-right: var(--mp-1) !important;  }
  .ml-2 {margin-left: var(--mp-2) !important;  }
  .mr-2 {margin-right: var(--mp-2) !important;  }
  .ml-3 {margin-left: var(--mp-3) !important;  }
  .mr-3 {margin-right: var(--mp-3) !important; }
  .ml-4 {margin-left: var(--mp-4) !important;  }
  .mr-4 {margin-right: var(--mp-4) !important;  }
  .ml-5 {margin-left: var(--mp-5) !important;  }
  .mr-5 {margin-right: var(--mp-5) !important;  }
  .ml-6 {margin-left: var(--mp-6) !important;  }
  .mr-6 {margin-right: var(--mp-6) !important;  }
  
  /* PADDING */
  
  .p-0 {padding: 0px !important;}
  .p-1 {padding: var(--mp-1) !important;}
  .p-2 {padding: var(--mp-2) !important;}
  .p-3 {padding: var(--mp-3) !important;}
  .p-4 {padding: var(--mp-4) !important;}
  .p-5 {padding: var(--mp-5) !important;}
  .p-6 {padding: var(--mp-6) !important;}
  .pv-0 {padding-top: 0px !important;padding-bottom: 0px !important;}
  .pv-1 {padding-top: var(--mp-1) !important;padding-bottom: var(--mp-1) !important;}
  .pv-2 {padding-top: var(--mp-2) !important;padding-bottom: var(--mp-2) !important;}
  .pv-3 {padding-top: var(--mp-3) !important;padding-bottom: var(--mp-3) !important;}
  .pv-4 {padding-top: var(--mp-4) !important;padding-bottom: var(--mp-4) !important;}
  .pv-5 {padding-top: var(--mp-5) !important;padding-bottom: var(--mp-5) !important;}
  .pv-6 {padding-top: var(--mp-6) !important;padding-bottom: var(--mp-6) !important;}
  .ph-0 {padding-left: 0px !important;padding-right: 0px !important;}
  .ph-1 {padding-left: var(--mp-1) !important;padding-right: var(--mp-1) !important;}
  .ph-2 {padding-left: var(--mp-2) !important;padding-right: var(--mp-2) !important;}
  .ph-3 {padding-left: var(--mp-3) !important;padding-right: var(--mp-3) !important;}
  .ph-4 {padding-left: var(--mp-4) !important;padding-right: var(--mp-4) !important;}
  .ph-5 {padding-left: var(--mp-5) !important;padding-right: var(--mp-5) !important;}
  .ph-6 {padding-left: var(--mp-6) !important;padding-right: var(--mp-6) !important;}
  .pt-0 {padding-top: 0px !important;}
  .pb-0 {padding-bottom: 0px !important;}
  .pt-1 {padding-top: var(--mp-1) !important;}
  .pb-1 {padding-bottom: var(--mp-1) !important;}
  .pt-2 {padding-top: var(--mp-2) !important;}
  .pb-2 {padding-bottom: var(--mp-2) !important;}
  .pt-3 {padding-top: var(--mp-3) !important;}
  .pb-3 {padding-bottom: var(--mp-3) !important;}
  .pt-4 {padding-top: var(--mp-4) !important;}
  .pb-4 {padding-bottom: var(--mp-4) !important;}
  .pt-5 {padding-top: var(--mp-5) !important;}
  .pb-5 {padding-bottom: var(--mp-5) !important;}
  .pt-6 {padding-top: var(--mp-6) !important;}
  .pb-6 {padding-bottom: var(--mp-6) !important;}
  .pl-0 {padding-left: 0px !important;}
  .pr-0 {padding-right: 0px !important;}
  .pl-1 {padding-left: var(--mp-1) !important;}
  .pr-1 {padding-right: var(--mp-1) !important;}
  .pl-2 {padding-left: var(--mp-2) !important;}
  .pr-2 {padding-right: var(--mp-2) !important;}
  .pl-3 {padding-left: var(--mp-3) !important;}
  .pr-3 {padding-right: var(--mp-3) !important;}
  .pl-4 {padding-left: var(--mp-4) !important;}
  .pr-4 {padding-right: var(--mp-4) !important;}
  .pl-5 {padding-left: var(--mp-5) !important;}
  .pr-5 {padding-right: var(--mp-5) !important;}
  .pl-6 {padding-left: var(--mp-6) !important;}
  .pr-6 {padding-right: var(--mp-6) !important;}
  
/* INPUTS */

label {
  display:block;
  width:100%;
  margin:var(--mp-3) 0 var(--mp-2) 0;
}

input, textarea, select {
    display: block;
    border: var(--i-border);
    padding: 12px 24px;
    border-radius: var(--r-border-radius);
    width: 100%;
  
    color: var(--i-color);
    font-family: inherit;
    font-size: 16px;
  
    background: var(--i-background);

    box-sizing: border-box;
  }

  textarea { resize: vertical; min-height: 100px;}

  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--i-placeholder); }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--i-placeholder); }
  input::placeholder, textarea::placeholder { color: var(--i-placeholder); }

  input.hasIcon {
    padding-left: 48px;
  }
  
  input.hasIcon + .material-icons {
    position: absolute;
    top: 10px;
    left: 16px;
    font-size: 20px;
  }


/* BUTTONS */
.button {
    display: inline-block;
    border: 0;
    padding: 12px 24px;
    border-radius: var(--r-border-radius);
    text-decoration: none;
    color: #fff;
    background: var(--c-primary);
    transition: all 0.3s;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  .button:hover, .button:active { background: var(--c-primary-dark);}

  .button.secondary { background: var(--c-secondary);}
  .button.secondary:hover, .button.secondary:active { background: var(--c-secondary-dark);}

  .button.light { background: var(--c-light);}
  .button.light:hover, .button.light:active { background: var(--c-light-alt);}

  .button.dark { background: var(--c-dark);}
  .button.dark:hover, .button.dark:active { background: var(--c-dark-dark);}


  .button.linear { background:none; color:var(--c-primary); border: 2px solid var(--c-primary); }
  .button.linear:hover, .button.linear:active { background:none; color:var(--c-primary-dark); border: 2px solid var(--c-primary-dark); }

  .button.linear.secondary { color: var(--c-secondary); border: 2px solid var(--c-secondary); }
  .button.linear.secondary:hover, .button.linear.secondary:active { color: var(--c-secondary-dark); border: 2px solid var(--c-secondary-dark); }

  .button.linear.light { color: var(--c-light); border: 2px solid var(--c-light); }
  .button.linear.light:hover, .button.linear.light:active { color: var(--c-light-alt); border: 2px solid var(--c-light-alt); }

  .button.linear.dark { color: var(--c-dark); border: 2px solid var(--c-dark); }
  .button.linear.dark:hover, .button.linear.dark:active { color: var(--c-dark-alt); border: 2px solid var(--c-dark-alt); }

  .button.transparent { background: none; color: var(--c-dark)}
  .button.transparent:hover, .button.transparent:active { background: rgba(0,0,0,0.25)}


/* GRID SYSTEM */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin-top: 0;
  margin-bottom:0;
  margin-right: calc(var(--b-layout-gutter) / 2);
  margin-left: calc(var(--b-layout-gutter) / 2);
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: calc(100% - var(--b-layout-gutter));
}

.col-1-sm {  width: calc((100% / 12) - var(--b-layout-gutter));}
.col-2-sm {  width: calc(((100% / 12) * 2) - var(--b-layout-gutter));}
.col-3-sm {  width: calc(((100% / 12) * 3) - var(--b-layout-gutter));}
.col-4-sm {  width: calc(((100% / 12) * 4) - var(--b-layout-gutter));}
.col-5-sm {  width: calc(((100% / 12) * 5) - var(--b-layout-gutter));}
.col-6-sm {  width: calc(((100% / 12) * 6) - var(--b-layout-gutter));}
.col-7-sm {  width: calc(((100% / 12) * 7) - var(--b-layout-gutter));}
.col-8-sm {  width: calc(((100% / 12) * 8) - var(--b-layout-gutter));}
.col-9-sm {  width: calc(((100% / 12) * 9) - var(--b-layout-gutter));}
.col-10-sm {  width: calc(((100% / 12) * 10) - var(--b-layout-gutter));}
.col-11-sm {  width: calc(((100% / 12) * 11) - var(--b-layout-gutter));}
.col-12-sm {  width: calc(100% - var(--b-layout-gutter));}

.row::after {
	content: "";
	display: table;
	clear: both;
}

@media only screen and (max-width: 40em) {
  .hidden-sm {  display: none;}
}

@media only screen and (min-width: 40em) {  /* MD: 640px */
  .col-1 {    width: calc((100% / 12) - var(--b-layout-gutter));  }
  .col-2 {    width: calc(((100% / 12) * 2) - var(--b-layout-gutter));  }
  .col-3 {    width: calc(((100% / 12) * 3) - var(--b-layout-gutter));  }
  .col-4 {    width: calc(((100% / 12) * 4) - var(--b-layout-gutter));  }
  .col-5 {    width: calc(((100% / 12) * 5) - var(--b-layout-gutter));  }
  .col-6 {    width: calc(((100% / 12) * 6) - var(--b-layout-gutter));  }
  .col-7 {    width: calc(((100% / 12) * 7) - var(--b-layout-gutter));  }
  .col-8 {    width: calc(((100% / 12) * 8) - var(--b-layout-gutter));  }
  .col-9 {    width: calc(((100% / 12) * 9) - var(--b-layout-gutter));  }
  .col-10 {    width: calc(((100% / 12) * 10) - var(--b-layout-gutter));  }
  .col-11 {    width: calc(((100% / 12) * 11) - var(--b-layout-gutter));  }
  .col-12 {    width: calc(100% - var(--b-layout-gutter));  }

}

@media only screen and (min-width: 40em) and (max-width: 60em) {  /* MD: 640px */
    .col-1-md { width: calc((100% / 12) - var(--b-layout-gutter)) !important; }    
    .col-2-md { width: calc(((100% / 12) * 2) - var(--b-layout-gutter)) !important; }    
    .col-3-md { width: calc(((100% / 12) * 3) - var(--b-layout-gutter)) !important; }    
    .col-4-md { width: calc(((100% / 12) * 4) - var(--b-layout-gutter)) !important; }    
    .col-5-md { width: calc(((100% / 12) * 5) - var(--b-layout-gutter)) !important; }    
    .col-6-md { width: calc(((100% / 12) * 6) - var(--b-layout-gutter)) !important; }    
    .col-7-md { width: calc(((100% / 12) * 7) - var(--b-layout-gutter)) !important; }    
    .col-8-md { width: calc(((100% / 12) * 8) - var(--b-layout-gutter)) !important; }   
    .col-9-md { width: calc(((100% / 12) * 9) - var(--b-layout-gutter)) !important; }   
    .col-10-md { width: calc(((100% / 12) * 10) - var(--b-layout-gutter)) !important; }  
    .col-11-md { width: calc(((100% / 12) * 11) - var(--b-layout-gutter)) !important; }    
    .col-12-md { width: calc(100% - var(--b-layout-gutter)) !important; }

    .hidden-md { display: none; }

    :root {
      --mpR-1: 4px;
      --mpR-2: 6px;
      --mpR-3: 12px;
      --mpR-4: 28px;
      --mpR-5: 48px;
      --mpR-6: 64px;
    }
}

@media only screen and (min-width: 60em) { /* LG: 960px */
  .container {
    width: 75%;
    max-width: var(--b-layout-max-width);
  }

  .col-1-lg { width: calc((100% / 12) - var(--b-layout-gutter)); }
  .col-2-lg { width: calc(((100% / 12) * 2) - var(--b-layout-gutter)); }
  .col-3-lg { width: calc(((100% / 12) * 3) - var(--b-layout-gutter)); }
  .col-4-lg { width: calc(((100% / 12) * 4) - var(--b-layout-gutter)); }
  .col-5-lg { width: calc(((100% / 12) * 5) - var(--b-layout-gutter)); }
  .col-6-lg { width: calc(((100% / 12) * 6) - var(--b-layout-gutter)); }
  .col-7-lg { width: calc(((100% / 12) * 7) - var(--b-layout-gutter)); }
  .col-8-lg { width: calc(((100% / 12) * 8) - var(--b-layout-gutter)); }
  .col-9-lg { width: calc(((100% / 12) * 9) - var(--b-layout-gutter)); }
  .col-10-lg { width: calc(((100% / 12) * 10) - var(--b-layout-gutter)); }
  .col-11-lg { width: calc(((100% / 12) * 11) - var(--b-layout-gutter)); }
  .col-12-lg { width: calc(100% - var(--b-layout-gutter));  }

  .hidden-lg { display: none; }

  :root {
    --mpR-1: 4px;
    --mpR-2: 8px;
    --mpR-3: 16px;
    --mpR-4: 32px;
    --mpR-5: 64px;
    --mpR-6: 128px;
  }
}