
@element #product-overview and (max-width: 1600px) {
	
	.products-container.overview .product {
		width:calc(25% - 40px);
	}
}
@element #product-overview and (max-width: 1250px) {
	
	.products-container.overview .product {
		width:calc(33.3% - 40px);
	}
}
@element #product-overview and (max-width: 920px) {
	
	.products-container.overview .product {
		width:calc(50% - 40px);
	}
}
@element #product-overview and (max-width: 620px) {
	
	.products-container.overview .product {
		width:calc(100% - 40px);
	}
}
@element .my-products and (min-width:620px) {
	
	.products-container.personal .product {
		width:calc(50% - 40px);
	}
}
@element .my-products and (min-width:920px) {
	
	.products-container.personal .product {
		width:calc(33.3% - 40px);
	}
}
@element .my-products and (min-width:1250px) {
	
	.products-container.personal .product {
		width:calc(25% - 40px);
	}
}
@element .my-products and (min-width:1600px) {
	
	.products-container.personal .product {
		width:calc(20% - 40px);
	}
}
@element .screen and (max-width:840px) {
	
	.product-filter {
		margin-top:0;
		float:left;
		padding-left:20px;
	}
}
@element .screen and (max-width:620px) {
	
	.product-filter span {
		margin-bottom:10px;
	}
}

@media only screen and (max-width: 1800px) {
	
	.products-container.overview .product {
		width:calc(25% - 40px);
	}
}


@media only screen and (max-width: 1480px) {
	
	.products-container.overview .product {
		width:calc(33.3% - 40px);
	}
}
@media only screen and (max-width: 1100px) {
	
	.products-container.overview .product {
		width:calc(50% - 40px);
	}
}

/* Breakpoint for move my products out of screen */
@media only screen and (max-width: 840px) {
	#search-icon {
		/*display:none;*/
		right: 50px;
		top: 10px;
		z-index:0;
	}
	.layout {
		display:block;
		overflow-x:hidden;
	}
	.resizer {
		left: calc(100vw - 40px);
		background-color:#42B4E6;
		padding:4px;
		box-sizing:border-box;
	}
	.resizer polygon {
		  fill:white !important;
	}
	.resizer-bounds {
		width:auto;
		left:40px;
		right:20px;
		padding:0 40px;
		box-sizing:border-box;
	}
	.resizer-bounds-inner {
		width:100%;
		height:40px;
	}
	.screen {
		width:calc(100vw - 20px);
		border-right:none
	}
	.my-products {
		position:absolute;
		top:0;
		left:calc(100vw - 20px);
		background-color:rgb(250,250,250);
		border-left: 1px solid rgb(61,205,88);
		border-bottom: 1px solid rgb(61,205,88);
		padding-bottom:20px;
		box-sizing:border-box;
	}
	
	.product-count {
	  width: 20px;
	  height: 40px;
	  left:calc(100vw - 20px);
	  top: 85px;
	  font-size: 13px;
	  line-height: 40px;
	  border-top-left-radius: 0;
	  border-bottom-left-radius: 0;
	  box-sizing:border-box;
	  	
	}
	
	.overlay {
		width:100vw;
	}
}
@media only screen and (max-width: 750px) {
	
	.products-container.overview .product {
		width:calc(100% - 40px);
	}
}
@media only screen and (max-width: 520px) {
	#search-icon {
		/*display:none;*/
		right: auto;
		left:calc(100vw - 95px);
	}
}

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

	.resizer-bounds {
		left:0;
	}
	
	.products-container.overview .product > .edit-icon {
	  	position: absolute;
	  	top: 10px;
	  	right: auto;
	  	left:10px;
	}

	.overlay.active .text-editor-container {
		min-width:auto;
		width:80vw;
		max-height:84px;
	}
	.overlay.active .text-editor-container input,
	.overlay.active .text-editor-container select {
		display:inline-block;
		margin-bottom:4px;
	}
	.overlay.active .icons-editor-container .tab-icons {
		top:-104px;
	}


	.my-products {
		min-width:auto;
		width:calc(100vw - 40px );
	}
	.products-container.personal .product > .edit-icon, 
	.products-container.personal .product > .x-icon, 
	.products-container.personal .product > .duplicate-icon {

	  	z-index: 1;
	}
}




