:root {
	--bg-body: #ddc;
	--bg-darck-block: #541;
	--bg-inner: #eed;
	--bg-head-footer: #403e3d;
	
	--font-color-body: #546;
	--font-color-headfooter: #fff;
	--font-color-h1: #506080;
	--font-color-h2: #486585;
	--font-color-h3: #466a89;
	--font-color-h4: #447090;	
	--font-color-h5: #427595;
	--font-color-h6: #407a99;
	--font-color-a:  #457;
	--font-color-inner: #fff;
	--font-color-logo: #fff;
	--font-color-logo-hover: #9af;
        --font-color-list1: #887;	

	--font-size: 20px;
}
body {
	font-size: var(--font-size);
        font-family: Noto Sans, sans-serif;
	font-stretch: ultra-expanded;	
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	margin: 0;
	padding: 0;
	background: var(--bg-body);
	color: var(--font-color-body);
	font-weight: lighter;
	
}

h1 {
	color: var(--font-color-h1);
	font-stretch: normal;
}

h2 {
	color: var(--font-color-h2);	
}
h3 {
	color: var(--font-color-h3);
}

h4 {
	color: var(--font-color-h4);	
}

h5 {
	color: var(--font-color-h5);	
}

h6 {
	color: var(--font-color-h6);
}

p {
	color: var(--font-color-body);
	font-stretch: ultra-expanded;
}


a {
	text-decoration: none;
	transition: all 0.3s linear 0.01s;
	color: var(--font-color-a);
	width: fit-content;
	height: fit-content;
	margin: 0;
	padding: 0;
    font-family: Noto Sans, sans-serif;	
}

a:hover{
	color: #2ff;
}

img {
	max-width: 800px;
}

/* -center-row */  /*   */
.all-1rc{
	margin: 0.2rem;
	padding: 0.5rem;
	width: fix-content;
	height: fix-content;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
    perspective: 540px;	
}


 /* -center-column  */
.all-1cc{
	margin: 1rem;
	padding: 1rem;
	width: fix-content;
	height: fix-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
    perspective: 540px;	
}
 /* -width-row  */
.all-1rw{
	margin: 0rem;
	padding: 0rem;
	width: fix-content;
	display: flex;
	flex-direction: row;	
	justify-content: space-around;
	align-items:  space-around;
	flex-wrap: wrap;
	border-radius: 1rem;
    perspective: 540px;
}
 /* -width-column  */
.all-1cw{
	margin: 1rem;
	padding: 1rem;
	width: fix-content;
	height: fix-content;
	display: flex;
	flex-direction: column;	
	justify-content:  space-around;
	align-items: space-around;
	border-radius: 1rem;
    perspective: 540px;	
}
 /* -border   */
.all-2{
	border-radius: 1rem;
}
 /*  -shadow */
.all-3 {
	box-shadow: inset 15px 10px 6px rgba(100, 100, 10, 0.3), inset -15px -10px 8px rgba(10, 20, 40, 0.2), 10px 5px 10px rgba(150, 150, 10, 0.2), -20px -8px 20px rgba(10, 10, 40, 0.2);	
	transition: all 0.6s linear 0.01s;	
}
 /*  -shadow */
.all-3:hover {
		box-shadow: inset 23px 6px 13px rgba(100, 100, 10, 0.3), inset -10px -15px 10px rgba(0, 0, 40, 0.4), 30px 10px 20px rgba(150, 150, 0, 0.3), -10px -15px 20px rgba(10, 10, 50, 0.4);
}
 /*  -transform */
.all-4 {
	transition: all 0.6s linear 0.01s;	
}

 /*  -transform */
.all-4:hover {
	transform: rotateX(15deg) rotateY(5deg);	
}

/* width 80$ */
.all-5 {
	width: 80%;
	display: flex;
	flex-direction: row;	
	justify-content:  space-around;
	align-items: space-around;
	flex-wrap: wrap;
    perspective: 540px;
}




.form1 {
	background: #f9f;
}
.form2 {
	background: #a9f;
}
.form3 {
	background: #ff9;
}
.form4 {
	background: #afc;
}
.form5 {
	background: #ace;
}
.form6 {
	background: #ff8;
}
.form7 {
	background: #6fa;
}
.form8 {
	background: #9ff;
}





