/**           **/
/* GENERAL AREA */
/**           **/

body {
  font-family: 'Montserrat', sans-serif;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.no-padding {
  padding: 0;
}

h1 {
  font-size: 40px;
  font-weight: 600;
  color: #30aae1;
}

h2 {
  font-size: 30px;
  color: #5945a4;
  font-weight: 400;
}

h3 {
  letter-spacing: 1px;
}

.blue {
  color: #30aae1;
}

p {
  color: #727272;
}

.no-float {
  float: none;
}

/**           **/
/* MENU AREA */
/**           **/

header {
  border-bottom: 2px #30cee1 solid;
  margin-bottom: 60px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 77777;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

header.scrolled {
  background: #30cee1;
}

header.scrolled .header-links {
  height: 50px;
  line-height: 57px;
}

header.scrolled .header-links li a {
  color: white !important;
  transition: opacity ease 0.2s, background ease 0.2s, border ease 0.2s, color ease 0.2s;
}

header.scrolled .header-links li a.active, header.scrolled .header-links li a:hover {
  opacity: 1 !important;
}

header.scrolled .header-links.second li:last-child a {
  color: #30aae1 !important;
  background-color: white;
  border-color: white;
}

header.scrolled .header-links.second li:last-child a:hover {
  color:  white !important;
  background-color: #30aae1;
  border-color: white;
}

header.scrolled .logo-icon {
  border: solid 10px white !important;
}

header.scrolled .logo-typo {
  opacity: 0;
}

.header-wrap {
  display: flex;
}

header.scrolled .header-wrap li a:not(.scrollTop):not(.demo-link)  {
  opacity: 0.5;
}

.header-wrap img.logo-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin-top: 45px;
  border: solid 40px white;
  border-radius: 50%;
  transition: border ease .2s;
}

.header-wrap img.logo-typo {
  position: absolute;
  left: 46%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin-top: 100px;
  transition: opacity ease .5s;
}

.header-wrap a {
  font-size: 14px;
  font-weight: bold;
  color: #30aae1;
  margin-right: 18px;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: color ease .25s, background ease .25s, font-weight ease .25s;
  transition: color ease .25s, background ease .25s, font-weight ease .25s;
}

.header-wrap a.active, .header-wrap a:hover {
  color: #42f0bf;
  font-weight: 600;
  padding: 4px 0;
}

.header-wrap a:not(.scrollTop) {
  position: relative;
}

.header-wrap a:not(.scrollTop)::before {
  opacity: 0;
  transition: all ease 0.5s;
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: white;
  top: 31px;
}

.header-wrap a:not(.demo-link).active::before, .header-wrap a:not(.demo-link):hover::before {
  top: 26px;
  opacity: 0.4;
}

.header-wrap a:hover {
  color: #42f0bf;
}

.header-links {
  padding-left: 0;
  height: 80px;
  line-height: 110px;
  padding-bottom: 17px;
  transition: all ease 0.5s;
}

.header-links.second {
  position: absolute;
  right: 0;
}

.header-links li {
  display: inline;
  list-style: none;
}

.header-links.second li:last-child a {
  position: relative;
  left: 35px;
  border-radius: 15.5px;
  background-color: #30aae1;
  border: solid 2px #30aae1;
  color: white;
  padding: 6px 14px;
}

header:not(.scrolled) .header-links.second li:last-child a:hover {
  background-color: white !important;
  color: #30aae1 !important;
}

.subtitle-small {
  padding: 0 55px;
}

.headline-landing {
  margin-left: 3px;
  color: white;
  font-size: 1.3em;
}

.headline-landing.second {
  margin-left: 113px;
}

/**           **/
/* MENU SMALL AREA */
/**           **/

.escape .small-menu {
  height: 70px;
}

.small-menu {
  background-color: #30cee1;
  padding: 14px;
  padding-right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.demo-small a {
  line-height: 45px;
  color: #30aae1;
  font-size: 1.2rem;
  letter-spacing: -0.2px;
  font-weight: 500;
  border-radius: 19.5px;
  background-color: #ffffff;
  padding: 6px 14px;
}

.demo-small a:hover {
  text-decoration: none;
}

.menu-icon {
  height: 50px;
  cursor: pointer;
  -webkit-transition: .2s ease-in;
  -moz-transition: .2s ease-in;
  -o-transition: .2s ease-in;
  transition: .2s ease-in;
  text-align: right;
  position: relative;
  top: -10px;
}

.menu-icon span {
  cursor: pointer;
  display: block;
  position: absolute;
  height: 4px;
  width: 39px;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  right: -21px;
  transform: translateX(-50%);
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

.menu-icon.open {
  position: relative;
  transform: translateY(20%);
}

.menu-icon.open span {
  right: -21px !important;
}

.menu-icon span:first-child {
  top: 7px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.menu-icon span:nth-child(2) {
  top: 19px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.menu-icon.open span:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -5px;
  right: -11px !important;
}

.menu-icon.open span:nth-child(2) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 22px;
  right: -11px !important;
}

.menu-icon.open p {
  opacity: 0;
}

.menu-icon p {
  position: relative;
  top: 31px;
  text-transform: uppercase;
  font-size: 11px;
  color: white;
  font-weight: 600;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.logo-menu-small {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  z-index: 111;
}

.small-menu-wrap.open .logo-menu-small {
  transform: translateY(50px) translateX(-50%);
}

.small-menu-wrap.open .demo-small {
  opacity: 0;
}

.small-menu-content {
  opacity: 0;
  background-color: #30cee1;
  position: absolute;
  width: 100vw;
  height: 100vh;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  visibility: hidden;
}

.small-menu-wrap.open .small-menu-content {
  opacity: 1;
  visibility: visible;
  overflow-y: scroll;
}

.small-menu-wrap.open .small-menu-content::-webkit-scrollbar {
  /* This is the magic bit */
  display: none;
}

.small-menu-content ul {
  list-style: none;
  text-align: center;
  margin-top: 140px;
  padding: 0;
  margin-bottom: 60px;
}

.small-menu-content ul li:first-child {
  margin-bottom: 40px;
}

.small-menu-content ul li {
  margin: 20px;
}

.small-menu-content ul .small-menu-link {
  font-family: 'Bariol-Regular';
  font-size: 2.2rem;
  color: white;
  border-bottom: solid 1px white;
}

.small-menu-content ul .small-menu-link:hover {
  text-decoration: none;
}

.header-links li.demo-link-wrap {
  display: inline-block;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 15s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 15s;
}

.small-menu-content ul .demo-link {
  color: #30cee1;
  font-size: 1.8rem;
  letter-spacing: -0.2px;
  font-weight: 500;
  border-radius: 19.5px;
  background-color: #ffffff;
  padding: 6px 14px;
}

.small-menu-content ul .demo-link:hover {
  text-decoration: none;
}

.small-menu-contact p, .small-menu-contact a, .small-menu-contact a:hover {
  color: white;
  text-decoration: none;
}

/**           **/
/* INTRO AREA */
/**           **/

.intro img {
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.intro h2 {
  line-height: 36px;
  margin-bottom: 38px;
  margin-top: 72px;
}

.intro h2 br {
  display: none;
}

.intro .bg-people {
  background-image:url('../img/banner-people.png');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  width: 200%;
  left: -41%;
  background-position: center;
  height: 130px;
  position: absolute;
  z-index: 0;
  top: 60px;
}

.intro .linegame {
  background-image:url('../img/linegame.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 640px;
  position: absolute;
  z-index: -1;
  top: -235px;
  background-position: center;
}

.keywords {
  margin-top: 80px;
  text-align: center;
  padding: 0 15px;
}

.keywords span {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 8px;
  font-size: 12.8px;
  font-weight: 600;
  color: #5c4a91;
  border-radius: 8px;
  border: solid 1px #5c4a91;
  padding: 2px 7px;
  transition: all ease 0.5s;
  animation: shine 2.5s ease-in-out alternate infinite;
  animation-fill-mode: forwards;
}

.keywords span:first-child {
  animation-delay: 1s;
}

.keywords span:nth-child(2) {
  animation-delay: 2s;
}

.keywords span:nth-child(3) {
  animation-delay: .3s;
}

.keywords span:nth-child(4) {
  animation-delay: .1s;
}

.keywords span:nth-child(5) {
  animation-delay: 5s;
}

.keywords span:nth-child(6) {
  animation-delay: .8s;
}

.keywords span:nth-child(7) {
  animation-delay: .6s;
}

.keywords span:nth-child(8) {
  animation-delay: 1s;
}

.keywords span:nth-child(9) {
  animation-delay: .9s;
}

.keywords span:nth-child(10) {
  animation-delay: .7s;
}

.keywords span:nth-child(11) {
  animation-delay: .5s;
}

.keywords span:nth-child(12) {
  animation-delay: .1s;
}

.keywords span:nth-child(13) {
  animation-delay: .9s;
}

.keywords span:nth-child(14) {
  animation-delay: .2s;
}


/**           **/
/* PRICING AREA */
/**           **/

.abo-infos {
  padding-top: 100px;
  margin-top: 5px;
}

.abo-infos h1 {
  font-family: 'Bariol-Bold';
  font-size: 28px;
  font-weight: 300;
}

.btns-pack {
  margin-top: 30px;
  margin-bottom: 63px;
}

.btns-type.small {
  margin: 0;
}

.btns-type.small h3 {
  font-size: 13px;
}

.btn-pack-wrap:nth-child(2) .btn-pack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.btn-pack-wrap:nth-child(3) .btn-pack {
  position: absolute;
  right: 0;
}

.btn-pack {
  display: inline-flex;
  cursor: pointer;
}

.btn-pack img {
  position: relative;
  z-index: 2;
  height: 102px;
}

.btn-pack h3 {
  padding-left: 90px;
  margin-left: -78px;
  border: solid 2px #f4f4f4;
  border-radius: 16px;
  padding-top: 8px;
  position: relative;
  z-index: 1;
  padding-right: 15px;
  top: 0px;
  color: #30aae1;
  transition: all ease 0.5s;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

.btn-pack:hover > h3, .btn-type:hover > h3 {
  background-color: #f4f4f4;
}

.btn-pack.active h3, .btn-type.active h3 {
  background-color: #f4f4f4;
}

.btn-type {
  margin-bottom: 47px;
  cursor: pointer;
}

.btn-type h3 {
  font-family: 'Bariol-Regular';
  color: #30aae1;
  font-size: 22px;
  border-radius: 16px;
  border: solid 2px #f4f4f4;
  padding: 11px;
  font-weight: 600;
  transition: all ease 0.5s;
}

.pack-info {
  border-radius: 57px;
  box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.17);
  transition: all ease 0.5s;
}

#refs {
  padding-top: 100px;
  margin-top: 0;
}

.pack-content-small img {
  margin-top: 48px;
  margin-bottom: 48px;
}

.pack-content-small .pack-price h1 {
  font-size: 80px;
}

.pack-content-small .pack-price-wrap span {
  font-size: 36px;
}

.pack-content-small .pack-price p {
  font-size: 17px;
}

.pack-info h6 {
  font-family: 'Bariol-Regular';
  font-size: 22px;
  color: #30aae1;
  margin-top: 56px;
}

.pack-info h5 {
  font-family: 'Bariol-Regular';
  font-size: 36px;
  color: #30aae1;
  margin-bottom: 26px;
}

.pack-info p {
  font-size: 22px;
  font-weight: 300;
  color: #727272;
  letter-spacing: -0.2px;
  line-height: normal;
}

.pack-price h1 {
  font-size: 100px;
  font-family: 'Bariol-Regular';
  font-weight: 400;
  display: inline-block;
  margin-top: 0;
}

.pack-price-wrap span {
  font-size: 60px;
  font-family: 'Bariol-Regular';
  right: 50px;
  color: #30aae1;
  position: relative;
  top: -30px;
  right: 0;
}

.pack-duration-abo {
  display: none;
}

.pack-duration-acces {
  display: block;
}

.pack-illu {
  height: 100%;
}

.pack-illu img {
  margin-top: 10%;
}

.pack-info a {
  padding: 10px;
  text-align: center;
  width: 77%;
  font-size: 21px;
  display: block;
  position: absolute;
  bottom: -31px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bariol-Regular';
  font-weight: 600;
  letter-spacing: -0.4px;
  border-radius: 43px;
  background-color: #30aae1;
  box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.17);
  color: white;
  transition: ease 0.5s all;
  border: 3px solid #30aae1;
}

.pack-info a:hover,  a.escape-demo:hover {
  background-color: white;
  color: #30aae1;
  text-decoration: none;
}

#first-infos {
  padding-top: 100px;
  margin-top: 50px;
}

.first-infos {
  display: block;
}

.first-infos h3 {
  font-size: 36px;
  color: #30aae1;
  font-family: 'Bariol-Regular';
}

.first-infos-illus {
  height: 470px;
}

.first-infos-illus img:first-child, .first-infos-illus img:nth-child(3) {
  position: absolute;
  z-index: 2;
}

.first-infos-illus img:first-child {
  transform: translateX(-50%);
  left: 54%;
}

.first-infos-illus img:nth-child(3) {
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

.first-infos-illus img:nth-child(2) {
  position: absolute;
  left: -45px;
  z-index: 3;
  top: -19px;
}

.first-infos-content h3 {
  font-family: 'Bariol-Regular';
  font-size: 26px;
  color: #30aae1;
  padding-top: 40px;
  margin-bottom: 29px;
}

.first-infos-content p {
  letter-spacing: -0.2px;
  font-size: 19px;
  font-weight: 300;
  margin: 0;
  line-height: normal;
  padding-right: 25px;
}

.first-infos-content p:nth-child(2) {
  margin-bottom: 12px;
}

.ra-reward {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 34px;
  width: 189px;
}

#platform-infos {
  margin-top: 69px;
}

.platform-infos {
  margin-bottom: 105px;
}

.platform-infos-content {
  padding-right: 25px;
}

.platform-infos-content.stats {
  position: relative;
  margin-top: 30px;
}

.platform-infos-content img {
  margin-top: 25px;
  margin-bottom: 25px;
}

.platform-infos-content p, .beacon-infos-content p, .beacon-infos-small p {
  font-size: 19px;
  font-weight: 300;
  margin: 0;
  padding-right: 25px;
}

.platform-infos h3, .beacon-infos-content h3, .beacon-infos-small h3 {
  font-family: 'Bariol-Regular';
  font-size: 26px;
  color: #30aae1;
  margin-top: 0;
  margin-bottom: 29px;
}

.platform-illus {
  padding-right: 25px;
  margin-top: 89px;
}

.platform-illus-small {
  margin-bottom: 41px;
  padding-left: 0;
  margin-left: 0;
  margin-top: -35px;
}

.platform-illus img:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 3px;
  width: 24%;
}

#beacon-infos {
  margin-bottom: 61px;
}

.beacon-infos-small {
  margin-top: -50px;
  padding-right: 25px;
}

.beacon-infos-text {
  display: flex;
}

.beacon-infos-content {
  border-radius: 55px;
  background-color: #ffffff;
  box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.17);
  min-height: 286px;
  padding: 25px;
  padding-right: 20px;
  padding-left: 130px;
  position: relative;
  z-index: 1;
  margin-left: 160px;
  top: 70px;
  padding-left: 120px;
  margin-right: -210px;
}

