html {
/*  background: url(https://raw.githubusercontent.com/arjunamgain/FilterMenu/master/images/bg.jpg)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
/*background-color: #25873b;
background-image: url('../img/logo2.png');*/
background-image: url('../img/logo2.png'), linear-gradient(130deg, #25873b 0%,  #6EC742  90%   );

background-repeat:no-repeat;
background-position:center center;

}

body {text-align:center;
  font: 300 14px/18px Roboto;
  overflow:hidden;
  opacity:0;
}

*,
:after,
:before {
  box-sizing: border-box;
}
  
*, body , html { margin:0;}
.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px); 
transform: scale(1.01);   
}
.over_p{ z-index:3; display:none;
position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:rgba(255,255,255,0.5);	
}
html {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.over_l{display:none;z-index:9; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:rgba(255,255,255,0.2);}



 

.scale-in-center {
	-webkit-animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-8-22 4:3:17
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

.scale-out-center {
	-webkit-animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-8-22 4:15:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}

.slide-in-right {
	-webkit-animation: slide-in-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1500px);
            transform: translateX(1500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1500px);
            transform: translateX(1500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.slide-out-right {
	-webkit-animation: slide-out-right 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1500px);
            transform: translateX(1500px);
    opacity: 0;
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1500px);
            transform: translateX(1500px);
    opacity: 0;
  }
}


.over_c{ z-index:5;  
position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:#fff;	
    -webkit-transform: translateX(1500px);
            transform: translateX(1500px);
    opacity: 0;
}

.over_d{ z-index:5;  
position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:rgba(255,255,255,0.4);	
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
}


.head_ { z-index:2; position:fixed; top:0; width:100%; left:0; right:0; padding:18px 15px; padding-right:20px; font-family:Tajawal; font-size:16px; font-weight:800; text-align:right; background:green;    color:gold;
background-image: url(https://www.transparenttextures.com/patterns/black-thread.png),linear-gradient(-90deg, rgba(82,177,82,0.40) 0%,rgba(0,36,0,0.2) 100%)  ;  

 
 }

.head2_ { display:none; z-index:3; position:fixed; top:0; width:100%; left:0; right:0; padding:18px 15px; padding-right:20px; font-family:Tajawal; font-size:16px; font-weight:800; text-align:right;   background:green;  color:gold;
background-image: url(https://www.transparenttextures.com/patterns/black-thread.png),linear-gradient(-90deg, rgba(82,177,82,0.40) 0%,rgba(0,36,0,0.2) 100%)  ;  

 }

#head_svg { position:relative; top:0px; right:-1px;   }

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.frame1 { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; border:red solid 0px;}




#bottom-bar {
	width: 100%;
	background-color: #fff;
	position: fixed; z-index:2;
  bottom: 0; left:0; right:0;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.3); 
}

.bottom-bar-element {
	width: 20%;
	display: inline-block; font-family:Tajawal; font-size:15px; font-weight:500;
		
  float: left;
	text-align: center;
	padding-top: 7px;
	padding-bottom: 3px;
	color: #111;
  cursor: pointer;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
.bottom-bar-element span{ font-size:12px; font-weight:600; color:green ;    }
.bottom-bar-element img{ margin-bottom:0px; opacity:0.7;  }
.img_s { margin-bottom:-3px!important;    }

/* .bottom-bar-element img { opacity:0.5} */
.bottom-bar-element:hover {
	color: #111!important;
}

/*
#bottom-bar:hover .bottom-bar-element {
	color: #78909C;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
	
}*/


.nav { position: absolute; z-index:3; border:red solid 0px; width:100%;}
 

.nav p {
  margin-top: 15px;
  display: inline-block;
  float: left;
  vertical-align: bottom;  color:#f9c80e; margin-left:20px; font-family:Tajawal; font-weight:800; font-size:20px;
}

.ion-android-menu {
  font-size: 24px;
  margin-right: 17px;
}

.nav .ion-ios-more-outline {
  font-size: 40px;
  position:absolute; right:20px!important; color:#f9c80e;  
}

body{
/* font-family: 'Poppins', sans-serif; */
text-align: center;
}
.mycontainer{position:absolute; bottom:0; top:0;  margin:0 auto;
  height:100%; width:100%; overflow: hidden; max-width:500px; background-color: white;
  display:flex;
  align-items: center;
  justify-content: center;
  margin:0; border:red solid 0px;
}

.cardM::-webkit-scrollbar {
	    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  display: none;
}
.cardM{
  background-color: white;
  margin:0;
  height:100%;
  width: 100%;
  position: relative; border:#000 solid 0px;  overflow-y: scroll; bottom:0 !important;
}
.img{position:relative;   border:#000 solid 0px;
  
  height: 150px; width:100%; overflow:hidden;

}

.img div:nth-child(1){
  
  width:100%; height:150px; position:absolute; z-index:1;
/*
  background-color: black;
  background-image: url(../img/back.jpg);
  background-size: cover;
  background-position: center; */
 
background-image: url(../img/black-thread.png), linear-gradient(309deg,rgba(35, 102, 1, 1) 0%, rgba(0, 56, 0, 1) 100%) ;  

 
 /*   -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  filter: blur(8px); 
transform: scale(1.01);  */


 
	
	
  /* 
background-color: #00400a;
background-image: url("https://www.transparenttextures.com/patterns/light-wool.png");
 */
}

.img div:nth-child(2){
  
  width:100%; height:150px; position:absolute; z-index:2;
 /* background:rgba(0, 64, 10,0.6) ; */
}
.profilePic{
/*   background-color: black; */
  padding:5px;
  height:125px;
  width: 125px;
  border-radius: 75px;
  z-index: 2;
  position:absolute;
  right:0; margin-right:auto; left:0; margin-left:auto;
  top:77px;
  background-color: white;
  background-size: cover;
  background-position: center;
 /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  border:#fff solid 5px; 
}


.title{
  font-size: 14px; font-weight:500;
  font-family: Tajawal;
  color:#adb5bd;
  font-style:bold;
  margin-top:65px;
  margin-bottom: 2px;
}
h2{
  margin-top: 0px;
  color: #495057;
  font-size: 20px;
  font-family:Tajawal;
  margin-bottom: 0px;
}
.title2{
  font-size: 14px; font-weight:500;
  font-family: Tajawal;
  color:#adb5bd;
  font-style:bold;
  margin-top:2px;
 
}


.clearfix  {
  clear: both;
  display: block;
}
.countM{
border:red solid 0px; width:100%; margin-top:20px;	
}

.countM div{
border:red solid 0px; width:33%; float:right;  text-align:center!important;  	
}

.countM div p:nth-child(1){
  font-size: 14px;
  font-family: 'Dosis', sans-serif;
  color:#999;
  margin-bottom:6px;
  font-family:Tajawal; font-size:15px; font-weight:800;	text-align:center!important;  border:red solid 0px;
}
.countM div p:nth-child(2){
  color:#1e96fc;
  font-size: 24px;
  font-weight:700;
  letter-spacing:-1px;
  font-family: 'Quantico', sans-serif; border:red solid 0px; width:100%;
}
.countM div p:nth-child(3){
  font-size: 14px;
  font-family: 'Dosis', sans-serif;
  color:#adb5bd;
  margin-top: -13px;
  font-family:Tajawal; font-size:12px; font-weight:500;	text-align:center!important;  border:red solid 0px;
}	
 /*
.button{
  padding:12px 20px;
  background-color: #f9c80e;
  border-radius: 20px;
  margin: 0 30px;
  font-size: 14px;
  font-weight:700;
  letter-spacing:.1px;
  font-family: 'Quantico', sans-serif;
  color: #495057;
}
*/
.discription{
  margin: 10px 30px;
  text-align:justify;
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  color: #343a40;
}






.container { margin-top:30px!important;}
.card{
  width: 95%; padding-left:1px!important; text-align:right;
  border: none;
  border-radius: 10px;
  border:#ccc solid 1px; 
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);

}

.card h4{ font-family:Tajawal; font-size:16px; font-weight:500; color:green ; margin-right:63px; }

.cardAct { font-family:Tajawal; font-size:13px; font-weight:300; margin-right:63px; }
.cardRelation { font-family:Tajawal; font-size:15px; font-weight:300; margin-right:63px; margin-top:5px; margin-bottom:5px;   }


