html, body{ margin:0;
padding:0;
overflow:hidden;
background:#000;
}










 .propto1{

  
  content: 'p';
  background-color: hsla(10,40%,50%,1);
    background:url(../img/p.png) no-repeat;
  
  background-position: 50% 50%, 50% calc(50% + .3em);
  background-size: 2em 2em, 3em 1em;
  background-repeat: no-repeat;
  
  animation: bounce 1s alternate infinite;
  }


 .propto2{

  
  content: 'p';
  background-color: hsla(10,40%,50%,1);
    background:url(../img/r.png) no-repeat;
  
  background-position: 50% 50%, 50% calc(50% + .3em);
  background-size: 2em 2em, 3em 1em;
  background-repeat: no-repeat;
  
  animation: bounce1 1s alternate infinite;
  }
  
   .propto3{

 
  content: 'p';
  background-color: hsla(10,40%,50%,1);
    background:url(../img/o.png) no-repeat;
  
  background-position: 50% 50%, 50% calc(50% + .3em);
  background-size: 2em 2em, 3em 1em;
  background-repeat: no-repeat;
  
  animation: bounce 1s alternate infinite;
  }


  .propto4{

 
  content: 'p';
  background-color: hsla(10,40%,50%,1);
    background:url(../img/p.png) no-repeat;
  
  background-position: 50% 50%, 50% calc(50% + .3em);
  background-size: 2em 2em, 3em 1em;
  background-repeat: no-repeat;
  
  animation: bounce1 1s alternate infinite;
  }
  
   .propto5{


  content: 'p';
  background-color: hsla(10,40%,50%,1);
    background:url(../img/t.png) no-repeat;
  
  background-position: 50% 50%, 50% calc(50% + .3em);
  background-size: 2em 2em, 3em 1em;
  background-repeat: no-repeat;
  
  animation: bounce 1s alternate infinite;
  }
  
     .propto6{


  content: 'p';
  background-color: hsla(10,40%,50%,1);
    background:url(../img/o.png) no-repeat;
  
  background-position: 50% 50%, 50% calc(50% + .3em);
  background-size: 2em 2em, 3em 1em;
  background-repeat: no-repeat;
  
  animation: bounce1 1s alternate infinite;
  }



@keyframes bounce {
  0% {
    background-position: 50% calc(50% - 4em), 50% calc(50% + .4em);
    background-size: 2em 2em, 1em 1em;
     }
  40% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 2em, 3em 1em;
    }
  45% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1.5em, 3em 1em;
    }
  50% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1em, 3em 1em;
    }
  100% {
    background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
    background-size: 2em 2em, 1em 1em;
    }
	
	/*0% {
    background-position: 50% calc(50% - -4em), 50% calc(50% + -.4em);
    background-size: 2em 2em, 1em 1em;
    }*/
  40% {
    background-position: 50% 50%, 50% calc(50% + -.3em);
    background-size: 2em 2em, 3em 1em;
    }
  45% {
    background-position: 50% 50%, 50% calc(50% + -.3em);
    background-size: 2em 1.5em, 3em 1em;
    }
  50% {
    background-position: 50% 50%, 50% calc(50% + -.3em);
    background-size: 2em 1em, 3em 1em;
    }
  100% {
    background-position: 50% calc(50% - -4em), 50% calc(50% + -.3em);
    background-size: 2em 2em, 1em 1em;
    }
}
  
 @keyframes bounce1 {
  0% {
    background-position: 50% calc(50% - -4em), 50% calc(50% + -.4em) ;
    background-size: 2em 2em, 1em 1em;
    }
  40% {
    background-position: 50% 50%, 50% calc(50% + -.3em);
    background-size: 2em 2em, 3em 1em;
    }
  45% {
    background-position: 50% 50%, 50% calc(50% + -.3em);
    background-size: 2em 1.5em, 3em 1em;
    }
  50% {
    background-position: 50% 50%, 50% calc(50% + -.3em);
    background-size: 2em 1em, 3em 1em;
    }
  100% {
    background-position: 50% calc(50% - -4em), 50% calc(50% + -.3em);
    background-size: 2em 2em, 1em 1em;
    }
	
/*0% {
    background-position: 50% calc(50% - 4em), 50% calc(50% + .4em) ;
    background-size: 2em 2em, 1em 1em;
    }*/ 
  40% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 2em, 3em 1em;
    }
  45% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1.5em, 3em 1em;
    }
  50% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1em, 3em 1em;
    }
  100% {
    background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
    background-size: 2em 2em, 1em 1em;
  }
 }