.beacon-phone-illu {
  position: absolute;
  z-index: 2;
}

.beacon-infos-illu {
  width: 95%;
  margin-bottom: 71px;
}

.ref-infos {
  margin-bottom: 0;
}

.ref-infos-content h3 {
  color: #30aae1;
  font-family: 'Bariol-Bold';
  font-size: 28px;
  margin-bottom: 45px;
  text-align: center;
}

.ref-infos-description {
  min-height: 479px;
  border-radius: 55px;
  background-color: #ffffff;
  box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.17);
  font-size: 22px;
  letter-spacing: -0.2px;
  color: #727272;
  padding: 45px;
}

.ref-infos-description p {
  font-weight: 300;
}

.ref-infos-description p:first-child {
  padding-bottom: 20px;
}


.ref-infos-logos {
  border-radius: 57px;
  background-color: #ffffff;
  box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.17);
  position: relative;
  top: -160px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg) !important;
  text-align: center;
}

.ref-infos-logos img {
  margin: 0 auto;
  padding: 17px 0px;
}

.ref-video-wrap {
  margin: 0 auto;
  display: block;
  padding-top: 22px;
  position: relative;
  top: 0;
  width: 100%;
  height: 371px;
  margin-bottom: 60px;
}

.refs-block {
  margin-top: 100px;
}

