@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Anybody:wght@900&family=Readex+Pro:wght@300;600&display=swap');
.divCatalog {
	background-color:#333;
	padding:1px;
	position:relative;
}
@media screen and (max-width : 640px) {
	.divCatalog {
		width:100%;
		padding-bottom:100%;
		overflow:hidden;
		background-color: rgba(0,0,0,0.75);
	}
}
.divCatalog .mask {
	position: absolute;
	top:50%;
	width:100%;
	color:#FFF;
	text-align:center;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
		 -o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
			transform: translateY(-50%);
	z-index:3;
	display:none;
}
@media screen and (max-width : 640px) {
	.divCatalog .mask {
		display:block;
	}
}
.divCatalog .page {
	position:relative;
	width:100%;
	padding-bottom: calc(100% * 11 / 16);
 	page-break-inside: avoid;
	margin-bottom:1px;
	background-color: #F9F9F9;
	overflow:hidden;
	font-size: min(1.2vw, 1.6vh);
}
@media screen and (max-width : 640px) {
	.divCatalog .page {
		display:none;
	}
}
.divCatalog H1 {
	font-size:200%;
}
.divCatalog H2 {
	font-size:150%;
}
.divCatalog .price.big {
	font-size:150%;
}
.divCatalog .logo img {
	height:50px;
}
.divCatalog .code {
	position:absolute;
	top:30px;
	right:30px;
	padding:5px 10px;
	background-color:#FFF;
	text-align:center;
	font-weight:900;
	white-space:nowrap;
	z-index:2;
}
.divCatalog .page .image1, .divCatalog .page .image2, .divCatalog .page .text, .divCatalog .page .list {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#FFF;
}
.divCatalog .page .wrap {
	clear:both;
	padding:30px 40px;
	overflow:hidden;
}
.divCatalog .page div.float {
	position:absolute;
	width: calc(100%);
	left:0;
	bottom:0;
	background: rgba(255,255,255, 0.95);
	background: -moz-linear-gradient(0deg, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0) 100%);
	background: linear-gradient(0deg, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.divCatalog .page div.float.pos0 {
}
.divCatalog .page div.float.pos1 {
	top:0;
	bottom:auto;
	background: rgba(255,255,255, 0.95);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0) 100%);
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.divCatalog .page div.float.pos0 div.wrap {
	padding-top:50px;
}
.divCatalog .page div.float.pos1 div.wrap {
	padding-bottom:50px;
}
.divCatalog .page .image1, .divCatalog .page .image2, .divCatalog .page .map {
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
}
@media screen and (max-width : 1024px) {
	.divCatalog .page .wrap {
		padding:15px 25px;
	}
}
@media screen and (max-width : 768px) {
	.divCatalog .page .wrap {
		padding:10px 20px;
	}
}
.divCatalog .page .map {
	position:relative;
	float:right;
	margin-left:20px;
	width: calc((100% - 2 * 20px) / 3);
}
.divCatalog .page .num {
	position:absolute;
	width: calc(24px - 4px);
	height: calc(24px - 4px);
	border: 2px solid #999;
	background-color: #000;
	z-index:2;
	-webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
	pointer-event: none;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	        border-radius:50%;
	cursor: pointer;
}
.divCatalog .page .num span {
	color:#FFF;
	position:absolute;
	width:100%;
	top:50%;
	font-weight:900;
	font-size:smaller;
	text-align:center;
	-webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
         -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* =========================================================================== */
/* COVER ===================================================================== */
/* =========================================================================== */
.divCatalog .pagecover .image1, .divCatalog .pagecover .image2, .divCatalog .pagecover .text {
	background-color: #F0F0F0;
}
.divCatalog .pagecover h1 {
	font-family: 'Anybody';
	font-weight:900;
	font-size:300%;
}
.divCatalog .pagecover .image1 {
	left:auto;
	right:0;
	width:calc(50% - 1px);
}
.divCatalog .pagecover div.float.pos0 div.wrap {
	padding-top:80px;
}
.divCatalog .pagecover .text {
	width: calc(50% - 1px);
	height:auto;
}
.divCatalog .pagecover .image2 {
	width:calc(50% - 1px);
}
.divCatalog .pagecover .image2 div.float {
	background: transparent;
}
.divCatalog .pagecover .list {
	display:none;
}

/* =========================================================================== */
/* SUMARY ==================================================================== */
/* =========================================================================== */
.divCatalog .pagesumary .image1 {
	width: calc(50% - 1px);
	filter: grayscale(100%); /* Standard */
	-webkit-filter: grayscale(100%); /* Webkit */
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); /* Firefox4-34*/
	filter: gray;  /* IE6-9 */
	-webkit-filter: grayscale(1); /* Old WebKit */
}
.divCatalog .pagesumary .text {
	left:auto;
	right:0;
	width: calc(50% - 1px);
}
.divCatalog .pagesumary .image2 {
	display:none;
}
.divCatalog .pagesumary .list {
	display:none;
}

