/*Responsive Layout*/

/* Large Screens ----------- */
.logo,
.note-mobile {display: none; text-align: center;}		

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 780px) {
	body {}

	/*Commen Classes ----------------*/
	.hide {display: none !important}
	/*Layout Classes ----------------*/
	.center,
	#content #box1,
	.note-mobile,
	#main_product #product,
	#main_product #product #proPreview,
	#footer .categories,
	#footer .categories ul,
	#group,
	#box6,
	#box6 .partners,
	#box6 ul,
	#box6 h1,
	#box4,
	#product,
	#proPreview,
	
	#product hr,
	#proPreview div.moreProducts,
	#proPreview div.groupingTitle{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	#navigation {
		height: auto;
	}
	.logo {
		display: block !important; 
		text-align: center;
		background: #fff;
	}
	.note-mobile {
		display: block !important; 
		padding: 15px 15px 20px; 
		background: #C9C9C9;
	}
	.note-mobile h1 {
	    color: #FFFFFF;
	    font-family: 'Roboto Condensed';
	    font-size: 23px;
	    font-weight: 400;
	    line-height: 25px;
	    margin: 5px 20px 10px;
	    text-shadow: 1px 1px 1px #999999;
	    text-transform: uppercase;
	    text-align: left;
	}
	.note-mobile h2 {
	    color: #FFFFFF;
	    font-family: 'Roboto Condensed';
	    font-size: 23px;
	    font-weight: 300;
	    line-height: 25px;
	    margin: 10px 20px 0;
	    text-shadow: 1px 1px 1px #999999;
	    text-transform: uppercase;
	    text-align: left;
	}
	.note-mobile p {
	    color: #333333;
	    font-family: calibri,verdana,tahoma;
	    font-size: 14px;
	    line-height: 1.5;
	    padding: 0 20px;
	    text-shadow: 1px 1px 1px #FFFFFF;
	    text-align: left;
	}
	#content {
		height: auto;
	}
	#main_menu .column {
		margin: 0;
		width: 100%;
	}
	#main_menu {
		margin: 0;
		float: none;
		display: block;	
	}
	#main_menu .column ul li {
		margin: 0 5%;
		width: 40%;
	}
	#main_menu .column ul li a {
		background-position: right 6px !important;
	}
	#group p {
		text-align: left;
		line-height: 1.5;
		float: none;
	}
	#box6 h1 {
		text-align: center;
	}
	#group h1 {
		width: auto;
		height: auto;
		text-align: left;
		float: none;
		margin-top: 15px
	}
	#group h1:before {
		clear: both;
		display: block;
		height: 20px;
		content: "";
	}
	#product h1 {
		width: auto;
		float: none;
		margin: 20px 0;
		text-align: center;
	}
	.contact h2, .contact form {
		display: block !important;
	}
	#contactFormId {
		float: none;
		width: 100%;
		margin-left: 0
	}
	#contactFormId input[type="text"] {
		float: none;
		width: 90%;
	}
	#contactFormId textarea {
		float: none;
		width: 90%;
		margin-right: 0
	}
	
	#footer {
	    background: url("../images/home/bg_footer.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
	    min-height: 50px;
	    width: 100%;
	}
	#footer .categories {
		margin: 0;
		padding: 20px;
	}
	#footer .categories h1 {
		width: auto;
	}
	#footer .categories ul li {
		float: none;
		width: 100%;
	}
	#copyright {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#copyright .tx2 {
    	float: left;
    	line-height: 17px;
    	width: 70%;
    	text-align: left;
	}


	/*Hide when narrow Classes ----------------*/
	#top_com .center p,
	#top_com #searchLB, 
	#top_com .search_form, 
	#navigation .center p, 
	#body_com,
	#content #hmProject,
	#content #container,
	#content #box1,
	#content #box2,
	#content #box3,
	#main_product #sponsurs,
	#footer .map,
	#footer .information,
	#sponsurs {
		display: none !important;
	}

	.#product form {
		margin: 20px auto
	}
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	#top_com .search_form, 
	#top_com #searchLB {
		display: block !important
	}
	#product form {
		display: none;
	}
}

@media only screen and (min-width : 320px) and (max-width : 515px) { 
	#proPreview div {
		float: none;
		margin: 0 auto 15px;
	}
	#proPreview div p.details {
		height: 40px;
		padding-bottom: 20px 
	}
	#product form {
		display: none
	}
}