html,
body {
  background-color: #000;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  color: #bdbdbd;
  font-size: 18px; 
}
p{  line-height: 150%;}

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-direction: row; flex-wrap: wrap; }
.column { max-width: 50%; flex: 0 50%; }

a{color:#fff; text-decoration: none;}
a:hover{text-decoration: underline;}

:focus {
  outline: none;
  box-shadow: none;}

section#hero{background: rgb(42,38,22); background: linear-gradient(145deg, rgba(42,38,22,1) 12%, rgba(0,0,0,1) 50%, rgba(37,4,35,1) 88%); height: 700px; min-height: 95%;}
section#hero .bg_belly{transform: translateY(7px);height: 100%; background: no-repeat bottom left 5% url('../images/belly_hero_bg.webp'); background-size: auto 100%;}
section#hero .bg_samba{height: 100%; background: no-repeat bottom right 5% url('../images/samba_hero_bg.webp'); background-size: auto 100%;}
section#hero .glitter{height: 100%; /*background: no-repeat center center url('../images/glitter7.webp');*/ background-size:100% auto;}
section#hero .glitter-t-l{height: 100%; background: no-repeat top left url('../images/glitter-1.webp'); background-size:auto 80%;}
section#hero .glitter-b-r{height: 100%; background: no-repeat bottom right url('../images/glitter-2.webp'); background-size:auto 70%;}
section#hero .glitter-b-c{height: 100%; background: no-repeat bottom center url('../images/glitter-3.webp'); background-size: 50% auto;}



#scene, #scene2{
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 95%;
  overflow: hidden;
}

.layer {
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}


#l1{
  background-image: url('../images/glitter-4.png');
  left: 0;
  background-size:100% auto;
  background-position: center center;
  top: 0;
}
#l2{
  background-image: url('../images/glitter7.webp');
  left: 0;
  background-size:100% auto;
  background-position: center center;
  top: 0;
  margin-left: -5px;
}