/* =========================================================================== */
/* LAYOUT ==================================================================== */
/* =========================================================================== */
.divCatalog .page0 .image1 {
	width:100%;
	height:100%;
}
.divCatalog .page0 .text {
	background-color: transparent;
	top:50%;
	height:auto;
	color:#FFF;
	text-shadow:1px 1px 5px rgba(0,0,0,0.25);
	-webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
         -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
	z-index:1;
}
.divCatalog .page0 .image2, .divCatalog .page0 .list {
	display:none;
}

.divCatalog .page1 .image1, .divCatalog .page1 .image2 {
	width: calc(50% - 1px);
	height:100%;
}
.divCatalog .page1 .image2 {
	left:auto;
	right:0;
}
.divCatalog .page1 .text {
	background-color: transparent;
	left:auto;
	right:0;
	top:50%;
	width:calc(50% - 1px);
	height:auto;
	color:#FFF;
	text-shadow:1px 1px 5px rgba(0,0,0,0.25);
	-webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
         -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
	z-index:1;
}
.divCatalog .page1 .list {
	display:none;
}

.divCatalog .page2 .image1 {
	width: calc((100% * 2 / 3) - 1px);
	height:100%;
}
.divCatalog .page2 .image2 {
	left:auto;
	right:0;
	width: calc((100% * 1 / 3) - 1px);
}
.divCatalog .page2 .text {
	display:none;
}
.divCatalog .page2 .list {
	display:none;
}

.divCatalog .page3 .image1 {
	width: calc((100% * 1 / 3) - 1px);
	height:100%;
}
.divCatalog .page3 .image2 {
	left:auto;
	right:0;
	width: calc((100% * 2 / 3) - 1px);
}
.divCatalog .page3 .text {
	display:none;
}
.divCatalog .page3 .list {
	display:none;
}

.divCatalog .page4 .image1, .divCatalog .page4 .image2 {
	width: calc(50% - 1px);
	height:100%;
}
.divCatalog .page4 .image2 {
	left:auto;
	right:0;
}
.divCatalog .page4 .text {
	top:auto;
	bottom:0px;
	left:auto;
	right:0px;
	width: calc(50% - 1px);
	height: calc((100% * 1 / 3) - 1px);
	z-index:1;
}
.divCatalog .page4 .list {
	display:none;
}

.divCatalog .page5 .image1, .divCatalog .page5 .image2 {
	width: calc(50% - 1px);
	height:100%;
}
.divCatalog .page5 .image2 {
	left:auto;
	right:0;
}
.divCatalog .page5 .text {
	top:auto;
	bottom:0px;
	width: calc(50% - 1px);
	height: calc((100% * 1 / 3) - 1px);
	z-index:1;
}
.divCatalog .page5 .list {
	display:none;
}

.divCatalog .page6 .image1 {
	top:auto;
	bottom:0;
	width: calc((100% * 1 / 3) - 1px);
}
.divCatalog .page6 .image2 {
	left:auto;
	right:0;
	width: calc((100% * 2 / 3) - 1px);
}
.divCatalog .page6 .text {
	width: calc((100% * 1 / 3) - 1px);
	height: calc(50% - 1px);
	z-index:1;
}
.divCatalog .page6 .list {
	display:none;
}

.divCatalog .page7 .image1 {
	width: calc((100% * 2 / 3) - 1px);
}
.divCatalog .page7 .image2 {
	left:auto;
	right:0;
	top:auto;
	bottom:0;
	width: calc((100% * 1 / 3) - 1px);
}
.divCatalog .page7 .text {
	left:auto;
	right:0;
	width: calc((100% * 1 / 3) - 1px);
	height: calc(50% - 1px);
	z-index:1;
}
.divCatalog .page7 .list {
	display:none;
}

.divCatalog .page8 .image1 {
	left:auto;
	right:0;
	width: calc(50% - 1px);
}
.divCatalog .page8 .image2 {
	display:none;
}
.divCatalog .page8 .text {
	left:auto;
	right:0;
	top:auto;
	bottom:0;
	width: calc(50% - 1px);
	height: calc((100% * 1 / 3) - 1px);
	z-index:1;
}
.divCatalog .page8 .list {
	width: calc(50% - 1px);
}

.divCatalog .page9 .image1 {
	top:auto;
	bottom:0;
	width: calc(50% - 1px);
}
.divCatalog .page9 .image2 {
	display:none;
}
.divCatalog .page9 .text {
	width: calc(50% - 1px);
	height: calc((100% * 1 / 3) - 1px);
	z-index:1;
}
.divCatalog .page9 .list {
	left:auto;
	right:0;
	width: calc(50% - 1px);
}