.landing{ margin-left:500px; margin-top:200px;}


.landing .landing-style1{padding-right:60px;}
.landing .landing-style1 h1{text-align:right; font-size:150px; color: yellow;}


.landing .landing-style3{padding-right:60px;}
.landing .landing-style3 h1{text-align:left; font-size:150px; color: yellow;}


.landing .landing-style2{ padding:15px; padding-left:25px;}
.propto1,  .propto2, .propto3,  .propto4, .propto5, .propto6{ padding-top:150px;}





@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.landing{ margin-left:250px; margin-top:200px;}


.landing .landing-style1{padding-right:60px;}
.landing .landing-style1 h1{text-align:right; font-size:150px; color: yellow;}


.landing .landing-style3{padding-right:60px;}
.landing .landing-style3 h1{text-align:left; font-size:150px; color: yellow;}


.landing .landing-style2{ padding:15px; padding-left:25px;}
.propto1,  .propto2, .propto3,  .propto4, .propto5, .propto6{ padding-top:150px;}


}




@media only screen and (min-width: 480px) and (max-width: 767px) {
		.landing{ margin-left:100px; margin-top:200px;}


.landing .landing-style1{padding-right:0px; float:left;}
.landing .landing-style1 h1{text-align:left; font-size:120px; color: yellow;}


.landing .landing-style3{  padding-right:0px; margin-top:-152px; margin-left:235px;}
.landing .landing-style3 h1{text-align:right; font-size:120px; color: yellow;}


.landing .landing-style2{margin-left: 70px; margin-top:-35px; padding:15px; padding-left:25px;}
.propto1,  .propto2, .propto3,  .propto4, .propto5, .propto6{ padding:75px 10px; display: inline-block;
}

}



@media screen and (min-width:270px) and (max-width: 479px) {
		.landing{ margin-left:35px; margin-top:200px;}


.landing .landing-style1{padding-right:0px; float:left;}
.landing .landing-style1 h1{text-align:left; font-size:60px; color: yellow;}


.landing .landing-style3{  padding-right:0px; margin-top:-120px; margin-left:190px;}
.landing .landing-style3 h1{text-align:right; font-size:60px; color: yellow;}


.landing .landing-style2{margin-left:20px; margin-top:-60px; padding:15px; padding-left:25px;}
.propto1,  .propto2, .propto3,  .propto4, .propto5, .propto6{ padding:75px 10px; display: inline-block;
}

}
 













/*

@keyframes bounce {
  0% {
    background-position:;
    background-size: 2em 2em, 1em 1em;
    }
  40% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 2em, 3em 1em;
    }
  45% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1.5em, 3em 1em;
    }
  50% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1em, 3em 1em;
    }
  100% {
    background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
    background-size: 2em 2em, 1em 1em;
    }
  }
  
  
  
  @keyframes bounce1 {
  0% {
	 background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
    background-size: 2em 2em, 1em 1em;
   
    }
  40% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1em, 3em 1em;
    
    }
  45% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 1.5em, 3em 1em;
    }
  50% {
    background-position: 50% 50%, 50% calc(50% + .3em);
    background-size: 2em 2em, 3em 1em;
    }
  100% {
    background-position:;
    background-size: 2em 2em, 1em 1em;
    }
  }

*/