.image{
  margin-left:15px; display:none; 
}
button{ font-family:Tajawal; font-size:16px!important; font-weight:400!important; line-height:20px!important; padding-bottom:13px!important;}
.stats{

background-color: #fff !important; border:rgba(0,0,0,0.2) solid 1px;
background-image: url("https://www.transparenttextures.com/patterns/black-thread-light.png");
 border:rgba(0,0,0,0.2) solid 1px;
}
.articles{ 
  font-size:10px;
  color:green ; 
  font-family:Tajawal; font-weight:500; font-size:15px;
}
.number1{
    color:green !important; text-align:center;  font-size:15px !important; font-weight:400 !important; font-family:Tajawal;  padding-top:8px; 
}
.followers{
    font-size:10px;
  color:green ; 
  font-family:Tajawal; font-weight:500; font-size:15px;
}
.number2{  
    color:green !important; text-align:center;  font-size:15px !important; font-weight:400 !important; font-family:Tajawal;  padding-top:8px; 
}
.rating{
    font-size:10px;
  color:green ; 
    font-family:Tajawal; font-weight:500; font-size:15px;
}
.number3{
    color:green !important; text-align:center;  font-size:15px !important; font-weight:400 !important; font-family:Tajawal;  padding-top:8px; 
}
.vt { position:relative; font-size:25px; top:5px; right:5px;   
}
.dCard { border:red solid 0px; border-radius:50%; width:50px; height:50px;  right:0px; top:0px;
  position:absolute;
  background-size: cover;
  background-position: center;


} 	

.cCard {  border-radius:50%; width:50px; height:50px;  right:17px; top:19px;
  padding:5px;
  position:absolute;
  background-size: cover;
  background-position: center;
  border:#fff solid 0px; 
  box-shadow: 0 0 0 1px green; background-color:#fff;  
}

.cCard:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  content: "\f007"; 
  text-decoration: inherit;
  position: relative;
  font-size: 28px;
  color: green;
  top:10px;
  right:8px;
 
}


.btn-outline-success { background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%); border:rgba(0,0,0,0.2) solid 1px;  }
/*.btn-success { background-image: linear-gradient(to bottom,rgba(255,255,255,.03) 0%,rgba(0,0,0,.5) 100%);  color:#fff !important;}*/
.btn-warning { background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.3) 100%); }
.btn-danger { background-image: linear-gradient(to bottom,rgba(255,255,255,.04) 0%,rgba(0,0,0,.4) 100%); }

#spcount{width:90%; height:35px; margin:0 auto; border:red solid 0px; margin-bottom:-25px; }
#spcount div:nth-child(1){width:100%; height:6px; background: rgba(0, 64, 10,0.6) ; border-radius:5px;  margin-top:15px;}
#spcount div:nth-child(2){background:#fff; border:red solid 0px; font-family:Tajawal; font-size:17px; font-weight:500; display: inline-block; position:relative; z-index:2; top:-13px; padding:0 11px; color:green}
.doc { color:gold; font-size:35px;}
#d1 , #d2  , #d3{ width:100px; height:60px; position:absolute; padding-top:12px;   z-index:5; top:0; left:0; border:red solid 0px!important;}

.three_dot{   position: absolute; top:10px; right:20px; }
 
.icon-button {
  position: absolute; top:18px; right:50px;
  width: 42px;
  height: 42px;



  /* 
    display: flex;
  align-items: center;
  justify-content: center;
  background:rgba(0,0,0,0.1);
  border: #f9c80e solid 2px;
  outline: none;
  border-radius: 50%; */
}
 
.icon-button__badge {
  position: absolute;
  top: -3px;
  right: -1px;
  width: 18px;
  height: 18px;
  background: red;
  color: #ffffff; font-size:9px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size:12px; font-weight:400;  
      -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
}





















.progress {
  width: 100px;
  height: 100px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative; border:red solid 0px; padding:3px;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 7px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 7px;
  border-style: solid; 
  position: absolute;
  top: 0;
  border-color: #25873b;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  display: flex;
  border-radius: 50%;
  font-size: 20px;
  text-align: center!important;
  line-height: 20px;
  align-items: center;
  justify-content:center!important;
  height: 100%;
  font-weight: 300; border:red solid 0px; margin:0 auto;
}
.progress .progress-value div h4 { margin-top:0px!important;
  margin-top: 14px; font-size:20px!important; font-family:Tajawal; font-weight:800!important; color:#25873b;
}
.progress .progress-value span { margin-top:-13px!important; display:block; color:#25873b;
  font-size: 12px; font-family:Tajawal; font-weight:500!important;
  text-transform: uppercase;
}

/* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
  animation-play-state: paused; 
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
  animation-play-state: paused; 
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
  animation-play-state: paused; 
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
  animation-play-state: paused; 
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
  animation-play-state: paused; 
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
  animation-play-state: paused; 
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
  animation-play-state: paused; 
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
  animation-play-state: paused; 
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
  animation-play-state: paused;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
  animation-play-state: paused; 
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
  animation-play-state: paused;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
  animation-play-state: paused;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
  animation-play-state: paused;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
  animation-play-state: paused; 
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
  animation-play-state: paused;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
  animation-play-state: paused; 
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
  animation-play-state: paused; 
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
  animation-play-state: paused;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
  animation-play-state: paused;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
  animation-play-state: paused;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}
#vh_con { width:100%;  border:red solid 0px; width:100%; margin:0 auto;display: flex;  align-items: center;
    justify-content: center;margin-top:-3px;   }
.vh {  margin: 0 ; padding:0; border:red solid 0px;  width:32%; 
	  display: inline-block;
  position: relative;
  text-align: center;
  vertical-align: top;
text-align:center; font-family:Tajawal; color:#999; font-size:15px; 
font-weight:800;}
 
 
 
 
 
 
 
 
 .bx {
  margin: 1em auto; margin-top:1.8em; margin-bottom:0px; padding: 1em 2em;
   background: #f2f5f8 !important; border:rgba(0,0,0,0.2) solid 1px; 
  display: inline-block; 
  position: relative; 
  font-size: 18px; 
width:90%;  
 
}
.bx h2 { font-size: 1.1em; margin: 0.5rem; }
.quoteAuthor { text-align: right; }
 
.quoteBox { 
  border-radius: 12px; 
  background: #e6e6fa;
  padding: 0;
}
.quoteBox p { padding: 1em; border:red solid 0px; margin: 0; font-family:Tajawal; font-size:15px; font-weight:400; text-align:right; line-height:26px; direction:rtl; color:green;}
.quoteBox .quoteAuthor { 
  background: #195e28;
  color: #e6e6fa;
  border-radius: 0 0 12px 12px;
  position: relative;
  box-shadow: 4px 4px 8px 0 rgba(145,145,145, 0.5); padding-top:30px  ; padding-bottom:30px;
}

.quoteBox .quoteAuthor::before {
  content: "";
  position: absolute;
  top: 0; left: 45%; width: 0; height: 0;
  border: solid 16px #f2f5f8;
  border-color: #f2f5f8 transparent transparent transparent;
}

 
.box_con { border:#ccc solid 1px; border-radius:10px; width:90%; margin:30px auto; }
.head_con { width:100%; margin:0; padding:13px 10px; background:#25873b; color:#fff;   border-top-left-radius:10px;   border-top-right-radius:10px;
font-family:Tajawal; font-size:15px; font-weight:500; text-align:right;
}
.head_con span{ float:left; font-family:Tajawal; font-size:14px; font-weight:300; margin-left:0px; opacity:0.7; }










.button_container {  
  position: absolute ;
  top:18px;
  right: 15px;
  height: 25px;
  width: 25px;
  cursor: pointer;
  z-index: 4;
  transition: opacity .25s ease;
  transform: rotate(90deg);
}

.button_container span {
  background: #f9c80e;
  border: none;
  height: 4px;
  width: 4px;
  position: absolute;
  top: 0;
  left: 10px;
  transition: all .35s ease;
  cursor: pointer;
  border-radius: 5px;
}

.button_container:hover {
/*  opacity: .7; */
}

.button_container span:nth-of-type(3) {
  top: 9px;
}

.button_container span:nth-of-type(4),
.button_container span:nth-of-type(5) {
  top: 18px;
}

.button_container.active .top,
.button_container.active .bottom {
  transform: translateX(-10px);
  background: #ffffff;
}

.button_container.active .top2,
.button_container.active .bottom2 {
  transform: translateX(10px);
  background: #ffffff;
}

.button_container.active .middle {
  background: #ffffff;
}


/*Overlay styles, after click on menu icon*/

.overlay {
  position: fixed;
  background:#25873b;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  z-index: 4;
  visibility: hidden; 
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}

.overlay.open {
/*  opacity: .95; */
  opacity: 1;
  visibility: visible;
  height: 100%;
}