.iframe-overflow {
  background-image: url('../img/video-vignette.jpg');
  width: 100%;
  height: 100%;
  position: absolute;
  top: 22px;
  cursor: pointer;
  transition: all ease 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.iframe-overflow.hidden {
  display: none;
}

.iframe-overflow.visuallyhidden {
  opacity: 0;
}

/* .iframe-overflow::after {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/video-vignette.png');
} */

#team {
  padding-top: 80px;
}

.team-image {
  position: relative;
  z-index: 1;
}


.team-block {
  margin-bottom: 141px;
}

.team-block h3 {
  font-family: 'Bariol-Bold';
  font-size: 28px;
  color: #30aae1;
  padding-left: 20px;
  margin-bottom: 40px;
}

.team-infos-content {
  font-size: 19px;
  color: #727272;
}

.team-infos-text {
  padding: 0 25px;
  margin-top: 47px;
}

.team-infos-text p {
  margin-bottom: 25px;
  font-weight: 300;
}

.certifications .certifications-logos {
  display: inline-flex;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 47px;
}

.certifications-logos img {
  width: 24%;
  height: 100%;
}

.certifications-logos img:first-child {
  padding-top: 23px;
  margin-left: 9px;
}

.certifications-logos img:nth-child(2) {
  margin-right: 35px;
  margin-left: 35px;
  padding-top: 10px;
}

