@media screen and (min-width: 320px){                
                   
    h1{    
        color: white; 
        font-size: 50px;
        text-align: center;
        background-color: red;
        padding: 20px;    
        position: relative;    
        animation: top 3s;    
        animation-fill-mode: forwards;        
    }
    
    .container .photovideomaker{
        width: 90%;
        margin: 20px auto;
        flex-direction: row;       
        display: flex; 
        background: #eeeeee;
        position: relative;    
        animation: left 3s;    
        animation-fill-mode: forwards;
    }
               
    .container .photovideomaker .icon{  
        width: 10%;       
        margin: 0;       
        padding: 20px;   
    }    
    
    .container .photovideomaker .icon img{                  
        width: 130px;
        height: 130px;       
        margin: 0;       
    }

                
    .container .photovideomaker .description{   
        width: 90%;        
        margin: 0 auto;        
        padding: 20px;        
    }

    .container .ringtonemaker{                
        width: 90%;        
        margin: 20px auto;        
        flex-direction: row;        
        display: flex;        
        background: #eeeeee;
        position: relative;    
        animation: right 3s;    
        animation-fill-mode: forwards;        
    }
    
    .container .ringtonemaker .icon{    
        width: 10%;        
        margin: 0;       
        padding: 20px;       
    }
                   
    .container .ringtonemaker .icon img{                  
        width: 130px;                  
        height: 130px;        
        margin: 0;               
    }
              
    .container .ringtonemaker .description{    
        width: 90%;       
        margin: 0 auto;       
        padding: 20px;        
    }
   
    .container .gpsarea{    
        width: 90%;                  
        margin: 20px auto;       
        flex-direction: row;       
        display: flex;       
        background: #eeeeee;
        position: relative;    
        animation: left 3s;    
        animation-fill-mode: forwards;    
    }
         
    .container .gpsarea .icon{                 
        width: 10%;        
        margin: 0;        
        padding: 20px;        
    }
                    
    .container .gpsarea .icon img{    
        width: 130px;        
        height: 130px;       
        margin: 0;        
    }
   
    .container .gpsarea .description{    
        width: 90%;        
        margin: 0 auto;        
        padding: 20px;       
    }
   
    .container .songcutter{                   
        width: 90%;                   
        margin: 20px auto;       
        flex-direction: row;        
        display: flex;       
        background: #eeeeee;
        position: relative;    
        animation: right 3s;    
        animation-fill-mode: forwards;
              
    }
      
    .container .songcutter .icon{             
        width: 10%;        
        margin: 0;       
        padding: 20px;       
    }
                         
    .container .songcutter .icon img{           
        width: 130px;        
        height: 130px;        
        margin: 0;
    }
            
    .container .songcutter .description{        
        width: 90%;        
        margin: 0 auto;        
        padding: 20px;        
    }
   
    .container .mylocation{   
        width: 90%;       
        margin: 20px auto;        
        flex-direction: row;        
        display: flex;        
        background: #eeeeee;
        position: relative;    
        animation: left 3s;    
        animation-fill-mode: forwards;    
    }
         
    .container .mylocation .icon{    
        width: 10%;        
        margin: 0;        
        padding: 20px;        
    }
                   
    .container .mylocation .icon img{   
        width: 130px;        
        height: 130px;        
        margin: 0;       
    }
   
    .container .mylocation .description{   
        width: 90%;       
        margin: 0 auto;       
        padding: 20px;       
    }
   
    .container .moreapps{    
        text-align: center;        
    }
   
    .container .moreapps #moreapps{
        background: red;        
        color: white;       
        width: 20%;        
        height: 50px;        
        font-size: 20px;        
    }
        
    
    @keyframes left {
        from {left: -800px;}    
        to {left: 0px;}    
    }
    
    @keyframes right {
        from {right: -800px;}
        to {right: 0px;}
    }
    
    @keyframes top {             
        from {top: -200px;}          
        to {top: 0px;}        
    }
}