.overlay .overlay-menu {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.overlay .overlay-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

.overlay li {
  opacity: 0;
}

.overlay.open li {
  animation: fadein 0.5s ease forwards;
  animation-delay: 0.35s;
  padding: 3px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


 

.ListeObjekt { margin-top:10px 0; border-bottom:#fff solid 1px; height:70px;
	text-align:right; direction:rtl; background:rgba(255,255,255,0.1); border-radius:4px; width:90%;
   position:relative;
margin:0 auto;
  margin-bottom: 3px;
}
.ListeObjekt p:nth-of-type(1){   width:45px; height:45px; border:#fff solid 2px; border-radius:50%; position:relative; top:10px; right:10px; text-align:center;}
.ListeObjekt p:nth-of-type(2){   position:relative; top:-45px!important; right:65px; font-family:Tajawal; font-size:17px; font-weight:500; color:#fff;  } 
.ListeObjekt p svg{  position: absolute;
  top: 50%;  left: 50%;
  -ms-transform: translate(-50% , -50%);
  transform: translate(-50% , -50%);
  }
.ListeObjekt p:nth-of-type(3){  position:relative; top:-60px!important; right:65px; font-family:Tajawal; font-size:13px; font-weight:200; color:#fff;  }




.splash {
  height: 100vh;
width:100%;
  background-image: url('../img/profile.png' );
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover; position: relative; z-index:99; 
 
}
.splash::before {
  content:'';
    opacity: 1;
 background-image: linear-gradient(to top right, #655900  0%, #25873b  100%); 
  	 /* background-image: linear-gradient(135deg, #2B7594 0%, #655900 100%);*/
 /* background: linear-gradient(to top right, rgba(126, 197, 49, 0.55), rgba(0, 140, 255, 0.7));*/
  mix-blend-mode: multiply;
  height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
  z-index:2;
}
.splash_inner {
  height: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 0 10%;  
}

.splash h1 {
  color: #f9c80e;
  font-size: 39px;
    line-height: 6.5rem;
  margin-bottom: 1rem;
  font-family: 'Aref Ruqaa'; font-weight:700;
}
.splash h1:before {
 
    content: "\020";
    display: block;
    height: 2px;
    margin: 1rem 0;
    width: 1em;
}
.splash p,a {   font-family:  'Reem Kufi'; font-size: 1rem;}
.splash p { line-height:45px;
  font-size: 35px;
 
 color: #fff;
  margin-bottom: -30px; margin-top:-100px;
    max-width: 600px;
}

.btnv {
    background: #25873b;
	/*background: #0073a8; */
	color:#fff;
    border-radius: 100px;
    padding: 1.5rem;
  width:8rem;
  text-align: center;
    transition: all .5s ease-in-out;
  background-image: none;
  -webkit-box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.2); 
  margin:0 auto;

}
.btnv:hover {
  background: #0073a8;
  -webkit-box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.2);

box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.btnv a {
  color: #fff;
text-decoration: none;
  font-size:1.5rem;
  font-family:Tajawal; font-weight:400;
}
.btnv:hover a {
  color: white;
  font-weight: 400;
}

/***
****
ANIMATIONS
****
***/
/*****
-----
ANIMATIONS
-----
*****/

.text-focus-in {
	-webkit-animation: text-focus-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.7s both;
	animation: text-focus-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.7s both;
}

.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
	animation: slide-in-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-5-16 20:17:27
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
	0% {
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}

	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

@keyframes text-focus-in {
	0% {
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}

	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
	0% {
		-webkit-transform: translateY(1000px);
		transform: translateY(1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-in-bottom {
	0% {
		-webkit-transform: translateY(1000px);
		transform: translateY(1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.slide-in-fwd-center {
	-webkit-animation: slide-in-fwd-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}







 
.hero,
.hero_content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero {  position: absolute; z-index:99;
  overflow: hidden;
  background: url("https://www.saintfuckingpetersburg.com/img/drone_shot.44a2dd58.jpg") no-repeat 50% fixed;
  background-size: cover;
  background:#000;
}

#youtubeImg{
filter: blur(4px);

  position: absolute; z-index:2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  /* 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* 16/9*100 = 177.77 */
}
.hero_video,
.hero iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  /* 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* 16/9*100 = 177.77 */
}

.hero iframe {
  opacity: 0;
}

.hero iframe.loaded {
  opacity: 1;
}

.hero_content {
  z-index: 8675309;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero_content_title {
  color: #fff;
  font-family:Tajawal;
  font-size:16px;
  line-height: 1.75rem;
  text-align: center;
  font-weight: 300;
  margin-bottom:5px;
}
.hero_content_title p{ font-family:Tajawal; font-size:18px; font-weight:500; margin-top:10px; }

.hero_content_play {
  display: block;
  position: relative;
  width: 4rem;
  height: 4rem;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(22, 22, 16, 0.75);
  text-indent: -9999px;
  transition: border-color 0.3s ease;
  -webkit-animation: pulse 3s infinite;
          animation: pulse 3s infinite;
}

.hero_content_play:hover {
  border-color: #fff;
  -webkit-animation: none;
          animation: none;
}

.hero_content_play:after {
  content: "";
  display: block;
  position: absolute;
  top: 1rem;
  left: 1.425rem;
  width: 0;
  height: 0;
  border: 0;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 1rem 0 1rem 1.5rem;
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(205, 170, 147, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(205, 170, 147, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(205, 170, 147, 0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(205, 170, 147, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(205, 170, 147, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(205, 170, 147, 0);
  }
}

.overlay2 {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
	z-index:2;
}

.overlay2__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay2__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner2 {
  width: 50px;
  height: 50px;
    display: inline-block;
    border: 3px solid rgba(0,0,0,0.05);
    border-top-color:rgba(82,177,82,0.8);
    animation: spin 1s ease-in-out infinite ;
    border-radius: 100%;
    border-style: solid;
}

.overlay3 {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #222;
	z-index:2;
}

.overlay3__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay3__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}


@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}









 
 ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
.contact-area {
    border-bottom: 0px solid #353C46;
	height:290px; overflow:hidden; 
  margin-bottom:30% !important; 
}

.contact-content p {
    font-size: 15px;
    margin: 30px 0 60px;
    position: relative;
}

/*
.contact-content p::after {
    background: #353C46;
    bottom: -30px;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    width: 80%;
}
*/

.contact-content h6 {
    color: #8b9199;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
}

.contact-content span {
    color: #353c47;
    margin: 0 10px;
}

.contact-social {
    margin-top: 30px;
}

.contact-social > ul {
    display: inline-flex;
}

.contact-social ul li a {
    border: 2px solid #195e28;
    color: #195e28;
    display: inline-block;
    height: 45px;
    margin: 0 10px;
    padding-top: 13px;
    transition: all 0.4s ease 0s;
    width: 45px;
	border-radius:50%;
}

.contact-social ul li a:hover {
    border:2px solid #FAB702;
    color: #FAB702;
}

.contact-content img {
    max-width: 210px;
}

section    {
    background: #fff;
    color: green;
	font-family:Tajawal; font-size:16px;
}
footer { border:red solid 0px;  background: #25873b; padding-bottom:0; margin-top:60px;    }
footer p {
    padding: 40px 0;
    text-align: center;
	font-family:Tajawal; font-size:18px; font-weight:600; color:#fff; 
}

footer img {
    width: 44px;
}



@media all and (display-mode: standalone) {
  .contact-area {
    margin-bottom:13% !important; 
  }
}
.addb , .addb:active , .addb:focus{
 
 	color: inherit;
	border-top: none; border-left: none; border-right: none; 
	font: inherit;
	cursor: pointer;
	outline: inherit;
     display:block;

}	


#list_sp { font-size:15px!important;}

.loadingC2{ position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; z-index:1; background:#FFF;}
.loading2 {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(0,0,0,0.05);
  border-radius: 50%;
  border-top-color: rgba(82,177,82,0.8);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
      margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}



















































.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.9vw;
  height: 0.9vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;  z-index:99999;
}
.firefly::before, .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}
.firefly::before {
  background: rgba(0,0,0,0.4);
  opacity: 0.5;
  animation: drift ease alternate infinite;
}
.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 11s;
}
.firefly:nth-child(1)::after {
  animation-duration: 11s, 10953ms;
  animation-delay: 0ms, 8443ms;
}

@keyframes move1 {
  0% {
    transform: translateX(-28vw) translateY(13vh) scale(0.27);
  }
  4.347826087% {
    transform: translateX(-37vw) translateY(-11vh) scale(0.57);
  }
  8.6956521739% {
    transform: translateX(38vw) translateY(-40vh) scale(0.7);
  }
  13.0434782609% {
    transform: translateX(31vw) translateY(-47vh) scale(0.32);
  }
  17.3913043478% {
    transform: translateX(18vw) translateY(44vh) scale(0.72);
  }
  21.7391304348% {
    transform: translateX(29vw) translateY(-15vh) scale(0.76);
  }
  26.0869565217% {
    transform: translateX(24vw) translateY(-15vh) scale(0.74);
  }
  30.4347826087% {
    transform: translateX(-40vw) translateY(-43vh) scale(0.79);
  }
  34.7826086957% {
    transform: translateX(-39vw) translateY(36vh) scale(0.55);
  }
  39.1304347826% {
    transform: translateX(-33vw) translateY(-33vh) scale(0.92);
  }
  43.4782608696% {
    transform: translateX(36vw) translateY(46vh) scale(0.56);
  }
  47.8260869565% {
    transform: translateX(9vw) translateY(-22vh) scale(0.26);
  }
  52.1739130435% {
    transform: translateX(33vw) translateY(10vh) scale(0.45);
  }
  56.5217391304% {
    transform: translateX(-30vw) translateY(35vh) scale(0.93);
  }
  60.8695652174% {
    transform: translateX(-36vw) translateY(7vh) scale(0.34);
  }
  65.2173913043% {
    transform: translateX(34vw) translateY(-43vh) scale(1);
  }
  69.5652173913% {
    transform: translateX(-36vw) translateY(-19vh) scale(0.78);
  }
  73.9130434783% {
    transform: translateX(-4vw) translateY(-47vh) scale(0.61);
  }
  78.2608695652% {
    transform: translateX(-1vw) translateY(48vh) scale(0.98);
  }
  82.6086956522% {
    transform: translateX(13vw) translateY(-25vh) scale(0.89);
  }
  86.9565217391% {
    transform: translateX(12vw) translateY(13vh) scale(0.66);
  }
  91.3043478261% {
    transform: translateX(-2vw) translateY(-29vh) scale(0.7);
  }
  95.652173913% {
    transform: translateX(-34vw) translateY(-12vh) scale(0.75);
  }
  100% {
    transform: translateX(4vw) translateY(15vh) scale(0.86);
  }
}
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 11s;
}
.firefly:nth-child(2)::after {
  animation-duration: 11s, 7278ms;
  animation-delay: 0ms, 1106ms;
}

@keyframes move2 {
  0% {
    transform: translateX(12vw) translateY(28vh) scale(0.31);
  }
  3.7037037037% {
    transform: translateX(21vw) translateY(50vh) scale(0.56);
  }
  7.4074074074% {
    transform: translateX(18vw) translateY(47vh) scale(0.39);
  }
  11.1111111111% {
    transform: translateX(48vw) translateY(22vh) scale(0.54);
  }
  14.8148148148% {
    transform: translateX(-9vw) translateY(3vh) scale(0.74);
  }
  18.5185185185% {
    transform: translateX(20vw) translateY(44vh) scale(0.67);
  }
  22.2222222222% {
    transform: translateX(27vw) translateY(48vh) scale(0.36);
  }
  25.9259259259% {
    transform: translateX(5vw) translateY(8vh) scale(0.51);
  }
  29.6296296296% {
    transform: translateX(28vw) translateY(-37vh) scale(0.88);
  }
  33.3333333333% {
    transform: translateX(0vw) translateY(43vh) scale(0.77);
  }
  37.037037037% {
    transform: translateX(-18vw) translateY(11vh) scale(0.92);
  }
  40.7407407407% {
    transform: translateX(14vw) translateY(-47vh) scale(0.48);
  }
  44.4444444444% {
    transform: translateX(40vw) translateY(17vh) scale(0.68);
  }
  48.1481481481% {
    transform: translateX(-28vw) translateY(48vh) scale(0.69);
  }
  51.8518518519% {
    transform: translateX(-20vw) translateY(-20vh) scale(0.91);
  }
  55.5555555556% {
    transform: translateX(40vw) translateY(8vh) scale(0.75);
  }
  59.2592592593% {
    transform: translateX(45vw) translateY(-36vh) scale(0.26);
  }
  62.962962963% {
    transform: translateX(-36vw) translateY(44vh) scale(0.61);
  }
  66.6666666667% {
    transform: translateX(-17vw) translateY(-23vh) scale(0.49);
  }
  70.3703703704% {
    transform: translateX(-2vw) translateY(21vh) scale(0.52);
  }
  74.0740740741% {
    transform: translateX(28vw) translateY(25vh) scale(0.97);
  }
  77.7777777778% {
    transform: translateX(-36vw) translateY(-22vh) scale(0.52);
  }
  81.4814814815% {
    transform: translateX(18vw) translateY(-45vh) scale(0.26);
  }
  85.1851851852% {
    transform: translateX(16vw) translateY(-36vh) scale(0.62);
  }
  88.8888888889% {
    transform: translateX(36vw) translateY(-48vh) scale(0.38);
  }
  92.5925925926% {
    transform: translateX(-34vw) translateY(42vh) scale(0.52);
  }
  96.2962962963% {
    transform: translateX(27vw) translateY(25vh) scale(0.36);
  }
  100% {
    transform: translateX(1vw) translateY(22vh) scale(0.44);
  }
}
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 16s;
}
.firefly:nth-child(3)::after {
  animation-duration: 16s, 9653ms;
  animation-delay: 0ms, 1690ms;
}

@keyframes move3 {
  0% {
    transform: translateX(-10vw) translateY(34vh) scale(0.99);
  }
  4.7619047619% {
    transform: translateX(40vw) translateY(31vh) scale(0.61);
  }
  9.5238095238% {
    transform: translateX(38vw) translateY(-26vh) scale(0.99);
  }
  14.2857142857% {
    transform: translateX(41vw) translateY(45vh) scale(0.37);
  }
  19.0476190476% {
    transform: translateX(31vw) translateY(-48vh) scale(0.9);
  }
  23.8095238095% {
    transform: translateX(14vw) translateY(-17vh) scale(0.58);
  }
  28.5714285714% {
    transform: translateX(-39vw) translateY(30vh) scale(0.45);
  }
  33.3333333333% {
    transform: translateX(18vw) translateY(41vh) scale(0.76);
  }
  38.0952380952% {
    transform: translateX(-9vw) translateY(14vh) scale(0.54);
  }
  42.8571428571% {
    transform: translateX(-36vw) translateY(46vh) scale(0.94);
  }
  47.619047619% {
    transform: translateX(-30vw) translateY(-15vh) scale(0.95);
  }
  52.380952381% {
    transform: translateX(31vw) translateY(-2vh) scale(0.37);
  }
  57.1428571429% {
    transform: translateX(13vw) translateY(-45vh) scale(0.28);
  }
  61.9047619048% {
    transform: translateX(-23vw) translateY(0vh) scale(0.26);
  }
  66.6666666667% {
    transform: translateX(25vw) translateY(-35vh) scale(0.37);
  }
  71.4285714286% {
    transform: translateX(-5vw) translateY(-12vh) scale(0.52);
  }
  76.1904761905% {
    transform: translateX(-23vw) translateY(47vh) scale(0.73);
  }
  80.9523809524% {
    transform: translateX(49vw) translateY(-9vh) scale(0.88);
  }
  85.7142857143% {
    transform: translateX(26vw) translateY(-35vh) scale(0.62);
  }
  90.4761904762% {
    transform: translateX(35vw) translateY(32vh) scale(0.26);
  }
  95.2380952381% {
    transform: translateX(-6vw) translateY(23vh) scale(0.78);
  }
  100% {
    transform: translateX(-43vw) translateY(48vh) scale(0.66);
  }
}
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 11s;
}
.firefly:nth-child(4)::after {
  animation-duration: 11s, 7046ms;
  animation-delay: 0ms, 875ms;
}

@keyframes move4 {
  0% {
    transform: translateX(27vw) translateY(-43vh) scale(0.7);
  }
  3.7037037037% {
    transform: translateX(19vw) translateY(36vh) scale(0.89);
  }
  7.4074074074% {
    transform: translateX(25vw) translateY(40vh) scale(0.43);
  }
  11.1111111111% {
    transform: translateX(50vw) translateY(8vh) scale(0.65);
  }
  14.8148148148% {
    transform: translateX(-32vw) translateY(30vh) scale(0.98);
  }
  18.5185185185% {
    transform: translateX(23vw) translateY(44vh) scale(0.44);
  }
  22.2222222222% {
    transform: translateX(-46vw) translateY(0vh) scale(0.3);
  }
  25.9259259259% {
    transform: translateX(-21vw) translateY(-47vh) scale(1);
  }
  29.6296296296% {
    transform: translateX(17vw) translateY(-21vh) scale(0.78);
  }
  33.3333333333% {
    transform: translateX(45vw) translateY(43vh) scale(0.83);
  }
  37.037037037% {
    transform: translateX(-10vw) translateY(23vh) scale(0.8);
  }
  40.7407407407% {
    transform: translateX(-4vw) translateY(-32vh) scale(0.37);
  }
  44.4444444444% {
    transform: translateX(6vw) translateY(-42vh) scale(0.99);
  }
  48.1481481481% {
    transform: translateX(48vw) translateY(-10vh) scale(0.82);
  }
  51.8518518519% {
    transform: translateX(-3vw) translateY(13vh) scale(0.26);
  }
  55.5555555556% {
    transform: translateX(-8vw) translateY(47vh) scale(0.34);
  }
  59.2592592593% {
    transform: translateX(35vw) translateY(43vh) scale(0.97);
  }
  62.962962963% {
    transform: translateX(25vw) translateY(9vh) scale(0.63);
  }
  66.6666666667% {
    transform: translateX(-8vw) translateY(-1vh) scale(0.82);
  }
  70.3703703704% {
    transform: translateX(-33vw) translateY(-32vh) scale(0.45);
  }
  74.0740740741% {
    transform: translateX(16vw) translateY(-14vh) scale(0.8);
  }
  77.7777777778% {
    transform: translateX(19vw) translateY(-40vh) scale(0.38);
  }
  81.4814814815% {
    transform: translateX(-15vw) translateY(-16vh) scale(0.71);
  }
  85.1851851852% {
    transform: translateX(-20vw) translateY(11vh) scale(0.99);
  }
  88.8888888889% {
    transform: translateX(19vw) translateY(-14vh) scale(0.3);
  }
  92.5925925926% {
    transform: translateX(14vw) translateY(-46vh) scale(0.28);
  }
  96.2962962963% {
    transform: translateX(-32vw) translateY(-3vh) scale(0.58);
  }
  100% {
    transform: translateX(1vw) translateY(49vh) scale(0.78);
  }
}
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 15s;
}
.firefly:nth-child(5)::after {
  animation-duration: 15s, 6902ms;
  animation-delay: 0ms, 7876ms;
}

@keyframes move5 {
  0% {
    transform: translateX(-5vw) translateY(-16vh) scale(0.54);
  }
  3.7037037037% {
    transform: translateX(32vw) translateY(22vh) scale(0.44);
  }
  7.4074074074% {
    transform: translateX(0vw) translateY(-27vh) scale(0.64);
  }
  11.1111111111% {
    transform: translateX(-27vw) translateY(29vh) scale(0.41);
  }
  14.8148148148% {
    transform: translateX(-16vw) translateY(18vh) scale(0.41);
  }
  18.5185185185% {
    transform: translateX(12vw) translateY(-9vh) scale(0.3);
  }
  22.2222222222% {
    transform: translateX(42vw) translateY(-33vh) scale(0.44);
  }
  25.9259259259% {
    transform: translateX(-45vw) translateY(-49vh) scale(0.87);
  }
  29.6296296296% {
    transform: translateX(15vw) translateY(-29vh) scale(0.9);
  }
  33.3333333333% {
    transform: translateX(-31vw) translateY(-24vh) scale(0.41);
  }
  37.037037037% {
    transform: translateX(36vw) translateY(-1vh) scale(0.32);
  }
  40.7407407407% {
    transform: translateX(-18vw) translateY(8vh) scale(0.92);
  }
  44.4444444444% {
    transform: translateX(-12vw) translateY(-19vh) scale(0.99);
  }
  48.1481481481% {
    transform: translateX(25vw) translateY(-25vh) scale(0.7);
  }
  51.8518518519% {
    transform: translateX(-11vw) translateY(-40vh) scale(0.38);
  }
  55.5555555556% {
    transform: translateX(34vw) translateY(-25vh) scale(0.77);
  }
  59.2592592593% {
    transform: translateX(-10vw) translateY(46vh) scale(0.89);
  }
  62.962962963% {
    transform: translateX(-32vw) translateY(-32vh) scale(0.84);
  }
  66.6666666667% {
    transform: translateX(44vw) translateY(-8vh) scale(0.98);
  }
  70.3703703704% {
    transform: translateX(-21vw) translateY(-16vh) scale(0.5);
  }
  74.0740740741% {
    transform: translateX(-48vw) translateY(35vh) scale(0.93);
  }
  77.7777777778% {
    transform: translateX(-34vw) translateY(37vh) scale(0.94);
  }
  81.4814814815% {
    transform: translateX(-38vw) translateY(-20vh) scale(0.48);
  }
  85.1851851852% {
    transform: translateX(-42vw) translateY(27vh) scale(0.44);
  }
  88.8888888889% {
    transform: translateX(-47vw) translateY(23vh) scale(0.59);
  }
  92.5925925926% {
    transform: translateX(-23vw) translateY(24vh) scale(0.56);
  }
  96.2962962963% {
    transform: translateX(33vw) translateY(13vh) scale(0.53);
  }
  100% {
    transform: translateX(7vw) translateY(-24vh) scale(0.55);
  }
}
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 9s;
}
.firefly:nth-child(6)::after {
  animation-duration: 9s, 10204ms;
  animation-delay: 0ms, 2730ms;
}

@keyframes move6 {
  0% {
    transform: translateX(-48vw) translateY(48vh) scale(0.88);
  }
  5.5555555556% {
    transform: translateX(22vw) translateY(-18vh) scale(0.75);
  }
  11.1111111111% {
    transform: translateX(-30vw) translateY(-10vh) scale(0.73);
  }
  16.6666666667% {
    transform: translateX(0vw) translateY(25vh) scale(0.95);
  }
  22.2222222222% {
    transform: translateX(16vw) translateY(-12vh) scale(0.44);
  }
  27.7777777778% {
    transform: translateX(-6vw) translateY(23vh) scale(0.49);
  }
  33.3333333333% {
    transform: translateX(-47vw) translateY(-25vh) scale(0.76);
  }
  38.8888888889% {
    transform: translateX(48vw) translateY(18vh) scale(0.8);
  }
  44.4444444444% {
    transform: translateX(9vw) translateY(-16vh) scale(0.96);
  }
  50% {
    transform: translateX(-22vw) translateY(-35vh) scale(0.49);
  }
  55.5555555556% {
    transform: translateX(-5vw) translateY(-17vh) scale(0.89);
  }
  61.1111111111% {
    transform: translateX(31vw) translateY(-28vh) scale(0.85);
  }
  66.6666666667% {
    transform: translateX(-41vw) translateY(-30vh) scale(0.78);
  }
  72.2222222222% {
    transform: translateX(4vw) translateY(25vh) scale(0.73);
  }
  77.7777777778% {
    transform: translateX(-8vw) translateY(4vh) scale(0.51);
  }
  83.3333333333% {
    transform: translateX(42vw) translateY(46vh) scale(0.28);
  }
  88.8888888889% {
    transform: translateX(-31vw) translateY(-3vh) scale(0.3);
  }
  94.4444444444% {
    transform: translateX(-38vw) translateY(-22vh) scale(0.6);
  }
  100% {
    transform: translateX(4vw) translateY(22vh) scale(0.5);
  }
}
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 10s;
}
.firefly:nth-child(7)::after {
  animation-duration: 10s, 8571ms;
  animation-delay: 0ms, 7908ms;
}

@keyframes move7 {
  0% {
    transform: translateX(17vw) translateY(-46vh) scale(0.58);
  }
  4.5454545455% {
    transform: translateX(-40vw) translateY(46vh) scale(0.52);
  }
  9.0909090909% {
    transform: translateX(-28vw) translateY(-23vh) scale(0.89);
  }
  13.6363636364% {
    transform: translateX(31vw) translateY(-1vh) scale(0.88);
  }
  18.1818181818% {
    transform: translateX(-46vw) translateY(-17vh) scale(0.41);
  }
  22.7272727273% {
    transform: translateX(39vw) translateY(-43vh) scale(0.52);
  }
  27.2727272727% {
    transform: translateX(-20vw) translateY(-14vh) scale(0.76);
  }
  31.8181818182% {
    transform: translateX(27vw) translateY(17vh) scale(0.52);
  }
  36.3636363636% {
    transform: translateX(38vw) translateY(-26vh) scale(0.82);
  }
  40.9090909091% {
    transform: translateX(-17vw) translateY(0vh) scale(0.6);
  }
  45.4545454545% {
    transform: translateX(26vw) translateY(-21vh) scale(0.71);
  }
  50% {
    transform: translateX(-48vw) translateY(-31vh) scale(0.27);
  }
  54.5454545455% {
    transform: translateX(18vw) translateY(-36vh) scale(0.51);
  }
  59.0909090909% {
    transform: translateX(13vw) translateY(-34vh) scale(0.48);
  }
  63.6363636364% {
    transform: translateX(49vw) translateY(-45vh) scale(0.67);
  }
  68.1818181818% {
    transform: translateX(-25vw) translateY(46vh) scale(0.56);
  }
  72.7272727273% {
    transform: translateX(-10vw) translateY(-17vh) scale(0.3);
  }
  77.2727272727% {
    transform: translateX(24vw) translateY(27vh) scale(0.32);
  }
  81.8181818182% {
    transform: translateX(-30vw) translateY(-40vh) scale(0.67);
  }
  86.3636363636% {
    transform: translateX(-2vw) translateY(22vh) scale(0.59);
  }
  90.9090909091% {
    transform: translateX(43vw) translateY(-46vh) scale(0.88);
  }
  95.4545454545% {
    transform: translateX(19vw) translateY(-31vh) scale(0.8);
  }
  100% {
    transform: translateX(-35vw) translateY(-44vh) scale(0.41);
  }
}
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 13s;
}
.firefly:nth-child(8)::after {
  animation-duration: 13s, 9457ms;
  animation-delay: 0ms, 6035ms;
}

@keyframes move8 {
  0% {
    transform: translateX(-12vw) translateY(-43vh) scale(0.39);
  }
  3.7037037037% {
    transform: translateX(-43vw) translateY(19vh) scale(0.53);
  }
  7.4074074074% {
    transform: translateX(-45vw) translateY(46vh) scale(0.47);
  }
  11.1111111111% {
    transform: translateX(-6vw) translateY(27vh) scale(0.73);
  }
  14.8148148148% {
    transform: translateX(-6vw) translateY(-8vh) scale(0.49);
  }
  18.5185185185% {
    transform: translateX(42vw) translateY(41vh) scale(0.82);
  }
  22.2222222222% {
    transform: translateX(44vw) translateY(-21vh) scale(0.43);
  }
  25.9259259259% {
    transform: translateX(10vw) translateY(-13vh) scale(0.49);
  }
  29.6296296296% {
    transform: translateX(-24vw) translateY(-21vh) scale(0.33);
  }
  33.3333333333% {
    transform: translateX(-21vw) translateY(-11vh) scale(0.82);
  }
  37.037037037% {
    transform: translateX(16vw) translateY(12vh) scale(0.49);
  }
  40.7407407407% {
    transform: translateX(26vw) translateY(47vh) scale(0.42);
  }
  44.4444444444% {
    transform: translateX(23vw) translateY(-17vh) scale(0.64);
  }
  48.1481481481% {
    transform: translateX(33vw) translateY(-18vh) scale(0.66);
  }
  51.8518518519% {
    transform: translateX(-21vw) translateY(12vh) scale(0.66);
  }
  55.5555555556% {
    transform: translateX(-38vw) translateY(-40vh) scale(0.26);
  }
  59.2592592593% {
    transform: translateX(-34vw) translateY(-24vh) scale(0.38);
  }
  62.962962963% {
    transform: translateX(40vw) translateY(29vh) scale(0.53);
  }
  66.6666666667% {
    transform: translateX(-28vw) translateY(19vh) scale(0.27);
  }
  70.3703703704% {
    transform: translateX(-24vw) translateY(-3vh) scale(0.6);
  }
  74.0740740741% {
    transform: translateX(-16vw) translateY(-25vh) scale(0.53);
  }
  77.7777777778% {
    transform: translateX(-23vw) translateY(-13vh) scale(0.51);
  }
  81.4814814815% {
    transform: translateX(-1vw) translateY(-10vh) scale(0.35);
  }
  85.1851851852% {
    transform: translateX(10vw) translateY(-25vh) scale(0.46);
  }
  88.8888888889% {
    transform: translateX(-2vw) translateY(-27vh) scale(0.46);
  }
  92.5925925926% {
    transform: translateX(-38vw) translateY(42vh) scale(0.42);
  }
  96.2962962963% {
    transform: translateX(31vw) translateY(27vh) scale(0.92);
  }
  100% {
    transform: translateX(17vw) translateY(49vh) scale(0.5);
  }
}
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 15s;
}
.firefly:nth-child(9)::after {
  animation-duration: 15s, 8072ms;
  animation-delay: 0ms, 3114ms;
}

@keyframes move9 {
  0% {
    transform: translateX(-21vw) translateY(45vh) scale(0.98);
  }
  4% {
    transform: translateX(19vw) translateY(-9vh) scale(0.95);
  }
  8% {
    transform: translateX(15vw) translateY(-12vh) scale(0.86);
  }
  12% {
    transform: translateX(-39vw) translateY(47vh) scale(0.52);
  }
  16% {
    transform: translateX(42vw) translateY(48vh) scale(0.28);
  }
  20% {
    transform: translateX(-1vw) translateY(-37vh) scale(0.46);
  }
  24% {
    transform: translateX(-17vw) translateY(47vh) scale(0.44);
  }
  28% {
    transform: translateX(-47vw) translateY(35vh) scale(0.67);
  }
  32% {
    transform: translateX(24vw) translateY(8vh) scale(0.79);
  }
  36% {
    transform: translateX(34vw) translateY(26vh) scale(0.38);
  }
  40% {
    transform: translateX(-48vw) translateY(4vh) scale(0.45);
  }
  44% {
    transform: translateX(-41vw) translateY(-49vh) scale(0.52);
  }
  48% {
    transform: translateX(42vw) translateY(49vh) scale(0.5);
  }
  52% {
    transform: translateX(24vw) translateY(37vh) scale(0.95);
  }
  56% {
    transform: translateX(20vw) translateY(-42vh) scale(0.44);
  }
  60% {
    transform: translateX(-40vw) translateY(10vh) scale(0.64);
  }
  64% {
    transform: translateX(34vw) translateY(-30vh) scale(0.84);
  }
  68% {
    transform: translateX(-20vw) translateY(-42vh) scale(0.39);
  }
  72% {
    transform: translateX(-37vw) translateY(40vh) scale(0.95);
  }
  76% {
    transform: translateX(-30vw) translateY(-18vh) scale(0.77);
  }
  80% {
    transform: translateX(-23vw) translateY(-18vh) scale(0.59);
  }
  84% {
    transform: translateX(-22vw) translateY(28vh) scale(0.61);
  }
  88% {
    transform: translateX(18vw) translateY(-48vh) scale(0.41);
  }
  92% {
    transform: translateX(43vw) translateY(35vh) scale(0.58);
  }
  96% {
    transform: translateX(-28vw) translateY(36vh) scale(0.75);
  }
  100% {
    transform: translateX(-24vw) translateY(-6vh) scale(0.33);
  }
}
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 16s;
}
.firefly:nth-child(10)::after {
  animation-duration: 16s, 10192ms;
  animation-delay: 0ms, 2141ms;
}

@keyframes move10 {
  0% {
    transform: translateX(-23vw) translateY(31vh) scale(0.63);
  }
  5.2631578947% {
    transform: translateX(-44vw) translateY(16vh) scale(0.31);
  }
  10.5263157895% {
    transform: translateX(2vw) translateY(-28vh) scale(0.85);
  }
  15.7894736842% {
    transform: translateX(20vw) translateY(1vh) scale(0.47);
  }
  21.0526315789% {
    transform: translateX(-19vw) translateY(-4vh) scale(0.58);
  }
  26.3157894737% {
    transform: translateX(-33vw) translateY(-39vh) scale(0.98);
  }
  31.5789473684% {
    transform: translateX(46vw) translateY(-38vh) scale(1);
  }
  36.8421052632% {
    transform: translateX(-3vw) translateY(39vh) scale(0.56);
  }
  42.1052631579% {
    transform: translateX(-29vw) translateY(-39vh) scale(0.86);
  }
  47.3684210526% {
    transform: translateX(-16vw) translateY(-9vh) scale(0.38);
  }
  52.6315789474% {
    transform: translateX(48vw) translateY(-20vh) scale(0.73);
  }
  57.8947368421% {
    transform: translateX(-47vw) translateY(11vh) scale(0.54);
  }
  63.1578947368% {
    transform: translateX(28vw) translateY(-2vh) scale(0.9);
  }
  68.4210526316% {
    transform: translateX(-49vw) translateY(13vh) scale(1);
  }
  73.6842105263% {
    transform: translateX(21vw) translateY(-3vh) scale(0.44);
  }
  78.9473684211% {
    transform: translateX(-45vw) translateY(28vh) scale(0.71);
  }
  84.2105263158% {
    transform: translateX(21vw) translateY(-38vh) scale(0.77);
  }
  89.4736842105% {
    transform: translateX(-29vw) translateY(-6vh) scale(0.87);
  }
  94.7368421053% {
    transform: translateX(-15vw) translateY(44vh) scale(0.89);
  }
  100% {
    transform: translateX(-27vw) translateY(2vh) scale(0.8);
  }
}
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 14s;
}
.firefly:nth-child(11)::after {
  animation-duration: 14s, 8356ms;
  animation-delay: 0ms, 3418ms;
}

@keyframes move11 {
  0% {
    transform: translateX(-14vw) translateY(-34vh) scale(0.61);
  }
  4.5454545455% {
    transform: translateX(10vw) translateY(-31vh) scale(0.26);
  }
  9.0909090909% {
    transform: translateX(-5vw) translateY(-39vh) scale(0.49);
  }
  13.6363636364% {
    transform: translateX(30vw) translateY(-18vh) scale(0.72);
  }
  18.1818181818% {
    transform: translateX(-43vw) translateY(4vh) scale(0.35);
  }
  22.7272727273% {
    transform: translateX(29vw) translateY(13vh) scale(0.37);
  }
  27.2727272727% {
    transform: translateX(-10vw) translateY(28vh) scale(0.52);
  }
  31.8181818182% {
    transform: translateX(-33vw) translateY(37vh) scale(0.51);
  }
  36.3636363636% {
    transform: translateX(-24vw) translateY(24vh) scale(0.57);
  }
  40.9090909091% {
    transform: translateX(39vw) translateY(-48vh) scale(0.26);
  }
  45.4545454545% {
    transform: translateX(-45vw) translateY(46vh) scale(0.98);
  }
  50% {
    transform: translateX(1vw) translateY(32vh) scale(0.81);
  }
  54.5454545455% {
    transform: translateX(-16vw) translateY(37vh) scale(0.32);
  }
  59.0909090909% {
    transform: translateX(17vw) translateY(49vh) scale(0.69);
  }
  63.6363636364% {
    transform: translateX(31vw) translateY(37vh) scale(0.69);
  }
  68.1818181818% {
    transform: translateX(21vw) translateY(23vh) scale(0.45);
  }
  72.7272727273% {
    transform: translateX(-42vw) translateY(19vh) scale(0.98);
  }
  77.2727272727% {
    transform: translateX(14vw) translateY(-29vh) scale(0.37);
  }
  81.8181818182% {
    transform: translateX(35vw) translateY(-49vh) scale(0.87);
  }
  86.3636363636% {
    transform: translateX(2vw) translateY(34vh) scale(0.74);
  }
  90.9090909091% {
    transform: translateX(-47vw) translateY(44vh) scale(0.39);
  }
  95.4545454545% {
    transform: translateX(44vw) translateY(47vh) scale(0.84);
  }
  100% {
    transform: translateX(-47vw) translateY(-26vh) scale(0.89);
  }
}
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 18s;
}
.firefly:nth-child(12)::after {
  animation-duration: 18s, 7446ms;
  animation-delay: 0ms, 5140ms;
}