.top-menu{text-align: center; padding-top: 10px; }
.top-menu .logo{display: inline-block;border-radius: 50%; -webkit-box-shadow:0px 0px 17px 0px rgba(255,255,255,0.37);-moz-box-shadow: 0px 0px 17px 0px rgba(255,255,255,0.37);box-shadow: 0px 0px 17px 0px rgba(255,255,255,0.37); width: 115px; height: 114px; position: relative;vertical-align: middle;margin: 0 10px;}
.top-menu .logo img{width: 120px; position: absolute; top:-4px; left: -1px; }
.top-menu .menu-item{margin: 0 20px; font-size: 21px;}
.top-menu .menu-item a{display: inline-block;transition: text-shadow 300ms;}
.top-menu .menu-item a:hover{text-decoration: none; text-shadow: rgba(255,255,255,1) -2px -2px 10px;}
.top-menu .menu-item a:after{content: " ";height: 5px;display: block; transition: transform 300ms; transform: scale(0); transform-origin: center;}
.top-menu .menu-item a:hover:after{transform: scale(1); border-bottom: 1px solid #fff;}
.logo_for_phone{display:none;}

.pagetitle{position: relative; font-size: 80px; line-height: 90%; text-shadow: rgba(255,255,255,1) 0px 0px 25px; text-align: center; color: #fff; font-family: "Parisienne", cursive;}
.pagetitle .pagetitle-name{position: absolute; top: 100px;left: 50%;margin-left: -125px;}
.pagetitle .pagetitle-s{font-size: 60px;}
.pagetitle .star1{position: absolute; width: 30px; height: 30px; background:no-repeat bottom center url('../images/star1.png'); background-size: 100% auto;top: 106px;left: 50%;margin-left: 40px; animation-name: rotatestar; animation-duration: 20s;animation-iteration-count: infinite;}
.pagetitle .star2{position: absolute; width: 30px; height: 30px; background:no-repeat bottom center url('../images/star2.png'); background-size: 100% auto;top: 123px;left: 50%;margin-left: -106px; animation-name: rotatestar_rev; animation-duration: 17s;animation-iteration-count: infinite;animation-delay: 1s;}
.star3{position: absolute; width: 27px; height: 27px; background:no-repeat bottom center url('../images/star3.png'); background-size: 100% auto;top: 150px;right: 25%; animation-name: rotatestar_rev; animation-duration: 15s;animation-iteration-count: infinite;animation-delay: 0.5s;}
.star4{position: absolute; width: 25px; height: 25px; background:no-repeat bottom center url('../images/star4.png'); background-size: 100% auto;bottom: 150px;left: 35%; animation-name: rotatestar; animation-duration: 5s;animation-iteration-count: infinite;animation-delay: 0.5s;}
@keyframes rotatestar {
  0% {transform: rotate(0); }
  50% {transform: rotate(90deg);}
  100% {transform: rotate(0);}
}
@keyframes rotatestar_rev {
  0% {transform: rotate(0); }
  50% {transform: rotate(-270deg);}
  100% {transform: rotate(0);}
}

.pagesubtitle{position: relative;font-size: 32px; font-weight: 300; text-align: center; padding-top: 320px; color:#fff;}
.pagesubtitle:before{content: ""; position: absolute; top: 300px; left: 50%; margin-left: -40px; border-top:1px solid #fff; width: 80px;}
.pagesubtitle div{font-size: 20px}
.gold-hr{height: 5px; background: rgb(160,116,68); background: linear-gradient(90deg, rgba(160,116,68,1) 0%, rgba(225,210,116,1) 43%, rgba(251,252,240,1) 54%, rgba(225,210,116,1) 62%, rgba(228,194,87,1) 100%);}

.element-animation {opacity: 0;transform: translateY(20px);}
.element-animation.element-show {opacity: 1;transition: opacity 2s, transform 2s;transform: translateY(0%);}

section#hero .bg_belly.bg_from_l{background-position: bottom left 3%;}
section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left 5%;transition: background-position 3s 1s;}
section#hero .bg_samba.bg_from_r{background-position: bottom right 3%;}
section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right 5%;transition: background-position 3s 1s;}

section#offer{ background:no-repeat top center url('../images/photo-offer.jpg'); background-attachment: fixed; background-size: cover; /*background: rgb(0,0,0); background: linear-gradient(176deg, rgba(0,0,0,1) 0%, rgba(67,7,63,1) 49%, rgba(0,0,0,1) 100%);*/}
.offer-overlay{padding: 90px 0; background: rgba(0,0,0,0.8);}
section#offer .container{position: relative;}
section#offer h2{margin: 0; padding: 0; font-size: 36px; font-weight: normal; color: #fff; text-align: center;} 
section#offer h5{margin: 0; padding: 0; font-size: 26px; font-weight: 300; color: #8d8d8d; text-align: center;}
section#offer .column{max-width: 33%; flex: 0 33%; }
section#offer h3{margin: 0; padding: 0 0 15px 0; font-size: 24px; font-weight: normal; color: #fff; position: relative; overflow: hidden;}
section#offer h3:after{content: ""; position: absolute; width: 70px; border-bottom: 1px solid #fff;left: -70px;bottom: 0;}
section#offer h3.element-show:after{left: 0;transition: left 1s 0.5s;}
section#offer .column:first-child h3.element-show:after{transition: left 1s 0s;}
section#offer .column:last-child h3.element-show:after{transition: left 1s 1s;}
section#offer .readmore{color:#fff; position: relative;transition: 0.3s; overflow: hidden; background: #a7129e; border-radius: 3px; display: inline-block; padding: 10px 25px;}
section#offer .readmore:hover{ background: #750d6f; text-decoration: none;}
section#offer .readmore:before {content: ''; position: absolute; top: 0; left: -140px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); transform: skewX(-30deg); transition: 0.3s; } 
section#offer .readmore:hover:before { left: 140px;}
section#offer .short_item{padding: 70px 25px 0 25px;}
section#offer .short_descr{padding: 25px 0 35px 0; line-height: 150%; font-weight: 300;}
section#offer .star3{top:20px; left: 10px; width: 30px; height: 30px;}
section#offer .star4{top:100%; left: 30%; margin-top: 40px; width: 27px; height: 27px;}

section#aboutme{background: rgb(215,52,121); background: linear-gradient(270deg, rgba(215,52,121,1) 3%, rgba(119,27,66,1) 39%, rgba(0,0,0,1) 100%); position: relative;}
section#aboutme .about_glitter{background:no-repeat top right url('../images/glitter-about-us.png'); background-size: auto 100%;}
section#aboutme .about_video{float: left; line-height: 0; font-size: 0; border-radius: 3px;margin: -30px 35px 0 0; background: rgb(160,116,68); padding: 3px 3px 2px 3px; background: linear-gradient(90deg, rgba(160,116,68,1) 0%, rgba(225,210,116,1) 43%, rgba(251,252,240,1) 54%, rgba(225,210,116,1) 62%, rgba(228,194,87,1) 100%);}
section#aboutme .about_photo{position: relative; padding: 90px 0; min-height: 300px; width: 100%; height: 100%; background:no-repeat bottom -50px right url('../images/photo-aboutus.png'); background-size: auto 110%;}
section#aboutme .about_photo.element-show{background-position: bottom -50px right 5%;transition: background-position 3s 1s;}
section#aboutme .short_aboutme{position: relative; color:#fff; line-height:200%; width: 60%;}
section#aboutme .author{color: #BDBDBD; text-align: right; font-style: italic; padding-bottom: 35px;}
section#aboutme .readmore{color:#fff; font-size:20px; position: relative;transition: 0.3s; overflow: hidden; background: #a7129e; border-radius: 3px; display: inline-block; padding: 15px 35px;}
section#aboutme .readmore:hover{ background: #750d6f; text-decoration: none;}
section#aboutme .readmore:before {content: ''; position: absolute; top: 0; left: -280px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); transform: skewX(-30deg); transition: 0.3s; } 
section#aboutme .readmore:hover:before { left: 280px;}
.clear{clear: both;}

section#gallery{background: rgb(42,38,22); background: linear-gradient(145deg, rgba(42,38,22,1) 12%, rgba(0,0,0,1) 50%, rgba(37,4,35,1) 88%);}
section#gallery .glitter-bottom{padding: 90px 0; position: relative; background: no-repeat bottom center url('../images/glitter-3.webp'); background-size: 50% auto;}
section#gallery h2{margin: 0 0 15px 0; padding: 0; font-size: 36px; font-weight: normal; color: #fff; text-align: center;} 
section#gallery h5{margin: 0; padding: 0; font-size: 18px; font-weight: 300; font-style: italic; color: #8d8d8d; text-align: center;}
section#gallery .photoes{margin: 60px 0; border-top: 3px solid #000000; border-bottom: 3px solid #000000; display: flex; flex-direction: row; flex-wrap: wrap;}
section#gallery .photoes a{display:inline-block; position: relative; height: 550px;max-width: 25%; flex: 0 25%; overflow: hidden;}
section#gallery .photoes a img{width: 100%;}
section#gallery .photoes a:before {content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-25deg); transition: 0s; } 
section#gallery .photoes a:hover:before { left: 125%;transition: 1s;}
section#gallery .readmore-block{text-align: center;}
section#gallery .readmore{color:#fff; font-size:20px; position: relative;transition: 0.3s; overflow: hidden; background: #a7129e; border-radius: 3px; display: inline-block; padding: 15px 35px;}
section#gallery .readmore:hover{ background: #750d6f; text-decoration: none;}
section#gallery .readmore:before {content: ''; position: absolute; top: 0; left: -215px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); transform: skewX(-30deg); transition: 0.3s; } 
section#gallery .readmore:hover:before { left: 215px}
section#gallery .star3{top:40px; left: 150px; width: 30px; height: 30px;}
section#gallery .star4{top:100px; left: 90%; margin-top: 40px; width: 27px; height: 27px;}

footer{color:#fff; font-size: 14px; text-align: center; padding: 25px 0; }
.footer_block{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: flex-start;}
.networks a{display: inline-block; position: relative; overflow: hidden; margin-right: 10px; width: 40px; height: 40px; background-repeat:no-repeat; background-size: auto 100%;}
.networks a.networks_fb{background-image: url('../images/icon-fb.png');}
.networks a.networks_yt{background-image: url('../images/icon-yt.png');}
.networks a.networks_in{background-image: url('../images/icon-in.png');}
.networks a:before {content: ''; position: absolute; top: 0; left: -40px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); transform: skewX(-30deg); transition: 0.3s; } 
.networks a:hover:before { left: 40px; background: rgba(0, 0, 0, 0.2);}
.footer-menu a{display:inline-block; margin: 0 0 0 20px;}



.menuToggleIcon {
  display:none;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 999;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  top: 25px;
  left: 25px;
}


.menuToggleIcon span
{
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.menuToggleIcon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

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

.menuToggleIcon span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.opened.menuToggleIcon{position: fixed;}

.opened.menuToggleIcon span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

.opened.menuToggleIcon span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.opened.menuToggleIcon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 18px;
  left: 8px;
}





#menuToggle
{
  position: fixed;
  z-index: 998;
  top:0;
  left: 0;
  width: 90%;
  box-sizing: border-box;
  height: 100%;
  box-shadow: 0 0 15px #85888C;
  background: rgb(42,38,22); background: linear-gradient(145deg, rgba(42,38,22,1) 12%, rgba(0,0,0,1) 50%, rgba(37,4,35,1) 88%);
  transform: translate(-110%, 0);
  transition: transform 0.5s;
  display:none;
}
#menuToggle ul{list-style-type: none;  margin: 0; padding: 0;}
#menuToggle li
{
  padding: 15px 0;
  font-size: 28px;
}

.opened#menuToggle
{
  transform: translate(0, 0);
}

#menuToggle li a{display: inline-block;transition: text-shadow 300ms;}
#menuToggle li a:hover{text-decoration: none; text-shadow: rgba(255,255,255,1) -2px -2px 10px;}
#menuToggle li a:after{content: " ";height: 5px;display: block; transition: transform 300ms; transform: scale(0); transform-origin: center;}
#menuToggle li a:hover:after{transform: scale(1); height: 3px;border-bottom: 2px solid #fff;}

#menuToggle .networks{margin-top: 70px;}
.glitter-menu{  height: 100%; background: no-repeat top left  url('../images/glitter-1.webp'); background-size:auto 50%;}
.glitter-menu2{  box-sizing: border-box;padding: 100px 50px 50px;height: 100%; background: no-repeat bottom right  url('../images/glitter-2.webp'); background-size:auto 70%;}




@media screen and (min-width: 1700px) {
  .pagetitle{font-size: 120px;}
  .pagetitle .pagetitle-name{top: 90px;margin-left: -187px;}
  .pagetitle .pagetitle-s{font-size: 80px;}
  .pagetitle .star1{top: 106px;margin-left: 70px; }
  .pagetitle .star2{top: 132px;margin-left: -153px;}
  .pagesubtitle{padding-top: 390px; font-size: 40px;}
  .pagesubtitle:before{top: 360px;}
  section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left 7%;}
  section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right 7%;}
}
@media screen and (max-width: 1300px) {
  section#hero{height:500px}
  .top-menu .logo{width: 77px; height: 77px;}
  .top-menu .logo img{width: 80px; top:-3px; left: -1px; }
  .pagetitle{font-size: 60px;}
  .pagetitle .pagetitle-name{top: 70px; margin-left: -93px;}
  .pagetitle .pagetitle-s{font-size: 40px;}
  .pagetitle .star1{top: 72px;margin-left: 26px; }
  .pagetitle .star2{top: 82px;margin-left: -83px;}
  .pagesubtitle{padding-top: 240px; font-size: 24px;}
  .pagesubtitle div{font-size: 16px}
  .pagesubtitle:before{top: 220px;}
  .top-menu .menu-item{margin: 0 10px; font-size: 18px;}
  .top-menu .logo{margin: 0 5px;}
  section#gallery .photoes a{height: 350px;}
  section#aboutme .about_photo{background-position: bottom -50px right -3%;}
  section#aboutme .about_photo.element-show{background-position: bottom -50px right 0;}
}
@media screen and (max-width: 1000px) {
  section#hero .bg_belly.bg_from_l{background-position: bottom left -2%;}
  section#hero .bg_samba.bg_from_r{background-position: bottom right -2%;}
  section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left 2%;}
  section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right 2%;}
}
@media screen and (max-width: 940px) {
  section#hero .bg_belly.bg_from_l{background-position: bottom left -10%;}
  section#hero .bg_samba.bg_from_r{background-position: bottom right -10%;}
  section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left -7%;}
  section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right -7%;}
}
@media screen and (max-width: 785px) {
  section#hero .bg_belly.bg_from_l{background-position: bottom left 0; background-size: auto 90%;}
  section#hero .bg_samba.bg_from_r{background-position: bottom right 0; background-size: auto 90%;}
  section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left -15%; transition: background-position 3s 0s;}
  section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right -5%; transition: background-position 3s 0s;}
  section#hero .glitter-b-c{background-size: 100% auto;}
  section#hero .element-animation.element-show {transition: opacity 2s 1s, transform 2s 1s;}
  .star3{top: 110px;right: 10%;}
  .top-menu{display:none;}
  .menuToggleIcon, #menuToggle{display:block;}
  .logo_for_phone{display: block; border-radius: 50%; -webkit-box-shadow:0px 0px 17px 0px rgba(255,255,255,0.37);-moz-box-shadow: 0px 0px 17px 0px rgba(255,255,255,0.37);box-shadow: 0px 0px 17px 0px rgba(255,255,255,0.37); width: 77px; height: 77px; position: absolute; top: 250px; left: 50%; margin-left: -38px;}
  .logo_for_phone img{width: 80px; position: absolute; top:-3px; left: -1px; }
  .pagesubtitle{padding-top: 380px;}
  .pagesubtitle:before{top: 360px;}
  section#offer .column{max-width: 100%; flex: 0 100%; }
  section#aboutme .about_glitter{background-size: auto;}
  section#aboutme .about_photo{background-image:none;}
  section#aboutme .about_photo.element-show{background-position: bottom -50px right -70%;}
  section#aboutme .short_aboutme{width: 100%;}
  section#aboutme .about_video{float: none; width: 225px;margin: 0 auto 35px;}
  section#gallery .photoes a{height: 250px;max-width: 50%; flex: 0 50%;}
  section#gallery .glitter-bottom{background-size: 100% auto;}
  footer{padding: 55px 0; }
  .footer_block{display: block;}
  .copyright{margin: 25px 0;}
}
@media screen and (max-width: 630px) {
  section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left -45%; transition: background-position 3s 0s;}
  section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right -35%; transition: background-position 3s 0s;}
  .pagesubtitle{font-size: 20px;}
  .pagesubtitle div{font-size: 14px}
}
@media screen and (max-width: 470px) {
  section#hero .bg_belly.bg_from_l{background-position: bottom left -40%; background-size: 68% auto;}
  section#hero .bg_samba.bg_from_r{background-position: bottom right -20%; background-size: 58% auto;}
  section#hero .bg_belly.bg_from_l.element-show{background-position: bottom left -65%; transition: background-position 3s 0s;}
  section#hero .bg_samba.bg_from_r.element-show{background-position: bottom right -45%; transition: background-position 3s 0s;}
  @supports (-webkit-touch-callout: none) {
    section#offer{ background-attachment: scroll;}
  }
}
@media screen and (max-width: 360px) {
  .star3{top: 90px;right: 5%;}
  .star4{bottom: 50px;left: 50%;}
  section#aboutme .readmore{font-size:18px; padding: 12px 25px;}
}