:root{--screen-foneColor: white; --logo-fontColor: #fc5e5e; --btn-backColor: rgba(114, 59, 51, 0.06); --txtColor: #635d68; --navColor: #fff}
*{outline: none !important; user-select: none !important;}
@font-face{font-family: "Tahoma"; src: url("../fonts/tahoma.ttf"); font-weight:normal; font-style:normal}
@font-face{font-family: "Tahoma"; src: url("../fonts/tahomabd.ttf"); font-weight:bold; font-style:normal}
html{font-family:"Tahoma"; color: var(--txtColor); font-size:16px; font-weight:400; line-height:1.5;}
body{background-color: var(--screen-foneColor); overflow-y: auto; overflow-x: hidden; margin:0; width:100%}

.wrapper{width:100%; margin:0}
#main_content{width:100%; background-color: transparent}
.no-scroll{height:100%; width:100%; overflow:hidden;}
.flex_break{flex-basis: 100%; height: 0; margin:0}

/*анимации*/
@keyframes zoom_in {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
@keyframes zoom_out {
  from {transform:scale(1)} 
  to {transform:scale(0)}
}
@keyframes top_in {
  from {top:-350px; opacity:0} 
  to {top:-30px; opacity:1}
}
@keyframes top_out {
  from {top:-30px; opacity:1} 
  to {top:-350px; opacity:0}
}
@keyframes rotate_in {
  from {transform:rotateX(-90deg); opacity:0} 
  to {transform:rotateX(0deg); opacity:1}
}
@keyframes rotate_out {
 from {transform:rotateX(0deg); opacity:1} 
 to {transform:rotateX(-90deg); opacity:0}
}
.fade {animation-name: fade; animation-duration: 5s}
@keyframes fade {
	0% {opacity: 0} 
	50% {opacity: 1}
	100% {opacity: 0}	
}
.rotate90{animation-name: rotate90; animation-duration: 1s}
@keyframes rotate90 {
  from {transform:rotateZ(0deg)} 
  to {transform:rotateZ(90deg)}
}
.is_present{animation-name: present; animation-duration: 1.2s}
@keyframes present{
	0% {transform:scale(1)}
	50% {transform:scale(1.25)}
	100% {transform:scale(1)}
}

#header_table{position:relative; display:block; margin-bottom:30px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.5)}
#header_katalog{z-index:25; color:var(--txtColor); padding-left:30px; text-align:left; line-height:1.1; overflow-y:auto;}

.slide_img{/*max-width: 100%; height: auto;*/ width:100%; height:100%; object-fit: contain; opacity:0}
.logo-wrap{flex:0 0 15.5%; display:flex; justify-content:center; align-items:center;}

/*Главное меню*/
#navbar{position:fixed;top:0;right:0;left:0;bottom:0;height:2.8rem;padding:0;z-index:2; margin:0;background-color:var(--logo-fontColor); vertical-align:middle; box-shadow:0 0 12px 0 rgba(0,0,0,0.5);}
.navbar-sticky{position: fixed; top: 0;}

#mainmenu-large, #mainmenu-small{list-style:none; margin:0; padding:0; background-color:var(--logo-fontColor); letter-spacing: 1px}
	.mainmenu-li{margin:0.6rem 0 0 0; font-size:1.25rem; line-height:1; font-weight:100; border-right:1px solid white; height:27px}
	.mainmenu-a{color:var(--navColor); text-decoration:none; padding:0 .5em 0 .5em; cursor:pointer}
	.mainmenu-a:hover{text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4)}

.navbar-icon{position:relative; top:-1px; height:27px; width:auto; vertical-align:middle}

/*all popup windows*/
.popup{display:none; border-bottom-left-radius:7px; border-bottom-right-radius:7px; box-shadow:5px 9px 12px 0px rgba(0, 0, 0, 0.3)}
.popup_closer{position:relative; float:right; background-color:#d9d9d9; height:35px; width:35px; border-radius:18px; margin:10px} 
.popup_closer:hover{background-color:#c1c1c1; cursor:pointer}
	.close_icon{display:block; width:18px; margin:8px auto}

.banner{display:block; position:absolute; width:25%; margin-top:60px; right:15%; padding:10px; background-color:azure;}

#submenu-ul, #subnew-ul, #subcontacts-ul{position:absolute; top:2.8rem; left:10px; z-index:25; background-color:white; transform-origin:0% 0%; list-style:none; padding:10px 10px 10px 20px; overflow-y:auto; }
#subcontacts-ul{width:14.5rem; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; padding:10px 15px 0px 15px}
#subnew-ul{padding:10px 10px 10px 15px;}
	.submenu-li, .subnew-li, .subkatalog-li, .subcontacts-li{margin:10px 3px 12px 0; font-size:1.05rem; line-height:1.3rem; font-weight:400; border-right:1px solid white}
	.subnew-li{margin:10px 3px -10px 0; padding-top:0; height:52px}
	.subkatalog-li{letter-spacing:0.5px; font-size:0.95rem}
	.subcontacts-li{margin:0; padding-top:7px}
	.submenu-a, .subnew-a, .subkatalog-a, .subcontacts-a{color:var(--txtColor); text-decoration:none; cursor:pointer}
	.subkatalog-a, .subcontacts-a{text-decoration:underline}
	.submenu-a:hover, .subnew-a:hover, .subkatalog-a:hover, .subcontacts-a:hover{color:var(--logo-fontColor)}
	.submenu-ul_show, .subnew-ul_show, .subcontacts-ul_show{animation-name: rotate_in; animation-duration: 0.2s}
	.submenu-ul_close, .submenu-ul_close, .subcontacts-ul_close{animation-name: rotate_out; animation-duration: 0.2s}

.flex-rowContainer{display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; margin:0} /*justify-content:left*/
.flex-rowContainer::after{content: ""; flex: auto}
.flex-columnContainer{display:flex; flex-direction:column; justify-content: flex-start; align-items: flex-start; flex-wrap:nowrap; margin:0}
.flex-Rowbreak{flex-basis: 100%; height: 0;}

.bookshelf{list-style-type:none; padding-left:0}
.book_item{flex:0 0 auto}
.bookItem_header{text-align:right; margin:0 0 8px 35px; font-size:1.0rem; font-weight: bold; line-height: 1.2;}
.bookshelf__cover, .new-icon{transition:transform 200ms linear}
.bookshelf__link:hover .bookshelf__cover{transform:scale(1.1)}
.bookshelf__link:hover .new-icon:before{transform:scale(1.1)}
.book_cover__shadow, .cover_shadow{height: 50px; margin: 0 auto; z-index: -1}
.book_cover__shadow{position: absolute; left: 19px; right: 19px; bottom: 12px; box-shadow:0 8px 10px 7px rgba(0,0,0,.3); display:none}
.cover_shadow{position:relative; box-shadow:0 10px 10px 8px rgba(0,0,0,.3); border-radius:10px}
.book_cover{height:auto; width:380px}
.book_cover-info{position:absolute; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; left:0px; right:0px;  height:3.1rem; z-index:-1; font-size:1.0rem; color:var(--txtColor); padding-top:13px; display:none}

.section-header{color:var(--logo-fontColor); font-size:1.7rem; font-weight:900; letter-spacing:1px; line-height:1.1; padding-right: 10px;}
.section_smallHeader{text-align:left; margin:0; font-size:1.0rem; font-weight: bold; line-height: 1.2;}
.sections_href{position:relative; display:inline-block; color:#007bff; background-color:transparent; font-size:.8rem;}
.section-note{
	width:95%;
	display:flex; flex-direction: row; justify-content:left; align-items: flex-start; flex-wrap:wrap; color:var(--txtColor); font-size:1.2rem; font-weight:400; padding:0 10px 0 0; text-align:center;background-color: var(--screen-foneColor); user-select: none;
}
	.note-text{flex:0 0 35%; overflow-y:auto; font-size:1.05rem; text-align:left; vertical-align:top; padding:0px 15px 0 0; margin:0 0 20px 0}
		.note-text p:first-child{margin-top:0}
		.note-shadow{box-shadow:0px 15px 20px -20px rgba(0,0,0,0.4) inset, 0px -15px 20px -20px rgba(0,0,0,0.4) inset}
	.note-media{display:flex; flex-direction:column; justify-content: flex-start; flex:0 0 50%; margin-left: 20px;}
	.note-img  {width:100%; height:100%; object-fit:contain; display:block; margin:0 auto;}
	.note-video{max-width: 90%; height: auto; display:none}
	.note-controls{flex:0 0; padding-left:10px}
	.note-link{margin-bottom: 12px; padding-left:0px; font-size:.95rem; letter-spacing:.5px; text-decoration:underline; color:var(--txtColor); cursor:pointer}
	a[onclick="Site.DescriptionClick(0)"] {color:#fc5e5e}

.new-icon:before{position:absolute;top:-20px;left:-20px;background-image:url(../site_data/new.svg);content:'';height:40px;width:40px;z-index:1;transform:scale(1.4)}
.new-icon_small:before{position:absolute;top:-15px;left:-15px;background-image:url(../site_data/new.svg);content:'';height:30px;width:30px;transform:scale(1.4)}
.Ru-icon:after{background-image:url(../site_data/RU.svg)}
.Ua-icon:after{background-image:url(../site_data/UA.svg)}
.Ua_Ru-icon:after{background-image:url(../site_data/RU-UA.svg)}
.Ru-Ua-icon:after{background-image:url(../site_data/RU-UA.svg)}
/*.info-icon:after{position:absolute;top:99px;right:-45px;background-image:url(../site_data/inform_icon.png);content:'';height:34px;width:34px;z-index:1}*/
.control_icons{height:37px; width:auto; border-radius:20px; cursor:pointer; opacity:1; vertical-align:middle}
.control_icons:hover{box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.5)}

#to-top-btn{position:fixed; right:20px; bottom:10px; background:var(--logo-fontColor); border:2px solid #fff; display:none; padding:15px; width:auto; z-index:0}
.to-top-btn__arrow{border-bottom:7px solid #fff; border-left:7px solid transparent; border-right:7px solid transparent; display:block; height:0; width:0}

#delivery{width:96%}
.delivery-paragraph{font-size:1rem; margin:5px 10px 0px 10px; color:var(--txtColor)}
.copyright{background-color:var(--logo-fontColor); color:var(--navColor);font-size:.9rem;margin:0;padding:10px 100px 10px 0;text-align:right}

#slider{
	position: fixed;
	overflow-x:hidden; overflow-y:auto; opacity:1;
	background:white; /*linear-gradient(140deg, lightgray 0%, white 25%, lightgray 90%)*/
	display:none;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:left;
	align-content:flex-start;
	align-items:flex-start;
	z-index:1;
	font-size:1.3rem; line-height:1.3; color:black;
	padding: 25px;
    right:0; left:0; margin: auto;
}
	#slider_closeControls{display:flex; flex-direction:row; justify-content:flex-end; align-items:center; flex-wrap:nowrap; width:100%; margin:-20px -10px -20px 0}
	#slider_container{flex: 0 0; display:flex; flex-direction:column; align-items:center; align-self:start; flex-wrap:nowrap; margin:10px auto}
	#slider_generalContorls{display:flex; flex-direction:row; justify-content:space-between;align-self:center; padding:0 0 30px 0; width:100px; margin:20px 0 0 0px}
	
	#all_covers{display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; margin:10px auto/*flex: 0 0 43%*/}
		.cover-price{flex: 0 1 15%; margin:10px 5px 20px 5px}
		.price{color:var(--txtColor);display:flex; flex-direction:column; justify-content:left; font-weight:600; padding-top:0px; width:100%; line-height:1.7;  margin:-30px auto;}
		.price_small{font-size:16px; font-weight:400;}
		.cover_div{margin: 0 auto; text-align: center; min-width:250px; width:15%; min-height:260px; height:40%; position:relative; padding:0}
		.cover_img:hover{transform:scale(1.1); transition:transform 200ms linear}

	#slider_description{flex:1 0;
		overflow-x:hidden; overflow-y:auto;
		margin:13px 0 25px 20px;
		border:0; box-shadow: none;
		vertical-align:top; text-align:left; user-select:none;
		min-width: 360px;
	}
		#slider_header, #chars_header{flex: 0 0 100%; color: var(--logo-fontColor); margin:0 0 15px 0; font-size:1.56rem; text-align:left; letter-spacing: 1px}
		#chars_header{margin:10px 0 0px 0; font-size:1.15rem; letter-spacing: 0.5px}
		#slider_text{color: var(--txtColor); font-size: 1rem; line-height: 1.4; text-indent: 15px; margin-left:0}
			.list_p{text-indent: -15px}
		#slider_chars{flex:0 0 100%; margin:20px 0 0 0; color:var(--txtColor); font-size:1rem; line-height:1.8; text-align:left;}
		#slider_text p:first-child, #slider_chars > p{margin-top:0}
		#slider_text p{text-indent: 0}

	.to_order{border:none; font-size:1.1rem; font-weight:400; border-radius:7px; height:2.85rem; padding:0 10px; box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5); vertical-align:middle; cursor:pointer}
.slider_show{animation-name: zoom_in; animation-duration: 0.6s}
.slider_close{animation-name: zoom_out; animation-duration: 0.6s}

#help{
	position: fixed;
	width:80%; top:2.87rem; left:0px; right:0px; margin:0 auto; max-height:80%;
	overflow-x:hidden; overflow-y:auto;
	display:none;
	z-index:2;
	line-height:1.5; color:black;
	padding: 12px 20px 12px 30px;
	background-color: white;
}
	.help-header{color:var(--logo-fontColor); font-size:1.7rem; font-weight:900; letter-spacing:1px; margin:12px 0 0 10px}
	.help_show{animation-name: zoom_in; animation-duration: 0.5s}
	.help_close{animation-name: zoom_out; animation-duration: 0.5s}

#aboutUS{
	position:fixed;
	overflow-y:auto;
	width:100%; top:-30px; max-height:100%;
	color:white;
	list-style-type:none;
	font-size: 14px;
	background-color: var(--logo-fontColor);
	display:none;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap:wrap;
	margin:30px 0 0 0;
	z-index:20;
	border: 2px solid white;
}
	.aboutUS_show{animation-name: top_in; animation-duration: 0.8s}
	.aboutUS_close{animation-name: top_out; animation-duration: 0.8s}

