@font-face {
  font-family: 'CentraleSans-Hairline';
  src: local('CentraleSans-Hairline.otf'),
  /* url('./centralesans-hairline-webfont.woff2') format('woff2'), */
  url('./centralesans-hairline-webfont.woff') format('woff'),
  url('./CentraleSans-Hairline.otf') format('truetype');
}
@font-face {
  font-family: 'CentraleSans-XBold';
  src: local('CentraleSans-XBold.otf'),
  /* url('./centralesans-xbold-webfont.woff2') format('woff2'), */
  url('./centralesans-xbold-webfont.woff') format('woff'),
  url('./CentraleSans-XBold.otf') format('truetype');
}
@font-face {
  font-family: 'CentraleSans-XLight';
  src: local('CentraleSans-XLight.otf'),
  /* url('./centralesans-xlight-webfont.woff2') format('woff2'), */
  url('./centralesans-xlight-webfont.woff') format('woff'),
  url('./CentraleSans-XLight.otf') format('truetype');
}

@font-face {
  font-family: 'ProximaNova';
  src: local('ProximaNova-Regular.otf'),
    url('./ProximaNova-Regular.svg'),
    url('./ProximaNova-Regular.ttf'),
    url('./ProximaNova-Regular.woff'),
    url('./ProximaNova-Regular.otf');
}
@font-face {
  font-family: 'ProximaNova';
  src: local('ProximaNova-Bold.otf'),
    url('./ProximaNova-Bold.svg'),
    url('./ProximaNova-Regular.ttf'),
    url('./ProximaNova-Bold.woff'),
    url('./ProximaNova-Bold.otf');
}

@media screen and (max-width: 1920px) {
  html {
    font-size: 10px
  }
}
@media screen and (max-width: 1366px), (max-width: 1440px), (max-width: 1650px), (max-width: 1920px) {
  html {
    font-size: 14px
  }
}
@media screen and (max-width: 1280px) {
  html {
    font-size: 10px
  }
}
body {
  background: #1a1a1a;
  color: white;
  font-family: 'ProximaNova';
}
.page-1 {
  /* padding: 70px 140px; */
  background-attachment: fixed, scroll;
}
.brands {
  /* margin-bottom: 50px; */
  position: relative;
  z-index: 10;
}
.logo-buro svg {
  max-width: 100px;
  max-height: 90px;
}
.logo-partner svg {
  max-width: 120px;
  max-height: 60px;
}
.page-1 {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.content {
  position: relative;
  z-index: 10;
}
.content h1,
.content h2 {
  /*font-family: 'CentraleSans-XBold';*/
  font-size: 3.5rem;
  cursor: default;
  text-shadow: 0px 1px 3px black;
}
.content h2,
.content p,
.content a {
  /*font-family: 'CentraleSans-Hairline';*/
  cursor: default;
}
.content p {
  font-size: 16px;
}
.content .button-bg {
  font-size: 25px;
  font-weight: bold;
  color: #f9f9f9;
  background: rgb(137, 137, 137);
}
.content .mw-590 {
  max-width: 590px;
}
.content .mw-720 {
  max-width: 720px;
}
.content .mw-200 {
  max-width: 200px;
}
.content .mw-690 {
  max-width: 690px;
}
.content .backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.content .backdrop {
  /*font-family: 'CentraleSans-XLight';*/
  line-height: normal;
}
.content aside .button-bg {
  background: rgb(137, 137, 137);
  position: relative;
  top: -22px;
  font-weight: bold;
}
.socials {
  position: relative;
  z-index: 10;
}
.socials svg {
  width: 2rem;
  height: 2rem;
}
.socials .socials-link {
  margin: 0 3rem;
  cursor: pointer;
}
.show-mobile {
  display: none;
}
.select-item{
  width: 220px;
}
.variant{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.variant__icon{
  display: none;
}
.variant__button{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .show-mobile {
    display: inherit;
  }
  html {
    font-size: 10px
  }
  .page-1 {
    padding: 2rem 2rem;
  }
  .content h1,
  .content h2 {
    font-size: 2.8rem;
  }
  .content p {
    /*font-family: 'CentraleSans-XLight';*/
    background: rgba(0, 0, 0, 0.5);	
  }
  .content .button-bg {
    background: rgb(137, 137, 137, 1);
	font-weight: bold;
  }
  .content .select-grid {
    display: block;
    margin: 2rem auto;
    max-width: 80%;
  }
  .content .select-item {
    margin: 0;
    padding: 1rem;
  }
  .content .select-item img {
    background: rgba(0, 0, 0, 0.5);
    padding: 3rem;
  }
  .content .mw-690,
  .content .mw-720 {
    margin: 1rem -2rem;
    float: none;
  }
  .content .backdrop {
    color: #000;
    background: #fff;
    padding: 2rem 2rem 4rem 2rem;
  }
  .content .backdrop img {
    margin-bottom: 2rem;
  }
  .socials svg {
    width: 2rem;
    height: 2rem;
  }
  .socials .socials-link {
    margin: 0 3rem;
  }
  .blur {
    position: absolute;
    width: 100%;
    padding: 0;
    filter: blur(5px);
    margin: -2rem;
  }
}