.list1 {
	margin: 0rem;
	padding: 0rem 1rem;
	display: flex;
	flex-direction: column;	
	justify-content:  center;
	align-items: center;
	color: var(--font-color-list1);	
}

.list1 span {
	color: red;
	font-weight: bold;

	float: left;
}

.list1 p {
	color: var(--font-color-list1);	
}





.head {
	background: var(--bg-head-footer);
	color: var(--font-color-headfooter);	
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	perspective: 540px;
	font-size: 1rem;
}

.head button {
	font-size: 1rem;	
	margin: 0rem 1rem;
	padding: 0.2rem 1rem;	
	border-radius: 0.4rem;	
	background: var(--bg-head-footer);
	color: var(--font-color-headfooter);
	box-shadow: inset 3px 3px 3px rgba(150, 180, 100, 0.2), inset -5px -5px 5px rgba(0, 0, 40, 0.2), 5px 5px 5px rgba(150, 150, 100, 0.3), -5px -5px 5px rgba(20, 30, 40, 0.2);	
	transition: all 0.6s linear 0.01s;		
}

.head button:hover {
	box-shadow: inset 5px 5px 5px rgba(100, 100, 100, 0.9), inset -5px -5px 5px rgba(0, 0, 20, 0.9), 5px 5px 5px rgba(150, 150, 100, 0.3), -15px -15px 5px rgba(10, 30, 50, 0.3);	
}

.head select {
	font-size: 1rem;
	margin: 0rem 1rem;
	padding: 0.2rem 1rem;	
	border-radius: 0.4rem;
	background: var(--bg-head-footer);
	color: var(--font-color-headfooter);
	box-shadow: inset 5px 5px 5px rgba(180, 150, 100, 0.2), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 5px 5px 5px rgba(150, 150, 10, 0.3), -5px -5px 5px rgba(10, 20, 30, 0.3);	
	transition: all 0.6s linear 0.01s;		
}

.head select:hover {
	box-shadow: inset 5px 5px 5px rgba(100, 100, 100, 0.9), inset -5px -5px 5px rgba(0, 0, 20, 0.9), 5px 5px 5px rgba(150, 150, 100, 0.3), -15px -15px 5px rgba(10, 10, 30, 0.3);	
}

.footer {
	background: var(--bg-head-footer);
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	justify-content: flex-start;
	flex-wrap: wrap;
	perspective: 540px;
	color: var(--font-color-head-footer);
	font-size: 1rem;	
}
 /* -slide   */
.main-1{
	border: 1px solid #eee;
	margin: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	perspective: 540px;
	min-width: 25rem;
	max-width: 60rem;
}
 /* -article   */
.main-2{
	background: var(--bg-darck-block);
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-content: center;
	flex-wrap: wrap;
	perspective: 540px;
	max-width: 800px;	
}
 /* -catalog-grid   */
.main-3 {
	background: var(--bg-darck-block);
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	justify-content: flex-start;
	flex-wrap: wrap;
	perspective: 540px;
	max-width: 900px;		
}
 /* -catalog-list   */
.main-4{
	background: var(--bg-darck-block);
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	perspective: 540px;
	max-width: 700px;	
}

.main-5 {
	background: #eee;
	padding: 0rem 1rem;
	margin: 1rem 0rem;
	min-width: 500px;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	perspective: 540px;
}

.main-5 img {
	width: 100%;
}

.main-6 {
	max-width: 1200px;
	background: #ccc;
	padding: 0rem 1rem;
	margin: 1rem 0rem;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-srart;
	flex-wrap: nowrap;
}

.main-6 img {
	width: 100%;
	
}
.main-7 {
    margin: 1rem;
	padding: 1rem;
	background: #bbb;
	padding: 0rem 1rem;
	margin: 1rem 0rem;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	perspective: 500px;
}



.main-7-catalog {
	border: 5px solid #fff;
	box-shadow: inset 5px 5px 5px rgba(180, 150, 100, 0.2), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 5px 5px 5px rgba(150, 150, 10, 0.3), -5px -5px 5px rgba(10, 20, 30, 0.3);		
	max-width: 20%;
	min-width: 18%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	border-radius: 2rem;
	margin: 1rem 0.1rem;
	padding: 0.6rem 1rem;
	transition: all 0.5s linear 0.01s;
	background: #ddd;
}