/**           **/
/* EARTH AREA */
/**           **/

a-scene {
  position: absolute;
  height: 60px !important;
  top: 129px;
  z-index: 1111;
}

.earth {
  margin-top: 10px;
}

.aframebox {
  height: 550px !important;
  width: 100%;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  /* top: 216px; */
  z-index: 2;
}

.earth-mobile {
  width: 100vw;
  height: 700px;
  position: absolute;
  top: 0;
  z-index: 4444;
}



/**           **/
/* FOOTER AREA */
/**           **/

footer {
  background-image: url('../img/footer/bg-footer.png');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  width: 100%;
}

.footer-wrap {
  margin-top: 44px;
  margin-bottom: 19px;
}

.footer-logo-wrap img {
  margin-bottom: 19px;
}

.footer-logo-wrap p {

  color: #ffffff;
  font-size: 16px;
  margin-bottom: 50px;
}

.footer-links-wrap h3 {
  margin: 0;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 19px;
}

.footer-links-wrap ul {
  padding-left: 0;
  margin-bottom: 60px;
}

.footer-links-wrap ul li {
  list-style: none;
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: normal;
}

.footer-mentions {
  margin-top: 30px;
}

.footer-links-wrap ul li a {
  color: #ffffff;
  transition: all 0.2s ease;
}

.footer-links-wrap ul li a:hover {
  text-decoration: none;
  color: #42f0bf;
}

.footer-contact-wrap h3 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  margin-top: 0;
}

.footer-contact-wrap h4 {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
}

.footer-links {
  margin-top: 18px;
  margin-bottom: 16px;
}

.footer-links a {
  border: 1px solid #fafbfb;
  border-radius: 100%;
  color: #ffffff;
  display: inline-table;
  font-size: 20px;
  height: 36px;
  margin: 0 6.5px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 36px;
  text-align: center;
  text-decoration: none;
}
.footer-links a i {
  display: table-cell;
  vertical-align: middle;
}
.footer-links a:hover {
  background-color: #1784a5;
  border-color: #1784a5;
}
.footer-text span {color: #cccccc}
.footer-text {margin-top: 23px}
.footer-text span a {color: #cccccc}
.footer-text span a:hover {
  border-bottom: 1px solid #7a9757;
  color: #7a9757;
}

.email-wrap {
  position: relative;
  padding-top: 5px;
}

.email-wrap #mc-embedded-subscribe {
  position: absolute;
  top: 10px;
  right: 0%;
  background: none;
  border: none;
}

.email {
  width: 100%;
  height: 39px;
  box-shadow: none;
  border: none;
  border-radius: 5px;
  padding-left: 12px;
  font-size: 12px;
}

.email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #30aae1;
  font-weight: normal;
}
.email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #30aae1;
  opacity: 1;
  font-weight: 500;
}
.email::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #30aae1;
  opacity: 1;
  font-weight: 500;
}
.email:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:    #30aae1;
  font-weight: 500;
}
.email::-ms-input-placeholder { /* Microsoft Edge */
  color:    #30aae1;
  font-weight: 500;
}

.email::placeholder { /* Most modern browsers support this now. */
  color:    #30aae1;
  font-weight: 500;
}

.footer-adress p {
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 32px;
}

.footer-adress h4 {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}

.footer-contact-wrap {
  margin-bottom: 60px;
}

.footer-adress {
  margin-bottom: 50px;
}