@keyframes move12 {
  0% {
    transform: translateX(-15vw) translateY(35vh) scale(0.48);
  }
  5.2631578947% {
    transform: translateX(11vw) translateY(50vh) scale(0.56);
  }
  10.5263157895% {
    transform: translateX(36vw) translateY(7vh) scale(0.4);
  }
  15.7894736842% {
    transform: translateX(2vw) translateY(5vh) scale(0.43);
  }
  21.0526315789% {
    transform: translateX(38vw) translateY(16vh) scale(0.76);
  }
  26.3157894737% {
    transform: translateX(49vw) translateY(-40vh) scale(0.92);
  }
  31.5789473684% {
    transform: translateX(48vw) translateY(-25vh) scale(0.31);
  }
  36.8421052632% {
    transform: translateX(14vw) translateY(28vh) scale(0.67);
  }
  42.1052631579% {
    transform: translateX(30vw) translateY(-30vh) scale(0.84);
  }
  47.3684210526% {
    transform: translateX(-29vw) translateY(44vh) scale(0.44);
  }
  52.6315789474% {
    transform: translateX(-22vw) translateY(-47vh) scale(0.77);
  }
  57.8947368421% {
    transform: translateX(41vw) translateY(-35vh) scale(1);
  }
  63.1578947368% {
    transform: translateX(-37vw) translateY(-10vh) scale(0.57);
  }
  68.4210526316% {
    transform: translateX(46vw) translateY(-37vh) scale(0.48);
  }
  73.6842105263% {
    transform: translateX(-44vw) translateY(24vh) scale(0.73);
  }
  78.9473684211% {
    transform: translateX(46vw) translateY(34vh) scale(0.43);
  }
  84.2105263158% {
    transform: translateX(-31vw) translateY(-43vh) scale(1);
  }
  89.4736842105% {
    transform: translateX(34vw) translateY(27vh) scale(0.43);
  }
  94.7368421053% {
    transform: translateX(-43vw) translateY(23vh) scale(0.97);
  }
  100% {
    transform: translateX(33vw) translateY(12vh) scale(0.62);
  }
}
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 16s;
}
.firefly:nth-child(13)::after {
  animation-duration: 16s, 8130ms;
  animation-delay: 0ms, 5530ms;
}

