/* audio control design */

.hero_audio_control span {
  cursor: pointer;
  display: block;
  
  width: 20px;
  font-size: 18px;
}
.hero_audio_control {
  
  padding: 12px 10px;
  position: absolute;
  text-align: center;
  width: auto;
  z-index: 9999999;
}

.hero_audio_control img{
	width: 20px;
}

.slider_hero_walkingbackground{
	overflow: hidden;
}
.hero_gslider_control{margin-left: 10px;cursor: pointer;}
.hero_restart_button{
position: absolute;
    bottom: 20px;
    /* right: 5px; */
    z-index: 99999;
    width: 100%;
    height: 30px;
    /* background: #fff; */
    padding: 5px;
    text-align: center;
}
#hero_restart_button, #hero_pause_button, #hero_play_button{
	width: 20px;
    height: 20px;
    color:#fff;
	font-size:15px;
    display: inline-block;
	cursor: pointer;
}
.hero_bottom_save_button{
	position: fixed;
    bottom: 36px;
    right: 9px;
}
/*Control nav style*/

.qc-sliderX-bottomCon{position: absolute;bottom: 25px;text-align: center;z-index: 999;}
.qc-sliderX-direction{position: absolute;top: 45%;}
.qc-sliderX-prev{
float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrow.light.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 70px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;
}
.qc-sliderX-prev:hover{
	background-position: 0px -35px;
	color: rgba(221, 221, 221, 0);
}
.qc-sliderX-next{
float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrow.light.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 70px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;
}
.qc-sliderX-next:hover{
	background-position: -35px -35px;
	color: rgba(221, 221, 221, 0);
}

.slider-hero-prev{
float: left;
margin-left: 10px;
z-index: 11;
position: relative;
display: block;
font-size: 40px;
color: #fff;
line-height: 20px;
box-shadow: none !important;
cursor:pointer;
}
.slider-hero-next{
float: right;
margin-right: 10px;
z-index: 11;
position: relative;
display: block;
font-size: 40px;
color: #fff;
line-height: 20px;
box-shadow: none !important;
cursor:pointer;
}

/* arrow Default style */
.arrow_style_1-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow1.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_1-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow1.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
/* arrow 2 style */
.arrow_style_2-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow2.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_2-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow2.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
/* arrow 3 style */
.arrow_style_3-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow3.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_3-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow3.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
/* arrow 4 style */
.arrow_style_4-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow4.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_4-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow4.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
/* arrow 5 style */
.arrow_style_5-prev{float: left;
float: left;
width: 28px;
height: 35px;
margin-left: 10px;
background: url(../images/arrows/arrow5.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 54px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_5-next{float: right;
width: 28px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow5.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 60px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}

/* Arrow 6 */

.arrow_style_6-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow6.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_6-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow6.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}

/* Arrow 7 */

.arrow_style_7-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow7.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_7-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow7.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}

.arrow_style_8-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url("../images/arrows/arrow8.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
.arrow_style_8-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url("../images/arrows/arrow8.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
    position: relative;
    display: block;}
	
.qc-sliderX-bottom-slide{
cursor: pointer;
margin: 0px;
padding: 0px;
margin-left: 10px;
display: inline-block;
box-shadow: none !important;
font-size: 13px;
}

.qc-sliderX-bottom-slide:hover{
	color:#3f4851;
}

.qc-sliderx-bottom-current{
	color:#3f4851;
	
}
/*Control nav style*/

/* hero floating arrow style */
.hero_float{width: 100%;height: 100%;position: absolute;top: 0;}
.hero_float_left{width: 50%;height: 100%;margin: 0px;cursor:url(arrow-left.png),pointer !important;z-index:1 !important;}
.hero_float_right{width: 50%;height: 100%;margin: 0px;cursor:url(arrow-right.png),pointer !important;z-index:1 !important;}



/*Responsive Stylev */
@media only screen and (min-width: 768px) and (max-width: 991px){
.qcld_hero_content_area h2{font-size:40px !important;line-height:45px !important;}
.qcld_hero_content_area > .slider-x-item-title > p{font-size: 18px !important;line-height:normal;}	
}

/*
@media only screen and (min-width: 992px) and (max-width: 1360px){
.qcld_hero_content_area h2{font-size:45px !important;line-height:50px !important;}
.qcld_hero_content_area > .slider-x-item-title > p{font-size: 18px !important;line-height:normal;}	
}

@media only screen and (min-width: 1361px) and (max-width: 1580px){
.qcld_hero_content_area h2{font-size:45px !important;line-height:50px !important;}
.qcld_hero_content_area > .slider-x-item-title > p{font-size: 18px !important;line-height:normal;}	
}
*/
@media only screen and (min-width: 320px) and (max-width: 767px){
.slider_hero_btn_cls_one{padding: 2px;
min-width: 85px;
}

.hero_btn_cls_one2{padding: 2px;
min-width: 85px;
}


}
/* Style for antigravity flow */
.pentahedron {
  position: absolute;
  width: 100%;
  height: 100%;
  fill: #3E82F7;
}

.point {
  fill: #8491A3;
}

.rhombus {
  fill: #2DA94F;
  stroke: #2DA94F;
}

.x {
  fill: #FDBD00;
}

.circle {
  fill: #ED412D;
}


/* style for Day Night Effect */
#threeD {
    position: absolute;
    z-index: 2;
}
/*style for wave effect */
#slider_hero_mySVG{
  position:absolute;
  bottom: 0;
}

/*style for shape Animation */
.hero-random-shape:after {
  font-family: FontAwesome;
  content: "\f005";
}

