/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/*Macbook pro 1440x900*/
/*================================================== */
 @media only screen and (min-width: 1366px) and (max-width: 1440px) {
}
/*Some laptop 1366x768*/
/*================================================== */
 @media only screen and (min-width: 1280px) and (max-width: 1366px) {
}
/*Macbook air 1280x800*/
/*================================================== */
 @media only screen and (min-width: 1024px) and (max-width: 1280px) {
}
/*Most netbook 1024x600*/
/*================================================== */
 @media only screen and (min-width: 960px) and (max-width: 1199px) {
}
/*Most Ipad 1024x768*/
/*================================================== */
 @media only screen and (min-width: 768px) and (max-width: 1199px) {
}
/*IPhone 4 960x640*/
/*================================================== */
 @media only screen and (min-width: 767px) and (max-width: 960px) {
}
/*Google nexus one 4 800x480*/
/*================================================== */
 @media only screen and (max-width: 960px) {
}
 @media only screen and (max-width: 767px) {
body {
 font-size: 90%;
}
#main {
	background: #FFFFFF
}
.box_ct {
	padding-right: 15px !important
}
.tab_cate {
	margin-top: 0
}
/*Header*/
#header .four.columns {
width: 40%;
}
#header .eight.columns {
width: 60%;
}
#hotline_head {
	top: auto;
	bottom: -40px
}
#likebox {
	margin-left: 0
}
/*List products*/
.list_products li.column, #popular_products li {
	width: 33.3% !important
}
#popular_products ul {
	margin-left: -15px
}
#popular_products .item {
	margin-left: 15px 
}
/*Detail Product*/
.pro_left, .dtp_product {
width: 50% !important
}
/*Video*/
#video .ten.columns { width: 62.5% !important }
#video .six.columns { width: 37.5% !important }
/*Footer*/
#footer { padding: 15px; background: #FFFFFF }
#footer > div:not(:last-child), #social_network .fr {
float: left !important;
}
#info_footer img { display: block; float: none !important; margin-right: 0; margin-bottom: 10px }
}
@media only screen and (max-width: 639px) {
body {
padding-top: 0
}
/*List products*/
.list_products li.column {
width: 50% !important
}
.list_products li:nth-child(3n+1) {
	clear: none
}
.list_products li:nth-child(2n+1) {
	clear: both
}
/*List New Products*/
#new_products li, #popular_products li {
	width: 100% !important
}
#new_products .product_item .img_product, #popular_products img {
	float: left;
	width: 40%;
	margin-right: 15px
}
#new_products .product_item .product_name, #popular_products h3 {
	padding: 0;
	nargin: 0
}
#popular_products .item {
	background: none
}
/*Detail Product*/
.pro_left, .dtp_product {
width: 100% !important
}
/*Video*/
#video .ten.columns, #video .six.columns { width: 100% !important }
#ytvideo, #ytvideo2 {
	margin-right: 0;
}
ul.demo2 {
	margin: 10px 0
}
.info_g img {
 float: none;
 clear: both;
 width: inherit !important;
 height: auto !important;
 margin: 10px 0 !important;
}
.fb_iframe_widget > span, .fb_iframe_widget iframe {
 width: 400px !important
}
}
/*Meizu M8 one 4 720x480*/
/*================================================== */
 @media only screen and (min-width: 480px) and (max-width: 767px) {
/*Toolbar*/
a.print {
 background-position: 0 5px;
}
a.email {
 background-position: 0 -29px;
}
a.opinion {
 background-position: 0 -69px;
}
 #outter_print {
width: 92%
}
.print_ct img {
max-width: 100%;
height: auto
}
}
/*IPhone 3G 480x320*/
/*================================================== */
@media only screen and (max-width: 480px) {
/*Header*/
#header .four.columns, #header .eight.columns {
width: 100%;
text-align: center
}
#logo img {
	margin-left: 0;
}
#nav_menu {
	background: #fe1ec7;
}
#hotline_head {
	top: auto;
	bottom: -35px;
	background: none;
	font-size: 16px;
	width: auto
}
.box_Tab_main span {
padding-right: 10px
}
/*List News*/
#list_news .img_general {
width: 40%;
}
.like_face, .toolbar {
float: none;
clear: both;
margin: 8px 0 5px 0;
text-align: center
}
.top_select {
 position: relative;
 top: auto;
 right: auto;
 width: 94%;
 margin: 15px auto 5px auto;
}
}

/*Mobile*/
/*================================================== */
 @media only screen and (max-width: 320px) {
.box_Tab_main img {
	display: none
}
.fb_iframe_widget > span, .fb_iframe_widget iframe {
 width: 250px !important
}
.modalPopup {
 width: 92% !important;
 height: 100%;
 overflow: auto
}
.blockcontent1 {
padding: 10px
}
.blockcontent1 .col1 {
width: 90%;
margin: 0;
text-align: left
}
.blockcontent1 input, .blockcontent1 textarea {
width: 100% !important
}
.btn_addtocart_dtp { margin-top: 5px }
}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove  
		comment brackets */