.footer-adress a {
  color: white;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.footer-adress a:hover {
  color: #42f0bf;
}

.footer-links-wrap {
  /* visibility: hidden; */
}

.about-area {
  margin-top: 240px !important;
  overflow-x: hidden;
}

/* ESCAPE AREA */

.escape-scene {
  display: none;
}

.escape-scene.no-elem .escape-element-secret {
  display: none;
}

.escape-element-secret {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity ease 0.3s;
  /* cursor: crosshair; */
  background-repeat: no-repeat;
}

.escape-element-secret:hover {
  opacity: 1;
}

.blood {
  background-image: url('../img/escape-room/blood.png');
  width: 370px;
  height: 126px;
  position: absolute;
  bottom: 0;
  right: 20%;
  background-size: 400px;
}

.blood:hover {
  opacity: 0.9 !important;
}

.chair {
  background-image: url('../img/escape-room/chair.png');
  width: 400px;
  height: 526px;
  position: absolute;
  background-size: 400px;
  top: 41%;
  left: 53%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}

.books {
  background-image: url('../img/escape-room/books.png');
  width: 400px;
  height: 486px;
  position: absolute;
  background-size: 200px;
  top: 68%;
  left: 85%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}

.painting {
  background-image: url('../img/escape-room/painting.png');
  width: 400px;
  height: 486px;
  position: absolute;
  background-size: 284px;
  top: 19%;
  left: 81%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}

.painting-secret {
  background-image: url('../img/escape-room/painting-secret.png');
  width: 400px;
  height: 236px;
  position: absolute;
  background-size: 284px;
  top: 19%;
  left: 81%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}

.doll {
  background-image: url('../img/escape-room/doll.png');
  width: 157px;
  height: 208px;
  position: absolute;
  left: 53%;
  transform: translate(-50%);
  background-size: 177px;
  top: 50%;
  background-repeat: no-repeat;
}

.safe {
  background-image: url('../img/escape-room/safe.png');
  width: 354px;
  height: 716px;
  position: absolute;
  left: 22%;
  transform: translate(-50%);
  background-size: 377px;
  top: 21%;
  background-repeat: no-repeat;
}

.lamp {
  background-image: url('../img/escape-room/lamp.png');
  width: 701px;
  height: 676px;
  position: absolute;
  left: 22%;
  transform: translateX(-51.5%) translateY(-184px);
  background-size: 746px;
  top: 21%;
  background-repeat: no-repeat;
}

.safe-wrap {
  left: 20%;
  position: absolute;
  top: 30%;
}

.safe-secret {
  background-image: url('../img/escape-room/safe-secret.png');
  width: 312px;
  height: 194px;
  position: absolute;
  left: 26%;
  transform: translateX(-77px) translateY(170%);
  background-size: 119px;
  top: 20%;
  background-repeat: no-repeat;
}

.footprint {
  background-image: url('../img/escape-room/footprint.png');
  width: 672px;
  height: 106px;
  position: absolute;
  left: 337px;
  transform: translate(-50%);
  background-size: 387px;
  top: 89%;
}

.footprint:hover {
  opacity: 0.8;
}

.escape-scene {
  cursor: none;
  height: 100vh;
  background-image: url('../img/escape-room/Room.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

#circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 15px solid #eee;
  box-shadow: inset 0 5px 10px 5px rgba(0, 0, 0, 0.5), inset 0 50px 30px 0px rgba(255, 255, 255, .25), inset 0 -30px 20px rgba(0, 0, 0, .25), 1px 2px 1px 5px rgba(180,180,180, 1), 0 0 0px 2000px rgba(0, 0, 0, 0.55);
  background-image: radial-gradient(ellipse closest-corner at 55% 10%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 30%), radial-gradient(ellipse closest-side at 70% 15%, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 20%);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
  pointer-events: none;
  z-index: 3;
}

#circle::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 180px;
  background-color: #30aae1;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.35) 100%);
  border-top-right-radius: 50% 10px;
  border-top-left-radius: 50% 10px;
  border-bottom-right-radius: 50% 30px;
  border-bottom-left-radius: 50% 30px;
  border-top: 5px solid #eee;
  border-bottom: 15px solid #999;
  box-shadow: inset 0 0 10px 0px rgba(0, 0, 0, 0.75);
  transform: translate(260px, 260px) rotate(-35deg);
  z-index: 110;
  padding-top: 125px;
  padding-left: 5px;
  color: rgba(255, 255, 255, 0.61);
}

#circle::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: linear-gradient(90deg,#777 0%,rgba(0, 0, 0, 0.65) 40%,#d9d9d9 70%,#999 100%);
  transform: translate(217px, 254px) rotate(-35deg);
  box-shadow: inset 0 0 10px rgba(0,0,0,.5);
  border-top-right-radius: 50% 4px;
  border-top-left-radius: 50% 4px;
  border-bottom-right-radius: 50% 10px;
  border-bottom-left-radius: 50% 10px;
  z-index:1
}