.main-7-catalog:hover {
	box-shadow: inset 15px 20px 5px rgba(255, 255, 210, 0.5), inset -8px -15px 5px rgba(0, 0, 20, 0.5), 10px 20px 20px rgba(250, 150, 100, 0.3), -15px -15px 15px rgba(10, 10, 60, 0.3);	
	transform: rotateX(10deg) rotateY(4deg);
	background: #ccc;
}

.main-7-catalog img {
	width: 100%;
	border-radius: 1rem;
}

.main-7-catalog a {
	width: 90%;
	padding: 1rem;
	margin: 1rem;
	border-radius: 1rem;
}

.main-7-catalog a:hover {
	background: #fff;
	box-shadow: 3px 3px 3px rgba(255, 255, 255, 0.3), -3px -3px 3px rgba(255, 255, 255, 0.3);
}

.main-8-big {
        display: grid;
        grid-template-columns: 1fr 1fr;
		width: 100%;
}



.main-8-small-1 {
	margin: 1rem 0;
	padding: 0;
	align-self: center;
	justify-self: start;
	width: 96%;
}

.main-8-small-1 img {
	width: 8rem;
	height: 6rem;
	float: left;
	text-align: right;
	margin: 0px 20px 0px 0px;
}

.main-8-small-2 {
	margin: 1rem 0;
	padding: 0;
	align-self: center;
	justify-self: end;
	width: 96%;
	text-align: right;
}


.main-8-small-2 img {
	width: 8rem;
	float: right;
	height: 6rem;
	margin: 0px 0px 0px 20px;
}

.main-9 {
	background: #ddd;
	font-size: 14px;
	max-width: 350px;
	margin: 1rem;
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

/*            ОБЪЕМНАЯ КНОПКА ДВА РАЗМЕРА ШРИФТА                  */
/*            ПРИ НАЖАТИИ ПОДСВЕЧИВАЕТ                 */
.main-9-h1 a {
	color: #640;
	font-size: 2rem;
	width: 100%;
	transition: all 0.4s linear 0.0s;
	border-radius: 2rem;
	padding: 0.6rem;
	background: #b5b5b5;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);			
    margin: 10px;
}

.main-9-h1 a:hover {
	color: #f70;
	width: 100%;
	background: #fff;
	box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), -5px -15px 15px rgba(255, 255, 255, 0.3);	
}

.main-9-h2 a {
	color: #640;
    margin: 2rem;	
	font-size: 1.4rem;
	width: 100%;
	transition: all 0.4s linear 0.0s;
	border-radius: 2rem;
	padding: 0.6rem;
	background: #b5b5b5;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);			
}

.main-9-h2 a:hover {
	color: #f70;
	width: 100%;
	background: #fff;
	box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), -5px -15px 15px rgba(255, 255, 255, 0.3);	
}








.main-10 {
	border: 5px solid #fff;
	box-shadow: inset 5px 5px 5px rgba(180, 150, 100, 0.2), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 5px 5px 5px rgba(150, 150, 10, 0.3), -5px -5px 5px rgba(10, 20, 30, 0.3);		
	max-width: 6rem;
	min-width: 6rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	border-radius: 1rem;
	margin: 1rem;
	padding: 1rem;
	transition: all 0.3s linear 0.01s;
	background: #ddd;
}

.main-10:hover {
	box-shadow: inset 15px 20px 5px rgba(255, 255, 210, 0.5), inset -8px -15px 5px rgba(0, 0, 20, 0.5), 10px 20px 20px rgba(250, 150, 100, 0.3), -15px -15px 15px rgba(10, 10, 60, 0.3);	
	transform: rotateX(30deg) rotateY(10deg);
	background: #ccc;
}






.main-11-catalog {
	 /*border: 5px solid #ССС; */
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);	
	width: 260px;
	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: spase-between;
	border-radius: 3rem;
	margin: 1rem;
	transition: all 0.5s linear 0.01s;
	background: #ddd;
	padding: 1rem;
	background: #b5b5b5;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);				

}

.main-11-catalog:hover {
	background: #ccc;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 255, 0.9), inset -5px -5px 5px rgba(10, 15, 20, 0.7), 10px 15px 10px rgba(150, 150, 10, 0.2), -5px -10px 10px rgba(0, 20, 20, 0.3);				
}

.main-11-catalog img {
	width: 100%;
	border-radius: 2rem;
}

.main-11-catalog a {
	width: auto;
	border-radius: 1rem;
	font-size: 20px;
	margin: 1rem;
}

