@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


:root
{
	--white: #FFFFFF;
	--dark_grey: #AAAAA5;
	--grey: #F4F4F3;
	--gold: #E3D2AF;
	--blue: #15395A;
	--black: #0A0909;
	--red: #FF0000;

	
--h1:400 42px/82px 'Merriweather', serif;
--h2:400 36px/56px 'Merriweather', serif;
--h3:400 30px/48px 'Merriweather', serif;
/*--h4:500 18px/26px 'Cormorant';
--h5:400 16px/24px 'Cormorant';
--h6:400 14px/20px 'Cormorant';
--h7:400 12px/16px 'Cormorant';*/


--pprice2: 500 26px/40px  'Roboto', sans-serif;
--pprice: 600 24px/38px  'Roboto', sans-serif;
--name: 400 24px/38px  'Roboto', sans-serif;
--p0:400 20px/30px  'Roboto', sans-serif;
--p1:400 18px/28px  'Roboto', sans-serif;
--p2:400 16px/24px 'Roboto', sans-serif;
--p3:400 14px/22px 'Roboto', sans-serif;
--p4:400 12px/20px 'Roboto', sans-serif;
--p5:400 10px/16px 'Roboto', sans-serif;
/*--nav1:400 14px/22px 'Source Serif Pro';
--button: 400 16px/22px 'Cormorant';
--price: 700 20px/28px 'Montserrat';
--price-big: 600 30px/40px 'Montserrat';
--moserrat-standart: 400 10px/16px 'Montserrat';
--moserrat-more: 400 14px/22px 'Montserrat';*/
}
/*.h1{display: block;font: var(--h1);margin: 0 0 32px 0;}
.h2{display: block;font: var(--h2);margin: 0;}
.h3{display: block;font: var(--h3);margin: 0;}
.h4{display: block;font: var(--h4);margin: 0;}
.h5{display: block;font: var(--h5);margin: 0;}
.h6{display: block;font: var(--h6);margin: 0;}*/
.p1{font: var(--p1);}
.p2{font: var(--p2);}
/*.p3{font: var(--p3);}
.nav1{font: var(--nav1);}
.price{font: var(--price)}*/



a, input, select, textarea 
{
	outline: none;
	position: relative;
}
img 
{
	max-width: 100%;
}
h1, .h1 {
display: inline-block;
font: var(--h1);
margin:0;
padding: 0;
}
h2,.h2 { font: var(--h2);}
h3,.h3 { font: var(--h3); margin-bottom:60px}
h4 
{
	font-size: 24px;
	margin:0;
}
.headline
{
	display: flex;
	align-items: flex-start;
	gap:40px;
	margin-bottom: 20px;
}
.variants
{
	display: block;
	margin-top: 100px;
}
.columns
{
	display: grid;
	grid-template-columns: 4fr 8fr;
	grid-gap: 20px;
}
.sticky
{
	position: relative;
}
.colors-list
{
	top:50px;
	display: flex;
	position: sticky;
	flex-direction: column;
	gap:20px;
}
.colors-list a 
{
	display: flex;
	position: relative;
	width: 280px;
	align-items: center;
	gap:20px;
}
.colors-list a>.pic
{
	display: block;
	width: 72px;
	height: 72px;
}
.colors-list a>.pic>img
{
	width: 100%;
}
.list
{
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom:50px;
}
.item
{
	display: grid;
	grid-template-rows: 162px 1fr;
}
.item .pic 
{
	display: flex;
	align-items: center;
	justify-content: center;
}


button,.pointer
{
	cursor: pointer;
}
.bbot
{
	border-bottom: 1px solid var(--gold);
}
.flex-start
{
	display: flex;
	justify-content: flex-start;
}
.hidden
{
	display: none !important;
}
.shop-buttons sup 
{
	display: none;
}
.gold { color: var(--gold); }
.dark_grey { color: var(--dark_grey); }
.blue { color: var(--blue); }
.black { color: var(--black); }
.red { color: var(--red); }


.bg-gold { background-color: var(--gold); }
.bg-blue { background-color: var(--blue); color: var(--white);}

.bold 
{
	font-weight: 500;
}

.align-center 
{
	display: flex;
	justify-content: center;
}

body, html
{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Roboto', sans-serif;
	background-color: #ffffff;
	color: var(--black);
	position: relative;
	font: var(--p1);
}

.dcontent
{
	display: block;
	margin: 0 auto;
	padding:50px 0;
	width: 1080px;
}
.cat-desc
{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 50px;
}

.image-slider {
	display: block;
	position: relative;
	padding-top: 56.25%;
	width: 100%;
	margin: 0 0 0 0;
	float: left;
}

.is-slides>*
{
	opacity: 0;
	transition: all 0.3s ease;
}
.is-slides>*.visible
{
	opacity: 1;
}

.is-slides>div
	{
		background-position: center;
		background-size: contain;
		display: block;
		position: absolute;
		background-repeat: no-repeat;
		top:0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
	}

.is-arrows {
	position: absolute;
	bottom: 10%;
	right: 20px;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}