/*секция заказа*/
#order_container{
	width:100%;
	color:black;
	list-style-type:none;
	background-color: var(--screen-foneColor)/*beige*/;
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	flex-wrap:nowrap;
	margin:30px 0 0 0
}
#order_div{flex:0 0 67%; max-height:490px; overflow-y:auto; margin: 0 20px 20px 20px; background-color: transparent; text-align: center}
#order_table{width:100%; cellspacing:0; cellpadding:5px; column:6; row:1; border-collapse:collapse; font-size:1rem; font-weight: normal; }
#order_table th, #order_table td{text-align:center; valign:middle; border:1px solid rgba(0, 0, 0, .3); height:40px; padding: 0 5px 0 5px;}

.contacts{color:white;list-style-type:none; padding-left:20px}
#contact-form{flex:1 0 320px; min-width: 275px; margin:0 20px 0 35px;}
.contacts__item{margin-bottom:.5rem}
.form{padding-bottom:3rem}
.form__item{line-height:normal;margin-bottom:1.5rem; font-size: 1rem;}
.form__label{color:black; width:200px}
.form__input{border:0; border-radius: 0; height:2.5rem; line-height:2.5rem; width:97%; font-size:0.875rem; background-color:#ececec}
.form__input_textarea{height:10rem;line-height:normal;padding-top:1rem;vertical-align:bottom;margin-bottom:0; font-size: 1rem}
.error-message{color:red; font-size:.8125rem; padding-top:5px; text-align:left}
#contact_submit{margin:0 15px 0 auto; color:var(--txtColor); background-color: white; font-size: 1rem; font-weight: 700 }
.contacts_href:link, .contacts_href:visited, .contacts_href:active{color:white}

.inc, .inp, .dec, .td__name{font-size:1.1875rem; color: #154390; font-weight: 600; background-color:transparent; text-align:center; vertical-align:middle; cursor:pointer; width:25px; padding:0; margin:0}
.inc, .dec{height:30px; width:40px; border:0.5px solid #154390; border-radius: 10px;}
.td__name{width:100%; font-weight:200}

/* API Новая Почта*/
.namelist{
	position:absolute;
	background:#fff;
	font-size: 0.75rem;
	max-height: 300px;
	max-width: 60%;
	overflow-y:auto;
	line-height:2.0;
	box-shadow:0 0 20px 0 rgba(0,0,0,0.5);
	padding-left: 10px;
	margin-left: 0px;	
}
.list:hover{
	background:#f5f5f5;
	cursor:pointer;
}

.bonus_icon:before{position: absolute; top:-28px; left:-28px; background-image: url("../site_data/bonus-icon 56.png"); content:''; height:56px; width:56px; z-index:1}


/*МЕДИАЗАПРОСЫ*/
/* Очень маленькие устройства (телефоны, 480px и ниже) Nexus 7 portrait, Galaxy 3 portrait, iPhone X portrait*/
@media only screen and (max-width: 600px){
	html{font-size: 14px}
	html::before {content: '0'; display: none}
	/*#main_content {background-color: cyan}*/
	#order_div{flex: 0 0 90%}
	#header_table{display:none}
	.note-text{flex:0 0 80%; height:auto; max-height:200px;}
	.note-media{flex:0 0 68%; margin:0}
	#slider{width:93%}
	.section-header{margin:20px 0 0 25px}
	.section-note{margin:20px 0 70px 25px}
	.book_item{margin:0 25px 75px 25px}
	#help{width:87%; left:0; height:100%}
	#all_covers{flex-wrap: wrap}
}

/* Маленькие устройства (портретные планшеты и большие телефоны, 481px и выше) iPad portrait, Galaxy 3 landscape*/
@media only screen and (min-width: 601px) and (max-width: 768px) {
	/*#main_content {background-color: yellow}*/
	html::before {content: '1'; display: none}
	#order_div{flex: 0 0 90%}
	#header_table{display:none}
	.note-text{flex:0 0 75%; height:auto; max-height:200px; }
	.note-media{flex:0 0 75%}
	#slider{width:93%}
	#help{width:86%; left:0; height:100%}
	.section-header{margin:20px 0 0 25px}
	.section-note{margin:20px 0 70px 25px}
	.book_item{margin:0 25px 75px 25px}
	#all_covers{flex-wrap: nowrap}
}

/* Средние устройства (альбомные планшеты, 768px и выше) , Nexus 7 lalndscape*/
@media only screen and (min-width: 769px) and (max-width: 991px)  {
	/*#main_content {background-color: green}*/
	html::before {content: '2'; display: none}
	#order_div{flex: 0 0 90%}
	.note-text{flex:0 0 34%;}
	.note-media{flex:0 0 48%}
	#slider{width:95%}
	.section-header{margin:20px 0 0 30px}
	.section-note{margin:20px 0 70px 30px}
	.book_item{margin:0 30px 75px 30px}
	#all_covers{flex-wrap: nowrap}
}

/* Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) iPad landscape**/
@media only screen and (min-width: 992px) and (max-width: 1199px){
	/*#main_content {background-color: red}*/
	html::before {content: '3'; display: none}
	#order_div{flex: 0 0 90%}
	.note-text{flex:0 0 34%;}
	.note-media{flex:0 0 48%}
	#slider{width:95%}
	.section-header{margin:20px 0 0 30px} 
	.section-note{margin:20px 0 70px 30px}
	.book_item{margin:0 30px 75px 30px}
	#all_covers{flex-wrap: nowrap}
}

/* Очень большие устройства (большие ноутбуки и настольные компьютеры, от 1200px до 2000)*/
@media only screen and (min-width: 1200px) and (max-width: 1999px) {
	/*#main_content {background-color: blue}*/
	html::before {content: '4'; display: none}
	#order_div{flex: 0 0 67%}
	.note-text{flex:0 0 35%;}
	.note-media{flex:0 0 50%}
	#slider{width:75%}
	.section-header{margin:20px 0 0 40px} 
	.section-note{margin:20px 0 70px 40px}
	.book_item{margin:0 40px 75px 40px}
	#help{width:60%;}
	#all_covers{flex-wrap: nowrap}
}

/* Мега большие устройства Mac 27 (2560 х 1440)*/ 
@media only screen and (min-width: 2000px) {
	/*#main_content {background-color: blue}*/
	html{font-size: 22px}
	html::before {content: '5'; display: none}
	#order_div{flex: 0 0 67%}
	.note-text{flex:0 0 30%;}
	.note-media{flex:0 0 40%}
	#slider{width:60%}
	#slider_description{margin-left:50px}
	.section-header{margin:20px 0 0 50px} 
	.section-note{margin:20px 0 70px 50px}
	.book_item{margin:0 50px 75px 50px}
	#help{width:50%}
	#all_covers{flex-wrap: nowrap}
}

@media only screen and (max-height:640px){
	/*#main_content {background-color: white}*/
	#header_table{display:none}
}
@media only screen and (max-height:360px){
	/*#main_content {background-color: white}*/
	#header_table{display:none}
}