/* You can type here any CSS code that will be loaded both on your admin and front-end pages.
Let us help you by giving a few exmaple CSS classes: */

/* Front-end sliders & preview */

.ls-container { /* The slider itself */

}

.ls-slide { 

}

.ls-slide a:hover {
	color: blue;
	text-decoration: underline;
}

.ls-slide #yourID {

}

.ls-slide .yourClass {

}
.test1 {
opacity:1;
background: rgba(255, 255, 255, 0.1);
}
.test2 {
opacity: 1;
background-color: #8B2D7A;
}
.test21 {
 opacity: 1;
 background: rgba(255, 255, 255, 0.5);
 //background-position: 0 0;
}
.test22{
 opacity: 0;
}

/* All the Buttons */
   .ls-slide #H1 , .ls-slide #H2 , .ls-slide #H3, .ls-slide #H4,  .ls-slide #H5, .ls-slide #H51, .ls-slide #H52, .ls-slide #H53, .ls-slide #H6, .ls-slide #H7 , .ls-slide #H8 , .ls-slide #H9 , .ls-slide #H10 , .ls-slide #HH11 , .ls-slide #HH12 , .ls-slide #HH13 , .ls-slide #HtEST   {
   
           position: relative;
             text-align: center;
              height:40px;
            width:40px;
           text-shadow:   0 0 5px #E53589 , 0px 0px 16px #FFFFFF ;
           -moz-border-radius: 20px;
	  -webkit-border-radius: 20px;
	   border-radius: 20x;
           background-color: #8B2D7A;
            background-size: 100% 100%;
           word-wrap: break-word;
           font-size: 24px;
           font-family: 'PT Sans', sans-serif;
            -webkit-transition:   2s ;
                        transition:  2s;
           animation: mymove1 2s infinite;
       
        }
/* Button Background Animation */

.ls-slide #BN1 , .ls-slide #H1C1 , .ls-slide #H1C2 , .ls-slide #H1C3  , .ls-slide #H1S1 , .ls-slide #H1S2 , .ls-slide #H1S3 , .ls-slide #H1F1 , .ls-slide #H1F2 , .ls-slide #H1F3  , .ls-slide #H1D1 , .ls-slide #H1D2 , .ls-slide #H1D3 , .ls-slide #H1B1 , .ls-slide #H1B2 , .ls-slide #H1B3, .ls-slide #H1A1 , .ls-slide #H1A2 , .ls-slide #H1A3 {
   
           position: relative;
          text-align: center;
            font-size: 24px;
            line-height: 50px;
           line-width: 50px;
            height: 50px;
            width: 50px;
             text-shadow:   0 0 5px #E53589 , 0px 0px 16px #FFFFFF ;
           -moz-border-radius: 25px;
	  -webkit-border-radius: 25px;
	   border-radius: 25x;
           background-color: #8B2D7A;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            -webkit-transition:   2s ;
                        transition:  2s;
           animation: mymove1 2s infinite;
        }

@keyframes mymove1 {
    0%{box-shadow: 0px 0px 45px #8B2D7A;}
    25%{box-shadow: 0px 0px 5px #8B2D7A;}
50%{box-shadow: 0px 0px 5px #E53589 ;}
100%{box-shadow: 0px 0px 45px #E53589 ;}


}
/* Button hover Animation */
  .ls-slide #H1:hover , .ls-slide #H2:hover , .ls-slide #H3:hover , .ls-slide #H4:hover ,  .ls-slide #H5:hover , .ls-slide #H51:hover , .ls-slide #H52:hover , .ls-slide #H53:hover , .ls-slide #H6:hover , .ls-slide #H7:hover  , .ls-slide #H8hover  , .ls-slide #H9:hover  , .ls-slide #H10:hover  , .ls-slide #HH11:hover  , .ls-slide #HH12:hover  , .ls-slide #HH13:hover  , .ls-slide #H1Nut1:hover , .ls-slide #H1Nut2:hover , .ls-slide #H1Nut3:hover  , .ls-slide #H1C1:hover , .ls-slide #H1C2:hover , .ls-slide #H1C3:hover , .ls-slide #H1S1:hover , .ls-slide #H1S2:hover , .ls-slide #H1S3:hover  , .ls-slide #H1F1:hover , .ls-slide #H1F2:hover , .ls-slide #H1F3:hover  , .ls-slide #H1D1:hover , .ls-slide #H1D2:hover , .ls-slide #H1D3:hover    , .ls-slide #H1B1:hover , .ls-slide #H1B2:hover , .ls-slide #H1B3:hover  , .ls-slide #H1A1:hover , .ls-slide #H1A2:hover , .ls-slide #H1A3:hover {
 
	font-size: 24px;
	cursor:pointer;
	background:#E53589;
	-webkit-transform: rotate(45deg);
 
}


/* Box Pop up  */

 
   .ls-slide  #H11 ,  .ls-slide  #H12 , .ls-slide  #H13 , .ls-slide  #H14 , .ls-slide  #H15 , .ls-slide  #H151 , .ls-slide  #H152 , .ls-slide  #H153 , .ls-slide  #H16 , .ls-slide  #H17 , .ls-slide  #H18, .ls-slide  #H19, .ls-slide  #H110, .ls-slide  #H111, .ls-slide  #H112, .ls-slide  #H113 {
            position: relative;
            text-align: center;
            color: black;
            background: rgba(255, 255, 255, 0.5);
            font-size: 48px;
            line-height: 108px;
            height: 208px;
            width: 400px;
            border-radius: 10px;
            border-style: solid;
            border-width: 10px;
            border-color: #E53589;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            animation: mymove1 2s infinite;
              

}

/* Line Animations Background Animation */

 .ls-slide .path1 ,.ls-slide .path2 , .ls-slide .path3 , .ls-slide .path4 , .ls-slide .path51 , .ls-slide .path52 , .ls-slide .path53 , .ls-slide .path6 , .ls-slide .path7  , .ls-slide .path8 , .ls-slide .path9 , .ls-slide .path10 , .ls-slide .path111 , .ls-slide .path12 , .ls-slide .path13
{
position: relative;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 2s linear 1 reverse;

}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}

 .ls-slide .path11 ,  .ls-slide .path22 , .ls-slide .path33 , .ls-slide .path44 , .ls-slide .path511 , .ls-slide .path522 , .ls-slide .path533 , .ls-slide .path66 , .ls-slide .path77 , .ls-slide .path88 , .ls-slide .path99 , .ls-slide .path110 , .ls-slide .path1111 , .ls-slide .path112 , .ls-slide .path133
{
position: relative;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash1 1.5s linear  ;

}

@keyframes dash1 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}



