/************************************************************************************

smaller than 980

*************************************************************************************/

@media screen and (max-width: 980px) {
 header, section {
width: auto;
}
 header img {
float: left;
}
 header #title h2.sec {
float: none
}
.fb { right: 150px }
 #download li.info {
font-size: 20px;
padding-right: 0;
width: 50%;
padding-right: 30px;
}
 #download li.qrcode {
width: 100px
}
 #download li.qrcode p {
font-size: 10px;
}
 #download li.store a img {
padding-top: 0px;
}
 #extra li {
font-size: 14px;
}
 #extra li span {
height:55px;
width:70px;
margin-bottom: 10px
}
 .container {
 width: auto;
}
 #slideshow {
height: 400px
}
}



/************************************************************************************

smaller than 650

*************************************************************************************/

@media screen and (max-width: 650px) {
 header {
width: auto;
}
 header #title h1 {
font-size: 20px;
line-height: 25px
}
 header #title h2.sec {
font-size: 12px;
line-height: 16px
}
 header #title h2.th {
font-size: 12px;
line-height: 16px
}
 #download li.info {
width: 60%;
padding-right: 30px;
}
 .container {
 width: auto;
 float: none;
}
 .qrcode {
display: none
}
 #slideshow {
height: 300px;
}
 #slideshow ul li p {
width:auto;
padding: 0 10.10204081632653% 0 5.10204081632653%;
}
 #slideshow ul li img {
display: none
}
}



/************************************************************************************

smaller than 560

*************************************************************************************/

@media screen and (max-width: 480px) {



	/* disable webkit text size adjust (for iPhone) */

	html {
 -webkit-text-size-adjust: none;
}
 header {
width: auto;
}
 header img {
float:none
}
 header #title{
text-align: center;
}
header #title span {
	margin-left: 80px;
}
 header #title h1 {
padding: 0;
}
 .container {
 width: auto;
 float: none;
}
 #main {
display:none
}
 #download li.info {
padding-right: 1%;
width: 100%
}
 #download li.store {
width: 100%
}
 #download li {
text-align: center;
}
 #extra li span {
height:55px;
width:70px;
}
#slideshow ul li p{font-size:90%}
}







/**

 * Media queries for responsive design.

 *

 * These follow after primary styles so they will successfully override.

 */



@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */



}
 @media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */



}



/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)

   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media screen and (max-device-width: 480px) {
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */

  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */

}