@charset "UTF-8";
   @font-face {
font-family: 'Maison Neue Extended Black';
src: url(//beyondtaste.group/wp-content/themes/beyondtastegroup-theme/assets/fonts/maisonneueext-black/maisonneueext-black.woff2) format('woff'),
url(//beyondtaste.group/wp-content/themes/beyondtastegroup-theme/assets/fonts/maisonneueext-black/maisonneueext-black.woff) format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root {
--grid-size: 132rem;
--grid-inner-size: 108rem;
--grid-padding-side: 2rem;
--color-black: #000;
--color-white: #fff;
--color-yellow: #FFA700;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.4;
}
section {
} h1,
h2,
h3 {
font-family: 'Maison Neue Extended Black';
font-weight: 900;
text-transform: lowercase;
}
h1,
h2 {
margin: 0 0 5rem;
font-size: 3.6rem;
line-height: 1;
}
h3 {
margin: 0 0 .3rem;
font-size: 2rem;
line-height: 1.4;
} p {
margin: 0 0 3rem;
}
p:last-child {
margin: 0;
}
p:empty {
display: none;
}
p a {
color: var(--color-black);
} .row,
.inner-row {
position: relative;
width: 100%;
margin: 0 auto;
}
.row {
max-width: var(--grid-size);
padding: 0 var(--grid-padding-side);
}
.inner-row {
max-width: var(--grid-inner-size);
}
.divider {
border-top: .1rem solid var(--color-black);
} header {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
background-color: var(--color-white);
}
header .container {
height: 10rem;
padding: 3rem 0;
display: flex;
align-items: flex-end;
} header ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 0 4rem;
}
header ul.menu a {
font-family: 'Maison Neue Extended Black';
font-size: 2rem;
font-weight: 900;
line-height: 1.4;
text-transform: lowercase;
color: var(--color-black);
text-decoration: none;
transition: .4s;
}
header ul.menu a:hover {
color: var(--color-yellow);
} header .logo {
position: absolute;
top: 3rem;
right: 2rem;
height: 4rem;
width: 19rem;
}
header .logo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: right;
} main {
margin-top: 10rem;
}
main .container {
padding: 7.5rem 0;
display: grid;
grid-template-columns: 45% 55%;
overflow: hidden;
} .content-wrapper {
padding: 7rem 12.5rem 7rem 0;
}
.content-wrapper ul.links {
list-style-type: none;
margin: 0;
padding: 0;
}
.content-wrapper ul.links li {
margin-bottom: 1rem;
}
.content-wrapper ul.links .title {
position: relative;
font-family: 'Maison Neue Extended Black';
font-size: 3.6rem;
font-weight: 900;
line-height: 1;
text-transform: lowercase;
cursor: pointer;
filter: brightness(0);
transition: .4s;
}
.content-wrapper ul.links .title::before {
content: "\203A";
position: absolute;
top: 0;
left: -3.5rem;
font-size: 8rem;
line-height: .35;
opacity: 0;
}
.content-wrapper ul.links li:hover .title,
.content-wrapper ul.links li.active .title {
margin-left: 3.5rem;
filter: brightness(1);
}
.content-wrapper ul.links li:hover .title::before,
.content-wrapper ul.links li.active .title::before {
opacity: 1;
}
.content-wrapper ul.links .text {
margin: 3rem 0;
display: none;
}
.content-wrapper ul.links li.active .text {
display: block;
}
.content-wrapper ul.links .text a {
font-family: 'Maison Neue Extended Black';
font-weight: 900;
} .image-wrapper {
position: relative;
}
.image-wrapper .image {
width: calc(100% - 6.9rem);
height: 100%;
max-height: 60rem;
}
.image-wrapper .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brands .image-wrapper .image img:not(:first-child) {
display: none;
}
.image-wrapper .title {
position: absolute;
top: 0;
right: -1.9rem;
height: 100%;
max-height: 60rem;
font-family: 'Maison Neue Extended Black';
font-size: 12.5rem;
font-weight: 900;
line-height: 1;
text-transform: lowercase;
text-align: center;
writing-mode: vertical-rl;
transform: rotate(-180deg);
} footer {
padding: 0 var(--grid-padding-side);
background-color: var(--color-black);
}
footer .container {
padding: 9rem 0 6rem;
display: grid;
grid-template-columns: repeat( 3, 1fr );
gap: 10rem;
}
footer .container > div:not(:last-child) {
padding-bottom: 10rem;
border-bottom: .1rem solid var(--color-white);
}
footer h3,
footer a {
color: var(--color-white);
}
footer p {
line-height: 1.4;
}
footer a {
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer .logo {
text-align: right;
}
footer .logo img {
max-height: 5.5rem;
} @media (max-width: 1024px) {  .content-wrapper {
padding: 5rem 7rem 0 0;
}
}
@media (max-width: 899px) { main .container {
grid-template-columns: 50% 50%;
} .image-wrapper .image {
width: calc(100% - 5.5rem);
}
.image-wrapper .title {
right: -1.5rem;
font-size: 10rem;
} footer .container {
gap: 5rem;
}
}
@media (max-width: 767px) {  h1,
h2 {
margin: 0 0 3rem;
font-size: 2.8rem;
}
h3 {
font-size: 1.8rem;
} header .container {
height: 13.6rem;
} header ul.menu {
display: block;
gap: 1rem 0;
}
header ul.menu a {
font-size: 1.8rem;
} main {
margin-top: 13.6rem;
}
main .container {
padding: 7.5rem 0;
grid-template-columns: 1fr;
} .content-wrapper {
padding: 0;
}
.about .content-wrapper {
order: 2;
}
.content-wrapper ul.links .title {
font-size: 2.8rem;
}
.content-wrapper ul.links .title::before {
left: -2.5rem;
font-size: 6rem;
}
.content-wrapper ul.links li:hover .title,
.content-wrapper ul.links li.active .title {
margin-left: 2.5rem;
} .image-wrapper {
margin-top: 5rem;
}
.about .image-wrapper {
margin: 0 0 5rem;
}
.about .image-wrapper {
order: 1;
}
.image-wrapper .image,
.image-wrapper .title {
max-height: inherit;
}
.image-wrapper .image {
width: calc(100% - 4.4rem);
}
.image-wrapper .title {
right: -1.2rem;
font-size: 8rem;
} footer .container {
padding: 7.5rem 0;
grid-template-columns: 1fr;
gap: 3rem;
}
footer .container > div:not(:last-child) {
padding-bottom: 0;
border-bottom: 0;
order: 2;
}
footer .logo {
text-align: left;
order: 1;
}
footer .logo img {
max-height: 4.5rem;
}
}