@import "default.css";

@import "768.css" (min-width: 481px) and (max-width: 768px);

@import "480.css" (min-width: 321px) and (max-width: 480px);

@import "320.css" (max-width: 320px);


/** LANDSCAPE **/

#frame-hna{

  width: 962px;

  height:1000px;

}


/* Android */
/*
@media only screen

and (min-device-width: 400px)

and (max-device-width: 773px)

and (orientation: landscape) {

  #frame-hna{

    width: 773px;

    height: 411px;

  }

}



@media only screen

and (min-device-width: 400px)

and (max-device-width: 736px)

and (orientation: landscape) {

  #frame-hna{

    width: 736px;

    height: 411px;

  }

}



@media only screen

and (min-device-width: 400px)

and (max-device-width: 731px)

and (orientation: landscape) {

  #frame-hna{

    width: 731px;

    height: 411px;

  }

}



@media only screen

and (min-device-width: 414px)

and (max-device-width: 667px)

and (orientation: landscape) {

  #frame-hna{

    width: 667px;

    height:400px;

  }

}
*/


/* iPhone */
@media only screen

and (min-device-width: 414px)

and (max-device-width: 660px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: landscape) {

  #frame-hna{

    width: 660px;

    height:400px;

  }

}




/* Android */
/*
@media screen and (max-width: 660px) and (orientation: landscape){

  #frame-hna{

    width: 660px;

    height:400px;

  }

}
*/


/* iPhone */
@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: landscape) {

  #frame-hna{

    width: 640px;

    height:400px;

  }

}


/* iPhone */
@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

  #frame-hna{

    width: 640px;

    height:400px;

  }

}

/* Android */
/*
@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {



  #frame-hna{

    width: 480px;

    height: 400px;

  }



}



@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

  #frame-hna{

    width: 568px;

    height:400px;

  }

}
*/

@media only screen

and (min-device-width: 400px)

and (max-device-width: 768px)

and (orientation: landscape) {

  #frame-hna{

    width: 100%;

    height:411px;

    margin-left: 2.5%;

  }

};

@media only screen

and (min-device-width: 320px)

and (max-device-width: 667px)

and (orientation: landscape) {

  #frame-hna{

    width: 100%;

    height:400px;

    margin-left: 2.5%;

  }

};





/* PORTRAIT */
/*
@media screen and (max-width: 660px) and (orientation: portrait){

  #frame-hna{

    width: 660px;

    height:700px;

  }

}



@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: portrait) {

  #frame-hna{

    width: 320px;

    height:700px;



  }

}



@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {



  #frame-hna{

    width: 360px;

    height:700px;



  }

}



@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {



  #frame-hna{

    width: 320px;

    height:700px;



  }



}



@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

  #frame-hna{

    width: 320px;

    height:700px;



  }

}



@media only screen

and (min-device-width: 414px)

and (max-device-width: 736px)

and (-webkit-min-device-pixel-ratio: 3)

and (orientation: portrait) {

  #frame-hna{

    width: 414px;

    height:700px;



  }

}
*/

@media only screen

and (min-device-width: 320px)

and (max-device-width: 768px)

and (orientation: portrait) {

  #frame-hna{

    width: 100%;

    height:700px;

    margin-left: 2.5%;

  }

}