#set-height {
  display: block;
}
#v0 {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;

}

/* Glowing Gut page Button Background Animation */
 .ls-slide #H1n ,  .ls-slide #H2n , .ls-slide #H3n  {
   
            position: relative;
            text-align: center;
            font-size: 24px;
            line-height: 50px;
            line-width: 50px;
            height: 50px;
            width: 50px;
            text-shadow:   0 0 5px #E53589 , 0px 0px 16px #FFFFFF ;
            -moz-border-radius: 25px;
	        -webkit-border-radius: 25px;
	        border-radius: 25x;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            -webkit-transition:   2s ;
            transition:  2s;
             animation: mymove2 2s infinite;
        }
   
		@keyframes mymove2 {
			0%{box-shadow: 0px 0px 45px #000000;}
			25%{box-shadow: 0px 0px 5px#000000;}
		50%{box-shadow: 0px 0px 5px #0F0F0F ;}
		100%{box-shadow: 0px 0px 45px #0F0F0F ;}
		}
		
		/* Glowing Gut page Button hover Animation */
		.ls-slide #H1n:hover , .ls-slide #H2n:hover , .ls-slide #H3n:hover  {
		 
			font-size: 24px;
			cursor:pointer;
			background:#E53589;
			color: #E53589;
			text-shadow: 2px 2px #000000;
			-webkit-transform: rotate(45deg);
		   }


		   /* Application page img hover Animation */
		.ls-slide #img1:hover , .ls-slide #img2:hover , .ls-slide #img3:hover , .ls-slide #img4:hover , .ls-slide #img5:hover , .ls-slide #img6:hover , .ls-slide #img7:hover {
			cursor:pointer;
			animation: mymove3 1s linear infinite alternate
			}
		@keyframes mymove3 {
				0%{  transform: rotate(7deg);}
				25%{  transform: rotate(-7deg);}
				50%{  transform: rotate(7deg);}
					100%{  transform: rotate(-7deg);}
		}

		/* Application page Layer 1 Box */

			/* Application page Layer 1 Image */
				.ls-slide #im1 , .ls-slide #im2 , .ls-slide #im3  , .ls-slide #im11  , .ls-slide #im22 , .ls-slide #im33 , .ls-slide #im1C , .ls-slide #im2C , .ls-slide #im3C  , .ls-slide #im11C  , .ls-slide #im22C , .ls-slide #im33C  , .ls-slide #im1S , .ls-slide #im2S , .ls-slide #im3S  , .ls-slide #im11S  , .ls-slide #im22S , .ls-slide #im33S , .ls-slide #im1F , .ls-slide #im2F , .ls-slide #im3F  , .ls-slide #im11F  , .ls-slide #im22F , .ls-slide #im33F  , .ls-slide #im1D , .ls-slide #im2D , .ls-slide #im3D  , .ls-slide #im11D  , .ls-slide #im22D , .ls-slide #im33D  , .ls-slide #im1B , .ls-slide #im2B , .ls-slide #im3B  , .ls-slide #im11B  , .ls-slide #im22B , .ls-slide #im33B, .ls-slide #im1A , .ls-slide #im2A , .ls-slide #im3A  , .ls-slide #im11A  , .ls-slide #im22A , .ls-slide #im33A{
				z-index:0;
				position:absolute;
                                  -webkit-transition:   2s ;
                                      transition:  2s;
                                animation: myBox 4s 1;
                               				} 







 .ls-slide #H1Hand ,  .ls-slide #H1Hand1 {
   
           position: relative;
          text-align: center;
            font-size: 24px;
            line-height: 50px;
           line-width: 50px;
            height: 50px;
            width: 50px;
             text-shadow:   0 0 5px #E53589 , 0px 0px 16px #FFFFFF ;
           -moz-border-radius: 25px;
	  -webkit-border-radius: 25px;
	   border-radius: 25x;
          background:#FFFFFF;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            -webkit-transition:   2s ;
                        transition:  2s;
           animation: mymove1 2s infinite;
        }