.main-11-catalog a:hover {
	background: #ddd;
	box-shadow: 3px 3px 3px rgba(255, 255, 255, 0.5), -3px -3px 3px rgba(255, 255, 255, 0.3);
}





/* FON GOLD ДЛЯ ТЕГОВ МИГАЮЩИХ на странице тегов*/
.main-12 {
	min-width: 16rem;
	max-width: 40rem;
	background: radial-gradient(#a94, transparent);
	padding: 1rem;
	margin: 0rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: spase-between;
	flex-wrap: wrap;	
}

.main-13 {
	max-width: 1200px;
	background: #ccc;
	padding: 0rem;
	margin: 0rem;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-srart;
	flex-wrap: wrap;
}

.main-14 {
	max-width: 200px;
	background: #ccc;
	padding: 0rem;
	margin: 0rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;	
}

.main-13 img {
	width: 100%;
}

.main-14 img {
	width: 100%;
}


.main-15-big {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items:space-around;
	padding: 3rem;
	perspective: 500px;
}
.main-15-all {
	max-width: 10rem;
	padding: 1rem;
        margin: 1rem;
	background: #777;
	transition: all 0.4s linear 0.01s;
	border-radius: 1rem;
	border: 3px solid #888;
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.3), -10px -10px 20px rgba(0, 20, 20, 0.4);				
	font-size: 14px;
	color: #222;
}
.main-15-all:hover {
	color: #fff;
	box-shadow: inset 10px 15px 5px rgba(255, 255, 200, 0.6), inset -5px -10px 5px rgba(10, 15, 20, 0.2), 10px 20px 10px rgba(150, 150, 10, 0.3), -10px -15px 20px rgba(0, 20, 20, 0.4);				
        transform: translateX(10px) rotateY(-10deg);
}
.main-15-all img{
	width: 100%;
	border-radius: 50%;
	filter: grayscale(74%);
}
.main-15-all img:hover{
	filter: grayscale(10%);
}
.main-15-all a{
	transition: all 0.4s linear 0.01s;
        margin: 1rem;
}

.main-15-all a:hover{
	background: #fff;
	border-radius: 1rem;
	color: red;
}

.main-15-catalogteg {
	background: radial-gradient(circle at 100%, transparent,#fff);	
}
.main-16-catalogcategory1 {
	border: 3px solid var(--font-category1);
	background: radial-gradient(circle at 100%, transparent,var(--font-category1));
}
.main-16-catalogcategory2 {
	border: 3px solid var(--font-category2);	
}
.main-16-catalogcategory3 {
	border: 3px solid var(--font-category3);
}
.main-16-catalogcategory4 {
	border: 3px solid var(--font-category4);
}
.main-16-catalogcategory5 {
	border: 3px solid var(--font-category5);
}






.main-17-catalog {
	/* border: 5px solid #ССС; */
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);	
	width: 12rem;
	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: spase-between;
	border-radius: 3rem;
	margin: 1rem 0rem;
	transition: all 0.5s linear 0.01s;
	background: #ddd;
	padding: 1rem;
	background: #b5b5b5;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);				

}

.main-17-catalog:hover {
	background: #ccc;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 255, 0.9), inset -5px -5px 5px rgba(10, 15, 20, 0.7), 10px 15px 10px rgba(150, 150, 10, 0.2), -5px -10px 10px rgba(0, 20, 20, 0.3);				
}

.main-17-catalog img {
	width: 100%;
	border-radius: 2rem;
}

.main-17-catalog a {
	width: auto;
	border-radius: 1rem;
	font-size: 20px;
	margin-bottom: 10px;
}

.main-17-catalog a:hover {
	background: #ddd;
	box-shadow: 3px 3px 3px rgba(255, 255, 255, 0.5), -3px -3px 3px rgba(255, 255, 255, 0.3);
}