@keyframes move13 {
  0% {
    transform: translateX(34vw) translateY(48vh) scale(0.39);
  }
  4.347826087% {
    transform: translateX(4vw) translateY(5vh) scale(1);
  }
  8.6956521739% {
    transform: translateX(-1vw) translateY(-36vh) scale(0.89);
  }
  13.0434782609% {
    transform: translateX(-3vw) translateY(-49vh) scale(0.3);
  }
  17.3913043478% {
    transform: translateX(5vw) translateY(-47vh) scale(0.52);
  }
  21.7391304348% {
    transform: translateX(-48vw) translateY(35vh) scale(0.72);
  }
  26.0869565217% {
    transform: translateX(18vw) translateY(-27vh) scale(0.28);
  }
  30.4347826087% {
    transform: translateX(8vw) translateY(-48vh) scale(0.84);
  }
  34.7826086957% {
    transform: translateX(-14vw) translateY(-25vh) scale(0.54);
  }
  39.1304347826% {
    transform: translateX(38vw) translateY(26vh) scale(0.29);
  }
  43.4782608696% {
    transform: translateX(-28vw) translateY(-38vh) scale(0.26);
  }
  47.8260869565% {
    transform: translateX(17vw) translateY(-2vh) scale(0.68);
  }
  52.1739130435% {
    transform: translateX(-15vw) translateY(46vh) scale(0.62);
  }
  56.5217391304% {
    transform: translateX(13vw) translateY(-21vh) scale(0.33);
  }
  60.8695652174% {
    transform: translateX(47vw) translateY(-1vh) scale(0.99);
  }
  65.2173913043% {
    transform: translateX(-31vw) translateY(5vh) scale(0.45);
  }
  69.5652173913% {
    transform: translateX(-12vw) translateY(38vh) scale(0.68);
  }
  73.9130434783% {
    transform: translateX(-43vw) translateY(20vh) scale(0.57);
  }
  78.2608695652% {
    transform: translateX(-30vw) translateY(-10vh) scale(0.67);
  }
  82.6086956522% {
    transform: translateX(-15vw) translateY(-27vh) scale(0.65);
  }
  86.9565217391% {
    transform: translateX(29vw) translateY(14vh) scale(0.99);
  }
  91.3043478261% {
    transform: translateX(15vw) translateY(45vh) scale(0.31);
  }
  95.652173913% {
    transform: translateX(4vw) translateY(-14vh) scale(0.55);
  }
  100% {
    transform: translateX(43vw) translateY(45vh) scale(0.44);
  }
}
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 14s;
}
.firefly:nth-child(14)::after {
  animation-duration: 14s, 9592ms;
  animation-delay: 0ms, 5483ms;
}