.is-arrows a {
	width: 44px;
	height: 44px;
	font-size: 44px;
	line-height: 44px;
	background-color: var(--white);
	border-radius: 50%;
	display: block;
	text-decoration: none !important;
}

.downloads {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 30px;
}

.specifications .downloads a:before {
font-size: 44px;
line-height: 44px;
width: 35px;
height: 44px;
}

.downloads a:before {
display: block;
position: absolute;
top: 0;
left: 0;
content: "\e917";
font-family: 'icomoon';
color: var(--blue);
}

.specifications .downloads a {
padding: 8px 0 8px 55px;
position: relative;
}

a 
{
	text-decoration: none;
	color: var(--black);
}


/* CATALOG */
.catalog-list>a 
{
	background: #FFFFFF;
	border-radius: 8px;
	padding: 60px 35px;
	text-align: center;
}
.catalog-list>a .pic
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 130px;
	margin:0 auto 32px;
}
.catalog-list
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 20px;
	grid-column-gap: 32px;
	margin: 32px 0;
}

@media all and (min-width: 701px)
{
	.ms
	{
		display: none !important;
	}
	.colors-list a.selected:before
	{
		display: block;
		position: absolute;
		right:0;
		top:27px;
		width:9px;
		height: 18px;
		background: url('../images/arrow.svg') center center no-repeat;
		background-size: contain;
		content:'';
	}
}

@media all and (max-width: 700px)
{

	:root
{
	--white: #FFFFFF;
	--dark_grey: #AAAAA5;
	--grey: #F4F4F3;
	--gold: #E3D2AF;
	--blue: #15395A;
	--black: #0A0909;
	--red: #FF0000;

	
--h1:400 22px/40px 'Merriweather', serif;
--h2:400 36px/56px 'Merriweather', serif;
--h3:400 22px/30px 'Merriweather', serif;
/*--h4:500 18px/26px 'Cormorant';
--h5:400 16px/24px 'Cormorant';
--h6:400 14px/20px 'Cormorant';
--h7:400 12px/16px 'Cormorant';*/


--pprice2: 500 26px/40px  'Roboto', sans-serif;
--pprice: 600 24px/38px  'Roboto', sans-serif;
--name: 400 24px/38px  'Roboto', sans-serif;
--p0:400 20px/30px  'Roboto', sans-serif;
--p1:400 18px/28px  'Roboto', sans-serif;
--p2:400 16px/24px 'Roboto', sans-serif;
--p3:400 14px/22px 'Roboto', sans-serif;
--p4:400 12px/20px 'Roboto', sans-serif;
--p5:400 10px/16px 'Roboto', sans-serif;
/*--nav1:400 14px/22px 'Source Serif Pro';
--button: 400 16px/22px 'Cormorant';
--price: 700 20px/28px 'Montserrat';
--price-big: 600 30px/40px 'Montserrat';
--moserrat-standart: 400 10px/16px 'Montserrat';
--moserrat-more: 400 14px/22px 'Montserrat';*/
}
	.fs
	{
		display: none!important;
	}

	.dcontent
	{
		display: block;
		margin: 0 auto;
		padding:20px 20px;
		width: 100vw;
		box-sizing: border-box;
	}	

	.headline
	{
		justify-content: space-between;
		margin-top: 20px;
	}

	.headline img
	{
		height: 40px;
	}

	.columns
	{
		grid-template-columns: 1fr;
	}

	.list
	{
		display: flex;
		justify-content: flex-start;
		grid-template-columns: initial;
		gap:20px;
		padding: 30px 20px;
		width: 100vw;
		box-sizing: border-box;
		overflow: auto;
		margin-left: -20px;
	}

	.list>.item
	{
		width: 50vw;
		flex: none;
	}

	.mob
	{
		position: relative;
	}
	.prod-variants
	{
		margin-top: 30px;
	}
	.colors-list
	{
		width: calc(100vw - 20px);
		box-sizing: border-box;
		position: absolute;
		top:140px;
		left: -10px;
		display: none;
		background: var(--white);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		padding: 0px 0;
		max-height: 40vh;
		overflow: auto;
	}

	.colors-list a, .colors-selected a
	{
		display: flex;
		position: relative;
		width: calc(100vw - 40px);
		align-items: center;
		gap:20px;
	}

	.colors-list a
	{
		padding: 10px;
	}

	.colors-list a>.pic, .colors-selected a>.pic
	{
		display: block;
		width: 72px;
		height: 72px;
	}
	.colors-list a>.pic>img, .colors-selected a>.pic>img
	{
		width: 100%;
	}
	.colors-selected a.selected:before
	{
		display: block;
		position: absolute;
		right:0;
		top:27px;
		width:9px;
		height: 18px;
		background: url('../images/arrow.svg') center center no-repeat;
		background-size: contain;
		content:'';
	}

	.colors-selected a.selected
	{
		padding: 20px 0;
	}
	.colors-selected a.selected:before
	{
		transform: rotate(90deg);
		top:44px;
	}

	.variants
	{
		margin-top: 50px;
	}
}