.main-18-big {
	background: radial-gradient(circle at 50%,#ccc, transparent, #888, transparent);
	margin: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: space-between;
	flex-wrap: nowrap;
}

.main-18-big2 {
	background: radial-gradient(circle at 50%, #979, transparent, #fff, #faa, #ccf, #af8, transparent);
	margin: 1rem 0rem;
	padding: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.main-18-top {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: space-between;
	width: 36rem;
}

.main-18-left {
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
}

.main-18-right {
	margin: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
    perspective: 500px;	
	width: 20rem;
	font-size: 0.8em;
	transition: all 0.4s linear 0.02s;
}

.main-18-right h1{
	font-size: 1.4em;
	color: #228;
}

.main-18-article1 {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main-18-article1 img{
	width: 36rem;
	height: 18rem;
}

.main-18-article2 {
	font-size: 16px;
	color: #000;
	margin:	2rem 0rem;
	width: 11.4rem;	
}

.main-18-article2 img{
	width: 11.4rem;
	height: 5.7rem;
	transition: all 0.4s linear 0.01s;
}

.main-18-article2:hover{	
}



.main-18-container {
	margin:	0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
    flex-wrap: wrap;	
}

.main-18-tag {
	background: radial-gradient(circle at 100%, var(--font-category1), transparent,);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
    flex-wrap: wrap;
	perspective: 400px;
	transition: all 0.4s linear 0.01s;
	margin: 2rem 0rem;
}

.tag1-littl {
	margin: 0rem;
	padding: 0.6rem;
	font-size: 1.2rem;
	box-shadow: inset -10px -5px 5px rgba(255, 255, 255, 0.9), inset -5px -5px 5px rgba(10, 15, 20, 0.7), 10px 15px 10px rgba(150, 150, 10, 0.2), 15px 10px 10px rgba(0, 20, 20, 0.3);					
	border-radius: 0rem 0rem 2rem 1rem;
	transition: all 0.6s linear 0.01s;
	color: #345;
}
.tag1-littl:hover {
	transform-origin: top;
	transform: rotateX(30deg);
	box-shadow: inset 10px 5px 5px rgba(255, 255, 255, 0.1), inset -5px -5px 5px rgba(0, 0, 0, 0.9), 10px 15px 10px rgba(150, 150, 10, 0.2), -15px -15px 10px rgba(0, 20, 20, 0.3);					
    color: #fff;
	background: #444;
}


.main-19-fon {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #555;
}


.main-20 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    width: 100%;
	background: radial-gradient(circle at 50%, #777, transparent, #fff, #aaa, transparent, #ccc, #888, transparent);
	padding: 2rem 1rem;
}
.main-20-1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 2rem 1rem;	
	width: 12rem;
	font-size: 16px;
}

.main-20-1 img{
	width: 100%;
	padding: 1rem;
}

.main-20-2 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	max-width: 800px;
}

.main-20-3 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
}

.main-20-h1 a {
	color: #640;
	font-size: 2rem;
	width: 100%;
	transition: all 0.4s linear 0.0s;
	border-radius: 2rem;
	padding: 0.6rem;
	background: #b5b5b5;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);			
    margin: 10px;
}

.main-20-h1 a:hover {
	color: #f70;
	width: 100%;
	background: #fff;
	box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), -5px -15px 15px rgba(255, 255, 255, 0.3);	
}

.main-20-h2 {
	color: #640;
    margin: 0.4rem;	
	font-size: 1.2rem;
	transition: all 0.4s linear 0.0s;
	border-radius: 2rem;
	padding: 0.6rem;
	background: #b5b5b5;	
	box-shadow: inset 10px 5px 5px rgba(255, 255, 200, 0.6), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 10px 15px 10px rgba(150, 150, 10, 0.5), -10px -10px 20px rgba(0, 20, 20, 0.3);			
}

.main-20-h2:hover {
	color: #f70;
	background: #fff;
	box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), -5px -15px 15px rgba(255, 255, 255, 0.3);	
}




.logo {
	border-radius: 50%;
    /* font-family: Snell Roundhand, cursive; */
	font: italic 1.2em "Fira Sans", serif;
	transition: all 0.4s linear 0.05s;
	margin: 0rem 2rem;
	padding: 0rem 2rem;
	color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;		
}

.logo a{
	border-radius: 50%;
    font-family: Brush Script MT, Brush Script Std, cursive;
	font-size: 2rem;
	transition: all 0.4s linear 0.05s;
	color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	min-height: 3rem;
}

.logo img {
	border-radius: 50%;
	margin: 0px 1rem 0px 1rem;	
	transition: all 0.4s linear 0.05s;	
	width: 2rem;
	height: 2rem;
	box-shadow: inset 5px 5px 5px rgba(180, 150, 100, 0.2), inset -5px -5px 5px rgba(10, 15, 20, 0.2), 5px 5px 5px rgba(150, 150, 1-0, 0.3), -5px -5px 5px rgba(10, 20, 30, 0.3);		
}