@keyframes move14 {
  0% {
    transform: translateX(48vw) translateY(-12vh) scale(1);
  }
  3.7037037037% {
    transform: translateX(-28vw) translateY(13vh) scale(0.56);
  }
  7.4074074074% {
    transform: translateX(-24vw) translateY(37vh) scale(0.29);
  }
  11.1111111111% {
    transform: translateX(42vw) translateY(22vh) scale(0.94);
  }
  14.8148148148% {
    transform: translateX(45vw) translateY(-26vh) scale(0.36);
  }
  18.5185185185% {
    transform: translateX(-47vw) translateY(-23vh) scale(0.85);
  }
  22.2222222222% {
    transform: translateX(27vw) translateY(-34vh) scale(0.76);
  }
  25.9259259259% {
    transform: translateX(-41vw) translateY(39vh) scale(0.95);
  }
  29.6296296296% {
    transform: translateX(-43vw) translateY(6vh) scale(0.38);
  }
  33.3333333333% {
    transform: translateX(6vw) translateY(9vh) scale(0.84);
  }
  37.037037037% {
    transform: translateX(-26vw) translateY(39vh) scale(0.83);
  }
  40.7407407407% {
    transform: translateX(12vw) translateY(-26vh) scale(0.3);
  }
  44.4444444444% {
    transform: translateX(-31vw) translateY(-2vh) scale(0.78);
  }
  48.1481481481% {
    transform: translateX(45vw) translateY(4vh) scale(0.67);
  }
  51.8518518519% {
    transform: translateX(-30vw) translateY(18vh) scale(0.47);
  }
  55.5555555556% {
    transform: translateX(27vw) translateY(20vh) scale(0.98);
  }
  59.2592592593% {
    transform: translateX(26vw) translateY(-35vh) scale(0.89);
  }
  62.962962963% {
    transform: translateX(23vw) translateY(-47vh) scale(0.58);
  }
  66.6666666667% {
    transform: translateX(39vw) translateY(-16vh) scale(0.45);
  }
  70.3703703704% {
    transform: translateX(-17vw) translateY(-15vh) scale(0.79);
  }
  74.0740740741% {
    transform: translateX(-14vw) translateY(41vh) scale(0.27);
  }
  77.7777777778% {
    transform: translateX(-5vw) translateY(36vh) scale(0.62);
  }
  81.4814814815% {
    transform: translateX(4vw) translateY(7vh) scale(0.44);
  }
  85.1851851852% {
    transform: translateX(-28vw) translateY(-42vh) scale(0.48);
  }
  88.8888888889% {
    transform: translateX(-16vw) translateY(21vh) scale(0.96);
  }
  92.5925925926% {
    transform: translateX(-49vw) translateY(19vh) scale(0.69);
  }
  96.2962962963% {
    transform: translateX(35vw) translateY(-29vh) scale(0.55);
  }
  100% {
    transform: translateX(-15vw) translateY(46vh) scale(0.6);
  }
}
.firefly:nth-child(15) {
  animation-name: move15;
}
.firefly:nth-child(15)::before {
  animation-duration: 9s;
}
.firefly:nth-child(15)::after {
  animation-duration: 9s, 10503ms;
  animation-delay: 0ms, 1572ms;
}

