@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
       
    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 55%;
        left: 0;
        width: 100%;
        height: 360px;
        overflow: hidden;
    }
}


@media (min-width:480px) and (orientation:portrait)  { /* smartphones, Android phones, landscape iPhone */
    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 65%;
        left: 0;
        width: 100%;
        height: 300px;
        overflow:scroll;
        overflow-x:hidden;
      
    }                   
}
@media (min-width:480px) and (orientation:landscape) { /* smartphones, Android phones, landscape iPhone */
    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 85%;
        left: 0;
        width: 100%;
        height: 230px;
        overflow:scroll;
        overflow-x:hidden;
      
    }                   
}
@media (min-width:600px) and (orientation:landscape){ /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 85%;
        left: 0;
        width: 100%;
        height: 360px;
        overflow: hidden;
    }
}
@media (min-width:600px) and (orientation:portrait){ /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 25%;
        left: 0;
        width: 100%;
        height: 1000px;
        overflow: hidden;
    }
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */

    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 550px;
        overflow: hidden;
    }
}
@media (min-width:1025px) { /*big landscape tablets, laptops, and desktops*/

    .wrapper {
        background: #50a3a2;
        position: absolute;
        top: 45%;
        left: 0;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
}                         
                                
/*@media (min-width:1281px)*/ { /* hi-res laptops and desktops  }