.logo:hover {
	color: #a9f;
	box-shadow: inset 5px 5px 5px rgba(100, 100, 100, 0.9), inset -5px -5px 5px rgba(0, 0, 20, 0.9), 5px 5px 5px rgba(150, 150, 100, 0.3), -15px -15px 5px rgba(10, 10, 30, 0.3);	
	
}

.logo img:hover {		
	box-shadow: inset 5px 5px 5px rgba(100, 100, 100, 0.9), inset -5px -5px 5px rgba(0, 0, 20, 0.9), 5px 5px 5px rgba(150, 150, 100, 0.3), -15px -15px 5px rgba(10, 10, 30, 0.3);	
}

.logo button {
}

.inner1 {
	color: var(--font-color-inner);
	background: var(--bg-inner);
	width: 100%;
}

.inner2 {
	color: var(--font-color-inner);
	background: var(--bg-inner);
	font-family: Snell Roundhand, cursive;	
}

.inner1 .image1 {
	float: left;
	padding: 1rem;
	width: 8rem;
}

.inner2 .imgage2 {
	float: right;
	padding: 1rem;
	width: 8rem;
}

.inner1 .image1 img, .inner1 .image1 img {
	width: 6rem;
}
.inner1 h1, .inner1 h2, .inner1 h3, .inner1 h4, .inner1 h5, .inner1 h6, 
.inner1 h1, .inner1 h2, .inner1 h3, .inner1 h4, .inner1 h5, .inner1 h6 {
	color: var(--font-color-inner);
	font-family: Marker Felt, fantasy;	
} 


.hidden {
	
}

.hiddens {
	border: 3px solid #5f2;	
}


.main-1-1 {
	margin: 10px;
	padding: 10px;
	min-width: 20rem;
	max-width: 30rem;
	position: relative;
}
.main-1-1 img {
	width: 100%;
}
.main-1-1 h1 {
	font-size: 20px;
	position: absolute;
	bottom: 20px;
	left: 20px;
}
.main-1-2 {
	margin: 10px;
	padding: 10px;
	
}
.main-1-3 {
	border: 1px solid #f49;
	margin: 10px;
	padding: 10px;

}
.main-1-4 {
	border: 1px solid #f90;
	margin: 10px;
	padding: 10px;

}
.main-1-5 {
	border: 1px solid #f9f;
	margin: 10px;
	padding: 10px;
	
}
.main-1-6 {
	border: 1px solid #2fc;
	margin: 10px;
	padding: 10px;

}
.main-1-2, .main-1-3, .main-1-4, .main-1-5, .main-1-6 {
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 font-size: 14px;
}
.main-1-2 img, .main-1-3 img, .main-1-4 img, .main-1-5 img, .main-1-6 img {
		 width: 10rem;
}
.main-1-2 a, .main-1-3 a, .main-1-4 a, .main-1-5 a, .main-1-6 a {
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 font-size: 14px;
}


.a1 {
	margin: 0.2rem;
	padding: 0.2em;
	border: 2px solid #998;
	color: #864;
	background: #aa9;
	transition: all 0.4s linear 0.1s;
	border-radius: 1rem;	
}

.a2 {
	margin: 0.2rem;
	padding: 0.2em;
	border: 2px solid #554;
	color: #776;
	background: #888;
	transition: all 0.2s linear 0.02s;
	border-radius: 1rem;
	box-shadow: inset 5px 5px 3px rgba(0,30,0,0.5), inset -4px -10px 6px rgba(250,250,250,0.5), 5px 5px 5px rgba(0,0,50,0.5), -5px -5px 5px rgba(160,160,100,0.5);	
}

.a2:hover{
	transform: rotateX(20deg);
}

.art0 {
   background: #ff9;
   width: fit-content;
   padding: 1rem;
   color: #08f
   font-size: 1.2rem;
}
.art01 {
   background: #000;
   width: 90%;
   padding: 1rem;
   color: #fff;
   font-size: 1.2rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
}
.art01 p {
   color: #fff;
   font-size: 1.2rem;
}
.art02 {
   background: #fca;
   width: fit-content;
   margin: 1rem;
   padding: 1rem;
   color: #5a0;
   border: 4px solid #f62;
   border-radius: 2rem;
   font-size: 1.3rem;
}
.art03 {
   background: #777;
   width: fit-content;
   padding: 1rem;
   color: #fff;
   font-size: 1rem;
}

