@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-ExtraBold.eot');
  src: local('../fonts/gilroy/Gilroy ExtraBold'), local('Gilroy-ExtraBold'),
      url('../fonts/gilroy/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-ExtraBold.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Heavy.eot');
  src: local('../fonts/gilroy/Gilroy Heavy'), local('Gilroy-Heavy'),
      url('../fonts/gilroy/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Heavy.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-SemiBold.eot');
  src: local('../fonts/gilroy/Gilroy SemiBold'), local('Gilroy-SemiBold'),
      url('../fonts/gilroy/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-SemiBold.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Light.eot');
  src: local('../fonts/gilroy/Gilroy Light'), local('Gilroy-Light'),
      url('../fonts/gilroy/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Light.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Regular.eot');
  src: local('../fonts/gilroy/Gilroy Regular'), local('Gilroy-Regular'),
      url('../fonts/gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Regular.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Medium.eot');
  src: local('../fonts/gilroy/Gilroy Medium'), local('Gilroy-Medium'),
      url('../fonts/gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Medium.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-UltraLight.eot');
  src: local('../fonts/gilroy/Gilroy UltraLight'), local('Gilroy-UltraLight'),
      url('../fonts/gilroy/Gilroy-UltraLight.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-UltraLight.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-UltraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Bold.eot');
  src: local('../fonts/gilroy/Gilroy Bold'), local('Gilroy-Bold'),
      url('../fonts/gilroy/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Bold.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Thin.eot');
  src: local('../fonts/gilroy/Gilroy Thin'), local('Gilroy-Thin'),
      url('../fonts/gilroy/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Thin.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Black.eot');
  src: local('../fonts/gilroy/Gilroy Black'), local('Gilroy-Black'),
      url('../fonts/gilroy/Gilroy-Black.eot?#iefix') format('embedded-opentype'),
      url('../fonts/gilroy/Gilroy-Black.woff') format('woff'),
      url('../fonts/gilroy/Gilroy-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}


html {margin:0; padding:0;}
body {margin:0; padding:0; background-color:#ffffff; -webkit-text-size-adjust: none;}

p {margin:0 0 16px 0; font-family: 'Gilroy'; font-size: 1rem; font-weight:400; line-height:1.1; color:#000000;}
img {max-width: 100%;}

ul { padding-left: 15px; }

a:link, a:visited, a:hover, a:active {font-family: 'Gilroy'; font-size: 1rem; font-weight:400; color:#3F1D1C; text-decoration:none;}
a:hover {text-decoration:none;}

.section_top_button {width: 100%; height: 40px; background: #C8AD7D; margin: 21px auto 0 auto;
  text-align: center; border: none; border-radius: 10px; font-family: 'Gilroy'; color: #FFFFFF; font-style: normal; font-weight: 500; font-size: 16px; line-height: 18px;
  box-sizing: border-box; padding-top: 11px; display: inline-block;}

#circle {
  transform: translate3d(-20px, 0, 0);
  transition: all .7s ease-out;
  opacity: 0;
}

#circle-bigger {
  transition: all 1.5s ease-out;
  opacity: 1;
}


#circle-bigger.active {
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

#circle.active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

#photo {
  transform: translate3d(0, 30px, 0);
  transition: all .6s ease-out;
  opacity: 0;
}

#photo.active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

#text {
  transform: translate3d(0, 40px, 0);
  transition: all .8s ease-out;
  opacity: 0;
}

#text.active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.wrapper {
  height: 100%;
  min-height: 100vh;
  margin: auto;
  max-width: 425px;
  line-height: 110%;
  letter-spacing: 0.08em;
  overflow: hidden;
}

.block-wrapper {
  position: relative;
  margin-left: 27px;
  margin-top: 10px;
}

.block-1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F6F1EB 69.27%, #F6F1EB 100%);
}