@media screen and (max-width: 1024px){             
                
    h1{    
        color: white;        
        font-size: 40px;        
        text-align: center;        
        background-color: red;                
        padding: 10px;            
        position: relative;            
        animation: top 3s;            
        animation-fill-mode: forwards;                
    }
    
    .container .photovideomaker{                 
        width: 90%;        
        margin: 20px auto;
        flex-direction: row;        
        display: flex;        
        background: #eeeeee;
        position: relative;    
        animation: left 3s;    
        animation-fill-mode: forwards;        
    }
    
    .container .photovideomaker .icon{    
        width: 10%;       
        margin: 0;       
        padding: 20px;       
    }
                   
    .container .photovideomaker .icon img{   
        width: 90px;       
        height: 90px;       
        margin: 0;      
    }
    
    .container .photovideomaker .description{    
        width: 90%;        
        margin: 0 auto;        
        padding: 20px;       
    }
                    
    .container .photovideomaker .description h2{                      
        font-size: 17px;        
        margin-left: 25px;        
    }                
    
    .container .photovideomaker .description p{                
        font-size: 13px;        
        margin-left: 25px;        
    }
    
    .container .ringtonemaker{  
        width: 90%;       
        margin: 20px auto;        
        flex-direction: row;        
        display: flex;        
        background: #eeeeee;
        position: relative;    
        animation: right 3s;    
        animation-fill-mode: forwards;
    }

    
    .container .ringtonemaker .icon{   
        width: 10%;       
        margin: 0;       
        padding: 20px;        
    }
                   
    .container .ringtonemaker .icon img{ 
        width: 90px;        
        height: 90px;        
        margin: 0;       
    }
   
    .container .ringtonemaker .description{   
        width: 90%;       
        margin: 0 auto;        
        padding: 20px;        
    }
                   
    .container .ringtonemaker .description h2{
        font-size: 17px;   
        margin-left: 25px;       
    }
                  
    .container .ringtonemaker .description p{
        font-size: 13px;        
        margin-left: 25px;       
    }

    .container .gpsarea{
        width: 90%;        
        margin: 20px auto;       
        flex-direction: row;       
        display: flex;       
        background: #eeeeee;
        position: relative;    
        animation: left 3s;    
        animation-fill-mode: forwards;
    }
   
    .container .gpsarea .icon{    
        width: 10%;       
        margin: 0;        
        padding: 20px;       
    }
                   
    .container .gpsarea .icon img{   
        width: 90px;        
        height: 90px;        
        margin: 0;       
    }
   
    .container .gpsarea .description{    
        width: 90%;       
        margin: 0 auto;        
        padding: 20px;        
    }
                   
    .container .gpsarea .description h2{
        font-size: 17px;       
        margin-left: 25px;       
    }
                   
    .container .gpsarea .description p{
        font-size: 13px;        
        margin-left: 25px;       
    }
  
    .container .songcutter{   
        width: 90%;        
        margin: 20px auto;       
        flex-direction: row;       
        display: flex;        
        background: #eeeeee;
        position: relative;    
        animation: right 3s;    
        animation-fill-mode: forwards;       
    }
   
    .container .songcutter .icon{   
        width: 10%;       
        margin: 0;        
        padding: 20px;        
    }
                   
    .container .songcutter .icon img{   
        width: 90px;
        height: 90px;
        margin: 0;    
    }

    .container .songcutter .description{
        width: 90%;
        margin: 0 auto;
        padding: 20px; 
    }
                
    .container .songcutter .description h2{ 
        font-size: 17px;        
        margin-left: 25px;        
    }
                    
    .container .songcutter .description p{                       
        font-size: 13px;       
        margin-left: 25px;        
    }   
    .container .mylocation{   
        width: 90%;        
        margin: 20px auto;        
        flex-direction: row;        
        display: flex;       
        background: #eeeeee; 
    }
    
    .container .mylocation .icon{    
        width: 10%;
        margin: 0;
        padding: 20px;
    }
                
    .container .mylocation .icon img{
        width: 90px;
        height: 90px;
        margin: 0;
    }

    .container .mylocation .description{
        width: 80%;
        margin: 0 auto;
        padding: 20px;
    }
    
    .container .mylocation .description h2{
        font-size: 17px;
        margin-left: 25px;
    }
                
    .container .mylocation .description p{        
        font-size: 13px;
        margin-left: 25px;
    }
 
    .container .moreapps{
        text-align: center;  
    }

    .container .moreapps #moreapps{
        background: red;
        color: white;
        width: 30%;
        height: 50px;
        font-size: 20px;
    }
  
    @keyframes top {              
        from {top: -200px;}                 
        to {top: 0px;}               
    }
    
    @keyframes right {   
        from {right: -800px;}        
        to {right: 0px;}        
    }  
    
    @keyframes left {    
        from {left: -800px;}           
        to {left: 0px;}            
    }
}