@keyframes shape-1 {
  0% {
    transform: translate3d(0, 0, 0) rotate(301deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(661deg);
  }
}
.hero-shape-container--1 {
  animation: shape-1 44s linear infinite;
}
.hero-shape-container--1 .hero-random-shape:after {
  margin: 7rem;
  color: #DB7093;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(353deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(713deg);
  }
}
.hero-shape-container--2 {
  animation: shape-2 50s linear infinite;
}
.hero-shape-container--2 .hero-random-shape:after {
  margin: 9rem;
  color: #C2B7FE;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(6deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(366deg);
  }
}
.hero-shape-container--3 {
  animation: shape-3 50s linear infinite;
}
.hero-shape-container--3 .hero-random-shape:after {
  margin: 3rem;
  color: #DB7093;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-4 {
  0% {
    transform: translate3d(0, 0, 0) rotate(198deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(558deg);
  }
}
.hero-shape-container--4 {
  animation: shape-4 45s linear infinite;
}
.hero-shape-container--4 .hero-random-shape:after {
  margin: 7rem;
  color: #95A9FF;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-5 {
  0% {
    transform: translate3d(0, 0, 0) rotate(351deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(711deg);
  }
}
.hero-shape-container--5 {
  animation: shape-5 41s linear infinite;
}
.hero-shape-container--5 .hero-random-shape:after {
  margin: 7rem;
  color: #95A9FF;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-6 {
  0% {
    transform: translate3d(0, 0, 0) rotate(186deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(546deg);
  }
}
.hero-shape-container--6 {
  animation: shape-6 41s linear infinite;
}
.hero-shape-container--6 .hero-random-shape:after {
  margin: 7rem;
  color: #FFF8DC;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-7 {
  0% {
    transform: translate3d(0, 0, 0) rotate(27deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(387deg);
  }
}
.hero-shape-container--7 {
  animation: shape-7 41s linear infinite;
}
.hero-shape-container--7 .hero-random-shape:after {
  margin: 2rem;
  color: #FFD700;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-8 {
  0% {
    transform: translate3d(0, 0, 0) rotate(193deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(553deg);
  }
}
.hero-shape-container--8 {
  animation: shape-8 48s linear infinite;
}
.hero-shape-container--8 .hero-random-shape:after {
  margin: 7rem;
  color: #FFD700;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-9 {
  0% {
    transform: translate3d(0, 0, 0) rotate(273deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(633deg);
  }
}
.hero-shape-container--9 {
  animation: shape-9 50s linear infinite;
}
.hero-shape-container--9 .hero-random-shape:after {
  margin: 1rem;
  color: #DB7093;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-10 {
  0% {
    transform: translate3d(0, 0, 0) rotate(89deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(449deg);
  }
}
.hero-shape-container--10 {
  animation: shape-10 44s linear infinite;
}
.hero-shape-container--10 .hero-random-shape:after {
  margin: 4rem;
  color: #95A9FF;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-11 {
  0% {
    transform: translate3d(0, 0, 0) rotate(173deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(533deg);
  }
}
.hero-shape-container--11 {
  animation: shape-11 46s linear infinite;
}
.hero-shape-container--11 .hero-random-shape:after {
  margin: 5rem;
  color: #FFD700;
  font-size: 1rem;
  content: "";
}

@keyframes shape-12 {
  0% {
    transform: translate3d(0, 0, 0) rotate(184deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(544deg);
  }
}
.hero-shape-container--12 {
  animation: shape-12 47s linear infinite;
}
.hero-shape-container--12 .hero-random-shape:after {
  margin: 4rem;
  color: #C2B7FE;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-13 {
  0% {
    transform: translate3d(0, 0, 0) rotate(246deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(606deg);
  }
}
.hero-shape-container--13 {
  animation: shape-13 44s linear infinite;
}
.hero-shape-container--13 .hero-random-shape:after {
  margin: 3rem;
  color: #DB7093;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-14 {
  0% {
    transform: translate3d(0, 0, 0) rotate(20deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(380deg);
  }
}
.hero-shape-container--14 {
  animation: shape-14 48s linear infinite;
}
.hero-shape-container--14 .hero-random-shape:after {
  margin: 3rem;
  color: #FFD700;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-15 {
  0% {
    transform: translate3d(0, 0, 0) rotate(163deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(523deg);
  }
}
.hero-shape-container--15 {
  animation: shape-15 44s linear infinite;
}
.hero-shape-container--15 .hero-random-shape:after {
  margin: 5rem;
  color: #DB7093;
  font-size: 1rem;
  content: "";
}

@keyframes shape-16 {
  0% {
    transform: translate3d(0, 0, 0) rotate(166deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(526deg);
  }
}
.hero-shape-container--16 {
  animation: shape-16 50s linear infinite;
}
.hero-shape-container--16 .hero-random-shape:after {
  margin: 3rem;
  color: #95A9FF;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-17 {
  0% {
    transform: translate3d(0, 0, 0) rotate(43deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(403deg);
  }
}
.hero-shape-container--17 {
  animation: shape-17 43s linear infinite;
}
.hero-shape-container--17 .hero-random-shape:after {
  margin: 1rem;
  color: #DB7093;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-18 {
  0% {
    transform: translate3d(0, 0, 0) rotate(49deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(409deg);
  }
}
.hero-shape-container--18 {
  animation: shape-18 44s linear infinite;
}
.hero-shape-container--18 .hero-random-shape:after {
  margin: 10rem;
  color: #DB7093;
  font-size: 2rem;
  content: "";
}

@keyframes shape-19 {
  0% {
    transform: translate3d(0, 0, 0) rotate(281deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(641deg);
  }
}
.hero-shape-container--19 {
  animation: shape-19 41s linear infinite;
}
.hero-shape-container--19 .hero-random-shape:after {
  margin: 8rem;
  color: #95A9FF;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-20 {
  0% {
    transform: translate3d(0, 0, 0) rotate(147deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(507deg);
  }
}
.hero-shape-container--20 {
  animation: shape-20 41s linear infinite;
}
.hero-shape-container--20 .hero-random-shape:after {
  margin: 6rem;
  color: #C2B7FE;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-21 {
  0% {
    transform: translate3d(0, 0, 0) rotate(326deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(686deg);
  }
}
.hero-shape-container--21 {
  animation: shape-21 44s linear infinite;
}
.hero-shape-container--21 .hero-random-shape:after {
  margin: 2rem;
  color: #FFF8DC;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-22 {
  0% {
    transform: translate3d(0, 0, 0) rotate(85deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(445deg);
  }
}
.hero-shape-container--22 {
  animation: shape-22 47s linear infinite;
}
.hero-shape-container--22 .hero-random-shape:after {
  margin: 10rem;
  color: #C2B7FE;
  font-size: 2rem;
  content: "";
}

@keyframes shape-23 {
  0% {
    transform: translate3d(0, 0, 0) rotate(350deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(710deg);
  }
}
.hero-shape-container--23 {
  animation: shape-23 49s linear infinite;
}
.hero-shape-container--23 .hero-random-shape:after {
  margin: 1rem;
  color: #DB7093;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-24 {
  0% {
    transform: translate3d(0, 0, 0) rotate(338deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(698deg);
  }
}
.hero-shape-container--24 {
  animation: shape-24 49s linear infinite;
}
.hero-shape-container--24 .hero-random-shape:after {
  margin: 6rem;
  color: #FFD700;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-25 {
  0% {
    transform: translate3d(0, 0, 0) rotate(82deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(442deg);
  }
}
.hero-shape-container--25 {
  animation: shape-25 41s linear infinite;
}
.hero-shape-container--25 .hero-random-shape:after {
  margin: 6rem;
  color: #95A9FF;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-26 {
  0% {
    transform: translate3d(0, 0, 0) rotate(201deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(561deg);
  }
}
.hero-shape-container--26 {
  animation: shape-26 42s linear infinite;
}
.hero-shape-container--26 .hero-random-shape:after {
  margin: 4rem;
  color: #FFF8DC;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-27 {
  0% {
    transform: translate3d(0, 0, 0) rotate(239deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(599deg);
  }
}
.hero-shape-container--27 {
  animation: shape-27 50s linear infinite;
}
.hero-shape-container--27 .hero-random-shape:after {
  margin: 9rem;
  color: #95A9FF;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-28 {
  0% {
    transform: translate3d(0, 0, 0) rotate(313deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(673deg);
  }
}
.hero-shape-container--28 {
  animation: shape-28 42s linear infinite;
}
.hero-shape-container--28 .hero-random-shape:after {
  margin: 7rem;
  color: #FFF8DC;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-29 {
  0% {
    transform: translate3d(0, 0, 0) rotate(325deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(685deg);
  }
}
.hero-shape-container--29 {
  animation: shape-29 45s linear infinite;
}
.hero-shape-container--29 .hero-random-shape:after {
  margin: 1rem;
  color: #FFD700;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-30 {
  0% {
    transform: translate3d(0, 0, 0) rotate(153deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(513deg);
  }
}
.hero-shape-container--30 {
  animation: shape-30 44s linear infinite;
}
.hero-shape-container--30 .hero-random-shape:after {
  margin: 1rem;
  color: #FFD700;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-31 {
  0% {
    transform: translate3d(0, 0, 0) rotate(343deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(703deg);
  }
}
.hero-shape-container--31 {
  animation: shape-31 43s linear infinite;
}
.hero-shape-container--31 .hero-random-shape:after {
  margin: 8rem;
  color: #C2B7FE;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-32 {
  0% {
    transform: translate3d(0, 0, 0) rotate(283deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(643deg);
  }
}
.hero-shape-container--32 {
  animation: shape-32 47s linear infinite;
}
.hero-shape-container--32 .hero-random-shape:after {
  margin: 3rem;
  color: #DB7093;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-33 {
  0% {
    transform: translate3d(0, 0, 0) rotate(71deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(431deg);
  }
}
.hero-shape-container--33 {
  animation: shape-33 41s linear infinite;
}
.hero-shape-container--33 .hero-random-shape:after {
  margin: 6rem;
  color: #C2B7FE;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-34 {
  0% {
    transform: translate3d(0, 0, 0) rotate(331deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(691deg);
  }
}
.hero-shape-container--34 {
  animation: shape-34 50s linear infinite;
}
.hero-shape-container--34 .hero-random-shape:after {
  margin: 10rem;
  color: #95A9FF;
  font-size: 2rem;
  content: "";
}

@keyframes shape-35 {
  0% {
    transform: translate3d(0, 0, 0) rotate(309deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(669deg);
  }
}
.hero-shape-container--35 {
  animation: shape-35 47s linear infinite;
}
.hero-shape-container--35 .hero-random-shape:after {
  margin: 9rem;
  color: #FFF8DC;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-36 {
  0% {
    transform: translate3d(0, 0, 0) rotate(103deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(463deg);
  }
}
.hero-shape-container--36 {
  animation: shape-36 50s linear infinite;
}
.hero-shape-container--36 .hero-random-shape:after {
  margin: 7rem;
  color: #DB7093;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-37 {
  0% {
    transform: translate3d(0, 0, 0) rotate(186deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(546deg);
  }
}
.hero-shape-container--37 {
  animation: shape-37 45s linear infinite;
}
.hero-shape-container--37 .hero-random-shape:after {
  margin: 7rem;
  color: #C2B7FE;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-38 {
  0% {
    transform: translate3d(0, 0, 0) rotate(57deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(417deg);
  }
}
.hero-shape-container--38 {
  animation: shape-38 47s linear infinite;
}
.hero-shape-container--38 .hero-random-shape:after {
  margin: 7rem;
  color: #C2B7FE;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-39 {
  0% {
    transform: translate3d(0, 0, 0) rotate(274deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(634deg);
  }
}
.hero-shape-container--39 {
  animation: shape-39 49s linear infinite;
}
.hero-shape-container--39 .hero-random-shape:after {
  margin: 4rem;
  color: #DB7093;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-40 {
  0% {
    transform: translate3d(0, 0, 0) rotate(197deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(557deg);
  }
}
.hero-shape-container--40 {
  animation: shape-40 42s linear infinite;
}
.hero-shape-container--40 .hero-random-shape:after {
  margin: 8rem;
  color: #95A9FF;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-41 {
  0% {
    transform: translate3d(0, 0, 0) rotate(182deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(542deg);
  }
}
.hero-shape-container--41 {
  animation: shape-41 48s linear infinite;
}
.hero-shape-container--41 .hero-random-shape:after {
  margin: 9rem;
  color: #FFD700;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-42 {
  0% {
    transform: translate3d(0, 0, 0) rotate(248deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(608deg);
  }
}
.hero-shape-container--42 {
  animation: shape-42 42s linear infinite;
}
.hero-shape-container--42 .hero-random-shape:after {
  margin: 3rem;
  color: #FFD700;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-43 {
  0% {
    transform: translate3d(0, 0, 0) rotate(59deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(419deg);
  }
}
.hero-shape-container--43 {
  animation: shape-43 43s linear infinite;
}
.hero-shape-container--43 .hero-random-shape:after {
  margin: 6rem;
  color: #DB7093;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-44 {
  0% {
    transform: translate3d(0, 0, 0) rotate(56deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(416deg);
  }
}
.hero-shape-container--44 {
  animation: shape-44 44s linear infinite;
}
.hero-shape-container--44 .hero-random-shape:after {
  margin: 5rem;
  color: #FFF8DC;
  font-size: 1rem;
  content: "";
}

@keyframes shape-45 {
  0% {
    transform: translate3d(0, 0, 0) rotate(136deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(496deg);
  }
}
.hero-shape-container--45 {
  animation: shape-45 41s linear infinite;
}
.hero-shape-container--45 .hero-random-shape:after {
  margin: 7rem;
  color: #FFF8DC;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-46 {
  0% {
    transform: translate3d(0, 0, 0) rotate(212deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(572deg);
  }
}
.hero-shape-container--46 {
  animation: shape-46 49s linear infinite;
}
.hero-shape-container--46 .hero-random-shape:after {
  margin: 1rem;
  color: #FFF8DC;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-47 {
  0% {
    transform: translate3d(0, 0, 0) rotate(288deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(648deg);
  }
}
.hero-shape-container--47 {
  animation: shape-47 45s linear infinite;
}
.hero-shape-container--47 .hero-random-shape:after {
  margin: 7rem;
  color: #FFD700;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-48 {
  0% {
    transform: translate3d(0, 0, 0) rotate(52deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(412deg);
  }
}
.hero-shape-container--48 {
  animation: shape-48 48s linear infinite;
}
.hero-shape-container--48 .hero-random-shape:after {
  margin: 4rem;
  color: #FFF8DC;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-49 {
  0% {
    transform: translate3d(0, 0, 0) rotate(109deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(469deg);
  }
}
.hero-shape-container--49 {
  animation: shape-49 44s linear infinite;
}
.hero-shape-container--49 .hero-random-shape:after {
  margin: 7rem;
  color: #C2B7FE;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-50 {
  0% {
    transform: translate3d(0, 0, 0) rotate(242deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(602deg);
  }
}
.hero-shape-container--50 {
  animation: shape-50 48s linear infinite;
}
.hero-shape-container--50 .hero-random-shape:after {
  margin: 3rem;
  color: #DB7093;
  font-size: 0.6rem;
  content: "";
}

.stop-shape {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* style for glitch Effect title */
.hero_glitch_title {
  /*position: relative;*/
  overflow: hidden;
  
  color: transparent;
  text-shadow: 0px 0px 3px #eee, 5px 5px 2px teal, -5px -2px 2px maroon;
  font-weight: 400;
  -moz-transform: skewX(0deg);
  -ms-transform: skewX(0deg);
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
  -moz-animation: shift 4s ease-in-out infinite alternate;
  -webkit-animation: shift 4s ease-in-out infinite alternate;
  animation: shift 4s ease-in-out infinite alternate;
}

@-moz-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -moz-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  41% {
    -moz-transform: skewX(10deg);
    transform: skewX(10deg);
  }
  42% {
    -moz-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
  59% {
    -moz-transform: skewX(40deg) skewY(10deg);
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    -moz-transform: skewX(-40deg) skewY(-10deg);
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    -moz-transform: skewX(10deg) skewY(-5deg);
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    -moz-transform: skewX(-50deg) skewY(-20deg);
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    -moz-transform: skewX(10deg) skewY(-10deg);
    transform: skewX(10deg) skewY(-10deg);
  }
}
@-webkit-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  41% {
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
  }
  42% {
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
  59% {
    -webkit-transform: skewX(40deg) skewY(10deg);
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    -webkit-transform: skewX(-40deg) skewY(-10deg);
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    -webkit-transform: skewX(10deg) skewY(-5deg);
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    -webkit-transform: skewX(-50deg) skewY(-20deg);
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    -webkit-transform: skewX(10deg) skewY(-10deg);
    transform: skewX(10deg) skewY(-10deg);
  }
}
@keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  41% {
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
  }
  42% {
    -moz-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
  }
  59% {
    -moz-transform: skewX(40deg) skewY(10deg);
    -ms-transform: skewX(40deg) skewY(10deg);
    -webkit-transform: skewX(40deg) skewY(10deg);
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    -moz-transform: skewX(-40deg) skewY(-10deg);
    -ms-transform: skewX(-40deg) skewY(-10deg);
    -webkit-transform: skewX(-40deg) skewY(-10deg);
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    -moz-transform: skewX(10deg) skewY(-5deg);
    -ms-transform: skewX(10deg) skewY(-5deg);
    -webkit-transform: skewX(10deg) skewY(-5deg);
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    -moz-transform: skewX(-50deg) skewY(-20deg);
    -ms-transform: skewX(-50deg) skewY(-20deg);
    -webkit-transform: skewX(-50deg) skewY(-20deg);
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    -moz-transform: skewX(10deg) skewY(-10deg);
    -ms-transform: skewX(10deg) skewY(-10deg);
    -webkit-transform: skewX(10deg) skewY(-10deg);
    transform: skewX(10deg) skewY(-10deg);
  }
}
/* style for Peeled Text Transforms effect */
.hero_peeled_effect {
  color: #fff;
  font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin: 9px 0px;
}
.hero_peeled_effect span {
  
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 500;
          perspective: 500;
  -webkit-font-smoothing: antialiased;
}
.hero_peeled_effect span::before,
.hero_peeled_effect span::after {
  display: none;
  position: absolute;
  top: 0;
  left: -1px;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
  content: attr(data-text);
}
.hero_peeled_effect span::before {
  z-index: 1;
  color: rgba(0,0,0,0.2);
  -webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
          transform: scale(1.1, 1) skew(0deg, 20deg);
}
.hero_peeled_effect span::after {
  z-index: 2;
  
  -webkit-transform: rotateY(-40deg);
          transform: rotateY(-40deg);
}
.hero_peeled_effect span:hover::before {
  -webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
          transform: scale(1.1, 1) skew(0deg, 5deg);
}
.hero_peeled_effect span:hover::after {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg);
}
.hero_peeled_effect span + span {
  margin-left: 0.3em;
}

  .hero_peeled_effect {
    font-size: 30px;
  }
  .hero_peeled_effect span::before,
  .hero_peeled_effect span::after {
    display: block;
  }
/* Hero Pretty Shadow */
.hero_pretty_shadow {

  width: 100%;
  margin: 0px auto;
  color: #2196f3;
  font-size: 80px;
  letter-spacing: 5px;
  
  text-shadow: -1px -1px 0px #fff, 3px 3px 0px #fff, 6px 6px 0px #fff;
  font-weight:bold;
}

/* colorfull text animation */
.anim-text-flow span,
.anim-text-flow-hover:hover span {
  -webkit-animation-name: anim-text-flow-keys;
          animation-name: anim-text-flow-keys;
  -webkit-animation-duration: 50s;
          animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes anim-text-flow-keys {
  0% {
    color: #d65cba;
  }
  5% {
    color: #5cd6c6;
  }
  10% {
    color: #afd65c;
  }
  15% {
    color: #d6935c;
  }
  20% {
    color: #d65cad;
  }
  25% {
    color: #5cccd6;
  }
  30% {
    color: #6c5cd6;
  }
  35% {
    color: #d65cbe;
  }
  40% {
    color: #ca5cd6;
  }
  45% {
    color: #d65cd6;
  }
  50% {
    color: #d65c68;
  }
  55% {
    color: #5c9bd6;
  }
  60% {
    color: #ccd65c;
  }
  65% {
    color: #745cd6;
  }
  70% {
    color: #5cd66a;
  }
  75% {
    color: #d65c95;
  }
  80% {
    color: #5cd66c;
  }
  85% {
    color: #5c64d6;
  }
  90% {
    color: #5ed65c;
  }
  95% {
    color: #d6705c;
  }
  100% {
    color: #5c5cd6;
  }
}
@keyframes anim-text-flow-keys {
  0% {
    color: #d65cba;
  }
  5% {
    color: #5cd6c6;
  }
  10% {
    color: #afd65c;
  }
  15% {
    color: #d6935c;
  }
  20% {
    color: #d65cad;
  }
  25% {
    color: #5cccd6;
  }
  30% {
    color: #6c5cd6;
  }
  35% {
    color: #d65cbe;
  }
  40% {
    color: #ca5cd6;
  }
  45% {
    color: #d65cd6;
  }
  50% {
    color: #d65c68;
  }
  55% {
    color: #5c9bd6;
  }
  60% {
    color: #ccd65c;
  }
  65% {
    color: #745cd6;
  }
  70% {
    color: #5cd66a;
  }
  75% {
    color: #d65c95;
  }
  80% {
    color: #5cd66c;
  }
  85% {
    color: #5c64d6;
  }
  90% {
    color: #5ed65c;
  }
  95% {
    color: #d6705c;
  }
  100% {
    color: #5c5cd6;
  }
}
.anim-text-flow span:nth-of-type(1),
.anim-text-flow-hover:hover span:nth-of-type(1) {
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
}
.anim-text-flow span:nth-of-type(2),
.anim-text-flow-hover:hover span:nth-of-type(2) {
  -webkit-animation-delay: -19.6s;
          animation-delay: -19.6s;
}
.anim-text-flow span:nth-of-type(3),
.anim-text-flow-hover:hover span:nth-of-type(3) {
  -webkit-animation-delay: -19.4s;
          animation-delay: -19.4s;
}
.anim-text-flow span:nth-of-type(4),
.anim-text-flow-hover:hover span:nth-of-type(4) {
  -webkit-animation-delay: -19.2s;
          animation-delay: -19.2s;
}
.anim-text-flow span:nth-of-type(5),
.anim-text-flow-hover:hover span:nth-of-type(5) {
  -webkit-animation-delay: -19s;
          animation-delay: -19s;
}
.anim-text-flow span:nth-of-type(6),
.anim-text-flow-hover:hover span:nth-of-type(6) {
  -webkit-animation-delay: -18.8s;
          animation-delay: -18.8s;
}
.anim-text-flow span:nth-of-type(7),
.anim-text-flow-hover:hover span:nth-of-type(7) {
  -webkit-animation-delay: -18.6s;
          animation-delay: -18.6s;
}
.anim-text-flow span:nth-of-type(8),
.anim-text-flow-hover:hover span:nth-of-type(8) {
  -webkit-animation-delay: -18.4s;
          animation-delay: -18.4s;
}
.anim-text-flow span:nth-of-type(9),
.anim-text-flow-hover:hover span:nth-of-type(9) {
  -webkit-animation-delay: -18.2s;
          animation-delay: -18.2s;
}
.anim-text-flow span:nth-of-type(10),
.anim-text-flow-hover:hover span:nth-of-type(10) {
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}
.anim-text-flow span:nth-of-type(11),
.anim-text-flow-hover:hover span:nth-of-type(11) {
  -webkit-animation-delay: -17.8s;
          animation-delay: -17.8s;
}
.anim-text-flow span:nth-of-type(12),
.anim-text-flow-hover:hover span:nth-of-type(12) {
  -webkit-animation-delay: -17.6s;
          animation-delay: -17.6s;
}
.anim-text-flow span:nth-of-type(13),
.anim-text-flow-hover:hover span:nth-of-type(13) {
  -webkit-animation-delay: -17.4s;
          animation-delay: -17.4s;
}
.anim-text-flow span:nth-of-type(14),
.anim-text-flow-hover:hover span:nth-of-type(14) {
  -webkit-animation-delay: -17.2s;
          animation-delay: -17.2s;
}
.anim-text-flow span:nth-of-type(15),
.anim-text-flow-hover:hover span:nth-of-type(15) {
  -webkit-animation-delay: -17s;
          animation-delay: -17s;
}
.anim-text-flow span:nth-of-type(16),
.anim-text-flow-hover:hover span:nth-of-type(16) {
  -webkit-animation-delay: -16.8s;
          animation-delay: -16.8s;
}
.anim-text-flow span:nth-of-type(17),
.anim-text-flow-hover:hover span:nth-of-type(17) {
  -webkit-animation-delay: -16.6s;
          animation-delay: -16.6s;
}
.anim-text-flow span:nth-of-type(18),
.anim-text-flow-hover:hover span:nth-of-type(18) {
  -webkit-animation-delay: -16.4s;
          animation-delay: -16.4s;
}
.anim-text-flow span:nth-of-type(19),
.anim-text-flow-hover:hover span:nth-of-type(19) {
  -webkit-animation-delay: -16.2s;
          animation-delay: -16.2s;
}
.anim-text-flow span:nth-of-type(20),
.anim-text-flow-hover:hover span:nth-of-type(20) {
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
}
.anim-text-flow span:nth-of-type(21),
.anim-text-flow-hover:hover span:nth-of-type(21) {
  -webkit-animation-delay: -15.8s;
          animation-delay: -15.8s;
}
.anim-text-flow span:nth-of-type(22),
.anim-text-flow-hover:hover span:nth-of-type(22) {
  -webkit-animation-delay: -15.6s;
          animation-delay: -15.6s;
}
.anim-text-flow span:nth-of-type(23),
.anim-text-flow-hover:hover span:nth-of-type(23) {
  -webkit-animation-delay: -15.4s;
          animation-delay: -15.4s;
}
.anim-text-flow span:nth-of-type(24),
.anim-text-flow-hover:hover span:nth-of-type(24) {
  -webkit-animation-delay: -15.2s;
          animation-delay: -15.2s;
}
.anim-text-flow span:nth-of-type(25),
.anim-text-flow-hover:hover span:nth-of-type(25) {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}
.anim-text-flow span:nth-of-type(26),
.anim-text-flow-hover:hover span:nth-of-type(26) {
  -webkit-animation-delay: -14.8s;
          animation-delay: -14.8s;
}
.anim-text-flow span:nth-of-type(27),
.anim-text-flow-hover:hover span:nth-of-type(27) {
  -webkit-animation-delay: -14.6s;
          animation-delay: -14.6s;
}
.anim-text-flow span:nth-of-type(28),
.anim-text-flow-hover:hover span:nth-of-type(28) {
  -webkit-animation-delay: -14.4s;
          animation-delay: -14.4s;
}
.anim-text-flow span:nth-of-type(29),
.anim-text-flow-hover:hover span:nth-of-type(29) {
  -webkit-animation-delay: -14.2s;
          animation-delay: -14.2s;
}
.anim-text-flow span:nth-of-type(30),
.anim-text-flow-hover:hover span:nth-of-type(30) {
  -webkit-animation-delay: -14s;
          animation-delay: -14s;
}
.anim-text-flow span:nth-of-type(31),
.anim-text-flow-hover:hover span:nth-of-type(31) {
  -webkit-animation-delay: -13.8s;
          animation-delay: -13.8s;
}
.anim-text-flow span:nth-of-type(32),
.anim-text-flow-hover:hover span:nth-of-type(32) {
  -webkit-animation-delay: -13.6s;
          animation-delay: -13.6s;
}
.anim-text-flow span:nth-of-type(33),
.anim-text-flow-hover:hover span:nth-of-type(33) {
  -webkit-animation-delay: -13.4s;
          animation-delay: -13.4s;
}
.anim-text-flow span:nth-of-type(34),
.anim-text-flow-hover:hover span:nth-of-type(34) {
  -webkit-animation-delay: -13.2s;
          animation-delay: -13.2s;
}
.anim-text-flow span:nth-of-type(35),
.anim-text-flow-hover:hover span:nth-of-type(35) {
  -webkit-animation-delay: -13s;
          animation-delay: -13s;
}
.anim-text-flow span:nth-of-type(36),
.anim-text-flow-hover:hover span:nth-of-type(36) {
  -webkit-animation-delay: -12.8s;
          animation-delay: -12.8s;
}
.anim-text-flow span:nth-of-type(37),
.anim-text-flow-hover:hover span:nth-of-type(37) {
  -webkit-animation-delay: -12.6s;
          animation-delay: -12.6s;
}
.anim-text-flow span:nth-of-type(38),
.anim-text-flow-hover:hover span:nth-of-type(38) {
  -webkit-animation-delay: -12.4s;
          animation-delay: -12.4s;
}
.anim-text-flow span:nth-of-type(39),
.anim-text-flow-hover:hover span:nth-of-type(39) {
  -webkit-animation-delay: -12.2s;
          animation-delay: -12.2s;
}
.anim-text-flow span:nth-of-type(40),
.anim-text-flow-hover:hover span:nth-of-type(40) {
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
}
.anim-text-flow span:nth-of-type(41),
.anim-text-flow-hover:hover span:nth-of-type(41) {
  -webkit-animation-delay: -11.8s;
          animation-delay: -11.8s;
}
.anim-text-flow span:nth-of-type(42),
.anim-text-flow-hover:hover span:nth-of-type(42) {
  -webkit-animation-delay: -11.6s;
          animation-delay: -11.6s;
}
.anim-text-flow span:nth-of-type(43),
.anim-text-flow-hover:hover span:nth-of-type(43) {
  -webkit-animation-delay: -11.4s;
          animation-delay: -11.4s;
}
.anim-text-flow span:nth-of-type(44),
.anim-text-flow-hover:hover span:nth-of-type(44) {
  -webkit-animation-delay: -11.2s;
          animation-delay: -11.2s;
}
.anim-text-flow span:nth-of-type(45),
.anim-text-flow-hover:hover span:nth-of-type(45) {
  -webkit-animation-delay: -11s;
          animation-delay: -11s;
}
.anim-text-flow span:nth-of-type(46),
.anim-text-flow-hover:hover span:nth-of-type(46) {
  -webkit-animation-delay: -10.8s;
          animation-delay: -10.8s;
}
.anim-text-flow span:nth-of-type(47),
.anim-text-flow-hover:hover span:nth-of-type(47) {
  -webkit-animation-delay: -10.6s;
          animation-delay: -10.6s;
}
.anim-text-flow span:nth-of-type(48),
.anim-text-flow-hover:hover span:nth-of-type(48) {
  -webkit-animation-delay: -10.4s;
          animation-delay: -10.4s;
}
.anim-text-flow span:nth-of-type(49),
.anim-text-flow-hover:hover span:nth-of-type(49) {
  -webkit-animation-delay: -10.2s;
          animation-delay: -10.2s;
}
.anim-text-flow span:nth-of-type(50),
.anim-text-flow-hover:hover span:nth-of-type(50) {
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}
.anim-text-flow span:nth-of-type(51),
.anim-text-flow-hover:hover span:nth-of-type(51) {
  -webkit-animation-delay: -9.8s;
          animation-delay: -9.8s;
}
.anim-text-flow span:nth-of-type(52),
.anim-text-flow-hover:hover span:nth-of-type(52) {
  -webkit-animation-delay: -9.6s;
          animation-delay: -9.6s;
}
.anim-text-flow span:nth-of-type(53),
.anim-text-flow-hover:hover span:nth-of-type(53) {
  -webkit-animation-delay: -9.4s;
          animation-delay: -9.4s;
}
.anim-text-flow span:nth-of-type(54),
.anim-text-flow-hover:hover span:nth-of-type(54) {
  -webkit-animation-delay: -9.2s;
          animation-delay: -9.2s;
}
.anim-text-flow span:nth-of-type(55),
.anim-text-flow-hover:hover span:nth-of-type(55) {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}
.anim-text-flow span:nth-of-type(56),
.anim-text-flow-hover:hover span:nth-of-type(56) {
  -webkit-animation-delay: -8.8s;
          animation-delay: -8.8s;
}
.anim-text-flow span:nth-of-type(57),
.anim-text-flow-hover:hover span:nth-of-type(57) {
  -webkit-animation-delay: -8.6s;
          animation-delay: -8.6s;
}
.anim-text-flow span:nth-of-type(58),
.anim-text-flow-hover:hover span:nth-of-type(58) {
  -webkit-animation-delay: -8.4s;
          animation-delay: -8.4s;
}
.anim-text-flow span:nth-of-type(59),
.anim-text-flow-hover:hover span:nth-of-type(59) {
  -webkit-animation-delay: -8.2s;
          animation-delay: -8.2s;
}
.anim-text-flow span:nth-of-type(60),
.anim-text-flow-hover:hover span:nth-of-type(60) {
  -webkit-animation-delay: -8s;
          animation-delay: -8s;
}
.anim-text-flow span:nth-of-type(61),
.anim-text-flow-hover:hover span:nth-of-type(61) {
  -webkit-animation-delay: -7.8s;
          animation-delay: -7.8s;
}
.anim-text-flow span:nth-of-type(62),
.anim-text-flow-hover:hover span:nth-of-type(62) {
  -webkit-animation-delay: -7.6s;
          animation-delay: -7.6s;
}
.anim-text-flow span:nth-of-type(63),
.anim-text-flow-hover:hover span:nth-of-type(63) {
  -webkit-animation-delay: -7.4s;
          animation-delay: -7.4s;
}
.anim-text-flow span:nth-of-type(64),
.anim-text-flow-hover:hover span:nth-of-type(64) {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.anim-text-flow span:nth-of-type(65),
.anim-text-flow-hover:hover span:nth-of-type(65) {
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
.anim-text-flow span:nth-of-type(66),
.anim-text-flow-hover:hover span:nth-of-type(66) {
  -webkit-animation-delay: -6.8s;
          animation-delay: -6.8s;
}
.anim-text-flow span:nth-of-type(67),
.anim-text-flow-hover:hover span:nth-of-type(67) {
  -webkit-animation-delay: -6.6s;
          animation-delay: -6.6s;
}
.anim-text-flow span:nth-of-type(68),
.anim-text-flow-hover:hover span:nth-of-type(68) {
  -webkit-animation-delay: -6.4s;
          animation-delay: -6.4s;
}
.anim-text-flow span:nth-of-type(69),
.anim-text-flow-hover:hover span:nth-of-type(69) {
  -webkit-animation-delay: -6.2s;
          animation-delay: -6.2s;
}
.anim-text-flow span:nth-of-type(70),
.anim-text-flow-hover:hover span:nth-of-type(70) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.anim-text-flow span:nth-of-type(71),
.anim-text-flow-hover:hover span:nth-of-type(71) {
  -webkit-animation-delay: -5.8s;
          animation-delay: -5.8s;
}
.anim-text-flow span:nth-of-type(72),
.anim-text-flow-hover:hover span:nth-of-type(72) {
  -webkit-animation-delay: -5.6s;
          animation-delay: -5.6s;
}
.anim-text-flow span:nth-of-type(73),
.anim-text-flow-hover:hover span:nth-of-type(73) {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.anim-text-flow span:nth-of-type(74),
.anim-text-flow-hover:hover span:nth-of-type(74) {
  -webkit-animation-delay: -5.2s;
          animation-delay: -5.2s;
}
.anim-text-flow span:nth-of-type(75),
.anim-text-flow-hover:hover span:nth-of-type(75) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.anim-text-flow span:nth-of-type(76),
.anim-text-flow-hover:hover span:nth-of-type(76) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.anim-text-flow span:nth-of-type(77),
.anim-text-flow-hover:hover span:nth-of-type(77) {
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
}
.anim-text-flow span:nth-of-type(78),
.anim-text-flow-hover:hover span:nth-of-type(78) {
  -webkit-animation-delay: -4.4s;
          animation-delay: -4.4s;
}
.anim-text-flow span:nth-of-type(79),
.anim-text-flow-hover:hover span:nth-of-type(79) {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
}
.anim-text-flow span:nth-of-type(80),
.anim-text-flow-hover:hover span:nth-of-type(80) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.anim-text-flow span:nth-of-type(81),
.anim-text-flow-hover:hover span:nth-of-type(81) {
  -webkit-animation-delay: -3.8s;
          animation-delay: -3.8s;
}
.anim-text-flow span:nth-of-type(82),
.anim-text-flow-hover:hover span:nth-of-type(82) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.anim-text-flow span:nth-of-type(83),
.anim-text-flow-hover:hover span:nth-of-type(83) {
  -webkit-animation-delay: -3.4s;
          animation-delay: -3.4s;
}
.anim-text-flow span:nth-of-type(84),
.anim-text-flow-hover:hover span:nth-of-type(84) {
  -webkit-animation-delay: -3.2s;
          animation-delay: -3.2s;
}
.anim-text-flow span:nth-of-type(85),
.anim-text-flow-hover:hover span:nth-of-type(85) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.anim-text-flow span:nth-of-type(86),
.anim-text-flow-hover:hover span:nth-of-type(86) {
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
}
.anim-text-flow span:nth-of-type(87),
.anim-text-flow-hover:hover span:nth-of-type(87) {
  -webkit-animation-delay: -2.6s;
          animation-delay: -2.6s;
}
.anim-text-flow span:nth-of-type(88),
.anim-text-flow-hover:hover span:nth-of-type(88) {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.anim-text-flow span:nth-of-type(89),
.anim-text-flow-hover:hover span:nth-of-type(89) {
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
}
.anim-text-flow span:nth-of-type(90),
.anim-text-flow-hover:hover span:nth-of-type(90) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.anim-text-flow span:nth-of-type(91),
.anim-text-flow-hover:hover span:nth-of-type(91) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.anim-text-flow span:nth-of-type(92),
.anim-text-flow-hover:hover span:nth-of-type(92) {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}
.anim-text-flow span:nth-of-type(93),
.anim-text-flow-hover:hover span:nth-of-type(93) {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}
.anim-text-flow span:nth-of-type(94),
.anim-text-flow-hover:hover span:nth-of-type(94) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.anim-text-flow span:nth-of-type(95),
.anim-text-flow-hover:hover span:nth-of-type(95) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.anim-text-flow span:nth-of-type(96),
.anim-text-flow-hover:hover span:nth-of-type(96) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.anim-text-flow span:nth-of-type(97),
.anim-text-flow-hover:hover span:nth-of-type(97) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.anim-text-flow span:nth-of-type(98),
.anim-text-flow-hover:hover span:nth-of-type(98) {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.anim-text-flow span:nth-of-type(99),
.anim-text-flow-hover:hover span:nth-of-type(99) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.anim-text-flow span:nth-of-type(100),
.anim-text-flow-hover:hover span:nth-of-type(100) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.anim-text-flow {
  display: block;
}
/* Hero Glitch Text Effect */
@-moz-keyframes heroglitchtext {
  0% {
    -moz-transform: skew(5deg);
    transform: skew(5deg);
  }
  5% {
    -moz-transform: skew(68deg);
    transform: skew(68deg);
  }
  10% {
    -moz-transform: skew(13deg);
    transform: skew(13deg);
  }
  15% {
    -moz-transform: skew(45deg);
    transform: skew(45deg);
  }
  20% {
    -moz-transform: skew(65deg);
    transform: skew(65deg);
  }
  25% {
    -moz-transform: skew(14deg);
    transform: skew(14deg);
  }
  30% {
    -moz-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  35% {
    -moz-transform: skew(-14deg);
    transform: skew(-14deg);
  }
  40% {
    -moz-transform: skew(29deg);
    transform: skew(29deg);
  }
  45% {
    -moz-transform: skew(33deg);
    transform: skew(33deg);
  }
  50% {
    -moz-transform: skew(-71deg);
    transform: skew(-71deg);
  }
  55% {
    -moz-transform: skew(47deg);
    transform: skew(47deg);
  }
  60% {
    -moz-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  65% {
    -moz-transform: skew(36deg);
    transform: skew(36deg);
  }
  70% {
    -moz-transform: skew(2deg);
    transform: skew(2deg);
  }
  75% {
    -moz-transform: skew(49deg);
    transform: skew(49deg);
  }
  80% {
    -moz-transform: skew(-31deg);
    transform: skew(-31deg);
  }
  85% {
    -moz-transform: skew(20deg);
    transform: skew(20deg);
  }
  90% {
    -moz-transform: skew(-69deg);
    transform: skew(-69deg);
  }
  95% {
    -moz-transform: skew(5deg);
    transform: skew(5deg);
  }
}
@-webkit-keyframes heroglitchtext {
  0% {
    -webkit-transform: skew(-36deg);
    transform: skew(-36deg);
  }
  5% {
    -webkit-transform: skew(-61deg);
    transform: skew(-61deg);
  }
  10% {
    -webkit-transform: skew(90deg);
    transform: skew(90deg);
  }
  15% {
    -webkit-transform: skew(-73deg);
    transform: skew(-73deg);
  }
  20% {
    -webkit-transform: skew(47deg);
    transform: skew(47deg);
  }
  25% {
    -webkit-transform: skew(13deg);
    transform: skew(13deg);
  }
  30% {
    -webkit-transform: skew(-85deg);
    transform: skew(-85deg);
  }
  35% {
    -webkit-transform: skew(74deg);
    transform: skew(74deg);
  }
  40% {
    -webkit-transform: skew(2deg);
    transform: skew(2deg);
  }
  45% {
    -webkit-transform: skew(82deg);
    transform: skew(82deg);
  }
  50% {
    -webkit-transform: skew(-47deg);
    transform: skew(-47deg);
  }
  55% {
    -webkit-transform: skew(21deg);
    transform: skew(21deg);
  }
  60% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg);
  }
  65% {
    -webkit-transform: skew(7deg);
    transform: skew(7deg);
  }
  70% {
    -webkit-transform: skew(-80deg);
    transform: skew(-80deg);
  }
  75% {
    -webkit-transform: skew(-77deg);
    transform: skew(-77deg);
  }
  80% {
    -webkit-transform: skew(-33deg);
    transform: skew(-33deg);
  }
  85% {
    -webkit-transform: skew(-52deg);
    transform: skew(-52deg);
  }
  90% {
    -webkit-transform: skew(-22deg);
    transform: skew(-22deg);
  }
  95% {
    -webkit-transform: skew(-72deg);
    transform: skew(-72deg);
  }
}
@keyframes heroglitchtext {
  0% {
    -moz-transform: skew(-5deg);
    -ms-transform: skew(-5deg);
    -webkit-transform: skew(-5deg);
    transform: skew(-5deg);
  }
  5% {
    -moz-transform: skew(-65deg);
    -ms-transform: skew(-65deg);
    -webkit-transform: skew(-65deg);
    transform: skew(-65deg);
  }
  10% {
    -moz-transform: skew(80deg);
    -ms-transform: skew(80deg);
    -webkit-transform: skew(80deg);
    transform: skew(80deg);
  }
  15% {
    -moz-transform: skew(90deg);
    -ms-transform: skew(90deg);
    -webkit-transform: skew(90deg);
    transform: skew(90deg);
  }
  20% {
    -moz-transform: skew(79deg);
    -ms-transform: skew(79deg);
    -webkit-transform: skew(79deg);
    transform: skew(79deg);
  }
  25% {
    -moz-transform: skew(-26deg);
    -ms-transform: skew(-26deg);
    -webkit-transform: skew(-26deg);
    transform: skew(-26deg);
  }
  30% {
    -moz-transform: skew(5deg);
    -ms-transform: skew(5deg);
    -webkit-transform: skew(5deg);
    transform: skew(5deg);
  }
  35% {
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    transform: skew(-35deg);
  }
  40% {
    -moz-transform: skew(13deg);
    -ms-transform: skew(13deg);
    -webkit-transform: skew(13deg);
    transform: skew(13deg);
  }
  45% {
    -moz-transform: skew(-56deg);
    -ms-transform: skew(-56deg);
    -webkit-transform: skew(-56deg);
    transform: skew(-56deg);
  }
  50% {
    -moz-transform: skew(82deg);
    -ms-transform: skew(82deg);
    -webkit-transform: skew(82deg);
    transform: skew(82deg);
  }
  55% {
    -moz-transform: skew(33deg);
    -ms-transform: skew(33deg);
    -webkit-transform: skew(33deg);
    transform: skew(33deg);
  }
  60% {
    -moz-transform: skew(68deg);
    -ms-transform: skew(68deg);
    -webkit-transform: skew(68deg);
    transform: skew(68deg);
  }
  65% {
    -moz-transform: skew(-44deg);
    -ms-transform: skew(-44deg);
    -webkit-transform: skew(-44deg);
    transform: skew(-44deg);
  }
  70% {
    -moz-transform: skew(-65deg);
    -ms-transform: skew(-65deg);
    -webkit-transform: skew(-65deg);
    transform: skew(-65deg);
  }
  75% {
    -moz-transform: skew(-65deg);
    -ms-transform: skew(-65deg);
    -webkit-transform: skew(-65deg);
    transform: skew(-65deg);
  }
  80% {
    -moz-transform: skew(-59deg);
    -ms-transform: skew(-59deg);
    -webkit-transform: skew(-59deg);
    transform: skew(-59deg);
  }
  85% {
    -moz-transform: skew(73deg);
    -ms-transform: skew(73deg);
    -webkit-transform: skew(73deg);
    transform: skew(73deg);
  }
  90% {
    -moz-transform: skew(38deg);
    -ms-transform: skew(38deg);
    -webkit-transform: skew(38deg);
    transform: skew(38deg);
  }
  95% {
    -moz-transform: skew(-18deg);
    -ms-transform: skew(-18deg);
    -webkit-transform: skew(-18deg);
    transform: skew(-18deg);
  }
}

.hero_glitch_text {
 
  
  text-transform: uppercase;
  font: 15px "Michroma", helvetica, sans-serif;
  letter-spacing: 0.6em;
 
  text-shadow: 2px 0 1px rgba(223, 150, 151, 0.96), -2px 0 1px #73cece;
  -moz-animation: noise 0.3s infinite;
  -webkit-animation: noise 0.3s infinite;
  animation: noise 0.3s infinite;
  font-weight:bold;
}


.hero_glitch_text{
  display: inline-block;
  vertical-align: middle;
  /*position: relative;*/
  z-index: 1;
  -moz-animation: heroglitchtext 4s infinite alternate;
  -webkit-animation: heroglitchtext 4s infinite alternate;
  animation: heroglitchtext 4s infinite alternate;
}

/* Hero Text Animation Effect */

.hero_svg_style{

	height: 50px;
    width: auto;
}

.hero-text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 1px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.hero-text-copy:nth-child(1){
    stroke: #4D163D;
    animation-delay: -1;
}

.hero-text-copy:nth-child(2){
    stroke: #840037;
    animation-delay: -2s;
}

.hero-text-copy:nth-child(3){
    stroke: #BD0034;
    animation-delay: -3s;
}

.hero-text-copy:nth-child(4){
    stroke: #BD0034;
    animation-delay: -4s;
}

.hero-text-copy:nth-child(5){
    stroke: #FDB731;
    animation-delay: -5s;
}

@keyframes stroke-offset{
    100% {stroke-dashoffset: -35%;}
}
/* Hero Happy Text */
.hero_happy_text {
	font-size: 50px;
    font-weight: normal;
}

.hero_happy_text span { display:inline-block; animation:float .2s ease-in-out infinite; }
 @keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}
.hero_happy_text:hover span { animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

.hero_happy_text span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
.hero_happy_text span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
.hero_happy_text span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
.hero_happy_text span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

.hero_happy_text span:nth-child(2){ animation-delay:.05s; }
.hero_happy_text span:nth-child(3){ animation-delay:.1s; }
.hero_happy_text span:nth-child(4){ animation-delay:.15s; }
.hero_happy_text span:nth-child(5){ animation-delay:.2s; }
.hero_happy_text span:nth-child(6){ animation-delay:.25s; }
.hero_happy_text span:nth-child(7){ animation-delay:.3s; }
.hero_happy_text span:nth-child(8){ animation-delay:.35s; }
.hero_happy_text span:nth-child(9){ animation-delay:.4s; }
.hero_happy_text span:nth-child(10){ animation-delay:.45s; }
.hero_happy_text span:nth-child(11){ animation-delay:.5s; }
.hero_happy_text span:nth-child(12){ animation-delay:.55s; }
.hero_happy_text span:nth-child(13){ animation-delay:.6s; }
.hero_happy_text span:nth-child(14){ animation-delay:.65s; }
.hero_happy_text span:nth-child(15){ animation-delay:.7s; }
.hero_happy_text span:nth-child(16){ animation-delay:.75s; }
.hero_happy_text span:nth-child(17){ animation-delay:.8s; }
.hero_happy_text span:nth-child(18){ animation-delay:.85s; }
.hero_happy_text span:nth-child(19){ animation-delay:.9s; }
.hero_happy_text span:nth-child(20){ animation-delay:.95s; }
.hero_happy_text span:nth-child(21){ animation-delay:1s; }
.hero_happy_text span:nth-child(22){ animation-delay:1.5s; }
.hero_happy_text span:nth-child(23){ animation-delay:1.6s; }
.hero_happy_text span:nth-child(24){ animation-delay:1.8s; }
/* Hero Animated Fill Text */
.hero_animated_fill{
  font-size:50px;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Style for Background Effect */

.slider_hero_walkingbackground:before {
  position: absolute;
  z-index: -10;
  width: 140%;
  height: 140%;
  bottom: 0;
  left: -20%;
  right: 0;
  content: '';

  background-position: center center;
  background-size: 50%;
  
  
  -moz-transform: perspective(45em) rotateX(45deg);
  -o-transform: perspective(45em) rotateX(45deg);
  -webkit-transform: perspective(45em) rotateX(45deg);
  -ms-transform: perspective(45em) rotateX(45deg);
  transform: perspective(45em) rotateX(45deg);
  
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  -webkit-animation-name: splash;
  -moz-animation-name: splash;
  -o-animation-name: splash;
  -ms-animation-name: splash;
  animation-name: splash;
  
  -ms-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
  -webkit-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
  -moz-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
  -o-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
  transition: opacity 30s ease-in-out, transform 5s ease-in-out;  
  
  -webkit-animation-duration: 60s;
  -moz-animation-duration: 60s;
  -ms-animation-duration: 60s;
  -o-animation-duration: 60s;
  animation-duration: 60s;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  
  opacity: 1;
  
}

/* OVERLAY */
/*
.slider_hero_walkingbackground:after {
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: rgba(20, 20, 20, 0.6);
} */

@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1920px 1152px;
  }
}

@keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1920px 1152px;
  }
}

@keyframes splash {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% -1152px;
  }
}

@-moz-keyframes splash {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% -1152px;
  }
}

@-webkit-keyframes splash {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% -1152px;
  }
}

@-ms-keyframes splash {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% -475px;
  }
}

@-o-keyframes splash {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% -475px;
  }
}

/* style for confitte */
.confetti {
  -webkit-animation: move 6s linear infinite, color 1s linear infinite, opacity 6s linear infinite;
          animation: move 6s linear infinite, color 1s linear infinite, opacity 6s linear infinite;
}
.confetti:nth-child(1) {
  fill: #b83014;
  -webkit-animation-delay: -3.72s;
          animation-delay: -3.72s;
  --dark: #5c180a;
  --tilt: 0.35;
}
.confetti:nth-child(2) {
  fill: #b84b14;
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
  --dark: #5c250a;
  --tilt: 0.41;
}
.confetti:nth-child(3) {
  fill: #b86614;
  -webkit-animation-delay: -5.76s;
          animation-delay: -5.76s;
  --dark: #5c330a;
  --tilt: 0.42;
}
.confetti:nth-child(4) {
  fill: #b88114;
  -webkit-animation-delay: -12.24s;
          animation-delay: -12.24s;
  --dark: #5c410a;
  --tilt: 0.59;
}
.confetti:nth-child(5) {
  fill: #b89c14;
  -webkit-animation-delay: -24s;
          animation-delay: -24s;
  --dark: #5c4e0a;
  --tilt: 0.81;
}
.confetti:nth-child(6) {
  fill: #b8b814;
  -webkit-animation-delay: -33.84s;
          animation-delay: -33.84s;
  --dark: #5c5c0a;
  --tilt: 0.06;
}
.confetti:nth-child(7) {
  fill: #9cb814;
  -webkit-animation-delay: -15.54s;
          animation-delay: -15.54s;
  --dark: #4e5c0a;
  --tilt: 0.93;
}
.confetti:nth-child(8) {
  fill: #81b814;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  --dark: #415c0a;
  --tilt: 0.12;
}
.confetti:nth-child(9) {
  fill: #66b814;
  -webkit-animation-delay: -9.72s;
          animation-delay: -9.72s;
  --dark: #335c0a;
  --tilt: 0.84;
}
.confetti:nth-child(10) {
  fill: #4bb814;
  -webkit-animation-delay: -19.8s;
          animation-delay: -19.8s;
  --dark: #255c0a;
  --tilt: 0.16;
}

@-webkit-keyframes move {
  100% {
    -webkit-transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
            transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
  }
}

@keyframes move {
  100% {
    -webkit-transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
            transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
  }
}
@-webkit-keyframes color {
  50% {
    fill: var(--dark);
  }
}
@keyframes color {
  50% {
    fill: var(--dark);
  }
}
@-webkit-keyframes opacity {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacity {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* style for Valentine Effect */
@keyframes bp {
  0% {
    background-color: ivory;
    background-position:  200px 0;
  }
  25% {
    background-color: white;
    background-position:  150px 50px;
  }
  50% {
    background-color: ivory;
    background-position:  100px 100px;
  }
  75% {
    background-color: white;
    background-position:  50px 150px;
  }
  100% {
    background-color: ivory;
    background-position:  0 200px;
  }
}

/* style for wormhole effect */

/* style for background image fade */

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hero_background_image_opacity {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    100% { opacity: 1 }
}

/* Standard syntax */
@keyframes hero_background_image_opacity {
     0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    100% { opacity: 1 }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hero_background_image_opacity_out {
    0% { opacity: 1;
    animation-timing-function: ease-in; }
    8% { opacity: 0.8;
         animation-timing-function: ease-out; }
    17% { opacity: 0.5 }
    25% { opacity: 0.2 }
    100% { opacity: 0 }
}

/* Standard syntax */
@keyframes hero_background_image_opacity_out {
     0% { opacity: 1;
    animation-timing-function: ease-in; }
    8% { opacity: 0.8;
         animation-timing-function: ease-out; }
    17% { opacity: 0.5 }
    25% { opacity: 0.2 }
    100% { opacity: 0 }
}



/* Animation for background image zoom in*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes hero_background_image_zoom {
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 0.5;
	    -webkit-transform: scale(1.01);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.04);
	}
	25% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	}
	100% { opacity: 1 }
}

/* Standard syntax */
@keyframes hero_background_image_zoom {
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 0.5;
	    transform: scale(1.01);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.04);
	}
	25% {
	    opacity: 1;
	    transform: scale(1.05);
	}
	100% { opacity: 1 }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hero_background_image_zoom_out {
	0% {
	    opacity: 1;
		
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(0.9);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 0.8;
	    -webkit-transform: scale(0.8);
	}
	25% {
	    opacity: 0.4;
	    -webkit-transform: scale(0.8);
	}
	100% { opacity: 0 }
}

/* Standard syntax */
@keyframes hero_background_image_zoom_out {
	0% {
	    opacity: 1;
		
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(0.9);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 0.8;
	    transform: scale(0.8);
	}
	25% {
	    opacity: 0.4;
	    transform: scale(0.8);
	}
	100% { opacity: 0 }
}

/* loader css */
			.hero_loader,
			.hero_loader {
			  height: 50px;
			  width: 50px;
			  position: relative;
			}
			.hero_loader::after, .hero_loader::before,
			.hero_loader::after,
			.hero_loader::before {
			  content: "";
			  width: 50px;
			  height: 50px;
			  position: absolute;
			  border: solid 8px transparent;
			  border-radius: 50%;
			  -webkit-animation: wiggle 1.4s ease infinite;
					  animation: wiggle 1.4s ease infinite;
			}
			.hero_loader::before,
			.hero_loader::before {
			  border-top-color: #4285f4;
			  border-bottom-color: #34a853;
			}
			.hero_loader::after,
			.hero_loader::after {
			  border-left-color: #fbbc05;
			  border-right-color: #ea4335;
			  -webkit-animation-delay: 0.7s;
					  animation-delay: 0.7s;
			}

			@-webkit-keyframes wiggle {
			  0% {
				-webkit-transform: rotate(0deg) scale(1);
						transform: rotate(0deg) scale(1);
			  }
			  50% {
				-webkit-transform: rotate(180deg) scale(0.5);
						transform: rotate(180deg) scale(0.5);
			  }
			  100% {
				-webkit-transform: rotate(360deg) scale(1);
						transform: rotate(360deg) scale(1);
			  }
			}

			@keyframes wiggle {
			  0% {
				-webkit-transform: rotate(0deg) scale(1);
						transform: rotate(0deg) scale(1);
			  }
			  50% {
				-webkit-transform: rotate(180deg) scale(0.5);
						transform: rotate(180deg) scale(0.5);
			  }
			  100% {
				-webkit-transform: rotate(360deg) scale(1);
						transform: rotate(360deg) scale(1);
			  }
			}
@media only screen and (max-width: 767px) and (min-width: 320px){
	.qcld_hero_content_area{
		position: absolute;
		top: 50%;
		z-index: 9;
		bottom:unset !important;
		
	}
	.hg_ctaStartGame{
		margin-right:3px !important;
		margin-bottom: 8px;
	}
	.button--moema{
		display:block;
	}
	.button--nanuk span{padding:0px !important;}
	.button--nanuk{
		display:block;
	}
	.button--nina{
		display:block;
	}
	.button--moema{display: block;}
	.slider-x-lead-title{position:unset !important;left:unset !important;top:unset !important;margin-top: 5px;margin-bottom: 5px;}
	.slider-x-item-title{position:unset !important;left:unset !important;top:unset !important;margin-top: 20px;
    margin-bottom: 20px;}
	.hero_slider_button{position:unset !important;left:unset !important;top:unset !important;margin-top: 5px;margin-bottom: 5px;}
	
}

.fluid-width-video-wrapper{
  position:unset !important;
  padding-top: unset !important;
}

@media only screen and (max-width: 1024px) and (min-width: 320px){
	.sh_bg_video_fluid{
		position:unset !important;
	}
	.fluid-width-video-wrapper{
		position:unset !important;
	}
}
.sh_bg_video iframe {
	width: 100%;
    height: 100%;
}
.sh_bg_video {
    position: absolute;
	top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
	 z-index:-1;
}
.sh_video_overlay{
	position: absolute;
	top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
	z-index:0;
}
.hero_bg_image{
	position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
}
.hero_bg_image1{
	position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
}
.hero_skip_button{text-align:center;position:absolute;width:100px;z-index:999999;font-size:20px;background:#000;opacity:0.4;color:#fff;padding:5px 0px;bottom:7px;right:7px;cursor:pointer;}
.hero_skip_button:hover{opacity:1}

.hero_play_video_button{
	width: 60px;
	height: 60px;
	background-color: #fff;
	padding: 15px;
	box-sizing: border-box;
	line-height: 32px;
	font-size:18px;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 999999;
	transform: translate(-50%, -50%);
	border-radius: 100%;
	cursor: pointer;
	transition: 0.5s;

}

.hero_play_video_button:hover{
	box-shadow:0 0 10px #646464;
	background-color: red;
	color:#fff;
}

.hero_play_video_button:after {
	content: "";
	position: absolute;
	left: -15px;
	right: -15px;
	top: -15px;
	bottom: -15px;
	background-color: rgba(255,255,255,0.50);
	z-index: -1;
	border-radius: 100%;
	 animation: videoControler 2s infinite alternate;
}
@keyframes videoControler {
to {
	background-color: rgba(255,255,255,0.40);
}
from {
	background-color: rgba(255,255,255,0.10);
}
}


.hero_play_button:hover{opacity:1}
.sh_bg_video_fluid iframe{position: absolute;
    left: 0;
    top: 0;width: 100%;
    height: 100%;}
.sh_vimeo_wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.sh_vimeo_wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.hero_mute_div{position:absolute;bottom:25px;right:50px;z-index: 999999;}
.hero_mute_div span{font-size:50px;color:#ddd;cursor:pointer;}

.hero_pro_feature_export:before {
    background: red;
    margin-bottom: 10px;
    content: '';
    position: absolute;
    width: 98%;
    height: 82%;
    z-index: 9999;
    opacity: 0.1;
    left: 7px;
}
.hero_pro_feature-wrap:before {
    background: red;
    margin-bottom: 10px;
    content: '';
    position: absolute;
    width: 101%;
    height: 94%;
    z-index: 9999;
    opacity: 0.1;
    left: -10px;
}
.hero_section_video{float: left;
    margin-right: 32px;}
.hero_video_container{margin-top: 30px;}