/* Button Background Animation */

@keyframes mymove1 {
    0%{box-shadow: 0px 0px 45px #000000;}
    25%{box-shadow: 0px 0px 5px #E53589 ;}
50%{box-shadow: 0px 0px 5px #8B2D7A;}
100%{box-shadow: 0px 0px 45px #000000;}


}
.ls-slide #H1Hand:hover , .ls-slide #H1Hand1:hover {
 
	font-size: 24px;
	cursor:pointer;
	background:#E53589;
	-webkit-transform: rotate(45deg);
 
}


.ls-slide  #Hand {
            
            position: relative;
            text-align: center;
            color: black;
            
            font-size: 40px;
            line-height: 108px;
            height: 208px;
            width: 1000px;
            border-radius: 0px;
            border-style: solid;
            border-width: 0px;
            border-color: #E53589;
          
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
              
        
}

/* ALL NEWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW */

	 .ls-slide  #BN1 , .ls-slide  #BN11 , .ls-slide  #BN2 , .ls-slide  #BN22 , .ls-slide  #BN3  , .ls-slide  #BN33 , .ls-slide  #BC1 , .ls-slide  #BC11 , .ls-slide  #BC2 , .ls-slide  #BC22 , .ls-slide  #BC3  , .ls-slide  #BC33 , .ls-slide  #BS1 , .ls-slide  #BS11 , .ls-slide  #BS2 , .ls-slide  #BS22 , .ls-slide  #BS3  , .ls-slide  #BS33 , .ls-slide  #BF1 , .ls-slide  #BF11 , .ls-slide  #BF2 , .ls-slide  #BF22 , .ls-slide  #BF3  , .ls-slide  #BF33  , .ls-slide  #BD1 , .ls-slide  #BD11 , .ls-slide  #BD2 , .ls-slide  #BD22 , .ls-slide  #BD3  , .ls-slide  #BD33  , .ls-slide  #BB1 , .ls-slide  #BB11 , .ls-slide  #BB2 , .ls-slide  #BB22 , .ls-slide  #BB3  , .ls-slide  #BB33  , .ls-slide  #BDR1 , .ls-slide  #BDR11 , .ls-slide  #BDR2 , .ls-slide  #BDR22 , .ls-slide  #BDR3  , .ls-slide  #BDR33{
						position: relative;
						text-align: center;
					        color: black;
					        background: rgba(0, 0, 0, 0.8);
						font-size: 48px;
						line-height: 108px;
						height: 950px;
						width: 1920px;
						box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
						color: #fff;
						font-family: 'PT Sans', sans-serif;
						animation: myBox 2s 1;
        }

/* BoxBackground Animation */

@keyframes myBox {
    0%{opacity: 0.25;}
    25%{opacity: 0.5;}
50%{opacity: 0.75;}
100%{opacity: 1;}
}

.ls-slide  #BN1:hover , .ls-slide  #BN11:hover , .ls-slide  #BN2:hover , .ls-slide  #BN22:hover , .ls-slide  #BN3:hover , .ls-slide  #BN33:hover , .ls-slide  #BC1:hover , .ls-slide  #BC11:hover , .ls-slide  #BC2:hover , .ls-slide  #BC22:hover , .ls-slide  #BC3:hover , .ls-slide  #BC33:hover   , .ls-slide  #BS1:hover , .ls-slide  #BS11:hover , .ls-slide  #BS2:hover , .ls-slide  #BS22:hover , .ls-slide  #BS3:hover , .ls-slide  #BS33:hover , .ls-slide  #BF1:hover , .ls-slide  #BF11:hover , .ls-slide  #BF2:hover , .ls-slide  #BF22:hover , .ls-slide  #BF3:hover , .ls-slide  #BF33:hover   , .ls-slide  #BD1:hover , .ls-slide  #BD11:hover , .ls-slide  #BD2:hover , .ls-slide  #BD22:hover , .ls-slide  #BD3:hover , .ls-slide  #BD33:hover , .ls-slide  #BB1:hover , .ls-slide  #BB11:hover , .ls-slide  #BB2:hover , .ls-slide  #BB22:hover , .ls-slide  #BB3:hover , .ls-slide  #BB33:hover   , .ls-slide  #BDR1:hover , .ls-slide  #BDR11:hover , .ls-slide  #BDR2:hover , .ls-slide  #BDR22:hover , .ls-slide  #BDR3:hover , .ls-slide  #BDR33:hover{
 
	cursor:pointer;
         background:#E53589;
        -webkit-transform: rotate(45deg);
	
 }


/* Side color of 3D objects */
.ls-3d-box div { background: #777; }