.art0 p {
    color: #08f;
}

.art1 {
    color: #204;
}
.art2 {
    color: #f80;
}
.art3 {
    color: #95f;
}
.art4 {
    color: #00f;
}
.art5 {
    color: #6f0;
}
.art6 {
    color: #009;
}
.art7 {
    color: #456;
}
.art8 {
    color: #f00;
}
.art9 {
    color: #5af;
}
.art10 {
    color: #fff;
}

.art11 {
    color: #fff;
    font-weight: bold;
}
.art12 {
    color: #67f;
    font-weight: bold;
}
.art13 {
    color: #609;
    font-weight: bold;
}
.art14 {
    color: #f80;
    font-weight: bold;
}
.art15 {
    color: #ff0;
    font-style: italic;
    font-weight: bold;
}
.art16 {
    color: #44f;
    font-style: italic;
    font-weight: bold;
}
.art17 {
    color: #6f0;
    font-style: italic;
}
.art18 {
    color: #009;
    font-style: italic;
}
.art19 {
    color: #f60;
    font-style: italic;
}
.art20 {
    color: #550;
    font-style: italic;
}
.art21 {
    color: #030;
}
.art22 {
    color: #600;
}
.art23 {
    color: #040;
}
.art24 {
    color: #222;
}
.art25 {
    color: #237;
}
.art26 {
    color: #030;
    background: #7f9;
}
.art27 {
    color: #600;
   background: #f82;
}
.art28 {
    color: #040;
    background: #8f3;
}
.art29 {
    color: #400;
    background: #6f9;
}
.art30 {
    color: #004;
    background: #a5f;
}


.art31 {
    color: #ff0;
    font-weight: bold;
    font-size: 1.4rem;
}
.art32 {
    color: #03f;
    font-weight: bold;
    font-size: 1.4rem;
}
.art33 {
    color: #6f0;
    font-style: italic;
    font-size: 1.4rem;
}
.art34 {
    color: #490;
    font-size: 1.4rem;
}
.art35 {
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
}
.art36 {
    color: #23f;
    font-style: italic;
    font-size: 1.6rem;
}
.art37 {
    color: #0f8;
    font-size: 1.6rem;
}
.art38 {
    color: #62f;
    font-weight: bold;
    font-size: 1.6rem;
}
.art39 {
    color: #8a0;
    font-style: italic;
    font-weight: bold;
    font-size: 1.6rem;
}
.art40 {
    color: #f72;
    font-size: 2rem;
}


@media (max-width: 1080px) and (orientation: portrait) and (min-width: 911px) {
	body {
		font-size: 18px;
	}
	
	.hidden {
		display: none;		
	}
	.main1-1-1, .main1-1-2, .main-1-3, .main-1-4, .main-1-5, .main-1-6 {
		 width: 100%;
	}
	.main-6 {
		width: 100%;
		flex-wrap: wrap;
	}	
    .main-7-catalog {
		width: 580px;
	}
	.main-7-catalog:hover {
		transform: rotateX(5deg) rotateY(2deg);
		box-shadow: inset 25px 30px 25px rgba(255, 255, 210, 0.5), inset -20px -30px 15px rgba(0, 0, 20, 0.3), 10px 20px 20px rgba(250, 150, 100, 0.3), -15px -15px 15px rgba(10, 10, 60, 0.3);		
	}	
	.main-8-big {
        grid-template-columns: 1fr;
		width: 100%;
	}
	
	.main-9 {
		width: 96%;
		margin: 1rem;
		padding: 1rem;
	}
		
	.main-10 {
		max-width: 6rem;
	}
	
	.main-11-catalog {
		width: 90%;
	}
	
	.main-14 {
		width: 100%;
		}
	.main-15-big {
		flex-wrap: wrap;
	}
	.main-15-all {
		width: 40%;
	}
	.main-15-all {
		max-width: 12rem;
	}
	.main-18-big {
		flex-wrap: wrap;
		width: 100%;
	}
	.main-18-top {
		width: 100%;
	}
	.main-18-container {
		width: 100%;
		flex-wrap: wrap;		
	}
	.main-18-right {
		width: 100%;
	}
	.main-18-article1 img{
		width: 94%;
		height: auto;
	}
	.main-18-article2 {
		font-size: 16px;
		margin:	2rem 1rem;
		width: 14rem;	
	}
	.main-20-1 {
		width: 94%;
	}
}