@keyframes move15 {
  0% {
    transform: translateX(-8vw) translateY(-24vh) scale(0.57);
  }
  5.5555555556% {
    transform: translateX(-41vw) translateY(-11vh) scale(0.45);
  }
  11.1111111111% {
    transform: translateX(32vw) translateY(-15vh) scale(0.48);
  }
  16.6666666667% {
    transform: translateX(28vw) translateY(-2vh) scale(0.39);
  }
  22.2222222222% {
    transform: translateX(-47vw) translateY(-10vh) scale(0.84);
  }
  27.7777777778% {
    transform: translateX(40vw) translateY(33vh) scale(0.58);
  }
  33.3333333333% {
    transform: translateX(-3vw) translateY(26vh) scale(0.82);
  }
  38.8888888889% {
    transform: translateX(40vw) translateY(17vh) scale(0.38);
  }
  44.4444444444% {
    transform: translateX(32vw) translateY(25vh) scale(0.73);
  }
  50% {
    transform: translateX(41vw) translateY(39vh) scale(0.43);
  }
  55.5555555556% {
    transform: translateX(18vw) translateY(-38vh) scale(0.44);
  }
  61.1111111111% {
    transform: translateX(-49vw) translateY(-42vh) scale(0.29);
  }
  66.6666666667% {
    transform: translateX(50vw) translateY(-1vh) scale(0.38);
  }
  72.2222222222% {
    transform: translateX(-30vw) translateY(-24vh) scale(0.69);
  }
  77.7777777778% {
    transform: translateX(-35vw) translateY(-26vh) scale(0.55);
  }
  83.3333333333% {
    transform: translateX(50vw) translateY(48vh) scale(0.87);
  }
  88.8888888889% {
    transform: translateX(37vw) translateY(-27vh) scale(0.66);
  }
  94.4444444444% {
    transform: translateX(45vw) translateY(12vh) scale(0.88);
  }
  100% {
    transform: translateX(-30vw) translateY(17vh) scale(0.85);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}

.rtl-text {direction:rtl!important;display: inline-block;}
.icon-button    { display:none;}
 .mineC { display:none; }
.tagV{border:red solid 0px; display: flex;
  justify-content: center; padding:0; margin:0; text-align: cenetr !important; font-size:12px; font-family:Tajawal; opacity:0.5} 

.tagV2{border:red solid 0px; display: flex;
  justify-content: center; padding:0; margin:0; text-align: cenetr !important; font-size:14px; font-family:Tajawal; font-weight:300; color:green; } 
.hide{ display:none!important;}  











 .buttonv {
  cursor: pointer;
  font-family: Tajawal;
  font-weight: normal;
  line-height: 30px;
  margin:10px 0; margin-bottom:2px;
  position: relative; 
  text-decoration: none;
  text-align: right;
  display: inline-block;
  padding-top:0.8rem!important;
  padding-right: 60px!important;
  padding-bottom:0;
  padding-left: 1rem;
  font-size: 13px!important;
  background-color: #008cba;
  border-color: #0079a1;
  color: white;
  -webkit-transition: background-color 300ms ease-out;
  -moz-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
  -webkit-appearance: none;
  border: none;
  font-weight: normal !important; 
  width:100%; height:45px;
  }
  .rk { font-size:10px; color:rgba(255,255,255,0.8);}
  .buttonv:hover, .buttonv:focus, .buttonv:hover, .buttonv:focus {
    background-color: #0079a1; 
    color: white;
    outline: 0; /* Added for removing the outline border */
  }
 
  .buttonv.success, .buttonv.success {
    background-color: #43ac6a;
    border-color: #3c9a5f;
    color: white; }
    .buttonv.success:hover, .buttonv.success:focus, .buttonv.success:hover, .buttonv.success:focus {
      background-color: #3c9a5f; }
    .buttonv.success:hover, .buttonv.success:focus, .buttonv.success:hover, .buttonv.success:focus {
      color: white; }

/* The CSS for Icons Label */
.btn-labeled{
  padding-top:0;
  padding-bottom:1px
  }
  .btn-label{
    position:absolute;
    right:0!important;
	top:0;
    display:inline-block;
    padding-top: 0.80rem;
    padding-right: 1rem;
    padding-bottom: 0.2rem;
    padding-left: 1rem;
    background:rgba(0,0,0,0.50);
    border-radius:3px 0 0 3px;
	height:45px;
    }
   .btn-label i{ font-size:20px;  color:#43ac6a;}
    .btn-label.btn-label-right{
      right:0!important;
    
      border-radius:0 3px 3px 0
    }

 

  /* Same as in foundation */
  button.radius, .button.radius {
    -webkit-border-radius: 3px;
    border-radius: 3px; }
	
	
 .ev , .ev{ display:none;}

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}
 
 .flag {
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background-color: white;
  background-size: cover;
  background-position: center;
  border:3px solid #fff;
  position:absolute;
 z-index:3;
  position: absolute;
  right: 0;
  margin-right: auto;
  left: -100px;
  margin-left: auto;
  top: 160px;
 /* box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);  */
}
img.flag {
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  object-fit: cover;
}
.flag.eg {
  background-image: url('../img/flags/eg.svg');
}
.flag.sa {
  background-image: url('../img/flags/sa.png');
}
.online{
position:absolute; width:13px; height:13px; background:#00a293; border:white solid 2px; border-radius:50%;	
z-index:1; right:-2px; bottom:4px;	
}

.offline{
position:absolute; width:13px; height:13px; background:#ccc; border:white solid 2px; border-radius:50%;	
z-index:1; right:-2px; bottom:4px;	
}
.audioCn{/*
position:absolute; z-index:3; top:25px; left:18px; background:#fff ; color:#00a293; border:#00a293 solid 1px;  border-radius:3px;
font-family:Tajawal; font-size:10px; padding:2px 8px;
	*/
}

/*
.ribbon-wrapper {
  width: 85px;
  height: 71px;
  overflow: hidden;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index:2;
}
.ribbon-wrapper .ribbon {
  font: bold 15px sans-serif;
  color: #333; font-family:Tajawal; font-size:12px;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: relative;
  padding: 7px 0;
  top: 15px;
  left: -30px;
  width: 120px;
  background-color: #ebb134;
  color: #fff;
}
.hidden_ribbon { opacity:0;}
.rrv{position:absolute; z-index:3; padding:1px 4px; text-align:cenetr; top:7px; left:17px; background:red; 
color:white; font-family:Tajawal; font-weight:bold; font-size:8px; border-radius:2px; }*/

.ribbon-wrapper {
  width: 45px;
  height: 71px;
  overflow: hidden;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index:2;
}
.ribbon-wrapper .ribbon {
  font: bold 15px Tajawal; font-size:10px;
  color: #333; font-family:Tajawal; font-size:12px;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: relative;
  padding: 0px 0; padding-left:16px; 
  top: 11px;
  left:  -46px;
  width: 110px;
  background-color: red;
  color: #fff;
}
.hidden_ribbon { opacity:0;}
.get_{position: relative; }
.rounf {
position: absolute; background:rgba(255,255,255,0.9); color:green;
font-size:14px; text-align:cenetr; line-height:25px;
border-radius:100%;   width:22px; height:22px; left:8px; top:10px; z-index:2;	
}
.co_av{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;  }
.relA { font-size:15px; font-weight:500; color:green;}