.parallax {
    /* The image used */
    background-image: url("../images/parallax.webp");

    /* Set a specific height */
    min-height: 400px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.frame {
  overflow: hidden;
}
.frame .wolf {
  background-image: url(../wolf.png);
  width: 500px;
  height: 209px;
  position: absolute;
  bottom: 0;
  background-position: -49px;
}
.frame .moon {
  border-radius: 50%;
  background-color: #999999;
  box-shadow: 0 0 0 25px rgba(200, 200, 230, 0.1), 0 0 0 50px rgba(200, 200, 230, 0.05), 0 0 0 75px rgba(200, 200, 230, 0.01), 0 0 200px rgba(200, 200, 230, 0.5);
}
.frame .moon:after {
  background-image: url(../bgMoon.webp);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-size: 100%;
  opacity: .3;
  box-shadow: 0 0 60px inset;
}
.frame .constellation {
  width: 100%;
  height: 100%;
  position: absolute;
}
.frame .constellation .star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
}
.frame .constellation.stars-a {
  animation: rotate360 200s linear infinite;
}
.frame .constellation.stars-b {
  animation: rotate360 100s linear infinite;
}

.frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  height: 500px;
  margin: auto;
}

.moon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  margin: auto;
}

.stars-a .star:nth-child(1) {
  top: 437px;
  left: 455px;
  width: 1px;
  height: 1px;
  animation: blink 0.1s infinite;
}
.stars-a .star:nth-child(2) {
  top: 55px;
  left: 236px;
  width: 2px;
  height: 2px;
  animation: blink 0.2s infinite;
}
.stars-a .star:nth-child(3) {
  top: 20px;
  left: 300px;
  width: 1px;
  height: 1px;
  animation: blink 0.3s infinite;
}
.stars-a .star:nth-child(4) {
  top: 209px;
  left: 281px;
  width: 1px;
  height: 1px;
  animation: blink 0.4s infinite;
}
.stars-a .star:nth-child(5) {
  top: 352px;
  left: 421px;
  width: 3px;
  height: 3px;
  animation: blink 0.5s infinite;
}
.stars-a .star:nth-child(6) {
  top: 263px;
  left: 194px;
  width: 1px;
  height: 1px;
  animation: blink 0.6s infinite;
}
.stars-a .star:nth-child(7) {
  top: 242px;
  left: 243px;
  width: 2px;
  height: 2px;
  animation: blink 0.7s infinite;
}
.stars-a .star:nth-child(8) {
  top: 283px;
  left: 108px;
  width: 1px;
  height: 1px;
  animation: blink 0.8s infinite;
}
.stars-a .star:nth-child(9) {
  top: 142px;
  left: 271px;
  width: 1px;
  height: 1px;
  animation: blink 0.9s infinite;
}
.stars-a .star:nth-child(10) {
  top: 486px;
  left: 192px;
  width: 1px;
  height: 1px;
  animation: blink 1s infinite;
}
.stars-a .star:nth-child(11) {
  top: 293px;
  left: 434px;
  width: 1px;
  height: 1px;
  animation: blink 1.1s infinite;
}
.stars-a .star:nth-child(12) {
  top: 323px;
  left: 378px;
  width: 3px;
  height: 3px;
  animation: blink 1.2s infinite;
}
.stars-a .star:nth-child(13) {
  top: 72px;
  left: 459px;
  width: 3px;
  height: 3px;
  animation: blink 1.3s infinite;
}
.stars-a .star:nth-child(14) {
  top: 91px;
  left: 397px;
  width: 2px;
  height: 2px;
  animation: blink 1.4s infinite;
}
.stars-a .star:nth-child(15) {
  top: 421px;
  left: 127px;
  width: 1px;
  height: 1px;
  animation: blink 1.5s infinite;
}
.stars-a .star:nth-child(16) {
  top: 446px;
  left: 398px;
  width: 2px;
  height: 2px;
  animation: blink 1.6s infinite;
}
.stars-a .star:nth-child(17) {
  top: 212px;
  left: 135px;
  width: 1px;
  height: 1px;
  animation: blink 1.7s infinite;
}
.stars-a .star:nth-child(18) {
  top: 380px;
  left: 158px;
  width: 1px;
  height: 1px;
  animation: blink 1.8s infinite;
}
.stars-a .star:nth-child(19) {
  top: 149px;
  left: 462px;
  width: 3px;
  height: 3px;
  animation: blink 1.9s infinite;
}
.stars-a .star:nth-child(20) {
  top: 228px;
  left: 471px;
  width: 1px;
  height: 1px;
  animation: blink 2s infinite;
}
.stars-a .star:nth-child(21) {
  top: 204px;
  left: 191px;
  width: 1px;
  height: 1px;
  animation: blink 2.1s infinite;
}
.stars-a .star:nth-child(22) {
  top: 471px;
  left: 261px;
  width: 1px;
  height: 1px;
  animation: blink 2.2s infinite;
}
.stars-a .star:nth-child(23) {
  top: 108px;
  left: 70px;
  width: 2px;
  height: 2px;
  animation: blink 2.3s infinite;
}
.stars-a .star:nth-child(24) {
  top: 220px;
  left: 194px;
  width: 1px;
  height: 1px;
  animation: blink 2.4s infinite;
}
.stars-a .star:nth-child(25) {
  top: 63px;
  left: 172px;
  width: 3px;
  height: 3px;
  animation: blink 2.5s infinite;
}
.stars-a .star:nth-child(26) {
  top: 383px;
  left: 230px;
  width: 3px;
  height: 3px;
  animation: blink 2.6s infinite;
}