.divCatalog .page10 .image1 {
	width: calc(50% - 1px);
}
.divCatalog .page10 .image2, .divCatalog .page10 .text {
	display:none;
}
.divCatalog .page10 .list {
	left:auto;
	right:0;
	width: calc(50% - 1px);
}

.divCatalog .page11 .image1, .divCatalog .page11 .image2 {
	width: calc(50% - 1px);
}
.divCatalog .page11 .image2 {
	left:auto;
	right:0;
}
.divCatalog .page11 .text {
	top:auto;
	bottom:0;
	left:auto;
	right:0;
	width: calc(50% - 1px);
	height: calc((100% * 1 / 3) - 1px);
	z-index:1;
}
.divCatalog .page11 .list {
	display:none;
}

.divCatalog .page12 .image1 {
	left:auto;
	right:0;
	width: calc(50% - 1px);
	height:100%;
}
.divCatalog .page12 .image2 {
	display:none;
}
.divCatalog .page12 .text {
	width: calc(50% - 1px);
	height:100%;
}
.divCatalog .page12 .list {
	display:none;
}

/* =========================================================================== */
/* PRODUCT =================================================================== */
/* =========================================================================== */
.divCatalog ul.col2 > li.row {
	width: calc((100% - 1 * 20px) / 2);
}
.divCatalog ul.col3 > li.row {
	width: calc((100% - 2 * 20px) / 3);
}
.divCatalog ul.col4 > li.row {
	width: calc((100% - 3 * 20px) / 4);
}
.divCatalog ul.col5 > li.row {
	width: calc((100% - 4 * 20px) / 5);
}
.divCatalog ul.col6 > li.row {
	width: calc((100% - 5 * 20px) / 6);
}
.divCatalog ul.col7 > li.row {
	width: calc((100% - 6 * 20px) / 7);
}
.divCatalog ul.col8 >  {
	width: calc((100% - 7 * 20px) / 8);
}
.divCatalog ul.col2 > li.row:nth-child(2n+1),
.divCatalog ul.col3 > li.row:nth-child(3n+1),
.divCatalog ul.col4 > li.row:nth-child(4n+1),
.divCatalog ul.col5 > li.row:nth-child(5n+1),
.divCatalog ul.col6 > li.row:nth-child(6n+1),
.divCatalog ul.col7 > li.row:nth-child(7n+1),
.divCatalog ul.col8 > li.row:nth-child(8n+1) {
	clear:both;
	margin-left:0px;
}
.divCatalog ul.productlist, .divCatalog ul.col {
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
.divCatalog ul.col > li.row {
	float:left;
	margin-left:20px;
	margin-bottom:20px;
}
.divCatalog ul.productlist > li.row {
	position:relative;
	float:left;
	margin-left:20px;
	margin-bottom:10px;
}
.divCatalog ul.productlist > li.row h3,
.divCatalog ul.productlist > li.row div.content, 
.divCatalog ul.productlist > li.row div.price {
	text-align:center;
	margin:0;
}
.divCatalog ul.productlist > li.row .subtitle {
	text-overflow: ellipsis;
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
	margin:0;
}

.divCatalog ul.productlist > li.row div.thumb {
	overflow:hidden;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	        border-radius:50%;
	background-color:#F0F0F0;
	border:1px solid #CCC;
}
.divCatalog ul.productlist > li.row div.thumb img {
	display:block;
	width:100%;
	height:auto;
}
.divCatalog ul.productlist > li.row div.num {
	top:0;
	left:0;
	-webkit-transform: translate(0%, 0%);
       -moz-transform: translate(0%, 0%);
         -o-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
}
.divCatalog ul.productlist > li.row div.price {
	font-weight: 900;
}
.divCatalog ul.productlist > li.row div.tag_promotion {
	width:36px;
	height:36px;
	background-size: 36px 36px;
}
.divCatalog ul.productlist > li.row div.tag_promotion span {
	top:10px;
}


.divCatalog .page10 ul.productlist > li.row {
	float:none;
	width:100%;
	margin:10px 0;
	background-color:#F0F0F0;
	overflow:hidden;
}
.divCatalog .page10 ul.productlist > li.row div.num {
	position:relative;
	float:left;
	top:auto;
	right:auto;
	margin-top:5px;
	margin-left:5px;
}
.divCatalog .page10 ul.productlist > li.row div.thumb {
	display:none;
}
.divCatalog .page10 ul.productlist > li.row div.content {
	float:left;
	margin-top:5px;
	margin-left:12px;
	text-align:left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space:nowrap;
	width: calc(100% - 30% - 45px);
}
.divCatalog .page10 ul.productlist > li.row h3,
.divCatalog .page10 ul.productlist > li.row .subtitle {
	text-align:left;
}
.divCatalog .page10 ul.productlist > li.row div.price {
	float:right;
	margin-top:5px;
	text-align:right;
	width: 30%;
}