/* =========================================================================== */
/* LARGE DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (min-width : 1280px) {
	.wrapper {
		width: calc(100% - 200px);
	}
	ul.professional > li.row div.thumb {
		margin: 0 30px;
	}
}
/* =========================================================================== */
/* VERY LARGE DESKTOP ======================================================== */
/* =========================================================================== */
@media screen and (min-width : 1600px) {
	.wrapper {
		width: 1280px;
	}
}
/* =========================================================================== */
/* SMALL DESKTOP ============================================================= */
/* =========================================================================== */
@media screen
and (max-width : 1280px),
screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1280px) {
}
/* =========================================================================== */
/* IPAD XOAY NGANG =========================================================== */
/* =========================================================================== */
@media screen and (max-width : 1024px) and (orientation: landscape) {
}
/* =========================================================================== */
/* LARRGE DESKTOP ============================================================ */
/* =========================================================================== */
@media screen and (max-width : 1280px) {
	ul.toplink li img {
		width:32px;
		height:32px;
	}
	ul.toplink li span.text {
		display:none;
	}
}
/* =========================================================================== */
/* NORMAL DESKTOP ============================================================ */
/* =========================================================================== */
@media screen and (max-width : 1024px) {
	.wrapper {
			width: calc(100% - 60px);
	}
	ul.product > li.row div.cart {
		left:10px;
		right:10px;
	}
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 768px) {
	#btnMenu {
		display:block;
	}
	.divMenu {
		position:fixed;
		top:0;
		left: calc(-100% - 2px);
		width:100%;
		height:100%;
		z-index:99999;
		overflow:hidden;
	}
	.divMenu.show {
		left:0;
	}
	ul.mainmenu {
		display: block;
		background: none;
		margin-top:80px;
	}
	ul.mainmenu > li.row {
		float:none;
		display:block;
		width: auto !important;
		border-top:1px solid rgba(255,255,255,0.5);
	}
	ul.mainmenu > li.row > div {
		padding:10px;
		border-right:none;
		font-size: larger;
		text-align:left;
	}
	ul.mobile {
		padding:30px;
	}
	ul.mobile > li.row {
		float:left;
		width: calc((100% - 2 * 30px) / 3);
		margin-left:30px;
		border-bottom:none;
	}
	ul.mobile > li.row:nth-child(3n+1) {
		clear:both;
		margin-left:0;
	}
	ul.mobile > li.row > div {
		text-align:center;
	}
	ul.mobile > li.row > div img {
		width:100%;
	}

	ul.popmenu {
		position:static;
		padding-top:0px;
		margin-left:0px;
	}
	ul.popmenu > li {
		border-top:1px solid #f9c087;
		padding:10px 30px;
	}
	ul.logo {
		margin-left:50px;
	}

	#divSearch {
		float:right;
		margin-left:0px;
	}
	ul.toplink {
		clear:both;
		margin-top:10px;
	}
	ul.mainmenu {
		display:block;
		font-size:inherit;
	}
	#divLeft {
		float:none;
		width:auto;
	}
	.divBody, #divAdmin {
		float:none;
		width:100%;
		overflow-x:scroll;
	}
	.divBody, .wrapnarrow, #divHotNews {
		margin-left:0px;
		margin-right:0px;
	}
	#divFooter div.divBottom {
		padding-left:10px;
		padding-right:10px;
	}
	ul.isotop > li {
		width: calc(100% / 3 - 40px / 3);
	}
	ul.isotop > li div.like {
		opacity:0.25;
		width:48px;
		height:48px;
	}
	ul.professional > li.row div.thumb {
		margin: 0;
	}
	ul.project > li.row div.wrap section .smallcolumn {
		width:50px;
		height:50px;
	}
	ul.project > li.row div.wrap section .bigcolumn {
		width: calc(100% - 50px - 10px);
	}
}
/* =========================================================================== */
/* SMARTPHONE ================================================================ */
/* =========================================================================== */
@media screen and (max-width : 640px) {
	SECTION.head {
		display:none;
	}
	.wrapper {
		width: calc(100% - 40px);
	}
	ul.leftmenu > li.row {
		width: calc((100% - 2 * 20px) / 3);
	}
	ul.leftmenu > li.row:nth-child(5n+1) {
		clear:none;
		margin-left:20px;
	}
	ul.leftmenu > li.row:nth-child(3n+1) {
		clear:both;
		margin-left:0px;
	}
	.divBody, #divAdmin, #divRight {
		float:none;
		width:auto;
	}
	.halfcolumn,
	.onecolumn,
	.twocolumn,
	.threecolumn,
	.onethreecolumn,
	.twothreecolumn {
		width:auto;
	}
	.leftcolumn,
	.centercolumn,
	.rightcolumn {
		float:none;
		margin:5px 0px;
	}
	.smallcolumn.leftcolumn,
	.bigcolumn.leftcolumn {
		float:left;
	}
	.smallcolumn.rightcolumn,
	.bigcolumn.rightcolumn {
		float:right;
	}
	.divForm {
		width:auto;
	}
	#divFloat {
	}
	.peelcolumn {
		width: calc((100% - 6 * 4px) / 6);
	}
	#divBlockBanner div.row:first-child {
		width: 100%;
	}
	#divBlockBanner div.row:nth-child(4n+2) {
		clear:both;
	}
	#divBottomPopup div.wrap {
		margin-left:70px;
		margin-right:70px;
	}
	ul.categorylist > li.row {
		display:none;
	}
	ul.categorylist > li.show {
		display:block;
	}
	.contacticon,
	.contactbutton {
		margin:0px;
		padding:10px;
	}
	.contacticon img {
		width:48px;
		height:48px;
	}
	#divContactFloat {
		position:fixed;
		top:auto !important;
		bottom:0px;
		padding-bottom:40px;
		left:0px;
		width:100%;
		z-index:10010;
		background-color: rgba(0,0,0,0.1);
	}
	#divContactFloat.float {
		-webkit-border-radius:0px;
		   -moz-border-radius:0px;
				border-radius:0px;
	}
	#divContactFloat.float .contacticon,
	#divContactFloat.float .contactbutton {
		padding:10px;
	}
	ul.professional > li.row div.thumb {
		margin: 0 20px;
	}
	ul.project > li.row div.wrap section .smallcolumn {
		width:80px;
		height:80px;
	}
	ul.project > li.row div.wrap section .bigcolumn {
		width: calc(100% - 80px - 10px);
	}
	ul.squarelist > li {
		width: calc((100% - 1 * 1px) / 2);
	}
	ul.squarelist > li:nth-child(2n+1) {
		clear:both;
		margin-left:0;
	}
}
/* =========================================================================== */
/* MOBILE ==================================================================== */
/* =========================================================================== */
@media screen
and (max-width : 480px) {
	body {
		line-height:normal;
	}
	ul.logo {
		float:none;
		margin-left:0;
	}
	ul.logo li {
		display:block;
		text-align:center;
	}
	.contacticon {
		display:none;
	}
	.contactbutton {
		display:block;
	}
	#divSearch {
		margin-top:10px;
		clear:both;
		float:none;
		width:100%;
	}
	#divFixed.keeptotop {
		position:static;
		top:auto;
	}
	H1, .maintitle h1 {
		font-size:xx-large;
	}
	H2 {
		font-size:x-large;
	}
	ul.mainmenu > li.button > div {
	}
	ul.mainmenu > li.row > div {
	}
	ul.leftmenu > li.row {
		float:none;
		width: auto;
		margin-left:0px;
	}
	ul.leftmenu > li.row:nth-child(5n+1) {
		margin-left:0px;
	}
	ul.gallery > li.row {
		width: calc((100% - 20px) / 2);
	}
	ul.gallery > li.row:nth-child(5n+1) {
		float:left;
		clear:none;
		margin-left:20px;
	}
	ul.gallery > li.row:nth-child(2n+1) {
		clear:both;
		margin-left:0px;
	}
	ul.search > li.row h3 {
		font-size:inherit;
	}
	ul.isotop > li {
		width: calc(100% / 2 - 20px / 2);
	}
	.caption, .maintitle {
		height:auto;
	}
	.content {
		overflow-wrap: break-word;
		word-wrap: break-word;
		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;
		/* Adds a hyphen where the word breaks, if supported (No Blink) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.divTopTrace {
		float:none;
		margin-top:0px;
		margin-bottom:10px;
	}
	#divPageNav a, #divPageNav a:link, #divPageNav a:visited {
		padding:6px 9px;
	}
	#divImageProfile {
		height:auto;
	}
	#divImageProfile:before {
		z-index:0;
	}
	#divImageProfile div.avatar {
		position:static;
		left:auto;
		bottom:auto;
		margin:0px auto;
		margin-top:30px;
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
			 -o-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
	}
	#divImageProfile div.content {
		position:static;
		left:auto;
		top:auto;
		margin-top:30px;
		margin-bottom:30px;
		text-align:center;
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
			 -o-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
	}
	.peelcolumn {
		width: calc((100% - 3 * 4px) / 3);
	}

	#divBlockBanner div.row {
		width: calc(100% / 2);
	}
	#divBlockBanner div.row:nth-child(2n+2) {
		clear:both;
	}
	.collectionimage .num {
		width: calc(16px - 1px);
		height: calc(16px - 1px);
		border: 1px solid red;
	}
	.collectionimage .num span {
		font-size:10px;
	}
	#divBottomPopup div.wrap {
		margin-left:30px;
		margin-right:30px;
	}
	ul.project > li.row div.wrap section .smallcolumn {
		width:50px;
		height:50px;
	}
	ul.project > li.row div.wrap section .bigcolumn {
		width: calc(100% - 50px - 10px);
	}
	#divSlide2 ul.slides {
		height:300px;
	}
	#divSlide2 ul.slides > li {
		height:100%;
		overflow:hidden;
	}
	#divSlide2 ul.slides > li > img {
		position:relative;
		height:100%;
		width:auto;
		max-width:none;
		left:50%;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
			 -o-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
				transform: translateX(-50%);
	}
}
/* =========================================================================== */
/* IPHONE 5 ================================================================== */
/* =========================================================================== */
@media screen and (max-width : 320px) {
	.wrapper {
		width:300px;
	}
	.peelcolumn {
		width: calc((100% - 2 * 4px) / 2);
	}
}