.block-2 {
  background: linear-gradient(180deg, #953F05 0%, #340F06 100%);
  border-radius: 26px;
  position: relative;
  margin-top: -355px;
  z-index: 0;
  padding-top: 330px;
  padding-bottom: 59.76px;
}

.block-3 {
  background: linear-gradient(180deg, #F6F1EB 0%, rgba(200, 173, 125, 0.44) 44.79%, #C7BCA8 100%);
  position: relative;
  z-index: -15;
  margin-top: -110px;
  padding-top: 50px;
  height: 830px;
  margin-bottom: 300px;
}

.block-4 {
  background: linear-gradient(180deg, #AD8848 0%, #C2A571 100%);
  position: relative;
  z-index: -999;
  margin-top: 300px;
  padding-top: 171px;
}

.block-5 {
  background: linear-gradient(180deg, #F6F1EB 0%, #F6F1EB 54.17%, #F6F1EB 100%);
  border-radius: 26px 26px 0px 0px;
  position: relative;
  margin-top: -265px;
  padding-top: 62px;
  padding-bottom: 50px;
}

.block-6 {
  background: linear-gradient(180deg, #953F05 0%, #340F06 100%);
  border-radius: 26px 26px 0 0;
  position: relative;
  padding-bottom: 60px;
  margin-top: -40px;
}

.logo {
  display: inline-block;
}

.phone-1 {
  position: relative;
  width: 287px;
  top: 50%;
  left: 50%;
  margin: 42px 0 73px -143px;
  z-index: 7;
}

.circle-1 {
  position: absolute;
  border-radius: 50%;
  width: 135px;
  height: 135px;
  top: 69px;
  right: 11px;
  background: linear-gradient(167.35deg, rgba(246, 241, 235, 0.26) 24.32%, rgba(246, 241, 235, 0.16) 90.83%);
}


.circle-2 {
  position: absolute;
  border-radius: 50%;
  width: 201px;
  height: 201px;
  left: 14px;
  top: 287px;
  background: linear-gradient(167.35deg, #F6F1EB 24.32%, #F6F1EB 90.83%);
  z-index: -1;
}

.circle-3 {
  position: absolute;
  width: 335px;
  height: 335px;
  left: 321px;
  top: 858px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 173, 125, 0.25);
}

.circle-4 {
  position: absolute;
  border-radius: 50%;
  width: 187.78px;
  height: 187.78px;
  right: -60px;
  top: 454px;
  background: linear-gradient(180deg, rgba(145, 61, 5, 0.74) 0%, #340F06 100%);
  transform: rotate(-30deg);
}

.circle-5 {
  position: absolute;
  border-radius: 50%;
  width: 840px;
  height: 781px;
  top: 470px;
  left: -210px;
  background: #C8AD7D;
  border: 20px solid rgba(255, 255, 255, 0.1);
}

.circle-6 {
  position: absolute;
  border-radius: 50%;
  width: 267.71px;
  height: 267.71px;
  top: 776px;
  left: 168px;
  background: linear-gradient(216.13deg, rgba(96, 37, 6, 0.58) 29.52%, rgba(129, 53, 5, 0.58) 85.06%);
  transform: rotate(-30deg);
  z-index: -1;
}

.circle-7 {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(180deg, #C8AD7D 0%, rgba(200, 173, 125, 0.63) 100%);
  width: 348.035px;
  height: 348.035px;
  top: 344px;
  right: 96px;
}

.ring-1 {
  position: absolute;
  width: 441px;
  height: 441px;
  display: inline-block;
  margin-top: 6px;
  border-radius: 50%;
  vertical-align: middle;
  border: 10px solid rgba(200, 173, 125, 0.74);
  left: 120px;
  z-index: 5;
}

.ring-2 {
  position: absolute;
  border-radius: 50%;
  width: 110.5px;
  height: 110.5px;
  left: 76px;
  top: 142px;
  border: 2px solid rgba(200, 173, 125, 0.5);
}

.ring-3 {
  position: absolute;
  border-radius: 50%;
  width: 350px;
  height: 350px;
  top: 665px;
  left: -235px;
  border: 4px solid rgba(246, 241, 235, 0.15);
}

.ring-4 {
  position: absolute;
  border-radius: 50%;
  top: 1125px;
  left: -27px;
  height: 592.84px;
  width: 592.84px;
  border: 4px solid rgba(161, 51, 10, 0.11);
  opacity: 0.5;
  transform: rotate(-30deg);
}

.ring-5 {
  position: absolute;
  border-radius: 50%;
  height: 531.96px;
  width: 531.96px;
  border: 25px solid rgba(255, 255, 255, 0.2);
  transform: rotate(-30deg);
  bottom: 313px;
  right: 80px;
  z-index: -10;
}

.outer-ring-1 {
  position: absolute;
  bottom: 313px;
  right: 80px;
  z-index: -10;
  height: 506.96px;
  width: 506.96px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
  border-radius: 50%;
  transform: rotate(-30deg);
}

.inner-ring-1 {
  position: absolute;
  bottom: 337px;
  right: 105px;
  z-index: -10;
  height: 456.96px;
  width: 456.96px;
  background-image: linear-gradient(#c39d64 50%, #C2A571 100%);
  border-radius: 50%;
}

.ring-6 {
  position: absolute;
  border-radius: 50%;
  height: 506.96px;
  width: 506.96px;
  border: 4px solid rgba(200, 173, 125, 0.5);
  transform: rotate(-30deg);
  top: 707px;
  right: 97px;
}

.ring-7 {
  position: absolute;
  border-radius: 50%;
  height: 441.33px;
  width: 441.33px;
  border: 4px solid rgba(200, 173, 125, 0.1);
  transform: rotate(-30deg);
  top: 1310px;
  left: 230px;
}

.ring-8 {
  position: absolute;
  border-radius: 50%;
  height: 506.96px;
  width: 506.96px;
  border: 25px solid rgba(200, 173, 125, 0.2);
  transform: rotate(-30deg);
  bottom: 548px;
  left: 80px;
}

.center {
  margin: 0 auto;
}

.outer-ring-2 {
  position: absolute;
  bottom: 709px;
  left: 224px;
  height: 230px;
  width: 230px;
  background-image: linear-gradient(rgba(200, 173, 125, 0.7), rgba(200, 173, 125, 0.15));
  border-radius: 50%;
}

.inner-ring-2 {
  bottom: 720px;
  position: absolute;
  left: 240px;
  height: 205px;
  width: 205px;
  background-image: linear-gradient(180deg, #F6F1EB 0%, #F6F1EB 54.17%, #F6F1EB 100%);
  border-radius: 50%;
}


.line {
  width: 50px;
  height: 4px;
  z-index: 999;
}

.horizontal-line {
  position: relative;
  display: inline-block;
  background-color: #C8AD7D;
  height: 3px;
  width: 145px;
}

.vertical-line {
  position: relative;
  display: inline-block;
  background-color: #C8AD7D;
  height: 155px;
  width: 4px;
}

.options {
  position: relative;
  width: 334px;
  top: 50%;
  left: 50%;
  margin: 0 0 56px -167px;
}

.glass-icon {
  position: relative;
  top: 344px;
}

.logo_primebeef {
  position: absolute;
  bottom: 0;
  width: 100px;
}

.partners {
  margin: 37.52px 25px 0 25px;
}

.display {
  position: relative;
  width: 357px;
  top: 50%;
  left: 50%;
  margin: -368px 0 10px -178px;
  z-index: 1;
}

.phones {
  position: relative;
  width: 262px;
  top: 50%;
  left: 50%;
  margin: -334px 0 0 -145px;
}

.phones-2 {
  position: relative;
  z-index: 100;
  width: 282px;
  top: 50%;
  left: 50%;
  margin: 20px 0 40px -145px;
}

.phone-to-laptop {
  margin-top: 49px;
  margin-bottom: 21px;
}

.phone-2 {
  position: relative;
  width: 287px;
  top: 50%;
  left: 50%;
  margin: 64px 0 0 -143px;
}

.phone-3 {
  position: relative;
  z-index: 100;
  width: 277px;
  top: 50%;
  left: 50%;
  margin: 55px 0 52px -138px;
}

.museums {
  margin: 60px 27px 60px 0;
}

.ellipse {
  position: absolute;
  border-radius: 50%;
  width: 886.93px;
  height: 832.66px;
  left: -51px;
  bottom: 62.44%;
  border: 25px solid rgba(255, 255, 255, 0.1);
  transform: rotate(-7.7deg);
  z-index: -1;
}

.header {
  font-size: 30px;
  color: #340F06;
  z-index: 999;
  margin-left: 27px;
  line-height: 110%;
  position: relative;
  font-weight: bold;
  font-family: 'Gilroy';
}

.header-bigger {
  font-size: 28px;
  font-weight: bold;
  line-height: 120%;
  color: #340F06;
  margin-top: 20px;
  margin-bottom: 20px;
  z-index: 999;
  position: relative;
  font-family: 'Gilroy';
}

.subheader {
  font-size: 20px;
  color: #340F06;
  z-index: 999;
  margin-left: 27px;
  position: relative;
  font-weight: bold;
  font-family: 'Gilroy';
}

.subheader-options {
  font-size: 26px;
  color: #C8AD7D;
  font-weight: bold;
  z-index: 999;
  position: relative;
  font-family: 'Gilroy';
}

.text {
  font-size: 16px;
  color: #340F06;
  z-index: 999;
  position: relative;
  font-family: 'Gilroy';
  font-weight: 500;
}

.light {
  color: #C8AD7D;
}

.lighter {
  color: #F6F1EB;
}

.bold {
  font-weight: bold;
}

.modal-container {
  width: 100%;
  max-width: 450px;
  background-color: #F6F1EB;
}

.input-field[data-active='false'] {
  display: none;
}

.input-field[data-active='true'] {
  border: none;
  background: none;
  height: 100%;
  font-size: 16px;
  color: #340F06;
  width: 100%;
  padding-top: 35px;
  padding-left: 0;
  box-shadow: none;
}

.logo-text {
  color: #C8AD7D;
  font-size: 16px;
  z-index: 999;
  position: relative;
  display: inline-block;
  font-weight: 600;
}

.shadow {
  background: linear-gradient(180deg, rgba(52, 15, 6, 0) 0%, rgba(52, 15, 6, 0.117) 45.89%, rgba(52, 15, 6, 0.15) 100%);
  filter: blur(15px);
  position: absolute;
  width: 100%;
  height: 131px;
  top: -130px;
  z-index: -1;
}

.field-wrapper {
  position: relative;
  border-bottom: 1px solid #C8AD7D;
  height: 44px;
  margin-bottom: 10px;
}

.input-field {
  width: 100%;
  height: 44px;
  border: none;
  background: none;
  padding: 14px 0 0 0;
}

.input-field:focus{
  outline: none;
}

.label{
  position: absolute;
  top: 13px;
  left: 0;
  transition: .3s;
  color: #340F06;
  height: 44px;
  font-size: 16px;
}
.field-wrapper.active label {
  top: 0;
  font-size: 12px;
}