@media (max-width: 1080px) and (orientation: landscape) and (min-width: 911px) {
	body {
		font-size: 18px;
	}
	.hidden {
		display: none;		
	}
	.main-6 {
	width: 100%;
	flex-wrap: wrap;
	}	
    .main-7-catalog {
		width: 580px;
	}
	.main-7-catalog:hover {
		transform: rotateX(5deg) rotateY(2deg);
		box-shadow: inset 25px 30px 25px rgba(255, 255, 210, 0.5), inset -20px -30px 15px rgba(0, 0, 20, 0.3), 10px 20px 20px rgba(250, 150, 100, 0.3), -15px -15px 15px rgba(10, 10, 60, 0.3);		
	}
	.main-9 {
		width: 98%;
		margin: 1rem;
		padding: 1rem;
	}	
	.main-11-catalog {
		width: 90%;
	}	
	.main-14 {
		width: 100%;
	}
	.main-15-big {
		flex-wrap: wrap;
	}
	.main-15-all {
		width: 40%;
	}
	.main-15-all {
		max-width: 12rem;
	}
	.main-18-big {
		flex-wrap: wrap;
		width: 100%;
	}
	.main-18-top {
		width: 100%;
	}
	.main-18-container {
		width: 100%;
		flex-wrap: wrap;		
	}
	.main-18-right {
		width: 100%;
	}
	.main-18-article1 img{
		width: 94%;
		height: auto;
	}
	.main-18-article2 {
		font-size: 16px;
		margin:	2rem 1rem;
		width: 14rem;	
	}
	.main-20-1 {
		width: 94%;
	}
}

@media (max-width: 910px) {
	body {
		font-size: 14px;
	}
	.hidden {
		display: none;		
	}
	.main1-1, .main-1-2, .main-1-3, .main-1-4, .main-1-5, .main-1-6 {
		 width: 100%;
	}
	.main-6 {
	width: 100%;
	flex-wrap: wrap;
	}
    .main-7-catalog {
		min-width: 90%;
	}	
	.main-7-catalog:hover {
		box-shadow: inset 25px 30px 25px rgba(255, 255, 210, 0.5), inset -15px -20px 15px rgba(0, 0, 20, 0.4), 10px 20px 20px rgba(250, 150, 100, 0.3), -15px -15px 15px rgba(10, 10, 60, 0.3);
		transform: rotateX(5deg) rotateY(2deg);
	}
	.main-8-big {
        grid-template-columns: 1fr;
		width: 100%;
	}
	
	.main-9 {
		width: 100%;
		margin: 0;
	}
	.main-10 {
		min-width: 6rem;
	}
	.main-11-catalog {
		width: 90%;
	}
	
	.main-14 {
		width: 100%;
	}
	.main-15-big {
		flex-wrap: wrap;
	}
	.main-15-all {
		width: 40%;
	}
	.main-15-all {
		max-width: 12rem;
	}
	.main-18-big {
		flex-wrap: wrap;
		width: 100%;
	}
	.main-18-top {
		width: 100%;
	}
	.main-18-container {
		width: 100%;
		flex-wrap: wrap;
		align-items: center;
	}
	.main-18-right {
		width: 100%;
	}
	.main-18-article1 img{
		width: 94%;
		height: auto;
	}
	.main-18-article2 {
		font-size: 16px;
		margin:	2rem 1rem;
		width: 12rem;	
	}
	.main-20-1 {
		width: 94%;
	}


table {
  border-collapse: collapse;          /* объединяем границы */
  width: 100%;                        /* таблица на всю ширину */
  font-size: 0.9em;                   /* шрифт чуть мельче основного */
  background-color: #fff9e6;          /* светло-жёлтый фон */
  color: #5c4033;                     /* коричневый текст */
}

th, td {
  border: 1px solid #d2b48c;          /* коричнево-бежевые границы */
  padding: 8px 12px;                  /* отступы внутри ячеек */
  text-align: left;                   /* выравнивание текста */
}

th {
  background-color: #fbeabc;          /* фон для заголовков */
  font-weight: bold;
}


}