.arrow {
  background-image: url(../img/arrow.png);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  background-size: contain;
  left: 46%;
  z-index: 5;
  display: none;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.escape-program {
  /* padding-top: 149px; */
  /* margin-bottom: 60px; */
}

.escape-interface {
  margin-bottom: 230px;
}

.escape-installation {
  margin-bottom: 140px;
  margin-top: 120px;
}

.escape-program-content {
  padding-left: 25px;
  padding-right: 0;
  margin-top: -80px;
}

.escape-interface-content {
  min-height: 234px;
}

.escape-installation-content {
  min-height: 282px;
  margin-left: -20px;
  margin-top: -180px;
}

.escape-installation-illu {
  position: relative;
  z-index: 1;
  top: -222px;
}

.escape-installation-illu img {
  display: block;
  max-width: 100%;
  height: auto;
}

.escape-program-illu {
  position: relative;
  z-index: 11;
  color: #30aae1;
  padding-top: 40px;
  margin-bottom: 29px;
  top: -70px;
}

.escape-program-illu img {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.escape-interface-illu-min {
  left: 50% !important;
  transform: translateX(-50%);
}

.retail-interface-illu img {
  top: -180px;
}

.escape-interface-illu img:first-child {
  position: relative;
  left: -7%;
}

.escape-interface-illu img:nth-child(2) {
  position: absolute;
  top: 34%;
  left: 2%;
}

.escape-interface-illu img:nth-child(3) {
  position: absolute;
  left: 35%;
  top: 45px;
}

.escape-program-content h3, .escape-interface-content h3, .escape-installation-content h3 {
  font-size: 26px;
  font-family: 'Bariol-Regular';
  color: #30aae1;
  padding-top: 30px;
  margin-bottom: 29px;
}

.escape-program-content p, .escape-interface-content p, .escape-installation-content p {
  font-family: Montserrat;
  line-height: normal;
  font-size: 19px;
  font-weight: 300;
  color: #727272;
}

.escape-demo {
  border-radius: 43px;
  background-color: #30aae1;
  font-family: 'Bariol-Regular';
  font-size: 18.7px;
  font-weight: bold;
  color: #ffffff;
  padding: 9px 1px;
  display: block;
  width: 223px;
  margin: 0 auto;
  transition: all ease 0.5s;
  border: 3px solid #30aae1;
}

.escape-demo:hover, .escape-demo:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #34c0ff;
}

.escape-demo-home {
  font-family: 'Bariol-Regular';
  font-size: 20px;
  font-weight: bold;
  color: #30aae1;
  margin-bottom: 110px;
  display: block;
  margin-top: 10px;
  transition: all ease 0.5s;
}

.escape-demo-home:hover {
  text-decoration: none;
  color: #59cbff;
}

.escape-scene-mobile, .retail-scene-mobile {
  margin-top: 72px;
  margin-bottom: -50px;
}

/* RETAIL SCENE */

.retail-scene {
  cursor: none;
  height: 100vh;
  background-image: url('../img/retail/Room.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.wardrobe {
  background-image: url('../img/retail/Etagère.png');
  width: 412px;
  height: 554px;
  position: absolute;
  right: -9%;
  transform: translateX(-77px);
  background-size: 409px;
  top: 35%;
  background-repeat: no-repeat;
}

.model {
  background-image: url('../img/retail/Mannequin.png');
  width: 260px;
  height: 834px;
  position: absolute;
  left: 100%;
  transform: translateX(-130%) translateY(170%);
  background-size: 269px;
  top: -1549px;
  background-repeat: no-repeat;
}

.beacon {
  background-image: url('../img/retail/Beacon.png');
  width: 249px;
  height: 36px;
  position: absolute;
  background-size: 25px;
  top: 0;
  background-repeat: no-repeat;
}

.cadre {
  background-image: url('../img/retail/Cadre.png');
  width: 369px;
  height: 376px;
  position: absolute;
  left: 26%;
  transform: translateX(-50%);
  background-size: 315px;
  top: 20%;
  background-repeat: no-repeat;
}


.cadre-secret {
  background-image: url('../img/retail/Transfo_Cadre.png');
  width: 369px;
  height: 376px;
  position: absolute;
  left: 26%;
  transform: translateX(-50%);
  background-size: 315px;
  top: 20%;
  background-repeat: no-repeat;
}

.bubbles {
  width: 408px;
  height: 376px;
  position: absolute;
  left: 29%;
  top: 39%;
  z-index: 0;
}

/* .bubbles:hover > .bubble-handbag, .beacon-wrap:hover > .iphone-notif {
animation:2s ease 0s normal forwards fadein;
-webkit-animation:2s ease 0s normal forwards fade;
opacity:1;
} */

.bubbles:hover > .bubble-handbag, .beacon-wrap:hover > .wave1 {
  animation:0.5s ease 0s normal forwards 1 fadein;
  -webkit-animation:0.5s ease 0s normal forwards 1 fadein;
  opacity:1
}

.bubbles:hover > .bubble-sandale, .beacon-wrap:hover > .wave2 {
  animation:1s ease 0s normal forwards 1 fadein;
  -webkit-animation:1s ease 0s normal forwards 1 fadein;
  opacity:1;
}

.beacon-wrap:hover > .iphone-notif {
  animation: shakePhone 2.5s cubic-bezier(.36,.07,.19,.97) infinite;
  -webkit-animation: shakePhone 2.5s cubic-bezier(.36,.07,.19,.97) infinite;
}

.bubbles:hover > .bubble-hat {
  animation:1.5s ease 0s normal forwards 1 fadein;
  -webkit-animation:1.5s ease 0s normal forwards 1 fadein;
}

.bubble-handbag {
  background-image: url('../img/retail/Bulle_sac.png');
  width: 162px;
  height: 156px;
  position: absolute;
  left: 54%;
  transform: translateX(-50%) translateY(170%);
  background-size: 158px;
  top: -47%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: ease 0.5s opacity;
}

.bubble-hat {
  background-image: url('../img/retail/Bulle_chapeau.png');
  width: 189px;
  height: 156px;
  position: absolute;
  left: 102%;
  transform: translateX(-50%) translateY(170%);
  background-size: 158px;
  top: -72%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: ease 0.5s opacity;
}

.bubble-sandale {
  background-image: url('../img/retail/Bulle_sandale.png');
  width: 309px;
  height: 156px;
  position: absolute;
  left: 29%;
  transform: translateX(-50%) translateY(170%);
  background-size: 158px;
  top: -72%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: ease 0.5s opacity;
}

.wave1 {
  background-image: url('../img/retail/beacon-onde-1.png');
  width: 309px;
  height: 156px;
  position: absolute;
  left: 71%;
  transform: translateX(-50%) translateY(170%);
  background-size: 95px;
  top: -278%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: ease 0.5s opacity;
}

.wave2 {
  background-image: url('../img/retail/beacon-onde-2.png');
  width: 309px;
  height: 186px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(170%);
  background-size: 169px;
  top: -360%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: ease 0.5s opacity;
}

.beacon-wrap {
  width: 168px;
  height: 106px;
  position: absolute;
  left: 69%;
  top: 41%;
  z-index: 1;
}

.iphone-notif {
  background-image: url('../img/retail/iphone_Notif.png');
  width: 79px;
  height: 166px;
  position: absolute;
  left: 47px;
  transform: translateX(-50%) translateY(170%);
  background-size: 69px;
  top: -35%;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  display: none;
  /* opacity: 0; */
}

.iphone-notif-bubble {
  background-image: url('../img/retail/Notif_Bulle.png');
  width: 79px;
  height: 166px;
  position: absolute;
  left: 50px;
  transform: translateX(-50%) translateY(170%);
  background-size: 49px;
  top: -153%;
  background-repeat: no-repeat;
  display: none;
}

.wardrobe:hover > .iphone-web {
  opacity: 1;
  transform: translate(20%,12%);
  -webkit-transform: translate(20%,12%);
}

.iphone-web {
  background-image: url('../img/retail/iPhone_web.png');
  width: 100%;
  height: 756px;
  position: absolute;
  transform: translateX(20%) translateY(80%);
  -webkit-transform:translateX(20%) translateY(80%);
  background-size: 439px;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(.36,.07,.19,.97), opacity  0.5s ease-in-out;
  opacity: 0;
}

.logo-loupe {
  position: absolute;
  bottom: -108px;
  right: -72px;
  z-index: 1000;
  color: white;
  transform: rotate(56deg);
}

.logo-loupe img {
  width: 70px;
}

.scene-title, .scene-title-2 {
  position: absolute;
  top: 50%;
  left: 150px;
  z-index: 20;
  color: white;
  font-family: 'Bariol-Regular';
  font-weight: bold;
  font-size: 35px;
  line-height: 45px;
  margin-top: 0;
  display: none;
  pointer-events: none;
}

.retail-experience-illu {
  position: relative;
  z-index: 11;
  color: #30aae1;
  padding-top: 100px;
  margin-bottom: 29px;
  top: -70px;
}

.retail-beacons-illu {
  position: absolute;
  left: -210px;
  top: -90px;
  z-index: -1;
}

.retail-conseil-illu {
  position: absolute;
  z-index: 1;
  left: 70px;
  top: -15px;
}

.retail-experience-illu img {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.retail-conseil {
  margin-left: 0 !important;
  min-height: 230px;
}

.escape-first-illu {
  margin-top: 150px;
}

@media screen and (min-width: 992px) {
  .escape-first-illu {
    margin-top: 0;
  }

  .escape-program-content p, .escape-interface-content p, .escape-installation-content p {
    padding-right: 65px;
  }

  .retail-conseil {
    padding-right: 0 !important;
  }

  .museum-interface-content {
    min-height: 280px;
  }

  .museum-installation {
    margin-top: 195px;
  }

  .retail-experience-illu {
    padding-top: 40px;
  }

  .retail-experience-illu img:first-child {
    left: 30px;
    transform: none;
  }

  .retail-experience-illu img:nth-child(2) {
    position: absolute;
    top: 34%;
    left: -30%;
    z-index: -1;
  }

  .museum-conseil-illu img:nth-child(2) {
    position: absolute;
    top: 34%;
    left: 20%;
    z-index: -1;
  }
}

#retail-content {
  margin-top: 70px;
  margin-bottom: 100px;
}

/* MUSEUM SCENARY */
.museum-outdoor {
  cursor: none;
  height: 100vh;
  background-image: url('../img/museum/rue.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.museum-indoor {
  cursor: none;
  height: 100vh;
  background-image: url('../img/retail/Room.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  display: none;
}

.porte-entree {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  top: 53%;
  cursor: pointer;
}

.door-elements img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  top: 47%;
  height: 71%;
}

.lampadaire {
  position: absolute;
  right: 13%;
  top: -210px;
  height: 110%;
  z-index: 1;
}

.window-right {
  position: absolute;
  right: 8%;
  top: 10%;
  height: 50%;
}

.beacon-actif {
  position: absolute;
  right: 29%;
  top: 50%;
}

.window-left {
  position: absolute;
  left: 6%;
  top: 10%;
  height: 50%;
}

.plaque-museum {
  position: absolute;
  top: 40%;
  left: 26.5%;
}

.plaque-hackeo {
  position: absolute;
  top: 40%;
  right: 29.7%;
}

.plaque-street {
  position: absolute;
  top: 40%;
  right: 2.7%;
}

.transfo-arrow {
  z-index: 2 !important;
  height: auto !important;
  top: 78% !important;
  opacity: 0;
  transition: ease 0.5s opacity;
  pointer-events: none;
}

.door-elements:hover > .transfo-arrow {
  animation:1s ease 0s normal forwards 1 fadein;
  -webkit-animation:1s ease 0s normal forwards 1 fadein;
  opacity:1;
}

.transfo-statue {
  top: 30%;
  right: 28%;
}

.transfo-poster {
  height: 60%;
  top: 7%;
  left: 3.8%;
}

.transfo-indic {
  top: 40%;
  right: 1.5%;
}

.museum-painting {
  top: 20%;
  left: 51%;
  position: absolute;
  transform: translateX(-50%);
  width: 14%;
}

.museum-meuble {
  position: absolute;
  top: 50%;
  left: 51%;
  transform: translateX(-50%);
  height: 36%;
}

.museum-painting-elems {
  position: absolute;
  top: 17%;
  left: 11%;
  width: 800px;
}

.museum-painting-indoor {
  width: 40%;
  position: absolute;
  top: -7%;
  left: 0%;
}

.museum-painting-secret {
  width: 30%;
  position: absolute;
  transform: translateY(-47px);
  left: 52px;
}

.plaque-hackeo-dragon {
  top: 34%;
  right: 26.1%;
}

.museum-indoor .beacon-wrap {
  left: 37%;
}

.museum-barriers {
  position: absolute;
  bottom: 12%;
  width: 450px;
  left: 6%;
  z-index: 1;
}
.museum-barriers.second {
  left: 63%;
}

.museum-vase {
  position: absolute;
  /* bottom: 150px; */
  top: 55%;
  left: 70%;
  transform: translateX(13%);
}

.museum-exit {
  position: absolute;
  top: 27%;
  left: 84%;
  cursor: pointer;
}

.museum-interface-content {
  min-height: 320px;
}

.museum-conseil-illu {
  position: relative;
  z-index: 11;
  padding-top: 40px;
  margin-bottom: 29px;
  top: -70px;
}

.museum-conseil-illu img:first-child {
  transform: translateX(-50%);
  position: relative;
  left: 50%;
  margin-bottom: 90px;
}

/* .museum-exit-anim {
transform: translateX(-20%);
opacity: 0;
transition: all 0.5s ease-out;
} */

/* @media screen and (min-width: 1437px) {
.plaque-museum {
left: 28.5%;
}

.window-left {
left: 13%;
}
} */

@media screen and (max-width: 1232px) {

  .retail-conseil-illu {
    left: 0px;
  }

  .museum-guide-para {
    padding-right: 20px;
    min-height: 370px !important;
  }

  .museum-interface-content {
    min-height: 400px;
  }

  .museum-guide {
    margin-top: 70px;
  }

  .museum-painting-elems {
    width: 690px;
    top: 17%;
    left: 7%;
  }

  .museum-painting-secret {
    transform: translateY(-42px);
    left: 46px;
  }

  .museum-barriers {
    position: absolute;
    bottom: 10%;
    width: 34%;
    left: 1%;
  }

  .museum-meuble, .museum-painting {
    left: 48%;
  }

  .plaque-street {
    display: none;
  }

  .window-left {
    left: 3%;
  }

  .window-right {
    right: 3%;
  }

  .beacon-actif {
    right: 25%;
  }

  .plaque-museum {
    top: 40%;
    width: 83px;
    left: 25%;
  }

  .plaque-hackeo {
    right: 25.7%;
  }

  .transfo-statue {
    right: 23%;
  }

  .plaque-hackeo-dragon {
    right: 19.5%;
  }

  .transfo-poster {
    left: 0;
  }
}

.retail-conseil {
  padding-right: 0 !important;
}

.title-mobile {
  font-size: 26px;
  font-weight: normal;
  color: #30aae1;
  font-family: 'Bariol-Regular';
  margin-top: 90px;
}

.title-mobile.second {
  margin-top: 0;
}

.cookie-banner-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  display: none;
  z-index: 1100;
}

.cookie-banner {
  background: rgba(246,249,252,.9);
  box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
  font-size: 15px;
  color: #424770;
  margin: 0 auto;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 14px;
}

.cookie-banner-content {
  padding: 10px;
}

.cookie-banner-content p {
  /* color: #5945a4; */
}

#cookie-more-button {
  background-color: #13bbe8 !important;
  box-shadow: none;
  border: none;
  border-radius: 20px;
  color: white;
  padding: 5px 17px;
  font-weight: 400;
  transition: background-color ease 0.3s;
}

#cookie-more-button:hover {
  background-color: #0ea4cc !important;
}

.cookie-inform-and-ask {
  background-color: rgba(0, 0, 0, 0.73);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  transition: ease all 0.3s;
}

.cookie-inform-and-ask.active {
  display: block;
}

.cookie-dialog {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  background: rgba(246,249,252,.9);
  border-radius: 30px;
  padding: 24px 30px;
}

.cookie-dialog button {
  box-shadow: none;
  border: none;
  border-radius: 20px;
  color: white;
  padding: 5px 17px;
  font-weight: 400;
  transition: background-color ease 0.3s;
}

.cookie-dialog button:first-child {
  background-color: #e35c59;
}

.cookie-dialog button:first-child:hover {
  background-color: #c9504e;
}

.cookie-dialog button:nth-child(2) {
  background-color: #72db74;
}

.cookie-dialog button:nth-child(2):hover {
  background-color: #63c665;
}

.cookie-dialog p {
  padding-bottom: 18px;
}

.cookie-dialog h1 {
  margin-top: 0;
}

/**           **/
/*   HELPERS   */
/**           **/

.no-padding {
  padding: 0;
}