.stars-b .star:nth-child(1) {
  top: 496px;
  left: 380px;
  width: 2px;
  height: 2px;
  animation: blink 0.1s infinite;
}
.stars-b .star:nth-child(2) {
  top: 52px;
  left: 458px;
  width: 3px;
  height: 3px;
  animation: blink 0.2s infinite;
}
.stars-b .star:nth-child(3) {
  top: 303px;
  left: 174px;
  width: 2px;
  height: 2px;
  animation: blink 0.3s infinite;
}
.stars-b .star:nth-child(4) {
  top: 314px;
  left: 223px;
  width: 1px;
  height: 1px;
  animation: blink 0.4s infinite;
}
.stars-b .star:nth-child(5) {
  top: 262px;
  left: 429px;
  width: 2px;
  height: 2px;
  animation: blink 0.5s infinite;
}
.stars-b .star:nth-child(6) {
  top: 159px;
  left: 137px;
  width: 1px;
  height: 1px;
  animation: blink 0.6s infinite;
}
.stars-b .star:nth-child(7) {
  top: 69px;
  left: 462px;
  width: 2px;
  height: 2px;
  animation: blink 0.7s infinite;
}
.stars-b .star:nth-child(8) {
  top: 440px;
  left: 318px;
  width: 2px;
  height: 2px;
  animation: blink 0.8s infinite;
}
.stars-b .star:nth-child(9) {
  top: 82px;
  left: 31px;
  width: 3px;
  height: 3px;
  animation: blink 0.9s infinite;
}
.stars-b .star:nth-child(10) {
  top: 342px;
  left: 452px;
  width: 2px;
  height: 2px;
  animation: blink 1s infinite;
}
.stars-b .star:nth-child(11) {
  top: 334px;
  left: 418px;
  width: 1px;
  height: 1px;
  animation: blink 1.1s infinite;
}
.stars-b .star:nth-child(12) {
  top: 497px;
  left: 296px;
  width: 1px;
  height: 1px;
  animation: blink 1.2s infinite;
}
.stars-b .star:nth-child(13) {
  top: 11px;
  left: 457px;
  width: 2px;
  height: 2px;
  animation: blink 1.3s infinite;
}
.stars-b .star:nth-child(14) {
  top: 415px;
  left: 290px;
  width: 2px;
  height: 2px;
  animation: blink 1.4s infinite;
}
.stars-b .star:nth-child(15) {
  top: 304px;
  left: 455px;
  width: 3px;
  height: 3px;
  animation: blink 1.5s infinite;
}
.stars-b .star:nth-child(16) {
  top: 267px;
  left: 380px;
  width: 2px;
  height: 2px;
  animation: blink 1.6s infinite;
}
.stars-b .star:nth-child(17) {
  top: 188px;
  left: 459px;
  width: 2px;
  height: 2px;
  animation: blink 1.7s infinite;
}
.stars-b .star:nth-child(18) {
  top: 313px;
  left: 447px;
  width: 1px;
  height: 1px;
  animation: blink 1.8s infinite;
}
.stars-b .star:nth-child(19) {
  top: 364px;
  left: 129px;
  width: 3px;
  height: 3px;
  animation: blink 1.9s infinite;
}
.stars-b .star:nth-child(20) {
  top: 433px;
  left: 52px;
  width: 2px;
  height: 2px;
  animation: blink 2s infinite;
}
.stars-b .star:nth-child(21) {
  top: 353px;
  left: 4px;
  width: 3px;
  height: 3px;
  animation: blink 2.1s infinite;
}
.stars-b .star:nth-child(22) {
  top: 183px;
  left: 207px;
  width: 2px;
  height: 2px;
  animation: blink 2.2s infinite;
}
.stars-b .star:nth-child(23) {
  top: 355px;
  left: 285px;
  width: 1px;
  height: 1px;
  animation: blink 2.3s infinite;
}
.stars-b .star:nth-child(24) {
  top: 237px;
  left: 40px;
  width: 3px;
  height: 3px;
  animation: blink 2.4s infinite;
}
.stars-b .star:nth-child(25) {
  top: 105px;
  left: 94px;
  width: 1px;
  height: 1px;
  animation: blink 2.5s infinite;
}
.stars-b .star:nth-child(26) {
  top: 428px;
  left: 454px;
  width: 1px;
  height: 1px;
  animation: blink 2.6s infinite;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0% {
    box-shadow: 0;
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0;
  }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}
.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

#tableta1 {
				opacity: 0;
				translate:100vh;
		
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
			}
#tableta1.visible {
				opacity: 1;
		    translate:0;
		
			}
			
					
			
			
    .bounce {
      animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-name: bounce-7;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    }
    @keyframes bounce-7 {
        0%   {  translate:0 0; }
        10%  {  translate:0 0; }
        30%  {  translate:0 -100px; }
        50%  {  translate:0 0; }
        57%  {  translate:0 -7px; }
        64%  {  translate:0 0; }
        100% {  translate:0 0; }
    }
    
			.rot2a {
			  
			   transform-box: fill-box;
        transform-origin: center;
      animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-name: rota-7;
        
      /*  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);*/
    }
    @keyframes rota-7 {
        from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
    }

#Texto1 {
				opacity: 0;
				translate:100vh;
		
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
								
								border-radius: 25px;
                background: whitesmoke;
                border: 2px solid #73AD21;
                width: fit-content;
			}
#Texto1.visible {
				opacity: 1;
		    translate:10vw -30vh;
		    
			}
			
		#Texto1.invisible {
				opacity: 0;
		    translate:100vh -50vh;
			}
			
			#Texto1 h4{
			  padding: 12px;
			}
			

#Texto2 {
				opacity: 0;
				translate:-100vh 50vh;
		
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
								
									border-radius: 25px;
                background: whitesmoke;
                border: 2px solid #AD7321;
                width: fit-content;
			}
#Texto2.visible {
				opacity: 1;
		    translate:0 -50vh;
			}
			
		#Texto2.invisible {
				opacity: 0;
		    translate:100vh -50vh;
			}
			
			#Texto2 h4{
			  padding: 12px;
			}
			

#Texto3 {
				opacity: 0;
				translate:100vh;
		
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
									
									border-radius: 25px;
                background: whitesmoke;
                border: 2px solid #AD2173;
                width: fit-content;
			}
#Texto3.visible {
				opacity: 1;
		    translate:0 -50vh;
			}
			
		#Texto3.invisible {
				opacity: 0;
		    translate:-100vh -200vh;
			}
			
						#Texto3 h4{
			  padding: 12px;
			}
			
			
			
			
			
#desarrollo01{
  position: fixed;
}
#desarrollo011 {
				opacity: 0;
				translate:0;
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#desarrollo01.visible {
				opacity: 1;
		    translate:0;
		    width: -webkit-fill-available;
		    z-index: 999;
		
			}
			
	
		
#persona2_svg {
				opacity: 0;
				translate:0 -900vh;
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#persona2_svg.visible {
				opacity: 1;
		    translate:0;
		
			}
					
#persona1_svg {
				opacity: 0;
				translate:0 -900vh;
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#persona1_svg.visible {
				opacity: 1;
		    translate:0;
		
			}



#idea_svg {
				opacity: 0;
		/*		translate:0 -900vh;*/
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#idea_svg.visible {
				opacity: 1;
		    translate:0;
		
			}



	
			
#persona2 {
				opacity: 0;
				translate:0 -900vh;
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#persona2.visible {
				opacity: 1;
		    translate:0;
		
			}
			
			
			
#idea2_svg {
				opacity: 0;
			/*	translate:0 -900vh;*/
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
							width: 0;
								
			}
#idea2_svg.visible {
				opacity: 1;
		 /*   translate:0;*/

			}


#pantalla1_svg {
				opacity: 0;
			/*	translate:0 -900vh;*/
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
							width: 0;
								
			}
#pantalla1_svg.visible {
				opacity: 1;
		 /*   translate:0;*/

			}




#pantalla2_svg {
				opacity: 0;
			/*	translate:0 -900vh;*/
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
							width: 0;
								
			}
#pantalla2_svg.visible {
				opacity: 1;
				
		 /*   translate:0;*/

			}



#pantalla3X_svg {
				opacity: 0;
				
			/*	translate:0 -900vh;*/
		
				
								
			}
#pantalla3X_svg.visible {
				opacity: 1;
		 /*   translate:0;*/

			}





#pantalla4_svg {
				opacity: 0;
				translate: -900vh 0;
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
							
								
			}
#pantalla4_svg.visible {
				opacity: 1;
  translate:0;
			}




#pantalla5_svg {
				opacity: 0;
				translate:0 -900vh;
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;

								
			}
#pantalla5_svg.visible {
				opacity: 1;
				
		    translate:0;

			}




#pantalla6_svg {
				opacity: 0;
			/*	translate:0 -900vh;*/
		
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
							width: 0;
								
			}
#pantalla6_svg.visible {
				opacity: 1;
				
		 /*   translate:0;*/

			}

			
#persona3 {
				opacity: 0;
				translate:300vh;
		
				-webkit-transition: all 3s ease-in-out;
					 -moz-transition: all 3s ease-in-out;
						-ms-transition: all 3s ease-in-out;
						 -o-transition: all 3s ease-in-out;
								transition: all 3s ease-in-out;
			}
#persona3.visible {
				opacity: 1;
		    translate:0;
		
			}
			
	.svgimage
	{
	   width:100%; 
	   height:100% 
	}
	@media only screen and (max-width: 800px) {
  .svgimage
	{
	   width:100%; 
	   height:100% ;
	   padding-top: 200px;
	   padding-bottom: 200px;
	}
	}
	@media only screen and (min-width: 1700px) {
  .svgimage
	{
	   width:60%; 
	   height:100% 
	}
}




#i1 {
				opacity: 0;
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
			}
#i1.visible {
				opacity: 1;
			}
		
#i2 {
				opacity: 0;
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#i2.visible {
				opacity: 1;
			}
		
		#i3 {
				opacity: 0;
				-webkit-transition: all 3s ease-in-out;
					 -moz-transition: all 3s ease-in-out;
						-ms-transition: all 3s ease-in-out;
						 -o-transition: all 3s ease-in-out;
								transition: all 3s ease-in-out;
			}
#i3.visible {
				opacity: 1;
			}
		
			


#i4 {
				opacity: 0;
				-webkit-transition: all 3s ease-in-out;
					 -moz-transition: all 3s ease-in-out;
						-ms-transition: all 3s ease-in-out;
						 -o-transition: all 3s ease-in-out;
								transition: all 3s ease-in-out;
			}
#i4.visible {
				opacity: 1;
			}
		
#i5 {
				opacity: 0;
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#i5.visible {
				opacity: 1;
			}
		
#i6 {
				opacity: 0;
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
			}
#i6.visible {
				opacity: 1;
			}
		
			
		
		
		
#i7 {
				opacity: 0;
				-webkit-transition: all 1s ease-in-out;
					 -moz-transition: all 1s ease-in-out;
						-ms-transition: all 1s ease-in-out;
						 -o-transition: all 1s ease-in-out;
								transition: all 1s ease-in-out;
			}
#i7.visible {
				opacity: 1;
			}
		
#i8 {
				opacity: 0;
				-webkit-transition: all 2s ease-in-out;
					 -moz-transition: all 2s ease-in-out;
						-ms-transition: all 2s ease-in-out;
						 -o-transition: all 2s ease-in-out;
								transition: all 2s ease-in-out;
			}
#i8.visible {
				opacity: 1;
			}
		
#i9 {
				opacity: 0;
				-webkit-transition: all 3s ease-in-out;
					 -moz-transition: all 3s ease-in-out;
						-ms-transition: all 3s ease-in-out;
						 -o-transition: all 3s ease-in-out;
								transition: all 3s ease-in-out;
			}
#i9.visible {
				opacity: 1;
			}
		
			
		video
		{
		      height: 80vh;

		}
		@media only screen and (max-width: 800px) {
 	video
		{
		      width: -webkit-fill-available;

		}
	}